/* ============ REGLAGES — tout se change ici ============ */
  :root{
    --noir:#000000;           /* fond */
    --blanc:#FFFFFF;          /* texte principal */
    --gris:#9C9CA4;           /* texte secondaire */
    --gris-fonce:#5A5A63;     /* labels */
    --trait:rgba(255,255,255,.10);
    --trait-2:rgba(255,255,255,.20);
    --surface:#0D0D0F;        /* cartes */
    --turquoise:#12B5B0;      /* reserve a la carte */

    --police:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --titre-max:92px;         /* taille du titre sur grand ecran */
    --titre-min:48px;         /* taille du titre sur telephone */
    --serrage:-.065em;        /* resserrement des lettres du titre */

    --large:1080px;           /* largeur max du contenu */
    --mesure:31em;            /* largeur max des paragraphes */
    --section:clamp(72px,10vw,132px);  /* espace entre sections */
    --hdr:68px;
    --hpad:109px;          /* espace entre l en-tete et le titre */
  }
  @media (min-width:900px){ :root{ --hdr:74px } }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  body{margin:0; background:var(--noir); color:var(--blanc);
       font-family:var(--police); -webkit-font-smoothing:antialiased; line-height:1.5}
  a{color:inherit; text-decoration:none}
  img,svg{max-width:100%}

  .wrap{width:100%; max-width:var(--large); margin:0 auto; padding:0 24px}

  /* ---------- en-tete ---------- */
  .header{position:sticky; top:0; z-index:50; background:rgba(0,0,0,.72);
          backdrop-filter:blur(14px); border-bottom:1px solid var(--trait)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px}
  @media (min-width:900px){ .nav{height:72px} }
  .brand__logo{height:24px; width:auto; display:block; fill:var(--blanc)}
  .droite{display:flex; align-items:center; gap:clamp(12px,2vw,20px)}
  .connexion{font-size:14px; font-weight:600; color:var(--gris); white-space:nowrap;
             transition:color .18s ease}
  .connexion:hover{color:var(--blanc)}
  .connexion:focus-visible{outline:2px solid var(--turquoise); outline-offset:3px;
                           border-radius:4px}
  @media (max-width:420px){ .connexion{font-size:13px} }
  .lang{display:inline-flex; align-items:center; border:1px solid var(--trait-2);
        border-radius:100px; padding:2px}
  .lang span{font-size:.72rem; font-weight:600; letter-spacing:.03em; color:var(--gris);
             padding:4px 10px; border-radius:100px}
  .lang span.on{background:var(--blanc); color:var(--noir)}

  /* ---------- briques communes ---------- */
  .centre{text-align:center; display:flex; flex-direction:column; align-items:center}
  .eyebrow{font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
           color:var(--gris-fonce); margin:0 0 clamp(18px,3vw,26px)}
  h1,h2{font-weight:800; letter-spacing:var(--serrage); line-height:.98; margin:0;
        text-wrap:balance}
  h1{font-size:clamp(var(--titre-min),12.3vw,var(--titre-max)); max-width:14em; font-weight:650}
  h2{font-size:clamp(28px,5.2vw,54px)}
  .chapo{font-weight:400; font-size:clamp(17px,1.9vw,21px); line-height:1.65;
         color:var(--gris); max-width:var(--mesure); margin:30px 0 0}
  .chapo b{color:var(--blanc); font-weight:700}
  .cta{margin-top:87px; display:inline-flex; align-items:center; gap:10px;
       background:linear-gradient(180deg,#19C7C1 0%,#0FA49F 100%); color:#03201F;
       border-radius:100px; box-shadow:0 10px 26px rgba(18,181,176,.30); font-weight:700;
       font-size:15px; padding:0 32px; height:56px;
       transition:transform .18s ease, opacity .18s ease}
  .cta:hover{transform:translateY(-1px); filter:brightness(1.03)}
  /* ecran trop court : on resserre juste ce qu il faut pour que le bouton reste visible */
  @media (max-height:700px){
    :root{--hpad:64px}
    .cta{margin-top:48px}
  }
  @media (max-height:620px){
    :root{--hpad:44px}
    .cta{margin-top:32px}
  }
  .cta:focus-visible{outline:2px solid var(--turquoise); outline-offset:3px}
  .cta__ic{width:22px; height:22px; flex:none; display:block}
  .metier{margin:clamp(16px,2.4vw,22px) 0 0; font-size:13px; color:var(--gris-fonce);
          letter-spacing:.01em}
  section{padding:var(--section) 0}
  .page{padding:0}
  .ligne{border-top:1px solid var(--trait)}

  /* ---------- hero ---------- */
  .hero{padding-top:var(--hpad); padding-bottom:var(--section)}
  .film{width:100%; max-width:860px; display:block; border-radius:18px;
        border:1px solid var(--trait); background:var(--surface);
        margin:clamp(40px,6vw,64px) auto 0}

  /* ---------- constat ---------- */
  .constat h2{max-width:14em}
  .maux{display:grid; gap:14px; margin:clamp(34px,5vw,52px) auto 0;
        max-width:760px; width:100%; text-align:left}
  @media (min-width:760px){ .maux{grid-template-columns:repeat(3,1fr)} }
  .mal{background:var(--surface); border:1px solid var(--trait); border-radius:16px;
       padding:22px 20px}
  .mal p{margin:0; font-size:15px; line-height:1.55; color:var(--gris)}
  .mal b{display:block; color:var(--blanc); font-weight:800; font-size:15px; margin-bottom:6px}

  /* ---------- etapes ---------- */
  .etapes{display:grid; gap:clamp(26px,4vw,40px); margin:clamp(40px,6vw,60px) auto 0;
          max-width:900px; width:100%; text-align:left; counter-reset:e}
  @media (min-width:760px){ .etapes{grid-template-columns:repeat(3,1fr)} }
  .etape{counter-increment:e}
  .etape::before{content:counter(e,decimal-leading-zero); display:block;
                 font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--turquoise);
                 margin-bottom:12px}
  .etape h3{margin:0 0 8px; font-size:18px; font-weight:800; letter-spacing:-.01em}
  .etape p{margin:0; font-size:15px; line-height:1.6; color:var(--gris)}

  /* ---------- video ---------- */
  .video{width:100%; max-width:860px; margin:clamp(34px,5vw,50px) auto 0;
         aspect-ratio:16/9; background:var(--surface); border:1px solid var(--trait);
         border-radius:18px; display:grid; place-items:center; color:var(--gris-fonce);
         font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}

  /* ---------- essai ---------- */
  .essai{background:var(--surface); border:1px solid var(--trait); border-radius:24px;
         padding:clamp(34px,5vw,60px) clamp(22px,4vw,48px); max-width:860px;
         margin:0 auto; width:100%}
  .bilan{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 16px;
         margin:clamp(28px,4vw,40px) 0 0; width:100%; text-align:left}
  @media (min-width:700px){ .bilan{grid-template-columns:repeat(4,1fr)} }
  .bilan div b{display:block; font-size:clamp(24px,3vw,32px); font-weight:800;
               letter-spacing:-.02em; font-variant-numeric:tabular-nums}
  .bilan div span{font-size:12px; color:var(--gris-fonce); letter-spacing:.06em;
                  text-transform:uppercase; font-weight:700}
  .serre{margin:clamp(26px,4vw,34px) 0 0; font-size:15px; color:var(--gris)}

  /* ---------- faq ---------- */
  .faq{max-width:760px; margin:clamp(36px,5vw,54px) auto 0; width:100%; text-align:left}
  details{border-top:1px solid var(--trait); padding:20px 0}
  details:last-child{border-bottom:1px solid var(--trait)}
  summary{cursor:pointer; list-style:none; font-weight:800; font-size:17px;
          letter-spacing:-.01em; display:flex; justify-content:space-between; gap:18px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; color:var(--gris); font-weight:400; font-size:22px; line-height:1}
  details[open] summary::after{content:"\2212"}
  details p{margin:12px 0 0; font-size:15px; line-height:1.65; color:var(--gris);
            max-width:44em}


  /* ---------- pages légales ---------- */
  .lg{padding:clamp(40px,7vw,80px) 0 clamp(64px,9vw,110px)}
  .lg-wrap{max-width:720px}
  .retour{display:inline-block; font-size:14px; font-weight:600; color:var(--gris);
          margin-bottom:clamp(28px,5vw,44px); transition:color .18s ease}
  .retour:hover{color:var(--blanc)}
  .retour:focus-visible{outline:2px solid var(--turquoise); outline-offset:3px; border-radius:4px}
  .lg .eyebrow{margin-bottom:14px}
  .lg-titre{font-size:clamp(30px,4.6vw,46px); font-weight:650; letter-spacing:-.035em;
            line-height:1.04; margin:0}
  .lg-chapo{color:var(--gris); font-size:17px; line-height:1.6; margin:16px 0 0; max-width:34em}
  .lg-date{color:var(--gris-fonce); font-size:13px; margin:18px 0 0}
  .lg-corps{margin-top:clamp(34px,5vw,50px)}
  .lg-corps p{color:var(--gris); font-size:16px; line-height:1.75; margin:0 0 18px; max-width:38em}
  .lg-h2{font-size:20px; font-weight:800; letter-spacing:-.015em; line-height:1.3;
         margin:clamp(32px,4vw,44px) 0 14px; padding-top:clamp(28px,4vw,38px);
         border-top:1px solid var(--trait)}
  .lg-h3{font-size:16px; font-weight:800; margin:26px 0 10px}
  .lg-corps p, .lg-corps li, .lg-chapo, .faq details p{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
  .lg-corps ul{margin:0 0 18px; padding-left:20px; max-width:38em}
  .lg-corps li{color:var(--gris); font-size:16px; line-height:1.75; margin-bottom:8px}
  .lg-corps a{color:var(--blanc); text-decoration:underline; text-underline-offset:3px}

  /* ---------- pied ---------- */
  .footer{border-top:1px solid var(--trait); padding:40px 0 56px}
  .footer__in{display:flex; flex-direction:column; gap:18px; align-items:center;
              text-align:center}
  @media (min-width:760px){ .footer__in{flex-direction:row; justify-content:space-between;
                                        text-align:left} }
  .legal{font-size:12px; color:var(--gris-fonce); line-height:1.6; margin:0}
  .liens{display:flex; flex-wrap:wrap; gap:18px; justify-content:center}
  .liens a{font-size:12px; color:var(--gris)}
  .liens a:hover{color:var(--blanc)}

  /* ---------- questions fréquentes ---------- */
  .faq{margin-top:clamp(30px,4vw,44px)}
  .faq details{border-top:1px solid var(--trait); padding:20px 0}
  .faq details:last-child{border-bottom:1px solid var(--trait)}
  .faq summary{cursor:pointer; list-style:none; font-weight:800; font-size:17px;
               letter-spacing:-.01em; display:flex; justify-content:space-between; gap:18px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; color:var(--gris); font-weight:400; font-size:22px; line-height:1; flex:none}
  .faq details[open] summary::after{content:"\2212"}
  .faq details p{margin:12px 0 0; font-size:16px; line-height:1.7; color:var(--gris); max-width:42em}

  /* ---------- adresse dans le pied de page ---------- */
  .mail{color:var(--gris); text-decoration:none; border-bottom:1px solid var(--trait);
        transition:color .18s ease, border-color .18s ease}
  .mail:hover{color:var(--blanc); border-bottom-color:var(--gris)}
  .footer__in > div{display:flex; flex-direction:column; gap:6px}