/* ══════════════════════════════════════════════════════════════════════════
   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; }
html[data-lum="dark"] .griffe img { filter: invert(1) hue-rotate(180deg) brightness(1.6); }
.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: 316px 1fr 372px; }

/* 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: 268px 1fr 336px; }
}
@media (max-width: 1120px) {
  html[data-format="grand"] .etude { grid-template-columns: 1fr 320px; }
  html[data-format="grand"] .chiffres { 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 .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; }

/* ══════════════════════════════════════════════════════════════════════════
   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-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; }

/* 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; }