/* ligne font adobe xd : font: font-style font-variant font-weight font-size/line-height font-family; */ /* les z-index : la base à 0 les flèches prev/next à 10 les popup notes à 20 le menu à 1000 */ :root { --couleurPrincipale : #1C75BC; --couleurPrincipaleDark : #0E3B5E; --couleurFondDark : #333333; --couleurDebutDegrade : #0E3B5E; --couleurFinDegrade : #1C75BC; --couleurPrincipaleHover : #A8E8E3; --couleurSecondaire : #4B9892; /* // feedbackBG, faireundon --couleurPrincipale : #c26225; --couleurDebutDegrade : #632705; --couleurFinDegrade : #c26225; --couleurPrincipaleHover : #d3b89a; --couleurSecondaire : #b59467; // feedbackBG, faireundon */} .gbot { text-indent:-2567px; } * { box-sizing: border-box; } body { background-color:#fff; line-height:1em; font-family:Nunito; /* overflow-y: hidden */ } img.lightmodeonly { display:inline; } img.darkmodeonly { display:none;} /* desactivé webp pour l'instant à cause de Safari url(/leguide/cdn/covers/2021-3-cover-img.webp), image-set( url("/leguide/cdn/covers/2021-3-cover-img.webp") type("image/webp"), url("/leguide/cdn/covers/2021-3-cover-img.safari.jpg") type("image/jpeg") ) ->mis dans incheader en automatique #content #dateAndCover .cover, #content .halfWidth .halfColumn .coverdecoration svg { background-image: url(/leguide/cdn/covers/2021-3-cover-img.safari.jpg) } */ .bible sup { color:#707070; vertical-align: super; top: 1px; font-size: 0.65em; margin-right:2px; } .bible p { margin:0 0 1.3em 0; } /* .notesTransferJS {position:absolute; bottom:0; left:-99999px } */ /* NOTES */ #stepMediteContent sup.note,#stepVisLeContent sup.note { background: #E2F2FF; border-radius: 3px; padding: 2px 4px; margin-left:0.3em; } #stepMediteContent .enrelief sup.note { background:#fff; } #stepMediteContent .noteInline,#stepVisLeContent .noteInline { background: #E2F2FF; box-shadow: 0px 0px 6px #00000029; border-radius: 3px; font-size:16px; line-height:1.25em; font-family: Assistant; letter-spacing: -0.08px; color: #161615; display:none;position:absolute; padding: 1em 1.2em } /*#content #stepSheets #stepMedite .notes .note { padding:6px; display:block; } */ #stepMediteContent .noteInline.open,#stepVisLeContent .noteInline.open { display:block; margin-top:-1em } .notesTransferJS ul.notes { margin:0; padding:0.5em 1.2em; background: #E2F2FF; box-shadow: 0px 0px 6px #00000029; border-radius: 3px; list-style:none; font-size:0.8em; } .notesTransferJS ul.notes li { padding:0.5em 0; } /*.notesTransferJS span.note { background: #E2F2FF; box-shadow: 0px 0px 6px #00000029; border-radius: 3px; transition: opacity 0.3s ease-in-out; opacity:0; width: auto; z-index: 20; top: 0; display:block;max-width:300px } .notesTransferJS span.note span.note_title { display:none;} .notesTransferJS span.note span.note_content { font-size:16px; line-height:1.25em; font-family: Assistant; letter-spacing: -0.08px; color: #161615; padding:6px;_white-space:nowrap; display:block;} .notesTransferJS span.note.open { opacity:1; position:fixed} */ /*je reprécise la font pour le faire un don, car il pourra être mis dans un toRead */ #faireUnDon a, .faireUnDon a { display:inline-block; border: 2px solid var(--couleurSecondaire); border-radius: 3px; text-align:center; font-family: 'Nunito'; font-weight:600; font-size:14px; letter-spacing: -0.32px; color: var(--couleurSecondaire); text-decoration:none; padding:4px 6px 3px 6px; line-height:1em; } #faireUnDon a:hover, .faireUnDon a:hover { border-color:var(--couleurPrincipaleHover); color:var(--couleurPrincipaleHover); } .faireUnDon a { font-size:1.2em; padding:6px 10px 6px 8px } h4.blocTitle { margin:2em 0 0 0; padding:0.5em 0; border-top:2px dotted #707070; display:flex; flex-flow: row nowrap; align-items:center; } h4.blocTitle.blocTitleFirst { border-top:none; padding-top:0; margin-top:0} h4.blocTitle>span { font-size:24px; line-height:1em; font-weight:bold; color:var(--couleurPrincipale); /* 2024-10-08 text-transform:uppercase */ } h4.blocTitle>span>span { font-weight:normal; } h4.blocTitle img { height:30px; margin-right:12px; } #content .toRead { font-size: 17px; font-family: Assistant; line-height:1.5em; letter-spacing: -0.22px; color: #161615;} #content .toRead h3 { margin:1em 0 0.6em 0 } .formsuccess, .formerror { margin-top:1em 0 0.6em 0; padding:22px; font-size: 17px; line-height:1.5em; font-family:Assistant; letter-spacing: -0.2px; } .formsuccess { background: #E2F2FF; color: #161615 ; } .formerror { background: var(--couleurSecondaire); color: #FFFFFF ; } #contentMaxWidth { background-color:#eaeaea; } #content { max-width:90%; margin:0 auto; } /* #entete */ #entete { padding:16px 15px 0 15px; min-height:132px; background-color:#fff; } #entete .container #logoDesc { margin-top:-10px; margin-left: 40px;font-size:8.2px;letter-spacing:0.025em; text-transform:lowercase; } #entete .container #logoDesc span { display:none; } #entete .container .stickyBand .stickyBandFirstLine { display:flex; flex-flow: row wrap; align-items:center; width:100%; } #entete .container .stickyBand .stickyBandFirstLine #logo img { width:180px; height:30px; } #entete .container .stickyBand .stickyBandFirstLine #faireUnDon { flex-grow: 1; text-align:right; margin-right:9px; } /*#entete .container .stickyBand #menu img { width:23px; height:17px; display:block; }*/ #entete .container .stickyBand .stickyBandFirstLine #menu svg rect { fill: var(--couleurPrincipale) } #entete .container .stickyBand .stickyBandFirstLine #menu:hover svg rect { fill: #b5deff } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay { position: fixed; background: var(--couleurPrincipale); box-shadow: -5px 0px 10px #00000029; top: -5px; right: 0; height: calc( 100vh + 5px ); } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay { opacity:0; z-index:-1; } /* pas visible */ #entete .container .stickyBand .stickyBandFirstLine #menuOverlay.visible { z-index: 1000; opacity: 0.95; transition: opacity 0.3s ease-in-out; } /* visible */ #entete .container .stickyBand .stickyBandFirstLine #menuOverlay { padding: 23px 15px 0 15px; width: 100% ; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent { font-weight:600; font-size:18px; line-height:2.5em; letter-spacing: 0px; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent .closeIcon { display:block; text-align:right; line-height:0; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul { border-top: 2px dotted #B5DEFF; border-bottom: 2px dotted #B5DEFF; padding:0; list-style:none; margin-top:6px; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul a { color:#fff; text-decoration:none; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul a:hover { color:#B5DEFF } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul ul.historyDays { border:none; display:flex; flex-flow:row wrap; margin:3px 0 0.7em 0;} #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul ul.historyDays li { border: 1px solid #FFFFFF; border-radius: 3px; width:50px; height:50px; font-size:24px; margin-right:15px; text-align:center; padding-top:3px; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul ul.historyDays li.break { flex-basis: 100%; height: 10px; border:none; } #entete .container .stickyBand #resize { text-align:right; } #entete .container .stickyBand #resize #resizePLUS { font-size:1.1em; text-decoration:none; } #entete .container .stickyBand #resize #resizeMINUS { font-size:1em; text-decoration:none;} #entete .container .stickyBand #resize #resizePLUS, #entete .container .stickyBand #resize #resizeMINUS { text-decoration:none; color:var(--couleurPrincipale); } #entete .container .stickyBand #resize #resizePLUS:hover, #entete .container .stickyBand #resize #resizeMINUS:hover { color:#b5deff; } #content { } /* #dateAndCover */ #content #dateAndCover { margin-top: -45px; padding:10px 6px 10px 20px; background: linear-gradient(270deg, var(--couleurFinDegrade) 40%, var(--couleurDebutDegrade) 100%); letter-spacing: 0px; color: #fff; text-transform: lowercase; font-size:0; /* fs à 0 est important pour l'espace sous l'image */ margin-bottom:18px} #content #dateAndCover .date { font-weight:300; font-size:24px; line-height:1.1em; } #content #dateAndCover .date span { display:block; } #content #dateAndCover .mp3Global { font: normal 18px Assistant; } #content #dateAndCover .mp3Global.green-audio-player { height:24px; margin-top:6px; width:auto; max-width:min(600px, 100%); } #content #dateAndCover .mp3Global.green-audio-player .play-pause-btn svg { width:20px; height:20px; } #content #dateAndCover .msg404 { font: normal 18px Assistant; text-transform:none; padding-bottom:2em; } #content #dateAndCover .troptard h2 { margin:0 0 1em 0; } #content #dateAndCover .troptard a { color:#fff; } #content #dateAndCover .cover { margin-top: -26px; float:right; background-position: center center; background-size: auto 75px } #content #dateAndCover .cover svg.coverSvg { width:100px; height:75px; display:block; } #content #dateAndCover .coverClear { clear: both; visibility: hidden; display: block; font-size: 0; height: 0; } #content #dateAndCover .cover img { max-width:360px } /* news */ .news { background: #f98d59; text-transform: none; font-family:Assistant-Regular, Assistant; letter-spacing:-0.01em; } .news .title { display: flex; flex-flow: row nowrap; align-items: center;} .news .title span { color:#ffd59b; font-family:Nunito-Bold, Nunito; font-weight:700;line-height: 1em; } .news .title svg.punaise { width:20px; height:20px; margin-right:8px } .newsMobile { display:block; font-size:14px; margin-top:0.6em; padding:0.3em 0.5em; font-size: 12px; color:#fff; } .newsMobile>span { margin:0 0.5em; } .newsMobile>a { margin:0 0 0 0.5em; } .newsMobile>a small { font-size:1em;} .newsDesktop { display:none; position: absolute; color:#333; box-shadow: 0px 0px 10px #000a; /* -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); */ /*https://stackoverflow.com/questions/7324722/cut-corners-using-css*/ } .news .newsFirst { display: flex; flex-flow: row nowrap; justify-content: space-between; } .news .newsFirst .close .closeIcon svg { height:20px; } .news .newsSummary { display:none; margin:0.3em 0; color:#fff; font-size:0.8em } .news.newsDesktop .lireLaSuite { display:block; text-align:right; } .news .lireLaSuite { text-decoration:none; color:#333; } .news .lireLaSuite:hover { text-decoration:underline; color:#fff; } /* backToHome */ #content .backToHome { display:none; background: transparent linear-gradient(270deg, var(--couleurFinDegrade) 40%, var(--couleurDebutDegrade) 100%) 0% 0% no-repeat padding-box; position: absolute; padding: 14px 17px 10px 24px ; margin-top: -38px; width: 333px; right:max(0px,calc( 5% + 25px)) ; /* (100% - 90%(max-width)) / 2 + marge du halfwidth/fullwidth */ } #content .backToHome .date { font-weight: 300; font-size: 24px; line-height:1em; color: #fff; text-transform:lowercase; margin-bottom:8px } #content .backToHome .back a { display:flex; flex-flow: row nowrap; align-items:center; text-decoration:none;} #content .backToHome .back a span { font-weight:700; font-size: 13px; line-height:1em; letter-spacing: 0px; color: #B5DEFF; height:19px; padding-top:4px } #content .backToHome .back a:hover span {color: #E2F2FF;} #content .backToHome .back a svg { height:10px; fill:#B5DEFF; margin-right:5px} #content .backToHome .back a:hover svg { height:15px; fill:#E2F2FF;} /* form contact */ #content form.contact, #content form.aboSoutien { } #content form.aboSoutien label { display:none; } #content form.contact input, #content form.aboSoutien input[type=text], #content form.contact textarea, #content form.aboSoutien textarea { width:100%; font-style:italic; font-size:17px; line-height:1em; margin-top: 16px; } #content form.contact input, #content form.aboSoutien input[type=text] { padding:0.6em 0.9em; background-color:#f7f5f5; border:none; } #content form.contact textarea, #content form.aboSoutien textarea { padding:0.8em 0.6em; border:5px solid #eae8e8; min-height:145px} #content form.contact input[type=submit], #content form.aboSoutien input[type=submit] { width:unset; display:block; margin: 16px 0 0 auto; padding:0.6em 3em; background:var(--couleurPrincipale); color:#fff; border:1px solid var(--couleurPrincipale); border-radius:3px; text-transform:uppercase; cursor:pointer } #content form.contact input[type=submit]:hover, #content form.aboSoutien input[type=submit]:hover { background:#eae8e8; color:var(--couleurPrincipale) } #content form.contact .g-recaptcha>div, #content form.aboSoutien .g-recaptcha>div { margin:16px 0 0 auto; } /* flèches gauche/droite */ .stepPrecNext svg circle {fill:var(--couleurPrincipale); r:18px } .stepPrecNext svg:hover circle { r:25.5px;} .stepPrecNext svg path {fill:#fff; stroke:#fff; stroke-width:1px } .stepPrecNext svg:hover circle {transform: scale(1) translate(15,15) } .active a.stepPrec, .active a.stepNext { display:block; } .stepPrecNext a { display:none; position: fixed; z-index: 10; margin-top: 54px; } .stepPrecNext a.stepPrec { left:-13px; } .stepPrecNext a.stepNext { right:-13px } /* Icones step1-4 */ .stepIcons { display:flex; flex-flow: row nowrap; justify-content: space-between; margin:0 6px; } .stepIcons a { text-align:center; text-decoration:none; display:block; width:24%; } .step a { opacity:0; transition: opacity 0.5s ease-in-out; } .step.active a { opacity:1; } .stepIcons a span { font-size:10px; text-transform: uppercase; visibility:hidden; color:#d5d5d5; display:block; margin-top:4px; } .step.active .stepIcons a.active span, .step.active .stepIcons a:hover span { visibility:visible; color:var(--couleurPrincipale); transition: color 0.3s ease-in-out; } .stepIcons svg.stepIcon:first-child { display:none; } .stepIcons svg.stepIcon { width:100%; } .stepIcons svg.stepIcon .rond { fill:#ffffff;stroke-width:2px} .stepIcons .stepIcon.stepIconPause .main { fill:none;stroke-width:2px;stroke-linecap:round;stroke-miterlimit:10 } /*.stepIcons .stepIcon.stepIconLis,.stepIcon.stepIconMedite,.stepIcon.stepIconVis { margin-left:10px; }*/ .stepIcons .stepIcon.stepIconLis path, .stepIcons .stepIcon.stepIconMedite path, .stepIcons .stepIcon.stepIconVis path {stroke:#d5d5d5;stroke-width:2px;fill:none;stroke-linecap:round;} /*.stepIcons svg.stepIcon.m {max-width:110px; } .stepIcons svg.stepIcon.m path, .stepIcons svg.stepIcon.m .rond { stroke-width:1px !important; } */ .stepIcons .stepIcon.stepIconLis path {stroke-linejoin:round;} .stepIcons .stepIcon.stepIconMedite path, .stepIcons .stepIcon.stepIconVis path { stroke-miterlimit:10; } .stepIcons .stepIcon .fill, .stroke, .reduce, .scale{ transition: all 0.3s ease-out; } .stepIcons .stepIcon .fill { fill:#d5d5d5 } .step.active .stepIcons a.active .stepIcon .fill, .step.active .stepIcons a:hover .stepIcon .fill { fill:var(--couleurPrincipale); } .stepIcons .stepIcon .stroke { stroke:#d5d5d5; } .step.active .stepIcons a.active .stepIcon .stroke, .step.active .stepIcons a:hover .stepIcon .stroke { stroke:var(--couleurPrincipale); } .stepIcons .stepIcon .reduce { rx:34px; ry:33.5px} .step.active .stepIcons a.active .stepIcon .reduce, .step.active .stepIcons a:hover .stepIcon .reduce { rx:38px; ry:37.5px} /*.stepIcons .stepIcon .rond, .stepIcons .stepIcon .scale { transform: scale(2) translate(-7px,-2px);transform-origin:left; }*/ /* #stepSheets Global et Offsets */ #content #stepSheets { display:flex; flex-direction:row; flex-wrap:nowrap; align-items: flex-start; overflow:hidden; } #content #stepSheets .step { flex: 1 0 100%; /*grow shrink basis */ background-color:#fff; padding:22px 13px 22px 13px; opacity: 0.4; } #content #stepSheets .step.active { opacity:1 } #content #stepSheets .step h1 { font-weight: bold; font-size:22px; line-height:1em; letter-spacing: 1px; color: var(--couleurSecondaire); margin:0.4em 18px; } #content #stepSheets .step .toRead { margin:0 18px; } #content #stepSheets #stepPause.stepOffset1 { margin-left:0 } #content #stepSheets #stepPause.stepOffset2 { margin-left:-100% } #content #stepSheets #stepPause.stepOffset3 { margin-left:-200% } #content #stepSheets #stepPause.stepOffset4 { margin-left:-300% } /* #stepMedite */ #content #stepSheets #stepMedite #stepMediteQuestions { border-bottom:2px dotted #707070; transition: all 0.5s ease-out; /* margin:46px 0 0 0; padding-bottom:8px; */} #content #stepSheets #stepMedite #stepMediteQuestions { padding:8px 0 8px 0; margin:12px 18px; } #content #stepSheets #stepMedite #stepMediteQuestions.open { padding:8px 8px 8px 18px; margin:12px 0; } #content #stepSheets #stepMedite #stepMediteQuestions h2 { margin:0; padding:0; } #content #stepSheets #stepMedite #stepMediteQuestions h2 { font-size:15px; line-height:1em; } #content #stepSheets #stepMedite #stepMediteQuestions h2 a { color: var(--couleurPrincipale); text-decoration:none; text-transform: uppercase; } #content #stepSheets #stepMedite #stepMediteQuestions h2:hover a { color:var(--couleurSecondaire); } #content #stepSheets #stepMedite #stepMediteQuestions h2 svg { transition: all 0.3s ease-out; transform: rotate(-90deg);} #content #stepSheets #stepMedite #stepMediteQuestions h2 svg path { fill:var(--couleurPrincipale)} #content #stepSheets #stepMedite #stepMediteQuestions h2:hover svg path { fill:var(--couleurSecondaire); } #content #stepSheets #stepMedite #stepMediteQuestions #stepMediteQuestionsDetails { display:none; font-weight:600; line-height:1em; font-family: Assistant; letter-spacing: -0.2px; color: #4A4A4A;padding-top:8px; } #content #stepSheets #stepMedite #stepMediteQuestions #stepMediteQuestionsDetails>ul { list-style:none; padding-left:25px; margin-top:8px} #content #stepSheets #stepMedite #stepMediteQuestions #stepMediteQuestionsDetails>ul>li { margin-bottom:0.6em; } #content #stepSheets #stepMedite #stepMediteQuestions.open { background: #E0EFFA; box-shadow: 0px 3px 6px #00000029; border-left:3px solid var(--couleurPrincipale); border-bottom:none; } #content #stepSheets #stepMedite #stepMediteQuestions.open h2 svg { transform: rotate(0); height:17px; } #content #stepSheets #stepMedite #stepMediteQuestions.open #stepMediteQuestionsDetails { display:block; } #content #stepSheets #stepMedite .enrelief { background: #E0EFFA; box-shadow: 0px 3px 6px #00000029; border-left:3px solid var(--couleurPrincipale); margin:1em 0; padding:0.5em;} #content #stepSheets #stepMedite .auteur { font-style: italic; font-size: 20px; line-height:1em; letter-spacing: -0.2px; margin:1em 0; } #content #stepSheets #stepMedite .auteur a { text-decoration:none; color: #4A4A4A; } #content #stepSheets #stepMedite .auteur a:hover { color: var(--couleurPrincipale); } #content #stepSheets #stepMedite .addThisFlex { align-items:center; } #content #stepSheets #stepMedite .addThisFlex .addThisTitle { font-size:20px; font-weight:700; font-family: Nunito; line-height:1em; color:#fe6550; margin-right:1em; display:flex; flex-flow:row; align-items:center; margin-bottom:0.5em; } #content #stepSheets #stepMedite .addThisFlex .addThisTitle svg { width:24px; height:24px; fill:#fe6550; margin-top:-4px } #content #stepSheets #stepMedite #stepMediteContent > div.addThisFlex > div.addthis_inline_share_toolbox.a2a_kit.a2a_kit_size_32.a2a_default_style > a > span.a2a_label { position:unset !important; display: none !important;} #content #stepSheets #stepMedite .giveUsFeedback { margin-top:40px; background: var(--couleurSecondaire); padding:22px; font-size: 17px; line-height:1.5em; font-family:Assistant; letter-spacing: -0.2px; color: #FFFFFF } #content #stepSheets #stepMedite .giveUsFeedback h3 { margin:0 0 0.6em 0 ; font-weight:700; font-size: 24px; line-height:1em;letter-spacing: 0px; color: var(--couleurPrincipaleHover); } #content #stepSheets #stepMedite .giveUsFeedback form.contact input[type=submit] { background:transparent; border-color: var(--couleurPrincipaleHover); } #content #stepSheets #stepMedite .giveUsFeedback form.contact input[type=submit]:hover { background:#fff; color:#161615; border-color:var(--couleurPrincipaleHover); } #content #stepSheets #stepMedite.step h1 { margin-top:11px; } /* #stepVisLe */ #content #stepSheets #stepVisLe.step h1 { margin-bottom:-0.8em; /* car les h4 ont un margin top */ } #content #stepSheets #stepVisLe.step h1 span { font-size:0.7em; display:block } /* .fullWidth et .halfWidth en realité, half seulement en desktop */ #content .fullWidth, #content .halfWidth { background:#fff; margin-top:-24px; padding:0 25px 35px 25px } #content .fullWidth h1, #content .halfWidth h1 { width:100%; margin-top:0; font-weight: 600; font-size:36px;line-height:1em; letter-spacing: 0px; color: var(--couleurPrincipale); padding-bottom:12px; border-bottom:2px dotted #707070; } #content .halfWidth .halfColumn .coverdecoration { text-align:right; display:none;} #content .halfWidth .halfColumn .coverdecoration.hide { display:none; } #content .halfWidth .halfColumn .coverdecoration svg{ width:250px; height:250px; display:inline-block; background-position: center center; background-size: auto 250px; background-repeat:no-repeat; } #content .halfWidth .halfColumn .coverexemple img { width:100%; } #content .fullWidth h1.withIcon, #content .halfWidth h1.withIcon {display:flex; flex-flow: row nowrap; align-items:center;} #content .fullWidth h1.withIcon img, #content .halfWidth h1.withIcon img { padding-right:0.4em; height:1.25em; } #content .halfWidth .halfColumn.covDecoAndWD img { max-width: 100%; } /* .parcoursMeditationDetail */ #content .halfWidth .halfColumn .planlectureDetail { padding-top:1em; text-align:right; } #content .halfWidth .halfColumn .planlectureDetail img { max-width:100%; } #content .halfWidth .halfColumn .planlectureDetail a { text-decoration:none; } #content .halfWidth .halfColumn .planlectureDetail a .download { display:block; text-align:center; padding-top:0.3em; font-size: 1.2em; color: var(--couleurPrincipale); } #content .halfWidth .halfColumn .planlectureDetail a .download:hover { color: #B5DEFF;} /* .parcoursMeditationDetail */ #content .halfWidth .halfColumn .parcoursMeditationDetail { padding-top:1em; text-align:right; } #content .halfWidth .halfColumn .parcoursMeditationDetail img { max-width:100%; } #content .halfWidth .halfColumn .parcoursMeditationDetail a { text-decoration:none; } #content .halfWidth .halfColumn .parcoursMeditationDetail a .download { display:block; text-align:center; padding-top:0.3em; font-size: 1.2em; color: var(--couleurPrincipale); } #content .halfWidth .halfColumn .parcoursMeditationDetail a .download:hover { color: #B5DEFF;} /* .historyDays */ #content .fullWidth h1.historyDayTitle span { padding-top:-6px; } #content .fullWidth .historyDays .historyDay { background: #F7F5F5; margin-bottom:25px; padding:25px; } #content .fullWidth .historyDays .historyDay .date { font-weight:700; font-size:24px; line-height:1em; letter-spacing: 0px; color: var(--couleurPrincipale); margin-bottom:20px } #content .fullWidth .historyDays .historyDay .reference { font-weight:700; font-size:15px; line-height:1em; letter-spacing: 0px; color: var(--couleurSecondaire); text-transform: uppercase; margin-bottom:20px } #content .fullWidth .historyDays .historyDay .titre { font-weight:700; font-size:15px; line-height:1em; letter-spacing: -0.24px; color: #161615;margin-bottom:20px } #content .fullWidth .historyDays .historyDay .preview { font-size: 14px; font-family: Assistant; line-height:1.5em; letter-spacing: -0.22px; color: #161615; max-height:7.5em; overflow-y:hidden } #content .fullWidth .historyDays .historyDay .preview b { font-weight:700;color:#565655} #content .fullWidth .historyDays .historyDay .preview a { color:#161615; text-decoration:none; display:block} #content .fullWidth .historyDays .historyDay .preview a:hover { color:var(--couleurPrincipale); } #content .fullWidth .historyDays .historyDay .preview a:hover b { color:var(--couleurPrincipale); } #content .fullWidth .historyDays .historyDay .historyDayFooter {margin-top:16px;} #content .fullWidth .historyDays .historyDay .historyDayFooter div a { text-decoration:none; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.auteur { border-left:3px solid #4A4A4A; padding-left:10px; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.auteur a { letter-spacing: -0.2px; color: #4A4A4A;font-size: 14px; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.auteur a:hover { color:var(--couleurPrincipale); } #content .fullWidth .historyDays .historyDay .historyDayFooter div.readmore { margin-bottom:16px; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.readmore a { color: var(--couleurSecondaire); font-style: italic; font-weight:600; font-size: 14px; letter-spacing: 0px; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.readmore a:hover { color:var(--couleurPrincipale); } /* .writers */ #content .halfWidth .writers { display:flex; flex-flow: row wrap; justify-content: space-between; row-gap:25px; } #content .halfWidth .writers .writer { width:30%; /* enlevé car remplacé par row-gap. margin-bottom:25px;*/ text-align:center; } #content .halfWidth .writers .writer a { display:block; text-decoration:none; } #content .halfWidth .writers .writer a span { display:block; font-family:Assistant; font-weight:600; letter-spacing: -0.24px; color: #707070; } #content .halfWidth .writers .writer a:hover span { color:#B5DEFF; } #content .halfWidth .writers .writer .photo { text-align:center; } #content .halfWidth .writers .writer .photo img { width:100%; } #content .halfWidth .writers .writer .nom { } #content .halfWidth .writers .writer .fonction { color:var(--couleurPrincipale); line-height:1.1em; } #content .halfWidth .writers .writer .prenom { margin:0.5em 0} #content .halfWidth .writers .writer .presentation { display:none;} #content .halfWidth .writersComTitle { margin-top: 25px; margin-bottom:12px; /*top: le même que le row-gap*/ } #content .halfWidth .halfColumn .writerDetail { background:#F7F5F5; opacity:0; transition: opacity 0.3s ease-in-out;overflow:hidden } #content .halfWidth .halfColumn .writerDetail a { text-decoration:none;font-weight: 700; font-size: 18px; line-height:1em; letter-spacing: 0px; color: var(--couleurPrincipale);display:block; margin:12px 12px 0 12px; } #content .halfWidth .halfColumn .writerDetail .photo { width:40%; display:block; } #content .halfWidth .halfColumn .writerDetail .photo img { width:100%; display:block; } #content .halfWidth .halfColumn .writerDetail .fonction { color:#B5DEFF; } #content .halfWidth .halfColumn .writerDetail .fonction, #content .halfWidth .halfColumn .writerDetail .prenom_nom { display:block; margin:12px 0 } #content .halfWidth .halfColumn .writerDetail .presentation { font-size: 14px; font-family: Assistant; line-height:1.45em; letter-spacing: 0px; color: #161615;margin:0 12px 18px 12px; } /* presentation */ .presentationPage a.planLecture { text-decoration: none; color: var(--couleurPrincipale); } .presentationPage a.planLecture:hover { color: #B5DEFF;} /* actus */ .actusPage h4.blocTitle { padding-bottom:0; } .actusPage small { color:#444; } .actusPage small.datePublication { font-size:0.6em; margin-bottom:1em; display: inline-block; } .actusPage ul li a { text-decoration:none;color: var(--couleurPrincipale); } .actusPage ul li a small { font-size:0.9em;margin-bottom:0; } .actusPage .covDecoAndWD {margin-top:1em; } /* s'abonner page présentation et abonnement */ #content .halfWidth .halfColumn .sabonner { display:flex; flex-flow: row nowrap; align-items:center; } #content .halfWidth .halfColumn .sabonner svg { height: 1em; transform: rotate(180deg); fill:#B5DEFF ; margin:0.1em 0.5em 0 0; } #content .halfWidth .halfColumn .sabonner a { text-decoration: none; height:1em; font-size: 1.2em; line-height:1em;font-weight:700;color: #B5DEFF; } #content .halfWidth .halfColumn .sabonner a:hover { color: #E2F2FF;} #content .halfWidth .halfColumn ul.abonnementPays li a { text-decoration: none; color: var(--couleurPrincipale); } #content .halfWidth .halfColumn ul.abonnementPays li a:hover { color: #B5DEFF;} .abonnementPage a.aboDeSoutien { text-decoration: none; color: var(--couleurPrincipale); } .abonnementPage a.aboDeSoutien:hover { color: #B5DEFF;} /* Contact */ #content .halfWidth.contactPage .halfColumn.contactFields { width:58%; } #content .halfWidth.contactPage .halfColumn.coverdecoration { width:40%; } #content .halfWidth.contactPage .contactIntro, #content .aboSoutienIntro { font-size:20px; line-height:1.25em; font-weight:600; color: var(--couleurPrincipale); } /* #footer */ #footer .container { padding:49px 0 55px 0; } #footer .container .footerBloc { width:90%; margin:0 auto; font-family: Assistant; font-size:10px; color:#707070; display:flex; flex-flow:row nowrap; align-items: center; } #footer .container .footerBloc:first-child { padding-bottom: 6px; border-bottom:2px dotted #707070; } #footer .container .footerBloc:last-child { padding-top: 6px; } #footer .container .footerBloc div:first-child { margin-right:15px; flex:0 0 160px } #footer .container .footerBloc img { width:100%; } #footer .container .footerBloc:last-child img.logoSBG { width:auto; max-height:45px; } /* Badge recaptcha en bas à droite */ .grecaptcha-badge { visibility:hidden; opacity:0} /* media query */ /* on commence avec les MIN width */ @media (min-width: 500px) { #content #dateAndCover .mp3Global.green-audio-player { max-width:min(600px, calc( 100% - 141px - 20px )) /* cf cover svg width*/; } #content #dateAndCover .cover { background-size: auto 107px } #content #dateAndCover .cover svg.coverSvg { width:141px; height:107px; } .stepIcons svg.stepIcon:first-child { display:block; } .stepIcons svg.stepIcon.m { display:none; } } @media (min-width: 768px) { #entete { padding:16px 0 0 0; } #entete .container { max-width:90%; margin:0 auto } #entete .container .stickyBand #resize #resizeMINUS { font-size:0.9em;} #content #dateAndCover { padding:14px 12px 10px 20px; } #content #dateAndCover .date { font-size:32px; line-height:1.12em; } #content #dateAndCover .date span { display:inline; } #content #dateAndCover .mp3Global.green-audio-player { margin-top:14px; } .newsMobile { margin-top:1em; } .stepIcons a span { font-size:20px;margin:10px 0 0 0; } .stepIcons .stepIcon .scale { transform: scale(0.85) translate(3.5px,-2px);transform-origin:left; } .stepIcons a.active .stepIcon .scale, .stepIcons a:hover .stepIcon .scale { transform: scale(1); } #content #stepSheets .step h1 { margin-top:1.35em; margin-bottom: 0.65em; } #content #stepSheets #stepMedite .addThisFlex { display:flex; flex-flow:row; height:40px; } #content #stepSheets #stepMedite .addThisFlex .addThisTitle { margin-bottom:0; } /*writerPage*/ #content .halfWidth .halfColumns { display:flex; flex-flow: row wrap; justify-content: space-between; } #content .halfWidth .halfColumn:first-child { margin-top:24px; } #content .halfWidth .halfColumn .coverdecoration { display:block;} #content .halfWidth h1.writersTitle { width:52%; } #content .halfWidth .halfColumn.writersList { width:52%; margin-top:24px; } #content .halfWidth .halfColumn.covDecoAndWD { width:40%; } #content .halfWidth .halfColumn .writerDetail .photo { width:60%; } } @media (min-width: 1024px) { #entete { height: 145px;} #entete .container #logoDesc { margin-left: 0; font-size:12px; text-transform:none } #entete .container .stickyBand .stickyBandFirstLine #logo img { width:240px; height:40px; /* orig svg : 401 67 */} #entete .container .stickyBand .stickyBandFirstLine #faireUnDon { margin-right:30px; } #entete .container .stickyBand .stickyBandFirstLine #faireUnDon a { font-size:21px; padding:6px 10px 6px 8px } #entete .container .stickyBand .stickyBandFirstLine #menu svg { width:41px; height:31px; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay { padding: 23px 5% 0 33px; width: max(calc( 375px + 5% )) ; }/* width: 6 cases de jours + padding left et right */ #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent { } #content #dateAndCover .mp3Global.green-audio-player { max-width:min(600px, calc( 100% - 274px - 50px )) /* cf cover svg width*/; } #content #dateAndCover .cover { margin-top: -35px; background-size: 274px auto } #content #dateAndCover .cover svg.coverSvg { width:274px; height:109px; } .newsMobile { display:none; } .newsDesktop { display:block; } .news { margin-top: -98px; margin-left: 14px; width: 246px; height: 87px; font-size: 14px; padding: 10px; } .news .title { /*display:block;*/ margin-bottom:0.5em; } #content .backToHome { display:block; } #content .halfWidth .writersComTitle { margin-top: 50px; margin-bottom:20px; /*top: le même que le row-gap*/ } #content .halfWidth .writers { row-gap:50px; } #content .halfWidth .writers .writer { width:22%; /* enlevé car remplacé par row-gap. margin-bottom:50px*/ } #content .halfWidth .halfColumn .writerDetail .photo { width:50%; } } @media (min-width: 1280px) { #content .fullWidth .historyDays {display:flex; flex-flow: row wrap; justify-content: space-between; } #content .fullWidth .historyDays .historyDay { width:49%; } #content .halfWidth .halfColumn .coverdecoration svg { width:430px; height:430px; background-size: auto 430px } } @media (min-width: 1366px) { .bible sup { top: 3px; } .commentaire sup.note span { width: auto; left: 4px; } .commentaire sup.note:hover span { font-size: 16px; } #contentMaxWidth { max-width:1684px; margin:0 auto; } .container { width:1366px; margin:0 auto; } #content { max-width:none; } #content .toRead { font-size:20px; } #entete { padding:45px 0 0 0; height: 244px;} #entete .container #logoDesc {font-size:15.7px; margin-top:11px; } #entete .container #logoDesc span { display:inline; } #entete .container .stickyBand .stickyBandFirstLine #logo img { width:350px; height:58.5px; /* orig svg : 401 67 */} #entete .container .stickyBand .stickyBandFirstLine #faireUnDon a { font-size:28px;} #entete .container .stickyBand .stickyBandFirstLine #menu svg { width:41px; height:31px; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay { padding:66px max(0px,calc( 50% - 693.5px )) 0 33px; width: max(568px,calc( 50% - 274px )) ; }/* width: 568 + (100% - 1684) / 2 */ #content #dateAndCover { margin-top: -49px; padding:28px 20px 14px 28px; } #content #dateAndCover .date { font-size:48px; } #content #dateAndCover .mp3Global.green-audio-player { height:56px; margin-top:10px; max-width:min(600px, calc( 100% - 522px - 50px )) /* cf cover svg width*/; } #content #dateAndCover .mp3Global.green-audio-player .play-pause-btn svg { width:49px; height:48px; } #content #dateAndCover .cover { margin-top: -64px; /* 31padding + 33 */ background-size: 522px auto } #content #dateAndCover .cover svg.coverSvg { width:522px; height:207px; } .news { margin-top: -186px; margin-left: 52px; width: 418px; height: 165px; font-size: 18px; padding:14px; } .news .title { margin-bottom:0.7em; } .news .newsSummary { display:block; font-size:0.9em } #content .backToHome { padding: 18px 22px 12px 29px ; margin-top: -50px; width: 430px; right:max(0px,calc( 50% - 693.5px + 36px)) ; /* (100% - 1387) / 2 + 30px de décalage supplémentaire */ } #content .backToHome .date {font-size: 31px;margin-bottom:8px } #content .backToHome .back a span { font-size: 18px; height:24px; padding-top:4px } #content .backToHome .back a svg { height:14px; margin-right:7px} #content .backToHome .back a:hover svg { height:18px; } .stepPrecNext svg circle { r:22px } .stepPrecNext a { margin-top: 120px; } .stepPrecNext a.stepPrec { margin-left: -53px; left:unset } .stepPrecNext a.stepNext { margin-left: 804px; /*calc(860px + 40px - 13px - 13px)*/; right:unset } #content #stepSheets #stepPause.stepOffset1 { margin-left:0 } #content #stepSheets #stepPause.stepOffset2 { margin-left:-578px } #content #stepSheets #stepPause.stepOffset3 { margin-left:-1458px } #content #stepSheets #stepPause.stepOffset4 { margin-left:-2115px } #content #stepSheets .step { flex: 0 0 860px; /* grow shrink basis */ /* min-height:50em; */ margin-right:20px; min-height:600px; } #content #stepSheets .step:last-child { margin-right:0;} #content #stepSheets .step h1 { font-size: 34px; margin-left:36px; margin-right:36px; } #content #stepSheets .step .toRead { margin:0 36px; } #content #stepSheets #stepMedite #stepMediteQuestions { margin:40px 36px 0 36px; padding:8px 0 8px 0; } #content #stepSheets #stepMedite #stepMediteQuestions.open { margin:40px 18px 0 18px; padding:8px 0 8px 18px; } #content #stepSheets #stepMedite #stepMediteQuestions h2 { font-size:22px; line-height:1em; } #content #stepSheets #stepMedite #stepMediteQuestions #stepMediteQuestionsDetails { font-size: 16px; line-height:1.6em; } #content #stepSheets #stepMedite.step h1 { margin-top:22px; } #content #stepSheets #stepMedite .addThisTitle + .addthis_inline_share_toolbox { display:none} #content #stepSheets #stepMedite .addThisTitle:hover + .addthis_inline_share_toolbox, #content #stepSheets #stepMedite .addThisFlex:hover .addthis_inline_share_toolbox { display:block } #content #stepSheets #stepVisLe.step h1 span { font-size:0.5em; display:block } #content #stepSheets #stepVisLe.step .toRead { display:flex; flex-flow: row wrap; justify-content: space-between; } #content #stepSheets #stepVisLe.step .toRead>div { width: 49%; margin-bottom:1.3em; } #content #stepSheets #stepVisLe.step .toRead .visLeCourt div { width:100%; margin-bottom:1.3em; } #content #stepSheets #stepVisLe.step .toRead .flexImpair1 { width:100%; } #content #stepSheets #stepVisLe.step .toRead .dimanches_et_fetes { width:100%; } #content .fullWidth { padding:0 36px 55px 46px; } #content .fullWidth h1 { /* width:49%; */ font-size:48px; margin:0 } #content .halfWidth .halfColumn .parcoursMeditationDetail { margin-top:0; } #content .fullWidth .historyDays { margin-top:32px;} #content .fullWidth .historyDays .historyDay { } #content .fullWidth .historyDays .historyDay .date { font-size:36px; } #content .fullWidth .historyDays .historyDay .reference { font-size:21px;} #content .fullWidth .historyDays .historyDay .titre { font-size:21px;} #content .fullWidth .historyDays .historyDay .preview { font-size: 19px; } #content .fullWidth .historyDays .historyDay .historyDayFooter {display:flex; flex-flow:row nowrap; justify-content: space-between; } #content .fullWidth .historyDays .historyDay .historyDayFooter div { flex: 0 0 auto; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.auteur { order:1; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.auteur a { font-size: 17px; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.readmore { order:2; margin-bottom:0 } #content .fullWidth .historyDays .historyDay .historyDayFooter div.readmore a {font-size: 17px;} #content .halfWidth { padding:0 36px 55px 46px; } #content .halfWidth h1 { /* width:49%; */ font-size:48px; margin:0; } #content .halfWidth .halfColumn { width:49%; } #content .halfWidth .halfColumn:first-child { margin-top:32px; } #content .halfWidth .halfColumn.writers {} #content .halfWidth .writers .writer a span { font-size:21px; } #content .halfWidth .halfColumn .writerDetail { width:93%; margin:0 0 0 auto; } #content .halfWidth .halfColumn .writerDetail a { font-size: 36px; margin:22px 22px 0 22px; } #content .halfWidth .halfColumn .writerDetail .fonction, #content .halfWidth .halfColumn .writerDetail .prenom_nom { margin:22px 0 } #content .halfWidth .halfColumn .writerDetail .presentation { font-size: 22px; margin:0 22px 22px 22px; } .actusPage .covDecoAndWD {margin-top:0; } #footer .container { display:flex; flex:row nowrap; } #footer .container .footerBloc { width:50%; padding-left:20px; font-size:16px;align-items: center; } #footer .container .footerBloc img { width:100%; } #footer .container .footerBloc div:first-child {margin-right:35px; flex:0 0 auto } #footer .container #footerLLB.footerBloc div:first-child { width:230px; } #footer .container #footerSBG.footerBloc div:first-child { width:123px } #footer .container #footerSBG.footerBloc div img.logoSBG {width:100%; max-height:none; } #footer .container .footerBloc:first-child { padding:0 20px 0 0; border-right:2px dotted #707070;border-bottom:none; } #footer .container .footerBloc:last-child { padding-top: 0; } } @media (min-width: 1387px) { .container { width:1387px; margin:0 auto; } } /* on passe sur les MAX width */ @media (max-width: 359px) { #entete .container .stickyBand .stickyBandFirstLine #logo img { width:150px; height:25px; } #entete .container .stickyBand .stickyBandFirstLine #menu svg { transform: scale(0.7); } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul ul.historyDays li {width:40px; height:40px; font-size:19px; margin-right:12px;padding-top:0;} } @media (prefers-color-scheme: dark) { img.lightmodeonly { display:none; } img.darkmodeonly { display:inline; } body { background-color:var(--couleurFondDark); } #content .toRead { color:#fff; } #entete { background-color:var(--couleurFondDark); } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay { background: var(--couleurPrincipaleDark)} #contentMaxWidth { background-color:#777; } #content #stepSheets { margin-bottom: 1em;} #content #stepSheets .step { background-color:#000; } #stepMediteContent sup.note, #stepVisLeContent sup.note { color:#000;} .notesTransferJS ul.notes { background:var(--couleurFondDark); color:#fff; box-shadow: none } .stepIcons .stepIcon .fill { fill: #777 } .stepIcons svg.stepIcon .rond { fill: #777 } .stepIcons .stepIcon .stroke, .stepIcons .stepIcon.stepIconLis path, .stepIcons .stepIcon.stepIconMedite path, .stepIcons .stepIcon.stepIconVis path { stroke: #fff } .step.active .stepIcons a.active .stepIcon .stroke, .step.active .stepIcons a:hover .stepIcon .stroke { stroke: #fff; fill: var(--couleurFinDegrade); } #content .fullWidth, #content .halfWidth { background: #000; color:#fff; padding-left: 0; padding-right:0; } #content .fullWidth h1, #content .halfWidth h1,#content .halfWidth h1.writersTitle { width:100%; padding-bottom:10px; background:var(--couleurFondDark) } #content .fullWidth h1 img, #content .halfWidth h1 img {display:none; } #content .fullWidth h1 , #content .halfWidth h1 , #content .halfWidth .halfColumns, #content .historyDays { padding-left: 25px; padding-right: 25px; } @media (min-width: 1366px) { #content .fullWidth h1 , #content .halfWidth h1 , #content .halfWidth .halfColumns, #content .historyDays { padding-left: 35px; padding-right: 35px; } } #content .halfWidth .halfColumn .parcoursMeditationDetail { margin-top:1em; } #logoDesc { color:#fff} #faireUnDon a, .faireUnDon a { border-color:var(--couleurPrincipaleHover); color:var(--couleurPrincipaleHover); } #faireUnDon a:hover, .faireUnDon a:hover { border-color: var(--couleurSecondaire); color: var(--couleurSecondaire); } #footer .container { background:#999; padding-left:20px; padding-right:20px } #footer .container .footerBloc { color:#fff; } }