/* ==========================================================================
   Base Sociétés — site de présentation      © Hexashift
   Charte alignée sur hexashift.fr : marine #1a365d, cyan #0891b2,
   polices Outfit (titres) + Manrope (texte).
   Traitement éditorial : sections pleine largeur, respiration forte,
   une idée par écran.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Marque (identiques à hexashift.fr) */
  --primary:#1a365d;
  --primary-light:#2b4c7e;
  --accent:#0891b2;
  --accent-light:#06b6d4;

  /* Fonds sombres propres au site produit */
  --ink:#060d1a;
  --ink-2:#0b1424;
  --ink-3:#101d33;

  /* Texte */
  --text:#1e293b;
  --text-light:#334155;
  --text-muted:#64748b;
  --on-dark:#eef4fb;
  --on-dark-muted:#94a8c4;

  /* Fonds clairs */
  --bg:#ffffff;
  --bg-soft:#f2f6fb;
  --border:#dbe3ee;
  --border-dark:rgba(255,255,255,.12);

  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;

  --radius:14px;
  --radius-lg:22px;
  --max:1180px;
  --shadow:0 4px 6px -1px rgba(15,35,70,.07),0 2px 4px -2px rgba(15,35,70,.05);
  --shadow-lg:0 24px 60px -22px rgba(15,35,70,.35);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;line-height:1.1;color:var(--primary);font-weight:700}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(8,145,178,.28)}

/* ---------- Structure ---------- */
.container{max-width:var(--max);margin:0 auto;padding:0 28px}
.container-narrow{max-width:860px;margin:0 auto;padding:0 28px}

section{padding:120px 0;position:relative}
section.tight{padding:88px 0}

.dark{background:var(--ink);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lead,.dark p{color:var(--on-dark-muted)}
.soft{background:var(--bg-soft)}

/* ---------- Typographie éditoriale ---------- */
.eyebrow{
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;display:block;
}
.dark .eyebrow{color:var(--accent-light)}

h1.display{font-size:clamp(2.6rem,6.4vw,5.1rem);letter-spacing:-.035em;font-weight:800}
h2.display{font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.03em;font-weight:800;max-width:17ch}
h2.display.wide{max-width:22ch}
h3{font-size:1.24rem;letter-spacing:-.01em}

.lead{
  font-size:clamp(1.08rem,1.7vw,1.34rem);color:var(--text-light);
  max-width:64ch;margin-top:26px;line-height:1.6;font-weight:400;
}
.lead-tight{max-width:52ch}
.section-head{margin-bottom:64px}
.balance{text-wrap:balance}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:999px;
  font-weight:700;font-size:.98rem;text-decoration:none;border:1.5px solid transparent;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
  cursor:pointer;font-family:'Manrope',sans-serif;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 30px -10px rgba(8,145,178,.75)}
.btn-primary:hover{background:#0aa2c4}
.btn-ghost{border-color:rgba(255,255,255,.32);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-ghost-dark{border-color:var(--border);color:var(--primary)}
.btn-ghost-dark:hover{border-color:var(--primary);background:rgba(26,54,93,.05)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:42px}

/* ---------- Navigation ---------- */
header.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(6,13,26,.72);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);transition:background .3s ease;
}
header.nav .inner{
  max-width:var(--max);margin:0 auto;padding:0 28px;height:58px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.brand-wrap{display:flex;align-items:center;gap:11px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.brand .mark{width:26px;height:26px;flex:none;border-radius:6px;display:block}
/* l'icone est une image bitmap : on garde ses proportions et on evite le flou
   lors de la reduction sur les ecrans classiques */
img.mark{object-fit:contain;image-rendering:auto}
.brand-sub{
  color:var(--on-dark-muted);font-weight:500;font-size:.82rem;text-decoration:none;
  padding-left:11px;border-left:1px solid rgba(255,255,255,.2);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;transition:color .2s;
}
.brand-sub:hover{color:var(--accent-light)}
.brand-sub svg{opacity:.75}
nav.links{display:flex;align-items:center;gap:26px}
nav.links a{
  color:rgba(255,255,255,.78);text-decoration:none;font-size:.9rem;font-weight:600;
  transition:color .2s;padding:10px 0;display:inline-flex;align-items:center;
}
nav.links a:hover{color:#fff}
nav.links a.cta{
  background:var(--accent);color:#fff;padding:11px 20px;border-radius:999px;
}
nav.links a.cta:hover{background:#0aa2c4}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;padding:4px 8px}

/* La page courante est signalée dans le menu principal : sans ce repère,
   un menu identique partout devient à son tour désorientant. */
nav.links a[aria-current="page"]{color:#fff;position:relative}
nav.links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;
  border-radius:2px;background:var(--accent-light);
}

/* ---------- Second niveau : les sections de la page courante ----------
   Le menu principal est désormais identique sur les trois pages. Les ancres
   internes, qui variaient d'une page à l'autre, descendent ici : la
   navigation entre pages ne bouge plus, la navigation dans la page suit. */
.subnav{
  border-top:1px solid rgba(255,255,255,.07);
  /* assez opaque pour que le titre de la section survolée ne transparaisse
     pas derrière les libellés lorsque la page défile */
  background:rgba(6,13,26,.55);
}
/* la sélection est qualifiée par header.nav : sinon « header.nav .inner »,
   plus spécifique, imposerait ses 58 px à cette seconde ligne */
header.nav .subnav .inner{
  max-width:var(--max);margin:0 auto;padding:0 28px;height:45px;
  /* justify-content est remis à flex-start : « header.nav .inner » impose
     space-between à la première ligne, ce qui écarterait ces libellés */
  display:flex;align-items:center;justify-content:flex-start;gap:26px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
}
header.nav .subnav .inner::-webkit-scrollbar{display:none}
.subnav a{
  color:rgba(255,255,255,.78);text-decoration:none;font-size:.84rem;font-weight:600;
  white-space:nowrap;line-height:1;padding:12px 0 11px;
  border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.subnav a:hover{color:#fff}
.subnav a.actif{color:var(--accent-light);border-bottom-color:var(--accent-light)}

/* ---------- Héros ---------- */
.hero{
  padding:190px 0 130px;background:var(--ink);color:var(--on-dark);overflow:hidden;position:relative;
}
.hero::before{
  content:"";position:absolute;top:-320px;left:50%;transform:translateX(-50%);
  width:1250px;height:900px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(8,145,178,.28),rgba(8,145,178,.06) 42%,transparent 68%);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(8,145,178,.5),transparent);
}
.hero .container{position:relative;z-index:1}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{color:var(--on-dark-muted);max-width:60ch}
.hero-note{margin-top:30px;font-size:.86rem;color:var(--on-dark-muted);display:flex;align-items:center;gap:9px}
.hero-note svg{flex:none}

/* ---------- Compte à rebours ---------- */
.deadline{background:var(--ink-2);padding:56px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.deadline .wrap{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.deadline .count{display:flex;align-items:baseline;gap:14px}
.deadline .n{
  font-family:'Outfit',sans-serif;font-size:clamp(3rem,7vw,4.6rem);font-weight:800;
  color:var(--accent-light);letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 44px rgba(6,182,212,.34);
}
.deadline .n-unit{font-size:1.05rem;color:var(--accent-light);font-weight:700;font-family:'Outfit',sans-serif}
.deadline .txt{max-width:52ch}
.deadline .txt strong{color:#fff}
.deadline .txt p{color:var(--on-dark-muted);font-size:.98rem;margin:0}
.deadline .txt p + p{margin-top:8px}

/* ---------- Grilles ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}

/* ---------- Cartes ---------- */
.card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#c3d2e6}
.card h3{margin-bottom:12px}
.card p{color:var(--text-light);font-size:.97rem}
.card .ico{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(8,145,178,.14),rgba(26,54,93,.1));margin-bottom:22px;
}
.card .ico svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.dark .card{background:rgba(255,255,255,.045);border-color:var(--border-dark)}
.dark .card:hover{border-color:rgba(8,145,178,.5);box-shadow:0 24px 60px -30px rgba(8,145,178,.5)}
.dark .card p{color:var(--on-dark-muted)}
.dark .card .ico{background:rgba(8,145,178,.16)}
.dark .card .ico svg{stroke:var(--accent-light)}

/* Note de pied de carte : une variante possible, pas la règle.
   Détachée du corps par un filet, plus petite, pour qu'elle se lise
   comme une précision et non comme une seconde promesse. */
.card .note{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
  font-size:.9rem;color:var(--text-muted);line-height:1.6;
}
.card .note strong{color:var(--primary);font-weight:700}
.card .note p{font-size:inherit;color:inherit;margin:0}
.dark .card .note{border-top-color:var(--border-dark);color:var(--on-dark-muted)}
.dark .card .note strong{color:var(--on-dark)}

/* Carte "source officielle" */
.src{
  display:flex;gap:18px;align-items:flex-start;padding:26px;
  border:1px solid var(--border-dark);border-radius:var(--radius);
  background:rgba(255,255,255,.04);transition:border-color .25s ease,background .25s ease;
}
.src:hover{border-color:rgba(8,145,178,.55);background:rgba(8,145,178,.07)}
.src .tag{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.06em;
  color:var(--accent-light);border:1px solid rgba(6,182,212,.4);border-radius:7px;
  padding:5px 9px;flex:none;margin-top:3px;text-transform:uppercase;white-space:nowrap;
}
.src h4{color:#fff;font-size:1.02rem;margin-bottom:5px}
.src p{color:var(--on-dark-muted);font-size:.9rem;line-height:1.55;margin:0}

/* Bénéfice numéroté */
.benefit{display:flex;gap:24px;padding:34px 0;border-top:1px solid var(--border)}
.benefit:last-child{border-bottom:1px solid var(--border)}
.benefit .num{
  font-family:'Outfit',sans-serif;font-size:.86rem;font-weight:800;color:var(--accent);
  flex:none;width:38px;padding-top:5px;letter-spacing:.04em;
}
.benefit h3{margin-bottom:10px;font-size:1.42rem;letter-spacing:-.02em}
.benefit p{color:var(--text-light);max-width:62ch}

/* ---------- Maquette d'interface ---------- */
.mock{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;font-size:.87rem;
}
.mock .bar{
  background:var(--primary);padding:11px 18px;display:flex;align-items:center;gap:9px;
}
.mock .bar .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32)}
.mock .bar .ttl{color:#fff;font-size:.79rem;font-weight:600;margin-left:9px;font-family:'Outfit',sans-serif;letter-spacing:.01em}
.mock .body{padding:24px}
.mock .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #eef2f7}
.mock .row:last-child{border-bottom:0}
.mock .k{color:var(--text-muted);font-size:.83rem}
.mock .v{font-weight:600;color:var(--text);font-size:.86rem;text-align:right}
.mock .v.miss{color:var(--danger)}
.pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;
  font-size:.74rem;font-weight:700;font-family:'Outfit',sans-serif;letter-spacing:.01em;
}
.pill.ok{background:rgba(22,163,74,.12);color:#15803d}
.pill.warn{background:rgba(217,119,6,.13);color:#b45309}
.pill.info{background:rgba(8,145,178,.13);color:#0e7490}
.bar-track{height:7px;border-radius:99px;background:#e8eef6;overflow:hidden;margin:9px 0 4px}
.bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-light))}

/* Proposition (gouvernance) */
.prop{
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:12px;padding:20px 22px;background:#fff;margin-bottom:14px;
}
.prop .top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}
.prop .what{font-weight:700;color:var(--primary);font-family:'Outfit',sans-serif;font-size:1rem}
.prop .why{font-size:.87rem;color:var(--text-light);background:var(--bg-soft);border-radius:9px;padding:12px 14px;line-height:1.55}
.prop .why b{color:var(--text)}
.prop .acts{display:flex;gap:9px;margin-top:14px}
.prop .acts span{
  font-size:.79rem;font-weight:700;padding:7px 15px;border-radius:8px;font-family:'Outfit',sans-serif;
}
.prop .acts .yes{background:rgba(22,163,74,.12);color:#15803d}
.prop .acts .no{background:#f1f5f9;color:var(--text-muted)}

/* ---------- Timeline ---------- */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:7px;top:9px;bottom:9px;width:2px;background:linear-gradient(180deg,var(--accent),rgba(8,145,178,.15))}
.tl-item{position:relative;padding-bottom:42px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:3px solid var(--accent);
}
.tl-item.past::before{background:var(--accent)}
.tl-item .when{font-family:'Outfit',sans-serif;font-weight:800;color:var(--accent);font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px}
.tl-item h3{margin-bottom:8px;font-size:1.18rem}
.tl-item p{color:var(--text-light);font-size:.96rem;max-width:60ch}
.dark .tl-item::before{background:var(--ink)}
.dark .tl-item p{color:var(--on-dark-muted)}

/* ---------- Flux : sources → contrôle → validation ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.flow .step{
  border:1px solid var(--border-dark);border-radius:var(--radius);padding:28px 24px;
  background:rgba(255,255,255,.04);position:relative;
}
.flow .step .n{
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;
  font-family:'Outfit',sans-serif;margin-bottom:18px;
}
.flow .step h4{color:#fff;font-size:1.06rem;margin-bottom:9px}
.flow .step p{color:var(--on-dark-muted);font-size:.9rem;margin:0}
.flow .step::after{
  content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:1.15rem;font-weight:700;z-index:2;
}
.flow .step:last-child::after{display:none}

/* ---------- Ce que ce n'est pas ---------- */
.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.not{
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;background:#fff;
}
.not .x{
  width:30px;height:30px;border-radius:9px;background:rgba(220,38,38,.09);color:var(--danger);
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:18px;font-size:1rem;
}
.not h3{font-size:1.08rem;margin-bottom:10px}
.not p{font-size:.94rem;color:var(--text-light)}
.not .then{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--border);
  font-size:.88rem;color:var(--accent);font-weight:600;
}

/* ---------- Étapes d'engagement ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.step-card{
  border:1px solid var(--border-dark);border-radius:var(--radius-lg);padding:34px 30px;
  background:rgba(255,255,255,.04);
}
.step-card .idx{
  font-family:'Outfit',sans-serif;font-size:2.6rem;font-weight:800;line-height:1;
  color:rgba(6,182,212,.32);margin-bottom:20px;letter-spacing:-.04em;
}
.step-card h3{color:#fff;font-size:1.18rem;margin-bottom:12px}
.step-card p{color:var(--on-dark-muted);font-size:.94rem;margin:0}
.step-card ul{list-style:none;margin-top:16px}
.step-card li{
  color:var(--on-dark-muted);font-size:.9rem;padding-left:22px;position:relative;margin-bottom:8px;
}
.step-card li::before{content:"→";position:absolute;left:0;color:var(--accent-light)}

/* ---------- Citation / accroche ---------- */
.pull{
  font-family:'Outfit',sans-serif;font-size:clamp(1.5rem,3.1vw,2.35rem);font-weight:700;
  line-height:1.35;letter-spacing:-.025em;color:var(--primary);max-width:22ch;
}
.dark .pull{color:#fff}
.pull em{color:var(--accent);font-style:normal}
.dark .pull em{color:var(--accent-light)}

/* ---------- Formulaire ---------- */
.form-wrap{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:44px;box-shadow:var(--shadow-lg);
}
/* Logo en tête de formulaire : centré, purement décoratif — le libellé
   du formulaire est déjà porté par le titre de section. */
.form-logo{width:58px;height:58px;border-radius:15px;object-fit:contain;margin:0 auto 26px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.field{margin-bottom:18px}
.field label,.form-row label{
  display:block;font-size:.84rem;font-weight:700;color:var(--text);margin-bottom:7px;
  font-family:'Outfit',sans-serif;letter-spacing:.01em;
}
.field input,.field textarea,.field select,.form-row input{
  width:100%;padding:13px 16px;border:1px solid var(--border);border-radius:10px;
  font-family:'Manrope',sans-serif;font-size:.95rem;color:var(--text);background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus,.form-row input:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(8,145,178,.14);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.form-note{font-size:.83rem;color:var(--text-muted);margin-top:16px;text-align:center}
.form-msg{
  display:none;padding:13px 16px;border-radius:10px;font-size:.9rem;margin-top:16px;text-align:center;
}
.form-msg.err{display:block;background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c}
.form-ok{display:none;text-align:center;padding:34px 0}
.form-ok .big{font-size:1.22rem;font-weight:700;color:var(--ok);margin-bottom:8px;font-family:'Outfit',sans-serif}
.form-ok p{color:var(--text-light)}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}

/* ---------- Pied de page ---------- */
footer{background:var(--ink);color:var(--on-dark-muted);padding:72px 0 34px;border-top:1px solid rgba(255,255,255,.08)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;margin-bottom:44px}
.f-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.f-brand img{height:30px;filter:brightness(0) invert(1);opacity:.92}
.f-brand span{font-family:'Outfit',sans-serif;font-weight:700;color:#fff;font-size:1.12rem}
footer p{font-size:.92rem;max-width:44ch;line-height:1.65}
footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;font-family:'Manrope',sans-serif;font-weight:700}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{color:var(--on-dark-muted);text-decoration:none;font-size:.92rem;transition:color .2s}
footer a:hover{color:#fff}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.09);padding-top:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.86rem;
}
.f-site{
  display:inline-flex;align-items:center;gap:8px;color:var(--accent-light);font-weight:700;
  text-decoration:none;font-size:.94rem;
}
.f-site:hover{color:#fff}

/* ---------- Tableaux ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:30px;font-size:.94rem}
.tbl th{
  text-align:left;padding:14px 16px;background:var(--primary);color:#fff;font-weight:700;
  font-family:'Outfit',sans-serif;font-size:.83rem;letter-spacing:.03em;text-transform:uppercase;
}
.tbl th:first-child{border-radius:10px 0 0 0}
.tbl th:last-child{border-radius:0 10px 0 0}
.tbl td{padding:15px 16px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-light)}
.tbl tr:nth-child(even) td{background:#fafcfe}
.tbl td strong{color:var(--text)}

/* ---------- Encadré ---------- */
.callout{
  border-left:3px solid var(--accent);background:var(--bg-soft);
  border-radius:0 var(--radius) var(--radius) 0;padding:26px 30px;margin:38px 0;
}
.callout h4{font-size:1.05rem;margin-bottom:9px}
.callout p{color:var(--text-light);font-size:.96rem;margin:0}
.dark .callout{background:rgba(8,145,178,.09);border-left-color:var(--accent-light)}
.dark .callout p{color:var(--on-dark-muted)}

/* ---------- Apparition au défilement ---------- */
/* L'effet d'apparition n'est arme QUE si le script tourne (classe js-on posee en tete
   de page). Sans JavaScript, ou si le script echoue, tout le contenu reste visible :
   une page blanche est le pire defaut possible sur un site commercial. */
.reveal{opacity:1;transform:none}
.js-on .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js-on .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .reveal,.js-on .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- Adaptatif ---------- */
@media (max-width:980px){
  .g-2-1,.g3,.g4,.flow,.nots,.steps,.f-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .flow .step::after{display:none}
  section{padding:88px 0}
  .hero{padding:150px 0 96px}
  .form-wrap{padding:30px}
}
@media (max-width:720px){
  /* le menu déroulant s'ouvre sous TOUT l'en-tête, second niveau compris :
     positionné en absolu dans header.nav, il suit sa hauteur réelle */
  nav.links{
    /* fond OPAQUE, et pas de backdrop-filter : imbriqué dans header.nav qui en
       porte déjà un, le flou du panneau laissait transparaître le titre de la
       page derrière les entrées du menu. */
    position:absolute;top:100%;left:0;right:0;background:#080f1e;
    box-shadow:0 22px 40px -24px rgba(0,0,0,.9);
    flex-direction:column;align-items:stretch;gap:0;
    padding:0 22px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  nav.links.open{max-height:340px;padding:14px 22px 22px}
  nav.links a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  nav.links a.cta{text-align:center;margin-top:12px;border-bottom:0}
  .nav-toggle{display:block}
  .brand-sub{font-size:.72rem;padding-left:9px}
  .brand-sub .lbl{display:none}
  .g2,.g4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .deadline .wrap{gap:26px}
  .benefit{flex-direction:column;gap:10px}
  .benefit .num{width:auto;padding-top:0}
  .container,.container-narrow{padding:0 20px}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
}

/* ---------- Impression ---------- */
@media print{
  header.nav,.subnav,.btn-row,.form-wrap,.nav-toggle{display:none}
  body,.dark{background:#fff!important;color:#000!important}
  .dark h1,.dark h2,.dark h3,.dark h4{color:#000!important}
  .reveal{opacity:1;transform:none}
  section{padding:28px 0;page-break-inside:avoid}
}

/* ==========================================================================
   AJOUTS DE LA REVUE UX (08/08/2026)
   ========================================================================== */

/* ---------- Accessibilité : lien d'évitement et focus visible ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:12px 22px;border-radius:0 0 10px 0;
  font-weight:700;text-decoration:none;font-size:.92rem;
}
.skip:focus{left:0}

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent-light);outline-offset:3px;border-radius:6px;
}
.dark a:focus-visible,header.nav a:focus-visible,header.nav button:focus-visible{
  outline-color:#fff;
}

/* ---------- Héros en deux colonnes : le produit se voit tout de suite ---------- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
/* En deux colonnes, le titre doit rester plus petit qu'en pleine largeur :
   sinon il occupe six lignes et repousse les boutons d'action SOUS la ligne
   de flottaison — le visiteur ne voit plus quoi faire. */
.hero-grid h1.display{font-size:clamp(2.05rem,3.7vw,3.35rem)}
.hero-grid .lead{font-size:clamp(1rem,1.25vw,1.12rem);margin-top:18px}
.hero-grid .btn-row{margin-top:32px}
.hero-grid .visuel{position:relative}
.hero-kicker{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  background:rgba(8,145,178,.14);border:1px solid rgba(6,182,212,.32);
  color:var(--accent-light);font-size:.79rem;font-weight:700;margin-bottom:24px;
  font-family:'Outfit',sans-serif;letter-spacing:.02em;
}
.hero-kicker .pt{width:7px;height:7px;border-radius:50%;background:var(--accent-light);flex:none}
.hero-def{
  font-size:1.02rem;color:var(--on-dark);margin-top:22px;max-width:52ch;line-height:1.6;
  padding-left:16px;border-left:2px solid rgba(6,182,212,.45);
}
.hero-def b{color:#fff;font-weight:700}

/* ---------- Bandeau d'échéance ---------- */
.deadline .second{
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.9rem;color:var(--on-dark-muted);
}
.deadline .second b{color:var(--on-dark)}
.deadline .cible{
  display:inline-block;margin-bottom:12px;font-size:.75rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-light);
  font-family:'Outfit',sans-serif;
}

/* ---------- Pour qui ---------- */
.profil{
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;background:#fff;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.profil:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#c3d2e6}
.profil .role{
  font-family:'Outfit',sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block;
}
.profil h3{font-size:1.1rem;margin-bottom:10px}
.profil p{color:var(--text-light);font-size:.95rem}
.profil .quote{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--border);
  font-size:.92rem;color:var(--text);font-style:italic;
}

/* ---------- Bénéfices en grille (au lieu d'une colonne de texte) ---------- */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gain{
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;background:#fff;
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.gain:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gain .num{
  font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:800;color:var(--accent);
  letter-spacing:.1em;margin-bottom:16px;
}
.gain h3{font-size:1.14rem;margin-bottom:11px;letter-spacing:-.015em}
.gain p{color:var(--text-light);font-size:.94rem;margin:0}
.gain.accent{
  background:linear-gradient(155deg,var(--primary),#12294a);border-color:transparent;
  justify-content:center;
}
.gain.accent h3{color:#fff;font-size:1.28rem}
.gain.accent p{color:#a8c0dc;margin-bottom:22px}
.gain.accent .btn{align-self:flex-start}

/* ---------- Foire aux questions ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{
  border-bottom:1px solid var(--border);padding:4px 0;
}
.faq details[open]{padding-bottom:8px}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:1.08rem;color:var(--primary);
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2.2px solid var(--accent);border-bottom:2.2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .rep{padding:0 44px 22px 0;color:var(--text-light);font-size:1rem;line-height:1.7}
.faq .rep p + p{margin-top:12px}
.dark .faq summary{color:#fff}
.dark .faq details{border-bottom-color:rgba(255,255,255,.12)}
.dark .faq .rep{color:var(--on-dark-muted)}

/* ---------- Rappel d'action en milieu de page ---------- */
.midcta{
  background:linear-gradient(140deg,var(--primary),#0d2544);border-radius:var(--radius-lg);
  padding:56px;display:flex;align-items:center;justify-content:space-between;gap:38px;
  flex-wrap:wrap;
}
.midcta h3{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;max-width:19ch;margin-bottom:10px}
.midcta p{color:#a8c0dc;font-size:1rem;max-width:46ch;margin:0}

/* ---------- Contact : repli visible ---------- */
.contact-alt{
  text-align:center;margin-top:26px;font-size:.94rem;color:var(--text-light);
}
.contact-alt a{color:var(--accent);font-weight:700;text-decoration:none}
.contact-alt a:hover{text-decoration:underline}
.rgpd{
  font-size:.8rem;color:var(--text-muted);line-height:1.55;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--border);
}

/* ---------- Fil d'Ariane vers le site principal ---------- */
.retour{
  background:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.07);
  padding:12px 0;font-size:.85rem;
}
.retour a{color:var(--on-dark-muted);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.retour a:hover{color:var(--accent-light)}

/* ---------- Adaptatif des ajouts ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .gains{grid-template-columns:repeat(2,1fr)}
  .midcta{padding:38px}
}
@media (max-width:720px){
  .gains{grid-template-columns:1fr}
  .faq summary{font-size:1rem;padding-right:36px}
}

/* ---------- Schéma d'architecture ---------- */
.schema{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px 28px 22px;box-shadow:var(--shadow-lg);margin:0;
}
.schema svg{width:100%;height:auto;display:block}
.schema figcaption{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
  font-size:.92rem;color:var(--text-light);text-align:center;max-width:72ch;
  margin-left:auto;margin-right:auto;line-height:1.6;
}
.dark .schema{background:rgba(255,255,255,.045);border-color:var(--border-dark)}
.dark .schema figcaption{color:var(--on-dark-muted);border-top-color:var(--border-dark)}

/* Sur petit écran, le schéma défile horizontalement plutôt que de devenir illisible */
@media (max-width:820px){
  .schema{padding:18px 14px 14px;overflow-x:auto}
  .schema svg{min-width:760px}
  .schema figcaption{font-size:.86rem}
}

/* ---------- Vidéo de présentation ---------- */
.videobloc{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-dark);
  background:#000;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.videobloc video{width:100%;height:auto;display:block}
.videonote{
  margin-top:16px;font-size:.86rem;color:var(--on-dark-muted);text-align:center;
}

/* Fin de la séquence vidéo : une seule sortie, centrée, vers le formulaire.
   Le bloc entier est cliquable — pas seulement le libellé. */
.video-suite{
  margin:34px auto 0;max-width:540px;padding:28px 30px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  text-decoration:none;border:1px solid var(--border-dark);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.035);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.video-suite:hover,.video-suite:focus-visible{
  transform:translateY(-3px);border-color:rgba(8,145,178,.55);background:rgba(8,145,178,.10);
}
.video-suite img{width:60px;height:60px;border-radius:15px;object-fit:contain}
.video-suite .t{
  font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:1.16rem;
  color:var(--on-dark);line-height:1.3;
}
.video-suite .s{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.96rem;font-weight:700;color:var(--accent-light);
}
.video-suite .fl{transition:transform .25s ease}
.video-suite:hover .fl,.video-suite:focus-visible .fl{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .video-suite,.video-suite .fl{transition:none}
  .video-suite:hover{transform:none}
}
@media (max-width:520px){
  .video-suite{padding:24px 20px}
  .video-suite .t{font-size:1.05rem}
}