/* ============================================================
   BOÎTE DE RÉCEPTION — feuille de style unique
   Bâtie sur les tokens Répliq (/static/design-system/styles.css).
   Règles de la charte appliquées ici :
     · deux fonds seulement — surface-page et surface-card ;
       l'encre-900 est réservée aux toasts ;
     · bordures 1 px, sauf le filet vertical de 3 px collé au bord
       gauche, motif signature qui code un sentiment ou un accent ;
     · casse phrase partout, capitales réservées aux surtitres 11 px ;
     · le rose porte l'action et l'identité, jamais une donnée ;
       jade = positif, encre-400 = neutre, corail = négatif,
       indigo = question ;
     · ombre rose réservée au bouton primaire ;
     · survol = fond assombri, jamais un changement d'opacité ;
       appui = scale(.97) ; focus = anneau rose 3 px.
   ============================================================ */

:root{
  /* Largeur de la colonne liste dans la vue de travail. */
  --board-w:minmax(360px,42fr);
}

*{box-sizing:border-box;margin:0}
html{color-scheme:light}
body{
  background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-text); font-size:var(--text-body); line-height:var(--lh-body);
  min-height:100dvh; display:flex; flex-direction:column;
  -webkit-text-size-adjust:100%;
}

/* La voix d'affichage : Bricolage pour les titres et les grands chiffres,
   chasse tabulaire pour tout nombre comparable. Aucune capitale ici — la
   charte réserve les capitales aux surtitres de 11 px. */
.plaque{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  letter-spacing:var(--ls-h2);
  font-variant-numeric:tabular-nums;
}
h1,h2{font-family:var(--font-display)}

/* Focus : anneau rose, jamais l'outline du navigateur. */
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* Iconographie : trait 1.75, jamais de forme pleine, toujours currentColor. */
.ico{
  width:17px;height:17px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}

.saut{
  position:absolute;left:var(--space-3);top:var(--space-3);z-index:100;
  transform:translateY(-200%); transition:transform var(--dur-fast) var(--ease-standard);
  background:var(--surface-inverse);color:var(--text-inverse);
  padding:10px 16px;border-radius:var(--radius-control);
}
.saut:focus{transform:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Barre supérieure ----------
   Elle flotte au-dessus du contenu : c'est le seul endroit, avec les toasts et
   le voile de modale, où la charte autorise transparence et flou. */
.fronton{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  min-height:var(--topbar-height);
  padding:var(--space-3) var(--gutter-app);
  border-bottom:var(--border-hairline) solid var(--border-subtle);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
}
/* `center` et non `baseline` : la tuile de marque n'a pas de ligne de base, et
   l'aligner sur celle du titre la faisait flotter au-dessus du fronton. */
.enseigne{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.enseigne h1{
  font-size:var(--text-h3);font-weight:var(--weight-black);
  letter-spacing:var(--ls-h2);color:var(--text-strong);white-space:nowrap;
  /* Le filet sépare la marque de l'écran courant : deux niveaux de lecture,
     pas deux titres concurrents. */
  padding-left:var(--space-3);
  border-left:var(--border-hairline) solid var(--border-subtle);
}
/* Le compte est devenu un bouton : c'est sous ce nom que les réponses partent,
   donc c'est de là qu'on en change. Il garde l'allure discrète de l'étiquette
   qu'il était — le fronton ne doit pas gagner un second bouton criard. */
.compte-bloc{position:relative;min-width:0}
.enseigne .compte{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  font-size:var(--text-sm);color:var(--text-muted);
  padding:4px var(--space-2) 4px var(--space-3);
  border-left:var(--border-hairline) solid var(--border-subtle);
  border-radius:0 var(--radius-control) var(--radius-control) 0;
  overflow:hidden;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.enseigne .compte>span{overflow:hidden;text-overflow:ellipsis}
.enseigne .compte:hover{background:var(--ink-100);color:var(--text-strong)}
.enseigne .compte .chevron{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease-standard)}
.enseigne .compte[aria-expanded="true"] .chevron{transform:rotate(180deg)}
/* Deux anomalies, deux teintes : pas de compte du tout, ou un compte mort. */
.enseigne .compte.vide{color:var(--state-warning-ink);font-weight:var(--weight-semibold)}
.enseigne .compte.ko{color:var(--state-negative-ink);font-weight:var(--weight-semibold)}

.menu-compte{
  position:absolute;top:calc(100% + var(--space-2));left:0;z-index:60;
  min-width:264px;max-width:min(340px, calc(100vw - 2 * var(--gutter-app)));
  padding:var(--space-2);
  background:var(--surface-card);border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-card);box-shadow:var(--shadow-lg);
}
.menu-compte[hidden]{display:none}
.menu-titre{
  padding:var(--space-2) var(--space-3) 6px;
  font-size:var(--text-xs);font-weight:var(--weight-bold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
}
.menu-vide{padding:var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}
.menu-item{
  display:flex;align-items:center;gap:var(--space-2);width:100%;
  padding:9px var(--space-3);border-radius:var(--radius-control);
  font-size:var(--text-sm);color:var(--text-body);text-align:left;
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard);
}
.menu-item:hover{background:var(--ink-100)}
.menu-item.actif{font-weight:var(--weight-semibold);color:var(--text-strong)}
.menu-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-etat{
  margin-left:auto;flex:none;
  padding:2px 8px;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  background:var(--state-positive-soft);color:var(--state-positive-ink);
}
.menu-etat.ko{background:var(--state-negative-soft);color:var(--state-negative-ink)}
.menu-filet{height:1px;margin:var(--space-2) 0;background:var(--border-subtle)}
/* Une entrée de menu qui explique ce qu'elle fait : « Profil de marque » seul
   ne dit pas qu'on y règle le ton et les connaissances. */
.menu-item{flex-wrap:wrap}
.menu-aide{
  flex-basis:100%;margin-top:2px;
  font-size:var(--text-xs);color:var(--text-faint);line-height:var(--lh-body);
}
.menu-item.urgent{background:var(--state-warning-soft)}
.menu-item.urgent:hover{background:var(--amber-200)}
.menu-item.urgent .menu-nom{font-weight:var(--weight-bold);color:var(--state-warning-ink)}
.menu-item.urgent .menu-aide{color:var(--state-warning-ink)}

/* Le bouton des réglages : même gabarit qu'Actualiser, sans le libellé —
   le fronton tient sur 64 px et l'icône d'engrenage se lit sans mot. */
.btn-reglages{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-control);
  border:var(--border-hairline) solid var(--border-default);
  background:var(--surface-card);color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.btn-reglages:hover{background:var(--ink-100);color:var(--text-strong)}
.btn-reglages[aria-expanded="true"]{background:var(--ink-100);color:var(--text-strong)}
.btn-reglages .ico{width:18px;height:18px}
/* Ancré sous le bouton, comme le menu du compte : le bouton vit à gauche du
   fronton, un ancrage à droite projetterait le menu hors de l'écran. */
.menu-reglages{left:0;right:auto}
.menu-item.danger{color:var(--state-negative-ink)}
.menu-item.danger:hover{background:var(--state-negative-soft)}
/* Armée, la déconnexion s'annonce : elle efface une session, pas un filtre. */
.menu-item.danger.arme{
  background:var(--state-negative-soft);font-weight:var(--weight-semibold);
  box-shadow:inset 0 0 0 1px var(--coral-200);
}
/* L'avertissement de purge : lu AVANT le clic qui efface, d'où sa place au-
   dessus du bouton armé et sa couleur d'alerte — pas un texte d'ambiance. */
.menu-vide.avert{color:var(--state-negative-ink)}
.fronton .pousse{flex:1 1 40px}

/* Créneaux : le plafond horaire, en barre de progression.
   Le fronton doit tenir sur 64 px : la phrase complète vit dans la carte
   d'indicateurs et dans #jaugeSr pour le lecteur d'écran, pas ici. */
.creneaux{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.creneaux .jauge{
  display:block;width:56px;height:6px;flex:none;
  border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden;
}
/* Remplissage en scaleX plutôt qu'en width : animer une propriété de mise en
   page fait recalculer la barre à chaque image. */
.creneaux .rempli{
  display:block;width:100%;height:100%;border-radius:var(--radius-pill);
  background:var(--state-positive);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-slow) var(--ease-standard);
}
.creneaux .rempli.plein{background:var(--state-negative)}
/* Le mono est réservé aux nombres comparables — pas au mot qui les nomme. */
.creneaux .txt{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}
.creneaux .txt .n{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--text-strong);font-weight:var(--weight-bold);
}

/* Voyants de service : un voyant a une étiquette, jamais une couleur seule. */
.lampes{display:flex;gap:var(--space-3)}
.lampe{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);
}
.lampe .oeil{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--ink-300);flex:none}
.lampe.ok .oeil{background:var(--state-positive)}
.lampe.ko{color:var(--state-negative-ink)}
.lampe.ko .oeil{background:var(--state-negative)}

/* ---------- Contrôles ----------
   Rayon 10, bordure 1 px, survol par assombrissement, appui à .97. */
.btn-sync,.rang-mode,.sent,.btn{
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             transform var(--dur-instant) var(--ease-standard);
}
.btn-sync:active:not(:disabled),.sent:active,.btn:active:not(:disabled){
  transform:scale(var(--press-scale));
}

.btn-sync{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;min-height:38px;border-radius:var(--radius-control);
  border:var(--border-hairline) solid var(--border-default);
  background:var(--surface-card);color:var(--text-strong);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
}
.btn-sync:hover:not(:disabled){background:var(--ink-100);border-color:var(--border-strong)}
.btn-sync:disabled{cursor:progress;color:var(--text-muted)}
.btn-sync.tourne .ico{animation:rq-spin 1s linear infinite}

/* Le mode de publication : trois positions d'un même commutateur. */
.seg{
  display:flex;border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-control);overflow:hidden;background:var(--surface-card);
}
.rang-mode{
  padding:9px 13px;min-height:38px;
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);
  border-right:var(--border-hairline) solid var(--border-subtle);white-space:nowrap;
}
.rang-mode:last-child{border-right:0}
.rang-mode:hover[aria-pressed="false"]{background:var(--ink-100);color:var(--text-strong)}
.rang-mode[aria-pressed="true"]{background:var(--surface-brand);color:var(--text-inverse)}
.rang-mode[data-mode="full_auto"][aria-pressed="true"]{background:var(--state-negative);color:var(--white)}

/* ---------- Bandeaux d'avertissement ---------- */
.bandeau{
  display:flex;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-3) var(--gutter-app);font-size:var(--text-sm);
  border-bottom:var(--border-hairline) solid;
}
.bandeau[hidden]{display:none}
.bandeau b{font-weight:var(--weight-bold)}
.bandeau .ico{margin-top:1px}
.bandeau.simu{background:var(--state-warning-soft);border-color:var(--amber-200);color:var(--state-warning-ink)}
.bandeau.compte-ko{background:var(--state-negative-soft);border-color:var(--coral-200);color:var(--state-negative-ink)}
.bandeau.panne,.bandeau.auto{background:var(--state-negative-soft);border-color:var(--coral-200);color:var(--state-negative-ink)}
.bandeau .agir{
  margin-left:auto;font-weight:var(--weight-semibold);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;color:inherit;
}

/* ============================================================
   NIVEAU 1 — LES PUBLICATIONS
   ============================================================ */
.quai-vue{
  max-width:var(--content-max);width:100%;margin:0 auto;padding:var(--gutter-app);
  display:flex;flex-direction:column;gap:var(--space-6);
}
.quai-vue[hidden]{display:none}

/* ---------- Les indicateurs ----------
   Un KPI par carte, l'accent porté par le filet de 3 px au bord gauche.
   Chaque poste est un bouton : un chiffre qu'on ne peut pas atteindre n'est
   pas une information, c'est une décoration. */
.expl-liste{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.poste{
  display:flex;
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
.poste > *{
  display:block;width:100%;text-align:left;
  padding:var(--space-4) var(--space-4) var(--space-4) 13px;
  border-left:3px solid transparent;
  transition:background var(--dur-fast) var(--ease-standard);
}
.poste button:hover{background:var(--ink-100)}
.poste-n{
  display:block;font-family:var(--font-display);font-size:var(--text-h1);
  font-weight:var(--weight-black);line-height:var(--lh-h1);
  letter-spacing:var(--ls-h1);font-variant-numeric:tabular-nums;
  color:var(--text-strong);
}
.poste-mot{display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-strong);margin-top:4px}
.poste-aide{display:block;font-size:var(--text-xs);line-height:var(--lh-sm);color:var(--text-muted);margin-top:4px}
.poste.urgent > *{border-left-color:var(--state-warning)}
.poste.urgent .poste-n{color:var(--state-warning-ink)}
.poste.attente > *{border-left-color:var(--ink-300)}
.poste.parti > *{border-left-color:var(--state-positive)}
.poste.parti .poste-n{color:var(--state-positive-ink)}
.poste.incident > *{border-left-color:var(--state-negative)}
.poste.incident .poste-n{color:var(--state-negative-ink)}
/* Un compteur à zéro reste une information, mais il n'a rien à réclamer :
   c'est le filet qui s'efface, pas le chiffre. L'encre-400 sur blanc tombait
   sous les 3:1 exigés en grand texte — un zéro qui compte doit rester lu. */
.poste.nul .poste-n{color:var(--text-muted)}
.poste.nul > *{border-left-color:transparent}

/* ---------- Le sentiment global ----------
   Une carte, comme au tableau de bord Répliq : titre, lecture, instrument. */
.barometre{
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
  padding:var(--space-5);
  display:grid;gap:var(--space-4);
  grid-template-columns:minmax(220px,auto) minmax(280px,1fr);
  align-items:center;
}
.baro-tete{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.baro-tete h2{
  font-size:var(--text-h3);font-weight:var(--weight-bold);
  letter-spacing:var(--ls-h3);color:var(--text-strong);
}
.baro-fenetre{font-size:var(--text-sm);color:var(--text-muted)}

.baro-lecture{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.baro-mot{
  font-family:var(--font-display);font-size:var(--text-h2);
  font-weight:var(--weight-bold);letter-spacing:var(--ls-h2);color:var(--text-strong);
}
.baro-score{
  font-family:var(--font-mono);font-size:var(--text-h2);
  font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;
}
.baro-score.bon{color:var(--state-positive-ink)}
.baro-score.moyen{color:var(--state-warning-ink)}
.baro-score.mauvais{color:var(--state-negative-ink)}
.baro-delta{flex-basis:100%;font-size:var(--text-sm);color:var(--text-muted)}
.baro-delta.hausse{color:var(--state-positive-ink)}
.baro-delta.baisse{color:var(--state-negative-ink)}

/* Échantillon trop mince : l'instrument se met en retrait plutôt que d'affirmer. */
.barometre.incertain .baro-mot,.barometre.incertain .baro-score{color:var(--text-muted)}
.barometre.incertain .baro-aiguille{background:var(--ink-400)}
.barometre.incertain .baro-piste{opacity:.55}

.baro-instrument{min-width:0}
.baro-piste{
  position:relative;display:flex;height:10px;
  border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-sunken);
}
.baro-zone{flex:1}
.baro-zone.z-neg{background:var(--coral-200)}
.baro-zone.z-neu{background:var(--ink-200)}
.baro-zone.z-pos{background:var(--jade-200)}
/* L'aiguille glisse en transform : rien ne remet la page en page. */
.baro-glisse{
  position:absolute;inset:0;pointer-events:none;
  transform:translateX(var(--p,50%));
  transition:transform var(--dur-slow) var(--ease-standard);
}
.baro-aiguille{
  position:absolute;top:-3px;bottom:-3px;left:-1.5px;width:3px;
  background:var(--ink-900);border-radius:var(--radius-pill);
}
.baro-bornes{
  display:flex;justify-content:space-between;margin-top:7px;
  font-size:var(--text-xs);color:var(--text-muted);
}
.baro-detail{grid-column:1/-1;border-top:var(--border-hairline) solid var(--border-subtle);padding-top:var(--space-3)}
/* Replié, le bloc n'a plus rien à séparer : le filet et sa réserve dessinaient
   une bande vide au bas de la carte. Fermé, ce n'est qu'un lien discret. */
.baro-detail:not([open]){border-top:0;padding-top:0;margin-top:calc(var(--space-2) * -1)}
.baro-detail summary{
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;min-height:32px;
}
.baro-detail summary::-webkit-details-marker{display:none}
.baro-detail summary .ico{
  width:15px;height:15px;
  transition:transform var(--dur-fast) var(--ease-standard);
}
.baro-detail[open] summary .ico{transform:rotate(180deg)}
.baro-detail summary:hover{color:var(--text-strong)}
.baro-detail[open] summary{margin-bottom:var(--space-3)}
.baro-conduite{font-size:var(--text-body);color:var(--text-body);max-width:72ch;margin-bottom:var(--space-3)}
/* La proportion d'abord : une barre empilée se lit sans calcul mental. */
.baro-repartition{
  display:flex;height:10px;margin-bottom:var(--space-4);
  border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-sunken);
}
.rep-seg{display:block;min-width:0}
.rep-seg.pos{background:var(--sentiment-positive)}
.rep-seg.neu{background:var(--sentiment-neutral)}
.rep-seg.neg{background:var(--sentiment-negative)}
.rep-seg.vide{background:var(--ink-200)}

/* Puis la légende : le pourcentage colle au mot qu'il chiffre, l'effectif
   suit en retrait. Trois colonnes compactes, jamais étalées sur la carte. */
.baro-parts{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--space-2) var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(180px,220px));
}
.part{display:flex;align-items:baseline;gap:var(--space-2);font-size:var(--text-sm)}
.part .oeil{
  width:7px;height:7px;border-radius:var(--radius-pill);flex:none;
  align-self:center;
}
.part.pos .oeil{background:var(--sentiment-positive)}
.part.neu .oeil{background:var(--sentiment-neutral)}
.part.neg .oeil{background:var(--sentiment-negative)}
.part-mot{color:var(--text-body);font-weight:var(--weight-semibold)}
.part-pc{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight:var(--weight-bold);color:var(--text-strong);
}
/* L'effectif suit le pourcentage, il ne part pas au bout de la colonne. */
.part-n{font-size:var(--text-xs);color:var(--text-muted)}

/* ---------- Les publications ---------- */
.pubs-tete{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4)}
.pubs-tete h2{
  font-size:var(--text-h3);font-weight:var(--weight-bold);
  letter-spacing:var(--ls-h3);color:var(--text-strong);
}
.pubs-tete .pousse{flex:1}
.lien-tout{
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-brand);
  padding:6px 0;transition:color var(--dur-fast) var(--ease-standard);
}
.lien-tout:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}

.tuiles{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.tuile{
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard);
}
.tuile.reclame{border-color:var(--amber-200)}
.tuile:hover{border-color:var(--border-default);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.tuile-clic{display:block;width:100%;text-align:left;padding:0}

.vignette{
  position:relative;display:block;aspect-ratio:4/5;
  background:var(--surface-sunken);overflow:hidden;
}
.vignette img{width:100%;height:100%;object-fit:cover;display:block}
.vignette-nulle{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;
  gap:6px;color:var(--text-faint);font-size:var(--text-xs);font-weight:var(--weight-semibold);
}
.marque-video,.pastille-att{
  position:absolute;display:inline-flex;align-items:center;gap:5px;
  border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-bold);
}
.marque-video{
  left:var(--space-2);top:var(--space-2);padding:4px 9px;
  background:rgba(13,11,20,.72);color:var(--white);
}
.pastille-att{
  right:var(--space-2);bottom:var(--space-2);padding:4px 10px;
  background:var(--state-warning);color:var(--ink-950);
}

.tuile-corps{display:block;padding:var(--space-3) var(--space-4) var(--space-4)}
.tuile-legende{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text-body);min-height:2.9em;
}
.metriques{
  display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-top:var(--space-3);
  font-size:var(--text-xs);color:var(--text-muted);
}
.metriques .m b{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-strong);margin-right:3px;
}
.metriques .m.urgent b{color:var(--state-warning-ink)}
.metriques .m.lead b{color:var(--sentiment-question)}
.metriques .m.incident b{color:var(--state-negative-ink)}

.melange{
  display:flex;height:5px;border-radius:var(--radius-pill);overflow:hidden;
  background:var(--surface-sunken);margin-top:var(--space-3);
}
.melange .seg{display:block;min-width:0;border:0;border-radius:0}
.melange .pos{background:var(--sentiment-positive)}
.melange .neu{background:var(--sentiment-neutral)}
.melange .neg{background:var(--sentiment-negative)}
.melange-txt{display:block;margin-top:6px;font-size:var(--text-xs);color:var(--text-muted)}

/* État vide : tenu par la typographie et une icône dans un carré rose pâle. */
.quai-vide,.vide,.desk-vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--space-2);
  padding:var(--space-12) var(--space-5);color:var(--text-muted);
}
.quai-vide{grid-column:1/-1}
.quai-vide b,.vide b,.desk-vide b{
  font-family:var(--font-display);font-size:var(--text-h3);
  font-weight:var(--weight-bold);letter-spacing:var(--ls-h3);color:var(--text-strong);
}
.quai-vide p,.vide p,.desk-vide p{max-width:48ch;font-size:var(--text-sm);color:var(--text-muted)}
.vide-ico{
  display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--space-2);
  border-radius:var(--radius-md);background:var(--surface-brand-soft);color:var(--text-brand);
}
.vide-ico .ico{width:22px;height:22px}

/* Rappel de la publication ouverte, au-dessus de la liste. */
.contexte-media{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-bottom:var(--border-hairline) solid var(--border-subtle);
  background:var(--surface-sunken);
}
.contexte-media[hidden]{display:none}
.ctx-vignette{
  width:44px;height:44px;object-fit:cover;border-radius:var(--radius-sm);
  flex:none;background:var(--ink-200);
}
.ctx-nulle{display:grid;place-items:center;color:var(--text-faint)}
.ctx-texte{min-width:0;flex:1}
.ctx-legende{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--text-sm);color:var(--text-body);line-height:var(--lh-sm);
}
.ctx-meta{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-top:3px}
.ctx-lien{flex:none;font-size:var(--text-xs);color:var(--text-brand);font-weight:var(--weight-semibold)}
.ctx-lien:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}

.btn-quai{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;
  padding:0 var(--space-3) 0 0;
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);
  border-right:var(--border-hairline) solid var(--border-subtle);margin-right:var(--space-2);
  transition:color var(--dur-fast) var(--ease-standard);
}
.btn-quai:hover{color:var(--text-strong)}

/* ---------- Corps : liste + panneau de réponse ---------- */
.quai{
  flex:1;display:grid;grid-template-columns:var(--board-w) minmax(0,58fr);
  gap:var(--space-5);padding:var(--gutter-app);align-items:stretch;
  max-width:1680px;width:100%;margin:0 auto;
}
.quai[hidden]{display:none}
main{flex:1;display:flex;flex-direction:column;min-height:0}

/* ---------- LA LISTE ---------- */
.board,.desk{
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
}
.board{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.board-tete{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-bottom:var(--border-hairline) solid var(--border-subtle);
}
.board-tete h2{
  font-size:var(--text-h3);font-weight:var(--weight-bold);
  letter-spacing:var(--ls-h3);color:var(--text-strong);
}
.board-tete .pousse{flex:1}

/* Rang des états. Un seul rang qui défile : les états ne se redisposent jamais
   sous le doigt quand un compteur change de largeur. */
.rang{
  display:flex;overflow-x:auto;scrollbar-width:none;
  border-bottom:var(--border-hairline) solid var(--border-subtle);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}
.rang::-webkit-scrollbar{display:none}
.rang button{
  flex:none;display:flex;align-items:center;gap:7px;
  padding:11px var(--space-4);min-height:44px;
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);
  border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.rang button:hover:not([aria-selected="true"]){color:var(--text-strong)}
.rang button[aria-selected="true"]{color:var(--text-brand);border-bottom-color:var(--border-brand)}
.rang .n{
  font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;
  padding:2px 7px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);color:var(--text-muted);
}
.rang button[aria-selected="true"] .n{background:var(--surface-brand-soft);color:var(--text-brand)}

/* Les lignes. Le filet de 3 px au bord gauche code le sentiment. */
/* La barre de solde : proposer de refermer d'un geste ce qui a déjà été
   répondu à la main. Teinte neutre-positive, pas d'alerte — rien n'est cassé,
   c'est du travail déjà fait qui demande à être classé. */
.solde{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-2) var(--space-4);
  border-bottom:var(--border-hairline) solid var(--border-subtle);
  background:var(--state-positive-soft);
  font-size:var(--text-sm);color:var(--state-positive-ink);
}
.solde[hidden]{display:none}
.solde .ico{flex:none;width:16px;height:16px;stroke:currentColor}
.solde .pousse{flex:1 1 8px}
.solde-date{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.solde-date input{
  padding:5px var(--space-2);min-height:32px;
  font:inherit;font-size:var(--text-sm);color:var(--text-strong);
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-xs);
}
.solde .btn.arme{
  background:var(--state-positive);color:var(--text-inverse);
  border-color:var(--state-positive);font-weight:var(--weight-bold);
}

.rangs{overflow-y:auto;overflow-x:hidden;flex:1;min-height:180px}
.rangs ul{list-style:none;margin:0;padding:0}
.ligne{
  display:grid;grid-template-columns:5ch minmax(0,1fr) auto;
  align-items:center;gap:var(--space-3);
  width:100%;min-width:0;text-align:left;
  padding:11px var(--space-4) 11px 13px;min-height:56px;
  border-left:3px solid transparent;
  border-bottom:var(--border-hairline) solid var(--border-subtle);
  transition:background var(--dur-fast) var(--ease-standard);
}
.ligne.s-positive{border-left-color:var(--sentiment-positive)}
.ligne.s-neutral{border-left-color:var(--sentiment-neutral)}
.ligne.s-negative{border-left-color:var(--sentiment-negative)}
.ligne.s-question{border-left-color:var(--sentiment-question)}
.ligne:hover{background:var(--ink-100)}
/* Sélection en neutre, pas en rose : le filet de gauche est le seul canal qui
   code le sentiment, et un champ rose derrière un filet de 3 px l'éteint —
   sur la ligne précisément en cours de traitement. L'encre-200 se distingue
   aussi du survol (encre-100) sans lui ressembler. */
.ligne[aria-current="true"]{background:var(--ink-200)}
.ligne .h{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);color:var(--text-muted);
}
.ligne .qui{min-width:0;overflow:hidden}
.ligne .qui .nom,.ligne .qui .apercu{
  display:block;min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ligne .qui .nom{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-strong)}
.ligne .qui .apercu{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.ligne .marques{display:flex;align-items:center;gap:6px;flex:none}

/* Badges d'état et pastilles : pilules, casse phrase. */
.volet,.pastille{
  display:inline-flex;align-items:center;gap:5px;
  border-radius:var(--radius-pill);white-space:nowrap;
  font-weight:var(--weight-bold);
}
.volet{
  padding:4px 10px;font-size:var(--text-xs);
  background:var(--state-neutral-soft);color:var(--state-neutral-ink);
}
.volet.attente{background:var(--state-warning-soft);color:var(--state-warning-ink)}
.volet.parti{background:var(--state-positive-soft);color:var(--state-positive-ink)}
.volet.incident{background:var(--state-negative-soft);color:var(--state-negative-ink)}
.pastille{padding:3px 9px;font-size:var(--text-xs)}
.pastille.lead{background:var(--indigo-100);color:var(--indigo-600)}
.pastille.retouche{background:var(--surface-brand-soft);color:var(--text-brand)}

.tronque{
  padding:var(--space-3) var(--space-4);font-size:var(--text-xs);color:var(--text-muted);
  border-top:var(--border-hairline) solid var(--border-subtle);text-align:center;
}

.board-pied{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);
  border-top:var(--border-hairline) solid var(--border-subtle);
  background:var(--surface-sunken);
  font-size:var(--text-xs);color:var(--text-muted);
}
.board-pied .pousse{flex:1 1 20px}
.board-pied .registre{color:var(--text-body)}
.board-pied kbd{
  font-family:var(--font-mono);font-size:var(--text-xs);padding:2px 5px;
  border-radius:var(--radius-xs);
  border:var(--border-hairline) solid var(--border-default);background:var(--surface-card);
}

/* ---------- LE PANNEAU DE RÉPONSE ---------- */
/* Pas d'overflow:hidden ici : il désactiverait le position:sticky de la barre
   de commande, qui au téléphone est la seule chose qui garde « Répondre » à
   l'écran. Ce sont les coins de la barre qui épousent la carte. */
.desk{display:flex;flex-direction:column;min-height:60dvh}
.desk-tete{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);
  border-bottom:var(--border-hairline) solid var(--border-subtle);
}
.desk-retour{display:none}
.desk-tete .nom{
  font-family:var(--font-display);font-size:var(--text-h3);
  font-weight:var(--weight-bold);letter-spacing:var(--ls-h3);color:var(--text-strong);
}
.desk-tete .quand{font-size:var(--text-xs);color:var(--text-muted)}
.desk-tete .lien{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-brand);
}
.desk-tete .lien:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}

.corps{
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);
  flex:1;overflow-y:auto;min-height:0;
}

/* Contexte du post : ce que l'IA voit, l'humain le voit aussi. */
.contexte{
  background:var(--surface-sunken);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);color:var(--text-body);
}
.contexte .etq{
  font-size:var(--text-xs);letter-spacing:var(--ls-xs);text-transform:uppercase;
  font-weight:var(--weight-bold);color:var(--text-muted);margin-bottom:6px;
}
.contexte p{max-width:70ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.contexte.ouvert p{-webkit-line-clamp:unset}
.contexte .plus{
  font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-brand);margin-top:6px;
}
.contexte .plus:hover{text-decoration:underline;text-underline-offset:3px}

/* Le sentiment est un bouton : le corriger entraîne l'IA. */
.jauge-sent{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.sent{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;min-height:36px;border-radius:var(--radius-pill);
  border:var(--border-hairline) solid var(--border-default);background:var(--surface-card);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
}
.sent:hover{background:var(--ink-100);border-color:var(--border-strong)}
.sent .oeil{width:7px;height:7px;border-radius:var(--radius-pill);flex:none}
.sent.positive{color:var(--state-positive-ink)} .sent.positive .oeil{background:var(--sentiment-positive)}
.sent.neutral{color:var(--text-muted)}          .sent.neutral .oeil{background:var(--sentiment-neutral)}
.sent.negative{color:var(--state-negative-ink)} .sent.negative .oeil{background:var(--sentiment-negative)}
.jauge-sent .aide{font-size:var(--text-xs);color:var(--text-muted);flex:1 1 220px}

/* La conversation garde sa géométrie : reçu à gauche, réponse à droite. */
.echange{display:flex;flex-direction:column;gap:var(--space-4)}
.entrant{
  background:var(--surface-sunken);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);max-width:68ch;font-size:var(--text-body);
  color:var(--text-body);
}
/* Les tours déjà passés : même géométrie, en retrait — c'est de l'archive,
   pas la pièce à traiter. */
.fil{display:flex;flex-direction:column;gap:var(--space-2);opacity:.72}
.fil-etq{
  font-size:var(--text-xs);letter-spacing:var(--ls-xs);text-transform:uppercase;
  font-weight:var(--weight-bold);color:var(--text-muted);
}
.fil-eux,.fil-nous{
  padding:var(--space-2) var(--space-3);max-width:58ch;
  font-size:var(--text-sm);border-radius:var(--radius-sm);
}
.fil-eux{background:var(--surface-sunken)}
.fil-nous{
  align-self:flex-end;background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-subtle);
}
/* Un nom de locuteur n'est pas un surtitre : ni capitales, ni interlettrage. */
.fil-qui{
  display:block;font-size:var(--text-xs);
  font-weight:var(--weight-bold);color:var(--text-muted);margin-bottom:2px;
}

.sortant{align-self:flex-end;width:min(100%,68ch)}
.sortant .etq{
  display:flex;align-items:center;gap:7px;
  font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-brand);
  margin-bottom:7px;
}
.sortant .etq .modif{color:var(--state-warning-ink);font-weight:var(--weight-semibold)}
.sortant textarea{
  width:100%;resize:none;overflow:hidden;display:block;
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-control);padding:var(--space-3) var(--space-4);
  color:var(--text-strong);font-family:var(--font-text);
  font-size:var(--text-body);line-height:var(--lh-body);min-height:88px;
  transition:border-color var(--dur-fast) var(--ease-standard);
}
.sortant textarea:hover{border-color:var(--border-strong)}
.sortant textarea:focus{outline:none;border-color:var(--border-brand);box-shadow:var(--focus-ring)}
.sortant .compte-car{
  display:flex;justify-content:flex-end;gap:var(--space-2);
  font-size:var(--text-xs);color:var(--text-muted);margin-top:6px;
}
.sortant .compte-car.trop{color:var(--state-warning-ink);font-weight:var(--weight-semibold)}

/* Une pique se voit avant de partir. */
.avert-pique{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding:var(--space-3) var(--space-4);
  border:var(--border-hairline) solid var(--coral-200);
  background:var(--state-negative-soft);color:var(--state-negative-ink);
  border-radius:var(--radius-md);font-size:var(--text-sm);
}

/* La barre de commande. */
.commandes{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);
  border-top:var(--border-hairline) solid var(--border-subtle);
  position:sticky;bottom:0;background:var(--surface-card);
  border-radius:0 0 var(--radius-card) var(--radius-card);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px var(--space-5);border-radius:var(--radius-control);
  font-size:var(--text-sm);font-weight:var(--weight-bold);
}
/* L'ombre rose est réservée au bouton primaire. */
.btn-depart{background:var(--surface-brand);color:var(--text-inverse);box-shadow:var(--shadow-brand)}
.btn-depart:hover:not(:disabled){background:var(--rose-600)}
.btn-depart.arme{background:var(--state-negative);box-shadow:none}
.btn-depart.arme:hover:not(:disabled){background:var(--coral-600)}
.btn-depart:disabled{background:var(--ink-300);box-shadow:none;cursor:progress}
.btn-second{
  border:var(--border-hairline) solid var(--border-default);
  background:var(--surface-card);color:var(--text-strong);
}
.btn-second:hover:not(:disabled){background:var(--ink-100);border-color:var(--border-strong)}
.btn-second:disabled{color:var(--text-faint);cursor:progress}
.btn-annuler{color:var(--text-muted)}
.btn-annuler:hover:not(:disabled){background:var(--ink-100);color:var(--state-negative-ink)}
.commandes .pousse{flex:1}
.commandes .note{font-size:var(--text-xs);color:var(--text-muted);flex-basis:100%}

/* Lecture seule. */
.lecture{
  background:var(--surface-sunken);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);max-width:68ch;align-self:flex-end;
  font-size:var(--text-body);color:var(--text-body);
}
.constat{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-sm);color:var(--text-muted)}
.constat.incident{color:var(--state-negative-ink)}
.constat.attente-regen{color:var(--state-warning-ink)}
/* Les zones du pupitre restent dans le DOM et se masquent par [hidden] — leur
   display:flex l'emporterait sinon sur le display:none du navigateur. .echange
   ayant un gap, une zone vide mais affichée y creuserait un blanc. */
.echange > [hidden],.commandes[hidden]{display:none}
/* Indicateur de travail en cours : la charte interdit l'animation décorative
   en boucle, pas le témoin de chargement. C'est le spin du système. */
.pulsation{
  width:13px;height:13px;flex:none;border-radius:var(--radius-pill);
  border:2px solid currentColor;border-top-color:transparent;
  animation:rq-spin .9s linear infinite;
}

/* ---------- Toasts ----------
   Seule surface, avec les panneaux d'accroche, où l'encre-900 est admise.
   Ils s'affichent sous l'en-tête, jamais au-dessus de la barre de commandes :
   un message ne doit pas pouvoir recouvrir « Répondre ». Le conteneur laisse
   passer les clics ; seul le bouton d'un avis les capte. */
#avis{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(var(--h-entete,64px) + var(--space-3));
  z-index:60;display:flex;flex-direction:column;gap:var(--space-2);
  width:min(560px,calc(100vw - var(--space-4)*2));
  pointer-events:none;
}
.avis{
  pointer-events:auto;
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface-inverse);color:var(--text-inverse);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);font-size:var(--text-sm);
  box-shadow:var(--shadow-lg);
  animation:rq-rise var(--dur-base) var(--ease-entrance) both;
}
.avis.err{background:var(--coral-600)}
.avis .reprendre{
  margin-left:auto;flex:none;min-height:32px;padding:6px 12px;
  border-radius:var(--radius-pill);
  border:var(--border-hairline) solid rgba(255,255,255,.45);color:inherit;
  font-size:var(--text-xs);font-weight:var(--weight-bold);
  transition:background var(--dur-fast) var(--ease-standard);
}
.avis .reprendre:hover{background:rgba(255,255,255,.14)}

/* ---------- Adaptation ---------- */

/* Au bureau, c'est une console : deux colonnes à hauteur d'écran, chacune
   défilant chez elle. Rien d'important ne tombe sous la ligne de flottaison. */
@media(min-width:1081px){
  body.en-salle{height:100dvh;overflow:hidden}
  body.en-salle .quai{min-height:0;overflow:hidden}
  body.en-salle .board,body.en-salle .desk{height:100%;min-height:0}

  /* Au bureau, le rang des états se replie sur deux lignes au lieu de couper
     « Échecs » derrière un défilement horizontal que personne ne tente. */
  .rang{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none}
  .rang button{flex:1 1 auto;justify-content:center}
}

@media(max-width:1080px){
  .quai{grid-template-columns:1fr;padding:18px;gap:0}
  .board{position:static;max-height:none}
  .board.efface{display:none}
  .desk{display:none}
  .desk.ouvert{display:flex}

  /* Panneau ouvert : une hauteur d'écran, défilement interne. C'est le corps
     qui défile, jamais la page — la barre de commande est le dernier enfant
     flex, donc « Répondre » ne peut plus recouvrir le champ de réponse.
     Rogner du contenu au-dessus ne tenait pas : un commentaire long ramenait
     le problème. */
  .board.efface + .desk.ouvert{
    height:calc(100dvh - var(--h-entete,150px) - var(--space-5));
    min-height:0;
  }
  .board.efface + .desk.ouvert .commandes{position:static}
  .desk-retour{
    display:inline-flex;align-items:center;gap:6px;min-height:44px;
    margin:calc(var(--space-3) * -1) 0 calc(var(--space-3) * -1) calc(var(--space-3) * -1);
    padding:0 var(--space-3);
    font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);
  }
  .desk-retour:hover{color:var(--text-strong)}
  .commandes{
    position:sticky;bottom:0;
    padding-bottom:max(var(--space-4),env(safe-area-inset-bottom));
    box-shadow:0 -8px 20px -14px rgba(20,18,28,.5);
  }
  /* Une seule rangée de commandes : sur deux, la barre montait à 133 px et
     recouvrait le champ de réponse — on pouvait appuyer sur « Répondre »
     sans avoir lu ce qu'on envoyait. */
  .commandes{padding:var(--space-3) var(--space-4);gap:var(--space-2)}
  .commandes .pousse{display:none}
  .btn-depart{flex:2 1 0;order:-1;padding:11px var(--space-3)}
  .btn-second{flex:1 1 0;padding:11px var(--space-3)}
  .btn-annuler{flex:none;padding:11px var(--space-3)}
  .btn-annuler span{display:none}

  /* Ce qui précède le champ doit tenir : l'aide de correction du sentiment est
     de la pédagogie, pas de la décision, et le lien Instagram se suffit de son
     icône. */
  .jauge-sent .aide{display:none}
  .desk-tete .lien span{display:none}
  /* Trois rangées au maximum, ordonnées : titre + actualiser, puis le mode,
     puis l'état du service. Empilé librement, le fronton mangeait la moitié
     du premier écran et repoussait la liste sous la ligne de flottaison. */
  .fronton{padding:var(--space-3) 18px;gap:var(--space-2) var(--space-3)}
  .fronton .pousse{display:none}
  /* base 0, pas auto : sinon le nom du compte réserve toute la rangée et
     pousse « Actualiser » à la ligne suivante. Le compte s'élide. */
  .enseigne{flex:1 1 0;min-width:0;order:0;gap:var(--space-2)}
  /* La tuile suffit à porter la marque quand la place manque : le mot s'efface
     en premier, avant le titre, qui cède avant le compte. */
  .enseigne .marque-mot{display:none}
  .enseigne .marque-tuile{width:26px;height:26px}
  .enseigne .marque-tuile svg{width:17px;height:17px}
  /* Le titre cède avant le compte : on sait toujours sur quelle page on est,
     alors que le compte, lui, porte une commande. */
  .enseigne h1{font-size:var(--text-h3);min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* Ce bouton était une étiquette qu'on pouvait masquer ici. C'est devenu le
     SEUL accès à la bascule de compte et à la déconnexion : le cacher
     supprimerait la fonction sur mobile, or les deux scènes comptent. On le
     réduit à une pastille — quelques caractères et le chevron. */
  .compte-bloc{flex:0 0 auto}
  .enseigne .compte{
    max-width:15ch;border-left:0;
    padding:4px var(--space-2);border-radius:var(--radius-pill);
    background:var(--surface-sunken);
  }
  .menu-compte{left:auto;right:0;min-width:min(300px, calc(100vw - 36px))}
  .btn-sync{order:1;margin-left:auto}
  .seg{order:2;flex:1 1 100%}
  .rang-mode{flex:1 1 0;justify-content:center;text-align:center;padding:9px 8px}
  .creneaux{order:3}
  .lampes{order:4;margin-left:auto;gap:var(--space-2)}

  .quai-vue{padding:18px;gap:var(--space-5)}
  .barometre{grid-template-columns:1fr;padding:var(--space-4);gap:var(--space-3)}
  .tuiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3)}
  .tuile-legende{-webkit-line-clamp:3;min-height:0}

  /* Au téléphone, tout ce qui se touche fait 44 px, que le navigateur annonce
     un pointeur grossier ou non. */
  .rang-mode,.btn-sync,.sent,.avis .reprendre,.lien-tout,.btn-quai{min-height:44px}
  .rang button{min-height:48px}
  .ligne{min-height:60px}
  .desk-tete .lien,.contexte .plus,.ctx-lien,.saut{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .contexte .plus{margin-top:0}
  .corps{padding:var(--space-4);gap:var(--space-4)}
  .desk-tete{padding:var(--space-3) var(--space-4)}
  .bandeau{padding:var(--space-3) 18px}

  /* Au téléphone, la légende de la publication repoussait le champ de réponse
     et « Répondre » sous la ligne de flottaison : une décision coûtait un
     défilement par commentaire. Elle s'ouvre à la demande. */
  .contexte p{-webkit-line-clamp:1}
  .contexte.ouvert p{-webkit-line-clamp:unset}
}

/* Au doigt, tout ce qui se touche fait au moins 44 px. La densité du bureau
   n'a pas à payer pour ça : c'est la nature du pointeur qui décide. */
@media(pointer:coarse){
  .rang-mode,.btn-sync,.sent,.avis .reprendre,.desk-retour{min-height:44px}
  .rang button{min-height:48px}
  .ligne{min-height:60px}
  .desk-tete .lien,.contexte .plus,.saut{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .contexte .plus{margin-top:0}
  #avis{width:calc(100vw - var(--space-3)*2)}
}

/* ---------- Page rapport ----------
   Un écran de LECTURE : pas d'action, pas de file — des chiffres qui portent
   chacun leur comparaison. Le vert/rouge suit le sens souhaitable, pas le
   signe : un délai qui BAISSE est une bonne nouvelle. */
.carte-rapport{max-width:860px}
.rapport-tete{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
.heros{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--space-3);margin-bottom:var(--space-6)}
.hero-kpi{padding:var(--space-4);background:var(--surface-page);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-card)}
.hero-val{display:block;font-family:var(--font-display);font-size:var(--text-h1);
  font-weight:var(--weight-black);color:var(--text-strong);line-height:var(--lh-h1)}
.hero-titre{display:block;margin-top:2px;font-size:var(--text-sm);color:var(--text-muted)}
.delta{margin-left:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-bold)}
.delta.bon{color:var(--state-positive-ink)}
.delta.mauvais{color:var(--state-negative-ink)}
.delta.plat{color:var(--text-faint)}
.bloc-rapport{margin-bottom:var(--space-6)}
.bloc-rapport h2{font-size:var(--text-h3);margin-bottom:var(--space-3)}
#sparkline{display:block;width:100%;height:80px;margin-top:var(--space-3)}
/* Préfixées `rep-` : `.part` tout court est déjà pris par la légende du
   baromètre de l'accueil (plus haut dans ce fichier) — même sélecteur, plus
   bas dans la cascade, il l'écrasait silencieusement. */
.rep-part{display:block;height:10px}
.rep-jade{background:var(--jade-500)} .rep-ink{background:var(--ink-300)}
.rep-coral{background:var(--coral-500)}
#repartition{display:flex;gap:2px;border-radius:var(--radius-pill);overflow:hidden}
/* KPI score non fiable (échantillon trop mince) : la valeur reste affichée,
   mais sans delta — comparer un chiffre qu'on ne peut pas affirmer serait
   une mesure inventée sur une mesure inventée. */
.hero-note{display:block;font-size:var(--text-xs);color:var(--state-warning-ink)}
/* Un graphe plat à zéro est indiscernable d'une vraie mesure : quand aucun
   commentaire n'a de sentiment, on montre un message, pas un instrument. */
.sentiment-vide{padding:var(--space-3) 0;font-size:var(--text-sm);color:var(--text-muted)}
.duo-rapport{display:flex;gap:var(--space-3);flex-wrap:wrap}
.mini-kpi{flex:1 1 220px;padding:var(--space-3);background:var(--surface-page);
  border-radius:var(--radius-control);font-size:var(--text-sm)}
.colonnes-rapport{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media(max-width:640px){.colonnes-rapport{grid-template-columns:1fr}}
.liste-rapport{list-style:none;margin:0;padding:0}
.liste-rapport li{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) 0;border-bottom:var(--border-hairline) solid var(--border-subtle);
  font-size:var(--text-sm)}
.liste-rapport img{width:36px;height:36px;object-fit:cover;border-radius:var(--radius-sm)}
.liste-rapport .l-nom{font-weight:var(--weight-semibold);color:var(--text-strong)}
.liste-rapport .l-chiffres{margin-left:auto;color:var(--text-muted);text-align:right}
.liste-rapport .probleme{color:var(--state-negative-ink)}
.liste-rapport .creux{color:var(--text-faint);border:0}
.ia-bloc{margin-top:var(--space-4);padding:var(--space-3);
  background:var(--state-positive-soft);border-radius:var(--radius-control);
  font-size:var(--text-sm);color:var(--state-positive-ink)}
.rapport-vide{padding:var(--space-6);text-align:center;color:var(--text-muted)}

/* Sous 430 px, deux colonnes de tuiles écrasent la légende et font se toucher
   les métriques : une seule colonne, vignette à gauche, chiffres à droite. */
@media(max-width:430px){
  .tuiles{grid-template-columns:1fr}
  .tuile-clic{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch}
  .vignette{aspect-ratio:4/5;height:100%}
  .tuile-corps{padding:var(--space-3)}
  .tuile-legende{-webkit-line-clamp:2}
  .pastille-att{left:var(--space-1);right:auto;bottom:var(--space-1);padding:3px 7px}
  .marque-video{left:var(--space-1);top:var(--space-1);padding:3px 7px}
  .metriques{gap:var(--space-1) var(--space-3)}
  .expl-liste{grid-template-columns:1fr 1fr}
}

/* ---------- Marque CrowdManta ----------
   Le même lockup sur les trois écrans d'entrée et dans le fronton. Meta affiche
   « CrowdManta » sur l'écran d'autorisation Instagram : si l'outil ne porte pas
   ce nom, l'opérateur ne peut pas vérifier qu'il autorise la bonne application,
   et une demande de mot de passe anonyme ressemble à du hameçonnage. */
.marque{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}
.marque-tuile{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--rose-400),var(--rose-600));
  color:var(--text-inverse);box-shadow:var(--shadow-brand);
}
.marque-tuile svg{width:19px;height:19px}
.marque-mot{
  font-family:var(--font-display);
  font-size:var(--text-h3);line-height:1;
  font-weight:var(--weight-black);letter-spacing:var(--ls-h3);
  color:var(--text-strong);white-space:nowrap;
}
.marque-mot span{color:var(--text-brand)}
.marque-lien{display:inline-flex;text-decoration:none}
.marque-lien:hover{text-decoration:none}
.marque-lien:hover .marque-tuile{background:linear-gradient(135deg,var(--rose-500),var(--rose-700))}

/* Dans une carte d'entrée, le lockup prend sa propre ligne : en `inline-flex`,
   il se rangeait à côté du lien « Retour », et les deux se chevauchaient. */
.carte-connexion .marque{display:flex;margin-bottom:var(--space-5)}
.marque-xl{margin-bottom:var(--space-6)}
.marque-xl .marque-tuile{width:40px;height:40px;border-radius:var(--radius-md)}
.marque-xl .marque-tuile svg{width:25px;height:25px}
.marque-xl .marque-mot{font-size:var(--text-h2);letter-spacing:var(--ls-h2)}

/* ---------- Page de connexion ----------
   Une seule décision à l'écran : quel compte engager. Pas de fronton, pas
   d'indicateurs — rien qui laisse croire qu'il y a autre chose à faire ici. */
.page-connexion{display:block}
.connexion{
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;padding:var(--space-8) var(--gutter-app);
  /* Une lueur de marque, pas un décor : elle situe la page dans le produit
     sans entrer en concurrence avec le seul bouton qui compte. */
  background:
    radial-gradient(60rem 30rem at 50% -12rem, var(--rose-100), transparent 70%),
    var(--surface-page);
}
.carte-connexion{
  width:100%;max-width:430px;
  /* `justify-content:center` ne suffit pas ici : avec `width:100%`, l'élément
     occupe toute la ligne AVANT d'être rogné par `max-width`, il ne reste donc
     aucun espace libre à répartir et la carte se colle à gauche. La marge
     automatique, elle, s'applique après le rognage. */
  margin-inline:auto;
  padding:var(--space-8);
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);
}
.carte-connexion h1{
  font-size:var(--text-h2);font-weight:var(--weight-black);
  color:var(--text-strong);margin-bottom:var(--space-2);
}
.retour{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--space-5);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--text-muted);text-decoration:none;
}
.retour:hover{color:var(--text-strong)}
.carte-connexion .amorce{
  font-size:var(--text-sm);color:var(--text-muted);
  line-height:var(--lh-body);margin-bottom:var(--space-6);
}

.champ{display:block;margin-bottom:var(--space-4)}
.champ>span{
  display:block;margin-bottom:6px;
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-strong);
}
.champ input{
  width:100%;padding:11px var(--space-3);min-height:44px;
  font:inherit;font-size:var(--text-body);color:var(--text-strong);
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-control);
}
.champ input:focus-visible{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.champ input::placeholder{color:var(--text-faint)}

.btn-principal,.btn-secondaire{
  display:block;width:100%;min-height:44px;padding:11px var(--space-4);
  border-radius:var(--radius-control);
  font-size:var(--text-body);font-weight:var(--weight-semibold);
  transition:background var(--dur-fast) var(--ease-standard),
             transform var(--dur-instant) var(--ease-standard);
}
.btn-principal{background:var(--surface-brand);color:var(--text-inverse);box-shadow:var(--shadow-brand)}
.btn-principal:hover:not(:disabled){background:var(--rose-600)}
.btn-secondaire{
  background:var(--surface-card);color:var(--text-strong);
  border:var(--border-hairline) solid var(--border-default);
}
.btn-secondaire:hover:not(:disabled){background:var(--ink-100)}
.btn-principal:active:not(:disabled),.btn-secondaire:active:not(:disabled){transform:scale(var(--press-scale))}
.btn-principal:disabled,.btn-secondaire:disabled{cursor:progress;opacity:.7}

.carte-connexion .alerte{
  padding:var(--space-3);margin-bottom:var(--space-5);
  font-size:var(--text-sm);line-height:var(--lh-body);
  background:var(--state-negative-soft);color:var(--state-negative-ink);
  border:var(--border-hairline) solid var(--coral-200);
  border-radius:var(--radius-control);
}
.carte-connexion .alerte.douce{
  background:var(--state-positive-soft);color:var(--state-positive-ink);border-color:var(--jade-200);
}
.carte-connexion .alerte[hidden]{display:none}

/* Le repli porte désormais la connexion par mot de passe. Replié, et c'est le
   message : cette voie est contraire aux CGU d'Instagram et expose le compte —
   l'ouvrir doit être un geste délibéré, pas le chemin par défaut. */
.repli{margin-top:var(--space-5)}
.repli summary{
  display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  padding:var(--space-3);border-radius:var(--radius-control);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.repli summary::-webkit-details-marker{display:none}
.repli summary:hover{background:var(--surface-sunken);color:var(--text-strong)}
.repli[open] summary{color:var(--text-strong)}
.repli[open] summary .ico{transform:rotate(180deg)}
.repli summary .ico{flex:none;transition:transform var(--dur-fast) var(--ease-standard)}
.repli > :not(summary){animation:rq-rise var(--dur-base) var(--ease-entrance) both}
.repli #formIdentifiants{padding:0 var(--space-3)}

/* La voie officielle : c'est elle qu'on recommande, donc c'est elle qui occupe
   le haut de la carte et la couleur de marque. */
.voie-officielle .btn-principal{text-align:center;text-decoration:none;line-height:1.4}
.voie-officielle .btn-principal:hover{color:var(--text-inverse)}
.argument{
  display:flex;align-items:flex-start;gap:var(--space-2);
  margin-top:var(--space-4);padding:var(--space-3);
  background:var(--state-positive-soft);
  border-radius:var(--radius-control);
  font-size:var(--text-sm);color:var(--state-positive-ink);line-height:var(--lh-body);
}
.argument .ico{flex:none;width:16px;height:16px;margin-top:2px;stroke:currentColor}
.prerequis{
  margin-top:var(--space-3);
  font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);
}
.prerequis b{color:var(--text-body);font-weight:var(--weight-semibold)}

/* L'avertissement de la voie privée. Le rouge serait un cri : ce n'est pas une
   erreur, c'est un coût qu'on assume en connaissance de cause. */
.avertissement{
  display:flex;align-items:flex-start;gap:var(--space-2);
  margin:0 var(--space-3) var(--space-4);padding:var(--space-3);
  background:var(--state-warning-soft);
  border-radius:var(--radius-control);
  font-size:var(--text-sm);color:var(--state-warning-ink);line-height:var(--lh-body);
}
.avertissement .ico{flex:none;width:16px;height:16px;margin-top:2px;stroke:currentColor}

.separateur{
  display:flex;align-items:center;gap:var(--space-3);
  margin:var(--space-5) 0 0;
  font-size:var(--text-xs);color:var(--text-faint);text-transform:uppercase;
  letter-spacing:var(--ls-xs);
}
.separateur::before,.separateur::after{
  content:"";flex:1 1 0;height:1px;background:var(--border-subtle);
}

.carte-connexion .note{
  margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-faint);
  line-height:var(--lh-body);
}
.note-config{
  margin-bottom:var(--space-5);padding:var(--space-3);
  background:var(--surface-sunken);border-radius:var(--radius-control);
  color:var(--text-muted);
}
.note-config code{font-family:var(--font-mono);color:var(--text-body)}

/* Sortir d'une étape ne mérite pas un bouton : ça ne doit jamais concurrencer
   l'action qu'on est venu accomplir. */
.lien-discret{
  display:block;width:100%;margin-top:var(--space-3);padding:var(--space-2);
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--text-muted);
}
.lien-discret:hover{color:var(--text-strong)}

/* ---------- Profil de marque : onboarding et réglages ----------
   Mêmes champs, deux mises en scène. Le tunnel les donne en trois temps pour
   ne pas présenter quinze questions d'un coup ; les réglages les montrent tous,
   parce qu'on y vient corriger un point précis. */
.connexion-large{align-items:flex-start;padding-top:var(--space-10)}
.carte-large{max-width:640px}

.fil-etapes{
  display:flex;align-items:center;gap:var(--space-2);
  margin:0 0 var(--space-6);padding:0;list-style:none;
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-faint);
}
.fil-etapes li{display:flex;align-items:center;gap:6px;min-width:0}
.fil-etapes li + li::before{
  content:"";width:var(--space-4);height:1px;background:var(--border-subtle);
  margin-right:var(--space-2);
}
.fil-etapes span{
  display:grid;place-items:center;flex:none;width:22px;height:22px;
  border-radius:var(--radius-pill);
  background:var(--surface-sunken);color:var(--text-muted);
  font-size:var(--text-xs);font-family:var(--font-mono);
}
.fil-etapes .courante{color:var(--text-strong)}
.fil-etapes .courante span{background:var(--surface-brand);color:var(--text-inverse)}
.fil-etapes .faite{color:var(--text-muted)}
.fil-etapes .faite span{background:var(--state-positive-soft);color:var(--state-positive-ink)}

.etape{animation:rq-rise var(--dur-base) var(--ease-entrance) both}

.champ textarea,.champ select{
  width:100%;padding:11px var(--space-3);min-height:44px;
  font:inherit;font-size:var(--text-body);color:var(--text-strong);
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-control);
  resize:vertical;
}
.champ textarea:focus-visible,.champ select:focus-visible{
  border-color:var(--border-focus);box-shadow:var(--focus-ring);
}
.champ textarea::placeholder{color:var(--text-faint)}
/* Un champ manquant se signale sur le champ lui-même : le message en tête de
   page ne dit pas lequel, et c'est là que le regard est. */
.champ .manque,.champ input.manque,.champ textarea.manque{
  border-color:var(--state-negative);box-shadow:0 0 0 3px var(--state-negative-soft);
}
.aide{
  display:block;margin-top:6px;
  font-size:var(--text-xs);font-style:normal;color:var(--text-faint);
  line-height:var(--lh-body);
}
.requis{color:var(--text-brand)}

.duo{display:flex;gap:var(--space-3);flex-wrap:wrap}
.duo .champ{flex:1 1 140px;min-width:0}

.barre-etapes{
  display:flex;flex-direction:column-reverse;gap:var(--space-2);
  margin-top:var(--space-6);
}

.bloc{
  margin:0 0 var(--space-6);padding:var(--space-5);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:var(--surface-page);
}
.bloc legend{
  padding:0 var(--space-2);
  font-family:var(--font-display);font-size:var(--text-h3);
  font-weight:var(--weight-bold);color:var(--text-strong);
}
.bloc .champ:last-child{margin-bottom:0}

/* Le rappel qu'aucune réponse ne peut partir tant que le profil est vide. */
.band-profil{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);
  background:var(--state-warning-soft);color:var(--state-warning-ink);
  border-radius:var(--radius-control);
  font-size:var(--text-sm);
}
.band-profil a{color:inherit;font-weight:var(--weight-bold);text-decoration:underline}

@media(max-width:430px){
  .connexion{padding:var(--space-4);align-items:flex-start}
  .carte-connexion{padding:var(--space-5);border:0;box-shadow:none;background:transparent}
  .bloc{padding:var(--space-4)}
  .fil-etapes li:not(.courante) span + *{display:none}
}

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