*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#FCFBF7;color:#1D2F4F;font-family:"Source Sans 3",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}.feuille{max-width:1280px;margin:0 auto;padding:0 30px}a{color:inherit}img{display:block;max-width:100%;height:auto}.courant{position:sticky;top:0;z-index:40;background:#FCFBF7ee;backdrop-filter:blur(6px);border-bottom:1px solid rgba(29,47,79,.14)}.courant .in{max-width:1280px;margin:0 auto;padding:11px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.courant .marque{font-family:"Oswald",sans-serif;font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase}.courant nav{display:flex;gap:26px;font-family:"Oswald",sans-serif;font-weight:400;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase}.courant nav a{text-decoration:none;opacity:.62}.courant nav a:hover{opacity:1}@media(max-width:760px){.courant nav{display:none}}section.rec{position:relative;border-top:1px solid rgba(29,47,79,.18);padding:0 0 74px;margin-top:52px}section.rec:first-of-type{border-top:none;margin-top:26px}section.rec{scroll-margin-top:70px}.onglet{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);background:var(--c);color:#fff;font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;letter-spacing:.17em;text-transform:uppercase;padding:8px 26px 7px;white-space:nowrap;z-index:2}.folio{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:#F2D2D6;color:#7A4A52;font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;padding:3px 10px;letter-spacing:.06em}.corps{padding-top:78px}.rot{display:inline-grid;text-align:left;overflow:hidden;vertical-align:baseline}.rot>span{grid-area:1/1;opacity:0;transform:translateY(.42em);animation:rot-cycle 36s infinite;will-change:transform,opacity}.rot>span:nth-child(1){animation-delay:0s}.rot>span:nth-child(2){animation-delay:3s}.rot>span:nth-child(3){animation-delay:6s}.rot>span:nth-child(4){animation-delay:9s}.rot>span:nth-child(5){animation-delay:12s}.rot>span:nth-child(6){animation-delay:15s}.rot>span:nth-child(7){animation-delay:18s}.rot>span:nth-child(8){animation-delay:21s}.rot>span:nth-child(9){animation-delay:24s}.rot>span:nth-child(10){animation-delay:27s}.rot>span:nth-child(11){animation-delay:30s}.rot>span:nth-child(12){animation-delay:33s}@keyframes rot-cycle{0%{opacity:0;transform:translateY(.42em)}1%{opacity:1;transform:translateY(0)}7.5%{opacity:1;transform:translateY(0)}8.5%{opacity:0;transform:translateY(-.42em)}100%{opacity:0;transform:translateY(-.42em)}}@media(prefers-reduced-motion:reduce){.rot>span{animation:none;opacity:0}.rot>span:first-child{opacity:1;transform:none}}.rassure{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;padding:0;list-style:none;font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.7}.rassure li{position:relative;padding-left:13px}.rassure li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:1px;background:var(--c)}.meta{display:flex;align-items:flex-end;justify-content:flex-start;flex-wrap:wrap;row-gap:16px;margin:0 0 44px}.meta>div{padding:0 20px;text-align:center;border-left:1px solid #1D2F4F;line-height:1.05}.meta>div:first-child{border-left:none;padding-left:0}.lab{font-family:"Oswald",sans-serif;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;font-weight:400;display:block;margin-bottom:7px;opacity:.75}.val{font-family:"Oswald",sans-serif;font-weight:600;font-size:25px;letter-spacing:.01em;display:block}.val small{font-size:10px;letter-spacing:.13em;font-weight:400;text-transform:uppercase}.cuilleres{display:flex;gap:4px;justify-content:center;height:25px;align-items:center}.cuilleres svg{width:11px;height:26px;fill:var(--c)}.cuilleres svg.cuoff{fill:none;stroke:var(--c);stroke-width:1.6}.entree{display:grid;grid-template-columns:0.82fr 1.18fr;gap:20px 52px;align-items:start;padding-top:22px;grid-template-areas:"haut demo" "bas demo"}.e-haut{grid-area:haut}.e-demo{grid-area:demo}.e-bas{grid-area:bas}@media(max-width:1000px){.entree{grid-template-columns:1fr;gap:30px;grid-template-areas:"haut" "demo" "bas"}.corps{padding-top:42px}section.rec{margin-top:34px;padding-bottom:52px}section.rec:first-of-type{margin-top:14px}.entree{padding-top:8px}.chapo{font-size:15px;line-height:1.32;margin-bottom:16px}.confiance{margin-bottom:16px}.confiance li{font-size:9.5px;padding:0 11px}.titre{margin-bottom:20px}.titre .s{margin-top:12px;font-size:10.5px}.fiche{margin-top:22px}}.confiance{display:flex;gap:0;flex-wrap:wrap;margin:0 0 24px;padding:0;list-style:none}.confiance li{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;padding:0 16px;border-left:1px solid rgba(29,47,79,.3);opacity:.78}.confiance li:first-child{border-left:none;padding-left:0}.confiance li b{color:var(--c);font-weight:600}.grosbouton{border:none;background:var(--c);color:#fff;font-family:"Oswald",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.11em;text-transform:uppercase;padding:18px 22px;cursor:pointer;width:100%;transition:transform .12s;line-height:1.2}.grosbouton:hover{transform:translateY(-1px)}.grosbouton.creux{background:transparent;color:#1D2F4F;box-shadow:inset 0 0 0 1.5px #1D2F4F}.deuxboutons{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:520px){.deuxboutons{grid-template-columns:1fr}}.demo{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:start;gap:0}@media(max-width:1000px){.demo{gap:0}}@media(max-width:420px){.demo{grid-template-columns:1fr 20px 1fr 20px 1fr}}.demo .temps{text-align:center}.demo .scene{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}.demo .scene>*{width:100%}.demo .cadre{padding:7px}.demo .num{font-family:"Oswald",sans-serif;font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c);margin-bottom:9px;display:block}.demo h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:12px 0 3px}.demo p{font-size:13px;line-height:1.35;opacity:.66;margin:0;max-width:26ch;margin-inline:auto}@media(max-width:520px){.demo h3{font-size:11px}.demo p{font-size:11.5px;line-height:1.3}.demo .num{font-size:9px}}.fleche{display:flex;align-items:center;justify-content:center;color:var(--c);align-self:center;margin-top:-52px}.fleche svg{width:30px;height:18px}.fiche-main{background:#FBF7EC;height:96%;position:relative;overflow:hidden;border:1px solid rgba(29,47,79,.16);box-shadow:0 18px 34px -24px rgba(29,47,79,.5);transform:rotate(-1.6deg);padding:9% 9%;background-image:repeating-linear-gradient(#FBF7EC 0 20px,rgba(29,47,79,.1) 20px 21px)}.fiche-main .ecrit{font-family:"Caveat Brush",cursive;color:#2C3550;line-height:21px;font-size:clamp(9px,1.05vw,14px)}.fiche-main .ecrit b{display:block;font-size:1.4em;line-height:1.1;margin-bottom:11px;color:#8B2E22}.fiche-main .tache{position:absolute;right:9%;bottom:11%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 38%,rgba(160,110,50,.3),rgba(160,110,50,.06) 70%,transparent)}.fiche-main .corne{position:absolute;right:0;top:0;width:26px;height:26px;background:linear-gradient(225deg,#FCFBF7 50%,rgba(29,47,79,.16) 50%)}.mur{height:100%;background:linear-gradient(170deg,#EFE7DA 0%,#E4DACA 58%,#D9CEBB 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid rgba(29,47,79,.12)}.mur .encadre{width:62%;background:#fff;padding:6% 5%;border:6px solid #B48A54;box-shadow:0 18px 32px -16px rgba(60,40,20,.55);transform:translateY(-6%)}.mur .encadre img{display:block}.mur .meuble{position:absolute;left:0;right:0;bottom:0;height:19%;background:linear-gradient(#C9A87C,#B08F62)}.mur .bol{position:absolute;left:15%;bottom:15%;width:15%;aspect-ratio:2/1;border-radius:0 0 999px 999px;background:#7C8B7A}.mur .plante{position:absolute;right:13%;bottom:14%;width:9%;aspect-ratio:1/1.5;background:#8FA57A;border-radius:46% 46% 12% 12%;opacity:.85}.barrebasse{display:none}@media(max-width:1000px){.barrebasse{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:12px;align-items:center;background:#FCFBF7f2;backdrop-filter:blur(8px);padding:10px 16px;border-top:1px solid rgba(29,47,79,.2)}.barrebasse .bouton{flex:1;justify-content:center;padding:15px 18px;font-size:13px}.barrebasse span{font-family:"Oswald",sans-serif;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.7;max-width:96px;line-height:1.25}body{padding-bottom:76px}}.livre{display:grid;grid-template-columns:1fr 43%;align-items:stretch}.livre .cotetexte{padding:78px 54px 60px max(30px,calc((100vw - 1280px)/2 + 30px))}.livre .coteimage{background:var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 40px;gap:14px}.livre .coteimage .cadre{max-width:540px;width:100%;box-shadow:0 34px 70px -30px rgba(0,0,0,.55)}.livre .coteimage .legende{color:#fff;opacity:.9;margin-top:6px}@media(max-width:1000px){.livre{grid-template-columns:1fr}.livre .cotetexte{padding:78px 30px 46px}.livre .coteimage{padding:44px 30px}.livre .coteimage .cadre{max-width:380px}}.plan{display:grid;grid-template-columns:198px 1fr;gap:46px;align-items:start}@media(max-width:820px){.plan{grid-template-columns:1fr;gap:30px}}.entete{display:grid;grid-template-columns:1fr 390px;gap:56px;align-items:end;margin-bottom:42px}@media(max-width:900px){.entete{grid-template-columns:1fr;gap:22px}}.entete .chapo{margin:0 0 6px}.chapo{font-family:"Oswald",sans-serif;font-weight:500;font-size:16.5px;letter-spacing:.015em;text-transform:uppercase;color:var(--c);line-height:1.36;margin:0 0 24px;max-width:54ch}.texte p{margin:0 0 14px;text-align:justify;hyphens:auto}.astuce{margin-top:40px;display:flex;align-items:center;gap:26px}.astuce p{font-family:"Oswald",sans-serif;font-weight:500;font-size:15px;letter-spacing:.02em;text-transform:uppercase;line-height:1.36;margin:0;flex:1}.sceau{flex:none}.sceau svg{width:100%;height:100%;animation:tourne 44s linear infinite}@keyframes tourne{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sceau svg{animation:none}}.cadre{background:#fff;padding:12px;border:1px solid rgba(29,47,79,.16);box-shadow:0 26px 54px -28px rgba(29,47,79,.5)}.legende{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.6;margin-top:10px;text-align:center}.fiche{margin-top:34px;border-top:2px solid #1D2F4F;border-bottom:1px solid #1D2F4F;padding:20px 0 22px}.fiche label{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;display:block;margin-bottom:12px;opacity:.8}.fiche .rang{display:flex;gap:14px;flex-wrap:wrap}.fiche input{flex:1;min-width:210px;border:none;border-bottom:1.5px solid #1D2F4F;background:transparent;font-family:"Source Sans 3",sans-serif;font-size:20px;padding:5px 2px 9px;color:#1D2F4F;outline:none}.fiche input::placeholder{color:#1D2F4F;opacity:.34}.bouton{border:none;background:var(--c);color:#fff;font-family:"Oswald",sans-serif;font-weight:600;font-size:14px;letter-spacing:.15em;text-transform:uppercase;padding:14px 30px;cursor:pointer;transition:transform .12s}.bouton:hover{transform:translateY(-1px)}.bouton.creux{background:transparent;color:#1D2F4F;box-shadow:inset 0 0 0 1.5px #1D2F4F}.mention{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.66;margin-top:14px}.atelier{display:grid;grid-template-columns:1.12fr 0.88fr;gap:26px;align-items:start}@media(max-width:900px){.atelier{grid-template-columns:1fr}}.colonne-etapes{display:flex;flex-direction:column;gap:26px}.pave{border:1.5px solid rgba(29,47,79,.28);padding:20px 22px 22px;background:#FCFBF7;position:relative}.pave.gros{padding:22px}.pave>.tete{display:flex;align-items:center;gap:11px;margin-bottom:16px}.pave .puce{width:23px;height:23px;flex:none;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Oswald",sans-serif;font-weight:600;font-size:12px}.pave h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:14px;letter-spacing:.11em;text-transform:uppercase;margin:0}.depot{border:1.5px dashed rgba(29,47,79,.42);padding:26px 18px;text-align:center;cursor:pointer}.depot b{font-family:"Oswald",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:6px}.depot span{font-size:13px;opacity:.62;line-height:1.4;display:block}.depot em{font-style:normal;font-size:11.5px;opacity:.48;display:block;margin-top:8px}.champ2{margin-bottom:14px}.champ2:last-child{margin-bottom:0}.champ2 label{font-family:"Oswald",sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:6px;opacity:.72}.champ2 input{width:100%;border:none;border-bottom:1.5px solid #1D2F4F;background:transparent;font-family:"Source Sans 3",sans-serif;font-size:17px;padding:4px 2px 8px;outline:none;color:#1D2F4F}.champ2 input::placeholder{color:#1D2F4F;opacity:.34}.deux{display:grid;grid-template-columns:1fr 1fr;gap:11px}.opt{border:1.5px solid rgba(29,47,79,.3);padding:13px 14px;cursor:pointer;display:block}.opt.pris{border:2.5px solid var(--c)}.opt b{font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px}.opt span{font-size:12.5px;line-height:1.35;opacity:.65;display:block}.stylegrille{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stylegrille label{cursor:pointer;display:block;border:1.5px solid rgba(29,47,79,.24);padding:9px;position:relative;transition:transform .13s}.stylegrille label:hover{transform:translateY(-2px)}.stylegrille label.pris{border:2.5px solid var(--c);padding:8px}.stylegrille .fanion{position:absolute;right:9px;top:9px;z-index:2;background:var(--c);color:#fff;font-family:"Oswald",sans-serif;font-weight:600;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px}.stylegrille h4{font-family:"Oswald",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;margin:11px 0 2px}.stylegrille p{font-size:12.5px;line-height:1.32;opacity:.64;margin:0}.stylegrille .pastilles{margin:7px 0 0}.stylegrille .pastilles i{width:9px;height:9px}.lancer{margin-top:4px;text-align:center}.lancer .grosbouton{width:100%;padding:20px 30px}.lancer .sous{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.66;margin-top:13px}.socle4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1.5px solid rgba(29,47,79,.24);margin-top:26px}@media(max-width:760px){.socle4{grid-template-columns:1fr 1fr}}.socle4 div{padding:15px 17px;border-left:1px solid rgba(29,47,79,.18)}.socle4 div:first-child{border-left:none}@media(max-width:760px){.socle4 div:nth-child(3){border-left:none}.socle4 div:nth-child(n+3){border-top:1px solid rgba(29,47,79,.18)}}.socle4 b{font-family:"Oswald",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px;color:var(--c)}.socle4 span{font-size:12.5px;line-height:1.35;opacity:.68;display:block}.sect{border-top:1.5px solid rgba(29,47,79,.3);margin-top:24px;padding-top:16px}.sect:first-of-type{border-top:none;margin-top:0;padding-top:0}.sect .lab{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:13px}.sect .lab b{font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase}.sect .lab span{font-family:"Oswald",sans-serif;font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.55}.trois{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media(max-width:560px){.trois{grid-template-columns:1fr 1fr}}.ligne{display:grid;grid-template-columns:26px 84px 1fr 20px;gap:10px;align-items:center;border-bottom:1px solid rgba(29,47,79,.14);padding:6px 0}.ligne .n{font-family:"Oswald",sans-serif;font-weight:600;font-size:11.5px;color:var(--c)}.ligne input{border:none;border-bottom:1px solid transparent;background:transparent;font-family:"Source Sans 3",sans-serif;font-size:15.5px;padding:4px 2px;outline:none;color:#1D2F4F;width:100%}.ligne input:focus{border-bottom-color:var(--c)}.ligne input.q{font-family:"Oswald",sans-serif;font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase}.ligne .x{opacity:.26;text-align:center;cursor:pointer;font-size:16px;line-height:1}.ligne:hover .x{opacity:.6}.sousgroupe{font-family:"Oswald",sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c);text-decoration:underline;text-underline-offset:3px;margin:14px 0 6px}.pas{display:grid;grid-template-columns:40px 1fr 20px;gap:12px;align-items:start;border-bottom:1px solid rgba(29,47,79,.14);padding:11px 0}.pas .n{font-family:"Oswald",sans-serif;font-weight:600;font-size:26px;line-height:.85;color:var(--c)}.pas textarea{border:none;background:transparent;resize:vertical;min-height:46px;font-size:15.5px;line-height:1.5;outline:none;color:#1D2F4F;width:100%;padding:0;font-family:"Source Sans 3",sans-serif}.pas .x{opacity:.26;text-align:center;cursor:pointer;font-size:16px}.pas:hover .x{opacity:.6}.ajouter{width:100%;margin-top:11px;border:1.5px dashed rgba(29,47,79,.4);background:transparent;padding:11px;cursor:pointer;font-family:"Oswald",sans-serif;font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#1D2F4F;transition:border-color .13s,color .13s}.ajouter:hover{border-color:var(--c);color:var(--c)}.ajouter.mince{margin-top:7px;padding:8px;font-size:10px;opacity:.75}.compteur{display:flex;gap:0;flex-wrap:wrap;margin:0 0 4px}.compteur div{padding:0 15px;border-left:1px solid rgba(29,47,79,.4);line-height:1.1}.compteur div:first-child{border-left:none;padding-left:0}.compteur .v{font-family:"Oswald",sans-serif;font-weight:600;font-size:19px;color:var(--c);display:block}.compteur .l{font-family:"Oswald",sans-serif;font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;display:block;margin-top:3px}.pave>input{display:none}.bloc-photo{display:none}#src1:checked ~ .bloc-photo{display:block}#src1:checked ~ .deux .d1,#src2:checked ~ .deux .d2{border:2.5px solid var(--c);padding:12px 13px}.deux label.opt{display:block}.agencements{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.agencements label{cursor:pointer;display:block;border:1.5px solid rgba(29,47,79,.28);padding:9px;transition:transform .13s}.agencements label:hover{transform:translateY(-2px)}.agencements label.pris{border:2.5px solid var(--c);padding:8px}.agencements svg{width:100%;height:auto;display:block;background:#fff}.agencements b{font-family:"Oswald",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;display:block;margin:9px 0 2px;line-height:1.2}.agencements span{font-size:11.5px;line-height:1.3;opacity:.62;display:block}.univers{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:4px}@media(max-width:980px){.univers{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.univers{grid-template-columns:1fr}}.univers h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:15px;letter-spacing:.09em;text-transform:uppercase;margin:14px 0 4px}.univers .st{font-size:14.5px;line-height:1.35;opacity:.75;margin:0 0 9px}.univers .pq{font-size:13.5px;line-height:1.38;opacity:.6;margin:0}.pastilles{display:flex;gap:5px;margin:9px 0}.pastilles i{width:12px;height:12px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #1D2F4F;border-bottom:1px solid #1D2F4F}.duo>div{padding:26px 30px}.duo>div + div{border-left:1px solid rgba(29,47,79,.22)}@media(max-width:760px){.duo{grid-template-columns:1fr}.duo>div + div{border-left:none;border-top:1px solid rgba(29,47,79,.22)}}.intertitre{font-family:"Oswald",sans-serif;font-weight:600;font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--c);margin:0 0 16px}.liste{margin:0;padding:0;list-style:none}.liste li{padding:8px 0 8px 16px;position:relative;font-size:16px;line-height:1.45;border-bottom:1px solid rgba(29,47,79,.12)}.liste li:last-child{border-bottom:none}.liste li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:1px;background:var(--c)}.liste.barree li{opacity:.62}.prix{display:grid;grid-template-columns:1fr 1fr;gap:34px}@media(max-width:820px){.prix{grid-template-columns:1fr}}.offre{border-top:2px solid #1D2F4F;padding-top:20px;display:flex;flex-direction:column}.offre.phare{border-top-color:var(--c);border-top-width:6px}.offre h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:16px;letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px}.montant{font-family:"Oswald",sans-serif;font-weight:600;font-size:56px;line-height:.94;letter-spacing:-.01em;color:var(--c);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.montant s{font-size:22px;color:#1D2F4F;opacity:.45;font-weight:400}.montant em{font-family:"Source Sans 3",sans-serif;font-style:normal;font-size:15px;color:#1D2F4F;opacity:.7}.offre p{font-size:15.5px;line-height:1.5;margin:14px 0 20px;opacity:.82}.offre .bouton{align-self:flex-start;margin-top:6px}.rendement{margin-top:26px;border-top:1px solid rgba(29,47,79,.2);padding-top:14px}.rendement dt{font-family:"Oswald",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:12px}.rendement dd{margin:2px 0 0;font-size:14.5px;line-height:1.4;opacity:.68}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:8px}@media(max-width:820px){.notes{grid-template-columns:1fr}}.notes blockquote{margin:0;border-top:1px solid #1D2F4F;padding-top:18px}.notes q{font-size:18px;line-height:1.44;quotes:"«\00a0" "\00a0»"}.notes footer{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-top:14px}.medaillon{width:64px;height:64px;margin-bottom:14px}.faq{border-top:1px solid #1D2F4F}.faq details{border-bottom:1px solid rgba(29,47,79,.18)}.faq summary{list-style:none;cursor:pointer;padding:17px 40px 17px 0;position:relative;font-family:"Oswald",sans-serif;font-weight:500;font-size:16px;letter-spacing:.02em;text-transform:uppercase;line-height:1.3}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;font-family:"Source Sans 3",sans-serif;color:var(--c);line-height:1}.faq details[open] summary::after{content:"\2212"}.faq p{margin:0 0 20px;padding-right:44px;font-size:16px;line-height:1.55;opacity:.84;text-align:justify;hyphens:auto}.cloture .rang{display:flex;gap:14px;flex-wrap:wrap}footer.pied{border-top:1px solid #1D2F4F;margin-top:46px;padding:30px 0 60px;font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.62}footer.pied .in{max-width:1280px;margin:0 auto;padding:0 30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.etiquette{background:#1D2F4F;color:#FCFBF7;font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.17em;text-transform:uppercase;padding:9px 30px;text-align:center}.etiquette b{color:var(--c);font-weight:600}.titre{margin:0 0 34px;text-align:left}.titre .t{font-family:"Anton",Impact,sans-serif;color:var(--c);font-size:clamp(38px,5.1vw,66px);line-height:.88;text-transform:uppercase;transform:skewX(-9deg);letter-spacing:.004em;display:block}.titre .t2{display:block;padding-left:.06em}.titre .s{font-family:"Oswald",sans-serif;font-weight:400;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;margin-top:18px;opacity:.62}.rec:first-of-type .titre{margin-bottom:46px}.rec:first-of-type .titre .t{font-size:clamp(37px,5.9vw,86px)}.ings .g{font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;margin:22px 0 11px;color:var(--c)}.ings .g:first-child{margin-top:0}.ings .l{font-family:"Oswald",sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.035em;text-transform:uppercase;line-height:1.28;padding-left:9px;border-left:1.4px solid #1D2F4F;margin-bottom:9px}.ings .l small{display:block;font-size:10.5px;letter-spacing:.05em;font-weight:400;text-transform:none;opacity:.62;margin-top:2px}.etape{display:grid;grid-template-columns:56px 1fr;gap:18px;margin-bottom:26px}.etape .n{font-family:"Oswald",sans-serif;font-weight:600;font-size:44px;line-height:.8;color:var(--c)}.etape h4{font-family:"Oswald",sans-serif;font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px}.etape h4 em{font-style:normal;font-weight:400;opacity:.5;font-size:12px;letter-spacing:.14em}.etape p{margin:0;font-size:16px;line-height:1.5;text-align:justify;hyphens:auto}.chapeau{text-align:center;padding:14px 0 34px}.chapeau .titre{text-align:center}.chapeau .chapo{margin-inline:auto}.desamorce{font-size:12.5px;opacity:.55}.barre{display:grid;grid-template-columns:1fr 230px 230px;gap:14px;margin:0 0 30px}@media(max-width:820px){.barre{grid-template-columns:1fr}}.barre .ch{border:1.5px solid #1D2F4F;padding:14px 16px;display:flex;align-items:center;gap:11px}.barre input,.barre select{border:none;background:transparent;outline:none;width:100%;font-family:"Source Sans 3",sans-serif;font-size:16px;color:#1D2F4F}.barre .ic{font-family:"Oswald",sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;white-space:nowrap}.barre select{font-family:"Oswald",sans-serif;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}.manque{border:1.5px solid var(--c);padding:20px 22px;margin:0 0 40px;background:rgba(232,178,30,.07)}.manque .haut{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:15px}.manque b{font-family:"Oswald",sans-serif;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}.manque .delai{font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}.manque .rang{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:13px;align-items:end}@media(max-width:820px){.manque .rang{grid-template-columns:1fr}}.manque input{width:100%;border:none;border-bottom:1.5px solid #1D2F4F;background:transparent;font-family:"Source Sans 3",sans-serif;font-size:16px;padding:5px 2px 8px;outline:none;color:#1D2F4F}.manque input::placeholder{color:#1D2F4F;opacity:.36}.manque .aide{font-size:13px;opacity:.62;margin:13px 0 0}.famille{margin-bottom:44px}.famille .entete{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid #1D2F4F;padding-bottom:11px;margin-bottom:22px}.famille h2{font-family:"Anton",sans-serif;font-size:clamp(24px,2.7vw,34px);text-transform:uppercase;transform:skewX(-9deg);color:var(--c);margin:0;line-height:1}.famille .nb{font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}.grille{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}@media(max-width:1100px){.grille{grid-template-columns:repeat(4,1fr)}}@media(max-width:700px){.grille{grid-template-columns:repeat(2,1fr)}}.article{display:block;position:relative}.article .cadre{padding:7px;transition:transform .14s}.article:hover .cadre{transform:translateY(-3px)}.article h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;margin:10px 0 2px;line-height:1.2}.article p{font-size:12px;line-height:1.3;opacity:.6;margin:0}.article .prix{font-family:"Oswald",sans-serif;font-weight:600;font-size:13px;color:var(--c);display:block;margin-top:5px}.article .ajout{display:block;text-align:center;text-decoration:none;margin-top:8px;width:100%;border:1.5px solid #1D2F4F;background:transparent;padding:8px;font-family:"Oswald",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:#1D2F4F}.article .ajout:hover{background:var(--c);border-color:var(--c);color:#fff}.bascule{border-top:2px solid #1D2F4F;border-bottom:1px solid #1D2F4F;padding:26px 0;margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}@media(max-width:760px){.bascule{grid-template-columns:1fr}}.bascule h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:17px;letter-spacing:.07em;text-transform:uppercase;margin:0 0 8px}.bascule p{margin:0;font-size:15.5px;line-height:1.5;opacity:.78;max-width:62ch}.bouton.gros{padding:18px 32px;font-size:15px}.etat{border-top:1px solid rgba(29,47,79,.18);margin-top:54px;padding:0 0 74px;position:relative}.etat:first-of-type{border-top:none;margin-top:26px}.preuve{border-left:3px solid var(--c);padding:2px 0 2px 16px;margin:0 0 34px;max-width:66ch;font-size:14.5px;line-height:1.52;opacity:.8}.preuve b{opacity:1}.preuve span{font-family:"Oswald",sans-serif;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--c);display:block;margin-bottom:6px}.ecran{display:grid;grid-template-columns:1fr 43%;align-items:stretch}.ecran>input{display:none}.ecran .gauche{padding:14px 54px 44px max(30px,calc((100vw - 1280px)/2 + 30px))}.ecran .droite{background:var(--c);padding:46px 40px;display:flex;align-items:center;justify-content:center}.ecran .droite .colle{position:sticky;top:86px;width:100%;max-width:500px}.ecran .droite .desamorce{color:#fff;opacity:.92}@media(max-width:1000px){.ecran{grid-template-columns:1fr}.ecran .gauche{padding:14px 30px 34px}.ecran .droite{padding:36px 30px}}.unique{border-bottom:2.5px solid #1D2F4F;padding-bottom:12px;margin:6px 0 14px}.unique label{font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:12px;opacity:.75}.unique input{width:100%;border:none;background:transparent;outline:none;color:#1D2F4F;font-family:"Anton",sans-serif;font-size:clamp(30px,3.4vw,44px);letter-spacing:.005em;text-transform:uppercase;line-height:1.05}.unique input::placeholder{color:#1D2F4F;opacity:.24}.curseur{display:inline-block;width:3px;height:.9em;background:var(--c);animation:clign 1s steps(1) infinite;vertical-align:-.08em;margin-left:3px}@keyframes clign{50%{opacity:0}}.souffle{font-size:14.5px;opacity:.66;margin:0 0 26px}.portes{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:26px}@media(max-width:760px){.portes{grid-template-columns:1fr}}.porte2{border:1.5px solid #1D2F4F;padding:20px 18px;cursor:pointer;background:transparent;text-align:left;font:inherit;color:inherit;transition:transform .13s}.porte2:hover{transform:translateY(-2px)}.porte2.reine{background:var(--c);border-color:var(--c);color:#fff}.porte2 b{font-family:"Oswald",sans-serif;font-weight:600;font-size:14px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:6px}.porte2 span{font-size:13.5px;line-height:1.4;opacity:.82;display:block}.porte2 em{font-family:"Oswald",sans-serif;font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-top:9px;opacity:.75}.appareil{width:100%;border:1.5px dashed rgba(29,47,79,.4);padding:26px;text-align:center;margin-bottom:22px;font-size:14.5px;opacity:.72;line-height:1.5}.champ{margin-bottom:20px}.champ label{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;display:block;margin-bottom:8px;opacity:.82}.champ label em{font-style:normal;opacity:.5;letter-spacing:.1em}.champ input,.champ textarea{width:100%;border:none;border-bottom:1.5px solid #1D2F4F;background:transparent;font-family:"Source Sans 3",sans-serif;font-size:17px;color:#1D2F4F;padding:4px 2px 8px;outline:none;resize:vertical}.champ textarea{border:1.5px solid #1D2F4F;padding:12px;min-height:158px;line-height:1.55}.champ .aide{font-size:13px;opacity:.56;margin:6px 0 0;line-height:1.4}.bloc-liste{border-top:2px solid #1D2F4F;margin-bottom:30px}.entete-liste{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0 11px}.entete-liste b{font-family:"Oswald",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}.entete-liste span{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.58}.ligne{display:grid;grid-template-columns:30px 94px 1fr 22px;gap:12px;align-items:center;border-bottom:1px solid rgba(29,47,79,.14);padding:7px 0}.ligne .n{font-family:"Oswald",sans-serif;font-weight:600;font-size:12.5px;color:var(--c)}.ligne input{border:none;border-bottom:1px solid transparent;background:transparent;font-family:"Source Sans 3",sans-serif;font-size:16px;padding:5px 2px;outline:none;color:#1D2F4F;width:100%}.ligne input:focus{border-bottom-color:var(--c)}.ligne input.q{font-family:"Oswald",sans-serif;font-weight:500;font-size:14px;letter-spacing:.04em;text-transform:uppercase}.ligne .x{opacity:.26;text-align:center;cursor:pointer;font-size:17px;line-height:1}.ligne:hover .x{opacity:.6}.pas{display:grid;grid-template-columns:46px 1fr 22px;gap:14px;align-items:start;border-bottom:1px solid rgba(29,47,79,.14);padding:13px 0}.pas .n{font-family:"Oswald",sans-serif;font-weight:600;font-size:30px;line-height:.85;color:var(--c)}.pas textarea{border:none;background:transparent;resize:vertical;min-height:50px;font-size:16px;line-height:1.5;outline:none;color:#1D2F4F;width:100%;padding:0;font-family:"Source Sans 3",sans-serif}.pas .x{opacity:.26;text-align:center;cursor:pointer;font-size:17px}.pas:hover .x{opacity:.6}.ajouter{width:100%;margin-top:13px;border:1.5px dashed rgba(29,47,79,.4);background:transparent;padding:13px;cursor:pointer;font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#1D2F4F;transition:border-color .13s,color .13s}.ajouter:hover{border-color:var(--c);color:var(--c)}.compteur{display:flex;gap:0;flex-wrap:wrap;margin:0 0 26px}.compteur div{padding:0 18px;border-left:1px solid #1D2F4F;line-height:1.1}.compteur div:first-child{border-left:none;padding-left:0}.compteur .v{font-family:"Oswald",sans-serif;font-weight:600;font-size:22px;color:var(--c);display:block}.compteur .l{font-family:"Oswald",sans-serif;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.65;display:block;margin-top:3px}.brouillon{background:rgba(110,139,61,.1);border-left:3px solid #6E8B3D;padding:9px 13px;font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:20px}.porte{position:relative;overflow:hidden;background:#fff}.filigrane{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;user-select:none;-webkit-user-select:none;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='78' text-anchor='middle' transform='rotate(-45 75 75)' font-family='Oswald,Arial' font-weight='600' font-size='16' letter-spacing='3.6' fill='%23ffffff' fill-opacity='0.12'%3EAPER%C3%87U%3C/text%3E%3Ctext x='76' y='79' text-anchor='middle' transform='rotate(-45 75 75)' font-family='Oswald,Arial' font-weight='600' font-size='16' letter-spacing='3.6' fill='%230b0b0b' fill-opacity='0.12'%3EAPER%C3%87U%3C/text%3E%3C/svg%3E");background-repeat:repeat}.desamorce{font-size:12.5px;line-height:1.45;opacity:.62;margin:11px 0 0;text-align:center}.jauge{position:absolute;right:12px;bottom:12px;z-index:6;background:rgba(29,47,79,.82);color:#fff;font-family:"Oswald",sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px}.bandeau{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.bandeau label{cursor:pointer;display:block}.bandeau .cadre{padding:5px;transition:transform .14s}.bandeau label:hover .cadre{transform:translateY(-3px)}.bandeau p{font-family:"Oswald",sans-serif;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;text-align:center;margin:7px 0 0;color:#fff;opacity:.85}.pile{position:relative}.pile>div{display:none}#t1:checked ~ .droite .bandeau .b1 .cadre,#t2:checked ~ .droite .bandeau .b2 .cadre,#t3:checked ~ .droite .bandeau .b3 .cadre,#t4:checked ~ .droite .bandeau .b4 .cadre{outline:3px solid #fff;outline-offset:3px}#t1:checked ~ .droite .pile .a1,#t2:checked ~ .droite .pile .a2,#t3:checked ~ .droite .pile .a3,#t4:checked ~ .droite .pile .a4{display:block}#u1:checked ~ .droite .bandeau .b1 .cadre,#u2:checked ~ .droite .bandeau .b2 .cadre,#u3:checked ~ .droite .bandeau .b3 .cadre,#u4:checked ~ .droite .bandeau .b4 .cadre{outline:3px solid #fff;outline-offset:3px}#u1:checked ~ .droite .pile .a1,#u2:checked ~ .droite .pile .a2,#u3:checked ~ .droite .pile .a3,#u4:checked ~ .droite .pile .a4{display:block}#v1:checked ~ .droite .bandeau .b1 .cadre,#v2:checked ~ .droite .bandeau .b2 .cadre,#v3:checked ~ .droite .bandeau .b3 .cadre,#v4:checked ~ .droite .bandeau .b4 .cadre{outline:3px solid #fff;outline-offset:3px}#v1:checked ~ .droite .pile .a1,#v2:checked ~ .droite .pile .a2,#v3:checked ~ .droite .pile .a3,#v4:checked ~ .droite .pile .a4{display:block}.caisse{max-width:660px;margin:0 auto}.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}@media(max-width:700px){.grille3{grid-template-columns:1fr}}.formule{border:1.5px solid rgba(29,47,79,.3);padding:18px 16px 16px;cursor:pointer;position:relative;display:block;transition:transform .13s}.formule:hover{transform:translateY(-2px)}.formule.elue{border:2.5px solid var(--c);box-shadow:0 16px 34px -22px rgba(29,47,79,.5)}.formule .drapeau{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);background:var(--c);color:#fff;font-family:"Oswald",sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;padding:4px 12px;white-space:nowrap}.formule b{font-family:"Oswald",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:9px}.formule .prix{font-family:"Oswald",sans-serif;font-weight:600;font-size:31px;line-height:1;color:var(--c);display:block}.formule s{font-size:15px;opacity:.45;margin-left:7px;font-weight:400;color:#1D2F4F}.formule em{font-style:normal;font-size:13px;line-height:1.35;opacity:.72;display:block;margin-top:9px}.portefeuilles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:8px}.pf{border:1.5px solid #1D2F4F;padding:14px;text-align:center;font-family:"Oswald",sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;background:#1D2F4F;color:#FCFBF7;cursor:pointer}.pf.pale{background:transparent;color:#1D2F4F}.ou{text-align:center;font-family:"Oswald",sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin:18px 0}.carte{border:1.5px solid #1D2F4F;padding:15px 16px;display:flex;gap:14px;align-items:center;font-size:16px;letter-spacing:.02em}.carte .num{flex:1;opacity:.34}.recap{border-top:2px solid #1D2F4F;border-bottom:1px solid #1D2F4F;padding:13px 0;margin:24px 0}.recap div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:15.5px;border-bottom:1px solid rgba(29,47,79,.12)}.recap div:last-child{border-bottom:none;font-family:"Oswald",sans-serif;font-weight:600;font-size:19px;letter-spacing:.03em;text-transform:uppercase;padding-top:12px}.bump{border:1.5px solid var(--c);padding:15px 17px;margin:20px 0;display:flex;gap:13px;align-items:flex-start}.bump b{font-family:"Oswald",sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px}.bump p{margin:0;font-size:14px;line-height:1.42;opacity:.78}.bump i{width:17px;height:17px;border:1.5px solid var(--c);flex:none;margin-top:2px;display:block}.legal{font-size:12.5px;line-height:1.5;opacity:.7;margin-top:14px;display:flex;gap:11px;align-items:flex-start}.legal i{width:15px;height:15px;border:1.5px solid #1D2F4F;flex:none;margin-top:2px;display:block}.bouton.plein{width:100%;justify-content:center;font-size:16px;padding:18px 30px}.socle{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.68;margin-top:15px;display:flex;flex-wrap:wrap;gap:6px 20px;padding:0;list-style:none}.socle li{position:relative;padding-left:13px}.socle li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:1px;background:var(--c)}.porte img{width:100%;display:block}.ecran .droite .colle{max-width:460px}
/* Ajouté le 11/08/2026 : la rangée d'agencement du tunnel. Classe nouvelle,
elle ne redéfinit aucune règle existante. */
.stylegrille label,.agencements label,.bandeau label{cursor:pointer}
.rangagencement{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.rangagencement label{cursor:pointer;display:block;text-align:center;padding:9px 6px;border:1.5px solid rgba(255,255,255,.45);color:#fff}
.rangagencement label.pris{border:2.5px solid #fff;background:rgba(255,255,255,.16)}
.rangagencement b{font-family:"Oswald",sans-serif;font-weight:600;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
/* ── Option « sans la mention du site », 12/08/2026 ─────────────────────── */
.option-mention {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 14px 0 0;
padding: 14px 16px;
border: 1px dashed rgba(29, 47, 79, .28);
border-radius: 4px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.option-mention:hover { border-color: rgba(29, 47, 79, .5); }
.option-mention.elue {
border-style: solid;
border-color: #1d2f4f;
background: rgba(29, 47, 79, .045);
}
.option-mention input { margin-top: 3px; flex: none; }
.option-mention span { display: block; }
.option-mention b { display: block; font-size: 14px; }
.option-mention em {
display: block;
margin-top: 3px;
font-style: normal;
font-size: 12.5px;
line-height: 1.45;
opacity: .68;
}
.option-mention .prix-option {
margin-left: auto;
flex: none;
font-weight: 700;
white-space: nowrap;
}
/* ── La vraie page de carnet, 12/08/2026 ────────────────────────────────
* La fiche « manuscrite » était dessinée en CSS, dans une police cursive.
* Ça se voit, et ça dit le contraire de ce que le site promet : la recette
* écrite de sa main. Une photo de vraie page de carnet fait le travail que
* cinquante lignes de CSS ne feront jamais.
* Repli automatique sur la fiche dessinée si la photo manque : la classe
* « sans-photo » est posée par l'attribut onerror de l'image.
*/
.fiche-main .fiche-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
border-radius: inherit;
}
.fiche-main:not(.sans-photo) .ecrit,
.fiche-main:not(.sans-photo) .tache { display: none; }
.fiche-main.sans-photo .fiche-photo { display: none; }
/* Le titre de section porte le h1 : on annule le gras et la marge du navigateur,
Anton n'existe qu'en 400 et un gras synthetique se voit. Pose le 13/08/2026. */
.titre h1.t,.titre h2.t{margin:0;font-weight:400}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Fil d'Ariane et blocs d'argument des pages « Idees cadeaux » (13/08/2026). */
.ariane{font-family:"Oswald",sans-serif;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.58;margin:0 0 26px}
.ariane a{text-decoration:none;border-bottom:1px solid rgba(29,47,79,.28)}
.ariane a:hover{opacity:1;border-bottom-color:var(--c)}
.arg + .arg{margin-top:22px;padding-top:22px;border-top:1px solid rgba(29,47,79,.14)}
.arg p:last-child{margin:0;font-size:15.5px;line-height:1.5;opacity:.82}
.duo .liste li a{text-decoration:none;border-bottom:1px solid rgba(29,47,79,.3)}
.bascule .liste li{font-size:14.5px;padding:5px 0 5px 16px}
.bascule .liste li a{font-weight:600;text-decoration:none;border-bottom:1px solid rgba(29,47,79,.3)}
/* Titre editorial long : Anton en clamp 37-86px a ete dessine pour trois mots
(« La recette de »), pas pour une phrase. Les pages « Idees cadeaux » portent
un h1 de dix mots : meme famille, meme skew, taille tenue. 13/08/2026. */
.titre.long .t,.rec:first-of-type .titre.long .t{font-size:clamp(27px,3.1vw,42px);line-height:1.02}
.titre.long .s{margin-top:14px}
.entete.haut{align-items:start}
.entete.haut .cadre{box-shadow:0 2px 18px rgba(29,47,79,.10)}
/* ============================================================================
14/08/2026 - DEMONSTRATION D'ACCUEIL, MOBILE, BARRE D'ACTION
Trois demandes : plus de cadre blanc autour des images, la fiche manuscrite
lisible, et la scene du mur posee dans un vrai decor. Plus la barre d'action
mobile qui n'apparait qu'une fois le questionnaire passe.
Tout est porte ici, en fin de feuille, pour ne rien casser plus haut.
========================================================================= */
/* --- 1. Le cadre blanc disparait : l'image occupe toute sa case ------------ */
.demo .cadre{background:transparent;padding:0;border:none;
box-shadow:0 22px 44px -26px rgba(29,47,79,.55)}
.demo .fiche-main:not(.sans-photo){height:100%;padding:0;border:none;
background:none;background-image:none;transform:none;
box-shadow:0 20px 38px -26px rgba(29,47,79,.5)}
.demo .fiche-main:not(.sans-photo) .corne{display:none}
.demo .fiche-photo{object-position:center}
/* --- 2. La demonstration prend plus de large : les trois scenes grandissent
ensemble, donc la fiche manuscrite se lit sans que les legendes se decalent. */
.entree{grid-template-columns:0.79fr 1.21fr;gap:20px 40px}
.demo{grid-template-columns:1fr 22px 1fr 22px 1fr}
@media(max-width:1000px){.entree{grid-template-columns:1fr;gap:30px}}
/* --- 3. Scene 3 : un vrai decor, pas trois aplats -------------------------- */
.demo .mur{background:
radial-gradient(120% 85% at 50% 8%, rgba(255,252,244,.85) 0%, rgba(255,252,244,0) 62%),
linear-gradient(168deg,#EDE3D4 0%,#E3D7C4 54%,#D6C8B1 100%);
box-shadow:inset 0 0 60px -18px rgba(90,68,42,.35)}
.demo .mur::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(130% 100% at 50% 40%, rgba(0,0,0,0) 52%, rgba(74,54,32,.22) 100%)}
.demo .mur .meuble{height:23%;
background:linear-gradient(#CBA97C 0%,#BE9868 22%,#A8845A 100%);
box-shadow:0 -1px 0 rgba(255,255,255,.35) inset, 0 -14px 22px -14px rgba(74,54,32,.55)}
.demo .mur .meuble::before{content:"";position:absolute;left:0;right:0;top:26%;height:1px;
background:rgba(90,66,38,.28)}
.demo .mur .plante{right:11%;bottom:16%;width:12%;aspect-ratio:1/1.35;
background:radial-gradient(60% 70% at 50% 22%,#93A97C 0%,#6F8760 70%,#5C7350 100%);
border-radius:52% 52% 14% 14%;opacity:1;
box-shadow:0 8px 14px -8px rgba(60,44,24,.6)}
.demo .mur .bol{left:13%;bottom:17%;width:16%;
background:linear-gradient(#8C9C86,#6E7F6A);
box-shadow:0 6px 12px -6px rgba(60,44,24,.6)}
.demo .mur .encadre{box-shadow:0 26px 40px -20px rgba(60,40,20,.62),
0 3px 8px -3px rgba(60,40,20,.5)}
/* --- 3 bis. La scene du mur, recomposee ----------------------------------- */
.demo .mur .plante{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2092%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%235F7551%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M30%2064C30%2050%2026%2041%2021%2033%27%2F%3E%3Cpath%20d%3D%27M30%2064C30%2048%2034%2039%2040%2031%27%2F%3E%3Cpath%20d%3D%27M30%2064C30%2053%2029%2046%2030%2036%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23728B61%27%3E%3Cellipse%20cx%3D%2720%27%20cy%3D%2730%27%20rx%3D%276.6%27%20ry%3D%2710.5%27%20transform%3D%27rotate%28-26%2020%2030%29%27%2F%3E%3Cellipse%20cx%3D%2741%27%20cy%3D%2728%27%20rx%3D%276.6%27%20ry%3D%2710.5%27%20transform%3D%27rotate%2827%2041%2028%29%27%2F%3E%3Cellipse%20cx%3D%2730%27%20cy%3D%2722%27%20rx%3D%276%27%20ry%3D%2711.5%27%2F%3E%3Cellipse%20cx%3D%2724%27%20cy%3D%2745%27%20rx%3D%275.4%27%20ry%3D%278.4%27%20transform%3D%27rotate%28-42%2024%2045%29%27%2F%3E%3Cellipse%20cx%3D%2737%27%20cy%3D%2743%27%20rx%3D%275.4%27%20ry%3D%278.4%27%20transform%3D%27rotate%2842%2037%2043%29%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%2389A276%27%20opacity%3D%27.55%27%3E%3Cellipse%20cx%3D%2730%27%20cy%3D%2722%27%20rx%3D%272.4%27%20ry%3D%278%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M20%2066h20l-2.6%2021a2.2%202.2%200%200%201-2.2%202h-10.4a2.2%202.2%200%200%201-2.2-2z%27%20fill%3D%27%23A86A45%27%2F%3E%3Crect%20x%3D%2718.2%27%20y%3D%2761.5%27%20width%3D%2723.6%27%20height%3D%276%27%20rx%3D%271.6%27%20fill%3D%27%23BC7A50%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
border-radius:0;box-shadow:none;width:15%;aspect-ratio:60/92;right:9%;bottom:20%;
filter:drop-shadow(0 6px 7px rgba(70,50,28,.45))}
.demo .mur .bol{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2034%27%3E%3Cpath%20d%3D%27M2%206h56c0%2015-9%2026-28%2026S2%2021%202%206z%27%20fill%3D%27%237E9079%27%2F%3E%3Cpath%20d%3D%27M2%206h56c0%204-12.6%207-28%207S2%2010%202%206z%27%20fill%3D%27%2393A68C%27%2F%3E%3Cpath%20d%3D%27M8%2012c2%209%209%2015%2022%2015%27%20fill%3D%27none%27%20stroke%3D%27%23FFF%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
border-radius:0;box-shadow:none;width:18%;aspect-ratio:60/34;left:11%;bottom:20%;
filter:drop-shadow(0 5px 6px rgba(70,50,28,.45))}
.demo .mur .meuble{height:22%;background:
repeating-linear-gradient(92deg, rgba(120,88,52,.16) 0 2px, rgba(120,88,52,0) 2px 11px),
linear-gradient(#D0AE81 0%, #C09A6A 26%, #A8845A 100%)}
.demo .mur .meuble::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(rgba(255,240,220,.75),rgba(255,240,220,0))}
.demo .mur .encadre{position:relative}
.demo .mur .encadre::after{content:"";position:absolute;left:6%;right:-9%;top:5%;bottom:-7%;
z-index:-1;background:rgba(78,56,32,.28);filter:blur(9px)}
/* --- 4. Mobile : la demonstration devient un bandeau qui se fait glisser --- */
@media(max-width:760px){
.demo{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
margin-inline:-30px;padding:2px 30px 8px;scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.demo::-webkit-scrollbar{display:none}
.demo .temps{flex:0 0 76%;scroll-snap-align:center}
.demo .fleche{display:none}
.demo h3{font-size:13px;margin-top:14px}
.demo p{font-size:13.5px;line-height:1.4;max-width:none}
.demo .num{font-size:10px}
}
/* --- 5. La barre d'action n'arrive qu'une fois le questionnaire passe ------ */
@media(max-width:1000px){
.barrebasse{transform:translateY(118%);transition:transform .26s ease;
pointer-events:none;will-change:transform}
.barrebasse.affichee{transform:none;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){
.barrebasse{transition:none}
}
/* --- 6. Le menu sur telephone --------------------------------------------- */
.burger{display:none;background:none;border:none;padding:0 0 0 12px;cursor:pointer;
flex-direction:column;gap:4px;align-items:flex-end;justify-content:center;
min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:21px;height:2px;background:#1D2F4F;
transition:transform .2s ease, opacity .15s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:760px){
.burger{display:flex}
.courant .in{gap:12px;padding-right:22px}
.courant .marque{font-size:12px;letter-spacing:.14em}
.courant nav.ouvert{display:flex;flex-direction:column;gap:0;position:absolute;
top:100%;left:0;right:0;z-index:50;background:#FCFBF7;
border-bottom:1px solid rgba(29,47,79,.18);
box-shadow:0 20px 28px -22px rgba(29,47,79,.65);padding:2px 30px 12px}
.courant nav.ouvert a{padding:15px 2px;font-size:12.5px;opacity:.92;
border-top:1px solid rgba(29,47,79,.1)}
.courant nav.ouvert a:first-child{border-top:none}
}
@media(prefers-reduced-motion:reduce){.burger span{transition:none}}
/* Le depot d'un extrait manuscrit, 15/08/2026. La zone existait deja, dessinee ; ce qui suit habille ce qu'elle fait maintenant : survol, envoi en cours, trace rendu, et le diagnostic de la photo, dont la couleur est le seul indice de gravite. Le trace revient detoure sur fond transparent : sans le fond clair de .depot-vu sous lui, il se poserait sur le gris du bloc et paraitrait sale. */
.depot{position:relative;transition:border-color .18s,background .18s}.depot:hover,.depot:focus-visible{border-color:var(--c,#1D2F4F);background:rgba(29,47,79,.035)}.depot:focus-visible{outline:2px solid var(--c,#1D2F4F);outline-offset:2px}.depot[data-survol]{border-color:var(--c,#1D2F4F);border-style:solid;background:rgba(29,47,79,.06)}.depot[data-occupe]{opacity:.55;pointer-events:none}.depot[data-pose]{padding:14px 18px;border-style:solid;border-color:rgba(29,47,79,.24)}.depot[data-pose] span,.depot[data-pose] em{display:none}.depot[data-pose] b::after{content:' (changer)';font-weight:400;opacity:.6}.depot b{display:block;font-size:15.5px}.depot span{display:block;font-size:13.5px;line-height:1.45;opacity:.68;margin-top:5px}.depot em{display:block;font-family:"Oswald",sans-serif;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin-top:9px}.depot-etat{margin-top:12px;padding:14px 16px;border-left:3px solid rgba(29,47,79,.3);background:rgba(29,47,79,.04);font-size:14.5px;line-height:1.5}.depot-etat.bon{border-left-color:#4C7A4A}.depot-etat.moyen{border-left-color:#A6772A}.depot-etat.erreur{border-left-color:#B3452B}.depot-titre{margin:0;font-weight:600}.depot-detail{margin:6px 0 0;opacity:.72;font-size:13.5px}.depot-liste{margin:8px 0 0;padding-left:18px}.depot-liste li{margin-top:4px;font-size:13.5px;line-height:1.45}.depot-liste li.dur{color:#B3452B}.depot-liste li.doux{opacity:.78}.depot-vu{background:#FCFBF7;border:1px solid rgba(29,47,79,.14);padding:10px;margin-bottom:10px}.depot-vu img{max-height:130px;width:auto;margin:0 auto;object-fit:contain}.depot-action{margin:10px 8px 0 0;border:1.5px solid #1D2F4F;background:#1D2F4F;color:#FCFBF7;font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;cursor:pointer}.depot-action.creux{background:transparent;color:#1D2F4F}.depot-action:hover{opacity:.85}
/* L'accueil au telephone, 17/08/2026, sur relecture d'ecran de Sebastian. Quatre
retraits, tous des ornements qui coutaient une hauteur d'ecran sans rien dire :
le bouton COMPOSER du bandeau (le composeur est deja dans la page et la barre
basse le rappelle ; a 390 px il chassait le burger hors du bandeau), le
sous-titre et le compteur 0/0/3 de l'atelier, et le filet sombre pose sous les
titres de section, qui doublait celui de la liste ou de la FAQ juste dessous.
L'espace libere est repris, pas laisse vide : la marge du titre retombe a 22 px. */
@media(max-width:760px){
/* !important : le lien du bandeau porte display:inline-block en style en ligne dans index.html, une regle de feuille ne le battrait pas. */
body.accueil .courant .bouton{display:none!important}
body.accueil #composer .titre .s{display:none}
body.accueil #composer .compteur{display:none}
body.accueil .entete{margin-bottom:22px}
body.accueil .duo,body.accueil .faq{border-top:none}
/* Le titre de section gardait 34 px sous lui, plus les 22 px du bloc, plus les 26 px
du pave : 82 px de vide avant la premiere ligne lue. Et la liste du materiel etait
indentee deux fois, la page puis le pave, soit 60 px de largeur perdus sur 390. */
body.accueil .entete .titre{margin-bottom:0}
body.accueil .duo>div{padding:20px 0}
}
/* ── BIM-BAM-BOUM : 1 + 2 = 3 (retours Sebastian du 17/08/2026) ──────────
Le cadre au mur est retire du triptyque : on ne vend pas un cadre. La
troisieme scene est la recette du carnet, composee dans le style choisi
juste avant. Les deux connecteurs disent l'operation : recette + style =
son image. */
.demo .num.gros{font-family:"Anton",sans-serif;font-size:clamp(26px,3.2vw,42px);letter-spacing:.02em;line-height:1;margin-bottom:14px;color:var(--c)}
.demo .signe{display:flex;align-items:center;justify-content:center;align-self:center;margin-top:-38px;font-family:"Anton",sans-serif;font-size:clamp(20px,2.4vw,30px);line-height:1;color:var(--c);opacity:.85}
/* Les quatre univers doivent se compter et se lire (17/08/2026, retour Sebastian).
Quatre images muettes en 2x2 se lisent comme une seule planche : on ne sait ni
qu on en a quatre, ni lequel est lequel. Chaque vignette porte donc son rang et
son nom, et la grille tient dans le meme rectangle que les scenes 1 et 3. */
.demo .quatre{display:grid;grid-template-columns:1fr 1fr;gap:7px 8px;width:100%;align-content:center}
.demo .quatre figure{margin:0;position:relative}
.demo .quatre img{width:100%;border:1px solid rgba(29,47,79,.16);box-shadow:0 8px 18px -14px rgba(29,47,79,.6)}
.demo .quatre .q-n{position:absolute;left:0;top:0;z-index:2;background:var(--c);color:#fff;font-family:"Oswald",sans-serif;font-weight:600;font-size:8.5px;letter-spacing:.1em;line-height:1;padding:3px 5px}
.demo .quatre figcaption{margin-top:4px;font-family:"Oswald",sans-serif;font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;opacity:.72;text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Le bouton du premier ecran. Il etait encadre, le 17/08, d'une annonce de prix
et d'une ligne de preuve : Sebastian les a fait retirer le 18/08, le bouton
reste seul. Le prix n'a pas disparu du site pour autant, il se lit plus bas,
dans le socle de l'atelier et au pied de page, et le JSON-LD Product le porte
toujours. Les deux classes sont supprimees, plus personne ne les appelle. */
.bouton-haut.plein{display:inline-block;width:auto;text-decoration:none;padding:15px 34px;font-size:13.5px;margin-top:4px}
@media(max-width:760px){.bouton-haut{display:block;text-align:center}}
.apres-demo{margin:22px 0 0;font-size:13px;line-height:1.4;opacity:.6;text-align:center;max-width:62ch;margin-inline:auto}
@media(max-width:760px){.demo{max-width:100%;min-width:0}.demo>*,.demo .temps>*{min-width:0}.e-demo,.entree,.e-haut{min-width:0;max-width:100%}.demo .quatre{gap:5px 6px}.demo .quatre figcaption{font-size:7.5px;letter-spacing:.06em}.demo .quatre .q-n{font-size:7.5px;padding:2px 4px}.demo .num.gros{font-size:22px;margin-bottom:8px}.demo .signe{font-size:18px;margin-top:-26px}.apres-demo{font-size:12px}}
/* ── L'atelier remis dans l'ordre : le style, la mise en page, puis la recette
(retour Sebastian du 17/08/2026). Voir d'abord les quatre univers, c'est
savoir ce qu'on est en train de fabriquer avant de taper vingt lignes.
La colonne des choix passe donc a gauche, et la recette prend la large. */
.atelier{grid-template-columns:0.92fr 1.08fr}
.colonne-style{display:block}
.enregistre{margin:0 0 20px;padding:11px 15px;border-left:3px solid var(--c);background:rgba(29,47,79,.035);font-size:13.5px;line-height:1.45;opacity:.82}
@media(max-width:900px){.atelier{grid-template-columns:1fr}}
/* ── Inserer une etape ou un ingredient au milieu, et non seulement a la fin.
La poignee reste discrete tant qu'on ne survole pas la ligne. */
.inserer{display:block;width:100%;border:none;background:none;padding:2px 0;margin:0;cursor:pointer;color:inherit;font-family:"Oswald",sans-serif;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.3;transition:opacity .14s;text-align:center;line-height:1}
.inserer::before{content:"";display:block;height:1px;background:var(--c);opacity:.45;margin-bottom:3px}
.ligne:hover+.inserer,.pas:hover+.inserer,.inserer:hover,.inserer:focus-visible{opacity:.75}
/* ── Le zoom sur un style : on clique la vignette, elle s'ouvre en grand.
Sans quoi on choisit un univers sur une image de 15 mm de haut. */
.stylegrille label,.bandeau label{position:relative}
.bandeau .loupe{right:5px;bottom:26px;font-size:8px;padding:3px 6px;letter-spacing:.1em}
.loupe{position:absolute;right:9px;bottom:9px;z-index:3;border:none;cursor:pointer;background:rgba(29,47,79,.82);color:#fff;font-family:"Oswald",sans-serif;font-size:9px;letter-spacing:.13em;text-transform:uppercase;padding:4px 9px;line-height:1}
.loupe:hover{background:var(--c)}
.zoom{position:fixed;inset:0;z-index:90;background:rgba(20,26,38,.88);display:flex;align-items:center;justify-content:center;padding:26px;cursor:zoom-out}
.zoom img{max-width:min(92vw,720px);max-height:88vh;width:auto;box-shadow:0 40px 90px -30px #000}
/* Le grand apercu du tunnel souvre au clic (17/08/2026). Ce quon agrandit est
une COPIE de la toile posee dans la page, pas une ![]()
: la regle ci-dessus
ne latteint pas, et sans celle-ci elle sortirait a sa taille de pixels. */
.zoom .zoom-toile{display:block;max-width:min(92vw,720px);max-height:88vh;width:auto;height:auto;box-shadow:0 40px 90px -30px #000}
/* Le repli agrandi : un `.poster` clone, en 3/4, donc borne par la hauteur
autant que par la largeur. Sans le terme en vh il deborderait de l'ecran. */
.zoom .zoom-brouillon{width:min(92vw,720px,66vh);box-shadow:0 40px 90px -30px #000}
/* Limage se donne comme cliquable, et le pointeur le dit. */
[data-affiche="grand"]{cursor:zoom-in}
[data-affiche="grand"]:not(.apercu-serveur){cursor:default}
/* ── Les quatre vignettes de la caisse souvrent aussi (18/08/2026, Sebastian).
Le pointeur ne suffit pas a le faire savoir : un pointeur ne se voit qu'une
fois la souris deja dessus, et jamais au doigt. La plaque porte donc son
invite, qui apparait au survol et au clavier. `pointer-events:none` est
necessaire : sans lui, l'invite intercepterait le clic qu'elle annonce. */
.lot-case .cadre{position:relative}
.lot-case [data-affiche].apercu-serveur{cursor:zoom-in}
.lot-case .cadre::after{content:"See it larger";position:absolute;right:8px;bottom:8px;z-index:3;
pointer-events:none;background:rgba(29,47,79,.82);color:#fff;font-family:"Oswald",sans-serif;
font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;line-height:1;
opacity:0;transition:opacity .14s}
.lot-case .cadre:hover::after,.lot-case .cadre:has([data-affiche]:focus-visible)::after{opacity:1}
.lot-case [data-affiche]:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.zoom figcaption{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff;font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.zoom .fermer{position:absolute;right:20px;top:16px;border:none;background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:.75;padding:4px 10px}
.zoom .fermer:hover{opacity:1}
/* ── Le lot de quatre montre ses quatre (17/08/2026). Une ligne qui dit
« les quatre univers » ne vend pas quatre images : on les affiche. */
.lot-quatre{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(29,47,79,.18)}
.lot-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.lot-grille figure{margin:0}
.lot-grille figcaption{margin-top:6px;font-family:"Oswald",sans-serif;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.66;text-align:center}
/* Chacune des quatre a SA mise en page (17/08/2026). Trois boutons sous la
vignette, celui qui est pris porte la couleur de la page. */
.lot-case{margin:0}
.lot-choix{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:6px}
.lot-a{border:1px solid rgba(29,47,79,.24);background:none;cursor:pointer;padding:5px 2px;font-family:"Oswald",sans-serif;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:inherit;opacity:.62;line-height:1.1;transition:opacity .13s,border-color .13s}
.lot-a:hover{opacity:1}
.lot-a.pris{border:1.5px solid var(--c);color:var(--c);opacity:1;font-weight:600}
@media(max-width:620px){.lot-grille{grid-template-columns:1fr 1fr}}
/* ============================================================================
18/08/2026 - RETOURS SEBASTIAN : LE LOGOTYPE, LE RECTANGLE DU MILIEU,
ET LE BLANC LAISSE PAR L'ANNONCE DE PRIX RETIREE
========================================================================= */
/* --- 1. L'en-tete porte le logotype, plus le nom compose en Oswald ---------
Le logotype est le nom en Caveat Regular converti en courbes (C-057). Le
fichier servi est un derive allege du maitre du Cerveau, refait par
« node outils/gen-logo.mjs » : on ne retape jamais le nom avec la police.
Hauteur fixe et attributs width/height sur l'image, sinon l'en-tete saute au
chargement. L'encre est celle de la regle d'usage du logo, #22201C, et pas le
bleu du site : le mot doit passer a cote des quatre univers sans se battre
avec eux. La meme regle interdit de descendre sous 200 px de large, d'ou la
largeur identique en mobile et en desktop. */
.courant .marque{min-width:0}
.courant .marque a{display:block;line-height:0}
.courant .marque img{display:block;height:28px;width:auto}
/* Sur telephone la barre porte aussi le bouton « Composer » et le menu : le
logotype n'a plus la place de faire ses 200 px. Il se REDUIT, il ne se
deforme pas. La hauteur passe donc en auto et c'est la largeur qui plie,
sinon le max-width:100% de la feuille ecrasait l'image en gardant les 21 px
de haut, et le mot se retrouvait etire de pres d'un tiers. Deformer le
logotype est interdit par sa regle d'usage, le reduire ne l'est que sous
200 px : c'est le moins mauvais des deux ecarts, et il est ici assume. */
@media(max-width:760px){
.courant .marque img{height:auto;width:min(196px,100%);min-width:150px}
.courant .in > .bouton{padding:9px 13px;font-size:11px}
}
/* Le plancher de 150 px ne tient plus avec le bouton, sous 360 px de large.
Entre un logotype devenu une tache et un raccourci de moins sur un ecran ou
la page porte deja trois appels a l'action, on retire le raccourci. */
@media(max-width:359px){.courant .in > .bouton{display:none}}
/* --- 2. Le rectangle du milieu de la demonstration -------------------------
Les quatre univers flottaient dans une case trop grande pour eux. La grille
se dimensionnait sur ses images et sur les legendes posees dessous, si bien
que la scene 2 depassait ses voisines : mesure du 18/08 a 1440 px, scenes 1
et 3 hautes de 298 px, scene 2 de 319 px, et le titre « 2 · Vous choisissez »
22 px plus bas que les deux autres.
La contrainte donnee par Sebastian est geometrique, et elle tombe juste :
quatre vignettes en 3/4 posees en 2x2 forment elles-memes un rectangle en
3/4, c'est-a-dire exactement la scene. Chaque vignette porte donc le ratio
de l'affiche, la rangee restante se repartit en gouttiere, et le nom passe
en cartouche SUR l'image. C'est lui qui faisait deborder : pose dessous, il
ajoutait deux lignes de texte a la hauteur de la colonne. Le rang reste en
pastille, on doit toujours pouvoir les compter. */
.demo .quatre{height:100%;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
column-gap:6px;row-gap:0;align-content:space-between}
.demo .quatre figure{position:relative;overflow:hidden;min-height:0;aspect-ratio:3/4;
border:1px solid rgba(29,47,79,.16);box-shadow:0 8px 18px -14px rgba(29,47,79,.6)}
.demo .quatre img{width:100%;height:100%;object-fit:cover;object-position:center top;
border:none;box-shadow:none}
/* Le nom se coupe, il ne se tronque pas : « Cahier de famille » ne tient pas
sur une ligne en dessous de 1100 px, et la troncature d'origine affichait
« CAHIER DE FAMI… », ce qui rate exactement ce que la legende sert a faire. */
.demo .quatre figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;
padding:5px 4px 4px;text-align:center;opacity:1;color:#1D2F4F;
white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;
letter-spacing:.08em;text-wrap:balance;
background:linear-gradient(to top,rgba(252,251,247,.97) 0%,rgba(252,251,247,.93) 64%,rgba(252,251,247,0) 100%)}
@media(max-width:760px){
.demo .quatre{column-gap:5px}
.demo .quatre figcaption{font-size:7.5px;letter-spacing:.06em;padding:4px 3px 3px}
.demo .quatre .q-n{font-size:7.5px;padding:2px 4px}
}
/* --- 3. Le blanc laisse par l'annonce de prix retiree ----------------------
La colonne de gauche portait, avant le 18/08, cent vingt pixels de plus :
les deux colonnes finissaient ensemble. Sans eux, le texte s'arretait a
mi-hauteur de la demonstration et laissait un trou sous le bouton. Les deux
colonnes se centrent donc l'une sur l'autre au lieu d'etre calees en haut.
L'accueil n'a pas de bloc « bas » : la deuxieme rangee de la grille d'entree
y est vide, et c'est elle qui empechait le centrage de mordre, alignement ou
pas. On la retire sur cette page, et seulement sur elle. En dessous de
1000 px la grille n'a qu'une colonne, il n'y a plus rien a centrer. */
@media(min-width:1001px){
body.accueil .entree{grid-template-areas:"haut demo";align-items:center}
body.accueil .entree .e-haut{padding-bottom:10px}
}
/* --- 4. Les etapes d'une recette se comptent -------------------------------
Les pages « Les classiques » du 18/08 publient la marche a suivre entiere.
Une liste ordonnee rendue avec le meme trait que les ingredients perd le
seul renseignement qui compte dans une recette : l'ordre. Le trait cede donc
la place au numero, et seulement sur .etapes. */
.liste.etapes{counter-reset:pas}
.liste.etapes li{counter-increment:pas;padding-left:32px}
.liste.etapes li::before{content:counter(pas);left:2px;top:9px;width:auto;height:auto;background:none;
font-family:"Oswald",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.06em;color:var(--c)}
/* --- 5. Le chapeau centre ne reprend jamais toute la largeur ---------------
Retour Sebastian du 18/08 sur « Les classiques » : le chapo y etait ecrit en
capitales, centre, sur cinq lignes pleine largeur, « ce qui rend illisible un
texte deja long ». Le texte a ete refait court, mais rien n empechait le
suivant de regrandir. La largeur du chapo centre est donc bornee, et il n a
plus la place de tenir sur cinq lignes. Le chapo cale a gauche, celui de
l accueil, n est pas concerne : c est le centrage qui casse la lecture, pas
les capitales. */
.chapeau .chapo{max-width:44ch;text-wrap:balance}
/* --- 6. Les deux grilles des pages « Les classiques » ----------------------
La grille du site descend de 6 a 4 puis a 2 colonnes. Ces pages en veulent
4 (les univers) et 3 (les mises en page), et il ne faut surtout pas les
ecrire en style en ligne : un style en ligne bat les media queries, et la
page se retrouvait avec quatre vignettes de 67 px de large sur un telephone.
Deux classes, donc, et elles retombent a deux colonnes comme le reste. */
.grille.univers{grid-template-columns:repeat(4,1fr)}
.grille.agencements{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.grille.univers{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.grille.agencements{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grille.univers,.grille.agencements{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.grille.agencements{grid-template-columns:1fr}}
/* Le rappel de dose, sous la liste des ingredients (18/08/2026). Il informe,
il ne bloque pas : une recette de famille sans chiffre reste vendable. */
.dose-rappel{margin:9px 0 0;font-size:13.5px;line-height:1.45;color:#B5502A}
/* L UNITE DE TEMPS, PROPOSEE PLUTOT QUE DEVINEE (23/08/2026, Sebastian).
Les deux champs de temps etaient des champs libres avec un exemple en
filigrane : on recoltait « 30 », « une demi-heure », « 2 » sans savoir si
c etait deux minutes ou deux heures, et l affiche imprimait ce doute.
Quatre valeurs se cliquent, un nombre seul se complete en minutes a la
sortie du champ (affiche.js), et la ligne d aide dit la regle une fois. */
.tempschoix{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tempschoix button{border:1px solid rgba(29,47,79,.24);background:transparent;color:inherit;font-family:"Source Sans 3",sans-serif;font-size:13px;line-height:1;padding:6px 10px;border-radius:999px;cursor:pointer;opacity:.72;transition:opacity .15s,border-color .15s,background .15s}
.tempschoix button:hover,.tempschoix button:focus-visible{opacity:1;border-color:var(--c,#1D2F4F);background:rgba(29,47,79,.05)}
.aide-temps{margin:10px 0 0;font-size:13.5px;line-height:1.45;opacity:.66}
/* Ce que le site a compris, dit a la personne au moment ou il le comprend :
completer tout seul ne suffit pas a etre certain, il faut le montrer. */
.temps-compris{margin:7px 0 0;font-size:13px;line-height:1.4;color:#B5502A}
.temps-compris[hidden]{display:none}
/* LA PREUVE QUE C EST ENREGISTRE (23/08/2026, Sebastian). Le site le PROMET
depuis toujours et ne l a jamais MONTRE : quelqu un qui passe vingt minutes a
taper la recette de sa grand mere n a aucune raison de croire une phrase.
La pastille s allume a chaque ecriture reussie, avec l heure, et elle
s eteint doucement. Elle ne s affiche jamais tant que rien n a ete ecrit :
une pastille verte au chargement d une page vide serait un mensonge. */
.enregistre-etat{display:inline-block;font-family:"Source Sans 3",sans-serif;font-size:12.5px;letter-spacing:0;text-transform:none;color:#4A7A3A;white-space:nowrap;opacity:0;transition:opacity .4s}
.enregistre-etat.vu{opacity:1}
.enregistre-etat:empty{display:none}
@media(max-width:520px){.tempschoix button{font-size:12.5px;padding:5px 9px}}
.dose-rappel[hidden]{display:none}
/* L'UNIVERS EN PLEINE LARGEUR, AU-DESSUS DE L'ATELIER (18/08/2026, demande de
Sebastian : « les apercus doivent etre plus mis en avant »). Il vivait dans
la colonne de gauche, a 45 % de la page, quatre vignettes sur deux rangs de
quelques centimetres : on choisissait le style sur des timbres-poste. Il
occupe maintenant toute la largeur, avant les deux colonnes de configuration.
20/08/2026, demande de Sebastian : les quatre ne sont plus de front mais en
carre de deux par deux. Une rangee de quatre donnait quatre vignettes
etroites ; le carre en fait une planche haute, chaque apercu deux fois plus
large, et la bande qui en resulte porte l'atelier juste dessous. Les descriptions sous les noms sont parties le meme jour :
ce qui vend un univers, c'est l'image, pas la phrase qui la decrit. */
.pave-univers{margin-bottom:26px}
.pave-univers .stylegrille{grid-template-columns:1fr 1fr;gap:18px}
.pave-univers .stylegrille label{padding:11px}
.pave-univers .stylegrille label.pris{padding:10px}
.pave-univers .stylegrille h4{font-size:13.5px;margin:12px 0 0}
@media(max-width:900px){.pave-univers .stylegrille{grid-template-columns:1fr 1fr;gap:14px}}
/* L'ECRAN 1 DE /creer/ APRES LE DEGRAISSAGE (18/08/2026, demande de Sebastian).
La colonne de gauche portait deux paragraphes d'explication, quatre puces de
socle et une mention sur les onze combinaisons. Tout est parti le meme jour :
il ne reste que le nom de la recette, « Je la veux » et le lien de retour a
l'atelier. A 57 % de la page, cette colonne est desormais un grand vide en
face de la seule chose qu'on est venu voir. On rend la largeur a l'apercu, et
on centre ce qui reste a gauche au lieu de le coller en haut. */
.ecran{grid-template-columns:1fr 56%}
.ecran .gauche{align-self:start}
@media(max-width:1000px){.ecran{grid-template-columns:1fr}
.ecran .gauche{padding:14px 30px 34px}}
/* Le folio de l'ecran 1 tombait sur le panneau bleu depuis que celui-ci s'est
elargi : bleu sur bleu, il devenait illisible. Il rejoint la marge gauche,
sur le papier. */
[data-etape-tunnel="affiche"] > .folio{left:max(30px,calc((100vw - 1280px)/2 + 30px));transform:none}
@media(max-width:1000px){[data-etape-tunnel="affiche"] > .folio{left:50%;transform:translateX(-50%)}}
/* Sur telephone, la carte d'univers est trop etroite pour porter les pastilles
et « See it larger » sur la meme ligne : le bouton passe dessous, en pleine
largeur, au lieu de recouvrir les couleurs. */
@media(max-width:560px){.pave-univers .stylegrille .loupe{position:static;display:block;width:100%;margin-top:9px}}
/* L'ATELIER EN UNE SEULE COLONNE, CENTREE (20/08/2026, demande de Sebastian).
La mise en page a quitte l'accueil ce matin. Sa colonne de gauche ne portait
plus que les trois schemas d'agencement, orphelins de leur titre, en face
d'un formulaire trois fois plus haut. Les trois cartes partent : le choix de
l'agencement reste entier sur /creer/, ou il se fait devant l'apercu, et
c'est le seul endroit ou il veut dire quelque chose.
Restait a rendre le reste lisible. Le bloc des styles tenait 1220 px de
large et le formulaire 645, l'un centre, l'autre colle a droite : deux
blocs, pas un. Ils prennent la meme largeur et le meme axe, et l'accueil
montre desormais UNE bande, du choix du style jusqu'au bouton.
Le socle des livrables passe de quatre colonnes a deux : il n'a plus que
deux cases, et `repeat(4,1fr)` les tassait dans la moitie gauche d'un cadre
pleine largeur. Il est porte par `#composer` parce que les 63 pages de la
collection ont le meme socle, avec ses quatre cases.
La ligne « votre composition est enregistree » suit la meme largeur : elle
annonce le bloc, elle ne doit pas le deborder. */
.atelier{grid-template-columns:1fr}
.enregistre,.pave-univers,.atelier,#composer .socle4{max-width:820px;margin-left:auto;margin-right:auto}
#composer .socle4{grid-template-columns:1fr 1fr}
#composer .lancer .alerte-longueur{text-align:left}
/* Les trois temps de la recette alignes. « Temps de preparation obligatoire »
tient sur deux lignes la ou « Pour » et « Temps de cuisson » n'en prennent
qu'une, et son champ descendait d'autant : trois soulignes a deux hauteurs.
Le libelle reserve ses deux lignes (10 px de fonte, interligne 1,55), les
champs se rangent. Les mots ne bougent pas, c'est la demande. */
.trois .champ2 label{min-height:31px}
/* ============================================================================
20/08/2026 - LE TELEPHONE : LES TROIS ETAPES SE VOIENT SANS GESTE
Demande de Sebastian, capture a l'appui : « dans la page d'accueil on doit
faire defiler un menu pour voir les 3 etapes, rends-le plus petit pour qu'on
voie les 3 facilement, comme sur la version mobile de posteryart ».
========================================================================= */
/* --- 1. La demonstration : un bandeau glissant redevient un triptyque ------
Depuis le 14/08, sous 760 px, `.demo` etait un rail horizontal : chaque
scene prenait 76 % de la largeur, la bande mesurait 724 px pour une fenetre
de 330, et les etapes 2 et 3 vivaient hors de l'ecran. Un visiteur qui ne
fait pas glisser voit une image de recette et rien de l'operation.
« BIM + BAM = BOUM » ne veut rien dire si on n'en voit qu'un tiers : c'est
une equation, elle se lit d'un seul coup d'oeil ou pas du tout.
La grille de trois revient donc, aux dimensions du telephone. Les colonnes
ne peuvent pas mentir sur la place : a 390 px de fenetre, chaque scene tient
dans 100 px, et tout ce qui l'accompagne descend a l'echelle - le titre a
9,5 px, l'onomatopee a 17, les connecteurs a 14. C'est petit, et c'est le
but : la vignette n'est pas la pour se lire, elle est la pour se compter.
La lecture, elle, se fait dans l'atelier juste dessous, en grand.
Le rail conserve sa raison d'etre nulle part ailleurs : `overflow` et
`scroll-snap` sont remis a plat, sinon la boite garde un defilement inutile
que le doigt trouve encore.
Complement du soir, meme demande : la boite gardait du rail son plein-cadre,
`margin-inline:-30px` avec 30 px de padding pour compenser. Un plein-cadre
dans une colonne qui n'est PAS centree dans la page ne recentre rien : la
boite partait du bord gauche de l'ecran, s'arretait 60 px avant le bord
droit, et son contenu ne faisait que 270 px la ou le titre, le chapo et
l'atelier en font 330. Le decalage se voyait, la largeur perdue aussi.
Les marges negatives partent : la demonstration prend exactement la bande de
la page, 30 px de blanc de chaque cote comme tout le reste, et les scenes
passent de 81 a 101 px. Le reste de l'echelle suit d'un cran. */
@media(max-width:760px){
.demo{display:grid;grid-template-columns:1fr 14px 1fr 14px 1fr;gap:0;
align-items:start;overflow:visible;scroll-snap-type:none;
margin-inline:0;padding:2px 0 0}
.demo .temps{scroll-snap-align:none}
.demo .num.gros{font-size:19px;margin-bottom:7px;letter-spacing:0}
.demo .signe{font-size:15px;margin-top:-18px}
.demo h3{font-size:10.5px;letter-spacing:.05em;line-height:1.25;margin:10px 0 0}
.demo p{font-size:11px;line-height:1.35}
.demo .quatre{column-gap:4px}
.demo .quatre .q-n{font-size:6.5px;padding:1px 3px;letter-spacing:.06em}
}
/* --- 2. L'en-tete de /creer/ : la mention ne passe plus sur le logotype ----
Le logotype est servi a 202 px de large et ne se laisse pas comprimer (regle
d'usage : jamais sous 200 px). A cote, « Composition enregistree sur cet
appareil » demandait sa propre place, et le tout depassait la fenetre : sur
la capture de Sebastian, la phrase passe SUR le nom. Elle ne dit rien
d'indispensable ici, la page le redit dans son corps, et l'en-tete d'un
telephone n'a de la place que pour le nom et le menu. */
@media(max-width:760px){
.courant .in span.marque{display:none}
}
/* --- 3. Le bloc de preuve (20/08/2026) ------------------------------------
Tous les selecteurs sont prefixes `avis-` ET ancres sous `[data-avis-preuve]`.
E-162 : un nom de classe generique nu dans une feuille chargee par plusieurs
pages finit par attraper une autre page, et `.scene` avait donne sa hauteur
d'ecran aux trois scenes de l'accueil pendant deux jours de production. La
double contrainte rend la collision impossible par construction.
Le bloc porte `hidden` dans le HTML, et la premiere regle le tient muet meme
si une autre feuille venait poser un `display` dessus. */
[data-avis-preuve][hidden]{display:none}
[data-avis-preuve] .avis-liste{list-style:none;margin:0;padding:0;display:grid;gap:20px;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
[data-avis-preuve] .avis-carte{border:1px solid rgba(29,47,79,.16);background:#fff;padding:20px 22px 16px}
[data-avis-preuve] .avis-mot{margin:0;border:none;padding:0;font-size:16.5px;line-height:1.6}
[data-avis-preuve] .avis-bas{margin:12px 0 0;font-size:12px;opacity:.5}
/* La methode de collecte n'est pas une note de bas de page decorative, c'est la
mention exigee a cote des avis. Elle se replie depuis le 21/08 pour laisser
la citation seule a l'oeil, mais elle s'ouvre d'un clic sur place : la loi
la veut accessible et claire, elle ne la veut pas depliee. Le resume garde
donc un contraste lisible, jamais grise a l'invisible. */
[data-avis-preuve] .avis-methode{margin:24px 0 0;padding-top:14px;
border-top:1px solid rgba(29,47,79,.16);font-size:12.5px;line-height:1.6;max-width:70ch}
[data-avis-preuve] .avis-methode summary{cursor:pointer;opacity:.7;letter-spacing:.03em}
[data-avis-preuve] .avis-methode p{margin:10px 0 0;opacity:.72}
@media(max-width:760px){
[data-avis-preuve] .avis-liste{grid-template-columns:1fr}
}
/* ── LE BANDEAU DE RETOUR DE CAISSE ────────────────────────────────────────
23/08/2026. Posé par `caisse.js` quand le visiteur revient sur cette page
après être parti payer. Il est en tête de `body`, hors de toute `section`,
donc `--c` n'y est pas hérité : il le pose lui-même, sinon le bouton naît
sans fond. Bleu d'encre du site, jamais un vert de validation : cette page
ne sait pas si le paiement a abouti, elle sait seulement qu'on est parti
payer, et le mot doit rester à cette hauteur-là. */
.retour-caisse{
--c:#FCFBF7;
/* STICKY, ET PAS SIMPLEMENT EN TETE DE FLUX (23/08/2026, mesure).
Pose en premier enfant de body, le bandeau se retrouvait a -106 px des le
chargement : /creer/ ramene le visiteur a son etape en cours, donc il
defilait hors de l'ecran avant d'avoir ete lu. Un message qu'on ne voit pas
ne vaut pas mieux que pas de message, et celui-ci s'adresse a quelqu'un qui
croit avoir perdu son argent. Il passe donc devant l'en-tete, z-index 60
contre 40, et il se ferme d'un clic. */
position:sticky;top:0;z-index:60;
display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
padding:16px 30px;
background:#1D2F4F;color:#FCFBF7;
font-size:15px;line-height:1.5;
}
.retour-caisse b{font-weight:600}
.retour-caisse-mot{flex:1 1 22em;min-width:0}
.retour-caisse .bouton{
color:#1D2F4F;padding:11px 22px;font-size:12.5px;
width:auto;flex:0 0 auto;text-decoration:none;
}
.retour-caisse-fermer{
margin-left:auto;border:none;background:none;color:inherit;
font-family:"Oswald",sans-serif;font-size:11.5px;letter-spacing:.15em;
text-transform:uppercase;opacity:.66;cursor:pointer;
}
.retour-caisse-fermer:hover{opacity:1}
@media(max-width:760px){
.retour-caisse{padding:14px 20px;font-size:14px}
.retour-caisse .bouton{width:100%}
.retour-caisse-mot{flex:1 1 100%}
.retour-caisse-fermer{margin-left:0}
}
/* ── LA RELECTURE AVANT PAIEMENT ───────────────────────────────────────────
23/08/2026. Encadre sobre, pas une alerte : on ne fait pas peur a quelqu'un
au moment ou il paie, on lui donne la derniere occasion de se relire. Le
filet gauche reprend le rouge du site, celui qui signale partout ailleurs
« regarde ici ». */
.avant-paiement{
margin:22px 0 0;padding:16px 20px;
background:#FBF7EC;border-left:3px solid #C8402E;
font-size:14.5px;line-height:1.6;
}
.avant-paiement p{margin:0}
.avant-paiement-t{
font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;
letter-spacing:.15em;text-transform:uppercase;color:#C8402E;
margin:0 0 7px !important;
}
.avant-paiement strong{font-weight:600}
.avant-paiement a{text-decoration:underline;white-space:nowrap}