/* ══════════════════════════════════════════════════════════════════════════
   D8 — DATA8
   La feuille de style de l'interface, d'après la maquette « Industry » :
   bleu acier sur fond technique clair, Barlow Condensed sur Barlow, angles
   droits, cadres au trait avec repères de calage aux quatre coins.
   Aucune bibliothèque : le fichier se lit de haut en bas.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --fond: #f2f2f3;
  --pap: #ffffff;
  --pap-2: #e9e9ea;
  --ink: #1d1f20;
  --tx-2: rgba(29, 31, 32, .78);
  --sourd: rgba(29, 31, 32, .55);
  --lin: rgba(29, 31, 32, .16);
  --lin-doux: rgba(29, 31, 32, .09);
  --acc: #5980a6;
  --acc-tx: #416180;
  --acc-fort: #2c455d;
  --acc-nuit: #1d2d3d;
  --acc-t: #d6ebff;
  --acc-t2: #eef6ff;
  --acc-300: #b5d9fd;
  --acc-400: #94bce3;
  --ok: #5f8c6a;
  --alerte: #b07a3f;
  --ombre: 0 12px 32px rgba(43, 43, 45, .18);
  --tete: 58px;
  --f-titre: "Barlow Condensed", system-ui, sans-serif;
  --f-corps: "Barlow", system-ui, sans-serif;
  /* La porte sur téléphone : un fond profond derrière une carte posée.
     En clair, le fond descend juste assez pour que la carte blanche s'en
     détache — sinon la carte disparaît et il ne reste qu'une page plate. */
  /* La maquette téléphone de jules (21/08/2026) a fait entrer l'angle
     arrondi dans D8 : on l'assume partout plutôt que sur un seul écran,
     sinon la porte et l'intérieur ont l'air d'être deux produits. */
  --rayon: 12px;
  --rayon-s: 8px;
  --rayon-l: 16px;
  --porte-fond: #dfe4ea;
  --porte-socle: #1d2d3d;
}

html[data-lum="dark"] {
  --fond: #16232f;
  --pap: #1b2937;
  --pap-2: #223243;
  --ink: #eef2f5;
  --tx-2: rgba(238, 242, 245, .8);
  --sourd: rgba(238, 242, 245, .55);
  --lin: rgba(238, 242, 245, .18);
  --lin-doux: rgba(238, 242, 245, .10);
  --acc: #94bce3;
  --acc-tx: #b5d9fd;
  --acc-fort: #b5d9fd;
  --acc-nuit: #0f1b26;
  --acc-t: rgba(148, 188, 227, .22);
  --acc-t2: rgba(148, 188, 227, .09);
  --acc-300: #5980a6;
  --acc-400: #416180;
  --ok: #8fbf9b;
  --alerte: #d9a860;
  --porte-fond: #0a1219;
  --porte-socle: #060d13;
  --ombre: 0 12px 32px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--ink);
  font-family: var(--f-corps); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, b, strong { font-family: var(--f-titre); font-weight: 600; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; font-family: var(--f-corps); }
::selection { background: var(--acc-t); color: var(--ink); }
#app { height: 100%; display: flex; flex-direction: column; }

/* — le cadre au trait, marqué aux quatre coins ————————————————————— */
.plan { position: relative; border: 1px solid var(--lin); border-radius: 0; }
.plan > i.coin { position: absolute; width: 11px; height: 11px; color: var(--sourd); }
.plan > i.coin::before, .plan > i.coin::after { content: ""; position: absolute; background: currentColor; }
.plan > i.coin::before { left: 5px; top: 0; width: 1px; height: 100%; }
.plan > i.coin::after { top: 5px; left: 0; width: 100%; height: 1px; }
.plan > i.tl { top: -6px; left: -6px; }
.plan > i.tr { top: -6px; right: -6px; }
.plan > i.bl { bottom: -6px; left: -6px; }
.plan > i.br { bottom: -6px; right: -6px; }

.eti {
  font-family: var(--f-titre); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sourd);
}
.pousse { flex: 1 1 auto; }
.rangee { display: flex; align-items: center; gap: 10px; }
.detail { font-size: 12px; color: var(--sourd); padding-top: 3px; }
.chiffre { font-variant-numeric: tabular-nums; }

/* — la porte ————————————————————————————————————————————————————— */
.porte {
  position: fixed; inset: 0; z-index: 40; background: var(--porte-fond);
  display: grid; grid-template-columns: 1fr 420px;
  gap: 20px; padding: 22px; overflow: auto;
}
.porte .gauche {
  padding: 52px 56px; display: flex; flex-direction: column;
  background: var(--pap); border-radius: var(--rayon-l);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}
.porte .coeur { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; max-width: 600px; }
.porte h1 { font-size: 54px; line-height: .98; margin: 0; }
.porte .accroche { font-size: 16px; line-height: 1.55; margin: 18px 0 0; max-width: 440px; color: var(--sourd); }
.porte form { display: flex; flex-direction: column; gap: 11px; padding: 32px 0 0; width: 360px; max-width: 100%; }
.porte input {
  background: transparent; border: 1px solid var(--lin); border-radius: var(--rayon-s);
  padding: 12px 14px; font-size: 14px; outline: none; color: var(--ink);
}
.porte input:focus { border-color: var(--acc); }
/* Le champ porte son œil : l'input garde toute la largeur, le bouton se pose
   dedans plutôt qu'à côté — sinon le champ rétrécit et la mise en page saute
   au premier caractère tapé. */
.porte .champ { position: relative; display: flex; }
.porte .champ input { flex: 1 1 auto; padding-right: 44px; }
.porte .oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px; cursor: pointer;
  color: var(--sourd); display: flex; align-items: center;
}
.porte .oeil:hover, .porte .oeil[aria-pressed="true"] { color: var(--acc-tx); }
.porte button[type="submit"] {
  background: var(--acc); color: var(--fond); border: 0; padding: 13px;
  border-radius: var(--rayon-s); cursor: pointer;
  font-family: var(--f-titre); font-size: 15.5px; letter-spacing: .13em; text-transform: uppercase;
  transition: background .15s;
}
.porte button[type="submit"]:hover { background: var(--acc-tx); }
.porte .refus { color: var(--alerte); font-size: 12.5px; min-height: 16px; }
.porte .mention { font-size: 12px; color: var(--sourd); display: flex; align-items: center; gap: 7px; padding-top: 22px; }
/* Le pied s'aligne à gauche comme tout le reste de la carte : centré, il
   avait l'air d'appartenir à une autre page. */
.porte .pied { align-items: flex-start; text-align: left; }
.porte .droite {
  background: var(--porte-socle); color: #eef2f5; padding: 48px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--rayon-l);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.porte .droite .kpi { font-family: var(--f-titre); font-size: 58px; line-height: 1; }
.porte .droite .leg { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 242, 245, .6); padding-top: 4px; }
.porte .droite .bloc + .bloc { padding-top: 24px; }

/* — la barre du haut ——————————————————————————————————————————————— */
/* Sans filet sous elle, ni entre les colonnes plus bas : panneaux et barre
   posent le même fond, un trait entre eux ne délimitait rien — il découpait
   l'écran en morceaux. Ce sont les cartes, plus claires que le fond dans les
   deux ambiances, qui portent la hiérarchie. */
.barre {
  height: var(--tete); flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--fond);
}
.marque { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.pastille {
  width: 26px; height: 26px; background: var(--acc); color: var(--fond);
  font-family: var(--f-titre); font-weight: 600; font-size: 14px;
  display: grid; place-items: center; flex: 0 0 auto;
}
.marque b { font-family: var(--f-titre); font-size: 18px; letter-spacing: .02em; }
.griffe { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--sourd); font-style: italic; }
.griffe img { height: 13px; width: auto; display: block; align-self: center; }
/* le logo clair est un fichier à part (qualitest-clair.svg), plus de filtre */
.fil { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sourd); min-width: 0; }
.fil button { color: var(--sourd); padding: 3px 4px; }
.fil button:hover { color: var(--ink); }
.fil .ici { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce {
  display: flex; align-items: center; gap: 7px; font-family: var(--f-titre);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--sourd);
}
.point { width: 7px; height: 7px; background: var(--acc); flex: 0 0 auto; }
.point.attente { background: var(--alerte); animation: bat 1.4s infinite; }
.point.eteint { background: var(--sourd); }
.bascule { display: flex; border: 1px solid var(--lin); border-radius: 999px; overflow: hidden; }
.bascule button { padding: 5px 11px; font-size: 12px; color: var(--sourd); }
.bascule button[aria-pressed="true"] { background: var(--acc); color: var(--fond); }
.avatar { width: 28px; height: 28px; border: 1px solid var(--lin); display: grid; place-items: center; font-size: 11px; }
.corps { flex: 1 1 auto; min-height: 0; display: flex; }

/* — écran 1 : les clients ——————————————————————————————————————————— */
.page { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 44px 56px 28px; }
.sur-titre { font-family: var(--f-titre); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--acc-tx); }
.titre-page { font-size: 46px; line-height: 1; margin: 6px 0 0; }
.sous-titre { font-size: 13.5px; color: var(--sourd); padding-top: 8px; }
.chercher { display: flex; align-items: center; gap: 8px; border: 1px solid var(--lin); border-radius: var(--rayon-s); background: var(--pap); padding: 10px 13px; width: 320px; }
.chercher input { border: 0; background: none; outline: none; width: 100%; font-size: 13px; }
.chercher input::placeholder { color: var(--sourd); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 22px; padding-top: 36px; }
.carte-client { border-radius: var(--rayon);
  position: relative; border: 1px solid var(--lin); background: var(--pap);
  padding: 18px; min-height: 158px; display: flex; flex-direction: column;
  gap: 14px; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.carte-client:hover { border-color: var(--acc); box-shadow: var(--ombre); }
.sigle {
  width: 40px; height: 40px; background: var(--acc-t); color: var(--acc-tx);
  font-family: var(--f-titre); font-size: 15px; display: grid; place-items: center; flex: 0 0 auto;
}
.carte-client:hover .sigle { background: var(--acc); color: var(--fond); }
.nom-client { font-family: var(--f-titre); font-size: 19px; line-height: 1.1; }
.jetons { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.jeton { border: 1px solid var(--lin); padding: 4px 9px; font-size: 11.5px; color: var(--sourd); }
.jeton.vif { color: var(--acc-tx); border-color: var(--acc); display: flex; align-items: center; gap: 6px; }
.pied { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sourd); padding-top: 34px; }

/* — l'arbre des études ————————————————————————————————————————————— */
.arbre {
  width: 244px; flex: 0 0 auto;
  overflow: auto; padding: 14px 8px; display: flex; flex-direction: column; gap: 1px;
}
.noeud {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px; text-align: left;
  font-size: 12.5px; color: var(--sourd); border-left: 2px solid transparent;
}
.noeud:hover { background: var(--acc-t2); color: var(--ink); }
.noeud[aria-current="true"] { background: var(--acc-t); color: var(--ink); border-left-color: var(--acc); }
.noeud.enfant { padding-left: 26px; }
.noeud span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chevron { flex: 0 0 auto; transition: transform .15s; }
.chevron.ouvert { transform: rotate(90deg); }

/* — écran 2 : un client ————————————————————————————————————————————— */
.entete-client { padding: 26px 30px 20px; display: flex; align-items: center; gap: 16px; }
.entete-client .sigle { width: 50px; height: 50px; font-size: 18px; }
.h-client { font-family: var(--f-titre); font-size: 30px; line-height: 1; }
.liste { padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; overflow: auto; flex: 1 1 auto; }
.carte-etude { border-radius: var(--rayon);
  display: flex; align-items: center; gap: 16px; border: 1px solid var(--lin);
  background: var(--pap); padding: 14px 16px; text-align: left;
}
.carte-etude:hover { border-color: var(--acc); }
.annee {
  width: 54px; height: 46px; flex: 0 0 auto; background: var(--acc-t2); color: var(--acc-tx);
  font-family: var(--f-titre); font-size: 17px; display: grid; place-items: center;
}

/* — écran 3 : une étude ———————————————————————————————————————————— */
.etude { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 430px; }

/* la colonne des graphiques : elle se remplit toute seule */
.chiffres { display: flex; flex-direction: column; min-height: 0; background: var(--fond); }
.chiffres .tete { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 9px; }
.chiffres .cherche { display: flex; align-items: center; gap: 7px; border: 1px solid var(--lin); border-radius: var(--rayon-s); background: var(--pap); padding: 7px 10px; }
.chiffres .cherche input { border: 0; background: none; outline: none; width: 100%; font-size: 12.5px; }
/* La fouille : au-dessus des questions, ce que le classeur donne quand on le
   croise dans tous les sens. Une carte, pas un bandeau : elle se lit puis on
   passe aux graphiques. */
.chiffres .fouille { margin: 12px 16px 0; background: var(--pap); border: 1px solid var(--lin);
  border-radius: var(--rayon); padding: 12px 13px; display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 auto; max-height: 42%; overflow: auto; }
.chiffres .fouille > .rangee { display: flex; align-items: center; gap: 7px; font-family: var(--f-titre); font-size: 14px; }
.chiffres .fouille .quoi { font-size: 11px; color: var(--sourd); line-height: 1.45; }
.chiffres .fouille .corps { display: flex; flex-direction: column; gap: 9px; }
.chiffres .fouille .sous-titre { font-family: var(--f-titre); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc-tx); border-top: 1px solid var(--lin-doux); padding-top: 8px; }
.chiffres .fouille .trouve { display: flex; flex-direction: column; gap: 5px;
  border-left: 2px solid var(--acc-t2); padding-left: 9px; }
.chiffres .fouille .trouve .p { font-size: 12px; line-height: 1.4; }
.chiffres .fouille .trouve .act { display: flex; gap: 6px; flex-wrap: wrap; }
.chiffres .fouille .detail { font-size: 11px; color: var(--sourd); }

.chiffres .rouleau { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 18px; }
.chiffres .rouleau::-webkit-scrollbar { width: 8px; }
.chiffres .rouleau::-webkit-scrollbar-thumb { background: var(--lin); }

.carte-graphique { background: var(--pap); border: 1px solid var(--lin); border-radius: var(--rayon); padding: 14px 15px 13px; display: flex; flex-direction: column; gap: 10px; }
.carte-graphique .kicker { font-family: var(--f-titre); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-tx); }
.carte-graphique h3 { font-size: 16.5px; line-height: 1.15; margin: 2px 0 0; }
/* La rangée d'outils d'une carte porte un nombre VARIABLE de boutons :
   « par âge », « par sexe », « par profession », « par territoire », la
   planche, puis « Demander à 8 ». Sans `flex-wrap`, elle débordait de la
   colonne des chiffres — le dernier bouton coupé au bord, et les libellés
   écrasés sur deux lignes (« par / âge »). Mesuré le 23/08/2026 sur la
   capture de jules. Une rangée dont on ne connaît pas la longueur doit
   TOUJOURS pouvoir passer à la ligne. */
.carte-graphique .outils {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 7px; row-gap: 6px; min-width: 0;
  border-top: 1px solid var(--lin-doux); padding-top: 9px;
}
/* `.pousse` ne colle « Demander à 8 » à droite que s'il reste de la place :
   sur une seule ligne il pousse, dès qu'on passe à la ligne il s'efface. */
.carte-graphique .outils .pousse { flex: 1 1 0; min-width: 0; }
.mini {
  border-radius: 999px; flex: 0 0 auto; white-space: nowrap;
  font-size: 11px; border: 1px solid var(--lin); padding: 4px 8px; color: var(--sourd);
}
.mini:hover { border-color: var(--acc); color: var(--ink); }
.mini[aria-pressed="true"] { background: var(--acc-t); color: var(--acc-tx); border-color: var(--acc); }

/* le graphique lui-même : des barres, rien d'autre */
.gr { display: flex; flex-direction: column; gap: 7px; }
.gr .ligne { display: grid; grid-template-columns: 1fr; gap: 3px; }
.gr .haut { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.gr .lab { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.gr .val { font-family: var(--f-titre); font-size: 14px; color: var(--acc-tx); flex: 0 0 auto; }
.gr .piste { height: 9px; border-radius: 999px; background: var(--acc-t2); position: relative; overflow: hidden; }
.gr .barre { height: 100%; background: var(--acc-300); transform-origin: left; animation: pousse .5s cubic-bezier(.2,.8,.2,1) both; }
.gr .barre.tete { background: var(--acc); }
.gr .base { font-size: 11px; color: var(--sourd); }
.gr .groupe { display: flex; flex-direction: column; gap: 4px; }
.gr .groupe .titre-g { font-size: 12px; display: flex; align-items: baseline; gap: 10px; }
.gr .groupe .lab-g { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.gr .groupe .ecart { flex: 0 0 auto; font-family: var(--f-titre); font-size: 11px; letter-spacing: .01em;
  color: var(--acc-tx); background: var(--acc-t2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; cursor: help; }
.gr .groupe .ecart.plat { color: var(--sourd); background: transparent; border: 1px solid var(--lin-doux); }
.gr .dit-g { font-size: 11px; color: var(--sourd); line-height: 1.35; }
.gr .lecture-g { font-size: 11px; color: var(--sourd); line-height: 1.4; padding-bottom: 2px;
  border-bottom: 1px solid var(--lin-doux); margin-bottom: 4px; }
.gr .tranches { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.gr .tranches .col { flex: 1; background: var(--acc-300); transform-origin: bottom; animation: monte .5s cubic-bezier(.2,.8,.2,1) both; min-height: 1px; border-radius: 5px 5px 2px 2px; }
.gr .tranches .col.tete { box-shadow: inset 0 0 0 1.5px var(--acc-tx); }
.gr .legende { display: flex; gap: 11px; flex-wrap: wrap; border-top: 1px solid var(--lin-doux); padding-top: 8px; font-size: 10.5px; color: var(--sourd); }
.gr .legende span.pastille-l { width: 9px; height: 9px; display: inline-block; margin-right: 5px; }

/* ── Les vrais graphiques ────────────────────────────────────────────────
   Neuf formes en SVG : camembert, anneau, colonnes, barres, courbe, jauge,
   colonnes groupées, barres empilées, tableau. Ce ne sont plus des <div> mis
   bout à bout — ce sont des arcs et des chemins, qui se mettent à l'échelle,
   s'impriment, et se lisent dans les deux ambiances.

   Tout est écrit en variables de la charte : une seule feuille pour le clair
   et le sombre, et pas une couleur en dur. */

.gr-bloc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gr-hote, .gr-rond-hote { width: 100%; min-width: 0; }
.gr-rond-hote { display: flex; justify-content: center; }
.gr-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.gr-rond-hote svg { max-width: 280px; }
.gr-jauge { max-width: 300px; }

/* Les textes du dessin. Le SVG n'hérite pas de la police du corps : on la
   redit ici, sinon les chiffres tombent en Times. */
.gr-svg text { font-family: var(--f-corps, inherit); }
.gr-lab { font-size: 12px; fill: var(--ink); }
.gr-lab-reste { fill: var(--sourd); font-style: italic; }
.gr-lab-x { font-size: 10.5px; fill: var(--sourd); }
.gr-val { font-family: var(--f-titre); font-size: 13.5px; fill: var(--acc-tx); font-variant-numeric: tabular-nums; }
.gr-val.tete { fill: var(--acc-fort); }
.gr-val-mini { font-family: var(--f-titre); font-size: 10.5px; fill: var(--sourd); font-variant-numeric: tabular-nums; }
.gr-val-part { font-family: var(--f-titre); font-size: 12px; font-variant-numeric: tabular-nums; }
.gr-regle { stroke: var(--lin-doux); stroke-width: 1; }
.gr-regle-l { font-size: 9.5px; fill: var(--sourd); }
.gr-piste { fill: var(--acc-t2); }
.gr-ecart { font-family: var(--f-titre); font-size: 11px; fill: var(--acc-tx); }
.gr-ecart.plat { fill: var(--sourd); }
.gr-dit { font-size: 10.5px; fill: var(--sourd); }
.gr-centre-v { font-family: var(--f-titre); font-size: 30px; fill: var(--acc-fort); font-variant-numeric: tabular-nums; }
.gr-centre-l { font-size: 10.5px; fill: var(--sourd); }
.gr-jauge-v { font-family: var(--f-titre); font-size: 34px; fill: var(--acc-fort); font-variant-numeric: tabular-nums; }
.gr-jauge-fond { stroke: var(--acc-t2); }
.gr-jauge-plein { stroke: var(--acc); animation: jauge-trace 1s cubic-bezier(.2,.8,.2,1) both; }

/* Les animations. Chacune part de rien et arrive à sa valeur : on voit le
   chiffre se poser, on ne le trouve pas déjà posé. */
.gr-barre { transform-origin: left center; animation: gr-pousse .55s cubic-bezier(.2,.8,.2,1) both; }
.gr-col { transform-origin: center bottom; animation: gr-monte .55s cubic-bezier(.2,.8,.2,1) both; }
.gr-col.tete { stroke: var(--acc-fort); stroke-width: 1.5; }
.gr-seg { animation: gr-parait .5s ease both; }
.gr-svg .part { animation: gr-parait .55s ease both; transform-origin: center; }
.gr-svg .part:hover { filter: brightness(1.06); }
.gr-aire { fill: var(--acc-t2); animation: gr-parait .7s ease both; }
.gr-trait { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 2400; animation: gr-trace 1.1s cubic-bezier(.3,.7,.2,1) both; }
.gr-point { fill: var(--pap); stroke: var(--acc-fort); stroke-width: 2; animation: gr-parait .5s ease both .4s; }

@keyframes gr-pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gr-monte  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gr-parait { from { opacity: 0; } to { opacity: 1; } }
@keyframes gr-trace  { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes jauge-trace { from { opacity: 0; } to { opacity: 1; } }

/* Le choix de la forme. D8 prend la plus adaptée ; ces boutons disent
   lesquelles conviennent aussi, et laissent la main. */
.gr-formes { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
.gr-forme {
  font-size: 10.5px; font-family: var(--f-titre); letter-spacing: .02em;
  border: 1px solid var(--lin); border-radius: 999px; padding: 3px 10px;
  background: transparent; color: var(--sourd); cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.gr-forme:hover { border-color: var(--acc); color: var(--acc-tx); }
.gr-forme.on { background: var(--acc-t2); border-color: var(--acc); color: var(--acc-fort); }

/* Le tableau : la forme qui donne le chiffre exact. */
.gr-table-hote { overflow-x: auto; }
.gr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gr-table th { text-align: left; font-family: var(--f-titre); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sourd); padding: 4px 8px 6px 0; border-bottom: 1px solid var(--lin); }
.gr-table th.n, .gr-table td.n { text-align: right; padding-right: 0; }
.gr-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--lin-doux); }
.gr-table td.chiffre { font-variant-numeric: tabular-nums; font-family: var(--f-titre); color: var(--acc-tx); }

@media (max-width: 720px) {
  .gr-lab { font-size: 11.5px; }
  .gr-val { font-size: 12.5px; }
  .gr-rond-hote svg { max-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .gr-barre, .gr-col, .gr-seg, .gr-svg .part, .gr-aire, .gr-trait, .gr-point, .gr-jauge-plein {
    animation: none;
  }
  .gr-trait { stroke-dasharray: none; }
}

/* À l'impression, un graphique doit rester lisible en noir et blanc. */
@media print {
  .gr-formes { display: none; }
  .gr-svg svg { break-inside: avoid; }
}

/* la scène : le diaporama, toujours affiché */
.scene { min-width: 0; max-width: 100%; display: flex; flex-direction: column; padding: 16px 20px 14px; min-height: 0; overflow: hidden; }
.entete-scene { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.titre-planche { font-family: var(--f-titre); font-size: 20px; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rond { width: 32px; height: 32px; border: 1px solid var(--lin); border-radius: 999px; display: grid; place-items: center; color: var(--ink); }
.rond:hover { background: var(--acc-t2); border-color: var(--acc); }
.compte { padding: 0 13px; height: 32px; border: 1px solid var(--lin); border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cadre {
  flex: 1 1 auto; min-height: 0; background: var(--pap); border: 1px solid var(--lin);
  border-radius: var(--rayon); box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.cadre img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cadre .vide { margin: auto; color: var(--sourd); font-size: 13px; text-align: center; line-height: 1.7; white-space: pre-line; padding: 20px; }
.rail { max-width: 100%; height: 84px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; overflow-x: auto; overflow-y: hidden; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--lin); }
.vignette { width: 92px; height: 62px; flex: 0 0 auto; border: 1px solid var(--lin); border-radius: var(--rayon-s); background: var(--pap); position: relative; overflow: hidden; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette b { position: absolute; left: 0; bottom: 0; background: var(--fond); color: var(--sourd); font-size: 10.5px; padding: 1px 6px; border-radius: 0 var(--rayon-s) 0 var(--rayon-s); font-family: var(--f-titre); }
.vignette[aria-current="true"] { border-color: var(--acc); outline: 1px solid var(--acc); }
.avance { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.avance .rail-fin { flex: 1 1 auto; height: 3px; background: var(--acc-t2); }
.avance .rail-fin i { display: block; height: 100%; background: var(--acc); transition: width .3s; }
.avance span { font-size: 11px; color: var(--sourd); }

/* — l'assistant ————————————————————————————————————————————————— */
.chat { display: flex; flex-direction: column; min-height: 0; background: var(--fond); }
.chat.large { flex: 0 0 420px; }
.entete-chat { padding: 15px 18px 12px; }
.entete-chat b { font-family: var(--f-titre); font-size: 17px; }
.cadenas { display: flex; align-items: center; gap: 6px; font-size: 10.5px; border: 1px solid var(--lin); padding: 3px 8px; color: var(--sourd); }
.mot-chat { font-size: 12px; color: var(--sourd); padding-top: 7px; line-height: 1.5; }
.echanges { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 15px; }
.echanges::-webkit-scrollbar { width: 8px; }
.echanges::-webkit-scrollbar-thumb { background: var(--lin); }
.bulle { font-size: 13px; line-height: 1.62; white-space: pre-wrap; word-wrap: break-word; }
.bulle.moi { align-self: flex-end; background: var(--acc-t); border-radius: var(--rayon) var(--rayon) 4px var(--rayon); padding: 10px 13px; max-width: 92%; }
.bulle.elle { align-self: flex-start; max-width: 96%; }
.dit { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; animation: apparait .4s ease both; }
.en-clair {
  align-self: flex-start; max-width: 96%; display: flex; flex-direction: column; gap: 4px;
  border-left: 2px solid var(--acc); background: var(--acc-t2);
  padding: 9px 12px; font-size: 13px; line-height: 1.6;
}
.en-clair b {
  font-family: var(--f-titre); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc-tx);
}

/* ── la conscience de 8 ──────────────────────────────────────────────────
   Quatre teintes, aucune neuve : celles que la barre du haut parle déjà.
   Le vert du « bon », le bleu acier de la maison, le gris du retenu,
   l'ambre de l'attention — définies en variables, donc justes dans les
   deux ambiances. Le grain est la pastille ronde de la charte arrondie. */
.teinte-ok     { --teinte: var(--ok); }
.teinte-acc    { --teinte: var(--acc); }
.teinte-sourd  { --teinte: var(--sourd); }
.teinte-alerte { --teinte: var(--alerte); }
.grain {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--teinte, var(--acc)); flex: 0 0 auto; display: inline-block;
}

/* Le bloc « Conseil » d'une réponse. Détaché du corps comme « En clair »,
   mais distinct : « En clair » est une citation teintée à filet, le conseil
   est une carte posée — fond papier, trait, rayon — avec sa pastille ronde.
   PAS d'ombre : une ombre au pied d'une carte dessine une barre grise en
   clair (mesuré le 21/08/2026 sur la porte téléphone). */
.conseil {
  align-self: flex-start; max-width: 96%;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--pap); border: 1px solid var(--lin);
  border-radius: var(--rayon-s); padding: 10px 12px;
}
.conseil .rangee { gap: 7px; }
.conseil b {
  font-family: var(--f-titre); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc-tx);
}
.conseil .p { font-size: 13px; line-height: 1.6; }
/* L'assise : la donnée qui porte le conseil, en dessous, plus discrète. */
.conseil .assise {
  font-size: 11.5px; color: var(--sourd); line-height: 1.45;
  border-top: 1px solid var(--lin-doux); padding-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* La carte « l'humeur de 8 », en tête de la colonne assistant. Une carte
   posée comme la fouille : elle se lit, puis on passe à la conversation.
   Sans donnée du serveur, elle n'existe pas — donc rien ici ne prévoit de
   vide. Elle plafonne comme la fouille pour ne jamais manger le fil. */
.conscience {
  flex: 0 0 auto; margin: 12px 18px 0;
  background: var(--pap); border: 1px solid var(--lin);
  border-radius: var(--rayon); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 42%; overflow: auto;
}
/* La rangée de tête porte un libellé d'humeur de longueur inconnue : elle
   passe à la ligne plutôt que de déborder. */
.conscience > .rangee { flex-wrap: wrap; gap: 8px; font-family: var(--f-titre); font-size: 14px; }
.conscience .etiquette {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--lin); border-radius: 999px; padding: 3px 10px;
  font-family: var(--f-titre); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx-2); white-space: nowrap;
}
.conscience .phrase { font-size: 12.5px; line-height: 1.5; color: var(--tx-2); }

/* Le dépliant, fermé par défaut : le détail attend qu'on le demande. */
.conscience .depli summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-titre); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sourd);
}
.conscience .depli summary::-webkit-details-marker { display: none; }
.conscience .depli summary:hover { color: var(--ink); }
.conscience .depli[open] summary .chevron { transform: rotate(90deg); }
.conscience .depli .dedans {
  display: flex; flex-direction: column; gap: 9px;
  border-top: 1px solid var(--lin-doux); margin-top: 8px; padding-top: 9px;
}
.conscience .sentiment { display: flex; flex-direction: column; gap: 5px; }
.conscience .sentiment .haut { display: flex; align-items: baseline; gap: 8px; }
.conscience .sentiment .grain { position: relative; top: 1px; }
.conscience .sentiment .p { font-size: 12px; line-height: 1.4; min-width: 0; }
/* Les actions passent sous la phrase, alignées sur elle — et une rangée de
   boutons passe toujours à la ligne. */
.conscience .sentiment .act { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 17px; }
.conscience .sous-titre {
  font-family: var(--f-titre); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc-tx);
  border-top: 1px solid var(--lin-doux); padding-top: 8px;
}
.conscience .fragilite {
  font-size: 12px; line-height: 1.4; color: var(--tx-2);
  border-left: 2px solid var(--lin); padding-left: 9px;
}
.sources { display: flex; gap: 6px; flex-wrap: wrap; }
.source { display: flex; align-items: center; gap: 5px; border: 1px solid var(--lin); border-radius: 999px; padding: 4px 10px; font-size: 11px; color: var(--sourd); }
.source.vive { border-color: var(--acc); color: var(--acc-tx); }
button.source:hover { border-color: var(--acc); color: var(--ink); }
.pense { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--sourd); }
.pense i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); display: inline-block; animation: bat 1.1s infinite; }
.pense i:nth-child(2) { animation-delay: .18s; }
.pense i:nth-child(3) { animation-delay: .36s; }
.pistes { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 10px; }
.piste { border: 1px solid var(--lin); border-radius: 999px; padding: 7px 12px; font-size: 12px; color: var(--tx-2); text-align: left; }
.piste:hover { background: var(--acc-t2); border-color: var(--acc); color: var(--ink); }
.saisie { flex: 0 0 auto; padding: 0 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.boite { display: flex; align-items: flex-end; gap: 9px; background: var(--pap); border: 1px solid var(--lin); border-radius: var(--rayon); padding: 9px 11px; }
.boite:focus-within { border-color: var(--acc); }
.boite textarea { flex: 1 1 auto; border: 0; background: none; outline: none; resize: none; font-size: 13px; max-height: 120px; line-height: 1.5; }
.envoyer { width: 28px; height: 28px; background: var(--acc); color: var(--fond); display: grid; place-items: center; flex: 0 0 auto; }
.envoyer:hover { background: var(--acc-tx); }
.mention-chat { font-size: 11px; color: var(--sourd); display: flex; align-items: center; gap: 6px; }
.chat .gr { background: var(--pap); border: 1px solid var(--lin); border-radius: var(--rayon); padding: 12px 13px; }

@keyframes bat { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes pousse { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
@keyframes monte { from { transform: scaleY(.04); } to { transform: scaleY(1); } }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1380px) {
  html[data-format="grand"] .etude { grid-template-columns: 1fr 392px; }
}
@media (max-width: 1120px) {
  html[data-format="grand"] .etude { grid-template-columns: 1fr 320px; }
  html[data-format="grand"] .chiffres, html[data-format="grand"] .etude > .humeurs { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Le téléphone
   Ce n'est pas la même page en plus petit : c'est le même travail, dans
   l'ordre où on le fait à une main. Le diaporama reste en haut — il ne se
   cache jamais —, le bas bascule entre les chiffres et l'assistant.
   D8 mesure l'écran lui-même ; il n'y a pas de « version ordinateur » à
   demander, elle serait illisible.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-format="tel"] {
  --tete: 50px;
}
/* Rien ne dépasse : sur un téléphone, une page qui glisse latéralement donne
   l'impression d'être cassée. Les rails de vignettes, eux, gardent leur
   défilement à l'intérieur de leur boîte. */
html[data-format="tel"] body,
html[data-format="tel"] #app { max-width: 100vw; overflow-x: hidden; }
html[data-format="tel"] .corps { min-width: 0; }
html[data-format="tel"] .etude.tel > * { min-width: 0; max-width: 100%; }
/* Sur un téléphone la fouille se replie : on vient d'abord voir les
   chiffres, elle attend juste au-dessus, à hauteur de trois lignes. */
html[data-format="tel"] .chiffres .fouille { margin: 10px 12px 0; max-height: 34vh; }
html[data-format="tel"] .barre > * { min-width: 0; }
html[data-format="tel"] .fil { overflow: hidden; }
html[data-format="tel"] .pistes { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
html[data-format="tel"] .piste { flex: 0 0 auto; }
html[data-format="tel"] body { font-size: 15px; }
/* La barre sur téléphone : DEUX rangées.
   Une seule ligne ne tient pas 375 px — on y perdait le fil, les pastilles
   d'état se chevauchaient, et la règle qui cachait « toutes les pastilles
   sauf la première » escamotait des informations vraies : la date du coffre
   et l'état du modèle. Ce qui est affiché doit être lisible, ou ne pas être
   affiché du tout ; ici tout mérite d'être là, donc tout descend d'un cran. */
html[data-format="tel"] .barre {
  height: auto; min-height: 0; flex-wrap: wrap;
  padding: 9px 12px 8px; gap: 8px 10px; align-items: center;
}
html[data-format="tel"] .marque b,
html[data-format="tel"] .griffe,
html[data-format="tel"] .avatar,
html[data-format="tel"] .barre .pousse,
html[data-format="tel"] .fil button,
html[data-format="tel"] .fil .chevron { display: none; }
html[data-format="tel"] .barre .marque { order: 1; }
html[data-format="tel"] .barre .fil { order: 2; flex: 1 1 auto; min-width: 0; }
html[data-format="tel"] .barre .bascule { order: 3; flex: 0 0 auto; }
/* La coupure : un élément de flux vide, large comme la barre, qui renvoie
   tout ce qui suit à la ligne. */
html[data-format="tel"] .barre::after { content: ''; order: 4; width: 100%; height: 0; }
html[data-format="tel"] .barre .puce { order: 5; }
html[data-format="tel"] .fil .ici { font-size: 14px; white-space: nowrap; }
html[data-format="tel"] .puce {
  white-space: nowrap; font-size: 11px; letter-spacing: .03em; gap: 6px;
}
/* Deux voyants ne tiennent pas : sur un téléphone, seul l'état de l'étude
   compte — d'où vient la rédaction se lit dans les Réglages du poste. */
/* (retiré le 21/08/2026 : cacher les pastilles suivantes faisait disparaître
   la date du coffre et l'état du modèle — deux informations qu'on ne peut pas
   deviner. Elles passent maintenant à la ligne.) */
html[data-format="tel"] .bascule { flex: 0 0 auto; }
html[data-format="tel"] .bascule button { padding: 6px 9px; font-size: 11px; }

/* l'accueil et la liste des études */
html[data-format="tel"] .page { padding: 22px 16px 24px; }
html[data-format="tel"] .titre-page { font-size: 34px; }
html[data-format="tel"] .page > .rangee { flex-wrap: wrap; gap: 14px; }
html[data-format="tel"] .chercher { width: 100%; }
html[data-format="tel"] .grille { grid-template-columns: 1fr; gap: 26px; padding-top: 24px; }
html[data-format="tel"] .arbre { display: none; }
html[data-format="tel"] .entete-client { padding: 18px 16px 14px; }
html[data-format="tel"] .h-client { font-size: 24px; }
html[data-format="tel"] .liste { padding: 16px; }
html[data-format="tel"] .entete-client + div { flex-direction: column; }
html[data-format="tel"] .chat.large { flex: 1 1 auto; width: auto; }

/* une étude : le diaporama en haut, le reste dessous */
html[data-format="tel"] .etude.tel {
  /* .corps est une rangée : sans largeur imposée, cette colonne prend la
     largeur de son contenu — c'est-à-dire celle du rail des 72 vignettes. */
  flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%;
  display: flex; flex-direction: column; min-height: 0;
}
html[data-format="tel"] .etude.tel .scene {
  flex: 0 0 auto; padding: 10px 12px 8px;
}
html[data-format="tel"] .etude.tel .cadre { height: 38vw; max-height: 190px; min-height: 130px; }
html[data-format="tel"] .etude.tel .entete-scene { padding-bottom: 8px; gap: 8px; }
html[data-format="tel"] .etude.tel .titre-planche { font-size: 15px; }
html[data-format="tel"] .etude.tel .rond { width: 30px; height: 30px; }
html[data-format="tel"] .etude.tel .compte { padding: 0 8px; height: 30px; font-size: 12px; }
html[data-format="tel"] .etude.tel .rail { height: 56px; padding: 8px 0 0; }
html[data-format="tel"] .etude.tel .vignette { width: 66px; height: 44px; }
html[data-format="tel"] .etude.tel .avance { padding-top: 6px; }
html[data-format="tel"] .etude.tel .avance span { font-size: 10.5px; }

html[data-format="tel"] .onglets {
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--fond);
}
html[data-format="tel"] .onglets button {
  padding: 11px 0; font-family: var(--f-titre); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sourd);
  border-bottom: 2px solid transparent;
}
html[data-format="tel"] .onglets button[aria-current="true"] {
  color: var(--ink); border-bottom-color: var(--acc); background: var(--acc-t2);
}

html[data-format="tel"] .etude.tel .chiffres,
html[data-format="tel"] .etude.tel .humeurs,
html[data-format="tel"] .etude.tel .chat {
  flex: 1 1 auto; min-height: 0; border: 0; width: auto;
}
html[data-format="tel"] .etude.tel [hidden] { display: none; }
html[data-format="tel"] .chiffres .tete { padding: 12px 14px 10px; }
html[data-format="tel"] .chiffres .rouleau { padding: 12px 14px 22px; }
html[data-format="tel"] .carte-graphique h3 { font-size: 18px; }
html[data-format="tel"] .entete-chat { padding: 10px 14px 9px; }
html[data-format="tel"] .entete-chat .cadenas { display: none; }
/* La phrase d'explication a sa place sur un écran ; sur un téléphone elle
   mange deux lignes de réponse. Le titre suffit. */
html[data-format="tel"] .mot-chat { display: none; }
html[data-format="tel"] .chiffres .tete .detail { display: none; }
html[data-format="tel"] .echanges { padding: 12px 14px; }
html[data-format="tel"] .echanges { padding: 14px; gap: 14px; }
html[data-format="tel"] .bulle { font-size: 14.5px; }
html[data-format="tel"] .pistes { padding: 0 14px 8px; }
html[data-format="tel"] .piste { font-size: 12.5px; padding: 8px 11px; }
html[data-format="tel"] .saisie { padding: 0 14px 12px; }
html[data-format="tel"] .boite textarea { font-size: 16px; }   /* 16px : iOS ne zoome pas */
html[data-format="tel"] .envoyer { width: 34px; height: 34px; }
html[data-format="tel"] .mention-chat { display: none; }
html[data-format="tel"] .mini { padding: 7px 10px; font-size: 12px; }
/* L'humeur de 8 en tête de l'onglet Assistant : marges de l'onglet, et un
   plafond en hauteur d'écran — dépliée, elle ne doit pas avaler le fil. */
html[data-format="tel"] .conscience { margin: 10px 14px 0; max-height: 34vh; }
html[data-format="tel"] .conscience .phrase { font-size: 13.5px; }
html[data-format="tel"] .conscience .sentiment .p,
html[data-format="tel"] .conscience .fragilite { font-size: 13px; }
html[data-format="tel"] .conseil .p { font-size: 14px; }
html[data-format="tel"] .conseil .assise { font-size: 12px; }

/* la porte, sur un téléphone, n'a qu'une colonne */
/* — la porte sur téléphone ————————————————————————————————————————
   Une carte posée sur un fond profond, et un socle sombre qui tient le bas
   de l'écran. Sur six pouces, la colonne de droite de l'écran large n'a plus
   de sens : elle devient cette bande, en travers. */
html[data-format="tel"] .porte {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0; padding: 0;
}
html[data-format="tel"] .porte .gauche { background: none; box-shadow: none; border-radius: 0; }
html[data-format="tel"] .porte .droite { border-radius: 16px 16px 0 0; box-shadow: none; }
html[data-format="tel"] .porte .gauche {
  padding: 0; gap: 0;
  display: grid; grid-template-rows: auto 1fr;
}
/* L'enseigne, hors de la carte : elle appartient à la page, pas au formulaire. */
html[data-format="tel"] .porte .gauche > .rangee {
  padding: 16px 20px 14px; gap: 11px;
}
html[data-format="tel"] .porte .gauche > .rangee .pastille {
  width: 30px; height: 30px; font-size: 13px; border-radius: 3px;
}
html[data-format="tel"] .porte .gauche > .rangee b { font-size: 21px; letter-spacing: .01em; }
html[data-format="tel"] .porte .gauche > .rangee .eti { font-size: 11px; letter-spacing: .2em; }

html[data-format="tel"] .porte .coeur {
  max-width: none; justify-content: flex-start;
  margin: 4px 14px 18px; padding: 30px 22px 26px;
  background: var(--pap); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}
html[data-format="tel"] .porte h1 { font-size: 33px; line-height: 1.02; letter-spacing: -.01em; }
html[data-format="tel"] .porte .accroche {
  font-size: 14.5px; line-height: 1.5; margin: 14px 0 0; max-width: none;
}
html[data-format="tel"] .porte form { width: 100%; padding-top: 24px; gap: 12px; }
html[data-format="tel"] .porte input {
  font-size: 16px;            /* 16 px : iOS ne zoome pas au tap */
  padding: 14px 15px; border-radius: 9px; background: transparent;
}
html[data-format="tel"] .porte button[type="submit"] {
  padding: 15px; border-radius: 9px; font-size: 16px; letter-spacing: .14em;
}
html[data-format="tel"] .porte .mention { font-size: 11.5px; line-height: 1.45; padding-top: 18px; align-items: flex-start; }
html[data-format="tel"] .porte .mention span:first-child { padding-top: 2px; }
/* Le pied appartient à la carte, comme sur la maquette : c'est le même bloc
   de confiance que le cadenas au-dessus, pas une note de bas de page. */
/* Corps et pied forment UNE carte : deux blocs, une seule surface. L'ombre
   ne vit que sur le pied — portée par les deux, elle dessinait une couture
   grise en travers, bien visible en clair. */
html[data-format="tel"] .porte .coeur {
  padding-bottom: 6px; border-radius: 16px 16px 0 0; margin-bottom: 0; box-shadow: none;
  /* Le pied est peint APRÈS, et son ombre monte : sans ce plan au-dessus,
     elle se posait sur le blanc du corps et dessinait une barre grise en
     travers de la carte. Bien visible en clair, presque invisible en sombre —
     donc facile à laisser passer. */
  position: relative; z-index: 1;
}
html[data-format="tel"] .porte .gauche > .pied {
  margin: 0 14px 20px; padding: 18px 22px 24px;
  background: var(--pap); border-radius: 0 0 16px 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
  font-size: 11.5px; line-height: 1.5;
}

html[data-format="tel"] .porte .droite {
  background: var(--porte-socle);
  border-radius: 16px 16px 0 0;
  padding: 20px 18px 26px; gap: 14px;
  justify-content: flex-start;
}
html[data-format="tel"] .porte .droite > div:nth-child(2) {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
/* Sur l'écran large les blocs s'empilent ; ici ils marchent côte à côte, le
   chiffre contre sa légende. */
html[data-format="tel"] .porte .droite .bloc { display: flex; align-items: baseline; gap: 6px; }
html[data-format="tel"] .porte .droite .bloc + .bloc { padding-top: 0; }
html[data-format="tel"] .porte .droite .kpi { font-size: 29px; letter-spacing: -.02em; }
html[data-format="tel"] .porte .droite .leg {
  font-size: 10px; letter-spacing: .03em; text-transform: none; line-height: 1.3;
  padding-top: 0; color: rgba(238, 242, 245, .7);
}
html[data-format="tel"] .porte .droite > div:last-child { font-size: 11px; }
/* Sur téléphone, le pied de la carte dit déjà que les données brutes ne
   sortent pas : la même phrase deux fois à l'écran (04/10/2026). */
html[data-format="tel"] .porte .droite > div:last-child { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LE LANGAGE BKLIT

   Porté depuis https://bklit.com/r/area-chart.json — dont la source est
   publique — sur la bibliothèque SVG de D8. Bklit sert du React/@visx ;
   D8 est du JavaScript simple. On n'a donc rien installé : on a repris le
   langage, pas le code.

   Sa signature tient en une courbe d'accélération : `cubic-bezier(.85,0,.15,1)`
   sur 1 100 ms. Départ lent, accélération franche, arrêt net. C'est elle qui
   fait le « futurisme » — pas les couleurs, qui restent celles de Qualitest.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --bk-duree: 1100ms;
  --bk-aise: cubic-bezier(.85, 0, .15, 1);
}

/* LA RÉVÉLATION. Le masque s'élargit de gauche à droite et découvre le
   dessin. On anime la LARGEUR du rectangle de découpe, pas l'opacité : le
   graphique n'apparaît pas, il se trace. */
.bk-rev {
  transform-origin: left center;
  animation: bk-revele var(--bk-duree) var(--bk-aise) both;
}
@keyframes bk-revele { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Le trait de la courbe se dessine en même temps, avec sa lueur. */
.gr-trait {
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc-fort) 45%, transparent));
}

/* ── LE PRÉ-GRAPHIQUE ─────────────────────────────────────────────────────
   La place du graphique est tenue AVANT que la donnée arrive : même forme,
   même hauteur, donc aucun saut de mise en page au moment du remplissage.
   Un squelette balayé par une lumière, et un texte qui scintille. */

.gr-attente { position: relative; }
.gr-squelette { width: 100%; display: block; }

.bk-os {
  fill: color-mix(in srgb, var(--ink) 8%, transparent);
  animation: bk-respire 1.9s ease-in-out infinite;
}
.bk-os-b { animation-duration: 2.3s; }
.bk-anneau {
  fill: none; stroke: color-mix(in srgb, var(--ink) 8%, transparent); stroke-width: 34;
}
.bk-os-aire { fill: color-mix(in srgb, var(--acc) 7%, transparent); }
.bk-os-trait {
  fill: none; stroke: color-mix(in srgb, var(--acc) 22%, transparent);
  stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 4 7; animation: bk-respire 2.1s ease-in-out infinite;
}
@keyframes bk-respire { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Le balayage : une bande de lumière qui traverse le squelette, comme la
   lueur d'un scanner. C'est ce que Bklit appelle `loading-sweep`. */
.bk-balai { animation: bk-balaie 1.9s var(--bk-aise) infinite; }
@keyframes bk-balaie {
  from { transform: translateX(0); }
  to   { transform: translateX(200%); }
}

/* Le texte scintillant — `shimmering-text` chez Bklit. Un dégradé qui
   traverse les lettres, obtenu par `background-clip: text`. */
.bk-scintille {
  margin-top: 10px; text-align: center;
  font-size: .82rem; letter-spacing: .02em;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--ink) 38%, transparent) 20%,
    var(--acc-fort) 44%, var(--acc-fort) 52%,
    color-mix(in srgb, var(--ink) 38%, transparent) 76%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: bk-scintille 2.4s linear infinite;
}
@keyframes bk-scintille {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* Qui ne veut pas de mouvement n'en a pas : le graphique s'affiche d'un coup,
   entier. L'information ne dépend jamais de l'animation. */
@media (prefers-reduced-motion: reduce) {
  .bk-rev { animation: none; }
  .bk-balai, .bk-os, .bk-os-trait, .bk-scintille { animation: none; }
  .bk-scintille { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
}

/* ══════════════════════════════════════════════════════════════════════════
   D8 · VERSION 2 (26/09/2026)
   La refonte d'après le didacticiel de PLOOM, que jules a trouvé « vraiment
   sympa » : noir franc (jamais un dégradé de fond — sa règle), un titre qui
   prend la place, le bleu de Qualitest (celui du logo : #0090D3, #73D9FF,
   #375CAD), des objets posés qui portent leur propre lumière — un liseré sur
   l'arête du haut, une ombre profonde —, et une seule chose qui bouge à la
   fois. Les cartes arrondies de la maquette téléphone restent (acquis du
   21/08), les filets gris entre les zones restent absents (acquis du 25/08).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --q-bleu: #0090D3;
  --q-clair: #73D9FF;
  --q-profond: #375CAD;
  --sortie: cubic-bezier(.22, .61, .36, 1);
  --f-titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --f-corps: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --fond: #f5f5f7;
  --pap: #ffffff;
  --pap-2: #ececf0;
  --ink: #0b0b0c;
  --tx-2: rgba(11, 11, 12, .74);
  --sourd: rgba(11, 11, 12, .52);
  --lin: rgba(11, 11, 12, .10);
  --lin-doux: rgba(11, 11, 12, .06);
  --acc: #0090D3;
  --acc-tx: #0071a8;
  --acc-fort: #375CAD;
  --acc-t: rgba(0, 144, 211, .14);
  --acc-t2: rgba(0, 144, 211, .07);
  --acc-300: #73D9FF;
  --acc-400: #0090D3;
  --rayon: 16px;
  --rayon-s: 10px;
  --rayon-l: 22px;
  --ombre: 0 30px 70px -30px rgba(0, 0, 0, .28);
}
html[data-lum="dark"] {
  --fond: #000000;
  --pap: #0a0a0b;
  --pap-2: #141416;
  --ink: #ffffff;
  --tx-2: rgba(255, 255, 255, .72);
  --sourd: rgba(255, 255, 255, .48);
  --lin: rgba(255, 255, 255, .10);
  --lin-doux: rgba(255, 255, 255, .06);
  --acc: #0090D3;
  --acc-tx: #73D9FF;
  --acc-fort: #73D9FF;
  --acc-nuit: #000;
  --acc-t: rgba(0, 144, 211, .20);
  --acc-t2: rgba(0, 144, 211, .09);
  --acc-300: #375CAD;
  --acc-400: #0090D3;
  --porte-fond: #000;
  --porte-socle: #000;
  --ombre: 0 40px 90px -40px rgba(0, 0, 0, 1);
}
body { font-family: var(--f-corps); -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1, h2, h3, b, strong { letter-spacing: -.02em; }
.titre-page, .h-client { font-weight: 760; letter-spacing: -.04em; }
.bascule button[aria-pressed="true"] { background: var(--ink); color: var(--fond); }
html[data-lum="dark"] .chat, html[data-lum="dark"] .chiffres .fouille,
html[data-lum="dark"] .carte-etude, html[data-lum="dark"] .cadre {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--ombre);
}

/* — le centre : rapport ou diaporama ——————————————————————————————— */
.centre { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.centre > .scene { flex: 1 1 auto; }
.centre > [hidden], .etude [hidden] { display: none !important; }
.bascule-centre { display: inline-flex; flex: 0 0 auto; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--pap); box-shadow: inset 0 0 0 1px var(--lin); }
.bascule-centre button { position: relative; padding: 6px 14px; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; color: var(--sourd); transition: background .2s var(--sortie), color .2s; }
.bascule-centre button[aria-pressed="true"] { background: var(--ink); color: var(--fond); }
.scene .bascule-centre { margin-right: 4px; }
.r-pastille { position: absolute; top: 3px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--q-bleu); box-shadow: 0 0 0 3px var(--acc-t); animation: r-bat 1.6s ease-in-out infinite; }
@keyframes r-bat { 50% { box-shadow: 0 0 0 6px transparent; } }

.rapport { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px 20px 0; }
.r-entete { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.r-meta { font-size: 12px; color: var(--sourd); font-variant-numeric: tabular-nums; }
.r-outils { display: flex; align-items: center; gap: 8px; }
.r-pas { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lin); }
.r-mini { width: 30px; height: 30px; border-radius: 999px; font-size: 16px; color: var(--ink); }
.r-mini:hover { background: var(--acc-t2); }
.r-mini:disabled { opacity: .32; cursor: default; background: none; }
.r-mini-n { font-size: 12px; min-width: 34px; text-align: center; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.r-bouton { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--lin); transition: transform .18s var(--sortie), background .18s; }
.r-bouton:hover { background: var(--acc-t2); }
.r-bouton.plein { background: var(--ink); color: var(--fond); box-shadow: none; }
.r-bouton:active { transform: scale(.97); }

.rapport-defile { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 6px 4px 40px;
  scroll-behavior: smooth; }
.r-panne { margin: 40px auto; max-width: 460px; color: var(--alerte); text-align: center; line-height: 1.6; }
/* Nuit du 30/09 : sur ordinateur, la feuille se compose à 794 px, comme le
   PDF, et se réduit à la colonne (`--zf`, posé par `rapportZoomer`). */
html:not([data-format="tel"]) .rapport-defile > .feuille { width: 794px; max-width: none; flex-shrink: 0; zoom: var(--zf, 1); }

/* La feuille : une page blanche posée sur le noir, comme les pages du PDF
   dans le didacticiel. Elle garde sa lumière propre — ses couleurs sont
   celles du papier, quelle que soit l'ambiance de l'écran — sinon les
   graphiques s'écriraient en blanc sur blanc. */
.feuille {
  --fond: #f4f6f9; --pap: #ffffff; --pap-2: #eef1f5; --ink: #0b0b0c;
  --tx-2: rgba(11, 11, 12, .76); --sourd: rgba(11, 11, 12, .52);
  --lin: rgba(11, 11, 12, .10); --lin-doux: rgba(11, 11, 12, .06);
  --acc: #0090D3; --acc-tx: #0071a8; --acc-fort: #375CAD;
  --acc-t: rgba(0, 144, 211, .14); --acc-t2: rgba(0, 144, 211, .07);
  --acc-300: #73D9FF; --acc-400: #0090D3;
  position: relative; width: 100%; max-width: 760px; flex: 0 0 auto;
  min-height: calc(min(760px, 100%) * 1.414);
  background: #fff; color: var(--ink); border-radius: 18px;
  padding: 34px 44px 60px; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 40px 90px -40px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .06);
  opacity: 0; transform: translateY(26px) scale(.985);
}
.feuille.vue, .sans-anim .feuille { animation: r-monte 700ms var(--sortie) both; animation-delay: var(--d, 0ms); }
.sans-anim .feuille { animation-duration: 1ms; }
@keyframes r-monte { to { opacity: 1; transform: none; } }
.f-tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 26px; }
.f-titre-court { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sourd);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-corps { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; }
.f-pied { position: absolute; left: 44px; right: 44px; bottom: 22px; display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--sourd); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.r-marque { display: flex; align-items: center; gap: 7px; }
.r-marque .r-d8 { font-weight: 800; letter-spacing: -.04em; font-size: 15px; }
.r-marque .r-by { font-size: 11px; color: var(--sourd); }
.r-marque img { height: 15px; margin-left: 3px; }

.r-sur { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--acc-tx); font-weight: 600; }
.r-h1 { margin: 0; font-size: clamp(34px, 5.4vw, 60px); font-weight: 780; letter-spacing: -.045em; line-height: .98; }
.r-bleu { background: linear-gradient(94deg, var(--q-clair), var(--q-bleu) 52%, var(--q-profond));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.r-h2 { margin: 0; font-size: 32px; font-weight: 760; letter-spacing: -.035em; line-height: 1.04; }
.r-chapeau { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tx-2); max-width: 600px; }
.feuille h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourd); font-weight: 650; }
.r-avertir { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(176, 122, 63, .09); color: #8a5a22; font-size: 13px; line-height: 1.5; }

.r-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 4px; }
.r-tuile { background: var(--fond); border-radius: 14px; padding: 16px 14px 13px; }
.r-valeur { font-size: 30px; font-weight: 760; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.r-tuile:first-child .r-valeur { color: var(--q-bleu); }
.r-mot { margin-top: 8px; font-size: 11.5px; color: var(--sourd); line-height: 1.3; }
.r-deux { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; margin-top: auto; }
.r-essentiel { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.r-essentiel li { padding-left: 16px; position: relative; font-size: 14px; line-height: 1.4; }
.r-essentiel li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--q-bleu); }
.r-essentiel b { font-weight: 600; letter-spacing: -.01em; }
.r-sommaire { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.r-sommaire li { display: flex; gap: 10px; font-size: 13px; color: var(--tx-2); line-height: 1.35; }
.r-num { font-variant-numeric: tabular-nums; color: var(--acc-tx); font-weight: 700; flex: 0 0 auto; }

.r-bloc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.r-code { font-size: 11px; color: var(--sourd); letter-spacing: .03em; }
.r-constat { margin: 0; font-size: 25px; font-weight: 740; letter-spacing: -.03em; line-height: 1.12; }
.f-duo .r-constat { font-size: 19px; }
.r-geant { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.r-geant .r-compte { font-size: clamp(64px, 11vw, 112px); font-weight: 800; letter-spacing: -.06em; line-height: .9;
  background: linear-gradient(94deg, var(--q-clair), var(--q-bleu) 52%, var(--q-profond));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.r-geant-mot { font-size: 16px; color: var(--tx-2); max-width: 280px; }
.r-dessin { min-width: 0; }
.r-dessin .gr { border: 0; padding: 0; background: none; }
.r-ecart { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tx-2); }
.r-clair { display: flex; gap: 10px; align-items: baseline; background: var(--acc-t2); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; line-height: 1.45; }
.r-clair b { flex: 0 0 auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-tx); }
.r-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.r-halteres-boite { display: flex; flex-direction: column; gap: 6px; }
.r-legende-h { font-size: 11.5px; color: var(--sourd); }
.r-halteres { width: 100%; height: auto; overflow: visible; }
.r-moy { stroke: var(--sourd); stroke-dasharray: 3 4; }
.r-h-nom, .r-h-val { font-size: 12px; fill: var(--tx-2); font-family: var(--f-corps); }
.r-h-val { font-weight: 700; fill: var(--ink); }
.r-h-trait { stroke: var(--acc-300); stroke-width: 3; stroke-linecap: round; }
.r-h-point { fill: var(--q-bleu); }
.r-h-point.haut { fill: var(--q-profond); }
.r-h-point.bas { fill: #b07a3f; }
.feuille.vue .r-h-trait { stroke-dasharray: 400; stroke-dashoffset: 400; animation: r-trace 900ms var(--sortie) forwards; animation-delay: calc(var(--d, 0ms) + 250ms); }
.feuille.vue .r-h-point { transform-box: fill-box; transform-origin: center; animation: r-pop 500ms var(--sortie) both; animation-delay: calc(var(--d, 0ms) + 450ms); }
@keyframes r-trace { to { stroke-dashoffset: 0; } }
@keyframes r-pop { from { transform: scale(0); } to { transform: scale(1); } }

.r-ecarts { display: flex; flex-direction: column; gap: 16px; }
.r-ecart-l { display: flex; flex-direction: column; gap: 6px; }
.r-ecart-t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.r-barre-duo { display: flex; flex-direction: column; gap: 4px; }
.r-bd { position: relative; height: 22px; border-radius: 7px; background: var(--fond); overflow: hidden; }
.r-bd i { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: linear-gradient(90deg, var(--q-bleu), var(--q-clair)); transform-origin: left; transform: scaleX(0); }
.r-bd.bas i { background: #d9dde4; }
.feuille.vue .r-bd i { animation: r-pousse 900ms var(--sortie) forwards; animation-delay: calc(var(--d, 0ms) + 200ms); }
@keyframes r-pousse { to { transform: scaleX(1); } }
.r-bd span { position: relative; z-index: 1; font-size: 11.5px; line-height: 22px; padding-left: 9px; font-weight: 600; color: #0b0b0c; white-space: nowrap; }
.r-ecart-p { font-size: 11.5px; color: var(--sourd); }
.r-liens { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--tx-2); }

.r-qr { display: flex; flex-direction: column; gap: 14px; }
.r-qr-l { border-radius: 14px; background: var(--fond); padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.r-q { font-weight: 650; font-size: 14px; letter-spacing: -.01em; display: flex; gap: 8px; align-items: center; }
.r-a { font-size: 13.5px; line-height: 1.5; color: var(--tx-2); }
.r-epingle { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #fff; border-radius: 999px; padding: 2px 8px; }
.r-vide { color: var(--sourd); font-size: 13.5px; }

.r-humeur { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--tx-2); }
.r-humeur b { color: var(--ink); }
.r-conseils { display: flex; flex-direction: column; gap: 12px; }
.r-conseil { display: flex; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--fond); }
.r-conseil .r-num { font-size: 22px; letter-spacing: -.04em; }
.r-conseil b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.r-conseil span { display: block; font-size: 13px; color: var(--tx-2); line-height: 1.45; }
.r-conseil em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-tx); }
.r-methode { margin-top: auto; border-top: 1px solid var(--lin); padding-top: 16px; }
.r-methode p { margin: 0 0 6px; font-size: 12px; line-height: 1.55; color: var(--sourd); }
.r-fragile { color: #8a5a22 !important; }
.feuille.vue .r-conseil, .feuille.vue .r-qr-l, .feuille.vue .r-ecart-l {
  animation: r-monte 600ms var(--sortie) both; animation-delay: calc(var(--d, 0ms) + 180ms);
}
.r-conseil, .r-qr-l, .r-ecart-l { opacity: 0; transform: translateY(10px); }
.sans-anim .r-conseil, .sans-anim .r-qr-l, .sans-anim .r-ecart-l { opacity: 1; transform: none; animation: none; }
.sans-anim .r-bd i { transform: none; animation: none; }

/* 8 compose : trois feuilles fantômes le temps d'un souffle. */
.r-squelette { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.r-ecrit { font-size: 13px; color: var(--sourd); }
.f-fantome { opacity: 1; transform: none; min-height: 280px; gap: 14px; background: var(--pap); box-shadow: inset 0 0 0 1px var(--lin); }
.r-trait { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--lin-doux), var(--lin), var(--lin-doux)); background-size: 200% 100%; animation: r-balaye 1.1s linear infinite; }
.r-trait.l1 { width: 30%; height: 12px; } .r-trait.l2 { width: 72%; height: 34px; } .r-trait.l3 { width: 56%; height: 14px; }
.r-trait.bloc { width: 100%; height: 150px; }
@keyframes r-balaye { to { background-position: -200% 0; } }

/* Le bouton « Ajouter au rapport » sous une réponse de 8. */
.au-rapport { align-self: flex-start; margin-top: 2px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--acc-tx); box-shadow: inset 0 0 0 1px var(--acc-t); transition: background .18s; }
.au-rapport:hover { background: var(--acc-t2); }
.au-rapport.fait { color: var(--sourd); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .feuille, .feuille.vue, .r-conseil, .r-qr-l, .r-ecart-l { animation: none !important; opacity: 1; transform: none; }
  .r-bd i, .r-h-trait { animation: none !important; transform: none; stroke-dashoffset: 0; }
}

/* Le téléphone : le rapport prend l'onglet entier ; trois onglets. */
html[data-format="tel"] .onglets { grid-template-columns: 1fr 1fr 1fr; }
html[data-format="tel"] .onglets button { position: relative; }
html[data-format="tel"] .etude.tel .rapport { flex: 1 1 auto; min-height: 0; padding: 10px 10px 0; }
html[data-format="tel"] .r-entete .bascule-centre { display: none; }
html[data-format="tel"] .feuille { padding: 22px 18px 50px; border-radius: 14px; min-height: 0; }
html[data-format="tel"] .f-pied { left: 18px; right: 18px; bottom: 16px; }
html[data-format="tel"] .r-tuiles { grid-template-columns: 1fr 1fr; }
html[data-format="tel"] .r-deux, html[data-format="tel"] .r-duo { grid-template-columns: 1fr; }
html[data-format="tel"] .r-constat { font-size: 21px; }
html[data-format="tel"] .f-titre-court { display: none; }
@media (max-width: 900px) { .r-duo, .r-deux { grid-template-columns: 1fr; } }

/* Le PDF : les feuilles, et elles seules, en A4, en clair. */
#impression { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html.imprime, html.imprime body { height: auto !important; overflow: visible !important; background: #fff !important; }
  html.imprime body > *:not(#impression) { display: none !important; }
  html.imprime #impression { display: block; }
  #impression .feuille { width: 210mm; max-width: none; min-height: 297mm; height: 297mm; overflow: hidden;
    margin: 0; border-radius: 0; box-shadow: none; opacity: 1; transform: none; animation: none;
    break-after: page; page-break-after: always; padding: 16mm 16mm 20mm; }
  #impression .f-pied { left: 16mm; right: 16mm; bottom: 9mm; }
  #impression .r-conseil, #impression .r-qr-l, #impression .r-ecart-l { opacity: 1; transform: none; animation: none; }
  #impression .r-bd i { transform: none; animation: none; }
  #impression .r-h-trait { stroke-dashoffset: 0; animation: none; }
  #impression * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.r-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-format="tel"] .r-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-tuile:last-child .r-valeur { font-size: 21px; line-height: 1.25; }
/* En clair, la feuille blanche se pose sur un fond presque blanc : un fil
   d'ombre la détache, sans trait gris entre les zones. */
html:not([data-lum="dark"]) .feuille { box-shadow: 0 0 0 1px rgba(11, 11, 12, .06), 0 30px 60px -30px rgba(11, 11, 12, .28); }

/* — le dépôt d'un classeur (espace Qualitest) ———————————————————————— */
.depot { margin-top: 26px; }
.depot-zone { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 30px 20px; border-radius: var(--rayon-l); background: var(--pap); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--lin); transition: box-shadow .2s var(--sortie), transform .2s var(--sortie); }
.depot-zone:hover, .depot-zone.survol { box-shadow: inset 0 0 0 1.5px var(--q-bleu); transform: translateY(-1px); }
.depot-zone b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.depot-zone span { font-size: 13px; color: var(--sourd); max-width: 520px; line-height: 1.5; }
.depot-zone .depot-erreur { color: var(--alerte); }
.depot-icone { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--q-clair), var(--q-bleu) 55%, var(--q-profond)); }
.depot-zone.occupe { flex-direction: row; justify-content: center; }
.depot-carte { border-radius: var(--rayon-l); background: var(--pap); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: inset 0 0 0 1px var(--lin); animation: apparait .35s var(--sortie) both; max-width: 640px; }
.depot-carte h3 { margin: 0; font-size: 22px; font-weight: 740; letter-spacing: -.03em; }
.depot-carte label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--sourd); }
.depot-carte input { font: inherit; font-size: 14px; color: var(--ink); background: var(--fond); border: 0; border-radius: 10px;
  padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--lin); outline: none; }
.depot-carte input:focus { box-shadow: inset 0 0 0 1.5px var(--q-bleu); }
.depot-raisons { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--tx-2); line-height: 1.5; }
.depot-mention { font-size: 12.5px; color: var(--acc-tx); }
.depot-mention.nouveau { color: var(--alerte); }
.depot-acces { border-radius: 12px; background: var(--acc-t2); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.depot-acces pre { margin: 0; font-size: 13px; white-space: pre-wrap; user-select: all; }

/* — autour du client (la veille) ————————————————————————————————————— */
.chiffres .veille { margin: 12px 16px 0; background: var(--pap); border-radius: var(--rayon); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 8px; max-height: 32vh; overflow-y: auto; box-shadow: inset 0 0 0 1px var(--lin); }
.veille .corps { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--tx-2); }
.v-conseil { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 10px; background: var(--acc-t2); }
.v-conseil a, .v-item em { font-size: 11px; color: var(--acc-tx); font-style: normal; text-decoration: none; }
.v-titre { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sourd); margin-top: 4px; }
.v-item { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; padding: 4px 0; }
.v-item:hover span:nth-child(2) { color: var(--acc-tx); }
.v-cat { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sourd); }
.r-methode-mini { margin-top: auto; font-size: 11.5px; color: var(--sourd); line-height: 1.5; }
.r-conseil span { word-break: break-word; }
/* v2 : les cartes clients quittent le plan à croix pour l'objet posé. */
.carte-client.plan { border: 0; border-radius: var(--rayon-l); background: var(--pap);
  box-shadow: inset 0 0 0 1px var(--lin); transition: transform .2s var(--sortie), box-shadow .2s var(--sortie); }
.carte-client.plan:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--q-bleu); }
.carte-client.plan .coin { display: none; }
.carte-client .sigle { border-radius: 12px; background: linear-gradient(135deg, var(--q-clair), var(--q-bleu) 55%, var(--q-profond)); color: #fff; }
.carte-client .jeton { border-radius: 999px; }
.titre-page { font-size: clamp(40px, 5.4vw, 72px); line-height: .98; }
.page > .rangee, .grille, .depot { animation: apparait .5s var(--sortie) both; }
.grille { animation-delay: 80ms; }
.acces-liste { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.acces-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--rayon); background: var(--pap); box-shadow: inset 0 0 0 1px var(--lin); }
.acces-ligne b { font-size: 15px; } .acces-ligne > span { font-size: 12.5px; color: var(--sourd); }

/* ══════════════════════════════════════════════════════════════════════════
   LE RAPPORT, VERSION 3 (banc du 26/09/2026)
   « Il faut vraiment que les rapports soient beaux » (jules). Une feuille
   = une page A4, à l'écran comme à l'impression : 794 px de large (210 mm),
   la même mise en page partout, si bien qu'un rapport vérifié à l'écran ne
   déborde pas une fois imprimé (le banc le mesure sur des milliers de
   rapports). Un chiffre héros par page, des titres serrés, des marges
   généreuses, trois bleus du logo, des gris, et l'ambre pour ce qui alerte.
   Aucun filet : des objets posés, des pistes arrondies.
   ══════════════════════════════════════════════════════════════════════════ */

.feuille {
  --q1: #73D9FF; --q2: #0090D3; --q3: #375CAD; --ambre: #b07a3f;
  --piste: #edf1f6; --gris-b: #c6cfda; --teinte-douce: #f3f8fc;
  width: 100%; max-width: 794px; min-height: 0; aspect-ratio: 210 / 297;
  padding: 50px 60px 78px; border-radius: 14px;
  font-family: var(--f-corps); font-size: 13px; line-height: 1.5; letter-spacing: -.003em;
}
.feuille .f-tete { padding-bottom: 30px; }
.feuille .f-titre-court { font-size: 10px; letter-spacing: .16em; }
.feuille .f-corps { gap: 16px; min-height: 0; }
.feuille .f-pied { left: 60px; right: 60px; bottom: 28px; font-size: 10px; color: var(--sourd); letter-spacing: .02em; }
.feuille .f-pied span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--q2); }

.feuille .r-sur { font-size: 10.5px; letter-spacing: .2em; color: var(--q2); font-weight: 650; }
.feuille .r-h1 { font-size: 52px; font-weight: 780; letter-spacing: -.045em; line-height: 1; margin: 2px 0 0; }
.feuille .r-h1.long { font-size: 42px; }
.feuille .r-h1.tres-long { font-size: 33px; line-height: 1.06; }
.feuille .r-bleu { background: linear-gradient(96deg, var(--q1), var(--q2) 48%, var(--q3)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.feuille .r-h2 { font-size: 30px; font-weight: 760; letter-spacing: -.04em; line-height: 1.06; margin: 0; }
.feuille .r-chapeau { font-size: 13.5px; line-height: 1.55; color: var(--tx-2); max-width: 620px; margin: 0; }
.feuille h3 { font-size: 10.5px; letter-spacing: .16em; margin: 0 0 12px; color: var(--sourd); font-weight: 650; }
.feuille .r-num { color: var(--q2); }

/* — la couverture — */
.f-couverture .f-corps { gap: 18px; }
.r-heros { display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center;
  background: var(--teinte-douce); border-radius: 20px; padding: 18px 26px 18px 18px; }
.r-heros-k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--q2); font-weight: 650; margin-bottom: 6px; }
.r-heros-p { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.22; color: var(--ink); }
.r-heros-b { margin-top: 8px; font-size: 11px; color: var(--sourd); }
.feuille .r-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.feuille .r-tuile { background: #f5f7fa; border-radius: 14px; padding: 14px 14px 12px; }
.feuille .r-tuile .r-valeur { font-size: 26px; font-weight: 760; letter-spacing: -.04em; color: var(--ink); }
.feuille .r-tuile:first-child .r-valeur { color: var(--q2); }
.feuille .r-tuile .r-tuile-mot { font-size: 19px; letter-spacing: -.02em; }
.feuille .r-tuile .r-mot { margin-top: 6px; font-size: 10.5px; line-height: 1.3; }
.r-avertirs { display: flex; flex-direction: column; gap: 6px; }
.feuille .r-avertir { padding: 9px 13px; border-radius: 12px; background: rgba(176, 122, 63, .08); color: #7d5220; font-size: 11.5px; line-height: 1.45; }
.feuille .r-deux { margin-top: 6px; grid-template-columns: 1.2fr 1fr; gap: 30px; }
.feuille .r-essentiel { gap: 10px; }
.feuille .r-essentiel li { font-size: 12.5px; line-height: 1.45; color: var(--ink); padding-left: 18px; }
.feuille .r-essentiel li::before { top: .45em; width: 8px; height: 8px; background: linear-gradient(135deg, var(--q1), var(--q2)); }
.feuille .r-sommaire { gap: 6px; }
.feuille .r-sommaire li { font-size: 12px; }

/* — l'anneau — */
.r-anneau { position: relative; width: max-content; display: grid; place-items: center; }
.r-anneau-svg { display: block; overflow: visible; }
.r-anneau-fond { fill: none; stroke: var(--piste); stroke-width: 16; }
.r-anneau-arc { fill: none; stroke-width: 16; stroke-linecap: round; }
.r-anneau-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 26px; }
.r-anneau-c b { font-size: 34px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.r-anneau-c span { margin-top: 5px; font-size: 10px; line-height: 1.25; color: var(--sourd); max-width: 104px; }
.feuille.vue .r-anneau-arc { animation: r-arc 1100ms var(--sortie) both; }
@keyframes r-arc { from { stroke-dasharray: 0 999; } }

/* — un résultat — */
.feuille .r-bloc { gap: 12px; }
.feuille .r-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 10.5px; color: var(--sourd); letter-spacing: .01em; }
.r-code-q { font-weight: 700; color: var(--q2); background: rgba(0, 144, 211, .09); border-radius: 999px; padding: 1px 8px; }
.r-code-p { border-radius: 999px; padding: 1px 8px; background: #f1f3f6; color: var(--tx-2); }
.feuille .r-constat { font-size: 27px; font-weight: 760; letter-spacing: -.035em; line-height: 1.12; margin: 0; }
.f-duo .r-constat { font-size: 18px; line-height: 1.2; }
.r-une { display: grid; grid-template-columns: 180px 1fr; gap: 30px; align-items: center; margin: 6px 0 4px; }
.r-graphe { min-width: 0; }
.feuille .r-ecart { font-size: 12.5px; line-height: 1.55; color: var(--tx-2); margin: 0; }
.feuille .r-clair { border-radius: 14px; background: var(--teinte-douce); padding: 12px 16px; font-size: 12.5px; line-height: 1.5; gap: 12px; }
.feuille .r-clair b { font-size: 9.5px; letter-spacing: .16em; color: var(--q2); padding-top: 2px; }
.feuille .r-duo { grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

/* — les barres — */
.r-barres { display: flex; flex-direction: column; gap: 9px; }
.r-bh { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 42px; align-items: center; gap: 12px; }
.r-barres.rangs .r-bh { grid-template-columns: 18px minmax(0, 40%) minmax(0, 1fr) 42px; }
.r-bh-nom { font-size: 12px; line-height: 1.25; color: var(--tx-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.r-bh-piste { position: relative; height: 9px; border-radius: 999px; background: var(--piste); overflow: hidden; }
.r-bh-piste i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--gris-b); transform-origin: left; }
.r-bh.vise .r-bh-piste i { background: linear-gradient(90deg, var(--q1), var(--q2)); }
.r-bh.nsp .r-bh-piste i { background: #dfe4ea; }
.r-bh.nsp .r-bh-nom { color: var(--sourd); font-style: italic; }
.r-bh-val { font-size: 12.5px; font-weight: 720; text-align: right; font-variant-numeric: tabular-nums; color: var(--sourd); }
.r-bh.vise .r-bh-val { color: var(--ink); }
.r-bh-reste { font-size: 10.5px; color: var(--sourd); padding-left: calc(38% + 12px); }
.r-barres.serre { gap: 7px; }
.r-barres.serre .r-bh { grid-template-columns: minmax(0, 44%) minmax(0, 1fr) 38px; gap: 9px; }
.r-barres.serre .r-bh-nom { font-size: 11px; }
.r-rang { font-size: 11px; font-weight: 700; color: var(--sourd); font-variant-numeric: tabular-nums; text-align: right; }
.r-bh.premier .r-rang { color: var(--q2); }
.r-bh.premier .r-bh-piste i { background: linear-gradient(90deg, var(--q2), var(--q3)); }
.r-bh.premier .r-bh-nom { color: var(--ink); font-weight: 650; }
.r-bh.dernier .r-bh-piste i { background: var(--gris-b); }
.r-flou .r-bh .r-bh-piste i { background: linear-gradient(90deg, #d7dde5, #9fb0c3); }
.feuille.vue .r-bh-piste i { animation: r-pousse 900ms var(--sortie) both; animation-delay: calc(var(--d, 0ms) + 200ms); }

/* — les haltères : chaque groupe face à l'ensemble — */
.r-halteres-boite { display: flex; flex-direction: column; gap: 10px; }
.r-hl-tete { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; color: var(--sourd); }
.r-hl-moy-l { color: var(--tx-2); font-weight: 650; white-space: nowrap; }
.r-hl-corps { display: flex; flex-direction: column; gap: 4px; }
.r-hl { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr) 44px 74px; align-items: center; gap: 12px; min-height: 30px; }
.r-hl-nom { font-size: 12px; color: var(--tx-2); line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.r-hl-piste { position: relative; height: 26px; }
.r-hl-piste::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: var(--piste); }
.r-hl-piste::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: var(--moy); border-left: 1.5px dashed rgba(11, 11, 12, .35); }
.r-hl-trait { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: var(--q1); }
.r-hl-point { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--q2); box-shadow: 0 0 0 3px #fff; z-index: 1; }
.r-hl.haut .r-hl-point { background: var(--q3); }
.r-hl.bas .r-hl-point { background: var(--ambre); }
.r-hl.bas .r-hl-trait { background: rgba(176, 122, 63, .45); }
.r-hl-val { font-size: 13px; font-weight: 740; text-align: right; font-variant-numeric: tabular-nums; }
.r-hl.haut .r-hl-val { color: var(--q3); }
.r-hl.bas .r-hl-val { color: var(--ambre); }
.r-hl-base { font-size: 10px; color: var(--sourd); font-variant-numeric: tabular-nums; }
.feuille.vue .r-hl-point { animation: r-pop 500ms var(--sortie) both; animation-delay: calc(var(--d, 0ms) + 300ms); }

/* — la moyenne et les notes — */
.r-moyenne { display: flex; align-items: baseline; gap: 14px; }
.r-moyenne b { font-size: 76px; font-weight: 800; letter-spacing: -.06em; line-height: .9; background: linear-gradient(96deg, var(--q1), var(--q2) 55%, var(--q3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r-moyenne span { font-size: 13px; color: var(--tx-2); max-width: 360px; line-height: 1.4; }
.feuille .r-dist { display: flex; align-items: flex-end; gap: 8px; height: 230px; padding: 0 2px; }
.r-dist-c { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.r-dist-v { font-size: 11px; font-weight: 700; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.r-dist-b { flex: 1 1 auto; width: 100%; max-width: 46px; display: flex; align-items: flex-end; }
.r-dist-b i { display: block; width: 100%; border-radius: 9px 9px 4px 4px; background: #a9dcf5; transform-origin: bottom; }
.r-dist-c.haut .r-dist-b i { background: linear-gradient(180deg, var(--q2), var(--q3)); }
.r-dist-c.bas .r-dist-b i { background: var(--gris-b); }
.r-dist-n { font-size: 12px; font-weight: 700; color: var(--ink); }
.feuille.vue .r-dist-b i { animation: r-colonne 800ms var(--sortie) both; animation-delay: calc(var(--d, 0ms) + 200ms); }
@keyframes r-colonne { from { transform: scaleY(0); } }
.r-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.feuille .r-cle { background: #f5f7fa; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feuille .r-cle .r-valeur { font-size: 30px; font-weight: 780; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.feuille .r-cle.haut .r-valeur { color: var(--q2); }
.feuille .r-cle.bas .r-valeur { color: #6d7b8c; }
.feuille .r-cle .r-mot { font-size: 11.5px; font-weight: 650; color: var(--ink); margin: 0; }
.r-cle-q { font-size: 10.5px; color: var(--sourd); line-height: 1.35; }

/* — les chiffres clés — */
.r-cles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.r-cles.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-cles .r-cle { padding: 18px 18px 16px; gap: 7px; }
.r-cles .r-cle .r-valeur { font-size: 40px; color: var(--q2); }
.r-cles .r-cle:first-child .r-valeur { color: var(--q3); }
.r-cle-jauge { height: 5px; border-radius: 999px; background: #e3e9f0; overflow: hidden; }
.r-cle-jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--q1), var(--q2)); }

/* — le portrait — */
.r-profil { display: flex; flex-direction: column; gap: 18px; }
.r-profil-l { display: flex; flex-direction: column; gap: 8px; }
.r-profil-f { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.r-profil-f em { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--sourd); }
.r-profil-echelle { position: relative; height: 16px; margin: 0 7px; }
.r-profil-echelle::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: var(--piste); }
.r-profil-plage { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 999px; background: linear-gradient(90deg, rgba(176, 122, 63, .4), var(--q1)); }
.r-profil-moy { position: absolute; top: -2px; bottom: -2px; border-left: 1.5px dashed rgba(11, 11, 12, .35); }
.r-profil-pt { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; }
.r-profil-pt.haut { background: var(--q3); }
.r-profil-pt.bas { background: var(--ambre); }
.r-profil-g { display: flex; justify-content: space-between; gap: 16px; font-size: 11.5px; color: var(--tx-2); }
.r-profil-g > span { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.r-profil-g b { font-size: 13px; font-weight: 760; font-variant-numeric: tabular-nums; }
.r-profil-g .bas b { color: var(--ambre); }
.r-profil-g .haut { text-align: right; justify-content: flex-end; }
.r-profil-g .haut b { color: var(--q3); }

/* — l'échantillon, la fiche — */
.r-reps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 34px; }
.r-rep h3 { margin-bottom: 10px; }
.r-fiche { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.r-fiche li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 12px; color: var(--tx-2); }
.r-fiche em { font-style: normal; font-size: 10.5px; color: var(--sourd); font-variant-numeric: tabular-nums; }

/* — ce qui sépare les gens — */
.feuille .r-ecarts { gap: 18px; }
.feuille .r-ecart-t { font-size: 13px; font-weight: 650; }
.feuille .r-barre-duo { gap: 6px; }
.feuille .r-bd { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 42px; gap: 12px; align-items: center; height: auto; background: none; overflow: visible; border-radius: 0; }
.r-bd-nom { font-size: 11.5px; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-bd-piste { position: relative; height: 9px; border-radius: 999px; background: var(--piste); overflow: hidden; }
.feuille .r-bd .r-bd-piste i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--q1), var(--q2)); transform: none; }
.feuille .r-bd.bas .r-bd-piste i { background: var(--gris-b); }
.feuille .r-bd b { font-size: 12.5px; font-weight: 720; text-align: right; font-variant-numeric: tabular-nums; }
.feuille .r-bd.bas b { color: var(--sourd); }
.feuille.vue .r-bd .r-bd-piste i { animation: r-pousse 900ms var(--sortie) both; animation-delay: calc(var(--d, 0ms) + 200ms); }
.feuille .r-ecart-p { font-size: 10.5px; }
.r-liens-boite { margin-top: 4px; }

/* — conseils, conversation, actualité — */
.feuille .r-humeur { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; line-height: 1.5; }
.feuille .r-humeur b { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: rgba(0, 144, 211, .1); color: var(--q2); }
.feuille .r-humeur.teinte-alerte b { background: rgba(176, 122, 63, .12); color: var(--ambre); }
.feuille .r-conseils { gap: 10px; }
.feuille .r-conseil { padding: 14px 18px; border-radius: 16px; background: #f5f7fa; gap: 16px; }
.feuille .r-conseil .r-num { font-size: 20px; font-weight: 780; letter-spacing: -.04em; }
.feuille .r-conseil b { font-size: 15px; font-weight: 720; letter-spacing: -.02em; margin-bottom: 3px; }
.feuille .r-conseil span { font-size: 12px; }
.feuille .r-conseil em { margin-top: 5px; font-size: 9.5px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 144, 211, .09); }
.r-surveiller .r-liens li::marker { color: var(--ambre); }
.feuille .r-liens { font-size: 12px; gap: 6px; }
.feuille .r-methode { border-top: 0; padding-top: 0; }
.feuille .r-methode p { font-size: 10.5px; line-height: 1.5; }
.feuille .r-qr { gap: 10px; }
.feuille .r-qr-l { background: #f5f7fa; border-radius: 16px; padding: 13px 16px; gap: 6px; }
.feuille .r-q { font-size: 13px; }
.feuille .r-a { font-size: 12.5px; }
.feuille .r-methode-mini { font-size: 10.5px; }

/* — l'impression : une feuille, une page, les couleurs gardées — */
@media print {
  #impression .feuille { width: 210mm; height: 297mm; aspect-ratio: auto; padding: 50px 60px 78px; overflow: hidden; }
  #impression .f-pied { left: 60px; right: 60px; bottom: 28px; }
  /* Le dégradé dans les lettres laisse un liseré à l'impression : couleur pleine. */
  #impression .r-bleu, #impression .r-moyenne b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--q2); -webkit-text-fill-color: var(--q2); }
  #impression .r-bh-piste i, #impression .r-bd .r-bd-piste i, #impression .r-dist-b i, #impression .r-hl-point, #impression .r-anneau-arc { animation: none !important; }
}
.sans-anim .r-bh-piste i, .sans-anim .r-dist-b i, .sans-anim .r-hl-point, .sans-anim .r-anneau-arc { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .r-bh-piste i, .r-dist-b i, .r-hl-point, .r-anneau-arc, .r-bd-piste i { animation: none !important; }
}

/* — le téléphone : la feuille devient une page qui défile — */
html[data-format="tel"] .feuille { aspect-ratio: auto; padding: 24px 18px 54px; }
html[data-format="tel"] .feuille .f-tete { padding-bottom: 18px; }
html[data-format="tel"] .feuille .f-pied { left: 18px; right: 18px; bottom: 18px; }
html[data-format="tel"] .feuille .r-h1 { font-size: 34px; }
html[data-format="tel"] .feuille .r-h1.long, html[data-format="tel"] .feuille .r-h1.tres-long { font-size: 27px; }
html[data-format="tel"] .feuille .r-h2 { font-size: 24px; }
html[data-format="tel"] .feuille .r-constat { font-size: 21px; }
html[data-format="tel"] .r-heros { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 18px; }
html[data-format="tel"] .feuille .r-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-format="tel"] .feuille .r-deux, html[data-format="tel"] .feuille .r-duo, html[data-format="tel"] .r-une,
html[data-format="tel"] .r-reps { grid-template-columns: 1fr; }
html[data-format="tel"] .r-une { justify-items: center; }
html[data-format="tel"] .r-une .r-graphe { width: 100%; }
html[data-format="tel"] .r-hl { grid-template-columns: minmax(0, 36%) minmax(0, 1fr) 40px; }
html[data-format="tel"] .r-hl-base { display: none; }
html[data-format="tel"] .r-cles, html[data-format="tel"] .r-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-format="tel"] .r-moyenne b { font-size: 60px; }
html[data-format="tel"] .feuille .r-dist { height: 170px; gap: 4px; }
html[data-format="tel"] .r-bh { grid-template-columns: minmax(0, 42%) minmax(0, 1fr) 38px; gap: 8px; }

/* v3, ajustements après les premières captures */
.feuille .r-h1, .feuille .r-h2, .feuille .r-constat, .r-heros-p { text-wrap: balance; }
.f-couverture .f-corps { justify-content: space-between; gap: 22px; }
.r-zone { display: flex; flex-direction: column; gap: 16px; }
.r-anneau-c > span { margin-top: 6px; font-size: 10px; line-height: 1.25; color: var(--sourd); max-width: 108px; }
.r-anneau-c b .r-compte { font: inherit; letter-spacing: inherit; }
.r-une .r-anneau-c b { font-size: 40px; }
.r-heros .r-anneau-c b { font-size: 32px; }
.feuille .r-heros-p { font-size: 21px; }
.r-une { grid-template-columns: 210px 1fr; gap: 34px; margin: 10px 0 6px; }
.f-une .r-bh { min-height: 30px; }
.f-une .r-bh-piste, .f-palmares .r-bh-piste, .f-incertitude .r-bh-piste { height: 11px; }
.f-palmares .r-bh, .f-incertitude .r-bh { min-height: 34px; }
.f-palmares .r-bh-nom, .f-incertitude .r-bh-nom { font-size: 12.5px; }
.r-sous { margin-top: 8px; }
.r-sous h3 { margin-bottom: 8px; }
.r-halteres-boite.compact .r-hl { min-height: 26px; }
.r-halteres-boite.compact .r-hl-tete { display: none; }
.f-comparaison .r-hl { min-height: 40px; }
.r-hl { grid-template-columns: minmax(0, 27%) minmax(0, 1fr) 44px 66px; }
.r-trois.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-dist-c { justify-content: flex-end; }
.r-dist-b { position: relative; flex: 1 1 auto; width: 100%; max-width: 48px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.r-dist-b i { flex: 0 0 auto; }
.feuille .r-dist { height: 290px; }
.r-dist-v { order: 0; }
.r-profil { gap: 22px; }
.r-portrait h3 { margin-bottom: 10px; }
.r-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.r-pastille-g { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(55, 92, 173, .08); font-size: 12px; color: var(--tx-2); }
.r-pastille-g b { font-size: 13.5px; font-weight: 780; color: var(--q3); font-variant-numeric: tabular-nums; }
.f-couverture .f-corps { justify-content: flex-start; gap: 30px; }
.feuille .r-h1 { font-size: 58px; }
.feuille .r-h1.long { font-size: 46px; }
.r-heros { grid-template-columns: 176px 1fr; padding: 24px 30px 24px 24px; gap: 30px; }
.r-anneau-c b, .r-anneau-c b .r-compte { color: var(--ink); -webkit-text-fill-color: currentColor; }
.r-heros .r-anneau-c b { font-size: 36px; }
.r-une { grid-template-columns: 230px 1fr; }
.r-une .r-anneau-c b { font-size: 46px; }
.f-une .r-bh { min-height: 38px; }
.f-une .f-corps { gap: 20px; }
.f-comparaison .f-corps { gap: 18px; }
.f-comparaison .r-hl { min-height: 48px; }
.f-comparaison .r-hl-piste::before, .f-comparaison .r-hl-trait { height: 6px; margin-top: -3px; }
.f-comparaison .r-hl-point { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.f-comparaison .r-hl-val { font-size: 15px; }
.f-comparaison .r-cle .r-valeur { font-size: 36px; }
.r-halteres-boite.compact .r-hl { min-height: 32px; }
.feuille .r-duo { grid-template-columns: 1fr; gap: 34px; }
.f-duo .r-constat { font-size: 21px; }
.r-une.petit { grid-template-columns: 140px 1fr; gap: 28px; margin: 2px 0; }
.r-une.petit .r-anneau-c b { font-size: 26px; }
.r-une.petit .r-anneau-c > span { font-size: 9px; max-width: 80px; }
.r-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.r-cles .r-cle { flex-direction: row; align-items: center; gap: 18px; padding: 18px 20px; }
.r-cles .r-anneau-c b { font-size: 22px; }
.r-cles .r-anneau-c > span { font-size: 8.5px; max-width: 64px; }
.r-cle-t { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.r-cles .r-cle .r-mot { font-size: 14px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.f-repondants .r-bh { min-height: 30px; }
.f-repondants .r-reps { gap: 34px 38px; }
.r-moyenne b .r-compte { font: inherit; }
html[data-format="tel"] .feuille .r-clair { flex-direction: column; gap: 4px; }
html[data-format="tel"] .r-une.petit { grid-template-columns: 1fr; justify-items: center; }
html[data-format="tel"] .r-cles { grid-template-columns: 1fr; }
.r-cles .r-cle { min-height: 190px; padding: 22px 24px; }
.r-cles .r-anneau-c b { font-size: 27px; }
.r-cles .r-anneau-c > span { font-size: 9px; max-width: 78px; }
.feuille .r-dist { height: 380px; }

/* — v3 : le répertoire des dispositifs et les couvertures — */
.r-bandeau { background: #375CAD; color: #fff; border-radius: 22px; padding: 30px 34px 28px; display: flex; flex-direction: column; gap: 12px; }
.r-bandeau .r-sur { color: #73D9FF; }
.r-bandeau .r-h1 span { color: #fff; }
.r-bandeau .r-chapeau { color: rgba(255, 255, 255, .78); }
.r-bandeau-p { display: flex; align-items: baseline; gap: 16px; margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.r-bandeau-p b { font-size: 46px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #73D9FF; }
.r-bandeau-p span { font-size: 15px; line-height: 1.35; color: #fff; font-weight: 600; letter-spacing: -.01em; }
.f-couverture .r-bandeau + .r-tuiles { margin-top: 0; }
.r-couv-heros, .r-couv-points { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.r-couv-heros .r-nheros b { font-size: 132px; }
.r-nheros { display: flex; flex-direction: column; gap: 4px; }
.r-nheros b { font-size: 108px; font-weight: 800; letter-spacing: -.065em; line-height: .88; background: linear-gradient(96deg, var(--q1), var(--q2) 55%, var(--q3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r-nheros b .r-compte { font: inherit; }
.r-nheros span { font-size: 12px; color: var(--sourd); max-width: 200px; }
.r-points { display: flex; flex-direction: column; gap: 10px; width: max-content; }
.r-points-g { display: grid; grid-template-columns: repeat(10, 13px); gap: 5px; }
.r-points-g i { width: 13px; height: 13px; border-radius: 50%; background: var(--piste); }
.r-points-g i.on { background: var(--q2); }
.r-points-g i.on:nth-child(10n+1), .r-points-g i.on:nth-child(10n+2) { background: var(--q3); }
.r-points-c { display: flex; align-items: baseline; gap: 8px; }
.r-points-c b { font-size: 34px; font-weight: 800; letter-spacing: -.05em; color: var(--ink); }
.r-points-c b .r-compte { font: inherit; }
.r-points-c span { font-size: 11px; color: var(--sourd); max-width: 150px; line-height: 1.3; }
.r-jauge { position: relative; display: flex; flex-direction: column; align-items: center; width: max-content; }
.r-jauge-svg { display: block; overflow: visible; }
.r-jauge-fond { fill: none; stroke: var(--piste); stroke-width: 18; stroke-linecap: round; }
.r-jauge-arc { fill: none; stroke-width: 18; stroke-linecap: round; }
.r-jauge-c { margin-top: -46px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.r-jauge-c b { font-size: 40px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.r-jauge-c b .r-compte { font: inherit; }
.r-jauge-c span { font-size: 10px; color: var(--sourd); max-width: 150px; margin-top: 4px; }
.r-une.bandeau { grid-template-columns: 1fr; justify-items: start; gap: 22px; }
.r-une.bandeau > :first-child { justify-self: center; }
.r-une.bandeau .r-graphe { width: 100%; }
.r-une.inverse > :first-child { order: 2; justify-self: center; }
.r-une.inverse { grid-template-columns: 1fr 230px; }
.r-une.a-points { grid-template-columns: 200px 1fr; }
.r-une.inverse.a-points { grid-template-columns: 1fr 200px; }
.r-empilee { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.r-empilee-b { display: flex; height: 38px; border-radius: 12px; overflow: hidden; gap: 2px; }
.r-empilee-b i { display: flex; align-items: center; justify-content: center; min-width: 3px; }
.r-empilee-b i span { font-size: 11.5px; font-weight: 750; color: #fff; font-style: normal; font-variant-numeric: tabular-nums; }
.r-empilee-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.r-empilee-l > span { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 11.5px; color: var(--tx-2); }
.r-empilee-l > span > i { width: 10px; height: 10px; border-radius: 3px; }
.r-empilee-l b { font-weight: 720; font-variant-numeric: tabular-nums; color: var(--ink); }
.r-divergente { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.r-dv-tete { display: grid; grid-template-columns: 30% 1fr 1fr 40px; gap: 0 10px; font-size: 10.5px; color: var(--sourd); }
.r-dv-tete span:first-child { grid-column: 2; text-align: right; color: var(--ambre); font-weight: 650; }
.r-dv-tete span:last-child { grid-column: 3; color: var(--q2); font-weight: 650; }
.r-dv { display: grid; grid-template-columns: 30% 1fr 1fr 40px; gap: 0 0; align-items: center; min-height: 28px; }
.r-dv-nom { font-size: 11.5px; color: var(--tx-2); padding-right: 10px; }
.r-dv-g, .r-dv-d { position: relative; height: 12px; }
.r-dv-g { border-right: 1.5px solid rgba(11, 11, 12, .35); }
.r-dv-g i { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 999px 0 0 999px; background: #b9c3cf; }
.r-dv-d i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, var(--q2), var(--q1)); }
.r-dv b { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.r-dv.neg b { color: var(--sourd); }
.r-dv-nsp { font-size: 10.5px; color: var(--sourd); font-style: italic; }
.feuille .r-colonnes { height: 200px; }
.r-multiples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.r-mult { background: #f5f7fa; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.r-mult-n { font-size: 11.5px; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-mult b { font-size: 26px; font-weight: 780; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.r-mult.haut b { color: var(--q3); }
.r-mult.bas b { color: var(--ambre); }
.r-mult-p { position: relative; height: 6px; border-radius: 999px; background: var(--piste); }
.r-mult-p i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--q1), var(--q2)); }
.r-mult.bas .r-mult-p i { background: rgba(176, 122, 63, .55); }
.r-mult-p::after { content: ''; position: absolute; top: -4px; bottom: -4px; left: var(--moy); border-left: 1.5px dashed rgba(11, 11, 12, .4); }
.r-mult-b { font-size: 10px; color: var(--sourd); }
.r-familles { display: flex; flex-direction: column; gap: 6px; }
.r-fam { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 118px; gap: 12px; align-items: baseline; padding: 7px 12px; border-radius: 10px; background: #f7f9fb; font-size: 11.5px; }
.r-fam-n { font-weight: 700; color: var(--ink); }
.r-fam-g { display: flex; gap: 6px; align-items: baseline; min-width: 0; color: var(--tx-2); }
.r-fam-g > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-fam-g b { font-variant-numeric: tabular-nums; }
.r-fam-g.bas b { color: var(--ambre); }
.r-fam-g.haut b { color: var(--q3); }
.r-fam-e { font-style: normal; font-size: 10.5px; color: var(--q2); text-align: right; }
.r-fam-e.flou { color: var(--sourd); }
.r-chaleur-boite { overflow: hidden; border-radius: 16px; }
.r-chaleur { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 11.5px; table-layout: fixed; }
.r-chaleur thead th { font-size: 10px; font-weight: 650; color: var(--sourd); text-align: center; padding: 4px 2px 6px; line-height: 1.2; }
.r-chaleur thead th:first-child { width: 30%; }
.r-chaleur tbody th { text-align: left; font-weight: 650; font-size: 11.5px; padding: 8px 8px 8px 0; line-height: 1.25; }
.r-chaleur tbody th em { display: block; font-style: normal; font-weight: 400; font-size: 9.5px; color: var(--sourd); }
.r-chaleur td { text-align: center; padding: 12px 2px; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.r-chaleur td.moy { background: #eef1f5; }
.r-chaleur td.fort { color: #fff; }
.r-chaleur td.vide { color: var(--sourd); background: #fafbfc; }
.r-conseil-pied { display: flex; gap: 6px; flex-wrap: wrap; }
.feuille .r-conseil .r-voir { background: #f0f2f5; color: var(--tx-2); }
@media print {
  #impression .r-nheros b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--q2); -webkit-text-fill-color: var(--q2); }
}
html[data-format="tel"] .r-couv-heros, html[data-format="tel"] .r-couv-points, html[data-format="tel"] .r-une.inverse { grid-template-columns: 1fr; justify-items: center; }
html[data-format="tel"] .r-couv-heros .r-nheros b { font-size: 86px; }
html[data-format="tel"] .r-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-format="tel"] .r-fam { grid-template-columns: 1fr 1fr; }
html[data-format="tel"] .r-fam-e { text-align: left; }
html[data-format="tel"] .r-empilee-l { grid-template-columns: 1fr; }
html[data-format="tel"] .r-chaleur { font-size: 10px; }
html[data-format="tel"] .r-bandeau { padding: 22px 20px; }
.r-bandeau-p b .r-compte { font: inherit; }
.r-nheros b { white-space: nowrap; }
.r-une .r-nheros b { font-size: 84px; }
.r-une.petit .r-nheros b { font-size: 52px; }
.r-une.petit .r-jauge-c b { font-size: 28px; }
.r-jauge-c b, .r-points-c b, .r-mult b { color: var(--ink); }
.r-mult.haut b { color: var(--q3); } .r-mult.bas b { color: var(--ambre); }
.r-couv-sobre .r-nheros b { font-size: 120px; }
.r-fiche.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.r-fiche.deux li { background: #f5f7fa; border-radius: 12px; padding: 8px 12px; grid-template-columns: 44px minmax(0, 1fr) auto; }


/* ══════════════════════════════════════════════════════════════════════════
   27/09/2026 — LA COLONNE DES HUMEURS, LA PAGE BLANCHE, LE RAPPORT AU THÈME
   « Supprime tout ce qu'il y a dans la colonne de gauche et à la place mets
   les humeurs de 8, comme ça on gagne de la place dans la zone de lecture »
   (jules). Le rapport part d'une page vide et suit le thème clair / sombre.
   ══════════════════════════════════════════════════════════════════════════ */
.humeurs { display: flex; flex-direction: column; min-height: 0; background: var(--fond); }
.humeurs .tete { display: flex; align-items: center; gap: 8px; padding: 16px 18px 6px; font-family: var(--f-titre); font-size: 15px; }
.humeurs .h-icone { color: var(--acc); display: inline-flex; }
.h-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 18px 28px; display: flex; flex-direction: column; gap: 16px; }
.h-attente { display: flex; align-items: center; gap: 10px; color: var(--sourd); font-size: 13px; padding-top: 6px; }
.h-etat { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 9px 16px 9px 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--teinte, var(--acc)) 16%, transparent); animation: apparait 500ms var(--sortie, ease) both; }
.h-mot { font-family: var(--f-titre); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--teinte, var(--acc)); }
.h-pouls { width: 11px; height: 11px; border-radius: 50%; background: var(--teinte, var(--acc)); flex: 0 0 auto;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--teinte, var(--acc)) 55%, transparent); animation: h-bat 2.2s ease-out infinite; }
.h-attente .h-pouls { --teinte: var(--acc); }
@keyframes h-bat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teinte, var(--acc)) 55%, transparent); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.h-phrase { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); animation: apparait 600ms 80ms both; }
.h-groupe { display: flex; flex-direction: column; gap: 8px; }
.h-sous { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sourd); font-weight: 650; padding-top: 4px; }
.h-sentiment { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 11px 13px;
  border-radius: 14px; background: var(--pap); border: 1px solid var(--lin-doux, var(--lin)); font-size: 12.8px; line-height: 1.5; color: var(--tx-2, var(--ink));
  animation: apparait 520ms both; animation-delay: var(--d, 0ms); transition: transform .18s ease, border-color .18s ease; }
.h-sentiment:hover { transform: translateY(-1px); border-color: var(--acc); }
.h-sentiment:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.h-sorte { align-self: flex-start; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: var(--teinte); background: color-mix(in srgb, var(--teinte) 14%, transparent); }
.h-conseil { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: 14px; background: var(--acc-t2, var(--pap));
  font-size: 12.8px; line-height: 1.5; animation: apparait 520ms both; animation-delay: var(--d, 0ms); }
.h-conseil b { font-weight: 650; color: var(--ink); }
.h-conseil span { color: var(--sourd); font-size: 12px; }
.h-fragile { margin: 0; font-size: 12px; line-height: 1.5; color: var(--sourd); }

/* La page blanche : une feuille vide, le logo, un curseur qui attend. */
.feuille.f-vierge { opacity: 1; transform: none; }
.r-vierge { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 0 6% 18%; }
.r-vierge-ligne { height: 58px; display: flex; align-items: center; }
.r-curseur { display: block; width: 3px; height: 52px; border-radius: 2px; background: var(--q2, #0090D3); animation: r-cligne 1.1s steps(1) infinite; }
@keyframes r-cligne { 50% { opacity: 0; } }
.r-vierge-t { margin: 0; font-size: 44px; font-weight: 760; letter-spacing: -.04em; color: var(--lin, rgba(11,11,12,.12)); color: color-mix(in srgb, var(--ink) 16%, transparent); }
.r-vierge-s { margin: 0; max-width: 430px; font-size: 14px; line-height: 1.6; color: var(--sourd); }
.rapport.vierge .r-bouton.plein { opacity: .45; }

/* La question posée, en tête de la page qui y répond. */
.feuille .r-question { display: flex; flex-direction: column; gap: 5px; padding: 12px 16px; border-radius: 14px; background: var(--teinte-douce, #f3f8fc);
  border-left: 3px solid var(--q2, #0090D3); margin-bottom: 4px; }
.feuille .r-question:not(.recente) { border-left-color: var(--gris-b, #c6cfda); }
.feuille .r-question-k { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--q2, #0090D3); font-weight: 700; }
.feuille .r-question:not(.recente) .r-question-k { color: var(--sourd); }
.feuille .r-question b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.feuille .r-question p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tx-2); }

/* Le rapport au thème sombre : la feuille devient une page noire posée sur
   le noir (un gris très sombre, pour qu'on la voie), les encres s'inversent,
   les trois bleus du logo restent. */
html[data-lum="dark"] .feuille {
  --fond: #0c0d0f; --pap: #16181b; --pap-2: #1c1f23; --ink: #f2f4f7;
  --tx-2: rgba(242, 244, 247, .80); --sourd: rgba(242, 244, 247, .56);
  --lin: rgba(242, 244, 247, .14); --lin-doux: rgba(242, 244, 247, .08);
  --acc-tx: #73D9FF; --acc-t: rgba(0, 144, 211, .24); --acc-t2: rgba(0, 144, 211, .12);
  --piste: #23272c; --gris-b: #4a525c; --teinte-douce: #13202b; --ambre: #d9a860;
  background: #121416; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 90px -40px rgba(0, 0, 0, .9);
}
html[data-lum="dark"] .feuille .r-tuile, html[data-lum="dark"] .feuille .r-cle, html[data-lum="dark"] .feuille .r-qr-l,
html[data-lum="dark"] .r-mult, html[data-lum="dark"] .r-fiche.deux li { background: #1b1e22; }
html[data-lum="dark"] .r-bd.bas i { background: #3a4048; }
html[data-lum="dark"] .r-bh.nsp .r-bh-piste i { background: #3a4048; }
html[data-lum="dark"] .r-flou .r-bh .r-bh-piste i { background: linear-gradient(90deg, #333941, #5b6775); }
html[data-lum="dark"] .r-dv-g { border-right-color: rgba(242, 244, 247, .35); }
html[data-lum="dark"] .r-chaleur td.moy { background: #1c1f23; }
html[data-lum="dark"] .feuille .r-conseil .r-voir { background: #23272c; }
html[data-lum="dark"] .r-bandeau { background: #1d3566; }

/* Banc navigateur du 27/09/2026 : un chiffre animé ne se coupe jamais (« 55 » / « % »). */
.r-compte { white-space: nowrap; }

/* 27/09 11 h — cartes restées blanches en sombre (recommandations : texte
   clair sur fond blanc, illisible — capture de jules). Toutes les pastilles
   et cartes claires de la feuille ont leur version sombre. */
html[data-lum="dark"] .feuille .r-conseil { background: #1b1e22; }
html[data-lum="dark"] .feuille .r-conseil b { color: var(--ink); }
html[data-lum="dark"] .feuille .r-conseil .r-voir { background: #2a2f35; color: var(--tx-2); }
html[data-lum="dark"] .feuille .r-conseil em { background: rgba(0, 144, 211, .18); color: #73D9FF; }
html[data-lum="dark"] .r-code-p { background: #23272c; color: var(--tx-2); }
html[data-lum="dark"] .r-cle-jauge { background: #2a2f35; }
html[data-lum="dark"] .r-fam { background: #1b1e22; }
html[data-lum="dark"] .r-chaleur td.vide { background: #16181b; }
/* Le bleu foncé du logo (#375CAD) ne se lit pas en chiffre sur la feuille
   sombre : on l'éclaircit d'un cran, dessins compris. */
html[data-lum="dark"] .feuille { --q3: #6f93e6; }
html[data-lum="dark"] .feuille .r-bd-nom { color: rgba(242, 244, 247, .8); }

/* ══════════════════════════════════════════════════════════════════════════
   L'HISTORIQUE DES RAPPORTS — un lobby de planches (28/09/2026)
   Comme le lobby de V8 : le vrai rapport en réduction, posé sur le fond ;
   le survol feuillette ses pages. Fond de la page, jamais de dégradé.
   ══════════════════════════════════════════════════════════════════════════ */
.rapport { position: relative; }
.r-histo { display: inline-flex; align-items: center; gap: 7px; }
.r-histo[aria-pressed="true"] { background: var(--ink); color: var(--fond); box-shadow: none; }
.r-nombre { font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; display: inline-grid; place-items: center; background: var(--q-bleu); color: #fff;
  font-variant-numeric: tabular-nums; }
.rapport.avec-histo > .rapport-defile { visibility: hidden; }

.h-lobby { position: absolute; inset: 58px 0 0; z-index: 5; overflow-y: auto; overflow-x: hidden;
  background: var(--fond); padding: 8px 20px 48px; animation: h-entre 320ms var(--sortie) both; }
@keyframes h-entre { from { opacity: 0; transform: translateY(10px); } }
.h-tete { display: flex; align-items: flex-end; gap: 16px; margin: 6px 0 22px; flex-wrap: wrap; }
.h-sur { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--q-bleu); font-weight: 650; }
.h-h { font-family: var(--f-titre); font-size: 34px; font-weight: 760; letter-spacing: -.035em; line-height: 1.05; margin: 2px 0 4px; color: var(--ink); }
.h-sous { display: block; font-size: 12.5px; color: var(--sourd); text-transform: none; letter-spacing: 0; font-weight: 400; }

.h-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.h-planche { position: relative; display: flex; flex-direction: column; gap: 10px; cursor: pointer; outline: none;
  border-radius: 16px; padding: 10px; transition: background .2s, transform .25s var(--sortie); }
.h-planche:hover, .h-planche:focus-visible { background: var(--acc-t2); transform: translateY(-2px); }
.h-planche:focus-visible { box-shadow: 0 0 0 2px var(--q-bleu); }
.h-apercu { position: relative; width: 100%; aspect-ratio: 210 / 297; border-radius: 10px; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px var(--lin), 0 24px 50px -30px rgba(0, 0, 0, .55); }
.h-planche.en-cours .h-apercu { box-shadow: 0 0 0 2px var(--q-bleu), 0 24px 50px -30px rgba(0, 0, 0, .55); }
.h-echelle { position: absolute; left: 0; top: 0; width: 794px; transform: scale(var(--k, .27)); transform-origin: 0 0;
  pointer-events: none; }
.h-echelle .feuille { position: absolute; left: 0; top: 0; width: 794px; max-width: none; margin: 0; border-radius: 0;
  box-shadow: none; animation: none; opacity: 0; transform: none; transition: opacity .35s ease; }
.h-echelle .feuille.h-montree { opacity: 1; }
.h-echelle .feuille * { animation: none !important; }
.h-attente { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; color: rgba(11, 11, 12, .45);
  background: repeating-linear-gradient(180deg, #fff 0 22px, #f3f5f8 22px 23px); }
.h-apercu.pret .h-attente { display: none; }
.h-apercu.rate .h-attente { display: grid; background: #fff; color: #b07a3f; padding: 14px; text-align: center; }
.h-blanc { display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1.5px var(--lin); }
.h-neuve:hover .h-blanc { box-shadow: inset 0 0 0 1.5px var(--q-bleu); }
.h-plus { font-size: 46px; font-weight: 300; color: var(--q-bleu); line-height: 1; }
.h-pied { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.h-titre { font-family: var(--f-titre); font-size: 14.5px; font-weight: 650; line-height: 1.25; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--sourd); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.h-pages { display: flex; gap: 4px; margin-top: 3px; }
.h-pages i { width: 14px; height: 3px; border-radius: 2px; background: var(--lin); transition: background .25s; }
.h-pages i.on { background: var(--q-bleu); }
.h-badge { position: absolute; top: 18px; left: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; background: var(--q-bleu); color: #fff; }
.h-retirer { position: absolute; top: 16px; right: 16px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: rgba(11, 11, 12, .72); color: #fff; font-size: 14px; line-height: 1; opacity: 0; transition: opacity .2s; }
.h-planche:hover .h-retirer, .h-planche:focus-within .h-retirer, .h-retirer.sur { opacity: 1; }
.h-retirer.sur { background: #b0413f; font-size: 11.5px; font-weight: 650; }
html[data-format="tel"] .h-lobby { inset: 52px 0 0; padding: 4px 12px 40px; }
html[data-format="tel"] .h-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-format="tel"] .h-retirer { opacity: 1; }
html[data-format="tel"] .h-h { font-size: 28px; }

/* ══════════════════════════════════════════════════════════════════════════
   Le « 8 » caché et la sphère 8LOP (28/09/2026, repris de Q8)
   Le 8 porte EXACTEMENT la couleur du fond : invisible, sauf Cmd+A.
   ══════════════════════════════════════════════════════════════════════════ */
#d8-huit { position: fixed; right: 0; bottom: 0; z-index: 75; padding: 5px 7px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8px; line-height: 1;
  color: var(--fond); background: transparent; cursor: pointer; user-select: text; }
/* L'écran signature (08/10/2026) : la vidéo du Neural Core 8LOP dans un
   médaillon rond, sur noir uni ; textes gris, capitales espacées, aucun bleu,
   un seul point vert devant « EN LIGNE ». Toujours noir, quel que soit le thème. */
#d8-sphere { display: none; position: fixed; inset: 0; z-index: 9000; background: #000; color: #8b8d92;
  overflow: hidden; -webkit-font-smoothing: antialiased; }
#d8-sphere .d8s-medaillon { position: absolute; left: 30%; top: 50%; transform: translate(-50%, -50%);
  width: min(62vmin, 560px); aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid #1e1f22; overflow: hidden;
  background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; }
#d8-sphere .d8s-medaillon video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: transparent; }
#d8-sphere .d8s-droite { position: absolute; right: 0; top: 0; width: 38%; height: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: 3rem 4rem 3rem 1rem; pointer-events: none; text-align: left; }
#d8-sphere .d8s-l1, #d8-sphere .d8s-l2, #d8-sphere .d8s-l3, #d8-sphere .d8s-by, #d8-sphere .d8s-by2, #d8-sphere .d8s-lbl, #d8-sphere-retour {
  font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; text-transform: uppercase; color: #8b8d92; }
#d8-sphere .d8s-l1 { font-size: 11px; letter-spacing: .32em; margin-bottom: 28px; }
#d8-sphere .d8s-l2 { font-size: 22px; letter-spacing: .26em; line-height: 1.6; color: #f2f2f2; font-weight: 400; }
#d8-sphere .d8s-l3 { font-size: 11px; letter-spacing: .2em; line-height: 2.1; margin-top: 32px; padding-top: 22px; border-top: 1px solid #1e1f22; }
#d8-sphere .d8s-pt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6bdc99; margin: 0 9px 1px 0; vertical-align: middle; }
#d8-sphere .d8s-bas { position: absolute; bottom: 40px; left: 30%; transform: translateX(-50%); text-align: center; pointer-events: none; }
#d8-sphere .d8s-by { font-size: 12px; letter-spacing: .34em; text-transform: none; }
#d8-sphere .d8s-by2 { font-size: 9px; letter-spacing: .3em; margin-top: 6px; color: #5d5f63; }
#d8-sphere .d8s-lbl { position: absolute; font-size: 9px; letter-spacing: .3em; color: #5d5f63; pointer-events: none; }
#d8-sphere-retour { position: fixed; top: 12px; right: 16px; z-index: 9100; font-size: 12px; text-transform: none;
  letter-spacing: .08em; text-decoration: none; cursor: pointer; padding: 4px 6px; }
#d8-sphere-retour:hover, #d8-sphere-retour:focus-visible { color: #f2f2f2; outline: none; }
/* Téléphone : le médaillon centré en haut, le texte dessous ; on peut faire défiler. */
html[data-format="tel"] #d8-sphere { overflow-y: auto; }
html[data-format="tel"] #d8-sphere .d8s-medaillon { position: relative; left: auto; top: auto; transform: none; margin: 64px auto 0; }
html[data-format="tel"] #d8-sphere .d8s-droite { position: relative; top: auto; right: auto; width: 100%; height: auto;
  padding: 36px 28px 48px; text-align: left; }
html[data-format="tel"] #d8-sphere .d8s-l2 { font-size: 18px; letter-spacing: .22em; }
html[data-format="tel"] #d8-sphere .d8s-bas { display: none; }
/* L'aperçu est toujours une A4 d'ordinateur, même sur téléphone (où la
   feuille à l'écran quitte le format A4) : le lobby montre le rapport tel
   qu'il s'imprime. */
.h-echelle .feuille, html[data-format="tel"] .h-echelle .feuille { width: 794px; height: 1123px; min-height: 1123px; aspect-ratio: auto; padding: 50px 60px 78px; }
html[data-format="tel"] #d8-sphere .d8s-lbl { display: none; }

/* ═══ LE GRAND RAPPORT ET LES TRIS (29/09/2026) ═══════════════════════════
   Synthèse pour la direction, fiche technique, chapitres, publics,
   consensus et clivages, tris croisés, annexe des tris à plat sur deux
   colonnes. Tout passe par les couleurs de la feuille (--ink, --tx-2,
   --lin, --fond, --acc-*) : la version sombre suit d'elle-même. */
.r-faits { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.r-fait { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--lin-doux); }
.r-fait:last-child { border-bottom: 0; }
.r-fait b { display: block; font-size: 15.5px; letter-spacing: -.015em; line-height: 1.25; }
.r-preuve { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.r-portee { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--acc-tx); }
.r-fait.s-fragilite .r-num, .r-fait.s-minoritaire .r-num, .r-fait.s-crainte .r-num { color: var(--ambre); }

.r-sig { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 22px; }
.r-sig-b > b { display: block; font-size: 12.5px; margin-bottom: 6px; }
.r-lire { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.5; color: var(--tx-2); }

.r-h2.r-chap { font-size: 40px; }
.r-chiffres-chap .r-bh-nom { white-space: normal; }
.r-retenir { background: var(--acc-t2); border-radius: 14px; padding: 16px 18px; }
.r-retenir .r-essentiel li { font-size: 13.5px; }

.r-tab { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.r-tab th, .r-tab td { padding: 5px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lin-doux); }
.r-tab thead th { white-space: nowrap; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sourd); font-weight: 650; border-bottom: 1px solid var(--lin); }
.r-tab tbody th { font-weight: 500; color: var(--ink); }
.r-tab td { color: var(--tx-2); white-space: nowrap; }
.r-tab tfoot th, .r-tab tfoot td { font-weight: 700; color: var(--ink); border-bottom: 0; border-top: 1px solid var(--lin); }
.r-tab tr.nsp th, .r-tab tr.nsp td { color: var(--sourd); }
.r-tab.serre { font-size: 11px; }
.r-tab.serre th, .r-tab.serre td { padding: 3px 5px; }
.r-tri .r-tab { table-layout: fixed; }
.r-tri .r-tab th:nth-child(1) { width: 60%; }
.r-tri .r-tab th:nth-child(2), .r-tri .r-tab td:nth-child(2) { width: 17%; text-align: right; }
.r-tri .r-tab th:nth-child(3) { width: 23%; text-align: right; }
.r-tab td.pc { position: relative; min-width: 62px; text-align: right; }
.r-tab td.pc b { position: relative; font-weight: 650; color: var(--ink); }
.r-tab-barre { position: absolute; left: 6px; top: 50%; height: 9px; margin-top: -4.5px; background: var(--acc-t); border-radius: 3px; max-width: calc(100% - 44px); }
.r-chap-tab td.q { color: var(--acc-tx); font-weight: 700; width: 38px; }
.r-chap-tab td.r { white-space: normal; color: var(--ink); }
.r-chap-tab td.b, .r-chap-tab td.p { text-align: right; color: var(--sourd); }

.r-tri { break-inside: avoid; }
.r-tri + .r-tri { margin-top: 16px; }
.r-tri-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 5px; }
.r-tri-t b { font-size: 13px; letter-spacing: -.01em; }
.r-tri-base { font-size: 10.5px; color: var(--sourd); margin-left: auto; }
.r-tri-note { margin: 4px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--sourd); }
.r-tris.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.r-tris-col { min-width: 0; }
.r-tris.deux .r-tab th { word-break: break-word; }

.r-croise-boite { overflow-x: auto; }
.r-croise th, .r-croise td { text-align: right; }
.r-croise tbody th, .r-croise thead tr:first-child th:first-child { text-align: left; }
.r-croise thead th { white-space: normal; vertical-align: bottom; }
.r-croise tr.bases th, .r-croise tr.bases td { font-size: 10.5px; color: var(--sourd); border-bottom: 1px solid var(--lin); }
.r-croise .ens { background: var(--fond); font-weight: 650; color: var(--ink); }
.r-croise td.plus { color: var(--acc-tx); font-weight: 700; }
.r-croise td.moins { color: var(--ambre); font-weight: 700; }
.r-croise.serre { font-size: 10.5px; }

.r-public-fam + .r-public-fam { margin-top: 6px; }
.r-publics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.r-public { background: var(--fond); border-radius: 12px; padding: 11px 13px; }
.r-public-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.r-public-t b { font-size: 13px; }
.r-public-t span { font-size: 10.5px; color: var(--sourd); white-space: nowrap; }
.r-public ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; line-height: 1.4; color: var(--tx-2); }
.r-public li.plus::marker { color: var(--acc-tx); }
/* Les profils de répondants (typologie, 05/10/2026) : une carte par profil,
   la part en anneau ; fonds par variables (la feuille sombre les redéfinit). */
.r-profils { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.r-profils.trois { grid-template-columns: 1fr 1fr 1fr; }
.r-profil { background: var(--fond); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.r-profil-t { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.r-profil-t > div:last-child { min-width: 0; }
.r-profil-t b { display: block; font-size: 13px; line-height: 1.25; color: var(--ink); }
.r-profil-n { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-tx); margin-bottom: 2px; }
.r-profil .r-anneau-c { padding: 0 8px; }
.r-profil .r-anneau-c b { font-size: 17px; }
.r-profil .r-anneau-c > span { font-size: 7.5px; max-width: 56px; margin-top: 2px; }
.r-profil.serre .r-anneau-c b { font-size: 15px; }
.r-profil.serre .r-profil-t b { font-size: 12px; }
.feuille .r-profil ul { margin: 0; padding-left: 15px; display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; line-height: 1.35; color: var(--tx-2); }
.r-profil li.plus::marker { color: var(--acc-tx); }
.r-profil li.moins::marker { color: var(--ambre); }
.r-profil li.sig, .r-profil li.ind { color: var(--sourd); }
.r-profils-tab { margin-top: 12px; }
/* L'analyse rédigée par 8 (rédacteur, 05/10/2026) : ses paragraphes gardent leur saut. */
.feuille .r-redige { white-space: pre-line; }
/* LES AVIS EN LIGNE (14/10/2026, C3) : la source d'un avis cité, « (avis
   Custplace, mars 2026) », petite et grise, dans le rapport comme dans la
   bulle de 8 — clair et sombre ; en ligne, rien ne déborde de la feuille. */
.r-avis-src { font-size: .82em; color: var(--sourd, rgba(11, 11, 12, .52)); letter-spacing: 0; white-space: nowrap; }
.feuille .r-avis-src { color: rgba(11, 11, 12, .52); }
html[data-lum="dark"] .r-avis-src { color: var(--sourd, rgba(242, 244, 247, .56)); }
html[data-lum="dark"] .feuille .r-avis-src { color: rgba(242, 244, 247, .56); }
@media print { .feuille .r-avis-src { color: rgba(11, 11, 12, .55); } html[data-lum="dark"] .feuille .r-avis-src { color: rgba(242, 244, 247, .6); } }
.r-profils-tab .r-tab th, .r-profils-tab .r-tab td { white-space: normal; }
.r-profils-tab .r-tab td { text-align: right; white-space: nowrap; }
.r-profils-tab .r-tab thead th:not(:first-child) { text-align: right; }
.r-public li.moins::marker { color: var(--ambre); }

.r-tension { border-top: 1px solid var(--lin); padding-top: 12px; }
.r-tension h3 { margin-bottom: 2px; }
.r-tension .r-liens { margin-top: 8px; }

.r-analyse { border-left: 3px solid var(--acc); padding: 2px 0 2px 14px; }
.r-analyse h3 { margin-bottom: 6px; }
.r-analyse p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }

/* Le tableau d'un tri dans la conversation : il défile sur téléphone. */
.bulle-tri { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; overflow-x: auto; max-width: 100%; }
.bulle-tri .r-tab { min-width: 320px; }
.bulle-tri .r-croise { min-width: 560px; }
.bulle-tri .r-croise thead th { white-space: nowrap; }
.bulle-tri .r-tab td.pc b { color: var(--ink); }
.bulle-tri .r-tab-barre { background: var(--acc-t); }
.bulle-tri .au-rapport { align-self: flex-start; }

html[data-format="tel"] .r-tris.deux, html[data-format="tel"] .r-publics { grid-template-columns: 1fr; }

/* ═══ LA PLUME DE L'ANALYSTE (30/09/2026) ═══════════════════════════════
   Chapeau qui ouvre par ce qui compte, synthèse en quelques lignes,
   matrice des priorités, lecture croisée, palmarès NPS / Oscars. Tout
   passe par les couleurs de la feuille : la version sombre suit seule. */
.r-lede, .r-resume { margin: 2px 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink); letter-spacing: -.005em; }
.r-resume { border-left: 3px solid var(--acc); padding-left: 14px; }
.r-nuance, .r-texte { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--tx-2); }
.r-texte { color: var(--ink); font-size: 13px; }
.r-prios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin-top: 8px; }
.r-prio { border-top: 1px solid var(--lin); padding-top: 10px; }
.r-prio h3 { margin-bottom: 2px; }
.r-prio.priorite h3 { color: var(--ambre); }
.r-prio.capitaliser h3 { color: var(--acc-tx); }
.r-prio .r-liens { margin-top: 6px; }
.r-mx-boite { display: grid; grid-template-columns: 1fr 190px; gap: 10px 16px; align-items: center; margin: 6px 0 4px; }
.r-mx { width: 100%; height: auto; display: block; }
.r-mx-a { stroke: var(--lin); stroke-width: 1; stroke-dasharray: 3 4; }
.r-mx-q { font-size: 10px; fill: var(--sourd); letter-spacing: .04em; text-transform: uppercase; }
.r-mx-l { font-size: 10px; fill: var(--sourd); }
.r-mx-p circle { fill: var(--acc-t); stroke: var(--acc); stroke-width: 1.2; }
.r-mx-p.priorite circle { fill: var(--ambre); stroke: var(--ambre); fill-opacity: .25; }
.r-mx-p text { font-size: 9.5px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.r-mx-cles { margin: 0; padding-left: 18px; font-size: 10.5px; line-height: 1.4; color: var(--tx-2); columns: 1; }
.r-fils li { font-size: 12.5px; line-height: 1.5; }
.r-palmares-t td, .r-palmares-t th { white-space: nowrap; }
.r-palmares-t td.q { color: var(--sourd); width: 22px; }
.r-palmares-t td.r-nps-v { font-weight: 700; color: var(--ink); }
.r-palmares-t td.o { color: var(--acc-tx); font-weight: 650; }
.r-palmares-t tr.top th, .r-palmares-t tr.top td.s { color: var(--acc-tx); font-weight: 700; }
.r-palmares-t tr.flop th, .r-palmares-t tr.flop td.s { color: var(--ambre); font-weight: 700; }
.r-palmares-t td.s { text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
.r-oscars-t td { white-space: normal; }
.r-oscars-t td.haut b { color: var(--acc-tx); }
.r-oscars-t td.bas b { color: var(--ambre); }
.r-oscars-t td.e { color: var(--sourd); white-space: nowrap; }
html[data-format="tel"] .r-prios, html[data-format="tel"] .r-mx-boite { grid-template-columns: 1fr; }

/* Nuit du 30/09 : un long palmarès montre sa tête et sa queue ; le milieu
   tient sur une ligne discrète. */
.feuille .r-palmares-t tr.r-milieu td { text-align: center; color: var(--sourd); font-style: italic; padding: 6px 0; }
/* Nuit du 30/09 : sur téléphone, les boutons du rapport passent à la ligne
   au lieu de couper « PDF » au bord de l'écran ; « Repartir de zéro » tient
   sur une ligne. */
html[data-format="tel"] .r-outils { flex-wrap: wrap; row-gap: 8px; }
html[data-format="tel"] .r-outils .r-bouton { white-space: nowrap; }

/* ═══ LES OSCARS DE L'INSTITUT (03/10/2026) ═══════════════════════════
   Groupes × sept scores moyens sur 100. Meilleure case de chaque colonne
   en bleu, moins bonne en ambre — chaque fond clair a sa version sombre. */
.r-oscars-i { table-layout: fixed; margin-top: 6px; }
.r-oscars-i th, .r-oscars-i td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-oscars-i thead th { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; font-size: 9px; letter-spacing: .02em; padding-left: 3px; padding-right: 3px; vertical-align: bottom; hyphens: manual; }
.r-oscars-i th:nth-child(1), .r-oscars-i td:nth-child(1) { width: 26px; text-overflow: clip; padding-right: 2px; }
.r-oscars-i th:nth-child(2) { width: 26%; }
.r-oscars-i th:nth-child(3), .r-oscars-i td:nth-child(3) { width: 46px; text-align: right; }
.r-oscars-i td.q { color: var(--sourd); }
.r-oscars-i td.b { color: var(--sourd); }
.r-oscars-i .v { text-align: center; }
.r-oscars-i td.v { color: var(--ink); font-weight: 500; border-radius: 6px; }
.r-oscars-i .glob { font-weight: 750; }
.r-oscars-i thead th.glob { color: var(--ink); }
.r-oscars-i td.v.vide { color: var(--sourd); font-weight: 400; }
.r-oscars-i td.v.max { background: rgba(0, 144, 211, .16); color: #005f8c; font-weight: 750; }
.r-oscars-i td.v.min { background: rgba(176, 122, 63, .16); color: #8a5a22; font-weight: 750; }
html[data-lum="dark"] .feuille .r-oscars-i td.v.max { background: rgba(0, 144, 211, .30); color: #9fe3ff; }
html[data-lum="dark"] .feuille .r-oscars-i td.v.min { background: rgba(217, 168, 96, .24); color: #f0c98a; }
.r-oscars-i.serre { font-size: 11px; }
.r-oscars-i.serre th, .r-oscars-i.serre td { padding: 3px 5px; }
.r-oscars-i.tres-serre { font-size: 10.5px; }
.r-oscars-i.tres-serre tbody th, .r-oscars-i.tres-serre tbody td { padding-top: 2px; padding-bottom: 2px; }
html[data-format="tel"] .r-oscars-i { font-size: 10px; }

/* Sur la porte du téléphone, le coin bas-droit tombe sur le socle sombre : le
   « 8 » caché y prend la couleur du socle, sinon il se voyait (04/10/2026). */
html[data-format="tel"] body:has(.porte) #d8-huit { color: var(--porte-socle); }

/* Le retour du téléphone (le fil d'Ariane y est replié) ; caché sur écran. */
.fil button.retour { display: none; }
html[data-format="tel"] .fil button.retour { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; margin: 0 2px 0 -4px; padding: 0; color: var(--ink); border-radius: 50%; }
html[data-format="tel"] .fil button.retour:active { background: var(--trait, rgba(127,127,127,.15)); }

/* Le tri croisé dans la bulle du chat : la colonne des réponses garde une
   largeur lisible (un mot par ligne à 1 440 px, 04/10/2026) ; le tableau
   défile à l'horizontale dans sa boîte. */
.bulle-tri .r-croise tbody th { min-width: 190px; max-width: 280px; }
html[data-format="tel"] .bulle-tri .r-croise tbody th { min-width: 150px; }

/* Les pistes rangées : un seul bouton discret, qui les rouvre. */
.pistes .piste-idees { display: none; }
.pistes.replie .piste { display: none; }
.pistes.replie .piste-idees { display: inline-flex; color: var(--acc-tx); border-style: dashed; }

/* « Comment lire ce rapport » : la puce native se collait au texte dans le
   PDF (html2canvas, 04/10/2026) ; une puce dessinée, avec son retrait. */
.r-lire { list-style: none; padding-left: 4px; }
.r-lire li { position: relative; padding-left: 14px; }
.r-lire li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--acc-tx); }
.r-public ul { list-style: none; padding-left: 2px; }
.r-public ul li { position: relative; padding-left: 12px; }
.r-public ul li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--sourd); }
.feuille .r-liens { list-style: none; padding-left: 4px; }
.feuille .r-liens li { position: relative; padding-left: 14px; }
.feuille .r-liens li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--acc-tx); }
.feuille .r-surveiller .r-liens li::before { color: var(--ambre); }

.r-mx-cles { list-style: none; padding-left: 0; }

/* Téléphone : la feuille se lit en colonne ; un tableau plus large que
   l'écran défile dans sa boîte au lieu de sortir de la feuille, et la colonne
   des réponses garde une largeur lisible (un mot par ligne, 04/10/2026). */
html[data-format="tel"] .feuille .r-croise-boite,
html[data-format="tel"] .feuille .r-sous:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html[data-format="tel"] .feuille .r-croise tbody th { min-width: 150px; }
html[data-format="tel"] .feuille .r-croise { min-width: 100%; }
html[data-format="tel"] .feuille .r-croise-boite, html[data-format="tel"] .feuille .r-sous { max-width: 100%; min-width: 0; }
html[data-format="tel"] .feuille .f-corps { min-width: 0; max-width: 100%; }
/* Tout tableau d'une feuille, sur téléphone, défile dans sa propre largeur
   (palmarès des agences coupé à droite, 04/10/2026). */
html[data-format="tel"] .feuille table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* A5 1 (04/10/2026) : case réservée au PDF, à la place de « Humeur de 8 » (cachée à l'écran). */
.r-tuile.r-pdf-seul { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LA PORTE (04/10/2026) — l'animation de chargement de jules : « ultra
   stylée… je la veux sur tout ». Recopie sans React de `Porte.tsx` (V8) :
   fente d'1 px qui s'étire du centre (0,55 s), mot en capitales espacées
   (0,9 em → 0,5 em, 0,6 s), respiration de la fente (1 → 0,55 → 1, 1,6 s)
   tant qu'on attend pour de vrai, puis deux battants qui glissent (0,75 s,
   cubic-bezier(.76,0,.18,1)) et la porte s'efface (0,9 s).
   Aux couleurs de D8 : fente, halo et mot à l'accent (bleu Qualitest),
   battants au fond de l'écran — clair ou sombre, la porte suit le thème.
   Classes `lp-*` et `porte-mini*` : JAMAIS `.porte`, qui est la porte du mot
   de passe et suspend `rendre()` tant qu'elle est là.
   Pas coupée par « Réduire les animations » (choix de jules, fiche outil).
   ══════════════════════════════════════════════════════════════════════════ */
.lp-porte { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.lp-battant { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--fond);
  transition: transform .75s cubic-bezier(.76, 0, .18, 1); }
.lp-haut { top: 0; border-bottom: 1px solid var(--lin-doux); }
.lp-bas { bottom: 0; border-top: 1px solid var(--lin-doux); }
.lp-fente { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--acc); transform-origin: center;
  box-shadow: 0 0 18px 1px color-mix(in srgb, var(--acc) 55%, transparent);
  animation: lp-etire .55s ease-in-out both, lp-respire 1.6s ease-in-out .55s infinite; }
.lp-mot { position: absolute; left: 0; right: 0; top: calc(50% - 34px); text-align: center; padding-left: .5em;
  font-family: var(--f-titre); font-weight: 200; font-size: clamp(14px, 2.2vw, 20px); color: var(--acc);
  text-transform: uppercase; white-space: nowrap; animation: lp-mot-entre .6s ease both; }
.lp-legende { position: absolute; left: 16px; right: 16px; top: calc(50% + 22px); text-align: center;
  font-size: 12px; color: var(--sourd); letter-spacing: .02em; }
.lp-legende:empty { display: none; }
.lp-ouverte { animation: lp-retrait .9s linear forwards; }
.lp-ouverte .lp-haut { transform: translateY(-101%); }
.lp-ouverte .lp-bas { transform: translateY(101%); }
.lp-ouverte .lp-fente { animation: lp-efface .35s ease forwards; }
.lp-ouverte .lp-mot { animation: lp-mot-sort .3s ease forwards; }
.lp-ouverte .lp-legende { opacity: 0; transition: opacity .3s ease; }
@keyframes lp-etire { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lp-respire { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes lp-efface { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
@keyframes lp-mot-entre { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .5em; } }
@keyframes lp-mot-sort { from { opacity: 1; letter-spacing: .5em; } to { opacity: 0; letter-spacing: .42em; } }
@keyframes lp-retrait { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* La petite porte : une attente DANS la page (8 réfléchit, le rapport se
   compose, un classeur se lit). La fente (≤ 220 px) et le mot au-dessus,
   sans couvrir l'écran. */
.porte-mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 0; width: 100%; text-align: center; }
.porte-mini-haute { padding: 64px 0; }
.porte-mini-mot { font-family: var(--f-titre); font-size: 10.5px; font-weight: 300; color: var(--acc); padding-left: .45em;
  text-transform: uppercase; max-width: 100%; overflow-wrap: anywhere; animation: lp-mini-mot .6s ease both; }
.porte-mini-fente { display: block; width: min(220px, 60%); height: 1px; background: var(--acc); transform-origin: center;
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--acc) 50%, transparent);
  animation: lp-etire .55s ease-in-out both, lp-mini-respire 1.6s ease-in-out .55s infinite; }
.porte-mini-legende { font-size: 11.5px; color: var(--sourd); letter-spacing: 0; }
@keyframes lp-mini-mot { from { opacity: 0; letter-spacing: .8em; } to { opacity: 1; letter-spacing: .45em; } }
@keyframes lp-mini-respire { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
/* Les anciens conteneurs gardent leur nom (les bancs attendent leur départ) ;
   seul ce qu'ils montrent change. */
.pense.pense-porte { display: block; width: 100%; }
.depot-zone.occupe:has(.porte-mini) { flex-direction: column; gap: 4px; }
.r-squelette .porte-mini { padding: 80px 0; }
.h-attente-porte { padding-top: 6px; }
.h-attente .porte-mini { padding: 0; }
.h-attente .porte-mini-mot { color: #0090D3; }
.h-attente .porte-mini-fente { background: #0090D3; box-shadow: 0 0 12px 1px rgba(0, 144, 211, .5); }
.lp-pdf { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; width: min(320px, calc(100vw - 32px));
  background: var(--pap); border-radius: var(--rayon); box-shadow: var(--ombre), inset 0 0 0 1px var(--lin); pointer-events: none;
  animation: apparait .35s var(--sortie) both; }
.lp-pdf .porte-mini { padding: 16px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   CHANTIER « CHARGÉ D'ÉTUDES + ÉDITEUR DU RAPPORT » (05/10/2026)
   MODE CHARGÉ (bascule, aperçu de l'Excel), SÉLECTION (cadre, pièce jointe),
   RETOUCHES (carte avant → après, marque « modifié », liste), CADRAGE
   (cartes du chat). Cartes arrondies, noir franc en sombre ; toute couleur
   claire écrite en dur dans `.feuille` a sa version sombre.
   ══════════════════════════════════════════════════════════════════════════ */

/* — MODE CHARGÉ : la bascule à côté de Clair / Sombre — */
.bascule-mode button { white-space: nowrap; }
html[data-format="tel"] .bascule-mode button { padding: 5px 8px; font-size: 11px; }

/* — l'aperçu de l'Excel — */
.centre-charge { gap: 0; }
.apercu { flex: 0 0 auto; min-height: 0; max-height: 38vh; display: flex; flex-direction: column; margin: 12px 20px 0;
  background: var(--pap); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--lin);
  user-select: none; -webkit-user-select: none; overflow: hidden; }
.apercu.replie { max-height: none; }
.apercu.replie .ap-corps { display: none; }
.ap-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-align: left; flex-wrap: wrap; width: 100%; }
.ap-tete b { font-family: var(--f-titre); font-size: 13.5px; }
.ap-sous { font-size: 11px; color: var(--sourd); }
.ap-resume { font-size: 11.5px; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.ap-fleche { color: var(--sourd); transition: transform .2s var(--sortie); }
.apercu.replie .ap-fleche { transform: rotate(-90deg); }
.ap-tete.signal { box-shadow: inset 0 0 0 2px var(--acc); border-radius: var(--rayon); }
.ap-corps { display: flex; flex-direction: column; min-height: 0; padding: 0 14px 12px; gap: 8px; }
.ap-legende { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: var(--tx-2); }
.ap-role { display: inline-flex; align-items: center; gap: 5px; }
.ap-role i, .ap-pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--pc, #8a94a3); flex: 0 0 auto; display: inline-block; }
.ap-r-q { --pc: #0090D3; } .ap-r-d { --pc: #375CAD; } .ap-r-p { --pc: #7a8ce0; } .ap-r-t { --pc: #b07a3f; } .ap-r-r { --pc: #9aa3ad; }
.ap-r-c { --pc: #5aa7a0; } .ap-r-l { --pc: #c28cc9; } .ap-r-i { --pc: #6b7280; } .ap-r-g { --pc: #a8a29e; } .ap-r-v { --pc: #d1d5db; }
html[data-lum="dark"] .ap-r-t { --pc: #d9a860; } html[data-lum="dark"] .ap-r-v { --pc: #4b5563; } html[data-lum="dark"] .ap-r-i { --pc: #9ca3af; }
.ap-role-lu i { background: var(--acc); box-shadow: 0 0 0 3px var(--acc-t); }
.ap-grille { overflow: auto; min-height: 0; flex: 1 1 auto; border-radius: var(--rayon-s); box-shadow: inset 0 0 0 1px var(--lin-doux); max-height: 240px; }
.ap-table { border-collapse: separate; border-spacing: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.ap-table th, .ap-table td { min-width: 96px; max-width: 150px; padding: 5px 8px; text-align: left; vertical-align: top;
  border-right: 1px solid var(--lin-doux); border-bottom: 1px solid var(--lin-doux); overflow: hidden; text-overflow: ellipsis; }
.ap-table td { white-space: nowrap; color: var(--tx-2); }
.ap-table th { position: sticky; top: 0; z-index: 1; background: var(--pap); font-weight: 500; transition: background .4s, box-shadow .4s; }
.ap-lettre { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 10.5px; color: var(--sourd); }
.ap-titre { color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.ap-raison { margin-top: 3px; font-size: 10px; line-height: 1.3; color: var(--alerte); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-col.ap-r-t .ap-titre, .ap-col.ap-r-i .ap-titre, .ap-col.ap-r-g .ap-titre, .ap-col.ap-r-r .ap-titre, .ap-col.ap-r-v .ap-titre { color: var(--sourd); }
.ap-table td.masque { letter-spacing: .2em; color: var(--sourd); }
.ap-table th.lu, .ap-table td.lu { background: var(--acc-t2); }
.ap-table th.allume { background: var(--acc-t); box-shadow: inset 0 -2px 0 var(--acc); animation: ap-allume 1.6s ease-out 1; }
.ap-table td.allume { background: var(--acc-t); }
@keyframes ap-allume { 0% { box-shadow: inset 0 -2px 0 var(--acc), 0 0 0 0 var(--acc); } 40% { box-shadow: inset 0 -2px 0 var(--acc), inset 0 0 0 2px var(--acc); } 100% { box-shadow: inset 0 -2px 0 var(--acc); } }
.ap-panne { margin: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; }
.centre-charge > .rapport { padding-top: 12px; }
html[data-format="tel"] .etude.tel > .apercu { flex: 1 1 auto; max-height: none; margin: 10px 12px 12px; }
html[data-format="tel"] .etude.tel > .apercu .ap-grille { max-height: none; flex: 1 1 auto; }
html[data-format="tel"] .etude.tel > .apercu .ap-sous { display: none; }
html[data-format="tel"] .onglets.trois { grid-template-columns: 1fr 1fr 1fr; }

/* — SÉLECTION : le curseur rectangle, le cadre, la pièce jointe — */
html:not([data-format="tel"]) .rapport-defile .feuille:not(.f-vierge) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22'%3E%3Crect x='1.5' y='1.5' width='27' height='19' rx='3' fill='rgba(0,144,211,.10)' stroke='%230090D3' stroke-width='1.6' stroke-dasharray='4 2.5'/%3E%3C/svg%3E") 15 11, crosshair;
}
.rapport-defile.sel-mode { touch-action: none; }
.rapport-defile.sel-mode .feuille { outline: 2px dashed var(--acc); outline-offset: 4px; }
.sel-cadre { position: fixed; z-index: 60; pointer-events: none; border-radius: 8px; transition: left .12s var(--sortie), top .12s var(--sortie), width .12s var(--sortie), height .12s var(--sortie); }
.sel-viseur { border: 1.5px solid var(--q-bleu); background: rgba(0, 144, 211, .07); box-shadow: 0 0 0 4px rgba(0, 144, 211, .12); }
.sel-trace { border: 1.5px dashed var(--q-bleu); background: rgba(0, 144, 211, .10); transition: none; border-radius: 4px; }
.r-selectionner { display: none; }
html[data-format="tel"] .r-selectionner { display: inline-flex; }
.r-selectionner[aria-pressed="true"] { background: var(--acc); color: #fff; box-shadow: none; }
.pj-zone[hidden] { display: none; }
.pj { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--rayon); background: var(--pap); box-shadow: inset 0 0 0 1px var(--acc-t); animation: apparait .3s var(--sortie) both; min-width: 0; }
.pj-vignette { width: 92px; height: 62px; flex: 0 0 auto; object-fit: cover; object-position: top left; border-radius: 8px; background: var(--pap-2); box-shadow: inset 0 0 0 1px var(--lin); }
.pj-sans { display: grid; place-items: center; font-size: 10px; color: var(--sourd); text-align: center; padding: 4px; overflow: hidden; }
.pj-sans .porte-mini { padding: 0; gap: 4px; }
.pj-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pj-texte b { font-size: 12px; }
.pj-resume { font-size: 11px; color: var(--acc-tx); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-extrait { font-size: 11px; color: var(--sourd); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pj-retirer { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 999px; font-size: 16px; color: var(--sourd); }
.pj-retirer:hover { background: var(--acc-t2); color: var(--ink); }
.rt-sel-rappel { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-tx); }

/* — RETOUCHES : la carte avant → après, la note, la liste — */
.rt-carte { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--rayon); background: var(--pap); box-shadow: inset 0 0 0 1px var(--lin), var(--ombre); }
.rt-titre { font-size: 12px; font-weight: 650; color: var(--tx-2); }
.rt-avap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.rt-av, .rt-ap { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--rayon-s); min-width: 0; overflow-wrap: anywhere; }
.rt-av { background: var(--pap-2); }
.rt-ap { background: var(--acc-t); }
.rt-av span, .rt-ap span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sourd); }
.rt-av b { font-size: 14px; color: var(--tx-2); text-decoration: line-through; text-decoration-color: var(--sourd); }
.rt-ap b { font-size: 14px; color: var(--ink); }
.rt-fl { color: var(--acc); font-size: 16px; }
.rt-recalc { margin: 0; padding-left: 16px; font-size: 11.5px; line-height: 1.5; color: var(--tx-2); display: flex; flex-direction: column; gap: 3px; }
.rt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rt-etat { font-size: 12px; font-weight: 600; color: var(--acc-tx); }
.rt-etat.rt-annulee { color: var(--sourd); }
.rt-etat.rt-echec { color: var(--alerte); }
.rt-note { font-size: 12px; line-height: 1.5; padding: 7px 10px; border-left: 2px solid var(--alerte); background: rgba(176, 122, 63, .09); border-radius: 0 8px 8px 0; color: var(--tx-2); }
html[data-lum="dark"] .rt-note { background: rgba(217, 168, 96, .12); }
.r-retouches[hidden] { display: none; }
.rt-liste { position: absolute; right: 20px; top: 56px; z-index: 30; width: min(420px, calc(100% - 40px)); max-height: 60vh; overflow: auto;
  background: var(--pap); border-radius: var(--rayon); box-shadow: var(--ombre), inset 0 0 0 1px var(--lin); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; animation: apparait .25s var(--sortie) both; }
.rt-liste-tete { display: flex; align-items: center; gap: 8px; }
.rt-liste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rt-liste li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--rayon-s); background: var(--pap-2); }
.rt-liste li > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rt-liste li b { font-size: 12.5px; }
.rt-liste li span { font-size: 11px; color: var(--sourd); }
.rt-liste li.non-placee span { color: var(--alerte); }
.rt-msg { font-size: 12px; color: var(--alerte); margin: 0; }
.rt-vide { font-size: 12px; color: var(--sourd); margin: 0; }

/* La marque « modifié » dans la feuille (écran ET PDF) : soulignée, un
   astérisque ; la valeur de l'Excel en bulle au survol et en pied de page. */
.feuille .r-modifie { position: relative; background: rgba(217, 168, 96, .20); box-shadow: inset 0 -2px 0 #b07a3f; border-radius: 3px; padding: 0 2px; }
.feuille .r-modifie::after { content: '*'; color: #b07a3f; font-weight: 700; font-size: .75em; vertical-align: super; margin-left: 1px; }
.feuille .r-modifie:hover::before { content: attr(data-excel); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: 0; color: #fff; background: #0b0b0c; padding: 4px 8px; border-radius: 6px; z-index: 5; pointer-events: none; }
html[data-lum="dark"] .feuille .r-modifie { background: rgba(217, 168, 96, .22); box-shadow: inset 0 -2px 0 #d9a860; }
html[data-lum="dark"] .feuille .r-modifie::after { color: #d9a860; }
html[data-lum="dark"] .feuille .r-modifie:hover::before { background: #f2f4f7; color: #0b0b0c; }
.feuille .r-pied-modif { position: absolute; left: 60px; right: 60px; bottom: 46px; font-size: 9.5px; line-height: 1.35; color: #8a5a22;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feuille .r-pied-modif b { font-weight: 700; }
.feuille .r-pied-modif::before { content: '* '; font-weight: 700; }
html[data-lum="dark"] .feuille .r-pied-modif { color: #e2b877; }
html[data-format="tel"] .feuille .r-pied-modif { position: static; margin-top: 10px; }

/* — CADRAGE : objectif cité sur la feuille — */
.feuille .r-objectif { font-size: 12px; line-height: 1.5; color: var(--tx-2); padding: 8px 12px; border-left: 2px solid var(--q2, #0090D3); background: #f3f8fc; border-radius: 0 8px 8px 0; margin: 0; }
html[data-lum="dark"] .feuille .r-objectif { background: #16202a; }

/* — CADRAGE : les cartes du chat, façon Claude Design — */
.cad-zone { flex: 0 0 auto; padding: 0 18px 10px; max-height: 36%; overflow: auto; }
.cad-zone:empty { display: none; }
.cad-carte { display: flex; flex-direction: column; gap: 9px; padding: 13px 14px; border-radius: var(--rayon-l); background: var(--pap);
  box-shadow: inset 0 0 0 1px var(--lin), var(--ombre); animation: apparait .3s var(--sortie) both; }
.cad-tete { display: flex; align-items: center; gap: 4px; }
.cad-kicker { font-family: var(--f-titre); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-tx); }
.cad-n { font-size: 11px; color: var(--sourd); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.cad-titre { font-family: var(--f-titre); font-size: 14.5px; line-height: 1.35; }
.cad-aide { margin: 0; font-size: 12px; color: var(--sourd); line-height: 1.5; }
.cad-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.cad-opt { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--lin); color: var(--tx-2); text-align: left; }
.cad-opt:hover { background: var(--acc-t2); color: var(--ink); }
.cad-opt.pris { background: var(--ink); color: var(--fond); box-shadow: none; }
.cad-cases { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow: auto; }
.cad-case { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.cad-case:hover { background: var(--acc-t2); }
.cad-case input { margin-top: 2px; accent-color: var(--acc); flex: 0 0 auto; }
.cad-libre, .cad-paire input { width: 100%; border-radius: var(--rayon-s); border: 1px solid var(--lin); background: var(--fond); color: var(--ink); padding: 8px 10px; font-size: 12.5px; font-family: inherit; resize: vertical; }
.cad-libre:focus, .cad-paire input:focus { outline: none; border-color: var(--acc); }
.cad-paires { display: flex; flex-direction: column; gap: 6px; }
.cad-paire { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.cad-paire span { color: var(--sourd); }
.cad-plus { align-self: flex-start; font-size: 12px; color: var(--acc-tx); padding: 4px 0; }
.cad-ordre { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cad-ordre li span { flex: 1 1 auto; min-width: 0; }
.cad-ordre li { display: list-item; }
.cad-ordre li > * { vertical-align: middle; }
.cad-ordre li .r-mini { width: 24px; height: 24px; font-size: 12px; }
.cad-msg { margin: 0; font-size: 12px; color: var(--alerte); }
.cad-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cad-pilule { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 12px; color: var(--tx-2);
  box-shadow: inset 0 0 0 1px var(--lin); background: var(--pap); max-width: 100%; }
.cad-pilule b { color: var(--acc-tx); font-weight: 650; }
.cad-pilule .porte-mini { padding: 0; flex-direction: row; gap: 8px; }
.cad-pilule .porte-mini-fente { width: 60px; }
.cad-panne { color: var(--alerte); flex-wrap: wrap; }
.cad-panne button { text-decoration: underline; color: var(--acc-tx); }
html[data-format="tel"] .cad-zone { padding: 0 14px 8px; max-height: 46%; }
html[data-format="tel"] .rt-liste { right: 12px; width: calc(100% - 24px); }
.chat > .saisie { order: 3; }
.chat > .cad-zone { order: 2; }

/* — CADRAGE : documents de l'étude et propositions — */
.cad-mode { display: flex; gap: 2px; padding: 3px; margin-bottom: 8px; border-radius: 999px; background: var(--pap); box-shadow: inset 0 0 0 1px var(--lin); }
.cad-mode button { flex: 1 1 0; min-width: 0; padding: 6px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--sourd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cad-mode button[aria-pressed="true"] { background: var(--ink); color: var(--fond); }
.cad-docs-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cad-docs-liste li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--rayon-s); background: var(--pap-2); }
.cad-docs-liste li > div { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.cad-docs-liste li b { font-size: 12.5px; }
.cad-docs-liste li span { font-size: 11px; color: var(--sourd); }
.cad-prop { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: var(--rayon-s); background: var(--acc-t2); box-shadow: inset 0 0 0 1px var(--acc-t); }
.cad-prop-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--acc-tx); }
.cad-verif { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; color: var(--alerte); box-shadow: inset 0 0 0 1px var(--alerte); }
.cad-prop-v { margin: 0; font-size: 12.5px; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.cad-prop-s { margin: 0; font-size: 11px; color: var(--sourd); font-style: italic; line-height: 1.4; overflow-wrap: anywhere; }
.cad-prop-ph { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--tx-2); }
.cad-champs { display: flex; flex-direction: column; gap: 6px; }
.cad-champ { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--sourd); }

/* ── DISPOSITIFS (05/10/2026) : la forme d'un bloc changée dans le chat ── */
.r-camembert { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: center; width: 100%; }
.r-camembert-svg { display: block; }
.r-cam-part { stroke: var(--papier, #fff); stroke-width: 1.5; }
html[data-lum="dark"] .r-cam-part { stroke: #121416; }
.r-camembert-l { display: flex; flex-direction: column; gap: 7px; }
.r-camembert-l > span { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 11.5px; color: var(--tx-2); }
.r-camembert-l > span.vise { color: var(--ink); font-weight: 600; }
.r-camembert-l > span > i { width: 10px; height: 10px; border-radius: 3px; }
.r-camembert-l b { font-weight: 720; font-variant-numeric: tabular-nums; color: var(--ink); }
.r-groupes-disp { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.r-tab-disp td { text-align: right; }
.rt-choix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media print { .rt-choix { display: none; } }

/* — LES CRÉDITS (06/10/2026) ————————————————————————————————————————
   Le solde dans le coin de la barre, discret ; l'historique en carte
   flottante ; le bandeau du rapport (coût estimé, solde qui manque) ; la
   page d'administration de l'équipe. Clair et sombre par les variables. */
.puce-credits { cursor: pointer; border: 1px solid var(--lin); border-radius: 999px; padding: 4px 10px; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--sourd); background: transparent; }
.puce-credits:hover { color: var(--ink); border-color: var(--acc); }
.puce-credits .pc-rond { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: 0 0 auto; }
.puce-credits.bas .pc-rond { background: var(--alerte); }
.puce-alerte-ia { cursor: pointer; color: var(--alerte); background: transparent; }
.puce-alerte-ia[hidden] { display: none; }
/* LE DIDACTICIEL (19/10/2026) : le bouton qui rouvre `apprendre.html` */
.puce-didacticiel { cursor: pointer; text-decoration: none; border: 1px solid var(--lin); border-radius: 999px;
  padding: 4px 11px; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--sourd); background: transparent; }
.puce-didacticiel:hover { color: var(--ink); border-color: var(--acc); }
.credits-pop { position: fixed; top: 58px; right: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow: auto;
  background: var(--pap); color: var(--ink); border: 1px solid var(--lin); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 18px 18px; }
.credits-pop .cp-tete { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.credits-pop .cp-x { font-size: 20px; line-height: 1; color: var(--sourd); padding: 2px 6px; }
.credits-pop .cp-solde { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 6px; }
.credits-pop .cp-solde b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.credits-pop .cp-solde span { color: var(--sourd); font-size: 12.5px; }
.credits-pop .cp-note, .credits-pop .cp-jour { font-size: 12.5px; color: var(--tx-2); line-height: 1.5; margin: 6px 0; }
.credits-pop .cp-recharger { display: grid; gap: 3px; margin: 10px 0 14px; padding: 10px 12px; border-radius: var(--rayon-s); background: var(--acc-t2); font-size: 12.5px; }
.credits-pop .cp-recharger span { color: var(--tx-2); }
.cp-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.cp-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lin-doux); font-size: 12.5px; }
.cp-ligne > div { display: grid; gap: 2px; min-width: 0; }
.cp-ligne > div span { color: var(--sourd); font-size: 11.5px; }
.cp-ligne .cp-montant { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cp-ligne.plus .cp-montant { color: var(--acc-tx); }
.cp-ligne.nul .cp-montant { color: var(--sourd); font-weight: 400; }
.cp-vide { color: var(--sourd); font-size: 12.5px; padding: 8px 0; }
.r-credits { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 auto 16px; max-width: 794px;
  padding: 12px 16px; border-radius: var(--rayon-s); background: var(--pap); border: 1px solid var(--lin); color: var(--ink); font-size: 13px; }
.r-credits > div:first-child { display: grid; gap: 3px; flex: 1 1 280px; }
.r-credits > div:first-child span { color: var(--tx-2); font-size: 12.5px; line-height: 1.45; }
.r-credits-choix { display: flex; gap: 8px; flex-wrap: wrap; }
.credits-admin { margin-top: 34px; display: grid; gap: 10px; }
.credits-admin .ca-alerte { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--rayon-s); border: 1px solid var(--alerte); color: var(--ink); font-size: 13px; }
.credits-admin .ca-alerte b { color: var(--alerte); }
.credits-admin .ca-resume { font-size: 12.5px; color: var(--sourd); }
.ca-table { display: grid; gap: 0; }
.ca-ligne { display: grid; grid-template-columns: minmax(150px, 1fr) 110px minmax(0, 3fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--lin-doux); }
.ca-ligne.retire { opacity: .6; }
.ca-qui { display: grid; gap: 2px; min-width: 0; }
.ca-qui b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-qui span, .ca-qui-m { color: var(--sourd); font-size: 11.5px; }
.ca-solde { font-variant-numeric: tabular-nums; font-weight: 600; }
.ca-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ca-actions input, .ca-actions select, .ca-reglage input { border: 1px solid var(--lin); border-radius: 8px; background: var(--pap); color: var(--ink); padding: 6px 8px; font-size: 12.5px; }
.ca-montant { width: 92px; } .ca-motif { width: 200px; } .ca-plafond { width: 86px; }
.ca-msg { font-size: 12px; color: var(--sourd); }
.ca-reglages { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; align-items: end; }
.ca-reglage { display: grid; gap: 4px; font-size: 12px; color: var(--sourd); }
.ca-registre { max-height: 420px; overflow: auto; }
html[data-format="tel"] .ca-ligne { grid-template-columns: 1fr auto; }
html[data-format="tel"] .ca-actions { grid-column: 1 / -1; }
html[data-format="tel"] .ca-motif { width: 100%; }
html[data-format="tel"] .puce-credits { order: 4; padding: 3px 8px; }
@media print { .r-credits, .credits-pop { display: none !important; } }

/* — L'ABONNEMENT (08/10/2026) ————————————————————————————————————————
   La page de facturation refaite en abonnement : un très grand titre, du
   vide, des cartes arrondies posées sur le fond (noir franc en sombre, jamais
   un dégradé), des boutons en pilule. Tout passe par les variables : clair et
   sombre se règlent seuls. */
.abo { max-width: 1180px; margin: 0 auto; width: 100%; padding-bottom: 80px; }
.abo-tete { padding: 18px 0 30px; }
.abo-phrase { margin: 14px 0 0; max-width: 620px; font-size: 17px; line-height: 1.5; color: var(--tx-2); }
.abo-corps { display: grid; gap: 28px; }
.abo-corps > .porte-mini { margin: 40px auto; }
.abo-panne { display: grid; gap: 12px; justify-items: center; }
.abo-provisoire { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; width: fit-content; max-width: 100%;
  background: var(--pap); box-shadow: inset 0 0 0 1px var(--lin); font-size: 13px; color: var(--tx-2); }
.abo-provisoire .point { flex: 0 0 auto; background: var(--alerte); }
.abo-pilule { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 650; color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--lin);
  transition: background .2s var(--sortie), transform .15s; white-space: nowrap; }
.abo-pilule:hover { background: var(--acc-t2); }
.abo-pilule:active { transform: scale(.97); }
.abo-pilule.plein { background: var(--ink); color: var(--fond); box-shadow: none; }
.abo-pilule.plein:hover { opacity: .88; }
.abo-pilule:disabled { cursor: default; opacity: .55; transform: none; }
.abo-pilule.plein:disabled { opacity: 1; background: var(--acc-t); color: var(--acc-tx); }
.abo-entree { margin-right: 12px; padding: 9px 18px; font-size: 13px; }
.abo-lien { font-size: 13.5px; color: var(--sourd); text-decoration: underline; text-underline-offset: 3px; padding: 8px 6px; }
.abo-lien:hover { color: var(--ink); }
.abo-danger { color: var(--alerte); }
.abo-msg { font-size: 13px; color: var(--alerte); min-height: 0; }
.abo-msg:empty { display: none; }

.abo-encours { background: var(--pap); border-radius: var(--rayon-l); padding: 30px 32px; display: grid; gap: 24px; box-shadow: var(--ombre); }
html[data-lum="dark"] .abo-encours, html[data-lum="dark"] .abo-formule, html[data-lum="dark"] .abo-facture {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--ombre); }
.abo-encours-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.abo-etiquette { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc-tx); font-weight: 650; }
.abo-nom { font-family: var(--f-titre); font-size: clamp(44px, 6vw, 76px); font-weight: 760; letter-spacing: -.045em; line-height: 1; margin-top: 8px; }
.abo-nom.petit { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; }
.abo-prix-ligne { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.abo-prix-ligne b { font-size: 26px; letter-spacing: -.02em; }
.abo-prix-ligne span, .abo-depuis { color: var(--sourd); font-size: 13px; }
.abo-texte { margin: 0; max-width: 680px; color: var(--tx-2); font-size: 14px; line-height: 1.55; }
.abo-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.abo-fait { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--rayon); background: var(--fond); min-width: 0; }
.abo-fait-t { font-size: 12px; color: var(--sourd); }
.abo-fait b { font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.abo-fait-d { font-size: 12px; color: var(--tx-2); }
.abo-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.abo-confirmer, .abo-avis, .abo-demande { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--rayon); background: var(--fond); font-size: 13.5px; flex: 1 1 100%; }
.abo-confirmer[hidden] { display: none; }
.abo-avis, .abo-demande { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.abo-avis > :first-child, .abo-demande > :first-child { display: grid; gap: 3px; flex: 1 1 300px; }
.abo-avis span, .abo-demande span { color: var(--tx-2); }
.abo-ligne-boutons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.abo-section { display: grid; gap: 16px; padding-top: 26px; }
.abo-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.abo-section-tete h2 { margin: 0; font-size: 30px; font-weight: 720; letter-spacing: -.03em; }
.abo-section-tete > span { color: var(--sourd); font-size: 13px; }
.abo-bascule button { display: inline-flex; align-items: center; gap: 6px; }
.abo-offert { font-size: 11px; font-weight: 650; color: var(--acc-tx); }
.abo-bascule button[aria-pressed="true"] .abo-offert { color: inherit; opacity: .8; }
.abo-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.abo-formule { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 24px; border-radius: var(--rayon-l);
  background: var(--pap); box-shadow: var(--ombre); }
.abo-formule.actuelle { box-shadow: inset 0 0 0 2px var(--acc), var(--ombre); }
html[data-lum="dark"] .abo-formule.actuelle { box-shadow: inset 0 0 0 2px var(--acc), inset 0 1px 0 rgba(255, 255, 255, .07), var(--ombre); }
.abo-formule-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.abo-formule-nom { font-size: 24px; font-weight: 720; letter-spacing: -.03em; }
.abo-badge { font-size: 11.5px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--acc); color: #fff; white-space: nowrap; }
.abo-badge.doux { background: var(--acc-t); color: var(--acc-tx); }
.abo-accroche { margin: 0; color: var(--tx-2); font-size: 13.5px; line-height: 1.45; min-height: 2.9em; }
.abo-prix { display: grid; gap: 2px; }
.abo-prix b { font-family: var(--f-titre); font-size: 46px; font-weight: 760; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.abo-prix span { font-size: 12.5px; color: var(--sourd); }
.abo-points { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 9px; border-top: 1px solid var(--lin-doux); font-size: 13.5px; flex: 1 1 auto; }
.abo-points li { padding-left: 20px; position: relative; color: var(--tx-2); }
.abo-points li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.abo-points li b { color: var(--ink); font-family: var(--f-corps); font-weight: 650; }
.abo-points li.abo-eq { font-size: 12px; color: var(--sourd); padding-left: 20px; }
.abo-points li.abo-eq::before { display: none; }
.abo-formule .abo-pilule { width: 100%; margin-top: 4px; }
.abo-commun { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--rayon); background: var(--pap); box-shadow: inset 0 0 0 1px var(--lin-doux); }
.abo-commun ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 22px; font-size: 13.5px; color: var(--tx-2); }
.abo-commun li { padding-left: 18px; position: relative; }
.abo-commun li::before { content: "✓"; position: absolute; left: 0; color: var(--acc-tx); font-weight: 700; }
.abo-liste { max-height: 420px; overflow: auto; background: var(--pap); border-radius: var(--rayon); padding: 4px 18px; }

.abo-factures { list-style: none; margin: 0; padding: 4px 20px; border-radius: var(--rayon); background: var(--pap); }
.abo-facture-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--lin-doux); }
.abo-facture-ligne:first-child { border-top: 0; }
.abo-fl-qui { display: grid; gap: 2px; min-width: 0; }
.abo-fl-qui b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abo-fl-qui span { color: var(--sourd); font-size: 12px; overflow-wrap: anywhere; }
.abo-fl-montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.abo-fl-boutons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.abo-fl-boutons select { border: 1px solid var(--lin); border-radius: 999px; background: var(--pap); color: var(--ink); padding: 6px 10px; font-size: 12.5px; }
.abo-statut { font-size: 11.5px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--acc-t2); color: var(--alerte); white-space: nowrap; }
.abo-statut.ok { color: var(--ok); }

.abo-voile { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 20px 16px; overflow: auto; }
.abo-facture { width: min(720px, 100%); background: var(--pap); color: var(--ink); border-radius: var(--rayon-l); padding: 30px 32px; display: grid; gap: 22px; box-shadow: var(--ombre); }
.abo-fa-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.abo-fa-marque { display: grid; justify-items: end; gap: 6px; }
.abo-fa-marque b { font-size: 18px; letter-spacing: .02em; }
.abo-fa-marque img { height: 20px; }
html[data-lum="dark"] .abo-fa-marque img { filter: brightness(0) invert(1); }
.abo-fa-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.abo-fa-infos .abo-fait b { font-size: 15px; }
.abo-fa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.abo-fa-table th { text-align: left; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sourd); font-weight: 600; padding: 0 0 8px; }
.abo-fa-table th:last-child, .abo-fa-table td:last-child { text-align: right; white-space: nowrap; }
.abo-fa-table td { padding: 10px 0; border-top: 1px solid var(--lin-doux); }
.abo-fa-table tfoot td { color: var(--tx-2); }
.abo-fa-table tfoot tr.total td { color: var(--ink); font-weight: 700; font-size: 16px; }
.abo-fa-mention { margin: 0; font-size: 12px; color: var(--sourd); line-height: 1.5; }

html[data-format="tel"] .abo-tete { padding: 6px 0 18px; }
html[data-format="tel"] .abo-phrase { font-size: 15px; }
html[data-format="tel"] .abo-encours { padding: 22px 18px; }
html[data-format="tel"] .abo-faits { grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-format="tel"] .abo-fait { padding: 12px 12px; }
html[data-format="tel"] .abo-fait b { font-size: 17px; }
html[data-format="tel"] .abo-section-tete h2 { font-size: 24px; }
html[data-format="tel"] .abo-facture-ligne { grid-template-columns: minmax(0, 1fr) auto; }
html[data-format="tel"] .abo-fl-boutons { grid-column: 1 / -1; justify-content: flex-start; }
html[data-format="tel"] .abo-facture { padding: 22px 18px; }
html[data-format="tel"] .abo-provisoire { border-radius: var(--rayon); }
html[data-format="tel"] .abo-entree { margin: 0 0 10px; }
html[data-format="tel"] .abo-actions .abo-pilule { flex: 1 1 auto; }
@media print {
  body.abo-imprime > *:not(.abo-voile) { display: none !important; }
  body.abo-imprime .abo-voile { position: static; background: none; padding: 0; display: block; }
  body.abo-imprime .abo-facture { box-shadow: none; width: 100%; }
  body.abo-imprime .abo-fa-boutons { display: none; }
}

/* ══ LES MARQUES DU RAPPORT (14/10/2026) ═══════════════════════════════════
   Le logo du client (couverture), les certifications (pied de la couverture
   et de la dernière page, discret), et un petit « 8 » visible dans le coin
   de chaque feuille, de la couleur contraire au fond — noir sur clair, blanc
   sur sombre. Ce « 8 » n'a rien à voir avec le 8 caché de la sphère 8LOP
   (`#d8-huit`), qui ne bouge pas. Il est en pseudo-élément : hors du flux
   (rien ne déborde, `rapportAjuster` ne le voit pas), sans nœud de texte. */
.feuille::after { content: '8'; position: absolute; top: 15px; right: 20px; font-family: var(--f-titre, inherit);
  font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -.04em; color: #0b0b0c; pointer-events: none; }
html[data-lum="dark"] .feuille::after { color: #ffffff; }
/* 28 px de haut, mais des marges négatives : la tête garde la hauteur d'une ligne
   (la couverture ne descend pas d'un pixel, rien ne déborde). */
.f-tete .f-logo-client { height: 28px; margin: -7px 0; max-width: 120px; width: auto; object-fit: contain; flex-shrink: 0; }
.f-pied .f-certifs { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; }
.f-pied .f-certifs img { height: 16px; width: auto; max-width: 60px; object-fit: contain; }
/* 16/10/2026 : les logos de certification déposés, tous à la même hauteur,
   chacun sur une petite carte blanche arrondie — un logo sombre reste lisible
   sur la feuille sombre, et tous se lisent comme une seule rangée. */
.f-pied .f-certifs img.f-certif-logo { height: 16px; max-width: 72px; padding: 2px 5px; box-sizing: content-box;
  border-radius: 5px; background: #ffffff; border: 1px solid rgba(11, 11, 12, .08); margin: -3px 0; }
html[data-lum="dark"] .f-pied .f-certifs img.f-certif-logo { border-color: transparent; }
.mq-ressources .mq-vignette img { background: #ffffff; }
.mq-nouvelle { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--rayon, 12px); background: var(--pap-2, rgba(11, 11, 12, .03)); }
.mq-nouvelle-t { font-size: 13px; }
.mq-nom { font: inherit; font-size: 13px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--lin, rgba(11, 11, 12, .14));
  background: var(--pap, #fff); color: inherit; }
.mq-nom:focus { outline: none; border-color: var(--acc, #0090D3); }
.f-certif { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 9px; line-height: 1.5;
  font-weight: 600; letter-spacing: .03em; color: var(--sourd, rgba(11, 11, 12, .52));
  border: 1px solid var(--lin, rgba(11, 11, 12, .10)); white-space: nowrap; }
.feuille .f-pied .f-certifs span.f-certif, .feuille .f-pied .f-certifs { color: var(--sourd); font-weight: 600; }
html[data-lum="dark"] .f-certif { color: rgba(242, 244, 247, .62); border-color: rgba(242, 244, 247, .18); }
html[data-format="tel"] .f-pied .f-certifs { display: none; }
@media print { .feuille::after { color: #0b0b0c; } html[data-lum="dark"] .feuille::after { color: #ffffff; } }

/* L'espace chargé d'études : logo du client et « Ressources Qualitest », au
   style des cartes de la version 2 (didacticiel PLOOM) — cartes arrondies,
   zone de dépôt pointillée qui s'allume au survol. */
.mq-carte { gap: 11px; }
.mq-depot { display: flex; flex-direction: column; gap: 3px; padding: 14px 14px; border-radius: var(--rayon-l, 14px);
  border: 1.5px dashed var(--lin, rgba(11, 11, 12, .14)); cursor: pointer; text-align: center;
  transition: border-color 180ms var(--sortie, ease), background 180ms var(--sortie, ease), transform 180ms var(--sortie, ease); }
.mq-depot:hover, .mq-depot:focus-visible, .mq-depot.survol { border-color: var(--acc, #0090D3); background: var(--acc-t2, rgba(0, 144, 211, .07)); transform: translateY(-1px); outline: none; }
.mq-depot-t { font-weight: 600; font-size: 13px; }
.mq-depot-s { font-size: 11.5px; color: var(--sourd); }
.mq-vignette { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mq-vignette img { height: 44px; max-width: 160px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px 6px; }
html[data-lum="dark"] .mq-vignette img { background: #1c1f23; }
.mq-vignette.propose img { opacity: .8; outline: 1.5px dashed var(--ambre, #b07a3f); }
.mq-etat { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--acc-t2, rgba(0, 144, 211, .07)); color: var(--ambre, #b07a3f); font-weight: 600; }
.mq-etat.garde { color: var(--acc-tx, #0071a8); }
.mq-source { font-size: 11.5px; color: var(--sourd); }
.mq-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mq-liste > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 10px 12px; border-radius: var(--rayon, 12px); background: var(--pap-2, rgba(11, 11, 12, .03)); }
.mq-liste > li > .mq-vignette { grid-row: span 2; }
.mq-liste > li > .mq-depot { grid-column: 1 / -1; padding: 8px 10px; }
.mq-liste > li > .mq-depot .mq-depot-s { display: none; }

/* ══ D108 — la carte de l'étude, le carnet, « 8 a besoin de vous » (20/10/2026) ══ */
.d108-carte { display: flex; flex-direction: column; gap: 10px; }
.d108-etat { padding: 8px 12px; border-radius: var(--rayon-s, 8px); background: rgba(89,128,166,.12); }
.d108-etat.d108-ok { background: rgba(47,143,91,.16); }
.d108-etat.d108-tombee { background: rgba(229,72,77,.18); }
.d108-table { overflow-x: auto; }
.d108-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.d108-table th, .d108-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid rgba(127,127,127,.25); vertical-align: top; }
.d108-ecartee td { opacity: .55; text-decoration: line-through; }
.d108-ecartee td:last-child { text-decoration: none; opacity: 1; }
.d108-motif { width: 9em; font: inherit; font-size: 12px; padding: 2px 4px; border-radius: 6px; border: 1px solid rgba(127,127,127,.4); background: transparent; color: inherit; }
.d108-synthese { white-space: pre-wrap; font: inherit; font-size: 13px; }
.d108-question { padding: 8px 10px; border-radius: var(--rayon-s, 8px); border: 1px solid rgba(127,127,127,.3); }
.d108-repondue { opacity: .7; }
.d108-carnet { margin: 0; padding-left: 18px; font-size: 13px; }
.d108-carnet small { opacity: .7; }
.d108-diff { margin: 0; padding-left: 18px; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   DÉCODEIT · oo8 (20/10/2026)
   Le style du didacticiel de PLOOM (« oo8 », mot de jules), pour tout
   l'écran : noir franc, grands titres au bleu Qualitest en dégradé, une
   idée par écran, une action principale en pilule, des cartes arrondies,
   des animations sobres. Les jetons sont ceux de `apprendre.css` (#0090D3,
   #73D9FF, #375CAD, noir #000) ; le clair reste lisible. Sur téléphone :
   une appli — barre d'onglets en bas, zones sûres de l'iPhone, rien qui
   glisse de côté. Toute règle d'ici vaut dans les deux ambiances.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --o8-bleu-1: #73D9FF; --o8-bleu-2: #0090D3; --o8-bleu-3: #375CAD;
  --o8-ambre: #c2873f;
  --o8-onglets: 60px;
  --o8-sortie: cubic-bezier(.22, .61, .36, 1);
  --o8-carte: var(--pap);
  --o8-carte-ombre: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -26px rgba(0, 0, 0, .35);
}
html[data-lum="dark"] { --o8-carte-ombre: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 70px -36px rgba(0, 0, 0, 1); --o8-ambre: #e0a95f; }
.o8-bleu { background: linear-gradient(94deg, var(--o8-bleu-1), var(--o8-bleu-2) 52%, var(--o8-bleu-3));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
html[data-lum="light"] .o8-bleu { background: linear-gradient(94deg, #2bb3ea, var(--o8-bleu-2) 45%, var(--o8-bleu-3)); -webkit-background-clip: text; background-clip: text; }
@keyframes o8-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .o8-vue *, .o8-etudes > *, .o8-menu-corps { animation: none !important; transition: none !important; } }

/* — le logo-titre DÉCODEIT ——————————————————————————————————————— */
.o8-logo { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.o8-logo-mot { font-family: var(--f-titre); font-size: 21px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.o8-logo-by { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sourd); font-style: italic; }
.o8-logo-by img { height: 12px; width: auto; display: block; }
.o8-logo.petit .o8-logo-mot { font-size: 17px; }
.porte .o8-logo-mot { font-size: 26px; }

/* — la barre du haut —————————————————————————————————————————————— */
.o8-barre { gap: 12px; height: 60px; padding: 0 22px; }
.o8-barre .fil { font-size: 13px; }
.o8-barre .puce { text-transform: none; letter-spacing: 0; font-size: 12px; }
.o8-plus, .puce-didacticiel { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--lin); color: var(--sourd); padding: 0; flex: 0 0 auto; transition: color .2s, border-color .2s; }
.o8-plus:hover, .puce-didacticiel:hover { color: var(--ink); border-color: var(--acc); }
.puce-didacticiel span { font-weight: 700; font-size: 14px; }
.o8-barre .bascule-mode button { padding: 6px 12px; }

/* — « Plus » : un menu posé (écran), une feuille qui monte (téléphone) —— */
.o8-menu { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .28); }
html[data-lum="dark"] .o8-menu { background: rgba(0, 0, 0, .55); }
.o8-menu-corps { position: absolute; top: 64px; right: 18px; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow: auto;
  background: var(--pap); border-radius: 20px; padding: 16px; box-shadow: var(--o8-carte-ombre), 0 30px 80px -20px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 6px; animation: o8-monte .32s var(--o8-sortie) both; }
.o8-menu-titre { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--sourd); padding: 2px 6px 6px; }
.o8-menu-groupe { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px; }
.o8-menu-eti { font-size: 14px; font-weight: 600; }
.o8-menu-ligne { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%;
  padding: 12px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 15px; }
.o8-menu-ligne:hover { background: var(--acc-t2); }
.o8-menu-t { font-weight: 600; }
.o8-menu-s { font-size: 12.5px; color: var(--sourd); }
.o8-menu-info { display: flex; flex-direction: column; gap: 4px; padding: 10px; font-size: 12.5px; color: var(--sourd); }
.o8-menu-interne { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.o8-segment button { padding: 7px 14px; font-size: 13px; }
html[data-format="tel"] .o8-menu-corps { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 82vh; border-radius: 24px 24px 0 0;
  padding: 18px 16px calc(18px + var(--o8-onglets) + env(safe-area-inset-bottom)); }
html[data-format="tel"] .o8-menu-ligne { padding: 15px 12px; font-size: 16px; }

/* — l'accueil : les études ———————————————————————————————————————— */
.o8-page { padding: 48px 56px 40px; }
.o8-intro { animation: o8-monte .6s var(--o8-sortie) both; }
.o8-sur { display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sourd); font-weight: 600; }
.o8-h1 { font-size: clamp(42px, 6.4vw, 84px); font-weight: 780; letter-spacing: -.045em; line-height: .98; margin: 12px 0 0; }
.o8-h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 760; letter-spacing: -.04em; line-height: 1.02; margin: 8px 0 0; }
.o8-sous { font-size: 15.5px; line-height: 1.55; color: var(--tx-2); max-width: 640px; margin: 14px 0 0; }
.o8-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.o8-chercher { margin-top: 24px; width: min(420px, 100%); }
.o8-etudes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; padding-top: 30px; }
.o8-carte-etude { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  min-height: 168px; padding: 22px 56px 22px 22px; border-radius: 22px; background: var(--o8-carte); box-shadow: var(--o8-carte-ombre);
  color: var(--ink); transition: transform .25s var(--o8-sortie), box-shadow .25s; animation: o8-monte .6s var(--o8-sortie) both; }
.o8-etudes > :nth-child(2) { animation-delay: 60ms; } .o8-etudes > :nth-child(3) { animation-delay: 120ms; } .o8-etudes > :nth-child(4) { animation-delay: 180ms; }
.o8-carte-etude:hover { transform: translateY(-2px); }
.o8-carte-nom { font-size: 23px; font-weight: 740; letter-spacing: -.03em; line-height: 1.12; margin-top: auto; }
.o8-carte-meta { font-size: 13px; color: var(--sourd); }
.o8-carte-aller { position: absolute; right: 18px; bottom: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--fond); }

/* — les boutons : une action principale en pilule, le reste discret ——— */
.o8-principal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px;
  background: var(--ink); color: var(--fond); font-size: 15px; font-weight: 650; letter-spacing: -.01em; border: 0; cursor: pointer;
  transition: transform .18s var(--o8-sortie), opacity .18s; min-height: 46px; }
.o8-principal:hover { transform: translateY(-1px); }
.o8-principal:active { transform: scale(.985); }
.o8-principal:disabled { opacity: .5; cursor: default; transform: none; }
.o8-mini { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--lin); background: transparent; min-height: 36px; }
.o8-mini:hover { background: var(--acc-t2); }
.o8-mini.plein { background: var(--ink); color: var(--fond); box-shadow: none; }

/* — une étude : l'en-tête, les phases, l'étape suivante —————————————— */
.o8-etude { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.o8-tete { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 8px 22px 14px; }
.o8-tete[hidden] { display: none; }
.o8-tete-nom { flex: 1 1 260px; min-width: 0; }
.o8-titre { font-size: 26px; font-weight: 760; letter-spacing: -.035em; line-height: 1.1; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o8-phases { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--pap); box-shadow: inset 0 0 0 1px var(--lin); flex: 0 0 auto; }
.o8-phase { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--sourd);
  transition: background .2s var(--o8-sortie), color .2s; }
.o8-phase-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--lin); color: var(--sourd); }
.o8-phase.faite .o8-phase-n { background: var(--o8-bleu-2); color: #fff; box-shadow: none; }
.o8-phase.alerte .o8-phase-n { background: var(--o8-ambre); color: #000; box-shadow: none; }
.o8-phase-dit { font-size: 11.5px; font-weight: 500; color: var(--sourd); }
.o8-phase[aria-selected="true"] { background: var(--ink); color: var(--fond); }
.o8-phase[aria-selected="true"] .o8-phase-n { box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .5); color: inherit; }
.o8-phase[aria-selected="true"].faite .o8-phase-n { color: #fff; }
.o8-phase[aria-selected="true"] .o8-phase-dit { color: inherit; opacity: .7; }
.o8-vues button { position: relative; padding: 8px 18px; font-size: 13.5px; }
.o8-suite { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px; background: var(--acc-t2); }
.o8-suite-eti { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc-tx); font-weight: 700; flex: 0 0 auto; }
.o8-suite-t { flex: 1 1 260px; font-size: 14px; color: var(--ink); }
.o8-grille { flex: 1 1 auto; min-height: 0; }
.o8-centre > .o8-vue { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.o8-centre > [hidden] { display: none !important; }
.o8-feuille-vue { max-width: 1040px; margin: 0 auto; padding: 14px 22px 56px; display: flex; flex-direction: column; gap: 18px; }
.o8-feuille-vue > * { animation: o8-monte .55s var(--o8-sortie) both; }
.o8-suite-bas { display: flex; justify-content: flex-start; padding-top: 6px; }
/* le chat, épuré : le cadenas « cette étude uniquement » rejoint la mention du bas */
.o8-etude .chat .cadenas { display: none; }

/* — le diagnostic en cartes ——————————————————————————————————————— */
.o8-etat-carte { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 20px;
  background: var(--o8-carte); box-shadow: var(--o8-carte-ombre); }
.o8-etat-carte p { flex: 1 1 280px; margin: 0; font-size: 14.5px; line-height: 1.45; }
.o8-etat-carte.o8-ok p::before, .o8-etat-carte.o8-tombee p::before, .o8-etat-carte.o8-attente p::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; background: var(--sourd); }
.o8-etat-carte.o8-ok p::before { background: var(--o8-bleu-2); }
.o8-etat-carte.o8-tombee p::before { background: var(--o8-ambre); }
.o8-note { margin: 0; font-size: 13.5px; color: var(--tx-2); line-height: 1.5; padding: 0 4px; }
.o8-valide { margin: 0; font-size: 13px; color: var(--acc-tx); font-weight: 600; }
.o8-synthese { padding: 18px 20px; border-radius: 20px; background: var(--o8-carte); box-shadow: var(--o8-carte-ombre); }
.o8-synthese p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--tx-2); }
.o8-besoins { padding: 18px 20px; border-radius: 20px; background: var(--acc-t2); box-shadow: inset 0 0 0 1px var(--acc-t); }
.o8-repere { padding: 14px 4px 0; }
.o8-repere-nom { font-size: 24px; font-weight: 740; letter-spacing: -.03em; margin: 6px 0 0; }
.o8-libelle { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--sourd); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o8-groupe { border-radius: 20px; }
.o8-groupe > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 12px; padding: 12px 4px; }
.o8-groupe > summary::-webkit-details-marker { display: none; }
.o8-groupe-nom { font-size: 18px; font-weight: 720; letter-spacing: -.02em; }
.o8-groupe-nom::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: 2px; background: var(--g, var(--sourd)); }
.o8-groupe-n { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lin); color: var(--sourd); }
.o8-groupe-dit { font-size: 13px; color: var(--sourd); }
.o8-groupe:not([open]) > summary .o8-groupe-dit::after { content: ' · voir'; color: var(--acc-tx); }
.o8-g-levier_prioritaire { --g: var(--o8-bleu-2); } .o8-g-irritant { --g: var(--o8-ambre); } .o8-g-levier_secondaire { --g: var(--o8-bleu-1); }
.o8-g-force_a_capitaliser { --g: var(--o8-bleu-3); } .o8-g-force_de_fond { --g: #8a97a8; }
.o8-pistes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 2px 0 10px; }
.o8-piste { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border-radius: 20px; background: var(--o8-carte); box-shadow: var(--o8-carte-ombre); min-width: 0; }
.o8-piste.ecartee { opacity: .55; }
.o8-piste-nom { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.o8-piste .o8-libelle { margin-top: -6px; }
.o8-signaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.o8-signal { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 14px; background: var(--acc-t2); min-width: 0; }
.o8-signal b { font-size: 18px; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.o8-signal span { font-size: 11px; color: var(--sourd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o8-signal.fort b { color: var(--acc-tx); }
.o8-signal.bas b { color: var(--o8-ambre); }
.o8-raison { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tx-2); }
.o8-raison b { color: var(--ink); font-weight: 650; }
.o8-piste-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.o8-motif { flex: 1 1 100%; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--lin); background: transparent; color: var(--ink); font-size: 14px; outline: none; }
.o8-motif:focus { border-color: var(--acc); }
.o8-ecartee { font-size: 12.5px; color: var(--sourd); flex: 1 1 auto; }
.o8-demander { align-self: flex-start; margin-top: auto; font-size: 13px; font-weight: 650; color: var(--acc-tx); padding: 6px 0; }
.o8-garde { margin: 4px 0 0; font-size: 12.5px; color: var(--sourd); }
.o8-diff { margin: 0; padding-left: 18px; font-size: 13px; color: var(--tx-2); }

/* — vide, panne, options repliées, petite notification ———————————— */
.o8-vide { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border-radius: 20px; background: var(--o8-carte); box-shadow: var(--o8-carte-ombre); }
.o8-vide b { font-size: 17px; }
.o8-vide span { font-size: 14px; color: var(--tx-2); line-height: 1.5; max-width: 560px; }
.o8-vide.grand { padding: 34px 28px; gap: 12px; }
.o8-vide.grand b { font-size: 24px; letter-spacing: -.03em; }
.o8-vide .o8-principal { margin-top: 8px; }
.o8-panne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; font-size: 13.5px;
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--o8-ambre); background: rgba(194, 135, 63, .08); }
.o8-options { border-radius: 16px; }
.o8-options > summary { cursor: pointer; font-size: 13px; color: var(--sourd); padding: 10px 4px; list-style: none; }
.o8-options > summary::-webkit-details-marker { display: none; }
.o8-options > summary::before { content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--lin); font-weight: 700; }
.o8-options[open] > summary::before { content: '−'; }
.o8-options-corps { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 12px; }
.o8-options-corps > details > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; padding: 6px 0; }
.o8-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: var(--fond); font-size: 14px; font-weight: 600; animation: o8-monte .3s var(--o8-sortie) both; max-width: calc(100vw - 32px); }
html.o8-app .o8-toast { bottom: calc(var(--o8-onglets) + 16px + env(safe-area-inset-bottom)); }
.o8-nouvelle { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 90; display: flex; gap: 10px; align-items: baseline;
  padding: 12px 20px; border-radius: 999px; background: var(--o8-bleu-2); color: #fff; font-size: 14px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
.o8-nouvelle span { opacity: .85; }

/* — le rapport : PDF en avant, le reste derrière « Plus » —————————— */
.o8-plus-r { position: relative; }
.o8-plus-r > summary { list-style: none; cursor: pointer; }
.o8-plus-r > summary::-webkit-details-marker { display: none; }
.o8-plus-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  min-width: 210px; padding: 8px; border-radius: 16px; background: var(--pap); box-shadow: var(--o8-carte-ombre), 0 24px 60px -20px rgba(0, 0, 0, .5); }
.o8-plus-menu .r-bouton { text-align: left; justify-content: flex-start; width: 100%; }

/* — le téléphone : une appli ————————————————————————————————————— */
html.o8-app { --tete: 54px; }
html.o8-app #app { height: var(--o8-vh, 100dvh); }
html.o8-app .corps { padding-bottom: calc(var(--o8-onglets) + env(safe-area-inset-bottom)); }
html.o8-app.o8-clavier .corps { padding-bottom: 0; }
html.o8-app.o8-clavier .o8-onglets { display: none; }
html[data-format="tel"] .o8-barre { flex-wrap: nowrap; height: auto; min-height: 54px; padding: calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); gap: 10px; }
html[data-format="tel"] .o8-barre .o8-logo { order: 0; }
html[data-format="tel"] .o8-barre .fil { order: 1; flex: 1 1 auto; min-width: 0; gap: 4px; }
html[data-format="tel"] .o8-barre .fil .retour { order: -1; }
html[data-format="tel"] .o8-barre .fil .ici { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
html[data-format="tel"] .o8-barre::after { display: none; }
html[data-format="tel"] .o8-barre .puce { order: 2; }
html[data-format="tel"] .o8-barre .fil button.retour { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; }
.o8-onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--o8-onglets) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--fond); box-shadow: 0 -1px 0 var(--lin-doux), 0 -18px 30px -24px rgba(0, 0, 0, .5); }
.o8-onglet { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--sourd);
  font-size: 11px; font-weight: 600; letter-spacing: .01em; min-height: 48px; -webkit-tap-highlight-color: transparent; }
.o8-onglet[aria-current="true"] { color: var(--ink); }
.o8-onglet[aria-current="true"] .o8-onglet-i { color: var(--o8-bleu-2); }
.o8-onglet .r-pastille { top: 8px; right: calc(50% - 18px); }
html[data-format="tel"] .o8-page { padding: 26px 16px 28px; }
html[data-format="tel"] .o8-h1 { font-size: 46px; }
html[data-format="tel"] .o8-etudes { grid-template-columns: 1fr; gap: 14px; padding-top: 22px; }
html[data-format="tel"] .o8-carte-etude { min-height: 136px; }
html[data-format="tel"] .o8-actions .o8-principal { width: 100%; }
html[data-format="tel"] .o8-etude.tel { display: flex; flex-direction: column; }
html[data-format="tel"] .o8-tete { padding: 4px 14px 10px; gap: 10px; }
html[data-format="tel"] .o8-phases { width: 100%; overflow-x: auto; justify-content: space-between; scrollbar-width: none; }
html[data-format="tel"] .o8-phases::-webkit-scrollbar { display: none; }
html[data-format="tel"] .o8-phase { flex: 1 1 0; justify-content: center; padding: 9px 8px; min-height: 42px; font-size: 13px; }
html[data-format="tel"] .o8-suite { padding: 10px 12px; gap: 8px; }
html[data-format="tel"] .o8-suite-eti { display: none; }
html[data-format="tel"] .o8-suite-t { font-size: 13.5px; flex-basis: 100%; }
html[data-format="tel"] .o8-suite .o8-mini { min-height: 40px; }
html[data-format="tel"] .o8-etude.tel > .centre, html[data-format="tel"] .o8-etude.tel > .chat { flex: 1 1 auto; min-height: 0; }
html[data-format="tel"] .o8-feuille-vue { padding: 6px 14px 28px; gap: 14px; }
html[data-format="tel"] .o8-h2 { font-size: 30px; }
html[data-format="tel"] .o8-pistes { grid-template-columns: 1fr; }
html[data-format="tel"] .o8-groupe > summary { grid-template-columns: auto auto; }
html[data-format="tel"] .o8-groupe-dit { grid-column: 1 / -1; }
html[data-format="tel"] .o8-mini { min-height: 42px; padding: 9px 16px; font-size: 14px; }
html[data-format="tel"] .o8-principal { min-height: 50px; width: 100%; }
html[data-format="tel"] .o8-etat-carte .o8-principal { width: 100%; }
html[data-format="tel"] .o8-plus-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(var(--o8-onglets) + 12px + env(safe-area-inset-bottom)); min-width: 0; }
html[data-format="tel"] .o8-plus-menu .r-bouton { padding: 13px 14px; font-size: 15px; }
html[data-format="tel"] .rapport .r-bouton { min-height: 40px; }
html[data-format="tel"] .chat .envoyer { min-width: 44px; min-height: 44px; }
html[data-format="tel"] .chat .saisie { padding-bottom: 10px; }
@media print { .o8-onglets, .o8-barre, .o8-tete, .o8-nouvelle, .o8-toast, .o8-menu { display: none !important; } }
.o8-bref { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 4px 16px; margin: 12px 0 0 !important; font-size: 14.5px !important; color: var(--ink) !important; }
.o8-bref b { font-weight: 700; }
.o8-bref b::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; background: var(--g, var(--sourd)); }
.o8-bref span { color: var(--tx-2); }
.o8-texte-synthese { margin-top: 14px; }
.o8-texte-synthese > summary { cursor: pointer; font-size: 13px; color: var(--acc-tx); font-weight: 600; }
.o8-texte-synthese p { font-size: 13px !important; }
html[data-format="tel"] .o8-bref { grid-template-columns: 1fr; }
.o8-plus-r > summary { display: inline-flex; align-items: center; }
.r-vierge-faire { margin-top: 22px; }
@media print { .r-vierge-faire { display: none !important; } }
/* la porte du téléphone : quatre étapes en deux colonnes (DÉCODEIT) */
html[data-format="tel"] .porte .droite > div:nth-child(2) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
html[data-format="tel"] .porte .droite .bloc { align-items: center; }
/* l'aperçu client de l'équipe : une pastille hors de l'application, jamais chez un vrai client */
.o8-apercu { position: fixed; z-index: 95; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 16px; border-radius: 999px; background: var(--o8-ambre); color: #000; font-size: 13px; font-weight: 650; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55); }
.o8-apercu select { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: 5px 10px; background: rgba(255, 255, 255, .55); color: #000; }
.o8-apercu button { padding: 6px 12px; border-radius: 999px; background: #000; color: #fff; font-size: 12.5px; font-weight: 650; }
html.o8-app .o8-apercu { bottom: calc(var(--o8-onglets) + 10px + env(safe-area-inset-bottom)); }
@media print { .o8-apercu { display: none !important; } }
.o8-menu.sans-anim .o8-menu-corps { animation: none; }
/* la correction des colonnes (Nourrir) */
.o8-colonnes { padding: 18px 20px; border-radius: 20px; background: var(--o8-carte); box-shadow: var(--o8-carte-ombre); }
.o8-col-tete .cad-aide { margin: 6px 0 12px; }
.o8-colonnes input[type="search"] { margin-bottom: 10px; }
.o8-col-liste { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; }
.o8-col { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--acc-t2); }
.o8-col.ecartee { opacity: .6; }
.o8-col.envoi { opacity: .5; pointer-events: none; }
.o8-col-nom { min-width: 0; display: flex; flex-direction: column; }
.o8-col-nom b { font-size: 14px; }
.o8-cle:disabled { opacity: .4; }
html[data-format="tel"] .o8-col { grid-template-columns: 1fr; }
html[data-format="tel"] .o8-col .o8-segment { justify-self: start; }
@keyframes o8-eclaire { 0% { box-shadow: 0 0 0 0 rgba(0, 144, 211, .0); } 30% { box-shadow: 0 0 0 4px rgba(0, 144, 211, .55); } 100% { box-shadow: 0 0 0 0 rgba(0, 144, 211, 0); } }
.chat .boite.o8-eclaire { animation: o8-eclaire 1.5s var(--o8-sortie); }