/* Contrôle Blanc : page d'accueil */
.tete .nav + .bouton{display:none}
@media (min-width:560px){.tete .nav + .bouton{display:inline-flex}}

/* Héros */
.heros{padding-block:clamp(2.5rem,6vw,5.5rem) clamp(3rem,7vw,6rem);overflow:hidden}
.heros__in{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
.heros h1{font-size:clamp(2.5rem,1.4rem + 4.2vw,4.4rem);margin-top:.9rem;max-width:15ch}
.chapo{margin-top:1.4rem;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:var(--encre-doux);max-width:54ch}
.heros__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.heros__garanties{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.6rem 0 0;padding:0;list-style:none;font-size:.9375rem;font-weight:600}
.heros__garanties li{display:flex;align-items:center;gap:.45rem}
.heros__garanties li::before{content:"";width:1rem;height:1rem;flex:none;border-radius:50%;background:var(--vert-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23277a4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
@media (min-width:960px){.heros__in{grid-template-columns:1.1fr .9fr}}

/* La chemise (illustration) */
.chemise{position:relative;width:min(100%,30rem);margin-inline:auto;aspect-ratio:1/1.05;transform:rotate(1.5deg)}
.chemise__onglet{position:absolute;left:6%;top:0;padding:.55rem 1.1rem .9rem;background:var(--kraft-2);border:2px solid var(--encre);border-bottom:0;border-radius:.6rem .6rem 0 0;font:700 .75rem/1 var(--machine);letter-spacing:.08em}
.chemise__fond{position:absolute;inset:2rem 0 0;background:var(--kraft);border:2px solid var(--encre);border-radius:.4rem 1rem 1rem 1rem;box-shadow:var(--ombre);background-image:repeating-linear-gradient(90deg,transparent 0 3px,oklch(80% 0.07 76 / .25) 3px 4px)}
.feuille{position:absolute;inset:3.6rem 1.4rem 1.4rem 1.8rem;background:var(--papier);border:2px solid var(--encre);border-radius:.3rem;padding:clamp(1rem,3vw,1.6rem);transform:rotate(-2.5deg);display:flex;flex-direction:column;box-shadow:0 14px 30px -18px oklch(30% 0.04 268 / .5)}
.feuille__tete{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.7rem;border-bottom:2px solid var(--encre);font:700 .75rem/1.2 var(--machine);letter-spacing:.06em;text-transform:uppercase}
.feuille__lignes{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:space-around}
.feuille__lignes li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-block:.35rem;border-bottom:1px dashed var(--filet);font-weight:600;font-size:clamp(.875rem,.8rem + .3vw,1rem)}
.feuille__lignes .tampon{font-size:.6875rem;animation:frappe .55s var(--doux) both;animation-delay:var(--d)}
.feuille__pied{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-top:.8rem;border-top:2px solid var(--encre)}
.feuille__pied small{display:block;font:700 .6875rem/1.2 var(--machine);letter-spacing:.06em;text-transform:uppercase;color:var(--encre-doux)}
.feuille__pied strong{font:700 clamp(1.5rem,1.1rem + 1.5vw,2.1rem)/1.1 var(--machine);word-spacing:-.4em}
.feuille__pied strong span{font-size:.55em;color:var(--encre-doux)}
.feuille__pied .rouge{color:var(--rouge)}
.cachet{position:absolute;right:-2.2rem;top:-3.2rem;width:7.4rem;height:7.4rem;border-radius:50%;border:3px solid var(--tampon);color:var(--tampon);display:grid;place-content:center;text-align:center;transform:rotate(-16deg);mix-blend-mode:multiply;animation:cachet .7s var(--doux) 2.1s both;font-family:var(--machine);line-height:1.05}
.cachet::before{content:"";position:absolute;inset:5px;border:1.5px solid currentColor;border-radius:50%;opacity:.6}
.cachet span{font-size:.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cachet b{font-size:1.45rem;letter-spacing:.02em;text-transform:uppercase;margin-block:.15rem}
@keyframes cachet{0%{opacity:0;transform:rotate(-30deg) scale(2.2)}60%{opacity:1;transform:rotate(-14deg) scale(.92)}100%{opacity:1;transform:rotate(-16deg) scale(1)}}
@media (max-width:520px){.cachet{width:5.8rem;height:5.8rem;right:-.6rem;top:-2.6rem}.cachet b{font-size:1.1rem}}

/* Bande */
.bande{background:var(--encre);color:var(--papier)}
.bande__in{padding-block:clamp(2rem,4vw,3rem)}
.bande p{font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);line-height:1.5;max-width:68ch;color:oklch(86% 0.015 268)}
.bande strong{color:var(--papier)}

/* Sections */
.section{padding-block:clamp(3.5rem,8vw,7rem)}
.section--kraft{background:var(--kraft);background-image:repeating-linear-gradient(90deg,transparent 0 3px,oklch(80% 0.07 76 / .22) 3px 4px)}
.section--papier2{background:var(--papier-2)}
.section--encre{background:var(--encre);color:var(--papier)}
.section--encre .sur{color:oklch(78% 0.06 266)}
.titre{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);margin-top:.7rem;max-width:22ch}
.intro{margin-top:1rem;font-size:1.125rem;color:var(--encre-doux);max-width:56ch}

/* Étapes */
.etapes3{list-style:none;margin:2.75rem 0 0;padding:0;display:grid;gap:1.25rem}
.etapes3 li{position:relative;padding:1.6rem 1.5rem 1.7rem;background:var(--papier);border:2px solid var(--encre);border-radius:.9rem;box-shadow:0 4px 0 var(--encre)}
.etapes3__num{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--tampon);color:var(--papier);font:700 1.25rem/1 var(--machine)}
.etapes3 h3{font-size:1.4rem;margin-top:1rem}
.etapes3 p{margin-top:.6rem;color:var(--encre-doux)}
@media (min-width:860px){.etapes3{grid-template-columns:repeat(3,1fr)}}

/* Grille des tests */
.grille-tests{list-style:none;margin:2.75rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.grille-tests li{background:var(--papier);border:2px solid var(--encre);border-radius:.8rem;padding:1.25rem 1.3rem 1.4rem;transition:transform .25s var(--doux),box-shadow .25s var(--doux)}
.grille-tests li:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 6px 0 var(--encre)}
.grille-tests .n{font:700 .8125rem/1 var(--machine);color:var(--tampon);letter-spacing:.06em}
.grille-tests h3{font-size:1.2rem;margin-top:.55rem;letter-spacing:-.01em}
.grille-tests p{margin-top:.5rem;font-size:.9375rem;color:var(--encre-doux);line-height:1.5}

/* Aperçu */
.apercu{display:grid;gap:3rem;align-items:center}
.apercu .bouton{margin-top:2rem}
.liste-coches{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.8rem}
.liste-coches li{position:relative;padding-left:1.9rem}
.liste-coches li::before{content:"";position:absolute;left:0;top:.2rem;width:1.25rem;height:1.25rem;border-radius:.3rem;border:2px solid var(--tampon);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.3l2.7 2.7 5.6-6' fill='none' stroke='%233b47b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/90% no-repeat}
.mini-cadran{margin:0;padding:2rem 2rem 1.75rem;background:var(--kraft);border:2px solid var(--encre);border-radius:1rem;box-shadow:0 5px 0 var(--encre);text-align:center;max-width:26rem;width:100%;justify-self:center}
.mini-cadran__aiguille{transform-origin:120px 130px;transform:rotate(38deg);animation:balance 4.5s ease-in-out infinite}
@keyframes balance{0%,100%{transform:rotate(-70deg)}45%,70%{transform:rotate(38deg)}}
.mini-cadran figcaption{margin-top:.6rem;font-weight:700}
.mini-cadran figcaption strong{font:700 2.6rem/1 var(--machine)}
.mini-cadran figcaption span{display:block;color:var(--encre-doux);font-size:.9375rem;margin-top:.3rem}
@media (min-width:900px){.apercu{grid-template-columns:1.2fr .8fr}}

/* Formules */
.formules{display:grid;gap:1.4rem;margin-top:2.75rem}
.formule{position:relative;display:flex;flex-direction:column;padding:2rem 1.75rem;background:var(--papier);border:2px solid var(--encre);border-radius:1rem}
.formule--pleine{background:var(--papier);box-shadow:0 6px 0 var(--tampon-fonce);border-color:var(--tampon-fonce);outline:4px solid var(--tampon-pale);outline-offset:-8px}
.formule__nom{font:700 .875rem/1 var(--machine);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-doux)}
.formule__prix{font:700 clamp(2.8rem,2rem + 3vw,3.8rem)/1 var(--machine);margin-top:.7rem;word-spacing:-.4em}
.formule__sous{margin-top:.4rem;color:var(--encre-doux);font-size:.9375rem}
.formule .liste-coches{flex:1}
.formule .bouton{margin-top:2rem;align-self:flex-start}
.formule__tampon{position:absolute;top:1.4rem;right:1.4rem;color:var(--tampon)}
.formules__note{margin-top:1.4rem;color:var(--encre-doux);font-size:.9375rem}
@media (min-width:820px){.formules{grid-template-columns:1fr 1fr}}

/* Confidentialité */
.confid{display:grid;gap:2rem}
.confid__texte{display:grid;gap:1.1rem;font-size:1.0625rem;color:oklch(86% 0.015 268);max-width:62ch}
.confid__texte strong{color:var(--papier)}
.confid__astuce{padding:1rem 1.2rem;border:1.5px dashed oklch(60% 0.08 266);border-radius:.6rem;font-size:.9375rem}
@media (min-width:900px){.confid{grid-template-columns:.9fr 1.1fr}}

/* FAQ */
.faq{display:grid;gap:2rem}
.faq__liste{display:grid;gap:.75rem}
.faq details{background:var(--papier);border:2px solid var(--encre);border-radius:.8rem}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;font-weight:700;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;border:2px solid var(--encre);font:700 1.1rem/1 var(--machine);transition:transform .25s var(--doux)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--encre);color:var(--papier)}
.faq details p{padding:0 1.3rem 1.3rem;color:var(--encre-doux);max-width:70ch}
@media (min-width:900px){.faq{grid-template-columns:.7fr 1.3fr}}

/* Appel final */
.final{background:var(--tampon);color:var(--papier);padding-block:clamp(3.5rem,7vw,6rem)}
.final__in{display:grid;gap:2rem;justify-items:start}
.final h2{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);max-width:20ch}
.final .bouton{background:var(--papier);color:var(--encre);border-color:var(--encre);box-shadow:0 3px 0 var(--encre)}
.final .bouton:hover{background:var(--encre);color:var(--papier)}

@media (prefers-reduced-motion:reduce){.mini-cadran__aiguille{animation:none}}
.formule__ht{font-size:.4em;margin-left:.35em;color:var(--encre-doux);letter-spacing:.04em}