/* ==========================================================================
   Studio client — feuille de style unique.

   La charte du site vitrine s'applique sans dérive : mêmes couleurs, mêmes
   polices, même jauge à 62 % sous le logo. Ce qui change, c'est la densité.
   Un site de présentation aère pour se lire d'une traite. Un outil resserre
   pour montrer plus d'informations sans faire défiler, et remplace les grandes
   sections par des panneaux.

   Aucune couleur écrite en dur hors du bloc de jetons ci-dessous.
   Aucune balise <style> ni <script> en ligne dans les gabarits : la politique
   de sécurité de contenu du .htaccess les interdit, et c'est ce qui ferme la
   classe d'attaques la plus courante par injection de script.
   ========================================================================== */

/* --- Polices auto-hébergées ---------------------------------------------- */
/* Récupérées du build du site, donc strictement les mêmes fichiers. Aucun
   appel à Google Fonts : ce serait un tiers de plus dans la politique de
   confidentialité d'un espace qui traite des données de stagiaires. */
@font-face {
  font-family: 'Fredoka Studio';
  src: url('polices/fredoka-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Studio';
  src: url('polices/inter.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --- Jetons de la charte -------------------------------------------------- */
:root {
  --violet: #3d2c5c;
  --violet-deep: #2a1e42;
  --lime: #b8e600;
  --lime-soft: #dff77a;
  --rose: #ff8fa3;
  --creme: #faf7f2;
  --encre: #241c33;
  --gris: #6e6580;

  --creme-ombre: #f2ece3;
  --violet-clair: #574478;
  --trait: #e4ddd2;
  --trait-sombre: #4a3a6b;
  --blanc: #ffffff;

  /* Le lime sur crème plafonne à 1,5:1 : il ne porte JAMAIS de texte sur fond
     clair. Seule cette déclinaison, à teinte égale et valeur abaissée, est
     lisible sur clair, à 4,9:1. */
  --lime-encre: #5e7500;
  --sur-lime: var(--encre);

  /* Couleurs d'état. Chacune est doublée d'un mot dans l'interface : aucune
     information n'est portée par la seule couleur. */
  --succes: #1f6b3a;
  --succes-fond: #e8f4ec;
  --alerte: #8a2b2b;
  --alerte-fond: #fbeaea;
  --attention: #7a4a00;
  --attention-fond: #fbf1e0;
  --info-fond: #eceaf3;

  /* Séries des graphiques : une paire validée pour les trois daltonismes et
     le contraste sur blanc. Le violet de la charte, trop sombre et trop
     peu saturé, ne se distingue pas assez d'un gris pour porter une série. */
  --serie-1: #6a48c0;
  --serie-2: #7d9e00;
  --serie-neutre: #b9b1c6;

  --police-titre: 'Fredoka Studio', 'Trebuchet MS', Verdana, sans-serif;
  --police-corps: 'Inter Studio', 'Helvetica Neue', Arial, sans-serif;
  --police-ui: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --police-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 0.95rem;
  --t-md: 1.05rem;
  --t-lg: 1.25rem;
  --t-xl: 1.55rem;

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;

  --largeur-max: 1760px;
  --lateral-largeur: 16.5rem;
  --lateral-reduit: 4.5rem;
  --largeur-texte: 62ch;
  --gouttiere: clamp(1rem, 4vw, 2rem);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pilule: 999px;

  --ombre-basse: 0 1px 2px rgb(36 28 51 / 0.06), 0 2px 8px rgb(36 28 51 / 0.04);
  --ombre-carte: 0 2px 4px rgb(36 28 51 / 0.05), 0 12px 28px rgb(36 28 51 / 0.07);

  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duree-courte: 180ms;

  --taux-marque: 62%;
  --jauge-epaisseur: 6px;
}

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

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police-corps);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.18;
  color: var(--violet);
  margin: 0 0 var(--e-3);
  text-wrap: balance;
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-base); }

p { margin: 0 0 var(--e-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--violet);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--violet) 40%, transparent);
  transition: text-decoration-color var(--duree-courte) var(--courbe);
}
a:hover { text-decoration-color: currentColor; }

img, svg { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; }
code, .mono { font-family: var(--police-mono); font-size: 0.92em; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.barre :focus-visible { outline-color: var(--lime); }

.lecture-seule {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saut-contenu {
  position: absolute;
  left: var(--e-4);
  top: -100%;
  z-index: 200;
  background: var(--violet);
  color: var(--creme);
  padding: var(--e-2) var(--e-4);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-family: var(--police-ui);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--duree-courte) var(--courbe);
}
.saut-contenu:focus { top: 0; }

/* --- Logo ----------------------------------------------------------------- */
.logo {
  display: inline-grid;
  justify-items: start;
  gap: 0.28em;
  width: max-content;
  text-decoration: none;
  line-height: 1;
}
.logo__jauge {
  width: 100%;
  height: 0.2em;
  min-height: 4px;
  border-radius: var(--r-pilule);
  overflow: hidden;
  background: color-mix(in srgb, var(--creme) 22%, transparent);
}
.logo__remplissage {
  display: block;
  width: var(--taux-marque);
  height: 100%;
  border-radius: inherit;
  background: var(--lime);
}
.logo__mot {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.005em;
  color: var(--creme);
}
.logo__flow { color: var(--lime); }
.logo__studio {
  font-family: var(--police-ui);
  font-size: 0.45rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--creme) 72%, var(--violet));
}

/* --- Barre supérieure ------------------------------------------------------ */
.barre {
  background: var(--violet-deep);
  color: var(--creme);
  border-bottom: 1px solid var(--trait-sombre);
}
.barre__interieur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e-3) var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-5);
}
.barre__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin-inline-start: auto;
  align-items: center;
}
.barre__lien {
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--creme);
  text-decoration: none;
  padding: var(--e-1) 0;
  border-bottom: 2px solid transparent;
}
.barre__lien:hover { color: var(--lime); }
.barre__lien[aria-current='page'] {
  color: var(--lime);
  border-bottom-color: var(--lime);
}
.barre__qui {
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--creme) 70%, var(--violet-deep));
  font-family: var(--police-ui);
}

/* Sur le violet profond de la barre, un bouton secondaire violet serait
   illisible : il bascule sur le crème, comme le fait le site sur ses sections
   sombres. Même règle, même motif. */
.barre .bouton--secondaire {
  color: var(--creme);
  border-color: color-mix(in srgb, var(--creme) 55%, transparent);
}
.barre .bouton--secondaire:hover {
  background: var(--creme);
  color: var(--violet-deep);
  border-color: var(--creme);
}

/* Le nom de l'utilisateur et la déconnexion restent solidaires : c'est un
   bloc « qui je suis, et comment je pars », pas deux éléments de menu. */
.barre__compte {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}

/* --- Marqueur d'environnement ---------------------------------------------- */
/* Voyant, et c'est le but : distinguer d'un coup d'œil le Studio local du
   Studio en ligne évite de créer un compte de test chez le client. */
.bandeau-local {
  background: var(--rose);
  color: var(--encre);
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--e-1) var(--e-3);
}

/* --- Application : menu latéral et contenu -------------------------------- */
/* Une colonne fixe à gauche, le contenu sur toute la largeur restante. Sur
   un écran étroit, la colonne devient un tiroir et une barre de tête porte
   le logo et le bouton « Menu ». */
.appli {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100dvh;
}
.appli__corps {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.entete-mobile {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--gouttiere);
  background: var(--violet-deep);
  border-bottom: 1px solid var(--trait-sombre);
}
.entete-mobile__menu {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-1) var(--e-4);
  border: 2px solid color-mix(in srgb, var(--creme) 40%, transparent);
  border-radius: var(--r-pilule);
  color: var(--creme);
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
}
.entete-mobile__menu:hover { border-color: var(--lime); color: var(--lime); }
.entete-mobile :focus-visible, .lateral :focus-visible { outline-color: var(--lime); }

.icone {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: block;
}

/* Le tiroir : hors champ tant qu'il n'est pas ouvert, par la cible #lateral
   sans script, par la classe menu-ouvert avec. */
.lateral {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(20rem, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--violet-deep);
  color: var(--creme);
  border-right: 1px solid var(--trait-sombre);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform var(--duree-courte) var(--courbe), visibility 0s linear var(--duree-courte);
}
.lateral:target, .menu-ouvert .lateral {
  transform: none;
  visibility: visible;
  transition: transform var(--duree-courte) var(--courbe);
  box-shadow: 0 0 0 100vmax rgb(20 14 32 / 0.5);
}
.lateral__voile { display: none; }
.menu-ouvert .lateral__voile, .lateral:target + .lateral__voile {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 55;
}

.lateral__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-3) var(--e-5);
}
.lateral__fermer {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  color: var(--creme);
}
.lateral__fermer:hover { background: color-mix(in srgb, var(--creme) 10%, transparent); }

.lateral__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-2) var(--e-3) var(--e-4);
  scrollbar-width: thin;
  scrollbar-color: var(--trait-sombre) transparent;
}

.menu, .menu__sous { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu > li + li.menu__groupe, .menu > li.menu__groupe + li { margin-top: var(--e-2); }
.menu__sous { margin: 2px 0 var(--e-1); }

.menu__lien {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 42px;
  padding: var(--e-2) var(--e-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: color-mix(in srgb, var(--creme) 84%, var(--violet-deep));
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.menu__lien:hover { background: color-mix(in srgb, var(--creme) 9%, transparent); color: var(--creme); }
.menu__lien .icone { opacity: 0.85; }
.menu__texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu__lien--sous { padding-left: var(--e-6); font-weight: 600; min-height: 38px; }
/* Un titre de projet long tient sur deux lignes avant d'être coupé. */
.menu__lien--sous .menu__texte {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
}
.menu__lien--sous .icone { width: 1.1rem; height: 1.1rem; }

/* L'écran courant : fond, filet lime et texte lime, jamais la couleur seule,
   aria-current le dit aussi aux lecteurs d'écran. */
.menu__lien[aria-current='page'] {
  background: color-mix(in srgb, var(--lime) 15%, transparent);
  color: var(--lime);
}
.menu__lien[aria-current='page']::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--e-3));
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 var(--r-pilule) var(--r-pilule) 0;
  background: var(--lime);
}
.menu__lien[aria-current='page'] .icone { opacity: 1; }

.menu__lien--groupe {
  list-style: none;
  color: color-mix(in srgb, var(--creme) 62%, var(--violet-deep));
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu__lien--groupe::-webkit-details-marker { display: none; }
.menu__chevron {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duree-courte) var(--courbe);
}
.menu__repli[open] > summary .menu__chevron { transform: rotate(180deg); }
.menu__repli:not([open]) > summary { color: color-mix(in srgb, var(--creme) 80%, var(--violet-deep)); }

.pastille {
  flex: none;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pilule);
  background: var(--lime);
  color: var(--sur-lime);
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* Rubrique ouverte : chaque écran montre déjà son compteur, inutile de le
   redire sur le titre. */
.menu__repli[open] > summary .pastille--groupe { display: none; }

.lateral__reduire { display: none; }
.lateral__pied {
  border-top: 1px solid var(--trait-sombre);
  padding: var(--e-3);
  display: grid;
  gap: var(--e-2);
}
.compte {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--creme) 6%, transparent);
}
.compte__avatar {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--sur-lime);
  font-family: var(--police-titre);
  font-size: var(--t-sm);
}
.compte__qui { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.compte__nom {
  color: var(--creme);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.compte__nom:hover { color: var(--lime); }
.compte__role {
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--creme) 62%, var(--violet-deep));
}
.compte__sortie { flex: none; margin: 0; }

.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--creme);
  cursor: pointer;
  transition: background-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.bouton-icone:hover { background: color-mix(in srgb, var(--rose) 22%, transparent); color: var(--rose); }

/* Grand écran : la colonne prend sa place dans la grille et ne bouge plus. */
@media (min-width: 64em) {
  .appli { grid-template-columns: var(--lateral-largeur) minmax(0, 1fr); }
  .entete-mobile, .lateral__fermer, .lateral__voile { display: none !important; }
  .lateral__reduire:not([hidden]) { display: flex; }
  .lateral, .lateral:target {
    position: sticky;
    top: 0;
    width: auto;
    height: 100dvh;
    transform: none;
    visibility: visible;
    box-shadow: none;
    transition: none;
  }

  /* Réduite aux icônes : les mots passent en lecture seule, le titre de
     chaque lien les montre au survol. */
  .menu-reduit .appli { grid-template-columns: var(--lateral-reduit) minmax(0, 1fr); }
  .menu-reduit .lateral__tete { justify-content: center; padding-inline: var(--e-2); }
  .menu-reduit .logo__mot, .menu-reduit .logo__studio { display: none; }
  .menu-reduit .logo__jauge { width: 2rem; }
  .menu-reduit .lateral__nav { padding-inline: var(--e-2); }
  .menu-reduit .menu__lien { justify-content: center; padding-inline: 0; }
  .menu-reduit .menu__lien--sous { padding-left: 0; }
  .menu-reduit .menu__lien[aria-current='page']::before { left: calc(-1 * var(--e-2)); }
  .menu-reduit .menu__texte {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .menu-reduit .menu__lien--groupe { display: none; }
  .menu-reduit .menu__sous { margin: 0; padding-top: var(--e-2); border-top: 1px solid var(--trait-sombre); }
  .menu-reduit .pastille {
    position: absolute; top: 2px; right: 4px;
    min-width: 1.1rem; height: 1.1rem; font-size: 0.65rem; padding: 0 0.25rem;
  }
  .menu-reduit .compte { flex-direction: column; padding: var(--e-2) 0; background: transparent; }
  .menu-reduit .compte__qui { display: none; }
  .menu-reduit .lateral__reduire .icone { transform: scaleX(-1); }
}

/* --- Coquille -------------------------------------------------------------- */
.coquille {
  flex: 1;
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e-5) var(--gouttiere) var(--e-7);
}
.coquille:focus { outline: none; }
@media (min-width: 64em) {
  .appli .coquille { padding-top: var(--e-6); }
}
.coquille--etroite { max-width: 33rem; }

.entete-page {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  margin-bottom: var(--e-5);
}
.entete-page__titres { min-width: 0; }
.entete-page h1 { margin-bottom: var(--e-1); }

.surtitre {
  display: block;
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: var(--e-2);
}

/* La jauge de marque, reprise du logo : elle souligne les titres de page comme
   elle souligne le mot-symbole. C'est une constante, pas un indicateur. */
.jauge-titre {
  width: 96px;
  height: var(--jauge-epaisseur);
  border-radius: var(--r-pilule);
  background: color-mix(in srgb, var(--violet) 14%, transparent);
  overflow: hidden;
  margin-bottom: var(--e-4);
}
.jauge-titre span {
  display: block;
  width: var(--taux-marque);
  height: 100%;
  background: var(--lime);
  border-radius: inherit;
}

.texte-secondaire { color: var(--gris); }
.mesure { max-width: var(--largeur-texte); }

/* --- Panneaux --------------------------------------------------------------- */
.panneau {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--ombre-basse);
}
.panneau + .panneau { margin-top: var(--e-4); }
.panneau--accent { border-left: var(--jauge-epaisseur) solid var(--lime); }
.panneau__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-4);
}
.panneau__entete h2, .panneau__entete h3 { margin: 0; }

.grille { display: grid; gap: var(--e-4); }
@media (min-width: 720px) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Chiffres du tableau de bord --------------------------------------------- */
.compteur {
  display: block;
  font-family: var(--police-titre);
  font-size: 2rem;
  line-height: 1;
  color: var(--violet);
  margin-bottom: var(--e-1);
}
.compteur__libelle {
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --- Messages ---------------------------------------------------------------- */
.message {
  border-radius: var(--r-md);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
  border: 1px solid transparent;
  border-left-width: var(--jauge-epaisseur);
  font-size: var(--t-base);
}
.message__titre {
  display: block;
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--e-1);
}
.message--succes { background: var(--succes-fond); border-color: var(--succes); color: #123f22; }
.message--erreur { background: var(--alerte-fond); border-color: var(--alerte); color: #5e1c1c; }
.message--avertissement { background: var(--attention-fond); border-color: var(--attention); color: #5a3600; }
.message--information { background: var(--info-fond); border-color: var(--violet); color: var(--encre); }

/* --- Bandeau d'assistance ----------------------------------------------------- */
/* En tête de chaque écran pendant toute l'assistance : l'administrateur ne
   doit jamais oublier qu'il regarde l'espace d'un client. */
.bandeau-assistance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--attention-fond);
  border-bottom: var(--jauge-epaisseur) solid var(--attention);
  color: #5a3600;
  font-size: var(--t-sm);
}
.bandeau-assistance__icone { display: inline-flex; color: var(--attention); }
.bandeau-assistance__texte { flex: 1 1 18rem; margin: 0; }
.bandeau-assistance__texte strong { margin-right: var(--e-2); }
.bandeau-assistance__sortie { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; }

/* --- Formulaires -------------------------------------------------------------- */
.formulaire { display: grid; gap: var(--e-4); }
.formulaire--serre { gap: var(--e-3); }

.champ { display: grid; gap: var(--e-2); }
.champ > label {
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--violet);
}
.requis { color: var(--lime-encre); }

.champ input[type='text'],
.champ input[type='email'],
.champ input[type='password'],
.champ input[type='tel'],
.champ input[type='search'],
.champ input[type='url'],
.champ input[type='date'],
.champ input[type='number'],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  font-family: var(--police-corps);
  font-size: var(--t-base);
  color: var(--encre);
  background: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: var(--r-md);
  transition: border-color var(--duree-courte) var(--courbe);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--gris); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--violet); }

/* Le champ en erreur est signalé par la bordure ET par le message qui lui est
   relié : jamais par la couleur seule. */
.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea { border-color: var(--alerte); }
.champ__erreur {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--alerte);
}
.aide { font-size: var(--t-sm); color: var(--gris); margin: 0; }

/* Champ de saisie d'un code à six chiffres : large, espacé, en chiffres fixes. */
.champ--code input {
  font-family: var(--police-mono);
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
  max-width: 11rem;
}

.champ--case {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--e-3);
}
.champ--case input {
  width: 20px; height: 20px;
  margin-top: 3px;
  accent-color: var(--violet);
}
.champ--case label {
  font-family: var(--police-corps);
  font-weight: 400;
  font-size: var(--t-base);
  color: var(--encre);
}

.barre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}

/* --- Boutons -------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-5);
  border: 2px solid transparent;
  border-radius: var(--r-pilule);
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree-courte) var(--courbe),
              color var(--duree-courte) var(--courbe),
              transform var(--duree-courte) var(--courbe);
}
.bouton--primaire {
  background: var(--lime);
  color: var(--sur-lime);
  box-shadow: var(--ombre-basse);
}
.bouton--primaire:hover { background: color-mix(in srgb, var(--lime) 88%, var(--violet)); transform: translateY(-1px); }

.bouton--secondaire {
  background: transparent;
  color: var(--violet);
  border-color: var(--violet);
}
.bouton--secondaire:hover { background: var(--violet); color: var(--creme); }

.bouton--discret {
  background: transparent;
  color: var(--violet);
  border-color: var(--trait);
  font-weight: 600;
}
.bouton--discret:hover { border-color: var(--violet); }

/* Action à conséquence : bordure rouge, jamais un bouton rouge plein, pour
   qu'elle ne se clique pas par réflexe comme l'action principale. */
.bouton--danger { background: transparent; color: var(--alerte); border-color: var(--alerte); }
.bouton--danger:hover { background: var(--alerte); color: var(--blanc); }

.bouton--menu {
  min-height: 34px;
  padding: var(--e-1) var(--e-3);
  font-size: var(--t-xs);
}
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

.formulaire-en-ligne { display: inline; }

/* --- Tableaux --------------------------------------------------------------------- */
/* Positionné pour que le texte réservé aux lecteurs d'écran, placé en
   absolu, reste dans le cadre qui défile. Sans cela, il en sort et élargit
   toute la page sur un téléphone. */
.tableau-cadre { overflow-x: auto; position: relative; }
.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.tableau caption {
  text-align: left;
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  padding-bottom: var(--e-2);
}
.tableau th, .tableau td {
  text-align: left;
  padding: var(--e-3);
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
.tableau thead th {
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.tableau tbody tr:hover { background: var(--creme-ombre); }
.tableau td:last-child, .tableau th:last-child { text-align: right; }
.tableau .actions { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }

/* --- Étiquettes d'état ----------------------------------------------------------- */
/* Le mot porte l'information, la couleur ne fait que la répéter. */
.etiquette {
  display: inline-block;
  padding: 2px var(--e-2);
  border-radius: var(--r-pilule);
  border: 1px solid;
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.etiquette--actif { background: var(--succes-fond); border-color: var(--succes); color: #123f22; }
.etiquette--invite { background: var(--attention-fond); border-color: var(--attention); color: #5a3600; }
.etiquette--desactive { background: var(--creme-ombre); border-color: var(--gris); color: var(--gris); }

/* Lot 1. Les étiquettes se regroupent en quatre tons, chacun doublé du mot :
   à traiter (violet), en cours (orangé), abouti (vert), fermé (gris). Le rouge
   est réservé à ce qui a échoué. */
.etiquette--nouvelle, .etiquette--devis_envoye, .etiquette--preparation, .etiquette--prospect {
  background: var(--info-fond); border-color: var(--violet); color: var(--violet);
}
.etiquette--echange, .etiquette--en_cours, .etiquette--sans_compte {
  background: var(--attention-fond); border-color: var(--attention); color: #5a3600;
}
.etiquette--gagnee, .etiquette--livre, .etiquette--client {
  background: var(--succes-fond); border-color: var(--succes); color: #123f22;
}
.etiquette--perdue { background: var(--alerte-fond); border-color: var(--alerte); color: #5e1c1c; }
.etiquette--sans_suite, .etiquette--clos, .etiquette--archive, .etiquette--archivee, .etiquette--masque {
  background: var(--creme-ombre); border-color: var(--gris); color: #4f4760;
}

/* --- Listes de faits ------------------------------------------------------------- */
.faits { margin: 0; display: grid; gap: var(--e-3); }
@media (min-width: 620px) {
  .faits { grid-template-columns: minmax(9rem, auto) 1fr; gap: var(--e-3) var(--e-5); }
}
.faits dt {
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris);
}
.faits dd { margin: 0; }

/* --- Blocs de secret ------------------------------------------------------------- */
/* Clé TOTP et codes de secours : à recopier sans erreur, donc en chasse fixe,
   très espacés, sur un fond qui les distingue du texte courant. */
.secret {
  font-family: var(--police-mono);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  background: var(--creme-ombre);
  border: 1px dashed var(--violet-clair);
  border-radius: var(--r-md);
  padding: var(--e-3) var(--e-4);
  word-break: break-all;
  user-select: all;
}
.codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.codes li {
  font-family: var(--police-mono);
  font-size: var(--t-md);
  letter-spacing: 0.08em;
  background: var(--creme-ombre);
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
  padding: var(--e-2) var(--e-3);
  text-align: center;
  user-select: all;
}

/* --- Écran vide -------------------------------------------------------------------- */
.vide {
  text-align: center;
  padding: var(--e-6) var(--e-4);
  color: var(--gris);
}
.vide h2, .vide h3 { color: var(--violet); font-size: var(--t-md); }

/* --- Journal ------------------------------------------------------------------------ */
.journal__details {
  font-family: var(--police-mono);
  font-size: var(--t-xs);
  color: var(--gris);
  word-break: break-word;
}

/* --- Filtres -------------------------------------------------------------------------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: flex-end;
  margin-bottom: var(--e-4);
}
.filtres .champ { min-width: 11rem; }

/* Une seule ligne : les menus prennent leur largeur, la recherche le reste. */
.filtres--ligne { gap: var(--e-2); align-items: center; }
.filtres--ligne .champ { min-width: 0; flex: 0 1 auto; }
.filtres--ligne .champ select { width: auto; max-width: 14rem; }
.filtres--ligne .filtres__recherche { flex: 1 1 14rem; }
@media (min-width: 64em) {
  .filtres--ligne { flex-wrap: nowrap; }
}

/* --- Pagination ------------------------------------------------------------------------ */
.pagination {
  display: flex;
  gap: var(--e-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--e-4);
  font-size: var(--t-sm);
}

/* --- Pied ------------------------------------------------------------------------------- */
.pied {
  background: var(--violet-deep);
  color: color-mix(in srgb, var(--creme) 78%, var(--violet-deep));
  font-size: var(--t-xs);
  padding: var(--e-4) 0;
  margin-top: auto;
}
.pied__interieur {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  justify-content: space-between;
}
.pied a { color: var(--creme); }

/* --- Pages publiques ---------------------------------------------------------------------- */
/* Connexion, invitation, mot de passe oublié : une seule carte centrée, rien
   d'autre à l'écran. Ces pages n'ont qu'une chose à faire faire. */
.accueil-public {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--e-7) var(--gouttiere);
}
.carte-publique {
  width: 100%;
  max-width: 27rem;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: var(--jauge-epaisseur) solid var(--lime);
  border-radius: var(--r-lg);
  padding: var(--e-6) var(--e-5);
  box-shadow: var(--ombre-carte);
}
.carte-publique--large { max-width: 38rem; }
.carte-publique h1 { font-size: var(--t-lg); }
.liens-bas {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  font-size: var(--t-sm);
}
.liens-bas--centre { justify-content: center; }

/* --- Second facteur ------------------------------------------------------------------------ */
/* Connexion par code, mise en route et remplacement du second facteur. Un
   seul geste attendu, recopier six chiffres : tout l'écran converge vers les
   cases, le reste s'efface autour. */
.entete-verification { text-align: center; margin-bottom: var(--e-5); }
.entete-verification .texte-secondaire { margin-inline: auto; max-width: 32ch; }

/* Le halo est un anneau de lime très dilué : il porte la charte sans jamais
   porter de texte, donc le contraste ne se pose pas. */
.bouclier {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--e-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--violet);
  color: var(--lime);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--lime) 22%, transparent),
              0 0 0 18px color-mix(in srgb, var(--lime) 9%, transparent);
}
.bouclier svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sans script, le champ libre doit accueillir un code de secours entier. */
.champ--code-libre input { max-width: none; letter-spacing: 0.12em; font-size: 1.25rem; }

/* Six cases dessinées sous un champ réel rendu invisible. Le champ garde le
   focus, le collage et le remplissage automatique ; les cases suivent. */
.carte-publique .champ--code:has(.code-cases) > label,
.carte-publique .champ--code:has(.code-cases) > .aide { text-align: center; }
.code-cases { position: relative; }
.code-cases__rangee {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--e-2);
}
.code-cases__case {
  position: relative;
  flex: 0 1 3rem;
  max-width: 3rem;
  aspect-ratio: 5 / 6;
  display: grid;
  place-items: center;
  font-family: var(--police-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--encre);
  background: var(--creme);
  border: 2px solid var(--trait);
  border-radius: var(--r-md);
  transition: border-color var(--duree-courte) var(--courbe),
              background-color var(--duree-courte) var(--courbe),
              box-shadow var(--duree-courte) var(--courbe);
}
.code-cases__case.est-remplie { background: var(--blanc); border-color: var(--violet-clair); }
.code-cases__case.est-active {
  background: var(--blanc);
  border-color: var(--violet);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 14%, transparent);
}
/* Le curseur clignotant de la case à remplir, comme dans un champ natif. */
.code-cases__case.est-active::after {
  content: '';
  width: 2px;
  height: 45%;
  border-radius: 1px;
  background: var(--violet);
  animation: code-curseur 1s steps(1) infinite;
}
.code-cases__tiret {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 2px;
  border-radius: 1px;
  background: var(--trait);
}
.code-cases:hover .code-cases__case:not(.est-active):not(.est-remplie) { border-color: var(--gris); }
.code-cases.est-complet .code-cases__case {
  border-color: var(--lime-encre);
  background: color-mix(in srgb, var(--lime) 10%, var(--blanc));
}
.code-cases--erreur .code-cases__case { border-color: var(--alerte); background: var(--alerte-fond); }
.code-cases--erreur .code-cases__rangee { animation: code-secousse 360ms var(--courbe); }

.code-cases__saisie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px; /* sous 16px, Safari sur iPhone zoome la page au focus */
  cursor: text;
}

/* Saisie d'un code de secours : les cases s'effacent, le vrai champ revient. */
.code-cases--secours .code-cases__rangee { display: none; }
.code-cases--secours .code-cases__saisie {
  position: static;
  opacity: 1;
  min-height: 44px;
  font-family: var(--police-mono);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  text-align: center;
}

.carte-publique .code-cases__rangee { justify-content: center; }

@keyframes code-curseur { 50% { opacity: 0; } }
@keyframes code-secousse {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.bouton--plein { width: 100%; }

/* Un lien qui agit sur la page sans en changer : un bouton, habillé en lien. */
.lien-bouton {
  justify-self: center;
  min-height: 32px;
  padding: 0 var(--e-2);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--violet) 40%, transparent);
  cursor: pointer;
}
.lien-bouton:hover { text-decoration-color: currentColor; }

/* Fil des étapes de la mise en route : pastille numérotée, cochée une fois
   l'étape franchie. L'état est dit par le mot autant que par la couleur. */
.etapes {
  list-style: none;
  margin: 0 0 var(--e-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2);
}
.etapes__etape {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--gris);
  min-width: 0;
}
.etapes__pastille {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--creme-ombre);
  color: var(--gris);
}
.etapes__libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etapes__etape--en-cours { border-color: var(--violet); color: var(--violet); background: var(--info-fond); }
.etapes__etape--en-cours .etapes__pastille { background: var(--violet); color: var(--creme); }
.etapes__etape--faite { color: var(--encre); }
.etapes__etape--faite .etapes__pastille { background: var(--lime); color: var(--sur-lime); }
@media (max-width: 30em) {
  .etapes__etape { justify-content: center; }
  .etapes__etape:not(.etapes__etape--en-cours) .etapes__libelle { display: none; }
}

/* Les deux temps de l'activation, numérotés dans la carte. */
.pas { margin-top: var(--e-5); }
.pas__titre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-md);
}
.pas__numero {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--violet);
  color: var(--lime);
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
}
.formulaire.pas > .pas__titre { margin-bottom: 0; }

.secret-copiable { display: flex; align-items: stretch; gap: var(--e-2); margin-bottom: var(--e-3); }
.secret-copiable .secret { flex: 1; margin: 0; word-break: normal; overflow-wrap: anywhere; }
.secret-copiable .bouton { align-self: center; }
.secret-copiable .bouton.est-fait { border-color: var(--succes); color: var(--succes); }

/* L'encadré « bon à savoir » en pied de carte : la jauge de la charte, en rose. */
.astuce {
  margin-top: var(--e-5);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  border-left: var(--jauge-epaisseur) solid var(--rose);
  background: color-mix(in srgb, var(--rose) 12%, var(--blanc));
  font-size: var(--t-sm);
  color: var(--encre);
}
.astuce__titre {
  display: block;
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--e-1);
}


/* =============================================================================
   Lot 1 : demandes, organisations, projets, documents
   ============================================================================= */

/* Champ de fichier : le bouton natif est gardé, il est le seul que tous les
   lecteurs d'écran annoncent correctement. Seul son cadre est aligné sur les
   autres champs. */
.champ input[type='file'] {
  width: 100%;
  padding: var(--e-2);
  font-family: var(--police-corps);
  font-size: var(--t-sm);
  background: var(--creme);
  border: 2px dashed var(--trait);
  border-radius: var(--r-md);
}
.champ input[type='file']:focus { border-color: var(--violet); }

/* Vues d'une liste : de simples liens, l'actif marqué par aria-current. */
.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
  padding: 0;
  list-style: none;
}
.onglets a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 40px;
  padding: var(--e-1) var(--e-4);
  border: 2px solid var(--trait);
  border-radius: var(--r-pilule);
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--violet);
  text-decoration: none;
  background: var(--blanc);
}
.onglets a:hover { border-color: var(--violet); }
.onglets a[aria-current='page'] { background: var(--violet); border-color: var(--violet); color: var(--creme); }
.onglets__nombre {
  font-family: var(--police-mono);
  font-size: var(--t-xs);
  font-weight: 400;
}

/* Le fil d'une demande : du plus récent au plus ancien. */
.fil { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.fil__ligne {
  border-left: 3px solid var(--trait);
  padding: var(--e-1) 0 var(--e-1) var(--e-4);
}
.fil__ligne--saisie { border-left-color: var(--lime-encre); }
.fil__entete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  align-items: baseline;
  font-size: var(--t-sm);
  color: var(--gris);
  margin-bottom: var(--e-1);
}
.fil__type {
  font-family: var(--police-ui);
  font-weight: 700;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--violet);
}
.fil__ligne--automatique { font-size: var(--t-sm); color: var(--gris); }

/* Texte saisi par quelqu'un d'autre : ses retours à la ligne sont gardés. */
.texte-saisi { white-space: pre-wrap; overflow-wrap: anywhere; }

.en-retard { color: var(--alerte); font-weight: 600; }

/* Formulaires repliés : <details> s'ouvre au clavier et sans script. */
.repli { border-top: 1px solid var(--trait); padding-top: var(--e-3); margin-top: var(--e-4); }
.repli > summary {
  cursor: pointer;
  font-family: var(--police-ui);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--violet);
  min-height: 32px;
}
.repli[open] > summary { margin-bottom: var(--e-3); }

/* Choix exclusifs présentés en blocs : chaque option est un cadre entier. */
.choix { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.choix > legend {
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--violet);
  margin-bottom: var(--e-2);
}
.choix__option {
  border: 2px solid var(--trait);
  border-radius: var(--r-md);
  padding: var(--e-3) var(--e-4);
}
.choix__option:has(input[type='radio']:checked) { border-color: var(--violet); background: var(--creme); }
.choix__option > label {
  display: flex;
  gap: var(--e-3);
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.choix__option input[type='radio'] { width: 20px; height: 20px; accent-color: var(--violet); }
.choix__detail { margin-top: var(--e-3); display: grid; gap: var(--e-3); }

/* Colonne de cases à cocher d'un tableau trié en lot. */
.tableau .colonne-case { width: 2.5rem; text-align: center; }
.tableau .colonne-case input { width: 20px; height: 20px; accent-color: var(--violet); }

/* Liste de fichiers à télécharger. */
.fichiers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.fichiers__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  align-items: baseline;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--trait);
}
.fichiers__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.fichiers__titre { font-weight: 600; }
.fichiers__meta { font-size: var(--t-sm); color: var(--gris); }

.versions { margin: var(--e-2) 0 0; padding-left: var(--e-4); font-size: var(--t-sm); }
.versions li + li { margin-top: var(--e-1); }

/* L'aide d'une case à cocher s'aligne sous son libellé, pas sous la case. */
.champ--case .aide { grid-column: 2; }

/* ==========================================================================
   Lot 2 : devis et factures
   ========================================================================== */

/* Mêmes quatre tons qu'au lot 1, doublés du mot : à traiter (violet), en
   attente (orangé), abouti (vert), fermé (gris). Le rouge dit l'échec ou le
   retard. */
.etiquette--envoye, .etiquette--a_payer {
  background: var(--attention-fond); border-color: var(--attention); color: #5a3600;
}
.etiquette--brouillon { background: var(--info-fond); border-color: var(--violet); color: var(--violet); }
.etiquette--accepte, .etiquette--payee { background: var(--succes-fond); border-color: var(--succes); color: #123f22; }
.etiquette--refuse, .etiquette--en_retard { background: var(--alerte-fond); border-color: var(--alerte); color: #5e1c1c; }
.etiquette--expire, .etiquette--remplace, .etiquette--annulee {
  background: var(--creme-ombre); border-color: var(--gris); color: #4f4760;
}

/* Les montants s'alignent à droite, en chiffres de même largeur : une colonne
   d'euros se lit d'un coup d'œil quand les virgules tombent les unes sous les
   autres. */
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau th.nombre, .tableau td.nombre { text-align: right; }

.grille + .grille, .grille + .panneau, .panneau + .grille { margin-top: var(--e-4); }

.compteur--texte { font-size: 1.35rem; line-height: 1.2; }
.panneau--alerte { border-left: var(--jauge-epaisseur) solid var(--alerte); }
.compteur-montant { font-size: var(--t-md); }

/* Le tableau des prestations reprend la hiérarchie du PDF : section en
   petites capitales marquées de lime, net à payer sur fond violet. */
.tableau--devis tbody tr:hover { background: transparent; }
.tableau--devis tbody th { font-weight: 600; color: var(--encre); }
.tableau--devis tbody th .texte-secondaire { font-weight: 400; font-size: var(--t-sm); }
.tableau .tableau__section th {
  text-align: left;
  padding-top: var(--e-4);
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-clair);
  border-bottom: 0;
}
.tableau__section th::before {
  content: '';
  display: inline-block;
  width: 1.1rem;
  height: 0.35rem;
  margin-right: var(--e-2);
  border-radius: var(--r-pilule);
  background: var(--lime);
  vertical-align: middle;
}
.tableau--devis tfoot th, .tableau--devis tfoot td { text-align: right; color: var(--violet-clair); }
.tableau--devis tfoot td { color: var(--encre); font-weight: 600; }
.tableau__net th, .tableau__net td {
  background: var(--violet-deep);
  color: var(--creme) !important;
  border-bottom: 0;
}
.tableau__net td { font-family: var(--police-titre); font-size: var(--t-lg); color: var(--lime) !important; }
.tableau__net th { border-radius: var(--r-md) 0 0 var(--r-md); }
.tableau__net td { border-radius: 0 var(--r-md) var(--r-md) 0; }

.faits--serres { margin-top: var(--e-4); gap: var(--e-2) var(--e-5); }

/* Les options : un second tableau sous le net, en retrait, puisqu'elles n'y
   entrent pas. Une option retenue rejoint les prestations, marquée de lime. */
.tableau-cadre + .tableau-cadre { margin-top: var(--e-5); }
.tableau--options tbody th, .tableau--options td { color: var(--violet-clair); }
.etiquette--option {
  background: var(--lime-soft); border-color: var(--lime-encre); color: var(--encre);
  margin-left: var(--e-2); font-weight: 600; vertical-align: middle;
}
.options-devis { display: grid; gap: var(--e-2); }
.options-devis label .nombre { font-weight: 600; }
.options-devis__total { margin: var(--e-3) 0 0; font-size: var(--t-md); }

.empreinte {
  font-family: var(--police-mono);
  font-size: var(--t-xs);
  overflow-wrap: anywhere;
}

/* L'éditeur : une fiche par ligne de devis, numérotée, avec son montant
   en face de sa désignation, comme sur le PDF. */
.lignes-devis { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-3); }
.ligne-devis fieldset {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--trait);
  border-left: var(--jauge-epaisseur) solid var(--violet-clair);
  border-radius: var(--r-md);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
  background: var(--blanc);
  transition: border-color var(--duree-courte) var(--courbe), box-shadow var(--duree-courte) var(--courbe);
}
.ligne-devis fieldset:focus-within { box-shadow: var(--ombre-carte); }
.ligne-devis--vierge fieldset { border-left-color: var(--trait); background: var(--creme); }
.ligne-devis--option fieldset { border-left-color: var(--lime-encre); border-left-style: dashed; }
.ligne-devis--erreur fieldset { border-left-color: var(--alerte); }
.ligne-devis--arrivee fieldset { animation: ligne-arrivee 420ms var(--courbe); }
@keyframes ligne-arrivee {
  from { opacity: 0; transform: translateY(-6px); background: var(--lime-soft); }
  to { opacity: 1; transform: none; background: var(--blanc); }
}

.ligne-devis__tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-2) var(--e-3);
  align-items: end;
}
.ligne-devis__numero {
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  margin-top: 1.4rem;
  border-radius: var(--r-pilule);
  background: var(--info-fond);
  color: var(--violet);
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ligne-devis__designation input { font-weight: 600; }
.ligne-devis__montant {
  grid-column: 2;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-variant-numeric: tabular-nums;
}
.ligne-devis__montant-libelle { font-family: var(--police-ui); font-size: var(--t-xs); color: var(--gris); }
.ligne-devis__montant strong { font-size: var(--t-md); color: var(--encre); white-space: nowrap; }
.ligne-devis__montant .etiquette--option { margin-left: 0; }
.ligne-devis__outils { grid-column: 1 / -1; display: flex; gap: var(--e-1); justify-content: flex-end; }

.bouton-outil {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--violet);
  cursor: pointer;
  transition: background-color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.bouton-outil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bouton-outil:hover { border-color: var(--violet); background: var(--info-fond); }
.bouton-outil--danger { color: var(--alerte); }
.bouton-outil--danger:hover { border-color: var(--alerte); background: var(--alerte-fond); }
.bouton-outil:disabled { opacity: 0.35; cursor: default; border-color: var(--trait); background: var(--blanc); }

.ligne-devis__chiffres { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ligne-devis .champ { margin: 0; }
.ligne-devis textarea { min-height: 4.5rem; }
.ligne-devis__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
}
.ligne-devis__pied .champ--case { flex: 1 1 18rem; }
.ligne-devis__remise { flex: 1 1 18rem; }
.ligne-devis__remise summary {
  cursor: pointer;
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--violet);
}
.ligne-devis__remise-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-2); }

@media (min-width: 720px) {
  .ligne-devis__tete { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .ligne-devis__montant { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 0; min-width: 7.5rem; padding-bottom: var(--e-1); }
  .ligne-devis__outils { grid-column: auto; padding-bottom: 4px; }
  .ligne-devis__chiffres { grid-template-columns: 0.7fr 0.9fr 1.1fr 1.6fr; }
}

.lignes-devis__vide { margin: 0 0 var(--e-4); padding: var(--e-5); border: 1px dashed var(--trait); border-radius: var(--r-md); text-align: center; color: var(--gris); }
.lignes-devis__ajout { margin-bottom: var(--e-5); }
.bouton--ajout {
  width: 100%;
  border: 2px dashed var(--violet-clair);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--violet);
  min-height: 52px;
}
.bouton--ajout svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.bouton--ajout:hover { background: var(--info-fond); border-style: solid; }

/* Les totaux, recalculés à la frappe sous les lignes. */
.totaux-devis {
  margin: 0 0 0 auto;
  max-width: 24rem;
  display: grid;
  gap: var(--e-2);
  font-variant-numeric: tabular-nums;
}
.totaux-devis div { display: flex; justify-content: space-between; gap: var(--e-4); }
.totaux-devis dt { color: var(--gris); }
.totaux-devis dd { margin: 0; font-weight: 600; }
.totaux-devis__net { padding-top: var(--e-2); border-top: 2px solid var(--violet); font-size: var(--t-md); }
.totaux-devis__net dt { color: var(--encre); font-weight: 700; }
.totaux-devis__net dd { font-weight: 800; }

/* Ce qui reste en poche : pour l'administration seule, jamais imprimé. */
.totaux-devis--poche {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-left: var(--jauge-epaisseur) solid var(--lime);
  border-radius: var(--r-md);
  background: var(--creme-ombre);
}
.totaux-devis--poche .totaux-devis__net { border-top-color: var(--lime-encre); }

/* La barre d'enregistrement suit l'écran tant que le formulaire est visible. */
.barre-enregistrement {
  position: sticky;
  bottom: var(--e-3);
  z-index: 5;
  margin-top: var(--e-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait);
  border-left: var(--jauge-epaisseur) solid var(--lime);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--blanc) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--ombre-carte);
}
.barre-enregistrement--modifiee { border-left-color: var(--rose); }
/* Le bloc d'émission, en tête de l'éditeur : une bande, pas un panneau. */
.emission {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  margin-bottom: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: var(--jauge-epaisseur) solid var(--lime);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-basse);
}
.emission--bloquee { border-left-color: var(--alerte); }
.emission__corps { min-width: 0; flex: 1 1 28rem; }
.emission__titre { margin: 0 0 var(--e-2); font-size: var(--t-md); }
.emission__reperes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  font-size: var(--t-xs);
}
.emission__reperes li {
  padding: 2px var(--e-2);
  border-radius: var(--r-pilule);
  background: var(--creme-ombre);
  color: var(--encre);
}
.emission__reperes .emission__repere--attention { background: var(--attention-fond); color: #5a3600; font-weight: 600; }
.emission__reperes .emission__repere--alerte { background: var(--alerte-fond); color: #5e1c1c; font-weight: 600; }
.emission__repere--alerte a { color: inherit; }
.emission__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }

.barre-enregistrement__etat { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-4); }
.barre-enregistrement__net { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.barre-enregistrement__poche { color: var(--gris); }
.barre-enregistrement__poche strong { color: var(--encre); }
.barre-enregistrement__options { font-size: var(--t-sm); color: var(--gris); font-variant-numeric: tabular-nums; }
.barre-enregistrement__options strong { color: var(--encre); }
.barre-enregistrement__statut { font-size: var(--t-sm); color: var(--gris); }
.barre-enregistrement--modifiee .barre-enregistrement__statut { color: var(--alerte); font-weight: 600; }
.annonce-ligne {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
}
.annonce-ligne__annuler {
  padding: 0;
  border: 0;
  background: none;
  color: var(--violet);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Marquer une facture payée : la date et le bouton sur une seule ligne. */
.formulaire-paiement { display: inline-flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.formulaire-paiement input[type='date'] {
  font: inherit;
  font-size: var(--t-sm);
  padding: 4px var(--e-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
}

/* --- Lot 3 : suivi et livrables ------------------------------------------- */

/* L'avancement : une barre native, que les lecteurs d'écran annoncent d'eux-
   mêmes, et le pourcentage écrit à côté, pour ne rien confier à la couleur. */
.avancement {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  gap: var(--e-2) var(--e-3);
  align-items: center;
  margin-bottom: var(--e-4);
}
.avancement label { font-weight: 600; }
.avancement progress {
  width: 100%;
  height: 0.75rem;
  appearance: none;
  border: 1px solid var(--violet);
  border-radius: var(--r-pilule);
  background: var(--creme-ombre);
  overflow: hidden;
}
.avancement progress::-webkit-progress-bar { background: var(--creme-ombre); }
.avancement progress::-webkit-progress-value { background: var(--violet); }
.avancement progress::-moz-progress-bar { background: var(--violet); }
.avancement__texte { font-size: var(--t-sm); color: var(--gris); font-variant-numeric: tabular-nums; }
@media (max-width: 519px) {
  .avancement { grid-template-columns: 1fr; }
}

/* Les jalons, comme une frise verticale : le trait relie les étapes, la
   pastille se remplit quand l'étape est franchie. L'état est aussi écrit en
   toutes lettres dans l'étiquette. */
.suivi { list-style: none; margin: 0; padding: 0; }
.suivi__jalon {
  position: relative;
  padding: 0 0 var(--e-4) var(--e-5);
  border-left: 2px solid var(--trait);
  margin-left: var(--e-2);
}
.suivi__jalon:last-child { border-left-color: transparent; }
.suivi__jalon::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0.3rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--violet);
  background: var(--blanc);
}
.suivi__jalon--franchi::before { background: var(--violet); }
.suivi__tete { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: baseline; }
.suivi__titre { font-weight: 600; color: var(--encre); }
.suivi__livrables {
  list-style: none;
  margin: var(--e-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}
.suivi__livrable {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  align-items: baseline;
  padding: var(--e-2) var(--e-3);
  background: var(--creme);
  border-radius: var(--r-sm);
}
.suivi__intertitre { font-size: var(--t-md); margin-top: var(--e-4); }

.etiquette--attente { background: var(--attention-fond); border-color: var(--attention); color: #5a3600; }
.etiquette--modification { background: var(--info-fond); border-color: var(--violet); color: var(--violet); }
.etiquette--validee, .etiquette--tacite { background: var(--succes-fond); border-color: var(--succes); color: #123f22; }

/* L'historique d'un livrable, de la version la plus récente à la première. */
.historique { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.historique__version {
  border-left: var(--jauge-epaisseur) solid var(--violet-clair);
  padding: var(--e-2) 0 var(--e-2) var(--e-4);
}
.historique__version--retiree { border-left-color: var(--trait); }
.historique__version--retiree .historique__tete a { text-decoration: line-through; }
.historique__version p { margin: 0 0 var(--e-2); }
.historique__decision { margin-top: var(--e-2); }
.historique__commentaire {
  margin: var(--e-2) 0;
  padding: var(--e-3) var(--e-4);
  background: var(--creme);
  border-radius: var(--r-sm);
}

.reponse-livrable {
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  padding: var(--e-4);
  background: var(--blanc);
  align-self: start;
  align-content: start;
}
.reponse-livrable h3 { font-size: var(--t-md); }

.barre-actions--gauche { margin-top: var(--e-2); }
.champ--court input { max-width: 8rem; }

/* --- Lot 4 : messagerie --------------------------------------------------- */

/* Le fil se lit de haut en bas, le plus récent au pied, juste au dessus du
   formulaire. Les messages du Studio et ceux du client se distinguent par le
   filet et le fond, et d'abord par la signature écrite en tête. */
.fil { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.fil__message {
  border-left: var(--jauge-epaisseur) solid var(--trait);
  padding: var(--e-3) var(--e-4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  scroll-margin-top: var(--e-6);
}
.fil__message--studio { border-left-color: var(--violet); background: var(--creme); }
.fil__message--client { border-left-color: var(--lime-encre); background: var(--blanc); }
.fil__message:target { outline: 2px solid var(--violet); outline-offset: 2px; }
.fil__tete { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline; margin: 0 0 var(--e-2); }
.fil__auteur { color: var(--encre); }
.fil__corps { margin: 0; max-width: var(--largeur-texte); }
.fil__pieces {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: var(--e-2) 0 0;
  border-top: 1px dashed var(--trait);
  display: grid;
  gap: var(--e-2);
}
.fil__pieces li { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline; }
.fil__anciens { margin: 0 0 var(--e-4); }

/* Le repère des nouveaux messages : un trait et un mot, jamais la couleur seule. */
.fil__repere {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--violet);
  scroll-margin-top: var(--e-6);
}
.fil__repere::before, .fil__repere::after { content: ''; flex: 1; border-top: 2px solid var(--violet); }

.etiquette--nouveau { background: var(--lime-soft); border-color: var(--lime-encre); color: var(--encre); }

/* ==========================================================================
   Lot 5 : questionnaires
   ========================================================================== */

/* L'attribut hidden doit l'emporter sur les display des blocs qu'il masque :
   c'est par lui que le script retire une question sans objet. */
[hidden] { display: none !important; }

.questions, .reponses, .constructeur { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); }

.question { display: grid; gap: var(--e-2); padding-bottom: var(--e-5); border-bottom: 1px solid var(--trait); }
.question:last-child { border-bottom: 0; padding-bottom: 0; }
.question .choix > legend { font-size: var(--t-base); }
.question > .champ > label { font-size: var(--t-base); }
.question__condition { color: var(--lime-encre); font-weight: 600; }

/* Une section : un intertitre qui ouvre un bloc, sans trait au-dessous. */
.question--section { gap: var(--e-1); padding-top: var(--e-3); padding-bottom: 0; border-bottom: 0; }
.question--section p { margin: 0; }
.question__section { margin: 0; font-size: var(--t-lg); color: var(--violet); }
.reponses__section { padding-top: var(--e-3); }
.reponses__section p { margin: var(--e-1) 0 0; }
.question__auteur { margin: 0; font-size: var(--t-xs); color: var(--gris); }
.champ__nombre { max-width: 14rem; }

/* Les cases d'un choix multiple prennent le même cadre que les boutons
   radio, et le même signe une fois cochées. */
.choix__option input[type='checkbox'] { width: 20px; height: 20px; accent-color: var(--violet); }
.choix__option:has(input[type='checkbox']:checked) { border-color: var(--violet); background: var(--creme); }
.choix__option--sans > label { font-weight: 400; color: var(--gris); }

.liste-erreurs { margin: var(--e-2) 0 0; padding-left: var(--e-5); }
.liste-erreurs a { color: inherit; font-weight: 600; }

.reponses__ligne { padding-bottom: var(--e-4); border-bottom: 1px solid var(--trait); }
.reponses__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.reponses__ligne p { margin: 0 0 var(--e-1); }
.reponses__question { font-weight: 600; color: var(--violet); }
.reponses__valeur { max-width: var(--largeur-texte); }
.reponses__options { margin: 0 0 var(--e-1); padding-left: var(--e-5); }

/* Le constructeur : chaque question tient en une ligne, son rang en pastille
   comme les articles des conditions générales. */
.constructeur { gap: var(--e-4); }
.constructeur__question { border: 2px solid var(--trait); border-radius: var(--r-md); padding: var(--e-3) var(--e-4); background: var(--blanc); }
.constructeur__tete { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-start; }
.constructeur__rang {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 1.6rem; padding: 0 var(--e-2);
  border-radius: var(--r-pilule);
  background: var(--lime); color: var(--violet-deep);
  font-family: var(--police-titre); font-weight: 600;
}
.constructeur__texte { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.constructeur__gestes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.constructeur__question .repli { margin-top: var(--e-3); }
.constructeur__question--section { background: var(--creme); border-color: var(--violet); }
.constructeur__question--section .constructeur__rang { background: var(--violet); color: var(--blanc); font-size: var(--t-xs); }

.repli--sans-trait { border-top: 0; padding-top: 0; margin-top: 0; }
.apercu { margin-top: var(--e-4); padding: var(--e-4); border: 2px dashed var(--trait); border-radius: var(--r-md); }

/* Les états d'un questionnaire, sur les quatre tons des lots précédents. */
.etiquette--q-preparation { background: var(--info-fond); border-color: var(--violet); color: var(--violet); }
.etiquette--q-a_remplir, .etiquette--q-en_cours, .etiquette--q-modifie {
  background: var(--attention-fond); border-color: var(--attention); color: #5a3600;
}
.etiquette--q-envoye { background: var(--succes-fond); border-color: var(--succes); color: #123f22; }
.etiquette--q-fige { background: var(--creme-ombre); border-color: var(--gris); color: #4f4760; }
.aide.mesure + .formulaire { margin-top: var(--e-5); }

/* --- Temps passé et rentabilité ---------------------------------------------
   Trois paliers, chacun nommé en toutes lettres dans son étiquette : la
   couleur et le filet du panneau redisent le palier, ils ne le portent pas
   seuls. */
.etiquette--r-atteint { background: var(--succes-fond); border-color: var(--succes); color: #123f22; }
.etiquette--r-surveiller { background: var(--attention-fond); border-color: var(--attention); color: #5a3600; }
.etiquette--r-dessous { background: var(--alerte-fond); border-color: var(--alerte); color: #5e1c1c; }

/* Pilotage financier : l'état d'un trimestre à déclarer, le plafond. */
.etiquette--t-a_venir, .etiquette--t-echu { background: var(--creme-ombre); border-color: var(--gris); color: #4f4760; }
.etiquette--t-en_cours { background: var(--info-fond); border-color: var(--violet); color: var(--violet); }
.etiquette--t-a_declarer { background: var(--attention-fond); border-color: var(--attention); color: #5a3600; }
.etiquette--p-loin { background: var(--succes-fond); border-color: var(--succes); color: #123f22; }
.etiquette--p-proche { background: var(--attention-fond); border-color: var(--attention); color: #5a3600; }
.etiquette--p-atteint { background: var(--alerte-fond); border-color: var(--alerte); color: #5e1c1c; }
.jauge--plafond { margin-bottom: var(--e-3); font-size: var(--t-md); font-weight: 700; color: var(--encre); }
.jauge--plafond progress { height: 0.875rem; }
.jauge--proche progress::-webkit-progress-value { background: var(--attention); }
.jauge--proche progress::-moz-progress-bar { background: var(--attention); }
.jauge--atteint progress::-webkit-progress-value { background: var(--alerte); }
.jauge--atteint progress::-moz-progress-bar { background: var(--alerte); }
.tableau tr[aria-current="date"] th { color: var(--violet); }
.panneau--r-atteint { border-left: var(--jauge-epaisseur) solid var(--succes); }
.panneau--r-surveiller { border-left: var(--jauge-epaisseur) solid var(--attention); }
.panneau--r-dessous { border-left: var(--jauge-epaisseur) solid var(--alerte); }
.rentabilite__budget { margin: var(--e-4) 0; }

/* ==========================================================================
   Écrans en tuiles : tout voir d'un coup d'œil
   ========================================================================== */

/* --- Tuiles ---------------------------------------------------------------- */
/* Une tuile est un lien entier : le chiffre, ce qu'il compte, et où il mène.
   Elles se placent d'elles-mêmes, autant par ligne que l'écran en tient. */
.tuiles {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.25rem), 1fr));
  margin: 0 0 var(--e-5);
  padding: 0;
  list-style: none;
}
.tuiles > li { display: grid; min-width: 0; }

.tuile {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-2);
  min-height: 8rem;
  padding: var(--e-4);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-basse);
  color: var(--encre);
  text-decoration: none;
  transition: border-color var(--duree-courte) var(--courbe),
              box-shadow var(--duree-courte) var(--courbe),
              transform var(--duree-courte) var(--courbe);
}
a.tuile:hover {
  border-color: var(--violet-clair);
  box-shadow: var(--ombre-carte);
  transform: translateY(-2px);
}
.tuile__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}
.tuile__libelle {
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  line-height: 1.3;
  min-width: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}
.tuile__icone {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--info-fond);
  color: var(--violet);
}
.tuile__icone .icone { width: 1.15rem; height: 1.15rem; }
.tuile__chiffre {
  align-self: end;
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1;
  color: var(--violet);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.tuile__chiffre--long { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.15; }
.tuile__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--gris);
  line-height: 1.35;
}
.tuile__pied .icone { width: 1rem; height: 1rem; color: var(--violet); opacity: 0; transition: opacity var(--duree-courte) var(--courbe); }
a.tuile:hover .tuile__pied .icone, a.tuile:focus-visible .tuile__pied .icone { opacity: 1; }

/* Les tons, chacun redit par le mot du libellé : « à traiter », « en retard ». */
.tuile--action { border-left: var(--jauge-epaisseur) solid var(--lime); }
.tuile--action .tuile__icone { background: var(--lime-soft); color: var(--violet-deep); }
.tuile--alerte { border-left: var(--jauge-epaisseur) solid var(--alerte); }
.tuile--alerte .tuile__icone { background: var(--alerte-fond); color: var(--alerte); }
.tuile--alerte .tuile__chiffre { color: var(--alerte); }
.tuile--calme .tuile__chiffre { color: var(--gris); }
.tuile--sombre { background: var(--violet-deep); border-color: var(--violet-deep); color: var(--creme); }
.tuile--sombre .tuile__libelle, .tuile--sombre .tuile__pied { color: color-mix(in srgb, var(--creme) 75%, var(--violet-deep)); }
.tuile--sombre .tuile__chiffre { color: var(--lime); }
.tuile--sombre .tuile__icone { background: color-mix(in srgb, var(--creme) 12%, transparent); color: var(--lime); }
.tuile--sombre .tuile__pied .icone { color: var(--lime); }

/* --- Dispositions ------------------------------------------------------------ */
/* Deux colonnes, l'essentiel à gauche, le contexte à droite ; une seule sous
   1100 px. Les panneaux d'une colonne s'empilent sans marge propre. */
.disposition {
  display: grid;
  gap: var(--e-4);
  align-items: start;
  margin-bottom: var(--e-4);
}
.disposition > * { min-width: 0; }
.colonne { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-content: start; min-width: 0; container-type: inline-size; }
.disposition .panneau { padding: var(--e-4) var(--e-5); }

/* Dans une colonne étroite, les champs côte à côte s'empilent : c'est la
   largeur de la colonne qui compte, pas celle de l'écran. */
@container (max-width: 36rem) {
  .grille--2, .grille--3 { grid-template-columns: minmax(0, 1fr); }
  .faits { grid-template-columns: minmax(0, 1fr); gap: var(--e-1) 0; }
  .faits dd + dt { margin-top: var(--e-2); }
}
.colonne > .panneau + .panneau, .disposition .panneau + .panneau { margin-top: 0; }
@media (min-width: 70em) {
  .disposition { grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr); }
  .disposition--egale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disposition--etroite-gauche { grid-template-columns: minmax(19rem, 1fr) minmax(0, 2fr); }
}
@media (min-width: 100em) {
  .disposition--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Panneaux juxtaposés, autant par ligne que la largeur le permet. */
.mosaique {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  margin-bottom: var(--e-4);
}
.mosaique > .panneau + .panneau { margin-top: 0; }

/* Les grilles historiques suivent la même logique, en plus large. */
@media (min-width: 1400px) {
  .grille--2.grille--large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Panneau dense : moins de marge, titre plus petit. Pour les tableaux de bord. */
.panneau--dense { padding: var(--e-4); }
.panneau--dense .panneau__entete { margin-bottom: var(--e-3); }
.panneau--dense h2 { font-size: var(--t-md); }
.panneau__entete h2 { display: flex; align-items: center; gap: var(--e-2); }
.panneau__entete h2 .icone { color: var(--violet-clair); }
.panneau__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.panneau__lien .icone { width: 0.95rem; height: 0.95rem; }

/* --- Liste d'actions ----------------------------------------------------------- */
/* Ce qui attend un geste : une ligne par geste, l'icône dit sa nature, le
   lien dit le geste, l'échéance s'aligne à droite. */
.actions-liste { list-style: none; margin: 0; padding: 0; display: grid; container-type: inline-size; }
.actions-liste__ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e-1) var(--e-3);
  align-items: center;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--trait);
}
.actions-liste__ligne:first-child { padding-top: 0; }
.actions-liste__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.actions-liste__icone {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--creme-ombre);
  color: var(--violet);
}
.actions-liste__icone .icone { width: 1.1rem; height: 1.1rem; }
.actions-liste__texte { min-width: 0; display: grid; line-height: 1.35; }
.actions-liste__titre { font-weight: 600; overflow-wrap: anywhere; }
.actions-liste__meta { font-size: var(--t-sm); color: var(--gris); overflow-wrap: anywhere; }
.actions-liste__quand { font-size: var(--t-sm); color: var(--gris); text-align: right; white-space: nowrap; }
.actions-liste__quand.en-retard { color: var(--alerte); }
/* Dans une colonne étroite, l'échéance passe sous le texte. */
@container (max-width: 30rem) {
  .actions-liste__ligne { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .actions-liste__quand { grid-column: 2; text-align: left; white-space: normal; }
  .actions-liste__quand:empty { display: none; }
}

/* --- Cartes de projet ----------------------------------------------------------- */
.cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.carte-projet {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--e-2);
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  background: var(--blanc);
  transition: border-color var(--duree-courte) var(--courbe), box-shadow var(--duree-courte) var(--courbe);
}
.carte-projet:hover { border-color: var(--violet-clair); box-shadow: var(--ombre-basse); }
.carte-projet__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-2); }
.carte-projet__titre { font-family: var(--police-titre); font-size: var(--t-md); color: var(--violet); line-height: 1.2; text-decoration: none; }
/* Toute la carte est cliquable, le lien du titre en reste la seule cible. */
.carte-projet__titre::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.carte-projet__titre:focus-visible { outline: none; }
.carte-projet:has(.carte-projet__titre:focus-visible) { outline: 3px solid var(--violet); outline-offset: 2px; }
.carte-projet__meta { font-size: var(--t-sm); color: var(--gris); margin: 0; }
.carte-projet__suite { font-size: var(--t-sm); margin: 0; align-self: end; }
.carte-projet__suite strong { color: var(--violet); }
.carte-projet .etiquette { position: relative; z-index: 1; }

/* Jauge d'avancement compacte : barre native et pourcentage écrit. */
.jauge {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--gris);
}
.jauge progress {
  flex: 1;
  height: 0.5rem;
  appearance: none;
  border: 0;
  border-radius: var(--r-pilule);
  background: var(--creme-ombre);
  overflow: hidden;
}
.jauge progress::-webkit-progress-bar { background: var(--creme-ombre); border-radius: var(--r-pilule); }
.jauge progress::-webkit-progress-value { background: var(--lime-encre); border-radius: var(--r-pilule); }
.jauge progress::-moz-progress-bar { background: var(--lime-encre); border-radius: var(--r-pilule); }

/* --- Bandeau d'alertes ----------------------------------------------------------- */
.alertes { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.alerte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--attention);
  border-left-width: var(--jauge-epaisseur);
  border-radius: var(--r-md);
  background: var(--attention-fond);
  color: #5a3600;
  font-size: var(--t-sm);
}
.alerte > .icone { color: var(--attention); }
.alerte__texte { flex: 1 1 20rem; min-width: 0; }
.alerte__texte strong { margin-right: var(--e-1); }
.alerte a { color: inherit; font-weight: 700; }

/* --- Journal compact --------------------------------------------------------------- */
.evenements { list-style: none; margin: 0; padding: 0; display: grid; }
.evenements li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm);
}
.evenements li:last-child { border-bottom: 0; }
.evenements code { color: var(--violet); overflow-wrap: anywhere; }
.evenements__qui { grid-column: 1; color: var(--gris); font-size: var(--t-xs); }
.evenements time { grid-row: 1 / span 2; grid-column: 2; color: var(--gris); font-size: var(--t-xs); text-align: right; white-space: nowrap; }

/* L'en-tête de page, plus compact dans l'application : le menu porte déjà le
   repère, le titre n'a plus besoin de s'imposer. */
.appli .entete-page { margin-bottom: var(--e-4); }
.appli .jauge-titre { margin-bottom: 0; margin-top: var(--e-2); width: 72px; height: 5px; }
.entete-page__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

/* Ce qui suit la jauge (étiquette d'état, ligne de contexte) s'en détache :
   collé dessous, il se lirait comme une partie de la jauge. */
.entete-page__titres > .jauge-titre + * { margin-top: var(--e-3); }
.entete-page__titres > p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.entete-page__titres > p.texte-secondaire { display: block; }


/* ==========================================================================
   Rythme vertical
   Les blocs empilés dans un panneau (formulaire, tableau, aide, barre
   d'actions) prennent tous le même écart, au lieu de dépendre de la marge
   propre de chacun, qui manque souvent. Les paragraphes qui se suivent
   gardent leur interligne de texte, et ce qui suit un titre reste proche de
   lui.
   ========================================================================== */
.panneau > * + *,
.carte-publique > * + *,
.repli > :not(summary) + * { margin-top: var(--e-4); }
.panneau > p + p,
.carte-publique > p + p,
.panneau > :is(h1, h2, h3, h4):not(.lecture-seule) + *,
.carte-publique > :is(h1, h2, h3, h4) + *,
.panneau > .lecture-seule:first-child + *,
.panneau > [type='hidden'] + * { margin-top: 0; }
.panneau > * + :is(h2, h3, h4) { margin-top: var(--e-5); }
.panneau > .panneau__entete + * { margin-top: 0; }
.carte-publique > .liens-bas { margin-top: var(--e-5); }

/* Séparateur : un filet seul, à égale distance de ce qu'il sépare. */
.repli:empty,
.panneau > .repli:empty { margin-block: var(--e-5); padding-top: 0; }
.panneau > .repli:empty + * { margin-top: 0; }

/* Ce qui suit un tableau (actions groupées, note, pagination) s'en détache. */
.tableau-cadre + :is(.filtres, .barre-actions, p, .aide, .pagination, form) { margin-top: var(--e-4); }

.ligne-devis__montant .etiquette--option { margin-top: var(--e-1); }


/* ==========================================================================
   Graphiques
   ========================================================================== */
.serie-1 { fill: var(--serie-1); background: var(--serie-1); }
.serie-2 { fill: var(--serie-2); background: var(--serie-2); }
.serie-neutre { fill: var(--serie-neutre); background: var(--serie-neutre); }

.graphique { margin: 0; display: grid; gap: var(--e-2); }
.graphique__svg { width: 100%; height: auto; overflow: visible; }
.graphique__svg--etroit { display: none; }
@container (max-width: 34rem) {
  .graphique__svg--large { display: none; }
  .graphique__svg--etroit { display: block; }
}
.graphique__grille { stroke: var(--trait); stroke-width: 1; }
.graphique__base { stroke: var(--gris); }
.graphique__axe { fill: var(--gris); font-family: var(--police-ui); font-size: 11px; }
.graphique__survol { fill: transparent; }
.graphique__colonne:hover .graphique__survol { fill: var(--creme-ombre); }
.graphique__barre { transition: opacity var(--duree-courte) var(--courbe); }
.graphique__svg:hover .graphique__barre { opacity: 0.55; }
.graphique__svg .graphique__colonne:hover .graphique__barre { opacity: 1; }

.graphique__resume { margin: calc(-1 * var(--e-1)) 0 var(--e-2); font-size: var(--t-sm); color: var(--gris); }
.graphique__resume strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.graphique__resume--pied { margin: var(--e-3) 0 0; }

.graphique__donnees > summary {
  cursor: pointer;
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--violet-clair);
  width: max-content;
}
.graphique__donnees[open] > summary { margin-bottom: var(--e-2); }

.legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--encre);
}
.legende li { display: inline-flex; align-items: center; gap: var(--e-2); }
.legende__pastille { width: 0.75rem; height: 0.75rem; border-radius: 3px; }

/* Barres horizontales : chaque ligne est un lien vers la liste filtrée. */
.repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.repartition__ligne {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-1) var(--e-2);
  margin: 0 calc(-1 * var(--e-2));
  border-radius: var(--r-sm);
  color: var(--encre);
  text-decoration: none;
  font-size: var(--t-sm);
}
a.repartition__ligne:hover { background: var(--creme-ombre); }
.repartition__libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repartition__piste {
  width: 100%;
  height: 0.75rem;
  border-radius: var(--r-pilule);
  background: var(--creme-ombre);
}
.repartition__valeur { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Un bloc de deux graphiques dans une colonne : côte à côte seulement si la
   colonne est assez large, quelle que soit la taille de l'écran. */
.disposition--imbriquee { margin: 0; grid-template-columns: minmax(0, 1fr) !important; }
@container (min-width: 38rem) {
  .disposition--imbriquee { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Projets en cours, en liste compacte. */
.projets-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.projets-mini__lien {
  display: grid;
  gap: 2px;
  padding: var(--e-2);
  margin: 0 calc(-1 * var(--e-2));
  border-radius: var(--r-md);
  color: var(--encre);
  text-decoration: none;
}
.projets-mini__lien:hover { background: var(--creme-ombre); }
.projets-mini__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-2); }
.projets-mini__titre { font-weight: 600; color: var(--violet); line-height: 1.3; }
.projets-mini__meta { font-size: var(--t-xs); color: var(--gris); }
.projets-mini .jauge { margin-top: var(--e-1); }

/* L'agenda : une pastille de date, la nature, le titre. Les cartes se
   rangent en autant de colonnes que la largeur le permet. */
.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.agenda__ligne {
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  color: var(--encre);
  text-decoration: none;
  transition: border-color var(--duree-courte) var(--courbe), background-color var(--duree-courte) var(--courbe);
}
.agenda__ligne:hover { border-color: var(--violet-clair); background: var(--creme); }
.agenda__date {
  width: 3rem;
  display: grid;
  justify-items: center;
  padding: var(--e-1) 0;
  border-radius: var(--r-sm);
  background: var(--info-fond);
  color: var(--violet);
  line-height: 1.1;
}
.agenda__jour { font-family: var(--police-titre); font-size: var(--t-lg); }
.agenda__mois { font-family: var(--police-ui); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; }
.agenda__texte { display: grid; gap: 1px; min-width: 0; }
.agenda__nature {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-family: var(--police-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gris);
}
.agenda__nature .icone { width: 0.9rem; height: 0.9rem; }
.agenda__titre { font-weight: 600; overflow-wrap: anywhere; }
.agenda__detail { font-size: var(--t-sm); color: var(--gris); overflow-wrap: anywhere; }
.agenda__ligne--retard { border-left: var(--jauge-epaisseur) solid var(--alerte); }
.agenda__ligne--retard .agenda__date { background: var(--alerte-fond); color: var(--alerte); }
.agenda__ligne--retard .agenda__nature strong { color: var(--alerte); }

/* ==========================================================================
   Aperçus de site : jeton et commande à copier
   ========================================================================== */

.code-a-copier {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--blanc);
  overflow-wrap: anywhere;
  user-select: all;
}

/* ==========================================================================
   Fiche d'une organisation : frise de la relation et onglets
   ========================================================================== */

/* La frise : de la demande à la facture soldée. Le trait se colore jusqu'à
   l'étape actuelle ; chaque étape dit aussi son état en toutes lettres pour
   les lecteurs d'écran. Sur écran étroit, elle passe à la verticale. */
.frise {
  list-style: none;
  margin: 0 0 var(--e-5);
  padding: var(--e-4) var(--e-3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-basse);
}
.frise__etape { position: relative; min-width: 0; }
.frise__etape::before {
  content: '';
  position: absolute;
  top: calc(1rem - 1.5px);
  left: -50%;
  right: 50%;
  height: 3px;
  background: var(--trait);
}
.frise__etape:first-child::before { display: none; }
.frise__etape--faite::before, .frise__etape--en-cours::before { background: var(--violet); }
.frise__lien {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
  padding: 0 var(--e-1);
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-md);
}
.frise__pastille {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--trait);
  background: var(--blanc);
  color: var(--gris);
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
}
.frise__textes { display: grid; gap: 2px; min-width: 0; }
.frise__libelle {
  font-family: var(--police-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--encre);
}
.frise__detail { font-size: var(--t-xs); color: var(--gris); overflow-wrap: anywhere; }
.frise__lien:hover .frise__libelle { text-decoration: underline; }
.frise__etape--faite .frise__pastille { background: var(--lime); border-color: var(--lime); color: var(--sur-lime); }
.frise__etape--en-cours .frise__pastille {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--creme);
  box-shadow: 0 0 0 4px var(--lime-soft);
}
.frise__etape--en-cours .frise__libelle { color: var(--violet); }
.frise__etape--en-cours .frise__detail { color: var(--violet-clair); font-weight: 600; }
.frise__etape--a-venir .frise__libelle { color: var(--gris); }
@media (max-width: 40em) {
  .frise { grid-auto-flow: row; padding: var(--e-3) var(--e-4); }
  .frise__etape { padding: var(--e-1) 0; }
  .frise__etape::before { top: -50%; bottom: 50%; left: calc(1rem - 1.5px); right: auto; width: 3px; height: auto; }
  .frise__lien { flex-direction: row; align-items: center; gap: var(--e-3); text-align: left; padding: 0; }
}

/* Les onglets de la fiche reprennent ceux des listes ; sans script, ce sont
   des ancres et les rubriques s'enchaînent. */
.onglets a[aria-current='true'] { background: var(--violet); border-color: var(--violet); color: var(--creme); }
.onglets--fiche { padding-bottom: var(--e-4); border-bottom: 1px solid var(--trait); }
.onglet { scroll-margin-top: var(--e-4); }
.onglet + .onglet { margin-top: var(--e-5); }
.fiche-onglets nav { scroll-margin-top: var(--e-4); }
.fiche-onglets .panneau[id] { scroll-margin-top: var(--e-4); }
.etiquette--qualiopi { background: var(--succes-fond); border-color: var(--succes); color: #123f22; }

/* Vue d'ensemble : ce qui attend un geste, la plus pressante d'abord. */
.a-faire { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.a-faire__ligne {
  padding: var(--e-2) var(--e-3);
  border-left: 3px solid var(--violet-clair);
  border-radius: var(--r-sm);
  background: var(--creme);
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}
.a-faire__ligne--alerte { border-left-color: var(--alerte); background: var(--alerte-fond); }
.a-faire__ligne--alerte strong { color: var(--alerte); margin-right: var(--e-1); }

/* Le carnet : de quoi appeler ou écrire sans ouvrir chaque personne. */
.carnet { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.carnet__personne { display: grid; gap: 2px; padding-bottom: var(--e-3); border-bottom: 1px solid var(--trait); }
.carnet__personne:last-child { padding-bottom: 0; border-bottom: 0; }
.carnet__nom { font-weight: 600; }
.carnet__moyens { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-sm); overflow-wrap: anywhere; }

.notes-internes { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ==========================================================================
   Projet : barre de navigation commune à la fiche, au fil et au temps passé
   ========================================================================== */

/* Sur grand écran, la barre reste collée en haut pendant qu'on descend dans
   une rubrique. Les onglets ne passent jamais à la ligne : s'ils manquent de
   place, la barre défile de côté. */
.barre-projet {
  margin: 0 0 var(--e-5);
  padding: var(--e-2) 0;
  background: var(--creme);
  border-bottom: 1px solid var(--trait);
}
.onglets--projet {
  flex-wrap: nowrap;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 2px;
}
.onglets--projet a { white-space: nowrap; }
@media (min-width: 64em) {
  .barre-projet { position: sticky; top: 0; z-index: 20; }
  .fiche-onglets--projet .onglet,
  .fiche-onglets--projet .panneau[id] { scroll-margin-top: 5rem; }
}
.fiche-onglets--projet .barre-projet { scroll-margin-top: 0; }
.onglets__pastille {
  min-width: 1.4em;
  padding: 0 var(--e-1);
  border-radius: var(--r-pilule);
  background: var(--lime);
  color: var(--sur-lime);
  font-family: var(--police-mono);
  font-size: var(--t-xs);
  text-align: center;
}

.prochain-jalon { display: grid; gap: 2px; margin: 0 0 var(--e-3); overflow-wrap: anywhere; }
.prochain-jalon__jauge { width: 100%; }

/* Prospection : les étiquettes d'un prospect, côte à côte, qui passent à la
   ligne plutôt que d'élargir la colonne. */
.etiquettes { display: inline-flex; flex-wrap: wrap; gap: var(--e-1); }
.entete-page__titres .etiquettes { margin-top: var(--e-2); }
/* Un nom de variable se recopie tel quel : il ne passe jamais en capitales,
   même dans l'intitulé d'une liste de faits. */
.faits dt code { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }