/* =========================================================
   PROJET A — CARNET DE BORD
   Feuille des pages « Le projet » (index.html) et « Notre stack »
   (stack.html, générée par outils/generer-stack.py).
   ---------------------------------------------------------
   Ré-habillée le 25/09/2026 sur le modèle du « Dossier Reis » :
   bandeau vert sapin, citron, Bricolage Grotesque + Figtree,
   clair ET sombre.

   Toutes les couleurs et les polices viennent des jetons de
   assets/carnet.css (chargé AVANT cette feuille). Aucune couleur
   en dur ici : le sombre suit tout seul.

   ⚠️ Cette feuille est aussi chargée par crm.html, noms.html,
   selection.html et marketing.html (qui ont leur feuille par-dessus).
   Donc : les noms de classes ne bougent pas, les anciennes variables
   (--deep, --acid, --flame, --paper, --rule, --disp, --text, --label,
   --t-*, --s-*) restent vivantes, rebranchées sur les jetons, et les
   règles propres à la lecture (surligné, pastille) sont ciblées.
   ========================================================= */

:root {
  /* --- Anciennes variables, rebranchées sur les jetons du carnet ------
     (--surface, --surface-2, --ink, --ink-2, --ink-3, --mono viennent
     directement de carnet.css : on ne les redéfinit surtout pas.) */
  --paper:   var(--surface);   /* fond des panneaux posés sur la page */
  --rule:    var(--line);
  --deep:    var(--band);      /* À N'UTILISER QU'EN FOND */
  --deep-2:  var(--band-2);
  --acid:    var(--citron);    /* jamais en texte sur fond clair */
  --flame:   var(--negatif);

  /* Couleurs appelées en ligne dans le HTML du carnet */
  --rust:    var(--negatif);   /* « Ce qu'on ne dira jamais » */
  --sage:    var(--positif);   /* « Ce qu'on dit » */
  --paper-2: var(--ink-2);
  --paper-3: var(--ink-3);

  /* --- Familles ------------------------------------------------------ */
  --disp:  var(--display);
  --text:  var(--body);
  --label: var(--body);        /* s'emploie en 600, en capitales */
  --disp-ls: -0.015em;

  /* --- Échelle typographique : corps à 17 px -------------------------- */
  --t-mega: clamp(1.875rem, 1.1rem + 3.3vw, 3rem);        /* h1 du bandeau : 30 → 48 */
  --t-4xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-3xl:  clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --t-2xl:  1.5rem;
  --t-xl:   1.25rem;
  --t-lg:   1.125rem;
  --t-md:   1.0625rem;      /* 17 px — le corps */
  --t-base: 1.0625rem;
  --t-sm:   0.9375rem;      /* 15 px */
  --t-xs:   0.8125rem;
  --t-2xs:  0.75rem;        /* 12 px — plancher des libellés */

  /* --- Rythme (noms conservés : le HTML les appelle en ligne) --------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 18px;
  --s-5: 26px; --s-6: 36px; --s-7: 52px; --s-8: 72px;
  --s-9: 104px; --s-10: 144px;

  --radius:    12px;
  --radius-sm: 5px;
  --r:         12px;
  --measure:   68ch;
  --page:      1200px;
  --gutter:    clamp(16px, 4vw, 36px);
}

/* ---------------------------------------------------------
   Base — uniquement des jetons, rien de propre à une page
   --------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--carnet-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* filet pour les chemins de fichiers du catalogue */
}

h1, h2 {
  font-family: var(--display);
  line-height: 1.1;
  letter-spacing: var(--disp-ls);
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-weight: 800; }
h2 { font-weight: 700; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

strong, b { font-weight: 600; }
strong { color: var(--ink); }
em { font-style: italic; }

code {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.38em;
  color: inherit;
  overflow-wrap: anywhere;
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h3 {
  font-family: var(--body);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: clamp(32px, 4vw, 44px) 0 var(--s-3);
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  text-wrap: balance;
}
h3:first-child { margin-top: 0; }

/* Rubrique : le libellé qui coiffe un groupe de cartes. */
h4 {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--accent);
  margin: clamp(32px, 4vw, 44px) 0 var(--s-4);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--citron);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

ul, ol { padding-left: 1.2em; margin: 0 0 var(--s-4); max-width: var(--measure); }
li { margin-bottom: 6px; }
li::marker { color: var(--accent); }
li:last-child { margin-bottom: 0; }

/* Tableaux — sobres, chiffres alignés ; toujours dans une enveloppe
   défilante (.table-scroll) : jamais de débordement de page. */
.table-scroll {
  overflow-x: auto;
  margin: var(--s-5) 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 640px;
  font-variant-numeric: tabular-nums;
}
th, td { text-align: left; padding: 12px 16px; vertical-align: top; line-height: 1.5; }
th {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { color: var(--ink); border-bottom: 1px solid var(--line); }
td strong { color: var(--ink); }
td code { font-size: 0.88em; }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) {
  tbody tr:hover td { background: var(--surface-2); }
}

/* ---------------------------------------------------------
   Structure de page
   --------------------------------------------------------- */

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------
   LE BANDEAU — comme sur le Dossier Reis
   Collé sous la barre commune, vert sapin sur toute la largeur
   de la fenêtre, même depuis la colonne étroite (l'ombre portée
   pleine largeur ne crée aucun débordement horizontal).
   --------------------------------------------------------- */

.hero {
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
  color: var(--band-ink);
  padding: clamp(28px, 5vw, 48px) 0 clamp(24px, 4vw, 40px);
}

.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
  margin: 0 0 14px;
}
.hero .eyebrow { color: var(--citron); }

.hero h1 {
  font-family: var(--display);
  font-size: var(--t-mega);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--band-ink);
  max-width: 24ch;
  margin: 0 0 16px;
  text-wrap: balance;
}

.hero__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--band-ink-2);
  max-width: 62ch;
  margin: 0;
}
.hero__lead strong,
.hero__lead b { color: var(--band-ink); font-weight: 600; background: none; }
.hero a { color: var(--band-ink); text-decoration-color: var(--citron); }
.hero code { background: rgba(255, 255, 255, .1); color: var(--band-ink); }

/* La ligne de repères : dans le bandeau, sous un filet. */
.meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 28px;
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: 18px;
  border-top: 1px solid var(--band-line);
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band-ink-2);
}
.meta-row b {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--citron);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Sections — filet, surtitre, titre à pastille citron
   --------------------------------------------------------- */

.section {
  padding: clamp(28px, 4vw, 44px) 0 clamp(8px, 1.5vw, 16px);
  scroll-margin-top: var(--carnet-h);
}
.section:last-of-type { padding-bottom: clamp(24px, 4vw, 40px); }

.section__head {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

/* Le numéro devient un surtitre, au-dessus du titre. */
.section__num {
  display: block;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.section__head h2 {
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 36ch;
  text-wrap: balance;
}

/* La pastille citron devant chaque titre de section (modèle Reis). */
.section__head h2::before,
.sommaire__t::before,
.famille__t::before,
.rayon__t::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--citron);
  box-shadow: 0 0 0 2px var(--band);
  margin-right: 11px;
  vertical-align: 0.08em;
}

.section__sub {
  margin-top: 10px;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

/* Le gras de la PROSE est surligné citron — seulement dans le texte
   courant du carnet et de la stack, jamais dans les tableaux, les
   cartes, les boutons ni les bandeaux. */
.section__corps > p strong,
.section__corps > p b,
.section__corps > ul > li strong,
.section__corps > ol > li strong,
.section > p strong,
.section > ul > li strong,
.section > ol > li strong,
.section__sub strong,
.callout:not(.callout--ok) p strong,
.callout:not(.callout--ok) li strong,
.list-plain .v strong,
.sommaire__d strong,
.rayon__d strong {
  background: linear-gradient(transparent 56%, var(--surligne) 56%);
  padding: 0 2px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------
   Cartes et grilles
   --------------------------------------------------------- */

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  margin: var(--s-5) 0;
}
.grid--2    { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); }

.card {
  position: relative;
  min-width: 0;              /* une carte ne dicte jamais la largeur de sa piste */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px);
}

.card__title {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  text-wrap: balance;
}

.card__body {
  font-size: 1rem;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: var(--measure);
  line-height: 1.6;
}
.card__body:last-child { margin-bottom: 0; }
.card__body strong { color: var(--ink); }

.card__note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}
.card ul, .card ol { margin: 0 0 12px; font-size: 1rem; color: var(--ink-2); max-width: var(--measure); }
.card ul:last-child, .card ol:last-child { margin-bottom: 0; }
.card h3 { margin-top: 0; }

/* Carte numérotée : le chiffre reste grand, en accent. */
.card--num { padding-top: clamp(16px, 2vw, 22px); }
.card--num .num {
  display: block;
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Badges de statut
   --------------------------------------------------------- */

.badge {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.35;
  vertical-align: 0.12em;
  max-width: 100%;
  overflow-wrap: break-word;   /* certains libellés font une phrase entière */
}
.badge--ok      { background: var(--band);      color: var(--citron); box-shadow: inset 0 0 0 1px var(--band-line); }
.badge--hyp     { background: transparent;      color: var(--ink);    box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.badge--open    { background: var(--attention); color: var(--ground); }
.badge--neutral { background: var(--surface-2); color: var(--ink-2); }
.badge--sky     { background: var(--surface);   color: var(--ink-2);  box-shadow: inset 0 0 0 1px var(--line); }

/* ---------------------------------------------------------
   Listes clé / valeur
   --------------------------------------------------------- */

.list-plain { list-style: none; padding: 0; max-width: none; margin: var(--s-5) 0 0; }
.list-plain li {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding: 18px 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.list-plain li:last-child { border-bottom: 1px solid var(--line); }
.list-plain .k {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
  padding-top: 0.3em;
}
.list-plain .v { font-size: var(--t-md); color: var(--ink); max-width: var(--measure); }

/* ---------------------------------------------------------
   Encadrés
   · .callout         : carte simple
   · .callout--ok     : l'encadré « important », en vert sapin
                        (comme « L'idée d'Andrea » sur le Dossier Reis)
   · .callout--alert  : un point d'attention, teinté ambre
   --------------------------------------------------------- */

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 28px);
  margin: var(--s-5) 0;
}
.callout__label {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--accent);
  margin: 0 0 12px;
  max-width: none;
}
.section > .callout:first-child { margin-top: 0; }
.callout p { font-size: var(--t-md); color: var(--ink); max-width: var(--measure); }
.callout ul, .callout ol { font-size: var(--t-md); color: var(--ink); max-width: var(--measure); }

/* L'encadré « important » : l'aplat sapin. */
.callout--ok { background: var(--band); border-color: var(--band); color: var(--band-ink); }
.callout--ok .callout__label { color: var(--citron); }
.callout--ok p,
.callout--ok li,
.callout--ok em,
.callout--ok h3 { color: var(--band-ink); }
.callout--ok strong,
.callout--ok b,
.callout--ok h4 { color: var(--citron); }
.callout--ok h4 { border-bottom-color: var(--band-line); }
.callout--ok li::marker { color: var(--citron); }
.callout--ok a { color: var(--band-ink); text-decoration-color: var(--citron); }
.callout--ok code { background: rgba(255, 255, 255, .1); color: var(--band-ink); }
.callout--ok .table-scroll { background: transparent; border-color: var(--band-line); }
.callout--ok th { color: var(--band-ink-2); border-bottom-color: var(--band-line); }
.callout--ok td { color: var(--band-ink); border-bottom-color: var(--band-line); }
.callout--ok td strong { color: var(--citron); }
@media (hover: hover) {
  .callout--ok tbody tr:hover td { background: rgba(255, 255, 255, .05); }
}

/* Le point d'attention : une teinte ambre, jamais un aplat criard. */
.callout--alert {
  background: color-mix(in srgb, var(--attention) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--attention) 38%, var(--line));
}
.callout--alert .callout__label { color: var(--attention); }
.callout--alert li::marker { color: var(--attention); }
.callout--alert h3, .callout--alert h4 { color: var(--ink); }
.callout--alert h4 { border-bottom-color: var(--attention); }

/* Les badges posés dans l'aplat sapin sont retournés. */
.callout--ok .badge--ok { background: var(--citron); color: var(--on-citron); box-shadow: none; }
.callout--ok .badge--hyp,
.callout--ok .badge--sky,
.callout--ok .badge--neutral {
  background: transparent;
  color: var(--band-ink);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------
   Citations
   --------------------------------------------------------- */

.quote {
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--s-6) 0;
  padding: 22px 0 20px;
  max-width: 30ch;
  border-top: 4px solid var(--citron);
  border-bottom: 1px solid var(--line);
  text-wrap: balance;
}
.quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------------------------------------------------------
   Le tunnel — cinq blocs, la destination en sapin
   --------------------------------------------------------- */

.funnel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: var(--s-5) 0;
}
.funnel__step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px 22px;
}
.funnel__step:last-child { background: var(--band); border-color: var(--band); }
.funnel__step i {
  display: block;
  font-family: var(--display);
  font-style: normal;
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.funnel__step:last-child i { color: var(--citron); }
.funnel__step b { display: block; font-size: var(--t-lg); font-weight: 700; line-height: 1.3; margin-bottom: 8px; color: var(--ink); }
.funnel__step:last-child b { color: var(--band-ink); }
.funnel__step span { display: block; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.funnel__step:last-child span { color: var(--band-ink-2); }

/* ---------------------------------------------------------
   La frise du calendrier — la date en aplat sapin
   --------------------------------------------------------- */

.phases { display: grid; gap: 10px; margin: var(--s-5) 0; }

.phase {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.phase__when { background: var(--band); padding: 20px 20px 22px; }
.phase__when b {
  display: block;
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--citron);
  margin-bottom: 6px;
}
.phase__when span {
  display: block;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--band-ink-2);
}
.phase ul { margin: 0; padding: 18px 26px 18px 42px; max-width: none; }
.phase li { font-size: 1rem; color: var(--ink-2); max-width: var(--measure); }

/* =========================================================
   PAGE STACK — recherche, filtres, catalogue
   Écran dense : le texte du catalogue est à 16 px.
   ========================================================= */

.toolbar {
  position: sticky;
  top: var(--carnet-h);
  z-index: 40;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.toolbar__inner { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

.search {
  width: 100%;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search::placeholder { color: var(--ink-3); font-weight: 400; }
.search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* Les pastilles de filtre : même dessin que les onglets du Dossier Reis. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.1;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--band); border-color: var(--band); color: var(--band-ink); }

/* Bouton « tout déplier » : même famille, cadre plus marqué. */
.chip--tout { margin-left: 10px; border-color: var(--ink-3); color: var(--ink); }
.chip--tout[aria-pressed="true"] { background: var(--band); border-color: var(--band); color: var(--band-ink); }

.count {
  margin-left: auto;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.famille { margin-bottom: clamp(36px, 5vw, 56px); }
.famille[hidden] { display: none; }
.famille__t {
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.famille__d { font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); max-width: 62ch; margin: 0 0 22px; }

/* Les tiroirs du catalogue : des aplats sapin, fermés par défaut. */
.group { margin-bottom: 10px; scroll-margin-top: 150px; }
.group[open] { margin-bottom: 28px; }
.group[hidden] { display: none; }
.group__head {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  min-height: 56px;
  background: var(--band);
  border-radius: var(--radius);
  padding: 13px 18px;
  margin-bottom: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color .15s ease;
}
.group__head::-webkit-details-marker { display: none; }
.group__head:active { background: var(--band-2); }
.group__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.group__head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--band-ink);
  display: block;
}
.group__desc { font-size: var(--t-sm); line-height: 1.45; color: var(--band-ink-2); flex: 1; min-width: 220px; }
.group__head .count { margin-left: auto; color: var(--citron); font-size: 1.375rem; }

/* Le chevron : un simple chausson CSS, il pivote à l'ouverture. */
.group__chevron {
  width: 11px; height: 11px;
  margin-left: 6px;
  flex-shrink: 0;
  border-right: 2.5px solid var(--citron);
  border-bottom: 2.5px solid var(--citron);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.group[open] > .group__head .group__chevron { transform: rotate(225deg) translate(-3px, -3px); }

/* Fermé, l'en-tête ne doit pas traîner une marge dans le vide. */
.group:not([open]) > .group__head { margin-bottom: 0; }
.group__corps { padding-top: 4px; }

/* Une entrée du catalogue : le nom à gauche, ce qu'il fait à droite. */
.entry {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 6px 22px;
  padding: 14px 18px;
  border-radius: 10px;
  align-items: start;
  transition: background-color .15s ease;
}
.entry:nth-of-type(odd) { background: var(--surface); }
.entry[hidden] { display: none; }
.entry__head  { grid-column: 1; grid-row: 1 / span 2; }
.entry__what,
.entry__say   { grid-column: 2; }

/* L'en-tête d'entrée reste en COLONNE : le nom, les étiquettes, le compteur.
   En ligne, « optimiseur-perf » se cassait en trois. */
.entry__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }

/* Un nom d'outil ne se coupe pas. */
.entry__name {
  display: block;
  max-width: 100%;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry__what { font-size: 1rem; color: var(--ink-2); margin: 0 0 8px; max-width: 72ch; line-height: 1.55; }
.entry__say { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: var(--t-sm); line-height: 1.5; }
.entry__say .lab {
  font-family: var(--body);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
/* On neutralise les guillemets automatiques du navigateur (sinon seul le
   premier en porte) et on sépare proprement au point médian. */
.entry__say q { color: var(--accent); font-weight: 600; quotes: none; }
.entry__say q::before, .entry__say q::after { content: ""; }
.entry__say q + q::before { content: " · "; color: var(--ink-3); font-weight: 400; }

/* Le compteur d'usage sur chaque entrée */
.entry__usage {
  font-family: var(--body);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.entry__usage b {
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink);
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}
.entry__usage--fort b { color: var(--accent); }
.entry__usage--zero { color: var(--ink-3); font-style: normal; }

/* Bouton « Finder » : petit à l'œil, mais la zone de tap est agrandie. */
.entry__ouvrir {
  position: relative;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.entry__ouvrir::after { content: ""; position: absolute; inset: -9px -6px; }
.entry__ouvrir:active { background: var(--band); border-color: var(--band); color: var(--citron); }

.empty {
  padding: clamp(40px, 7vw, 72px) 0;
  font-family: var(--display);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.empty[hidden] { display: none; }

/* Le rayon « ce qui sert vraiment » — rempli par l'usage réel. */
.rayon { margin-bottom: clamp(40px, 6vw, 64px); }
.rayon__head { margin-bottom: 18px; }
.rayon__t {
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rayon__d { font-size: var(--t-sm); color: var(--ink-2); margin: 0; max-width: 76ch; }
.rayon__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.rayon__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: baseline;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease;
}
.rayon__item:active { background: var(--band); border-color: var(--band); }
.rayon__n {
  grid-row: 1 / 3;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rayon__nom {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rayon__mot {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rayon__item:active .rayon__n { color: var(--citron); }
.rayon__item:active .rayon__nom { color: var(--band-ink); }
.rayon__item:active .rayon__mot { color: var(--band-ink-2); }

/* Le journal des changements de la stack */
.chgts { list-style: none; margin: 0; padding: 0; max-width: none; }
.chgts li {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.chgts li:last-child { border-bottom: 0; }
.chgt__date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chgt__faits { display: flex; flex-wrap: wrap; gap: 8px; }
.chgt {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid;
}
.chgt i {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chgt--plus  { color: var(--positif); border-color: color-mix(in srgb, var(--positif) 45%, transparent); background: color-mix(in srgb, var(--positif) 8%, transparent); }
.chgt--moins { color: var(--negatif); border-color: color-mix(in srgb, var(--negatif) 45%, transparent); background: color-mix(in srgb, var(--negatif) 8%, transparent); }

/* Le message éphémère du bouton « Finder » */
.souffle {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(14px);
  z-index: 90;
  background: var(--band);
  color: var(--citron);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.souffle.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.souffle--erreur { background: var(--negatif); color: var(--ground); }

/* =========================================================
   NAVIGATION DU CARNET — page « Le projet »
   La barre du document se pose SOUS la barre commune et
   n'apparaît qu'au défilement : elle ne prend aucune place
   au-dessus du bandeau.
   ========================================================= */

.docbar {
  position: fixed;
  /* Le script de la page pose « top:0 » en ligne (il cherchait l'ancien
     en-tête) : on force la hauteur réelle de la barre commune. */
  top: var(--carnet-h) !important;
  left: 0;
  right: 0;
  z-index: 45;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.docbar.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.docbar__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
}

.docbar__nav { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 260px; }
.docbar__lab {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}

/* Le sélecteur de section, habillé maison */
#sommaire {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 36px 8px 16px;
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .15s ease;
}
#sommaire:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Les trois compteurs : le cadre est neutre, seul le nombre porte le statut. */
.docbar__stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.stat b {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 800;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.stat--ok b   { color: var(--positif); }
.stat--hyp b  { color: var(--ink); }
.stat--open b { color: var(--attention); }
.stat:active,
.stat--encours { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }

/* Sections repliables — ouvertes par défaut, c'est un document qu'on lit */
.section__head--pliable {
  display: block;
  position: relative;
  padding-right: 48px;
  cursor: pointer;
  user-select: none;
}
.section__head--pliable:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }

.section__chevron {
  position: absolute;
  top: 28px;
  right: 10px;
  width: 11px; height: 11px;
  margin: 0;
  border-right: 2.5px solid var(--ink-3);
  border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(225deg);
  transition: transform .2s ease, border-color .15s ease;
}
.section.is-replie .section__chevron { transform: rotate(45deg); }
.section.is-replie .section__corps { display: none; }
.section.is-replie .section__head { margin-bottom: 0; }
.section.is-replie .section__sub { margin-bottom: 0; }
.section.is-replie { padding-bottom: 0; }

/* Le badge qu'on vient d'atteindre clignote une fois, discrètement */
.badge--vise { animation: vise 1.6s ease; scroll-margin-top: 140px; }
@keyframes vise {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--attention) 30%, transparent); }
}

/* Parcours des décisions : le bloc visé reste marqué jusqu'au clic suivant. */
.est-vise {
  position: relative;
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px var(--vise-c, var(--attention));
  scroll-margin-top: 150px;
  scroll-margin-bottom: 80px;
}
.vise--ok   { --vise-c: var(--positif); }
.vise--hyp  { --vise-c: var(--ink-2); }
.vise--open { --vise-c: var(--attention); }

.vise__ruban {
  position: absolute;
  top: -13px;
  left: 14px;
  z-index: 2;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--vise-c, var(--attention));
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Une ligne de tableau ne peut pas porter d'ombre : on colore le fond. */
tr.est-vise { box-shadow: none; }
tr.est-vise td { background: color-mix(in srgb, var(--vise-c, var(--attention)) 12%, transparent); }
tr.est-vise .vise__ruban { display: none; }

/* Retour en haut */
.haut {
  position: fixed;
  right: var(--s-5);
  bottom: 94px;
  z-index: 60;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transition: background-color .15s ease, transform .15s ease;
}
.haut:active { transform: scale(.96); }

/* =========================================================
   LE SOMMAIRE — table des matières en tête de document
   Le chiffre de droite dit combien de décisions attendent
   dans la section. Lecture verticale, colonne après colonne.
   ========================================================= */

.sommaire { margin: clamp(28px, 4vw, 44px) 0 clamp(8px, 2vw, 16px); padding-top: 18px; border-top: 1px solid var(--line); }
.sommaire__head { margin-bottom: 18px; }
.sommaire__t {
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ink);
}
.sommaire__d { font-size: var(--t-sm); color: var(--ink-2); margin: 0; max-width: 60ch; }

.sommaire__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: block;
  columns: 2;
  column-gap: var(--s-7);
  column-fill: balance;
}
.sommaire__item {
  margin: 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.sommaire__lien {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 30px;
  align-items: start;
  gap: var(--s-3);
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .15s ease, padding-left .15s ease;
}
.sommaire__lien:active { background: var(--surface-2); }

.sommaire__num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--accent);
  white-space: nowrap;
}
.sommaire__titre {
  display: block;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.sommaire__sous {
  display: block;
  margin-top: 3px;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink-2);
}
.sommaire__att {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  color: var(--ground);
  background: var(--attention);
  border-radius: 999px;
  padding: 2px 0;
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}
.sommaire__att--vide { background: none; }

/* =========================================================
   LE REPÈRE LATÉRAL — un trait par section, fixe à droite.
   Il reste au milieu de la fenêtre, loin de la barre commune.
   ========================================================= */

.reperes {
  position: fixed;
  right: 18px;
  top: calc(50% + var(--carnet-h) / 2);
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-end;
  padding: 6px 0;
}

.repere {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 3px 0;
  cursor: pointer;
}

.repere__trait {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  transition: width .22s ease, background-color .22s ease;
  flex-shrink: 0;
}
.repere.is-actif .repere__trait { width: 34px; background: var(--accent); height: 3px; }

.repere__bulle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--band);
  color: var(--band-ink);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  max-width: 44vw;
  overflow: hidden;
}
.repere:focus-visible .repere__bulle { opacity: 1; transform: translateX(0); }

.repere__n {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--citron);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.repere__titre {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.repere:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Sur écran étroit ou tactile il n'y a pas la place (ni de survol) :
   le menu de la barre du document suffit. */
@media (max-width: 1180px), (hover: none) {
  .reperes { display: none; }
}

/* Le bouton « haut » ne doit pas percuter la réglette. */
@media (min-width: 1181px) {
  .haut { right: 74px; }
}

/* RÉGLETTE DÉPLOYÉE — les titres visibles en permanence, dans un panneau,
   sous la barre du document et au-dessus des boutons flottants. */
@media (min-width: 1720px) {
  body.a-reglette .reperes {
    top: calc(var(--carnet-h) + 76px);
    transform: none;
    right: 26px;
    gap: 0;
    align-items: stretch;
    max-height: calc(100vh - var(--carnet-h) - 76px - 170px);
    overflow-y: auto;
    scrollbar-width: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  }
  .reperes::-webkit-scrollbar { display: none; }

  .repere {
    flex-direction: row-reverse;   /* le trait passe à gauche */
    justify-content: flex-end;
    align-items: flex-start;
    gap: 11px;
    padding: 7px 0;
    width: 214px;
  }
  .repere .repere__bulle { flex: 1; text-align: left; }

  .repere__bulle {
    opacity: 1;
    transform: none;
    background: none;
    color: var(--ink-2);
    padding: 0;
    border-radius: 0;
    white-space: normal;
    max-width: none;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    transition: color .15s ease;
  }

  .repere__n { color: var(--ink-3); font-size: 0.6875rem; }
  .repere__titre {
    font-size: 0.75rem;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .repere__trait {
    width: 2px;
    height: 15px;
    margin-top: 3px;
    background: transparent;
    transition: background-color .2s ease, height .2s ease;
  }

  .repere.is-actif .repere__trait { width: 3px; height: 100%; background: var(--accent); margin-top: 0; }
  .repere.is-actif .repere__bulle { color: var(--ink); }
  .repere.is-actif .repere__n { color: var(--accent); font-weight: 700; }
  .repere.is-actif .repere__titre { font-weight: 700; -webkit-line-clamp: 3; }

  .haut { right: 26px; bottom: 94px; }
}

@media (min-width: 1800px) {
  body.a-reglette .reperes { right: 48px; }
  .repere { width: 248px; }
  .repere__titre { font-size: 0.8125rem; }
  .haut { right: 48px; }
}

/* =========================================================
   L'ASSISTANT DU CARNET — bulle citron et panneau
   ========================================================= */

.chat-bulle {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 100;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--citron);
  color: var(--on-citron);
  font-family: var(--body);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chat-bulle:active { transform: scale(.95); }
.chat-bulle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chat-bulle__ouvert { display: none; font-size: 20px; line-height: 1; }
.chat-bulle__ferme { display: grid; place-items: center; }
body.chat-est-ouvert .chat-bulle__ouvert { display: block; }
body.chat-est-ouvert .chat-bulle__ferme { display: none; }

.chat-panneau {
  position: fixed;
  right: 26px;
  bottom: 94px;
  z-index: 99;
  width: min(396px, calc(100vw - 52px));
  /* jamais par-dessus la barre commune */
  max-height: min(600px, calc(100vh - var(--carnet-h) - 94px - 20px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}
body.chat-est-ouvert .chat-panneau { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.chat-tete {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 14px 18px;
  background: var(--band);
  color: var(--band-ink);
}
.chat-tete__t {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 1;
}
.chat-tete__vider {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--band-ink-2);
  background: none;
  border: 1px solid var(--band-line);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.chat-tete__vider:active { color: var(--citron); border-color: var(--citron); }

.chat-fil {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.chat-msg {
  font-size: var(--t-sm);
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 13px;
  max-width: 88%;
}
.chat-msg code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: color-mix(in srgb, currentColor 12%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  color: inherit;
}
.chat-msg--bot { background: var(--surface-2); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg--moi { background: var(--band); color: var(--band-ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg--erreur { background: color-mix(in srgb, var(--negatif) 12%, transparent); color: var(--negatif); }
.chat-msg--attente { opacity: .55; letter-spacing: 3px; }

.chat-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-2); }
.chat-sugg {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.chat-sugg:active { border-color: var(--accent); color: var(--ink); }

.chat-forme {
  display: flex;
  gap: var(--s-2);
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat-champ {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  font-family: var(--body);
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
}
.chat-champ::placeholder { color: var(--ink-3); }
.chat-champ:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.chat-envoi {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--band);
  color: var(--citron);
  font-family: var(--body);
  font-size: 17px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.chat-envoi:active { background: var(--band-2); }

/* ---------------------------------------------------------
   Survols — seulement là où il y a une souris. Chaque effet
   a son équivalent au doigt (:active) plus haut.
   --------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--ink-2); color: var(--ink); }
  .chip[aria-pressed="true"]:hover { color: var(--band-ink); }
  .entry:hover { background: var(--surface-2); }
  .entry__ouvrir:hover { background: var(--band); border-color: var(--band); color: var(--citron); }
  .group__head:hover { background: var(--band-2); }
  .rayon__item:hover { background: var(--band); border-color: var(--band); }
  .rayon__item:hover .rayon__n { color: var(--citron); }
  .rayon__item:hover .rayon__nom { color: var(--band-ink); }
  .rayon__item:hover .rayon__mot { color: var(--band-ink-2); }
  #sommaire:hover { border-color: var(--ink-2); }
  .stat:hover { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
  .stat--ok:hover   { border-color: var(--positif); }
  .stat--open:hover { border-color: var(--attention); }
  .section__head--pliable:hover .section__chevron { border-color: var(--accent); }
  .sommaire__lien:hover { background: var(--surface-2); padding-left: var(--s-4); }
  .haut:hover { background: var(--surface-2); transform: translateY(-2px); }
  .repere:hover .repere__trait { width: 28px; background: var(--ink-2); }
  .repere:hover .repere__bulle { opacity: 1; transform: translateX(0); }
  .chat-bulle:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .26); }
  .chat-tete__vider:hover { color: var(--citron); border-color: var(--citron); }
  .chat-sugg:hover { border-color: var(--accent); color: var(--ink); }
  .chat-envoi:hover { background: var(--band-2); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1720px) {
  .repere:hover .repere__trait { width: 2px; background: var(--line); }
  .repere:hover .repere__bulle { color: var(--ink); }
}

/* ---------------------------------------------------------
   Pied de page
   --------------------------------------------------------- */

.site-foot {
  background: var(--band);
  color: var(--band-ink-2);
  margin-top: clamp(48px, 8vw, 104px);
  padding: 32px 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-foot .wrap { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* Les grands chiffres du tableau de bord du CRM. */
.chiffre {
  font-family: var(--display);
  font-size: var(--t-4xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink-3);
  margin: var(--s-3) 0 var(--s-2);
  font-variant-numeric: tabular-nums;
}
.card:hover .chiffre { color: var(--ink); }
.onglet[hidden] { display: none; }

/* Le journal du carnet porte la date ET l'heure : la colonne s'élargit. */
#journal .list-plain .k { min-width: 180px; }

/* =========================================================
   Responsive — on passe en colonne dès la tablette
   ========================================================= */

@media (max-width: 1023px) {
  .grid, .grid--2, .grid--wide { grid-template-columns: minmax(0, 1fr); }
  .funnel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .phase { grid-template-columns: minmax(0, 1fr); }
  .phase__when { padding-bottom: 18px; }
  .phase ul { padding: 18px 20px 18px 38px; }
  .list-plain li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .list-plain .k { padding-top: 0; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .entry__head { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
  .entry__what, .entry__say { grid-column: 1; }
  .entry__name { min-width: 0; flex: 0 1 auto; }
  .meta-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .docbar__nav { min-width: 100%; }
  .docbar__stats { flex: 1; }
  .stat { flex: 1; }
}

@media (max-width: 900px) {
  .sommaire__liste { columns: 1; }
}

@media (max-width: 700px) {
  .chgts li { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 640px) {
  :root { --s-8: 48px; --s-9: 60px; }
  .funnel { grid-template-columns: minmax(0, 1fr); }
  .toolbar { position: static; }
  .group { scroll-margin-top: 0; }
  .filters .count { margin-left: 0; width: 100%; }
  .chip--tout { margin-left: 0; }
  /* Le tiroir : titre, compteur et chevron sur la première ligne, la description dessous. */
  .group__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 16px;
  }
  .group__head h3 { grid-column: 1; grid-row: 1; }
  .group__head .count { grid-column: 2; grid-row: 1; margin-left: 0; }
  .group__chevron { grid-column: 3; grid-row: 1; margin-left: 0; }
  .group__desc { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .card, .callout { padding: 18px 16px; }
  .entry { padding: 14px 14px; }
  .card--num .num { font-size: 2.5rem; }
  .quote { max-width: none; }
  .list-plain li { padding: 14px 0; }
  #journal .list-plain .k { min-width: 0; }
  .sommaire__lien { grid-template-columns: 64px minmax(0, 1fr) 28px; }
}

/* MOBILE — rendre la page à la lecture : sur téléphone, la barre du
   document ne garde que le sélecteur de section. */
@media (max-width: 700px) {
  .docbar__inner { padding: 8px 16px; gap: 8px; flex-wrap: nowrap; }
  .docbar__nav { min-width: 0; width: 100%; gap: 8px; }
  .docbar__lab { display: none; }
  #sommaire { font-size: 0.875rem; padding: 8px 32px 8px 14px; }
  .docbar__stats,
  .docbar .chip--tout { display: none; }

  /* Les deux boutons flottants ne doivent pas se marcher dessus. */
  .haut { width: 40px; height: 40px; font-size: 17px; right: 14px; bottom: 76px; }
  .chat-bulle { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .chat-panneau {
    right: 14px;
    bottom: 76px;
    width: calc(100vw - 28px);
    max-height: calc(100vh - var(--carnet-h) - 76px - 16px);
  }
}

/* ---------------------------------------------------------
   Mouvement réduit
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .badge--vise { animation: none; }
}

/* ---------------------------------------------------------
   Impression
   --------------------------------------------------------- */
@media print {
  body { font-size: 11pt; }
  .docbar, .toolbar, .site-foot, .haut, .reperes, .chat-bulle, .chat-panneau, .souffle { display: none; }
  .card, .callout, .funnel__step, .phase, .entry { break-inside: avoid; }
}