/* ══════════════════════════════════════════════════════════════════════
   TELIOS Studio — DabarTech
   L'univers de l'application, porté sur le web : mêmes fonds, même cyan,
   mêmes caractères, même grammaire de navigation.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: dark;

  /* fonds — graphite chaud : la page s'adresse à un humain */
  --fond:#14110e;
  --fond-2:#1b1713;
  --fond-3:#231d18;
  --panneau:rgba(27,23,19,.96);

  /* filets — ambrés, discrets */
  --filet:rgba(214,163,105,.16);
  --filet-2:rgba(214,163,105,.34);

  /* signaux */
  --accent:#d6a369;      /* ambre — l'accent de la page */
  --accent-2:#a97c46;
  --accent-vif:#e8bb85;  /* survol */
  --vert:#7fb069;        /* ce qui est vivant, ce qui est validé */
  --ambre:#d99a4e;
  --alerte:#cf6a5a;      /* la barrière : la donnée ne sort pas */

  /* la machine garde le froid de l'application */
  --cyan:#00c8ff;
  --machine:#0a1420;
  --machine-filet:rgba(0,200,255,.18);

  /* texte */
  --txt:#f2ebe1;
  --txt-2:rgba(233,220,204,.80);
  --muted:rgba(214,196,174,.58);

  --mono:'Share Tech Mono','IBM Plex Mono',Consolas,monospace;
  --sans:'Exo 2','Helvetica Neue',Arial,sans-serif;

  --coque:1180px;
  --rail:212px;
  --marge:148px;
  --arrondi:5px;         /* un léger adoucissement : tout était à angles vifs */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}

body{
  background:var(--fond);
  color:var(--txt);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px;                 /* barre de navigation basse */
}
@media(min-width:900px){
  body{padding-right:var(--rail);padding-bottom:0}
}

/* ── ossature ───────────────────────────────────────────────────────── */

.coque{width:100%;max-width:var(--coque);margin:0 auto;padding-inline:26px}
@media(max-width:560px){.coque{padding-inline:18px}}

.zone{padding-block:clamp(48px,6vw,88px)}
.zone--serre{padding-block:clamp(32px,4vw,54px)}

/* un fond plus clair marque les sections « machine » */
.bande{background:var(--fond-2);border-block:1px solid var(--filet);
  padding-block:clamp(50px,6.5vw,92px)}

.rail-grille{display:grid;grid-template-columns:var(--marge) minmax(0,1fr);gap:0 38px;
  align-items:start}
@media(max-width:1080px){.rail-grille{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ── lien d'évitement ───────────────────────────────────────────────── */

.saut{position:absolute;left:-9999px;top:0;z-index:99;background:var(--accent);color:#14110e;
  padding:12px 18px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none}
.saut:focus{left:12px;top:12px}

/* ── étiquettes d'instrument ────────────────────────────────────────── */

.instrument{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:block;padding-top:.4em;
}
.instrument::before{content:"";display:block;width:24px;height:1px;background:var(--accent);margin-bottom:12px}
@media(max-width:1080px){.instrument{padding-top:0}}

/* ── typographie ────────────────────────────────────────────────────── */

h1,h2,h3,h4{font-family:var(--sans);text-wrap:balance;margin:0;color:var(--txt)}

h1{font-size:clamp(33px,4.6vw,56px);font-weight:700;letter-spacing:-.02em;
  line-height:1.06;margin-bottom:20px}
h2{font-size:clamp(24px,3vw,38px);font-weight:700;letter-spacing:-.015em;
  line-height:1.14;margin-bottom:15px}
h3{font-size:clamp(18px,1.7vw,22px);font-weight:600;margin-bottom:10px}
h4{font-size:17px;font-weight:600;margin-bottom:8px}

p{margin:0 0 1.05em;max-width:64ch;color:var(--txt-2)}
.rail-grille p:last-child,.rail-grille ul:last-child{margin-bottom:0}

.lede{font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--txt-2);
  max-width:56ch;margin-bottom:0}

a{color:var(--accent);text-underline-offset:3px}
strong,b{font-weight:600;color:var(--txt)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── en-tête ────────────────────────────────────────────────────────── */

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  background:rgba(3,8,15,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--filet)}
header.top .coque{display:flex;align-items:center;gap:16px;padding-block:14px;min-height:58px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;
  font-size:16px;letter-spacing:.02em;color:var(--txt);text-decoration:none}
.brand small{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
/* Le losange TELIOS ouvre l'en-tête : c'est le produit qu'on regarde, et
   c'est l'icône de la fenêtre de l'application — la continuité est immédiate.
   DabarTech reste nommé à côté, et signe le pied de page avec son logo. */
.marque{display:block;height:26px;width:26px;flex:none}
@media(max-width:560px){.marque{height:23px;width:23px}}
.top-etat{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vert);border:1px solid rgba(0,255,157,.28);padding:5px 11px;
  background:rgba(0,255,157,.06)}
.top-etat i{width:6px;height:6px;border-radius:50%;background:var(--vert);flex:none;
}
@keyframes battement{50%{opacity:.35}}
@media(max-width:620px){.top-etat{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   Navigation — le rail, repris de la nav de l'application
   ══════════════════════════════════════════════════════════════════════ */

.rail{position:fixed;z-index:35;right:0;top:0;bottom:0;width:var(--rail);
  background:var(--fond-2);border-left:1px solid var(--filet);
  padding:22px 0 calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:22px;overflow-y:auto}

.rail-sec{display:flex;flex-direction:column;gap:2px}
.rail-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(160,200,230,.42);padding:0 18px 9px}
.rail-item{display:flex;align-items:center;gap:11px;padding:10px 18px;text-decoration:none;
  color:var(--txt-2);font-size:15px;border-left:2px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.rail-item:hover{background:rgba(0,200,255,.06);color:var(--txt)}
.rail-item[aria-current="page"]{background:rgba(0,200,255,.09);color:var(--txt);
  border-left-color:var(--accent)}
.rail-ic{width:8px;height:8px;flex:none;background:rgba(160,200,230,.4);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:background .15s ease}
.rail-item:hover .rail-ic,.rail-item[aria-current="page"] .rail-ic{background:var(--accent);
  background:var(--accent)}
.rail-badge{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--vert);border:1px solid rgba(0,255,157,.3);
  padding:2px 7px;background:rgba(0,255,157,.07)}
.rail-pied{margin-top:auto;padding:16px 18px 0;border-top:1px solid var(--filet);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(160,200,230,.42);
  display:flex;flex-direction:column;gap:5px}

/* en dessous de 900 px : barre basse, le rail mangerait l'écran */
@media(max-width:899px){
  .rail{top:auto;left:0;right:0;bottom:0;width:auto;height:auto;flex-direction:row;
    gap:0;padding:0 0 env(safe-area-inset-bottom,0px);border-left:0;
    border-top:1px solid var(--filet);overflow-x:auto;overflow-y:hidden}
  .rail-label,.rail-pied{display:none}
  .rail-sec{flex-direction:row;gap:0}
  .rail-item{flex-direction:column;gap:5px;padding:11px 15px;font-size:12px;
    white-space:nowrap;border-left:0;border-top:2px solid transparent;text-align:center}
  .rail{justify-content:space-between}
  .rail-item[aria-current="page"]{border-left-color:transparent;border-top-color:var(--accent)}
  .rail-badge{display:none}
}
/* sur un téléphone étroit, les cinq entrées doivent tenir sans défilement :
   les libellés passent à leur forme courte plutôt que de sortir de l'écran */
.l-court{display:none}
@media(max-width:470px){
  .rail-item{padding:10px 7px;font-size:11px}
  .rail-ic{width:7px;height:7px}
  .l-long{display:none}
  .l-court{display:inline}
}

/* ══════════════════════════════════════════════════════════════════════
   Héros — le réseau d'agents, en panneau d'application
   ══════════════════════════════════════════════════════════════════════ */

.hero{padding-block:clamp(40px,5.5vw,76px) clamp(34px,4.5vw,58px)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,54px);align-items:center}
@media(max-width:1000px){.hero-grille{grid-template-columns:minmax(0,1fr)}}
.hero-mot{min-width:0}

.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{margin-top:20px}
.hero-sig{margin-top:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px}
.hero-sig span{display:inline-flex;align-items:center;gap:8px}
.hero-sig span::before{content:"";width:5px;height:5px;background:var(--accent);flex:none;
  box-shadow:0 0 8px var(--accent)}
.hero .btns{margin-top:30px}

/* le panneau réseau */
.reseau{margin:0;min-width:0;border:1px solid var(--machine-filet);background:var(--machine);
  border-radius:var(--arrondi);overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9);display:flex;flex-direction:column}
.reseau-bar{display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-bottom:1px solid var(--machine-filet);background:rgba(0,200,255,.05);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.reseau-bar i{width:6px;height:6px;border-radius:50%;background:var(--vert);flex:none;
}
.reseau-bar b{color:var(--txt-2);font-weight:400}
.reseau-bar .droite{margin-left:auto;color:var(--vert)}
.reseau-toile{display:block;width:100%;max-width:100%;height:auto;
  aspect-ratio:1/.82;background:#03080f}
.reseau-jauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--machine-filet)}
.jauge{padding:11px 12px;border-right:1px solid var(--machine-filet);min-width:0}
.jauge:last-child{border-right:0}
.jauge b{display:block;font-family:var(--mono);font-size:clamp(14px,1.5vw,18px);
  color:var(--cyan);font-variant-numeric:tabular-nums;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis}
.jauge span{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(160,200,230,.45)}
.reseau-foc{padding:10px 14px;border-top:1px solid var(--machine-filet);font-family:var(--mono);
  font-size:11.5px;letter-spacing:.06em;color:var(--muted);
  display:flex;gap:14px;flex-wrap:wrap}
.reseau-foc b{color:var(--vert);font-weight:400}
@media(max-width:620px){
  .reseau-jauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jauge:nth-child(2){border-right:0}
  .jauge:nth-child(-n+2){border-bottom:1px solid var(--filet)}
}

/* ── la frontière : ENTRE / RESTE / SORT ────────────────────────────── */

.frontiere{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);
  border:1px solid var(--filet);border-radius:var(--arrondi);overflow:hidden;
  background:var(--fond-2)}
@media(max-width:880px){.frontiere{grid-template-columns:minmax(0,1fr)}}
.f-col{padding:24px;border-right:1px solid var(--filet);display:flex;flex-direction:column;
  gap:13px;min-width:0}
.f-col:last-child{border-right:0}
@media(max-width:880px){
  .f-col{border-right:0;border-bottom:1px solid var(--filet)}
  .f-col:last-child{border-bottom:0}
}
.f-verbe{font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase}
.f-col--entre .f-verbe{color:var(--accent)}
.f-col--reste .f-verbe{color:var(--txt)}
.f-col--sort .f-verbe{color:var(--vert)}
.f-col h3{font-size:18px;margin:0}
.f-col p{font-size:15.5px;line-height:1.55;margin:0;max-width:none}
.f-liste{margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:12.5px;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px}

.f-col--reste{background:var(--machine);border-inline:1px solid var(--machine-filet)}
.f-col--reste .f-verbe{color:var(--cyan)}
.f-col--reste p{color:rgba(190,215,235,.78)}
.f-col--reste .f-liste{color:rgba(160,200,230,.55)}
.f-strate{border:1px solid var(--machine-filet);border-left:2px solid var(--cyan);
  padding:10px 13px;font-family:var(--mono);font-size:12.5px;color:#c3d4e2;
  background:rgba(3,8,15,.55);border-radius:3px}
.f-strate--donnees{border-left-color:var(--alerte)}
.f-barriere{margin-top:auto;padding-top:13px;border-top:1px solid var(--alerte);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.5;color:#ff8494}
.frontiere-note{font-family:var(--mono);font-size:12.5px;color:var(--muted);
  margin:14px 0 0;max-width:none}

/* ── vue capacité, reprise de la salle des agents ───────────────────── */

.capacite{margin:30px 0 0;border:1px solid var(--filet);border-radius:var(--arrondi);
  overflow:hidden;background:var(--fond-2)}
.capacite-bar{display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-bottom:1px solid var(--filet);background:rgba(214,163,105,.05);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.capacite-bar i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.capacite-bar .droite{margin-left:auto;color:var(--accent)}
.capacite-toile{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1/.42;
  background:var(--fond)}
.capacite-jauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--filet)}
.capacite-jauges > div{padding:13px 14px;border-right:1px solid var(--filet);min-width:0}
.capacite-jauges > div:last-child{border-right:0}
.capacite-jauges b{display:block;font-family:var(--mono);font-size:clamp(15px,1.6vw,19px);
  color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis}
.capacite-jauges span{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(214,196,174,.45)}
@media(max-width:760px){.capacite-toile{aspect-ratio:1/.62}}
@media(max-width:520px){
  .capacite-jauges{grid-template-columns:minmax(0,1fr)}
  .capacite-jauges > div{border-right:0;border-bottom:1px solid var(--filet)}
  .capacite-jauges > div:last-child{border-bottom:0}
}

/* ── catalogue d'agents ─────────────────────────────────────────────── */

/* DEUX cartes par ligne, pas trois : depuis que la carte montre l'écran de
   l'agent, une colonne sur trois rendait la capture illisible. Une seule
   colonne sous 760 px, sinon l'image tombe à 170 px de large. */
.catalogue{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Six familles de métiers, six repères. Toutes dans la même température que
   l'ambre du site : aucune ne tire vers le bleu, réservé à la machine, et ni le
   vert ni le rouge de signal ne sont repris. La couleur tient le pictogramme,
   le libellé du secteur et un mince filet en haut de carte — jamais le fond,
   qui reste le même partout pour que les cartes se lisent comme un ensemble. */
.cat--or    {--fam:#e0b264;--fam-voile:rgba(224,178,100,.10);--fam-filet:rgba(224,178,100,.32)}
.cat--argile{--fam:#d4885f;--fam-voile:rgba(212,136, 95,.10);--fam-filet:rgba(212,136, 95,.32)}
.cat--terre {--fam:#c47b74;--fam-voile:rgba(196,123,116,.10);--fam-filet:rgba(196,123,116,.32)}
.cat--olive {--fam:#aaa862;--fam-voile:rgba(170,168, 98,.10);--fam-filet:rgba(170,168, 98,.32)}
.cat--prune {--fam:#b98aa4;--fam-voile:rgba(185,138,164,.10);--fam-filet:rgba(185,138,164,.32)}
.cat--sauge {--fam:#8fae8c;--fam-voile:rgba(143,174,140,.10);--fam-filet:rgba(143,174,140,.32)}

.cat-item{position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:9px;padding:22px;
  background:var(--fond-2);border:1px solid var(--filet);border-radius:var(--arrondi);
  text-decoration:none;color:inherit;min-width:0;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,
             box-shadow .18s ease}
.cat-item::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--fam,var(--accent)),transparent 76%);
  opacity:.55;transition:opacity .18s ease}
.cat-item:hover{background:var(--fond-3);border-color:var(--fam-filet,var(--filet-2));
  transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(0,0,0,.9)}
.cat-item:hover::before{opacity:1}
.cat-item[hidden]{display:none}
/* La carte entière ouvre les fonctionnalités : il faut que ça se voie,
   et qu'on puisse l'atteindre au clavier. Le lien d'appel à l'action
   garde son propre curseur, puisque lui navigue. */
.cat-item{cursor:pointer}
.cat-item:focus-visible{outline:2px solid var(--fam,var(--accent));outline-offset:3px}
.cat-item .cat-cta{cursor:pointer}
.catalogue[hidden]{display:none}

.cat-tete{display:flex;align-items:center;gap:11px}
.cat-ic{width:34px;height:34px;flex:none;padding:7px;color:var(--fam,var(--accent));
  border:1px solid var(--fam-filet,var(--filet));border-radius:var(--arrondi);
  background:var(--fam-voile,rgba(214,163,105,.07))}
.cat-ic svg,.cat-ic > use{display:block}
.cat-secteur{font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fam,var(--accent))}
.cat-item strong{font-size:17px;font-weight:600;color:var(--txt);line-height:1.3}
.cat-item em{font-style:normal;font-size:14.5px;line-height:1.55;color:var(--txt-2)}
/* ══ La page Versions ══════════════════════════════════════════════════════
   Une vue par système, et une carte dépliable par version. Repliée, la carte
   tient en trois lignes : il en faut dix à l'écran, pas deux. */
.ver-caps{display:grid;grid-template-columns:1fr;gap:10px;margin:26px 0 0}
@media (min-width:700px){.ver-caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ver-cap{padding:13px 15px;background:var(--fond-2);
  border:1px solid var(--filet);border-radius:var(--arrondi)}
.ver-cap strong{display:block;font-size:14px;color:var(--txt);margin-bottom:3px}
.ver-cap span{font-size:13px;line-height:1.5;color:var(--txt-2)}

/* Les deux bascules. Celle du système affiché est pleine : on sait toujours
   quelle vue on regarde, ce qu'un simple survol ne dit pas. */
.ver-bascules{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.ver-bascule{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:15px;padding:10px 20px;
  border-radius:var(--arrondi);background:transparent;color:var(--txt-2);
  border:1px solid var(--filet);cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.ver-bascule:hover{border-color:var(--filet-2);color:var(--txt)}
.ver-bascule--actif{background:var(--accent);color:#14110e;border-color:var(--accent)}
.ver-bascule-n{font-family:var(--mono);font-size:11px;padding:1px 7px;
  border-radius:999px;background:rgba(255,255,255,.10)}
.ver-bascule--actif .ver-bascule-n{background:rgba(0,0,0,.18)}

.ver-vue[hidden]{display:none}
.ver-compte{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 20px}

/* Une colonne : la carte repliée est déjà courte, et deux colonnes de
   dépliants qui s'ouvrent à des hauteurs différentes sautent à chaque clic. */
.ver-grille{display:grid;grid-template-columns:1fr;gap:12px}
.ver-carte{padding:0;overflow:hidden}
.ver-resume{display:block;padding:16px 18px;cursor:pointer;list-style:none;
  transition:background .16s ease}
.ver-resume::-webkit-details-marker{display:none}
.ver-resume:hover{background:rgba(255,255,255,.02)}
.ver-carte[open] .ver-resume{border-bottom:1px solid var(--filet)}
/* Le chevron, posé en CSS : rien à écrire dans le HTML de chaque carte. */
.ver-resume::after{content:"";position:absolute;right:18px;top:22px;
  width:7px;height:7px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg);
  transition:transform .18s ease}
.ver-carte[open] .ver-resume::after{transform:rotate(-135deg)}
.ver-carte{position:relative}

.ver-tete{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ver-num{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  color:#14110e;background:var(--accent);padding:2px 9px;
  border-radius:var(--arrondi)}
.ver-date{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.ver-etat{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:2px 8px;
  border:1px solid var(--filet);border-radius:999px}
.ver-etat--pret{color:var(--vert);border-color:rgba(127,176,105,.45)}
.ver-titre{display:block;font-size:16px;font-weight:600;color:var(--txt);
  margin:9px 44px 0 0;line-height:1.35}
.ver-apercu{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ver-chip{font-family:var(--mono);font-size:11px;color:var(--txt-2);
  padding:3px 9px;background:rgba(255,255,255,.03);
  border:1px solid var(--filet);border-radius:999px}
.ver-chip--vide{color:var(--muted);font-style:italic}

.ver-corps{padding:16px 18px 18px}
.ver-corps .sub{margin:0 0 4px}
.ver-sous{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:18px 0 9px}
.ver-liste{margin:0 0 18px;padding:0 0 0 17px;list-style:none}
.ver-liste li{position:relative;font-size:14px;line-height:1.6;
  color:var(--txt-2);margin-bottom:6px}
.ver-liste li::before{content:"";position:absolute;left:-17px;top:9px;
  width:5px;height:5px;transform:rotate(45deg);background:var(--accent)}

.ver-mesures{margin:0;border-top:1px solid var(--filet)}
.ver-ligne{display:flex;flex-wrap:wrap;gap:3px 14px;padding:10px 0;
  border-bottom:1px solid var(--filet)}
.ver-ligne dt{flex:0 0 135px;font-size:13px;color:var(--muted)}
.ver-ligne dd{flex:1 1 170px;margin:0;font-size:14px;color:var(--txt)}
.ver-detail{display:block;font-size:12.5px;line-height:1.5;color:var(--txt-2);
  margin-top:2px}
.ver-source{font-size:12.5px;line-height:1.6;color:var(--muted);margin:13px 0 0}
.ver-cta{display:inline-flex;margin-top:16px}
.ver-cta:hover{background:var(--accent);color:#14110e}

/* L'écran de l'agent.
   ⚠ CORRIGÉ le 11 octobre. La carte portait un bandeau pleine largeur de
     614 px, rogné en haut à gauche, pendant que la fenêtre ouvrait la même
     image dans une boîte de 440 px : l'aperçu écrasait la carte, et
     l'agrandissement était plus PETIT que l'aperçu. C'était l'inverse de ce
     qu'il faut.
   Ici : une vraie miniature, entière, plafonnée en hauteur et centrée. Rien
   n'est rogné, object-fit:contain le garantit quel que soit le rapport de la
   capture. La hauteur plafonnée tient la grille pendant le chargement, ce que
   faisait le rapport fixe avant. */
.cat-vue{display:block;max-width:100%;max-height:190px;height:auto;
  margin:0 auto 6px;object-fit:contain;
  border:1px solid var(--filet);border-radius:var(--arrondi);
  background:#0d0b09;
  filter:saturate(.92) brightness(.96);transition:filter .18s ease}
.cat-item:hover .cat-vue{filter:saturate(1) brightness(1)}

/* Et dans la fenêtre, l'image en GRAND : c'est là qu'on vient pour lire
   l'écran. La boîte s'élargit pour l'occasion, sinon elle resterait à 440 px
   et l'agrandissement n'agrandirait rien. */
.fonc-voile--vue .fonc-boite{width:min(960px,100%)}
.fonc-vue{display:block;width:calc(100% + 52px);height:auto;
  margin:-26px -26px 20px;
  border-bottom:1px solid var(--filet-2);
  border-radius:var(--arrondi) var(--arrondi) 0 0}
.fonc-vue[hidden]{display:none}

/* Deux actions par carte : demander l'accès, et voir ce que l'agent sait
   faire. La première est pleine, la seconde en retrait — sinon deux boutons
   de même poids se disputent le regard et aucun ne ressort. */
.cat-actions{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px}
.cat-cta{display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:14.5px;padding:9px 16px;
  border-radius:var(--arrondi);background:var(--fam-voile,rgba(214,163,105,.12));
  color:var(--fam,var(--accent));border:1px solid var(--fam-filet,var(--filet-2));
  transition:background .16s ease,color .16s ease}
.cat-item:hover .cat-cta{background:var(--fam,var(--accent));color:#14110e}
.cat-fonc{width:auto;margin:0;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:13.5px;padding:9px 12px;
  border-radius:var(--arrondi);background:transparent;color:var(--txt-2);
  border:1px solid var(--filet);
  transition:border-color .16s ease,color .16s ease}
.cat-fonc:hover{border-color:var(--fam-filet,var(--filet-2));color:var(--txt)}

/* ── la fenêtre des fonctionnalités ──────────────────────────

   La liste vit ici plutôt que sur la carte : un agent en annonce trois, un
   autre cinq, et la grille perdrait l'alignement qui la rend lisible d'un
   coup d'œil. Dans une fenêtre, la longueur n'a plus d'importance. */
.fonc-voile{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(10,8,6,.72)}
.fonc-voile[hidden]{display:none}
.fonc-boite{width:min(440px,100%);max-height:80vh;overflow-y:auto;
  background:var(--fond-2);border:1px solid var(--filet-2);
  border-radius:var(--arrondi);padding:26px 26px 22px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.fonc-boite h3{font-size:19px;font-weight:600;color:var(--txt);margin:0 0 4px;
  line-height:1.3}
.fonc-boite .fonc-sous{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.fonc-liste{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;
  list-style:none}
.fonc-liste li{display:flex;align-items:center;gap:8px;
  padding:8px 13px;font-size:14px;color:var(--txt);
  background:var(--fam-voile,rgba(214,163,105,.10));
  border:1px solid var(--fam-filet,var(--filet-2));border-radius:var(--arrondi)}
.fonc-liste li::before{content:"";width:5px;height:5px;flex:none;
  transform:rotate(45deg);background:var(--fam,var(--accent))}
.fonc-pied{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fonc-fermer{width:auto;margin:0;cursor:pointer;font-family:var(--sans);
  font-weight:600;font-size:14px;padding:9px 14px;border-radius:var(--arrondi);
  background:transparent;color:var(--txt-2);border:1px solid var(--filet)}
.fonc-fermer:hover{border-color:var(--filet-2);color:var(--txt)}
/* Dans une fenêtre, l'appel à l'action n'a pas de carte autour de lui : sans
   cette règle il ne réagissait pas au survol, et paraissait inerte. */
.fonc-pied .cat-cta:hover{background:var(--fam,var(--accent));color:#14110e}
/* La question « As-tu déjà TELIOS Studio ? ». Deux réponses de même poids :
   aucune n'est le bon choix, c'est un état de fait qu'on demande. */
.studio-txt{font-size:14.5px;line-height:1.6;color:var(--txt-2);margin:0 0 20px}
.studio-note{font-size:13px;line-height:1.6;color:var(--muted);
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--filet)}

/* ── chercher et filtrer le catalogue ──────────────────────── */

.cat-barre{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.cat-cherche{display:flex;align-items:center;gap:11px;padding:0 14px;
  background:var(--fond-2);border:1px solid var(--filet);border-radius:var(--arrondi);
  transition:border-color .16s ease}
.cat-cherche:focus-within{border-color:var(--filet-2)}
.cat-cherche svg{width:17px;height:17px;flex:none;color:var(--muted)}
.cat-cherche input{flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:var(--sans);font-size:15px;color:var(--txt);padding:13px 0}
.cat-cherche input::placeholder{color:var(--muted)}
.cat-cherche input::-webkit-search-cancel-button{filter:invert(1);opacity:.4}

.cat-filtres{display:flex;flex-wrap:wrap;gap:8px}
.cat-f{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 13px;border-radius:var(--arrondi);
  background:transparent;border:1px solid var(--filet);color:var(--txt-2);
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.cat-f span{font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.cat-f:hover{border-color:var(--fam-filet,var(--filet-2));color:var(--txt)}
.cat-f[aria-pressed="true"]{background:var(--fam-voile,rgba(214,163,105,.12));
  border-color:var(--fam-filet,var(--filet-2));color:var(--fam,var(--accent))}
.cat-f[aria-pressed="true"] span{color:var(--fam,var(--accent));opacity:.7}

.cat-compte{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.cat-vide{padding:34px 22px;text-align:center;background:var(--fond-2);
  border:1px solid var(--filet);border-radius:var(--arrondi)}
.cat-vide strong{display:block;font-size:17px;color:var(--txt);margin-bottom:8px}
.cat-vide em{font-style:normal;font-size:14.5px;color:var(--txt-2)}

/* ── les deux offres, sous le héros ─────────────────────────────────── */

.offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.offre-h{display:flex;flex-direction:column;gap:10px;padding:26px;text-decoration:none;
  color:inherit;background:var(--fond-2);border:1px solid var(--filet);
  border-radius:var(--arrondi);transition:border-color .18s ease,background .18s ease}
.offre-h:hover{border-color:var(--filet-2);background:var(--fond-3)}
.offre-etq{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;padding:4px 10px;border-radius:3px;
  color:var(--accent);border:1px solid var(--filet-2);background:rgba(214,163,105,.08)}
.offre-etq--licence{color:var(--vert);border-color:rgba(127,176,105,.4);
  background:rgba(127,176,105,.08)}
.offre-h strong{font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.015em;
  color:var(--txt);line-height:1.2}
.offre-h em{font-style:normal;font-size:16.5px;line-height:1.55;color:var(--txt-2);
  margin-bottom:4px}
.offre-h .btn{align-self:flex-start;margin-top:auto}

/* ── aperçu du catalogue sur l'accueil ──────────────────────────────── */

.cat-apercu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cat-plus{display:flex;align-items:center;justify-content:center;gap:9px;
  border:1px dashed var(--filet-2);border-radius:var(--arrondi);padding:22px;
  font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--accent);
  text-decoration:none;transition:background .16s ease}
.cat-plus:hover{background:rgba(214,163,105,.08)}

/* ── piles ──────────────────────────────────────────────────────────── */

.pile{border-top:1px solid var(--filet)}
.pile-item{display:grid;grid-template-columns:var(--marge) minmax(0,1fr);gap:0 38px;
  padding:25px 0;border-bottom:1px solid var(--filet);align-items:start}
@media(max-width:1080px){.pile-item{grid-template-columns:minmax(0,1fr);gap:12px}}
.pile-item h4{font-size:18px;margin-bottom:7px}
.pile-item p{font-size:16px;margin:0}

/* ── parcours ───────────────────────────────────────────────────────── */

.route{display:grid;grid-template-columns:var(--marge) minmax(0,1fr) auto;gap:0 38px;
  align-items:center;text-decoration:none;color:inherit;padding:26px 0;
  border-bottom:1px solid var(--filet);
  transition:background .16s ease,padding-inline .16s ease}
.route:first-of-type{border-top:1px solid var(--filet)}
.route:hover{background:rgba(0,200,255,.05);padding-inline:14px}
@media(max-width:1080px){
  .route{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
  .route .instrument{grid-column:1/-1}
}
.route-b{display:block;min-width:0}
.route-b strong{display:block;font-size:clamp(17px,1.9vw,20px);font-weight:600;
  margin-bottom:6px;color:var(--txt)}
.route-b em{display:block;font-style:normal;color:var(--txt-2);font-size:15.5px;
  margin-bottom:11px}
.route-tag{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--filet-2);padding:4px 9px;
  border-radius:3px;
  background:rgba(0,200,255,.06)}
.route-fleche{font-size:22px;color:rgba(160,200,230,.32);flex:none;
  transition:color .16s ease,transform .16s ease}
.route:hover .route-fleche{color:var(--accent);transform:translateX(4px)}

/* ── captures ───────────────────────────────────────────────────────── */

.shot{margin:0;border:1px solid var(--filet);border-radius:var(--arrondi);
  overflow:hidden;background:var(--fond-2)}
.shot img{display:block;width:100%;height:auto}
/* l'image d'ouverture se lit en bandeau : la photo est presque carrée et
   occuperait sinon tout l'écran avant le premier mot de l'article */
.shot--banniere img{height:min(58vh,520px);object-fit:cover;object-position:center 42%}
.shot figcaption{padding:14px 18px;border-top:1px solid var(--filet);font-size:15px;
  line-height:1.55;color:var(--txt-2)}
.shot figcaption b{color:var(--txt);font-weight:600}

/* Un bandeau : la photo est rognée en hauteur pour annoncer la page sans
   repousser les seize agents hors du premier écran. */
.shot--bande{margin-bottom:26px}
.shot--bande img{height:min(24vh,200px);object-fit:cover;object-position:center 58%}

/* Une ILLUSTRATION n'est pas une capture. Les captures du site montrent le
   produit et se lisent comme une fenêtre : cadre net, fond, légende qui
   décrit l'écran. Celle-ci pose une ambiance — pas de cadre, des bords qui
   se fondent dans la page, une légende qui dit ce qu'elle est. Sans cette
   différence, un visiteur la prendrait pour un écran de TELIOS, et les
   vraies captures perdraient leur valeur. */
.shot--illus{border:0;background:none;margin:26px 0}
.shot--illus img{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.shot--illus figcaption{border-top:0;padding:10px 0 0;font-size:13.5px;color:var(--muted)}

/* ── chiffres ───────────────────────────────────────────────────────── */

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--filet)}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:24px 20px;border-bottom:1px solid var(--filet);border-right:1px solid var(--filet)}
.stat:last-child{border-right:0}
@media(max-width:720px){.stat:nth-child(2n){border-right:0}}
.stat b{display:block;font-family:var(--mono);font-size:clamp(38px,5.5vw,58px);
  letter-spacing:-.01em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ── carte article ──────────────────────────────────────────────────── */

.article-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  text-decoration:none;color:inherit;border:1px solid var(--filet);background:var(--fond-2);
  border-radius:var(--arrondi);overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease}
.article-card:hover{border-color:var(--filet-2)}
@media(max-width:820px){.article-card{grid-template-columns:minmax(0,1fr)}}
.article-card img{display:block;width:100%;height:100%;object-fit:cover;min-height:230px}
.article-body{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:12px;
  justify-content:center}
.article-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent)}
.article-body h3{font-size:clamp(20px,2.3vw,27px);margin:0}
.article-body p{font-size:16px;margin:0}
.article-more{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--accent)}

/* ── engagements ────────────────────────────────────────────────────── */

.terms{border-left:1px solid var(--accent);padding:4px 0 4px 24px}
.terms h3{margin-bottom:14px}
.terms ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.terms li{position:relative;padding-left:24px;font-size:16px;color:var(--txt-2);max-width:62ch}
.terms li::before{content:"";position:absolute;left:0;top:.68em;width:10px;height:1px;
  background:var(--accent)}

/* ── questions ──────────────────────────────────────────────────────── */

.faq{border-bottom:1px solid var(--filet);padding:23px 0;display:grid;
  grid-template-columns:var(--marge) minmax(0,1fr);gap:0 38px}
.faq:first-of-type{border-top:1px solid var(--filet)}
@media(max-width:1080px){.faq{grid-template-columns:minmax(0,1fr);gap:10px}}
.faq h4{font-size:18px;margin:0}
.faq p{margin:0;font-size:16px}

/* ── appel ──────────────────────────────────────────────────────────── */

.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}
@media(max-width:820px){.cta{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}}
.cta h2{margin-bottom:10px}
.cta p{margin:0}
.btns{display:flex;flex-wrap:wrap;gap:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-weight:600;font-size:15.5px;letter-spacing:.01em;padding:14px 26px;text-decoration:none;
  border:1px solid transparent;border-radius:var(--arrondi);
  transition:transform .14s ease,box-shadow .14s ease,
  background .14s ease,border-color .14s ease}
.btn:hover{transform:translateY(-2px)}
.btn-1{background:var(--accent);color:#14110e}
.btn-1:hover{background:var(--accent-vif)}
.btn-2{background:transparent;color:var(--txt);border-color:var(--filet-2)}
.btn-2:hover{border-color:var(--accent);color:var(--accent)}

/* ── pied ───────────────────────────────────────────────────────────── */

footer{border-top:1px solid var(--filet);padding-block:30px 44px;color:var(--muted);
  font-size:14.5px;background:var(--fond-2)}
footer .coque{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}
footer .f-mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;margin-left:auto}
@media(max-width:620px){footer .f-mono{margin-left:0}}

/* ══════════════════════════════════════════════════════════════════════
   Formulaires et confirmations
   ══════════════════════════════════════════════════════════════════════ */

main.page{display:flex;flex-direction:column;gap:28px;
  padding-bottom:clamp(42px,6vw,80px)}
main.page > .page-entete,
main.page > .success{padding-block:clamp(38px,5.5vw,70px) 0}
main.page .back{margin-top:0}
main.page .terms{margin:0}

.page-entete h1{font-size:clamp(28px,4vw,46px)}
.page-entete .lede{margin-top:18px}

.card{background:var(--panneau);border:1px solid var(--filet);border-radius:var(--arrondi);
  padding:clamp(22px,3.2vw,36px);max-width:760px;margin:0}
.card h2{font-size:22px;margin-bottom:6px}
.card p.sub{color:var(--muted);font-size:15px;margin:0 0 26px;max-width:58ch}

.field{margin-bottom:19px}
label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
label .req{color:var(--alerte)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;background:var(--fond);border:1px solid var(--filet);color:var(--txt);
  border-radius:var(--arrondi);padding:12px 14px;font-family:var(--sans);font-size:16px;
  transition:border-color .14s ease,box-shadow .14s ease}
textarea{min-height:128px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent)}
.hint{color:var(--muted);font-size:14px;margin-top:7px;max-width:58ch}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:17px}
@media(max-width:620px){.row{grid-template-columns:minmax(0,1fr)}}

/* le consentement est une phrase à lire, pas une étiquette de champ */
.consent{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--filet);
  background:var(--fond-3);padding:15px;margin:23px 0 4px;font-family:var(--sans);
  text-transform:none;letter-spacing:normal}
.consent input{margin-top:4px;width:16px;height:16px;accent-color:var(--accent);flex:none}
.consent span{font-size:15px;line-height:1.55;color:var(--txt-2);text-transform:none;
  letter-spacing:normal}

/* Le bouton d'envoi des formulaires. Vise le submit et non tous les <button>
   de la page : les pastilles du catalogue en sont des boutons elles aussi. */
button[type="submit"]{width:100%;margin-top:21px;background:var(--accent);color:#14110e;
  border:0;border-radius:var(--arrondi);
  padding:15px;font-family:var(--sans);font-size:16px;font-weight:700;cursor:pointer;
  transition:background .14s ease}
button[type="submit"]:hover{background:var(--accent-vif)}

.hp{position:absolute;left:-9999px}

.success{padding-block:clamp(42px,5.5vw,76px) 0;max-width:680px}
.check{width:50px;height:50px;margin-bottom:24px;border:1px solid var(--vert);
  display:flex;align-items:center;justify-content:center;font-size:23px;color:var(--vert);
}
.dl{display:inline-block;background:var(--accent);color:#14110e;text-decoration:none;
  border-radius:var(--arrondi);padding:15px 32px;font-weight:700;font-size:16px;
  transition:background .14s ease}
.dl:hover{background:var(--accent-vif)}
.dl[aria-disabled="true"]{background:transparent;color:var(--muted);
  border:1px solid var(--filet);box-shadow:none;cursor:default;pointer-events:none}
.steps{padding-left:0;list-style:none;counter-reset:s;display:grid;gap:14px;margin:0}
.steps li{position:relative;padding-left:38px;color:var(--txt-2);font-size:16px;
  counter-increment:s;max-width:60ch}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.2em;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--accent)}
.steps li strong{color:var(--txt)}

.back{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;margin-top:28px}
.back:hover{color:var(--accent)}

/* ── incident d'envoi ───────────────────────────────────────────────── */

.alerte{border:1px solid rgba(217,154,78,.4);border-left:2px solid var(--ambre);
  border-radius:var(--arrondi);
  background:rgba(255,179,0,.06);padding:22px 24px;margin:26px 0 0;max-width:760px}
.alerte h3{color:var(--ambre);font-size:19px;margin-bottom:10px}
.alerte p{font-size:16px;margin-bottom:.8em}
.alerte .btn{margin-top:6px}
main.page > .alerte{margin:0}

/* ── choix de l'installeur ──────────────────────────────────────────── */

.dl-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;
  align-items:center;text-decoration:none;color:inherit;
  border:1px solid var(--filet);background:var(--fond);padding:16px 18px;margin-bottom:12px;
  transition:border-color .15s ease,background .15s ease}
.dl-ligne:hover{border-color:var(--accent);background:rgba(0,200,255,.06)}
.dl-os{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--txt)}
.dl-det{grid-column:1;font-family:var(--mono);font-size:12.5px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.dl-go{grid-column:2;grid-row:1/3;font-family:var(--sans);font-weight:700;font-size:15px;
  color:var(--accent);white-space:nowrap}
.dl-ligne:hover .dl-go{text-decoration:underline;text-underline-offset:4px}
.dl-retard{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ambre);border:1px solid rgba(255,179,0,.34);background:rgba(255,179,0,.08);
  padding:2px 7px;font-weight:400}
@media(max-width:520px){
  .dl-ligne{grid-template-columns:minmax(0,1fr)}
  .dl-go{grid-column:1;grid-row:auto;margin-top:4px}
}

/* ══════════════════════════════════════════════════════════════════════
   Étude de cas
   ══════════════════════════════════════════════════════════════════════ */

.art-head{padding-block:clamp(38px,5.5vw,76px) 26px}

/* ── l'en-tete du store ────────────────────────────────

   Une banniere, puis le titre et la phrase cote a cote sur toute la largeur
   plutot qu'empiles dans une colonne etroite : le titre tient sur une ligne
   et la grille commence haut. Un magasin se juge au temps qu'il met a
   montrer ses produits. */

.store-tete{padding-block:clamp(22px,3vw,40px) 0}

.store-banniere{margin:0 0 26px;border:1px solid var(--filet);
  border-radius:var(--arrondi);overflow:hidden;background:var(--fond-2)}
.store-banniere img{display:block;width:100%;height:min(26vh,210px);
  object-fit:cover;object-position:center 58%}

.store-titre{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:30px;align-items:end;margin-bottom:20px}
.store-titre h1{margin:0;font-size:clamp(27px,3.4vw,42px);max-width:none;
  text-wrap:balance}
.store-titre .lede{margin:0;max-width:46ch}

/* Les faits que l'en-tete ne developpe plus : un bandeau, pas un paragraphe. */
.store-faits{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 26px;padding:0;
  list-style:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.store-faits li{display:flex;align-items:center;gap:9px}
.store-faits li::before{content:"";width:5px;height:5px;flex:none;
  transform:rotate(45deg);background:var(--accent-2)}

.zone--store{padding-block:0 clamp(32px,4vw,54px)}

@media (max-width:820px){
  .store-titre{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
  .store-banniere img{height:min(22vh,150px)}
}

/* ── pagination : six agents par bloc ───────────────────────

   Le catalogue grandira. Plutot qu'une grille qui s'allonge sans fin, six
   cartes par bloc et des numeros dessous : la page garde la meme hauteur
   quel que soit le nombre d'agents. */

.cat-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  margin-top:28px}
.cat-pages button{width:auto;margin:0;font-family:var(--mono);font-size:12.5px;
  min-width:38px;padding:9px 12px;cursor:pointer;
  background:transparent;border:1px solid var(--filet);color:var(--txt-2);
  border-radius:var(--arrondi);
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.cat-pages button:hover:not(:disabled){border-color:var(--filet-2);color:var(--txt)}
.cat-pages button[aria-current="page"]{background:rgba(214,163,105,.12);
  border-color:var(--filet-2);color:var(--accent)}
.cat-pages button:disabled{opacity:.34;cursor:default}
.cat-pages .cat-saut{border:0;color:var(--muted);pointer-events:none;min-width:20px;
  padding:9px 2px}
.art-head h1{font-size:clamp(30px,4.6vw,54px);max-width:19ch}
.art-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.art-meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:20px 0 0}

.art-corps{display:grid;grid-template-columns:var(--marge) minmax(0,1fr);gap:0 38px;
  align-items:start}
@media(max-width:1080px){.art-corps{grid-template-columns:minmax(0,1fr)}}
.art-corps > *{grid-column:2}
.art-corps > .instrument{grid-column:1;margin-top:54px}
@media(max-width:1080px){
  .art-corps > *{grid-column:1}
  .art-corps > .instrument{margin-top:32px}
}
.art-corps h2{margin-top:48px}
.art-corps h3{margin-top:32px;color:var(--accent)}
.art-corps > figure{margin:32px 0}
.art-corps ul{margin:0 0 1.05em;padding:0;list-style:none;display:grid;gap:12px;max-width:64ch}
.art-corps ul li{position:relative;padding-left:24px;color:var(--txt-2)}
.art-corps ul li::before{content:"";position:absolute;left:0;top:.68em;width:10px;height:1px;
  background:var(--accent)}

.lead{font-size:clamp(19px,2vw,24px);line-height:1.48;color:var(--txt);font-weight:600;
  max-width:50ch;margin-bottom:1.1em}

.pull{font-family:var(--sans);font-size:clamp(20px,2.4vw,28px);font-weight:700;
  letter-spacing:-.015em;line-height:1.28;color:var(--accent);
  border-left:1px solid var(--alerte);padding:6px 0 6px 24px;margin:36px 0;max-width:25ch}

/* ══════════════════════════════════════════════════════════════════════
   Comportements
   ══════════════════════════════════════════════════════════════════════ */

.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:50;background:var(--accent);
}

.js .reveal{opacity:0;transform:translateY(12px);
  transition:opacity .55s ease,transform .55s ease}
.js .reveal.in{opacity:1;transform:none}

/* ── assistant d'orientation ────────────────────────────────────────── */

.bot-open{position:fixed;z-index:40;right:calc(18px + var(--rail));
  bottom:18px;display:inline-flex;align-items:center;gap:0;background:var(--fond-3);
  color:var(--txt);border:1px solid var(--filet-2);border-radius:0;padding:13px;cursor:pointer;
  font-family:var(--sans);font-size:14.5px;font-weight:600;width:auto;margin-top:0;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  transition:padding .3s ease,gap .3s ease,transform .16s ease,background .16s ease}
@media(max-width:899px){.bot-open{right:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
.bot-open i{width:7px;height:7px;border-radius:50%;background:var(--vert);display:block;
  flex:none;box-shadow:0 0 10px var(--vert)}
.bot-open span{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width .34s ease,opacity .26s ease}
.bot-open.open{padding:13px 19px;gap:10px}
.bot-open.open span{max-width:270px;opacity:1}
.bot-open.pulse{animation:botPulse 2.8s ease-in-out 3}
@keyframes botPulse{
  0%,100%{box-shadow:0 0 40px -14px rgba(0,200,255,.8)}
  50%{box-shadow:0 0 54px -8px rgba(0,200,255,1)}
}
.bot-open:hover{background:rgba(0,200,255,.12);transform:translateY(-2px);animation:none}
.bot-open[hidden]{display:none}

.bot-voile{position:fixed;inset:0;z-index:44;background:rgba(3,8,15,.72);
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .22s ease}
.bot-voile.on{opacity:1;pointer-events:auto}

.bot{position:fixed;z-index:45;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);
  width:min(470px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 48px));
  display:flex;flex-direction:column;background:var(--fond-2);border:1px solid var(--filet-2);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.95);opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.bot.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}

.bot-bar{display:flex;align-items:center;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--filet);background:rgba(0,200,255,.05)}
.bot-bar .dot{width:7px;height:7px;border-radius:50%;background:var(--vert);flex:none;
}
.bot-bar b{font-family:var(--sans);font-size:14.5px;font-weight:600}
.bot-close{background:none;border:0;color:var(--muted);font-size:21px;line-height:1;
  cursor:pointer;margin-left:auto;margin-top:0;width:auto;padding:0 2px;box-shadow:none}
.bot-close:hover{color:var(--txt);background:none}

.bot-log{flex:1;overflow-y:auto;padding:17px 15px 8px;display:flex;flex-direction:column;gap:11px}
.bot-msg{max-width:88%;font-size:15.5px;line-height:1.55;padding:11px 13px}
.bot-msg.a{align-self:flex-start;background:var(--fond-3);border:1px solid var(--filet);
  color:var(--txt-2)}
.bot-msg.u{align-self:flex-end;background:rgba(0,200,255,.14);border:1px solid var(--filet-2);
  color:var(--txt)}

.bot-opts{display:flex;flex-direction:column;gap:8px;padding:8px 15px 15px}
.bot-opt{text-align:left;width:100%;margin-top:0;background:var(--fond-3);
  border:1px solid var(--filet);color:var(--txt-2);padding:11px 13px;font-family:var(--sans);
  font-size:15.5px;font-weight:400;cursor:pointer;box-shadow:none;
  transition:border-color .14s ease,background .14s ease,color .14s ease}
.bot-opt:hover{border-color:var(--accent);background:rgba(0,200,255,.08);color:var(--txt)}
.bot-cta{display:block;text-align:center;text-decoration:none;background:var(--accent);
  color:#14110e;padding:13px;font-weight:700;font-size:15.5px}
.bot-cta:hover{background:var(--accent-vif)}
.bot-restart{width:100%;margin-top:0;background:none;border:0;color:var(--muted);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  cursor:pointer;padding:8px;box-shadow:none}
.bot-restart:hover{color:var(--accent);background:none}
.bot-foot{padding:12px 15px;border-top:1px solid var(--filet);background:rgba(0,200,255,.04);
  font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .bot-open{padding:13px 19px;gap:10px}
  .bot-open span{max-width:270px;opacity:1}
}

/* ══════════════════════════════════════════════════════════════════════
   Niveaux du catalogue : gratuit, premium.

   Deux barres de filtres se suivent — le niveau d'abord, parce que c'est
   la question qu'un visiteur se pose avant le secteur : qu'est-ce que je
   peux essayer tout de suite, qu'est-ce qui se paie. Les deux filtres se
   cumulent.

   La pastille reprend exactement la grammaire de .cat-secteur : même
   fonte, même casse, même corps. Elle s'en distingue par un cadre, pas
   par une couleur criarde — une carte porte déjà sa couleur de famille.
   ══════════════════════════════════════════════════════════════════════ */
.cat-filtres--niveau{margin-bottom:10px}

.cat-n{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 13px;border-radius:var(--arrondi);
  background:transparent;border:1px solid var(--filet);color:var(--txt-2);
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.cat-n:hover{border-color:var(--filet-2);color:var(--txt)}
.cat-n span{font-size:10px;opacity:.6}

/* Même défaut que la pastille des cartes : à 12 %% de fond, on ne voyait pas
   quel filtre était actif. Le fond est doublé et la bordure portée au plein. */
.cat-n--gratuit[aria-pressed="true"]{background:rgba(127,176,105,.22);
  border-color:var(--vert);color:var(--vert);font-weight:600}
.cat-n--premium[aria-pressed="true"]{background:rgba(214,163,105,.22);
  border-color:var(--accent);color:var(--accent-vif);font-weight:600}
.cat-n[data-niveau="*"][aria-pressed="true"]{background:rgba(214,163,105,.12);
  border-color:var(--filet-2);color:var(--accent)}

/* La pastille de niveau portait un simple contour en currentColor à
   opacity:.75, sans fond : un ambre affadi sur #1b1713 ne se voyait pas.
   « Premium » est désormais une pastille pleine, texte sombre sur ambre —
   c'est ce qui se vend, ça doit se lire d'un coup d'œil. « Gratuit » garde
   un fond discret : la hiérarchie entre les deux est voulue. */
.cat-niveau{margin-left:auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid transparent;
  white-space:nowrap}
.cat-niveau--gratuit{color:var(--vert);background:rgba(127,176,105,.14);
  border-color:rgba(127,176,105,.45)}
.cat-niveau--premium{color:#14110e;background:var(--accent);
  border-color:var(--accent);font-weight:700;
  box-shadow:0 1px 10px -3px rgba(214,163,105,.55)}
/* Au survol la carte éclaircit son fond : la pastille suit, pour ne pas
   paraître s'éteindre quand tout le reste s'allume. */
.cat-item:hover .cat-niveau--premium{background:var(--accent-vif);border-color:var(--accent-vif)}

/* ══════════════════════════════════════════════════════════════════════
   Schémas des pages « batterie ».

   Vectoriels, générés depuis la même source que le texte qu'ils illustrent,
   donc incapables de le contredire. Ils portent une DÉCISION et jamais un
   chiffre : un graphique donne à une statistique inventée l'autorité d'un
   fait, et aucune de ces proportions n'a été mesurée.

   Pas d'ombre portée ni de halo : voir le LISEZMOI, « ne pas les
   réintroduire pour faire tech ».
   ══════════════════════════════════════════════════════════════════════ */
.schema{display:block;width:100%;max-width:680px;margin:2px auto;height:auto}
.schema text{font-family:var(--mono)}
@media(max-width:620px){
  /* ⚠ Sous cette largeur le texte d'un vectoriel mis à l'échelle devient
     illisible. On le laisse s'étirer plutôt que de le rétrécir encore. */
  .schema{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Le prix sur la carte.

   À droite de la pastille de niveau, dans la même grammaire : fonte à
   chasse fixe, petit corps, majuscules. Il se lit d'un coup d'œil quand on
   balaie la grille, sans voler la vedette au nom de l'agent.

   Un agent gratuit affiche « 0 € » plutôt que rien : un catalogue montre
   ses prix, y compris quand ils sont nuls, et un vide se lit comme un
   oubli.
   ══════════════════════════════════════════════════════════════════════ */
.cat-prix{margin-left:auto;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.04em;color:var(--txt);white-space:nowrap}
.cat-item[data-niveau="gratuit"] .cat-prix{color:var(--vert)}

/* ◈ Les entrées de menu encore en brouillon.
   ⚠ MASQUÉES PAR DÉFAUT, et révélées seulement en local par site.js. Le sens
     compte : si le script ne tourne pas, ou si quelqu'un coupe JavaScript,
     l'entrée reste cachée. L'inverse publierait ce qu'on voulait taire au
     premier script en échec. Voir outils_brouillon.py. */
[data-brouillon] { display: none !important; }
body.telios-local [data-brouillon] { display: flex !important; }