/* ==========================================================================
   Fil de Séance — charte.css
   Système de design : toutes les valeurs sont déclarées ici, une seule fois.
   Points de rupture (les media queries ne lisent pas les variables) :
   1100px (tablette large) · 900px (menu compact) · 720px (une colonne)
   ========================================================================== */

:root {
  /* ---- Couleurs par rôle ------------------------------------------------ */
  --fond: #F4EFE6;            /* papier chaud : fond des pages */
  --fond-creux: #EBE4D6;      /* zones en creux, rayures, survols doux */
  --surface: #FFFDFA;         /* cartes, tableaux, panneaux */
  --surface-elevee: #FFFFFF;  /* champs, menus, fenêtres, panneau latéral */
  --texte: #2B2D42;           /* encre : texte principal (11,8:1 sur le fond) */
  --texte-2: #565A72;         /* texte secondaire (5,9:1 sur le fond) */
  --texte-inverse: #FFFDFA;
  --placeholder: #6B6F85;     /* 4,9:1 sur blanc */
  --bordure: #E0D8C8;         /* séparations décoratives */
  --bordure-forte: #B9AE9A;   /* contour des boutons secondaires */
  --bordure-champ: #8A8270;   /* contour des champs (3,7:1) */

  --accent: #1F6F78;          /* sarcelle : actions principales (5,8:1 avec du blanc) */
  --accent-survol: #17575F;
  --accent-actif: #114249;
  --accent-fort: #17575F;     /* texte et icônes accent sur fond clair (8,2:1) */
  --accent-doux: #DDEBEA;
  --accent-halo: rgba(31, 111, 120, 0.28);

  --corail: #E07A5F;          /* accent chaud : décor, repère « maintenant » (jamais seul pour du texte) */
  --corail-fort: #A8402A;     /* texte corail sur fond clair (6,1:1) */
  --corail-doux: #FBE6DF;

  --succes: #1D7143;
  --succes-doux: #DDF1E5;
  --alerte: #8A5300;
  --alerte-vif: #B87400;      /* icônes d'alerte (3,8:1) */
  --alerte-doux: #FBEBC8;
  --danger: #B3261E;
  --danger-survol: #8F1D17;
  --danger-doux: #FBE3E0;
  --info: #3F4A9C;
  --info-doux: #E4E7F7;
  --neutre-doux: #ECE6D9;

  --nav-fond: #2B2D42;
  --nav-texte: #C9CBDA;       /* 8,4:1 sur la barre latérale */
  --focus: #1F6F78;
  --focus-inverse: #FBE6DF;
  --desactive-fond: #E7E1D4;
  --desactive-texte: #6F7186;
  --voile: rgba(43, 45, 66, 0.5);

  /* ---- Espacements ------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Rayons ----------------------------------------------------------- */
  --rayon-s: 6px;
  --rayon-m: 10px;
  --rayon-l: 16px;
  --rayon-rond: 999px;

  /* ---- Ombres ----------------------------------------------------------- */
  --ombre-1: 0 1px 2px rgba(43, 45, 66, 0.08), 0 1px 1px rgba(43, 45, 66, 0.04);
  --ombre-2: 0 4px 14px rgba(43, 45, 66, 0.09), 0 1px 3px rgba(43, 45, 66, 0.06);
  --ombre-3: 0 18px 44px rgba(43, 45, 66, 0.2), 0 4px 12px rgba(43, 45, 66, 0.08);

  /* ---- Animations ------------------------------------------------------- */
  --duree-rapide: 150ms;
  --duree: 200ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Typographie ------------------------------------------------------ */
  --police: system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 px : légendes, badges */
  --fs-sm: 0.9375rem;   /* 15 px : interface dense, boutons, tableaux */
  --fs-base: 1rem;      /* 16 px : texte courant, champs */
  --fs-lg: 1.25rem;     /* 20 px : titres de section */
  --fs-xl: 1.75rem;     /* 28 px : titre de page */
  --fs-2xl: 2.5rem;     /* 40 px : grands titres (connexion, chiffres clés) */
  --lh: 1.5;
  --lh-titre: 1.2;
  --interlettrage-titre: -0.02em;
  --larg-lecture: 70ch;

  /* ---- Gabarits --------------------------------------------------------- */
  --larg-page: 1200px;
  --larg-form: 440px;
  --larg-nav: 256px;
  --larg-panneau: 440px;
  --larg-modale: 520px;
  --h-controle: 44px;       /* zone tactile minimale */
  --icone: 20px;
  --icone-s: 16px;
  --icone-l: 24px;
  --avatar: 40px;
  --avatar-l: 56px;
  --case: 22px;
  --interrupteur-l: 48px;
  --interrupteur-h: 28px;
  --illustration: 128px;
  --bw: 1px;
  --bw-2: 2px;
  --anneau: 3px;
  --hachure: repeating-linear-gradient(135deg, transparent 0 var(--sp-2), var(--fond-creux) var(--sp-2) var(--sp-3));

  /* Colonnes latérales des écrans à deux colonnes */
  --col-lat-s: 320px;
  --col-lat-m: 360px;
  --col-lat-l: 420px;

  --z-nav: 20;
  --z-voile: 40;
  --z-panneau: 50;
  --z-modale: 60;
  --z-notif: 70;
}

@media (max-width: 720px) {
  :root {
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 750;
  line-height: var(--lh-titre);
  letter-spacing: var(--interlettrage-titre);
  text-wrap: balance;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }
h4 { font-size: var(--fs-sm); }
p { margin: 0; max-width: var(--larg-lecture); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
hr { border: 0; border-top: var(--bw) solid var(--bordure); margin: 0; width: 100%; }
a { color: var(--accent-fort); text-underline-offset: 3px; transition: color var(--duree-rapide) var(--courbe); }
a:hover { color: var(--accent-actif); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
mark {
  background: var(--alerte-doux);
  color: var(--texte);
  padding: 0;
  border-radius: 2px;
  box-shadow: none;
}
:focus-visible { outline: var(--anneau) solid var(--focus); outline-offset: var(--bw-2); border-radius: var(--rayon-s); }
.nav :focus-visible, .sur-encre :focus-visible { outline-color: var(--focus-inverse); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-8));
  background: var(--texte); color: var(--texte-inverse);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--rayon-m); z-index: var(--z-notif);
}
.lien-evitement:focus { top: var(--sp-4); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icônes : un seul style, trait arrondi */
.ico {
  width: var(--icone); height: var(--icone); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--s { width: var(--icone-s); height: var(--icone-s); }
.ico--l { width: var(--icone-l); height: var(--icone-l); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Utilitaires typographiques */
.texte-2 { color: var(--texte-2); }
.texte-xs { font-size: var(--fs-xs); }
.texte-sm { font-size: var(--fs-sm); }
.texte-lg { font-size: var(--fs-lg); }
.texte-danger { color: var(--danger); }
.gras { font-weight: 700; }
.num, .tableau, .stat { font-variant-numeric: tabular-nums; }
.barre-texte { text-decoration: line-through; text-decoration-thickness: var(--bw-2); }

/* ==========================================================================
   Marque
   ========================================================================== */
.logo { width: var(--avatar); height: var(--avatar); flex: none; }
.logo__fond { fill: var(--accent); }
.logo__fil { fill: none; stroke: var(--fond); stroke-width: 2.5; stroke-linecap: round; }
.logo__noeud { fill: var(--corail); }
.logo--clair .logo__fond { fill: var(--fond); }
.logo--clair .logo__fil { stroke: var(--accent); }
.marque {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--police-titre); font-weight: 750; font-size: var(--fs-base);
  letter-spacing: var(--interlettrage-titre); color: inherit; text-decoration: none;
}

/* ==========================================================================
   Mise en page
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--larg-nav) minmax(0, 1fr); min-height: 100vh; }
.nav {
  background: var(--nav-fond); color: var(--nav-texte);
  display: flex; flex-direction: column; z-index: var(--z-nav);
}
.nav__interieur {
  position: sticky; top: 0; height: 100vh; max-height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
}
.nav .marque { color: var(--texte-inverse); padding: 0 var(--sp-2); }
.nav__liste { display: flex; flex-direction: column; gap: var(--sp-1); }
.nav__titre { padding: 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 650; color: var(--nav-texte); opacity: 0.85; margin-bottom: var(--sp-1); }
.nav__lien {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--h-controle); padding: 0 var(--sp-3);
  border-radius: var(--rayon-m); color: var(--nav-texte); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600;
  transition: background-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}
.nav__lien:hover { background: rgba(255, 255, 255, 0.07); color: var(--texte-inverse); }
.nav__lien[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: var(--texte-inverse); }
.nav__lien[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-4)); top: var(--sp-2); bottom: var(--sp-2);
  width: var(--sp-1); border-radius: 0 var(--rayon-s) var(--rayon-s) 0; background: var(--corail);
}
.nav__compteur {
  margin-left: auto; min-width: var(--sp-5); padding: 0 var(--sp-2); text-align: center;
  border-radius: var(--rayon-rond); background: var(--corail); color: var(--texte);
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.nav__bas { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.nav__compte {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border-radius: var(--rayon-m); background: rgba(255, 255, 255, 0.07);
}
.nav__compte strong { display: block; color: var(--texte-inverse); font-size: var(--fs-sm); line-height: 1.3; }
.nav__compte span { font-size: var(--fs-xs); }
.nav__session { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.nav .avatar { background: var(--corail); color: var(--texte); }

.barre-mobile {
  display: none; position: sticky; top: 0; z-index: var(--z-nav);
  align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); background: var(--nav-fond); color: var(--texte-inverse);
}
.barre-mobile .marque { color: var(--texte-inverse); }
.barre-mobile .logo { width: var(--h-controle); height: var(--h-controle); padding: var(--sp-1); }
.menu-mobile summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--h-controle); padding: 0 var(--sp-3); border-radius: var(--rayon-m);
  font-size: var(--fs-sm); font-weight: 650; color: var(--texte-inverse);
  background: rgba(255, 255, 255, 0.1);
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary:focus-visible { outline-color: var(--focus-inverse); }
.menu-mobile[open] summary { background: rgba(255, 255, 255, 0.2); }
.menu-mobile nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--nav-fond); padding: var(--sp-2) var(--sp-4) var(--sp-4);
  box-shadow: var(--ombre-3); display: flex; flex-direction: column; gap: var(--sp-1);
}

.principal { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.page { width: 100%; max-width: var(--larg-page); margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-7); flex: 1; }
.page-entete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
}
.page-entete__titres { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.page-entete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--texte-2); }
.fil-ariane a { display: inline-flex; align-items: center; min-height: var(--h-controle); color: var(--texte-2); }
.fil-ariane a:hover { color: var(--accent-fort); }
.fil-ariane .ico { width: var(--icone-s); height: var(--icone-s); }

.pied {
  border-top: var(--bw) solid var(--bordure); padding: var(--sp-5) var(--sp-6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2) var(--sp-5); font-size: var(--fs-xs); color: var(--texte-2);
}
.pied ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.pied a { display: inline-flex; align-items: center; min-height: var(--h-controle); color: var(--texte-2); }
.pied a:hover { color: var(--accent-fort); }

@media (max-width: 1000px) {
  :root { --larg-nav: 224px; }
  .page { padding-inline: var(--sp-5); }
  .pied { padding-inline: var(--sp-5); }
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .barre-mobile { display: flex; }
}
@media (max-width: 720px) {
  .page { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .pied { padding: var(--sp-4); }
}

/* Aides de disposition */
.pile { display: flex; flex-direction: column; gap: var(--sp-4); }
.pile--s { gap: var(--sp-2); }
.pile--m { gap: var(--sp-3); }
.pile--l { gap: var(--sp-5); }
.pile--xl { gap: var(--sp-6); }
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rangee--m { gap: var(--sp-3); }
.rangee--l { gap: var(--sp-4); }
.rangee--entre { justify-content: space-between; }
.rangee--haut { align-items: flex-start; }
.pousse { margin-left: auto; }
.grille { display: grid; gap: var(--sp-4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille--l { gap: var(--sp-5); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .g3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }
.form-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grille { grid-template-columns: minmax(0, 1fr); } }
.def { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.def dt { color: var(--texte-2); }
.def dd { font-weight: 600; }
.meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); color: var(--texte-2); font-size: var(--fs-sm); }
.meta > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.section-titre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.section-titre p { color: var(--texte-2); font-size: var(--fs-sm); }

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--h-controle); padding: var(--sp-2) var(--sp-4);
  border: var(--bw) solid transparent; border-radius: var(--rayon-m);
  font-size: var(--fs-sm); font-weight: 650; line-height: 1.25; text-align: center; text-decoration: none;
  cursor: pointer; max-width: 100%;
  transition: background-color var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe),
    color var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe), transform var(--duree-rapide) var(--courbe);
}
.btn:active, .btn.is-active { transform: translateY(var(--bw)); }
.btn--principal { background: var(--accent); color: var(--texte-inverse); box-shadow: var(--ombre-1); }
.btn--principal:hover, .btn--principal.is-hover { background: var(--accent-survol); color: var(--texte-inverse); box-shadow: var(--ombre-2); }
.btn--principal:active, .btn--principal.is-active { background: var(--accent-actif); box-shadow: none; }
.btn--secondaire { background: var(--surface-elevee); color: var(--texte); border-color: var(--bordure-forte); }
.btn--secondaire:hover, .btn--secondaire.is-hover { background: var(--fond); border-color: var(--texte-2); color: var(--texte); }
.btn--secondaire:active, .btn--secondaire.is-active { background: var(--fond-creux); }
.btn--discret { background: transparent; color: var(--accent-fort); }
.btn--discret:hover, .btn--discret.is-hover { background: var(--accent-doux); color: var(--accent-actif); }
.btn--discret:active, .btn--discret.is-active { background: var(--accent-doux); }
.btn--danger { background: var(--danger); color: var(--texte-inverse); box-shadow: var(--ombre-1); }
.btn--danger:hover, .btn--danger.is-hover { background: var(--danger-survol); color: var(--texte-inverse); box-shadow: var(--ombre-2); }
.btn--danger:active, .btn--danger.is-active { background: var(--danger-survol); box-shadow: none; }
.btn--icone { width: var(--h-controle); padding: 0; flex: none; }
.btn--plein { width: 100%; }
.btn.is-focus, .btn:focus-visible { outline: var(--anneau) solid var(--focus); outline-offset: var(--bw-2); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--desactive-fond); color: var(--desactive-texte); border-color: transparent;
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before {
  content: ""; width: var(--icone-s); height: var(--icone-s); flex: none;
  border: var(--bw-2) solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: tourne 700ms linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ==========================================================================
   Champs
   ========================================================================== */
.champ { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.champ__label { font-size: var(--fs-sm); font-weight: 650; }
.champ__label .facultatif { font-weight: 400; color: var(--texte-2); }
.champ__label .requis { color: var(--danger); }
.champ__aide { font-size: var(--fs-xs); color: var(--texte-2); }
.champ__erreur {
  display: flex; align-items: flex-start; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 600; color: var(--danger);
}
.champ__erreur .ico { width: var(--icone-s); height: var(--icone-s); margin-top: 1px; }
.saisie {
  width: 100%; min-height: var(--h-controle); padding: var(--sp-2) var(--sp-3);
  border: var(--bw) solid var(--bordure-champ); border-radius: var(--rayon-m);
  background: var(--surface-elevee); color: var(--texte); font-size: var(--fs-base); line-height: var(--lh);
  transition: border-color var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe), background-color var(--duree-rapide) var(--courbe);
}
.saisie::placeholder { color: var(--placeholder); }
.saisie:hover { border-color: var(--texte-2); }
.saisie:focus, .saisie.is-focus {
  outline: var(--bw-2) solid var(--accent); outline-offset: 0; border-color: var(--accent);
  box-shadow: 0 0 0 var(--anneau) var(--accent-halo);
}
textarea.saisie { min-height: calc(var(--h-controle) * 2.5); resize: vertical; }
.champ--erreur .saisie, .saisie.is-erreur { border-color: var(--danger); background: var(--danger-doux); }
.champ--erreur .saisie:focus { outline-color: var(--danger); box-shadow: 0 0 0 var(--anneau) var(--danger-doux); }
.saisie[disabled] { background: var(--desactive-fond); color: var(--desactive-texte); border-color: transparent; cursor: not-allowed; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--sp-5) + var(--sp-4)); cursor: pointer; }
.select > .ico { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--texte-2); }
.recherche { position: relative; }
.recherche > .ico { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--texte-2); pointer-events: none; }
.recherche .saisie { padding-left: calc(var(--sp-6) + var(--sp-2)); }
.saisie-icone { position: relative; }
.saisie-icone > .ico { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--texte-2); pointer-events: none; }
.saisie-icone .saisie { padding-left: calc(var(--sp-6) + var(--sp-2)); }
.saisie-mdp { position: relative; }
.saisie-mdp .saisie { padding-right: calc(var(--h-controle) + var(--sp-2)); }
.saisie-mdp .btn { position: absolute; right: 0; top: 0; }

/* Cases, boutons radio, interrupteurs */
.case {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-height: var(--h-controle); padding-block: calc((var(--h-controle) - var(--case)) / 2);
  font-size: var(--fs-sm); line-height: var(--case); cursor: pointer;
}
.case input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: var(--case); height: var(--case); display: grid; place-content: center;
  border: var(--bw-2) solid var(--bordure-champ); border-radius: var(--rayon-s); background: var(--surface-elevee);
  cursor: pointer;
  transition: background-color var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}
.case:hover input:not(:disabled) { border-color: var(--accent); }
.case input::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid var(--texte-inverse); border-width: 0 var(--bw-2) var(--bw-2) 0;
  transform: rotate(45deg) scale(0); transition: transform var(--duree-rapide) var(--courbe);
}
.case input:checked { background: var(--accent); border-color: var(--accent); }
.case input:checked::after { transform: rotate(45deg) scale(1); }
.case input:focus-visible { outline: var(--anneau) solid var(--focus); outline-offset: var(--bw-2); }
.case input:disabled { background: var(--desactive-fond); border-color: var(--desactive-fond); cursor: not-allowed; }
.case input:disabled + span { color: var(--desactive-texte); }
.case--radio input { border-radius: 50%; }
.case--radio input::after { width: 10px; height: 10px; margin: 0; border: 0; border-radius: 50%; background: var(--texte-inverse); transform: scale(0); }
.case--radio input:checked::after { transform: scale(1); }
.case small { display: block; color: var(--texte-2); font-size: var(--fs-xs); line-height: var(--lh); }
.case.is-focus input { outline: var(--anneau) solid var(--focus); outline-offset: var(--bw-2); }

.interrupteur {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-controle);
  font-size: var(--fs-sm); cursor: pointer;
}
.interrupteur input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative; cursor: pointer;
  width: var(--interrupteur-l); height: var(--interrupteur-h); border-radius: var(--rayon-rond);
  background: var(--bordure-champ); transition: background-color var(--duree) var(--courbe);
}
.interrupteur input::after {
  content: ""; position: absolute; top: var(--sp-1); left: var(--sp-1);
  width: calc(var(--interrupteur-h) - var(--sp-2)); height: calc(var(--interrupteur-h) - var(--sp-2));
  border-radius: 50%; background: var(--surface-elevee); box-shadow: var(--ombre-1);
  transition: transform var(--duree) var(--courbe);
}
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { transform: translateX(calc(var(--interrupteur-l) - var(--interrupteur-h))); }
.interrupteur input:focus-visible { outline: var(--anneau) solid var(--focus); outline-offset: var(--bw-2); border-radius: var(--rayon-rond); }
.interrupteur input:disabled { background: var(--desactive-fond); cursor: not-allowed; }
.interrupteur--droite { justify-content: space-between; flex-direction: row-reverse; }
.interrupteur small { display: block; color: var(--texte-2); font-size: var(--fs-xs); }

/* ==========================================================================
   Cartes
   ========================================================================== */
.carte {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
  background: var(--surface); border: var(--bw) solid var(--bordure); border-radius: var(--rayon-l);
  padding: var(--sp-5); box-shadow: var(--ombre-1);
}
.carte > h2, .carte > h3 { margin: 0; }
.carte--surelevee { background: var(--surface-elevee); box-shadow: var(--ombre-2); }
.carte--compacte { padding: var(--sp-4); gap: var(--sp-2); }
.carte--lien { text-decoration: none; color: inherit; transition: box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe), border-color var(--duree) var(--courbe); }
.carte--lien:hover { box-shadow: var(--ombre-2); transform: translateY(calc(-1 * var(--bw-2))); border-color: var(--bordure-forte); color: inherit; }
.carte--accent { background: var(--accent-doux); border-color: transparent; box-shadow: none; }
.carte--alerte { background: var(--alerte-doux); border-color: transparent; box-shadow: none; }
.carte--creuse { background: var(--fond); box-shadow: none; }
.carte__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.carte__pied { margin-top: auto; padding-top: var(--sp-2); }
.carte__icone {
  width: var(--h-controle); height: var(--h-controle); border-radius: var(--rayon-m);
  display: grid; place-items: center; background: var(--accent-doux); color: var(--accent-fort); flex: none;
}
.stat { font-family: var(--police-titre); font-size: var(--fs-2xl); font-weight: 750; letter-spacing: var(--interlettrage-titre); line-height: 1; }
.stat small { font-size: var(--fs-base); font-weight: 600; color: var(--texte-2); letter-spacing: 0; }
.avatar {
  width: var(--avatar); height: var(--avatar); flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0;
  background: var(--accent-doux); color: var(--accent-fort);
}
.avatar--l { width: var(--avatar-l); height: var(--avatar-l); font-size: var(--fs-lg); }
.avatar--corail { background: var(--corail-doux); color: var(--corail-fort); }
.avatar--info { background: var(--info-doux); color: var(--info); }
.avatar--succes { background: var(--succes-doux); color: var(--succes); }
.avatar--neutre { background: var(--neutre-doux); color: var(--texte-2); }

/* ==========================================================================
   Badges et pastilles de situation
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
  padding: calc(var(--sp-1) / 2) var(--sp-2); border-radius: var(--rayon-rond);
  font-size: var(--fs-xs); font-weight: 650; line-height: var(--lh);
  background: var(--neutre-doux); color: var(--texte-2);
}
.badge .ico { width: var(--icone-s); height: var(--icone-s); }
.badge--accent { background: var(--accent-doux); color: var(--accent-fort); }
.badge--bilan { background: var(--corail-doux); color: var(--corail-fort); }
.badge--succes { background: var(--succes-doux); color: var(--succes); }
.badge--alerte { background: var(--alerte-doux); color: var(--alerte); }
.badge--danger { background: var(--danger-doux); color: var(--danger); }
.badge--info { background: var(--info-doux); color: var(--info); }
.badge--brouillon { background: transparent; color: var(--texte-2); border: var(--bw-2) dashed var(--bordure-champ); }
.pastille {
  display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
  padding: calc(var(--sp-1) / 2) var(--sp-3) calc(var(--sp-1) / 2) var(--sp-2); border-radius: var(--rayon-rond);
  font-size: var(--fs-xs); font-weight: 650; line-height: var(--lh);
}
.pastille::before { content: ""; width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: currentColor; }
.pastille--prevu { background: var(--accent-doux); color: var(--accent-fort); }
.pastille--realise { background: var(--succes-doux); color: var(--succes); }
.pastille--annule { background: var(--neutre-doux); color: var(--texte-2); }
.pastille--annule::before { background: transparent; box-shadow: inset 0 0 0 var(--bw-2) currentColor; }
.pastille--suspendu { background: var(--info-doux); color: var(--info); }
.pastille--suspendu::before { border-radius: 1px; width: 3px; box-shadow: 5px 0 0 currentColor; margin-right: var(--sp-1); }
.pastille--corrige { background: var(--alerte-doux); color: var(--alerte); }

/* ==========================================================================
   Onglets
   ========================================================================== */
.onglets { display: flex; gap: var(--sp-1); border-bottom: var(--bw) solid var(--bordure); overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglet {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--h-controle); padding: 0 var(--sp-4); white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 650; color: var(--texte-2); text-decoration: none;
  border-radius: var(--rayon-m) var(--rayon-m) 0 0;
  transition: color var(--duree-rapide) var(--courbe), background-color var(--duree-rapide) var(--courbe);
}
.onglet:hover { color: var(--texte); background: var(--fond-creux); }
.onglet[aria-selected="true"], .onglet[aria-current="page"] { color: var(--accent-fort); }
.onglet[aria-selected="true"]::after, .onglet[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: calc(-1 * var(--bw));
  height: var(--bw-2); border-radius: var(--bw-2); background: var(--accent);
}
.onglet .badge { padding-inline: var(--sp-2); }
.segment { display: inline-flex; padding: var(--sp-1); gap: var(--sp-1); background: var(--fond-creux); border-radius: var(--rayon-m); }
.segment a, .segment button {
  display: inline-flex; align-items: center; min-height: calc(var(--h-controle) - var(--sp-2)); padding: 0 var(--sp-4);
  border: 0; border-radius: var(--rayon-s); background: transparent; color: var(--texte-2);
  font-size: var(--fs-sm); font-weight: 650; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}
.segment [aria-current="true"] { background: var(--surface-elevee); color: var(--texte); box-shadow: var(--ombre-1); }

/* ==========================================================================
   Encadrés et notifications
   ========================================================================== */
.encadre {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4);
  border-radius: var(--rayon-m); border: var(--bw) solid transparent; font-size: var(--fs-sm);
}
.encadre > .ico { margin-top: 1px; }
.encadre__corps { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1; }
.encadre__corps strong { font-size: var(--fs-sm); }
.encadre__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.encadre--info { background: var(--info-doux); color: var(--texte); }
.encadre--info > .ico { color: var(--info); }
.encadre--succes { background: var(--succes-doux); }
.encadre--succes > .ico { color: var(--succes); }
.encadre--alerte { background: var(--alerte-doux); }
.encadre--alerte > .ico { color: var(--alerte); }
.encadre--danger { background: var(--danger-doux); }
.encadre--danger > .ico { color: var(--danger); }
.encadre--bilan { background: var(--corail-doux); }
.encadre--bilan > .ico { color: var(--corail-fort); }
.notif {
  display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; max-width: 420px;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--rayon-m);
  background: var(--texte); color: var(--texte-inverse); box-shadow: var(--ombre-3); font-size: var(--fs-sm);
}
.notif > .ico { color: #8FD6A8; margin-top: 1px; }
.notif--alerte > .ico { color: var(--corail); }
.notif strong { display: block; }
.notif span { color: var(--nav-texte); font-size: var(--fs-xs); }
.notif .btn--discret { color: var(--texte-inverse); }
.notif .btn--discret:hover { background: rgba(255, 255, 255, 0.12); color: var(--texte-inverse); }
.notif :focus-visible { outline-color: var(--focus-inverse); }

/* ==========================================================================
   Tableaux
   ========================================================================== */
.tableau-carte { background: var(--surface); border: var(--bw) solid var(--bordure); border-radius: var(--rayon-l); box-shadow: var(--ombre-1); overflow: hidden; }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tableau caption { text-align: left; padding: var(--sp-4) var(--sp-5); font-weight: 700; font-size: var(--fs-base); }
.tableau th {
  padding: var(--sp-3) var(--sp-4); text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--texte-2);
  background: var(--fond); border-bottom: var(--bw) solid var(--bordure); white-space: nowrap;
}
.tableau td { padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--bordure); vertical-align: middle; }
.tableau tbody tr { transition: background-color var(--duree-rapide) var(--courbe); }
.tableau tbody tr:hover { background: var(--fond); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau .droite, .tableau th.droite { text-align: right; }
.tableau tfoot td { background: var(--fond); font-weight: 700; border-top: var(--bw-2) solid var(--bordure); border-bottom: 0; }
.tableau a { font-weight: 650; }
.tableau tr.est-annule td { color: var(--texte-2); }
@media (max-width: 720px) {
  .tableau--empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau--empile, .tableau--empile tbody, .tableau--empile tfoot, .tableau--empile tr, .tableau--empile td { display: block; width: 100%; }
  .tableau--empile tr { padding: var(--sp-3) 0; border-bottom: var(--bw) solid var(--bordure); }
  .tableau--empile tbody tr:last-child { border-bottom: 0; }
  .tableau--empile td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); border: 0; padding: var(--sp-1) var(--sp-4); text-align: right; }
  .tableau--empile td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 650; color: var(--texte-2); text-align: left; flex: none; }
  .tableau--empile td.sans-etiquette { display: block; text-align: left; }
  .tableau--empile td.sans-etiquette::before { content: none; }
  .tableau--empile tfoot tr { padding: var(--sp-3) 0; background: var(--fond); }
  .tableau--empile tfoot td { background: transparent; border: 0; }
}

/* ==========================================================================
   Progression, étapes, fil
   ========================================================================== */
.progression { height: var(--sp-2); background: var(--fond-creux); border-radius: var(--rayon-rond); overflow: hidden; }
.progression > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duree) var(--courbe); }
.progression--depasse > span { background: var(--alerte-vif); }
.progression--succes > span { background: var(--succes); }
.etapes { display: flex; gap: var(--sp-2); counter-reset: etape; }
.etapes__item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 650; color: var(--texte-2); }
.etapes__item::before { content: ""; height: var(--sp-1); border-radius: var(--rayon-rond); background: var(--bordure); }
.etapes__item[data-etat="fait"]::before, .etapes__item[data-etat="en-cours"]::before { background: var(--accent); }
.etapes__item[data-etat="fait"] { color: var(--accent-fort); }
.etapes__item[data-etat="en-cours"] { color: var(--texte); }
.etapes__num { display: inline-flex; align-items: center; gap: var(--sp-2); }
.etapes__num i {
  font-style: normal; width: var(--icone-l); height: var(--icone-l); flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  background: var(--fond-creux); color: var(--texte-2);
}
.etapes__item[data-etat="fait"] i { background: var(--accent); color: var(--texte-inverse); }
.etapes__item[data-etat="en-cours"] i { background: var(--texte); color: var(--texte-inverse); }
.etapes__lib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etapes-compact { display: none; }
@media (max-width: 900px) {
  .etapes { display: none; }
  .etapes-compact { display: flex; flex-direction: column; gap: var(--sp-2); }
}

/* Fil de la journée : le motif de la marque */
.fil-jour { position: relative; }
.fil-jour::before {
  content: ""; position: absolute; left: calc(5.5rem + var(--sp-2)); top: var(--sp-4); bottom: var(--sp-4);
  width: var(--bw-2); background: var(--bordure-forte); border-radius: var(--bw-2);
}

/* ==========================================================================
   Menus, panneau latéral, fenêtre
   ========================================================================== */
.menu {
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 220px; max-width: 100%;
  padding: var(--sp-2); background: var(--surface-elevee);
  border: var(--bw) solid var(--bordure); border-radius: var(--rayon-m); box-shadow: var(--ombre-3);
}
.menu__item {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-controle); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--rayon-s); background: transparent; color: var(--texte);
  font-size: var(--fs-sm); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree-rapide) var(--courbe);
}
.menu__item:hover, .menu__item.is-hover { background: var(--fond); color: var(--texte); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-doux); color: var(--danger); }
.menu__sep { height: var(--bw); background: var(--bordure); margin: var(--sp-1) 0; }

.superposition { display: grid; flex: 1; position: relative; min-width: 0; }
.superposition > * { grid-area: 1 / 1; min-width: 0; }
.voile { background: var(--voile); z-index: var(--z-voile); }
.panneau {
  z-index: var(--z-panneau); justify-self: end; align-self: stretch; width: min(100%, var(--larg-panneau));
  display: flex; flex-direction: column; background: var(--surface-elevee);
  box-shadow: var(--ombre-3); border-left: var(--bw) solid var(--bordure);
}
.panneau__entete { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5); border-bottom: var(--bw) solid var(--bordure); }
.panneau__corps { flex: 1; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); }
.panneau__pied { padding: var(--sp-4) var(--sp-5); border-top: var(--bw) solid var(--bordure); background: var(--surface); display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 720px) {
  .panneau { border-left: 0; box-shadow: none; }
  .panneau__entete, .panneau__corps { padding: var(--sp-4); }
  .panneau__pied { padding: var(--sp-4); }
}
.modale {
  width: min(100%, var(--larg-modale)); background: var(--surface-elevee); border-radius: var(--rayon-l);
  box-shadow: var(--ombre-3); padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
.modale__contenu { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.modale__actions {
  flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5); background: var(--surface); border-top: var(--bw) solid var(--bordure);
}
.centre-voile { display: grid; place-items: center; padding: var(--sp-5); background: var(--voile); border-radius: var(--rayon-l); }

/* ==========================================================================
   États vides
   ========================================================================== */
.vide {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5); background: var(--surface);
  border: var(--bw-2) dashed var(--bordure-forte); border-radius: var(--rayon-l);
}
.vide svg.illustration { width: var(--illustration); height: auto; }
.vide p { color: var(--texte-2); max-width: 46ch; }
.vide h2, .vide h3 { max-width: 30ch; }

/* Illustrations des états vides : le fil et ses nœuds */
.il-sol { fill: var(--fond-creux); }
.il-carte { fill: var(--surface-elevee); stroke: var(--bordure-forte); stroke-width: var(--bw-2); }
.il-bandeau { fill: var(--accent); }
.il-trait { fill: none; stroke: var(--accent-fort); stroke-width: 4; stroke-linecap: round; }
.il-fil { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-fil-clair { fill: none; stroke: var(--bordure-forte); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 7; }
.il-noeud { fill: var(--corail); }
.il-doux { fill: var(--accent-doux); }

/* ==========================================================================
   Connexion (formulaires seuls)
   ========================================================================== */
.formulaire-seul { width: 100%; max-width: var(--larg-form); }
.sur-encre { background: var(--nav-fond); color: var(--texte-inverse); }

/* ==========================================================================
   Impression : la cotation et les pages d'information s'impriment en clair
   ========================================================================== */
@media print {
  .nav, .barre-mobile, .pied, .page-entete__actions, .btn { display: none !important; }
  body { background: #fff; }
  .app { display: block; }
}