/* 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 */ /* https://upload.wikimedia.org/wikipedia/commons/8/8e/Seal_of_the_United_States_Department_of_the_Air_Force.svg https://en.wikipedia.org/wiki/Air_Force_blue https://www.la-bible.ch/prestations/brochures-de-lectio-divina/ titre #2b4d75 bleu foncé (us air force) 00308F bleu clair 7ecfe2 bleu pale d8edf4 (=7ecfe2 à 40% sur fond blanc) bleu/vert RoyalAirForce #6ba4b8 (nearest name : Crystal Blue https://www.color-name.com/hex/6ba4b8) jaune/orange : ffd911 marron : a7602d bec aigle ffba00 griffres ff6600 */ .toRead a { color:#00308f} :root { --logo-color:#00308f; /* #2b4d75; */ --logo-fontname:"Barlow Condensed"; --don-color:#6ba4b8; /* #ffba00;*/ --don-hover-color:#00308f; /* #ffd911; */ --don-fontname:Montserrat; --resize-color:#6ba4b8; /* #7ecfe2; */ --resize-hover-color:#00308f; --menu-icon-color:#6ba4b8; /* #7ecfe2; */ --menu-icon-hover-color:#00308f; --menu-bg-color:#6ba4b8; /* #7ecfe2; */ --menu-dots-color:#6ba4b8; --menu-txt-color:#fff; --menu-txt-hover-color:#00308f; --bandeau-bg-color:#00308f; --bandeau-titre-color:#6ba4b8; /* 7ecfe2; */ --bandeau-txt-color:#00ff00; --bandeau-encart-color:#6ba4b8; --comiteMembreBorder:#00308f; /*bleu*/ --step-color:#00308f; /* #7ecfe2; */ --step-hover-color:#6ba4b8; /*jaune --step-color:#ffba00; --step-hover-color:#ffd911; */ --step-inactive-color:#d5d5d5; --step-PrecNext-color:#6ba4b8; /* #7ecfe2; */ --step-PrecNext-hover-color:#00308f; /* #6ba4b8; */ --explain-bg-color:#d8edf4; --explain-border-size:1px; --explain-border-color:#6ba4b8; --explain-titre-color:#6ba4b8; --explain-titre-fontname:"Barlow Condensed"; --explain-dots-color:#6ba4b8; --explain-txt-fontname:Montserrat; --explain-txt-size:0.8em; --footerButton-bg-color:#00308f; --cc-bg-color:#ddd; --cc-border-color:#00308f; --cc-footer-bg-color:#6ba4b8; } /* viré #content #dateAndCover .date #entete .container #logoDesc,#content #dateAndCover .chaqueJour, #content #dateAndCover .onglet .ongletLeft .ongletTitre */ #entete .container #logo { font-family: var(--logo-fontname), sans-serif; font-weight: 500;} /* viré */ #content #dateAndCover .chaqueJour span:first-child, #content #dateAndCover .onglet .ongletLeft .ongletTitre span.ongletName, #content #stepSheets .step .blocExplain .ligne1 span { font-family:var(--explain-titre-fontname);font-weight:bold; } #content #stepSheets .step .pubDate { font-family:Montserrat; font-size:12px; font-weight:600; color:#707070 } .gbot { text-indent:-2567px; } * { box-sizing: border-box; } body { background-color:#f0f0f0; line-height:1em; font-family:Montserrat; font-optical-sizing: auto; font-size:16px /* overflow-y: hidden */ } body, body .backflou, body .backflou2 { background-attachment:fixed; background-position: left top; background-size:cover; background-repeat: no-repeat; } body .backflou { position:fixed; width:100vw; height:100vh; z-index:-2; filter: blur(4px); } body .backflou2 { display:none; position:fixed; width:100vw; height:100vh; z-index:-1; } /* 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") ) */ .bible sup { color:#707070; vertical-align: super; top: 0; font-size: 8px; margin-right:2px; } .bible p { margin:0 0 1.3em 0; font-size:110% } /*je reprécise la font pour le faire un don, car il pourra être mis dans un toRead */ #entete #faireUnDon a { display:none; } #faireUnDon a, .faireUnDon a,#actionFooter .partager a { display:inline-block; border: 2px solid var(--don-color); border-radius: 3px; text-align:center; font-family: var(--don-fontname); font-weight:600; font-size:14px; letter-spacing: -0.32px; color: var(--don-color); text-decoration:none; padding:4px 6px 3px 6px; line-height:1em; } #faireUnDon a:hover, .faireUnDon a:hover { border-color:var(--don-hover-color); color:var(--don-hover-color); } .faireUnDon a,#actionFooter .partager a { font-size:1.2em; padding:6px 10px 6px 8px } #actionFooter { /*position:fixed; bottom:0;*/ border-top:2px solid #fff;border-bottom:2px solid #fff } #actionFooter .shareZone { background:#fff; display:none; text-align: center; padding: 6px; } #content #stepSheets #stepMedite .addThisFlex.addThisInStep { display:none; } /* si on a le actionFooter, on enleve de la zone step */ #actionFooter .buttonsZone { background:var(--footerButton-bg-color); width:100%; padding:8px 0; display:flex; flex-flow: row; justify-content: space-around; } #actionFooter .faireUnDon a,#actionFooter .partager a { color:#fff; border:none; border-color:#fff; font-size:1.2em } #actionFooter .faireUnDon a:hover { color:#a7602d; border-color:#a7602d } 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:#a7602d; 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: Montserrat; 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:Montserrat; letter-spacing: -0.2px; } .formsuccess { background: #d9e69c /* =b8d04588 */; color: #161615 ; } .formerror { background: #4B9892; color: #FFFFFF ; } /* #contentMaxWidth { background-color:#fbfbfb; } #content { _background-color: #eaeaea; } body.meditation #contentMaxWidth { background-color:#ffeaea; } body.meditation #entete { background-color:#fff; } */ .container { max-width:90%; margin:0 auto; } /* #entete */ #entete { padding:12px 7px 0 7px; min-height:110px; background-color:#fff; } #entete .container { max-width:none; } #entete .container #logo a { font-size:16px;} #entete .container #logo a span { font-weight:bold; } #entete .container #logo a,#entete .container #logo a:hover,#entete .container #logo a:visited, #entete .container #logo a:active { text-decoration:none; color:var(--logo-color); } #entete .container .stickyBand .stickyBandFirstLine { display:flex; flex-flow: row wrap; align-items:center; justify-content: space-between; width:100%; } #entete .container .stickyBand .stickyBandFirstLine #logo img { width:12px; height:12px; } #entete .container .stickyBand .stickyBandFirstLine #faireUnDon { flex-grow: 1; text-align:right; margin-right:20px; } /*#entete .container .stickyBand #menu img { width:23px; height:17px; display:block; }*/ #entete .container .stickyBand .stickyBandFirstLine #menu svg rect { fill: var(--menu-icon-color) } #entete .container .stickyBand .stickyBandFirstLine #menu:hover svg rect { fill: var(--menu-icon-hover-color) } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay { position: fixed; background: var(--menu-bg-color); 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: 1; 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 var(--menu-dots-color); border-bottom: 2px dotted var(--menu-dots-color); padding:0; list-style:none; margin-top:6px; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul a { color:var(--menu-txt-color); text-decoration:none; } #entete .container .stickyBand .stickyBandFirstLine #menuOverlay #menuContent ul a:hover { color:var(--menu-txt-hover-color); } #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 .secondLine { display:flex; flex-flow:row nowrap; justify-content:space-between;align-items: center; margin-top:4px; } */ #entete .container #logoDesc { /* margin-top:-14px;*/ margin-top:4px; margin-left: 0px;font-size:8.2px;letter-spacing:0.025em; text-transform:lowercase; font-weight: lighter; } /* #entete .container #logoDesc span { display:none; } YR 2024-11-13*/ #entete .container #logoDesc span { display:block; } /* resize, on ne precise pas la ligne, car on va tester entre la 1ere et la 2eme */ #entete .container #resize { text-align:right; margin-right:20px; font-size:20px; } #entete .container #resize #resizePLUS { font-size:1.1em; text-decoration:none; } #entete .container #resize #resizeMINUS { font-size:0.95em; text-decoration:none;} #entete .container #resize #resizePLUS, #entete .container #resize #resizeMINUS { text-decoration:none; color:var(--resize-color); } #entete .container #resize #resizePLUS:hover, #entete .container #resize #resizeMINUS:hover { color:var(--resize-hover-color); } #content { background-position:left 15px; } #contentFadeOut { padding-bottom:1em; } body.meditation #content { background-color: transparent; background-position: left 35px; background-repeat: no-repeat; background-size: cover; } /* #dateAndCover */ #content #dateAndCover { margin-top: -20px; padding:0 6px 10px 15px; letter-spacing: 0px; color: #fff; font-size:0; /* fs à 0 est important pour l'espace sous l'image */ margin-bottom:18px} #content #dateAndCover.expresso, #content #dateAndCover .ongletExpresso { background: var(--bandeau-encart-color); } #content #dateAndCover.eredutemps, #content #dateAndCover .ongletEreDuTemps { background: var(--bandeau-bg-color); } #content #dateAndCover .chaqueJour { padding-top:16px; text-transform:none; font-size:9px; line-height:1.1em; text-transform:uppercase; } #content #dateAndCover .chaqueJour.chaqueJourEDT { min-height: 66px;font-size:10.8px;line-height:1.5em; } #content #dateAndCover .chaqueJour span:first-child { color: var(--bandeau-titre-color); display:block;text-transform:none; font-size:19px; line-height: 1.1em; } #content #dateAndCover .chaqueJour #enLienAvecLactu { text-transform:none; } #content #dateAndCover .date { /*font-weight:bold;*/ margin-top:4px; font-size:16px; line-height:1.1em; margin-bottom:6px;text-transform: lowercase; } /*#content #dateAndCover .date span { display:block; } */ #content #dateAndCover .msg404 { font: normal 18px Montserrat; text-transform:none; padding-bottom:2em; } #content #dateAndCover .troptard h2 { margin:0 0 1em 0; } #content #dateAndCover .troptard a { color:#fff; } #content #dateAndCover .onglet,#content #dateAndCover .onglet .ongletLeft,#content #dateAndCover .onglet .ongletRight svg { transition: all 0.2s ease-in;} #content #dateAndCover .onglet { /*margin-top: -26px; float:right; background-position: center center; background-size: auto 107px; */ border-style:solid; border-color:#fff; border-width:0 3px 3px 3px; font-size:20px; line-height:1.1em; position:absolute; display:flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; text-transform:none;} #content #dateAndCover .onglet.recherche { margin-top:0; border-color:#eee; top:0; left:0; width:100%; min-height:40vh; z-index:101; } /* #content #dateAndCover .onglet { margin-top: -40px; left: calc(95% - 200px); /* (100%- bordure droite contentMaxWidth) - largeur hover de l'onglet }*/ #content #dateAndCover .onglet { margin-top: -15px; left: 55%; /* (100%- bordure droite contentMaxWidth) - largeur hover de l'onglet */} #content #dateAndCover .onglet { font-size:7px; } #content #dateAndCover .onglet .ongletLeft { padding-top:14px; padding-bottom:14px; } #content #dateAndCover .onglet .ongletLeft .ongletTitre { line-height:0.6em; text-transform:uppercase; } #content #dateAndCover .onglet .ongletLeft .ongletTitre span { text-transform:none; } #content #dateAndCover .onglet .ongletLeft .ongletTitre span.ongletName { font-size:190%; line-height:1.1em } #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDate, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDateAndTitre { font-size:140%; line-height:1em; } #content #dateAndCover .onglet .ongletRight { display:none; } /* #content #dateAndCover .onglet { width:180px; } #content #dateAndCover .onglet:hover { width:200px; } #content #dateAndCover .onglet.ongletEreDuTemps { height:150px; } #content #dateAndCover .onglet.ongletEreDuTemps:hover { height:160px; } #content #dateAndCover .onglet.ongletEreDuTemps .ongletRight { display:none; } #content #dateAndCover .onglet.ongletExpresso { height:170px; } #content #dateAndCover .onglet.ongletExpresso:hover { height:180px; } #content #dateAndCover .onglet.ongletExpresso .ongletRight svg { width:calc( 160px / 9 * 16 ); width:160px; height: 160px; } #content #dateAndCover .onglet.ongletExpresso:hover .ongletRight svg { width:calc( 170px / 9 * 16 ); width:170px; height: 170px; } */ #content #dateAndCover .onglet { width:calc(40% - 6px); } #content #dateAndCover .onglet:hover { width:calc(40% - 6px); } /* #content #dateAndCover .onglet.ongletEreDuTemps { height:auto; } #content #dateAndCover .onglet.ongletEreDuTemps:hover { height:auto; } */ /* #content #dateAndCover .onglet.ongletExpresso { height:170px; } #content #dateAndCover .onglet.ongletExpresso:hover { height:180px; } #content #dateAndCover .onglet.ongletExpresso .ongletRight svg { width:calc( 160px / 9 * 16 ); width:160px; height: 160px; } #content #dateAndCover .onglet.ongletExpresso:hover .ongletRight svg { width:calc( 170px / 9 * 16 ); width:170px; height: 170px; } */ /* animation */ #content #dateAndCover .onglet { margin-right:6px; padding-left:6px; } /* #content #dateAndCover .onglet:hover { margin-right:0; }*/ #content #dateAndCover .onglet .ongletLeft {margin-bottom:0; /*padding-top:8px; padding-bottom:8px;*/ display: flex; align-items: center; flex-flow: row; min-height: 58px; font-family:"Barlow Condensed";font-size:12px } #content #dateAndCover .onglet .ongletLeft a { display:block; text-decoration:none; color:#fff; } #content #dateAndCover .onglet .ongletLeft form { margin-top:1em; font-size:0.8em;} #content #dateAndCover .onglet .ongletLeft form select , #content #dateAndCover .onglet .ongletLeft form input[type=submit] {border:1px solid var(--explain-bg-color); border-right-color: var(--bandeau-bg-color); border-bottom-color: var(--bandeau-bg-color); padding:0.2em 0.6em; margin-right:0.3em;} #content #dateAndCover .onglet .ongletLeft form select:hover { cursor:pointer} #content #dateAndCover .onglet .ongletLeft form input[type=submit]:hover { background-color:var(--bandeau-encart-color); color:#fff; border-color:var(--bandeau-bg-color); border-right-color: var(--explain-bg-color); border-bottom-color: var(--explain-bg-color); cursor:pointer; } /* #content #dateAndCover .onglet:hover .ongletLeft {margin-bottom:20px }*/ #content #dateAndCover .onglet .ongletRight {margin-left:0; transition: margin 0.2s ease-in; } /* #content #dateAndCover .onglet:hover .ongletRight {margin-left:20px }*/ #content #dateAndCover .onglet .ongletLeft .ongletTitre { margin-right:10px; white-space: nowrap; } #content #dateAndCover .onglet .ongletLeft .ongletTitre span.ongletName { display:block; color: #a7602d; padding-top:0.25em; } #content #dateAndCover .onglet .ongletRight { background-color:transparent; background-position: center center; background-size: auto 100% ; } #content #dateAndCover .onglet.ongletExpresso .ongletLeft .expressoRef, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDate, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDateAndTitre { margin-top:4px; color:#222; max-height: 3em; overflow-y: hidden; } #content #dateAndCover .onglet.ongletExpresso .ongletLeft .expressoTitre, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsTitre { color:#222; /* font-weight:bold; */ font-style:italic; margin-right:4px } #content #dateAndCover .onglet .ongletLeft small { color:#444; font-size:67% } /*#content #dateAndCover .cover svg { width:141px; height:107px; display:block; } */ #content #dateAndCover .ongletClear { clear: both; visibility: hidden; display: block; font-size: 0; height: 0; } #content #dateAndCover .cover img { max-width:360px } #content #dateAndCover::after { content: ""; position: absolute; /* top: 100%; left: 50%; margin-left: -5px; */ border-width: 20px; border-style: solid; margin-top:10px; border-color: var(--bandeau-bg-color) transparent transparent transparent; z-index:100; } #content .comiteMembre { white-space:pre; border:1px solid var(--comiteMembreBorder); border-radius:6px; margin-top:1em; padding:1em 1.5em;} #content .comiteMembre .comiteMembreName { font-weight:bold; color:var(--comiteMembreBorder)} #content .brochuresListe {display:flex; flex-flow:row wrap; row-gap: 1em; column-gap: 3%;} #content .brochuresListe .brochuresElt { width:31%; border:1px solid #ccc; text-align:center; text-decoration:none; color:#de2e25} #content .basicPage { margin-top:0; background: #fff; padding: 10px; } /* form contact */ #content form.aboSoutien label { display:none; } #content form.contact input[type=text], #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[type=text], #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:#a7602d; color:#fff; border:1px solid #a7602d; 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:#a7602d } #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(--step-PrecNext-color); r:18px; transition: r 0.3s ease-in-out; } .stepPrecNext svg:hover circle { fill:var(--step-PrecNext-hover-color); r:25.5px;} .stepPrecNext svg path {fill:#fff; stroke:#fff; stroke-width:1px } .stepPrecNext svg:hover circle {transform: scale(1) } .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 */ .step a { opacity:0; transition: opacity 0.5s ease-in-out; } .step.active a { opacity:1; } .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%; */ width:32%; } .stepIcons a span { font-size:8px; text-transform: uppercase; /*visibility:hidden;*/ color:#d5d5d5; display:block; margin-top:-10px; } .step.active .stepIcons a.active span, .step.active .stepIcons a:hover span { visibility:visible; color:var(--step-color); transition: color 0.3s ease-in-out; } .step.active .stepIcons a:hover span { color:var(--step-hover-color); } .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:var(--step-inactive-color);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:var(--step-inactive-color) } .step.active .stepIcons a.active .stepIcon .fill, .step.active .stepIcons a:hover .stepIcon .fill { fill:var(--step-color); } .step.active .stepIcons a:hover .stepIcon .fill {fill:var(--step-hover-color);} .stepIcons .stepIcon .stroke { stroke:var(--step-inactive-color); } .step.active .stepIcons a.active .stepIcon .stroke, .step.active .stepIcons a:hover .stepIcon .stroke { stroke:var(--step-color); } .step.active .stepIcons a:hover .stepIcon .stroke { stroke:var(--step-hover-color); } /*.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 .reduce { rx:2em; ry:2em} .step.active .stepIcons a.active .stepIcon .reduce, .step.active .stepIcons a:hover .stepIcon .reduce { rx:2.2em; ry:2.2em} */ /* SVG 2022 */ /* voir également https://stackoverflow.com/questions/69370653/is-it-possible-to-change-svg-viewbox-value-using-css */ .step .stepIcons .barre { width:90%; height:5px;transform: translate(5%,35px) } .stepIcons a .stepIcon .scale.picto { transform: scale(0.6) translate(calc(50% - 37px),0); transform-origin: center; } .stepIcons a:hover .stepIcon .scale.picto, .stepIcons a.active .stepIcon .scale.picto { transform: scale(0.8) translate(calc(50% - 37px),0); } /*.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.3; } #content #stepSheets .step.active { opacity: 1; background-color:rgba(255,255,255,0.9);} #content #stepSheets .step .imageMeditation { max-width:100%; /* box-shadow: 8px 8px 10px 0 rgba(0,0,0,0.5); */ border: 3px solid #fff;margin-bottom:40px; display:block } #content #stepSheets .step h1 { font-family:"Barlow Condensed"; font-weight: bold; font-size:22px; line-height:1em; letter-spacing: 1px; color:#a7602d; margin:0.4em 18px; } #content #stepSheets .step .toRead, #content #stepSheets .step .pubDate { margin:0 18px; } #content #stepSheets .step .pubDate { margin-bottom:1em; } #content #stepSheets .step .withBlocExplain h1 { margin:0 0 0.4em 0; } #content #stepSheets .step .withBlocExplain .blocExplain { margin-top:2.4em; margin-bottom: 1.2em } #content #stepSheets .step .withoutBlocExplain { padding-top:2.4em; } #content #stepSheets .step .withoutBlocExplain h1 { margin:0 0 0.4em 0; } #content #stepSheets .step .withoutBlocExplain h1 span.subh1 { display:block; font-size:0.6em; margin-top:-0.2em } #content #stepSheets .step1.stepOffset1 { margin-left:0 } #content #stepSheets .step1.stepOffset2 { margin-left:-100% } #content #stepSheets .step1.stepOffset3 { margin-left:-200% } #content #stepSheets .step1.stepOffset4 { margin-left:-300% } #content #stepSheets .step1.stepOffset5 { margin-left:-400% } /* #stepLisContent */ #content #stepSheets .step .blocExplain { background: var(--explain-bg-color); border:var(--explain-border-size) solid var(--explain-border-color); transition: all 0.3s ease-out; padding:16px 32px; font-size:0.8em } #content #stepSheets .step .blocExplain .ligne1 { padding-left:3px; font-size:12px; padding-bottom:8px; margin-bottom:10px; border-bottom:3px dotted var(--explain-dots-color); cursor:pointer; } #content #stepSheets .step .blocExplain .ligne1 span { color:var(--explain-titre-color); font-size:1.4em; display:block; } #content #stepSheets .step .blocExplain .refBiblique { color: #000; padding-left:3px; /* font-weight:bold;*/ font-family:Montserrat; cursor:pointer; } /* #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: #b9cf56; text-decoration:none; text-transform: uppercase; } #content #stepSheets #stepMedite #stepMediteQuestions h2:hover a { color:#707070; } #content #stepSheets #stepMedite #stepMediteQuestions h2 svg { transition: all 0.3s ease-out; transform: rotate(-90deg);} #content #stepSheets #stepMedite #stepMediteQuestions h2 svg path { fill:#b9cf56} #content #stepSheets #stepMedite #stepMediteQuestions h2:hover svg path { fill:#707070; } #content #stepSheets #stepMedite #stepMediteQuestions #stepMediteQuestionsDetails { display:none; font-weight:600; line-height:1em; font-family: Montserrat; 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: #e5eacd; box-shadow: 0px 3px 6px #00000029; border-left:3px solid #b9cf56; 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 .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: #a7602d; } #content #stepSheets #stepMedite .notes { background: #E2F2FF; box-shadow: 0px 0px 6px #00000029; border-radius: 3px; font-size:16px; line-height:1.25em; font-family: Montserrat; letter-spacing: -0.08px; color: #161615; } #content #stepSheets #stepMedite .notes .note { padding:6px; display:block; } #content #stepSheets #stepMedite .addThisFlex { display:flex; flex-flow:row; align-items:center; height:40px; } #content #stepSheets #stepMedite .addThisFlex .addThisTitle, #actionFooter .shareZone .addThisTitle { font-size:20px; font-weight:700; font-family: Montserrat; line-height:1em; color:#fe6550; margin-right:1em; display:flex; flex-flow:row; align-items:center } #actionFooter .shareZone .addThisTitle { display:inline-block; } #content #stepSheets #stepMedite .addThisFlex .addThisTitle svg { width:24px; height:24px; fill:#fe6550; margin-top:-4px } #content #stepSheets #stepMedite .addThisTitle + .addthis_inline_share_toolbox, #actionFooter .shareZone .addThisTitle + .addthis_inline_share_toolbox { padding:6px 0; } /* #content #stepSheets #stepMedite.step h1 { margin-top:11px; } */ .socialShareLinks a img { border-radius:4px;} /* #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 .basicPage h1, #content .fullWidth h1, #content .halfWidth h1 { margin-top:-5px; /*la font barlow a trop d'espace en haut */ padding-top:0; font-family:"Barlow Condensed"; font-weight: 600; font-size:36px;line-height:1em; letter-spacing: 0px; color: #a7602d; padding-bottom:6px; border-bottom:2px dotted #707070; } #content .halfWidth .halfColumn { width:100% } #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 .halfWidth .halfColumn iframe { max-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%; } /* page livret */ #content ul.listeLectures { list-style: none; padding:0 100px 0 20px;} #content ul.listeLectures li a { display:block; background: var(--bandeau-encart-color); padding: 10px 20px; border-radius: 4px; margin-bottom: 0.7em; border: 1px solid var(--bandeau-bg-color); color:#fff; text-decoration:none; } #content ul.listeLectures li a span { display:inline-block; width:7.5em } /* .parcoursMeditationDetail */ #content .halfWidth .halfColumn .parcoursMeditationDetail { margin-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: #a7602d; } #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: #a7602d; margin-bottom:20px } #content .fullWidth .historyDays .historyDay .reference { font-weight:700; font-size:15px; line-height:1em; letter-spacing: 0px; color: #4a4a4a; 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: Montserrat; 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:#a7602d; } #content .fullWidth .historyDays .historyDay .preview a:hover b { color:#a7602d; } #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:#a7602d; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.readmore { margin-bottom:16px; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.readmore a { color: #4a4a4a; font-style: italic; font-weight:600; font-size: 14px; letter-spacing: 0px; } #content .fullWidth .historyDays .historyDay .historyDayFooter div.readmore a:hover { color:#777; } /* .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:Montserrat; 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 .fonction { color:#a7602d; 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: #a7602d;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: Montserrat; line-height:1.45em; letter-spacing: 0px; color: #161615;margin:0 12px 18px 12px; } /* page présentation */ .presentationPage a.aboDeSoutien { text-decoration: none; color:#f4ac0b; } .presentationPage a.aboDeSoutien:hover { color: #f3cd3f;} #content .presentationPage a.boutique { color: #a7602d; text-decoration:none} #content .presentationPage a.boutique:hover { color: #B5DEFF;} /* page abo Notif */ #content .aboNotifPage label.aboNotifHeure { margin-top:0.7em; display:block; color:#a7602d } #content .aboNotifPage select { border:none;padding:0.2em 0.3em 0.2em 0.6em; } #content .aboNotifPage a.lienInscription { color:#a7602d; text-decoration:none; font-weight:bold; } #content .aboNotifPage a.lienInscription:hover { color:#444 } /* Contact */ #content .halfWidth.contactPage .halfColumn.contactFields { width:58%; } #content .halfWidth.contactPage .halfColumn.coverdecoration { width:40%; } #content .halfWidth.contactPage .contactIntro { font-size:20px; line-height:1.25em; font-weight:600; color: #a7602d; } /* #footer */ /*#footer { background-color:#eee; background-color:var(--explain-bg-color)}*/ #footer .container { padding:29px 0 29px 0; background-color:#fff } #footer .container .footerBloc { width:90%; margin:0 auto; font-family: Montserrat; font-size:10px; display:flex; flex-flow:row nowrap; align-items: center; } #footer .container .footerBloc { padding-top:6px; padding-bottom: 6px; border-bottom:2px dotted #707070; } #footer .container .footerBloc:last-child { padding-top: 6px; border-bottom:none; } #footer .container .footerBloc:first-child { flex-flow:row wrap; } #footer .container .footerBloc:first-child img {max-width:100%; } #footer .container .footerBloc div.logoBloc { height:40px; display: flex; flex:0 0 60px; align-items: center; } #footer .container .footerBloc div.logoBloc img { max-width:100%; max-height:100%; } /*#footer .container .footerBloc img.logoRADIOR { height:auto; max-height:40px; max-width:100% }*/ #footer .container .footerBloc:last-child img.logoSBG { width:auto; max-height:45px; } #footer .container .logoSBS {padding-top:0.3em; max-height:60px;} #footer .footerLegalRequirement {font-size:0.7em} #footer .footerLegalRequirement a { text-decoration:none; color:inherit} #footer .footerLegalRequirement a:hover { text-decoration:underline} /* #footerEDP .logoBloc { display:flex; } #footerEDP .logoBloc span { order:2; } #footerEDP .logoBloc img { order:1; } */ #sid4debug { margin-top:4em; padding:1em 0; background-color:orange; text-align:center; } #cc-main .cm { background-color:var(--cc-bg-color); border:1px solid var(--cc-border-color);} #cc-main .cm__footer { background-color: var(--cc-footer-bg-color);} #cc-main .cm__footer .cm__links .cm__link-group a { color:#fff;} /* media query */ /* on commence avec les MIN width */ /* iphone 6 portrait */ @media (min-width: 360px) { #entete { padding-top:6px; } #entete .container .stickyBand .stickyBandFirstLine #logo img { width:26px; height:26px; } #entete .container #logo a { font-size:32px;} #entete .container #logoDesc {font-size:12px;} #content #dateAndCover .chaqueJour {font-size:10px;} #content #dateAndCover .chaqueJour span:first-child {font-size:21px;} #content #dateAndCover .onglet { font-size:8.5px; } #content #dateAndCover .onglet .ongletLeft .ongletTitre span.ongletName { font-size:160%; } .stepIcons a:hover .stepIcon .scale.picto, .stepIcons a.active .stepIcon .scale.picto { transform: scale(0.7) translate(calc(50% - 37px),0); } .stepIcons a span { font-size:10px; } } /* iphone 5 paysage */ @media (min-width: 550px) { #entete { min-height:120px; padding:16px 15px 0 15px;} #entete .container #logo a { font-size:30px;} #entete .container .stickyBand .stickyBandFirstLine #logo img { width:30px; height:30px; } #content #dateAndCover .chaqueJour {font-size:11px; padding-top:11px} #content #dateAndCover .chaqueJour span:first-child {font-size:25px;} #content #dateAndCover .onglet { font-size:10px; } #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDate, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDateAndTitre { font-size:120%; line-height:1em; } #content #dateAndCover .onglet.ongletExpresso .ongletLeft .expressoRef, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDate, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDateAndTitre { max-height: 2em; } #content #dateAndCover .date { font-size:20px; } #content #dateAndCover .date span { display:inline; } #content #dateAndCover .mp3Global.green-audio-player { max-width:min(600px, calc( 100% - 141px - 20px )) /* cf cover svg width*/; } #content #dateAndCover .onglet { margin-top: -25px;padding-left:14px; } #entete .container #logoDesc { margin-left: 40px; } .stepIcons svg.stepIcon:first-child { display:block; } .stepIcons svg.stepIcon.m { display:none; } .step .stepIcons .barre { width:80%; height:5px;transform: translate(10%,35px) } .stepIcons a span { margin-top:-4px; } #entete #faireUnDon a { display:inline-block } #content #stepSheets .step h1 { margin-top: 0.7em; } #actionFooter { display:none; } #content #stepSheets #stepMedite .addThisFlex.addThisInStep { display:block; } #contentFadeOut { padding-bottom:2em; } } @media (max-width: 639px) { #content #dateAndCover.eredutemps { padding-left: 10px; } } @media (min-width: 640px) { #content #dateAndCover .chaqueJour.chaqueJourEDT { font-size:17px; line-height:1.2em } #content #dateAndCover.expresso .chaqueJour span { display:inline } #content #dateAndCover .onglet .ongletLeft { display:block; } #content #dateAndCover .onglet.ongletExpresso .ongletLeft .expressoRef, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDate, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDateAndTitre { margin-top:8px; } #content .brochuresListe .brochuresElt { width:17%; } } @media (min-width: 768px) { .bible p { font-size:115% } #entete { padding:16px 0 0 0; } #entete .container { max-width:90%; margin:0 auto } /* #entete .container .secondLine #resize #resizeMINUS { font-size:0.9em;}*/ #content #dateAndCover { padding:0 12px 10px 20px; } #content #dateAndCover::after { margin-top:10px;} #content #dateAndCover .chaqueJour { padding-top:14px; font-size:13px; } #content #dateAndCover .chaqueJour.chaqueJourEX span:first-child {display:inline;font-size:31px } #content #dateAndCover #enLienAvecLactu {display:inline; } #content #dateAndCover .date { font-size:28px; line-height:1.12em; margin-bottom:14px; } #content #dateAndCover .onglet { font-size:11px; padding-left:18px; } #content #dateAndCover .onglet .ongletLeft { padding-top:14px; padding-bottom:14px; } #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDate, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDateAndTitre { margin-top:8px; font-size:0.95em } #content #dateAndCover .onglet.ongletExpresso .ongletLeft .expressoRef { margin-top:12px; } #content #dateAndCover .onglet .ongletRight { display:block; } #content #dateAndCover .onglet .ongletRight svg { width:76px; height: 76px; } #content #dateAndCover .onglet:hover .ongletRight svg { width:76px; height: 76px; } #content #dateAndCover .mp3AndNotif { display:flex; flex-flow: row nowrap; justify-content:space-between; align-items:center; } #content #dateAndCover .mp3AndNotif .aboNotif { font-size: 16px; } #content #dateAndCover .mp3AndNotif .aboNotif svg { width:30px; height:28px; } .stepIcons a span { font-size:15px; } .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 .step h1.titreMeditEDT {margin-bottom:0} #content #stepSheets #stepLisContent #leCappuccino .ligne1 span, #content #stepSheets .step .blocExplain .ligne1 span { display:inline; margin-right:0.6em; } /*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: 768px) and (max-width: 1023px) { #footer .container { text-align:center;} #footer .container .footerBlocs { display:flex; flex-flow:row wrap; align-items:stretch } #footer .container .footerBloc { width:50%; padding-left:20px; font-size:13px;align-items: center; border-right:2px dotted #707070; display:block} #footer .container .footerBloc img { width:auto; height:40px; } #footer .container .footerBloc div.logoBloc { margin-bottom:10px; } /* #footer .container .footerBloc div.logoBloc {margin-right:35px; flex:0 0 auto }*/ /* #footer .container #footerLLB.footerBloc div.logoBloc { padding-top:25.5px } #footer .container #footerLLB.footerBloc div.logoBloc img { width:210px; height:auto } */ #footer .container .footerBloc,#footer .container .footerBloc:last-child { padding:10px 20px 10px 20px; border-bottom:none; } #footer .container #footerEDP.footerBloc { padding-left:0; font-size:20px; font-variant:small-caps} #footer .container #footerEDP.footerBloc img { padding-right:20px;} #footer .container #footerLLB.footerBloc, #footer .container #footerOMEGA.footerBloc { border-bottom:1px solid #c9c9c9; } #footer .container #footerRADIOR.footerBloc { border-bottom:1px solid #c9c9c9; border-right:none } #footer .container #footerB6A.footerBloc, #footer .container #footerSBF.footerBloc { width:50%; } #footer .container #footerLLB.footerBloc { border-right:none } } @media (min-width: 1024px) { #entete { height: 145px;} #entete .container #logo a { font-size:44px;} #entete .container .stickyBand .stickyBandFirstLine #logo img { width:40px; height:40px; margin-top:-8px; /* orig svg : 401 67 */} #entete .container .stickyBand .stickyBandFirstLine #resize { font-size:21px; } #entete .container .stickyBand .stickyBandFirstLine #resize #resizeMINUS { font-size:0.8em; } #entete .container .stickyBand .stickyBandFirstLine #resize, #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 #logoDesc { margin-left: 0; font-size:12px; text-transform:none } #content #dateAndCover .onglet .ongletLeft {font-size:24px } #content #dateAndCover .cover { margin-top: -35px; background-size: 274px auto } #content #dateAndCover .cover svg { width:274px; height:109px; } #content #dateAndCover .mp3Global.green-audio-player { max-width:min(600px, calc( 100% - 274px - 50px )) /* cf cover svg width*/; } #content #dateAndCover .onglet { margin-top: -40px; left: calc(95% - 500px); /* (100%- bordure droite contentMaxWidth) - largeur hover de l'onglet */} #content #dateAndCover .onglet { border-width:0 6px 6px 6px; font-size:15px; } #content #dateAndCover .onglet .ongletRight { display:block; } #content #dateAndCover .onglet { width:480px; } #content #dateAndCover .onglet:hover { width:500px; } #content #dateAndCover .onglet:hover .ongletLeft { margin-right:10px; /* la moitié, car 10 pour le svg */ } #content #dateAndCover .onglet.ongletEreDuTemps { height:120px; } #content #dateAndCover .onglet.ongletEreDuTemps:hover { height:130px; } #content #dateAndCover .onglet.ongletEreDuTemps .ongletRight svg { width:120px; height: 120px; } #content #dateAndCover .onglet.ongletEreDuTemps:hover .ongletRight svg { width:130px; height: 130px; } #content #dateAndCover .onglet.ongletExpresso { height:130px; } #content #dateAndCover .onglet.ongletExpresso:hover { height:140px; } /* #content #dateAndCover .onglet.ongletExpresso .ongletRight svg { width:calc( 160px / 9 * 16 ); width:160px; height: 160px; } #content #dateAndCover .onglet.ongletExpresso:hover .ongletRight svg { width:calc( 170px / 9 * 16 ); width:170px; height: 170px; }*/ #content #dateAndCover .onglet.ongletExpresso .ongletRight svg { width:calc( 130px / 9 * 16 ); width:130px; height: 130px; } #content #dateAndCover .onglet.ongletExpresso:hover .ongletRight svg { width:calc( 140px / 9 * 16 ); width:140px; height: 140px; } #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDate, #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDateAndTitre { margin-top:12px; } #content #dateAndCover .chaqueJour.chaqueJourEDT { min-height:90px } #content #dateAndCover .date { font-size:32px; } .stepIcons a span { font-size:17px; } #content .basicPage { margin-top:0 !important; background: #fff; padding: 30px 25px 35px 25px; } #content .basicPage .toRead { display:flex; width:100%; align-items:flex-start; } #content .basicPage .toRead .leftCol { width:calc(50% + 134px); text-align:justify; padding-right:20px; } #content .basicPage .toRead .rightCol { width:calc(50% - 134px); text-align:center; } #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%; } #footer .container { text-align:center; font-size: 18px;} #footer .container .footerBlocs { display:flex; flex-flow:row wrap; align-items:stretch ; background-color:var(--explain-bg-color); margin:20px auto 20px auto;padding:10px 0 10px 0; border-radius:14px; width:50%; min-width:700px; } #footer .container .footerBloc { width:50%; padding-left:20px; font-size:13px;align-items: center; border-right:2px dotted #707070; display:block} #TOTOfooter .container #footerLLB.footerBloc div.logoBloc { padding-top:11px; padding-bottom:11px; } #footer .container .footerBloc,#footer .container .footerBloc:last-child { padding:10px 20px 10px 20px; border-bottom:none; } #footer .container #footerEDP.footerBloc { padding-left:0; } #footer .container #footerEDP.footerBloc .logoBloc { justify-content: right;} #footer .container #footerEDP.footerBloc .logoBloc span { text-align: right; line-height: 1em; font-weight: 500; font-size: 19px;font-variant:small-caps} #footer .container #footerEDP.footerBloc img { padding-left:20px;} #footer .container #footerLLB.footerBloc { border-right:none; } } @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 }*/ #content .halfWidth .halfColumn .coverdecoration svg { width:480px; height:576px; background-size: auto 576px } #footer .container .footerBloc { font-size:16px} #TOTOfooter .container #footerLLB.footerBloc div.logoBloc { padding-top:15px; padding-bottom:17px; } #footer .container .footerBloc div.logoBloc { height:60px;} /* #footer .container #footerLLB.footerBloc div.logoBloc img { width:230px; }*/ } @media (min-width: 1366px) { .bible sup { top: 2px; font-size: 10px; } .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:18px; } #entete { padding:21px 0 0 0; height: 180px;} #entete .container #logo a { font-size:61px;} #entete .container .stickyBand .stickyBandFirstLine #logo img { width:64px; height:64px; margin-top:-15px; /* orig svg : 401 67 */} #entete .container .stickyBand .stickyBandFirstLine #resize { font-size:28px; } #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 */ #entete .container #logoDesc {font-size:18.75px; margin-top:6px; } #entete .container #logoDesc span { display:inline; } #entete .container .addTop { margin-top:19px; } #entete .container .addBottom { margin-bottom:32px; } #content .fullWidth, #content .halfWidth, #content #dateAndCover { margin-top: -35px; } #content #dateAndCover { padding:0 20px 14px 28px; } #content #dateAndCover::after { border-width: 28px; margin-top:14px; } #content #dateAndCover .chaqueJour { font-size:20px; /*padding-top:28px;*/ padding: 28px 0 0px 0; } #content #dateAndCover .chaqueJour span:first-child { font-size:41px; margin-top: 0.3em; line-height: 0.8em; } #content #dateAndCover .chaqueJourEDT { padding-bottom:30px; } #content #dateAndCover .chaqueJourEDT span { display:block; } #content #dateAndCover .onglet { margin-top: -55px; left: calc(45% + 133px); /* = 50% (milieu) + (1387px/2) (largeur dateAndCover-> renvoie à droite - 550px (largeur max de notre bloc) +1 pixel de sécu*/ } #content #dateAndCover .onglet .ongletLeft .ongletTitre { font-size:111%; line-height:0.4em; } #content #dateAndCover .onglet .ongletLeft .ongletTitre span.ongletName { font-size:182%; margin-top: 0.2em; } #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDate { font-size: 111%; line-height:1em;margin-top:20px; } #content #dateAndCover .onglet.ongletEreDuTemps .ongletLeft .ereDuTempsDateAndTitre { /*font-size: 111%;*/ line-height:1em;margin-top:20px; } #content #dateAndCover .onglet { border-width:0 10px 10px 10px; font-size:18px; margin-right:20px; padding-left:24px; } #content #dateAndCover .onglet .ongletLeft {margin-bottom:0; padding-top:20px; padding-bottom:20px; } #content #dateAndCover .onglet { width:530px; } #content #dateAndCover .onglet:hover { width:550px; } #content #dateAndCover .onglet.ongletEreDuTemps { height:190px; } #content #dateAndCover .onglet.ongletEreDuTemps:hover { height:200px; } #content #dateAndCover .onglet.ongletEreDuTemps .ongletRight svg { width:180px; height: 180px; } #content #dateAndCover .onglet.ongletEreDuTemps:hover .ongletRight svg { width:190px; height: 190px; } #content #dateAndCover .onglet.ongletExpresso { height:170px; } #content #dateAndCover .onglet.ongletExpresso:hover { height:180px; } #content #dateAndCover .onglet.ongletExpresso .ongletRight svg { width:calc( 160px / 9 * 16 ); width:160px; height: 160px; } #content #dateAndCover .onglet.ongletExpresso:hover .ongletRight svg { width:calc( 170px / 9 * 16 ); width:170px; height: 170px; } #content #dateAndCover .date { font-size:45.5px; } #content #dateAndCover .mp3Global.green-audio-player { height:56px; } #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 { width:522px; height:207px; } #content #dateAndCover .mp3Global.green-audio-player { max-width:min(600px, calc( 100% - 550px )) /* cf cover svg width*/; } .step .stepIcons .barre { width:100%; height:7px; } .stepIcons a .stepIcon .scale.picto { transform: scale(0.85) translate(calc(50% - 37px),0); transform-origin: center; } .stepIcons a:hover .stepIcon .scale.picto, .stepIcons a.active .stepIcon .scale.picto { transform: scale(1) translate(calc(50% - 37px),0); } .stepIcons a span { font-size:20px; margin:10px 0 0 0; } .stepPrecNext svg circle { r:28px } .stepPrecNext svg:hover circle { r:34px } .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 .step1.stepOffset1 { margin-left:0 } #content #stepSheets .step1.stepOffset2 { margin-left:-578px } #content #stepSheets .step1.stepOffset3 { margin-left:-1233px } #content #stepSheets.stepSheetsFour .step1.stepOffset3 { margin-left:-1458px } #content #stepSheets.stepSheetsFour .step1.stepOffset4 { margin-left:-2115px } #content #stepSheets.stepSheetsFive .step1.stepOffset3 { margin-left:-1458px } #content #stepSheets.stepSheetsFive .step1.stepOffset4 { margin-left:-2385px } #content #stepSheets.stepSheetsFive .step1.stepOffset5 { margin-left:-3072px } #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 .pubDate { margin-left:36px; margin-right:36px; font-size:16px; } #content #stepSheets .step .toRead { margin:0 36px; } #content #stepSheets #stepLisContent #leCappuccino .ligne1, #content #stepSheets .step .blocExplain .ligne1 { font-size:16px; } #content #stepSheets #stepLisContent #leCappuccino .ligne1 span, #content #stepSheets .step .blocExplain .ligne1 span { font-size:26px; padding-right:10px; } #content #stepSheets #stepLisContent #leCappuccino .refBiblique, #content #stepSheets .step .blocExplain .refBiblique { font-size:20px; } #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 { font-size:48px; margin:0 } #content .halfWidth .halfColumn .parcoursMeditationDetail { margin-top:0; } #content .fullWidth .historyDays { margin-top:32px;} #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:30px 36px 55px 46px; } #content .halfWidth h1 { font-size:36px; margin:0; } #content .halfWidth .halfColumn { width:49%; } #content .halfWidth .halfColumn:first-child { margin-top:32px; } #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; } #content .aboNotifPage .halfColumn h4:first-child { margin:0 } /* pas de whatsapp sur les ordi */ .addthis_inline_share_toolbox a.at-svc-whatsapp { display:none; } } /*@media (min-width: 1387px)*/ @media (min-width: 1420px) { .container { width:1387px; margin:0 auto; max-width:none; } #content #dateAndCover .mp3Global.green-audio-player { width:calc(100% - 550px); } #content #dateAndCover .onglet { left: calc(50% + 144px); /* = 50% (milieu) + (1387px/2) (largeur dateAndCover-> renvoie à droite - 550px (largeur max de notre bloc) +1 pixel de sécu*/ } #TOTOfooter .container #footerLLB.footerBloc div.logoBloc { padding-top:11px; padding-bottom:11px; } } @media (min-width: 1684px) { #entete { border-radius:0 0 14px 14px; background-color:rgba(255,255,255,0.85); } #content #dateAndCover .onglet { border-top-width:10px; } } /* on passe sur les MAX width */ /* @media (max-width: 768px) { #footer .container .footerBloc:first-child { padding-top: 0;} #footer .container .footerBloc:first-child div.logoBloc { flex:0 0 33%; height:auto; } } @media (max-width: 550px) { #footer .container .footerBloc:first-child div.logoBloc { flex:0 0 50%; height:auto; } } */ @media (max-width: 359px) { #entete .container .stickyBand .stickyBandFirstLine #logo img { width:20px; height:20px; } #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;} }