/* =========================================================
   AVERIS · système visuel du site
   Charte graphique v1.0 (août 2026)

   Couleurs  : jaune #FFD200 · noir #000 · encre #0A0A0A · blanc · papier #F6F5F2
               filet #E3E2DD · gris #6E6E68 · ambre #8A6A00
   Polices   : Poppins (voix, titres) · Inter (texte)
   Espaces   : 8 / 16 / 24 / 32 / 48 / 72 / 96
   Tailles   : mobile  H1 30 · H2 25 · H3 20 · phrase forte 20 · texte 16,5 · petit 15 · label 11,5
               bureau  H1 52 · H2 38 · H3 22 · phrase forte 24 · texte 17,5 · petit 16 · label 12
   Composants: 1. bloc clair avec filets  2. bloc noir  3. accent jaune
   ========================================================= */

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter.woff2) format('woff2')}

:root{
  /* couleurs */
  --jaune:#FFD200;
  --noir:#000000;
  --encre:#0A0A0A;
  --texte:#2A2A27;
  --blanc:#FFFFFF;
  --papier:#F6F5F2;
  --filet:#E3E2DD;
  --gris:#6E6E68;
  --ambre:#8A6A00;
  --n-texte:rgba(255,255,255,.78);
  --n-doux:rgba(255,255,255,.56);
  --n-filet:rgba(255,255,255,.14);

  /* espacements */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:96px;

  /* tailles */
  --h1:30px; --h2:26px; --h3:20px; --fort:20px; --corps-t:16.5px; --petit:15px; --label:11.5px;

  /* marges latérales : 8 % de la largeur au minimum (charte) */
  --pad:max(24px, 8vw);
  --max:1200px;

  --titre:'Poppins','Century Gothic',Arial,sans-serif;
  --corps:'Inter','Helvetica Neue',Arial,sans-serif;

  /* le symbole A, en puce de liste et en filigrane */
  --puce-clair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-70 -90 1329 1160'%3E%3Cpath d='M594.5 0 1189 1000H1070.9L866.1 677.2V551.2H810.2L594.5 204.7 378.7 551.2H322.8V677.2L118.1 1000H0Z' fill='%230A0A0A' stroke='%230A0A0A' stroke-width='44'/%3E%3Cpath d='M594.5 480.3 655.5 574.8V1000H533.5V574.8Z' fill='%23FFD200' stroke='%23FFD200' stroke-width='44'/%3E%3C/svg%3E");
  --puce-sombre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-70 -90 1329 1160'%3E%3Cpath d='M594.5 0 1189 1000H1070.9L866.1 677.2V551.2H810.2L594.5 204.7 378.7 551.2H322.8V677.2L118.1 1000H0Z' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='44'/%3E%3Cpath d='M594.5 480.3 655.5 574.8V1000H533.5V574.8Z' fill='%23FFD200' stroke='%23FFD200' stroke-width='44'/%3E%3C/svg%3E");
  --puce-noire:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-70 -90 1329 1160'%3E%3Cpath d='M594.5 0 1189 1000H1070.9L866.1 677.2V551.2H810.2L594.5 204.7 378.7 551.2H322.8V677.2L118.1 1000H0Z' fill='%23000' stroke='%23000' stroke-width='44'/%3E%3Cpath d='M594.5 480.3 655.5 574.8V1000H533.5V574.8Z' fill='%23000' stroke='%23000' stroke-width='44'/%3E%3C/svg%3E");
  --symbole-blanc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1189 1000'%3E%3Cpath d='M594.5 0 1189 1000H1070.9L866.1 677.2V551.2H810.2L594.5 204.7 378.7 551.2H322.8V677.2L118.1 1000H0Z' fill='%23FFFFFF'/%3E%3Cpath d='M594.5 480.3 655.5 574.8V1000H533.5V574.8Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  --symbole-noir:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1189 1000'%3E%3Cpath d='M594.5 0 1189 1000H1070.9L866.1 677.2V551.2H810.2L594.5 204.7 378.7 551.2H322.8V677.2L118.1 1000H0Z' fill='%23000'/%3E%3Cpath d='M594.5 480.3 655.5 574.8V1000H533.5V574.8Z' fill='%23000'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--blanc);color:var(--texte);
  font-family:var(--corps);font-size:var(--corps-t);line-height:1.7;font-weight:400;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--jaune);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--titre);margin:0;color:var(--encre);text-wrap:balance}
h1{font-size:var(--h1);font-weight:500;line-height:1.12;letter-spacing:-.025em}
h2{font-size:var(--h2);font-weight:500;line-height:1.2;letter-spacing:-.02em}
h3{font-size:var(--h3);font-weight:500;line-height:1.3;letter-spacing:-.01em}

/* =========================================================
   TYPOGRAPHIE (une seule échelle)
   ========================================================= */
.label{font-family:var(--titre);font-size:var(--label);font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1.5;color:var(--gris)}
.numero{font-family:var(--titre);font-size:var(--label);font-weight:500;letter-spacing:.16em;line-height:1.5;color:var(--gris);font-variant-numeric:tabular-nums}
.lead{font-size:var(--corps-t);line-height:1.7;max-width:62ch}
.lead--fort{font-weight:500;color:var(--encre)}
.petit{font-size:var(--petit);line-height:1.7;color:var(--gris);max-width:60ch}
.legende{font-size:13.5px;line-height:1.5;color:var(--gris)}
/* phrase forte : Poppins Regular, plus grande que le texte */
.fort{font-family:var(--titre);font-weight:500;font-size:var(--fort);line-height:1.35;letter-spacing:-.01em;color:var(--encre);max-width:30ch}
.fort--l{font-size:calc(var(--fort) + 4px);line-height:1.32}
.citation{font-family:var(--titre);font-weight:400;font-size:var(--fort);line-height:1.4;color:var(--gris)}

/* accent jaune discret : filet horizontal au-dessus d'une phrase clé */
.accent::before{content:"";display:block;width:32px;height:4px;background:var(--jaune);margin-bottom:var(--s2)}
.filet-jaune{display:block;width:32px;height:4px;background:var(--jaune);border:0;margin:0}

/* mot clé en jaune */
mark{background:var(--jaune);color:var(--noir);padding:0 .14em;margin:0 .02em;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* puces : le symbole A */
.puces li{display:flex;gap:var(--s2);align-items:baseline}
.puces li::before{content:"";flex:0 0 auto;width:12px;height:10px;background:var(--puce-clair) no-repeat center/contain}
.sur-noir .puces li::before,.panneau--noir .puces li::before{background-image:var(--puce-sombre)}
.carte-jaune .puces li::before{background-image:var(--puce-noire)}

/* =========================================================
   STRUCTURE ET SECTIONS
   ========================================================= */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:var(--s6);padding-bottom:var(--s6)}
.sec--court{padding-top:var(--s5);padding-bottom:var(--s5)}
.sur-blanc{background:var(--blanc)}
.sur-papier{background:var(--papier)}
.sur-noir{background:var(--noir);color:var(--n-texte);position:relative;isolation:isolate;overflow:hidden}
.sur-noir h2,.sur-noir h3,.sur-noir .fort{color:#fff}
.sur-noir .label,.sur-noir .numero,.sur-noir .petit,.sur-noir .legende{color:var(--n-doux)}
/* grille presque invisible sur les grandes zones noires (charte) */
.sur-noir::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:calc((100% - 2 * var(--pad)) / 6) 80px;background-position:var(--pad) 0;
}
.filigrane{position:absolute;z-index:-1;pointer-events:none;right:-14vw;bottom:-8vw;width:80vw;max-width:620px;aspect-ratio:1189/1000;background:var(--symbole-blanc) no-repeat center/contain;opacity:.04}

/* piles verticales : uniquement les pas de l'échelle */
.pile{display:flex;flex-direction:column}
.e1{gap:var(--s1)}.e2{gap:var(--s2)}.e3{gap:var(--s3)}.e4{gap:var(--s4)}.e5{gap:var(--s5)}
.etroit{max-width:760px}

/* =========================================================
   COMPOSANT 1 · BLOC CLAIR AVEC FILETS
   ========================================================= */
.filets{border-top:1px solid var(--filet)}
.filets > li{padding:var(--s2) 0;border-bottom:1px solid var(--filet);line-height:1.55}
.filets--num > li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline}
.filets--large > li{padding:var(--s4) 0}

/* panneau : fond blanc, filet 1 px, angles droits */
.panneau{background:var(--blanc);border:1px solid var(--filet);padding:var(--s4) var(--s3)}
.panneau .filets{border-top:0}
.panneau .filets > li:last-child{border-bottom:0}
.panneau--liste{padding:0 var(--s3)}
.panneau--liste > li{padding:var(--s2) 0;border-bottom:1px solid var(--filet);line-height:1.55}
.panneau--liste > li:last-child{border-bottom:0}
.panneau--noir{background:var(--noir);border-color:var(--noir);color:var(--n-texte)}
.panneau--noir .filets > li{border-color:var(--n-filet)}
.panneau h3{font-size:var(--label);font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1.5;color:var(--gris)}
.panneau--noir h3{color:var(--jaune)}

/* étiquettes fines */
.tags{display:flex;flex-wrap:wrap;gap:var(--s1)}
.tag{background:var(--papier);padding:6px 12px;font-size:14px;line-height:1.4;color:var(--encre)}
.sur-papier .tag{background:var(--blanc)}

/* oppositions « tu penses que / alors que » */
.opp{display:grid;gap:var(--s2)}
.opp .k{display:block;font-family:var(--titre);font-weight:500;font-size:var(--label);letter-spacing:.3em;text-transform:uppercase;color:var(--gris);margin-bottom:4px}
.opp .k--ambre{color:var(--ambre)}
.opp .avant{color:var(--gris)}
.opp .apres{font-family:var(--titre);font-weight:400;font-size:18px;line-height:1.4;color:var(--encre)}

/* format SI → ACTION */
.si .cond{display:block;font-size:var(--petit);line-height:1.55;color:var(--gris)}
.si .cond::before{content:"Si";margin-right:.6em;font-family:var(--titre);font-weight:500;font-size:var(--label);letter-spacing:.3em;text-transform:uppercase;color:var(--ambre)}
.si .act{display:flex;gap:var(--s1);margin-top:4px;font-family:var(--titre);font-weight:400;font-size:18px;line-height:1.4;color:var(--encre)}
.si .act::before{content:"→";color:var(--ambre)}

/* bénéfices */
.benefice{display:grid;gap:var(--s1)}
.benefice h3{margin-top:4px}
.benefice p{font-size:var(--petit);color:var(--gris);max-width:56ch}
.benefice .tags{margin-top:var(--s1)}

/* =========================================================
   COMPOSANT 2 · BLOC NOIR
   ========================================================= */
.noir{background:var(--noir);color:#fff;padding:var(--s4) var(--s3);font-family:var(--titre);font-weight:500;font-size:var(--fort);line-height:1.4;letter-spacing:-.01em}
.noir--l{padding:var(--s5) var(--s3);font-size:calc(var(--fort) + 4px);line-height:1.3}
.noir--s{padding:var(--s3);font-size:17px}
/* énoncé sur fond noir : filet fin au-dessus, sans cadre */
.enonce{border-top:1px solid var(--n-filet);padding-top:var(--s3);font-family:var(--titre);font-weight:500;font-size:calc(var(--fort) + 1px);line-height:1.45;color:#fff;max-width:32ch}

/* =========================================================
   COMPOSANT 3 · ACCENT JAUNE
   ========================================================= */
/* carte de l'offre */
.carte-jaune{background:var(--jaune);color:var(--noir);padding:var(--s5) var(--s3)}
.carte-jaune .promesse{font-family:var(--titre);font-weight:400;font-size:22px;line-height:1.35;letter-spacing:-.01em;max-width:22ch}
.carte-jaune .puces li{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.12);font-size:var(--petit);line-height:1.5}
.carte-jaune .puces li:last-child{border-bottom:0}
.carte-jaune .label{color:rgba(0,0,0,.6)}
.prix-bloc{border-top:1px solid rgba(0,0,0,.85);padding-top:var(--s4)}
.prix{font-family:var(--titre);font-weight:500;font-size:64px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--noir)}
/* aplat « des données réelles » */
.aplat{background:var(--jaune);color:var(--noir);padding:var(--s6) var(--pad)}
.aplat__in{max-width:calc(var(--max) - 2 * var(--pad));margin:0 auto}
.aplat .k{font-family:var(--titre);font-weight:400;font-size:var(--corps-t);line-height:1.5;max-width:34ch}
.aplat .big{font-family:var(--titre);font-weight:500;font-size:40px;line-height:1.05;letter-spacing:-.025em;margin-top:var(--s2)}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 28px;border:0;border-radius:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font-family:var(--titre);font-weight:500;font-size:16.5px;line-height:1.2;letter-spacing:.005em;
  transition:background-color .15s ease,transform .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.7;cursor:wait}
.btn--jaune{background:var(--jaune);color:var(--noir)}
.btn--jaune:hover{background:#F0C700}
.btn--noir{background:var(--noir);color:#fff}
.btn--noir:hover{background:#1c1c1c}
.btn--fleche::after{content:"→";font-family:var(--corps);font-weight:400;transition:transform .15s ease}
.btn--fleche:hover::after{transform:translateX(3px)}
.btn--bloc{width:100%}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.entete{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--filet)}
.entete__in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:var(--s3)}
.entete__logo{display:flex;align-items:center;text-decoration:none}
.avlogo{display:block;height:24px;width:auto;aspect-ratio:6400.2/1280;flex:0 0 auto;align-self:flex-start;color:var(--noir)}
.avlogo--blanc{color:#fff}
.avlogo--noir{color:var(--noir);--logo-fleche:#000}
.nav{display:none;align-items:center;gap:var(--s4)}
.nav a:not(.btn){font-size:15px;color:var(--gris);text-decoration:none}
.nav a:not(.btn):hover{color:var(--encre)}
.nav .btn,.entete__in > .btn{min-height:40px;font-size:14.5px;padding:0 18px}
.burger{width:44px;height:44px;display:grid;place-items:center;background:none;border:1px solid var(--filet);cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:var(--encre);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--encre)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.menu-mob{display:none;background:var(--blanc);border-top:1px solid var(--filet)}
.menu-mob.ouvert{display:block}
.menu-mob a{display:block;padding:var(--s2) 0;border-bottom:1px solid var(--filet);text-decoration:none;font-size:16px;color:var(--encre)}
.menu-mob a:last-child{border-bottom:0}
.etape-compteur{font-size:13.5px;color:var(--gris)}

/* en-tête transparent au-dessus de la photo, blanc dès qu'on défile */
.entete--hero{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .25s ease,border-color .25s ease}
.entete--hero .avlogo{color:#fff;transition:color .25s ease}
.entete--hero .burger{border-color:rgba(255,255,255,.28)}
.entete--hero .burger span,.entete--hero .burger span::before,.entete--hero .burger span::after{background:#fff}
.entete--hero .nav a:not(.btn){color:rgba(255,255,255,.75)}
.entete--hero.est-plein{background:rgba(255,255,255,.96);border-bottom-color:var(--filet);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.entete--hero.est-plein .avlogo{color:var(--noir)}
.entete--hero.est-plein .burger{border-color:var(--filet)}
.entete--hero.est-plein .burger span,.entete--hero.est-plein .burger span::before,.entete--hero.est-plein .burger span::after{background:var(--encre)}
.entete--hero.est-plein .nav a:not(.btn){color:var(--gris)}
.entete--hero ~ main .hero{margin-top:-63px}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;background:var(--noir);color:#fff;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;top:0;left:0;right:0;z-index:-1}
.hero__media img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.22) 76%,rgba(0,0,0,.06) 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.22) 76%,rgba(0,0,0,.06) 88%,transparent 100%);
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.14) 12%,rgba(0,0,0,0) 24%,rgba(0,0,0,.08) 36%,rgba(0,0,0,.3) 48%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.75) 68%,rgba(0,0,0,.88) 78%,#000 92%),
    radial-gradient(120% 70% at 55% 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);
}
.hero__in{padding-top:77vw;padding-bottom:var(--s5)}
.hero__col{display:flex;flex-direction:column}
.hero .label{color:rgba(255,255,255,.5)}
.hero .entree{font-family:var(--titre);font-weight:400;font-size:17px;line-height:1.4;color:rgba(255,255,255,.7);margin-top:var(--s3)}
.hero h1{color:#fff;margin-top:var(--s1);text-wrap:pretty}
.hero .sous{font-size:var(--petit);line-height:1.7;color:rgba(255,255,255,.68);max-width:40ch;margin-top:var(--s3)}
.hero .cible{font-size:13.5px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.88);margin-top:var(--s2)}
.hero .cta{margin-top:var(--s4)}
.rassure{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s5);border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s3)}
.rassure li{display:flex;flex-direction:column;gap:4px;padding:0 12px;border-left:1px solid rgba(255,255,255,.12)}
.rassure li:first-child{padding-left:0;border-left:0}
.rassure .ico{width:20px;height:20px;color:rgba(255,255,255,.75);margin-bottom:var(--s1)}
.rassure b{font-family:var(--titre);font-weight:500;font-size:15px;color:#fff;line-height:1.2}
.rassure span{font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.5)}

/* =========================================================
   SECTIONS PARTICULIÈRES
   ========================================================= */
/* méthode 4C */
.quatre-c{font-family:var(--titre);font-weight:500;font-size:80px;line-height:.9;color:var(--jaune);letter-spacing:-.03em}
.barres{display:grid;gap:var(--s2)}
.barre{display:flex;align-items:center;gap:var(--s2)}
.barre .n{font-family:var(--titre);font-size:var(--label);color:var(--n-doux);min-width:24px;font-variant-numeric:tabular-nums}
.barre .t{height:4px;flex:1;background:rgba(255,255,255,.1);position:relative}
.barre .t::after{content:"";position:absolute;top:0;left:0;bottom:0;width:var(--w,100%);background:var(--jaune)}

/* déroulé : deux panneaux, un filet de couleur en tête */
.phases{display:grid;grid-template-columns:1fr;gap:var(--s2)}
.phase{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4);min-height:170px;padding:var(--s4) var(--s3);border:0}
.phase{background:var(--noir);color:#fff}
.phase .numero{color:var(--jaune)}
.phase--1{background:var(--jaune);color:var(--noir)}
.phase--1 .numero{color:rgba(0,0,0,.62)}
.phase .quoi{font-family:var(--titre);font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:inherit}

/* staccato */
.stac{display:grid;gap:var(--s2)}
.stac li{font-family:var(--titre);font-weight:400;font-size:var(--fort);line-height:1.35;color:var(--encre)}

/* pourquoi moi */
.duo{display:grid;gap:var(--s5)}
.portrait{position:relative;overflow:hidden;width:100%;aspect-ratio:29/50;background:var(--papier)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 30%;display:block}
.parcours > li{display:grid;grid-template-columns:40px minmax(0,1fr);row-gap:var(--s1);padding:var(--s4) 0}
.parcours > li > *{grid-column:2}
.parcours > li > .numero{grid-column:1;grid-row:1 / span 4;padding-top:4px}
.parcours p{font-size:var(--petit);color:var(--gris);max-width:56ch}
.signature{display:flex;align-items:center;gap:var(--s2)}
.signature img{width:48px;height:48px;object-fit:cover;object-position:50% 38%;display:block;flex:0 0 auto;background:var(--filet)}
.signature b{display:block;font-family:var(--titre);font-weight:500;font-size:15px;line-height:1.3;color:var(--encre)}
.signature span{display:block;font-size:13.5px;color:var(--gris);line-height:1.4}
.signature--haut{align-items:flex-start}
.signature--haut p{font-family:var(--titre);font-size:var(--petit);line-height:1.6;color:var(--gris);max-width:44ch}

/* pour qui */
.qui{display:grid;grid-template-columns:1fr;gap:var(--s2)}

/* offre : notes */
.notes li{font-size:var(--petit);color:var(--gris)}
.notes b{font-weight:500;color:var(--encre)}

/* FAQ : <details> natif, icône dessinée */
.faq{border-top:1px solid var(--filet)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) 0;font-family:var(--titre);font-weight:400;font-size:17px;line-height:1.35;color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:14px;height:14px;background:linear-gradient(var(--encre),var(--encre)) center/14px 1.5px no-repeat,linear-gradient(var(--encre),var(--encre)) center/1.5px 14px no-repeat;transition:transform .2s ease}
.faq details[open] summary::after{background:linear-gradient(var(--encre),var(--encre)) center/14px 1.5px no-repeat}
.faq details p{padding:0 0 var(--s3);color:var(--gris);font-size:var(--petit);max-width:60ch}

/* CTA final */
.final{padding-top:var(--s7);padding-bottom:var(--s7)}
.final h2{max-width:18ch}

/* pied de page */
.pied{background:var(--noir);color:var(--n-doux);padding-top:var(--s5);padding-bottom:var(--s7);border-top:1px solid var(--n-filet)}
.pied p{font-size:13.5px;line-height:1.6;max-width:38ch}
.pied__liens{display:flex;flex-wrap:wrap;gap:var(--s3)}
.pied__liens a{color:var(--n-texte);text-decoration:none;font-size:13.5px}
.pied__liens a:hover{color:#fff}

/* barre sticky mobile : discrète */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid var(--filet);
  padding:var(--s1) var(--pad);padding-bottom:calc(var(--s1) + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  transform:translateY(110%);transition:transform .22s ease;
}
.sticky.visible{transform:translateY(0)}
.sticky .info{font-family:var(--titre);font-weight:500;font-size:14.5px;color:var(--encre)}
.sticky .btn{min-height:40px;font-size:14.5px;padding:0 18px}

/* =========================================================
   FORMULAIRE
   ========================================================= */
.progress{height:4px;background:var(--filet);position:relative}
.progress span{position:absolute;top:0;bottom:0;left:0;background:var(--jaune);transition:width .25s ease}
.cand{min-height:calc(100vh - 66px);background:var(--papier);padding-top:var(--s4);padding-bottom:var(--s6)}
.cand__col{max-width:680px}
.cand h1{font-size:var(--h1)}
.etape{border:0;margin:0;padding:0;min-width:0}
.etape[hidden]{display:none}
.etape__titre{font-family:var(--titre);font-weight:500;font-size:var(--h3);line-height:1.3;padding:0;margin-bottom:var(--s3);color:var(--encre)}
.champ{display:grid;gap:var(--s1);border:0;margin:0;padding:0;min-width:0}
.champ > label,.champ legend{font-size:15px;font-weight:500;padding:0;line-height:1.45;color:var(--encre)}
.champ legend{margin-bottom:var(--s1)}
.champ input[type=text],.champ input[type=email],.champ input[type=tel],.champ select,.champ textarea{
  font:inherit;font-size:16px;line-height:1.4;background:var(--blanc);border:1px solid var(--filet);border-radius:0;
  padding:14px 16px;min-height:52px;width:100%;color:var(--encre);-webkit-appearance:none;appearance:none;
}
.champ select{background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px;text-overflow:ellipsis}
.champ textarea{min-height:120px;resize:vertical;line-height:1.55}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--jaune);outline-offset:0;border-color:var(--encre)}
.champ .aide{font-size:13.5px;color:var(--gris)}
.champ .err{display:none;font-size:13.5px;color:var(--encre);font-weight:500}
.champ.erreur .err{display:block}
.champ.erreur input,.champ.erreur select,.champ.erreur textarea{border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.tel-groupe{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:var(--s1)}
.choix{display:grid;gap:var(--s1)}
.choix--2{grid-template-columns:1fr 1fr}
.choix label{display:flex;gap:12px;align-items:center;min-height:52px;padding:10px 16px;background:var(--blanc);border:1px solid var(--filet);cursor:pointer;font-size:15.5px;line-height:1.35;color:var(--encre)}
.choix--2 label{padding:10px 12px;gap:10px}
.choix input{accent-color:var(--noir);width:18px;height:18px;flex:0 0 auto;margin:0}
.choix label:has(input:checked){border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.note-envoi{font-size:13.5px;line-height:1.5;color:var(--gris)}
.note-envoi a{color:var(--encre)}
.lien-retour{background:none;border:0;cursor:pointer;font-size:15px;color:var(--gris);text-decoration:underline;padding:12px 0;text-align:left;justify-self:start}
.form-erreur{background:var(--noir);color:#fff;padding:14px 16px;font-size:15px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================
   PAGES SIMPLES (merci, légal, 404)
   ========================================================= */
.page-simple{min-height:calc(100vh - 63px);display:flex;align-items:center;padding-top:var(--s6);padding-bottom:var(--s6)}
.page-simple h1{color:#fff}
.ok{width:44px;height:44px;background:var(--jaune);display:grid;place-items:center;color:#000;font-size:22px;font-family:var(--titre)}
.prose{max-width:720px}
.prose h1{margin-bottom:var(--s1)}
.prose h2{font-size:var(--h3);margin-top:var(--s5);margin-bottom:var(--s1)}
.prose p{font-size:16px;line-height:1.7}
.prose p + p{margin-top:var(--s1)}
.a-completer{background:var(--papier);border-bottom:2px solid var(--jaune);padding:0 4px}

/* =========================================================
   MOBILE : boutons à coins de 4 px (exception prévue par la charte)
   ========================================================= */
/* =========================================================
   DÉTAILS ÉDITORIAUX
   ========================================================= */
/* label qui ouvre une section : filet jaune horizontal dessous */
.ouvre::after{content:"";display:block;width:32px;height:4px;background:var(--jaune);margin-top:12px}
/* grand numéro de phase, discret */
.numero--grand{font-family:var(--titre);font-weight:500;font-size:56px;line-height:1;letter-spacing:-.04em;color:#DAD9D3}
.sur-papier .numero--grand{color:#DEDCD5}
/* bénéfices : pastille numérotée */
.benefice .numero{display:inline-grid;place-items:center;justify-self:start;width:32px;height:32px;background:var(--noir);color:#fff;letter-spacing:0;font-size:12px}
/* filigrane noir sur l'aplat jaune */
.aplat{position:relative;overflow:hidden;isolation:isolate}
.filigrane--noir{background-image:var(--symbole-noir);opacity:.07}
/* filets sur fond noir */
.sur-noir .filets,.sur-noir .filets > li{border-color:var(--n-filet)}
.sur-noir .notes li{color:var(--n-texte)}
.sur-noir .notes b{color:#fff}

@media (max-width:899px){
  .btn{border-radius:4px}
  .cta{align-items:stretch}
  .cta .btn{width:100%}
  .pied{padding-bottom:calc(var(--s7) + 16px)}
}

/* =========================================================
   TABLETTE
   ========================================================= */
@media (min-width:600px) and (max-width:899px){
  .hero__media{left:auto;width:72%}
  .hero__media::after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,.3) 48%,rgba(0,0,0,.8) 66%,#000 90%)}
  .hero__in{padding-top:62vw}
  .hero__col{max-width:600px}
  .portrait{max-width:520px}
}

/* =========================================================
   ORDINATEUR
   ========================================================= */
@media (min-width:900px){
  :root{
    --pad:max(48px, 8vw);
    --h1:52px; --h2:38px; --h3:22px; --fort:24px; --corps-t:17.5px; --petit:16px; --label:12px;
  }
  .sec{padding-top:var(--s7);padding-bottom:var(--s7)}
  .sec--court{padding-top:var(--s6);padding-bottom:var(--s6)}
  .nav{display:flex}
  .burger{display:none}

  .hero{min-height:720px;display:flex;align-items:center}
  .hero__media{top:0;bottom:0;left:auto;right:0;width:54%}
  .hero__media img{height:100%;object-fit:cover;object-position:50% 12%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 22%,#000 50%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 22%,#000 50%)}
  .hero__media::after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 20%,rgba(0,0,0,.15) 50%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 72%,rgba(0,0,0,.55) 100%)}
  .hero__in{width:100%;padding-top:152px;padding-bottom:var(--s7)}
  .hero__col{max-width:600px}
  .hero .entree{font-size:21px;margin-top:var(--s4)}
  .hero h1{margin-top:var(--s2);line-height:1.1}
  .hero .sous{margin-top:var(--s4)}
  .hero .cta{margin-top:var(--s5)}
  .rassure{max-width:520px;margin-top:var(--s6)}
  .rassure li{padding:0 var(--s3)}
  .rassure b{font-size:17px}
  .rassure span{font-size:12.5px}
  .filigrane{right:4vw;bottom:-60px;width:40vw}

  .filets--duo{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s5)}
  .panneau{padding:var(--s5) var(--s4)}
  .panneau--liste{padding:0 var(--s4)}
  .phases{grid-template-columns:1fr 1fr}
  .phase{padding:var(--s5) var(--s4)}
  .phase .quoi{font-size:30px}
  .opp{grid-template-columns:1fr 1fr;column-gap:var(--s5)}
  .opp .apres,.si .act{font-size:20px}
  .quatre-c{font-size:150px}
  .aplat{padding:var(--s7) var(--pad)}
  .aplat .big{font-size:72px}
  .noir{padding:var(--s5) var(--s5);max-width:760px}
  .noir--l{padding:var(--s6) var(--s5)}
  .noir--s{padding:var(--s3) var(--s4);max-width:none}
  .qui{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .carte-jaune{padding:var(--s6) var(--s6)}
  .carte-jaune .promesse{font-size:32px}
  .prix{font-size:96px}
  .offre{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s6);align-items:start}
  .duo{grid-template-columns:minmax(0,420px) minmax(0,1fr);grid-template-areas:"photo tete" "photo corps";column-gap:var(--s6);row-gap:var(--s5);align-items:start}
  .duo__tete{grid-area:tete}
  .duo__corps{grid-area:corps}
  .duo > .portrait{grid-area:photo}
  .portrait{position:sticky;top:100px}
  .sticky{display:none}
  .cta .btn{min-width:320px}
  .numero--grand{font-size:88px}
  .pied{padding-bottom:var(--s5)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* =========================================================
   PAGE CONTACT
   ========================================================= */
.btn--whatsapp{gap:10px}
.btn--whatsapp .ico{width:20px;height:20px;flex:0 0 auto}
.separateur{display:flex;align-items:center;gap:var(--s2);color:var(--gris);font-size:13.5px}
.separateur::before,.separateur::after{content:"";flex:1;height:1px;background:var(--filet)}