/* CERFrance — base de recette U01-R3.
   Valeurs primitives observées sur la référence régionale publique (DESIGN_REFERENCE_R1) ;
   les rôles sémantiques ci-dessous sont provisoires et seront remplacés par l'export du système
   natif Claude Design. Aucune certification d'accessibilité n'est revendiquée. */
:root {
  --cer-gray-900: #2f2f33;
  --cer-gray-700: #4b4b4e;
  --cer-gray-500: #6b6b70;
  --cer-gray-300: #d9d9dc;
  --cer-gray-100: #f6f6f6;
  --cer-white: #ffffff;
  --cer-yellow: #f8b334;
  --cer-orange: #e8511e;
  --cer-teal: #00a096;

  --color-bg: var(--cer-gray-100);
  --color-surface: var(--cer-white);
  --color-surface-muted: #fafafa;
  --color-text: var(--cer-gray-700);
  --color-text-strong: var(--cer-gray-900);
  --color-text-muted: #5c5c61;
  --color-border: var(--cer-gray-300);
  --color-action: var(--cer-yellow);
  --color-action-hover: #f4a512;
  --color-action-text: var(--cer-gray-900);
  --color-success: #00756c;
  --color-success-bg: #e3f5f3;
  --color-warning: #8a5a00;
  --color-warning-bg: #fff4dc;
  --color-error: #b23c12;
  --color-error-bg: #fdece6;
  --color-info-bg: #eef1f6;
  --color-focus: #1f5fbf;
  --color-accent-bar: var(--cer-yellow);

  --font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-1: 6px;
  --radius-2: 12px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  --container: 80rem;
  --gutter: clamp(16px, 3.5vw, 70px);
  --nav-width: 248px;
  --transition: 150ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2, h3, h4 { color: var(--color-text-strong); font-weight: 500; line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--space-3); }
a { color: #1d4f99; text-underline-offset: 2px; }
a:hover { color: #123a73; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: var(--space-3); top: -60px; background: var(--color-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-1); z-index: 10; }
.skip-link:focus { top: var(--space-3); }

/* ---------- structure ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--gutter);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: inset 0 4px 0 var(--color-accent-bar);
}
.brand { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 600; color: var(--color-text-strong); text-decoration: none; }
.brand-mark { font-size: 1.15rem; letter-spacing: 0.02em; }
.brand-sub { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); }
.shell { display: grid; grid-template-columns: 1fr; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
.nav { padding: var(--space-3) var(--gutter); overflow-x: auto; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); }
.nav a {
  display: flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-1);
  color: var(--color-text); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--color-bg); }
.nav a[aria-current="page"] { background: var(--color-warning-bg); color: var(--color-text-strong); box-shadow: inset 3px 0 0 var(--color-action); }
.glyph {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--color-bg); color: var(--color-text-strong); font-size: 0.72rem; font-weight: 600;
}
.main { padding: var(--space-5) var(--gutter) var(--space-7); min-width: 0; }
.main:focus { outline: none; }
@media (min-width: 992px) {
  .shell { grid-template-columns: var(--nav-width) 1fr; }
  .nav { border-bottom: 0; border-right: 1px solid var(--color-border); padding: var(--space-5) var(--space-3); min-height: calc(100vh - 64px); }
  .nav ul { flex-direction: column; }
}

/* ---------- composants ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-head p { margin: 0; color: var(--color-text-muted); max-width: 70ch; }
.page-head .actions-bar { margin-left: auto; }
.grid { display: grid; gap: var(--space-4); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 992px) { .grid-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-1); min-width: 0;
}
.card + .card { margin-top: var(--space-4); }
.grid > .card + .card { margin-top: 0; }
.card h2 { margin-bottom: var(--space-3); }
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-value { font-size: 2rem; font-weight: 500; color: var(--color-text-strong); line-height: 1.1; }
.stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.kv dt { font-weight: 500; color: var(--color-text-strong); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: var(--space-2); } }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.list > li:last-child { border-bottom: 0; }
.item-title { font-weight: 500; color: var(--color-text-strong); }
.muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.statement { font-size: 1.05rem; color: var(--color-text-strong); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
  border-radius: 999px; font-size: 0.8rem; font-weight: 500; border: 1px solid transparent;
  background: var(--color-info-bg); color: var(--color-text-strong); white-space: nowrap;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }
.badge-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0; }

.notice { border-radius: var(--radius-1); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); border-left: 4px solid var(--color-border); background: var(--color-surface); }
.notice-info { border-left-color: #6b85b5; background: var(--color-info-bg); }
.notice-warning { border-left-color: var(--color-action); background: var(--color-warning-bg); }
.notice-error { border-left-color: var(--color-error); background: var(--color-error-bg); color: var(--color-error); }
.notice-success { border-left-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); }
.empty { padding: var(--space-5); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-2); background: var(--color-surface-muted); }
.loading { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); padding: var(--space-4) 0; }
.loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-text); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- formulaires ---------- */
.form { display: grid; gap: var(--space-3); }
.form-row { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .form-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.field { display: grid; gap: var(--space-1); min-width: 0; }
.field label, .field legend { font-weight: 500; color: var(--color-text-strong); font-size: 0.95rem; }
.field .hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.field fieldset { border: 0; padding: 0; margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.checks label { font-weight: 400; display: inline-flex; gap: var(--space-1); align-items: center; }
.input, select.input, textarea.input {
  width: 100%; font: inherit; color: var(--color-text-strong); background: var(--color-surface);
  border: 1px solid #8e8e94; border-radius: var(--radius-1); padding: 10px var(--space-3); min-height: 44px;
}
textarea.input { min-height: 96px; resize: vertical; }
.input:hover { border-color: var(--color-text); }
.input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
.form-status:empty { display: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); }
.toolbar .field { min-width: 180px; flex: 1 1 180px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px var(--space-4); border-radius: var(--radius-1);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: background var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--color-action); color: var(--color-action-text); border-color: #e09a14; }
.btn-primary:hover { background: var(--color-action-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-text-strong); border-color: #8e8e94; }
.btn-secondary:hover { background: var(--color-bg); }
.btn-danger { background: var(--color-surface); color: var(--color-error); border-color: var(--color-error); }
.btn-link { background: none; border: 0; color: #1d4f99; text-decoration: underline; padding: var(--space-1); min-height: auto; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.confirm { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- tableaux ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-1); background: var(--color-surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { background: var(--color-surface-muted); font-weight: 500; color: var(--color-text-strong); }
tr:last-child td { border-bottom: 0; }

/* ---------- dossiers : phases ---------- */
.stages { display: grid; gap: var(--space-3); counter-reset: none; }
@media (min-width: 768px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stage { border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.stage[aria-current="step"] { border-color: var(--color-action); box-shadow: inset 0 4px 0 var(--color-action); }
.stage h3 { font-size: 1rem; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--color-border); }
.timeline li { padding: 0 0 var(--space-3) var(--space-4); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-muted); }

/* ---------- connexion ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5) var(--gutter); }
.login-card { width: min(440px, 100%); }
.login-card .brand { margin-bottom: var(--space-4); }
/* Emplacement décoratif optionnel : l'illustration ChatGPT (lot séparé) pourra être fournie via
   --illustration-hero une fois ajoutée à la liste blanche statique. Sans asset, motif neutre. */
.illustration-slot {
  height: 120px; border-radius: var(--radius-2); margin-bottom: var(--space-4);
  background: var(--illustration-hero, linear-gradient(135deg, var(--color-warning-bg), var(--color-success-bg)));
  background-size: cover; background-position: center;
}

.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.section-gap { margin-top: var(--space-5); }
details > summary { cursor: pointer; font-weight: 500; color: var(--color-text-strong); padding: var(--space-2) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .nav, .btn, form { display: none !important; }
  .shell { display: block; }
}


/* CERFrance — adaptateur compact U04-R4, système de design natif Claude Design.
   Auteur : Thomas Fesq, Formatome.
   Couche ADDITIVE chargée APRÈS styles.css (base U01-R3) : redéfinit les alias --color-* sur les primitives
   natives et habille les classes existantes, sans nouvelle API de composant. Rien ne touche [hidden],
   .visually-hidden, aria-hidden ni les display de structure ; aucun content: textuel, aucun !important.
   Couche NON autonome : dépend de la base (--radius-1, --space-*, règle globale de mouvement réduit).
   R4 : corrections bornées des revues R3 Codex et Claude, voir DELIVERY_U04_R4.json. Aucun test ni rendu joué.
   Provenance : couleurs, typographie, boutons et navigation repris des fichiers natifs reçus en R3 par copie
   partielle (« Copy » de 38 fichiers dans l'éditeur) — ni le ZIP original complet, ni un rendu natif observé.
   Les contrastes cités par le natif sont de la provenance, non certifiés ici. Jetons référencés par le natif
   mais non reçus (rayons, ombres, hauteurs, durées) : valeurs de la base, marquées « non reçu ».
   Police : Work Sans = repli déclaré seulement (aucun @font-face, @import ni CDN) ; Graphik/Canela non chargées.
   Aucune revendication RGAA/RAAM, de fidélité native ni de recette visuelle. */

:root {
  /* ---------- 1. primitives natives (couleurs R1) ---------- */
  /* observé sur le site régional */
  --cf-black: #000000;
  --cf-grey-900: #212121;
  --cf-grey-700: #4B4B4E;
  --cf-grey-400: #A09F9F;
  --cf-grey-300: #D7D6D4;
  --cf-grey-200: #ECECEC;
  --cf-grey-100: #F6F6F6;
  --cf-white: #FFFFFF;
  --cf-yellow-500: #F8B334;
  --cf-yellow-600: #F7A50E;
  --cf-yellow-100: #FDEED5;
  --cf-red-500: #E8511E;
  --cf-red-800: #9C2F16;
  --cf-red-100: #FCD8C3;
  --cf-teal-500: #00A096;
  --cf-teal-800: #03554F;
  --cf-teal-100: #D6ECEB;
  /* dérivé R1 par le natif */
  --cf-grey-600: #67676A;
  --cf-grey-500: #8A898C;
  --cf-yellow-700: #E3960B;
  --cf-amber-900: #6B4A00;
  --cf-teal-900: #023F3A;
  --cf-red-900: #7F2611;

  /* ---------- 2. rôles sémantiques natifs ---------- */
  --surface-page: var(--cf-grey-100);
  --surface-card: var(--cf-white);
  --surface-sunken: var(--cf-grey-200);
  --surface-raised: var(--cf-white);
  --surface-inverse: var(--cf-grey-900);
  --surface-selected: var(--cf-yellow-100);
  --surface-hover: var(--cf-grey-100);

  --text-strong: var(--cf-grey-900);
  --text-body: var(--cf-grey-700);
  --text-muted: var(--cf-grey-600);
  --text-disabled: var(--cf-grey-400);
  --text-inverse: var(--cf-white);
  --text-on-action: var(--cf-grey-900);
  --text-link: var(--cf-teal-800);
  --text-link-hover: var(--cf-teal-900);
  --text-danger: var(--cf-red-800);
  --text-success: var(--cf-teal-800);
  --text-warning: var(--cf-amber-900);

  --border-subtle: var(--cf-grey-200);
  --border-default: var(--cf-grey-300);
  --border-strong: var(--cf-grey-500);
  --border-emphasis: var(--cf-grey-700);
  --border-action: var(--cf-yellow-500);
  --border-danger: var(--cf-red-500);
  --border-success: var(--cf-teal-500);

  /* le jaune reste réservé à l'action principale et à la sélection courante */
  --action-primary-bg: var(--cf-yellow-500);
  --action-primary-bg-hover: var(--cf-yellow-600);
  --action-primary-bg-active: var(--cf-yellow-700);
  --action-primary-fg: var(--cf-grey-900);
  --action-secondary-bg: var(--cf-white);
  --action-secondary-bg-hover: var(--cf-grey-100);
  --action-secondary-border: var(--cf-grey-700);
  --action-secondary-fg: var(--cf-grey-900);
  --action-danger-bg: var(--cf-red-800);
  --action-danger-bg-hover: var(--cf-red-900);
  --action-danger-fg: var(--cf-white);
  --action-disabled-bg: var(--cf-grey-200);
  --action-disabled-fg: var(--cf-grey-400);

  /* statuts : fond / texte / repère graphique — jamais la couleur seule, le libellé reste dans le DOM */
  --status-neutral-bg: var(--cf-grey-200); --status-neutral-fg: var(--cf-grey-700); --status-neutral-mark: var(--cf-grey-500);
  --status-success-bg: var(--cf-teal-100); --status-success-fg: var(--cf-teal-800); --status-success-mark: var(--cf-teal-500);
  --status-danger-bg: var(--cf-red-100); --status-danger-fg: var(--cf-red-800); --status-danger-mark: var(--cf-red-500);
  --status-warning-bg: var(--cf-yellow-100); --status-warning-fg: var(--cf-amber-900); --status-warning-mark: var(--cf-yellow-600);
  --status-provisional-bg: var(--cf-white); --status-provisional-fg: var(--cf-grey-700); --status-provisional-mark: var(--cf-grey-500);

  --focus-ring-color: var(--cf-grey-900);
  --focus-ring-color-inverse: var(--cf-yellow-500);

  /* ---------- 3. typographie native ---------- */
  /* px natifs convertis en rem (base 16px) pour suivre le réglage de taille de texte.
     --font-licensed-sans : point d'extension natif, à définir seulement par un produit titulaire d'une licence. */
  --font-provisional-sans: "Work Sans";
  --font-sans: var(--font-licensed-sans, var(--font-provisional-sans)), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --lh-1: 1;
  --lh-1-2: 1.2;
  --lh-1-35: 1.35;
  --lh-1-5: 1.5;
  --lh-1-6: 1.6;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-h1: var(--fs-30);
  --fs-h2: var(--fs-24);
  --fs-h3: var(--fs-18);
  --type-h1: var(--fw-light) var(--fs-h1)/var(--lh-1-2) var(--font-sans);
  --type-h2: var(--fw-medium) var(--fs-h2)/var(--lh-1-2) var(--font-sans);
  --type-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-1-35) var(--font-sans);
  --type-lead: var(--fw-regular) var(--fs-18)/var(--lh-1-6) var(--font-sans);
  --type-body-strong: var(--fw-semibold) var(--fs-16)/var(--lh-1-5) var(--font-sans);
  --type-ui: var(--fw-regular) var(--fs-14)/var(--lh-1-5) var(--font-sans);
  --type-ui-strong: var(--fw-semibold) var(--fs-14)/var(--lh-1-35) var(--font-sans);
  --type-kpi: var(--fw-light) var(--fs-36)/var(--lh-1) var(--font-sans);

  /* ---------- 4. jetons cités par boutons/navigation natifs, non reçus ---------- */
  /* valeurs de la base conservées ; --shadow-2 est une valeur d'adaptateur, pas une valeur native */
  --control-height: 44px;
  --hit-min: 44px;
  --radius-sm: var(--radius-1);
  --radius-pill: 999px;
  --shadow-2: 0 2px 4px rgba(33, 33, 33, 0.08), 0 8px 24px rgba(33, 33, 33, 0.1);
  --duration-fast: 150ms;
  --ease-standard: ease;
  /* réserve sous la barre collante pour le focus et les ancres ; estimation, non mesurée */
  --topbar-offset: 5.5rem;

  /* ---------- 5. alias de la base → rôles natifs ---------- */
  --color-bg: var(--surface-page);
  --color-surface: var(--surface-card);
  --color-surface-muted: var(--surface-hover);
  --color-text: var(--text-body);
  --color-text-strong: var(--text-strong);
  --color-text-muted: var(--text-muted);
  --color-border: var(--border-default);
  --color-action: var(--action-primary-bg);
  --color-action-hover: var(--action-primary-bg-hover);
  --color-action-text: var(--action-primary-fg);
  --color-success: var(--status-success-fg);
  --color-success-bg: var(--status-success-bg);
  --color-warning: var(--status-warning-fg);
  --color-warning-bg: var(--status-warning-bg);
  --color-error: var(--status-danger-fg);
  --color-error-bg: var(--status-danger-bg);
  --color-info-bg: var(--status-neutral-bg);
  --color-focus: var(--focus-ring-color);
  --color-accent-bar: var(--border-action);
  --text-lg: var(--fs-h2);
  --text-xl: var(--fs-h1);
}
/* paliers natifs observés (.title-*) alignés sur les points de rupture de la base */
@media (max-width: 991.98px) { :root { --fs-h1: 1.75rem; } }
@media (max-width: 767.98px) { :root { --topbar-offset: 8.5rem; } }
@media (max-width: 575.98px) { :root { --fs-h1: 1.5rem; --fs-h2: 1.25rem; } }

/* ---------- 6. base : liens, titres, focus ---------- */
/* le focus clavier et les ancres ne passent pas sous la barre collante */
html { scroll-padding-top: var(--topbar-offset); }
a { color: var(--text-link); text-underline-offset: 3px; }
a:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-body-strong); }
:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
/* les longues chaînes passent à la ligne sans modifier la largeur min-content des tableaux */
.main { overflow-wrap: break-word; }
/* break-word ne réduit pas le min-content : ces enfants de rangées flex rétrécissent et coupent à 320px */
.page-head > *, .btn-group > *, .confirm, .confirm > *, .toolbar > :not(.field), .topbar-meta {
  min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere;
}

.skip-link { top: -200px; background: var(--surface-inverse); font: var(--type-ui-strong); box-shadow: var(--shadow-2); }
.skip-link, .skip-link:hover, .skip-link:focus { color: var(--text-inverse); }
.skip-link:focus { top: var(--space-2); }

/* ---------- 7. structure : barre supérieure et navigation (natif .cf-header / .cf-sidenav) ---------- */
/* le liseré jaune de la base est retiré : le natif réserve le jaune à l'action et à la sélection */
.topbar { background: var(--surface-card); border-bottom-color: var(--border-subtle); box-shadow: none; }
.brand { flex-wrap: wrap; min-width: 0; }
.brand:hover { color: var(--text-strong); }
/* écran bas : barre statique pour ne masquer ni contenu ni focus ; 30rem = 480px au texte par défaut,
   au zoom 200 % seulement si la fenêtre fait ≤ 960px physiques : couverture conditionnelle */
@media (max-height: 30rem) {
  :root { --topbar-offset: 0px; }
  .topbar { position: static; }
}

.nav { background: var(--surface-card); border-color: var(--border-subtle); }
.nav a {
  min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-body); font: var(--fw-medium) var(--fs-14)/1.3 var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nav a:hover { background: var(--surface-hover); color: var(--text-strong); }
.glyph { background: var(--surface-sunken); color: var(--text-strong); }
/* page courante : surface inverse native ; l'état reste exposé par aria-current, pas seulement par la couleur */
.nav a[aria-current="page"] { background: var(--surface-inverse); color: var(--text-inverse); font-weight: var(--fw-semibold); box-shadow: none; }
.nav a[aria-current="page"] .glyph { background: rgba(255, 255, 255, 0.16); color: var(--cf-yellow-500); }
/* colonne latérale : libellés longs à la ligne ; sous 992px, la bande .nav de la base défile, héritée */
@media (min-width: 992px) { .nav a { white-space: normal; } }

/* ---------- 8. surfaces, cartes, indicateurs, contenus ---------- */
/* page = --surface-page, carte = --surface-card (alias), élevée = --surface-raised + --shadow-2 */
.login-card { background: var(--surface-raised); box-shadow: var(--shadow-2); }
.stat-value { font: var(--type-kpi); color: var(--text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-label { font: var(--type-ui); color: var(--text-muted); }
.item-title { font: var(--type-body-strong); color: var(--text-strong); }
.statement { font: var(--type-lead); color: var(--text-strong); }
.kv dt { font-weight: var(--fw-semibold); }
details > summary { font-weight: var(--fw-semibold); }

/* ---------- 9. badges et notices (rôles --status-* natifs) ---------- */
/* le libellé textuel porte le sens ; la couleur et le repère de bord ne font que le doubler */
.badge {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-weight: var(--fw-semibold);
  background: var(--status-neutral-bg); color: var(--status-neutral-fg); border-color: var(--status-neutral-mark);
}
.badge-success { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-mark); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-mark); }
.badge-error { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-mark); }
.badge-outline { background: var(--status-provisional-bg); color: var(--status-provisional-fg); border-color: var(--status-provisional-mark); }

.notice { border-left-color: var(--status-neutral-mark); color: var(--text-body); }
.notice-info { border-left-color: var(--status-neutral-mark); background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.notice-warning { border-left-color: var(--status-warning-mark); background: var(--status-warning-bg); color: var(--status-warning-fg); }
.notice-error { border-left-color: var(--status-danger-mark); background: var(--status-danger-bg); color: var(--status-danger-fg); }
.notice-success { border-left-color: var(--status-success-mark); background: var(--status-success-bg); color: var(--status-success-fg); }
/* lien simple dans une notice : couleur du message, soulignement conservé ; un a.btn garde sa variante (§11) */
.notice a:not(.btn) { color: inherit; }

/* ---------- 10. formulaires ---------- */
.field label, .field legend { font: var(--type-ui-strong); color: var(--text-strong); }
/* options d'un groupe .checks dans un champ : typographie d'option ordinaire, distincte de la légende */
.field .checks label { font: var(--type-ui); }
.field .hint { font: var(--type-ui); color: var(--text-muted); }
/* même spécificité que la base pour couvrir select et textarea ; min-height laissée à la base
   (44px, et 96px pour textarea.input) */
.input, select.input, textarea.input {
  border-color: var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-strong);
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover { border-color: var(--border-emphasis); }
/* erreur : bord doublé en plus de la couleur ; le message d'erreur reste un texte du DOM */
.input[aria-invalid="true"] { border-color: var(--text-danger); box-shadow: 0 0 0 1px var(--text-danger); }
.input:disabled { background: var(--action-disabled-bg); color: var(--text-muted); border-style: dashed; cursor: not-allowed; }
.checks input { accent-color: var(--cf-grey-900); }

/* ---------- 11. boutons (natif .cf-btn) ---------- */
/* pas de nowrap natif ; min-inline-size 0, max 100 % et anywhere : même une chaîne insécable tient à 320px.
   Padding vertical 8px (natif 0 20px) : écart assumé pour un libellé sur plusieurs lignes */
.btn {
  min-height: var(--control-height); min-inline-size: 0; max-inline-size: 100%;
  padding: var(--space-2) 20px; border-radius: var(--radius-sm); white-space: normal; overflow-wrap: anywhere;
  font: var(--fw-semibold) var(--fs-16)/1.2 var(--font-sans); text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
/* texte foncé sur jaune dans tous les états, y compris a.btn et dans une .notice ;
   bord --action-primary-bg-active : continuité avec la base (#e09a14), transparent au natif */
.btn-primary, .btn-primary:hover, .btn-primary:active { color: var(--action-primary-fg); }
.btn-primary { background: var(--action-primary-bg); border-color: var(--action-primary-bg-active); }
.btn-primary:hover { background: var(--action-primary-bg-hover); }
.btn-primary:active { background: var(--action-primary-bg-active); }
.btn-secondary, .btn-secondary:hover, .btn-secondary:active { color: var(--action-secondary-fg); }
.btn-secondary { background: var(--action-secondary-bg); border-color: var(--action-secondary-border); }
.btn-secondary:hover { background: var(--action-secondary-bg-hover); }
.btn-secondary:active { background: var(--surface-sunken); }
.btn-danger, .btn-danger:hover, .btn-danger:active { color: var(--action-danger-fg); }
.btn-danger { background: var(--action-danger-bg); border-color: var(--action-danger-bg); }
.btn-danger:hover, .btn-danger:active { background: var(--action-danger-bg-hover); border-color: var(--action-danger-bg-hover); }
/* lien-bouton : padding 4px de la base, cible 24px au pointeur fin, 44px au grossier (§13) ;
   écart assumé au natif (min-height auto, padding 2px 0) */
.btn-link { min-height: 24px; padding: var(--space-1); color: var(--text-link); font-weight: var(--fw-medium); text-underline-offset: 3px; }
.btn-link:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }
/* désactivé : écart assumé au natif (texte --text-muted au lieu de --text-disabled) pour rester lisible,
   bord pointillé comme repère non coloré ; placé après les survols pour l'emporter */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 1; background: var(--action-disabled-bg); border-color: var(--border-strong); border-style: dashed;
  color: var(--text-muted); cursor: not-allowed;
}
.btn-link:disabled, .btn-link[aria-disabled="true"] { background: none; border: 0; text-decoration: none; }
/* .confirm (confirmation en ligne) hérite des variantes ci-dessus ; aucun modal/dialog dans l'inventaire */

/* ---------- 12. tableaux, phases, connexion ---------- */
/* défilement horizontal hérité de la base : .table-wrap, et la bande .nav sous 992px (§7) ; aucune troncature */
th { font-weight: var(--fw-semibold); }
/* phase courante : bord 2px foncé (repère non coloré) en plus du filet jaune de la base ; aucun texte généré,
   vérification sur la vue réelle requise */
.stage[aria-current="step"] { border-width: 2px; border-color: var(--border-emphasis); }
.login { background: var(--surface-page); }

/* ---------- 13. cibles tactiles ---------- */
@media (pointer: coarse) {
  .btn-link, .checks label, details > summary { min-height: var(--hit-min); }
}

/* ---------- 14. mouvement réduit et couleurs forcées ---------- */
/* aucune animation ajoutée ; la coupure globale vient de la base (dépendance) ; ces règles la doublent */
@media (prefers-reduced-motion: reduce) {
  .btn, .nav a { transition: none; }
  .loading::before { animation: none; }
}
/* les ombres disparaissent en couleurs forcées : états courants et erreurs gardent un repère de bord/contour */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .nav a[aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -2px; text-decoration: underline; }
  .nav a[aria-current="page"]:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .stage[aria-current="step"], .input[aria-invalid="true"] { border-width: 3px; }
  .btn:disabled, .btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
}