@charset "UTF-8";
/* Polices locales (Montserrat variable 300-800, Shantell Sans variable 400-700), latin uniquement : couvre le français. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/Montserrat-normal-latin-VBwFsq9.woff2") format("woff2");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: "Shantell Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/ShantellSans-normal-latin-hw8CsV-.woff2") format("woff2");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
:root {
  /* Palette de la charte ACSEO (maquette Claude Design v2) */
  --acseo-navy: #002250;
  --acseo-navy-700: #0d3163;
  --acseo-navy-line: #1f4573;
  --acseo-blue: #007da1;
  --acseo-blue-strong: #006a8a;
  --acseo-teal: #6abacc;
  --acseo-teal-light: #a7d8db;
  --acseo-coral: #ff6d74;
  --acseo-coral-strong: #c4363f;
  --acseo-ice: #e2f5f7;
  --acseo-pink: #ffe1e4;
  --acseo-divider: #a8c4d4;
  --acseo-slate: #4a6283;
  --acseo-field-border: #6b86a0;
  /* Jetons sémantiques (un futur thème sombre ne change que ces valeurs) */
  --color-bg: #fff;
  --color-surface: #fff;
  --color-surface-soft: var(--acseo-ice);
  --color-surface-warm: var(--acseo-pink);
  --color-text: var(--acseo-navy);
  --color-text-muted: var(--acseo-slate);
  --color-text-link: var(--acseo-blue-strong);
  --color-border: var(--acseo-divider);
  --color-border-strong: var(--acseo-field-border);
  --color-primary: var(--acseo-navy);
  --color-primary-hover: var(--acseo-blue-strong);
  --color-primary-active: var(--acseo-navy-700);
  --color-accent: var(--acseo-coral);
  --color-accent-contrast: var(--acseo-navy);
  /* Fond des boutons pleins « accent » : texte blanc, contraste 4,64:1 (survol 5,32:1). Le corail clair reste réservé aux décors. */
  --color-accent-fill: #d33d45;
  --color-accent-fill-hover: var(--acseo-coral-strong);
  --color-danger: #b42318;
  --color-danger-bg: #fef3f2;
  --color-success: #1b6b4a;
  --color-success-bg: #e6f4ee;
  /* « Bientôt atteint » (budgets de la page Consommation) : ambre doux, jamais le corail réservé à « Dépassé » */
  --color-warning: #8a5a10;
  --color-warning-bg: #fcf3e2;
  --color-focus: #0b6e99;
  --color-nav-bg: var(--acseo-navy);
  --color-nav-active: rgb(255 255 255 / 10%);
  --color-nav-text: rgb(255 255 255 / 62%);
  --color-nav-text-strong: #fff;
  --color-nav-line: rgb(255 255 255 / 12%);
  --color-nav-avatar: rgb(255 255 255 / 14%);
  --color-nav-dot: var(--acseo-coral);
  /* « À vous » écrit sur le navy du menu (statut d'un sujet, 30/10) : corail clair, contraste 7,9:1 sur #002250. */
  --color-nav-yours: #ff9ea3;
  /* Couleurs douces de la maquette v5 (FilAvance) : bulle de Tobi glace, textes secondaires, filets */
  --color-ice-bubble: #eef5f8;
  --color-ice-bubble-text: #1d3557;
  --color-ink: #3d5573;
  --color-mute: #7b8fa5;
  --color-line: #dde7ee;
  --color-soft: #f6f9fb;
  /* Agents (maquette v5) : la couleur ne va que sur l'anneau du médaillon et sur les points ou pastilles, jamais sur les mots */
  --agent-knowledge: #e9a93a;
  --agent-knowledge-ring: #f1d29a;
  --agent-knowledge-soft: #f6e9cf;
  --agent-knowledge-text: #8a5a10;
  --agent-assist: #59bfcc;
  --agent-assist-ring: #bfe4ea;
  --agent-assist-soft: #d7eff3;
  --agent-assist-text: #1f6f7c;
  --agent-delivery: #4f5fe0;
  --agent-delivery-ring: #c9cdf7;
  --agent-delivery-soft: #e4e6fb;
  --agent-delivery-text: #3442b8;
  --agent-care: #43ae6a;
  --agent-care-ring: #c3e5cf;
  --agent-care-soft: #dcf1e4;
  --agent-care-text: #23704a;
  --agent-optimize: #f15771;
  --agent-optimize-ring: #ffd0d2;
  --agent-optimize-soft: #ffe5e6;
  --agent-optimize-text: #b02f38;
  /* Fil partagé (28/10) : une teinte douce par personne (avatar de l'en-tête, du volet et des bulles), choisie par
     l'identifiant (assets/lib/thread_speaker.js) ; la bulle d'un collègue, sable très clair, ni blanche ni glacier. */
  --speaker-1-bg: var(--acseo-ice);
  --speaker-1-fg: var(--agent-assist-text);
  --speaker-2-bg: var(--agent-delivery-soft);
  --speaker-2-fg: var(--agent-delivery-text);
  --speaker-3-bg: var(--agent-knowledge-soft);
  --speaker-3-fg: var(--agent-knowledge-text);
  --speaker-4-bg: var(--acseo-pink);
  --speaker-4-fg: var(--acseo-coral-strong);
  --speaker-5-bg: #e5ebf2;
  --speaker-5-fg: var(--acseo-slate);
  --color-colleague-bubble: #fbf8f3;
  --color-colleague-line: #ece3d4;
  /* Fil v5 (lot 3) : en-tête de 56 px, colonne de 660 px, médaillon de 30 px, volet de 340 px */
  --thread-head-h: 3.5rem;
  --thread-col: 41.25rem;
  --thread-col-narrow: 37.5rem; /* 600 px quand le volet s'ouvre entre 1024 et 1439 px */
  --bubble-max: 32.5rem;
  --bubble-user-max: 28.75rem;
  --medal: 1.875rem;
  --radius-bubble-bot: 0.25rem 1rem 1rem;
  --radius-bubble-user: 1rem 1rem 0.25rem;
  --color-head-bg: #fbfcfd;
  --color-line-soft: #eef3f6;
  --color-toggle-on: #eaf4f7;
  --color-step-todo: #c9d6df;
  --color-proof-line: rgb(0 34 80 / 8%);
  --volet-width: 21.25rem;
  --shadow-sheet: 0 -0.5rem 1.5rem rgb(0 34 80 / 12%);
  /* Accueil v5 */
  --home-medal: 5.5rem; /* 88 px, 4rem sur mobile */
  --home-composer-width: 45rem; /* 720 px */
  --color-hand: var(--acseo-blue-strong); /* phrase en Shantell, #006a8a */
  /* Étapes d'une Demande (1 à 5) : corail ou rose = le client doit agir (décision E2) */
  --stage-1-bg: var(--acseo-ice);
  --stage-1-fg: var(--acseo-blue-strong);
  --stage-2-bg: var(--acseo-coral);
  --stage-2-fg: var(--acseo-navy);
  --stage-3-bg: var(--acseo-teal-light);
  --stage-3-fg: var(--acseo-navy);
  --stage-4-bg: var(--acseo-pink);
  --stage-4-fg: var(--acseo-navy);
  --stage-5-bg: var(--acseo-navy);
  --stage-5-fg: #fff;
  /* Charte de mouvement (28/10) : trois durées et deux courbes, rien d'autre. On n'anime que transform, opacity et la
     couleur de l'anneau des agents ; prefers-reduced-motion coupe tout (components/_ui.scss, assets/lib/motion.js).
     fast : survol, retour d'action, sorties ; base : menus, volets, aide, entrée d'un message ; slow : changement de
     scène (relais d'agent, passage Discussion → Tâche). Les valeurs en ms sont reprises dans assets/lib/motion.js. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-rise: 0.25rem; /* montée d'un élément qui entre (4 px) */
  /* Voile du tiroir mobile et du panneau d'aide */
  --color-overlay: rgb(0 34 80 / 55%);
  /* Typographie */
  --font-family-base: montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-hand: "Shantell Sans", "Comic Sans MS", cursive;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: 2rem;
  --font-size-sm: 0.8125rem;
  --font-size-xs: 0.75rem;
  --font-size-2xs: 0.6875rem;
  --font-size-md: 0.875rem;
  --font-size-h3: 1.0625rem;
  --font-size-h2: 1.5rem;
  --line-height-base: 1.5;
  /* Espaces, rayons, largeurs */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-md-plus: 0.875rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;
  --radius-pill: 62.4375rem;
  --content-max-width: 40rem;
  --page-width-home: 65rem;
  --page-width-list: 68.75rem;
  --page-width-form: 47.5rem;
  --sidebar-width: 4.25rem; /* rail d'icônes du bureau (68 px) */
  --drawer-width: 15.5rem; /* tiroir mobile, avec libellés */
  --flyout-width: 18.75rem; /* volets de survol du rail (300 px, maquette RailDeplie) */
  --aside-width: 27.5rem;
  --dossier-width: 22.5rem;
  --help-panel-width: 25rem;
  --login-width: 27.5rem;
  --bp-shell: 51.25rem; /* documentaire : rupture du shell (820 px), voir tools/_mixins.scss */
  --list-width: 21.25rem;
  --shadow-sm: 0 0.125rem 0.5rem rgb(0 34 80 / 8%);
  --touch-target: 2.75rem;
  /* Barres du shell (zones sûres : encoche, indicateur d'accueil) */
  --banner-h: 0rem;
  --topbar-h: 3.5rem;
  --bottom-nav-h: 0rem; /* plus de barre du bas : conservé pour les écrans qui le lisent encore */
  /* Alias hérités (--ds-*) : pointent sur les jetons ci-dessus, supprimés après migration */
  --ds-color-background: var(--color-bg);
  --ds-color-on-background: var(--color-text);
  --ds-color-surface: var(--color-surface);
  --ds-color-surface-bright: var(--color-surface);
  --ds-color-surface-container: var(--acseo-ice);
  --ds-color-surface-container-lowest: #fff;
  --ds-color-surface-container-highest: var(--acseo-ice);
  --ds-color-surface-container-low: var(--acseo-ice);
  --ds-color-surface-container-high: var(--acseo-ice);
  --ds-color-surface-variant: var(--acseo-ice);
  --ds-color-on-surface: var(--color-text);
  --ds-color-on-surface-variant: var(--color-text-muted);
  --ds-color-outline: var(--color-border-strong);
  --ds-color-outline-variant: var(--color-border);
  --ds-color-primary: var(--color-primary);
  --ds-color-on-primary: #fff;
  --ds-color-primary-container: var(--acseo-blue);
  --ds-color-on-primary-container: #fff;
  --ds-color-primary-fixed: var(--acseo-ice);
  --ds-color-on-primary-fixed-variant: var(--acseo-blue-strong);
  --ds-color-secondary: var(--acseo-coral-strong);
  --ds-color-on-secondary: #fff;
  --ds-color-secondary-container: var(--acseo-pink);
  --ds-color-on-secondary-container: var(--acseo-navy);
  --ds-color-secondary-fixed: var(--acseo-pink);
  --ds-color-tertiary: var(--acseo-slate);
  --ds-color-on-tertiary: #fff;
  --ds-color-tertiary-container: var(--acseo-slate);
  --ds-color-on-tertiary-container: #fff;
  --ds-color-tertiary-fixed: var(--acseo-ice);
  --ds-color-on-tertiary-fixed: var(--acseo-navy);
  --ds-color-error: var(--color-danger);
  --ds-color-brand-navy: var(--acseo-navy);
  --ds-color-brand-teal: var(--acseo-blue);
  --ds-color-brand-coral: var(--acseo-coral);
  --ds-color-white: #fff;
  --ds-color-disabled-bg: var(--acseo-ice);
  --ds-color-disabled-text: var(--acseo-slate);
  --ds-color-navy: var(--acseo-navy);
  --ds-color-coral: var(--acseo-coral-strong);
  --ds-color-turquoise: var(--acseo-blue);
  --ds-color-light-mint: var(--acseo-ice);
  --ds-color-bg-light: var(--acseo-ice);
  --ds-color-card-bg: var(--acseo-ice);
  --ds-font-headline: var(--font-family-base);
  --ds-font-body: var(--font-family-base);
  --ds-font-ui: var(--font-family-base);
  --ds-radius-btn: 9999px;
  --ds-radius-card: 1.5rem;
  --ds-shadow-ambient: none;
  --ds-shadow-ambient-hover: 0 0.25rem 1rem rgb(0 34 80 / 10%);
  --ds-shadow-message: none;
  --ds-shadow-composer: 0 0.25rem 1rem rgb(0 34 80 / 8%);
  --ds-spacing-unit: 8px;
  --ds-spacing-gutter: 24px;
  --ds-spacing-margin-mobile: 16px;
  --ds-spacing-card-padding: 32px;
  --ds-spacing-section: 48px;
  --ds-container-max: 1200px;
  --public-nav-h: 4.25rem;
  --public-home-max: 75rem;
  --ds-sidebar-width: var(--sidebar-width);
}

.has-recette-banner {
  --banner-h: 1.875rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

html {
  height: 100%;
}

body {
  background-color: var(--color-bg);
  min-height: 100%;
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

a {
  color: var(--color-primary);
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.15em;
}
a:hover {
  color: var(--color-primary-hover);
}
a:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
a:active {
  color: var(--color-primary-active);
}

button {
  cursor: pointer;
}
button:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

.o-container {
  margin-inline: auto;
  padding-inline: var(--space-lg);
  width: 100%;
  max-width: var(--content-max-width);
}
@media screen and (width < 48rem) {
  .o-container {
    padding-inline: var(--space-md);
  }
}

.o-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.o-stack--lg {
  gap: var(--space-lg);
}

.c-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  width: 1.5em;
  height: 1.5em;
}

.c-skip-link {
  position: absolute;
  top: 0;
  left: 0.5rem;
  z-index: 200;
  transform: translateY(-120%);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background-color: var(--acseo-navy);
  padding: 0.75rem 1rem;
  color: #fff;
  font-weight: 700;
}
.c-skip-link:focus {
  transform: translateY(0);
}

/* Boutons */
.c-button {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-navy);
  padding: 0.5rem 1.25rem;
  min-height: var(--touch-target);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.c-button:hover {
  background-color: var(--acseo-blue-strong);
  color: #fff;
}
.c-button:active {
  background-color: var(--acseo-navy-700);
  color: #fff;
}
.c-button[disabled], .c-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.c-button--accent {
  background-color: var(--color-accent-fill);
  color: #fff;
}
.c-button--accent:hover {
  background-color: var(--color-accent-fill-hover);
  color: #fff;
}
.c-button--accent[disabled], .c-button--accent.is-disabled {
  opacity: 0.55;
}
.c-button--accent:active {
  background-color: var(--acseo-navy-700);
  color: #fff;
}
.c-button--outline {
  border-color: var(--acseo-navy);
  background-color: transparent;
  color: var(--acseo-navy);
}
.c-button--outline:hover {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}
.c-button--ghost {
  background-color: transparent;
  color: var(--acseo-navy);
}
.c-button--ghost:hover {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}
.c-button--danger {
  background-color: var(--color-danger);
  color: #fff;
}
.c-button--danger:hover {
  background-color: #7a1810;
  color: #fff;
}
.c-button--small {
  padding: 0.25rem 0.875rem;
  font-size: var(--font-size-xs);
}

.c-link {
  color: var(--color-text-link);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: underline;
}
.c-link:hover {
  color: var(--acseo-navy);
}

.c-link-back {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  align-self: flex-start;
  color: var(--color-text-link);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}
.c-link-back:hover {
  text-decoration: underline;
}

/* Puces (choix, suggestions) */
.c-chip {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0.5rem 0.875rem;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.c-chip:hover {
  background-color: var(--acseo-ice);
}
.c-chip--solid {
  border-color: transparent;
  background-color: var(--acseo-ice);
  font-weight: 600;
}
.c-chip.is-active, .c-chip--solid.is-active {
  border-color: var(--acseo-navy);
  background-color: var(--acseo-navy);
  color: #fff;
}

/* Pastille de type : Échange ou Demande, identique partout */
.c-kind {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}
.c-kind .c-icon {
  width: 1rem;
  height: 1rem;
}
.c-kind--exchange {
  background-color: var(--acseo-ice);
  color: var(--acseo-blue-strong);
}
.c-kind--anomalie {
  background-color: var(--acseo-pink);
  color: #8f1f27;
}
.c-kind--evolution {
  background-color: var(--acseo-teal-light);
  color: var(--acseo-navy);
}
.c-kind--conception {
  background-color: #e9e4f7;
  color: #3d2d7a;
}
.c-kind--autre {
  background-color: var(--acseo-navy);
  color: #fff;
}

/* Étiquettes et étapes */
.c-tag {
  display: inline-block;
  border-radius: var(--radius-sm);
  background-color: var(--acseo-ice);
  padding: 0.1875rem 0.5rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-xs);
  font-weight: 700;
  /* « À vous de jouer » (lien vers le filtre) : rouge plein, texte blanc, sans soulignement. */
}
.c-tag--accent {
  background-color: var(--acseo-coral);
}
.c-tag--play {
  background-color: var(--color-accent-fill);
  color: #fff;
  text-decoration: none;
}
.c-tag--play:hover, .c-tag--play:focus-visible {
  background-color: var(--color-accent-fill-hover);
  color: #fff;
}
.c-tag--muted {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--acseo-divider);
}

.c-stage {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.625rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
  /* Étape 4 validée, mise en production par ACSEO : couleur d'une étape où ACSEO agit, pas le rose « à vous ». */
}
.c-stage--production {
  background-color: var(--stage-3-bg);
  color: var(--stage-3-fg);
}
.c-stage--1 {
  background-color: var(--stage-1-bg);
  color: var(--stage-1-fg);
}
.c-stage--2 {
  background-color: var(--stage-2-bg);
  color: var(--stage-2-fg);
}
.c-stage--3 {
  background-color: var(--stage-3-bg);
  color: var(--stage-3-fg);
}
.c-stage--4 {
  background-color: var(--stage-4-bg);
  color: var(--stage-4-fg);
}
.c-stage--5 {
  background-color: var(--stage-5-bg);
  color: var(--stage-5-fg);
}

.c-progress {
  display: flex;
  gap: 0.25rem;
  width: 100%;
  max-width: 10rem;
}
.c-progress__bar {
  flex: 1;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  height: 0.3125rem;
}
.c-progress__bar.is-done {
  background-color: var(--acseo-blue-strong);
}
.c-progress__bar.is-current {
  background-color: var(--acseo-teal);
}

/* Cartes */
.c-card {
  border-radius: var(--radius-xl);
  background-color: var(--acseo-ice);
  padding: 1.5rem;
}
.c-card--warm {
  background-color: var(--acseo-pink);
}
.c-card--plain {
  border: 1px solid var(--acseo-divider);
  background-color: #fff;
}
.c-card--alert {
  border: 2px solid var(--acseo-coral);
  background-color: #fff;
}
.c-card--dashed {
  border: 2px dashed var(--acseo-divider);
  background-color: #fff;
}

a.c-card,
button.c-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
a.c-card:hover,
button.c-card:hover {
  background-color: var(--acseo-pink);
  color: inherit;
}

/* Pages */
.o-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem;
  width: 100%;
  max-width: var(--page-width-list);
}
.o-page--home {
  max-width: var(--page-width-home);
}
.o-page--form {
  max-width: var(--page-width-form);
}

.c-page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-end;
  /* Mobile : l'action éventuelle (« Revoir la présentation ») toujours sous le titre, alignée à gauche. */
}
.c-page-head__title {
  font-size: clamp(1.5rem, 4vw, var(--font-size-xl));
  font-weight: 700;
  line-height: 1.2;
}
.c-page-head__subtitle {
  margin-top: 0.375rem;
  color: var(--acseo-blue-strong);
  font-family: var(--font-family-hand);
  font-size: 1.0625rem;
  font-weight: 500;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-page-head {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
}

.c-section-head {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.5rem;
}
.c-section-head__title {
  font-size: 1.0625rem;
  font-weight: 700;
}
.c-section-head__note {
  color: var(--acseo-coral-strong);
  font-family: var(--font-family-hand);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Lignes de liste (filets) */
.c-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 1px solid var(--acseo-divider);
  padding: 0.875rem 0.25rem;
  color: var(--acseo-navy);
  text-decoration: none;
}
.c-row:hover {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}
.c-row__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}
.c-row__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Formulaires */
.c-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.c-field__label {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-field__help {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.c-field__error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-field__input, .c-field__select, .c-field__textarea {
  border: 2px solid var(--acseo-field-border);
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 0.75rem 1rem;
  width: 100%;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  line-height: 1.55;
  resize: vertical;
}
.c-field__input::placeholder, .c-field__select::placeholder, .c-field__textarea::placeholder {
  color: var(--color-text-muted);
}
.c-field__input:focus, .c-field__select:focus, .c-field__textarea:focus {
  outline: 3px solid rgba(0, 125, 161, 0.35);
  outline-offset: 1px;
  border-color: var(--acseo-blue-strong);
}

/* Alertes, états vides */
.c-alert {
  border-radius: var(--radius-lg);
  background-color: var(--acseo-ice);
  padding: 0.875rem 1.125rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-alert--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.c-alert--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}
.c-alert--warm {
  background-color: var(--acseo-pink);
}

.c-empty {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  border: 2px dashed var(--acseo-divider);
  border-radius: var(--radius-xl);
  padding: 2rem 1rem;
  text-align: center;
}
.c-empty__image {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}
.c-empty__text {
  max-width: 30rem;
  font-size: var(--font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* Charte de mouvement (settings/_tokens.scss) : un élément qui arrive en direct (message, carte, relais d'agent, posé par
   assets/lib/motion.js markArriving) entre en fondu en montant de 4 px, une seule fois. */
.is-arriving {
  animation: motion-enter var(--motion-base) var(--ease-out) both;
}

@keyframes motion-enter {
  from {
    opacity: 0;
    transform: translateY(var(--motion-rise));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes motion-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Icône « Discuter » à côté d'un numéro de demande */
.c-chat-icon {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 50%;
  background-color: var(--acseo-ice);
  padding: 0;
  width: var(--touch-target);
  height: var(--touch-target);
  color: var(--acseo-navy);
  text-decoration: none;
  cursor: pointer;
}
.c-chat-icon:hover {
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-chat-icon__form {
  display: inline-flex;
}
.c-chat-icon--small {
  width: 2.25rem;
  height: 2.25rem;
}
.c-chat-icon--small .c-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Issue d'un Échange et frise Échange -> issue */
.c-outcome {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}
.c-outcome .c-icon {
  width: 1rem;
  height: 1rem;
}
.c-outcome--en-cours {
  background-color: var(--acseo-ice);
  color: var(--acseo-blue-strong);
}
.c-outcome--en-pause {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
.c-outcome--echec {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}
.c-outcome--termine {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.c-outcome--humain {
  background-color: var(--acseo-pink);
  color: #8f1f27;
}
.c-outcome--demande {
  background-color: var(--acseo-navy);
  color: #fff;
}

.c-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  /* Tâche née de l'Échange (CONTRACT § 18) : son lien puis la pastille de son étape. */
}
.c-flow__step {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.c-flow__arrow {
  display: flex;
  color: var(--color-text-muted);
}
.c-flow__text {
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-flow__task {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}
.c-flow__child {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-text-link);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* Menu replié (rail de 68 px) : ces règles du bureau ne valent que sans la classe is-nav-expanded sur <html>
   (menu déplié, nav_expand.js) ; déplié, le menu reprend le rendu du tiroir, ajusté plus bas. */
/* Défilement discret sur le navy (retour d'Alexandre, 30/10) : barre fine aux couleurs du menu, pouce clair
   semi-transparent qui ne se montre qu'au survol ou au focus, piste transparente. Les navigateurs récents lisent
   scrollbar-width et scrollbar-color ; ::-webkit-scrollbar sert à Safari. */
/* Enveloppe du shell : sans boîte propre, ses enfants restent des enfants flex de .c-app */
.c-shell {
  display: contents;
}

body.is-drawer-open {
  overflow: hidden;
}

.c-app {
  --topbar-total: calc(var(--topbar-h) + env(safe-area-inset-top));
  display: flex;
  background-color: var(--color-bg);
  min-height: 100dvh;
  color: var(--color-text);
}
.c-app__column {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100dvh - var(--banner-h));
}
.c-app__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  outline: 0;
  padding-right: env(safe-area-inset-right);
  padding-bottom: var(--bottom-nav-h);
  padding-left: env(safe-area-inset-left);
  min-width: 0;
  /* Écran plein hauteur (fil de chat) : le défilement est géré dans la page */
}
.c-app__main--fill {
  padding-bottom: 0;
  height: calc(100dvh - var(--banner-h) - var(--topbar-total) - var(--bottom-nav-h));
  overflow: hidden;
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-app__main--fill {
    height: calc(100dvh - var(--banner-h));
  }
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-app__main {
    padding-bottom: 0;
  }
}

/* Navigation de l'espace connecté. Sous 820 px : tiroir navy pleine hauteur ouvert par le burger, avec libellés et
   listes dépliées. À partir de 820 px : rail d'icônes navy de 68 px (maquette v5 « FilAvance ») ; « Échanges »,
   « Demandes » et l'avatar ouvrent un volet clair au survol et au focus clavier. */
.c-shell-nav {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  gap: 1rem;
  z-index: 50;
  transform: translateX(-100%);
  visibility: hidden;
  background-color: var(--color-nav-bg);
  padding: calc(1.25rem + env(safe-area-inset-top)) 0.875rem calc(1rem + env(safe-area-inset-bottom)) calc(0.875rem + env(safe-area-inset-left));
  box-shadow: var(--ds-shadow-ambient-hover);
  width: var(--drawer-width);
  max-width: 100vw;
  height: 100dvh;
  color: var(--color-nav-text-strong);
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
  overflow-y: auto;
  /* Liste des projets : flottante sous le bouton, par-dessus le menu, qu'elle ne pousse plus (charte de mouvement,
     28/10) ; elle entre en fondu court. Replié, le rail la place en volet clair à droite (plus bas, $rail). */
  /* Marque du projet : deux lettres sur fond blanc atténué (plus de teal vif). */
  /* « Écrire à Tobi » : fond blanc, navy dessus ; jamais en corail (réservé à ce que le client doit faire). */
  /* Bout droit de l'en-tête : « Tout voir » puis le chevron de repli. */
  /* Chevron de repli (nav_fold_controller.js, tiroir seulement) : petit, discret, montré au survol ou au focus de
     l'en-tête ; toujours visible sur écran tactile et quand la section est repliée (pour la retrouver). */
  /* « Tout voir » : petit lien discret aligné à droite de l'en-tête. */
  /* Échange récent et Demande active : titre sur 2 lignes. */
  /* Menu client « Menu 2 » (PO, 30/10) : sous « Discussions », un sujet par ligne, rond de l'agent (c-subject-marker),
     titre sur une ligne, ligne de statut en 11 px dessous (corail clair quand c'est au client, blanc atténué sinon). */
  /* S10 : Demande d'un collègue (lecture seule), atténuée ; le prénom la distingue aussi sans la couleur. */
  /* Date relative d'un élément et chevron de « Tout voir » : seulement dans le volet du rail (le tiroir garde son rendu). */
  /* Propres au menu déplié du bureau (plus bas) : « Tout voir » en fin de liste, point d'étape, chevron du rail. */
  /* Point corail de « Demandes » : une Demande attend le client (needs_client) ou il a quelque chose à faire. */
  /* Menu de l'administration (lot A, _shell_admin_nav.html.twig) : groupes titrés en petites capitales discrètes,
     puis « Voir en tant que » en petit bouton secondaire. Tiroir et menu déplié ; le rail replié est plus bas. */
  /* Bas du menu : mêmes lignes que les entrées du dessus (marge, colonne d'icône, hauteur), sans filet ; la ligne du
     compte se détache par un petit espace. */
  /* Ligne du compte : le compte prend la place, le chevron du menu (bureau déplié) se range à droite. */
  /* Compte : l'avatar est centré sur la colonne des icônes (marge gauche réduite de sa demi-largeur en plus). */
  /* Nom et rôle sur une ligne chacun, coupés en points de suspension ; le nom entier est dans son title. */
  /* Volet de l'avatar : dans le tiroir, seul le bouton de déconnexion se voit, à droite du compte. */
}
.c-shell-nav.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .c-shell-nav.is-open {
    transition: none;
  }
}
.c-shell-nav :focus-visible {
  outline-color: #fff;
}
.c-shell-nav__close {
  display: flex;
  position: absolute;
  top: calc(0.5rem + env(safe-area-inset-top));
  right: 0.5rem;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-nav-text);
  cursor: pointer;
}
.c-shell-nav__close:hover {
  background-color: var(--color-nav-active);
  color: #fff;
}
.c-shell-nav__brand {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  padding: 0.25rem 2.75rem 0.25rem 0.375rem;
}
.c-shell-nav__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-md);
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
}
.c-shell-nav__logo img {
  width: 1.875rem;
  height: auto;
}
.c-shell-nav__by {
  color: var(--color-nav-text);
  font-family: var(--font-family-hand);
  font-size: var(--font-size-md);
  font-weight: 500;
}
.c-shell-nav__project {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-nav-active);
  padding: 0.5rem 0.625rem;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
}
.c-shell-nav__project .c-icon {
  flex-shrink: 0;
  margin-left: auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-nav-text);
}
.c-shell-nav__project[aria-haspopup] {
  cursor: pointer;
}
.c-shell-nav__selector {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 0.25rem;
}
.c-shell-nav__menu {
  display: flex;
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  flex-direction: column;
  z-index: 5;
  border: 1px solid var(--color-nav-line);
  border-radius: var(--radius-md);
  background-color: var(--acseo-navy-700);
  padding: 0.25rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.28);
  max-height: 16.5rem;
  overflow-y: auto;
  animation: motion-enter var(--motion-fast) var(--ease-out);
}
.c-shell-nav__menu[hidden] {
  display: none;
}
.c-shell-nav__option {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  padding: 0.4375rem 0.625rem;
  width: 100%;
  color: var(--color-nav-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.c-shell-nav__option:hover, .c-shell-nav__option.is-current {
  color: #fff;
}
.c-shell-nav__option:hover {
  background-color: var(--color-nav-active);
}
.c-shell-nav__option .c-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.c-shell-nav__option-name {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-shell-nav__project-mark {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 0.625rem;
  background-color: var(--color-nav-avatar);
  width: 2rem;
  height: 2rem;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  /* Logo du projet : sur fond blanc, contenu dans le carré, sans déformation. */
}
.c-shell-nav__project-mark.has-logo {
  background-color: #fff;
  overflow: hidden;
}
.c-shell-nav__project-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.c-shell-nav__project-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.c-shell-nav__project-label {
  color: var(--color-nav-text);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-shell-nav__project-name {
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-shell-nav__new {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: 0.5625rem 0.75rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-decoration: none;
}
.c-shell-nav__new:hover {
  background-color: var(--color-ice-bubble);
}
.c-shell-nav__new.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.c-shell-nav__new.is-disabled:hover {
  background-color: #fff;
}
.c-shell-nav__new .c-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}
.c-shell-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.c-shell-nav__item {
  position: relative;
}
.c-shell-nav__recent {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0 0.25rem 1.25rem;
}
.c-shell-nav__group {
  margin: 0;
  padding: 0 0.75rem 0.25rem;
  color: var(--color-nav-text);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-shell-nav__head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-right: 0.5rem;
  min-height: 1.375rem;
  /* Le titre cède la place (points de suspension) : « Tout voir » et le chevron restent dans le tiroir, sans
     défilement horizontal (recette du 28/10 : contenu de 302 px pour un tiroir de 233 px). */
}
.c-shell-nav__head .c-shell-nav__group {
  flex: 1 1 auto;
  padding-right: 0;
  padding-bottom: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-shell-nav__head-end {
  display: flex;
  flex: none;
  gap: 0.25rem;
  align-items: center;
  margin-left: auto;
}
.c-shell-nav__fold {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  padding: 0.25rem;
  color: var(--color-nav-text);
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.c-shell-nav__fold:hover, .c-shell-nav__fold:focus-visible {
  color: #fff;
}
.is-collapsed .c-shell-nav__fold, .c-shell-nav__head:hover .c-shell-nav__fold, .c-shell-nav__head:focus-within .c-shell-nav__fold {
  opacity: 1;
}
@media (hover: none) {
  .c-shell-nav__fold {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-shell-nav__fold {
    transition: none;
  }
}
.c-shell-nav__fold-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.2s ease;
}
.is-collapsed .c-shell-nav__fold-icon {
  transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce) {
  .c-shell-nav__fold-icon {
    transition: none;
  }
}
.c-shell-nav__fold-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.c-shell-nav__fold-body[hidden] {
  display: none;
}
.c-shell-nav__more {
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.25rem;
  color: var(--color-nav-text);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  /* Replié : seul le titre reste ; « Tout voir » part avec la liste. */
}
.c-shell-nav__more:hover, .c-shell-nav__more:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.is-collapsed .c-shell-nav__more {
  display: none;
}
.c-shell-nav__empty {
  margin: 0;
  padding: 0 0.75rem;
  color: var(--color-nav-text);
  font-size: var(--font-size-sm);
}
.c-shell-nav__recent-link, .c-shell-nav__request {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  border-radius: var(--radius-md);
  padding: 0.4375rem 0.75rem;
  color: var(--color-nav-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}
.c-shell-nav__recent-link:hover, .c-shell-nav__recent-link:focus-visible, .c-shell-nav__recent-link.is-active, .c-shell-nav__request:hover, .c-shell-nav__request:focus-visible, .c-shell-nav__request.is-active {
  background-color: var(--color-nav-active);
  color: #fff;
}
.c-shell-nav__subject {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.5rem;
  color: var(--color-nav-text-strong);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}
.c-shell-nav__subject:hover, .c-shell-nav__subject:focus-visible, .c-shell-nav__subject.is-active {
  background-color: var(--color-nav-active);
}
.c-shell-nav__subject .c-subject-marker {
  margin-top: 0.3125rem;
}
.c-shell-nav__subject-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}
.c-shell-nav__subject-title {
  display: block;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-shell-nav__subject-status {
  overflow: hidden;
  color: var(--color-nav-text);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-shell-nav__subject--yours .c-shell-nav__subject-status {
  color: var(--color-nav-yours);
  font-weight: 600;
}
.c-shell-nav__request--shared {
  font-weight: 400;
}
.c-shell-nav__recent-title, .c-shell-nav__request-title {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.c-shell-nav__recent-title {
  min-width: 0;
}
.c-shell-nav__recent-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.c-shell-nav__date, .c-shell-nav__more-icon {
  display: none;
}
.c-shell-nav__all, .c-shell-nav__stage-dot, .c-shell-nav__expand {
  display: none;
}
.c-shell-nav__request-owner {
  font-size: var(--font-size-2xs);
  font-style: italic;
  font-weight: 400;
}
.c-shell-nav__request-icon {
  flex-shrink: 0;
  padding-top: 0.0625rem;
}
.c-shell-nav__request-icon .c-kind {
  background-color: transparent;
  padding: 0;
  color: inherit;
}
.c-shell-nav__request-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.c-shell-nav__request-meta {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}
.c-shell-nav__stage {
  padding: 0.0625rem 0.5rem;
  font-size: var(--font-size-2xs);
}
.c-shell-nav__dot {
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  background-color: var(--color-nav-dot);
  width: 0.4375rem;
  height: 0.4375rem;
  /* « À vous de jouer » : rose sur le navy du tiroir, comme la pastille de l'étape où le client doit agir. */
}
.c-shell-nav__dot--client {
  background-color: var(--acseo-pink);
}
.c-shell-nav__link {
  display: flex;
  position: relative;
  gap: 0.75rem;
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  padding: 0.5625rem 0.75rem;
  width: 100%;
  color: var(--color-nav-text);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.c-shell-nav__link:hover, .c-shell-nav__link.is-active {
  background-color: var(--color-nav-active);
  color: #fff;
}
.c-shell-nav__link .c-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}
.c-shell-nav__label {
  flex: 1;
  min-width: 0;
}
.c-shell-nav__alert {
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-nav-dot);
  width: 0.4375rem;
  height: 0.4375rem;
}
.c-shell-nav__admin {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.c-shell-nav__admin-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.c-shell-nav__admin-title {
  margin: 0;
  padding: 0 0.75rem;
  color: var(--color-nav-text);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-shell-nav__view-as {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  align-self: flex-start;
  margin-left: 0.5rem;
  border: 1px solid var(--color-nav-line);
  border-radius: var(--radius-md);
  padding: 0.375rem 0.75rem;
  color: var(--color-nav-text);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.c-shell-nav__view-as:hover, .c-shell-nav__view-as.is-active {
  background-color: var(--color-nav-active);
  color: #fff;
}
.c-shell-nav__view-as .c-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.c-shell-nav__foot {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.c-shell-nav__me {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  margin-top: 0.375rem;
  min-width: 0;
}
.c-shell-nav__user {
  display: flex;
  position: relative;
  flex: 1;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
}
.c-shell-nav__account {
  display: flex;
  flex: 1;
  gap: 0.625rem;
  align-items: center;
  border-radius: var(--radius-md);
  padding: 0.3125rem 0.5rem 0.3125rem 0.3125rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.c-shell-nav__account:hover, .c-shell-nav__account.is-active {
  background-color: var(--color-nav-active);
}
.c-shell-nav__avatar {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-nav-avatar);
  width: 2.125rem;
  height: 2.125rem;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-shell-nav__user-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}
.c-shell-nav__user-name, .c-shell-nav__user-role {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-shell-nav__user-name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.25;
}
.c-shell-nav__user-role {
  color: var(--color-nav-text);
  font-size: var(--font-size-xs);
}
.c-shell-nav__flyout--user {
  display: flex;
  flex-shrink: 0;
}
.c-shell-nav__flyout-user {
  display: none;
}
.c-shell-nav__logout {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-nav-text);
  font: inherit;
  cursor: pointer;
}
.c-shell-nav__logout:hover {
  background-color: var(--color-nav-active);
  color: #fff;
}
.c-shell-nav__logout .c-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}
.c-shell-nav__logout-text {
  position: absolute;
  clip-path: inset(50%);
  margin: -1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .c-shell-nav {
    transition: none;
  }
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-shell-nav {
    position: sticky;
    top: var(--banner-h);
    gap: 0.375rem;
    align-items: center;
    transform: none;
    visibility: visible;
    padding: 1.125rem 0;
    box-shadow: none;
    width: var(--sidebar-width);
    height: calc(100dvh - var(--banner-h));
    overflow: visible;
    flex-shrink: 0;
    transition: none;
    /* Boutons du rail : 42 × 42, rayon 12, icône de 20 px, blanc atténué ; actif = fond blanc à 10 %. */
    /* Menu de l'administration (05/11, retour d'Alexandre) : plus haut que l'écran, il débordait du menu (hauteur
       fixe, overflow visible pour les volets) et allongeait la page : défilement sur une page courte et bande
       blanche sous le menu. Il défile maintenant dans le menu, entre la marque et le pied. */
    /* Menu de l'administration replié : icônes seules, titres de groupe lus par les lecteurs d'écran seulement,
       un filet court entre deux groupes ; « Voir en tant que » en petite icône cerclée. */
    /* Replié : le chevron passe au-dessus de l'avatar, centré dans le rail. */
    /* Chevron « Déplier le menu » : 30 px, bordure fine blanche atténuée ; au-dessus de l'avatar replié, à droite
       du compte déplié. */
    /* Volets clairs du rail : à droite, fond blanc, ombre douce, rayon 12 ; ouverts au survol et au focus
       clavier, refermés avec un petit délai pour pouvoir y glisser la souris. Le pont (::before) couvre l'espace
       entre l'icône et le volet. */
    /* Passage d'une icône à l'autre : le volet précédent part tout de suite, sans se superposer au nouveau. */
    /* Volet de l'avatar : aligné en bas, nom et rôle, puis « Se déconnecter ». */
    /* Sélecteur de projet : même volet clair, ouvert au clic (project_menu_controller.js). */
    /* Listes dans le volet : textes ink, survol et page active en glace, sans chevron de repli. */
    /* Maquette RailDeplie : chaque élément sur une seule ligne coupée en ellipse, la date relative dessous. */
    /* Trois derniers échanges dans le volet ; le tiroir garde la liste complète. */
    /* Sujets du client sur le volet clair : textes ink, statut ardoise, « à vous » en corail foncé (5:1 sur blanc). */
    /* Sur fond blanc : « à vous de jouer » en corail, « nouveau » en bleu (le rose ne se verrait pas). */
  }
  :root:not(.is-nav-expanded) .c-shell-nav__close, :root:not(.is-nav-expanded) .c-shell-nav__by, :root:not(.is-nav-expanded) .c-shell-nav__label, :root:not(.is-nav-expanded) .c-shell-nav__project-text, :root:not(.is-nav-expanded) .c-shell-nav__project .c-icon {
    display: none;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__brand {
    margin-bottom: 0.875rem;
    padding: 0;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__project, :root:not(.is-nav-expanded) .c-shell-nav__new, :root:not(.is-nav-expanded) .c-shell-nav__link, :root:not(.is-nav-expanded) .c-shell-nav__account {
    flex: none;
    gap: 0;
    justify-content: center;
    padding: 0;
    width: 2.625rem;
    height: 2.625rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__project {
    background-color: transparent;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__project[aria-haspopup]:hover, :root:not(.is-nav-expanded) .c-shell-nav__project[aria-expanded=true] {
    background-color: var(--color-nav-active);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__selector {
    position: relative;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__new {
    margin-bottom: 0.625rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__new .c-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__main {
    gap: 0.375rem;
    align-items: center;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__alert {
    position: absolute;
    top: 0.5625rem;
    right: 0.5625rem;
  }
  .c-shell-nav__admin {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
  }
  .c-shell-nav__admin::-webkit-scrollbar {
    width: 0.375rem;
  }
  .c-shell-nav__admin::-webkit-scrollbar-track {
    background: transparent;
  }
  .c-shell-nav__admin::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: transparent;
  }
  .c-shell-nav__admin:hover, .c-shell-nav__admin:focus-within {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  }
  .c-shell-nav__admin:hover::-webkit-scrollbar-thumb, .c-shell-nav__admin:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.28);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__admin, :root:not(.is-nav-expanded) .c-shell-nav__admin-group, :root:not(.is-nav-expanded) .c-shell-nav__admin-list {
    gap: 0.25rem;
    align-items: center;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__admin-title {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__admin-group + .c-shell-nav__admin-group::before {
    display: block;
    margin: 0.375rem 0;
    background-color: var(--color-nav-line);
    width: 1.5rem;
    height: 1px;
    content: "";
  }
  :root:not(.is-nav-expanded) .c-shell-nav__view-as {
    justify-content: center;
    align-self: center;
    margin: 0.5rem 0 0;
    padding: 0;
    width: 2.25rem;
    height: 2.25rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__foot {
    gap: 0.375rem;
    align-items: center;
    padding-top: 0;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__me {
    flex-direction: column-reverse;
    gap: 0.375rem;
    margin-top: 0;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__user {
    flex: none;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__account {
    border-radius: 50%;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__account:hover, :root:not(.is-nav-expanded) .c-shell-nav__account.is-active {
    background-color: transparent;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__account:hover .c-shell-nav__avatar, :root:not(.is-nav-expanded) .c-shell-nav__account.is-active .c-shell-nav__avatar {
    background-color: rgba(255, 255, 255, 0.22);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__user-text {
    display: none;
  }
  .c-shell-nav__expand {
    display: flex;
    flex: none;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.5rem;
    background-color: transparent;
    padding: 0;
    width: 1.875rem;
    height: 1.875rem;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
  }
  .c-shell-nav__expand:hover {
    background-color: var(--color-nav-active);
    color: #fff;
  }
  .c-shell-nav__expand-icon {
    width: 1rem;
    height: 1rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout, :root:not(.is-nav-expanded) .c-shell-nav__menu {
    position: absolute;
    top: 0;
    left: calc(100% + 1.3125rem);
    z-index: 60;
    border-radius: var(--radius-md);
    background-color: #fff;
    padding: 0.75rem 0.5rem;
    box-shadow: 0 0.5rem 1.75rem rgba(0, 34, 80, 0.14), 0 0 0 1px var(--color-line);
    width: var(--flyout-width);
    color: var(--color-ink);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout :focus-visible, :root:not(.is-nav-expanded) .c-shell-nav__menu :focus-visible {
    outline-color: var(--color-focus);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease 0.18s, visibility 0s linear 0.3s;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout::before {
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 1.3125rem;
    content: "";
  }
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) and (prefers-reduced-motion: reduce) {
  :root:not(.is-nav-expanded) .c-shell-nav__flyout {
    transition: visibility 0s linear 0.3s;
  }
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  :root:not(.is-nav-expanded) .c-shell-nav__item--fly:hover > .c-shell-nav__flyout, :root:not(.is-nav-expanded) .c-shell-nav__item--fly:focus-within > .c-shell-nav__flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__item--fly.is-dismissed > .c-shell-nav__flyout {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__main:has(.c-shell-nav__item--fly:hover) .c-shell-nav__item--fly:not(:hover) > .c-shell-nav__flyout {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout--user {
    top: auto;
    bottom: 0;
    flex-direction: column;
    gap: 0.25rem;
    width: 13.75rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout-user {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    border-bottom: 1px solid var(--color-line);
    padding: 0 0.5rem 0.5rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout-name {
    overflow-wrap: anywhere;
    color: var(--acseo-navy);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout-role {
    color: var(--color-mute);
    font-size: var(--font-size-xs);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__logout {
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    padding: 0.4375rem 0.5rem;
    width: 100%;
    height: auto;
    color: var(--color-ink);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__logout:hover {
    background-color: var(--color-ice-bubble);
    color: var(--acseo-navy);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__logout-text {
    position: static;
    clip-path: none;
    margin: 0;
    width: auto;
    height: auto;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__menu {
    gap: 0.125rem;
    padding: 0.375rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__menu[hidden] {
    display: none;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__option {
    color: var(--color-ink);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__option:hover, :root:not(.is-nav-expanded) .c-shell-nav__option.is-current {
    color: var(--acseo-navy);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__option:hover {
    background-color: var(--color-ice-bubble);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__recent {
    padding: 0;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__head {
    padding: 0 0 0.25rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__group {
    padding-left: 0.625rem;
    color: var(--color-mute);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold {
    display: none;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body[hidden] {
    display: flex;
    max-height: calc(100dvh - var(--banner-h) - 14rem);
    overflow-y: auto;
    /* Volet clair du rail : pouce gris, comme le fil. */
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body::-webkit-scrollbar, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body[hidden]::-webkit-scrollbar {
    width: 0.375rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body::-webkit-scrollbar-track, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body[hidden]::-webkit-scrollbar-track {
    background: transparent;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body::-webkit-scrollbar-thumb, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body[hidden]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: transparent;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body:hover, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body:focus-within, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body[hidden]:hover, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body[hidden]:focus-within {
    scrollbar-color: var(--color-border) transparent;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body:hover::-webkit-scrollbar-thumb, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body:focus-within::-webkit-scrollbar-thumb, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body[hidden]:hover::-webkit-scrollbar-thumb, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__fold-body[hidden]:focus-within::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__more {
    display: inline-flex;
    gap: 0.125rem;
    align-items: center;
    color: var(--color-text-link);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__more:hover, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__more:focus-visible {
    color: var(--acseo-navy);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__more-icon {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__empty {
    color: var(--color-mute);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__recent-title, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__request-title {
    display: block;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__date {
    display: block;
    color: var(--color-mute);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    line-height: 1.3;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__request-body {
    gap: 0.125rem;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__recent-link, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__request {
    padding: 0.4375rem 0.625rem;
    color: var(--color-ink);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__recent-link:hover, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__recent-link:focus-visible, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__recent-link.is-active, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__request:hover, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__request:focus-visible, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__request.is-active {
    background-color: var(--color-ice-bubble);
    color: var(--acseo-navy);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__recent:not(.c-shell-nav__demandes, .c-shell-nav__subjects) li:nth-child(n+4) {
    display: none;
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__subject {
    color: var(--color-ink);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__subject:hover, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__subject:focus-visible, :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__subject.is-active {
    background-color: var(--color-ice-bubble);
    color: var(--acseo-navy);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__subject-status {
    color: var(--color-text-muted);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__subject--yours .c-shell-nav__subject-status {
    color: var(--acseo-coral-strong);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__dot {
    background-color: var(--acseo-blue);
  }
  :root:not(.is-nav-expanded) .c-shell-nav__flyout .c-shell-nav__dot--client {
    background-color: var(--acseo-coral);
  }
}

/* Menu déplié (maquette RailDeplie, partie droite) : 256 px, rendu du tiroir (libellés, projet, « Écrire à Tobi »), et
   sous Échanges et Demandes les 3 derniers éléments puis « Tout voir » ; les volets de survol ne s'ouvrent plus (leurs
   règles ne valent que replié, $rail). Le contenu se décale avec --sidebar-width ; le mobile garde son tiroir. */
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .is-nav-expanded {
    --sidebar-width: 16rem;
  }
  .is-nav-expanded .c-shell-nav {
    gap: 0.25rem;
    align-items: stretch;
    padding: 1.125rem 0.875rem 0.875rem;
    overflow: hidden auto;
    /* La place de la barre est réservée : déplier une liste ne décale jamais les libellés. */
    scrollbar-gutter: stable;
    /* Sous-liste : filet à gauche, titres sur une ligne, point d'étape pour une Demande. */
    /* « &__recent &__list » répéterait le préfixe .is-nav-expanded : un seul & ici. */
    /* « Tout voir » : son texte s'aligne sur celui des éléments au-dessus (après le point d'étape pour les Tâches). */
    /* Pastille de la cloche : en retrait du bord droit, comme les compteurs des listes. */
    /* Chevron « Réduire le menu » : sur la ligne du compte, à droite, pointe vers la gauche. */
  }
  .is-nav-expanded .c-shell-nav__close, .is-nav-expanded .c-shell-nav__head, .is-nav-expanded .c-shell-nav__request-icon, .is-nav-expanded .c-shell-nav__request-meta, .is-nav-expanded .c-shell-nav__request-owner, .is-nav-expanded .c-shell-nav__date {
    display: none;
  }
  .is-nav-expanded .c-shell-nav__brand {
    padding: 0 0.25rem 0.875rem;
  }
  .is-nav-expanded .c-shell-nav__project, .is-nav-expanded .c-shell-nav__new {
    margin-bottom: 0.375rem;
  }
  .is-nav-expanded .c-shell-nav__recent {
    gap: 0;
    margin: 0.125rem 0 0.5rem 1.375rem;
    border-left: 1px solid var(--color-nav-line);
    padding: 0 0 0 0.75rem;
  }
  .is-nav-expanded .c-shell-nav__fold-body, .is-nav-expanded .c-shell-nav__fold-body[hidden] {
    display: flex;
    gap: 0;
  }
  .is-nav-expanded .c-shell-nav__recent:not(.c-shell-nav__subjects) li:nth-child(n+4) {
    display: none;
  }
  .is-nav-expanded .c-shell-nav__recent-link, .is-nav-expanded .c-shell-nav__request {
    gap: 0.5rem;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.5rem;
    font-size: 0.7813rem;
    font-weight: 500;
  }
  .is-nav-expanded .c-shell-nav__recent-title, .is-nav-expanded .c-shell-nav__request-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .is-nav-expanded .c-shell-nav__stage-dot {
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-nav-text);
    width: 0.4375rem;
    height: 0.4375rem;
  }
  .is-nav-expanded .c-shell-nav__stage-dot--client {
    background-color: var(--acseo-coral);
  }
  .is-nav-expanded .c-shell-nav__stage-dot--delivery {
    background-color: var(--agent-delivery);
  }
  .is-nav-expanded .c-shell-nav__stage-dot--assist {
    background-color: var(--agent-assist);
  }
  .is-nav-expanded .c-shell-nav__all {
    display: block;
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.5rem;
    color: #9fd6df;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-decoration: none;
  }
  .is-nav-expanded .c-shell-nav__all:hover, .is-nav-expanded .c-shell-nav__all:focus-visible {
    color: #fff;
    text-decoration: underline;
  }
  .is-nav-expanded .c-shell-nav .c-shell-nav__demandes .c-shell-nav__all {
    padding-left: 1.4375rem;
  }
  .is-nav-expanded .c-shell-nav__empty {
    padding: 0.375rem 0.5rem;
    font-size: var(--font-size-xs);
  }
  .is-nav-expanded .c-shell-nav .c-shell-nav__bell-count {
    margin-right: 0.25rem;
  }
  .is-nav-expanded .c-shell-nav__expand {
    width: 1.75rem;
    height: 1.75rem;
  }
  .is-nav-expanded .c-shell-nav__expand-icon {
    transform: rotate(180deg);
  }
}
/* Voile du tiroir mobile */
.c-shell__scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: var(--color-overlay);
}
.c-shell__scrim[hidden] {
  display: none;
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-shell__scrim {
    display: none;
  }
}

/* Bandeau haut (mobile) */
.c-shell-topbar {
  display: flex;
  position: sticky;
  top: var(--banner-h);
  gap: 0.625rem;
  align-items: center;
  z-index: 20;
  background-color: var(--color-nav-bg);
  padding: env(safe-area-inset-top) calc(0.875rem + env(safe-area-inset-right)) 0 calc(0.875rem + env(safe-area-inset-left));
  height: var(--topbar-total, calc(var(--topbar-h) + env(safe-area-inset-top)));
  color: #fff;
}
.c-shell-topbar :focus-visible {
  outline-color: #fff;
}
.c-shell-topbar__burger {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  width: var(--touch-target);
  height: var(--touch-target);
  color: #fff;
  cursor: pointer;
}
.c-shell-topbar__burger:hover {
  background-color: var(--color-nav-active);
}
.c-shell-topbar__logo {
  display: flex;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0.3125rem 0.5rem;
}
.c-shell-topbar__logo img {
  width: auto;
  height: 1.25rem;
}
.c-shell-topbar__project {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}
.c-shell-topbar__label {
  color: var(--color-nav-text);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-shell-topbar__name {
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-shell-topbar__avatar {
  display: flex;
  position: relative;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-nav-avatar);
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-decoration: none;
}
.c-shell-topbar__badge {
  display: flex;
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-coral);
  padding: 0 0.3125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-2xs);
  font-weight: 800;
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-shell-topbar {
    display: none;
  }
}

/* Menu déplié : le titre d'une liste (« Discussions récentes », « Tâches en cours ») répète le lien juste au-dessus ; il
   reste pour les lecteurs d'écran (titre de la section). Le tiroir mobile le montre depuis le 28/10 (mobile compact : sans
   lui, « Tout voir » et le chevron restaient seuls à droite), comme le volet du rail replié. */
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .is-nav-expanded .c-shell-nav__head > .c-shell-nav__group {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}
/* Tiroir mobile compact (retour d'Alexandre du 28/10, relu par Audit design) : éléments sur une ligne, texte aligné entre
   Discussions et Tâches, l'étape d'une Tâche en point coloré (corail seulement quand le client doit agir) et en petit
   texte atténué, plus de pastille pleine. */
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-shell-nav {
    /* Discussion sans point d'étape : son titre démarre au même retrait que celui d'une Tâche (point + écart). */
    /* Étape en texte court atténué ; le point corail du dessus dit déjà « à vous ». */
  }
  .c-shell-nav__recent-link, .c-shell-nav__request {
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .c-shell-nav__recent-link {
    padding-left: 1.4375rem;
  }
  .c-shell-nav__recent-title, .c-shell-nav__request-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-shell-nav__request-icon {
    display: none;
  }
  .c-shell-nav__request-body {
    gap: 0.0625rem;
  }
  .c-shell-nav__stage-dot {
    display: block;
    flex-shrink: 0;
    margin-top: 0.375rem;
    border-radius: 50%;
    background-color: var(--color-nav-text);
    width: 0.4375rem;
    height: 0.4375rem;
  }
  .c-shell-nav__stage-dot--client {
    background-color: var(--acseo-coral);
  }
  .c-shell-nav__stage-dot--delivery {
    background-color: var(--agent-delivery);
  }
  .c-shell-nav__stage-dot--assist {
    background-color: var(--agent-assist);
  }
  .c-shell-nav__stage {
    background-color: transparent;
    padding: 0;
    color: var(--color-nav-text);
    font-size: var(--font-size-2xs);
    font-weight: 500;
  }
  .c-shell-nav__request-meta .c-shell-nav__dot--client {
    display: none;
  }
  .c-shell-nav__request-owner {
    font-style: normal;
  }
}
/* Menu (tiroir, menu déplié) et liste des projets du sélecteur, sur le navy : barre fine et claire au survol. */
.c-shell-nav,
.c-shell-nav__menu {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}
.c-shell-nav::-webkit-scrollbar,
.c-shell-nav__menu::-webkit-scrollbar {
  width: 0.375rem;
}
.c-shell-nav::-webkit-scrollbar-track,
.c-shell-nav__menu::-webkit-scrollbar-track {
  background: transparent;
}
.c-shell-nav::-webkit-scrollbar-thumb,
.c-shell-nav__menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: transparent;
}
.c-shell-nav:hover, .c-shell-nav:focus-within,
.c-shell-nav__menu:hover,
.c-shell-nav__menu:focus-within {
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.c-shell-nav:hover::-webkit-scrollbar-thumb, .c-shell-nav:focus-within::-webkit-scrollbar-thumb,
.c-shell-nav__menu:hover::-webkit-scrollbar-thumb,
.c-shell-nav__menu:focus-within::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.28);
}

/*
 * Accueil v5 (lot 2, maquettes AccueilV5, AccueilV5Todo, AccueilV5Todo3, AccueilMobileV5) : une scène, pas une barre.
 * Projet et agents en haut, médaillon de Tobi, salutation, phrase manuscrite, un champ, trois pistes, « À vous de
 * jouer », « Vos derniers échanges ». Couleur d'agent : seulement sur l'anneau du médaillon et sur les points.
 * Cinématique d'envoi : .is-leaving posée par home_composer_controller.js (home_send_motion.js).
 */
.c-home {
  display: flex;
  position: relative;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  padding: 1.375rem 2.5rem 3rem;
  width: 100%;
  overflow: hidden;
}
.c-home > :not(.c-home-shape, .c-composer-home) {
  position: relative;
  z-index: 1;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-home {
    padding: 0 var(--space-md) var(--space-xl);
    /* Même ordre qu'au bureau, mais les agents passent sous la phrase (le projet est déjà dans la barre du haut). */
  }
  .c-home > * {
    order: 2;
  }
}

/* Formes ACSEO en décor, coupées par la scène (jamais de défilement horizontal). */
.c-home-shape {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.c-home-shape--ice {
  top: -3.75rem;
  left: 2.5rem;
  opacity: 0.55;
  width: 13.75rem;
}
.c-home-shape--coral {
  right: -3.75rem;
  bottom: -2.5rem;
  opacity: 0.9;
  width: 21.25rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-home-shape--ice {
    left: -2.5rem;
    width: 8.75rem;
  }
  .c-home-shape--coral {
    opacity: 0.5;
    width: 10rem;
  }
}

/* Haut de la scène : le projet à gauche, les agents actifs à droite. */
.c-home-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
}
.c-home-top__project {
  display: inline-flex;
  gap: var(--space-sm);
  align-items: center;
  min-width: 0;
  font-weight: 600;
}
.c-home-top__badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  background-color: var(--acseo-ice);
  width: 1.375rem;
  height: 1.375rem;
  color: var(--acseo-blue-strong);
  font-size: 0.625rem;
  font-weight: 700;
}
.c-home-top__badge.has-logo {
  background-color: #fff;
  overflow: hidden;
}
.c-home-top__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.c-home-top__agents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-home-top {
    order: 1;
    justify-content: center;
    margin-top: 0.75rem;
  }
  .c-home-top__project {
    display: none;
  }
  .c-home-top__agents {
    gap: 0.75rem;
    justify-content: center;
  }
}

/* Point de couleur de 8 px + nom à l'encre (jamais en couleur d'agent). */
.c-agent-dot {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-agent-dot::before {
  display: inline-block;
  border-radius: 50%;
  background-color: var(--agent-dot, var(--color-mute));
  width: 0.5rem;
  height: 0.5rem;
  content: "";
}
.c-agent-dot--knowledge {
  --agent-dot: var(--agent-knowledge);
}
.c-agent-dot--assist {
  --agent-dot: var(--agent-assist);
}
.c-agent-dot--delivery {
  --agent-dot: var(--agent-delivery);
}

/* Médaillon, salutation, phrase manuscrite : montent doucement à l'arrivée, une seule fois. */
.c-home-hero {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: center;
  margin-top: clamp(2rem, 9vh, 5.25rem);
  text-align: center;
  /* Médaillon (maquette AgentsLogos) : marque des agents, anneau de 3 px à la couleur de l'agent et halo pâle. */
}
.c-home-hero__medal {
  border-radius: 50%;
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--agent-knowledge), 0 0 0 18px var(--agent-knowledge-soft);
  width: var(--home-medal);
  height: var(--home-medal);
  animation: home-breathe 4s ease-in-out infinite;
}
.c-home-hero__medal-img {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.c-home-hero__title {
  margin: 0.5rem 0 0;
  color: var(--acseo-navy);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  animation: home-rise 0.4s ease-out both;
}
.c-home-hero__say {
  margin: 0;
  color: var(--color-hand);
  font-family: var(--font-family-hand);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  animation: home-rise 0.4s ease-out 0.1s both;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-home-hero {
    order: 0;
    gap: 0.625rem;
    margin-top: 2.125rem;
  }
  .c-home-hero__medal {
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--agent-knowledge), 0 0 0 12px var(--agent-knowledge-soft);
    width: 4rem;
    height: 4rem;
  }
  .c-home-hero__title {
    margin-top: 0.375rem;
    font-size: 1.5rem;
  }
  .c-home-hero__say {
    font-size: 0.9375rem;
  }
}

.c-composer-home {
  /* Devant les cartes qui le suivent (z-index 1) : sa liste « / » s'ouvre vers le bas, par-dessus elles. */
  position: relative;
  z-index: 2;
  margin-top: 1.375rem;
  width: 100%;
  max-width: var(--home-composer-width);
  /* Puce « / libellé » de la compétence choisie (_skill-picker.scss) : collée au trombone, le bouton reste à droite. */
}
.c-composer-home__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.c-composer-home__box {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 1.375rem;
  background-color: #fff;
  padding: 1rem 1.125rem 0.75rem;
  transition: transform var(--motion-slow) var(--ease-out), border-color 0.15s ease, box-shadow 0.15s ease;
}
.c-composer-home__box:focus-within {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(11, 110, 153, 0.18);
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-composer-home__box {
    border-radius: var(--radius-lg);
    padding: 0.8125rem 0.875rem 0.625rem;
  }
}
.c-composer-home__input {
  outline: 0;
  border: 0;
  background-color: transparent;
  padding: 0;
  width: 100%;
  min-height: 3rem;
  color: var(--acseo-navy);
  /* 16 px partout : en dessous, iOS zoome sur le champ au focus. */
  font-size: 1rem;
  line-height: var(--line-height-base);
  resize: none;
  /* Mobile : trois lignes, pour que le texte d'aide ne soit pas coupé. */
}
.c-composer-home__input::placeholder {
  color: var(--color-mute);
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-composer-home__input {
    min-height: 4.5rem;
  }
}
.c-composer-home__foot {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}
.c-composer-home__skill {
  margin-right: auto;
}
.c-composer-home__attach {
  width: 2rem;
  height: 2rem;
  color: var(--color-mute);
}
.c-composer-home__attach .c-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.c-composer-home__submit {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background-color: var(--acseo-navy);
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.c-composer-home__submit .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.c-composer-home__submit:hover {
  background-color: var(--acseo-blue-strong);
}
.c-composer-home__submit:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(11, 110, 153, 0.35);
}
.c-composer-home__submit[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.c-composer-home__submit[aria-busy=true] {
  cursor: progress;
}

/* Pistes sous le champ : pastilles avec icône, texte à l'encre (jamais corail). */
.c-home-examples {
  /* Sur la colonne du champ (720 px) : les trois pistes sur une seule ligne, chacune coupée par une ellipse. */
  align-self: center;
  width: 100%;
  max-width: var(--home-composer-width);
  animation: home-rise 0.4s ease-out 0.2s both;
  transition: opacity var(--motion-fast) var(--ease-out), visibility 0s;
  /* Champ rempli : les pistes s'effacent sur place, sans libérer leur ligne (les cartes du dessous ne remontent pas). */
}
.c-home-examples[hidden] {
  display: none;
}
.c-home-examples.is-muted {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fast) var(--ease-in), visibility 0s linear var(--motion-fast);
}
.c-home-examples__label {
  margin: 0;
}
.c-home-examples__list {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-home-examples__list > li {
  flex: 1 1 0;
  min-width: 0;
}
.c-home-examples__text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-home-examples__item {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0.4375rem 0.8125rem;
  width: 100%;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.c-home-examples__item .c-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--color-hand);
}
.c-home-examples__item:hover {
  border-color: var(--acseo-divider);
  color: var(--acseo-navy);
}
.c-home-examples__item:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(11, 110, 153, 0.25);
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-home-examples {
    width: 100%;
  }
  .c-home-examples__list {
    flex-direction: column;
    gap: 0.4375rem;
  }
  .c-home-examples__list > li {
    flex: none;
  }
  .c-home-examples__item {
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    width: 100%;
  }
}

/* « À vous de jouer », une action : une ligne sobre. */
.c-home-todo-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-sm);
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0 0;
  max-width: var(--home-composer-width);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  animation: home-rise 0.4s ease-out 0.2s both;
}
.c-home-todo-line__dot {
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--acseo-coral);
  width: 0.4375rem;
  height: 0.4375rem;
}
.c-home-todo-line__title {
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-home-todo-line__action {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--color-hand);
  font-weight: 600;
  text-decoration: none;
}
.c-home-todo-line__action .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.c-home-todo-line__action:hover {
  text-decoration: underline;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-home-todo-line {
    justify-content: flex-start;
    align-self: stretch;
  }
}

/* « À vous de jouer », deux actions ou plus : liste compacte (trois lignes au plus). */
.c-home-todo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 35rem;
  animation: home-rise 0.4s ease-out 0.2s both;
}
.c-home-todo__head {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: 0 0.25rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-home-todo__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.c-home-todo__count {
  color: var(--color-mute);
  font-weight: 500;
}
.c-home-todo__all {
  margin-left: auto;
  color: var(--color-hand);
  font-weight: 600;
  text-decoration: none;
}
.c-home-todo__all:hover {
  text-decoration: underline;
}
.c-home-todo__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-home-todo__row {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: 0.5625rem 0.75rem;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.c-home-todo__row:hover {
  border-color: var(--acseo-divider);
}
.c-home-todo__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--acseo-navy);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-home-todo__stage {
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-pink);
  padding: 0.125rem 0.5625rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.c-home-todo__action {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.25rem;
  align-items: center;
  color: var(--color-hand);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
.c-home-todo__action .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-home-todo__row {
    flex-wrap: wrap;
  }
  .c-home-todo__name {
    flex-basis: 100%;
  }
}

/* Deux cartes sous le champ (maquette AccueilV5Suivi) : « Vos derniers échanges » et « Projets suivis » (ACSEO), même
   style, côte à côte sur la colonne de 720 px ; une seule carte prend toute la largeur ; mobile : une colonne. */
.c-home-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.875rem;
  width: 100%;
  max-width: var(--home-composer-width);
  animation: home-rise 0.4s ease-out 0.25s both;
}
.c-home-cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-home-cards--two {
    grid-template-columns: minmax(0, 1fr);
  }
}

.c-home-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  background-color: #fff;
  padding: 0.875rem 0.5rem 0.5rem;
  min-width: 0;
  /* « 1 à vous » : pastille rose pâle, texte navy (le client du projet attend une réponse). */
}
.c-home-card__head {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: 0 0.625rem 0.375rem;
}
.c-home-card__title {
  margin: 0;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.c-home-card__link {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  margin-left: auto;
  color: var(--color-hand);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.c-home-card__link .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.c-home-card__link:hover {
  text-decoration: underline;
}
.c-home-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-home-card__item {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  border-radius: 0.625rem;
  padding: 0.5rem 0.625rem;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.c-home-card__item .c-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--color-mute);
}
.c-home-card__item:hover {
  background-color: var(--color-soft);
  color: var(--acseo-navy);
}
.c-home-card__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-home-card__meta {
  flex-shrink: 0;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.c-home-card__pill {
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background-color: #ffe1e4;
  padding: 0.125rem 0.5rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  white-space: nowrap;
}

/* Cinématique d'envoi : l'accueil s'efface en remontant, le champ glisse vers le bas de la fenêtre. */
.c-home.is-leaving .c-home-hero,
.c-home.is-leaving .c-home-examples,
.c-home.is-leaving .c-home-todo-line,
.c-home.is-leaving .c-home-todo,
.c-home.is-leaving .c-home-cards {
  animation: home-leave var(--motion-slow) var(--ease-in) forwards;
}
.c-home.is-leaving .c-composer-home__box {
  transform: translateY(var(--home-dock-shift, 0));
}

/* Accueil déjà vu dans cet onglet (retour, changement de projet) : pas d'apparition rejouée (home_composer_controller.js). */
.c-home.is-calm:not(.is-leaving) .c-home-hero__title,
.c-home.is-calm:not(.is-leaving) .c-home-hero__say,
.c-home.is-calm:not(.is-leaving) .c-home-examples,
.c-home.is-calm:not(.is-leaving) .c-home-todo-line,
.c-home.is-calm:not(.is-leaving) .c-home-todo,
.c-home.is-calm:not(.is-leaving) .c-home-cards {
  animation: none;
}

/* Aucun mouvement demandé : ni apparition, ni respiration, ni cinématique (le contrôleur envoie aussitôt). */
@media (prefers-reduced-motion: reduce) {
  .c-home *,
  .c-home *::before {
    transition: none;
    animation: none;
  }
}
@keyframes home-rise {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Tête de Tobi vivante (components/_tobi_head.html.twig, tobi_head_controller.js) : clignement rare, oreille dressée une
   fois au premier mot, reniflement à l'envoi. Transform seulement, aucun mouvement avec prefers-reduced-motion. */
.c-tobi-head__face, .c-tobi-head__ear, .c-tobi-head__eye, .c-tobi-head__nose {
  transform-box: fill-box;
}
.c-tobi-head__ear {
  transform-origin: 85% 5%;
}
.c-tobi-head__eye, .c-tobi-head__nose {
  transform-origin: 50% 50%;
}
.c-tobi-head.is-blinking .c-tobi-head__eye {
  animation: tobi-head-blink 160ms linear;
}
.c-tobi-head.is-listening .c-tobi-head__ear {
  animation: tobi-head-ear 900ms var(--ease-out);
}
.c-tobi-head.is-sniffing .c-tobi-head__nose {
  animation: tobi-head-sniff var(--motion-slow) ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .c-tobi-head.is-blinking .c-tobi-head__eye, .c-tobi-head.is-listening .c-tobi-head__ear, .c-tobi-head.is-sniffing .c-tobi-head__nose {
    animation: none;
  }
}

@keyframes tobi-head-blink {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.12);
  }
}
@keyframes tobi-head-ear {
  0%, 100% {
    transform: rotate(0);
  }
  20%, 70% {
    transform: rotate(-16deg);
  }
}
@keyframes tobi-head-sniff {
  0%, 50%, 100% {
    transform: scale(1);
  }
  25%, 75% {
    transform: scale(1.2);
  }
}
@keyframes home-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}
@keyframes home-leave {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-2.5rem);
  }
}
/* Aide : guide client, étapes, FAQ */
.o-page--help {
  max-width: var(--page-width-home);
}

.c-help-hint {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
}

.c-help-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.c-help-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scroll-margin-top: calc(var(--topbar-total, 0rem) + 1rem);
}
.c-help-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}
.c-help-section__intro {
  max-width: 46rem;
  color: var(--color-text-muted);
}

.c-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.875rem;
}

.c-help-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
}
.c-help-card__image {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}
.c-help-card__title {
  font-size: 1rem;
  font-weight: 700;
}
.c-help-card__text {
  font-size: var(--font-size-sm);
}

.c-help-tips {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-help-tips__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
}

.c-help-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
}
.c-help-list--icons {
  padding-left: 0;
  list-style: none;
}
.c-help-list--icons li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.c-help-list--icons .c-icon {
  margin-top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-link);
}

.c-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  /* Mobile : les deux appels à l'action empilés, pleine largeur. */
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-help-actions {
    flex-direction: column;
  }
  .c-help-actions .c-button {
    width: 100%;
  }
}

.c-help-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.c-help-steps__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}
.c-help-steps__num {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
}
.c-help-steps__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.c-help-steps__label {
  font-size: 1rem;
  font-weight: 700;
}
.c-help-steps__who {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.c-help-go {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  scroll-margin-top: calc(var(--topbar-total, 0rem) + 1rem);
}
.c-help-go__image {
  flex-shrink: 0;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
}
.c-help-go__body {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 0.625rem;
}

.c-help-faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-help-faq__item {
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-md);
  padding: 0 1.125rem;
}
.c-help-faq__item[open] {
  background-color: var(--acseo-ice);
}
.c-help-faq__question {
  padding: 0.875rem 0;
  min-height: var(--touch-target);
  font-weight: 700;
  cursor: pointer;
}
.c-help-faq__answer {
  padding-bottom: 1rem;
}

/* Tâches à réaliser */
.c-todo-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-todo-card__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Visite guidée (dialog natif, 4 écrans, arbitrage d'Alexandre du 28/10) : esthétique compacte ACSEO, chaque écran
   ouvre sur la marque de Tobi et une bulle navy (cible : PDF « Offres IA ACSEO »), puis des lignes courtes. Charte de
   mouvement : entrée en fondu en montant de 4 px, voile en fondu ; sorties et glissement des écrans dans
   onboarding_controller.js. */
.c-onboarding {
  /* Marque de Tobi et bulle navy, comme une réponse de Tobi dans le fil. */
  /* Touche « / » de la commande des compétences, à la place d'une icône. */
  /* « Expert ACSEO » dans la visite : glace neutre (le rose de c-outcome--humain reste au fil et à l'aide). */
  /* « Passer » : bouton tertiaire (texte navy en gras, souligné au survol), zone de 44 px. */
}
.c-onboarding__dialog {
  margin: auto;
  border: 0;
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: 0 1.25rem 3rem rgba(0, 34, 80, 0.18);
  width: min(34rem, 100% - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  color: var(--acseo-navy);
}
.c-onboarding__dialog[open] {
  animation: motion-enter var(--motion-base) var(--ease-out);
}
.c-onboarding__dialog::backdrop {
  background-color: rgba(0, 34, 80, 0.55);
  animation: motion-fade var(--motion-base) var(--ease-out);
}
.c-onboarding__body {
  padding: 1.25rem 1.25rem 0.25rem;
}
.c-onboarding__body [hidden] {
  display: none;
}
.c-onboarding__step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.c-onboarding__title {
  outline: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}
.c-onboarding__say {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.c-onboarding__mark {
  flex-shrink: 0;
  border-radius: 50%;
}
.c-onboarding__bubble {
  border-radius: var(--radius-bubble-bot);
  background-color: var(--acseo-navy);
  padding: 0.625rem 0.875rem;
  color: #fff;
  font-size: var(--font-size-md);
  line-height: 1.5;
}
.c-onboarding__points, .c-onboarding__outcomes, .c-onboarding__flow {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  line-height: 1.45;
}
.c-onboarding__points li, .c-onboarding__note {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.c-onboarding__icon {
  flex-shrink: 0;
  margin-top: 0.0625rem;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--acseo-blue-strong);
}
.c-onboarding__key {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 0.3125rem;
  background-color: var(--acseo-ice);
  box-shadow: inset 0 0 0 1px var(--acseo-divider);
  width: 1.125rem;
  height: 1.125rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-onboarding__outcomes li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.25rem 0.75rem;
  place-items: baseline start;
}
@media (width < 30rem) {
  .c-onboarding__outcomes li {
    grid-template-columns: 1fr;
  }
}
.c-onboarding__expert {
  background-color: var(--acseo-ice);
  color: var(--acseo-blue-strong);
}
.c-onboarding__note {
  border-radius: var(--radius-md);
  background-color: var(--acseo-ice);
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-onboarding__flow-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  align-items: center;
}
.c-onboarding__who {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-onboarding__next {
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-onboarding__next .c-link {
  display: block;
  margin-top: 0.25rem;
}
.c-onboarding__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem 1.125rem;
}
.c-onboarding__skip {
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  padding: 0 0.75rem;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.c-onboarding__skip:hover {
  text-decoration: underline;
}
.c-onboarding__dots {
  display: flex;
  gap: 0.375rem;
}
.c-onboarding__dot {
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  box-shadow: inset 0 0 0 1px var(--acseo-divider);
  width: 0.5rem;
  height: 0.375rem;
  transition: width var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}
.c-onboarding__dot.is-done {
  background-color: var(--acseo-blue-strong);
}
.c-onboarding__dot.is-current {
  background-color: var(--acseo-blue-strong);
  width: 1.75rem;
}
.c-onboarding__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  /* Petit écran : « Passer » et les points sur une ligne, « Retour » / « Suivant » dessous, pleine largeur ;
     « Écrire mon premier message », trop long à côté de « Retour », passe seul sur sa ligne plutôt que de se couper. */
}
.c-onboarding__actions [hidden] {
  display: none;
}
@media (width < 30rem) {
  .c-onboarding__actions {
    flex-wrap: wrap;
    flex-basis: 100%;
  }
  .c-onboarding__actions > * {
    flex: 1 1 auto;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-onboarding__dialog[open],
  .c-onboarding__dialog::backdrop {
    animation: none;
  }
  .c-onboarding__dot {
    transition: none;
  }
}
/* Sélecteur de projet de l'accueil */
.c-project-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.c-project-picker__label {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-project-picker__select {
  width: auto;
  min-width: 12rem;
}

/* Légende des pictogrammes Échange / Demande */
.c-help-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-help-legend li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

/* Schéma des issues d'un échange */
.c-help-schema {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: var(--radius-lg);
  background-color: var(--acseo-ice);
  padding: 1rem 1.25rem;
}
.c-help-schema__start {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-weight: 700;
}
.c-help-schema__branches {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 1rem;
}
.c-help-schema__branches li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

/* Panneau d'aide (écran 04) : <dialog> à droite, par-dessus la page courante */
.c-help-panel {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: 0;
  width: min(var(--help-panel-width), 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  color: var(--color-text);
  /* Le voile entre en fondu avec le panneau et repart avec lui (is-leaving, help_panel_controller.js). */
  /* « Sur cette page » : l'aide de l'écran courant, en tête du panneau. */
  /* Aide générale repliée sous l'aide de la page. */
  /* « Revoir la visite guidée » : un bouton (la visite s'ouvre sur place) présenté comme les liens du pied. */
}
.c-help-panel[open] {
  display: block;
  animation: help-panel-in var(--motion-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .c-help-panel[open] {
    animation: none;
  }
}
.c-help-panel::backdrop {
  background-color: var(--color-overlay);
  transition: opacity var(--motion-fast) var(--ease-in);
}
.c-help-panel[open]::backdrop {
  animation: motion-fade var(--motion-base) var(--ease-out);
}
.c-help-panel.is-leaving::backdrop {
  opacity: 0;
}
.c-help-panel__inner {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  box-sizing: border-box;
  padding: calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-md) + env(safe-area-inset-bottom)) var(--space-lg);
  height: 100%;
}
.c-help-panel__head {
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
}
.c-help-panel__title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: 700;
}
.c-help-panel__title:focus {
  outline: 0;
}
.c-help-panel__close {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 50%;
  background-color: var(--acseo-ice);
  width: var(--touch-target);
  height: var(--touch-target);
  color: var(--acseo-navy);
  cursor: pointer;
}
.c-help-panel__close:hover {
  background-color: var(--acseo-teal-light);
}
.c-help-panel__close .c-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.c-help-panel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.125rem;
  min-height: 0;
  overflow-y: auto;
}
.c-help-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.c-help-panel__subtitle {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
}
.c-help-panel__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}
.c-help-panel__context {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-radius: var(--radius-lg);
  background-color: var(--acseo-ice);
  padding: 0.875rem var(--space-md);
}
.c-help-panel__eyebrow {
  margin: 0;
  color: var(--acseo-blue-strong);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.c-help-panel__tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  padding-left: 1.125rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  list-style: disc;
}
.c-help-panel__general {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
}
.c-help-panel__summary {
  padding-block: var(--space-xs);
  min-height: var(--touch-target);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
}
.c-help-panel__general-body {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding-top: var(--space-sm);
}
.c-help-panel__outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  list-style: none;
}
.c-help-panel__outcomes li {
  display: grid;
  grid-template-columns: 6.75rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  line-height: var(--line-height-base);
}
.c-help-panel__outcomes .c-outcome {
  justify-self: start;
}
.c-help-panel__go {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--acseo-pink);
  padding: 0.875rem var(--space-md);
}
.c-help-panel__go img {
  flex-shrink: 0;
}
.c-help-panel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-help-panel__tour {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

@keyframes help-panel-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: none;
  }
}
/* Connexion et lien magique (refonte du 28/10) : carte sobre centrée, marque Tobi « Une plateforme ACSEO », retour à
   l'accueil. Ni formes d'angle ni police manuscrite. */
.c-auth {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--ds-color-background);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100dvh;
  /* Séparateur « ou » : filets de chaque côté */
}
.c-auth__main {
  padding: 1.5rem 1rem;
  width: 100%;
  max-width: calc(var(--login-width, 26rem) + 2rem);
}
.c-auth__card {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: clamp(1.25rem, 5vw, 2rem);
}
.c-auth__back {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  align-self: flex-start;
  color: var(--ds-color-on-surface-variant);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.c-auth__back .c-icon {
  width: 1rem;
  height: 1rem;
}
.c-auth__back:hover, .c-auth__back:focus-visible {
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-auth__brand {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.c-auth__logo {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}
.c-auth__brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.c-auth__brand-name {
  color: var(--acseo-navy);
  font-family: var(--ds-font-headline);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
}
.c-auth__platform {
  color: var(--ds-color-on-surface-variant);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.c-auth__heading {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.c-auth__title {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
}
.c-auth__subtitle {
  color: var(--ds-color-on-surface-variant);
  font-size: var(--font-size-sm);
}
.c-auth__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.c-auth__submit {
  margin-top: 0.25rem;
  width: 100%;
}
.c-auth__or {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-auth__or::before, .c-auth__or::after {
  flex: 1;
  background-color: var(--color-line-soft);
  height: 1px;
  content: "";
}
.c-auth__slack {
  width: 100%;
}
.c-auth__help {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.c-page {
  padding-block: var(--space-2xl);
}
@media screen and (width < 48rem) {
  .c-page {
    padding-block: var(--space-xl);
  }
}

.c-page__panel {
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
@media screen and (width < 48rem) {
  .c-page__panel {
    padding: var(--space-lg);
  }
}

.c-page__header {
  margin-block-end: var(--space-lg);
}

.c-page__title {
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.2;
}
@media screen and (width < 48rem) {
  .c-page__title {
    font-size: var(--font-size-lg);
  }
}

.c-page__text {
  color: var(--color-text-muted);
}

.c-page__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.c-page__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.15em;
}
.c-page__link:hover {
  color: var(--color-primary-hover);
}
.c-page__link:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-page__link:active {
  color: var(--color-primary-active);
}

/* Couleurs de Care et Optimize (présentation « Offres IA ACSEO » : vert et corail), sur le modèle de Knowledge, Assist et
   Delivery (_tobi-chat.scss). Pour l'instant, seules les pages publiques les affichent. */
[data-agent=care] {
  --agent: var(--agent-care);
  --agent-ring: var(--agent-care-ring);
  --agent-soft: var(--agent-care-soft);
  --agent-text: var(--agent-care-text);
}

[data-agent=optimize] {
  --agent: var(--agent-optimize);
  --agent-ring: var(--agent-optimize-ring);
  --agent-soft: var(--agent-optimize-soft);
  --agent-text: var(--agent-optimize-text);
}

/* Accueil public (refonte du 28/10) : promesse de la présentation, 5 agents en médaillons, exemple sourcé, experts.
   Esthétique compacte ACSEO : fonds clairs, écarts doux, jamais d'emoji. */
.c-homepage {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 3. Box model */
  margin: 0;
  background-color: var(--ds-color-background);
  padding: 0;
  /* 4. Dimensions */
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  /* 5. Typo */
  color: var(--ds-color-on-background);
  font-family: var(--ds-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Couverture de la présentation : mascotte à gauche, « Tobi », la promesse, « Une plateforme ACSEO » */
  /* « — UNE PLATEFORME ACSEO » : filet, petites capitales espacées */
  /* Défilement doux vers l'exemple choisi : il s'arrête sous l'en-tête fixe (agent_example_controller) */
  /* Un seul exemple d'agent à la fois : hidden doit l'emporter sur le display des sections */
  /* Cartes d'agents et exemple de l'agent choisi : l'exemple suit les cartes, en mobile comme au bureau */
  /* Les 5 agents : médaillon à l'anneau de la couleur de l'agent, rôle, une ligne. Deux colonnes dès le mobile
     (arbitrage du 29/10) : sous 640 px, médaillon, nom et rôle seulement, l'exemple dit le reste ; cinq au bureau */
  /* Exemple : bulle client blanche, bulle Tobi en glace claire, pastilles de preuve, « Réponse utile » */
  /* Exemple : médaillon à anneau navy comme les bulles ; la couleur de l'agent reste l'accent de sa carte */
  /* Experts : frise numérotée (Tobi prépare, un expert valide, la réponse revient) */
  /* Sous 400 px, la marque garde le logo seul (le nom reste lu par les lecteurs d'écran) : Solution, Offres et
     Connexion tiennent sur une ligne jusqu'à 320 px. */
  /* Sous 768 px, la mascotte passe à gauche du titre, en petit : la marque de la nav la montre déjà, et les deux boutons
     remontent dans le premier écran */
}
.c-homepage__nav {
  /* 1. Layout */
  position: fixed;
  top: 0;
  z-index: 50;
  /* 3. Box model */
  border-bottom: 1px solid var(--color-line-soft);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  /* 4. Dimensions */
  width: 100%;
}
.c-homepage__nav-inner {
  /* 1. Layout */
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  /* 3. Box model */
  margin: 0 auto;
  padding: 0 var(--ds-spacing-margin-mobile);
  /* 4. Dimensions */
  max-width: var(--public-home-max);
  height: var(--public-nav-h);
}
.c-homepage__brand {
  /* 1. Layout */
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  /* 5. Typo */
  color: var(--acseo-navy);
  font-family: var(--ds-font-headline);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.c-homepage__brand-logo {
  /* 4. Dimensions */
  width: 1.75rem;
  height: 1.75rem;
}
.c-homepage__nav-links {
  /* 1. Layout */
  display: flex;
  gap: 0.875rem;
  align-items: center;
  /* 3. Box model */
  margin-left: auto;
}
.c-homepage__nav-link {
  /* 3. Box model */
  border-bottom: 2px solid transparent;
  padding: 0.25rem 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
  /* La marque mène déjà à l'accueil : « Accueil » ne s'affiche qu'à partir de la tablette. */
}
.c-homepage__nav-link:hover, .c-homepage__nav-link:focus-visible {
  /* 5. Typo */
  color: var(--acseo-navy);
}
.c-homepage__nav-link.is-active {
  /* 3. Box model */
  border-bottom-color: var(--acseo-navy);
  /* 5. Typo */
  color: var(--acseo-navy);
  font-weight: 700;
}
.c-homepage__nav-link--home {
  /* 1. Layout */
  display: none;
}
.c-homepage__nav-actions {
  /* 1. Layout */
  display: flex;
  align-items: center;
}
.c-homepage__content {
  /* 1. Layout */
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  /* 3. Box model */
  margin: 0 auto;
  padding: calc(var(--public-nav-h) + clamp(2rem, 6vw, 4rem)) var(--ds-spacing-margin-mobile) clamp(3rem, 8vw, 5rem);
  /* 4. Dimensions */
  width: 100%;
  max-width: var(--public-home-max);
  box-sizing: border-box;
}
.c-homepage__notice {
  /* 3. Box model */
  margin: 0;
}
.c-homepage__hero {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
.c-homepage__logo {
  /* 1. Layout */
  display: block;
  flex-shrink: 0;
  /* 4. Dimensions */
  width: clamp(4.5rem, 14vw, 9rem);
  height: auto;
}
.c-homepage__title {
  /* 3. Box model */
  margin: 0 0 0.5rem;
  /* 5. Typo */
  color: var(--acseo-navy);
  font-family: var(--ds-font-headline);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.c-homepage__subtitle {
  /* 3. Box model */
  margin: 0;
  /* 4. Dimensions */
  max-width: 34rem;
  text-wrap: pretty;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
}
.c-homepage__platform {
  /* 1. Layout */
  display: flex;
  gap: 0.75rem;
  align-items: center;
  /* 3. Box model */
  margin: 1rem 0 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.c-homepage__platform::before {
  /* 3. Box model */
  background-color: var(--acseo-navy);
  /* 4. Dimensions */
  width: 2rem;
  height: 1px;
  content: "";
}
.c-homepage__cta {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  /* 3. Box model */
  margin-top: 1.5rem;
}
.c-homepage__btn {
  /* 1. Layout */
  display: inline-block;
  /* 3. Box model */
  border: 1px solid var(--acseo-navy);
  border-radius: var(--ds-radius-btn);
  background-color: var(--acseo-navy);
  padding: 0.6875rem 1.25rem;
  /* 5. Typo — bouton navy de l'application : le corail est réservé aux alertes */
  color: #fff;
  font-family: var(--ds-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.c-homepage__btn:hover, .c-homepage__btn:focus-visible {
  /* 3. Box model */
  border-color: var(--acseo-navy-700);
  background-color: var(--acseo-navy-700);
}
.c-homepage__btn:focus-visible {
  /* 3. Box model */
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.c-homepage__btn--secondary {
  /* 3. Box model */
  border-color: var(--acseo-divider);
  background-color: #fff;
  /* 5. Typo */
  color: var(--acseo-navy);
}
.c-homepage__btn--secondary:hover, .c-homepage__btn--secondary:focus-visible {
  /* 3. Box model */
  border-color: var(--acseo-navy);
  background-color: #fff;
  /* 5. Typo */
  color: var(--acseo-navy);
}
.c-homepage__btn--nav {
  /* 3. Box model */
  padding: 0.4375rem 0.875rem;
  /* 5. Typo */
  font-size: 0.8125rem;
}
.c-homepage__example {
  /* 3. Box model */
  scroll-margin-top: calc(var(--public-nav-h) + 1rem);
}
.c-homepage__example[hidden] {
  /* 1. Layout */
  display: none;
}
.c-homepage__agents {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3rem);
}
.c-homepage__section {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.c-homepage__section-head {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* 4. Dimensions */
  max-width: 40rem;
}
.c-homepage__eyebrow {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.c-homepage__section-title {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--acseo-navy);
  font-family: var(--ds-font-headline);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}
.c-homepage__section-lead {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  line-height: 1.55;
  text-wrap: pretty;
}
.c-homepage__grid {
  /* 1. Layout */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  /* 3. Box model : au clic sur un agent, la liste revient en haut sous l'en-tête fixe */
  scroll-margin-top: calc(var(--public-nav-h) + 1rem);
}
.c-homepage__card {
  --medal: 2.5rem;
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* 3. Box model */
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: 1rem 1.125rem;
  /* 4. Dimensions */
  width: 100%;
  /* 5. Typo */
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Carte choisie : bordure de 1 px à la couleur pleine de l'agent (comme l'anneau du médaillon), fond très léger
     à sa teinte, sans second trait */
}
.c-homepage__card:hover {
  /* 3. Box model */
  border-color: var(--agent-ring, var(--color-line-soft));
}
.c-homepage__card:focus-visible {
  /* 3. Box model */
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.c-homepage__card[aria-pressed=true] {
  /* 3. Box model */
  border-color: var(--agent, var(--acseo-navy));
  background-color: color-mix(in srgb, var(--agent, var(--acseo-navy)) 7%, #fff);
}
.c-homepage__card-name {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
}
.c-homepage__card-head {
  /* 1. Layout */
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.c-homepage__card-title {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--acseo-navy);
  font-family: var(--ds-font-headline);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}
.c-homepage__card-tagline {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--agent-text, var(--ds-color-on-surface-variant));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.c-homepage__card-text {
  /* 1. Layout */
  display: block;
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.5;
}
.c-homepage__soon {
  /* 3. Box model */
  margin-left: auto;
  border-radius: var(--radius-pill);
  background-color: var(--agent-soft, var(--color-line-soft));
  padding: 0.125rem 0.5rem;
  /* 5. Typo */
  color: var(--agent-text, var(--color-ink));
  font-size: var(--font-size-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.c-homepage__demo {
  --medal: 1.875rem;
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* 3. Box model */
  margin: 0;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  background-color: var(--color-head-bg);
  padding: clamp(1rem, 3vw, 1.5rem);
}
.c-homepage__msg {
  /* 1. Layout */
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.c-homepage__msg--client {
  /* 1. Layout */
  flex-direction: column;
  align-items: flex-end;
}
.c-homepage__msg-body {
  /* 1. Layout */
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
  /* 4. Dimensions */
  min-width: 0;
}
.c-homepage__msg-author {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
}
.c-homepage__bubble {
  /* 3. Box model */
  margin: 0;
  padding: 0.625rem 0.875rem;
  /* 5. Typo */
  font-size: 0.9375rem;
  line-height: 1.5;
}
.c-homepage__bubble--client {
  /* 3. Box model */
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-bubble-user);
  background-color: #fff;
  /* 4. Dimensions */
  max-width: var(--bubble-user-max);
  /* 5. Typo */
  color: var(--acseo-navy);
}
.c-homepage__bubble--tobi {
  /* 3. Box model */
  border-radius: var(--radius-bubble-bot);
  background-color: #eef5f8;
  /* 4. Dimensions */
  max-width: var(--bubble-max);
  /* 5. Typo */
  color: var(--acseo-navy);
}
.c-homepage__proofs {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  /* 3. Box model */
  margin: 0;
  padding: 0;
  /* 5. Typo */
  list-style: none;
}
.c-homepage__useful {
  /* 1. Layout */
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  /* 3. Box model */
  margin: 0.25rem 0 0;
  /* 5. Typo */
  color: var(--color-success);
  font-size: 0.75rem;
  font-weight: 700;
  /* En cours (relecture, diagnostic) : sablier, couleur neutre ; le vert est réservé à ce qui est fait */
}
.c-homepage__useful .c-icon {
  /* 4. Dimensions */
  width: 1rem;
  height: 1rem;
}
.c-homepage__useful--pending {
  /* 5. Typo */
  color: var(--color-mute);
}
.c-homepage__msg--tobi .c-medal {
  --agent: var(--acseo-navy);
}
.c-homepage__steps {
  /* 1. Layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  /* 3. Box model */
  margin: 0;
  padding: 0;
  /* 5. Typo */
  list-style: none;
}
.c-homepage__step {
  /* 1. Layout */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  /* 3. Box model */
  border-top: 2px solid var(--color-line-soft);
  padding-top: 0.875rem;
}
.c-homepage__step-num {
  /* 1. Layout */
  display: inline-flex;
  grid-row: span 2;
  justify-content: center;
  align-items: center;
  /* 3. Box model */
  border-radius: 50%;
  background-color: var(--acseo-navy);
  /* 4. Dimensions */
  width: 1.5rem;
  height: 1.5rem;
  /* 5. Typo */
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.c-homepage__step-title {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--acseo-navy);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.3;
}
.c-homepage__step-text {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.5;
}
.c-homepage__footer {
  /* 3. Box model */
  border-top: 1px solid var(--color-line-soft);
  background-color: #fff;
  /* 4. Dimensions */
  width: 100%;
}
.c-homepage__footer-inner {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: flex-start;
  /* 3. Box model */
  margin: 0 auto;
  padding: 1.5rem var(--ds-spacing-margin-mobile);
  /* 4. Dimensions */
  max-width: var(--public-home-max);
  box-sizing: border-box;
}
.c-homepage__footer-brand {
  /* 5. Typo */
  color: var(--acseo-navy);
  font-family: var(--ds-font-headline);
  font-size: 1rem;
  font-weight: 800;
}
.c-homepage__footer-platform {
  /* 3. Box model */
  margin-left: 0.375rem;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-font-body);
  font-size: 0.75rem;
  font-weight: 500;
}
.c-homepage__footer-links {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.c-homepage__footer-link {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}
.c-homepage__footer-link:hover, .c-homepage__footer-link:focus-visible {
  /* 5. Typo */
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-homepage__footer-copy {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 0.75rem;
}
@media screen and (width < 400px) {
  .c-homepage__brand-name {
    /* 1. Layout */
    position: absolute;
    /* 4. Dimensions */
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    /* 5. Typo */
    white-space: nowrap;
  }
}
@media screen and (width < 640px) {
  .c-homepage__card {
    --medal: 2rem;
    /* 1. Layout */
    gap: 0;
    /* 3. Box model */
    padding: 0.75rem;
  }
  .c-homepage__card-head {
    /* 1. Layout */
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
  }
  .c-homepage__card .c-homepage__soon {
    /* 3. Box model */
    margin-left: 0;
  }
  .c-homepage__card-text {
    /* 1. Layout */
    display: none;
  }
}
@media screen and (width < 768px) {
  .c-homepage__hero {
    /* 1. Layout */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.875rem;
    align-items: center;
  }
  .c-homepage__hero-text {
    /* 1. Layout */
    display: contents;
  }
  .c-homepage__logo {
    /* 4. Dimensions */
    width: 3rem;
  }
  .c-homepage__title {
    /* 3. Box model */
    margin: 0;
  }
  .c-homepage__subtitle, .c-homepage__platform, .c-homepage__cta {
    /* 1. Layout */
    grid-column: 1/-1;
  }
  .c-homepage__subtitle {
    /* 3. Box model */
    margin-top: 1rem;
  }
}
@media screen and (width >= 768px) {
  .c-homepage__nav-inner, .c-homepage__footer-inner {
    /* 3. Box model */
    padding-inline: var(--ds-spacing-gutter);
  }
  .c-homepage__nav-links {
    /* 1. Layout */
    gap: 1.5rem;
    /* 3. Box model */
    margin-right: 0.75rem;
  }
  .c-homepage__nav-link--home {
    /* 1. Layout */
    display: inline;
  }
  .c-homepage__content {
    /* 3. Box model */
    padding-inline: var(--ds-spacing-gutter);
  }
  .c-homepage__hero {
    /* 1. Layout */
    flex-direction: row;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
  .c-homepage__steps {
    /* 1. Layout */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .c-homepage__footer-inner {
    /* 1. Layout */
    flex-flow: row wrap;
    align-items: center;
  }
}
@media screen and (width >= 1024px) {
  .c-homepage {
    /* Exemple : le texte à gauche, la discussion à droite */
  }
  .c-homepage__grid {
    /* 1. Layout */
    grid-template-columns: repeat(5, 1fr);
  }
  .c-homepage__card {
    /* 3. Box model */
    padding: 1rem;
  }
  .c-homepage__card-head {
    /* 1. Layout */
    flex-wrap: wrap;
  }
  .c-homepage__soon {
    /* 3. Box model */
    margin-left: 0;
  }
  .c-homepage__section--split {
    /* 1. Layout */
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-homepage__btn, .c-homepage__nav-link {
    /* 2. Visibility */
    transition: none;
  }
}

.c-solution {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 3. Box model */
  margin: 0;
  background-color: var(--ds-color-background);
  background-image: radial-gradient(circle, #e0e3e5 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  padding: 0;
  /* 4. Dimensions */
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  /* 5. Typo */
  color: var(--ds-color-on-background);
  font-family: var(--ds-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* stylelint-disable-next-line selector-class-pattern -- Google Material Symbols font class */
  /* Mobile : Solution et Offres restent visibles, « Accueil » est porté par la marque (refonte du 28/10). */
  /* Sous 400 px, la marque garde le logo seul (le nom reste lu par les lecteurs d'écran) : Solution, Offres et
     Connexion tiennent sur une ligne jusqu'à 320 px. */
}
.c-solution .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.c-solution__nav {
  /* 1. Layout */
  position: fixed;
  top: 0;
  z-index: 50;
  /* 3. Box model */
  border-bottom: 0;
  background-color: rgba(247, 249, 251, 0.8);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(16, 19, 48, 0.05);
  /* 4. Dimensions */
  width: 100%;
}
.c-solution__nav-inner {
  /* 1. Layout */
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  /* 3. Box model */
  margin: 0 auto;
  padding: 0 var(--ds-spacing-margin-mobile);
  /* 4. Dimensions */
  max-width: var(--ds-container-max);
  height: var(--public-nav-h);
}
.c-solution__brand {
  /* 1. Layout */
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  /* 5. Typo */
  color: var(--acseo-navy);
  font-family: var(--ds-font-headline);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.c-solution__brand-logo {
  /* 4. Dimensions */
  width: 1.75rem;
  height: 1.75rem;
}
.c-solution__nav-links {
  /* 1. Layout */
  display: flex;
  gap: 0.875rem;
  align-items: center;
  /* 3. Box model */
  margin-left: auto;
}
.c-solution__nav-link {
  /* 3. Box model */
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.c-solution__nav-link:hover, .c-solution__nav-link:focus-visible {
  /* 2. Visibility */
  opacity: 0.8;
  /* 5. Typo */
  color: var(--ds-color-primary);
}
.c-solution__nav-link:active {
  /* 2. Visibility */
  opacity: 0.7;
}
.c-solution__nav-link.is-active {
  /* 3. Box model */
  border-bottom-color: var(--ds-color-primary);
  /* 5. Typo */
  color: var(--ds-color-primary);
  font-weight: 700;
}
.c-solution__nav-link--home {
  /* 1. Layout */
  display: none;
}
.c-solution__nav-actions {
  /* 1. Layout */
  display: flex;
  gap: 1rem;
  align-items: center;
}
.c-solution__nav-login {
  /* 1. Layout */
  display: none;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.c-solution__nav-login:hover, .c-solution__nav-login:focus-visible {
  /* 2. Visibility */
  opacity: 0.8;
}
.c-solution__nav-login:active {
  /* 2. Visibility */
  opacity: 0.7;
}
.c-solution__main {
  /* 1. Layout */
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* 3. Box model */
  padding: calc(var(--public-nav-h) + 1rem) 0 var(--ds-spacing-section);
}
.c-solution__hero {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 3. Box model */
  margin: 0 auto;
  padding: var(--ds-spacing-section) var(--ds-spacing-margin-mobile);
  /* 4. Dimensions */
  max-width: var(--ds-container-max);
  /* 5. Typo */
  text-align: center;
  box-sizing: border-box;
}
.c-solution__title {
  /* 3. Box model */
  margin: 0 auto 16px;
  /* 4. Dimensions */
  max-width: 48rem;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.c-solution__title-highlight {
  /* 1. Layout */
  display: inline-block;
  position: relative;
  /* 5. Typo */
  color: var(--ds-color-brand-teal);
}
.c-solution__title-highlight::after {
  /* 1. Layout */
  position: absolute;
  bottom: -8px;
  left: 0;
  /* 3. Box model */
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,5 Q50,10 100,5' fill='none' stroke='%23b4ebff' stroke-width='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 4. Dimensions */
  width: 100%;
  height: 10px;
  content: "";
}
.c-solution__subtitle {
  /* 3. Box model */
  margin: 0 auto 40px;
  /* 4. Dimensions */
  max-width: 42rem;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: clamp(15px, 2.5vw, 18px);
  font-weight: 400;
  line-height: 1.6;
}
.c-solution__btn {
  /* 1. Layout */
  display: inline-block;
  box-sizing: border-box;
  /* 3. Box model */
  border: 1px solid var(--acseo-navy);
  border-radius: var(--ds-radius-btn);
  background-color: var(--acseo-navy);
  padding: 11px 20px;
  /* 5. Typo — bouton navy des pages publiques (28/10) : le corail est réservé aux alertes */
  color: #fff;
  font-family: var(--ds-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.c-solution__btn:hover, .c-solution__btn:focus-visible {
  /* 3. Box model */
  border-color: var(--acseo-navy-700);
  background-color: var(--acseo-navy-700);
}
.c-solution__btn--secondary {
  /* 3. Box model */
  border-color: var(--acseo-divider);
  background-color: #fff;
  /* 5. Typo */
  color: var(--acseo-navy);
}
.c-solution__btn--secondary:hover, .c-solution__btn--secondary:focus-visible {
  /* 3. Box model */
  border-color: var(--acseo-navy);
  background-color: #fff;
}
.c-solution__btn--nav {
  /* 3. Box model */
  padding: 7px 14px;
  box-shadow: none;
  /* 5. Typo */
  font-size: 13px;
}
.c-solution__btn--nav:hover, .c-solution__btn--nav:focus-visible {
  /* 2. Visibility */
  opacity: 0.9;
  transform: none;
  /* 3. Box model */
  box-shadow: none;
}
.c-solution__btn--nav:active {
  /* 2. Visibility */
  transform: scale(0.9);
}
.c-solution__btn:disabled, .c-solution__btn:disabled:hover, .c-solution__btn:disabled:focus-visible, .c-solution__btn:disabled:active {
  /* 2. Visibility */
  opacity: 0.6;
  transform: none;
  /* 3. Box model */
  box-shadow: none;
  /* 5. Typo */
  cursor: not-allowed;
}
.c-solution__eyebrow {
  /* 3. Box model */
  margin: 0 0 12px;
  /* 5. Typo */
  color: var(--ds-color-brand-teal);
  font-family: var(--ds-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.c-solution__intro {
  /* 3. Box model */
  margin: 0 auto;
  padding: var(--ds-spacing-section) var(--ds-spacing-margin-mobile) 0;
  /* 4. Dimensions */
  max-width: 48rem;
  /* 5. Typo */
  text-align: center;
  box-sizing: border-box;
}
.c-solution__intro-title {
  /* 3. Box model */
  margin: 0 0 16px;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.c-solution__intro-lead {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.6;
}
.c-solution__context, .c-solution__range, .c-solution__offers, .c-solution__journey {
  /* 3. Box model */
  margin: 0 auto;
  padding: var(--ds-spacing-section) var(--ds-spacing-margin-mobile);
  /* 4. Dimensions */
  width: 100%;
  max-width: var(--ds-container-max);
  box-sizing: border-box;
}
.c-solution__context {
  /* 3. Box model */
  padding-bottom: 32px;
}
.c-solution__frictions {
  /* 1. Layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.c-solution__friction {
  /* 3. Box model */
  border: 1px solid var(--ds-color-surface-container-low);
  border-radius: 1rem;
  background-color: var(--ds-color-surface-container-lowest);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(16, 19, 48, 0.05);
}
.c-solution__friction-icon {
  /* 1. Layout */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 3. Box model */
  margin: 0 0 20px;
  border-radius: 9999px;
  background-color: rgba(255, 217, 220, 0.3);
  /* 4. Dimensions */
  width: 52px;
  height: 52px;
  /* 5. Typo */
  color: var(--ds-color-brand-coral);
  line-height: 1;
}
.c-solution__friction-title {
  /* 3. Box model */
  margin: 0 0 8px;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}
.c-solution__friction-text {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 15px;
  line-height: 1.55;
}
.c-solution__answer {
  /* 3. Box model */
  margin: 0 var(--ds-spacing-margin-mobile);
  border: 1px solid rgba(180, 235, 255, 0.6);
  border-radius: 1.5rem;
  background-color: rgba(180, 235, 255, 0.15);
  padding: 32px 24px;
  /* 4. Dimensions */
  max-width: 56rem;
  box-sizing: border-box;
  /* 5. Typo */
  text-align: center;
}
.c-solution__answer-text {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: clamp(17px, 2.5vw, 21px);
  font-weight: 600;
  line-height: 1.5;
}
.c-solution__section-header {
  /* 3. Box model */
  margin: 0 auto 40px;
  /* 4. Dimensions */
  max-width: 42rem;
  /* 5. Typo */
  text-align: center;
}
.c-solution__section-title {
  /* 3. Box model */
  margin: 0 0 16px;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.c-solution__section-subtitle {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: clamp(15px, 2.5vw, 18px);
  line-height: 1.6;
}
.c-solution__agents {
  /* 1. Layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  /* 3. Box model */
  margin: 0;
  padding: 0;
  /* 5. Typo */
  list-style: none;
}
.c-solution__agent-link {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 3. Box model */
  border: 1px solid var(--ds-color-surface-container-low);
  border-radius: 1rem;
  background-color: var(--ds-color-surface-container-lowest);
  padding: 20px;
  box-shadow: var(--ds-shadow-ambient);
  /* 4. Dimensions */
  height: 100%;
  box-sizing: border-box;
  /* 5. Typo */
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.c-solution__agent-link:hover, .c-solution__agent-link:focus-visible {
  /* 2. Visibility */
  transform: translateY(-4px);
  /* 3. Box model */
  box-shadow: var(--ds-shadow-ambient-hover);
}
.c-solution__agent-icon {
  /* 1. Layout */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 3. Box model */
  margin-bottom: 8px;
  border-radius: 0.75rem;
  background-color: rgba(180, 235, 255, 0.25);
  /* 4. Dimensions */
  width: 44px;
  height: 44px;
  /* 5. Typo */
  color: var(--ds-color-brand-teal);
  line-height: 1;
}
.c-solution__agent-name {
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.c-solution__agent-summary {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  line-height: 1.5;
}
.c-solution__offers {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* 3. Box model */
  padding-top: 0;
}
.c-solution__offer {
  /* 3. Box model */
  border: 1px solid var(--ds-color-surface-container-low);
  border-radius: 1.5rem;
  background-color: var(--ds-color-surface-container-lowest);
  padding: 28px 20px;
  box-shadow: var(--ds-shadow-ambient);
  /* 5. Typo */
  scroll-margin-top: calc(var(--public-nav-h) + 16px);
}
.c-solution__offer-header {
  /* 3. Box model */
  margin: 0 0 24px;
}
.c-solution__offer-name {
  /* 1. Layout */
  display: flex;
  gap: 8px;
  align-items: center;
  /* 3. Box model */
  margin: 0 0 8px;
  /* 5. Typo */
  color: var(--ds-color-brand-teal);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.c-solution__offer-icon {
  /* 4. Dimensions */
  width: 20px;
  height: 20px;
}
.c-solution__offer-tagline {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.c-solution__offer-body {
  /* 1. Layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.c-solution__offer-label {
  /* 3. Box model */
  margin: 0 0 8px;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.c-solution__offer-text {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-size: 16px;
  line-height: 1.6;
}
.c-solution__points {
  /* 1. Layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  /* 3. Box model */
  margin: 0;
  padding: 0;
  /* 5. Typo */
  list-style: none;
}
.c-solution__point {
  /* 1. Layout */
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  line-height: 1.5;
}
.c-solution__point-mark {
  /* 1. Layout */
  flex: 0 0 auto;
  /* 4. Dimensions */
  width: 20px;
  height: 20px;
  /* 5. Typo */
  color: var(--ds-color-brand-teal);
}
.c-solution__point-title {
  /* 1. Layout */
  display: block;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-size: 15px;
  font-weight: 700;
}
.c-solution__point-text {
  /* 1. Layout */
  display: block;
}
.c-solution__usecase {
  /* 3. Box model */
  margin: 24px 0 0;
  border-radius: 0.75rem;
  background-color: var(--ds-color-surface-container);
  padding: 16px;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 1.6;
}
.c-solution__usecase-label {
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
}
.c-solution__stages {
  /* 1. Layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  /* 3. Box model */
  margin: 0;
  padding: 0;
  /* 5. Typo */
  list-style: none;
}
.c-solution__stage {
  /* 3. Box model */
  border: 1px solid var(--ds-color-surface-container-low);
  border-radius: 1rem;
  background-color: var(--ds-color-surface-container-lowest);
  padding: 20px;
}
.c-solution__stage-number {
  /* 1. Layout */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* 3. Box model */
  margin-bottom: 8px;
  border-radius: 9999px;
  background-color: var(--ds-color-brand-teal);
  /* 4. Dimensions */
  width: 28px;
  height: 28px;
  /* 5. Typo */
  color: var(--ds-color-on-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.c-solution__stage-label {
  /* 3. Box model */
  margin: 0 0 4px;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.c-solution__stage-text {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  line-height: 1.5;
}
.c-solution__cta {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  /* 3. Box model */
  padding: 0 var(--ds-spacing-margin-mobile);
}
.c-solution__footer {
  /* 3. Box model */
  border-top: 1px solid var(--ds-color-outline-variant);
  background-color: var(--ds-color-surface-container-lowest);
  /* 4. Dimensions */
  width: 100%;
}
.c-solution__footer-inner {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* 3. Box model */
  margin: 0 auto;
  padding: 48px var(--ds-spacing-gutter);
  /* 4. Dimensions */
  max-width: var(--ds-container-max);
}
.c-solution__footer-brand {
  /* 3. Box model */
  margin-bottom: 16px;
  /* 5. Typo */
  color: var(--acseo-navy);
  font-family: var(--ds-font-headline);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}
.c-solution__footer-platform {
  /* 3. Box model */
  margin-left: 6px;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-weight: 500;
}
.c-solution__footer-links {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  /* 3. Box model */
  margin-bottom: 16px;
}
.c-solution__footer-link {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.c-solution__footer-link:hover, .c-solution__footer-link:focus-visible {
  /* 2. Visibility */
  opacity: 0.8;
  /* 5. Typo */
  color: var(--ds-color-secondary);
}
.c-solution__footer-link:active {
  /* 2. Visibility */
  opacity: 0.7;
}
.c-solution__footer-copy {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
@media screen and (width < 400px) {
  .c-solution__brand-name {
    /* 1. Layout */
    position: absolute;
    /* 4. Dimensions */
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    /* 5. Typo */
    white-space: nowrap;
  }
}
@media screen and (width >= 640px) {
  .c-solution__nav-login {
    /* 1. Layout */
    display: inline-block;
  }
  .c-solution__agents {
    /* 1. Layout */
    grid-template-columns: repeat(2, 1fr);
  }
  .c-solution__points {
    /* 1. Layout */
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (width >= 768px) {
  .c-solution__nav-inner {
    /* 3. Box model */
    padding-inline: var(--ds-spacing-gutter);
  }
  .c-solution__nav-links {
    /* 1. Layout */
    gap: 1.5rem;
    /* 3. Box model */
    margin-right: 0.75rem;
  }
  .c-solution__nav-link {
    /* 5. Typo */
    font-size: 15px;
  }
  .c-solution__nav-link--home {
    /* 1. Layout */
    display: inline;
  }
  .c-solution__hero, .c-solution__context, .c-solution__range, .c-solution__offers, .c-solution__journey, .c-solution__intro {
    /* 3. Box model */
    padding-inline: var(--ds-spacing-gutter);
  }
  .c-solution__answer {
    /* 3. Box model */
    margin-inline: auto;
    padding: 40px 48px;
  }
  .c-solution__section-title {
    /* 5. Typo */
    font-size: 32px;
  }
  .c-solution__frictions {
    /* 1. Layout */
    grid-template-columns: repeat(3, 1fr);
  }
  .c-solution__offer {
    /* 3. Box model */
    padding: 40px;
  }
  .c-solution__stages {
    /* 1. Layout */
    grid-template-columns: repeat(3, 1fr);
  }
  .c-solution__footer-inner {
    /* 1. Layout */
    flex-direction: row;
  }
  .c-solution__footer-brand, .c-solution__footer-links {
    /* 3. Box model */
    margin-bottom: 0;
  }
}
@media screen and (width >= 1024px) {
  .c-solution__agents {
    /* 1. Layout */
    grid-template-columns: repeat(5, 1fr);
  }
  .c-solution__offer-body {
    /* 1. Layout */
    grid-template-columns: 2fr 3fr;
    gap: 40px;
  }
  .c-solution__stages {
    /* 1. Layout */
    grid-template-columns: repeat(4, 1fr);
  }
}

.c-pricing {
  /* Refonte du 28/10 : fond uni, titre sans mot coloré ni soulignement, comme l'accueil public. */
  background-image: none;
  /* Médaillon à gauche, nom à côté ; la pastille « En 2027 » passe sous le nom. */
  /* Sous 768 px, le haut de page commence plus près de la nav */
}
.c-pricing .c-solution__title-highlight {
  /* 5. Typo */
  color: inherit;
}
.c-pricing .c-solution__title-highlight::after {
  /* 1. Layout */
  display: none;
}
.c-pricing__offers {
  /* 1. Layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  /* 3. Box model */
  margin: 0 auto var(--ds-spacing-section, 64px);
  padding-inline: var(--ds-spacing-gutter, 24px);
  /* 4. Dimensions */
  width: 100%;
  max-width: var(--ds-container-max, 1200px);
}
.c-pricing__offer {
  /* 1. Layout */
  display: flex;
  position: relative;
  flex-direction: column;
  /* 3. Box model */
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: clamp(20px, 4vw, 28px);
  /* 5. Typo */
  text-align: left;
}
.c-pricing__offer--recommended {
  /* 3. Box model */
  border: 2px solid var(--ds-color-primary);
}
.c-pricing__badge {
  /* 1. Layout */
  position: absolute;
  top: -14px;
  right: 24px;
  /* 3. Box model */
  border-radius: 9999px;
  background-color: var(--ds-color-primary);
  padding: 4px 14px;
  /* 5. Typo */
  color: var(--ds-color-on-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c-pricing__baseline {
  /* 3. Box model */
  margin: 0 0 16px;
  /* 5. Typo */
  color: var(--ds-color-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.c-pricing__name {
  /* 3. Box model */
  margin: 0 0 4px;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: 24px;
  font-weight: 800;
}
.c-pricing__price {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: 28px;
  font-weight: 800;
}
.c-pricing__setup {
  /* 3. Box model */
  margin: 4px 0 24px;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
}
.c-pricing__agents {
  /* 3. Box model */
  margin: 0 0 24px;
  padding: 0;
  /* 5. Typo */
  list-style: none;
}
.c-pricing__agent {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  /* 3. Box model */
  padding: 6px 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-size: 15px;
}
.c-pricing__agent--off {
  /* 5. Typo */
  color: var(--ds-color-outline);
}
.c-pricing__agent-mark {
  /* 5. Typo */
  color: var(--agent, var(--ds-color-primary));
  font-size: 20px;
}
.c-pricing__agent--off .c-pricing__agent-mark {
  /* 5. Typo */
  color: var(--ds-color-outline);
}
.c-pricing__agent-name {
  /* 5. Typo */
  font-weight: 600;
}
.c-pricing__agent-level {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
}
.c-pricing__meta {
  /* 1. Layout */
  flex-grow: 1;
  /* 3. Box model */
  margin: 0 0 24px;
  border-top: 1px solid var(--ds-color-surface-container);
  padding-top: 16px;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
}
.c-pricing__meta dd {
  /* 3. Box model */
  margin: 0 0 4px;
}
.c-pricing__days {
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-weight: 700;
}
.c-pricing__footnote {
  /* 3. Box model */
  margin: 0 auto var(--ds-spacing-section, 64px);
  padding-inline: var(--ds-spacing-gutter, 24px);
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  text-align: center;
}
.c-pricing__modules, .c-pricing__compare {
  /* 3. Box model */
  margin: 0 auto;
  padding: 0 var(--ds-spacing-margin-mobile) var(--ds-spacing-section, 64px);
  /* 4. Dimensions */
  width: 100%;
  max-width: var(--ds-container-max, 1200px);
  box-sizing: border-box;
}
.c-pricing__modules {
  /* 5. Typo */
  text-align: center;
}
.c-pricing__modules-list {
  /* 1. Layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  /* 3. Box model */
  margin: 24px 0 0;
  /* 5. Typo */
  text-align: left;
}
.c-pricing__module {
  /* 3. Box model */
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: 14px 16px;
  /* 5. Typo */
  text-align: left;
}
.c-pricing__module-name {
  /* 1. Layout */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 8px;
  align-items: center;
  /* 3. Box model */
  margin: 0 0 4px;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-size: 15px;
  font-weight: 700;
}
.c-pricing__module-name .c-pill {
  /* 1. Layout */
  grid-column: 2;
  justify-self: start;
}
.c-pricing__module-text {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  line-height: 1.5;
}
.c-pricing__compare-toggle {
  /* 1. Layout */
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  /* 3. Box model */
  margin: 0 auto;
  border: 1px solid var(--ds-color-brand-navy);
  border-radius: var(--radius-pill);
  padding: 0.625rem 1.25rem;
  /* 4. Dimensions */
  width: fit-content;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.c-pricing__compare-toggle::-webkit-details-marker {
  /* 1. Layout */
  display: none;
}
.c-pricing__compare-toggle::after {
  /* 5. Typo */
  content: "+";
}
.c-pricing__compare-toggle:focus-visible {
  /* 3. Box model */
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.c-pricing__compare-fold[open] .c-pricing__compare-toggle {
  /* 3. Box model */
  margin-bottom: 16px;
}
.c-pricing__compare-fold[open] .c-pricing__compare-toggle::after {
  /* 5. Typo */
  content: "−";
}
.c-pricing__table-wrap {
  /* 3. Box model */
  border: 1px solid var(--ds-color-surface-container-low);
  border-radius: 1rem;
  background-color: var(--ds-color-surface-container-lowest);
  box-shadow: var(--ds-shadow-ambient);
  /* 4. Dimensions */
  overflow-x: auto;
}
.c-pricing__table-wrap:focus-visible {
  /* 3. Box model */
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 2px;
}
.c-pricing__table {
  /* 4. Dimensions */
  width: 100%;
  min-width: 640px;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  border-collapse: collapse;
}
.c-pricing__table th,
.c-pricing__table td {
  /* 3. Box model */
  border-bottom: 1px solid var(--ds-color-surface-container);
  padding: 14px 16px;
  /* 5. Typo */
  vertical-align: top;
}
.c-pricing__table tbody th {
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-weight: 700;
}
.c-pricing__table tbody tr:last-child th,
.c-pricing__table tbody tr:last-child td {
  /* 3. Box model */
  border-bottom: 0;
}
.c-pricing__table-corner {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: bottom;
}
.c-pricing__table-offer {
  /* 1. Layout */
  position: relative;
  /* 5. Typo */
  vertical-align: bottom;
}
.c-pricing__table-offer--recommended {
  /* 3. Box model */
  background-color: rgba(180, 235, 255, 0.15);
}
.c-pricing__table-badge {
  /* 1. Layout */
  display: inline-block;
  /* 3. Box model */
  margin-bottom: 6px;
  border-radius: 9999px;
  background-color: var(--ds-color-primary);
  padding: 2px 10px;
  /* 5. Typo */
  color: var(--ds-color-on-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c-pricing__table-name {
  /* 1. Layout */
  display: block;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-family: var(--ds-font-headline);
  font-size: 17px;
  font-weight: 800;
}
.c-pricing__table-baseline {
  /* 1. Layout */
  display: block;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 400;
}
.c-pricing__cell {
  /* 5. Typo */
  white-space: nowrap;
}
.c-pricing__cell .c-pricing__agent-mark {
  /* 4. Dimensions */
  width: 18px;
  height: 18px;
  /* 5. Typo */
  vertical-align: -4px;
}
.c-pricing__cell--off {
  /* 5. Typo */
  color: var(--ds-color-outline);
}
.c-pricing__cell--off .c-pricing__agent-mark {
  /* 5. Typo */
  color: var(--ds-color-outline);
}
.c-pricing__cell-price {
  /* 1. Layout */
  display: block;
  /* 5. Typo */
  color: var(--ds-color-brand-navy);
  font-weight: 800;
  white-space: nowrap;
}
.c-pricing__compare .c-pricing__footnote {
  /* 3. Box model */
  margin: 16px 0 0;
  padding-inline: 0;
}
@media screen and (width < 768px) {
  .c-pricing .c-solution__hero {
    /* 3. Box model */
    padding-top: 1rem;
  }
}
@media screen and (width >= 640px) {
  .c-pricing__modules-list {
    /* 1. Layout */
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (width >= 768px) {
  .c-pricing {
    /* Au bureau, le tableau reste ouvert sans bouton (avis Audit design du 29/10), même si la fenêtre a été
       agrandie depuis un repli en mobile */
  }
  .c-pricing__modules, .c-pricing__compare {
    /* 3. Box model */
    padding-inline: var(--ds-spacing-gutter, 24px);
  }
  .c-pricing__compare-toggle {
    /* 1. Layout */
    display: none;
  }
  .c-pricing__compare-fold::details-content {
    /* 1. Layout */
    display: contents;
    content-visibility: visible;
  }
}
@media screen and (width >= 1024px) {
  .c-pricing__offers {
    /* 1. Layout */
    grid-template-columns: repeat(3, 1fr);
  }
  .c-pricing__modules-list {
    /* 1. Layout */
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Chat Tobi : fil de discussion, composeur, cartes d'entrée (maquette Claude Design v2) */
.c-chat-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Confirmation discrète (succès) : même aspect que c-account-flash--success, alignée sur la colonne du fil,
   dans le flux au-dessus de l'en-tête (jamais par-dessus). Se ferme seule (contrôleur flash). */
.c-chat-flash {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-sm);
  align-items: center;
  margin: var(--space-sm) auto 0;
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-lg);
  background-color: var(--color-success-bg);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  width: min(54rem, 100% - 2 * var(--space-md));
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-chat-flash__text {
  flex: 1 1 auto;
  margin: 0;
  padding-block: var(--space-xs);
}
.c-chat-flash__close {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  min-width: 2.25rem;
  min-height: 2.25rem;
  color: var(--acseo-navy);
  cursor: pointer;
}
.c-chat-flash__close:hover {
  background-color: #fff;
}
.c-chat-flash__close[hidden] {
  display: none;
}
.c-chat-flash__close .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Agent de Tobi qui parle (fil v5, data-agent sur le fil, une ligne, un relais) : sa couleur ne va que sur l'anneau du
   médaillon, les points et les pastilles, jamais sur les mots. */
[data-agent=knowledge] {
  --agent: var(--agent-knowledge);
  --agent-ring: var(--agent-knowledge-ring);
  --agent-soft: var(--agent-knowledge-soft);
  --agent-text: var(--agent-knowledge-text);
}

[data-agent=assist] {
  --agent: var(--agent-assist);
  --agent-ring: var(--agent-assist-ring);
  --agent-soft: var(--agent-assist-soft);
  --agent-text: var(--agent-assist-text);
}

[data-agent=delivery] {
  --agent: var(--agent-delivery);
  --agent-ring: var(--agent-delivery-ring);
  --agent-soft: var(--agent-delivery-soft);
  --agent-text: var(--agent-delivery-text);
}

/* Médaillon de Tobi : marque des agents sur disque navy (30 px dans le fil, 28 px dans le volet), anneau de l'agent.
   Recette d'Alexandre du 22/10 : anneau de 2 px en couleur pleine de l'agent (--agent) après un liseré blanc de 2 px,
   pour distinguer Knowledge, Assist et Delivery ; pas de halo (trop chargé à 30 px). Le texte reste en encre. */
.c-medal {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--acseo-navy);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--agent, var(--color-line));
  width: var(--medal);
  height: var(--medal);
  overflow: hidden;
  transition: box-shadow var(--motion-slow) var(--ease-out); /* relais d'agent : l'anneau change de couleur en douceur */
}
.c-medal--sm {
  width: 1.75rem;
  height: 1.75rem;
}
.c-medal__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Pastille de preuve : fond doux et texte foncé de l'agent (11 px, graisse 700). */
.c-pill {
  display: inline-block;
  border-radius: var(--radius-pill);
  background-color: var(--color-line-soft);
  padding: 0.1875rem 0.625rem;
  color: var(--color-ink);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  /* Bloc « Réalisation » du volet (UI v5) : tests passés ou en échec, fonds doux. */
}
.c-pill--agent {
  background-color: var(--agent-soft, var(--color-line-soft));
  color: var(--agent-text, var(--color-ink));
}
.c-pill--ok {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.c-pill--failed {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Séparateur de jour du fil (maquette FilAvance « .day ») : « Lundi 19 octobre », 11 px, 600, majuscules, atténué. */
.c-thread-day {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* Relais d'agents : « Delivery prend la suite », filets de part et d'autre, pastille blanche bordée avec le point de l'agent. */
.c-thread-relay {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  /* Jonction discussion → tâche (CONTRACT § 18) : « · Tâche #N » en petit, au second plan. */
}
.c-thread-relay::before, .c-thread-relay::after {
  flex: 1;
  background-color: var(--color-line);
  height: 1px;
  content: "";
}
.c-thread-relay__chip {
  display: inline-flex;
  gap: 0.4375rem;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0.25rem 0.6875rem;
  color: var(--color-ink);
  font-weight: 600;
}
.c-thread-relay__dot {
  border-radius: 50%;
  background-color: var(--agent, var(--color-mute));
  width: 0.5rem;
  height: 0.5rem;
}
.c-thread-relay__task {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 500;
}

/* Rappel en tête d'une tâche née d'une discussion : une ligne discrète, collée en haut du fil pendant le défilement,
   ancre vers le premier message de la discussion (même page, sans rechargement). Recette du 22/10 (captures 13 et 18) :
   la pastille est posée sur une bande opaque du fond du fil, au-dessus des messages qui défilent dessous, sans ombre. */
.c-thread-origin-bar {
  display: flex;
  position: sticky;
  top: -1.25rem;
  justify-content: center;
  z-index: 2;
  margin-block: -0.375rem;
  background-color: var(--color-bg);
  padding-block: 0.375rem;
  min-width: 0;
}

/* Recette mobile du 28/10 (390 px) : l'ancre de la pastille posait le premier message au bord haut du fil, sous la bande
   collante, qui cachait le haut de sa carte et sa bordure. Chaque message du fil s'arrête désormais sous la bande
   (sa hauteur, 2,25 rem, plus l'écart du fil). */
.c-thread-origin-bar ~ [id] {
  scroll-margin-top: 2.75rem;
}

.c-thread-origin {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0.1875rem 0.625rem;
  max-width: 100%;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  text-decoration: none;
}
.c-thread-origin:hover, .c-thread-origin:focus-visible {
  color: var(--color-ink);
}
.c-thread-origin .c-icon {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}
.c-thread-origin__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-tobi-chat {
  /* Colonne unique partagée : en-tête, fil, cartes, réponses rapides, bannière et composeur
     partagent les mêmes bords gauche/droit, centrés dans la zone principale. */
  --chat-column-width: var(--thread-col);
  --chat-bubble-max: var(--bubble-max);
  --chat-side: clamp(1rem, 4vw, 2rem);
  --chat-pad: max(var(--chat-side), calc((100% - var(--chat-column-width)) / 2));
  --chat-avatar: var(--medal);
  display: flex;
  position: relative;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  /* En-tête d'écran : projet, lien Redmine, pause, nouvelle demande */
  /* Alertes bloquantes (session expirée, fil disparu) : en haut de la colonne. Aucune marge tant qu'elles sont masquées. */
  /* « Tobi y travaille » (« Étude en cours… », « tests en cours… ») : ligne Tobi sous le dernier message.
     Masquée tant que le bandeau l'est, et pendant que Tobi écrit sa réponse (une seule ligne d'attente à la fois). */
  /* Session expirée : bandeau corail (le client doit se reconnecter), sur toute la largeur. */
  /* Nom au-dessus d'une bulle : « Tobi · Delivery » en encre (jamais en couleur d'agent), « Claire · Lextenso » adouci. */
  /* Fil partagé (28/10) : avatar de la personne (taille de celui de l'en-tête) puis « Vous », ou le prénom d'un collègue
     en gras. */
  /* Commande « / » (CONTRACT § 19) : la compétence avec laquelle le message du client est parti, au-dessus de sa bulle. */
  /* Tobi vivant (T1) : le <picture> du médaillon animé ne fait pas de boîte, l'image garde la taille du médaillon. */
  /* M1 (streaming) : dès que Tobi écrit, la ligne d'attente devient une bulle de Tobi avec le brouillon de la réponse
     sous la ligne d'étape (tobi_chat_stream_view.js) ; le message enregistré la remplace en fin de tour. */
  /* Trois points de 6 px à la couleur de l'agent du fil (data-agent du fil, Knowledge à défaut). */
  /* Rangée d'attente : médaillon de 30 px avec l'anneau de l'agent du fil, qui respire. */
  /* Message d'erreur (envoi impossible) : pas d'anneau d'agent. */
  /* « Renvoyer » (tobi_chat_resend.js) : lien discret en fin de carte d'erreur, désactivé pendant le nouvel envoi. */
  /* Bulle et preuves de Tobi : une seule bulle glace, la ligne des preuves sous un filet fin. */
  /* Réponse à une carte (« Validé ») : la coche du sprite devant le texte, en vert. */
  /* Composeur : pilule */
  /* « ↓ Nouveaux messages » : posé au-dessus du composeur, centré, tant que le lecteur a remonté le fil. */
  /* Champ de saisie v5 (maquette FilAvance .composer) : 660 px au plus, fond blanc, bordure fine, rayon 18 ;
     trombone atténué à gauche, envoi par un bouton rond navy de 32 px (flèche vers le haut). */
  /* Pièces jointes : pastilles du composeur (en attente) et des bulles (envoyées) */
  /* Nom long d'un fichier de Tobi : il revient à la ligne (mobile) au lieu de déborder. */
  /* Composeur de l'accueil (fond glacier) : pastilles blanches, l'espacement vient de la boîte. */
  /* Envoyer : rond navy de 32 px, flèche vers le haut ; le libellé est dans aria-label (tobi_chat_state.js). */
  /* S10 : Demande d'un collègue suivie en lecture seule, à la place du champ de saisie. */
  /* Mobile : la place va aux messages ; seul le lien « Besoin d'aide ? » reste (l'avertissement est dans l'aide). */
  /* Titre de la Demande à gauche (passe à la ligne), « Mettre en pause » toujours à sa droite. */
  /* Suggestions dans un fil de demande */
  /* Fin d'un fil (Échange terminé, Demande créée, Demande close, pause) : carte sobre, pas plus large que la colonne
     du fil ; fond blanc, bordure fine, rayon 14, textes de 13 px ; bouton navy compact, « Écrire à Tobi » en lien. */
  /* Boutons de la carte : compacts (13 px, rayon 10), bordure fine ; le seul plein est navy. */
  /* « Écrire à Tobi » : lien discret, sans cadre (ni icône : chat/index.html.twig). */
  /* Échange ou Demande close : la bannière propose la suite, plus de champ de saisie. */
}
.c-tobi-chat__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__body {
    flex-direction: column;
  }
}
.c-tobi-chat__col {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.c-tobi-chat__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--acseo-divider);
  padding: 0.75rem var(--chat-pad);
  width: 100%;
}
.c-tobi-chat__toolbar[hidden] {
  display: none;
}
.c-tobi-chat__project {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.c-tobi-chat__project-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-tobi-chat__project-select {
  border: 2px solid var(--acseo-field-border);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0.5rem 1rem;
  min-width: 13.75rem;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
}
.c-tobi-chat__project-select:disabled {
  border-color: var(--acseo-divider);
  background-color: var(--acseo-ice);
  cursor: default;
}
.c-tobi-chat__project-empty {
  color: var(--acseo-coral-strong);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-tobi-chat__exchange {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  border: 2px solid var(--acseo-navy);
  border-radius: var(--radius-pill);
  background-color: transparent;
  padding: 0.375rem 1rem;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.c-tobi-chat__exchange:hover {
  background-color: var(--acseo-ice);
}
.c-tobi-chat__exchange[hidden] {
  display: none;
}
.c-tobi-chat__new-request {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  border: 2px solid var(--acseo-navy);
  border-radius: var(--radius-pill);
  background-color: transparent;
  padding: 0.25rem 0.875rem;
  min-height: 2.25rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* Lien « Suivre » apparu à la clôture en direct : seul bouton plein (marine) de la zone. */
}
.c-tobi-chat__new-request:hover {
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-tobi-chat__new-request--primary {
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-tobi-chat__new-request--primary:hover {
  background-color: var(--acseo-blue-strong);
}
.c-tobi-chat__new-request[hidden] {
  display: none;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__toolbar .c-tobi-chat__new-request {
    display: none;
  }
}
.c-tobi-chat__notices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-tobi-chat__notices:has(> :not([hidden])) {
  margin: 0.5rem var(--chat-pad) 0;
}
.c-tobi-chat__status-row {
  margin-top: 0.875rem;
}
.c-tobi-chat__status-row:has(.c-tobi-chat__status[hidden]) {
  display: none;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__status-row {
    margin-top: 0.625rem;
  }
}
.c-tobi-chat__history:has(.c-tobi-chat__bubble--thinking) .c-tobi-chat__status-row {
  display: none;
}
.c-tobi-chat__status-bar {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__status-bar {
    flex-wrap: nowrap;
    gap: 0.375rem;
  }
}
.c-tobi-chat__session {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-tobi-chat__status-action {
  flex: 0 0 auto;
  margin: 0;
}
.c-tobi-chat__status-action[hidden] {
  display: none;
}
.c-tobi-chat__status-button {
  gap: 0.375rem;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  /* Mobile : bouton icône (l'aria-label dit « Relancer le suivi de cette demande maintenant »). */
}
.c-tobi-chat__status-button .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__status-button {
    padding: 0;
    min-width: 2.25rem;
    min-height: 2.25rem;
  }
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__status-button-text {
    display: none;
  }
}
.c-tobi-chat__status {
  display: grid;
  position: relative;
  flex: 0 1 auto;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
  margin: 0;
  border-radius: 0.375rem 1rem 1rem;
  background-color: var(--acseo-ice);
  padding: 0.5rem 0.875rem;
  min-width: 0;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
  /* Mobile : lignes plus petites (ellipse). */
}
.c-tobi-chat__status::before {
  grid-row: 1;
  grid-column: 1;
  border-radius: 50%;
  background-color: var(--acseo-blue-strong);
  width: 0.625rem;
  height: 0.625rem;
  animation: tobi-pulse 1.6s ease-in-out infinite;
  content: "";
}
@media (prefers-reduced-motion: reduce) {
  .c-tobi-chat__status::before {
    animation: none;
  }
}
.c-tobi-chat__status[hidden] {
  display: none;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__status {
    padding: 0.25rem 0.625rem;
    font-size: var(--font-size-xs);
  }
  .c-tobi-chat__status::before {
    width: 0.5rem;
    height: 0.5rem;
  }
}
.c-tobi-chat__status-text, .c-tobi-chat__status-hint {
  grid-column: 2;
  margin: 0;
  min-width: 0;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__status-text, .c-tobi-chat__status-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.c-tobi-chat__status-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.c-tobi-chat__status-hint[hidden] {
  display: none;
}
.c-tobi-chat__history {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.25rem var(--chat-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--color-border) transparent;
  scrollbar-width: thin;
}
.c-tobi-chat__thread {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  width: 100%;
}
.c-tobi-chat__row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
  /* Bulle du client : le nom « Prénom · Projet » au-dessus, à droite (plus d'avatar à l'initiale). */
}
.c-tobi-chat__row--bot {
  align-self: flex-start;
  width: 100%;
}
.c-tobi-chat__row--user {
  flex-direction: column;
  gap: 0;
  align-items: flex-end;
  align-self: flex-end;
  max-width: min(80%, var(--bubble-user-max));
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__row--user {
    max-width: 92%;
  }
}
.c-tobi-chat__author {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
}
.c-tobi-chat__row--user .c-tobi-chat__author {
  margin: 0 0.25rem 0.3125rem;
  color: var(--color-mute);
  font-weight: 500;
  text-align: right;
}
.c-tobi-chat__row--user .c-tobi-chat__author--speaker {
  gap: 0.375rem;
  justify-content: flex-end;
}
.c-tobi-chat__author--speaker .c-tobi-chat__speaker-badge {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.5938rem;
}
.c-tobi-chat__row--colleague .c-tobi-chat__speaker {
  color: var(--acseo-navy);
  font-weight: 700;
}
.c-tobi-chat__skill {
  margin: 0 0.25rem 0.25rem;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}
.c-tobi-chat__avatar {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: var(--chat-avatar);
  height: var(--chat-avatar);
  /* Médaillon de Tobi (même rendu que .c-medal) : l'anneau prend la couleur pleine de l'agent de la ligne, sinon du fil. */
  /* Note d'un expert ACSEO : initiales sur fond glace. */
}
.c-tobi-chat__avatar--bot {
  background-color: var(--acseo-navy);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--agent, var(--color-line));
  overflow: hidden;
}
.c-tobi-chat__avatar--expert {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
  font-size: var(--font-size-2xs);
  font-weight: 700;
}
.c-tobi-chat__avatar--expert .c-icon {
  width: 1rem;
  height: 1rem;
}
.c-tobi-chat__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.c-tobi-chat__avatar > picture {
  display: contents;
}
.c-tobi-chat__bubble {
  padding: 0.625rem 0.875rem;
  min-width: 0;
  font-size: var(--font-size-md);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* Bulle de Tobi : fond glace doux, texte bleu nuit, mots en gras en navy (maquette v5). */
  /* Bulle du client : blanche, filet doux (maquette v5). */
  /* Fil partagé : la bulle d'un collègue, à droite comme la mienne, en sable très clair. */
  /* Note d'un expert ACSEO : bulle blanche bordée, même forme que celle de Tobi. */
  /* Réponse de Tobi impossible (erreur d'envoi) : bulle blanche bordée, point corail devant le texte. */
  /* « Tobi consulte… » (maquette EtatsLive) : pas de bulle, phrase en 13 px adoucie puis trois points qui clignotent. */
}
.c-tobi-chat__bubble--bot {
  border-radius: var(--radius-bubble-bot);
  background-color: var(--color-ice-bubble);
  padding: 0.6875rem 0.9375rem;
  max-width: min(100%, var(--chat-bubble-max));
  color: var(--color-ice-bubble-text);
  line-height: 1.6;
  white-space: normal;
  /* Lecture posée (retour d'Alexandre, 30/10) : titres à peine plus grands que le texte, jamais la taille par
     défaut du navigateur ; un peu d'air avant un titre, peu après ; paragraphes et listes à rythme égal. */
  /* Paragraphe dans un élément de liste : serré, sans la marge d'un paragraphe libre. */
  /* Bloc de code : fond navy, texte clair, comme un éditeur (le contraste avec la bulle glace dit « à copier »). */
  /* Bouton « Copier » : petite icône discrète en haut à droite (assets/lib/tobi_code_copy.js). */
}
.c-tobi-chat__bubble--bot h1,
.c-tobi-chat__bubble--bot h2,
.c-tobi-chat__bubble--bot h3,
.c-tobi-chat__bubble--bot h4,
.c-tobi-chat__bubble--bot h5,
.c-tobi-chat__bubble--bot h6 {
  margin: 0.875rem 0 0.25rem;
  color: var(--acseo-navy);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
}
.c-tobi-chat__bubble--bot h1,
.c-tobi-chat__bubble--bot h2 {
  font-size: 1.0625em;
}
.c-tobi-chat__bubble--bot :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}
.c-tobi-chat__bubble--bot p {
  margin: 0 0 0.625rem;
}
.c-tobi-chat__bubble--bot p:last-child {
  margin-bottom: 0;
}
.c-tobi-chat__bubble--bot ul,
.c-tobi-chat__bubble--bot ol {
  margin: 0 0 0.625rem;
  padding-left: 1.125em;
  list-style: revert;
}
.c-tobi-chat__bubble--bot ul:last-child,
.c-tobi-chat__bubble--bot ol:last-child {
  margin-bottom: 0;
}
.c-tobi-chat__bubble--bot li {
  padding-left: 0.125em;
}
.c-tobi-chat__bubble--bot li + li {
  margin-top: 0.25rem;
}
.c-tobi-chat__bubble--bot li > p:not(:last-child) {
  margin-bottom: 0.25rem;
}
.c-tobi-chat__bubble--bot strong,
.c-tobi-chat__bubble--bot b {
  color: var(--acseo-navy);
  font-weight: 700;
}
.c-tobi-chat__bubble--bot a {
  color: var(--acseo-blue-strong);
  text-decoration: underline;
}
.c-tobi-chat__bubble--bot a:hover {
  color: var(--acseo-navy);
}
.c-tobi-chat__bubble--bot code {
  border-radius: 0.25rem;
  background-color: rgba(0, 34, 80, 0.08);
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
.c-tobi-chat__bubble--bot pre {
  margin: 0 0 0.5rem;
  border-radius: var(--radius-md);
  background-color: var(--acseo-navy);
  padding: 0.875em 1em;
  overflow-x: auto;
  color: var(--acseo-ice);
  font-size: 0.875em;
  line-height: 1.55;
}
.c-tobi-chat__bubble--bot pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}
.c-tobi-chat__bubble--bot .c-code-block {
  position: relative;
  margin: 0 0 0.5rem;
}
.c-tobi-chat__bubble--bot .c-code-block pre {
  margin: 0;
  padding-right: 2.75rem;
}
.c-tobi-chat__bubble--bot .c-code-block__copy {
  display: inline-flex;
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  padding: 0.25rem;
  color: var(--acseo-teal-light);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
}
.c-tobi-chat__bubble--bot .c-code-block__copy svg {
  width: 1rem;
  height: 1rem;
}
.c-tobi-chat__bubble--bot .c-code-block__copy:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.c-tobi-chat__bubble--bot .c-code-block__copy:focus-visible {
  outline: 0.125rem solid var(--acseo-teal-light);
  outline-offset: 0.0625rem;
}
.c-tobi-chat__bubble--bot .c-code-block__copy.is-copied {
  color: #fff;
}
.c-tobi-chat__bubble--user {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-bubble-user);
  background-color: #fff;
  color: var(--acseo-navy);
}
.c-tobi-chat__row--colleague .c-tobi-chat__bubble--user {
  border-color: var(--color-colleague-line);
  background-color: var(--color-colleague-bubble);
}
.c-tobi-chat__row--expert .c-tobi-chat__bubble--bot {
  border: 1px solid var(--color-line);
  background-color: #fff;
  color: var(--acseo-navy);
}
.c-tobi-chat__bubble--error {
  border: 1px solid var(--color-line);
  background-color: #fff;
  color: var(--color-ink);
}
.c-tobi-chat__bubble--error::before {
  display: inline-block;
  vertical-align: 0.0625rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: var(--acseo-coral);
  width: 0.4375rem;
  height: 0.4375rem;
  content: "";
}
.c-tobi-chat__bubble--thinking {
  display: inline-flex;
  gap: 0.3125rem;
  align-items: center;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  color: var(--color-mute);
  font-size: var(--font-size-sm);
}
.c-tobi-chat__thinking-text {
  display: inline-block;
  transition: opacity 0.25s ease;
}
.c-tobi-chat__thinking-text.is-fading {
  opacity: 0;
}
.c-tobi-chat__bubble--drafting .c-tobi-chat__thinking-text {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-mute);
  font-size: var(--font-size-sm);
}
.c-tobi-chat__thinking-dots {
  display: inline-flex;
  gap: 0.3125rem;
  align-items: center;
  margin-left: 0.125rem;
}
.c-tobi-chat__thinking-dots i {
  display: block;
  opacity: 0.25;
  border-radius: 50%;
  background-color: var(--agent, var(--agent-knowledge));
  width: 0.375rem;
  height: 0.375rem;
  animation: tobi-thinking-blink 1.2s infinite;
}
.c-tobi-chat__thinking-dots i:nth-child(2) {
  animation-delay: 0.2s;
}
.c-tobi-chat__thinking-dots i:nth-child(3) {
  animation-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .c-tobi-chat__thinking-dots i {
    opacity: 0.6;
    animation: none;
  }
}
.c-tobi-chat__row--thinking {
  align-items: center;
}
.c-tobi-chat__row--thinking .c-tobi-chat__avatar--bot {
  animation: tobi-thinking-breathe 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .c-tobi-chat__row--thinking .c-tobi-chat__avatar--bot {
    animation: none;
  }
}
.c-tobi-chat__row:has(.c-tobi-chat__bubble--error) .c-tobi-chat__avatar--bot {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-line);
}
.c-tobi-chat__resend {
  display: block;
  margin-top: 0.25rem;
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-text-link);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.c-tobi-chat__resend:hover {
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-tobi-chat__resend:focus-visible {
  outline: 1px solid var(--color-focus);
  outline-offset: 2px;
}
.c-tobi-chat__resend:disabled {
  opacity: 0.5;
  cursor: progress;
}
.c-tobi-chat__message {
  display: flex;
  flex: 0 1 var(--chat-bubble-max);
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  /* Avec une carte : bulle et carte occupent la même largeur, au même bord gauche. */
}
.c-tobi-chat__message:has(.c-chat-card) .c-tobi-chat__message__bubble, .c-tobi-chat__message:has(.c-chat-card) .c-chat-card {
  width: 100%;
}
.c-tobi-chat__said {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-bubble-bot);
  background-color: var(--color-ice-bubble);
  min-width: 0;
  max-width: min(100%, var(--chat-bubble-max));
}
.c-tobi-chat__said .c-tobi-chat__bubble--bot {
  border-radius: 0;
  background-color: transparent;
  padding-bottom: 0.5rem;
  max-width: none;
}
.c-tobi-chat__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  align-items: center;
  margin: 0 0.9375rem;
  border-top: 1px solid var(--color-proof-line);
  padding: 0.5rem 0 0.6875rem;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
}
.c-tobi-chat__done {
  vertical-align: -0.125rem;
  margin-right: 0.25rem;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-success);
}
.c-tobi-chat__badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-blue-strong);
  padding: 0.125rem 0.5rem;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  /* « Nouveau » en bleu soutenu (information) ; le corail reste réservé aux messages qui demandent une action (règle E2). */
  /* Message déjà lu : l'opération qui l'a produit, en neutre (déclaré après « action », qu'il remplace une fois lu). */
}
.c-tobi-chat__badge--action {
  background-color: var(--acseo-coral);
  color: var(--acseo-navy);
}
.c-tobi-chat__badge--operation {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}
.c-tobi-chat__input-area {
  position: relative;
  background-color: #fff;
  padding: 0.5rem var(--chat-pad) calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.c-tobi-chat__jump {
  display: inline-flex;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  gap: 0.375rem;
  align-items: center;
  z-index: 3;
  transform: translateX(-50%);
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0.375rem 0.875rem;
  box-shadow: var(--ds-shadow-ambient-hover);
  min-height: 2.25rem;
  color: var(--acseo-navy);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.c-tobi-chat__jump:hover {
  border-color: var(--acseo-blue-strong);
}
.c-tobi-chat__jump:focus-visible {
  outline: 0.1875rem solid rgba(0, 125, 161, 0.35);
  outline-offset: 0.0625rem;
}
.c-tobi-chat__jump[hidden] {
  display: none;
}
.c-tobi-chat__composer {
  display: flex;
  position: relative;
  gap: 0.75rem;
  align-items: flex-end;
  margin: 0 auto;
  border: 1px solid var(--color-line);
  border-radius: 1.125rem;
  background-color: #fff;
  padding: 0.6875rem 0.875rem 0.6875rem 1rem;
  width: 100%;
  max-width: var(--thread-col);
}
.c-tobi-chat__composer:focus-within {
  border-color: var(--color-mute);
}
.c-tobi-chat__attach {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-mute);
  cursor: pointer;
  flex-shrink: 0;
}
.c-tobi-chat__attach .c-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.c-tobi-chat__attach:hover {
  color: var(--acseo-navy);
}
.c-tobi-chat__attach:focus-visible {
  outline: 1px solid var(--color-focus);
  outline-offset: 2px;
}
.c-tobi-chat__attach:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.c-tobi-chat__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
  padding: 0;
  max-width: 100%;
  list-style: none;
  white-space: normal;
}
.c-tobi-chat__attachments[hidden] {
  display: none;
}
.c-tobi-chat__attachments--pending {
  margin: 0 0 var(--space-sm);
}
.c-tobi-chat__bubble--files-only .c-tobi-chat__attachments {
  margin-top: 0;
}
.c-tobi-chat__attachment {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: 0 var(--space-xs) 0 var(--space-md);
  min-width: 0;
  max-width: 100%;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  /* Dans une bulle « utilisateur » (blanche, filet doux) : pastille gris-bleu très clair. */
  /* Sous une bulle de Tobi (fond clair) : carte de fichier blanche, encadrée, avec une icône. */
}
.c-tobi-chat__attachment--sent {
  border-color: var(--color-line);
  border-radius: var(--radius-md);
  background-color: var(--color-soft);
  padding: var(--space-xs) var(--space-md);
  color: inherit;
}
.c-tobi-chat__attachment--received {
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm);
}
.c-tobi-chat__attachment-link {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-xs);
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  min-height: var(--touch-target);
  color: inherit;
  text-decoration: none;
}
.c-tobi-chat__attachment-link:hover, .c-tobi-chat__attachment-link:focus-visible {
  text-decoration: underline;
}
.c-tobi-chat__attachment-link:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}
.c-tobi-chat__attachment--received .c-tobi-chat__attachment-link {
  flex-direction: row;
  gap: var(--space-sm);
  align-items: center;
}
.c-tobi-chat__attachment-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--acseo-blue-strong);
}
.c-tobi-chat__attachment--received .c-tobi-chat__attachment-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  max-width: 100%;
}
.c-tobi-chat__attachment-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-tobi-chat__attachment-size {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.c-tobi-chat__attachment--received .c-tobi-chat__attachment-name {
  white-space: normal;
  overflow-wrap: anywhere;
}
.c-tobi-chat__attachment--sent .c-tobi-chat__attachment-size {
  opacity: 0.8;
  color: inherit;
}
.c-tobi-chat__attachment-thumb {
  display: block;
  border-radius: var(--radius-sm);
  width: 8rem;
  max-width: 100%;
  height: auto;
  max-height: 8rem;
  object-fit: cover;
}
.c-tobi-chat__attachment-remove {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  width: var(--touch-target);
  height: var(--touch-target);
  color: var(--acseo-navy);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.c-tobi-chat__attachment-remove:hover {
  background-color: var(--color-overlay-soft, rgba(0, 34, 80, 0.08));
}
.c-tobi-chat__attachment-remove:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.c-tobi-chat__attachments--on-ice {
  margin: 0;
}
.c-tobi-chat__attachments--on-ice .c-tobi-chat__attachment {
  background-color: var(--color-surface);
}
.c-tobi-chat__attach-error {
  margin: 0 0 var(--space-sm);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}
.c-tobi-chat__attach-error[hidden] {
  display: none;
}
.c-tobi-chat__input {
  flex: 1;
  align-self: center;
  outline: 0;
  border: 0;
  background: transparent;
  padding: 0.3125rem 0;
  min-width: 0;
  max-height: 9rem;
  color: var(--acseo-navy);
  font-size: 0.875rem;
  line-height: 1.5;
  resize: none;
}
.c-tobi-chat__input::placeholder {
  color: var(--color-mute);
}
.c-tobi-chat__submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 50%;
  background-color: var(--acseo-navy);
  padding: 0;
  width: 2rem;
  height: 2rem;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.c-tobi-chat__submit:hover {
  background-color: var(--acseo-blue-strong);
}
.c-tobi-chat__submit:focus-visible {
  outline: 1px solid var(--color-focus);
  outline-offset: 2px;
}
.c-tobi-chat__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.c-tobi-chat__submit[aria-busy=true] {
  opacity: 0.6;
  cursor: progress;
}
.c-tobi-chat__submit-icon {
  width: 1rem;
  height: 1rem;
}
.c-tobi-chat__readonly {
  margin: 0 0 0.75rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}
.c-tobi-chat__disclaimer {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-tobi-chat__disclaimer-text {
    display: none;
  }
}
.c-tobi-chat__cap-notice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--acseo-pink);
  padding: 0.875rem 1rem;
  font-size: var(--font-size-sm);
}
.c-tobi-chat__cap-text {
  font-weight: 600;
}
.c-tobi-chat__cap-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.c-tobi-chat__cap-item {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
}
.c-tobi-chat__cap-item > form {
  flex-shrink: 0;
}
.c-tobi-chat__cap-item > :first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.c-tobi-chat__cap-button {
  border: 2px solid var(--acseo-navy);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0.25rem 0.875rem;
  min-height: var(--touch-target);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.c-tobi-chat__children {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 600;
}
.c-tobi-chat__starters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 0.5rem;
}
.c-tobi-chat__starters-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-tobi-chat__starters-list {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem 0.75rem;
  align-items: stretch;
}
.c-tobi-chat__starter {
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0.5rem 0.875rem;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.c-tobi-chat__starter:hover {
  background-color: var(--acseo-ice);
}
.c-tobi-chat__recent {
  display: flex;
  flex-direction: column;
}
.c-tobi-chat__recent-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  border-top: 1px solid var(--acseo-divider);
  padding: 0.75rem 0.25rem;
  color: var(--acseo-navy);
  text-decoration: none;
}
.c-tobi-chat__recent-link:hover {
  background-color: var(--acseo-ice);
}
.c-tobi-chat__recent-title {
  font-size: 0.875rem;
  font-weight: 600;
}
.c-tobi-chat__recent-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.c-tobi-chat__closed {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0 auto 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  background-color: #fff;
  padding: 0.875rem 1rem;
  width: 100%;
  max-width: var(--thread-col);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.c-tobi-chat__closed[hidden] {
  display: none;
}
.c-tobi-chat__closed form {
  display: flex;
}
.c-tobi-chat__closed-text {
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-tobi-chat__closed .c-tobi-chat__children {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
.c-tobi-chat__closed .c-tobi-chat__children[hidden] {
  display: none;
}
.c-tobi-chat__closed .c-tobi-chat__new-request {
  gap: 0.25rem;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  padding: 0.4375rem 0.875rem;
  min-height: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}
.c-tobi-chat__closed .c-tobi-chat__new-request:hover {
  border-color: var(--acseo-navy);
  background-color: transparent;
  color: var(--acseo-navy);
}
.c-tobi-chat__closed .c-tobi-chat__new-request--primary {
  border-color: var(--acseo-navy);
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-tobi-chat__closed .c-tobi-chat__new-request--primary:hover {
  border-color: var(--acseo-blue-strong);
  background-color: var(--acseo-blue-strong);
  color: #fff;
}
.c-tobi-chat__closed .c-tobi-chat__closed-new {
  border: 0;
  padding: 0;
  color: var(--color-text-link);
}
.c-tobi-chat__closed .c-tobi-chat__closed-new:hover {
  background-color: transparent;
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-tobi-chat__closed--created .c-tobi-chat__children {
  flex-direction: column;
}
.c-tobi-chat__created {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.c-tobi-chat__created-title {
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-tobi-chat__created-next {
  color: var(--color-ink);
}
.c-tobi-chat.is-closed .c-tobi-chat__composer {
  display: none;
}

/* Écran « Nouvelle demande » */
.c-new-request {
  gap: 1.25rem;
}
.c-new-request__title {
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}
.c-new-request__subtitle {
  margin-top: 0.375rem;
  color: var(--acseo-blue-strong);
  font-family: var(--font-family-hand);
  font-size: 1.0625rem;
  font-weight: 500;
}
.c-new-request__step {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-new-request__types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11.25rem, 100%), 1fr));
  gap: 0.625rem;
}
.c-new-request__tip {
  display: flex;
  gap: 1rem;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--acseo-ice);
  padding: 1rem 1.125rem;
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.c-new-request__tip img {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.c-type-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 2px solid var(--acseo-ice);
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 1rem;
  color: var(--acseo-navy);
  text-align: left;
  cursor: pointer;
}
.c-type-card:hover, .c-type-card:focus-visible {
  border-color: var(--acseo-blue-strong);
  background-color: var(--acseo-ice);
}
.c-type-card__icon {
  width: 1.625rem;
  height: 1.625rem;
  color: var(--acseo-blue-strong);
}
.c-type-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
}
.c-type-card__text {
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

/* En-tête du fil v5 : 56 px au plus, ligne 1 le titre (15 px), ligne 2 « projet · ● Tobi · Agent · étape » (12 px),
   à droite le bouton du volet. Les détails sont dans le volet (.c-dossier). Recette of 14/10: when the thread scrolls
   with its header (mobile), the header stays at the top of its scroller (sticky). */
.c-request-head {
  display: flex;
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  border-bottom: 1px solid var(--color-line-soft);
  background-color: var(--color-head-bg);
  padding: 0 2rem;
  min-height: var(--thread-head-h);
  /* Retour discret : une icône de 32 px (libellé dans l'infobulle et pour les lecteurs d'écran). */
  /* Titre sur une seule ligne avec ellipse ; le titre complet reste dans l'infobulle (attribut title). */
  /* Ligne 2 (Demande : __meta, Échange : __sub) : une ligne, coupée en ellipse sur sa dernière partie. */
  /* « ● Tobi · Delivery » : le point (7 px) seul prend la couleur de l'agent du fil. */
  /* « · » après l'agent seulement quand une étape, un état ou une issue suit (chat/index.html.twig, head_more). */
  /* Demande : « Étape N sur 5 · qui agit et quoi » en navy (décision d'Alexandre du 21/10), ellipse si trop long. */
  /* Actions sobres (« Reprendre » dans l'en-tête ; « Mettre en pause », « Fermer l'échange » dans le volet). */
  /* « Dossier » (décision du PO du 30/10) : même bouton compact que « Partager », fond glace quand le volet est ouvert ;
     le point de l'agent (ex-onglet vertical) en haut à droite. */
  /* « Reprendre » : seule action pleine de l'en-tête, quand le client doit reprendre sa Demande. */
  /* Mobile : retour, titre en 14 px, ligne 2 en 11.5 px sans le projet (la barre du haut le nomme déjà). */
}
.c-request-head__row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}
.c-request-head__back {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  margin-left: -0.75rem;
  border-radius: 0.5625rem;
  width: 2rem;
  height: 2rem;
  color: var(--color-ink);
}
.c-request-head__back:hover {
  background-color: var(--color-toggle-on);
  color: var(--acseo-navy);
}
.c-request-head__back .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.c-request-head__main {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.c-request-head__title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-request-head__meta, .c-request-head__sub {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  white-space: nowrap;
}
.c-request-head__project {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-request-head__project::after {
  margin-left: 0.375rem;
  content: "·";
}
.c-request-head__agent {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.375rem;
  align-items: center;
}
.c-request-head__agent::before {
  border-radius: 50%;
  background-color: var(--agent, var(--color-mute));
  width: 0.4375rem;
  height: 0.4375rem;
  content: "";
  transition: background-color var(--motion-slow) var(--ease-out);
}
.c-request-head__agent--more::after {
  content: "·";
}
.c-request-head__line {
  display: flex;
  flex: 0 1 auto;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
  min-width: 0;
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-request-head__line > [data-request-line-text] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-request-head__state {
  display: flex;
  flex: 0 1 auto;
  gap: 0.375rem;
  align-items: center;
  min-width: 0;
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-request-head__controls {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  align-items: center;
}
.c-request-head__controls form {
  display: flex;
}
.c-request-head__action {
  display: inline-flex;
  gap: 0.375rem;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 0.5625rem;
  background-color: #fff;
  padding: 0.3125rem 0.75rem;
  color: var(--acseo-navy);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.c-request-head__action:hover {
  background-color: var(--color-soft);
}
.c-request-head__action[hidden] {
  display: none;
}
.c-request-head__action .c-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}
.c-request-head__dossier {
  position: relative;
  /* Tâche sous 1024 px : ses onglets Discussion / Dossier / Historique y mènent déjà, une seule entrée (PO, 30/10). */
}
.c-request-head__dossier[aria-expanded=true] {
  background-color: var(--color-toggle-on);
}
.c-request-head__dossier:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-request-head__dossier--tabs {
    display: none;
  }
}
.c-request-head__dossier-dot {
  position: absolute;
  top: -0.1875rem;
  right: -0.1875rem;
  border: 0.125rem solid #fff;
  border-radius: 50%;
  background-color: var(--agent, var(--color-mute));
  width: 0.625rem;
  height: 0.625rem;
  transition: background-color var(--motion-slow) var(--ease-out);
}
.c-request-head__action--primary {
  border-color: var(--acseo-navy);
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-request-head__action--primary:hover {
  background-color: var(--acseo-blue-strong);
}
.c-request-head__ref {
  color: var(--color-text-link);
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-request-head__meta .c-request-head__ref {
  font-weight: 600;
}
.c-request-head__exchange, .c-request-head__origin {
  font-size: var(--font-size-xs);
}
.c-request-head__owner {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
}
.c-request-head__kind {
  display: inline-flex;
  flex: 0 0 auto;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-request-head {
    padding: 0 0.375rem 0 0.25rem;
    min-height: 3.25rem;
    /* Dans l'en-tête seulement : icône seule (le volet garde le libellé écrit). */
  }
  .c-request-head__row {
    gap: 0.375rem;
  }
  .c-request-head__back {
    margin-left: 0;
  }
  .c-request-head__title {
    font-size: var(--font-size-md);
  }
  .c-request-head__meta, .c-request-head__sub {
    font-size: 0.7188rem;
  }
  .c-request-head__project {
    display: none;
  }
  .c-request-head .c-request-head__action {
    padding: 0.3125rem;
  }
  .c-request-head .c-request-head__action-text {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.c-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Jamais tronqué (« Qualificati… ») ni coupé par un tiret (« Qualifi-cation ») : retour à la ligne entre les mots. */
  /* Panneau de suivi : les 5 étapes l'une sous l'autre, toutes lisibles (pas de barre). */
  /* Volet du fil v5 : points de 14 px dessinés en CSS (l'icône reste dans le DOM pour le polling, masquée), trait fin
     entre les étapes ; faite : pleine, couleur de l'agent ; en cours : anneau navy ; à venir : adoucie. */
  /* UI v5 (22/10) : date d'une étape franchie (« 19 oct. »), « en cours » ou « à venir », à droite, 11 px atténué. */
  /* Sous 900px : seul le libellé de l'étape en cours reste affiché (frise horizontale seulement). */
}
.c-stepper__step {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.c-stepper__bar {
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  height: 0.25rem;
}
.c-stepper__label {
  display: flex;
  gap: 0.25rem;
  align-items: flex-start;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.2;
}
.c-stepper__label .c-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-stepper__label {
    display: none;
  }
}
.c-stepper__text {
  min-width: 0;
  hyphens: manual;
  overflow-wrap: break-word;
}
.c-stepper--vertical {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
.c-stepper--vertical .c-stepper__bar {
  display: none;
}
.c-stepper__step.is-done .c-stepper__bar {
  background-color: var(--acseo-blue-strong);
}
.c-stepper__step.is-current .c-stepper__bar {
  background-color: var(--acseo-teal);
}
.c-stepper__step.is-done .c-stepper__label, .c-stepper__step.is-current .c-stepper__label {
  color: var(--acseo-navy);
}
.c-stepper__step.is-current .c-stepper__label {
  font-weight: 700;
}
.c-stepper--vertical .c-stepper__step {
  position: relative;
  gap: 0;
  padding-bottom: 0.75rem;
}
.c-stepper--vertical .c-stepper__step:last-child {
  padding-bottom: 0;
}
.c-stepper--vertical .c-stepper__step:not(:last-child)::before {
  position: absolute;
  top: 1rem;
  bottom: 0;
  left: 0.375rem;
  background-color: var(--color-line);
  width: 1.5px;
  content: "";
}
.c-stepper--vertical .c-stepper__step .c-stepper__label {
  display: flex;
  gap: 0.625rem;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.45;
}
.c-stepper--vertical .c-stepper__step .c-stepper__label svg {
  display: none;
}
.c-stepper--vertical .c-stepper__step .c-stepper__label::before {
  flex-shrink: 0;
  box-sizing: border-box;
  margin-top: 0.125rem;
  border: 1.5px solid var(--color-step-todo);
  border-radius: 50%;
  background-color: #fff;
  width: 0.875rem;
  height: 0.875rem;
  content: "";
}
.c-stepper__date {
  display: none;
}
.c-stepper--vertical .c-stepper__date {
  display: block;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 500;
  white-space: nowrap;
}
.c-stepper--vertical .c-stepper__date:empty {
  display: none;
}
.c-stepper--vertical .c-stepper__step:not(.is-done, .is-current) .c-stepper__label {
  color: var(--color-mute);
}
.c-stepper--vertical .c-stepper__step.is-done .c-stepper__label {
  color: var(--color-ink);
}
.c-stepper--vertical .c-stepper__step.is-done .c-stepper__label::before {
  border-color: var(--agent, var(--acseo-navy));
  background-color: var(--agent, var(--acseo-navy));
}
.c-stepper--vertical .c-stepper__step.is-current .c-stepper__label {
  color: var(--acseo-navy);
  font-weight: 700;
}
.c-stepper--vertical .c-stepper__step.is-current .c-stepper__label::before {
  border-color: var(--acseo-navy);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px var(--acseo-navy);
}
@media (width < 56.25rem) {
  .c-stepper:not(.c-stepper--vertical) .c-stepper__step:not(.is-current) .c-stepper__label {
    display: none;
  }
}

/* Encart d'un Échange : peut produire des demandes */
.c-exchange-note {
  border-radius: var(--radius-lg);
  background-color: var(--acseo-ice);
  padding: 0 1rem;
}
.c-exchange-note__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
  font-size: var(--font-size-sm);
}
.c-exchange-note__label {
  font-weight: 700;
}
.c-exchange-note__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-exchange-note__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Onglets d'une Demande sous 1024 px (Échanges / Dossier / Historique) : pilules compactes sur fond doux (FilMobileV5). */
.c-tabs {
  display: flex;
  gap: 0.125rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-line-soft);
  padding: 0.125rem;
}
.c-tabs__tab {
  flex: 1;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  padding: 0.3125rem 0.75rem;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
}
.c-tabs__tab[aria-selected=true] {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 34, 80, 0.08);
  color: var(--acseo-navy);
}
.c-tabs__tab:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.0625rem;
}
.c-tabs--mobile {
  margin: 0.5rem var(--chat-pad) 0;
}
@media screen and (width >= 64rem) and (height >= 31.25rem) {
  .c-tabs--mobile {
    display: none;
  }
}

/* Volet du fil v5 (« Votre demande », « Cet échange ») : 340 px, fond blanc, filet gauche ; à côté du fil dès 1024 px,
   jamais par-dessus. Sous 1024 px : onglets d'une Demande, feuille du bas d'un Échange (.c-tobi-chat__body plus bas). */
.c-dossier {
  display: flex;
  flex: 0 0 var(--volet-width);
  flex-direction: column;
  gap: 1rem;
  border-left: 1px solid var(--color-line);
  background-color: #fff;
  padding: 1.125rem 1.25rem;
  width: var(--volet-width);
  min-height: 0;
  overflow: hidden auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  scrollbar-color: var(--color-border) transparent;
  scrollbar-width: thin;
  /* Croix dans la feuille du bas, chevron à côté du fil. */
  /* L'agent en cours : médaillon de 28 px, « Tobi · Agent » en navy, ce qui se passe en petit. */
  /* Rôle de l'agent du fil : une phrase par agent, seule celle du data-agent du fil est montrée. */
  /* Titre de section : 11 px, capitales, adouci. */
  /* Nature de la Tâche : « [icône] Évolution · #57112 », sans pastille ; le numéro est un lien discret. */
  /* Tâches liées (lot T2) : une ligne par tâche, pictogramme du type, titre avec ellipse, pastille d'étape à droite. */
  /* Numéro et titre sur 2 lignes au plus (recette d'Alexandre du 22/10), jamais coupés sur une seule ligne. */
  /* Bloc « Réalisation » (maquette FilAvance « .code ») : fond doux, branche en chasse fixe, pastilles. */
  /* Branche Git : une ligne, coupée en points de suspension, nom entier en title. */
  /* Section d'une seule ligne : un paragraphe, sans puce. */
  /* Personne référente (chef de projet, référent technique) : pied du volet, initiales de 28 px. */
  /* Équipe ACSEO sous les Participants (mêmes lignes, chat/_share_people.html.twig) : le médaillon de Tobi garde son navy. */
  /* Historique replié sous le suivi, à côté du fil ; onglet à part sous 1024 px. */
}
.c-dossier__head {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}
.c-dossier__heading {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
}
.c-dossier__close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 0.5rem;
  background-color: transparent;
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-mute);
  cursor: pointer;
}
.c-dossier__close:hover {
  background-color: var(--color-soft);
  color: var(--acseo-navy);
}
.c-dossier__close .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.c-dossier__close-sheet {
  display: none;
}
.c-dossier__panel {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 1rem;
}
.c-dossier__panel--history {
  flex: 0 0 auto;
}
.c-dossier__context {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  border-radius: 0.75rem;
  background-color: var(--color-soft);
  padding: 0.625rem 0.75rem;
}
.c-dossier__context-text {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}
.c-dossier__context-name {
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-dossier__context-role {
  display: none;
}
.c-dossier__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-dossier__label {
  margin: 0;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c-dossier__ids {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  align-items: center;
  margin: 0;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
}
.c-dossier__ids .c-kind--plain {
  background-color: transparent;
  padding: 0;
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-dossier__ids .c-request-head__origin {
  margin-left: 0.375rem;
}
.c-dossier__ref {
  border-radius: var(--radius-xs);
  color: var(--color-text-link);
  font-weight: 600;
  text-decoration: none;
}
.c-dossier__ref[href]:hover, .c-dossier__ref[href]:focus-visible {
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-dossier__docs {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-dossier__doc {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
}
.c-dossier__doc .c-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--color-mute);
}
.c-dossier__doc-name {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-dossier__doc-name:hover {
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-dossier__tasks {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-dossier__task {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
}
.c-dossier__task .c-kind {
  flex-shrink: 0;
}
.c-dossier__task .c-icon {
  width: 1rem;
  height: 1rem;
}
.c-dossier__task-name {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  line-height: 1.35;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.c-dossier__task-name:hover {
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-dossier__task-ref {
  color: var(--color-mute);
  font-weight: 600;
}
.c-dossier__task-stage {
  flex-shrink: 0;
}
.c-dossier__code {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-soft);
  padding: 0.625rem 0.75rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
}
.c-dossier__branch {
  margin: 0;
  overflow: hidden;
  color: var(--acseo-navy);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-dossier__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}
.c-dossier__mr {
  display: inline-flex;
  gap: 0.3125rem;
  align-items: center;
  align-self: flex-start;
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-dossier__mr .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.c-dossier__doc-meta {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
}
.c-dossier__lines {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.c-dossier__text {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.c-dossier__line {
  position: relative;
  padding-left: 0.875rem;
  overflow-wrap: anywhere;
  /* Tableau (rangées regroupées par RequestSheetBuilder) : sans puce, sur toute la largeur. */
}
.c-dossier__line::before {
  position: absolute;
  left: 0;
  color: var(--color-mute);
  font-weight: 700;
  content: "·";
}
.c-dossier__line hr {
  margin: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}
.c-dossier__line--table {
  padding-left: 0;
}
.c-dossier__line--table::before {
  content: none;
}
.c-dossier__placeholder {
  margin: 0;
  border: 1px dashed var(--color-line);
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
}
.c-dossier__estimate {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
}
.c-dossier__hint {
  display: block;
  margin: 0;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-dossier__action {
  display: flex;
}
.c-dossier__manager {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin: auto 0 0;
  border-top: 1px solid var(--color-line);
  padding-top: 0.75rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
}
.c-dossier__manager strong {
  display: block;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
}
.c-dossier__manager--next {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.c-dossier__avatar {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--acseo-ice);
  width: 1.75rem;
  height: 1.75rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-2xs);
  font-weight: 700;
}
.c-dossier__avatar--tobi {
  background-color: var(--acseo-navy);
  padding: 0;
}
.c-dossier__team .c-dossier__avatar--tobi {
  background-color: var(--acseo-navy);
}
.c-dossier__history-toggle {
  display: flex;
  gap: 0.375rem;
  justify-content: space-between;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--color-line);
  background-color: transparent;
  padding: 0.75rem 0 0;
  width: 100%;
  color: var(--color-mute);
  font: inherit;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.c-dossier__history-toggle[hidden] {
  display: none;
}
.c-dossier__history-toggle:hover {
  color: var(--acseo-navy);
}
.c-dossier__history-toggle .c-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .c-dossier__history-toggle .c-icon {
    transition: none;
  }
}
.c-dossier__history-toggle[aria-expanded=true] .c-icon {
  transform: rotate(180deg);
}
.c-dossier__veil {
  display: none;
}

/* Mise en page du volet. À côté du fil (1024 px et plus) : ouvert sauf choix contraire (is-panel-closed) ; replié,
   le bouton « Dossier » de l'en-tête le rouvre. Entre 1024 et 1439 px, le fil se resserre quand il est ouvert. Sans JavaScript, le volet
   reste ouvert (has-side-panel n'est posé que par le contrôleur side-panel). */
.c-tobi-chat__body.has-panel {
  position: relative;
}
@media screen and (width >= 64rem) and (height >= 31.25rem) {
  .c-tobi-chat__body.has-panel {
    /* Au-dessus du fil qui glisse vers son nouveau centre pendant l'ouverture (side_panel_controller.js). */
    /* Volet replié (recettes d'Alexandre du 22/10) : il garde son filet gris, le même que le bord du volet ouvert, au
       bord droit de la zone, sans bande ni colonne : le fil qui défile va jusqu'au filet, sa barre de défilement
       fine s'y colle. */
    /* Historique d'une Demande : sous le suivi, replié tant que le bouton « Historique » ne l'ouvre pas. */
  }
  .c-tobi-chat__body.has-panel .c-dossier {
    position: relative;
    z-index: 1;
  }
  .c-tobi-chat.is-panel-closed .c-tobi-chat__body.has-panel .c-dossier {
    display: none;
  }
  .c-tobi-chat.is-panel-closed .c-tobi-chat__body.has-panel {
    padding-right: 1px;
  }
  .c-tobi-chat.is-panel-closed .c-tobi-chat__body.has-panel::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-line);
    width: 1px;
    content: "";
  }
  .c-tobi-chat__body.has-panel .c-dossier__close-sheet {
    display: none;
  }
  .c-tobi-chat.has-side-panel .c-tobi-chat__body.has-panel .c-dossier:not(.is-history-open) .c-dossier__history {
    display: none;
  }
}
@media screen and (64rem <= width < 90rem) and (height >= 31.25rem) {
  .c-tobi-chat.is-panel-open .c-tobi-chat__body.has-panel {
    --chat-column-width: var(--thread-col-narrow);
    --chat-pad: max(1.75rem, calc((100% - var(--thread-col-narrow)) / 2));
  }
}
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-tobi-chat__body.has-panel .c-dossier__history-toggle {
    display: none;
  }
}

/* Échange sous 1024 px : le volet devient une feuille du bas sur un voile, ouverte par le bouton de l'en-tête. */
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-tobi-chat__body.has-panel:not(.has-aside) .c-dossier {
    display: none;
  }
  .c-tobi-chat.is-sheet-open .c-tobi-chat__body.has-panel:not(.has-aside) .c-dossier {
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 41;
    border-left: 0;
    border-radius: 1.125rem 1.125rem 0 0;
    padding: 0.625rem 1rem 1.125rem;
    box-shadow: var(--shadow-sheet);
    width: auto;
    max-height: 80vh;
  }
  .c-tobi-chat.is-sheet-open .c-tobi-chat__body.has-panel:not(.has-aside) .c-dossier::before {
    align-self: center;
    border-radius: var(--radius-pill);
    background-color: #d5e0e8;
    width: 2.25rem;
    height: 0.25rem;
    content: "";
  }
  .c-tobi-chat.is-sheet-open .c-tobi-chat__body.has-panel:not(.has-aside) .c-dossier__veil {
    display: block;
    position: fixed;
    z-index: 40;
    background-color: var(--color-overlay);
    inset: 0;
  }
  .c-tobi-chat__body.has-panel:not(.has-aside) .c-dossier__close-beside {
    display: none;
  }
  .c-tobi-chat__body.has-panel:not(.has-aside) .c-dossier__close-sheet {
    display: block;
  }
}

/* Demande sous 1024 px : un panneau à la fois, choisi par les onglets (contrôleur tabs) ou le bouton du volet. */
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-tobi-chat__body.has-aside {
    flex-direction: column;
    /* Onglet Dossier ou Historique choisi : fondu court (jamais le fil, affiché d'entrée au chargement). */
  }
  .c-tobi-chat__body.has-aside [data-panel] {
    display: none;
  }
  .c-tobi-chat__body.has-aside[data-tabs-active=chat] .c-tobi-chat__col, .c-tobi-chat__body.has-aside[data-tabs-active=dossier] #panel-dossier, .c-tobi-chat__body.has-aside[data-tabs-active=history] #panel-history {
    display: flex;
  }
  .c-tobi-chat__body.has-aside[data-tabs-active=dossier] #panel-dossier, .c-tobi-chat__body.has-aside[data-tabs-active=history] #panel-history {
    animation: motion-fade var(--motion-fast) var(--ease-out);
  }
  .c-tobi-chat__body.has-aside .c-dossier {
    display: none;
    flex: 1 1 auto;
    border-left: 0;
    width: auto;
  }
  .c-tobi-chat__body.has-aside .c-dossier__head {
    display: none;
  }
  .c-tobi-chat__body.has-aside[data-tabs-active=dossier] .c-dossier, .c-tobi-chat__body.has-aside[data-tabs-active=history] .c-dossier {
    display: flex;
  }
}

.c-timeline {
  display: flex;
  flex-direction: column;
  /* Repliée (avec JavaScript seulement) : ~4 lignes, le bouton déplie. */
}
.c-timeline__item {
  display: grid;
  column-gap: 0.75rem;
  grid-template-columns: 0.75rem 1fr;
  padding-bottom: 1.125rem;
}
.c-timeline__dot {
  grid-row: span 2;
  margin-top: 0.25rem;
  border-radius: 50%;
  background-color: var(--acseo-teal-light);
  width: 0.75rem;
  height: 0.75rem;
}
.c-timeline__item.is-latest .c-timeline__dot {
  background-color: var(--acseo-blue-strong);
}
.c-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.c-timeline__text {
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.c-timeline__body.is-folded:not(.is-expanded) .c-timeline__text {
  max-height: 5.8em;
  overflow: hidden;
}
.c-timeline__more {
  align-self: flex-start;
  border: 0;
  background-color: transparent;
  padding: 0.25rem 0;
  min-height: 2rem;
  color: var(--color-text-link);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.c-timeline__more[hidden] {
  display: none;
}
.c-timeline__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Markdown simple des textes Redmine et des specs des cartes (contrôleur markdown) : titres courts en gras sur leur
   propre ligne, listes, code. */
.c-dossier__line,
.c-dossier__text,
.c-timeline__text,
.c-chat-card__spec-text {
  /* Tableau d'une spec ou du dossier : bordures fines, et défilement dans son cadre en mobile (la page ne s'élargit pas). */
}
.c-dossier__line .c-md-heading,
.c-dossier__text .c-md-heading,
.c-timeline__text .c-md-heading,
.c-chat-card__spec-text .c-md-heading {
  display: block;
  margin-top: 0.25rem;
  font-size: inherit;
  font-weight: 700;
}
.c-dossier__line .c-md-list,
.c-dossier__text .c-md-list,
.c-timeline__text .c-md-list,
.c-chat-card__spec-text .c-md-list {
  margin: 0.125rem 0;
  padding-left: 1.25em;
  list-style: disc;
}
.c-dossier__line ol.c-md-list,
.c-dossier__text ol.c-md-list,
.c-timeline__text ol.c-md-list,
.c-chat-card__spec-text ol.c-md-list {
  list-style: decimal;
}
.c-dossier__line .c-md-code,
.c-dossier__text .c-md-code,
.c-timeline__text .c-md-code,
.c-chat-card__spec-text .c-md-code {
  border-radius: 0.25rem;
  background-color: var(--acseo-ice);
  padding: 0.05em 0.3em;
  font-size: 0.9em;
}
.c-dossier__line .c-md-link,
.c-dossier__text .c-md-link,
.c-timeline__text .c-md-link,
.c-chat-card__spec-text .c-md-link {
  color: var(--color-text-link);
  text-decoration: underline;
}
.c-dossier__line .c-md-table,
.c-dossier__text .c-md-table,
.c-timeline__text .c-md-table,
.c-chat-card__spec-text .c-md-table {
  margin: 0.375rem 0;
  max-width: 100%;
  overflow-x: auto;
}
.c-dossier__line .c-md-table table,
.c-dossier__text .c-md-table table,
.c-timeline__text .c-md-table table,
.c-chat-card__spec-text .c-md-table table {
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.c-dossier__line .c-md-table th,
.c-dossier__line .c-md-table td,
.c-dossier__text .c-md-table th,
.c-dossier__text .c-md-table td,
.c-timeline__text .c-md-table th,
.c-timeline__text .c-md-table td,
.c-chat-card__spec-text .c-md-table th,
.c-chat-card__spec-text .c-md-table td {
  border: 1px solid var(--acseo-divider);
  padding: 0.25rem 0.5rem;
  vertical-align: top;
  text-align: left;
}
.c-dossier__line .c-md-table th.c-md-table__cell--center,
.c-dossier__line .c-md-table td.c-md-table__cell--center,
.c-dossier__text .c-md-table th.c-md-table__cell--center,
.c-dossier__text .c-md-table td.c-md-table__cell--center,
.c-timeline__text .c-md-table th.c-md-table__cell--center,
.c-timeline__text .c-md-table td.c-md-table__cell--center,
.c-chat-card__spec-text .c-md-table th.c-md-table__cell--center,
.c-chat-card__spec-text .c-md-table td.c-md-table__cell--center {
  text-align: center;
}
.c-dossier__line .c-md-table th.c-md-table__cell--right,
.c-dossier__line .c-md-table td.c-md-table__cell--right,
.c-dossier__text .c-md-table th.c-md-table__cell--right,
.c-dossier__text .c-md-table td.c-md-table__cell--right,
.c-timeline__text .c-md-table th.c-md-table__cell--right,
.c-timeline__text .c-md-table td.c-md-table__cell--right,
.c-chat-card__spec-text .c-md-table th.c-md-table__cell--right,
.c-chat-card__spec-text .c-md-table td.c-md-table__cell--right {
  text-align: right;
}
.c-dossier__line .c-md-table th,
.c-dossier__text .c-md-table th,
.c-timeline__text .c-md-table th,
.c-chat-card__spec-text .c-md-table th {
  background-color: var(--acseo-ice);
  font-weight: 700;
}

/* Ligne du Dossier écrite « 1. Inscription » ou « - Inscription » : chaque ligne passe seule par le Markdown, ce qui
   donnerait « • 1. » (une liste d'un seul élément par ligne) ; la puce de la ligne suffit. */
.c-dossier__line > .c-md-list:only-child:has(> li:only-child),
.c-dossier__text > .c-md-list:only-child:has(> li:only-child) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Spec d'une carte GO ou spec : chaque section (« Ce qui est demandé », « Comment ce sera fait ») respire. */
.c-chat-card__spec-text .c-md-heading {
  margin: 0.75rem 0 0.125rem;
}
.c-chat-card__spec-text .c-md-heading:first-child {
  margin-top: 0;
}

@keyframes tobi-thinking-blink {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}
@keyframes tobi-thinking-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}
@keyframes tobi-pulse {
  50% {
    opacity: 0.35;
  }
}
/* Réponses rapides (étape « À tester ») et remplacement du champ quand une carte GO est ouverte. */
.c-tobi-chat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  /* « C'est bon pour moi » en navy, « Quelque chose ne va pas » bordé : boutons compacts (maquette FilAvance). */
}
.c-tobi-chat__quick .c-chip {
  border-color: var(--color-line);
  border-radius: 0.625rem;
  padding: 0.375rem 0.875rem;
  min-height: 0;
  font-weight: 600;
}
.c-tobi-chat__quick .c-chip:first-child {
  border-color: var(--acseo-navy);
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-tobi-chat__quick .c-chip:first-child:hover {
  background-color: var(--acseo-blue-strong);
}
.c-tobi-chat__quick[hidden] {
  display: none;
}

/* Étape « À tester » avant l'envoi du lien de recette : une ligne discrète à la place des réponses rapides. */
.c-tobi-chat__recette-wait {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* Aucun projet choisi : l'alerte remplace le champ et le bouton ouvre le sélecteur de la barre latérale. */
.c-tobi-chat__no-project {
  display: flex;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;
  /* Le texte passe à la ligne, le bouton « Choisir un projet » reste à sa droite. */
}
.c-tobi-chat__no-project > span {
  flex: 1 1 auto;
  min-width: 0;
}
.c-tobi-chat__no-project > .c-button {
  flex-shrink: 0;
}

.c-tobi-chat__composer[hidden],
.c-tobi-chat__starters[hidden] {
  display: none;
}

.c-tobi-chat__go-notice {
  display: none;
  margin: 0;
  border-radius: var(--radius-xl);
  background-color: var(--acseo-ice);
  padding: 0.75rem 1rem;
  width: 100%;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-tobi-chat:has(.c-chat-card--go:not(.is-inactive, .is-answered)) .c-tobi-chat__go-notice {
  display: block;
}
.c-tobi-chat:has(.c-chat-card--go:not(.is-inactive, .is-answered)) .c-tobi-chat__composer,
.c-tobi-chat:has(.c-chat-card--go:not(.is-inactive, .is-answered)) .c-tobi-chat__quick {
  display: none;
}

/* Bulle d'aide fermable (en-tête d'un échange). */
.c-help-bubble {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-radius: var(--radius-lg);
  background-color: var(--acseo-ice);
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  color: var(--color-text);
}
.c-help-bubble__icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--acseo-blue-strong);
}
.c-help-bubble__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.c-help-bubble__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-help-bubble__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.c-help-bubble__close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  width: var(--touch-target, 2.75rem);
  height: var(--touch-target, 2.75rem);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.c-help-bubble__close:hover {
  background-color: var(--color-overlay-soft, rgba(0, 34, 80, 0.08));
}
.c-help-bubble__close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Bascule discussion → tâche (tobi_chat_continuity.js) : la saisie est figée par `disabled` ; sans View Transition, le fil s'estompe un peu
   avant que Turbo affiche la tâche (jamais de page blanche) ; aucune animation avec prefers-reduced-motion (Turbo
   saute alors la View Transition de lui-même). */
.c-tobi-chat.is-fading .c-tobi-chat__history {
  transition: opacity 0.4s ease 0.3s;
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .c-tobi-chat.is-fading .c-tobi-chat__history {
    transition: none;
  }
}

.c-tobi-chat[data-agent=knowledge] .c-dossier__context-role[data-agent-role=knowledge],
.c-tobi-chat[data-agent=assist] .c-dossier__context-role[data-agent-role=assist],
.c-tobi-chat[data-agent=delivery] .c-dossier__context-role[data-agent-role=delivery] {
  display: inline;
}

/*
 * Passage d'une page à l'autre (retour d'Alexandre du 30/10 : « trop brut » entre deux discussions, « un poil haché »
 * depuis l'accueil). Turbo 8 joue une View Transition quand la page quittée et la page suivante portent toutes deux
 * <meta name="view-transition" content="same-origin"> : l'accueil et les pages de fil (home/index et chat/index).
 * Charte de mouvement (settings/_tokens.scss) : le menu et la barre du haut ne bougent pas ; le champ de saisie glisse
 * de sa place à la suivante (l'accueil le pose en bas de la fenêtre, le fil l'attend sous les messages) ; le fil quitté
 * s'efface (fast) et le nouveau entre en montant de 4 px (base) ; le reste de la page passe en fondu, l'ancienne image
 * restant pleine dessous, sans creux de blanc. Rien ne bouge avec prefers-reduced-motion.
 */
.c-shell-nav {
  view-transition-name: tobi-nav;
}

.c-shell-topbar {
  view-transition-name: tobi-topbar;
}

.c-composer-home__box,
.c-tobi-chat__composer {
  view-transition-name: tobi-composer;
}

.c-tobi-chat__history {
  view-transition-name: tobi-thread;
}

::view-transition-group(tobi-nav),
::view-transition-old(tobi-nav),
::view-transition-new(tobi-nav),
::view-transition-group(tobi-topbar),
::view-transition-old(tobi-topbar),
::view-transition-new(tobi-topbar) {
  animation: none;
}

::view-transition-old(root) {
  animation: none;
}

::view-transition-new(root) {
  animation: motion-fade var(--motion-base) var(--ease-out) both;
}

/* Entre deux fils le champ ne fait que se recaler (base) ; il ne glisse lentement (slow) qu'en venant de l'accueil, où il
   part du bas de la fenêtre (classe posée au début de la visite, lib/page_wait.js). */
::view-transition-group(tobi-composer) {
  animation-duration: var(--motion-base);
  animation-timing-function: var(--ease-out);
}

:root.is-from-home::view-transition-group(tobi-composer) {
  animation-duration: var(--motion-slow);
}

::view-transition-old(tobi-composer),
::view-transition-new(tobi-composer) {
  animation-duration: var(--motion-fast);
}

::view-transition-group(tobi-thread) {
  animation-duration: var(--motion-base);
  animation-timing-function: var(--ease-out);
}

::view-transition-old(tobi-thread) {
  animation: page-leave var(--motion-fast) var(--ease-in) both;
}

::view-transition-new(tobi-thread) {
  animation: motion-enter var(--motion-base) var(--ease-out) 60ms both;
}

/* Attente de la page suivante (lib/page_wait.js) : le fil quitté s'atténue dès le clic, sans attendre le serveur. */
.c-tobi-chat__history.is-leaving {
  opacity: 0.6;
  transition: opacity var(--motion-fast) var(--ease-in);
}

/* Barre de Turbo, montrée seulement après 800 ms d'attente : fine, au bleu ACSEO, sans le bleu vif par défaut. */
/* stylelint-disable-next-line selector-class-pattern -- class set by Turbo itself */
.turbo-progress-bar {
  background-color: var(--acseo-blue);
  height: 2px;
}

/* Premier message venu de l'accueil (tobi_chat_arrival.js land) : « Tobi réfléchit » entre seul, en fondu, juste après
   la bulle du client posée sans mouvement. */
.c-tobi-chat__row.is-landing {
  animation: motion-fade var(--motion-base) var(--ease-out) var(--motion-fast) both;
}

@keyframes page-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .c-tobi-chat__row.is-landing {
    animation: none;
  }
  .c-tobi-chat__history.is-leaving {
    transition: none;
  }
}
/* Cartes cliquables du chat (CONTRACT § 12) : choix, GO, liens, fermeture, contact (AR2c) et backlog. Fil v5 : sobres, filet de
   1 px, rayon 14 px, fond blanc, boutons compacts (navy pour l'action principale, bordé pour l'autre, lien bleu foncé). */
.c-chat-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  background-color: #fff;
  padding: 0.75rem 0.875rem;
  width: 100%;
  min-width: 0;
  max-width: min(100%, var(--chat-bubble-max, 44rem));
  color: var(--acseo-navy);
  /* « À vous de vérifier sur la recette » : carte bordée, point corail devant le titre, lien « Ouvrir la recette ». */
  /* Carte « Nouveau sujet » (30/10) : une étiquette discrète au-dessus du sujet, puis le lien en bouton. */
  /* Carte GO et carte de description : petit titre de section au-dessus du résumé (élément traduit du gabarit,
     chat.card.go_to_validate / spec_to_validate, mis en capitales ici). */
  /* Taille estimée : pastille de preuve de l'agent Assist (fil v5). */
  /* Carte GO à plusieurs sujets (lot T2) : deux petits groupes, une ligne compacte par sujet (pictogramme du type,
     titre sur une ligne avec ellipse), contrôles natifs de 14 px. Répondue : une étiquette discrète par sujet. */
  /* « Recommandé » : pastille courte à côté du libellé (le hint commence par ce mot, voir _chat_card.html.twig). */
  /* Aide sous « Ouvrir la recette » : identifiants de recette (12 px, atténuée). */
  /* Ligne d'état d'une carte répondue : texte atténué avec icône, aucun aspect de bouton. */
  /* Carte backlog répondue « Mettre au backlog » : icône pause en navy (rien n'est lancé, pas une réussite). */
  /* Carte répondue ou dépassée : fond neutre (plus de rose, le client n'a plus à agir). */
  /* Liens d'une carte répondue ou dépassée : jamais atténués (le client peut revoir la recette), style secondaire. Le
     lien d'une carte « Nouveau sujet » dépassée marche encore : même traitement. */
  /* Carte de liens ordinaire : pas de cadre, la carte « À vous de vérifier » garde le sien même répondue. */
}
.c-chat-card--links {
  border: 0;
  padding: 0;
}
.c-chat-card--verify {
  gap: 0.625rem;
  border: 1px solid var(--color-line);
  padding: 0.875rem 1rem;
}
.c-chat-card__verify-title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-chat-card__verify-title::before {
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--acseo-coral);
  width: 0.4375rem;
  height: 0.4375rem;
  content: "";
}
.c-chat-card__link {
  display: inline-flex;
  gap: 0.3125rem;
  align-items: center;
  color: var(--acseo-blue-strong);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}
.c-chat-card__link:hover {
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-chat-card__link .c-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.c-chat-card__prompt, .c-chat-card__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.45;
}
.c-chat-card__subject-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-chat-card--verify .c-chat-card__prompt {
  color: var(--color-ink);
  font-weight: 400;
  line-height: 1.55;
}
.c-chat-card__go {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.c-chat-card__section {
  margin: 0;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c-chat-card__spec {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-chat-card__spec-text {
  border-radius: 0.625rem;
  background-color: var(--color-soft);
  padding: 0.625rem 0.75rem;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.c-chat-card__steps {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  list-style: decimal;
}
.c-chat-card__estimate {
  align-self: flex-start;
  margin: 0;
  border-radius: var(--radius-pill);
  background-color: var(--agent-assist-soft);
  padding: 0.1875rem 0.625rem;
  color: var(--agent-assist-text);
  font-size: var(--font-size-2xs);
  font-weight: 700;
}
.c-chat-card__pick {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.c-chat-card__pick-title {
  margin: 0 0 0.25rem;
  padding: 0;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c-chat-card__subjects {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-chat-card__subject {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.25rem 0.375rem;
  min-width: 0;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}
.c-chat-card__subject[hidden] {
  display: none;
}
.c-chat-card__subject input {
  flex-shrink: 0;
  margin: 0;
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--acseo-navy);
}
.c-chat-card__subject .c-kind {
  flex-shrink: 0;
}
.c-chat-card__subject .c-icon {
  width: 1rem;
  height: 1rem;
}
.c-chat-card__subject--pick {
  cursor: pointer;
}
.c-chat-card__subject--pick:hover {
  background-color: var(--color-soft);
}
.c-chat-card__subject--pick:focus-within {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.0625rem;
}
.c-chat-card__pick:disabled .c-chat-card__subject--pick {
  cursor: default;
}
.c-chat-card__pick:disabled .c-chat-card__subject--pick:hover {
  background-color: transparent;
}
.c-chat-card__subject-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-chat-card__subject-tag {
  flex-shrink: 0;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 600;
}
.c-chat-card__subject--followed .c-chat-card__subject-tag {
  color: var(--acseo-navy);
  font-weight: 700;
}
.c-chat-card__subject--skipped {
  color: var(--color-mute);
}
.c-chat-card__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.c-chat-card__legend {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.c-chat-card__option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0.5rem 0.625rem;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  column-gap: 0.5rem;
  /* Option cochée : filet navy, fond doux, texte navy. */
  /* Carte répondue : calme et lisible. L'option choisie a un fond clair, un filet et une coche ; les autres
     sont atténuées. Aucun survol ni pointeur (plus rien à cliquer). */
}
.c-chat-card__option input {
  margin: 0;
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--acseo-navy);
}
.c-chat-card__option:hover {
  background-color: var(--color-soft);
}
.c-chat-card__option:focus-within {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-chat-card__option:has(input:checked) {
  border-color: var(--acseo-navy);
  background-color: var(--color-soft);
  color: var(--acseo-navy);
}
.c-chat-card__option--chosen {
  position: relative;
  border-color: transparent;
  background-color: var(--color-success-bg);
  color: var(--acseo-navy);
  cursor: default;
}
.c-chat-card__option--chosen:hover, .c-chat-card__option--chosen:has(input:checked) {
  border-color: transparent;
  background-color: var(--color-success-bg);
  color: var(--acseo-navy);
}
.c-chat-card__option--muted {
  position: relative;
  border-color: transparent;
  background-color: transparent;
  color: var(--color-mute);
  cursor: default;
}
.c-chat-card__option--muted:hover {
  background-color: transparent;
}
.c-chat-card__option-mark {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 0.875rem;
  height: 0.875rem;
}
.c-chat-card__option--chosen .c-chat-card__option-mark {
  color: var(--color-success);
}
.c-chat-card__option-check {
  width: 0.875rem;
  height: 0.875rem;
}
.c-chat-card__option-hint {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  font-weight: 400;
  grid-column: 2;
}
.c-chat-card__option-tag {
  display: inline-block;
  margin-left: 0.375rem;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: 0.0625rem 0.4375rem;
  color: var(--acseo-blue-strong);
  font-size: 0.625rem;
  font-weight: 700;
  vertical-align: 0.0625rem;
}
.c-chat-card__hint {
  opacity: 0.85;
  margin: 0;
  font-size: var(--font-size-xs);
}
.c-chat-card__login-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}
.c-chat-card__actions, .c-chat-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  align-items: center;
  margin: 0;
  padding: 0;
  min-width: 0;
  list-style: none;
}
.c-chat-card__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  /* Action principale en navy (charte v4) : le corail reste réservé aux alertes. */
  background-color: var(--acseo-navy);
  padding: 0.375rem 0.875rem;
  color: #fff;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* « Répondre autrement » : simple lien, l'action principale reste seule en bouton. */
}
.c-chat-card__button:hover {
  background-color: var(--acseo-blue-strong);
  color: #fff;
}
.c-chat-card__button:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-chat-card__button--secondary {
  border-color: var(--color-line);
  background-color: #fff;
  color: var(--acseo-navy);
}
.c-chat-card__button--secondary:hover {
  background-color: var(--color-soft);
  color: var(--acseo-navy);
}
.c-chat-card__button--link {
  border-color: transparent;
  background-color: transparent;
  padding-inline: 0.25rem;
  color: var(--acseo-blue-strong);
}
.c-chat-card__button--link:hover {
  background-color: transparent;
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-chat-card__button--navy {
  background-color: var(--acseo-navy);
}
.c-chat-card__button--navy:hover {
  background-color: var(--acseo-blue-strong);
}
.c-chat-card__button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.c-chat-card__actions .c-chat-card__button {
  flex: 0 0 auto;
  /* Un libellé long (« Ouvrir une discussion sur ce sujet ») passe à la ligne au lieu de déborder à 390 px. */
  max-width: 100%;
}
.c-chat-card__answer {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: default;
}
.c-chat-card__answer-icon {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
}
.c-chat-card__answer--confirmed .c-chat-card__answer-icon, .c-chat-card__answer--closed .c-chat-card__answer-icon, .c-chat-card__answer--contacted .c-chat-card__answer-icon, .c-chat-card__answer--approved .c-chat-card__answer-icon {
  color: var(--color-success);
}
.c-chat-card__answer--backlogged .c-chat-card__answer-icon {
  color: var(--acseo-navy);
}
.c-chat-card__error, .c-chat-card__required {
  border-radius: var(--radius-md);
  background-color: var(--color-danger-bg);
  padding: 0.5rem 0.75rem;
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-chat-card__error[hidden], .c-chat-card__required[hidden] {
  display: none;
}
.c-chat-card.is-answered, .c-chat-card.is-inactive {
  border-color: var(--color-line);
  background-color: var(--color-head-bg);
}
.c-chat-card.is-answered .c-chat-card__button, .c-chat-card.is-inactive .c-chat-card__button {
  opacity: 0.5;
}
.c-chat-card--links.is-answered .c-chat-card__button, .c-chat-card--links.is-inactive .c-chat-card__button, .c-chat-card--new_subject.is-inactive .c-chat-card__button {
  opacity: 1;
  border-color: var(--color-line);
  background-color: #fff;
  color: var(--acseo-navy);
}
.c-chat-card--links.is-answered .c-chat-card__button:hover, .c-chat-card--links.is-inactive .c-chat-card__button:hover, .c-chat-card--new_subject.is-inactive .c-chat-card__button:hover {
  background-color: var(--color-soft);
  color: var(--acseo-navy);
}
.c-chat-card--links.is-answered:not(.c-chat-card--verify), .c-chat-card--links.is-inactive:not(.c-chat-card--verify) {
  border: 0;
  background-color: transparent;
}
.c-chat-card.is-loading {
  opacity: 0.7;
  cursor: progress;
}

/* Carte de liaison Échange <-> Demande : même famille que la carte de validation */
.c-chat-card--link {
  border: 1px solid var(--color-line);
  padding: 0.75rem 0.875rem;
}
.c-chat-card--link .c-chat-card__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  align-items: center;
}
.c-chat-card--link .c-chat-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

/* Zone de dépôt des champs client (attachment_drop_controller.js, components/_drop_zone.html.twig) : couvre le cadre
   du champ seulement pendant le survol de fichiers. Douce : filet pointillé navy 1 px, fond glace, icône et libellé.
   Ne capte aucun événement (pointer-events: none) : le cadre reçoit le dépôt, le compteur évite le clignotement.
   Le cadre porte position: relative (_home.scss, _tobi-chat.scss). */
.c-drop-zone {
  display: flex;
  position: absolute;
  inset: 0;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 2;
  visibility: hidden;
  border: 1px dashed var(--color-primary);
  border-radius: inherit;
  background-color: var(--color-ice-bubble);
  color: var(--color-ice-bubble-text);
  font-size: 0.875rem;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s;
}
.c-drop-zone.is-active {
  opacity: 1;
  visibility: visible;
}
.c-drop-zone__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .c-drop-zone {
    transition: none;
  }
}
/* Commande « / » des champs client (skill_picker_controller.js, CONTRACT § 19). Liste des compétences sous le champ
   (accueil, --down) ou au-dessus (fil, par défaut) : libellé en gras 13 px, description atténuée 12 px, nom technique
   en infobulle, 6 lignes visibles au plus. Puce « / libellé » de la compétence choisie, dans le cadre du champ, avec un
   bouton discret pour la retirer. Le cadre porte position: relative (_tobi-chat.scss, _home.scss). */
.c-skill-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.375rem);
  left: 0;
  z-index: 3;
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  padding: 0.25rem;
  box-shadow: 0 0.25rem 1rem var(--color-proof-line);
  max-height: 16.5rem; /* 6 options de 2,6 rem environ */
  overflow-y: auto;
  list-style: none;
  /* Une ligne : le résumé coupé sur un mot (serveur) ; la ligne active (survol ou clavier) montre la description
     entière, sur plusieurs lignes. */
}
.c-skill-picker--down {
  top: calc(100% + 0.375rem);
  bottom: auto;
}
.c-skill-picker__option {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.c-skill-picker__option:hover, .c-skill-picker__option.is-active {
  background-color: var(--color-soft);
}
.c-skill-picker__name {
  overflow: hidden;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-skill-picker__summary, .c-skill-picker__description {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.35;
}
.c-skill-picker__summary {
  overflow: hidden;
  white-space: nowrap;
}
.c-skill-picker__description {
  display: none;
}
.c-skill-picker__option:hover .c-skill-picker__summary, .c-skill-picker__option.is-active .c-skill-picker__summary {
  display: none;
}
.c-skill-picker__option:hover .c-skill-picker__description, .c-skill-picker__option.is-active .c-skill-picker__description {
  display: block;
}

.c-skill-chip {
  display: inline-flex;
  flex: none;
  gap: 0.125rem;
  align-items: center;
  align-self: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background-color: var(--color-soft);
  padding: 0.0625rem 0.125rem 0.0625rem 0.5rem;
  max-width: 45%;
  color: var(--acseo-navy);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.5;
}
.c-skill-chip[hidden] {
  display: none;
}
.c-skill-chip__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-skill-chip__remove {
  display: inline-flex;
  flex: none;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-mute);
  cursor: pointer;
}
.c-skill-chip__remove:hover {
  color: var(--acseo-navy);
}
.c-skill-chip__remove:focus-visible {
  outline: 1px solid var(--color-focus);
  outline-offset: 1px;
}
.c-skill-chip__remove .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Centre de notifications (23/10, maquettes NotifCloche, NotifMobile, NotifToutes, canevas v45).
   Cloche du rail et du bandeau : pastille glace (le corail reste à « Tâches en cours ») ; panneau blanc à côté du rail
   au bureau, plein écran sous 820 px ; lignes : icône du type, titre, texte et suite, projet et heure, point bleu non lu.
   Règles de la cloche du rail ici plutôt que dans _shell.scss, pour ne pas croiser le menu admin de la session design. */
/* Pastille du nombre de non lues : glace, chiffre navy, liseré navy pour se détacher du rail. */
.c-shell-nav__bell-count,
.c-shell-topbar__bell-count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: 0 0.3125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  color: var(--acseo-navy);
  font-size: 0.6563rem;
  font-weight: 700;
  line-height: 1;
}
.c-shell-nav__bell-count[hidden],
.c-shell-topbar__bell-count[hidden] {
  display: none;
}

/* La cloche du rail ne sert qu'au bureau : le tiroir mobile laisse la place à celle du bandeau. */
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-shell-nav__item--bell {
    display: none;
  }
}

@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  :root:not(.is-nav-expanded) .c-shell-nav__bell-count {
    position: absolute;
    top: 0.3125rem;
    right: 0.25rem;
    box-shadow: 0 0 0 2px var(--color-nav-bg);
    min-width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
  }
}
.c-shell-topbar__bell {
  display: flex;
  position: relative;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 0.625rem;
  background-color: transparent;
  width: 2.25rem;
  height: 2.25rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.c-shell-topbar__bell:hover, .c-shell-topbar__bell[aria-expanded=true] {
  background-color: var(--color-nav-active);
  color: #fff;
}
.c-shell-topbar__bell .c-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.c-shell-topbar__bell-count {
  position: absolute;
  top: 0.1875rem;
  right: 0.125rem;
  box-shadow: 0 0 0 2px var(--color-nav-bg);
  min-width: 1rem;
  height: 1rem;
  font-size: 0.625rem;
}

/* Panneau : 380 px à droite du rail (replié ou déplié), aligné sur la cloche et gardé dans la fenêtre. Charte de
   mouvement : il entre en fondu en montant de 4 px dès qu'il n'est plus caché ; la sortie, plus courte, est jouée par
   notifications_controller.js. */
.c-notif-panel {
  display: flex;
  position: fixed;
  flex-direction: column;
  z-index: 70;
  background-color: #fff;
  color: var(--color-ink);
  animation: motion-enter var(--motion-base) var(--ease-out);
}
.c-notif-panel[hidden] {
  display: none;
}
.c-notif-panel:focus {
  outline: none;
}
.c-notif-panel__head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-bottom: 1px solid var(--color-line-soft);
  padding: 0 0.625rem 0.625rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-notif-panel__head {
    padding: 0.5rem 0.75rem 0.5rem 0.25rem;
    min-height: 3.125rem;
  }
}
.c-notif-panel__back {
  display: none;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-ink);
  cursor: pointer;
}
.c-notif-panel__back .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-notif-panel__back {
    display: flex;
  }
}
.c-notif-panel__title {
  flex: none;
  margin: 0;
  color: var(--acseo-navy);
  font-size: var(--font-size-md);
  font-weight: 600;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-notif-panel__title {
    flex: 1;
    font-size: var(--font-size-base);
  }
}
.c-notif-panel__count {
  flex: none;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: 0.125rem 0.5rem;
  color: var(--color-ink);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.c-notif-panel__count[hidden] {
  display: none;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-notif-panel__count {
    display: none;
  }
}
.c-notif-panel__read-all {
  margin-left: auto;
}
.c-notif-panel__read-all[hidden] {
  display: none;
}
.c-notif-panel__read-all, .c-notif-panel__all {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  border: 0;
  background: none;
  padding: 0.25rem;
  color: var(--color-text-link);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.c-notif-panel__read-all:hover, .c-notif-panel__all:hover {
  text-decoration: underline;
}
.c-notif-panel__read-all .c-icon, .c-notif-panel__all .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.c-notif-panel__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-notif-panel__body {
    padding: 0 0.375rem;
  }
}
.c-notif-panel__error {
  margin: 0.75rem 0.625rem 0;
  font-size: var(--font-size-xs);
}
.c-notif-panel__error[hidden] {
  display: none;
}
.c-notif-panel__foot {
  display: flex;
  justify-content: center;
  margin-top: 0.375rem;
  border-top: 1px solid var(--color-line-soft);
  padding: 0.625rem 0 0.375rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-notif-panel__foot {
    padding: 0.75rem 0 calc(1.375rem + env(safe-area-inset-bottom));
  }
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-notif-panel {
    top: clamp(1rem, var(--notif-top, 6rem) - 10rem, 100dvh - 34rem);
    left: calc(var(--sidebar-width) + 0.75rem);
    border-radius: var(--radius-md-plus);
    padding: 0.75rem 0.5rem 0.375rem;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 34, 80, 0.1), 0 0 0 1px var(--color-line);
    width: 23.75rem;
    max-height: min(33rem, 100dvh - 2rem);
  }
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-notif-panel {
    inset: 0;
    padding-top: env(safe-area-inset-top);
  }
}

/* Liste : titres de groupe en petites capitales atténuées, lignes de 13 px. Partagée par le panneau et la page. */
.c-notif-list__group {
  margin: 0;
  padding: 0.75rem 0.625rem 0.25rem;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.c-notif-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-notif {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-radius: 0.625rem;
  padding: 0.625rem;
  color: var(--color-ink);
  text-decoration: none;
  /* Point bleu : non lue (jamais seul porteur de l'information, « Non lue » est lu par les lecteurs d'écran). */
}
.c-notif:hover, .c-notif:focus-visible {
  background-color: var(--color-soft);
}
.c-notif__icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 0.5625rem;
  background-color: var(--acseo-ice);
  width: 1.875rem;
  height: 1.875rem;
  color: var(--acseo-navy);
}
.c-notif__icon .c-icon {
  width: 1rem;
  height: 1rem;
}
.c-notif__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}
.c-notif__title {
  overflow: hidden;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-notif__text {
  font-size: var(--font-size-sm);
  line-height: 1.45;
}
.c-notif.is-unread .c-notif__text {
  color: var(--acseo-navy);
}
.c-notif__next {
  color: var(--color-ink);
}
.c-notif__quote {
  border-left: 2px solid var(--color-line);
  padding-left: 0.5rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-style: italic;
  line-height: 1.45;
}
.c-notif__meta {
  overflow: hidden;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-notif__dot {
  flex-shrink: 0;
  margin-top: 0.4375rem;
  border-radius: 50%;
  background-color: var(--color-text-link);
  width: 0.4375rem;
  height: 0.4375rem;
}

.c-notif-empty {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: center;
  padding: 1.25rem 1.125rem 0.875rem;
  text-align: center;
}
.c-notif-empty[hidden] {
  display: none;
}
.c-notif-empty__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--acseo-ice);
  width: 2.25rem;
  height: 2.25rem;
  color: var(--acseo-navy);
}
.c-notif-empty__title {
  margin: 0;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-notif-empty__text {
  margin: 0;
  max-width: 18rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

/* Page « Notifications » (maquette NotifToutes) : en-tête, filtres en pastilles, sélecteur de projet, liste en carte,
   « Charger plus ». */
.c-notif-page {
  margin: 0 auto;
  padding: 2.125rem 3rem 2rem;
  max-width: 52rem;
}
.c-notif-page__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.c-notif-page__heading {
  flex: 1;
  min-width: 12rem;
}
.c-notif-page__title {
  margin: 0;
  color: var(--acseo-navy);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6rem;
}
.c-notif-page__subtitle {
  margin: 0.125rem 0 0;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
}
.c-notif-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin: 1rem 0;
}
.c-notif-page__filter {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background-color: #fff;
  padding: 0 0.6875rem;
  height: 1.75rem;
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.c-notif-page__filter[aria-pressed=true] {
  border-color: var(--acseo-navy);
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-notif-page__count {
  border-radius: 0.5rem;
  background-color: var(--acseo-ice);
  padding: 0 0.375rem;
  color: var(--acseo-navy);
  font-size: 0.6563rem;
  font-weight: 700;
  line-height: 1rem;
}
.c-notif-page__count[hidden] {
  display: none;
}
.c-notif-page__sep {
  margin: 0 0.25rem;
  background-color: var(--color-line);
  width: 1px;
  height: 1.125rem;
}
.c-notif-page__project {
  margin-left: auto;
  border: 1px solid var(--color-line);
  border-radius: 0.5625rem;
  background-color: #fff;
  padding: 0 0.625rem;
  height: 1.75rem;
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-notif-page__list {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md-plus);
  background-color: #fff;
  padding: 0.25rem 0.5rem 0.375rem;
}
.c-notif-page__list[hidden] {
  display: none;
}
.c-notif-page__more {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}
.c-notif-page__more[hidden] {
  display: none;
}
.c-notif-page__empty {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md-plus);
  background-color: #fff;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-notif-page {
    padding: 1rem 0.75rem 1.5rem;
    /* Mobile compact (arbitrage d'Alexandre, 28/10) : une ligne qui défile au doigt, sans barre, le menu des
       projets en bout de ligne ; le filtre actif est ramené dans la vue (scroll_active_controller.js). */
  }
  .c-notif-page__filters {
    flex-wrap: nowrap;
    margin: 0.75rem -0.75rem;
    padding: 0 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .c-notif-page__filters::-webkit-scrollbar {
    display: none;
  }
  .c-notif-page__filter, .c-notif-page__project, .c-notif-page__sep {
    flex-shrink: 0;
  }
  .c-notif-page__project {
    margin-left: 0.25rem;
  }
}

/* Partage d'un fil (23/10, maquettes PartageDiscussion, PartageMobile, FilPlusieurs, PartageRetire, canevas v45).
   Fenêtre « Partager » sous l'en-tête du fil au bureau (400 px, à droite), feuille du bas sur téléphone ; personnes
   ayant accès ; avatars de l'en-tête ; repères du fil ; écran de l'accès retiré. */
/* Charte de mouvement : la fenêtre entre en fondu en montant de 4 px, la feuille du bas monte de 1,5 rem sur son voile
   en fondu, comme la feuille du volet ; les sorties, plus courtes, sont jouées par share_controller.js. */
@keyframes share-sheet-enter {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Voile de la feuille du bas (téléphone seulement, quand la fenêtre est ouverte). */
.c-share-scrim {
  display: none;
}
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-tobi-chat:has(.c-share-dialog:not([hidden])) .c-share-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 64;
    background-color: rgba(0, 34, 80, 0.45);
    animation: motion-fade var(--motion-base) var(--ease-out);
  }
}

.c-share-dialog {
  display: flex;
  position: absolute;
  top: calc(var(--thread-head-h) - 0.375rem);
  right: 4.75rem;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 65;
  border-radius: var(--radius-md-plus);
  background-color: #fff;
  padding: 0.875rem 1rem;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 34, 80, 0.12), 0 0 0 1px var(--color-line);
  width: min(25rem, 100% - 2rem);
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  color: var(--acseo-navy);
  animation: motion-enter var(--motion-base) var(--ease-out);
  /* Boutons compacts de l'admin et du fil : « Partager » principal navy, « Annuler » secondaire bordé. Ils n'avaient
     aucun style propre (rendu natif du navigateur, retour d'Alexandre du 30/10). */
}
.c-share-dialog[hidden] {
  display: none;
}
.c-share-dialog__grab {
  display: none;
  align-self: center;
  border-radius: 2px;
  background-color: #d3dee6;
  width: 2.25rem;
  height: 0.25rem;
}
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-share-dialog__grab {
    display: block;
  }
}
.c-share-dialog__head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.c-share-dialog__head-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-mute);
}
.c-share-dialog__title {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}
.c-share-dialog__close {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-mute);
  cursor: pointer;
}
.c-share-dialog__close:hover {
  background-color: var(--color-soft);
  color: var(--acseo-navy);
}
.c-share-dialog__close .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.c-share-dialog__toast {
  margin: 0;
  border-radius: 0.625rem;
  background-color: var(--color-success-bg);
  padding: 0.4375rem 0.625rem;
  color: var(--color-success);
  font-size: var(--font-size-xs);
}
.c-share-dialog__toast[hidden] {
  display: none;
}
.c-share-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.c-share-dialog__sub {
  margin: -0.375rem 0 0;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-share-dialog__field {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0 0.625rem;
  height: 2.25rem;
}
.c-share-dialog__field:focus-within {
  border-color: var(--acseo-navy);
  box-shadow: 0 0 0 3px rgba(0, 34, 80, 0.08);
}
.c-share-dialog__field-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--color-mute);
}
.c-share-dialog__search {
  flex: 1;
  border: 0;
  background: none;
  padding: 0;
  min-width: 0;
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-sm);
}
.c-share-dialog__search:focus {
  outline: none;
}
.c-share-dialog__search[hidden] {
  display: none;
}
.c-share-dialog__options {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: -0.375rem 0 0;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0.25rem;
  list-style: none;
}
.c-share-dialog__options[hidden] {
  display: none;
}
.c-share-dialog__label {
  margin-bottom: -0.375rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-share-dialog__optional {
  color: var(--color-mute);
  font-weight: 500;
}
.c-share-dialog__note {
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  padding: 0.5rem 0.625rem;
  min-height: 3.375rem;
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  resize: vertical;
}
.c-share-dialog__note:focus {
  border-color: var(--acseo-navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 34, 80, 0.08);
}
.c-share-dialog__rights {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  border-radius: 0.625rem;
  background-color: var(--color-soft);
  padding: 0.5rem 0.625rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-share-dialog__rights .c-icon {
  flex-shrink: 0;
  margin-top: 0.0625rem;
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--color-text-link);
}
.c-share-dialog__error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}
.c-share-dialog__error[hidden] {
  display: none;
}
.c-share-dialog__actions {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}
.c-share-dialog__warned {
  flex: 1;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
}
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-share-dialog__warned {
    display: none;
  }
}
.c-share-dialog__cancel, .c-share-dialog__submit {
  flex: none;
  border: 1px solid var(--acseo-navy);
  border-radius: var(--radius-md);
  padding: 0.4375rem 0.875rem;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  /* Focus clavier : même anneau navy sur les deux boutons (posé sur chacun, voir plus bas). */
}
.c-share-dialog__cancel {
  border-color: var(--color-line);
  background-color: #fff;
  color: var(--acseo-navy);
}
.c-share-dialog__cancel:hover {
  border-color: var(--acseo-navy);
}
.c-share-dialog__cancel:focus-visible {
  outline: 2px solid var(--acseo-navy);
  outline-offset: 2px;
}
.c-share-dialog__submit {
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-share-dialog__submit:hover {
  background-color: var(--color-primary-active);
}
.c-share-dialog__submit:focus-visible {
  outline: 2px solid var(--acseo-navy);
  outline-offset: 2px;
}
.c-share-dialog__access {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-top: 1px solid var(--color-line-soft);
  padding-top: 0.625rem;
}
.c-share-dialog__access-title {
  margin: 0 0 0.25rem;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-share-dialog {
    position: fixed;
    inset: auto 0 0;
    border-radius: 1.125rem 1.125rem 0 0;
    padding: 0.5rem 1rem calc(1.375rem + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-sheet);
    width: auto;
    max-height: 88dvh;
    animation-name: share-sheet-enter;
  }
}

/* « Mettre en stand-by ? » (retours du 30/10) : question sobre avant de ranger une tâche, même fenêtre que « Partager »
   (fond blanc, 400 px, boutons __cancel / __submit), centrée et modale (<dialog>, standby_confirm_controller.js) au
   bureau, feuille du bas sur téléphone. Ni rouge ni pictogramme d'alerte : l'action se reprend à tout moment. */
.c-standby-dialog {
  margin: auto;
  border: 0;
  border-radius: var(--radius-md-plus);
  background-color: #fff;
  padding: 0;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 34, 80, 0.12), 0 0 0 1px var(--color-line);
  width: min(25rem, 100% - 2rem);
  max-width: none;
  color: var(--acseo-navy);
}
.c-standby-dialog[open] {
  animation: motion-enter var(--motion-base) var(--ease-out);
}
.c-standby-dialog::backdrop {
  background-color: rgba(0, 34, 80, 0.45);
}
.c-standby-dialog__box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}
.c-standby-dialog__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.c-standby-dialog__actions {
  justify-content: flex-end;
}
@media screen and (width < 64rem), screen and (height < 31.25rem) {
  .c-standby-dialog {
    margin: auto 0 0;
    border-radius: 1.125rem 1.125rem 0 0;
    box-shadow: var(--shadow-sheet);
    width: 100%;
    max-width: 100%;
  }
  .c-standby-dialog[open] {
    animation-name: share-sheet-enter;
  }
  .c-standby-dialog__box {
    padding: 0.5rem 1rem calc(1.375rem + env(safe-area-inset-bottom));
  }
}

/* Collègue choisi : puce glace dans le champ, avec sa croix. */
.c-share-chip {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: 0.125rem 0.375rem 0.125rem 0.125rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-share-chip[hidden] {
  display: none;
}
.c-share-chip__initials {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #fff;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.5625rem;
  font-weight: 700;
}
.c-share-chip__remove {
  display: flex;
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-ink);
  cursor: pointer;
}
.c-share-chip__remove .c-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* Personnes ayant accès (fenêtre et volet) : avatar, prénom, rôle, « Retirer l'accès » en corail foncé. */
.c-share-people {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-share-person {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  padding: 0.3125rem 0;
  font-size: var(--font-size-sm);
  /* Sous-titre du volet (« accès donné par Martine · 28 oct. ») : une ligne, coupée en points de suspension au besoin
     (texte entier en title). */
  /* Retest du 28/10 : « Retirer l'accès » se confirme dans la ligne, jamais par une boîte du navigateur. */
  /* « Retirer l'accès » de la confirmation : la couleur de l'action qui retire. */
}
.c-share-person__avatar {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--acseo-ice);
  width: 1.75rem;
  height: 1.75rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  /* Fil partagé (28/10) : la teinte de la personne, dès deux personnes (chat/_speaker.html.twig). */
}
.c-share-person__avatar--guest {
  background-color: var(--agent-delivery-soft);
  color: var(--agent-delivery-text);
}
.c-share-person__avatar--tone-1 {
  background-color: var(--speaker-1-bg);
  color: var(--speaker-1-fg);
}
.c-share-person__avatar--tone-2 {
  background-color: var(--speaker-2-bg);
  color: var(--speaker-2-fg);
}
.c-share-person__avatar--tone-3 {
  background-color: var(--speaker-3-bg);
  color: var(--speaker-3-fg);
}
.c-share-person__avatar--tone-4 {
  background-color: var(--speaker-4-bg);
  color: var(--speaker-4-fg);
}
.c-share-person__avatar--tone-5 {
  background-color: var(--speaker-5-bg);
  color: var(--speaker-5-fg);
}
.c-share-person__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.c-share-person__name {
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-share-person__you {
  color: var(--color-ink);
  font-weight: 400;
}
.c-share-person__sub {
  overflow: hidden;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-share-person__role {
  border-radius: var(--radius-pill);
  background-color: var(--color-line-soft);
  padding: 0.125rem 0.5rem;
  color: var(--color-ink);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  white-space: nowrap;
}
.c-share-person__role--guest {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}
.c-share-person__remove {
  border: 0;
  background: none;
  padding: 0;
  color: var(--acseo-coral-strong);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  /* Volet : bouton icône de 28 px, transparent, icône corail au survol seulement. */
}
.c-share-person__remove:hover {
  text-decoration: underline;
}
.c-share-person__remove--icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-mute);
  flex-shrink: 0;
}
.c-share-person__remove--icon .c-icon {
  width: 1rem;
  height: 1rem;
}
.c-share-person__remove--icon:hover {
  color: var(--acseo-coral-strong);
}
.c-share-person__remove:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-share-person__confirm {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  border-radius: var(--radius-sm);
  background-color: var(--color-danger-bg);
  padding: 0.5rem 0.625rem;
}
.c-share-person__confirm-text {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  line-height: 1.35;
}
.c-share-person__confirm-yes, .c-share-person__confirm-no {
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
}
.c-share-person__confirm-yes:hover, .c-share-person__confirm-no:hover {
  text-decoration: underline;
}
.c-share-person__confirm-yes:disabled, .c-share-person__confirm-no:disabled {
  opacity: 0.5;
  cursor: default;
}
.c-share-person__confirm .c-share-person__confirm-yes {
  color: var(--color-danger);
}

/* Volet : « Partager » discret à droite du titre de la section Participants. */
.c-dossier__label--action {
  display: flex;
  align-items: center;
}

.c-dossier__label-link {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-text-link);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.c-dossier__label-link:hover {
  text-decoration: underline;
}
.c-dossier__label-link .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Repère du fil : « Martine a partagé ce fil avec Sandrine · 23 oct., 9 h 12 », centré, discret. */
.c-thread-event {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0.25rem auto;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  text-align: center;
}
.c-thread-event .c-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-ink);
}

/* Ancien lien après « Retirer l'accès » (maquette PartageRetire). */
.c-share-revoked {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  max-width: 26.25rem;
  min-height: 60dvh;
  text-align: center;
}
.c-share-revoked__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.375rem;
  border-radius: 50%;
  background-color: var(--acseo-ice);
  width: 3.25rem;
  height: 3.25rem;
  color: var(--acseo-navy);
}
.c-share-revoked__title {
  margin: 0;
  color: var(--acseo-navy);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.c-share-revoked__text {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-md);
  line-height: 1.55;
}
.c-share-revoked__home {
  display: inline-flex;
  gap: 0.4375rem;
  align-items: center;
  margin-top: 0.625rem;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0.375rem 0.8125rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}
.c-share-revoked__home:hover {
  background-color: var(--color-soft);
}
.c-share-revoked__home .c-icon {
  width: 1rem;
  height: 1rem;
}

/* Candidat de la recherche ; grisé avec sa raison quand il ne peut pas être invité. */
.c-share-option {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.c-share-option:hover, .c-share-option[aria-selected=true] {
  background-color: var(--color-soft);
  color: var(--acseo-navy);
}
.c-share-option.is-disabled {
  opacity: 0.55;
  cursor: default;
}
.c-share-option.is-disabled:hover {
  background-color: transparent;
}
.c-share-option--empty {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  cursor: default;
}
.c-share-option .c-share-person__avatar {
  width: 1.625rem;
  height: 1.625rem;
  font-size: 0.625rem;
}
.c-share-option__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.c-share-option__name {
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-share-option__reason {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
}
.c-share-option__off {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-style: normal;
}

/* Avatars des personnes ayant accès, en-tête du fil (dès deux personnes) : anneau blanc et léger chevauchement, les
   deux lettres de chaque avatar restent lisibles (« MA » n'est plus coupé par l'avatar suivant). */
.c-share-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 0.125rem;
  padding-left: 2px;
}
.c-share-stack[hidden] {
  display: none;
}
.c-share-stack .c-share-person__avatar {
  position: relative;
  box-shadow: 0 0 0 2px #fff;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.5938rem;
  letter-spacing: -0.01em;
}
.c-share-stack .c-share-person__avatar + .c-share-person__avatar {
  margin-left: -0.1875rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-share-stack {
    display: none;
  }
}

.c-requests {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 3. Box model */
  margin: 0 auto;
  padding: 24px 16px;
  /* 4. Dimensions */
  width: 100%;
  max-width: 72rem;
  overflow-y: auto;
  box-sizing: border-box;
  /* S10 : « Lancée par Prénom » sur la carte d'une Demande d'un collègue. */
}
.c-requests__title {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-family: var(--ds-font-headline);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.c-requests__subtitle {
  /* 3. Box model */
  margin: 8px 0 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
}
.c-requests__filter {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.c-requests__filter-label {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 700;
}
.c-requests__select {
  /* 3. Box model */
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 0.5rem;
  background-color: var(--ds-color-surface);
  padding: 8px 12px;
  /* 4. Dimensions */
  min-width: 220px;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-family: var(--ds-font-body);
  font-size: 14px;
}
.c-requests__button {
  /* 1. Layout */
  display: inline-flex;
  align-items: center;
  /* 3. Box model */
  border: 0;
  border-radius: var(--ds-radius-btn);
  background-color: var(--ds-color-primary);
  padding: 10px 16px;
  /* 5. Typo */
  color: var(--ds-color-on-primary);
  font-family: var(--ds-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.c-requests__button--secondary {
  /* 3. Box model */
  border: 1px solid var(--ds-color-outline-variant);
  background-color: var(--ds-color-surface);
  /* 5. Typo */
  color: var(--ds-color-primary);
}
.c-requests__notice {
  /* 3. Box model */
  margin: 0;
  border-left: 4px solid var(--ds-color-primary-container);
  border-radius: 0.5rem;
  background-color: var(--ds-color-surface-container-low);
  padding: 16px 20px;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
}
.c-requests__section {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.c-requests__section-title {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-family: var(--ds-font-headline);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.c-requests__empty {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-outline);
}
.c-requests__table {
  /* 3. Box model */
  border-radius: 0.75rem;
  background-color: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-message);
  /* 4. Dimensions */
  width: 100%;
  overflow: hidden;
  /* 5. Typo */
  font-size: 14px;
  text-align: left;
  border-collapse: collapse;
}
.c-requests__table th {
  /* 3. Box model */
  background-color: var(--ds-color-surface-container-low);
  padding: 10px 12px;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.c-requests__row {
  /* 3. Box model */
  border-top: 1px solid var(--ds-color-outline-variant);
}
.c-requests__row--exchange {
  /* 3. Box model */
  background-color: rgba(48, 126, 148, 0.06);
}
.c-requests__cell {
  /* 3. Box model */
  padding: 10px 12px;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  vertical-align: top;
}
.c-requests__cell--subject {
  /* 4. Dimensions */
  width: 40%;
}
.c-requests__cell--actions {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.c-requests__link, .c-requests__chat-link {
  /* 5. Typo */
  color: var(--ds-color-primary);
  font-weight: 700;
  text-decoration: underline;
}
.c-requests__chat-link {
  /* 1. Layout */
  display: inline-block;
  /* 3. Box model */
  margin-left: 8px;
  /* 5. Typo */
  font-size: 12px;
}
.c-requests__tracker {
  /* 1. Layout */
  display: inline-block;
  /* 3. Box model */
  border-radius: 999px;
  background-color: var(--ds-color-surface-container-high);
  padding: 2px 10px;
  /* 5. Typo */
  font-size: 12px;
  font-weight: 700;
}
.c-requests__tracker--exchange {
  /* 3. Box model */
  background-color: var(--ds-color-primary-container);
  /* 5. Typo */
  color: var(--ds-color-on-primary-container);
}
.c-requests__tracker--paused {
  /* 3. Box model */
  background-color: var(--ds-color-tertiary-fixed);
  /* 5. Typo */
  color: var(--ds-color-on-tertiary-fixed);
}
.c-requests__tracker--closed {
  /* 3. Box model */
  background-color: var(--ds-color-secondary-container);
  /* 5. Typo */
  color: var(--ds-color-on-secondary-container);
}
.c-requests__tabs {
  /* 1. Layout */
  display: flex;
  gap: 8px;
  /* 3. Box model */
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.c-requests__tab {
  /* 3. Box model */
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.c-requests__tab:hover, .c-requests__tab:focus-visible {
  /* 5. Typo */
  color: var(--ds-color-primary);
}
.c-requests__tab.is-active {
  /* 3. Box model */
  border-bottom-color: var(--ds-color-primary);
  /* 5. Typo */
  color: var(--ds-color-primary);
}
.c-requests__input {
  /* 3. Box model */
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 0.5rem;
  background-color: var(--ds-color-surface);
  padding: 8px 12px;
  /* 4. Dimensions */
  min-width: 220px;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-family: var(--ds-font-body);
  font-size: 14px;
}
.c-requests__check {
  /* 1. Layout */
  display: inline-flex;
  gap: 6px;
  align-items: center;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 700;
}
.c-requests__badge {
  /* 1. Layout */
  display: inline-block;
  /* 3. Box model */
  margin-left: 8px;
  border-radius: 999px;
  background-color: var(--ds-color-secondary);
  padding: 2px 8px;
  /* 5. Typo */
  color: var(--ds-color-on-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.c-requests__scroll {
  /* 4. Dimensions */
  overflow-x: auto;
}
.c-requests__pagination {
  /* 1. Layout */
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  /* « Précédent » et « Suivant » gardent leur taille ; seul « Page n sur m » passe à la ligne. */
}
.c-requests__pagination .c-button {
  flex-shrink: 0;
}
.c-requests__page {
  /* 4. Dimensions */
  min-width: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  text-align: center;
}
.c-requests__board {
  /* 1. Layout */
  display: flex;
  gap: 16px;
  align-items: flex-start;
  /* 3. Box model */
  padding-bottom: 12px;
  /* 4. Dimensions */
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Ombres de fin : elles apparaissent quand il reste des colonnes à faire défiler */
  background: linear-gradient(to right, #fff 30%, transparent) left center/24px 100% no-repeat local, linear-gradient(to left, #fff 30%, transparent) right center/24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(16, 19, 48, 0.14), transparent) left center/10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(16, 19, 48, 0.14), transparent) right center/10px 100% no-repeat scroll;
}
.c-requests__column {
  /* 1. Layout */
  display: flex;
  flex: 0 0 min(18.5rem, 86vw);
  scroll-snap-align: start;
  flex-direction: column;
  gap: 12px;
  /* 3. Box model */
  border-radius: 0.75rem;
  background-color: var(--ds-color-surface-container-low);
  padding: 12px;
  /* 4. Dimensions */
  min-width: 0;
}
.c-requests__column-title {
  /* 1. Layout */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-family: var(--ds-font-headline);
  font-size: 15px;
  font-weight: 700;
}
.c-requests__count {
  /* 3. Box model */
  border-radius: 999px;
  background-color: var(--ds-color-surface-container-high);
  padding: 2px 10px;
  /* 5. Typo */
  font-size: 12px;
}
.c-requests__card {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 3. Box model */
  border-radius: 0.5rem;
  background-color: var(--ds-color-surface);
  padding: 12px;
  box-shadow: var(--ds-shadow-message);
  /* 4. Dimensions */
  word-break: break-word;
}
.c-requests__card--exchange {
  /* 3. Box model */
  border-left: 4px solid var(--ds-color-primary-container);
}
.c-requests__card-title {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 500;
}
.c-requests__card-meta {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.c-requests__card-head {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  /* 4. Dimensions */
  min-width: 0;
}
.c-requests__card-head .c-chat-icon,
.c-requests__card-head .c-chat-icon__form {
  /* 1. Layout */
  margin-left: auto;
}
.c-requests__ref {
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.c-requests__card-note {
  /* 5. Typo */
  color: var(--color-text-muted);
  font-size: 12px;
}
.c-requests__card-actions {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}
.c-requests__card-actions form {
  /* 1. Layout */
  display: inline-flex;
}
.c-requests__card-link {
  /* 3. Box model */
  border: 0;
  background: transparent;
  padding: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.c-requests__card-link--primary {
  /* 5. Typo */
  color: var(--ds-color-primary);
}
.c-requests__card-date {
  /* 5. Typo */
  color: var(--ds-color-outline);
  font-size: 12px;
}
.c-requests__card-owner {
  /* 1. Layout */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-outline);
  font-size: 12px;
  font-style: italic;
}
.c-requests__related {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 3. Box model */
  margin: 0;
  border-top: 1px dashed var(--ds-color-outline-variant);
  padding: 8px 0 0;
  /* 5. Typo */
  font-size: 12px;
  list-style: none;
}
.c-requests__related-item {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  /* 5. Typo */
  color: var(--ds-color-on-surface-variant);
}
.c-requests__slots {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 3. Box model */
  margin: 0;
  padding: 0;
  /* 5. Typo */
  list-style: none;
}
.c-requests__slot {
  /* 3. Box model */
  border-radius: 999px;
  background-color: var(--ds-color-surface-container-high);
  padding: 4px 12px;
  /* 5. Typo */
  font-size: 13px;
}
.c-requests__slot.is-full {
  /* 3. Box model */
  background-color: var(--ds-color-secondary-container);
  /* 5. Typo */
  color: var(--ds-color-on-secondary-container);
}
.c-requests__icon {
  /* 5. Typo */
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
}
.c-requests__paused {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 3. Box model */
  margin: 0;
  padding: 0;
  /* 5. Typo */
  list-style: none;
}
.c-requests__paused-item {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  /* 3. Box model */
  border-radius: 0.5rem;
  background-color: var(--ds-color-surface);
  padding: 10px 12px;
  box-shadow: var(--ds-shadow-message);
}
@media screen and (width >= 768px) {
  .c-requests {
    /* 3. Box model */
    padding: 32px;
  }
}

/* Page Demandes (écran 02) : filtres, puce de plafond, lignes. */
.c-view-switch {
  display: inline-flex;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: 0.25rem;
}
.c-view-switch__link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.375rem 1rem;
  min-height: 2.25rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.c-view-switch__link.is-active {
  background-color: var(--acseo-navy);
  color: #fff;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-view-switch__link {
    padding: 0.25rem 0.75rem;
    min-height: 1.75rem;
    font-size: var(--font-size-xs);
  }
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-view-switch {
    padding: 0.1875rem;
  }
}

.c-requests-notice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
}

.c-requests-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  /* « Mes demandes uniquement » + « Afficher » : toujours sur une ligne, le libellé passe à la ligne s'il manque de place. */
  /* Recherche : le champ s'élargit, le bouton reste toujours à sa droite (le champ rétrécit, jamais le bouton). */
  /* Champ et loupe (arbitrage d'Alexandre, 28/10) : la loupe se pose dans le champ, à droite ; Entrée suffit aussi. */
  /* « Réinitialiser » : sur mobile, sa propre ligne sous le champ plutôt qu'un lien coincé à côté du bouton. */
  /* Puce « n Demandes actives sur 3 · k place(s) libre(s) » : glace, rose seulement sans place libre (le client doit agir). */
}
.c-requests-bar__mine {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  min-width: 0;
  /* Mobile compact (28/10) : la case ne prend que sa place, à côté de l'autre case et de la bascule. */
}
.c-requests-bar__mine .c-button {
  flex-shrink: 0;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-requests-bar__mine {
    flex: 0 1 auto;
    gap: var(--space-sm);
  }
}
.c-requests-bar__check {
  display: inline-flex;
  gap: var(--space-sm);
  align-items: center;
  min-width: 0;
  min-height: var(--touch-target);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.c-requests-bar__check input {
  flex-shrink: 0;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-requests-bar__check {
    min-height: 2rem;
    font-size: var(--font-size-xs);
  }
}
.c-requests-bar__search {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: var(--space-sm) var(--space-md);
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  min-width: 0;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-requests-bar__search {
    flex: 1 1 100%;
    flex-wrap: wrap;
    column-gap: var(--space-sm);
    margin-left: 0;
  }
}
.c-requests-bar__input {
  flex: 1 1 16rem;
  width: auto;
  min-width: min(16rem, 100%);
  max-width: 32rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-requests-bar__input {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
}
.c-requests-bar__field {
  display: flex;
  position: relative;
  flex: 1 1 16rem;
  align-items: center;
  min-width: min(16rem, 100%);
  max-width: 32rem;
}
.c-requests-bar__field .c-requests-bar__input {
  flex: 1 1 auto;
  padding-right: 2.5rem;
  min-width: 0;
  max-width: none;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-requests-bar__field {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
}
.c-requests-bar__submit {
  display: flex;
  position: absolute;
  top: 50%;
  right: 0.25rem;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.c-requests-bar__submit:hover, .c-requests-bar__submit:focus-visible {
  color: var(--acseo-navy);
}
.c-requests-bar__submit .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.c-requests-bar__reset {
  flex-shrink: 0;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-requests-bar__reset {
    flex-basis: 100%;
  }
}
.c-requests-bar__slots {
  margin: 0 0 0 auto;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: 0.375rem 0.75rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  /* Mobile compact : un texte court en bout de ligne, la pastille rose reste seulement sans place libre. */
}
.c-requests-bar__slots.is-full {
  background-color: var(--acseo-pink);
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-requests-bar__slots {
    margin-left: auto;
    background-color: transparent;
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
  }
  .c-requests-bar__slots.is-full {
    padding: 0.125rem 0.5rem;
    color: var(--acseo-navy);
  }
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-requests-bar {
    gap: var(--space-xs) var(--space-sm);
  }
}

/* Filtres : une rangée de liens (navigation), l'actif en navy. Défile sur mobile. */
.c-filter-tabs {
  max-width: 100%;
  overflow-x: auto;
  /* Mobile compact (arbitrage d'Alexandre, 28/10) : une ligne de petites pastilles qui défile au doigt, sans barre ;
     le filtre actif est ramené dans la vue (scroll_active_controller.js). La bande va jusqu'aux bords de l'écran. */
}
.c-filter-tabs__list {
  display: inline-flex;
  gap: var(--space-xs);
  margin: 0;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: var(--space-xs);
  list-style: none;
}
.c-filter-tabs__tab {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.625rem 1rem;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.c-filter-tabs__tab:hover {
  background-color: var(--acseo-teal-light);
}
.c-filter-tabs__tab.is-active {
  background-color: var(--acseo-navy);
  color: #fff;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-filter-tabs {
    flex: 1 1 100%;
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2rem)); /* gouttière de .o-page */
    padding: 0 clamp(1rem, 4vw, 2rem);
    max-width: none;
    scrollbar-width: none;
  }
  .c-filter-tabs::-webkit-scrollbar {
    display: none;
  }
  .c-filter-tabs__list {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
  }
  .c-filter-tabs__tab {
    gap: 0.1875rem;
    background-color: #fff;
    padding: 0.25rem 0.75rem;
    box-shadow: inset 0 0 0 1px var(--acseo-divider);
    min-height: 1.875rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
  }
  .c-filter-tabs__tab.is-active {
    box-shadow: none;
  }
}

.c-request-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-request-list__heading {
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c-request-list__count {
  margin-left: var(--space-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Ligne : identité, étape, barre, actions. Sous 820 px, la ligne devient une carte. */
.c-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem 9.375rem minmax(13.125rem, max-content);
  gap: var(--space-md);
  align-items: center;
  border-bottom: 1px solid var(--acseo-divider);
  padding: var(--space-md) var(--space-xs);
  /* Pictogramme seul du type : mobile seulement (plus bas). */
  /* « Ouvrir dans Redmine » (ACSEO) : flèche et libellé au bureau, flèche seule sur mobile (libellé en title et pour
     les lecteurs d'écran). */
  /* S10 : « Lancée par Prénom » (Demande d'un collègue, lecture seule). */
  /* Actions sur une ligne, à droite, même hauteur ; l'action principale (« Ouvrir », « Tester ») en dernier. */
  /* En attente : ligne atténuée (le libellé « En attente » reste lisible). */
  /* Narrow desktop: the progress bar gives its room to the title, the stage pill already shows the step. */
}
.c-request-row__main {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.c-request-row__ids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-request-row__ref {
  color: var(--color-text-link);
}
.c-request-row__type-icon {
  display: none;
}
.c-request-row__flag {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 0.1875rem 0.5rem;
  color: var(--acseo-navy);
  /* « À vous de jouer » : rouge plein, texte blanc (contraste 4.6:1, comme les boutons pleins). Son icône ne se
     montre que sur mobile, où elle remplace le libellé. */
  /* « Hors Tobi » : ticket Redmine que Tobi n'a jamais suivi (texte, jamais la couleur seule). Icône sur mobile seulement. */
}
.c-request-row__flag--play {
  background-color: var(--color-accent-fill);
  color: #fff;
}
.c-request-row__flag--play .c-icon {
  display: none;
  width: 0.875rem;
  height: 0.875rem;
}
.c-request-row__flag--outside {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--acseo-divider);
}
.c-request-row__flag--outside .c-icon {
  display: none;
  width: 0.875rem;
  height: 0.875rem;
}
.c-request-row__flag--paused {
  background-color: var(--acseo-ice);
  box-shadow: inset 0 0 0 1px var(--acseo-divider);
}
.c-request-row__flag--paused .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.c-request-row__redmine {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  font-size: var(--font-size-xs);
}
.c-request-row__redmine .c-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-request-row__redmine-text {
    position: absolute;
    clip-path: inset(50%);
    margin: -1px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
}
.c-request-row__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.c-request-row__title a {
  color: var(--acseo-navy);
  text-decoration: none;
}
.c-request-row__title a:hover {
  text-decoration: underline;
}
.c-request-row__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.c-request-row__owner {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
}
.c-request-row__progress .c-progress {
  max-width: none;
}
.c-request-row__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  justify-content: flex-end;
  align-items: stretch;
}
.c-request-row__actions form {
  display: flex;
}
.c-request-row__actions .c-button {
  min-height: 2.25rem;
  white-space: nowrap;
}
.c-request-row__actions .c-button.is-disabled {
  opacity: 1;
  background-color: var(--acseo-ice);
  color: var(--color-text-muted);
  cursor: not-allowed;
  border-color: var(--acseo-divider);
}
.c-request-row.is-paused .c-request-row__main, .c-request-row.is-paused .c-request-row__stage, .c-request-row.is-paused .c-request-row__progress {
  opacity: 0.7;
}
@media screen and (width >= 51.25rem) and (width < 80rem) {
  .c-request-row {
    grid-template-columns: minmax(0, 1fr) 10rem minmax(13.125rem, max-content);
  }
  .c-request-row__progress {
    display: none;
  }
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-request-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--acseo-divider);
    border-radius: var(--radius-lg);
    padding: 0.875rem var(--space-md);
    /* Mobile compact (28/10, relu par Audit design) : pictogramme du type et titre, puis une seule ligne atténuée
       « #id · par Prénom · date » avec les drapeaux en icône (les éléments de .c-request-row__ids y entrent). */
    /* Type : le pictogramme seul devant le titre (libellé en u-visually-hidden et en title, rendu compact). */
    /* Drapeaux : l'icône seule avec son title ; « Hors Tobi » ne signale rien au client et se retire. */
  }
  .c-request-row__main {
    flex-flow: row wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
  }
  .c-request-row__title {
    flex: 1 1 calc(100% - 1.75rem);
    order: -1;
    min-width: 0;
  }
  .c-request-row__ids {
    display: contents;
  }
  .c-request-row__type {
    display: none;
  }
  .c-request-row__type-icon {
    display: flex;
    order: -2;
    align-self: flex-start;
    margin-top: 0.1875rem;
  }
  .c-request-row__type-icon .c-kind {
    background-color: transparent;
    padding: 0;
  }
  .c-request-row__flag {
    padding: 0.125rem 0.25rem;
    /* Le client n'en a pas besoin sur mobile ; ACSEO le garde en icône. */
  }
  .c-request-row__flag--play .c-icon, .c-request-row__flag--outside .c-icon {
    display: block;
  }
  .c-request-row__flag--outside:not(.is-staff) {
    display: none;
  }
  .c-request-row__flag-text {
    position: absolute;
    clip-path: inset(50%);
    margin: -1px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
  .c-request-row__owner, .c-request-row__meta {
    font-style: normal;
  }
  .c-request-row__owner::before, .c-request-row__meta::before {
    margin-right: 0.5rem;
    content: "·";
  }
  .c-request-row__actions {
    justify-content: stretch;
  }
  .c-request-row__actions form,
  .c-request-row__actions > .c-button {
    flex: 1 1 0;
  }
  .c-request-row__actions .c-button {
    width: 100%;
    min-height: var(--touch-target);
  }
}

/* Page Échanges (E7) : lignes dans le gabarit de la page Demandes. */
.c-exchange-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-md);
  align-items: center;
  border-bottom: 1px solid var(--acseo-divider);
  padding: var(--space-md) var(--space-xs);
  /* Menu « ⋯ » (Fermer l'échange) : colonne réservée sur chaque ligne pour garder les dates alignées. */
  /* Pastille d'issue : toujours un texte, jamais la seule couleur. */
  /* Tâche née de la discussion : rendu du volet (.c-dossier__ids, .c-kind--plain, .c-dossier__ref), sans pastille. */
  /* Mobile : le titre sur toute la largeur, puis la date et le menu « ⋯ » sur la même ligne. */
}
.c-exchange-row__main {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-exchange-row__main {
    grid-column: 1/-1;
  }
}
.c-exchange-row__actions {
  display: flex;
  justify-content: flex-end;
  min-width: 2.75rem;
}
.c-exchange-row__ids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-exchange-row__ids:empty {
  display: none;
}
.c-exchange-row__pill {
  border-radius: var(--radius-sm);
  padding: 0.1875rem 0.5rem;
  color: var(--acseo-navy);
  text-decoration: none;
}
.c-exchange-row__pill--done {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.c-exchange-row__pill--advisor {
  background-color: var(--acseo-pink);
}
.c-exchange-row__task .c-kind--plain {
  background-color: transparent;
  padding: 0;
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-exchange-row__new {
  border-radius: var(--radius-pill);
  background-color: var(--acseo-coral);
  padding: 0.125rem 0.5rem;
  color: var(--acseo-navy);
  font-size: 0.6875rem;
  font-weight: 800;
}
.c-exchange-row__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.c-exchange-row__link {
  color: var(--acseo-navy);
  text-decoration: none;
}
.c-exchange-row__link:hover {
  text-decoration: underline;
}
.c-exchange-row__date {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-exchange-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs);
  }
}

/* Aperçu d'un ticket Redmine pas encore suivi dans Tobi : faits, début de la description, puis le choix. */
.c-request-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.c-request-preview__ids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-request-preview__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
}
.c-request-preview__facts dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-request-preview__facts dd {
  margin: 0;
  font-weight: 600;
}
.c-request-preview__heading {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-request-preview__excerpt {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.c-request-preview__choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.c-request-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
}

/* « Discussions » (page client du 30/10, maquette A, ex-« Mes sujets ») : une colonne centrée de lecture (~800 px, comme la maquette), en-tête
   aligné sur elle ; au-delà (1440, 2560 px), l'espace reste de part et d'autre de la colonne, jamais de ligne étirée.
   Tobi parle en bulles glace (même rendu que .c-tobi-chat__bubble--bot), la liste est compacte : rond de l'agent et une
   ligne de statut, jamais le type. Corail : seulement ce qui attend le client. À 390 px, tout s'empile, sans défilement horizontal. */
.c-subjects {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 4rem;
  width: 100%;
  min-width: 0;
  max-width: calc(50rem + 2 * clamp(1rem, 4vw, 2rem));
  /* Tobi fait le point : médaillon à gauche, bulles empilées. */
  /* Une carte blanche par sujet qui attend le client : point corail, titre, phrase de Tobi, une petite action. */
  /* Places du projet : une barre par place (pleine = prise), puis la phrase. */
  /* Un seul champ, loupe dedans, sans gros bouton. */
  /* Une ligne : rond de l'agent, titre, ligne de statut puis dernière phrase (muette), date relative à droite. */
  /* Statut : ardoise, ou corail foncé quand c'est au client (5:1 sur blanc) ; la phrase muette suit après un point. */
  /* Téléphone : la carte passe l'action sous le texte, la date sous la ligne. */
  /* Grands écrans (2K, retour d'Alexandre du 30/10) : au-delà de 1800 px, colonne de 60rem et typo un cran plus
     grande ; les tailles de la page suivent ses jetons, redéfinis ici seulement. */
}
.c-subjects__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
  align-items: baseline;
}
.c-subjects__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, var(--font-size-xl));
  font-weight: 700;
  line-height: 1.2;
}
.c-subjects__project {
  margin: 0;
  min-width: 0;
  color: var(--color-mute);
  font-size: var(--font-size-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.c-subjects__notice, .c-subjects__empty {
  margin: 0;
  color: var(--color-mute);
  font-size: var(--font-size-md);
}
.c-subjects__tobi {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  min-width: 0;
}
.c-subjects__said {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.c-subjects__author {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
}
.c-subjects__bubble {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-radius: var(--radius-bubble-bot);
  background-color: var(--color-ice-bubble);
  padding: 0.6875rem 0.9375rem;
  min-width: 0;
  color: var(--color-ice-bubble-text);
  font-size: var(--font-size-md);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.c-subjects__bubble p {
  margin: 0;
}
.c-subjects__bubble strong {
  color: var(--acseo-navy);
  font-weight: 700;
}
.c-subjects__task-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.2em;
}
.c-subjects__task-link:hover {
  text-decoration-color: currentcolor;
}
.c-subjects__cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-subjects__card {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: 0.5rem 0.625rem 0.5rem 0.75rem;
  min-width: 0;
}
.c-subjects__dot {
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--acseo-coral);
  width: 0.5rem;
  height: 0.5rem;
}
.c-subjects__card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.c-subjects__card-title {
  overflow: hidden;
  color: var(--acseo-navy);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-subjects__card-line {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}
.c-subjects__action {
  flex: 0 0 auto;
  border: 1px solid var(--acseo-navy);
  border-radius: 999px;
  padding: 0.1875rem 0.75rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.c-subjects__action:hover {
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-subjects__action:focus-visible {
  outline: 2px solid var(--acseo-navy);
  outline-offset: 2px;
}
.c-subjects__places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  color: var(--color-ice-bubble-text);
  font-size: var(--font-size-sm);
}
.c-subjects__bars {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.1875rem;
}
.c-subjects__bar {
  border-radius: 2px;
  background-color: var(--color-line);
  width: 1rem;
  height: 0.375rem;
}
.c-subjects__bar.is-taken {
  background-color: var(--acseo-navy);
}
.c-subjects__search {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background-color: #fff;
  padding: 0.125rem 0.25rem 0.125rem 1rem;
  min-width: 0;
}
.c-subjects__search:focus-within {
  border-color: var(--acseo-navy);
}
.c-subjects__input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 0.5rem 0;
  min-width: 0;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--font-size-md);
}
.c-subjects__input:focus {
  outline: none;
}
.c-subjects__input::placeholder {
  color: var(--color-mute);
}
.c-subjects__submit {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--acseo-navy);
  cursor: pointer;
}
.c-subjects__submit:hover, .c-subjects__submit:focus-visible {
  background-color: var(--color-ice-bubble);
}
.c-subjects__submit .c-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.c-subjects__under-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
  align-items: center;
  margin: calc(-1 * var(--space-md)) 0 0;
  min-width: 0;
}
.c-subjects__reset {
  margin: 0;
  font-size: var(--font-size-sm);
}
.c-subjects__board {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.c-subjects__board:hover, .c-subjects__board:focus-visible {
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-subjects__board-icon {
  width: 1rem;
  height: 1rem;
}
.c-subjects__recent {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.c-subjects__frame {
  display: contents;
}
.c-subjects__frame[aria-busy=true] .c-subjects__recent {
  opacity: 0.6;
}
.c-subjects__heading {
  margin: 0;
  color: var(--acseo-navy);
  font-size: var(--font-size-md);
  font-weight: 700;
}
.c-subjects__period {
  margin: var(--space-sm) 0 0;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c-subjects__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-subjects__row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-line);
  padding: 0.625rem 0;
  min-width: 0;
}
.c-subjects__row:last-child {
  border-bottom: 0;
}
.c-subjects__marker {
  margin-top: 0.4375rem;
}
.c-subjects__row-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.c-subjects__row-title {
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-subjects__row-title:hover {
  color: var(--acseo-navy);
  text-decoration: underline;
}
.c-subjects__row-line {
  overflow: hidden;
  color: var(--color-mute);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-subjects__status {
  color: var(--color-text-muted);
  font-weight: 600;
}
.c-subjects__status--yours {
  color: var(--acseo-coral-strong);
}
.c-subjects__excerpt::before {
  content: " · ";
}
.c-subjects__speaker {
  font-weight: 600;
}
.c-subjects__date {
  flex: 0 0 auto;
  padding-top: 0.125rem;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.c-subjects__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-sm);
}
@media screen and (width < 30rem) {
  .c-subjects__card {
    flex-wrap: wrap;
  }
  .c-subjects__card-body {
    flex-basis: calc(100% - 1.5rem);
  }
  .c-subjects__action {
    margin-left: 1.125rem;
  }
  .c-subjects__row {
    flex-wrap: wrap;
  }
  .c-subjects__row-body {
    flex-basis: calc(100% - 1.5rem);
  }
  .c-subjects__date {
    margin-left: 1.25rem;
    padding-top: 0;
  }
}
@media (width >= 112.5rem) {
  .c-subjects {
    --font-size-2xs: 0.75rem;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    max-width: 64rem;
  }
}

/* « et N autres » : les sujets en attente au-delà des trois premiers, repliés dans la bulle. */
.c-subjects__more-summary {
  align-self: flex-start;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}
.c-subjects__more-summary:hover {
  text-decoration: underline;
}

.c-subjects__more-waiting {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.c-subjects__more-waiting[open] > .c-subjects__more-summary {
  margin-bottom: var(--space-xs);
}

/* Rond d'un sujet (menu client et page « Discussions », 30/10) : disque navy de 8 px cerclé de 1,5 px de la couleur de
   l'agent qui porte le sujet : Knowledge (discussion), Assist (tâche avant réalisation), Delivery (réalisation, en ligne). */
.c-subject-marker {
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1.5px solid var(--agent-assist);
  border-radius: 50%;
  background-color: var(--acseo-navy);
  width: 0.5rem;
  height: 0.5rem;
}
.c-subject-marker--knowledge {
  border-color: var(--agent-knowledge);
}
.c-subject-marker--assist {
  border-color: var(--agent-assist);
}
.c-subject-marker--delivery {
  border-color: var(--agent-delivery);
}

/* « Aucun projet disponible » (05/11) : une colonne de lecture étroite, le titre, puis Tobi qui parle en bulle glace (même
   rendu que .c-subjects__bubble et la bulle du fil) et un lien discret pour la seule chose à faire. Compact, sans gros
   bouton ; à 375 px tout tient sur une colonne, sans défilement horizontal. */
.c-no-project {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 4rem;
  width: 100%;
  min-width: 0;
  max-width: calc(40rem + 2 * clamp(1rem, 4vw, 2rem));
}
.c-no-project__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, var(--font-size-xl));
  font-weight: 700;
  line-height: 1.2;
}
.c-no-project__tobi {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  min-width: 0;
}
.c-no-project__said {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.c-no-project__author {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
}
.c-no-project__bubble {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-radius: var(--radius-bubble-bot);
  background-color: var(--color-ice-bubble);
  padding: 0.6875rem 0.9375rem;
  min-width: 0;
  color: var(--color-ice-bubble-text);
  font-size: var(--font-size-md);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.c-no-project__bubble p {
  margin: 0;
}
.c-no-project__bubble strong {
  color: var(--acseo-navy);
  font-weight: 700;
}
.c-no-project__action {
  margin: 0;
}
.c-no-project__link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.2em;
}
.c-no-project__link:hover {
  text-decoration-color: currentcolor;
}
.c-no-project__link:focus-visible {
  outline: 2px solid var(--acseo-navy);
  outline-offset: 2px;
  border-radius: 2px;
}
.c-no-project__link .c-icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
}

.c-recette-banner {
  /* 1. Layout */
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  gap: 12px;
  justify-content: center;
  align-items: center;
  z-index: 100;
  /* 3. Box model */
  background-color: var(--ds-color-secondary);
  padding: 4px 12px;
  /* 5. Typo */
  color: var(--ds-color-on-secondary);
  font-size: 13px;
  font-weight: 700;
  /* Bandeau d'une ligne (hauteur fixe) : le texte se coupe en ellipse, « Quitter » reste à sa droite. */
}
.c-recette-banner__text {
  /* 4. Dimensions */
  min-width: 0;
  overflow: hidden;
  /* 5. Typo */
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-recette-banner__form {
  /* 1. Layout */
  display: inline-flex;
  flex-shrink: 0;
}
.c-recette-banner__button {
  /* 3. Box model */
  border: 1px solid currentcolor;
  border-radius: var(--ds-radius-btn);
  background: transparent;
  padding: 2px 10px;
  /* 5. Typo */
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.has-recette-banner {
  /* 3. Box model */
  padding-top: 30px;
}

/* Fiche client, section Recette : un environnement repliable par projet (details natif), ligne de résumé compacte
   (projet, état, adresse, type d'accès), puis le volet « Réglages avancés ». */
.c-recette {
  border: 1px solid var(--color-line);
  border-radius: 0.75rem;
  background-color: #fff;
  padding: 0 1rem;
  /* Chevron : à droite quand le bloc est replié, vers le bas quand il est ouvert. */
}
.c-recette[open] {
  padding-bottom: 1rem;
}
.c-recette__summary, .c-recette__advanced-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  align-items: center;
  list-style: none;
  cursor: pointer;
}
.c-recette__summary::-webkit-details-marker, .c-recette__advanced-summary::-webkit-details-marker {
  display: none;
}
.c-recette__summary {
  padding: 0.75rem 0;
}
.c-recette__title {
  margin: 0;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-recette__url, .c-recette__meta {
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-recette__url {
  max-width: 100%;
  color: var(--color-ink);
}
.c-recette__meta {
  color: var(--color-mute);
}
.c-recette__chevron {
  transform: rotate(-90deg);
  width: 1rem;
  height: 1rem;
  color: var(--color-mute);
  flex-shrink: 0;
  transition: transform var(--motion-fast) var(--ease-out);
}
.c-recette[open] > .c-recette__summary .c-recette__chevron, .c-recette__advanced[open] > .c-recette__advanced-summary .c-recette__chevron {
  transform: none;
}
.c-recette__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.c-recette__advanced {
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  padding: 0.5rem 0;
}
.c-recette__advanced[open] > .c-recette__body {
  padding-top: 0.75rem;
}
.c-recette__advanced-summary {
  gap: 0.25rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-recette__advanced-summary:hover {
  color: var(--acseo-navy);
}
.c-recette__summary:focus-visible, .c-recette__advanced-summary:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
  border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .c-recette__chevron {
    transition: none;
  }
}

/* Administration : même langage que l'espace client (maquette v2). Les noms c-admin__* sont conservés. */
.c-admin {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem;
  width: 100%;
  max-width: 80rem;
  /* Boutons */
  /* Le titre cède la place à l'action : un bouton long (« Configurer Tobi pour un projet ») reste entier, sans
     déborder à droite ; sous la largeur disponible, il passe sous le titre (flex-wrap). */
  /* Nombre d'éléments à côté du titre d'une liste (« 4 clients », back-office v5). */
  /* Nom et identifiant d'une ligne de liste v5 : le nom en gras, l'identifiant en chasse fixe dessous. */
  /* Toute la ligne ouvre la fiche (BoPrincipes) : le lien du nom couvre la ligne, le menu ⋯ reste au-dessus. */
  /* Valeur à renseigner (Référent « À choisir ») : discrète, sans alarme. */
  /* « +N » après le premier client suivi (liste des comptes), liste complète en infobulle. */
  /* Barre de recherche et de filtres */
  /* Champs compacts v5 partout (polish v7, 28/10) : 38 px, filet de 1 px, rayon de 10 px, texte 13 px. */
  /* Grille des champs : 2 colonnes sur ordinateur, 1 sur mobile ; cases, aides longues et suggestions en pleine largeur. */
  /* Champ et bouton côte à côte, qui passent à la ligne sur petit écran. */
  /* Champs qui dépendent d'une case (recette, livraison) : décalés sous la case qui les ouvre. */
  /* Barre d'enregistrement collée en bas de l'écran pendant toute la saisie. */
  /* Résultats des vérifications d'un projet (assistant) */
  /* Pastilles d'état (v5) : point et texte, jamais la couleur seule ; vert actif, gris désactivé. */
  /* Tableaux : cartes empilées sous 820 px (data-label sur chaque cellule) */
  /* Colonne de la case : zone cliquable de 44 px */
  /* Au-dessus du lien qui couvre la ligne (&__row-link). */
  /* Consultation d'une conversation (lecture seule) */
}
.c-admin__nav {
  display: flex;
  gap: 0.25rem;
  align-self: flex-start;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-ice);
  padding: 0.25rem;
  max-width: 100%;
  overflow-x: auto;
}
.c-admin__nav-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  min-height: 2.5rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.c-admin__nav-link:hover {
  background-color: #fff;
}
.c-admin__nav-link.is-active {
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-admin__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-end;
  /* Mobile : l'action (« Nouvel utilisateur », « Retour ») toujours sous le titre, alignée à gauche,
     au lieu de tomber à la ligne selon la longueur du titre. */
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin__header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
}
.c-admin__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.c-admin__header-actions > form {
  display: contents;
}
.c-admin__eyebrow {
  color: var(--acseo-blue-strong);
  font-family: var(--font-family-hand);
  font-size: 1.0625rem;
  font-weight: 500;
}
.c-admin__title {
  font-size: clamp(1.5rem, 4vw, var(--font-size-xl));
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.c-admin__error-summary {
  display: grid;
  gap: 0.5rem;
}
.c-admin__error-summary:focus-visible {
  outline: 3px solid var(--color-danger);
  outline-offset: 2px;
}
.c-admin__error-summary-title {
  margin: 0;
}
.c-admin__error-summary-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding-left: 1.25rem;
}
.c-admin__error-summary-link {
  color: inherit;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.c-admin__flash {
  border-radius: var(--radius-lg);
  background-color: var(--color-success-bg);
  padding: 0.875rem 1.125rem;
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-admin__flash--warning {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}
.c-admin__hint {
  max-width: 75ch;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  /* Valeur proposée d'après GitLab (assistant de la fiche projet, recette du 04/11). */
}
.c-admin__hint--prefilled {
  color: var(--color-warning);
}
.c-admin__input.is-prefilled {
  border-color: var(--color-warning);
}
.c-admin__inline-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-admin__section-title {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.c-admin__empty {
  border: 2px dashed var(--acseo-divider);
  border-radius: var(--radius-xl);
  padding: 2rem 1rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}
.c-admin__link {
  color: var(--acseo-navy);
  font-weight: 600;
}
.c-admin__button {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-navy);
  padding: 0.5rem 1.25rem;
  min-height: var(--touch-target);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* Petit bouton compact v5 partout (polish v7, 28/10 ; avant, seulement dans une fiche .c-record) : filet de 1 px,
     rayon de 10 px, 30 px de haut. */
}
.c-admin__button:hover {
  background-color: var(--acseo-blue-strong);
  color: #fff;
}
.c-admin__button--secondary {
  border-color: var(--acseo-navy);
  background-color: transparent;
  color: var(--acseo-navy);
}
.c-admin__button--secondary:hover {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}
.c-admin__button--danger {
  border-color: var(--color-danger);
  background-color: transparent;
  color: var(--color-danger);
}
.c-admin__button--danger:hover {
  background-color: var(--color-danger);
  color: #fff;
}
.c-admin__button--small {
  border-width: 1px;
  border-radius: 0.625rem;
  padding: 0 0.75rem;
  min-height: 1.875rem;
  font-size: var(--font-size-xs);
}
.c-admin__button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.c-admin__button[hidden] {
  display: none;
}
.c-admin__header > div {
  flex: 1 1 16rem;
  min-width: 0;
  /* En colonne (mobile), la base de 16rem deviendrait une hauteur : un grand vide sous le titre. */
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin__header > div {
    flex: none;
  }
}
.c-admin__header > .c-admin__button {
  border-radius: 0.625rem;
  padding: 0 0.875rem;
  max-width: 100%;
  min-height: 2.25rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.c-admin__title-meta {
  margin-left: 0.5rem;
  color: var(--color-mute);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.c-admin__name {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}
.c-admin__mono {
  color: var(--color-mute);
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: var(--font-size-2xs);
  overflow-wrap: anywhere;
}
.c-admin__row-link {
  color: var(--acseo-navy);
  font-weight: 600;
  text-decoration: none;
}
.c-admin__row-link::after {
  position: absolute;
  inset: 0;
  content: "";
}
.c-admin__row-link:focus-visible {
  outline: none;
}
.c-admin__row-link:focus-visible::after {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: -0.125rem;
}
.c-admin__unset {
  color: var(--color-text-muted);
}
.c-admin__more {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.c-admin__search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.75rem;
  align-items: center;
  /* Le champ de recherche prend la place libre : le texte d'aide reste lisible, les filtres sur une ligne. */
}
.c-admin__search input[type=search] {
  flex: 1 1 14rem;
  min-width: 14rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin__search input[type=search] {
    flex: none;
    min-width: 0;
  }
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin__search {
    flex-direction: column;
    align-items: stretch;
  }
  .c-admin__search .c-admin__input {
    width: 100%;
  }
}
.c-admin__input {
  border: 1px solid #cfdbe4;
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0 0.75rem;
  min-width: 0;
  min-height: 2.375rem;
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-sm);
}
.c-admin__input:is(textarea) {
  padding: 0.5rem 0.75rem;
}
.c-admin__input:focus {
  outline: 0.1875rem solid rgba(0, 125, 161, 0.35);
  outline-offset: 0.0625rem;
  border-color: var(--acseo-blue-strong);
}
.c-admin__input--date {
  width: auto;
}
.c-admin__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  /* « Client » ou « Clients suivis » selon le rôle (role-fields) : display flex annulerait [hidden]. */
}
.c-admin__field[hidden] {
  display: none;
}
.c-admin__field label {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-admin__field .c-admin__input,
.c-admin__field select,
.c-admin__field textarea {
  width: 100%;
}
.c-admin__field ul {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-admin__field > .c-admin__button {
  align-self: flex-start;
}
.c-admin__field > p:not([class]),
.c-admin__field > [id$=_help] {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-admin__field h2 {
  font-size: 1.0625rem;
  font-weight: 700;
}
.c-admin__field small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.c-admin__field--check {
  flex-flow: row wrap;
  gap: 0.625rem;
  align-items: center;
  /* Un libellé long passe à la ligne à côté de la case (jamais sous elle) ; aides et erreurs dessous. */
}
.c-admin__field--check input[type=checkbox] {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  accent-color: var(--acseo-navy);
}
.c-admin__field--check > label {
  flex: 1 1 0;
  min-width: 0;
}
.c-admin__field--check > :not(input, label) {
  flex-basis: 100%;
}
.c-admin__choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-admin__choice {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  border: 2px solid var(--color-border, #c9d6e2);
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: 0.75rem 1rem;
  min-height: 3rem;
  cursor: pointer;
  /* Projets d'un autre client masqués pour un compte client (role-fields). */
}
.c-admin__choice[hidden] {
  display: none;
}
.c-admin__choice:hover, .c-admin__choice:has(input:checked) {
  border-color: var(--acseo-blue-strong);
}
.c-admin__choice:has(input:focus-visible) {
  outline: 3px solid var(--acseo-blue-strong);
  outline-offset: 2px;
}
.c-admin__choice input[type=checkbox] {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  accent-color: var(--acseo-navy);
}
.c-admin__choice-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.c-admin__choice-name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.c-admin__choice-id {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}
.c-admin__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  border-radius: var(--radius-xl);
  background-color: var(--acseo-ice);
  padding: clamp(1rem, 3vw, 1.75rem);
  max-width: 56rem;
  align-content: start;
  /* Fiche projet : une carte par étape, dans l'ordre de la configuration, bouton Enregistrer toujours visible. */
}
.c-admin__form > :not(.c-admin__field),
.c-admin__form > .c-admin__field--check,
.c-admin__form > .c-admin__hint,
.c-admin__form > .c-admin__section-title,
.c-admin__form > .c-admin__button,
.c-admin__form > section {
  grid-column: 1/-1;
}
.c-admin__form > .c-admin__button {
  justify-self: start;
}
.c-admin__form--sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: transparent;
  padding: 0;
  max-width: 60rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin__form {
    grid-template-columns: 1fr;
  }
}
.c-admin__fieldset {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background-color: var(--acseo-ice);
  padding: clamp(1rem, 3vw, 1.5rem);
  min-width: 0;
}
.c-admin__fieldset--advanced > summary {
  min-height: var(--touch-target);
  cursor: pointer;
}
.c-admin__fieldset-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.c-admin__fieldset-title {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.c-admin__step {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--acseo-navy);
  width: 1.75rem;
  height: 1.75rem;
  color: #fff;
  font-size: var(--font-size-sm);
}
.c-admin__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  align-items: start;
}
.c-admin__grid > .c-admin__field--check,
.c-admin__grid > .c-admin__field--wide {
  grid-column: 1/-1;
}
.c-admin__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin__grid, .c-admin__grid--3 {
    grid-template-columns: 1fr;
  }
}
.c-admin__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0;
}
.c-admin__inline > .c-admin__input {
  flex: 1 1 14rem;
  width: auto;
}
.c-admin__subgroup {
  border-left: 3px solid var(--acseo-blue-strong);
  padding-left: clamp(0.75rem, 2vw, 1.25rem);
}
.c-admin__subgroup[hidden] {
  display: none;
}
.c-admin__autofill {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px dashed var(--acseo-field-border);
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 0.75rem 1rem;
}
.c-admin__autofill-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-admin__autofill-panel[hidden] {
  display: none;
}
.c-admin__suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  list-style: none;
}
.c-admin__suggestions[hidden] {
  display: none;
}
.c-admin__suggestion {
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-md);
  background-color: #fff;
  padding: 0.5rem 0.75rem;
  width: 100%;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.c-admin__suggestion:hover, .c-admin__suggestion:focus-visible {
  border-color: var(--acseo-blue-strong);
  background-color: var(--acseo-ice);
}
.c-admin__wizard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 1rem;
  min-width: 0;
}
.c-admin__form-actions {
  display: flex;
  position: sticky;
  bottom: 0;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  z-index: 10;
  border-top: 1px solid var(--acseo-divider);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: #fff;
  padding: 0.75rem clamp(1rem, 3vw, 1.5rem) calc(0.75rem + env(safe-area-inset-bottom));
  box-shadow: var(--ds-shadow-ambient-hover);
}
.c-admin__form-actions > .c-admin__hint {
  flex: 1 1 16rem;
  margin: 0;
}
.c-admin__checks {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: var(--font-size-sm);
}
.c-admin__badge {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-success-bg);
  padding: 0 0.5625rem;
  height: 1.375rem;
  color: var(--color-success);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  white-space: nowrap;
  /* Rouge : un échec à regarder (dernier tour d'une discussion en échec, recette du 04/11). */
  /* Ambre : à compléter (projet pas prêt pour Tobi). */
}
.c-admin__badge::before {
  border-radius: 50%;
  background-color: currentcolor;
  width: 0.375rem;
  height: 0.375rem;
  content: "";
}
.c-admin__badge--off {
  background-color: #eef2f5;
  color: var(--color-ink);
}
.c-admin__badge--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}
.c-admin__badge--warn {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
.c-admin__scroll {
  overflow-x: auto;
}
.c-admin__table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-sm);
  /* Titres en casse normale, sur une ligne (Projets, lot B). */
  /* Liste v5 (BoClientsListe) : cadre arrondi, en-tête gris clair de 38 px, lignes de 48 px. */
}
.c-admin__table th,
.c-admin__table td {
  border-top: 1px solid var(--acseo-divider);
  padding: 0.75rem 0.625rem;
  text-align: left;
  vertical-align: middle;
}
.c-admin__table thead th {
  border-top: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c-admin__table tbody th {
  font-weight: 700;
}
.c-admin__table td[data-num],
.c-admin__table th[data-num] {
  text-align: right;
}
.c-admin__table--plain-head thead th {
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-admin__table--list {
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;
    overflow: hidden;
  }
  .c-admin__table--list th,
  .c-admin__table--list td {
    border-top: 0;
    border-bottom: 1px solid var(--color-line-soft);
    padding: 0 0.875rem;
    height: 3rem;
    color: var(--color-ink);
  }
  .c-admin__table--list thead th {
    border-bottom-color: var(--color-line);
    background-color: var(--color-soft);
    height: 2.375rem;
    color: var(--color-mute);
    font-size: 0.6563rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .c-admin__table--list tbody tr:last-child td {
    border-bottom: 0;
  }
  .c-admin__table--list .c-admin__col-num {
    width: 8.5rem;
  }
  .c-admin__table--list .c-admin__col-tags {
    width: 13rem;
  }
  .c-admin__table--list .c-admin__col-state {
    width: 9.5rem;
  }
  .c-admin__table--list .c-admin__col-role {
    width: 8.5rem;
  }
  .c-admin__table--list .c-admin__col-date {
    width: 7.5rem;
  }
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin__table {
    /* Case en haut à gauche, identifiant au centre, menu « ⋯ » en haut à droite */
    /* Tableau des projets sans case : l'identifiant prend la première colonne */
  }
  .c-admin__table thead {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .c-admin__table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
    border: 1px solid var(--acseo-divider);
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
  }
  .c-admin__table th,
  .c-admin__table td {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: baseline;
    border-top: 0;
    padding: 0.375rem 0;
    text-align: right;
  }
  .c-admin__table th::before,
  .c-admin__table td::before {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-align: left;
    content: attr(data-label);
  }
  .c-admin__table td {
    grid-column: 1/-1;
  }
  .c-admin__table .c-admin__cell-select,
  .c-admin__table .c-admin__cell-login,
  .c-admin__table .c-admin__cell-menu {
    grid-row: 1;
  }
  .c-admin__table .c-admin__cell-select {
    grid-column: 1;
    padding: 0;
  }
  .c-admin__table .c-admin__cell-login {
    grid-column: 2;
    justify-content: flex-start;
    text-align: left;
  }
  .c-admin__table .c-admin__cell-menu {
    grid-column: 3;
    padding: 0;
  }
  .c-admin__table .c-admin__cell-select::before,
  .c-admin__table .c-admin__cell-login::before,
  .c-admin__table .c-admin__cell-menu::before {
    content: none;
  }
  .c-admin__table .c-admin__cell-login:first-child {
    grid-column: 1/3;
  }
}
.c-admin__row.is-inactive {
  color: var(--color-text-muted);
}
.c-admin__row--link {
  position: relative;
}
.c-admin__row--link:hover {
  background-color: #f2fafb;
}
.c-admin__row--link.is-inactive .c-admin__row-link {
  color: var(--color-text-muted);
}
.c-admin__row.is-selected {
  background-color: var(--acseo-ice);
}
.c-admin__login {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.c-admin__you {
  color: var(--color-text-muted);
}
.c-admin__cell-select {
  width: var(--touch-target);
}
.c-admin__cell-menu {
  position: relative;
  z-index: 1;
  width: var(--touch-target);
  text-align: right;
}
.c-admin__check {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  cursor: pointer;
}
.c-admin__check input {
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--acseo-navy);
  cursor: pointer;
}
.c-admin__check input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.c-admin__actions {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.c-admin__actions form {
  display: inline-flex;
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-admin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-end;
    min-width: 9rem;
  }
  .c-admin__actions .c-admin__button {
    padding: 0.25rem 0.625rem;
    min-height: 2.25rem;
    font-size: var(--font-size-xs);
  }
}
.c-admin__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.c-admin__transcript {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 52rem;
}
.c-admin__message {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-self: flex-start;
  border-radius: 0.375rem 1.25rem 1.25rem;
  background-color: var(--acseo-ice);
  padding: 0.75rem 1rem;
  max-width: 90%;
}
.c-admin__message--user {
  align-self: flex-end;
  border-radius: 1.25rem 1.25rem 0.375rem;
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-admin__message-meta {
  opacity: 0.85;
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-admin__message-text {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Menu « ⋯ » d'une ligne : bouton rond de 44 px, menu positionné par row_menu_controller */
.c-row-menu {
  display: inline-block;
}
.c-row-menu__toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  width: var(--touch-target);
  height: var(--touch-target);
  color: var(--acseo-navy);
  cursor: pointer;
}
.c-row-menu__toggle:hover {
  background-color: var(--acseo-ice);
}
.c-row-menu__toggle[aria-expanded=true] {
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-row-menu__toggle:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.c-row-menu__toggle .c-icon {
  width: 1.375rem;
  height: 1.375rem;
}
.c-row-menu__panel {
  position: fixed;
  z-index: 30;
  box-sizing: border-box;
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 0.375rem;
  box-shadow: var(--ds-shadow-ambient-hover);
  width: min(15rem, 100vw - 1rem);
  text-align: left;
}
.c-row-menu__panel[hidden] {
  display: none;
}
.c-row-menu__form {
  display: block;
}
.c-row-menu__item {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  padding: 0.375rem 0.75rem;
  width: 100%;
  min-height: var(--touch-target);
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.c-row-menu__item .c-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}
.c-row-menu__item:hover, .c-row-menu__item:focus-visible {
  outline: 0;
  background-color: var(--acseo-ice);
}
.c-row-menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}
.c-row-menu__item--danger {
  color: var(--color-danger);
  font-weight: 700;
}
.c-row-menu__item.is-disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.c-row-menu__item.is-disabled:hover {
  background-color: transparent;
}
.c-row-menu__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.c-row-menu__reason {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.4;
}
.c-row-menu__separator {
  margin: 0.25rem 0.5rem;
  background-color: var(--acseo-divider);
  height: 1px;
}

/* Bandeau de sélection multiple : collé en bas de la zone principale */
.c-bulk-bar {
  display: flex;
  position: sticky;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  z-index: 20;
  margin: 1rem auto 0;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-navy);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  box-shadow: var(--ds-shadow-ambient-hover);
  width: fit-content;
  max-width: 100%;
  color: #fff;
}
.c-bulk-bar[hidden] {
  display: none;
}
.c-bulk-bar__count {
  font-size: var(--font-size-base);
  font-weight: 700;
}
.c-bulk-bar__sep {
  background-color: var(--acseo-navy-line);
  width: 1px;
  height: 1.5rem;
}
.c-bulk-bar__button {
  display: inline-flex;
  gap: 0.375rem;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.25rem 1rem;
  min-height: var(--touch-target);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
}
.c-bulk-bar__button .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.c-bulk-bar__button--accent {
  background-color: var(--color-accent-fill);
  color: #fff;
}
.c-bulk-bar__button--outline {
  border-color: var(--acseo-teal-light);
  background-color: transparent;
  color: #fff;
}
.c-bulk-bar__button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.c-bulk-bar__close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  width: var(--touch-target);
  height: var(--touch-target);
  color: var(--acseo-teal-light);
  cursor: pointer;
}
.c-bulk-bar__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-bulk-bar {
    justify-content: center;
    border-radius: var(--radius-xl);
    padding-left: 0.75rem;
  }
}

/* Fenêtre de confirmation (suppression, désactivation) */
.c-dialog {
  border: 0;
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  width: min(32rem, 100vw - 2rem);
  color: var(--acseo-navy);
  /* Même champ compact que .c-admin__input. */
}
.c-dialog::backdrop {
  background-color: rgba(0, 34, 80, 0.55);
}
.c-dialog__title {
  font-size: 1.25rem;
  font-weight: 700;
}
.c-dialog__text {
  margin-top: 0.5rem;
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.c-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-dialog__input {
  border: 1px solid #cfdbe4;
  border-radius: 0.625rem;
  padding: 0 0.75rem;
  min-height: 2.375rem;
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-sm);
}
.c-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  /* Mobile : les deux boutons se partagent la ligne ; s'ils ne tiennent pas, chacun prend toute la largeur
     (jamais un bouton seul décalé à droite sous l'autre). */
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-dialog__actions > * {
    flex: 1 1 auto;
  }
}

/* Listes du back-office v5 (BoPrincipes, BoClientsListe) : barre de recherche et de filtres, filtre segmenté,
   étiquette, pied de liste et état vide. Rendu compact : champs de 38 px, rayons de 10 px. */
.c-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}
.c-admin-toolbar__search, .c-admin-toolbar__select select {
  border: 1px solid #cfdbe4;
  border-radius: 0.625rem;
  background-color: #fff;
  height: 2.375rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
}
.c-admin-toolbar__search {
  display: flex;
  flex: 0 1 21.25rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0 0.75rem;
  min-width: 14rem;
  color: var(--color-mute);
}
.c-admin-toolbar__search .c-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.c-admin-toolbar__search input {
  flex: 1;
  border: 0;
  background: transparent;
  min-width: 0;
  height: 100%;
  color: var(--acseo-navy);
  font: inherit;
}
.c-admin-toolbar__search input::placeholder {
  color: #8a9bb0;
}
.c-admin-toolbar__search input:focus {
  outline: none;
}
.c-admin-toolbar__search:focus-within {
  border-color: var(--acseo-blue-strong);
  box-shadow: 0 0 0 0.1875rem #e6f6f8;
}
.c-admin-toolbar__select select {
  padding: 0 0.75rem;
  min-width: 13.125rem;
  font-weight: 600;
  cursor: pointer;
}
.c-admin-toolbar__select select:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.0625rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .c-admin-toolbar__search, .c-admin-toolbar__select select {
    flex: none;
    width: 100%;
  }
}

/* Filtre en un clic (Tous, Actifs, Désactivés) : des liens, l'état choisi en glace. */
.c-admin-seg {
  display: inline-flex;
  border: 1px solid #cfdbe4;
  border-radius: 0.625rem;
  background-color: #fff;
  height: 2.375rem;
  overflow: hidden;
}
.c-admin-seg__item {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--color-line);
  padding: 0 0.75rem;
  color: var(--color-ink);
  font-size: 0.7813rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.c-admin-seg__item:last-child {
  border-right: 0;
}
.c-admin-seg__item:hover {
  background-color: var(--color-soft);
}
.c-admin-seg__item[aria-current] {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}
.c-admin-seg__item:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: -0.125rem;
}

/* Bascule seule au style d'un segment (« Mes clients » de la liste Clients) : un bouton, l'état pressé en glace. */
.c-admin-seg__item--toggle {
  flex: 0 0 auto;
  border: 1px solid #cfdbe4;
  border-radius: 0.625rem;
  background-color: #fff;
  height: 2.375rem;
  font-family: inherit;
  cursor: pointer;
}
.c-admin-seg__item--toggle[aria-pressed=true] {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}

/* Actions d'une ligne en liens compacts, sur une seule ligne (tableau des compétences : Modifier, Mettre hors service). */
.c-admin__cell-actions {
  width: 1%;
  white-space: nowrap;
}

.c-admin-row-actions {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  white-space: nowrap;
}
.c-admin-row-actions form {
  display: contents;
}
.c-admin-row-actions__link {
  border: 0;
  background: none;
  padding: 0.25rem 0;
  color: var(--acseo-blue-strong);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.1875rem;
  cursor: pointer;
}
.c-admin-row-actions__link:hover, .c-admin-row-actions__link:focus-visible {
  text-decoration-color: currentcolor;
}
.c-admin-row-actions__link:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
  border-radius: var(--radius-xs);
}

/* Étiquette sobre (connecteur d'un client). */
.c-admin-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 0.375rem;
  background-color: var(--color-soft);
  padding: 0 0.5rem;
  height: 1.5rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Pied de liste : « 1 à 25 sur 48 clients · 25 par page », puis les pages. */
.c-admin-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  color: var(--color-mute);
  font-size: 0.7813rem;
}
.c-admin-pager__pages {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-admin-pager__page {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background-color: #fff;
  min-width: 1.875rem;
  height: 1.875rem;
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}
.c-admin-pager__page .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.c-admin-pager__page:hover {
  border-color: var(--acseo-teal);
}
.c-admin-pager__page.is-current {
  border-color: var(--acseo-navy);
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-admin-pager__page.is-disabled {
  opacity: 0.4;
}
.c-admin-pager__gap {
  padding: 0 0.125rem;
}

/* État vide utile : pourquoi c'est vide, et l'action suivante. */
.c-admin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px dashed #c6d5df;
  border-radius: 0.75rem;
  background-color: var(--color-soft);
  padding: 1.5rem;
  text-align: center;
}
.c-admin-empty[hidden] {
  display: none;
}
.c-admin-empty__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.625rem;
  border-radius: 50%;
  background-color: var(--acseo-ice);
  width: 2.75rem;
  height: 2.75rem;
  color: var(--acseo-blue-strong);
}
.c-admin-empty__icon .c-icon {
  width: 1.375rem;
  height: 1.375rem;
}
.c-admin-empty__title {
  font-size: var(--font-size-md);
  font-weight: 700;
}
.c-admin-empty__text {
  margin-top: 0.375rem;
  max-width: 26.25rem;
  color: var(--color-mute);
  font-size: 0.7813rem;
  line-height: 1.5;
}
.c-admin-empty__action {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.875rem;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 0.625rem;
  height: 1.875rem;
  color: var(--acseo-navy);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
}
.c-admin-empty__action .c-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.c-admin-empty__action:hover {
  background-color: var(--color-soft);
}
.c-admin-empty__action--primary {
  border-color: var(--acseo-navy);
  background-color: var(--acseo-navy);
  color: #fff;
}
.c-admin-empty__action--primary:hover {
  background-color: var(--acseo-blue-strong);
}

/* Bouton d'en-tête compact (« Nouveau client ») : icône de 16 px. */
.c-admin__header > .c-admin__button .c-icon {
  width: 1rem;
  height: 1rem;
}

/* Tableau des compétences (fiche client, page « Compétences ») : nom large avec la description en ligne discrète
   dessous, projets en colonne moyenne ; version, état et actions à la largeur de leur contenu, sans retour à la ligne. */
.c-admin__table--skills thead th {
  white-space: nowrap;
}
@media screen and (width >= 51.25rem) and (height >= 31.25rem) {
  .c-admin__table--skills th,
  .c-admin__table--skills td {
    padding: 0.5rem 0.625rem;
    vertical-align: top;
  }
  .c-admin__table--skills .c-admin__col-skill {
    width: 55%;
    min-width: 14rem;
  }
  .c-admin__table--skills .c-admin__col-projects {
    min-width: 7rem;
  }
  .c-admin__table--skills .c-admin__col-fit {
    width: 1%;
    white-space: nowrap;
  }
}

.c-admin__skill {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.c-admin__skill .c-admin__link {
  font-weight: 600;
}

/* Deux lignes au plus ; le texte entier reste lisible sur la fiche de la compétence. */
.c-admin__skill-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Fiche du back-office v5 (BoClientFiche) : sommaire des sections à gauche, sections en cartes, une seule barre
   « Enregistrer » collée en bas, qui n'apparaît qu'à la première modification. */
.c-record {
  display: grid;
  grid-template-columns: 11rem minmax(0, 46rem);
  gap: 1.75rem;
  align-items: start;
  /* Page de cartes sans sommaire (Projets suivis, Voir en tant que). */
  /* Contrôle d'un import sur grand écran : la carte du fichier en haut, puis le contrôle et l'import côte à côte. */
  /* Point bleu : section modifiée ; corail : section avec un champ à corriger. */
  /* Actions d'une section (Nouvelle version, Importer, Vérifier l'adresse…) : boutons compacts, jamais collants ;
     seule la barre « Enregistrer » (c-save-bar) reste collée en bas. */
  /* L5 : éléments hérités des agents, repliés sous la section (une ligne par élément, interrupteur à droite). */
  /* Coché « Désactivé pour ce client » avant Enregistrer : l'étiquette de l'agent passe au gris tout de suite. */
}
.c-record--plain {
  grid-template-columns: minmax(0, 46rem);
}
@media (width >= 75rem) {
  .c-record--split {
    grid-template-columns: minmax(0, 94rem);
  }
  .c-record--split .c-record__main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
  }
  .c-record--split .c-record__main > :first-child {
    grid-column: 1/-1;
    max-width: 46rem;
  }
}
.c-record__nav {
  display: flex;
  position: sticky;
  top: 1.5rem;
  flex-direction: column;
  gap: 0.125rem;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-record__nav {
    display: none;
  }
}
.c-record__nav-title {
  padding: 0 0.625rem 0.5rem;
  color: var(--color-mute);
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.c-record__anchor {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  min-height: 2rem;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  /* Survol : la couleur du texte seulement, jamais un fond, pour qu'un seul élément paraisse sélectionné (celui qui
     porte aria-current) quand la souris reste sur le sommaire collant pendant le défilement. */
  /* Section lue en haut de l'écran (record_form_controller.js, suivi du défilement). */
}
.c-record__anchor:hover {
  color: var(--acseo-navy);
}
.c-record__anchor > span:first-child {
  flex: 1;
}
.c-record__anchor[aria-current] {
  background-color: var(--acseo-ice);
  box-shadow: inset 0.125rem 0 0 var(--acseo-navy);
  color: var(--acseo-navy);
  font-weight: 700;
}
.c-record__dot {
  display: none;
  border-radius: 50%;
  background-color: var(--agent-assist);
  width: 0.4375rem;
  height: 0.4375rem;
}
.c-record__anchor.is-changed .c-record__dot, .c-record__anchor.is-error .c-record__dot {
  display: block;
}
.c-record__anchor.is-error .c-record__dot {
  background-color: var(--acseo-coral);
}
.c-record__anchor-count {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 600;
}
.c-record__main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.c-record__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.c-record__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md-plus);
  background-color: #fff;
  padding: 0.875rem 1.125rem;
  min-width: 0;
  scroll-margin-top: 1.5rem;
}
.c-record__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  align-items: center;
}
.c-record__title {
  font-size: 0.9375rem;
  font-weight: 700;
}
.c-record__count {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-record__head-action {
  margin-left: auto;
}
.c-record__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}
.c-record__action {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 0.625rem;
  min-height: 1.75rem;
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.c-record__action:hover {
  border-color: var(--acseo-divider);
  background-color: var(--color-soft);
}
.c-record__action:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-record__action .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.c-record__lead {
  margin-top: -0.5rem;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.c-record__retype {
  margin-top: 0.25rem;
  color: var(--acseo-coral-strong);
  font-size: var(--font-size-2xs);
  font-weight: 600;
}
.c-record__inherited {
  border-top: 1px solid var(--color-line);
  padding-top: 0.5rem;
}
.c-record__inherited-title {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
}
.c-record__inherited-list {
  display: grid;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.c-record__inherited-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
}
.c-record__inherited-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: baseline;
  min-width: 0;
}
.c-record__inherited-name small {
  color: var(--color-mute);
  overflow-wrap: anywhere;
}
.is-off > .c-record__inherited-name {
  color: var(--color-mute);
}
.c-record__inherited-item:has(input:checked) .c-admin__badge {
  background-color: #eef2f5;
  color: var(--color-ink);
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-record {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* Barre « Enregistrer » : collée en bas de l'écran, au-dessus du contenu, jamais un gros bouton. */
.c-save-bar {
  display: flex;
  position: sticky;
  bottom: 0;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  z-index: 5;
  grid-column: 1/-1;
  border-top: 1px solid var(--color-line);
  background-color: #fff;
  padding: 0.75rem 0;
  box-shadow: 0 -0.5rem 1.25rem rgba(0, 34, 80, 0.06);
}
.c-save-bar[hidden] {
  display: none;
}
.c-save-bar__dot {
  border-radius: 50%;
  background-color: var(--agent-assist);
  width: 0.5rem;
  height: 0.5rem;
}
.c-save-bar__count {
  font-size: var(--font-size-sm);
}
.c-save-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-save-bar__chips li {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 0.375rem;
  background-color: var(--color-soft);
  padding: 0 0.5625rem;
  height: 1.5rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
}
.c-save-bar__errors {
  color: var(--acseo-coral-strong);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-save-bar__gap {
  flex: 1;
}
.c-save-bar__confirm {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--color-warning);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-save-bar__confirm[hidden] {
  display: none;
}

/* Interrupteur (outil d'un connecteur) : case native masquée, piste de 32 × 18 px. */
.c-switch {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
}
.c-switch__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: 2rem;
  height: 1.125rem;
  cursor: pointer;
}
.c-switch__track {
  position: relative;
  flex-shrink: 0;
  border-radius: 0.5625rem;
  background-color: #cfdbe4;
  width: 2rem;
  height: 1.125rem;
}
.c-switch__track::after {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  border-radius: 50%;
  background-color: #fff;
  width: 0.875rem;
  height: 0.875rem;
  content: "";
  transition: left 0.15s ease;
}
.c-switch__input:checked + .c-switch__track {
  background-color: var(--acseo-navy);
}
.c-switch__input:checked + .c-switch__track::after {
  left: 1rem;
}
.c-switch__input:focus-visible + .c-switch__track {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-switch__input:disabled + .c-switch__track {
  opacity: 0.5;
}

/* Résultat de « Tester la connexion » : rien n'est enregistré, le message le dit. */
.c-record-test {
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.c-record-test[hidden] {
  display: none;
}
.c-record-test ul {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
}
.c-record-test--pending {
  background-color: var(--color-soft);
  color: var(--color-ink);
}
.c-record-test--ok {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.c-record-test--error {
  background-color: #fff0f1;
  color: var(--acseo-coral-strong);
}

/* Catalogue « Ajouter un connecteur » : Atlassian à cocher, les autres grisés « bientôt ». */
.c-connector-catalog__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
}
.c-connector-catalog__name {
  padding: 0 0.25rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-connector-catalog__name small {
  color: var(--color-mute);
  font-weight: 500;
}
.c-connector-catalog__tool {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--font-size-sm);
}
.c-connector-catalog__tool input {
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--acseo-navy);
}
.c-connector-catalog__soon-title {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c-connector-catalog__soon {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.375rem 0 0.75rem;
  padding: 0;
  color: #a9b8c6;
  font-size: var(--font-size-sm);
  list-style: none;
}

/* Fil d'Ariane des fiches : Administration › Clients › Lextenso. */
.c-admin__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
}
.c-admin__crumb a {
  color: var(--acseo-blue-strong);
  font-weight: 600;
  text-decoration: none;
}
.c-admin__crumb .c-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  color: #a9b8c6;
}

/* Bouton d'en-tête compact d'une fiche (Désactiver). */
.c-admin__button--compact {
  border-width: 1px;
  border-radius: 0.625rem;
  padding: 0 0.875rem;
  min-height: 2.25rem;
}

/* Une fiche avec la barre affichée garde de la place sous la dernière section. */
.has-save-bar .c-admin {
  padding-bottom: 1rem;
}

/* L'en-tête d'une fiche garde ses actions à droite, à leur taille. */
.c-admin__header > .c-admin__header-actions {
  flex: 0 0 auto;
}

/* Champs compacts v5 : désormais le style de base de .c-admin__input (_admin.scss) ; choix compacts dans une fiche. */
.c-record .c-admin__choice {
  border-width: 1px;
  border-color: var(--color-line-soft);
  border-radius: 0.625rem;
  padding: 0.375rem 0.75rem;
  min-height: 2.5rem;
}
.c-record .c-admin__choice:has(input:checked) {
  border-color: #b8e3e8;
  background-color: #f4fbfc;
}
.c-record .c-admin__choice input[type=checkbox] {
  width: 1rem;
  height: 1rem;
}

.c-record .c-admin__choices {
  gap: 0.3125rem;
}

/* Champ verrouillé (identifiant et id Redmine après création) : fond gris, lecture seule. */
.c-record .c-admin__input[readonly],
.c-record .c-admin__input[disabled] {
  background-color: var(--color-soft);
  color: var(--color-ink);
}

/* Aperçu du logo d'un projet (fiche projet) : les initiales tant qu'il n'y en a pas. */
.c-project-logo {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  background-color: var(--acseo-ice);
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  color: var(--acseo-blue-strong);
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-project-logo.has-logo {
  background-color: #fff;
}
.c-project-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Champ « Logo du projet » : aperçu, « Choisir une image » (champ fichier natif masqué mais focalisable), nom du
   fichier choisi et « Retirer » quand un logo existe (logo_field_controller.js). */
.c-logo-field {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  border: 1px dashed #cfdbe4;
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0.625rem 0.75rem;
  /* Plus spécifique que « .c-admin__field label » : les libellés gardent la taille des actions compactes. */
}
.c-logo-field__body {
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  /* Aide du champ (form_help) : même style que les aides des autres champs (« .c-admin__field > [id$='_help'] »),
     qu'elle ne reçoit pas ici puisqu'elle n'est pas un enfant direct du champ. */
}
.c-logo-field__body > [id$=_help] {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-logo-field__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.c-logo-field .c-record__action, .c-logo-field__remove label {
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-logo-field__input:focus-visible + .c-logo-field__row .c-record__action {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-logo-field__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  align-items: center;
}
.c-logo-field__name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-logo-field__remove {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  margin-left: auto;
  color: var(--acseo-coral-strong);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-logo-field__remove input {
  margin: 0;
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--acseo-coral-strong);
}
.c-logo-field__remove label {
  cursor: pointer;
}

/* « + Ajouter » d'une section (Équipe ACSEO) : un <details> natif dont le résumé est un petit bouton ; les lignes
   personne gardent leur action (Rattacher, Retirer) à droite. */
.c-record__add > summary {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  width: max-content;
  list-style: none;
  cursor: pointer;
}
.c-record__add > summary::-webkit-details-marker {
  display: none;
}
.c-record__add[open] > summary {
  margin-bottom: 0.5rem;
}

.c-record__section .c-share-person > :last-child:not(.c-share-person__text) {
  margin-left: auto;
}

/* Champ fichier compact (Importer une compétence, file_drop_controller.js) : zone pointillée fine qui est le libellé du
   vrai champ fichier, masqué mais focalisable ; le nom du fichier choisi s'affiche dessous. Une seule surface : la
   carte de la section, sans ombre ni fond teinté. */
.c-file-drop {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.c-file-drop__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.c-file-drop__zone {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px dashed #cfdbe4;
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0.625rem 0.75rem;
  min-height: 2.75rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  cursor: pointer;
}
.c-file-drop__zone:hover, .c-file-drop__zone.is-over {
  border-color: var(--acseo-blue-strong);
  background-color: var(--color-soft);
}
.c-file-drop__input:focus-visible + .c-file-drop__zone {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-file-drop__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--acseo-blue-strong);
}
.c-file-drop__text {
  min-width: 0;
}
.c-file-drop__choose {
  color: var(--acseo-blue-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}
.c-file-drop__name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contrôle d'un import de compétences : une ligne par compétence, séparées par un filet, dans la carte de la section. */
.c-skill-import {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Choix des projets (_projects.html.twig) : un fieldset sans le cadre du navigateur, légende comme un libellé. */
}
.c-skill-import__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--color-line-soft);
  padding: 0.625rem 0;
  min-width: 0;
}
.c-skill-import__item:first-child {
  border-top: 0;
  padding-top: 0;
}
.c-skill-import__item:last-child {
  padding-bottom: 0;
}
.c-skill-import__item .c-alert {
  margin-top: 0.25rem;
}
.c-skill-import__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  min-width: 0;
}
.c-skill-import__name {
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.c-skill-import__path {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  overflow-wrap: anywhere;
}
.c-skill-import__description {
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.c-skill-import__meta, .c-skill-import__hint, .c-skill-import__empty, .c-skill-import__notes li {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.c-skill-import__label {
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-skill-import__notes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.c-skill-import__warnings {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.c-skill-import__warnings li {
  display: flex;
  gap: 0.375rem;
  align-items: flex-start;
  color: var(--color-warning);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.c-skill-import__warnings .c-icon {
  flex: none;
  margin-top: 0.0625rem;
  width: 0.875rem;
  height: 0.875rem;
}
.c-skill-import__form fieldset {
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.c-skill-import__form legend {
  margin-bottom: 0.375rem;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.c-admin-agent {
  /* Modèle de Tobi (fiche v5, 30/10) : un bloc par famille de réglages, deux colonnes au-delà de 1200 px. */
  /* Une ligne par réglage : libellé, aide et valeur par défaut à gauche, champ à droite. */
  /* « Revenir à la valeur par défaut » : un lien, action immédiate (formulaire voisin). */
}
.c-admin-agent__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1rem;
}
@media (width >= 75rem) {
  .c-admin-agent__blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.c-admin-agent__block--wide {
  grid-column: 1/-1;
}
.c-admin-agent__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 13rem);
  gap: 0.375rem 1rem;
  align-items: start;
  border-top: 1px solid var(--color-line);
  padding-top: 0.625rem;
  scroll-margin-top: 1.5rem;
}
.c-admin-agent__row--wide {
  grid-template-columns: minmax(0, 1fr);
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-admin-agent__row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.c-admin-agent__intro {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.c-admin-agent__control {
  min-width: 0;
}
.c-admin-agent__control > .c-admin__input {
  width: 100%;
  max-width: none;
}
.c-admin-agent__label {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-admin-agent__help {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}
.c-admin-agent__number {
  max-width: 12rem;
}
.c-admin-agent__prices .c-admin__input {
  width: 100%;
  min-width: 6rem;
}
.c-admin-agent__meta {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
}
.c-admin-agent__restore {
  border: 0;
  background: none;
  padding: 0;
  color: var(--acseo-navy);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.c-admin-agent__restore:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
.c-admin-agent__prompt-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 56rem;
}
.c-admin-agent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.c-admin-agent__textarea {
  width: 100%;
  min-height: 24rem;
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.c-admin-agent__text {
  margin: 0;
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 1rem;
  max-height: 40rem;
  overflow: auto;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  white-space: pre-wrap;
}
.c-admin-agent__diff {
  margin: 0;
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 0.5rem 0;
  overflow: auto;
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  list-style: none;
}
.c-admin-agent__diff-line {
  padding-inline: 1rem;
  white-space: pre-wrap;
}
.c-admin-agent__diff-line--added {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.c-admin-agent__diff-line--removed {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Modèle de Tobi : la colonne principale de la fiche s'élargit pour ses deux colonnes de blocs. */
@media (width >= 75rem) {
  .c-record--settings {
    grid-template-columns: 11rem minmax(0, 94rem);
  }
}

/*
 Fiche client, section Connecteurs : la carte Atlassian (un accès, un interrupteur par outil) et le périmètre par projet (C7).
 Composant à part : les champs et boutons compacts v5 n'affectent pas les autres formulaires de l'administration
 (c-admin__input, c-admin__button et la barre collante c-admin__form-actions restent inchangés ailleurs).
*/
.c-connector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md-plus);
  background-color: #fff;
  padding: 1rem 1.25rem;
  min-width: 0;
  color: var(--acseo-navy);
  /* En-tête : nom, pastille d'état et date à gauche ; actions secondaires à droite. */
  /* Une seule pastille par carte, toujours avec un texte (jamais la couleur seule). */
  /* Avis de la migration du coffre, en ambre dans la carte. */
  /* Outil (Jira, Confluence) : interrupteur et phrase sur une ligne ; éteint, ses réglages pâlissent. */
  /* Message de la vérification à la sortie du champ. */
  /* Blocs « Accès » et « Réglages » : séparés par un filet, chacun avec son formulaire. */
  /* Champ compact v5 : 38 px, filet de 1 px, rayon de 10 px, comme .c-admin__input. */
  /* Pied du bloc : aide ou case à gauche, petit bouton d'envoi à droite ; jamais de bande pleine largeur. */
  /* Action destructrice discrète : lien texte corail, la confirmation reste celle de la boîte de dialogue. */
  /* Outil éteint : ses réglages restent visibles, pâlis, et ne sont pas envoyés. */
}
.c-connector--project {
  gap: 0.75rem;
}
.c-connector[hidden] {
  display: none;
}
.c-connector__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  align-items: flex-start;
}
.c-connector__heading {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.c-connector__name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.c-connector__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 700;
}
.c-connector__meta {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
}
.c-connector__state {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 0.125rem 0.5rem;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  white-space: nowrap;
  /* Ambre : connecteur ajouté sans identifiants, à compléter (arbitrage du 22/10). */
}
.c-connector__state--ok {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.c-connector__state--off {
  background-color: var(--color-soft);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-ink);
}
.c-connector__state--warn {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
.c-connector__notice {
  border-radius: 0.625rem;
  background-color: var(--color-warning-bg);
  padding: 0.5rem 0.75rem;
  color: var(--color-warning);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.c-connector__tool-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
}
.c-connector__check-message {
  margin: 0;
  color: var(--acseo-coral-strong);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-connector__check-message[hidden] {
  display: none;
}
.c-connector__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}
.c-connector__block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-top: 1px solid var(--color-line);
  padding-top: 0.875rem;
  min-width: 0;
}
.c-connector__block-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-connector__block-title small {
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.c-connector__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}
.c-connector__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  align-items: start;
}
@media screen and (width < 51.25rem), screen and (height < 31.25rem) {
  .c-connector__grid {
    grid-template-columns: 1fr;
  }
}
.c-connector__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.c-connector__label {
  padding: 0;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-connector__input {
  border: 1px solid #cfdbe4;
  border-radius: 0.625rem;
  background-color: #fff;
  padding: 0.4375rem 0.75rem;
  width: 100%;
  min-width: 0;
  height: 2.375rem;
  color: var(--acseo-navy);
  font-family: inherit;
  font-size: var(--font-size-sm);
}
.c-connector__input::placeholder {
  color: var(--color-mute);
}
.c-connector__input:focus {
  outline: 0.1875rem solid rgba(0, 125, 161, 0.25);
  outline-offset: 0;
  border-color: var(--acseo-blue-strong);
}
.c-connector__input[disabled] {
  background-color: var(--color-soft);
  cursor: not-allowed;
}
.c-connector__hint {
  margin: 0;
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.c-connector__check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  font-size: var(--font-size-sm);
}
.c-connector__check input[type=checkbox] {
  flex-shrink: 0;
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--acseo-navy);
}
.c-connector__choices {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.c-connector__choices > legend {
  margin-bottom: 0.25rem;
}
.c-connector__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: flex-end;
  align-items: center;
}
.c-connector__foot > .c-connector__hint,
.c-connector__foot > .c-connector__check {
  flex: 1 1 16rem;
  margin-right: auto;
}
.c-connector__button {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--acseo-navy);
  border-radius: var(--radius-pill);
  background-color: var(--acseo-navy);
  padding: 0.375rem 0.875rem;
  min-height: 2rem;
  color: #fff;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.c-connector__button:hover {
  border-color: var(--acseo-blue-strong);
  background-color: var(--acseo-blue-strong);
}
.c-connector__button--secondary {
  border-color: var(--color-line);
  background-color: #fff;
  color: var(--acseo-navy);
}
.c-connector__button--secondary:hover {
  border-color: var(--acseo-divider);
  background-color: var(--color-soft);
}
.c-connector__button[hidden] {
  display: none;
}
.c-connector__button .c-icon {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
}
.c-connector__button[disabled], .c-connector__button[disabled]:hover {
  border-color: var(--color-line);
  background-color: var(--color-soft);
  color: var(--color-mute);
  cursor: not-allowed;
}
.c-connector__button:focus-visible {
  outline: 0.1875rem solid rgba(0, 125, 161, 0.35);
  outline-offset: 0.0625rem;
}
.c-connector__link-danger {
  border: 0;
  background: none;
  padding: 0.25rem 0;
  color: var(--acseo-coral-strong);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.1875rem;
  cursor: pointer;
}
.c-connector__link-danger:hover, .c-connector__link-danger:focus-visible {
  text-decoration-color: currentcolor;
}
.c-connector__link-danger:focus-visible {
  outline: 0.1875rem solid rgba(196, 54, 63, 0.3);
  outline-offset: 0.125rem;
  border-radius: var(--radius-xs);
}
.c-connector__tool.is-off .c-connector__field, .c-connector__tool.is-off .c-connector__check {
  opacity: 0.55;
}

/* Page Consommation (maquette BoConsommation) : période, tuiles, coût par jour, Tâches les plus chères, projets.
   Tailles des barres par pas de 2 % (classes générées) : pas de style en ligne. */
.c-usage {
  /* Coût par jour : barres empilées, Tobi en bas (navy), développement au-dessus (teal) */
  /* Tâches qui coûtent le plus */
  /* Pastilles d'état : toujours un texte ; le corail est réservé à « Dépassé » */
  /* Volets repliables : Voir tout, Par personne / Par jour, Détail technique */
}
.c-usage__period {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.c-usage__range {
  margin-right: auto;
  color: var(--color-mute);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.c-usage__presets {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background-color: #fff;
  overflow: hidden;
}
.c-usage__preset {
  display: inline-flex;
  align-items: center;
  border-right: 1px solid var(--color-line);
  padding: 0.375rem 0.6875rem;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.c-usage__preset:last-child {
  border-right: 0;
}
.c-usage__preset:hover, .c-usage__preset.is-active {
  background-color: var(--acseo-ice);
  color: var(--acseo-navy);
}
.c-usage__preset:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.c-usage__custom > summary {
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background-color: #fff;
  list-style: none;
}
.c-usage__custom > summary::-webkit-details-marker {
  display: none;
}
.c-usage__custom[open] {
  flex-basis: 100%;
}
.c-usage__custom[open] > summary {
  display: none;
}
.c-usage__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
}
@media screen and (width < 64rem) {
  .c-usage__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (width < 30rem) {
  .c-usage__tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}
.c-usage__tile {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border: 1px solid var(--color-line);
  border-radius: 0.75rem;
  background-color: #fff;
  padding: 0.8125rem 1rem;
}
.c-usage__tile-label {
  display: flex;
  gap: 0.4375rem;
  align-items: center;
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.c-usage__tile-value {
  color: var(--acseo-navy);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.c-usage__tile-context, .c-usage__delta, .c-usage__foot, .c-usage__muted {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 500;
}
.c-usage__key {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: var(--acseo-navy);
  width: 0.5625rem;
  height: 0.5625rem;
}
.c-usage__key--dev {
  background-color: var(--acseo-teal);
}
.c-usage__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}
@media screen and (width < 64rem) {
  .c-usage__row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.c-usage__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  background-color: #fff;
  padding: 0.875rem 1.125rem;
  min-width: 0;
}
.c-usage__card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
  align-items: center;
}
.c-usage__card-title {
  margin-right: auto;
  font-size: var(--font-size-md);
  font-weight: 700;
}
.c-usage__legend {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  color: var(--color-ink);
  font-size: var(--font-size-2xs);
  font-weight: 500;
}
.c-usage__plot {
  display: flex;
  gap: 0.5rem;
  height: 11rem;
}
.c-usage__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  text-align: right;
  white-space: nowrap;
}
.c-usage__bars {
  display: flex;
  flex: 1;
  gap: 2px;
  align-items: stretch;
  margin: 0;
  border-bottom: 1px solid var(--color-line);
  padding: 0;
  min-width: 0;
  list-style: none;
}
.c-usage__bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column-reverse;
  min-width: 1px;
}
.c-usage__seg {
  display: block;
  flex-shrink: 0;
  background-color: var(--acseo-navy);
}
.c-usage__seg--dev {
  border-radius: 2px 2px 0 0;
  background-color: var(--acseo-teal);
}
.c-usage__seg--h0 {
  height: 0%;
}
.c-usage__seg--h1 {
  height: 2%;
}
.c-usage__seg--h2 {
  height: 4%;
}
.c-usage__seg--h3 {
  height: 6%;
}
.c-usage__seg--h4 {
  height: 8%;
}
.c-usage__seg--h5 {
  height: 10%;
}
.c-usage__seg--h6 {
  height: 12%;
}
.c-usage__seg--h7 {
  height: 14%;
}
.c-usage__seg--h8 {
  height: 16%;
}
.c-usage__seg--h9 {
  height: 18%;
}
.c-usage__seg--h10 {
  height: 20%;
}
.c-usage__seg--h11 {
  height: 22%;
}
.c-usage__seg--h12 {
  height: 24%;
}
.c-usage__seg--h13 {
  height: 26%;
}
.c-usage__seg--h14 {
  height: 28%;
}
.c-usage__seg--h15 {
  height: 30%;
}
.c-usage__seg--h16 {
  height: 32%;
}
.c-usage__seg--h17 {
  height: 34%;
}
.c-usage__seg--h18 {
  height: 36%;
}
.c-usage__seg--h19 {
  height: 38%;
}
.c-usage__seg--h20 {
  height: 40%;
}
.c-usage__seg--h21 {
  height: 42%;
}
.c-usage__seg--h22 {
  height: 44%;
}
.c-usage__seg--h23 {
  height: 46%;
}
.c-usage__seg--h24 {
  height: 48%;
}
.c-usage__seg--h25 {
  height: 50%;
}
.c-usage__seg--h26 {
  height: 52%;
}
.c-usage__seg--h27 {
  height: 54%;
}
.c-usage__seg--h28 {
  height: 56%;
}
.c-usage__seg--h29 {
  height: 58%;
}
.c-usage__seg--h30 {
  height: 60%;
}
.c-usage__seg--h31 {
  height: 62%;
}
.c-usage__seg--h32 {
  height: 64%;
}
.c-usage__seg--h33 {
  height: 66%;
}
.c-usage__seg--h34 {
  height: 68%;
}
.c-usage__seg--h35 {
  height: 70%;
}
.c-usage__seg--h36 {
  height: 72%;
}
.c-usage__seg--h37 {
  height: 74%;
}
.c-usage__seg--h38 {
  height: 76%;
}
.c-usage__seg--h39 {
  height: 78%;
}
.c-usage__seg--h40 {
  height: 80%;
}
.c-usage__seg--h41 {
  height: 82%;
}
.c-usage__seg--h42 {
  height: 84%;
}
.c-usage__seg--h43 {
  height: 86%;
}
.c-usage__seg--h44 {
  height: 88%;
}
.c-usage__seg--h45 {
  height: 90%;
}
.c-usage__seg--h46 {
  height: 92%;
}
.c-usage__seg--h47 {
  height: 94%;
}
.c-usage__seg--h48 {
  height: 96%;
}
.c-usage__seg--h49 {
  height: 98%;
}
.c-usage__seg--h50 {
  height: 100%;
}
.c-usage__dates {
  display: flex;
  justify-content: space-between;
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
}
.c-usage__tasks {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-usage__task {
  border-bottom: 1px solid var(--color-line-soft);
  padding: 0.375rem 0;
}
.c-usage__task:last-child {
  border-bottom: 0;
}
.c-usage__task-head, .c-usage__task-meta {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}
.c-usage__task-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-usage__task-title:hover {
  text-decoration: underline;
}
.c-usage__task-cost {
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.c-usage__task-meta {
  margin-top: 0.125rem;
}
.c-usage__task-number {
  color: var(--color-mute);
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: var(--font-size-2xs);
}
.c-usage__task-share {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  white-space: nowrap;
}
.c-usage__meter {
  display: block;
  flex: 1;
  border-radius: 3px;
  background-color: var(--color-line-soft);
  min-width: 3rem;
  height: 0.3125rem;
  overflow: hidden;
}
.c-usage__fill {
  display: block;
  border-radius: 3px;
  background-color: var(--acseo-blue-strong);
  height: 100%;
}
.c-usage__fill--w0 {
  width: 0%;
}
.c-usage__fill--w1 {
  width: 2%;
}
.c-usage__fill--w2 {
  width: 4%;
}
.c-usage__fill--w3 {
  width: 6%;
}
.c-usage__fill--w4 {
  width: 8%;
}
.c-usage__fill--w5 {
  width: 10%;
}
.c-usage__fill--w6 {
  width: 12%;
}
.c-usage__fill--w7 {
  width: 14%;
}
.c-usage__fill--w8 {
  width: 16%;
}
.c-usage__fill--w9 {
  width: 18%;
}
.c-usage__fill--w10 {
  width: 20%;
}
.c-usage__fill--w11 {
  width: 22%;
}
.c-usage__fill--w12 {
  width: 24%;
}
.c-usage__fill--w13 {
  width: 26%;
}
.c-usage__fill--w14 {
  width: 28%;
}
.c-usage__fill--w15 {
  width: 30%;
}
.c-usage__fill--w16 {
  width: 32%;
}
.c-usage__fill--w17 {
  width: 34%;
}
.c-usage__fill--w18 {
  width: 36%;
}
.c-usage__fill--w19 {
  width: 38%;
}
.c-usage__fill--w20 {
  width: 40%;
}
.c-usage__fill--w21 {
  width: 42%;
}
.c-usage__fill--w22 {
  width: 44%;
}
.c-usage__fill--w23 {
  width: 46%;
}
.c-usage__fill--w24 {
  width: 48%;
}
.c-usage__fill--w25 {
  width: 50%;
}
.c-usage__fill--w26 {
  width: 52%;
}
.c-usage__fill--w27 {
  width: 54%;
}
.c-usage__fill--w28 {
  width: 56%;
}
.c-usage__fill--w29 {
  width: 58%;
}
.c-usage__fill--w30 {
  width: 60%;
}
.c-usage__fill--w31 {
  width: 62%;
}
.c-usage__fill--w32 {
  width: 64%;
}
.c-usage__fill--w33 {
  width: 66%;
}
.c-usage__fill--w34 {
  width: 68%;
}
.c-usage__fill--w35 {
  width: 70%;
}
.c-usage__fill--w36 {
  width: 72%;
}
.c-usage__fill--w37 {
  width: 74%;
}
.c-usage__fill--w38 {
  width: 76%;
}
.c-usage__fill--w39 {
  width: 78%;
}
.c-usage__fill--w40 {
  width: 80%;
}
.c-usage__fill--w41 {
  width: 82%;
}
.c-usage__fill--w42 {
  width: 84%;
}
.c-usage__fill--w43 {
  width: 86%;
}
.c-usage__fill--w44 {
  width: 88%;
}
.c-usage__fill--w45 {
  width: 90%;
}
.c-usage__fill--w46 {
  width: 92%;
}
.c-usage__fill--w47 {
  width: 94%;
}
.c-usage__fill--w48 {
  width: 96%;
}
.c-usage__fill--w49 {
  width: 98%;
}
.c-usage__fill--w50 {
  width: 100%;
}
.c-usage__budget {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.c-usage__budget .c-usage__meter {
  flex: 0 0 5rem;
}
.c-usage__pill {
  display: inline-block;
  border-radius: var(--radius-pill);
  background-color: var(--color-success-bg);
  padding: 0.125rem 0.5rem;
  color: var(--color-success);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  white-space: nowrap;
}
.c-usage__pill--soon {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
.c-usage__pill--over {
  background-color: var(--acseo-pink);
  color: var(--acseo-coral-strong);
}
.c-usage__project {
  display: flex;
  flex-direction: column;
}
.c-usage__client {
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 500;
}
.c-usage__total th, .c-usage__total td {
  background-color: var(--color-soft);
  font-weight: 600;
}
.c-usage__details {
  border: 1px solid var(--color-line);
  border-radius: 0.75rem;
  background-color: #fff;
  padding: 0 1rem;
}
.c-usage__details[open] {
  padding-bottom: 0.75rem;
}
.c-usage__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.75rem 0;
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
}
.c-usage__count {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background-color: var(--color-soft);
  padding: 0 0.375rem;
  color: var(--color-ink);
  font-size: var(--font-size-2xs);
}
.c-usage__breakdowns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/*
 * « Détail d'un tour » (30/10, admin/turns/show.html.twig) : l'équivalent lisible de tobi:turn:show. Fiches admin v5
 * (c-record__section par tour), compact ; les sorties d'outils sont repliées (details) et défilent dans leur bloc.
 */
.c-turns__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: var(--font-size-sm);
}
.c-turns__facts dt {
  color: var(--color-text-muted);
}
.c-turns__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.c-turns__last {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  font-size: var(--font-size-sm);
}
.c-turns__last .c-admin__input {
  width: 5rem;
}
.c-turns__message {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-line-soft);
}
.c-turns__message:first-of-type {
  border-top: 0;
}
.c-turns__who, .c-turns__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.c-turns__text {
  margin: 0.25rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.c-turns__status--error {
  color: var(--color-danger);
}
.c-turns__tools {
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}
.c-turns__tool summary {
  cursor: pointer;
  overflow-wrap: anywhere;
}
.c-turns__params {
  color: var(--color-text-muted);
}
.c-turns__result {
  margin: 0.25rem 0 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 0.375rem;
  background-color: var(--color-surface-soft);
  padding: 0.5rem;
  max-height: 16rem;
  overflow: auto;
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.c-turns__calls {
  margin-top: 0.5rem;
  overflow-x: auto;
}

/*
 * Fil enchaîné (05/11, admin/conversations) : l'Échange puis les Tâches nées de lui dans un même fil. Une section par
 * conversation (c-record__section), la Tâche ouverte par un séparateur ; dans la liste, la Tâche décalée sous son
 * Échange et des repères « suite » quand l'autre bout n'est pas sur la page. Compact, comme les fiches admin v5.
 */
.c-admin-chain {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 56rem;
  /* Séparateur « Tâche #… créée » : un filet au-dessus de la section, comme le relais du fil client. */
}
.c-admin-chain__section.is-current {
  border-color: var(--acseo-navy);
}
.c-admin-chain__section--task {
  position: relative;
  margin-top: 0.75rem;
}
.c-admin-chain__section--task::before {
  position: absolute;
  top: -1.125rem;
  right: 0;
  left: 0;
  border-top: 1px dashed var(--color-border-strong);
  content: "";
}
.c-admin-chain__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.c-admin-chain__links {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.c-admin-chain__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: var(--font-size-sm);
}
.c-admin-chain__facts dt {
  color: var(--color-text-muted);
}
.c-admin-chain__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.c-admin-chain__kind {
  margin-right: 0.375rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-admin-chain__marker {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.c-admin-chain__row--nested > td:first-child {
  padding-left: 2rem;
}

/* Tobi project configuration checks (back-office, v5 compact): readable status, never colour alone (icon + word). */
/* Points bloquants, juste sous la phrase qui les compte : liste teintée corail clair, sans cadre (vraies erreurs). */
.c-check-blocking {
  /* 3. Box model */
  margin: 0 0 0.75rem;
  border-radius: var(--radius-sm);
  /* 5. Visual */
  background-color: var(--color-danger-bg);
  padding: 0.5rem 0.75rem 0.5rem 1.75rem;
  /* 6. Typography */
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.c-check-blocking li::marker {
  /* 5. Visual */
  color: var(--acseo-coral-strong);
}

/* Titre d'un groupe (Redmine, GitLab…) : petite étiquette de section, comme les têtes de la fiche. */
.c-check-group {
  /* 3. Box model */
  margin: 0 0 0.875rem;
}
.c-check-group__title {
  /* 3. Box model */
  margin: 0 0 0.375rem;
  /* 6. Typography */
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-check-list {
  /* 2. Display & Flex */
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* 3. Box model */
  margin: 0;
  padding: 0;
  /* 5. Visual */
  list-style: none;
}

.c-check-ok {
  /* 3. Box model */
  margin-top: 0.375rem;
}
.c-check-ok summary {
  /* 3. Box model */
  margin-bottom: 0.375rem;
  /* 6. Typography */
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  /* 5. Visual */
  cursor: pointer;
}

/* Un contrôle : carte blanche à filet fin, état en pastille pastel. */
.c-check {
  /* 3. Box model */
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  /* 5. Visual */
  background-color: #fff;
  padding: 0.5rem 0.75rem;
  /* « À faire dans Redmine » : encart clair en retrait. */
}
.c-check__head, .c-check__detail {
  /* 3. Box model */
  margin: 0.125rem 0;
}
.c-check__head {
  /* 2. Display & Flex */
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
}
.c-check__title {
  /* 6. Typography */
  color: var(--acseo-navy);
  font-size: var(--font-size-sm);
}
.c-check__detail {
  /* 6. Typography */
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-check__todo {
  /* 3. Box model */
  margin: 0.375rem 0;
  border-radius: var(--radius-sm);
  /* 5. Visual */
  background-color: var(--color-soft);
  padding: 0.375rem 0.625rem;
  /* 6. Typography */
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-check__link {
  /* 5. Visual */
  color: var(--color-text-link);
}
.c-check > .c-admin__button {
  /* 3. Box model */
  margin-top: 0.25rem;
}

/* Pastille d'état d'un contrôle (et avertissement d'une génération) : fond pastel, icône + mot. */
.c-check-state {
  /* 2. Display & Flex */
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  /* 3. Box model */
  border-radius: var(--radius-pill);
  /* 5. Visual */
  background-color: var(--color-soft);
  padding: 0.0625rem 0.5rem;
  /* 6. Typography */
  color: var(--color-mute);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.c-check-state--ok {
  /* 5. Visual */
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.c-check-state--warn {
  /* 5. Visual */
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
.c-check-state--error {
  /* 5. Visual */
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/* « Activer Tobi » : confirmation juste sous la case quand la vérification n'est pas au vert (avant l'envoi). */
.c-activation-confirm {
  /* 2. Display & Flex */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* 3. Box model */
  margin-top: 0.5rem;
  border-left-color: var(--color-warning);
  /* Ici l'ambre est le signal de la confirmation : liste ambre clair, sans cadre, retrait normal, 8 px avant les
     boutons (en plus de l'écart du bloc). */
  /* Case « Activer quand même » : un peu d'air au-dessus et autour du libellé. */
}
.c-activation-confirm__title {
  /* 3. Box model */
  margin: 0;
  /* 6. Typography */
  font-weight: 700;
}
.c-activation-confirm .c-check-blocking {
  /* 3. Box model */
  margin: 0 0 0.5rem;
  /* 5. Visual */
  background-color: var(--color-warning-bg);
}
.c-activation-confirm .c-check-blocking li::marker {
  /* 5. Visual */
  color: var(--color-warning);
}
.c-activation-confirm .c-check-blocking:empty {
  /* 2. Display & Flex */
  display: none;
}
.c-activation-confirm .c-admin__field--check {
  /* 3. Box model */
  margin-top: 0.25rem;
  padding: 0.25rem 0;
}
.c-activation-confirm > .c-admin__hint {
  /* 3. Box model */
  margin: 0;
  /* 6. Typography */
  font-size: var(--font-size-xs);
}

/* Mon compte : cartes empilées, lecture simple sur mobile comme sur grand écran */
.c-account-main {
  /* 1. Layout */
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* 4. Dimensions */
  width: 100%;
  min-width: 0;
}
.c-account-main__content {
  /* 1. Layout */
  flex: 1 1 auto;
  /* 3. Box model */
  margin: 0 auto;
  padding: 32px var(--ds-spacing-margin-mobile) 24px;
  /* 4. Dimensions */
  width: 100%;
  max-width: var(--page-width-form, 47.5rem);
}
@media screen and (width >= 768px) {
  .c-account-main__content {
    /* 3. Box model */
    padding: 48px var(--ds-spacing-gutter) 24px;
  }
}

.c-account-header {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 3. Box model */
  margin-bottom: 24px;
}
.c-account-header__title {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--ds-color-on-surface);
  font-family: var(--ds-font-headline);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.c-account-header__subtitle {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--color-text-muted);
}

.c-account-stack {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.c-account-card {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 3. Box model */
  border-radius: var(--radius-xl);
  background-color: var(--acseo-ice);
  padding: clamp(1rem, 3vw, 1.5rem);
  /* 4. Dimensions */
  min-width: 0;
}
.c-account-card--locked {
  /* 3. Box model */
  border-style: dashed;
  background-color: var(--acseo-ice);
}
.c-account-card__heading {
  /* 1. Layout */
  display: flex;
  gap: 12px;
  align-items: center;
}
.c-account-card__icon {
  /* 5. Typo */
  color: var(--color-text-link);
}
.c-account-card__title {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  font-family: var(--ds-font-headline);
  font-size: 1.1875rem;
  font-weight: 700;
}
.c-account-card__text {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.c-account-inline-icon {
  /* 1. Layout */
  margin-right: 4px;
  /* 4. Dimensions */
  width: 1.125rem;
  height: 1.125rem;
}

/* Champs de formulaire */
.c-account-form,
.c-account-password,
.c-account-followed {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 4. Dimensions */
  max-width: 32rem;
}
.c-account-form ul,
.c-account-password ul,
.c-account-followed ul {
  /* 3. Box model */
  margin: 4px 0 0;
  padding: 0;
  /* 5. Typo */
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  font-weight: 600;
  list-style: none;
}

.c-account-field {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c-account-field[hidden] {
  /* 1. Layout */
  display: none;
}
.c-account-field__label {
  /* 5. Typo */
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-account-field__help {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-account-field__input {
  /* 3. Box model */
  border: 2px solid var(--acseo-field-border);
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 0.75rem 1rem;
  /* 4. Dimensions */
  width: 100%;
  min-height: var(--touch-target);
  /* 5. Typo */
  color: var(--acseo-navy);
}
.c-account-field__input:focus {
  /* 3. Box model */
  outline: 3px solid rgba(0, 125, 161, 0.35);
  outline-offset: 1px;
  border-color: var(--acseo-blue-strong);
}

/* Listes d'informations (nom / valeur) */
.c-account-list {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.c-account-list div {
  /* 1. Layout */
  display: grid;
  gap: 2px 16px;
}
@media screen and (width >= 600px) {
  .c-account-list div {
    /* 1. Layout */
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}
.c-account-list dt {
  /* 5. Typo */
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.c-account-list dd {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  overflow-wrap: anywhere;
}
.c-account-list--locked dd {
  /* 5. Typo */
  color: var(--color-text-muted);
}

/* Section repliable (mot de passe) */
.c-account-fold {
  /* 3. Box model */
  border: 1px solid var(--acseo-divider);
  border-radius: var(--radius-lg);
  padding: 0 16px;
}
.c-account-fold[open] {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 3. Box model */
  padding-bottom: 16px;
}
.c-account-fold__summary {
  /* 1. Layout */
  display: flex;
  align-items: center;
  /* 4. Dimensions */
  min-height: var(--touch-target);
  /* 5. Typo */
  font-weight: 700;
  cursor: pointer;
}

.c-account-link {
  /* 5. Typo */
  color: var(--color-text-link);
  font-weight: 600;
  text-decoration: underline;
}

/* Messages de retour (succès, avertissement) */
.c-account-messages:not(:empty) {
  /* 3. Box model */
  margin-bottom: 16px;
}

.c-account-flash {
  /* 3. Box model */
  margin: 0 0 8px;
  border-left: 4px solid var(--acseo-blue-strong);
  border-radius: 0.5rem;
  background-color: var(--acseo-ice);
  padding: 12px 16px;
  /* 5. Typo */
  font-weight: 600;
}
.c-account-flash--success {
  /* 3. Box model */
  border-left-color: var(--color-success);
  background-color: var(--color-success-bg);
}
.c-account-flash--warning {
  /* 3. Box model */
  border-left-color: var(--acseo-coral-strong);
  background-color: var(--acseo-pink);
}

/* Projets suivis */
.c-account-followed__item {
  /* 1. Layout */
  display: flex;
  gap: 8px;
  align-items: center;
  /* 4. Dimensions */
  min-height: var(--touch-target);
  /* 5. Typo */
  font-size: var(--font-size-base);
}

.c-account-logout {
  /* 1. Layout */
  display: flex;
  justify-content: center;
  /* 3. Box model */
  padding: 8px var(--ds-spacing-margin-mobile) 96px;
}

/* Prénom / Nom côte à côte (une colonne sur mobile) */
.c-account-grid {
  /* 1. Layout */
  display: grid;
  gap: 16px;
}
@media screen and (width >= 600px) {
  .c-account-grid {
    /* 1. Layout */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ligne blanche de la carte Connexion : texte à gauche, pastille ou bouton à droite */
.c-account-row {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: space-between;
  align-items: center;
  /* 3. Box model */
  border-radius: var(--radius-lg);
  background-color: #fff;
  padding: 14px 16px;
  /* Petit écran : le texte sur toute la largeur, la pastille ou le bouton (pleine largeur) toujours dessous. */
}
.c-account-row__text {
  /* 1. Layout */
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: 2px;
  /* 4. Dimensions */
  min-width: 0;
}
.c-account-row__title, .c-account-row__help {
  /* 3. Box model */
  margin: 0;
}
.c-account-row__title {
  /* 5. Typo */
  font-size: var(--font-size-base);
  font-weight: 700;
}
.c-account-row__help {
  /* 5. Typo */
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
@media screen and (width < 600px) {
  .c-account-row__text {
    /* 1. Layout */
    flex-basis: 100%;
  }
  .c-account-row .c-button {
    /* 4. Dimensions */
    width: 100%;
  }
}

/* Pastille d'état : toujours un texte */
.c-account-badge {
  /* 3. Box model */
  border-radius: var(--radius-pill);
  background-color: var(--acseo-pink);
  padding: 4px 12px;
  /* 5. Typo */
  color: var(--acseo-navy);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}
.c-account-badge--on {
  /* 3. Box model */
  background-color: var(--color-success-bg);
  /* 5. Typo */
  color: var(--color-success);
}

/* « Signaler une anomalie » (lot « Support Tobi ») : formulaire, confirmation, lien discret sur une réponse de Tobi. */
.c-support {
  /* 4. Dimensions */
  max-width: 40rem;
}
.c-support__form {
  /* 1. Layout */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-support__text {
  /* 4. Dimensions */
  min-height: 8rem;
  /* 7. Other */
  resize: vertical;
}
.c-support__context {
  /* 3. Box model */
  margin: 0;
  /* 5. Typo */
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.c-support__actions {
  /* 1. Layout */
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}
.c-support__relaunch {
  /* 3. Box model */
  margin-top: 6px;
}

/* Sur une réponse de Tobi : un petit lien gris, montré au survol ou au focus de la ligne, toujours là sur un écran tactile. */
.c-tobi-chat__report {
  /* 1. Layout */
  align-self: flex-start;
  /* 2. Visibility */
  opacity: 0;
  /* 3. Box model */
  margin: 4px 0 0 2px;
  /* 5. Typo */
  color: var(--color-mute);
  font-size: var(--font-size-xs);
  text-decoration: underline;
  /* 7. Other */
  transition: opacity 0.15s ease;
}
.c-tobi-chat__report:focus-visible, .c-tobi-chat__row:hover .c-tobi-chat__report, .c-tobi-chat__row:focus-within .c-tobi-chat__report {
  /* 2. Visibility */
  opacity: 1;
}
@media (hover: none) {
  .c-tobi-chat__report {
    /* 2. Visibility */
    opacity: 0.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-tobi-chat__report {
    /* 7. Other */
    transition: none;
  }
}

.c-tobi-run {
  /* 1. Layout */
  display: flex;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  /* 2. Visibility */
  z-index: 9999;
  /* 3. Box model */
  border-top: 3px solid var(--acseo-coral);
  background-color: var(--acseo-navy);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  box-shadow: 0 -12px 32px rgba(0, 34, 80, 0.25);
  /* 6. Misc */
  animation: tobi-run-in 0.25s ease-out;
}
.c-tobi-run__board {
  /* 3. Box model */
  margin: 0;
  /* 4. Dimensions */
  max-width: 100%;
  overflow: hidden;
  /* 5. Typo */
  color: #ffe6a8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.5rem, 1.45vw, 1.125rem);
  line-height: 1.2;
  white-space: pre;
  cursor: pointer;
  user-select: none;
}
.c-tobi-run__help {
  /* 3. Box model */
  margin: var(--space-xs) 0 0;
  /* 5. Typo */
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--font-size-xs);
  text-align: center;
}
.c-tobi-run__close {
  /* 1. Layout */
  position: absolute;
  top: var(--space-xs);
  right: var(--space-sm);
  /* 3. Box model */
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 0 var(--space-xs);
  /* 4. Dimensions */
  min-width: 2.75rem;
  min-height: 2.75rem;
  /* 5. Typo */
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.c-tobi-run__close:focus-visible {
  /* 3. Box model */
  outline: 3px solid var(--acseo-coral);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .c-tobi-run {
    /* 6. Misc */
    animation: none;
  }
}

@keyframes tobi-run-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* Pages d'erreur 404 / 403 dans le gabarit de l'application (connecté) ou public : logo, code, titre, retour. */
.c-error-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
  width: 100%;
  max-width: 36rem;
}
.c-error-page__code {
  margin: 0;
  border-radius: var(--radius-pill);
  background-color: var(--acseo-pink);
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.c-error-page__title {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.2;
}
.c-error-page__text {
  margin: 0;
  color: var(--color-text-muted);
}
.c-error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
}

.u-sr-only {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  margin: -0.0625rem;
  border: 0;
  padding: 0;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  white-space: nowrap;
}

.u-visually-hidden {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/*# sourceMappingURL=app-7d1043473d.output.css.map */