/* ───────────────────────── Tokens ───────────────────────── */
:root{
  --navy:#262A75;          /* bleu marine de marque */
  --navy-deep:#14173F;     /* dérivé profond */
  --navy-mid:#1D2058;
  --red:#C8102E;           /* accent, à dose homéopathique */
  --red-soft:#E24259;
  --grey:#7A7D90;          /* gris signature */

  --ground:#F6F7FB;        /* blanc légèrement bleuté */
  --surface:#FFFFFF;
  --surface-2:#EFF1F8;
  --ink:#12142E;           /* bleu-noir, jamais du noir pur */
  --ink-2:#4A4E68;
  --ink-3:#7A7D90;
  --line:#DDE0EC;
  --line-strong:#C3C8DE;

  --hero-bg:var(--navy-deep);
  --hero-ink:#FFFFFF;
  --hero-ink-2:#B9BDD6;
  --hero-line:rgba(255,255,255,.14);

  --ok:#0E7C61;
  --ok-bg:#E2F3EE;
  --wait:#8A5A00;
  --wait-bg:#FBF0DA;

  /* schéma d'interopérabilité */
  --dg-ours:#262A75;       /* nos logiciels */
  --dg-third:#C8102E;      /* systèmes tiers */
  --dg-on:#FFFFFF;         /* texte sur bloc plein */
  --dg-line-b:#3D44B0;     /* lien base à base */
  --dg-line-r:#C8102E;     /* lien par flux de fichiers */

  --shadow:0 1px 2px rgba(18,20,46,.05), 0 12px 32px -12px rgba(18,20,46,.16);
  --shadow-lg:0 2px 4px rgba(18,20,46,.06), 0 24px 60px -20px rgba(18,20,46,.26);

  --display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --wrap:1180px;
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1030;
    --surface:#171A42;
    --surface-2:#1E2250;
    --ink:#EDEFF8;
    --ink-2:#B2B7D3;
    --ink-3:#8A8FAE;
    --line:#2B2F63;
    --line-strong:#3B4080;
    --navy:#8E95E0;
    --red-soft:#FF6A80;
    --hero-bg:#0A0C24;
    --hero-ink-2:#A9AECB;
    --hero-line:rgba(255,255,255,.11);
    --ok:#6FD9BC;  --ok-bg:#0D3A31;
    --wait:#F0C476; --wait-bg:#3A2C0C;
    --dg-ours:#3F46B4;
    --dg-third:#C8102E;
    --dg-line-b:#8E95E0;
    --dg-line-r:#FF6A80;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1030;
  --surface:#171A42;
  --surface-2:#1E2250;
  --ink:#EDEFF8;
  --ink-2:#B2B7D3;
  --ink-3:#8A8FAE;
  --line:#2B2F63;
  --line-strong:#3B4080;
  --navy:#8E95E0;
  --red-soft:#FF6A80;
  --hero-bg:#0A0C24;
  --hero-ink-2:#A9AECB;
  --hero-line:rgba(255,255,255,.11);
  --ok:#6FD9BC;  --ok-bg:#0D3A31;
  --wait:#F0C476; --wait-bg:#3A2C0C;
  --dg-ours:#3F46B4;
  --dg-third:#C8102E;
  --dg-line-b:#8E95E0;
  --dg-line-r:#FF6A80;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.7);
}

/* ───────────────────────── Base ───────────────────────── */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; text-wrap:balance; margin:0; line-height:1.15}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:26px}
.prose{max-width:64ch}

.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--red); flex:none; border-radius:2px}
.eyebrow.on-dark{color:var(--hero-ink-2)}

.section{padding:104px 0; border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
.section-head{display:flex; flex-direction:column; gap:18px; margin-bottom:52px}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem); letter-spacing:-.015em}
.section-head p{color:var(--ink-2); max-width:60ch; font-size:1.06rem}

/* ───────────────────────── Header ───────────────────────── */
header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:28px; height:88px}
/* Proportions reprises du logo officiel (viewBox 491×148) : le mot PRODILYS
   fait 0,54 fois la hauteur du symbole, la signature 0,15 — relevée ici à 0,23
   pour rester lisible à cette taille. */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand svg{width:46px; height:46px; border-radius:11px; flex:none}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{
  font-family:var(--display); font-weight:500; font-size:1.5rem;
  letter-spacing:.135em; color:var(--ink);
}
.brand-txt span{
  font-family:var(--display); font-weight:300; font-size:.68rem;
  letter-spacing:.18em; color:var(--ink-3); margin-top:6px;
}
nav.main{display:flex; gap:30px; margin-left:auto}
nav.main a{
  text-decoration:none; font-size:.93rem; color:var(--ink-2);
  padding:6px 0; position:relative; transition:color .18s;
}
nav.main a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--red); transition:right .22s ease;
}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{right:0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-size:.93rem; font-weight:500;
  padding:11px 21px; border-radius:9px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap;
}
.btn-primary{background:var(--red); color:#fff}
.btn-primary:hover{background:#A80D26; transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink-3); background:var(--surface-2)}
.btn-light{background:#fff; color:var(--navy-deep)}
.btn-light:hover{background:#E9EBF6; transform:translateY(-1px)}
.btn-outline-light{border-color:rgba(255,255,255,.3); color:#fff}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.hdr-cta{flex:none}
/* Menu mobile : sans lui, ni navigation ni bouton d'action sous 900 px —
   le visiteur ne pouvait que faire défiler. */
.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 9px; flex:none;
  background:transparent; border:1px solid var(--line-strong); border-radius:9px;
  cursor:pointer;
}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:.22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.cta-court{display:none}

@media(max-width:900px){
  .burger{display:flex}
  nav.main{
    position:fixed; left:0; right:0; top:88px; z-index:59;
    flex-direction:column; gap:0; margin:0;
    background:var(--ground); border-bottom:1px solid var(--line);
    padding:6px 26px 22px; box-shadow:var(--shadow-lg);
    opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  nav.main.ouvert{opacity:1; transform:none; pointer-events:auto}
  nav.main a{
    font-size:1.06rem; padding:15px 0; color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  nav.main a::after{display:none}
  nav.main a:last-child{border-bottom:0}
}
@media(max-width:560px){
  .cta-long{display:none}
  .cta-court{display:inline}
  .bar{height:74px; gap:14px}
  nav.main{top:74px}
  .brand-txt span{display:none}
  .brand svg{width:38px; height:38px; border-radius:9px}
  .brand-txt b{font-size:1.2rem}
}

/* ───────────────────────── Hero ───────────────────────── */
.hero{
  background:var(--hero-bg); color:var(--hero-ink);
  position:relative; overflow:hidden;
  padding:68px 0 0;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 78% 8%, rgba(142,149,224,.20), transparent 62%),
    radial-gradient(620px 340px at 6% 96%, rgba(200,16,46,.13), transparent 66%);
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:2}
/* Le nom du produit passe en tête d'affiche ; la promesse le suit, en retrait
   de taille mais pas d'importance. Les deux restent dans le même <h1> : le titre
   de la page garde ainsi la marque ET ce qu'elle fait. */
.hero h1{margin:20px 0 0; display:flex; flex-direction:column; gap:24px}
.hero-marque{
  font-family:var(--display); font-weight:400; color:#fff;
  font-size:clamp(3.2rem,9vw,7rem); line-height:.92; letter-spacing:-.025em;
}
.hero-marque .tm{
  font-size:.24em; vertical-align:super; font-weight:300;
  letter-spacing:.02em; opacity:.75;
}
.hero-claim{
  font-family:var(--display); font-weight:300; color:#fff;
  font-size:clamp(1.35rem,2.5vw,1.95rem); line-height:1.24;
  letter-spacing:-.01em; max-width:29ch;
}

/* Entrée en cascade : chaque élément arrive à son tour, de haut en bas.
   Une seule fois, au chargement — pas d'effet à chaque défilement. */
@keyframes heroIn{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:none}
}
.hero .eyebrow,
.hero-marque,
.hero-claim,
.hero-lede,
.hero-actions{animation:heroIn .8s cubic-bezier(.22,.61,.36,1) backwards}
.hero .eyebrow{animation-delay:.06s}
.hero-marque  {animation-delay:.16s}
.hero-claim   {animation-delay:.32s}
.hero-lede    {animation-delay:.46s}
.hero-actions {animation-delay:.58s}
.hero-lede{
  margin-top:24px; font-size:1.16rem; color:var(--hero-ink-2);
  max-width:56ch; line-height:1.62;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:13px; margin-top:30px}

/* Texte à gauche, application à droite, entièrement dans le cadre. Tout doit
   tenir dans un écran : une page tronquée dès l'arrivée donne l'impression
   d'un site mal fini. D'où le bandeau resserré ci-dessous. */
.hero-haut{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:46px; align-items:center}
.hero-texte{min-width:0}
.hero-visuel{
  margin:0; position:relative; width:100%;
  border-radius:11px; overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 34px 70px -24px rgba(0,0,0,.75), 0 4px 14px rgba(0,0,0,.35);
  animation:heroIn 1s cubic-bezier(.22,.61,.36,1) .34s backwards;
}
/* Barre de navigateur : elle dit ce que la capture seule ne dit pas —
   qu'Athénéa tourne désormais dans un onglet, sans rien à installer. */
.chrome{
  display:flex; align-items:center; gap:7px;
  padding:9px 12px; background:#E4E7F0; border-bottom:1px solid #CDD2E2;
}
.pastille{width:9px; height:9px; border-radius:50%; background:#C3C8DE; flex:none}
.pastille:first-child{background:#E0808F}
.pastille:nth-child(2){background:#E8C48A}
.pastille:nth-child(3){background:#9DC9A6}
.barre-url{flex:1; height:14px; border-radius:7px; background:#F4F6FB; margin-left:8px}
.hero-visuel img{display:block; width:100%; height:auto}
@media(max-width:980px){
  .hero-haut{grid-template-columns:1fr; gap:42px}
}

/* tracé ECG — le motif du symbole, repris en fil conducteur */
.ecg{
  margin-top:30px; width:100%; height:64px; display:block;
  overflow:visible;
}
.ecg path{
  fill:none; stroke:rgba(255,255,255,.42); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:trace 2.4s cubic-bezier(.65,.02,.3,1) .75s forwards;
}
.ecg circle{
  fill:var(--red-soft); opacity:0;
  animation:beat .5s ease 2.45s forwards;
}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes beat{
  0%{opacity:0; r:3}
  55%{opacity:1; r:9}
  100%{opacity:1; r:5.5}
}

.badges{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--hero-line); margin-top:34px;
}
.badge{
  flex:1 1 178px; padding:17px 24px 19px;
  border-right:1px solid var(--hero-line);
}
.badge:last-child{border-right:0}
.badge b{
  display:block; font-family:var(--display); font-weight:500;
  font-size:1.02rem; color:#fff; letter-spacing:.01em;
}
.badge span{
  display:block; margin-top:5px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--hero-ink-2);
}
@media(max-width:720px){
  .badge{flex:1 1 50%; border-bottom:1px solid var(--hero-line)}
  .badge:nth-child(2n){border-right:0}
}

/* ───────────────────────── Nouveautés ───────────────────────── */
.news-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media(max-width:880px){ .news-grid{grid-template-columns:1fr} }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px 30px 34px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.card h3{font-size:1.42rem; letter-spacing:-.01em}
.card p{color:var(--ink-2); font-size:1rem}
.chip{
  flex:none; font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; white-space:nowrap;
}
.chip-ok{background:var(--ok-bg); color:var(--ok)}
.chip-wait{background:var(--wait-bg); color:var(--wait)}
.speclist{
  list-style:none; margin:6px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px;
  border-top:1px solid var(--line); padding-top:18px;
}
.speclist li{
  position:relative; padding-left:20px; font-size:.94rem; color:var(--ink-2);
}
/* Les deux logos officiels valent mieux qu'une phrase. Fond clair fixe : ils sont
   en bleu foncé et disparaîtraient sur la carte en thème sombre. */
.preuve{
  margin-top:auto; padding:13px 16px; background:#EDF1F8;
  border:1px solid #DCE2EE; border-radius:9px;
  display:flex; justify-content:center; align-items:center;
}
.preuve img{width:100%; max-width:280px; height:auto}
.speclist li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px; background:var(--red); opacity:.75;
}

/* ───────────────────────── Athénéa ───────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
@media(max-width:940px){ .split{grid-template-columns:1fr; gap:40px} }
.why{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.why li{
  padding:15px 0 15px 30px; border-bottom:1px solid var(--line);
  position:relative; color:var(--ink-2); font-size:1rem;
}
.why li:first-child{border-top:1px solid var(--line)}
.why li::before{
  content:""; position:absolute; left:2px; top:1.42em;
  width:14px; height:2px; background:var(--red); border-radius:2px;
}
.mdoof{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:0 var(--radius) var(--radius) 0; padding:26px 28px;
  margin-top:26px;
}
.mdoof b{font-family:var(--display); font-weight:500; letter-spacing:.02em}
.mdoof p{color:var(--ink-2); font-size:.97rem; margin-top:8px}

.domains{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px}
@media(max-width:880px){ .domains{grid-template-columns:1fr} }
.domain{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 26px 28px;
}
.domain h4{
  font-size:.78rem; font-family:var(--mono); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--red-soft);
  margin-bottom:16px;
}
.domain ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.domain li{font-size:.95rem; color:var(--ink-2); padding-left:16px; position:relative}
.domain li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:5px; height:5px; border-radius:50%; background:var(--line-strong);
}

/* ───────────────────────── Schéma d'interopérabilité ───────────────────────── */
figure.diagram{margin:0}
.diagram-scroll{
  overflow-x:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 22px; box-shadow:var(--shadow);
}
.diagram svg{display:block; width:100%; min-width:760px; height:auto}
.diagram figcaption{
  margin-top:20px; color:var(--ink-2); font-size:.94rem;
  max-width:76ch; line-height:1.6;
}
/* blocs */
.dg-ours rect{fill:var(--dg-ours)}
.dg-third rect{fill:var(--dg-third)}
.dg-ours text,.dg-third text{fill:var(--dg-on)}
.dg-hub rect{fill:var(--surface-2); stroke:var(--dg-ours); stroke-width:2}
.dg-hub text{fill:var(--ink)}
.dg-box text{
  font-family:var(--body); font-size:13px; font-weight:500; text-anchor:middle;
}
.dg-box text.lg{font-size:15.5px; font-weight:600}
.dg-box text.sm{font-size:11px; font-weight:400; opacity:.85}
.dg-mk-b{fill:var(--dg-line-b)}
.dg-mk-r{fill:var(--dg-line-r)}
/* zone Prodilys */
.dg-zone{fill:none; stroke:var(--dg-line-b); stroke-width:1.5; stroke-dasharray:6 5; opacity:.55}
/* liens */
.dg-b{fill:none; stroke:var(--dg-line-b); stroke-width:2}
.dg-r{fill:none; stroke:var(--dg-line-r); stroke-width:2}
.dg-cap{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  fill:var(--ink-3); text-anchor:middle;
  /* halo : les étiquettes se posent par-dessus les traits sans les couper visuellement */
  stroke:var(--surface); stroke-width:4px; paint-order:stroke fill;
}
.dg-col{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; fill:var(--ink-3); text-anchor:middle;
  stroke:var(--surface); stroke-width:4px; paint-order:stroke fill;
}
/* les attributs de présentation SVG perdent contre le CSS : il faut des classes */
.dg-cap.dg-start,.dg-col.dg-start{text-anchor:start}
.dg-cap.dg-end,.dg-col.dg-end{text-anchor:end}
.dg-key{font-family:var(--body); font-size:12.5px; fill:var(--ink-2)}

/* ───────────────────────── Satellites ───────────────────────── */
.sat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.sat{
  background:var(--surface); padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:9px;
  transition:background .18s;
}
.sat:hover{background:var(--surface-2)}
.sat h4{font-size:1.14rem; font-family:var(--display); font-weight:500}
.sat .dom{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.sat p{font-size:.93rem; color:var(--ink-2); line-height:1.58}

/* ───────────────────────── Références ───────────────────────── */
/* 10 logos : deux rangées pleines de cinq */
.refs{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.ref{
  background:#fff; border:1px solid var(--line); border-radius:11px;
  height:92px; display:flex; align-items:center; justify-content:center;
  padding:12px; flex:0 1 calc(20% - 11.2px); min-width:150px;
}
.ref img{max-height:62px; max-width:100%; width:auto; height:auto; object-fit:contain}
@media(max-width:1100px){ .ref{flex:0 1 calc(25% - 10.5px)} }
@media(max-width:860px){  .ref{flex:0 1 calc(33.333% - 9.34px)} }
@media(max-width:560px){  .ref{flex:0 1 calc(50% - 7px)} }

/* ───────────────────────── À propos ───────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:44px}
@media(max-width:620px){ .stats{grid-template-columns:1fr} }
.stat{
  border-top:2px solid var(--red); padding-top:18px;
}
.stat b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:2.6rem; letter-spacing:-.02em; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat span{display:block; margin-top:9px; color:var(--ink-2); font-size:.97rem}

/* ───────────────────────── Contact ───────────────────────── */
.contact{background:var(--hero-bg); color:#fff; border-top:0}
.contact h2{color:#fff}
.contact .section-head p{color:var(--hero-ink-2)}
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start}
@media(max-width:940px){ .contact-grid{grid-template-columns:1fr; gap:40px} }
.coord{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.coord li{
  display:flex; gap:18px; padding:20px 0;
  border-bottom:1px solid var(--hero-line); align-items:baseline;
}
.coord li:first-child{border-top:1px solid var(--hero-line)}
.coord .lbl{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--hero-ink-2); width:88px; flex:none;
}
.coord .val{color:#fff; font-size:1.04rem; text-decoration:none}
.coord a.val:hover{color:var(--red-soft)}
.form{
  background:rgba(255,255,255,.05); border:1px solid var(--hero-line);
  border-radius:var(--radius); padding:30px 28px 32px;
  display:flex; flex-direction:column; gap:16px;
}
.field{display:flex; flex-direction:column; gap:7px}
.field label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--hero-ink-2);
}
.field input,.field textarea{
  font-family:var(--body); font-size:.98rem; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid var(--hero-line);
  border-radius:8px; padding:11px 13px; width:100%;
  transition:border-color .18s, background .18s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.36)}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--red-soft); background:rgba(255,255,255,.11);
}
.field textarea{resize:vertical; min-height:104px}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:.84rem; color:var(--hero-ink-2); line-height:1.5}
.consent input{margin-top:3px; accent-color:var(--red); flex:none}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:520px){ .two{grid-template-columns:1fr} }

/* ───────────────────────── Footer ───────────────────────── */
footer{background:var(--hero-bg); color:var(--hero-ink-2); padding:46px 0 40px; border-top:1px solid var(--hero-line)}
.foot{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between}
.foot-links{display:flex; flex-wrap:wrap; gap:24px; font-size:.88rem}
.foot-links a{text-decoration:none; color:var(--hero-ink-2); transition:color .18s}
.foot-links a:hover{color:#fff}
.foot small{font-size:.82rem; color:var(--hero-ink-2)}

/* reveal */
.rv{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important}
  .ecg path{stroke-dashoffset:0}
  .ecg circle{opacity:1}
  .rv{opacity:1; transform:none}
}

/* ── ajouts du site déployé ── */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.page-head{padding:72px 0 0}
.legal{padding:44px 0 104px}
.legal h2{font-size:1.35rem; margin:44px 0 14px; letter-spacing:-.01em}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 16px; color:var(--ink-2); max-width:72ch}
.legal ul{margin:0 0 20px; padding-left:22px; color:var(--ink-2); max-width:72ch}
.legal li{margin-bottom:8px}
.legal a{color:var(--navy); text-underline-offset:3px}
.notice{
  max-width:560px; margin:0 auto; padding:120px 26px 140px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.notice h1{font-size:clamp(2rem,5vw,2.9rem); letter-spacing:-.02em}
.notice p{color:var(--ink-2)}