/* ============================================================
   POLICE : Open Runde (géométrique arrondie), auto-hébergée.
   Aucun appel à un CDN tiers : la politique cookies affirme que
   le site héberge ses polices, il faut que ce soit vrai.
   ============================================================ */
@font-face{font-family:'Open Runde';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/open-runde-400.woff2) format('woff2');}
@font-face{font-family:'Open Runde';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/open-runde-500.woff2) format('woff2');}
@font-face{font-family:'Open Runde';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/open-runde-600.woff2) format('woff2');}
@font-face{font-family:'Open Runde';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/open-runde-700.woff2) format('woff2');}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* champ */
  --blanc:#ffffff;
  --encre:#14151f;          /* barre de navigation, aplats sombres */
  --encre-txt:#171826;      /* texte display */
  --brume:#f4f5f8;          /* surface grise, bouton secondaire */
  --brume-2:#eceef3;
  --ligne:#e6e8ee;

  /* gris de texte, tous >= 4.5:1 sur blanc */
  --gris-3:#5c6274;         /* 6.08:1 */
  --gris-2:#6b7180;         /* 4.88:1 */
  --gris-1:#8a8fa0;         /* usage non textuel uniquement */

  /* couleur héritée Gate */
  --cobalt:#2563eb;
  --cobalt-fonce:#1d4ed8;
  --cobalt-a1:rgba(37,99,235,.07);
  --cobalt-a2:rgba(37,99,235,.14);
  --cyan:#06b6d4;

  /* pastels du champ qui saigne */
  --p-bleu:#c9dcfd;
  --p-lilas:#dbd8fb;
  --p-cyan:#c8ecf4;
  --p-clair:#eef3ff;
  --p-rose:#e7dcfb;

  /* états du fil de validation */
  --attente:#b45309;
  --attente-bg:#fef3c7;
  --ok:#15803d;
  --ok-bg:#dcfce7;

  /* rayons */
  --r-pill:999px;
  --r-24:24px;
  --r-16:16px;
  --r-12:12px;
  --r-8:8px;

  /* ombres, relevées sur la référence */
  --sh-hairline:0 1px 1px 1px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.06);
  --sh-nav:0 1px 1px 0 rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06), 0 12px 32px -12px rgba(16,20,40,.35);
  --sh-carte:0 1px 3px 0 rgba(16,20,40,.06), 0 8px 16px 0 rgba(16,20,40,.05), 0 0 0 1px rgba(16,20,40,.03);
  --sh-surface:0 1px 3px rgba(16,20,40,.05), 0 12px 24px -6px rgba(16,20,40,.07), 0 40px 72px -20px rgba(16,20,40,.16), 0 0 0 1px rgba(16,20,40,.04);
  --sh-flotte:0 1px 2px rgba(16,20,40,.06), 0 6px 14px -4px rgba(16,20,40,.09), 0 0 0 1px rgba(16,20,40,.04);

  /* courbes, relevées sur la référence */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --t-court:.15s;
  --t-moyen:.2s;

  /* mesures */
  --largeur:1200px;
  --gouttiere:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blanc);color:var(--encre-txt);
  font-family:'Open Runde',ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.6;font-weight:400;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2.5px solid var(--cobalt);outline-offset:3px;border-radius:6px;
}
.mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1em;height:1em;flex:none;display:block}

/* ============================================================
   RAMPE TYPOGRAPHIQUE, tracking fonction de la taille
   ============================================================ */
.display{
  font-size:clamp(2rem,1.15rem + 3.5vw,4rem);
  line-height:1.045;letter-spacing:-.045em;font-weight:600;color:var(--encre-txt);
  text-wrap:balance;
}
.titre-2{
  font-size:clamp(1.65rem,1.1rem + 2.1vw,2.6rem);
  line-height:1.1;letter-spacing:-.035em;font-weight:600;text-wrap:balance;
}
.titre-3{font-size:1.2rem;line-height:1.35;letter-spacing:-.018em;font-weight:600}
.titre-4{font-size:1.0625rem;line-height:1.4;letter-spacing:-.012em;font-weight:600}
.chapo{
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.5;font-weight:500;
  color:var(--gris-3);letter-spacing:-.006em;text-wrap:pretty;
}
.corps{font-size:1rem;line-height:1.62;color:var(--gris-3);text-wrap:pretty}
.petit{font-size:.875rem;line-height:1.5;color:var(--gris-3);letter-spacing:.002em}
.mention{font-size:.8125rem;line-height:1.45;color:var(--gris-3);letter-spacing:.008em}
.mesure{max-width:66ch}
.mesure-large{max-width:72ch}

/* ============================================================
   MISE EN PAGE
   ============================================================ */
.enveloppe{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
.enveloppe-etroite{width:100%;max-width:940px;margin-inline:auto;padding-inline:var(--gouttiere)}
.centre{text-align:center;margin-inline:auto}
.section{padding-block:clamp(64px,7vw,112px)}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  height:28px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--brume);color:var(--gris-3);
  font-size:.8125rem;font-weight:500;letter-spacing:.01em;
}
.eyebrow .i{width:13px;height:13px;color:var(--cobalt)}

/* ============================================================
   BARRE DE NAVIGATION FLOTTANTE, DÉTACHÉE, EN PILL
   ============================================================ */
.nav{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:90;width:min(calc(100% - 32px),872px);
  background:rgba(20,21,31,.86);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border-radius:var(--r-24);box-shadow:var(--sh-nav);
  overflow:hidden;
}
.nav::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);pointer-events:none}
.nav-in{display:flex;align-items:center;gap:4px;height:56px;padding-left:16px;padding-right:8px}
.marque{display:flex;align-items:center;gap:9px;color:#fff;font-weight:600;letter-spacing:-.024em;font-size:1rem;padding-right:8px}
.marque .glyphe{width:26px;height:26px}
.nav-liens{display:flex;align-items:center;gap:2px;margin-left:6px}
.nav-lien{
  display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:var(--r-pill);
  color:#b4b7c4;font-size:.875rem;font-weight:500;letter-spacing:-.004em;
  transition:color var(--t-court) var(--ease),background-color var(--t-court) var(--ease);
}
.nav-lien .i{width:13px;height:13px;opacity:.75}
.nav-droite{margin-left:auto;display:flex;align-items:center;gap:6px}
.langues{display:flex;align-items:center;gap:1px;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.07)}
.langue{
  height:26px;min-width:34px;padding:0 9px;border-radius:var(--r-pill);
  color:#9ea3b3;font-size:.75rem;font-weight:600;letter-spacing:.03em;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--t-court) var(--ease),background-color var(--t-court) var(--ease);
}
.langue[aria-current="true"]{background:rgba(255,255,255,.14);color:#fff}
.nav-cta{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--cobalt);color:#fff;font-size:.875rem;font-weight:600;letter-spacing:-.008em;white-space:nowrap;
  transition:background-color var(--t-court) var(--ease),transform var(--t-court) var(--ease);
}
.nav-cta .i{width:14px;height:14px}
.nav-burger{display:none;width:38px;height:38px;border-radius:var(--r-pill);background:rgba(255,255,255,.09);color:#fff;align-items:center;justify-content:center}
.nav-burger .i{width:17px;height:17px}
@media (hover:hover) and (pointer:fine){
  .nav-lien:hover{color:#fff;background:rgba(255,255,255,.08)}
  .langue:hover{color:#fff}
  .nav-cta:hover{background:#3b76f0}
}
.nav-cta:active,.nav-lien:active{transform:scale(.97)}

/* ============================================================
   PREMIER ÉCRAN
   ============================================================ */
.hero{padding-top:clamp(126px,13vw,172px);padding-bottom:0;position:relative;overflow:hidden}
.hero-halo{
  position:absolute;left:50%;top:-180px;width:1180px;height:560px;transform:translateX(-50%);
  background:
    radial-gradient(46% 58% at 24% 46%,rgba(37,99,235,.10),transparent 68%),
    radial-gradient(40% 52% at 74% 40%,rgba(6,182,212,.09),transparent 70%),
    radial-gradient(36% 44% at 50% 8%,rgba(219,216,251,.55),transparent 72%);
  filter:blur(18px);pointer-events:none;
}
.pastille{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 6px;
  border-radius:var(--r-pill);background:var(--cobalt-a1);color:var(--cobalt-fonce);
  font-size:.875rem;font-weight:500;letter-spacing:-.004em;
  transition:background-color var(--t-court) var(--ease);
}
.pastille .marqueur{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);
  background:var(--cobalt);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.055em;
}
.pastille .i{width:13px;height:13px;transition:transform var(--t-court) var(--ease)}
@media (hover:hover){.pastille:hover{background:var(--cobalt-a2)}.pastille:hover .i{transform:translateX(2px)}}

h1.display{margin-top:24px;max-width:16ch;margin-inline:auto}
.hero .chapo{margin-top:20px;max-width:60ch;margin-inline:auto}

.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--r-pill);
  font-size:1rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:background-color var(--t-court) var(--ease),color var(--t-court) var(--ease),
             box-shadow var(--t-court) var(--ease),transform .16s var(--ease-out);
}
.btn .i{width:16px;height:16px}
.btn-plein{background:var(--cobalt);color:#fff;box-shadow:0 1px 1px 0 rgba(16,20,40,.10),0 0 0 1px rgba(16,20,40,.06)}
.btn-gris{background:rgba(16,20,40,.045);color:var(--encre-txt)}
.btn-encre{background:var(--encre);color:#fff}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn-plein:hover{background:#3b76f0}
  .btn-gris:hover{background:rgba(16,20,40,.075)}
  .btn-encre:hover{background:#22243a}
}

/* rangée des 4 faits, à l'emplacement de la rangée de logos de la référence */
.faits{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 4px;margin-top:clamp(44px,5vw,66px);padding-bottom:8px;
}
.fait{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);
  color:var(--gris-3);font-size:.875rem;font-weight:500;letter-spacing:-.002em;
}
.fait .i{width:15px;height:15px;color:var(--gris-1)}
.fait b{color:var(--encre-txt);font-weight:600}
.fait-sep{width:4px;height:4px;border-radius:50%;background:#d3d6de;flex:none}

/* ============================================================
   CHAMP PASTEL + BARRE D'ONGLETS À ENCOCHES + SURFACE PRODUIT
   ============================================================ */
.champ{
  position:relative;margin-top:clamp(34px,4vw,54px);
  padding:clamp(72px,7vw,104px) 0 clamp(56px,6vw,88px);
  isolation:isolate;
}
.champ::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(72% 88% at 12% 8%,var(--p-bleu) 0%,rgba(201,220,253,0) 62%),
    radial-gradient(66% 82% at 88% 6%,var(--p-lilas) 0%,rgba(219,216,251,0) 60%),
    radial-gradient(58% 74% at 50% 96%,var(--p-cyan) 0%,rgba(200,236,244,0) 64%),
    radial-gradient(88% 60% at 62% 42%,var(--p-rose) 0%,rgba(231,220,251,0) 66%),
    linear-gradient(178deg,#eaf0ff 0%,#e5e6fb 42%,#eef6f9 100%);
}
.champ::after{ /* grain authored, adoucit les bandes de dégradé */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.34;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.champ-voile{position:absolute;left:0;right:0;bottom:0;height:180px;z-index:-1;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}

/* barre d'onglets blanche qui chevauche le bord haut du champ, encoches inversées */
.onglets{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:2px;height:52px;padding:0 14px;
  background:#fff;border-radius:0 0 32px 32px;z-index:3;max-width:calc(100% - 96px);
}
.onglets .encoche{position:absolute;top:0;width:32px;height:32px;pointer-events:none}
.onglets .encoche-g{left:-31px;background:radial-gradient(circle at 0% 100%,rgba(255,255,255,0) 32px,#fff 32.5px)}
.onglets .encoche-d{right:-31px;background:radial-gradient(circle at 100% 100%,rgba(255,255,255,0) 32px,#fff 32.5px)}
.onglet{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:500;color:var(--gris-2);letter-spacing:-.004em;white-space:nowrap;
  transition:color var(--t-court) var(--ease),background-color var(--t-court) var(--ease);
}
.onglet .i{width:14px;height:14px;opacity:.8}
.onglet[aria-selected="true"]{background:var(--brume);color:var(--encre-txt);font-weight:600}
@media (hover:hover){.onglet:hover{color:var(--encre-txt)}}

.etiquette-demo{
  position:relative;z-index:2;display:flex;justify-content:center;margin-bottom:14px;
}
.etiquette-demo span{
  display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(16,20,40,.06);
  color:#3f4459;font-size:.75rem;font-weight:600;letter-spacing:.014em;
}
.etiquette-demo .i{width:12px;height:12px;color:var(--gris-2)}

/* --- la surface produit : le fil de validation --- */
.surface{
  position:relative;z-index:2;width:min(100%,1040px);margin-inline:auto;/* remplacé plus bas par --sw */
  background:#fff;border-radius:var(--r-24);box-shadow:var(--sh-surface);overflow:hidden;
}
.surface-barre{
  display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;
  border-bottom:1px solid var(--ligne);background:linear-gradient(#fff,#fcfcfe);
}
.app-switch{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 6px;border-radius:var(--r-pill);
  background:var(--brume);font-size:.8125rem;font-weight:600;letter-spacing:-.006em;
}
.app-switch .glyphe{width:20px;height:20px}
.app-switch .i{width:12px;height:12px;color:var(--gris-1)}
.chip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);
  background:#fff;box-shadow:var(--sh-hairline);font-size:.75rem;font-weight:500;color:var(--gris-3);white-space:nowrap;
}
.chip .i{width:12px;height:12px;color:var(--gris-1)}
.surface-barre .droite{margin-left:auto;display:flex;align-items:center;gap:6px}
.ico-btn{width:28px;height:28px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;color:var(--gris-2);background:transparent;transition:background-color var(--t-court) var(--ease)}
.ico-btn .i{width:15px;height:15px}
@media (hover:hover){.ico-btn:hover{background:var(--brume)}}
.avatar{width:26px;height:26px;border-radius:var(--r-pill);overflow:hidden;box-shadow:var(--sh-hairline)}

.surface-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ligne)}
.stat{padding:14px 16px;border-right:1px solid var(--ligne);min-width:0}
.stat:last-child{border-right:0}
.stat .lab{display:flex;align-items:center;gap:6px;font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-2)}
.stat .lab .i{width:11px;height:11px;color:var(--gris-1)}
.stat .val{display:flex;align-items:baseline;gap:7px;margin-top:5px}
.stat .val b{font-size:1.375rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.stat .val small{font-size:.75rem;font-weight:500;color:var(--gris-2)}
.stat .spark{margin-top:9px;height:22px;width:100%;display:block;color:var(--cobalt)}

.fil-tete{display:flex;align-items:center;gap:10px;padding:15px 18px 9px}
.fil-tete h3{font-size:.9375rem;font-weight:600;letter-spacing:-.012em}
.compteur{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);
  background:var(--attente-bg);color:var(--attente);font-size:.6875rem;font-weight:700;letter-spacing:.02em;
}
.fil-tete .droite{margin-left:auto;display:flex;gap:6px}

.fil{padding:0 10px 12px;display:flex;flex-direction:column;gap:6px}
.item{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:13px 12px;border-radius:var(--r-16);background:#fff;
  box-shadow:0 0 0 1px rgba(16,20,40,.055);
  transition:box-shadow var(--t-moyen) var(--ease),background-color var(--t-moyen) var(--ease);
}
.item.prioritaire{box-shadow:0 0 0 1px rgba(37,99,235,.34),0 1px 2px rgba(16,20,40,.06),0 10px 22px -12px rgba(16,20,40,.20)}
@media (hover:hover){.item:hover{box-shadow:0 0 0 1px rgba(16,20,40,.1),0 6px 16px -8px rgba(16,20,40,.18)}}
.item .glyphe-app{width:38px;height:38px;border-radius:var(--r-12)}
.item .corps-item{min-width:0}
.item .ligne1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.item .ligne1 strong{font-size:.9375rem;font-weight:600;letter-spacing:-.012em}
.item .apercu{margin-top:4px;font-size:.875rem;line-height:1.5;color:var(--gris-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px}
.balise{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-8);
  background:var(--brume);color:var(--gris-3);font-size:.75rem;font-weight:500;white-space:nowrap;
}
.balise .i{width:11px;height:11px;color:var(--gris-1)}
.balise.mono{font-size:.6875rem}

/* le point en attente, micro-souffle */
.statut{display:inline-flex;align-items:center;gap:7px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);
  background:var(--attente-bg);color:var(--attente);font-size:.6875rem;font-weight:700;letter-spacing:.025em;white-space:nowrap}
.statut.pret{background:var(--ok-bg);color:var(--ok)}
.point{position:relative;width:7px;height:7px;flex:none}
.point b{position:absolute;inset:0;border-radius:50%;background:currentColor;animation:souffle 3s var(--ease) infinite}
.point i{position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.55;animation:onde 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes souffle{0%,100%{scale:1;opacity:1}50%{scale:1.14;opacity:.86}}
@keyframes onde{0%{scale:1;opacity:.5}72%,100%{scale:2.6;opacity:0}}

.actions-item{display:flex;align-items:center;gap:6px;padding-top:2px}
.btn-valider{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--r-pill);
  background:var(--encre);color:#fff;font-size:.8125rem;font-weight:600;letter-spacing:-.006em;
  transition:transform .16s var(--ease-out),background-color var(--t-court) var(--ease);
}
.btn-valider .i{width:13px;height:13px;position:relative;z-index:1}
.btn-valider span{position:relative;z-index:1}
.btn-valider::before{ /* maintenir pour valider : le remplissage prouve le garde-fou humain */
  content:"";position:absolute;inset:0;z-index:0;background:var(--cobalt);
  clip-path:inset(0 100% 0 0);transition:clip-path .2s var(--ease-out);
}
.btn-valider:active{transform:scale(.97)}
.btn-valider:active::before{clip-path:inset(0 0 0 0);transition:clip-path 1.4s linear}
.btn-modifier{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--r-pill);
  background:rgba(16,20,40,.045);color:var(--encre-txt);font-size:.8125rem;font-weight:600;letter-spacing:-.006em;
  transition:background-color var(--t-court) var(--ease),transform .16s var(--ease-out);
}
.btn-modifier .i{width:13px;height:13px;color:var(--gris-2)}
.btn-modifier:active{transform:scale(.97)}
@media (hover:hover){.btn-modifier:hover{background:rgba(16,20,40,.08)}}

.surface-pied{
  display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--ligne);
  background:#fcfcfe;font-size:.8125rem;color:var(--gris-3);
}
.surface-pied .i{width:14px;height:14px;color:var(--gris-1);flex:none}
.surface-pied .droite{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ============================================================
   DEUX PORTES
   ============================================================ */
.portes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:38px}
.porte{
  position:relative;display:flex;flex-direction:column;
  padding:26px;border-radius:var(--r-24);background:#fff;box-shadow:var(--sh-carte);overflow:hidden;
  transition:box-shadow var(--t-moyen) var(--ease),transform var(--t-moyen) var(--ease);
}
@media (hover:hover){.porte:hover{transform:translateY(-2px);box-shadow:0 1px 3px rgba(16,20,40,.06),0 16px 30px -12px rgba(16,20,40,.16),0 0 0 1px rgba(16,20,40,.05)}}
.porte-num{
  display:inline-flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gris-2);
}
.porte-num em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--r-pill);background:var(--cobalt-a1);color:var(--cobalt-fonce);font-size:.6875rem}
.porte h3{margin-top:14px;font-size:1.3125rem;line-height:1.25;letter-spacing:-.026em;font-weight:600;text-wrap:balance}
.porte .corps{margin-top:9px;font-size:.9375rem}
.porte-illu{margin-top:20px;border-radius:var(--r-16);background:var(--brume);padding:16px;overflow:hidden}
.porte-illu svg{display:block;width:100%;height:auto}
.porte ul{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.porte li{display:flex;gap:9px;align-items:flex-start;font-size:.9375rem;line-height:1.45;color:var(--gris-3)}
.porte li .i{width:15px;height:15px;margin-top:4px;color:var(--cobalt);flex:none}
.porte-pied{margin-top:auto;padding-top:20px}
.lien-fleche{display:inline-flex;align-items:center;gap:7px;font-size:.9375rem;font-weight:600;color:var(--cobalt-fonce);letter-spacing:-.008em}
.lien-fleche .i{width:14px;height:14px;transition:transform var(--t-court) var(--ease)}
@media (hover:hover){.lien-fleche:hover .i{transform:translateX(3px)}}

.arbitre{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 20px;border-radius:var(--r-16);background:var(--brume);text-align:center;flex-wrap:wrap;
}
.arbitre .i{width:16px;height:16px;color:var(--cobalt)}
.arbitre p{font-size:.9375rem;color:var(--gris-3);font-weight:500}
.arbitre b{color:var(--encre-txt);font-weight:600}

/* ============================================================
   MÉCANISME EN TROIS TEMPS
   ============================================================ */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.etape{
  display:flex;flex-direction:column;border-radius:var(--r-24);background:var(--brume);overflow:hidden;
}
.etape-scene{padding:22px 20px 0;height:186px;display:flex;align-items:center;justify-content:center}
.etape-scene svg{display:block;width:100%;height:auto;max-height:164px}
.etape-txt{padding:18px 20px 22px;background:#fff;border-top:1px solid var(--ligne);flex:1}
.etape-num{font-size:.6875rem;font-weight:700;letter-spacing:.12em;color:var(--cobalt-fonce)}
.etape h3{margin-top:8px;font-size:1.0625rem;font-weight:600;letter-spacing:-.016em}
.etape p{margin-top:6px;font-size:.9375rem;line-height:1.5;color:var(--gris-3)}

/* ============================================================
   CE QUI TOURNE : AGENTS, PULSE, BILLING
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:38px}
.carte{
  border-radius:var(--r-24);background:#fff;box-shadow:var(--sh-carte);padding:22px;
  display:flex;flex-direction:column;min-width:0;
  transition:box-shadow var(--t-moyen) var(--ease);
}
@media (hover:hover){.carte:hover{box-shadow:0 1px 3px rgba(16,20,40,.06),0 14px 26px -12px rgba(16,20,40,.15),0 0 0 1px rgba(16,20,40,.05)}}
.carte-icone{width:40px;height:40px;border-radius:var(--r-12);display:flex;align-items:center;justify-content:center;background:var(--cobalt-a1);color:var(--cobalt-fonce)}
.carte-icone .i{width:19px;height:19px}
.carte h3{margin-top:16px;font-size:1.0625rem;font-weight:600;letter-spacing:-.016em}
.carte p{margin-top:7px;font-size:.9375rem;line-height:1.52;color:var(--gris-3)}
.carte ul{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.carte li{display:flex;gap:8px;font-size:.875rem;line-height:1.45;color:var(--gris-3)}
.carte li .i{width:14px;height:14px;margin-top:3px;color:var(--cobalt);flex:none}
.c4{grid-column:span 3}
.c6{grid-column:span 6}
.c12{grid-column:span 12}

/* mini visualisation authored dans les cartes agents */
.mini{margin-top:16px;border-radius:var(--r-12);background:var(--brume);padding:12px;overflow:hidden}
.mini svg{display:block;width:100%;height:auto}

/* formations, liste pondérée */
.formations{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.formation{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:13px 12px;border-radius:var(--r-12);
  transition:background-color var(--t-court) var(--ease);
}
@media (hover:hover){.formation:hover{background:var(--brume)}}
.formation + .formation{box-shadow:inset 0 1px 0 var(--ligne)}
.formation .rond{width:34px;height:34px;border-radius:var(--r-pill);background:var(--brume);display:flex;align-items:center;justify-content:center;color:var(--gris-3)}
.formation .rond .i{width:15px;height:15px}
.formation strong{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.formation span{display:block;font-size:.8125rem;color:var(--gris-3);margin-top:2px}
.formation .i-fin{width:14px;height:14px;color:var(--gris-1)}

/* Pulse, trois formules */
.formules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.formule{border-radius:var(--r-16);background:#fff;box-shadow:0 0 0 1px rgba(16,20,40,.07);padding:18px;display:flex;flex-direction:column}
/* Sans prix affiché, c'est le nom de la formule qui porte le bloc. */
.formule .nom{font-size:1.125rem;font-weight:600;letter-spacing:-.022em;color:var(--encre-txt);line-height:1.25}
.formule .pour{margin-top:6px;font-size:.8125rem;line-height:1.45;color:var(--gris-3)}
.formule .filet{margin-top:14px;height:1px;background:var(--ligne)}
.formule .prix{margin-top:10px;display:flex;align-items:baseline;gap:5px}
.formule .prix b{font-size:2.125rem;font-weight:600;letter-spacing:-.045em;line-height:1}
.formule .prix span{font-size:.8125rem;color:var(--gris-3);font-weight:500}
.formule ul{margin-top:13px;display:flex;flex-direction:column;gap:6px;flex:1}
.formule li{display:flex;gap:7px;font-size:.8125rem;line-height:1.4;color:var(--gris-3)}
.formule li .i{width:13px;height:13px;margin-top:3px;color:var(--cobalt);flex:none}
.formule .essai{margin-top:16px;font-size:.75rem;color:var(--gris-3);display:flex;align-items:center;gap:6px}
.formule .essai .i{width:12px;height:12px;color:var(--gris-1)}

/* ============================================================
   OBJECTION + AI ACT
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bloc{border-radius:var(--r-24);padding:clamp(24px,3vw,34px);background:var(--brume)}
.bloc h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.022em;line-height:1.3;text-wrap:balance}
.bloc p{margin-top:12px;font-size:1rem;line-height:1.6;color:var(--gris-3)}
.bloc p + p{margin-top:10px}
.bloc-icone{width:36px;height:36px;border-radius:var(--r-12);background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-hairline);margin-bottom:16px}
.bloc-icone .i{width:17px;height:17px;color:var(--cobalt-fonce)}
.rappel{margin-top:16px;display:flex;gap:9px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-12);background:#fff}
.rappel .i{width:15px;height:15px;color:var(--cobalt);margin-top:3px;flex:none}
.rappel p{margin:0;font-size:.875rem;line-height:1.5}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:34px;border-radius:var(--r-24);background:#fff;box-shadow:var(--sh-carte);overflow:hidden}
.faq details{border-bottom:1px solid var(--ligne)}
.faq details:last-child{border-bottom:0}
.faq summary{
  display:flex;align-items:center;gap:14px;padding:19px 22px;cursor:pointer;list-style:none;
  font-size:1rem;font-weight:600;letter-spacing:-.012em;
  transition:background-color var(--t-court) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{background:#fbfbfd}}
.faq summary .i{width:16px;height:16px;margin-left:auto;color:var(--gris-2);transition:transform var(--t-moyen) var(--ease);flex:none}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq .reponse{padding:0 22px 20px 22px}
.faq .reponse p{font-size:.9375rem;line-height:1.6;color:var(--gris-3);max-width:70ch}
.faq .reponse p + p{margin-top:9px}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{
  border-radius:var(--r-24);background:var(--brume);padding:clamp(40px,6vw,72px) 24px;text-align:center;
  position:relative;overflow:hidden;
}
/* Le dégradé doit atteindre la transparence au bord de son propre élément,
   sinon on voit son rectangle. « circle at 50% 0 » sans taille prenait
   farthest-corner : encore opaque sur les côtés, d'où l'arête visible.
   closest-side cale les rayons sur les bords du bloc. */
.cta-final::before{
  content:"";position:absolute;left:50%;bottom:-22%;width:min(116%,980px);aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(37,99,235,.20),rgba(59,118,240,.10) 54%,rgba(37,99,235,0) 100%);
}
.cta-final h2,.cta-final p,.cta-final .actions{position:relative}
.cta-final p{margin-top:14px;max-width:56ch;margin-inline:auto}
.cta-final .mention{margin-top:18px;position:relative}

/* ============================================================
   PIED DE PAGE + DÔME PASTEL
   ============================================================ */
.pied{position:relative;isolation:isolate;padding-top:clamp(56px,6vw,80px);overflow:hidden}
.pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px 24px;padding-bottom:44px}
.pied .marque-pied{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.024em;font-size:1rem}
.pied .marque-pied .glyphe{width:26px;height:26px}
.pied h4{font-size:.75rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--gris-2);margin-bottom:12px}
.pied ul{display:flex;flex-direction:column;gap:9px}
.pied li a{font-size:.9375rem;color:var(--gris-3);transition:color var(--t-court) var(--ease)}
@media (hover:hover){.pied li a:hover{color:var(--encre-txt)}}
.pied .corps{margin-top:14px;font-size:.9375rem;max-width:34ch}
.langues-pied{display:flex;align-items:center;gap:6px;margin-top:18px}
.langues-pied a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-pill);
  background:var(--brume);font-size:.8125rem;font-weight:600;color:var(--gris-3);letter-spacing:.02em}
.langues-pied a[aria-current="true"]{background:var(--encre);color:#fff}
.pied-bas{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:20px 0 44px;border-top:1px solid var(--ligne);font-size:.8125rem;color:var(--gris-3);
}
.pied-bas .droite{margin-left:auto;display:flex;flex-wrap:wrap;gap:16px}
.dome{
  position:relative;height:clamp(120px,14vw,190px);margin-top:-8px;
}
/* L'arc part du sommet du dôme et descend. Avec aspect-ratio 2/1 il mesurait
   750 px de haut pour une bande de 186 px : il recouvrait tout le pied, et
   comme il est peint après, il passait DEVANT le texte. Hauteur explicite,
   z-index négatif, .pied porte isolation:isolate pour que ça reste local. */
.dome::before{
  content:"";position:absolute;left:50%;top:0;width:min(150%,1500px);
  height:clamp(150px,17vw,232px);transform:translateX(-50%);z-index:-1;
  border-radius:50% 50% 0 0;
  /* Les trois pastels sont ancrés en bas de l'arc. Si l'arc dépasse trop la
     bande visible du dôme, .pied{overflow:hidden} les rogne et il ne reste
     que le linear-gradient pâle : la hauteur doit rester proche de celle
     du dôme lui-même. */
  background:
    radial-gradient(62% 104% at 28% 104%,var(--p-bleu),rgba(201,220,253,0) 68%),
    radial-gradient(62% 104% at 74% 104%,var(--p-lilas),rgba(219,216,251,0) 70%),
    radial-gradient(50% 86% at 52% 108%,var(--p-cyan),rgba(200,236,244,0) 72%),
    linear-gradient(#eff2ff,#e0dff8);
}
.filet-final{position:relative;height:8px;background:linear-gradient(90deg,var(--p-bleu),var(--p-clair) 48%,#a5a1f2)}

/* ============================================================
   RÉVÉLATION AU SCROLL
   ============================================================ */
[data-rev]{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
[data-rev].vu{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav-liens{display:none}
  .langues{display:none}
  .nav-burger{display:inline-flex}
  .surface-stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--ligne)}
}
@media (max-width:900px){
  .portes{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr}
  .etape-scene{height:auto;padding:22px 20px 4px}
  .duo{grid-template-columns:1fr}
  .verif{grid-template-columns:1fr}
  .c4{grid-column:span 6}
  .c6{grid-column:span 12}
  .pied-grille{grid-template-columns:1fr 1fr}
  .pied-grille > :first-child{grid-column:span 2}
  .formules{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--gouttiere:18px}
  .nav{top:12px;width:calc(100% - 24px)}
  .nav-in{height:52px;padding-left:14px;padding-right:7px}
  .nav-cta{height:36px;padding:0 12px;font-size:.8125rem;gap:6px}
  .nav-cta .i{width:14px;height:14px}
  .hero{padding-top:112px}
  h1.display{max-width:22ch}
  .actions .btn{width:100%}
  .onglets{gap:0;padding:0 8px;height:48px;max-width:calc(100% - 74px);overflow-x:auto;scrollbar-width:none}
  .onglets::-webkit-scrollbar{display:none}
  .onglet{padding:0 10px;font-size:.8125rem}
  .champ{padding-top:82px}
  .item{grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 11px}
  .item .glyphe-app{width:34px;height:34px}
  .actions-item{grid-column:1/-1;padding-top:11px}
  .btn-valider,.btn-modifier{flex:1;justify-content:center}
  .surface-stats{grid-template-columns:1fr 1fr}
  .c4{grid-column:span 12}
  .pied-grille{grid-template-columns:1fr}
  .pied-grille > :first-child{grid-column:span 1}
}
@media (max-width:420px){
  .fait{padding:5px 10px;font-size:.8125rem}
  .fait-sep{display:none}
}

/* ============================================================
   ACCESSIBILITÉ MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-rev]{opacity:1;transform:none}
  .point b,.point i{animation:none}
  .point i{opacity:.28}
}

/* ============================================================
   VITRES : fenêtres de verre semi-transparentes qui flottent
   dans le champ pastel, autour de la surface produit.
   Positionnées depuis les bords de la fenêtre, pas depuis la
   surface : leur marge de respiration ne dépend que du viewport.
   ============================================================ */
.vitres{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:calc(var(--sw) + 2 * var(--debord));z-index:4;pointer-events:none}
.vitre{
  position:absolute;pointer-events:auto;padding:13px 14px;border-radius:18px;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 1px 2px rgba(16,20,40,.05),
    0 10px 22px -10px rgba(16,20,40,.16),
    0 34px 64px -28px rgba(16,20,40,.28);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vitre{background:rgba(255,255,255,.86)}
}
.v-tete{display:flex;align-items:center;gap:7px;font-size:.6875rem;font-weight:700;
  letter-spacing:.075em;text-transform:uppercase;color:#4a5064}
.v-tete .i{width:12px;height:12px;color:var(--cobalt-fonce);flex:none}
.v-tete .fin{margin-left:auto;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:var(--gris-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6875rem}
.v-ligne{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid rgba(16,20,40,.07)}
.v-ligne:first-of-type{border-top:0}
.v-ini{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:var(--r-pill);background:rgba(37,99,235,.12);color:var(--cobalt-fonce);
  font-size:.625rem;font-weight:700;letter-spacing:.02em}
.v-ligne > span:nth-child(2){flex:1;min-width:0;font-size:.8125rem;font-weight:500;color:var(--encre-txt);
  letter-spacing:-.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-tag{flex:none;height:19px;padding:0 8px;display:inline-flex;align-items:center;border-radius:var(--r-pill);
  font-size:.625rem;font-weight:700;letter-spacing:.05em;background:rgba(16,20,40,.06);color:#4a5064}
.v-tag.bleu{background:rgba(37,99,235,.13);color:var(--cobalt-fonce)}
.v-tag.cyan{background:rgba(6,182,212,.16);color:#0e7490}
.v-tag.ambre{background:var(--attente-bg);color:var(--attente)}
.v-txt{margin-top:10px;font-size:.8125rem;line-height:1.5;color:#3d4356;letter-spacing:-.004em}
.v-etat{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;
  border-top:1px dashed rgba(16,20,40,.12);font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--attente)}
.v-etat .pt{width:7px;height:7px;border-radius:50%;background:var(--attente);flex:none}
.v-boutons{display:flex;gap:6px;margin-top:11px}
.v-bouton{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;letter-spacing:-.006em;background:rgba(255,255,255,.8);color:var(--encre-txt);
  box-shadow:0 0 0 1px rgba(16,20,40,.08),0 1px 1px rgba(16,20,40,.05)}
.v-bouton .i{width:12px;height:12px;color:var(--gris-2)}
.v-bouton.oui{background:var(--cobalt);color:#fff;box-shadow:0 1px 2px rgba(16,20,40,.16)}
.v-bouton.oui .i{color:#fff}
.v-barres{display:flex;align-items:flex-end;gap:6px;height:52px;margin-top:12px}
.v-barres i{display:block;flex:1;border-radius:4px 4px 2px 2px;background:rgba(37,99,235,.22)}
.v-barres i.haut{background:var(--cobalt)}
.v-pied{margin-top:9px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;color:var(--gris-2)}

/* la pastille de synthèse, centrée sous la surface */
.v-pastille{
  position:absolute;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:var(--r-pill);
  background:rgba(20,21,31,.82);color:#fff;font-size:.8125rem;font-weight:600;letter-spacing:-.006em;
  white-space:nowrap;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 2px 6px rgba(16,20,40,.2),0 20px 40px -16px rgba(16,20,40,.5);pointer-events:auto;
}
.v-pastille .i{width:14px;height:14px;color:#8fb0ff}
.v-pastille b{font-weight:700}

/* placement : calé sur les bords de la surface, pas sur ceux de la fenêtre.
   Chevauchement = largeur de carte − débord. Il reste donc constant quand la
   fenêtre change de taille, et ne mord que sur le bord arrondi de la surface. */
.v-mail  {left:0;   top:86px;   width:296px}
.v-oui   {right:0;  top:58px;   width:294px}
.v-studio{right:6px;bottom:88px;width:306px}
.v-stats {left:6px; bottom:118px;width:288px}
.v-somme {bottom:46px}

/* flottement : périodes courtes et amplitude lisible, sinon ça ne se voit pas */
@media (prefers-reduced-motion:no-preference){
  .vitre,.v-pastille{animation:vitre-entree .6s var(--ease-out) both}
  .v-mail  {animation:vitre-entree .6s var(--ease-out) .05s both, flotte 11s ease-in-out .7s infinite alternate}
  .v-oui   {animation:vitre-entree .6s var(--ease-out) .14s both, flotte 13s ease-in-out .7s infinite alternate-reverse}
  .v-studio{animation:vitre-entree .6s var(--ease-out) .22s both, flotte 9.5s ease-in-out .7s infinite alternate-reverse}
  .v-stats {animation:vitre-entree .6s var(--ease-out) .3s both,  flotte 12.5s ease-in-out .7s infinite alternate}
  .v-somme {animation:vitre-entree .6s var(--ease-out) .38s both, flotte-c 10.5s ease-in-out .7s infinite alternate}
}
@keyframes vitre-entree{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
/* le point d'attente respire, comme celui du fil de validation */
@media (prefers-reduced-motion:no-preference){
  .v-etat .pt{animation:pt-respire 2.4s ease-in-out infinite}
  .v-barres i.haut{animation:barre-monte 5.5s ease-in-out 1s infinite alternate;transform-origin:50% 100%}
}
@keyframes pt-respire{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(180,83,9,.34)}50%{opacity:.72;box-shadow:0 0 0 5px rgba(180,83,9,0)}}
@keyframes barre-monte{from{transform:scaleY(.82)}to{transform:scaleY(1)}}
@keyframes flotte{from{translate:0 0}to{translate:0 -13px}}
@keyframes flotte-c{from{translate:0 0}to{translate:0 -9px}}

/* Échelle. --sw pilote la largeur de la surface, --debord la sortie des
   vitres de part et d'autre. Le cadre fait --sw + 2×--debord : il doit rester
   dans la fenêtre, sinon les cartes sont rognées. */
.champ{--sw:860px;--debord:200px}
.surface{width:min(100%,var(--sw))}
@media (min-width:1141px){.champ{padding-bottom:clamp(120px,11vw,168px)}}
@media (max-width:1440px){.champ{--sw:820px;--debord:196px}}
@media (max-width:1320px){.champ{--sw:764px;--debord:186px}
  .v-mail,.v-oui{width:280px}.v-studio{width:288px}.v-stats{width:272px}}
@media (max-width:1220px){.champ{--sw:700px;--debord:172px}
  .v-mail,.v-oui{width:266px}.v-studio{width:274px}.v-stats{width:258px}}
@media (max-width:1140px){.vitres{display:none}.champ{--sw:1040px}}


/* ============================================================
   PREMIER ÉCRAN DES PAGES INTÉRIEURES
   ============================================================ */
.hero-page{position:relative;padding:clamp(122px,12vw,164px) 0 clamp(30px,4vw,48px);overflow:hidden}
.hero-page .hero-halo{top:-240px;height:520px;opacity:.85}
.hero-page .eyebrow{position:relative}
.hero-page h1{margin-top:16px;max-width:19ch;font-size:clamp(1.9rem,1.1rem + 2.9vw,3.2rem);
  line-height:1.06;letter-spacing:-.04em;font-weight:600;position:relative;text-wrap:balance}
.hero-page .chapo{margin-top:16px;max-width:62ch;position:relative}
.hero-page .actions{justify-content:flex-start;margin-top:26px;position:relative}
.hero-page .faits{justify-content:flex-start;margin-top:26px;padding-bottom:0}
.fil-page{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--gris-2);position:relative;margin-bottom:4px}
.fil-page a{color:var(--gris-2)}
.fil-page .i{width:12px;height:12px;color:var(--gris-1)}
@media (hover:hover){.fil-page a:hover{color:var(--encre-txt)}}


/* ============================================================
   MENU MOBILE
   ============================================================ */
.menu-fond{position:fixed;inset:0;z-index:60;background:rgba(20,21,31,.32);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;
  transition:opacity var(--t-moyen) var(--ease)}
.menu-fond.ouvert{opacity:1;pointer-events:auto}
.menu-mobile{
  position:fixed;z-index:61;top:12px;right:12px;left:12px;max-width:420px;margin-left:auto;
  border-radius:26px;background:#fff;padding:14px;box-shadow:var(--sh-nav);
  transform:translateY(-14px) scale(.97);opacity:0;pointer-events:none;transform-origin:100% 0;
  transition:opacity var(--t-moyen) var(--ease),transform .26s var(--ease-out);
  max-height:calc(100dvh - 24px);overflow-y:auto;
}
.menu-mobile.ouvert{transform:none;opacity:1;pointer-events:auto}
.menu-tete{display:flex;align-items:center;height:38px;padding:0 6px 0 8px;margin-bottom:8px}
.menu-tete .marque{font-size:1rem}
.menu-fermer{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-pill);background:var(--brume)}
.menu-fermer .i{width:16px;height:16px}
.menu-mobile a.ml{display:flex;align-items:center;gap:11px;padding:12px 12px;border-radius:14px;
  font-size:1rem;font-weight:600;letter-spacing:-.014em;transition:background-color var(--t-court) var(--ease)}
.menu-mobile a.ml .i{width:16px;height:16px;color:var(--gris-2)}
.menu-mobile a.ml[aria-current="page"]{background:var(--brume)}
@media (hover:hover){.menu-mobile a.ml:hover{background:var(--brume)}}
.menu-sep{height:1px;background:var(--ligne);margin:10px 8px}
.menu-mobile .btn{width:100%;margin-top:4px}
.menu-langues{display:flex;gap:6px;margin-top:12px;padding:0 4px}
.menu-langues a{flex:1;display:inline-flex;align-items:center;justify-content:center;height:36px;
  border-radius:var(--r-pill);background:var(--brume);font-size:.8125rem;font-weight:700;letter-spacing:.03em;color:var(--gris-3)}
.menu-langues a[aria-current="true"]{background:var(--encre);color:#fff}
body.fige{overflow:hidden}

/* ============================================================
   TEXTE LONG : mentions légales, vie privée, cookies
   ============================================================ */
.prose{max-width:74ch;padding-bottom:clamp(30px,4vw,50px)}
.prose h2{font-size:1.3125rem;font-weight:600;letter-spacing:-.024em;line-height:1.28;margin-top:38px;
  padding-top:22px;border-top:1px solid var(--ligne)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.014em;margin-top:22px}
.prose p{margin-top:12px;font-size:1rem;line-height:1.68;color:var(--gris-3)}
.prose ul{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.prose ul li{position:relative;padding-left:19px;font-size:1rem;line-height:1.6;color:var(--gris-3)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cobalt);opacity:.55}
.prose a{color:var(--cobalt-fonce);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose b,.prose strong{color:var(--encre-txt);font-weight:600}
.prose .maj{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--brume);font-size:.8125rem;font-weight:600;color:var(--gris-3);margin-bottom:26px}
.prose .maj .i{width:13px;height:13px;color:var(--gris-2)}
.prose .encart{margin-top:18px;padding:16px 18px;border-radius:var(--r-16);background:var(--brume)}
.prose .encart p{margin-top:0;font-size:.9375rem}
.prose .encart p + p{margin-top:9px}
.prose dl{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:.9375rem}
.prose dt{font-weight:600;color:var(--encre-txt);white-space:nowrap}
.prose dd{margin:0;color:var(--gris-3)}
@media (max-width:560px){.prose dl{grid-template-columns:1fr;gap:2px 0}.prose dd{margin-bottom:10px}}

/* ============================================================
   FORMULAIRE DE CONTACT
   ============================================================ */
.form-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
@media (max-width:900px){.form-grille{grid-template-columns:1fr}}
.form{border-radius:var(--r-24);background:#fff;box-shadow:var(--sh-carte);padding:clamp(22px,3vw,32px)}
.champ-f{margin-top:16px}
.champ-f:first-of-type{margin-top:0}
.champ-f label{display:block;font-size:.875rem;font-weight:600;letter-spacing:-.008em;margin-bottom:7px}
.champ-f label .opt{font-weight:500;color:var(--gris-2)}
.champ-f input,.champ-f textarea,.champ-f select{
  width:100%;font:inherit;font-size:.9375rem;color:var(--encre-txt);background:var(--brume);
  border:0;border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1px rgba(16,20,40,.06);
  transition:box-shadow var(--t-court) var(--ease),background-color var(--t-court) var(--ease)}
.champ-f textarea{min-height:128px;resize:vertical;line-height:1.55}
.champ-f input:focus,.champ-f textarea:focus,.champ-f select:focus{
  outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--cobalt),0 0 0 4px var(--cobalt-a1)}
.champ-f input::placeholder,.champ-f textarea::placeholder{color:var(--gris-1)}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--cobalt)}
.consent span{font-size:.8125rem;line-height:1.5;color:var(--gris-3)}
.form .btn{margin-top:20px}
.contact-a-cote{display:flex;flex-direction:column;gap:12px}
.coord{border-radius:var(--r-16);background:var(--brume);padding:18px 20px}
.coord h3{font-size:.9375rem;font-weight:600;letter-spacing:-.012em}
.coord p{margin-top:7px;font-size:.9375rem;line-height:1.55;color:var(--gris-3)}
.coord a{color:var(--cobalt-fonce)}

/* ============================================================
   DIVERS PAGES INTÉRIEURES
   ============================================================ */
.nav-lien[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}  /* la barre est sombre */
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grille-2,.grille-3{grid-template-columns:1fr}}
.liste-check{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.liste-check li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--gris-3)}
.liste-check li .i{width:16px;height:16px;color:var(--cobalt);margin-top:4px;flex:none}
.liste-check li b{color:var(--encre-txt);font-weight:600}
.tableau{width:100%;border-collapse:separate;border-spacing:0;margin-top:20px;font-size:.9375rem}
.tableau th,.tableau td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--ligne);vertical-align:top}
.tableau thead th{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-2)}
.tableau tbody th{font-weight:600;color:var(--encre-txt)}
.tableau td{color:var(--gris-3)}
.tableau tr:last-child th,.tableau tr:last-child td{border-bottom:0}
.enrobe-tableau{border-radius:var(--r-24);background:#fff;box-shadow:var(--sh-carte);overflow-x:auto;margin-top:22px}
.enrobe-tableau .tableau{margin-top:0;min-width:520px}
.section-titre{max-width:72ch}
.section-titre h2{margin-top:16px}
.section-titre .chapo{margin-top:12px;max-width:58ch}

/* ============================================================
   ÉTIQUETTE « EN COURS DE DÉVELOPPEMENT »
   Neutre et discrète : ce n'est pas une alerte, c'est un fait.
   ============================================================ */
.dev{
  display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 11px;
  border-radius:var(--r-pill);background:var(--brume);color:var(--gris-3);
  font-size:.75rem;font-weight:600;letter-spacing:.006em;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(16,20,40,.05);vertical-align:middle;
}
.dev::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gris-1);flex:none}
.carte .dev{margin-top:10px;align-self:flex-start}  /* sinon le flex-column l'étire */
.v-tete .dev{height:18px;padding:0 8px;font-size:.625rem;font-weight:700;letter-spacing:.03em;
  text-transform:none;margin-left:auto;background:rgba(16,20,40,.06);box-shadow:none}
.v-tete .dev::before{width:5px;height:5px}
.liste-check .dev,.porte li .dev{height:20px;padding:0 9px;font-size:.6875rem;margin-left:6px}