/* ============================================================
   SECUTASK — feuille de style unique (site multi-pages)
   Une seule direction : fond clair, encre presque noire, accent
   rose soutenu. Filets fins, aucune carte flottante, beaucoup
   d'air. Typographie : Inter seule (fonte variable 400→700).
   ============================================================ */

:root{
  /* fonds */
  --bg:#f6f5f2;          /* fond courant */
  --bg-alt:#ffffff;      /* bandes claires */
  --band:#efedf1;        /* bandes alternées */
  --deep:#ebe9e4;        /* aplats discrets */
  --ink:#18171d;         /* fonds sombres et titres */
  --ink-soft:#242228;    /* fonds sombres secondaires */

  /* textes */
  --body:#45434a;
  --muted:#5f5c66;
  --faint:#6e6b74;

  /* accent */
  --accent:#e45d83;
  --accent-deep:#a8385d; /* liens et surtitres sur fond clair */
  --accent-light:#ef6f98;/* accent sur fond sombre */

  /* filets */
  --line:rgba(24,23,29,.12);
  --line-strong:rgba(24,23,29,.22);
  --line-dark:rgba(255,255,255,.14);

  --wrap:1200px;
  --gutter:40px;
  --head-h:82px;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:110px;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
svg{display:block;}
img{max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.section{padding:104px 0;}
.band{background:var(--band);}
.section-head{max-width:760px;margin:0 0 56px;}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:14.5px;letter-spacing:-.005em;
  padding:13px 26px;border-radius:4px;border:1px solid transparent;cursor:pointer;
  transition:background .22s, color .22s, border-color .22s, transform .22s;
}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);}
.btn-light{background:#fff;color:var(--ink);border-color:#fff;}
.btn-light:hover{background:var(--accent-light);border-color:var(--accent-light);color:var(--ink);}
/* Texte sombre et non blanc sur le rose : le blanc n'atteignait que
   3,39 pour 1, sous le seuil de 4,5 exigé pour ce corps de texte. Le
   sombre monte à 5,25 pour 1 sans rien changer à la couleur du bouton. */
.btn-accent{background:var(--accent);color:var(--ink);border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-light);border-color:var(--accent-light);color:var(--ink);}
.btn-dark-ghost{color:#fff;border-color:rgba(255,255,255,.38);}
.btn-dark-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);}

/* ---------- Surtitre ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:20px;
}
.kicker::before{content:"";width:24px;height:1px;background:var(--accent);flex-shrink:0;}

/* ---------- Titres ---------- */
.section-title{
  font-weight:700;font-size:clamp(30px,3.9vw,48px);line-height:1.08;
  letter-spacing:-.035em;margin:0;color:var(--ink);
}

/* ---------- Liens de continuité ---------- */
.text-link{
  display:inline-block;font-weight:700;color:var(--ink);
  border-bottom:1.5px solid var(--accent);padding-bottom:4px;transition:color .2s;
}
.text-link:hover{color:var(--accent-deep);}
.lien-suite{margin:48px 0 0;font-weight:600;font-size:16px;}
.lien-suite a{color:var(--accent-deep);border-bottom:1px solid var(--accent);padding-bottom:2px;transition:color .2s;}
.lien-suite a:hover{color:var(--ink);}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--head-h);
  background:rgba(24,23,29,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:background .3s, border-color .3s;
}
.header.scrolled{background:rgba(24,23,29,.97);border-bottom-color:var(--line-dark);}
.header-inner{display:flex;align-items:center;height:var(--head-h);gap:38px;}
.logo{font-weight:700;font-size:22px;letter-spacing:-.035em;color:#fff;}
.logo .dot{color:var(--accent-light);}
.header-nav{display:flex;gap:28px;margin-left:6px;}
.header-nav a{
  font-weight:500;font-size:14px;color:rgba(255,255,255,.74);
  position:relative;transition:color .2s;
}
.header-nav a::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1.5px;background:var(--accent-light);transition:width .28s ease;}
.header-nav a:hover,.header-nav a.active{color:#fff;}
.header-nav a:hover::after,.header-nav a.active::after{width:100%;}
.header-cta{padding:10px 21px;font-size:14px;background:#fff;color:var(--ink);border-color:#fff;}
.header-cta:hover{background:var(--accent-light);border-color:var(--accent-light);color:#fff;}
.header-toggle{display:none;margin-left:auto;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.header-toggle span{width:24px;height:2px;background:#fff;transition:.25s;}
.header-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.header-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.header-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* ---------- Sélecteur de langue ---------- */
.lang{display:flex;align-items:center;margin-left:auto;}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.08em;
  color:rgba(255,255,255,.52);background:none;border:0;padding:6px 9px;
  cursor:pointer;transition:color .2s;
}
/* Le liseré détache les drapeaux du fond sombre de l'en-tête : sans lui,
   le bleu marine du drapeau français s'y fondrait par son bord gauche. */
.drapeau{
  width:17px;height:auto;display:block;border-radius:1.5px;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
  opacity:.62;transition:opacity .2s;
}
.lang-btn:hover .drapeau,.lang-btn.actif .drapeau{opacity:1;}
.lang-btn:hover{color:var(--accent-light);}
.lang-btn.actif{color:#fff;}
.lang-btn + .lang-btn{border-left:1px solid var(--line-dark);}
.lang-mobile{display:none;}

.header-mobile{display:none;flex-direction:column;background:var(--ink);border-bottom:1px solid var(--line-dark);padding:12px var(--gutter) 24px;}
.header-mobile a{font-size:16px;color:#fff;padding:14px 0;border-bottom:1px solid var(--line-dark);}
.header-mobile a.btn{background:#fff;color:var(--ink);text-align:center;margin-top:16px;border-bottom:none;}
.header-mobile.open{display:flex;}

/* ============================================================
   OUVERTURE (accueil)
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--head-h) + 92px) 0 116px;
  background:var(--ink);color:#fff;
}
/* halo courbe en bas de la zone sombre */
.hero::after{
  content:"";position:absolute;z-index:-1;width:1000px;height:440px;
  left:50%;bottom:-290px;transform:translateX(-50%) rotate(-8deg);
  border:1px solid rgba(229,93,131,.3);border-radius:50%;
  box-shadow:0 -44px 0 -43px rgba(112,80,238,.55), 0 44px 0 -43px rgba(112,80,238,.55);
}
.hero-grid{max-width:940px;text-align:center;}
.hero-text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.hero-eyebrow{
  font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:24px;
}
.hero-title{
  font-weight:700;font-size:clamp(28px,4.4vw,48px);line-height:1.12;letter-spacing:-.045em;
  color:#fff;margin:0 0 24px;
}
.hero-title .hl{color:var(--accent-light);}
.hero-lede{font-size:18px;line-height:1.6;color:rgba(255,255,255,.74);max-width:56ch;margin:0 0 34px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.hero-visual{position:relative;max-width:780px;margin:52px auto -34px;}
.hero-visual svg{width:100%;height:auto;overflow:visible;}
/* Les tracés portent pathLength="1" : la longueur est normalisée,
   le dash ne dépend donc plus de la géométrie réelle du chemin. */
.hero-line,.hero-out,#heroPath{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s ease forwards .3s;}
.hero-line.d29{animation-delay:.42s;}
.hero-line.d32{animation-delay:.54s;}
.hero-line.d35{animation-delay:.66s;}
.hero-line.d27{animation-delay:.78s;}
.hero-line.d30{animation-delay:.9s;}
#heroPath{animation-duration:.7s;animation-delay:1.5s;}
.hero-out{animation-duration:.9s;animation-delay:2s;}
.hero-out.d29{animation-delay:2.14s;}
.hero-out.d32{animation-delay:2.28s;}
.hero-pulse{opacity:0;animation:pulse 2.4s ease-in-out infinite;animation-delay:2.4s;}
.hero-pulse.d27{animation-delay:2.7s;}
.hero-pulse.d29{animation-delay:2.9s;}
.hero-pulse.d30{animation-delay:3.05s;}
.hero-pulse.d32{animation-delay:3.2s;}
.hero-pulse.d35{animation-delay:3.5s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pulse{0%,100%{opacity:.28;}50%{opacity:1;}}

/* ============================================================
   APERÇU DE LA MÉTHODE (accueil)
   ============================================================ */
.apercu-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-strong);
}
.ap-step{padding:34px 44px 0;border-left:1px solid var(--line);position:relative;}
.ap-step:first-child{border-left:none;padding-left:0;}
.ap-step:last-child{padding-right:0;}
.ap-step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.ap-num{
  display:block;font-weight:700;font-size:40px;line-height:1;
  letter-spacing:-.045em;color:var(--accent-deep);margin-bottom:14px;
}
.ap-title{font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.03em;color:var(--ink);margin:0 0 10px;}
.ap-text{font-size:15px;color:var(--muted);margin:0;max-width:30ch;}

/* ============================================================
   TITRE DE PAGE (pages intérieures)
   ============================================================ */
.page-head{
  background:var(--ink);color:#fff;
  padding:calc(var(--head-h) + 74px) 0 74px;
}
.page-head-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end;}
.page-head-grid > :only-child{grid-column:1 / -1;}
.page-head .kicker{color:var(--accent-light);}
.page-head .kicker::before{background:var(--accent-light);}
.page-title{
  font-weight:700;font-size:clamp(40px,6vw,68px);line-height:1.03;
  letter-spacing:-.045em;margin:0;color:#fff;
}
.page-title .hl{color:var(--accent-light);}
.page-lede{font-size:17px;line-height:1.65;color:rgba(255,255,255,.72);margin:0;max-width:48ch;padding-bottom:6px;}

/* ============================================================
   ÉTAPES (page « comment ça marche »)
   ============================================================ */
.etape{padding:104px 0;}
/* Deux colonnes : un rail collant qui garde le numéro d'étape sous
   les yeux pendant la lecture, et la colonne de texte à sa droite.
   Le tout aligné sur la gouttière, comme le titre de page. */
.etape-grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;}
.etape-side{position:sticky;top:calc(var(--head-h) + 34px);display:flex;flex-direction:column;gap:14px;}
.etape-side::after{content:"";width:38px;height:2px;background:var(--accent);}
.etape-num{font-weight:700;font-size:56px;line-height:.85;letter-spacing:-.05em;color:var(--accent-deep);}
.etape-label{font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.etape-body{max-width:780px;}
.etape-title{
  font-weight:700;font-size:clamp(27px,3.3vw,40px);line-height:1.1;
  letter-spacing:-.04em;color:var(--ink);margin:0 0 28px;
}
.etape-lead{font-size:17px;line-height:1.75;color:var(--body);margin:0 0 20px;}
.etape-lead:last-of-type{margin-bottom:0;}
.etape-note{margin:32px 0 0;font-size:15.5px;color:var(--muted);}
.etape-note a{color:var(--accent-deep);font-weight:600;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:color .2s;}
.etape-note a:hover{color:var(--ink);}
.detail-label{
  font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:66px 0 20px;
}

/* ---- Grands écrans : la page « méthode » occupe la largeur ----
   Au-delà de 1100 px, la colonne de 780 px laissait de larges marges
   vides de part et d'autre. Le conteneur s'élargit, le titre et son
   introduction occupent toute la largeur, les accordéons passent sur
   deux colonnes (dès 1200 px) et la grille d'outils sur six. En dessous
   de 1100 px, la disposition d'origine est conservée. */
@media (min-width:1100px){
  .page-methode .wrap{max-width:1400px;}
  .page-methode .etape-grid{grid-template-columns:240px minmax(0,1fr);gap:80px;}
  /* Titre puis introduction, empilés et sur toute la largeur : le titre
     tient sur une ligne, l'introduction sur deux. */
  .page-methode .etape-body{max-width:none;}
  .page-methode .etape-title{font-size:clamp(30px,2.6vw,38px);margin:0 0 20px;text-wrap:balance;}
  .page-methode .etape-lead{font-size:18px;line-height:1.7;max-width:none;text-wrap:pretty;}
  .page-methode .detail-label{margin-top:64px;}

  .page-methode .acc-list{columns:1;}
  .page-methode .acc-panel p{max-width:none;}

  .page-methode .logos-grid{grid-template-columns:repeat(6,1fr);}
}
@media (min-width:1200px){
  .page-methode .accordion{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;align-items:start;border-top:none;border-bottom:1px solid var(--line);}
  .page-methode .acc-item{border-bottom:none;border-top:1px solid var(--line-strong);}
}
@media (min-width:1500px){
  .page-methode .wrap{max-width:1480px;}
  .page-methode .accordion{column-gap:96px;}
}

/* ============================================================
   ACCORDÉON
   ============================================================ */
.accordion{border-top:1px solid var(--line-strong);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{
  display:flex;align-items:center;gap:24px;width:100%;
  background:none;border:none;cursor:pointer;padding:24px 4px;text-align:left;
  font-family:var(--sans);color:inherit;transition:padding-left .25s ease;
}
.acc-head:hover{padding-left:12px;}
.acc-head-text{display:flex;flex-direction:column;gap:5px;}
.acc-name{font-weight:700;font-size:19px;letter-spacing:-.03em;line-height:1.25;color:var(--ink);transition:color .2s;}
.acc-ref{font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-deep);}
.acc-icon{position:relative;width:15px;height:15px;flex-shrink:0;margin-left:auto;}
.acc-icon::before,.acc-icon::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--ink);transition:transform .28s ease, opacity .28s ease;
}
.acc-icon::before{width:15px;height:2px;}
.acc-icon::after{width:2px;height:15px;}
.acc-head[aria-expanded="true"] .acc-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.acc-head:hover .acc-name,.acc-head[aria-expanded="true"] .acc-name{color:var(--accent-deep);}
.acc-panel{padding:0 4px 28px;}
.acc-panel p{font-size:16px;line-height:1.7;color:var(--body);margin:0;max-width:62ch;}

/* liste dépliée : deux colonnes, coche */
.acc-list{list-style:none;margin:0;padding:0;columns:2;column-gap:52px;}
.acc-list li{
  font-size:15px;line-height:1.5;color:var(--body);
  padding:7px 0 7px 26px;position:relative;break-inside:avoid;
}
.acc-list li::before{
  content:"";position:absolute;left:0;top:11px;width:12px;height:7px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}

/* ---------- Grille d'outils connectés ---------- */
.logos-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  background:var(--bg-alt);
}
.logo-tile{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:34px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .25s ease;
}
.logo-tile:hover{background:var(--deep);}
.logo-tile svg{width:42px;height:42px;transition:transform .25s ease;}
.logo-tile:hover svg{transform:scale(1.07);}
.logo-tile span{font-size:13px;color:var(--muted);text-align:center;line-height:1.3;}

/* ============================================================
   GRILLE DE POINTS DE CONTRÔLE (étape 3, à propos)
   ============================================================ */
.checks-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.checks-grid li{background:var(--bg);padding:28px 26px;display:flex;flex-direction:column;gap:12px;}
.band .checks-grid li{background:var(--band);}
.check-icon{width:26px;height:26px;color:var(--accent-deep);}
.check-title{font-weight:700;font-size:15.5px;letter-spacing:-.02em;color:var(--ink);margin:0;}
.checks-grid p{font-size:14.5px;color:var(--muted);margin:0;}

/* ============================================================
   TARIFS
   ============================================================ */
.tarif-ledger{}
.tl-row{
  display:grid;grid-template-columns:180px 1fr auto;gap:0 48px;align-items:baseline;
  padding:40px 0;border-bottom:1px solid var(--line-strong);
}
.tl-row--airy{padding:56px 0 76px;border-bottom:1px solid var(--line-strong);}
.tl-row--no-border{padding:76px 0 40px;border-bottom:none;}
.tl-when{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);padding-top:10px;}
.tl-title{font-weight:700;font-size:23px;letter-spacing:-.035em;color:var(--ink);margin:0 0 10px;line-height:1.2;}
.tl-desc{font-size:16px;color:var(--muted);margin:0;max-width:54ch;line-height:1.65;}
.tl-amount{font-weight:700;font-size:clamp(32px,3.4vw,42px);line-height:1;letter-spacing:-.045em;color:var(--ink);white-space:nowrap;text-align:right;}
.tl-from{display:block;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px;}

/* ---------- Trois formules côte à côte ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-strong);background:var(--bg-alt);}
.plan{padding:38px 34px 40px;border-left:1px solid var(--line);display:flex;flex-direction:column;}
.plan:first-child{border-left:none;}
.plan-featured{background:var(--ink);color:rgba(255,255,255,.8);border-left-color:var(--ink);}
.plan-featured + .plan{border-left-color:var(--ink);}
.plan-flag{
  align-self:flex-start;font-weight:700;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:14px;min-height:16px;
}
.plan-featured .plan-flag{color:var(--accent-light);}
.plan-name{font-weight:700;font-size:22px;letter-spacing:-.035em;color:var(--ink);margin:0 0 6px;}
.plan-featured .plan-name{color:#fff;}
.plan-scope{font-size:14px;color:var(--muted);margin:0 0 24px;}
.plan-featured .plan-scope{color:rgba(255,255,255,.62);}
.plan-price{
  display:flex;align-items:baseline;gap:6px;
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line);
  font-weight:700;font-size:44px;line-height:1;letter-spacing:-.05em;color:var(--ink);
}
.plan-featured .plan-price{color:#fff;border-bottom-color:var(--line-dark);}
.plan-price small{font-weight:500;font-size:13.5px;letter-spacing:0;color:var(--faint);}
.plan-featured .plan-price small{color:rgba(255,255,255,.6);}
.plan-list{list-style:none;margin:0 0 30px;padding:0;flex:1;}
.plan-list li{font-size:14.5px;line-height:1.5;color:var(--body);padding:9px 0 9px 24px;position:relative;}
.plan-featured .plan-list li{color:rgba(255,255,255,.82);}
.plan-list li::before{
  content:"";position:absolute;left:0;top:10px;width:11px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}
.plan-list .plan-more{
  font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-deep);padding-left:0;margin-bottom:4px;
}
.plan-featured .plan-list .plan-more{color:var(--accent-light);}
.plan-list .plan-more::before{display:none;}
.plan .btn{width:100%;}

/* ---------- Précisions tarifaires ---------- */
.precisions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
.precisions li{border-top:1px solid var(--line-strong);padding-top:20px;}
.precisions h3{font-weight:700;font-size:16px;letter-spacing:-.025em;color:var(--ink);margin:0 0 8px;}
.precisions p{font-size:15px;color:var(--muted);margin:0;}

/* ============================================================
   À PROPOS
   ============================================================ */
.recit{max-width:660px;margin:0 auto;text-align:center;}
.recit p{font-size:17px;line-height:1.85;color:var(--body);margin:0 0 28px;}
.recit p:last-child{margin-bottom:0;}
.recit .recit-intro{font-weight:700;font-size:clamp(21px,2.4vw,28px);line-height:1.3;letter-spacing:-.04em;color:var(--ink);margin:0 0 40px;}
.recit-intro::after{content:"";display:block;width:40px;height:1px;background:var(--accent);margin:34px auto 0;}
.recit-fin{color:var(--ink);font-weight:500;}
/* Le surtitre est un inline-flex : sans cette règle son trait et son
   texte restent groupés à gauche au lieu de suivre le centrage. */
.recit .kicker{justify-content:center;}
.recit .recit-titre{margin:0 0 30px;}
/* L'accent du titre existait pour les bandeaux sombres ; sur fond clair
   il lui faut la variante foncée, seule assez contrastée pour être lue. */
.section-title .hl{color:var(--accent-deep);}

/* ============================================================
   CONTACT
   ============================================================ */
.form-wrap{max-width:660px;}
/* L'adresse doit rester atteignable sans passer par le formulaire :
   un visiteur dont le JavaScript est bloqué, ou qui préfère son propre
   logiciel de messagerie, ne doit pas se retrouver sans recours. */
.contact-direct{font-size:15px;color:var(--muted);margin:0 0 30px;}
.contact-direct a{color:var(--accent-deep);font-weight:600;border-bottom:1px solid var(--accent);}
.contact-direct a:hover{color:var(--ink);}
.form{display:flex;flex-direction:column;gap:24px;}
.champ{display:flex;flex-direction:column;gap:8px;}
.champ label{font-weight:700;font-size:13px;letter-spacing:-.01em;color:var(--ink);}
.champ-note{font-weight:500;color:var(--faint);letter-spacing:0;}
.champ input,.champ textarea{
  font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);border-radius:4px;
  padding:13px 15px;width:100%;transition:border-color .2s, box-shadow .2s;
}
.champ textarea{resize:vertical;min-height:150px;}
.champ input::placeholder,.champ textarea::placeholder{color:var(--faint);}
.champ input:focus,.champ textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(228,93,131,.16);
}
.champ input[aria-invalid="true"],.champ textarea[aria-invalid="true"]{border-color:var(--accent-deep);}

/* Piège à robots : masqué sans display:none, que certains automates ignorent. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-pied{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:4px;}
.form-pied .btn{flex-shrink:0;}
.form-rgpd{font-size:13px;line-height:1.5;color:var(--muted);margin:0;flex:1;min-width:240px;}
.form-rgpd a{color:var(--accent-deep);border-bottom:1px solid var(--line-strong);}
.form-rgpd a:hover{border-bottom-color:var(--accent);}

.form-etat{font-size:15px;line-height:1.55;margin:0;padding:14px 16px;border-radius:4px;display:none;}
.form-etat.visible{display:block;}
.form-etat.succes{background:#f2f8f5;border:1px solid #bcd9c9;color:#2c5c44;}
.form-etat.erreur{background:#fdf3f6;border:1px solid #f0c3d1;color:var(--accent-deep);}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

.mention-fiscale{
  font-size:13px;line-height:1.55;color:var(--faint);margin:34px 0 0;max-width:72ch;
}

/* ============================================================
   FERMETURE DE PAGE
   ============================================================ */
.closing{background:var(--ink);color:#fff;padding:88px 0;}
.closing-wrap{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.closing-text{font-weight:700;font-size:clamp(24px,2.9vw,36px);line-height:1.15;letter-spacing:-.04em;color:#fff;margin:0;max-width:22ch;}
.closing-sub{font-size:16px;color:rgba(255,255,255,.68);margin:14px 0 0;max-width:44ch;}
.closing .btn{flex-shrink:0;}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.legal{max-width:740px;margin-right:auto;}
.legal-title{font-weight:700;font-size:20px;letter-spacing:-.03em;color:var(--ink);margin:44px 0 14px;padding-top:18px;border-top:1px solid var(--line);}
.legal-title:first-child{margin-top:0;border-top:none;padding-top:0;}
.legal p{font-size:16px;color:var(--body);}
.legal a{color:var(--accent-deep);border-bottom:1px solid var(--accent);}
.todo{background:var(--deep);color:var(--accent-deep);padding:1px 7px;border-radius:2px;font-size:15px;}
.legal-note{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--faint);}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer{background:#121116;color:#fff;padding:56px 0 34px;border-top:1px solid var(--line-dark);}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--line-dark);}
.footer-brand .logo{font-size:22px;}
.footer-brand p{color:rgba(255,255,255,.6);font-size:15px;margin:10px 0 0;}
.footer-links{display:flex;gap:26px;flex-wrap:wrap;}
.footer-links a{font-size:15px;color:rgba(255,255,255,.6);transition:color .2s;}
.footer-links a:hover,.footer-legal a:hover{color:var(--accent-light);}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;}
.footer-bottom span{font-size:13px;color:rgba(255,255,255,.6);}
.footer-legal a{transition:color .2s;}

/* ============================================================
   MOUVEMENT
   ============================================================ */
.reveal-init{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal-init.in{opacity:1;transform:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .header-nav{gap:20px;}
  /* L'en-tête porte désormais logo, navigation, langue et bouton : les
     écarts se resserrent pour que l'ensemble tienne sur une seule ligne. */
  .header-inner{gap:24px;}
  .lang-btn{padding:6px 7px;}
  .plan{padding:32px 24px 34px;}
  .plan-price{font-size:36px;}
}
@media (max-width:900px){
  :root{--gutter:28px;}
  .section{padding:76px 0;}
  .hero{padding:calc(var(--head-h) + 58px) 0 88px;}
  .hero-visual{margin-top:44px;}
  .apercu-grid{grid-template-columns:1fr;}
  .ap-step{border-left:none;padding:28px 0 24px;border-bottom:1px solid var(--line);}
  .ap-step::before{display:none;}
  .ap-num{font-size:32px;margin-bottom:6px;}
  .ap-text{max-width:none;}
  .page-head{padding:calc(var(--head-h) + 54px) 0 52px;}
  .page-head-grid{grid-template-columns:1fr;gap:26px;align-items:start;}
  .page-lede{max-width:none;}
  .etape{padding:70px 0;}
  .etape-grid{grid-template-columns:1fr;gap:0;}
  .etape-side{position:static;flex-direction:row;align-items:baseline;gap:18px;padding-bottom:18px;margin-bottom:30px;border-bottom:1px solid var(--line-strong);}
  .etape-side::after{display:none;}
  .etape-num{font-size:40px;}
  .detail-label{margin-top:52px;}
  .acc-list{columns:1;}
  .logos-grid{grid-template-columns:repeat(3,1fr);}
  .checks-grid{grid-template-columns:1fr;}
  .tl-row{grid-template-columns:1fr auto;gap:0 28px;padding:34px 0;}
  .tl-row--airy{padding:34px 0 48px;}
  .tl-row--no-border{padding:48px 0 24px;}
  .tl-when{grid-column:1 / -1;padding-top:0;margin-bottom:12px;}
  .tl-amount{align-self:start;}
  .plans{grid-template-columns:1fr;}
  .plan{border-left:none;border-top:1px solid var(--line);}
  .plan:first-child{border-top:none;}
  .plan-featured + .plan{border-left:none;}
  .precisions{grid-template-columns:1fr;gap:0;}
  .precisions li{border-top:1px solid var(--line);padding:20px 0;}
  .precisions li:first-child{border-top-color:var(--line-strong);}
  .closing{padding:66px 0;}
  .closing-wrap{flex-direction:column;align-items:flex-start;gap:28px;}
}
@media (max-width:640px){
  .header-nav,.header-cta,.lang{display:none;}
  .lang-mobile{display:flex;justify-content:center;margin-top:18px;}
  .header-toggle{display:flex;}
  .hero-title{font-size:30px;}
  .hero-title br{display:none;}
  .hero-lede{font-size:16px;}
  .hero-actions .btn{width:100%;}
  .logos-grid{grid-template-columns:repeat(2,1fr);}
  .tl-row{grid-template-columns:1fr;}
  .tl-amount{text-align:left;margin-top:18px;}
  .tl-from{margin-bottom:6px;}
  .footer-bottom{flex-direction:column;gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .hero-line,.hero-out,#heroPath{stroke-dashoffset:0;}
  .hero-pulse{opacity:.7;}
  .reveal-init{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}