/* ===== échelle d'espacement =====
   Une seule gouttière et un seul rythme vertical pour toute la page :
   tout ce qui s'aligne dessus reste aligné à n'importe quelle largeur. */
:root{
  --gut:clamp(20px,5vw,48px);   /* marge latérale */
  --secy:clamp(56px,8vw,80px);  /* respiration verticale des sections */
  --card:clamp(22px,3vw,32px);  /* padding interne des grandes cartes */
}

body{margin:0;background:#F6F1E7;font-family:'Archivo',system-ui,sans-serif}
html{scroll-behavior:smooth}
a{color:#141B2D}a:hover{color:#c98a12}
input,textarea{font-family:'Archivo',system-ui,sans-serif}
input::placeholder{color:#9a958a}
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%}

/* Conteneur unique. Le max-width vaut la largeur de référence du design,
   donc le rendu à 1440px est inchangé ; au-delà, ça cesse de s'étirer. */
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.nav-links{display:flex;align-items:center;gap:28px}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
      padding-top:clamp(32px,4vw,48px);padding-bottom:var(--secy)}
.hero-txt{display:flex;flex-direction:column;gap:22px}
/* Deux échelles, parce que la largeur utile n'est pas monotone : en deux
   colonnes le titre n'a que ~48% de la page, en une colonne il a tout. */
.hero-h1{margin:0;font-size:clamp(44px,4.5vw,64px);line-height:1.03;font-weight:900;
         color:#141B2D;letter-spacing:-1.5px;text-wrap:balance}
.hero-p{margin:0;font-size:clamp(16.5px,1.6vw,19px);line-height:1.55;color:#3d4353;
        max-width:52ch;text-wrap:pretty}

.steps{position:relative;display:flex;flex-direction:column;gap:18px;padding-left:34px}
.step{display:flex;gap:16px;align-items:center;background:#fff;border-radius:16px;
      padding:18px clamp(16px,2vw,20px)}
.step-ico{flex:none;width:56px;height:56px;border-radius:14px;background:#F6F1E7;
          display:grid;place-items:center}

/* ===== en-tête de section, partagé ===== */
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:62ch;
          margin-bottom:clamp(30px,4vw,44px)}
.eyebrow{font-weight:800;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8a6a1f}
.sec-h2{margin:0;font-size:clamp(28px,3.6vw,40px);font-weight:900;color:#141B2D;
        letter-spacing:-1px;line-height:1.08;text-wrap:balance}
.sec-lead{margin:0;font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:#3d4353;text-wrap:pretty}

/* ===== le concept ===== */
.concept{background:#fff;padding-block:var(--secy)}
.concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cc{background:#F6F1E7;border-radius:18px;padding:clamp(20px,2.4vw,28px);
    display:flex;flex-direction:column;gap:10px}
.cc-amber{background:#FFC24D}
.cc-h3{margin:0;font-size:clamp(18px,1.9vw,21px);font-weight:900;color:#141B2D;letter-spacing:-.4px}
.cc-p{margin:0;font-size:15px;line-height:1.55;color:#555b6b}
.cc-amber .cc-p{color:#4a3c14}

.prix{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.prix-c{display:flex;flex-direction:column;gap:2px}
.prix-old{font-size:20px;font-weight:800;color:rgba(20,27,45,.45);text-decoration:line-through}
.prix-new{font-size:26px;font-weight:900;color:#141B2D;letter-spacing:-.5px}
.prix-lbl{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(20,27,45,.6)}
.prix-fl{font-size:20px;font-weight:900;color:rgba(20,27,45,.5)}
.prix-note{margin:6px 0 0;font-size:12px;line-height:1.45;color:rgba(20,27,45,.62)}

/* ===== FAQ =====
   <details> natif : ouverture sans JS, accessible au clavier, et le contenu
   reste trouvable par la recherche du navigateur même replié. */
.faq{background:#F6F1E7;padding-block:var(--secy)}
.faq-list{display:grid;gap:12px;max-width:900px}
.qa{background:#fff;border-radius:16px}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;
            justify-content:space-between;gap:16px;padding:19px clamp(18px,2vw,26px);
            font-weight:800;font-size:clamp(15.5px,1.5vw,17px);color:#141B2D;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;
                   background:#F6F1E7;display:grid;place-items:center;
                   font-size:17px;font-weight:800;line-height:1}
.qa[open] summary::after{content:"−";background:#FFC24D}
.qa summary:focus-visible{outline:3px solid #141B2D;outline-offset:-3px;border-radius:16px}
.qa-a{margin:0;padding:0 clamp(18px,2vw,26px) 21px;font-size:15px;line-height:1.6;
      color:#555b6b;max-width:72ch}

.join{background:#141B2D;padding-block:var(--secy)}
.join-head{display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center;
           margin-bottom:clamp(32px,4vw,40px)}
.join-h2{margin:0;font-size:clamp(30px,4.4vw,42px);font-weight:900;color:#F6F1E7;letter-spacing:-1px}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1040px;
           width:100%;margin:0 auto;align-items:start}
.join-card{border-radius:20px;padding:var(--card);display:flex;flex-direction:column;gap:20px}
.card-h3{margin:8px 0 0;font-size:clamp(22px,2.4vw,26px);font-weight:900}

.field{border-radius:10px;padding:13px 16px;font-size:16px;outline:none;width:100%}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{border:none;cursor:pointer;font-weight:800;font-size:16px;padding:15px 24px;
     border-radius:12px;font-family:inherit;min-height:48px}

.foot{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;
      flex-wrap:wrap;padding-block:24px}

/* ===== adaptations ===== */

/* Deux colonnes serrées bien avant de casser : sous 980px la colonne texte
   descend sous 46ch et les cartes d'étapes compriment leur libellé. */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:clamp(32px,5vw,44px)}
  .hero-p{max-width:60ch}
  .hero-h1{font-size:clamp(38px,6.2vw,56px)}
}

@media (max-width:860px){
  .join-grid{grid-template-columns:1fr;max-width:560px}
}

@media (max-width:760px){
  .concept-grid{grid-template-columns:1fr}
}

/* Sur mobile les deux ancres ne servent à rien (la page tient en un scroll) :
   on garde le seul appel à l'action. Le runtime force flex-wrap:wrap, donc
   sans nowrap le nav casse sur deux lignes pour 1px de dépassement. */
@media (max-width:620px){
  .nav-link-anchor{display:none}
  .nav{gap:12px;flex-wrap:nowrap}
  /* !important : ces valeurs sont posées en style inline, qui gagne sur une classe */
  .nav-logo{font-size:18px!important}
  .nav-cta{flex:none;padding:8px 13px!important;font-size:12.5px!important}
}

/* Sous 360px, logo + bouton ne tiennent plus côte à côte même compactés :
   on empile en centrant, pour que ça ait l'air voulu plutôt que cassé. */
@media (max-width:359px){
  .nav{flex-wrap:wrap;justify-content:center;gap:10px}
}

@media (max-width:520px){
  .form-row{grid-template-columns:1fr}
  .steps{padding-left:28px}
  .step{gap:13px}
  .step-ico{width:48px;height:48px;border-radius:12px}
  .step-ico svg{width:28px;height:28px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

@keyframes stepGlowA{0%,38%,100%{background:#fff;box-shadow:0 1px 3px rgba(20,27,45,.06);transform:scale(1)}6%,30%{background:#FFC24D;box-shadow:0 10px 26px rgba(255,178,45,.35);transform:scale(1.03)}}
@keyframes dotTravelA{0%,8%{top:0;opacity:0}12%{opacity:1}40%{top:44%}52%{top:44%}84%{top:calc(100% - 14px);opacity:1}92%,100%{top:calc(100% - 14px);opacity:0}}