/* Blitztouch : les polices, servies par le front lui-même (licence OFL, voir polices/), et quelques ajouts à bundle.css,
   qui reste tel que la maquette l'a produit. */

@font-face { font-family: "Instrument Sans"; src: url("polices/instrument-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("polices/instrument-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("polices/instrument-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("polices/instrument-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("polices/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("polices/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

html, body { margin: 0; background: var(--surface-50); }
.as-app { min-height: 100vh; }

/* Un bouton d'action est un petit formulaire (POST) : il reste en ligne, comme un bouton seul. */
form.en-ligne { display: inline-flex; margin: 0; }
/* Le formulaire d'une étape garde l'écart de la maquette entre ses blocs. */
form.etape { display: flex; flex-direction: column; gap: 24px; margin: 0; }

/* Le message laissé par l'action précédente, en haut de la page. */
.bandeau { margin-bottom: 16px; }
.as-notice--failed { background: var(--status-failed-bg); color: var(--status-failed-ink); }

/* Les liens qui ont l'air de boutons. */
a.as-btn, a.as-tab { text-decoration: none; }
a.as-tab { color: inherit; }

/* Le rail : une étape faite ou en cours se rouvre d'un clic. C'est un lien, habillé comme le bouton de la maquette
   (mêmes règles que « .ri button » dans bundle.css). */
.ri > a, .ri > .ri__lien { position: relative; width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 8px 10px 0; color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-sm); }
.ri--done > a:hover { background: var(--surface-100); }
.ri--done > a:hover .ri__edit, .ri--done > a:focus-visible .ri__edit { opacity: 1; }
.ri[aria-current="step"] > a { background: var(--surface-100); }
@media (max-width: 1100px) { .ri > a, .ri > .ri__lien { grid-template-columns: 24px minmax(0, 1fr); } }

/* « Aujourd'hui » : le nombre de décisions dans la barre, le résumé, les cartes (spec du 10/10/2026). */
.as-nav__item .as-count { margin-left: auto; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12px; }
.as-nav__item { display: flex; align-items: center; gap: 8px; }
.resume-file { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.carte-decision .t { font-weight: 600; }
.carte-decision .citation { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 12px; color: var(--ink-muted); }
.carte-decision .recue { display: flex; flex-direction: column; gap: 4px; }
.carte-decision .as-editor__text { width: 100%; min-height: 140px; resize: vertical; font: inherit; border: 0; background: transparent; color: inherit; }
.carte-decision .creneaux { display: flex; flex-wrap: wrap; gap: 6px; }
.carte-decision .creneau { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12px; padding: 3px 8px; border-radius: var(--radius-sm, 4px); background: var(--status-planned-bg); color: var(--status-planned-ink); }
.carte-decision .secondaires { padding: 0 24px 16px; gap: 8px; align-items: center; flex-wrap: wrap; }
.carte-decision .faits { margin: 8px 0 0; padding-left: 18px; }
details.definitif, details.corriger { display: inline-block; }
details.definitif > summary, details.corriger > summary { list-style: none; cursor: pointer; }
details.definitif > summary::-webkit-details-marker, details.corriger > summary::-webkit-details-marker { display: none; }
details.definitif[open] > summary, details.corriger[open] > summary { margin-bottom: 6px; }
/* « Supprimer » d'une brique de « Campagnes » : à droite du pied ; ouvert, il prend toute la largeur. */
.as-card__foot details.definitif { margin-left: auto; }
.as-card__foot details.definitif[open] { flex-basis: 100%; margin-left: 0; }
.as-card__foot details.definitif p { margin: 0 0 8px; }
/* « Ajouter quelqu'un par son adresse LinkedIn », sous la liste d'une piste (étape 4). */
.ajout-adresse { margin-top: 12px; }
.ligne-lot { display: grid; grid-template-columns: 20px minmax(0, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* Étape 3 : le nom d'une piste active, dans la barre de l'encart, finit par « … » s'il est trop long. */
.capbar .capbar__nom { display: block; padding: 0; border-radius: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Les objectifs : de vrais boutons radio, cachés, sous l'habit des boutons de la maquette. */
.segb input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segb:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.segb:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* « Modifier » ouvre la zone de saisie sur place (details/summary, sans JavaScript). */
details.modifier > summary { list-style: none; cursor: pointer; }
details.modifier > summary::-webkit-details-marker { display: none; }
details.modifier[open] > summary { margin-bottom: 8px; }
details.repli > summary { list-style: none; cursor: pointer; }
details.repli > summary::-webkit-details-marker { display: none; }

/* Le texte des personnes et de l'IA garde ses retours à la ligne. */
.texte-libre { white-space: pre-line; }

/* La fenêtre « L'IA réfléchit… » : par-dessus tout, tant que l'action tourne. */
.attente[hidden] { display: none; }
.attente .scrim, .attente .sheet { z-index: 50; }
.attente .sheet { width: min(440px, calc(100% - 32px)); }

/* La fenêtre de lancement, et ses deux voiles. */
.sheet { z-index: 40; }
.scrim { z-index: 30; }
a.scrim { display: block; }

/* « Suivi » (spec 2026-10-10-front-suivi-campagnes-design.md) */
.titre-section { font-size: 17px; line-height: 24px; font-weight: 600; margin-top: var(--space-4); }
.sous-titre { font-size: 15px; font-weight: 600; }
.ligne-rdv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px var(--space-6); border-bottom: 1px solid var(--line); }
.ligne-rdv:last-child { border-bottom: 0; }
.as-sel .veille { margin-top: 4px; }
.tableau-defile { overflow-x: auto; }
table.tableau { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tableau th { text-align: left; font-weight: 600; background: var(--surface-100); color: var(--ink-muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tableau td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
a.newcamp, a.newcamp:hover { text-decoration: none; }
.lignes-suivi .as-sel { grid-template-columns: 40px minmax(0, 220px) 190px minmax(0, 1fr) 44px; }
/* Analyse UX du 21/10/2026 (chantier 7) : une section repliable par campagne ; sur un petit écran, la ligne se plie. */
.suivi-campagne__tete { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.suivi-campagne__tete::-webkit-details-marker { display: none; }
.suivi-campagne__tete .pli { font-size: 17px; line-height: 24px; color: var(--ink); }
.suivi-campagne[open] > .suivi-campagne__tete .pli::before { transform: rotate(45deg); }
.suivi-campagne > .as-card { overflow: visible; }
@media (max-width: 860px) {
  .lignes-suivi .as-sel { grid-template-columns: 40px minmax(0, 1fr) 44px; row-gap: 6px; }
  .lignes-suivi .as-sel > :nth-child(3), .lignes-suivi .as-sel > :nth-child(4) { grid-column: 2 / 4; }
  .lignes-suivi .as-sel > .menu-ligne { grid-column: 3; grid-row: 1; }
}
.lignes-suivi details.definitif > summary { white-space: nowrap; }
table.tableau th { white-space: normal; vertical-align: bottom; }
table.tableau th:first-child, table.tableau td:first-child { min-width: 200px; }

/* La page de connexion (spec 2026-10-10-front-connexions-design.md) : une carte seule, au milieu de l'écran. */
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--surface-50); }
.carte-connexion { width: 100%; max-width: 400px; }
.carte-connexion h1 { margin: 8px 0 0; font-size: 24px; line-height: 32px; }
.bouton-google { justify-content: center; gap: 10px; width: 100%; }
/* Lot 11b : l'arrivée obligatoire (maquette 2). */
.carte-bienvenue { width: 100%; max-width: 520px; }
.carte-bienvenue h1 { margin: 8px 0 0; font-size: 24px; line-height: 32px; }
.etapes-arrivee { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.etapes-arrivee li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pied-arrivee { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
/* Lot 11b : le compte connecté, en bas de la barre de gauche (maquettes 3 et 4). */
.compte-connecte { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-1) 0; border-top: 1px solid var(--line); }
.compte-connecte__nom { font-weight: 600; }
.compte-connecte__email { overflow-wrap: anywhere; }
/* « Réglages » : les deux cartes, l'une sous l'autre ; les formulaires du mot de passe, étroits. */
.reglages { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.formulaire-reglage { gap: 10px; max-width: 420px; }
/* Lot 11a : poser un rendez-vous à une autre heure (A4) */
.rdv-autre{margin-top:8px}
.rdv-autre__form{align-items:flex-end;gap:10px;margin-top:8px}
.rdv-autre__form p{flex-basis:100%;margin:0}
.heure-locale{align-self:center}
/* Lot 11a : l'historique de la conversation (A3) */
.conversation{margin-top:8px}
.fil{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.fil__message{padding:8px 10px;border-radius:var(--radius-md);background:var(--surface-50);border:1px solid var(--line)}
.fil__message--toi{background:var(--surface-0);border-color:var(--line-strong)}
/* Lot 11a : le nom d'une personne mène à son profil LinkedIn (A6) */
.lien-profil{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px}
.lien-profil:hover{color:var(--brand);text-decoration-color:currentColor}
/* Lot 11a : le nombre de caractères d'un texte à valider (A7) */
.as-editor__bar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.caracteres{font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.caracteres.hors{color:var(--status-validate-ink);font-weight:600}
/* Lot 11a : « Chercher maintenant » sur la ligne « Veille » (A11) */
.lecture{margin-top:4px;align-items:center;gap:8px}
.lecture--ratee{color:var(--status-failed-ink)}
/* Relecture finale du Lot 11a : l'avis du critique sur une ligne d'un lot */
.alerte-critique{display:block;font-weight:600;color:var(--status-validate-ink)}

/* 12/10/2026 : le ciblage relu par Haiku — la note sur 10 prend la couleur de sa famille, le relevé et le bandeau. */
.as-score.note-cible { color: var(--status-accepted-ink); }
.as-score.note-verifier { color: var(--status-validate-ink); }
.as-score.note-hors { color: var(--status-failed-ink); }
.releve { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.bandeau-relire { margin-bottom: 8px; }
.bandeau-relire .as-card__body { flex-wrap: wrap; }
/* 13/10/2026 : la recherche précise — « Ce que l'outil cherche », ses filtres en puces, le formulaire, l'avancement. */
.filtres-recherche { margin-bottom: 8px; }
.filtres { display: grid; gap: 6px; margin: 0; }
.filtre { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.filtre dd { margin: 0; min-width: 0; }
.as-chip--exclu { background: var(--status-failed-bg); color: var(--status-failed-ink); }
.champ-secteurs, .champ-tailles { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.champ-secteurs legend, .champ-tailles legend { width: 100%; margin-bottom: 4px; }
.champ-secteurs .as-input { flex: 1 1 260px; min-width: 0; }
.case { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.progression-recherche { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
@media (max-width: 560px) { .filtre { grid-template-columns: 1fr; gap: 2px; } }
/* 13/10/2026, la liste et la semaine : les sources d'une piste et leurs interrupteurs, les filtres, l'étiquette d'origine,
   la barre de la semaine. */
.sources-de-la-liste { margin-bottom: 8px; }
.source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.interrupteur { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.interrupteur__piste { position: relative; width: 30px; height: 18px; border-radius: var(--radius-pill); background: var(--line-strong); transition: background .15s; flex: none; }
.interrupteur__piste::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-0); transition: left .15s; }
.interrupteur[aria-checked="true"] .interrupteur__piste { background: var(--brand); }
.interrupteur[aria-checked="true"] .interrupteur__piste::after { left: 14px; }
.interrupteur:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.filtres-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.filtres-liste .as-chip { text-decoration: none; color: inherit; }
.as-chip--on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.etiquette { color: var(--brand); }
.etiquette--reseau { color: var(--ink-muted); }
.barre-semaine { flex-wrap: wrap; justify-content: flex-end; }
/* La page d'une campagne : une ligne par piste. */
.ligne-piste { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 16px; border-top: 1px solid var(--line); }
.ligne-piste:first-child { border-top: 0; }
.ligne-piste a { color: inherit; text-decoration: none; }
.ligne-piste a:hover, .ligne-piste a:focus-visible { text-decoration: underline; }

/* 14/10/2026 : la page d'une campagne lancée (maquette D) : le tableau à gauche, 3 cartes à droite. */
.campagne-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.campagne-tete h1 { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.campagne-tete__etat { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.menu-campagne, .menu-ligne { position: relative; }
.menu-campagne > summary, .menu-ligne > summary { list-style: none; cursor: pointer; letter-spacing: .08em; }
.menu-campagne > summary::-webkit-details-marker, .menu-ligne > summary::-webkit-details-marker { display: none; }
.menu-campagne__liste, .menu-ligne__liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; padding: 6px; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.menu-campagne__liste a, .menu-ligne__liste button, .menu-ligne__liste summary { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
.menu-campagne__liste a:hover, .menu-ligne__liste button:hover, .menu-ligne__liste summary:hover { background: var(--surface-100); }
.menu-ligne__liste form { margin: 0; }
.menu-ligne__liste .definitif form { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.menu-ligne__liste .definitif form button { width: auto; }

.campagne-d { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; margin-top: 20px; }
.campagne-d__colonne { display: flex; flex-direction: column; gap: 14px; }
.carte-d { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.carte-d p { margin: 0; }
.carte-d__titre { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); margin: 0; }

.tableau-personnes { overflow: visible; }
.tableau-personnes__filtres { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.tableau-personnes__vide { padding: 20px 16px; margin: 0; }
.tableau-personnes__pied { padding: 12px 16px; display: flex; justify-content: center; border-top: 1px solid var(--line); }
.tableau-personnes__masquees { padding: 0 16px 12px; margin: 0; text-align: center; }
.ligne-personne { display: grid; grid-template-columns: 40px minmax(0, 1.6fr) 40px minmax(0, 1.2fr) minmax(76px, auto) 36px; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ligne-personne__decider { display: flex; justify-content: flex-end; }
.ligne-personne:last-of-type { border-bottom: 0; }
.ligne-personne__qui { min-width: 0; display: flex; flex-direction: column; }
.ligne-personne__qui > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-personne__source { color: var(--ink-muted); min-width: 0; }
.ligne-personne__source--chaude { color: var(--status-paused-ink); font-weight: 600; }

/* La note de l'IA dans un anneau ; sa raison au survol et au clavier. */
.anneau { --couleur: var(--status-accepted-mark); position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--couleur) calc(var(--note) * 10%), var(--gauge-track) 0); cursor: help; }
.anneau::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface-0); }
.anneau b { position: relative; font-size: 13px; font-variant-numeric: tabular-nums; }
.anneau--verifier { --couleur: var(--status-validate-mark); }
.anneau--hors { --couleur: var(--status-failed-mark); }
.anneau--vide { background: none; border: 1px dashed var(--line-strong); color: var(--ink-muted); cursor: default; }
.anneau--vide::before { display: none; }
.anneau .bulle { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30; width: max-content; max-width: 260px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface-0); font-size: 12.5px; line-height: 1.4; box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity .12s; }
.anneau:hover .bulle, .anneau:focus .bulle { opacity: 1; }

.liste-pistes { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.liste-pistes__piste { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.liste-pistes__piste:hover { background: var(--surface-100); }
.liste-pistes__piste--on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.liste-pistes__piste .as-mono { color: inherit; opacity: .8; }
.liste-pistes__plus-personne { padding: 0 8px 4px; color: var(--status-validate-ink); }
.depuis-le-debut { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.depuis-le-debut div { display: flex; justify-content: space-between; }
.depuis-le-debut dd { margin: 0; font-weight: 600; }
.depuis-le-debut__rdv { color: var(--status-accepted-ink); }

@media (max-width: 640px) {
  .ligne-personne { grid-template-columns: 40px minmax(0, 1fr) 40px 36px; row-gap: 6px; }
  .ligne-personne > .menu-ligne, .ligne-personne > span:last-child:empty { grid-column: 4; grid-row: 1; }
  .ligne-personne__etat, .ligne-personne__decider { grid-column: 2 / 5; justify-content: flex-start; }
  .ligne-personne__decider:empty { display: none; }
}
@media (prefers-reduced-motion: reduce) { .anneau .bulle { transition: none; } }

/* 14/10/2026 : la bulle « i » (l'étape 1 : « Ce que l'IA va faire »), et la description en pleine largeur. */
.info { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink-muted); font-size: 11px; font-weight: 600; font-style: normal; cursor: help; vertical-align: middle; }
.info .bulle { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: 300px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface-0); font-size: 13px; line-height: 1.45; font-weight: 400; letter-spacing: 0; text-align: left; box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity .12s; }
.info:hover .bulle, .info:focus .bulle { opacity: 1; }
.pleine-largeur { display: block; }

/* 14/10/2026 : le détail sous la pastille (« À valider dans « Aujourd’hui » ») ; le bandeau avec son bouton. */
.ligne-personne__etat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bandeau__avec-lien { align-items: center; flex-wrap: wrap; }
.bandeau__avec-lien > span { flex: 1 1 260px; min-width: 0; }
.bandeau__avec-lien > a { flex: none; }

/* 14/10/2026 : créer une campagne en discutant (maquette B + C). La conversation au milieu, la fiche à droite. */
.discussion { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.discussion__fil { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fiche-fil { position: sticky; top: 24px; display: flex; flex-direction: column; }
.fiche-fil__tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fiche-fil__tete h2 { font-size: 15px; margin: 0; }
.fiche-fil__rubriques { margin: 0; }
.rubrique-fil { padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.rubrique-fil dt { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.rubrique-fil dd { margin: 0; overflow-wrap: anywhere; }
.rubrique-fil--vide dd { color: var(--ink-muted); font-style: italic; }
.rubrique-fil details.corriger summary { cursor: pointer; }
.rubrique-fil details.corriger form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.fiche-fil__pied { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.jauge-fil { height: 4px; border-radius: 999px; background: var(--surface-150, var(--surface-100)); overflow: hidden; }
.jauge-fil span { display: block; height: 100%; background: var(--brand); }
@media (max-width: 1240px) { .discussion { grid-template-columns: minmax(0, 1fr); } .fiche-fil { position: static; } }
@media (max-width: 720px) { .cartes-cibles { grid-template-columns: minmax(0, 1fr); } }
/* Un libellé lu par les lecteurs d'écran, invisible à l'écran. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Le rail, plus fin pendant la discussion (250 px → 180 px). */
.wiz--discussion { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
.wiz--discussion .rail__name { font-size: 15px; line-height: 20px; }
.wiz--discussion .ri__dot { width: 20px; height: 20px; }
.wiz--discussion .rail__list::before { left: 9px; }
.wiz--discussion .ri > a, .wiz--discussion .ri > .ri__lien { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 7px 6px 7px 0; }
.wiz--discussion .ri__edit { display: none; }
@media (max-width: 1100px) { .wiz--discussion { grid-template-columns: 1fr; } }

/* 14/10/2026, le soir : le design choisi par Kamel. Les bulles de « B », ses messages à la couleur de « C », les
   suggestions en pastilles légères (comme Claude.ai), la zone pour écrire en pilule ; l'IA a le logo de l'outil. */
.discussion { --sugg-trait: color-mix(in srgb, var(--brand) 28%, var(--surface-0)); }
.bulle-fil { display: flex; gap: 10px; align-items: flex-start; max-width: 680px; }
.bulle-fil p { margin: 0; padding: 11px 15px; border-radius: 14px; white-space: pre-line; min-width: 0; line-height: 1.55; }
.bulle-fil--ia p { background: var(--surface-0); border: 1px solid var(--line); border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(14, 23, 38, .05); }
.bulle-fil--moi { align-self: flex-end; max-width: 560px; }
.bulle-fil--moi p { background: var(--brand-soft); border: 1px solid var(--sugg-trait); border-top-right-radius: 4px; }
.bulle-fil__logo { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.suggestions { display: flex; flex-direction: column; gap: 8px; margin-left: 40px; }
.pastilles-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles-sugg form { margin: 0; }
.pastille-sugg { border: 1px solid var(--line); background: var(--surface-0); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(14, 23, 38, .05); transition: border-color .12s, background .12s, color .12s; }
.pastille-sugg:hover, .pastille-sugg:focus-visible { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.carte-cible { border-radius: 12px; transition: transform .12s, border-color .12s; }
.carte-cible:hover { border-color: var(--brand); transform: translateY(-1px); }
.saisie-fil { display: flex; gap: 8px; align-items: flex-end; margin: 0; background: var(--surface-0); border: 1px solid var(--line); border-radius: 24px; padding: 6px 6px 6px 18px; box-shadow: 0 1px 2px rgba(14, 23, 38, .05); }
.saisie-fil:focus-within { border-color: var(--brand); }
.saisie-fil textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; line-height: 1.5; padding: 7px 0; resize: none; field-sizing: content; min-height: 22px; max-height: 220px; }
.saisie-fil__envoyer { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; cursor: pointer; }
.saisie-fil__envoyer:hover { filter: brightness(.92); }
@media (max-width: 720px) { .suggestions { margin-left: 0; } }
.cartes-cibles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cartes-cibles form { margin: 0; display: flex; }
.carte-cible { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface-0); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; color: inherit; }
.carte-cible--recommandee { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); }
.carte-cible__reco { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }

/* « go vitesse » : « L’IA écrit… », trois points qui s'animent, dans la bulle qui attend sa réponse. */
.bulle-fil--ecrit .points { display: inline-flex; gap: 4px; align-items: center; height: 1.5em; }
.bulle-fil--ecrit .points i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); opacity: .35; animation: points-ecrit 1.2s infinite ease-in-out; }
.bulle-fil--ecrit .points i:nth-child(2) { animation-delay: .15s; }
.bulle-fil--ecrit .points i:nth-child(3) { animation-delay: .3s; }
@keyframes points-ecrit { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .bulle-fil--ecrit .points i { animation: none; opacity: .7; } }

/* 14/10/2026 : « Consignes de l’IA », réservée aux administrateurs. La liste par étape à gauche, la consigne à droite. */
.consignes-admin { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--status-planned-bg); color: var(--status-planned-ink); white-space: nowrap; align-self: flex-start; }
.consignes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.consignes__liste { padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.consignes__etape { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; padding: 12px 10px 4px; display: flex; gap: 8px; align-items: center; }
.consignes__etape .as-mono { font-size: 10.5px; background: var(--surface-100); border-radius: 4px; padding: 0 5px; }
.consignes__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 6px; color: inherit; text-decoration: none; }
.consignes__item:hover { background: var(--surface-100); }
.consignes__item--on { background: var(--brand-soft); }
.consignes__item b { font-weight: 600; font-size: 13.5px; }
.consignes__item .as-small { grid-column: 1 / 3; }
.consignes__origine { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-100); color: var(--ink-muted); white-space: nowrap; }
.consignes__detail { display: flex; flex-direction: column; min-width: 0; }
.consignes__tete { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.consignes__ligne { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.consignes__carte { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.consignes__carte div { background: var(--surface-50); border-radius: 6px; padding: 8px 10px; }
.consignes__carte dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.consignes__carte dd { margin: 2px 0 0; font-size: 13px; }
.consignes__onglets { padding: 0 18px; }
.consignes__corps { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.consignes__formulaire { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.consignes__texte { width: 100%; min-height: 420px; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; background: var(--surface-50); color: inherit; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12.5px; line-height: 1.6; resize: vertical; }
.consignes__texte--court { min-height: 220px; margin-top: 8px; }
.diff { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12.5px; line-height: 1.6; border: 1px solid var(--line); border-radius: 6px; overflow: auto; max-height: 560px; }
.diff div { padding: 1px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff__plus { background: var(--status-accepted-bg); color: var(--status-accepted-ink); }
.diff__moins { background: var(--status-failed-bg); color: var(--status-failed-ink); text-decoration: line-through; }
.historique { list-style: none; margin: 0; padding: 0; }
.historique__ligne { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.essai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.essai__message { background: var(--surface-50); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.essai__message p { margin: 0; white-space: pre-line; }
.essai__message--nouveau { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 1100px) { .consignes { grid-template-columns: minmax(0, 1fr); } .consignes__liste { position: static; } .consignes__carte { grid-template-columns: repeat(2, minmax(0, 1fr)); } .essai { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .historique__ligne { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.diff__saut { color: var(--ink-muted); background: var(--surface-100); font-style: italic; text-align: center; }

/* 14/10/2026 : « Aujourd’hui » en boîte de réception (maquette A). La liste à gauche, la décision à droite ; sur un
   petit écran, la liste passe au-dessus (et défile dans sa hauteur). */
.boite { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.boite__liste { position: sticky; top: 16px; display: flex; flex-direction: column; max-height: calc(100vh - 32px); overflow: hidden; }
.boite__filtres { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-bottom: 1px solid var(--line); }
.boite__filtres .as-chip { text-decoration: none; color: inherit; }
.boite__lignes { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.boite__ligne { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.boite__ligne:hover { background: var(--surface-50); }
.boite__ligne--on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.boite__qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.boite__haut { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; }
.boite__haut b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boite__apercu { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boite__vide { padding: 14px 12px; }
.boite__clavier { padding: 8px 12px; border-top: 1px solid var(--line); margin: 0; }
.boite__detail { min-width: 0; }
@media (max-width: 1050px) {
  .boite { grid-template-columns: minmax(0, 1fr); }
  .boite__liste { position: static; max-height: 340px; }
  .boite__clavier { display: none; }
}

/* 14/10/2026 : les pages du tableau d'une campagne. */
.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.pagination__pages { display: flex; align-items: center; gap: 14px; }
.pagination__par b { color: var(--brand); }

/* « Aujourd'hui », relecture finale : le 1er V met « Valider » en évidence ; l'avertissement d'une retouche en cours. */
.valider--arme { box-shadow: 0 0 0 3px var(--brand-soft), 0 0 0 5px var(--brand); }
.valider__indice { color: var(--brand); font-weight: 600; align-self: center; }
.boite__avertissement { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* --- Lot 11c : la page « Abonnement » et la case du menu --- */
.abonnement { max-width: 1040px; }
.abonnement__periode { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; background: var(--surface-100); border-radius: var(--radius-pill); }
.abonnement__periode a { padding: 8px 18px; border-radius: var(--radius-pill); color: var(--ink-muted); text-decoration: none; font-size: 14px; }
.abonnement__periode a[aria-current] { background: var(--surface-0); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-card); }
.abonnement__remise { color: var(--status-accepted-ink); font-weight: 600; }
.abonnement__cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.abonnement__carte { position: relative; }
.abonnement__carte .as-card__body { height: 100%; box-sizing: border-box; }
.abonnement__carte--mise-en-avant { border: 2px solid var(--brand); }
.abonnement__carte--bientot { background: var(--surface-100); border-style: dashed; color: var(--ink-muted); }
.abonnement__etiquette { position: absolute; top: -12px; left: 24px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); }
.abonnement__etiquette--bientot { background: var(--ink-muted); color: var(--surface-0); }
.abonnement__prix b { font-size: 36px; }
.abonnement__atouts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.abonnement__atouts li { display: flex; gap: 8px; align-items: flex-start; }
.abonnement__choisir { margin-top: auto; }
.abonnement__choisir .as-btn { width: 100%; justify-content: center; }
.abonnement__actuel { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.abonnement__alerte { border: 1px solid var(--status-failed-mark); background: var(--status-failed-bg); }
.case-abonnement { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.4; }
.case-abonnement--essai { background: var(--status-validate-bg); color: var(--status-validate-ink); }
.case-abonnement--pause { background: var(--status-paused-bg); color: var(--status-paused-ink); }
.case-abonnement a { color: inherit; font-weight: 600; }

/* 16/10/2026 : la raison d'un bouton grisé, visible sous le bouton (maquette des plafonds). */
.pourquoi { font-size: 13px; color: var(--status-validate-ink); background: var(--status-validate-bg); border-radius: 8px; padding: 8px 10px; max-width: 46ch; margin: 6px 0 0; }

/* 16/10/2026 : la zone de la campagne, au-dessus des pistes (étape 3), et ses lieux (étape 4). */
.zone-campagne { background: var(--status-planned-bg); color: var(--status-planned-ink); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.zone-campagne b { color: var(--ink); }
.lieux-campagne { margin-bottom: 12px; }

/* 16/10/2026 : le lieu d'une relation proposée, et la ligne des relations hors zone (fenêtre de la semaine). */
.lieu-personne { color: var(--status-accepted-ink); font-weight: 600; }
.reserve-hors-zone { background: var(--brand-soft); border-radius: 8px; padding: 10px 12px; }

/* 16/10/2026 : la campagne de chaque personne, dans la liste et sur la carte d'« Aujourd'hui ». */
.boite__campagne { font-size: 12px; color: var(--status-planned-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-campagne { color: var(--status-planned-ink); font-weight: 600; }

/* 19/10/2026 : la carte de l'expéditeur (étape 3 ; page d'une campagne lancée tant qu'elle n'est pas validée). */
.carte-de-la-campagne { margin-top: 16px; }
.carte-expediteur__lignes { margin: 0; display: grid; gap: 8px; }
.carte-expediteur__lignes > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-50); }
.carte-expediteur__lignes dt { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--brand); }
.carte-expediteur__lignes dd { margin: 0; }
.carte-expediteur__lignes ul { margin: 0; padding-left: 18px; }

/* 19/10/2026 : le lancement refait (spec docs/superpowers/specs/2026-10-19-lancement-design.md), repris de la maquette
   validée par Kamel : les cases de la liste, le pied collant, la fenêtre de confirmation, « À faire » et « Prêt à partir ». */

/* L'étape 4 et la réserve : une case par personne. */
.prow--case { grid-template-columns: 20px 40px minmax(0, 1fr) 72px minmax(0, 140px); cursor: pointer; }
.prow--case input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.prow--case .bloc { display: block; }
.bloc-qui { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.origine { font-size: 12px; line-height: 16px; color: var(--ink-muted); text-align: right; }
.origine--toi { color: var(--brand); font-weight: 600; }
.groupe-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 24px; background: var(--surface-50); border-bottom: 1px solid var(--line); }
.groupe-tete__titre { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* Le pied qui reste visible : le nombre de cases cochées et le bouton. */
.pied-collant { position: sticky; bottom: 0; z-index: 10; padding: 12px 16px; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.pied-collant__compte { display: flex; flex-direction: column; gap: 2px; text-align: right; }

/* La fenêtre de confirmation. */
.sheet--confirmer { width: min(680px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 14px; }
.liste-confirmer { max-height: 330px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.liste-confirmer__piste { position: sticky; top: 0; z-index: 1; padding: 6px 12px; background: var(--surface-100); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); }
.ligne-confirmer { display: grid; grid-template-columns: minmax(0, 1fr) auto 48px 32px; gap: 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); }
.ligne-confirmer__qui { min-width: 0; display: flex; flex-direction: column; }
.ligne-confirmer__qui span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-confirmer .as-score { font-size: 15px; line-height: 20px; }
.calendrier .big { font-size: 22px; line-height: 26px; }

/* La page d'une campagne : l'entonnoir, la réserve à part, « À faire » et « Prêt à partir ». */
.entonnoir { align-items: center; }
.entonnoir__reserve { margin-left: auto; }
.as-chip--agir { background: var(--status-validate-bg); color: var(--status-validate-ink); font-weight: 600; }
.as-chip--reserve { background: var(--surface-0); border: 1px solid var(--line-strong); }
.ligne-personne__source--toi { color: var(--brand); font-weight: 600; }
.carte-d--agir { border-color: var(--status-validate-mark); }
.carte-d__titre .as-count { margin-left: 6px; }
.a-faire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.a-faire li { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.a-faire li:first-child { padding-top: 0; border-top: 0; }
.a-faire .as-btn { align-self: flex-start; }
.pret { display: flex; flex-direction: column; gap: 2px; }
.reserve-intro { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pied-carte { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-0); }
.pied-carte--collant { position: sticky; bottom: 0; z-index: 10; box-shadow: var(--shadow-pop); }

@media (max-width: 860px) {
  .prow--case { grid-template-columns: 20px 40px minmax(0, 1fr); }
  .prow--case > :nth-child(4), .prow--case > :nth-child(5) { grid-column: 3; text-align: left; }
  .pied-collant__compte { text-align: left; }
  .entonnoir__reserve { margin-left: 0; }
}
@media (max-width: 600px) {
  .ligne-confirmer { grid-template-columns: minmax(0, 1fr) 48px 32px; }
  .ligne-confirmer > :nth-child(2) { grid-column: 1; }
}
.prow--case--exclure { grid-template-columns: 20px 40px minmax(0, 1fr) 72px minmax(0, 140px) auto; }
@media (max-width: 860px) { .prow--case--exclure { grid-template-columns: 20px 40px minmax(0, 1fr) auto; } }
/* Analyse UX du 21/10/2026 : « Ne plus contacter » se lit, discret, à droite de la ligne. */
.ne-plus-contacter { color: var(--ink-muted); font-weight: 500; font-size: 12.5px; }
.echec-de-la-ligne { color: var(--status-failed-ink); }
/* 21/10/2026 (captures du téléphone) : une bulle cachée ne prend pas de place (avec « opacity: 0 », elle élargissait la
   page d'un défilement de côté) ; elle apparaît au survol et au clavier, sans dépasser l'écran. Les onglets défilent
   sur eux-mêmes au lieu d'élargir la page. */
.anneau .bulle, .info .bulle { display: none; }
.anneau:hover .bulle, .anneau:focus .bulle, .info:hover .bulle, .info:focus .bulle { display: block; max-width: min(300px, calc(100vw - 32px)); }
@media (max-width: 860px) { .as-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .as-tab { white-space: nowrap; flex: none; } }

/* 21/10/2026 (analyse UX, § 3.8, chantier 6) : le téléphone. Une barre du haut remplace celle de gauche sous 860
   pixels ; dans « Aujourd'hui », la décision vient avant la liste ; des cases plus grandes sous le doigt. */
.barre-mobile { display: none; }
@media (max-width: 860px) {
  .as-app { grid-template-rows: auto 1fr; }
  .barre-mobile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; background: var(--surface-100); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 25; }
  .barre-mobile .as-logo { padding: 0; font-size: 16px; }
  .barre-mobile__aujourdhui { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; min-height: 44px; }
  .menu-mobile { position: relative; }
  .menu-mobile > summary { list-style: none; min-height: 44px; }
  .menu-mobile > summary::-webkit-details-marker { display: none; }
  .menu-mobile__liste { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; padding: 6px; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); z-index: 30; }
  .menu-mobile__liste a { padding: 12px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; }
  .menu-mobile__liste a:hover { background: var(--surface-100); }
  .menu-mobile__campagne { padding-left: 24px !important; font-size: 14px; color: var(--ink-muted) !important; display: flex; gap: 6px; align-items: center; }
  .menu-mobile__campagne[aria-current="page"] { background: var(--brand-soft); color: var(--brand) !important; font-weight: 600; }
  .barre-mobile__alerte { flex-basis: 100%; margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--status-failed-bg); color: var(--status-failed-ink); font-size: 13px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
  .barre-mobile__alerte--abonnement { background: var(--status-validate-bg); color: var(--status-validate-ink); }
  .barre-mobile__alerte a { color: inherit; }
}
@media (max-width: 640px) {
  .boite__detail { order: -1; }
  .boite__liste { max-height: none; }
  .prow--case input[type="checkbox"] { width: 22px; height: 22px; }
}

/* 21/10/2026 (analyse UX, § 3.5, chantier 5) : l'étape 4, le panneau « Régler la recherche », replié par défaut. */
.regler-recherche { overflow: visible; }
.regler-recherche__tete { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 18px; }
.regler-recherche__tete::-webkit-details-marker { display: none; }
.regler-recherche[open] > .regler-recherche__tete .pli::before { transform: rotate(45deg); }
.regler-recherche__tete .pli { font-size: 14px; color: var(--ink); }
.regler-recherche__corps { padding: 0 18px 18px; gap: 12px; }
.regler-recherche__corps .as-card { box-shadow: none; }

/* 21/10/2026 (analyse UX, § 4.5 ; décision du 19/10) : « Aujourd'hui », un onglet par campagne ; un point orange quand
   quelqu'un y a répondu. */
.onglets-aujourdhui { flex-wrap: wrap; }
.onglets-aujourdhui .as-tab { text-decoration: none; }
.point-reponse { width: 8px; height: 8px; border-radius: 50%; background: var(--status-validate-mark); display: inline-block; }

/* 21/10/2026 (analyse UX, § 3.4) : la page d'une campagne : ses chiffres sous le titre, un bandeau d'état avec un seul
   bouton principal, trois onglets. */
.campagne-tete__chiffres { margin-top: 8px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bandeau-campagne { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.bandeau-campagne--agir { border-color: var(--status-validate-mark); }
.bandeau-campagne__ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.bandeau-campagne__texte { font-weight: 600; flex: 1 1 320px; min-width: 0; }
.bandeau-campagne__ligne--autre { padding-top: 10px; border-top: 1px solid var(--line); }
.bandeau-campagne__ligne--autre > span { flex: 1 1 320px; min-width: 0; }
.bandeau-campagne__pret { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--status-planned-ink); }
.bandeau-campagne__pret .as-icon { margin-top: 2px; }
.alerte-carte a { color: inherit; }
.onglets-campagne { margin-top: 4px; }
.onglets-campagne .as-tab { text-decoration: none; }
.tableau-personnes__pistes { padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.tableau-personnes__pistes .as-chip { text-decoration: none; color: inherit; }
.liens-reglages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liens-reglages li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.alerte-piste { color: var(--status-validate-ink); font-weight: 600; }
.reglages-campagne { max-width: 900px; }

/* 21/10/2026 (analyse UX) : un pli se reconnaît à son chevron, en couleur neutre (un lien d'action est en couleur de
   marque) ; il pivote quand le pli est ouvert. */
.pli { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ink-muted); cursor: pointer; list-style: none; }
.pli::-webkit-details-marker { display: none; }
.pli::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
details[open] > .pli::before { transform: rotate(45deg); }
.pli:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .pli::before { transition: none; } }
.boite__clavier .pli { font-weight: 500; }
/* 20/10/2026 (captures) : un élément « hidden » reste caché, même si sa classe l'affiche (l'avis des cases). */
[hidden] { display: none !important; }

/* 21/10/2026, la campagne plus claire (maquette validée avec Kamel, écrans 3 et 4) : le chemin des personnes en 5
   étapes, deux à part, la ligne de ce qui attend sa décision, les réglages derrière le bouton du titre. */
.retour-campagne { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); text-decoration: none; margin-bottom: 4px; }
.retour-campagne:hover { color: var(--ink); }
.bandeau-campagne__detail { display: block; font-weight: 400; color: var(--ink-muted); margin-top: 2px; }
.chemin-boite { min-width: 0; }
.chemin-campagne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.chemin-campagne__etape { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-right: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; }
.chemin-campagne__etape:last-child { border-right: 0; }
.chemin-campagne__etape:hover { background: var(--surface-50); }
.chemin-campagne__etape:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.chemin-campagne__etape--on, .chemin-campagne__etape--on:hover { background: var(--brand-soft); box-shadow: inset 0 -3px 0 var(--brand); }
.chemin-campagne__etape--on .chemin-campagne__nom { color: var(--brand); }
.chemin-campagne__etape:not(:last-child)::after { content: ""; position: absolute; right: -6px; top: 50%; width: 11px; height: 11px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface-0); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.chemin-campagne__etape--on:not(:last-child)::after { background: var(--brand-soft); }
.chemin-campagne__nombre { font-family: var(--font-mono); font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.chemin-campagne__nom { font-weight: 600; font-size: 14px; }
.chemin-campagne__detail { display: inline-flex; align-items: center; gap: 5px; min-height: 1.3em; font-size: 12.5px; color: var(--ink-muted); }
.chemin-campagne__detail--a-toi { color: var(--status-validate-ink); font-weight: 600; }
.point-a-toi { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--status-validate-mark); }
.a-part, .groupes-campagne { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; }
.a-part .as-chip, .groupes-campagne .as-chip { text-decoration: none; color: inherit; }
.a-part .as-chip--alerte { background: var(--status-failed-bg); color: var(--status-failed-ink); font-weight: 600; }
.tableau-personnes__titre { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-muted); }
.ligne-personne__a-toi { display: inline-flex; align-items: center; gap: 6px; color: var(--status-validate-ink); font-weight: 600; }
.ligne-personne__etat--alerte > span:first-child { color: var(--status-failed-ink); font-weight: 600; }
@media (max-width: 860px) {
  .chemin-boite { overflow-x: auto; }
  .chemin-campagne { grid-template-columns: repeat(5, minmax(118px, 1fr)); min-width: 590px; }
}
/* L'étape « Qui contacter » (écran 2) : le commun une fois, une ligne par groupe. */
.commun-groupes { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface-100); border-radius: var(--radius-md); }
.commun-groupes__lignes { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.commun-groupes__lignes > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.commun-groupes__lignes dt { color: var(--ink-muted); font-weight: 600; font-size: 13px; }
.commun-groupes__lignes dd { margin: 0; min-width: 0; }
.groupes-liste { overflow: visible; }
.groupe-ligne { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.groupe-ligne:last-child { border-bottom: 0; }
.groupe-ligne__tete { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.groupe-ligne__qui { display: flex; flex-direction: column; min-width: 0; }
.groupe-ligne__etat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.groupe-ligne__detail { margin-top: 6px; }
@media (max-width: 560px) { .commun-groupes__lignes > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* Au téléphone : le titre de la campagne ne se coupe plus au milieu d'un mot (le bouton passe dessous), et la ligne
   « Proposer d'autres groupes » passe à la ligne au lieu de déborder. */
.campagne-tete { flex-wrap: wrap; }
.campagne-tete > div:first-child { flex: 1 1 260px; }
.campagne-tete h1 { overflow-wrap: break-word; }
@media (max-width: 640px) {
  .row-head { flex-wrap: wrap; }
  .row-head > .as-row { flex-wrap: wrap !important; width: 100%; }
  .row-head .as-input { min-width: 0 !important; flex: 1 1 100%; }
}

/* 21/10/2026 (la campagne plus claire, partie 2) : « Ta présentation », à droite de la discussion (maquette, écran 1 bis).
   Chaque ligne : une marque (✓ remplie, ? à confirmer, ○ à venir), son titre et d'où elle vient, son texte, « Corriger ». */
.presentation .compte-pres { font-size: 13px; color: var(--ink-muted); display: flex; gap: 4px 14px; flex-wrap: wrap; padding: 10px 16px 0; }
.presentation .compte-pres b { color: var(--ink); }
.compte-pres__confirmer { color: var(--status-validate-ink); font-weight: 600; }
.groupe-pres { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.groupe-pres__titre { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.lp { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.lp__marque { color: var(--line-strong); font-weight: 700; line-height: 1.5; }
.lp--ok .lp__marque { color: var(--status-accepted-mark); }
.lp--a_confirmer { background: var(--status-validate-bg); border-radius: 6px; padding: 6px 8px; margin: 0 -8px; }
.lp--a_confirmer .lp__marque { color: var(--status-validate-ink); }
.lp__corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp__titre { font-size: 12.5px; color: var(--ink-muted); font-weight: 600; }
.lp__texte, .lp__attente { margin: 0; overflow-wrap: anywhere; }
.lp__attente { color: var(--ink-muted); font-style: italic; }
.lp__liste { margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
.lp__corriger { margin-top: 2px; }
.lp__corriger form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.tag--profil { background: var(--status-planned-bg); color: var(--status-planned-ink); }
.tag--confirmer { background: var(--surface-0); color: var(--status-validate-ink); border: 1px solid var(--status-validate-mark); }
.tag--dire { border: 1px dashed var(--line-strong); color: var(--ink-muted); }
.tag--toi { background: var(--status-accepted-bg); color: var(--status-accepted-ink); }
.mini-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.lp__lien { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; padding: 2px 0; }
.lp__lien:hover { text-decoration: underline; }
.lp__lien:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.presentation-validee > summary { display: flex; align-items: center; gap: 6px; }

/* 21/10/2026 : tes conversations dans « Aujourd'hui » (spec docs/superpowers/specs/2026-10-21-conversations-design.md).
   Les deux moitiés en haut de la liste, la liste rangée par état, et le fil à la WhatsApp : ses messages à gauche, les
   tiens à droite, la réponse de l'IA à valider en bas. */
.cv-moities { display: flex; gap: 4px; margin: 10px 12px 0; padding: 3px; background: var(--surface-100); border-radius: var(--radius-md); }
.cv-moitie { flex: 1 1 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-sm); border: 1px solid transparent; color: var(--ink-muted); font-weight: 600; font-size: 14px; text-decoration: none; }
.cv-moitie:hover { color: var(--ink); }
.cv-moitie--on { background: var(--surface-0); color: var(--ink); border-color: var(--line-strong); }
.cv-badge { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 12px; padding: 0 7px; line-height: 1.6; }
.boite--conversations .boite__liste .boite__lignes { padding-bottom: 8px; }
.cv-groupe { margin: 0; padding: 14px 12px 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.cv-lignes { list-style: none; margin: 0; padding: 0; }
.cv-lignes .boite__ligne { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; }
.cv-heure { font-size: 12px; color: var(--ink-muted); white-space: nowrap; flex: none; }
.cv-heure--a-toi { color: var(--brand); font-weight: 600; }
.cv-point { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); margin-top: 6px; }
.cv-fil { display: flex; flex-direction: column; overflow: hidden; }
.cv-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cv-tete__qui { flex: 1 1 220px; min-width: 0; }
.cv-retour { display: none; align-items: center; gap: 4px; flex-basis: 100%; min-height: 44px; }
.cv-messages { max-height: 56vh; overflow-y: auto; background: var(--surface-50); display: flex; flex-direction: column-reverse; }
.cv-bulles { list-style: none; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.cv-jour { align-self: center; margin: 6px 0; }
.cv-jour span { display: inline-block; font-size: 12px; color: var(--ink-muted); background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 10px; }
.cv-systeme { align-self: center; max-width: 82%; text-align: center; font-size: 12.5px; color: var(--ink-muted); }
.cv-bulle { max-width: min(72%, 560px); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.cv-bulle--elle { align-self: flex-start; background: var(--surface-0); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; }
.cv-bulle--moi { align-self: flex-end; background: var(--status-accepted-bg); border-radius: 12px 12px 4px 12px; }
.cv-bulle--part { background: var(--status-planned-bg); border: 1.5px dashed var(--status-planned-ink); }
.cv-bulle--a_verifier, .cv-bulle--echec { background: var(--status-failed-bg); }
.cv-bulle__pied { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; font-size: 11.5px; color: var(--ink-muted); }
.cv-bulle--moi .cv-bulle__pied { color: var(--status-accepted-ink); }
.cv-bulle--part .cv-bulle__pied { color: var(--status-planned-ink); }
.cv-bulle--a_verifier .cv-bulle__pied, .cv-bulle--echec .cv-bulle__pied { color: var(--status-failed-ink); }
.cv-bulle__pied svg { width: 14px; height: 14px; }
.cv-tag { background: var(--status-validate-bg); color: var(--status-validate-ink); border-radius: var(--radius-pill); padding: 0 8px; font-weight: 600; font-size: 12px; }
.cv-annuler { border: 0; background: transparent; color: var(--brand); font: inherit; font-weight: 600; text-decoration: underline; padding: 6px 2px; cursor: pointer; }
.cv-composeur { border-top: 1px solid var(--line); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-0); }
.cv-composeur__haut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cv-editeur { border: 1.5px dashed var(--status-validate-mark); }
.cv-composeur .as-editor__text { width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; font: inherit; border: 0; background: transparent; color: inherit; display: block; }
.cv-envoyer { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cv-rien { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.cv-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }  /* 23/10/2026 : le bas du fil */
/* 24/10/2026 (Kamel) : la jauge des invitations en deux tons : les parties (foncé), puis les prévues (clair). */
.as-gauge__rail { display: flex; }
.as-gauge__fill:has(+ .as-gauge__fill--prevue) { border-radius: 999px 0 0 999px; }
.as-gauge__fill + .as-gauge__fill--prevue { border-radius: 0 999px 999px 0; }
.as-gauge__fill--prevue, .as-gauge__point { background: color-mix(in srgb, var(--gauge-fill) 40%, transparent); }
.as-gauge--high .as-gauge__fill--prevue, .as-gauge--high .as-gauge__point { background: color-mix(in srgb, var(--gauge-fill-high) 40%, transparent); }
.as-gauge__legende { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); }
.as-gauge__point { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.cv-pied p { margin: 0; flex: 1 1 260px; }
.cv-suivante { margin: 0; }
@media (max-width: 860px) {
  /* Le téléphone : un fil choisi s'ouvre en plein écran, avec « ← Conversations » pour revenir à la liste. */
  .boite--fil-choisi .boite__liste { display: none; }
  .boite--fil-choisi .cv-retour { display: inline-flex; }
  .boite--conversations:not(.boite--fil-choisi) .boite__detail { display: none; }  /* la liste d'abord */
  .cv-messages { max-height: 62vh; }  /* le dernier message visible sans défiler, le composeur juste dessous */
  .cv-bulle { max-width: 88%; }
}

/* 23/10/2026 : les annonces. La pastille « Hot » (les couleurs « à valider », comme la maquette), le fait sous la
   pastille, le bandeau d'« Aujourd'hui », le bloc des réglages de la campagne. */
.as-pill--hot { background: var(--status-validate-bg); color: var(--status-validate-ink); }
.as-pill--hot .as-pill__mark { color: var(--status-validate-mark); }
.fait-hot { color: var(--ink); }
.annonces-etape { background: var(--surface-0); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); align-items: center; }
.bandeau-hot__corps { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.bandeau-hot__texte { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.reglage-annonces--on { box-shadow: inset 0 0 0 2px var(--brand); }
.reglage-annonces__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reglage-annonces__interrupteur { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
@media (max-width: 640px) { .bandeau-hot__corps { flex-wrap: wrap; } }
/* 23/10/2026 (où en est la campagne) : l'onglet d'une campagne lancée sans décision, une coche au lieu du nombre. */
.onglet-a-jour { display: inline-flex; color: var(--status-accepted-mark); }
.onglet-a-jour .as-icon { width: 14px; height: 14px; }
/* 23/10/2026 (où en est la campagne) : le point d'une campagne dans « Aujourd'hui » (écran 1), sa ligne dépliable au-dessus
   des moitiés (écran 2), et l'avis « rien ne part » (la famille « en pause » du design). */
.as-notice--paused { background: var(--status-paused-bg); color: var(--status-paused-ink); }
.point__corps { gap: 12px; }
.point__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.point__chemin-boite { overflow-x: auto; }
.point__chemin { list-style: none; margin: 0; padding: 0; min-width: 600px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); }
.point__etape { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.point__etape + .point__etape { border-left: 1px solid var(--line); }
.point__etape .as-score { text-align: left; }
.point__partie { margin: 8px 0 0; }
.point__lignes { list-style: none; margin: 0; padding: 0; }
.point__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; }
.point__ligne + .point__ligne { border-top: 1px solid var(--line); }
.point__quand { width: 88px; flex: none; font-weight: 600; }
.point__texte { flex: 1 1 320px; min-width: 0; }
.point__personnes { list-style: none; margin: 4px 0 0; padding: 0; flex-basis: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); }
.point__personne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; }
.point__personne + .point__personne { border-top: 1px solid var(--line); }
.point__qui { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.point-replie { margin-bottom: 16px; }
.point-replie__resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 12px 16px; cursor: pointer; list-style: none; }
.point-replie__resume::-webkit-details-marker { display: none; }
.point-replie__morceau { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.point-replie__voir { color: var(--brand); font-weight: 600; margin-left: auto; }
.point-replie[open] .point-replie__voir { visibility: hidden; }
.point-replie__detail { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 640px) { .point__quand { width: auto; } .point-replie__voir { margin-left: 0; } }

/* 23/10/2026 (Kamel : « quand tu sélectionnes une campagne, on ne voit pas qu'elle est sélectionnée ») : la campagne
   ouverte, colorée dans la barre de gauche comme l'entrée active (et dans le menu du téléphone, plus haut). */
.subi[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* 23/10/2026 : le mode sombre (les couleurs « Nuit » de tokens.css, allumées par data-theme="dark" sur <html>), et son
   bouton en bas de la barre de gauche, dans le menu du téléphone et en haut des pages sans barre. */
[data-theme="dark"] { color-scheme: dark; }
.affichage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: var(--space-2) var(--space-1) 0; }
.affichage__theme { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.affichage__theme:hover { color: var(--ink); }
.affichage--haut { position: absolute; top: 16px; right: 16px; padding: 0; background: none; }
.menu-mobile__affichage { display: inline-flex !important; align-items: center; gap: 6px; }
/* 23/10/2026 : le choix de la langue (FR · EN), à côté du bouton du thème ; la langue en cours est colorée. */
.langues { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.langues a { color: var(--ink-muted); text-decoration: none; font-weight: 500; padding: 2px 6px; border-radius: var(--radius-sm); }
.langues a:hover { color: var(--ink); }
.langues a[aria-current="true"] { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.langues > span { color: var(--line-strong); }
.menu-mobile__langues { display: flex !important; padding: 6px 8px; }
.menu-mobile__langues a { padding: 8px 12px !important; }