/* ==========================================================================
   HAFA Equivalence — design system maison (zéro dépendance, zéro build).
   Palette : navy HAFA (#1a4480 — déjà utilisée dans les emails) + rouge HAFA.
   ========================================================================== */

:root {
  --bg: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --ink: #16243a;
  --muted: #5d6b81;
  --line: #e3e8f0;

  --navy: #1a4480;
  --navy-deep: #0f2a52;
  --brand: #d81f2a;          /* rouge HAFA */
  --brand-dark: #b3121c;

  --ai-1: #4f46e5;           /* dégradé "IA" */
  --ai-2: #8b5cf6;

  --ok: #1e7f4f;     --ok-bg: #e3f5ec;    --ok-line: #b7e2cc;
  --warn: #8a6400;   --warn-bg: #fff5d6;  --warn-line: #f1dd99;
  --bad: #c62828;    --bad-bg: #fdecea;   --bad-line: #f3bcbc;
  --info: #0b63ce;   --info-bg: #e8f1fd;  --info-line: #bcd7f7;

  --sidebar-bg: #0f2145;
  --sidebar-ink: #c6d4ec;
  --sidebar-hover: rgba(255, 255, 255, .09);
  --sidebar-line: rgba(255, 255, 255, .12);
  --on-navy: #ffffff;        /* texte posé SUR --navy (bouton plein) */
  --ia-ink: #ffffff;         /* texte posé sur le dégradé IA */
  --on-accent: #ffffff;      /* texte sur un aplat --ok / --bad / --brand */
  --ai-soft: #efeafd;        /* fond pastel de l'icône IA */
  --code-bg: #eef1f6;        /* fond des `code` et `pre` dans une réponse */
  --code-ink: #2c3e50;
  --sel: #cddcf5;            /* surlignage de sélection */
  --glow: #dfe9f8;           /* halo décoratif du fond de page */

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(22, 36, 58, .05), 0 10px 28px -16px rgba(22, 36, 58, .18);
  --shadow-soft: 0 1px 2px rgba(22, 36, 58, .05);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Consolas, "Cascadia Code", Menlo, monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODE SOMBRE — trois états, pas deux.

   Le navigateur a un réglage « système » qui ne pose AUCUN attribut : dans cet
   état, seul `prefers-color-scheme` distingue le clair du sombre. Les deux
   blocs ci-dessous couvrent les trois cas :
     1. `:root` nu               → palette claire complète (plus haut) ;
     2. media query, gardée par  → sombre quand l'OS le demande ET que
        `:not([data-theme="light"])`  l'utilisateur n'a pas choisi le clair ;
     3. `[data-theme="dark"]`    → le choix explicite gagne dans l'autre sens.

   ⚠️ On ne redéfinit que des TOKENS ici, jamais un composant. Une couleur dont
   l'unique définition vivrait dans un de ces blocs ne s'appliquerait jamais à
   l'état non stampé — et la page rendrait le texte d'un thème sur le fond de
   l'autre. C'est le bug classique, et il ne se voit que chez l'utilisateur.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --surface: #131c30;
    --surface-2: #1a2438;
    --ink: #e7ecf5;
    --muted: #93a2ba;
    --line: #24334c;

    --navy: #6f9ee0;
    --navy-deep: #9dc0ee;
    --brand: #f0545e;
    --brand-dark: #ff7078;

    --ai-1: #7c73f0;
    --ai-2: #a78bfa;

    --ok: #4ec98b;   --ok-bg: #10301f;   --ok-line: #1d5a3a;
    --warn: #e3b64a; --warn-bg: #33290e; --warn-line: #6b5518;
    --bad: #ef6a6a;  --bad-bg: #391416;  --bad-line: #6d2528;
    --info: #66a9f0; --info-bg: #11263f; --info-line: #234a76;

    --sidebar-bg: #070d1a;
    --sidebar-ink: #9db0ce;
    --sidebar-hover: rgba(122, 165, 230, .14);
    --sidebar-line: rgba(255, 255, 255, .09);
    --on-navy: #08111f;
    --ia-ink: #ffffff;
    --on-accent: #08111f;
    --ai-soft: #251d47;
    --code-bg: #1a2438;
    --code-ink: #c8d6ea;
    --sel: #2b4a76;
    --glow: transparent;

    --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 10px 28px -16px rgba(0, 0, 0, .55);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .32);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #131c30;
  --surface-2: #1a2438;
  --ink: #e7ecf5;
  --muted: #93a2ba;
  --line: #24334c;

  --navy: #6f9ee0;
  --navy-deep: #9dc0ee;
  --brand: #f0545e;
  --brand-dark: #ff7078;

  --ai-1: #7c73f0;
  --ai-2: #a78bfa;

  --ok: #4ec98b;   --ok-bg: #10301f;   --ok-line: #1d5a3a;
  --warn: #e3b64a; --warn-bg: #33290e; --warn-line: #6b5518;
  --bad: #ef6a6a;  --bad-bg: #391416;  --bad-line: #6d2528;
  --info: #66a9f0; --info-bg: #11263f; --info-line: #234a76;

  --sidebar-bg: #070d1a;
  --sidebar-ink: #9db0ce;
  --sidebar-hover: rgba(122, 165, 230, .14);
  --sidebar-line: rgba(255, 255, 255, .09);
  --on-navy: #08111f;
  --ia-ink: #ffffff;
  --on-accent: #08111f;
  --ai-soft: #251d47;
  --code-bg: #1a2438;
  --code-ink: #c8d6ea;
  --sel: #2b4a76;
  --glow: transparent;

  --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 10px 28px -16px rgba(0, 0, 0, .55);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 400px at 80% -180px, var(--glow) 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .4em; color: var(--ink); }
h1 { font-size: 1.55rem; letter-spacing: -.02em; }
h2 { font-size: 1.2rem;  letter-spacing: -.01em; }
h3 { font-size: 1.02rem; }
p  { margin: .45em 0; }
a  { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .92em; }

::selection { background: var(--sel); }

/* ----------------------------------------------------------------- sidebar */
/* La barre du haut ne tenait plus : six onglets, plus la recherche, plus
   l'utilisateur. La colonne laterale absorbe la croissance sans se serrer, et
   garde le contexte visible pendant qu'on travaille. */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  flex: none; width: 232px;
  background: var(--sidebar-bg); color: var(--sidebar-ink);
  display: flex; flex-direction: column; gap: .12rem;
  padding: .9rem .65rem; position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
/* `.sb-top` reste toujours visible ; `.sb-panel` est ce qui se replie sous le
   burger. Au-dessus de 700 px le burger est masque par media query et le
   panneau s'affiche normalement : c'est le CSS qui decide de la presence du
   bouton, le JavaScript ne fait qu'ouvrir et fermer. */
.sb-top { display: flex; align-items: center; gap: .5rem; }
.sb-panel { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-height: 0; }

.sb-burger {
  display: none;                 /* apparait sous 700 px, cf. media query */
  flex: none; margin-left: auto; cursor: pointer;
  width: 44px; height: 44px;     /* cible tactile pleine */
  background: none; border: 1px solid var(--sidebar-line); border-radius: 9px;
  align-items: center; justify-content: center;
}
.sb-burger:hover { border-color: rgba(255, 255, 255, .4); }
.sb-burger:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Trois traits dessines en CSS : pas de police d'icones, pas de SVG a charger. */
.sb-burger-traits, .sb-burger-traits::before, .sb-burger-traits::after {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--sidebar-ink); content: ""; position: relative;
}
.sb-burger-traits::before { top: -6px; }
.sb-burger-traits::after { top: 4px; }

.sb-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: .3rem .45rem 1rem; color: #fff; font-weight: 700; font-size: 1rem;
}
.sb-brand:hover { text-decoration: none; }
.sb-brand-text b { color: var(--brand); font-weight: 800; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%);
  display: grid; place-items: center;
  box-shadow: 0 3px 10px -3px rgba(216, 31, 42, .55);
}
.brand-mark svg { width: 16px; height: 16px; fill: #fff; }

.sb-search {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .48rem .55rem; margin-bottom: .5rem; cursor: pointer;
  border: 1px solid var(--sidebar-line); border-radius: 9px;
  background: rgba(255, 255, 255, .04); color: var(--sidebar-ink);
  font: 500 .85rem var(--font); text-align: left;
}
.sb-search:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.sb-search kbd {
  margin-left: auto; font-family: var(--mono); font-size: .68rem;
  border: 1px solid var(--sidebar-line); border-radius: 5px; padding: 0 5px;
}

.sb-nav { display: flex; flex-direction: column; gap: .1rem; }
.sb-section {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .85rem .55rem .25rem; opacity: .55; font-weight: 700;
}
.sb-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .55rem; border-radius: 9px;
  font-size: .89rem; font-weight: 550; color: var(--sidebar-ink);
  transition: background .13s ease, color .13s ease;
}
.sb-item:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
/* Le liseré rouge marque la page courante sans repeindre tout l'element :
   la teinte de fond seule se confondait avec le survol. */
.sb-item.active { background: var(--sidebar-hover); color: #fff; box-shadow: inset 3px 0 0 var(--brand); }
.sb-item:focus-visible, .sb-search:focus-visible, .sb-btn:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}
.sb-ico { flex: none; width: 20px; text-align: center; font-size: 1rem; }

.sb-foot { margin-top: auto; padding-top: 1rem; }
.sb-user {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .45rem .6rem; font-size: .8rem;
  border-top: 1px solid var(--sidebar-line);
}
.sb-user .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--navy) 0%, #2d6cc4 100%);
  color: #fff; display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
}
.sb-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-actions { display: flex; gap: .4rem; padding: 0 .45rem; }
.sb-btn {
  background: none; border: 1px solid var(--sidebar-line); border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; color: var(--sidebar-ink);
  display: grid; place-items: center; font-size: .9rem;
  transition: all .15s ease;
}
.sb-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Sous 1000 px, la colonne se reduit a un rail d'icones : les libelles
   partent, la navigation reste. En dessous de 700, elle passe en barre
   horizontale — un rail vertical mangerait la largeur utile sur telephone. */
/* Entre 700 et 1000 px : rail d'icones. Le panneau reste ouvert, seuls les
   libelles partent — la place manque pour le texte, pas pour la navigation. */
@media (min-width: 701px) and (max-width: 1000px) {
  .sidebar { width: 60px; padding: .9rem .5rem; }
  .sb-text, .sb-search kbd, .sb-section { display: none; }
  .sb-item, .sb-search { justify-content: center; padding: .5rem .3rem; }
  .sb-actions { flex-direction: column; align-items: center; }
  .sb-brand { padding-bottom: .6rem; }
}
/* ══════════════════════════════════════════════════════════════════════════
   Sous 700 px : la barre devient un bandeau, la navigation passe sous un
   burger. Les icones alignees a la queue leu leu etaient des cibles de vingt
   pixels — inatteignables au pouce. Le panneau deplie donne a chaque entree
   une ligne entiere.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .shell { flex-direction: column; }
  .sidebar {
    /* `width: 100%` + `min-width: 0` sont indispensables, pas decoratifs.
       En colonne, un element flex prend la largeur de son contenu : sans cette
       contrainte, la barre etirait TOUT le conteneur et la page entiere
       defilait lateralement. */
    width: 100%; min-width: 0; height: auto; position: sticky; top: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem .7rem; overflow: visible;
  }
  .sb-brand { padding: 0; }
  .sb-burger { display: flex; }

  /* Replie par defaut. `.ouvert` est pose par app.js sur `.sidebar`. */
  .sb-panel { display: none; padding-top: .6rem; }
  .sidebar.ouvert .sb-panel { display: flex; }

  /* Deplie, chaque entree prend une ligne pleine : 44 px de haut, tout le
     bandeau cliquable. */
  .sb-item, .sb-search { padding: .7rem .6rem; }
  .sb-search { width: 100%; margin-bottom: .4rem; }
  .sb-nav { flex-direction: column; }
  .sb-section { padding: .7rem .55rem .25rem; }
  .sb-foot { margin-top: .5rem; padding-top: .5rem; }
  .sb-actions { flex-direction: row; }
}

/* ------------------------------------------------------------------ layout */
/* ⚠️ `width: 100%` est OBLIGATOIRE ici, avec `margin: 0 auto`.
   `.main-col` est un conteneur flex en colonne : une marge automatique sur
   l'axe transversal ANNULE l'etirement et dimensionne l'element sur son
   CONTENU. Sans cette largeur, la page prenait 412 px dans un ecran de 375 et
   defilait lateralement. Le cap a 1240 px continue de centrer sur grand ecran. */
.page { max-width: 1240px; width: 100%; margin: 0 auto; padding: 1.6rem 1.2rem 3.5rem; }
.page-narrow { max-width: 880px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); font-size: .95rem; margin: 0; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Cinq colonnes : une rangee de KPI a cinq cartes, sans qu'aucune ne descende
   seule sur une ligne comme le faisait la cinquieme sur une grille a quatre.
   `.grid-3` et `.grid-4` ont ete retires le 2026-09-01 : plus aucun gabarit ne
   les utilisait, et `.grid-3` tombait a UNE colonne des 980 px la ou les autres
   en gardaient deux — un piege pour qui l'aurait repris en croyant suivre la
   famille. */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grid-2, .grid-5 { grid-template-columns: 1fr; } }

.flex { display: flex; align-items: center; gap: .6rem; }
.flex-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  margin-bottom: 1rem;
  animation: fadeUp .35s ease both;
}
.card-pad { padding: 1.1rem 1.25rem; }
.card-head {
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-weight: 650;
}
.card-head .spacer { flex: 1; }
.card-lift { box-shadow: var(--shadow); }
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
.card:nth-child(4) { animation-delay: .12s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- callout */
.callout {
  border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--line); border-left-width: 4px; background: var(--surface-2);
  animation: fadeUp .3s ease both;
}
.callout-ok   { background: var(--ok-bg);   border-color: var(--ok-line);   border-left-color: var(--ok); }
.callout-warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: #e0a800; }
.callout-bad  { background: var(--bad-bg);  border-color: var(--bad-line);  border-left-color: var(--bad); }
.callout-info { background: var(--info-bg); border-color: var(--info-line); border-left-color: var(--info); }

/* ------------------------------------------------------------------- pills */
.badge {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .18rem .65rem; border-radius: 999px;
  font-size: .76rem; font-weight: 650; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-traitement_ia        { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge-traitement_ia::before { animation: blink 1.1s ease-in-out infinite; }
.badge-nouveau              { background: var(--info-bg); color: #084298; border-color: var(--info-line); }
.badge-en_cours             { background: #ede9fe; color: #5b21b6; border-color: #ddd3fb; }
.badge-repondue_ia          { background: var(--ok-bg); color: #0a5c36; border-color: var(--ok-line); }
.badge-repondue_responsable { background: #cff4fc; color: #055160; border-color: #9eeaf9; }
.badge-refusee              { background: var(--bad-bg); color: #7a1718; border-color: var(--bad-line); }
@keyframes blink { 50% { opacity: .25; } }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .58rem 1.15rem; border-radius: 10px; border: 1px solid transparent;
  font: 600 .92rem var(--font); cursor: pointer; text-decoration: none !important;
  transition: all .16s ease; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: var(--on-navy); box-shadow: 0 4px 14px -6px rgba(26, 68, 128, .55); }
.btn-primary:hover { background: var(--navy-deep); }
.btn-accent { background: var(--brand); color: #fff; box-shadow: 0 4px 14px -6px rgba(216, 31, 42, .55); }
.btn-accent:hover { background: var(--brand-dark); }
.btn-ok { background: var(--ok); color: var(--on-accent); box-shadow: 0 4px 14px -6px rgba(30, 127, 79, .5); }
.btn-ok:hover { background: #166a40; }
.btn-danger { background: #fff; color: var(--bad); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #b9c4d6; background: var(--surface-2); }
.btn-ai {
  background: linear-gradient(120deg, var(--ai-1), var(--ai-2)); color: #fff;
  box-shadow: 0 4px 16px -6px rgba(99, 82, 233, .6);
}
.btn-ai:hover { filter: brightness(1.08); }
.btn-sm { padding: .32rem .75rem; font-size: .82rem; border-radius: 8px; }
.btn-lg { padding: .78rem 1.6rem; font-size: 1rem; border-radius: 12px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------- forms */
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 .3rem; }
.field { margin-bottom: 1rem; }
.hint { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted); }
input[type="text"], input[type="email"], textarea, select {
  width: 100%; padding: .62rem .8rem;
  border: 1.5px solid var(--line); border-radius: 10px;
  font: 400 .95rem var(--font); color: var(--ink); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 68, 128, .14);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
input[type="file"] { display: none; }   /* remplacé par la dropzone */

/* ---------------------------------------------------------------- dropzone */
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  padding: 1.1rem; text-align: center; cursor: pointer; color: var(--muted);
  background: var(--surface-2); transition: all .18s ease; font-size: .9rem;
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--navy); background: var(--info-bg); color: var(--navy);
}
.dropzone .dz-icon { font-size: 1.5rem; display: block; margin-bottom: .2rem; }
.file-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.file-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .35rem .6rem; font-size: .84rem; animation: pop .22s ease both;
}
.file-chip img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.file-chip .x {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 1rem; line-height: 1; padding: 0 .15rem;
}
.file-chip .x:hover { color: var(--bad); }
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th {
  text-align: left; padding: .6rem .9rem; color: var(--muted);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none;
}
.tbl th.sortable { cursor: pointer; }
.tbl th.sortable:hover { color: var(--ink); }
.tbl td { padding: .68rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background .12s ease; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: none; }
.row-link { cursor: pointer; }

/* -------------------------------------------------------------------- KPIs */
.kpi { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.15rem; }
.kpi-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 1.25rem;
}
.kpi-num { font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.kpi-label { font-size: .8rem; color: var(--muted); font-weight: 550; }
.kpi-navy .kpi-ico { background: var(--info-bg); }
.kpi-ok .kpi-ico   { background: var(--ok-bg); }
.kpi-warn .kpi-ico { background: var(--warn-bg); }
.kpi-ai .kpi-ico   { background: var(--ai-soft); }

.sparkbar { display: flex; align-items: flex-end; gap: 3px; height: 42px; }
.sparkbar i {
  flex: 1; min-height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #6f8fc4, var(--navy));
  opacity: .85; transition: opacity .15s ease;
}
.sparkbar i:hover { opacity: 1; }
.sparkbar i.today { background: linear-gradient(180deg, #f0716f, var(--brand)); }

/* --------------------------------------------------- anneau de confiance */
.ring {
  --p: 0; --ring-color: var(--ok);
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--ring-color) calc(var(--p) * 1%), var(--line) 0);
  display: grid; place-items: center;
}
.ring::before {
  content: attr(data-value);
  width: 50px; height: 50px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center;
  font-weight: 750; font-size: .98rem; letter-spacing: -.02em;
}
.ring-sm { width: 46px; height: 46px; }
.ring-sm::before { width: 35px; height: 35px; font-size: .78rem; }
.ring-low  { --ring-color: var(--bad); }
.ring-mid  { --ring-color: #e0a800; }
.ring-high { --ring-color: var(--ok); }

/* ------------------------------------------------ flux IA en direct (SSE) */
.ai-banner {
  border-radius: var(--radius);
  background: linear-gradient(120deg, #10173a 0%, #1c1e4e 55%, #2a1a5e 100%);
  color: #e8eaff; padding: 1.15rem 1.3rem; margin-bottom: 1rem;
  position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.ai-banner::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 140px at 85% -30%, rgba(139, 92, 246, .4), transparent 70%);
  pointer-events: none;
}
.ai-banner h3 { color: #fff; display: flex; align-items: center; gap: .6rem; margin-bottom: .15rem; }
.ai-banner .sub { color: #b9bfe8; font-size: .88rem; margin: 0; }
.ai-orb {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #c4b5fd, var(--ai-1));
  box-shadow: 0 0 0 0 rgba(139, 92, 246, .6); animation: orb 1.6s ease-out infinite;
}
@keyframes orb { 70% { box-shadow: 0 0 0 11px rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } }
.ai-elapsed { position: relative; font-variant-numeric: tabular-nums; font-size: .82rem; color: #b9bfe8; }

.feed { list-style: none; margin: .9rem 0 0; padding: 0; position: relative; }
.feed li {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .34rem 0; font-size: .92rem; color: #d9ddf6;
  animation: feedIn .3s ease both;
}
.feed li .t { color: #8e96c9; font-size: .78rem; font-variant-numeric: tabular-nums; flex: none; padding-top: .12rem; min-width: 46px; }
.feed li:last-child { color: #fff; font-weight: 600; }
/* Sur telephone, le flux SSE n'est pas ouvert (cf. `app.js`) : on affiche a la
   place un message qui autorise a fermer la page. */
.feed li.feed-calme { color: #fff; font-weight: 500; display: block; padding: .3rem 0; }
.feed li:last-child .dotpulse { display: inline-block; }
.feed .dotpulse {
  display: none; width: 6px; height: 6px; margin-left: .45rem; border-radius: 50%;
  background: #a78bfa; vertical-align: middle; animation: blink 1s ease-in-out infinite;
}
@keyframes feedIn { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.35rem; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line); border-radius: 2px;
}
.timeline > li { position: relative; padding: 0 0 1rem; }
.timeline > li::before {
  content: ""; position: absolute; left: -1.35rem; top: .35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--navy);
}
.timeline > li.tl-ok::before   { border-color: var(--ok); }
.timeline > li.tl-warn::before { border-color: #e0a800; }
.timeline > li.tl-bad::before  { border-color: var(--bad); }
.timeline .tl-date { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ----- bulle de consigne (historique des interactions) ----- */
.instruction-bubble {
  background: var(--info-bg); border: 1px solid var(--info-line);
  border-radius: 12px 12px 12px 3px; padding: .65rem .9rem; margin: .6rem 0;
  font-size: .92rem;
}
.instruction-bubble .who { font-size: .76rem; font-weight: 700; color: var(--info); text-transform: uppercase; letter-spacing: .04em; }

.draft-version {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin: .55rem 0; background: var(--surface);
}
.draft-version > summary {
  list-style: none; cursor: pointer; padding: .6rem .9rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem;
}
.draft-version > summary::-webkit-details-marker { display: none; }
.draft-version > summary::before { content: "▸"; color: var(--muted); transition: transform .15s ease; }
.draft-version[open] > summary::before { transform: rotate(90deg); }
.draft-version .dv-body { padding: .2rem 1rem .9rem; border-top: 1px solid var(--line); }

/* ------------------------------------------------------- contenu markdown */
.ia-content { font-size: 14.5px; line-height: 1.6; }
.ia-content h1, .ia-content h2, .ia-content h3 { color: var(--navy); margin: 1em 0 .4em; }
.ia-content h1 { font-size: 1.3em; } .ia-content h2 { font-size: 1.12em; } .ia-content h3 { font-size: 1.02em; }
.ia-content p { margin: .5em 0; }
.ia-content ul, .ia-content ol { padding-left: 1.4em; margin: .4em 0; }
.ia-content li { margin: .15em 0; }
.ia-content blockquote {
  border-left: 3px solid var(--line); padding: 4px 12px; margin: 8px 0;
  color: var(--muted); background: var(--surface-2); border-radius: 0 6px 6px 0;
}
.ia-content code {
  background: var(--code-bg); padding: 1px 6px; border-radius: 4px;
  font-family: var(--mono); font-size: .9em; color: var(--code-ink);
}
.ia-content pre { background: var(--code-bg); padding: 10px 12px; border-radius: 8px; overflow: auto; }
.ia-content table {
  border-collapse: collapse; width: 100%; margin: .8em 0; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.ia-content thead { background: var(--navy); color: var(--on-navy); text-align: left; }
.ia-content th { padding: 9px 12px; font-weight: 600; border: none; }
.ia-content td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.ia-content tbody tr:nth-child(even) { background: var(--surface-2); }
.ia-content tbody tr:hover { background: var(--info-bg); }

/* --------------------------------------------------------------- divers UI */
.searchbar { position: relative; max-width: 330px; flex: 1; }
.searchbar input { padding-left: 2.1rem; }
.searchbar::before {
  content: "🔎"; position: absolute; left: .65rem; top: 50%;
  transform: translateY(-50%); font-size: .85rem; opacity: .6;
}

.q-quote {
  background: var(--surface-2); border-left: 4px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .75rem 1rem; white-space: pre-wrap; font-size: .95rem; margin: 0;
}

.attachment-card {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .45rem .7rem; font-size: .87rem; color: var(--ink);
  transition: all .15s ease;
}
.attachment-card:hover { border-color: var(--navy); text-decoration: none; box-shadow: var(--shadow-soft); }
.attachment-card img { height: 44px; width: 44px; object-fit: cover; border-radius: 7px; }

.empty-state { text-align: center; padding: 2.6rem 1rem; color: var(--muted); }
.empty-state .big { font-size: 2.3rem; display: block; margin-bottom: .4rem; }

details.foldable { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 1rem; }
details.foldable > summary {
  cursor: pointer; padding: .7rem 1rem; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: .55rem;
}
details.foldable > summary::-webkit-details-marker { display: none; }
details.foldable > summary::before { content: "▸"; color: var(--muted); transition: transform .15s ease; }
details.foldable[open] > summary::before { transform: rotate(90deg); }
details.foldable > .fold-body { padding: .2rem 1rem 1rem; }

.divider { border: none; border-top: 1px solid var(--line); margin: 1.4rem 0; }

.toast-zone { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  background: var(--navy-deep); color: var(--on-navy); border-radius: 10px;
  padding: .65rem 1rem; font-size: .9rem; box-shadow: var(--shadow);
  animation: pop .25s ease both; max-width: 360px;
}
.toast-ok { background: var(--ok); color: var(--on-accent); }
.toast-bad { background: var(--bad); color: var(--on-accent); }

kbd.code-chip {
  font-family: var(--mono); font-size: .82rem; background: var(--surface-2);
  border: 1px solid var(--line); padding: 1px 7px; border-radius: 6px; color: var(--navy);
}

/* ------------------------------------- pieces jointes repliees (commercial) */
.champ-fichiers { margin-bottom: 1rem; }
.champ-fichiers > summary { font-weight: 600; }
/* `input[type=file]` est masque globalement (la dropzone le remplace) ; il
   faut le redire ici, la regle du repli ne le couvrant pas. */
.champ-fichiers input[type="file"] { display: none; }

/* ------------------------------------------ modeles de question (repli) */
.modeles-q {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: 1rem;
}
.modeles-q > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem; cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 600; color: var(--muted);
}
.modeles-q > summary::-webkit-details-marker { display: none; }
.modeles-q > summary:hover { color: var(--ink); }
.modeles-q > summary::after { content: "▸"; margin-left: auto; transition: transform .15s ease; }
.modeles-q[open] > summary::after { transform: rotate(90deg); }
.modeles-q > div { padding: 0 1rem .85rem; }
/* Sur telephone, chaque modele prend une ligne pleine : trois boutons serres
   sur 375 px redeviendraient des cibles de vingt pixels. */
@media (max-width: 700px) { .modeles-q .btn-sm { flex: 1; min-width: 100%; } }

/* ------------------------------------------------------------- utilitaires */
/* `.sur-large` : visible seulement au-dessus du seuil mobile. Sert a retirer
   les explications qui aident sur un grand ecran et encombrent sur un
   telephone — le contenu reste dans le gabarit, c'est la place qui manque. */
@media (max-width: 700px) { .sur-large { display: none !important; } }

/* `.hors-ecran-mobile` : retire du flux visuel sous 700 px, mais TOUJOURS lu
   par un lecteur d'ecran. Sert aux libelles dont un titre voisin fait deja le
   travail visuel — un `display: none` couperait le lien avec le champ. */
@media (max-width: 700px) {
  .hors-ecran-mobile {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* --------------------------------------------------------------- pagination */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  padding: .8rem 1.25rem; border-top: 1px solid var(--line);
}
.pagination-etat { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Une extremite atteinte reste VISIBLE mais inerte : la faire disparaitre
   deplacerait les deux autres elements a chaque changement de page. */
.pagination [aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

/* ---------------------------------------------- rail de la file d'attente */
.queue-bar {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem; flex-wrap: wrap;
}
.queue-back { font-size: .88rem; white-space: nowrap; }
/* La file defile horizontalement plutot que de passer a la ligne : elle doit
   coûter une seule hauteur de ligne, quelle que soit sa longueur. */
.queue-rail {
  display: flex; gap: .35rem; overflow-x: auto; flex: 1; min-width: 0;
  padding-bottom: 2px;
}
.queue-chip {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .78rem; color: var(--muted); white-space: nowrap;
  transition: all .13s ease;
}
.queue-chip:hover { border-color: var(--navy); color: var(--ink); text-decoration: none; }
.queue-chip.current {
  background: var(--navy); border-color: var(--navy); color: var(--on-navy);
  font-weight: 650;
}
.queue-chip.current .mono { color: var(--on-navy); }
.queue-conf { font-weight: 700; font-variant-numeric: tabular-nums; }
.queue-conf.hi { color: var(--ok); } .queue-conf.mid { color: var(--warn); } .queue-conf.lo { color: var(--bad); }
.queue-chip.current .queue-conf { color: var(--on-navy); }
.queue-count { font-size: .78rem; color: var(--muted); white-space: nowrap; }
/* Question deja ouverte par un AUTRE valideur : signalee, jamais interdite. */
.queue-chip.prise { border-color: var(--warn); color: var(--warn); }
.queue-chip.prise.current { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }

/* --------------------------------------- qui a pris la question (tableau) */
.pris {
  display: inline-block; font-size: .76rem; font-weight: 650;
  padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
}
.pris-moi { background: var(--ok-bg); color: var(--ok); }
.pris-autre { background: var(--warn-bg); color: var(--warn); }

/* ------------------------------------------ recherche globale (Ctrl+K) */
.palette-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(22, 36, 58, .38); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 9vh;
}
.palette-overlay[hidden] { display: none; }
.palette {
  width: min(580px, 92%); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden;
  animation: fadeUp .18s ease both;
}
.palette input {
  width: 100%; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: .85rem 1.1rem; font: 500 1rem var(--font);
}
.palette input:focus { outline: none; box-shadow: none; border-color: var(--line); }
.palette-results { max-height: 58vh; overflow-y: auto; }
.palette-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 700; padding: .6rem 1.1rem .2rem;
}
.palette-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem 1.1rem; font-size: .9rem; color: var(--ink);
  text-decoration: none; cursor: default;
}
a.palette-item { cursor: pointer; }
.palette-item:hover, .palette-item:focus-visible {
  background: var(--info-bg); text-decoration: none; outline: none;
}
.palette-ico { flex: none; width: 20px; text-align: center; }
.palette-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-detail { flex: none; font-size: .78rem; color: var(--muted); }
.palette-vide { padding: 1.4rem 1.1rem; text-align: center; color: var(--muted); font-size: .9rem; }

footer.app-foot {
  max-width: 1240px; width: 100%; margin: 0 auto; padding: 1.2rem;
  color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line);
}

/* ══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — un seul jeu de gabarits, la différence se joue sur le VIEWPORT.

   Jamais de branche sur le User-Agent : elle imposerait un second arbre de
   gabarits à maintenir, et se tromperait sur une fenêtre desktop réduite ou
   un écran scindé. Ce qui s'affiche se décide ici ; ce qui s'exécute (le flux
   SSE) se décide dans `app.js`, sur le même seuil.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .page { padding: 1rem .85rem 3rem; }
  .kpi-num { font-size: 1.3rem; }

  /* -------- Tableaux : chaque ligne devient une carte.
     Sept colonnes sur 375 px, c'est soit illisible soit un défilement
     horizontal que personne ne trouve. L'en-tête disparaît et chaque cellule
     porte son libellé, repris de `data-label` dans le gabarit. Aucun
     JavaScript, aucun gabarit dupliqué. */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); margin-bottom: .7rem; padding: .3rem .2rem;
  }
  .tbl tbody tr:hover { background: var(--surface); }
  .tbl td {
    border: 0; padding: .38rem .8rem;
    display: flex; align-items: baseline; gap: .3rem .8rem;
    /* Une valeur trop longue pour la place restante — un badge de statut, un
       email — passe à la ligne ENTIÈRE plutôt que d'être rognée au bord de la
       carte. Sans ce `wrap`, « Validée par le service technique » sortait du
       cadre. */
    flex-wrap: wrap;
  }
  .tbl td > * { min-width: 0; }
  .tbl td::before {
    content: attr(data-label);
    flex: none; width: 7.5rem;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted);
  }
  /* Une cellule sans libellé (colonne d'actions, chevron) reste pleine largeur. */
  .tbl td:not([data-label])::before { display: none; }
  .tbl td[data-label=""] { display: none; }

  /* -------- Cibles tactiles.
     Un doigt vise mal : en dessous de ~44 px, on rate. */
  .btn { padding: .7rem 1.2rem; }
  .btn-sm { padding: .5rem .9rem; }
  .sb-item, .sb-search { padding: .6rem .55rem; }

  /* -------- ⚠️ 16 px sur les champs, et ce n'est PAS un choix esthétique.
     En dessous de 16 px, Safari iOS zoome la page à chaque prise de focus et
     ne dézoome jamais : le formulaire devient inutilisable après la première
     frappe. Le symptôme ne se reproduit sur aucun émulateur de bureau. */
  input[type="text"], input[type="email"], input[type="date"],
  textarea, select { font-size: 16px; }
  textarea { min-height: 140px; }

  /* -------- Le rail de la file reste défilable, mais respire. */
  .queue-chip { padding: .35rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- notation
   Etoiles peintes en JavaScript (cf. HAFA.rating), pas par l'astuce CSS de
   l'ordre DOM inverse : celle-ci exigeait de lire les entrees de 5 vers 1 pour
   que le combinateur `~` colore « jusqu'a » l'etoile choisie. Illisible, et
   muette des que la feuille n'arrive pas — c'est ce qui s'est produit en
   production, ou le gabarit etait a jour et le style non. */
.rating { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rating-stars { display: flex; gap: 2px; }
.rating-stars button {
  background: none; border: 0; padding: 0 1px; margin: 0; cursor: pointer;
  font-size: 1.65rem; line-height: 1; color: var(--line, #d8dde3);
  transition: color .1s, transform .1s;
}
.rating-stars button[data-on="1"] { color: #e0a800; }
.rating-stars button:hover { transform: scale(1.12); }
.rating-stars button:focus-visible { outline: 2px solid var(--navy, #1a4480); outline-offset: 2px; border-radius: 3px; }
.rating-label { font-size: .85rem; color: var(--ink, #1e2732); }
.rating-label.is-empty { color: var(--muted, #6b7684); }
.rating-clear {
  margin-left: auto; background: none; border: 0; padding: 2px 6px; cursor: pointer;
  font-size: .78rem; color: var(--muted, #6b7684); text-decoration: underline;
}
.rating-clear[hidden] { display: none; }
/* Confrontation avec l'auto-evaluation du modele : 88 revendiques contre 2/5
   accordes, c'est un modele qui se surestime, et ca doit se voir d'un coup. */
.rating-vs { font-size: .82rem; color: var(--muted, #6b7684); width: 100%; }
.rating-vs b { font-weight: 600; color: var(--ink, #1e2732); }
.rating-vs .gap-over { color: #b3261e; font-weight: 600; }
.rating-vs .gap-under { color: #146c43; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   Liste du commercial : bascule en cours / archivees, blocs depliables
   ═══════════════════════════════════════════════════════════════════════════
   Deux liens dessines comme un interrupteur. Le dessin est celui d'un switch,
   la mecanique celle du web : l'etat vit dans l'URL, donc il se partage et
   survit a un rechargement. Une vraie case a cocher aurait demande du
   JavaScript pour naviguer, et un ecran mort sans lui. */
.bascule {
  display: inline-flex; gap: 2px; margin: 0 0 1rem;
  padding: 3px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2);
}
.bascule-opt {
  padding: .48rem 1.15rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.bascule-opt:hover { color: var(--ink); }
.bascule-opt.on { background: var(--navy); color: var(--on-navy); }
.bascule-opt:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.q-liste { display: flex; flex-direction: column; }
.q-bloc { border-top: 1px solid var(--line); }
.q-bloc:first-child { border-top: 0; }
.q-bloc > summary {
  display: flex; flex-direction: column; gap: .3rem;
  /* 44 px de haut au doigt, pas une ligne de tableau de 20 px. */
  padding: .85rem 1rem; cursor: pointer; list-style: none;
  transition: background .12s ease;
}
.q-bloc > summary::-webkit-details-marker { display: none; }
.q-bloc > summary:hover { background: var(--surface-2); }
.q-bloc > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.q-bloc[open] > summary { background: var(--surface-2); }

.q-bloc-tete { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.q-bloc-date { font-size: .8rem; margin-left: auto; white-space: nowrap; }
/* Le chevron termine la ligne d'entete plutot que d'occuper une colonne : sur
   un ecran de telephone, chaque pixel de largeur compte. Il vit sur l'entete
   et non sur l'extrait, parce que l'extrait disparait a l'ouverture. */
.q-bloc-tete::after {
  content: "▸"; color: var(--muted); flex: none;
  transition: transform .15s ease;
}
.q-bloc[open] .q-bloc-tete::after { transform: rotate(90deg); }
.q-bloc-extrait { color: var(--muted); font-size: .92rem; line-height: 1.45; }
/* Deplie, l'extrait tronque doublerait le texte complet juste en dessous :
   la meme phrase deux fois, coupee puis entiere. */
.q-bloc[open] .q-bloc-extrait { display: none; }

.q-bloc-corps { padding: 0 1rem 1rem; }
.q-bloc-texte {
  margin: 0 0 .6rem; white-space: pre-wrap; line-height: 1.55;
  color: var(--ink);
}
.q-bloc-meta { font-size: .84rem; margin: 0 0 .8rem; }

@media (prefers-reduced-motion: reduce) {
  .bascule-opt, .q-bloc > summary, .q-bloc-tete::after { transition: none; }
}