/* ─────────────────────────────────────────────────────────────
   Mockup : la landing n'illustre pas l'app, elle L'EST.
   Terminaux qui se déroulent, rail d'outils à droite qui agit,
   phrases vocales qui se disent à voix haute et exécutent,
   et les THÈMES de l'app — mêmes palettes, mêmes fonds d'écran.
   Autonome : aucune dépendance, tout est ici.
   ───────────────────────────────────────────────────────────── */
:root{
  /* Défaut = « Encre », le thème par défaut de l'app. Le JS repose les mêmes
     variables quand on change de thème : une seule source de couleur. */
  --bg:#0B0B0F; --surface:#15151B; --surface-2:#1C1C24;
  --ink:#FFFFFF; --muted:rgba(255,255,255,.68); --line:rgba(255,255,255,.20);
  --accent:#3FA7B5; --accent-hi:#6FC4CF; --accent-deep:#1B515B;
  --sur-accent:#fff; --sur-vert:#06210f; --sur-ambre:#2a1e05;
  --amber:#E0AF68; --green:#6BD08A; --blue:#5C9EFF; --corail:#F7768E;
  --term-bg:#0F0F0F; --term-ink:#EBEBEB;
  --voile:rgba(11,11,15,.72); --panneau:rgba(21,21,27,.86);
  --fond:none;
  --mono: ui-monospace,SFMono-Regular,Menlo,monospace;
  --rail: 13rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── LE PREMIER ÉCRAN : un titre, puis l'app ──────────────────
   Le décor (et le fond d'écran du thème) est porté par l'écran entier :
   le titre et l'app baignent dans la même lumière. */
.ecran{
  /* HAUTEUR BORNÉE, pas seulement minimale : sans ça, le rail (quinze boutons)
     impose sa hauteur intrinsèque et l'app déborde sous le pli. */
  /* PLUS LONG QUE L'ÉCRAN, ET C'EST VOULU (16/08). Bornée à 100svh, l'app
     tenait dans la fenêtre — mais elle y tenait SERRÉE : quatre terminaux se
     partageaient 60 % d'un écran, quand l'app, elle, en occupe la totalité
     sur un vrai Mac. On lui donne donc plus que l'écran : le premier coup
     d'œil montre le titre et le haut du canvas, un cran de molette montre le
     reste. Le curseur est ici, en une variable — c'est le seul chiffre à
     bouger pour en donner plus ou moins. */
  position:relative;height:var(--ecran-h,118svh);min-height:40rem;
  /* DEUX RANGÉES, PAS TROIS (16/08) : l'entête, puis l'app — qui prend TOUT
     le reste de l'écran. Le titre, lui, est sorti du flux : il se pose sur la
     bande de fond d'écran que le canvas lui réserve en haut (cf. `.body`).
     Avant, il occupait sa propre rangée et mangeait 200 px de canvas ; l'app
     s'arrêtait donc bien avant le bas de l'écran, et il restait une bande
     morte entre elle et la section suivante. */
  display:grid;grid-template-rows:auto minmax(0,1fr);
  /* La colonne DOIT être bornée. Sans ça, la grille prend la largeur
     mini-max du contenu (les lignes de terminal, le rail) : sur un
     téléphone, l'écran entier était posé sur 517 px et coupé net à 390. */
  grid-template-columns:minmax(0,1fr);
  background:
    radial-gradient(color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1.5px) 0 0/24px 24px,
    radial-gradient(60rem 38rem at 62% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 62%),
    var(--bg);
  overflow:hidden;transition:background .5s ease;
}
/* Avec un vrai fond d'écran : la photo, un voile de lisibilité par-dessus,
   et la trame de points s'efface — deux textures se battraient. */
.ecran.a-fond{
  background:
    linear-gradient(var(--voile),var(--voile)),
    var(--fond) center/cover no-repeat,
    var(--bg);
}
.ecran.nuit{filter:saturate(.55) brightness(.72)}
.ecran.nuit .canvas{opacity:.75}

.hero{
  /* HORS DU FLUX : il flotte sur la bande que `.body` lui réserve, et ne
     retire donc plus un pixel au canvas. `pointer-events:none` parce qu'un
     titre qui couvre le canvas AVALERAIT les clics des fenêtres du dessous —
     le texte, lui, reste sélectionnable. */
  /* `top` N'EST PAS ZÉRO : l'entête (marque, thème, langue, téléchargement)
     occupe les 44 premiers pixels, et un titre posé dessus lui passerait
     dessus — vécu au premier essai, « Neuf agents » collé au logo. */
  position:absolute;top:2.9rem;left:0;right:0;z-index:4;pointer-events:none;
  text-align:center;
  padding:clamp(.2rem,1.2vh,.8rem) clamp(1.25rem,4vw,2.5rem) 0;
}
.hero h1,.hero p{pointer-events:auto}
/* Le cadre à la craie : notre système d'illustration, tracé autour du titre
   comme on entoure un mot au tableau. Il se dessine au chargement. */
.titre-encadre{
  position:relative;display:inline-block;
  padding:clamp(.4rem,1.2vh,.8rem) clamp(1.2rem,4vw,2.6rem);
}
.cadre{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
}
.cadre path{
  fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;
  /* Le trait de gauche manquait : le tiret courait sur une longueur en dur
     (1800) plus courte que le cadre rendu, et `non-scaling-stroke` mesurait
     le tracé dans un espace, les tirets dans l'autre. `pathLength="100"` sur
     le chemin met tout le monde d'accord en centièmes — et sans l'effet, la
     boîte étirée épaissit un peu les montants, ce qui va bien à la craie. */
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:trace 1.5s cubic-bezier(.4,0,.2,1) .25s forwards;
}
.cadre path.repasse{stroke-width:1.2;opacity:.4;animation-delay:.6s;animation-duration:1.4s}
@keyframes trace{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.cadre path{stroke-dashoffset:0;animation:none}}
@media (max-width:700px){.cadre{display:none}}
.hero h1{
  font-size:clamp(1.6rem,3.7vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  text-wrap:balance;margin-bottom:.35rem;
}
.hero h1 em{font-style:italic;color:var(--accent);padding-right:.05em}
.hero p{color:var(--muted);font-size:clamp(.9rem,1.2vw,1rem);max-width:40rem;margin-inline:auto;text-wrap:pretty}
.hero p b{color:var(--ink);font-weight:600}
@media (max-height:820px){
  .hero h1{font-size:clamp(1.5rem,2.9vw,2.2rem)}
  .hero p{font-size:.88rem}
}
@media (max-height:700px){.hero p{display:none}.hero{padding-block:.7rem .45rem}}

.app{
  /* DEUX blocs seulement depuis que la barre du haut est partie : le corps
     (canvas + rail) qui prend le mou, et la barre du bas à sa taille. */
  /* `height:100%` A DISPARU D'ICI, et ça ne se voit qu'une fois la marge
     ci-dessous posée : cent pour cent de la case PLUS des marges, c'est la
     barre des phrases sous le pli, coupée net. Une grille étire ses enfants
     d'elle-même (`align-self:stretch`), et cet étirement-là, LUI, retranche
     les marges. On laisse donc la grille faire, et la hauteur tombe juste. */
  position:relative;min-height:0;
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;

  /* L'APP EST POSÉE SUR LE BUREAU, elle n'EST pas le bureau (16/08).
     Elle touchait les quatre bords : le fond d'écran ne se voyait plus que
     par les interstices entre les fenêtres, et l'interface commençait à
     quatorze pixels sous le titre. Résultat, sur un grand écran, on lisait
     « beaucoup d'interface » là où l'app, elle, respire — chez elle, les
     fenêtres FLOTTENT sur le fond d'écran du thème.
     On l'encadre donc, avec du fond tout autour : c'est la même image que le
     Mac de l'utilisateur, et le titre a enfin de l'air sous lui. */
  margin:clamp(.8rem,2.6vh,2rem) clamp(1rem,4vw,3rem) clamp(.7rem,2vh,1.2rem);
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.05) inset;
}

/* LE HAUT : plus de barre d'app. Le titre, et le canvas juste dessous —
   la scène et le quota sont descendus dans la barre du bas, là où ils vivent
   dans l'app. Reste ici ce qui se choisit une fois pour la page : la marque,
   le thème, la langue, le téléchargement. */
.entete{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem clamp(.9rem,3vw,1.6rem) 0;
  position:relative;z-index:6;
}
.entete .droite{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:-.02em}
/* Le vrai faucon, pas une pastille dessinée : c'est la marque, elle doit être
   la même que l'app et le site. */
.brand .logo{
  width:28px;height:28px;border-radius:8px;flex:none;display:block;
  box-shadow:0 0 18px color-mix(in oklab, var(--accent) 32%, transparent);
}
.mininav .brand .logo{width:26px;height:26px}
.fin .logo-fin{width:88px;height:88px;border-radius:20px;margin:0 auto 1.4rem;display:block;
  box-shadow:0 0 40px color-mix(in oklab, var(--accent) 35%, transparent)}
.scene{
  display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.22rem .7rem;
}
.scene b{color:var(--ink);font-weight:600}

/* le sélecteur de thème */
.theme-zone{position:relative}
.theme-btn{
  display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.22rem .7rem .22rem .35rem;
  transition:.18s ease;
}
.theme-btn:hover,.theme-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--accent-hi)}
.theme-btn b{color:var(--ink);font-weight:600}
.pastilles{display:flex;gap:2px}
.pastilles i{width:9px;height:9px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.theme-pop{
  position:absolute;left:0;bottom:calc(100% + .5rem);z-index:20;width:19rem;
  background:var(--panneau);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:13px;padding:.35rem;
  box-shadow:0 22px 50px rgba(0,0,0,.5);display:grid;gap:.1rem;
}
.theme-pop[hidden]{display:none}
/* Dans l'entête, le sélecteur est en haut À DROITE : le panneau tombe vers le
   bas et s'aligne sur le bord droit, sinon il sort de l'écran. */
.entete .theme-pop{top:calc(100% + .5rem);bottom:auto;left:auto;right:0}
.theme-pop .titre{font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:.4rem .55rem .3rem}
.theme-choix{display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border-radius:9px;text-align:left;width:100%;transition:background .15s}
.theme-choix:hover{background:color-mix(in oklab, var(--accent) 16%, transparent)}
.theme-choix.on{background:color-mix(in oklab, var(--accent) 24%, transparent)}
.theme-choix .apercu{
  width:2.6rem;height:1.8rem;border-radius:6px;flex:none;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);display:grid;grid-template-rows:1fr auto;
}
.theme-choix .apercu .ciel{width:100%}
.theme-choix .apercu .sol{height:6px;display:flex}
.theme-choix .apercu .sol i{flex:1}
.theme-choix .txt{min-width:0}
.theme-choix b{display:block;font-size:.85rem;font-weight:700}
.theme-choix span{display:block;font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-choix .jour{margin-left:auto;font-size:.62rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.05rem .4rem;flex:none}

.langue{
  font-size:.78rem;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;transition:.18s ease;
}
.langue:hover{color:var(--ink);border-color:var(--accent-hi)}
.quota{margin-left:auto;display:flex;align-items:center;gap:.55rem;font-size:.76rem;color:var(--muted)}
.gauge{width:78px;height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.gauge i{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));transition:width .8s ease}
.dl{
  background:var(--accent);color:var(--sur-accent);font-weight:700;font-size:.85rem;
  padding:.45rem 1rem;border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:background .18s, transform .18s;
}
.dl:hover{background:var(--accent-hi);transform:translateY(-1px)}
@media (max-width:1100px){.quota .gauge,.quota span{display:none}}
@media (max-width:960px){.scene{display:none}}
@media (max-width:820px){.theme-choix .jour{display:none}}

/* corps : canvas + rail */
/* LA BANDE DU TITRE. Elle est réservée ICI, sur le corps, et pas sur le seul
   canvas : le rail commencerait sinon à hauteur du titre, et « AGENTS OUVERTS »
   se retrouverait à côté de « Neuf agents sur un canvas ». */
.body{
  display:grid;grid-template-columns:minmax(0,1fr) var(--rail);min-height:0;
  /* Repli tant que le JS n'a pas mesuré (cf. page-app.js) — et seule
     valeur si le JS ne tourne pas. */
  padding-top:var(--bande-titre, clamp(6.5rem,17vh,10.5rem));
}
.canvas{
  position:relative;padding:.85rem;min-height:0;overflow:hidden;
  display:grid;gap:.75rem;align-content:stretch;transition:opacity .5s ease;
}
.canvas[data-layout="grille"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.canvas[data-layout="colonnes"]{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;grid-template-rows:minmax(0,1fr)}
.canvas[data-layout="vedette"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1.65fr) minmax(0,1fr)}
.canvas[data-layout="vedette"] .win{grid-column:span 1}
.canvas[data-layout="vedette"] .win.star{grid-column:1 / -1;grid-row:1}
@media (max-width:900px){
  .body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .canvas,.canvas[data-layout]{grid-template-columns:1fr;grid-auto-flow:row;grid-auto-rows:auto;grid-template-rows:none;overflow-y:auto}
  .win{min-height:13rem}
}

/* L'invitation à tourner l'écran : masquée partout, rallumée tout en bas
   de cette feuille pour les téléphones en portrait. */
.tourner{
  display:none;align-items:center;justify-content:center;gap:.45rem;
  margin:.55rem auto 0;width:max-content;max-width:100%;
  padding:.3rem .75rem;border:1px solid var(--line);border-radius:999px;
  font-size:.78rem;color:var(--muted);background:var(--panneau);
}
.tourner b{color:var(--ink);font-weight:600}

/* ── une fenêtre d'agent ──────────────────────────────────── */
/* L'apparition ne joue QUE pour une fenêtre qui vient de naître. Avant, tout
   le canvas était reconstruit à chaque ouverture : les trois autres rejouaient
   leur animation et le rendu « sautait ». */
.win{perspective:1400px;min-height:0}
.win.neuve{animation:pop .42s cubic-bezier(.22,1,.36,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.win.part{animation:part .3s ease forwards}
@keyframes part{to{opacity:0;transform:scale(.95)}}
.flip{
  position:relative;height:100%;min-height:0;transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.5,.05,.2,1);
}
.win.verso .flip{transform:rotateY(180deg)}
.face,.back{
  position:absolute;inset:0;backface-visibility:hidden;
  border:1px solid var(--line);border-radius:11px;overflow:hidden;
  background:var(--term-bg);display:flex;flex-direction:column;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.back{transform:rotateY(180deg);background:var(--surface);padding:1rem;gap:.35rem}
.win.actif .face,.win.actif .back{border-color:var(--accent-hi);box-shadow:0 0 0 1px var(--accent-hi),0 0 30px color-mix(in oklab, var(--accent) 28%, transparent)}
.wtop{
  display:flex;align-items:center;gap:.5rem;flex:none;
  padding:.42rem .6rem;font-size:.78rem;font-weight:700;color:var(--ink);
  background:var(--surface);border-bottom:1px solid var(--line);
}
.wtop .cli{font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--muted)}
.wtop .etat{margin-left:auto;font-size:.68rem;font-weight:600;color:var(--muted)}
.wtop .x{color:var(--muted);font-size:.95rem;line-height:1;padding:0 .15rem;opacity:.6}
.wtop .x:hover{opacity:1;color:var(--corail)}
.pip{width:8px;height:8px;border-radius:50%;flex:none}
.pip.work{background:var(--blue);animation:breathe 1.8s ease-in-out infinite}
.pip.need{background:var(--amber);animation:clign 1.1s steps(1,end) infinite}
.pip.done{background:var(--green)}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes clign{0%,60%{opacity:1}61%,100%{opacity:.25}}
.term{
  flex:1;min-height:0;overflow:hidden;padding:.5rem .6rem;
  font-family:var(--mono);font-size:.71rem;line-height:1.8;
  color:color-mix(in oklab, var(--term-ink) 72%, transparent);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.term .l{white-space:pre-wrap;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.term .u{color:var(--term-ink)}
.term .g{color:var(--green)}
.term .a{color:var(--amber)}
.term .b{color:var(--blue)}
.term .v{color:var(--accent-hi)}
.term .r{color:var(--corail)}
.back .who{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted)}
.back .who b{color:var(--ink);font-size:.95rem}
.back h4{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:.2rem;color:var(--ink)}
.back p{font-size:.85rem;color:var(--muted)}
.back .local{margin-top:auto;font-size:.68rem;color:var(--muted);font-family:var(--mono);opacity:.8}

/* ── LA CARTE DE TÂCHES ───────────────────────────────────────
   Une liste dictée en une phrase, posée sur le canvas parmi les agents.
   Ce n'est pas un terminal : elle prend le fond des cartes, pas celui du
   terminal, pour qu'on ne les confonde pas. */
.win.carte .face{background:var(--surface)}
.taches{flex:1;min-height:0;overflow:auto;padding:.55rem .7rem;display:flex;flex-direction:column;gap:.32rem}
.tache{display:flex;gap:.55rem;align-items:flex-start;font-size:.82rem;color:var(--muted);line-height:1.35}
.tache .case{
  width:15px;height:15px;border-radius:4px;flex:none;margin-top:.12rem;
  border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:.62rem;font-weight:800;color:transparent;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.tache.fait .case{background:var(--green);border-color:var(--green);color:var(--sur-vert)}
.tache.fait .quoi{text-decoration:line-through;opacity:.5}
.tache .qui{color:var(--accent-hi);font-weight:600}
/* Une ligne se CLIQUE : elle part chez son agent. Elle doit donc s'attraper
   comme un bouton, pas se lire comme une puce. */
.tache{width:100%;text-align:left;border-radius:7px;padding:.1rem .3rem;transition:background .15s}
.tache:hover:not(.fait){background:color-mix(in oklab, var(--accent) 15%, transparent)}
.tache.fait{cursor:default}
.tache.encours{background:color-mix(in oklab, var(--blue) 16%, transparent)}
.tache.encours .case{border-color:var(--blue);animation:breathe 1.6s ease-in-out infinite}
.tache.coche{animation:cochee .55s cubic-bezier(.22,1,.36,1)}
@keyframes cochee{0%{transform:translateX(0)}30%{transform:translateX(3px)}100%{transform:translateX(0)}}
.win .wtop .compte{font-size:.68rem;font-weight:700;color:var(--muted);font-family:var(--mono)}

/* ── le rail de droite : il AGIT ──────────────────────────── */
.rail{
  min-height:0;
  border-left:1px solid var(--line);
  background:var(--panneau);backdrop-filter:blur(14px);
  padding:.45rem;display:flex;flex-direction:column;gap:.22rem;
  /* visible, sinon les panneaux de menu sont coupés au bord du rail */
  overflow:visible;
}
/* Ce sont les AGENTS qui défilent (leur nombre est imprévisible), jamais les
   outils : un bouton qu'on ne voit pas est un bouton qui n'existe pas. */
.rail > *{flex:none}
.voliere{flex:1 1 auto;min-height:2.6rem;overflow:auto}
.rail h5{
  font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:.05rem .2rem;
  display:flex;align-items:center;gap:.3rem;
}
/* LE BOUTON DE REPLI. Il vit DANS l'en-tête du rail, et c'est le seul élément
   du rail qui survive au repli : sans lui, on replierait un panneau qu'on ne
   pourrait plus rouvrir. */
.pli{
  margin-left:auto;flex:none;width:18px;height:18px;border-radius:5px;
  border:1px solid var(--line);color:var(--muted);
  display:grid;place-items:center;font-size:.7rem;line-height:1;
  transition:transform .2s ease,color .2s ease,border-color .2s ease;
}
.pli:hover{color:var(--ink);border-color:var(--accent-hi)}
/* REPLIÉ : la colonne se réduit à la largeur du bouton — pas à zéro. Un
   panneau qui disparaît complètement laisse l'utilisateur devant un canvas
   qui a changé de taille sans qu'on sache pourquoi ; une poignée dit
   « il est là, il est rangé ». */
.app.rail-plie{--rail:1.9rem}
.app.rail-plie .rail{padding:.45rem .2rem;overflow:hidden}
.app.rail-plie .rail > *:not(h5){display:none}
.app.rail-plie .rail h5{padding:0}
.app.rail-plie .rail .lbl{display:none}
.app.rail-plie .pli{transform:rotate(180deg)}
.voliere{display:flex;flex-direction:column;gap:.1rem;padding-right:.1rem}
.ligne{
  display:flex;align-items:center;gap:.45rem;padding:.2rem .35rem;border-radius:7px;
  text-align:left;width:100%;min-width:0;transition:background .18s;
}
.ligne:hover{background:color-mix(in oklab, var(--accent) 12%, transparent)}
.ligne.on{background:color-mix(in oklab, var(--accent) 20%, transparent)}
.ligne .qui{min-width:0;flex:1}
.ligne b{display:block;font-size:.75rem;font-weight:700;line-height:1.25}
.ligne span{display:block;font-size:.62rem;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── LES OUTILS EN MENUS ──────────────────────────────────────
   Douze boutons alignés, c'est un tableau de bord d'avion : ça prend
   l'écran que le canvas devrait avoir. Chaque famille se replie donc
   derrière une ligne qui DIT combien elle en contient, et s'ouvre au
   clic. Les fenêtres restent la chose la plus grande à l'écran. */
.menus{display:grid;gap:.22rem}
.menu{position:relative;border:1px solid var(--line);border-radius:8px;transition:border-color .18s}
.menu[open]{border-color:var(--accent-hi);background:color-mix(in oklab, var(--accent) 8%, transparent)}
.menu summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;
  padding:.3rem .5rem;font-size:.7rem;font-weight:700;color:var(--muted);
  transition:color .18s;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{color:var(--ink)}
.menu summary::after{content:"⌄";margin-left:.1rem;font-size:.75rem;line-height:1;transform:translateY(-2px);transition:transform .2s}
.menu[open] summary::after{transform:rotate(180deg) translateY(-3px)}
/* Le compte (ou l'état courant) est le seul indice qu'il y a du monde
   derrière la ligne : il passe donc AVANT le chevron, pas après. */
.menu summary .n{
  margin-left:auto;font-size:.58rem;font-weight:700;font-family:var(--mono);
  color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:0 .35rem;
}
.menu[open] summary .n,.menu[open] summary{color:var(--ink)}
/* Le panneau SORT du rail, vers la gauche : s'il poussait les lignes, la
   liste des agents se ferait écraser à chaque ouverture — on rendrait d'une
   main la place qu'on vient de gagner de l'autre. */
.choix{
  /* Ancré par le BAS : les menus vivent au pied du rail, un panneau qui
     descend se ferait couper par le bord de l'app. */
  position:absolute;right:calc(100% + .4rem);bottom:-.25rem;z-index:30;width:13.5rem;
  display:grid;gap:1px;padding:.25rem;
  background:var(--panneau);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  animation:pop .18s ease;
}
.opt{
  text-align:left;border-radius:6px;padding:.25rem .4rem;
  font-size:.72rem;font-weight:600;color:var(--muted);transition:.15s ease;
}
.opt:hover{background:color-mix(in oklab, var(--accent) 16%, transparent);color:var(--ink)}
.opt.on{background:color-mix(in oklab, var(--accent) 22%, transparent);color:var(--ink)}
.opt em,.opt .k{display:block;font-style:normal;font-size:.6rem;font-weight:500;opacity:.7;line-height:1.25}

.badge{
  display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;
  border-radius:99px;background:var(--amber);color:var(--sur-ambre);
  font-size:.65rem;font-weight:800;margin-left:.3rem;
}

/* file d'approbations */
/* La demande de validation vit DANS la barre, elle aussi. Posée sur le canvas,
   elle finissait toujours par recouvrir une fenêtre ; ici elle est sous la main,
   à côté de la commande, sans rien cacher. */
.appro{
  display:none;align-items:center;gap:.5rem;min-width:0;
  padding:.3rem .5rem;border-radius:9px;
  border:1px solid var(--amber);
  background:color-mix(in oklab, var(--amber) 12%, transparent);
  font-size:.78rem;
}
.appro.vu{display:flex;animation:monte .3s ease}
.appro h6{font-size:.75rem;font-weight:800;color:var(--amber);flex:none}
.appro .badge{margin-left:.25rem}
.appro ul{list-style:none;display:flex;gap:.7rem;min-width:0;overflow:hidden;color:var(--muted);font-family:var(--mono);font-size:.72rem}
.appro li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appro li b{color:var(--ink);font-weight:600}
.appro .actions{margin-left:auto;display:flex;gap:.35rem;flex:none}
.appro .actions button{border-radius:7px;padding:.22rem .7rem;font-size:.74rem;font-weight:700}
.appro .oui{background:var(--green);color:var(--sur-vert)}
.appro .non{border:1px solid var(--line);color:var(--muted)}
@media (max-width:860px){.appro ul{display:none}}

/* ── barre vocale ─────────────────────────────────────────── */
.bar{
  border-top:1px solid var(--line);
  background:var(--panneau);backdrop-filter:blur(14px);
  padding:.5rem .8rem .6rem;display:grid;gap:.45rem;z-index:5;
}
/* Scène, thème et quota vivent À DROITE DE LA COMMANDE, comme dans l'app.
   Une ligne d'état pleine largeur ressemblait à une barre de menus. */
.reglages{display:flex;align-items:center;gap:.4rem;flex:none;min-width:0}
.dire .scene,.dire .quota{font-size:.72rem}
.dire .scene{padding:.15rem .55rem}
.dire .gauge{width:54px;height:4px}
@media (max-width:1180px){.dire .quota{display:none}}
@media (max-width:980px){.dire .scene{display:none}}
.dire{display:flex;align-items:center;gap:.7rem;min-width:0}
.mic{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);
}
.mic svg{width:16px;height:16px;fill:var(--sur-accent)}
.mic.parle{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dit{
  /* LE PARTAGE DE LA LIGNE, ET LE PIÈGE (16/08). `flex:1` des deux côtés —
     la phrase ET le rail de pastilles — et c'est la phrase qui a disparu :
     deux enfants qui réclament le même reste, celui qui peut se réduire à
     zéro (`min-width:0` + ellipse) se réduit à zéro. La phrase demande donc
     sa part D'ABORD (`flex:0 1 auto`, plafonnée), et les pastilles prennent
     ce qui reste. */
  flex:0 1 auto;min-width:0;max-width:min(40%,27rem);
  font-size:.95rem;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dit .ph{color:var(--muted);font-weight:400}
.kbd{font-family:var(--mono);font-size:.68rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:.1rem .4rem;flex:none}
/* LES PHRASES SONT MONTÉES SUR LA LIGNE DU MICRO (16/08) — une ligne de
   gagnée, et c'est une ligne prise au canvas. Elles gardent leur défilement
   horizontal : elles sont plus nombreuses que la place, et c'est très bien,
   un rail de suggestions se feuillette.
   `min-width:0` N'EST PAS DÉCORATIF : sans lui, un enfant de flex refuse de
   passer sous la largeur de son contenu — les pastilles pousseraient la
   scène, le quota et le ⌘K hors de l'écran au lieu de défiler. */
.phrases{
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:thin;
  flex:1 1 0;min-width:6rem;padding:.1rem 0;
  /* LE FONDU DE BORD : sans lui, une pastille coupée net au ras de la scène
     et du quota donne l'impression que les deux se chevauchent. Le dégradé
     dit « ça continue par là », qui est la vérité. */
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 2.2rem),transparent 100%);
          mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 2.2rem),transparent 100%);
}
/* SOUS 1200 px, ELLES REDESCENDENT. La phrase d'invitation vaut mieux qu'un
   « Cliquez une phra… » : quand les deux ne tiennent plus, c'est le rail de
   pastilles qui passe à la ligne, pas le sens qui se coupe. */
@media (max-width:1200px){
  .dire{flex-wrap:wrap}
  .phrases{order:9;flex-basis:100%}
}
.phrase{
  flex:none;border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;
  font-size:.78rem;color:var(--muted);white-space:nowrap;transition:.18s ease;
}
.phrase:hover{color:var(--ink);border-color:var(--accent-hi);background:color-mix(in oklab, var(--accent) 14%, transparent)}
.phrase.en-cours{color:var(--ink);border-color:var(--accent-hi);background:color-mix(in oklab, var(--accent) 25%, transparent)}
.phrase::before{content:"« ";opacity:.5}
.phrase::after{content:" »";opacity:.5}
/* Les guillemets suivent la LANGUE de la page, pas le fichier de style. */
html[lang="en"] .phrase::before{content:"“"}
html[lang="en"] .phrase::after{content:"”"}
html[lang="en"] .pas q{quotes:"“" "”"}
html[lang="en"] .sect q{quotes:"“" "”"}

/* LE COMPTE RENDU EST DANS LA BARRE, pas sur le canvas. Une capsule flottante
   pour trois mots recouvre le travail ; la barre, elle, est déjà l'endroit où
   l'on parle et où l'on est répondu. */
.retour{
  display:none;flex-direction:column;gap:.15rem;
  padding:.1rem .1rem .1rem 2.7rem;
  font-size:.84rem;color:var(--muted);min-width:0;
}
.retour.vu{display:flex}
.retour .msg{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:monte .28s cubic-bezier(.22,1,.36,1);
}
.retour .msg b{color:var(--accent-hi);font-weight:700}
.retour .msg.part{opacity:0;transition:opacity .4s ease}
@keyframes monte{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* La lune RAMÈNE au poste : c'est un bouton, il doit se voir et s'attraper.
   Une cible étroite au fond de l'écran, c'est un piège — on la remonte, on
   l'agrandit, et on lui donne la couleur d'accent du thème. */
.lune{
  position:absolute;left:50%;transform:translateX(-50%);bottom:8.5rem;z-index:11;
  display:none;align-items:center;gap:.55rem;font-size:.92rem;font-weight:700;
  color:var(--sur-accent);background:var(--accent);
  border:none;border-radius:999px;padding:.7rem 1.4rem;
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent);
  animation:respire 3s ease-in-out infinite;
}
.lune.vu{display:flex}
.lune:hover{filter:brightness(1.08)}
@keyframes respire{0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 6px color-mix(in oklab, var(--accent) 20%, transparent)}
                   50%{box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 14px color-mix(in oklab, var(--accent) 0%, transparent)}}

/* ── ce qu'il y a sous l'app ──────────────────────────────── */
.pitch{max-width:60rem;margin-inline:auto;padding:clamp(3rem,8vh,5rem) 1.5rem}
.pitch h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.7rem;text-wrap:balance}
.pitch .lede{color:var(--muted);max-width:40rem;margin-bottom:2rem}
.pitch .lede b{color:var(--ink)}
.trois{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.trois div{border:1px solid var(--line);border-radius:11px;padding:1rem;background:var(--surface)}
.trois h3{font-size:1rem;margin-bottom:.3rem}
.trois p{font-size:.88rem;color:var(--muted)}
.note{margin-top:2rem;font-size:.82rem;color:var(--muted);border-left:2px solid var(--accent);padding-left:.9rem}

/* ── LA PAGE, SOUS L'APP ──────────────────────────────────── */
.mininav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:1rem;padding:.55rem clamp(1rem,4vw,2.5rem);
  background:var(--panneau);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transform:translateY(-110%);transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.mininav.vu{transform:none}
.mininav nav{display:flex;gap:1.2rem;margin-left:auto;font-size:.9rem}
.mininav nav a{color:var(--muted);text-decoration:none}
.mininav nav a:hover{color:var(--ink)}
@media (max-width:820px){.mininav nav{display:none}}

.page{max-width:68rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.sect{padding-block:clamp(3rem,8vh,5.5rem);scroll-margin-top:4.5rem}
.sect h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin-bottom:.7rem;text-wrap:balance}
.sect .lede{color:var(--muted);max-width:44rem;font-size:1.05rem}
.sect .lede b{color:var(--ink);font-weight:600}
.sect .lede + .lede{margin-top:.8rem}

.bloc{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--panneau);backdrop-filter:blur(10px);
  margin-top:clamp(1.5rem,4vh,2.2rem);
  box-shadow:0 20px 45px rgba(0,0,0,.28);
}
.bloc > .btete{
  display:flex;align-items:center;gap:.65rem;padding:.7rem 1.1rem;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-weight:700;font-size:.92rem;
}
.btete .ico{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:none;background:var(--accent);color:var(--sur-accent);font-size:.72rem;font-weight:800}
.btete .puce{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.15rem .65rem}
.bloc > .bcorps{padding:clamp(1.3rem,3.5vw,2.2rem)}

.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem}
.tuile{border:1px solid var(--line);border-radius:11px;padding:1.05rem 1.1rem;background:var(--surface);transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s}
.tuile:hover{transform:translateY(-3px);border-color:var(--accent-hi)}
.tuile h3{font-size:1.04rem;font-weight:700;margin-bottom:.35rem}
.tuile p{font-size:.92rem;color:var(--muted)}
.tuile p b{color:var(--ink);font-weight:600}
.tuile .dire-le{margin-top:.7rem;font-size:.8rem;color:var(--accent-hi);font-weight:600;font-family:var(--mono)}

/* ── La bande de capacités, juste sous l'app ───────────────────
   Ce qu'on retient en trois secondes, avant de lire quoi que ce soit.
   Une seule surface découpée par des filets : le gap d'1px sur fond
   ligné garde les séparateurs justes même quand la grille passe à la
   ligne (des bordures par cellule laissent des traits orphelins). */
.capacites{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;margin-top:clamp(1.8rem,5vh,2.8rem);
}
.capacite{background:var(--surface);padding:1.1rem 1.15rem}
.capacite .n{
  font-family:var(--mono);font-size:1.5rem;font-weight:800;line-height:1;
  color:var(--accent-hi);display:block;margin-bottom:.45rem;
}
.capacite b{display:block;font-size:.93rem;font-weight:700}
.capacite p{font-size:.83rem;color:var(--muted);margin-top:.15rem}

/* ── La grille dense : tout ce qu'il y a dedans, en un écran ───
   Des cartes courtes, pas des paragraphes. On lit une étiquette et on
   passe à la suivante. */
.bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.7rem}
.bento .b{
  border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;
  background:var(--surface);
  transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s;
}
.bento .b:hover{transform:translateY(-2px);border-color:var(--accent-hi)}
.bento .b b{display:block;font-size:.93rem;font-weight:700}
.bento .b span{display:block;font-size:.83rem;color:var(--muted);margin-top:.18rem}
.bento .b code{font-family:var(--mono);font-size:.78rem}
.bento .b.forte{background:color-mix(in oklab, var(--accent) 12%, var(--surface));border-color:var(--accent-hi)}

/* ── Le tableau de comparaison ─────────────────────────────────
   Notre colonne est teintée : on assume de dire laquelle on défend. */
.table-enveloppe{overflow-x:auto}
.compare{width:100%;border-collapse:collapse;font-size:.93rem;min-width:37rem}
.compare th,.compare td{padding:.72rem .85rem;text-align:left;border-bottom:1px solid var(--line)}
.compare thead th{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.compare tbody th{font-weight:600;color:var(--ink)}
.compare .col-nous{background:color-mix(in oklab, var(--accent) 11%, transparent)}
.compare thead .col-nous{color:var(--accent-hi)}
.compare td{color:var(--muted)}
.compare td.col-nous{color:var(--ink)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.compare .oui::before{content:"✓ ";color:var(--accent-hi);font-weight:700}
.compare .non::before{content:"✕ ";color:var(--corail);font-weight:700}

.pas{list-style:none;counter-reset:p;display:grid}
.pas li{counter-increment:p;display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1.1rem;padding-block:1.5rem;border-bottom:1px dashed var(--line);align-items:baseline}
.pas li:last-child{border-bottom:none}
.pas li::before{content:counter(p);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--accent);line-height:1}
.pas h3{font-size:1.18rem;font-weight:700;margin-bottom:.25rem}
.pas p{color:var(--muted);font-size:.96rem;max-width:40rem}
.pas q{color:var(--ink)}
q{quotes:"« " " »"}
@media (max-width:600px){.pas li{grid-template-columns:2.4rem 1fr;gap:.8rem}}

.duo{display:grid;grid-template-columns:1fr 1fr}
.duo > div{padding:clamp(1.1rem,3vw,1.9rem)}
.duo .eux{background:color-mix(in oklab, var(--bg) 55%, transparent)}
.duo .nous{background:color-mix(in oklab, var(--accent) 12%, transparent);border-left:1px solid var(--line)}
.duo h3{font-size:1.1rem;font-weight:800;margin-bottom:.9rem}
.duo .nous h3{color:var(--accent-hi)}
.duo ul{list-style:none;display:grid;gap:.6rem;font-size:.94rem;color:var(--muted)}
.duo .nous ul{color:var(--ink)}
.duo li{padding-left:1.4rem;position:relative}
.duo .eux li::before{content:"✕";position:absolute;left:0;color:var(--corail);font-weight:700}
.duo .nous li::before{content:"✓";position:absolute;left:0;color:var(--accent-hi);font-weight:700}
@media (max-width:760px){.duo{grid-template-columns:1fr}.duo .nous{border-left:none;border-top:1px solid var(--line)}}

.prix-ligne{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.prix{font-weight:800;font-size:clamp(2.6rem,6vw,3.8rem);line-height:1}
.prix-unite{color:var(--muted)}
.prix-liste{list-style:none;display:grid;gap:.55rem;margin-top:1.1rem;font-size:.94rem;color:var(--muted)}
.prix-liste li{padding-left:1.4rem;position:relative}
.prix-liste li::before{content:"✓";position:absolute;left:0;color:var(--accent-hi);font-weight:700}
.prix-liste b{color:var(--ink);font-weight:600}
.cta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  background:var(--accent);color:var(--sur-accent);text-decoration:none;
  font-weight:700;padding:.8rem 1.6rem;border-radius:999px;font-size:1.05rem;
  transition:transform .18s, background .18s;
}
.cta:hover{background:var(--accent-hi);transform:translateY(-1px)}
.cta.creux{background:transparent;border:1px solid var(--line);color:var(--ink)}
.cta.creux:hover{border-color:var(--accent-hi);background:color-mix(in oklab, var(--accent) 12%, transparent)}
.sous-cta{margin-top:.7rem;font-size:.85rem;color:var(--muted)}
.sous-cta a{color:var(--accent-hi)}

.qr details{border-bottom:1px dashed var(--line)}
.qr details:last-of-type{border-bottom:none}
.qr summary{cursor:pointer;list-style:none;padding-block:1.05rem;font-weight:700;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.qr summary::-webkit-details-marker{display:none}
.qr summary::after{content:"+";color:var(--accent-hi);font-size:1.4rem;font-weight:400;transition:transform .2s;flex:none}
.qr details[open] summary::after{transform:rotate(45deg)}
.qr details p{color:var(--muted);padding-bottom:1.1rem;max-width:47rem;font-size:.95rem}
.qr details p b{color:var(--ink);font-weight:600}

/* quatre guides : 2×2, jamais 3+1 orphelin */
.guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:700px){.guides{grid-template-columns:1fr}}
.guide{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:11px;padding:1.05rem 1.1rem;background:var(--surface);
  transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s;
}
.guide:hover{transform:translateY(-3px);border-color:var(--accent-hi)}
.guide .genre{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hi);font-weight:700}
.guide h3{font-size:1.02rem;font-weight:700;margin:.35rem 0 .3rem;text-wrap:balance}
.guide p{font-size:.88rem;color:var(--muted)}
.guide .fleche{margin-top:.7rem;font-size:.82rem;color:var(--accent-hi);font-weight:600}

.fin{text-align:center;padding-block:clamp(3.5rem,9vh,5.5rem)}
.fin h2{margin-inline:auto}
.fin p{color:var(--muted);max-width:35rem;margin:0 auto 1.8rem}
/* Le paragraphe pose déjà l'écart sous lui : la marge du bouton s'ajouterait. */
.fin .cta{margin-top:0}
.pied{border-top:1px solid var(--line);background:color-mix(in oklab, var(--bg) 70%, transparent);padding-block:2.4rem;font-size:.9rem;color:var(--muted)}
.pied-grille{display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:space-between}
.pied h4{color:var(--ink);font-size:.92rem;margin-bottom:.6rem;font-weight:700}
.pied ul{list-style:none;display:grid;gap:.4rem}
.pied a{color:var(--muted);text-decoration:none}
.pied a:hover{color:var(--ink);text-decoration:underline}
.pied .legal{margin-top:2rem;font-size:.82rem;opacity:.85}

/* ═══ LES CLIS RECONNUS — la rangée de marques ═══════════════════════════════
   ELLE REMPLACE UNE PHRASE. Le site nommait ses treize CLIs en toutes lettres,
   trois fois, dans trois paragraphes différents : « Claude Code, Codex, Gemini,
   Grok, Cursor, OpenCode, Kimi, Aider, Goose, Crush, Amp, Amazon Q, Pi ». Une
   énumération de treize noms ne se LIT pas — elle se saute, et on en retient
   trois. Dix marques posées côte à côte se reconnaissent d'un regard, et disent
   la même chose en moins d'une seconde.

   LES TRACÉS VIENNENT DU KIT, pas d'un jeu d'icônes recopié : ce sont les MÊMES
   que le Mac et l'iPhone peignent (`MarqueEditeur`). Une marque corrigée là-bas
   l'est ici au prochain engendrement du sprite.

   LES CLASSES SONT PRÉFIXÉES `cli-carte`, ET C'EST UN CORRECTIF : `.cli` EXISTE
   DÉJÀ dans cette feuille (`.wtop .cli`, la fausse barre de titre des maquettes
   de fenêtre). Une règle nue `.cli{...}` repeignait donc trois éléments qui
   n'avaient rien demandé, à l'autre bout de la page. Vu au navigateur — treize
   éléments répondaient à mon sélecteur là où j'en avais posé dix. */
.clis-marques{
  display:grid;
  /* CINQ COLONNES, PAS `auto-fit`, ET C'EST UNE QUESTION DE RESTE. Dix marques
     sur une grille libre tombaient sur quatre colonnes : deux cellules vides en
     bas à droite, qui se voient d'autant plus que le fond du conteneur DESSINE
     les séparateurs. Cinq colonnes font deux rangées pleines, deux colonnes en
     font cinq — les deux paliers tombent juste, et il n'y a pas de troisième. */
  grid-template-columns:repeat(5,1fr);
  gap:1px;                      /* le fond transparaît : des séparateurs d'1px */
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;              /* les coins coupent les cellules */
  margin:2.2rem 0 1.6rem;
}
.cli-carte{
  display:flex; align-items:center; gap:.75rem;
  padding:1.05rem 1.1rem;
  background:var(--surface);
  transition:background .18s ease;
}
.cli-carte:hover{ background:var(--surface-2); }
.cli-carte .marque{ width:22px; height:22px; flex:0 0 22px; }
/* CHAQUE MARQUE GARDE SA COULEUR quand son éditeur en publie une ; les autres
   sont MONOCHROMES PAR CONSTRUCTION (OpenAI, xAI, Cursor…) et prennent l'encre
   du texte. Leur coller un hexadécimal inventé serait un logo faux — je l'ai
   fait au premier jet (un Kimi en #2B2B2B, invisible sur fond sombre) : ces
   trois valeurs sont maintenant RECOPIÉES de la table du Kit, pas choisies.

   LA SPÉCIFICITÉ EST DÉLIBÉRÉE : `.cli-carte .m-claude` (0,2,0) et non
   `.m-claude` (0,1,0), sinon le repli `.cli-carte .marque` la bat et toutes les
   marques sortent en craie. Vu au navigateur — `fill` calculait en noir.

   LES VARIABLES SONT CELLES DE CE FICHIER, et c'est la deuxième chose que le
   navigateur m'a apprise : j'avais pris `--chalk` et `--violet-bright` dans
   `_tokens.css`, qui sert les pages LÉGALES et les guides. La landing porte son
   propre `:root` (elle est autonome par décision, cf. l'en-tête). Une variable
   qui n'existe pas rend la déclaration invalide, et `fill` retombe au noir —
   invisible sur un fond noir, donc un défaut qu'aucune relecture ne trouve. */
.cli-carte .marque{ fill:var(--ink); }
.cli-carte .m-claude{ fill:#D97757; }
.cli-carte .m-gemini{ fill:#4285F4; }
.cli-carte .m-hermes{ fill:#6DC2CA; }
.cli-carte .nom{ font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.cli-carte code{
  display:block; margin-left:auto;
  font-size:.78rem; color:var(--muted); opacity:.75;
  white-space:nowrap;
}
.promesses{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  border-top:1px dashed var(--line); padding-top:1.1rem;
}
.promesses li{ color:var(--muted); font-size:.92rem; }
.promesses li::before{
  content:"✓"; color:var(--green);
  margin-right:.5rem; font-weight:700;
}
@media (max-width:1080px){
  .clis-marques{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .cli-carte code{ display:none; }   /* la commande est un détail de bureau */
  .cli-carte{ padding:.9rem 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   PETITS ÉCRANS — EN DERNIER, EXPRÈS
   Ces règles doivent gagner contre .rail{display:flex} et consorts,
   déclarés plus haut : à spécificité égale, c'est le dernier qui parle.
   Ne rien insérer après ce bloc.
   ══════════════════════════════════════════════════════════════ */

/* ── Sous 900 px : le rail s'en va ────────────────────────────
   Empilé sous le canvas, le rail (quinze boutons plus la volière) réclamait
   sa hauteur intrinsèque, près de 450 px. Sur un téléphone en paysage il ne
   restait RIEN pour les terminaux : on arrivait sur la page et on ne voyait
   qu'un panneau de réglages. C'est un tableau de bord de bureau ; sur petit
   écran on garde ce qui raconte l'app — les agents et la voix. */
@media (max-width:900px){
  .body{grid-template-rows:minmax(0,1fr)}
  .rail{display:none}
}

/* ── Téléphone en portrait : on déroule au lieu d'écraser ─────
   Un premier écran verrouillé à 100svh sur 390 px de large, ça donne quatre
   barres de titre sans une ligne de terminal dessous. On laisse donc l'écran
   prendre la hauteur qu'il lui faut, la page défile, et chaque agent montre
   son travail. L'invitation à tourner dit le reste. */
@media (max-width:700px) and (orientation:portrait){
  .ecran{height:auto;min-height:0;padding-bottom:.7rem}
  /* Le cadre de l'app s'efface presque : sur 390 px, chaque millimètre de
     largeur est une ligne de terminal lisible. */
  .app{margin:.5rem .5rem .6rem;border-radius:12px}
  /* ET LE TITRE REDESCEND DANS LE FLUX. Le faire flotter n'a de sens que sur
     un écran BORNÉ, où il occupe une bande que le canvas lui réserve. Ici la
     page se déroule : flottant, il se poserait sur les terminaux. */
  .hero{position:static;padding-top:.6rem}
  .body{padding-top:0}
  .hero h1{font-size:1.45rem}
  .hero p{font-size:.86rem;max-width:30rem}
  .canvas,.canvas[data-layout]{overflow-y:visible;gap:.6rem}
  .win{min-height:11.5rem}
  .tourner{display:flex}
  /* Le sélecteur de thème débordait de l'entête : sur un téléphone on garde
     la langue et le téléchargement, qui sont les deux seules actions. */
  .theme-zone{display:none}
}

/* ── Téléphone en paysage : le canvas, et rien d'autre ────────
   Peu de hauteur : le titre se fait discret pour que des terminaux entiers
   tiennent à l'écran. */
@media (max-height:520px) and (orientation:landscape){
  /* Même parti qu'en portrait : on ne comprime pas dans 390 px de haut, on
     laisse défiler. Sinon la barre de voix — la signature de l'app — tombe
     sous le pli et personne ne clique jamais une phrase. */
  .ecran{height:auto;min-height:0;padding-bottom:.7rem}
  .entete{padding-top:.35rem}
  .hero{padding-block:.35rem .3rem}
  .hero h1{font-size:1.2rem}
  .hero p{display:none}
  .canvas,.canvas[data-layout]{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;overflow-y:visible}
  .win{min-height:9rem}
  .theme-zone{display:none}
}

/* Le tableau « Sur le terrain » fait 37 rem : sous 700 px il se fait glisser.
   Personne ne devine un défilement horizontal ; on le dit, une fois. */
.glisser{display:none}
@media (max-width:700px){
  .glisser{
    display:block;margin:.6rem 0 .1rem;
    /* aligné sur les cellules du tableau, pas sur le bord du bloc */
    padding-inline:.85rem;
    font-size:.78rem;color:var(--muted);font-weight:600;
  }
}