/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  LA PORTE (entrer, s'inscrire, les liens) ET L'ESPACE (l'application)    ║
   ║  D'après EnigmaOS : deux volets 5 : 4 sur grand écran, le formulaire     ║
   ║  D'ABORD sur téléphone ; puis une barre latérale blanche, une barre du   ║
   ║  haut, des cartes bordées.                                               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── LA PORTE ────────────────────────────────────────────────────────────── */
.porte { display: grid; grid-template-columns: 5fr 4fr; min-height: 100vh; }
.volet { position: relative; overflow: hidden; background: var(--volet); color: #fff; isolation: isolate; }
.volet::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 38px 38px; }
.halo { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.halo.h-vert { width: 340px; height: 340px; left: -60px; top: -80px;
  background: radial-gradient(closest-side, rgba(54,194,110,.16), rgba(54,194,110,0)); animation: derive-a 40s linear infinite; }
.halo.h-violet { width: 300px; height: 300px; left: 240px; top: 420px;
  background: radial-gradient(closest-side, rgba(99,102,241,.16), rgba(99,102,241,0)); animation: derive-b 57s linear infinite; }
@keyframes derive-a { 0%,100% { transform: translate(0,10px); } 25% { transform: translate(14px,0); } 50% { transform: translate(0,-10px); } 75% { transform: translate(-14px,0); } }
@keyframes derive-b { 0%,100% { transform: translate(16px,0); } 25% { transform: translate(0,12px); } 50% { transform: translate(-16px,0); } 75% { transform: translate(0,-12px); } }
.volet-contenu { min-height: 100%; padding: 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.marque { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.marque-carre { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(90deg, var(--vert), var(--vert-appuye)); color: #fff; }
.marque-carre svg { width: 18px; height: 18px; }
.illustration { display: flex; justify-content: center; }
.illustration img { width: min(340px, 100%); height: auto; }
.promesse h2 { font-size: 30px; font-weight: 500; }
.promesse p { margin-top: 12px; max-width: 34em; color: #c9ced6; line-height: 1.6; }
.chiffres { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 26px 0 0; padding: 0; }
.chiffres div { margin: 0; }
.chiffres dt { font-size: 26px; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; }
.chiffres dd { margin: 2px 0 0; font-size: 11.5px; color: rgba(255,255,255,.52); }
.colonne { display: flex; align-items: center; justify-content: center; background: var(--surface); padding: 40px 44px; }
.cadre { width: 100%; max-width: 460px; }
.cadre .icone-carre { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--vert); color: #fff;
  display: grid; place-items: center; }
.cadre .icone-carre svg { width: 24px; height: 24px; }
.cadre h1 { margin-top: 26px; font-size: 26px; font-weight: 500; }
.cadre .sous-titre { margin-top: 6px; font-size: 13.5px; color: var(--texte-doux); }
.cadre form { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.cadre .btn.large { margin-top: 8px; }
.cadre .bas { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--texte-doux); }
.cadre .message { margin-top: 18px; }
.btn[aria-busy="true"]::before { content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

@media (max-width: 899px) {
  .porte { grid-template-columns: 1fr; }
  .colonne { order: -1; padding: 32px 20px; }
  .volet { min-height: 560px; }
  .volet-contenu { padding: 32px 22px; }
  .promesse h2 { font-size: 24px; }
}

/* ── L'ESPACE — la coquille d'EnigmaOS (app_shell, app_sidebar, app_top_bar) ── */
.espace-app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }

/* Le rail : 236 px, 76 replié. Blanc ; un filet sous l'en-tête et au-dessus du compte.
   La COLONNE du rail descend jusqu'au bas de la page (blanche, bordée) ; son contenu, lui, reste
   collé à la fenêtre. Un rail de 100vh s'arrêtait au bas de l'écran : la page « coupée en bas ». */
.barre { position: relative; align-self: stretch; width: 236px; background: var(--surface); border-right: 1px solid var(--bord);
  z-index: 30; transition: width .2s ease-out; }
.barre-colle { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.barre-tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 12px 16px;
  border-bottom: 1px solid var(--bord); min-height: 69px; }
.barre-tete .marque { color: var(--texte); font-size: 16.5px; font-weight: 600; letter-spacing: .1px; gap: 10px; }
.barre-tete .marque-carre { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--vert); }
.barre-tete .btn.icone { width: 40px; min-height: 40px; color: var(--texte-doux); }
.barre-tete .btn.icone svg { width: 20px; height: 20px; }
/*  (Le porteur, 12 nov. : « le bouton du menu est décalé ».) « FileStoreOS » et son badge ne tiennent pas sur une ligne
    dans 236 px à côté du bouton qui replie le rail : dans le rail, le badge passe SOUS le nom. */
.marque-texte { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barre-tete .marque { min-width: 0; }
.barre-tete .marque-texte { flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.1; }
.barre-tete .badge-console { font-size: 8.5px; padding: 1px 5px; }
.barre { flex: none; }
.badge-console { font-size: 9.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--vert-fonce);
  background: var(--vert-pale); border: 1px solid var(--vert-bord); padding: 2px 6px; border-radius: 6px; }
.barre-corps { flex: 1; overflow-y: auto; padding: 10px 12px; }
.section-menu { padding: 12px 14px 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; color: var(--texte-pale);
  text-transform: uppercase; }
/*  Une entrée : 42 px de haut, 14 px à graisse 550 — la mesure au pixel du rail d'EnigmaOS
    (son « w600 » Flutter s'imprime comme un 550 CSS : même encre, même chasse). */
.tuile { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 10px; color: var(--texte);
  font-weight: 550; font-size: 14px; line-height: 1.25; cursor: pointer; text-decoration: none; border: 0; background: none;
  width: 100%; text-align: left; }
.tuile svg { width: 19px; height: 19px; color: var(--texte-doux); }
.tuile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile:hover { background: var(--surface-alt); text-decoration: none; }
.tuile.actif { background: var(--vert-pale); color: var(--vert-fonce); }
.tuile.actif svg { color: var(--vert-fonce); }
.tuile .compteur { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--vert);
  color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
/* Les entrées de pied : Aide — gris, 13 px, icône 18. */
.tuile.pied { font-weight: 400; font-size: 13px; color: var(--texte-doux); min-height: 36px; padding: 0 12px; }
.tuile.pied svg { width: 18px; height: 18px; }
.ecart-menu { height: 12px; }
/* La carte de l'abonnement : ce que l'entreprise compte, et le SEUL bouton noir de l'écran. */
.forfait { margin: 8px 0 10px; padding: 13px; border: 1px solid var(--bord); border-radius: 12px; background: var(--surface-alt); }
.forfait .titre { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; }
.forfait .titre svg { width: 15px; height: 15px; color: var(--texte-doux); }
.forfait small { color: var(--texte-doux); font-size: 11.5px; display: block; line-height: 1.5; white-space: nowrap; }
.forfait .btn { width: 100%; margin-top: 10px; min-height: 34px; font-size: 12.5px; }
.barre-pied { border-top: 1px solid var(--bord); padding: 8px 12px 16px; display: flex; align-items: center; gap: 10px; }
.barre-pied .avatar { width: 32px; height: 32px; font-size: 12px; font-weight: 600; background: var(--vert-pale); border: 0; color: var(--vert-fonce); }
.barre-pied .qui { min-width: 0; flex: 1; }
.barre-pied b { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-pied small { display: block; font-size: 11px; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-pied .btn.icone { width: 34px; min-height: 34px; }
/* Replié : les icônes seules, centrées. */
.espace-app.replie .barre { width: 76px; }
.espace-app.replie .barre-tete { justify-content: center; padding: 16px 0 12px; flex-direction: column; gap: 8px; }
.espace-app.replie .barre-tete .marque > span:not(.marque-carre), .espace-app.replie .barre-tete .badge-console { display: none; }
.espace-app.replie .barre-corps { padding: 10px; }
.espace-app.replie .tuile { justify-content: center; padding: 11px 0; }
.espace-app.replie .tuile span, .espace-app.replie .section-menu,
.espace-app.replie .forfait, .espace-app.replie .barre-pied .qui, .espace-app.replie .tuile .compteur { display: none; }
.espace-app.replie .barre-pied { justify-content: center; padding: 8px 10px 16px; flex-direction: column; }
.deplier { display: none; }
.espace-app.replie .deplier { display: inline-flex; }
.espace-app.replie .replier { display: none; }

/* La barre haute : 64 px ; la recherche prend la place ; le bloc de compte à droite. */
.principal { min-width: 0; display: flex; flex-direction: column; }
.haut { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 24px;
  background: var(--surface); border-bottom: 1px solid var(--bord); }
.haut .menu-mobile { display: none; }
.recherche-haut { flex: 1; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--surface-alt); border: 1px solid var(--bord); border-radius: var(--r-md); }
.recherche-haut svg { width: 17px; height: 17px; color: var(--texte-pale); }
.recherche-haut input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 13.5px; }
.recherche-haut input::placeholder { color: var(--texte-pale); }
/*  Le champ n'a pas d'anneau à lui : c'est la boîte qui montre le focus (D2-9). */
.recherche-haut:focus-within { border-color: var(--vert-fonce); box-shadow: 0 0 0 1px var(--vert-fonce); }
.compte-haut { position: relative; }
.compte-haut > button { display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 10px; text-align: left; }
.compte-haut > button:hover { background: var(--surface-alt); }
.compte-haut .qui b { display: block; font-size: 13px; font-weight: 525; line-height: 1.3; }
.compte-haut .qui small { display: block; font-size: 11px; color: var(--texte-pale); }
.compte-haut .qui { max-width: 220px; }
.compte-haut .qui b, .compte-haut .qui small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-haut > button > svg { width: 18px; height: 18px; color: var(--texte-doux); }
.menu-compte { position: absolute; right: 0; top: 52px; width: 330px; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-md); box-shadow: var(--ombre-pop); padding: 8px 0; z-index: 40; animation: monte .15s ease-out; }
.menu-compte .titre-menu { padding: 8px 16px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; color: var(--texte-pale); }
.menu-compte .ligne-compte { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid var(--bord); }
.menu-compte .ligne-compte .avatar { width: 34px; height: 34px; font-size: 12px; }
.menu-compte .ligne-compte b { display: block; font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.menu-compte .ligne-compte small { display: block; font-size: 10.5px; color: var(--texte-doux); line-height: 1.25; }
.menu-compte a, .menu-compte button.entree { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: 0;
  background: none; font-size: 13px; color: var(--texte); cursor: pointer; text-align: left; }
.menu-compte a:hover, .menu-compte button.entree:hover { background: var(--surface-alt); text-decoration: none; }
.menu-compte svg { width: 17px; height: 17px; color: var(--texte-doux); }

/* Le contenu : 28 de tous côtés (Responsive.padding d'EnigmaOS) ; le tableau de bord, 22 / 24. */
.contenu { padding: 28px 28px 40px; width: 100%; }
.contenu[data-page="tableau"], .contenu[data-page="etat"] { padding: 22px 24px 40px; }
.entete-page { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.entete-page > div:first-child { flex: 1 1 360px; min-width: 0; }
.entete-page > .ligne { flex: none; margin-left: auto; }
.entete-page h1 { font-size: 22px; font-weight: 550; line-height: 1.43; }
.salut h1 { font-size: 24px; }
.entete-page > div > p { color: var(--texte-doux); font-size: 13px; margin-top: 6px; }
.entete-page .ligne { gap: 16px; }
.salut { display: flex; align-items: center; gap: 10px; }
.salut .main { font-size: 20px; }
.role-ligne { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
.role-ligne > span:last-child { font-size: 12.5px; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastille-role { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; flex: none;
  background: var(--vert-pale); border: 1px solid var(--vert-bord); color: var(--vert-fonce); font-size: 11px; font-weight: 600; }
.pastille-role svg { width: 12px; height: 12px; }

/* ── LES MESURES (CarteMesureFileStoreOS) ── six par ligne, trois, puis deux ─────── */
.mesures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mesure { min-width: 0; padding: 15px 16px 14px; background: var(--surface); border: 1px solid var(--bord); border-radius: 14px;
  animation: entre .63s ease-out both; }
.mesure .tete { display: flex; align-items: center; }
.mesure .carre { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.mesure .carre svg { width: 17px; height: 17px; }
.mesure .ouvrir { margin-left: auto; padding: 3px; border-radius: 6px; color: var(--texte-pale); display: grid; }
.mesure .ouvrir:hover { background: var(--surface-alt); color: var(--texte); }
.mesure .ouvrir svg { width: 15px; height: 15px; }
.mesure .valeur { margin-top: 14px; font-size: 26px; font-weight: 550; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mesure .libelle { margin-top: 2px; font-size: 12.5px; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesure .courbe { height: 26px; margin-top: 12px; }
.t-indigo { background: color-mix(in srgb, #6366f1 12%, transparent); color: var(--bleu-texte); }
.t-violet { background: color-mix(in srgb, #8b5cf6 12%, transparent); color: var(--violet-texte); }
.t-turquoise { background: color-mix(in srgb, #14b8a6 12%, transparent); color: var(--turquoise-texte); }
.t-vert { background: color-mix(in srgb, #37c26f 12%, transparent); color: var(--vert-fonce); }
.t-ambre { background: color-mix(in srgb, #f59e0b 12%, transparent); color: var(--ambre-texte); }
.t-rouge { background: color-mix(in srgb, #ef4444 12%, transparent); color: var(--rouge-texte); }
@keyframes entre { from { opacity: 0; transform: translateY(14px); } }
.anime { animation: entre .63s ease-out both; }
/*  Le décalage d'entrée des cartes, par rang (45 ms) : une classe, pas un style en ligne (D2-26). */
.rang-1 { animation-delay: 45ms; }
.rang-2 { animation-delay: 90ms; }
.rang-3 { animation-delay: 135ms; }
.rang-4 { animation-delay: 180ms; }
.rang-5 { animation-delay: 225ms; }
.rang-6 { animation-delay: 270ms; }
.rang-7 { animation-delay: 315ms; }
.rang-8 { animation-delay: 360ms; }
.rang-9 { animation-delay: 405ms; }
.rang-10 { animation-delay: 450ms; }
.rang-11 { animation-delay: 495ms; }

/* ── LA CARTE DE CONTENU du tableau de bord : titre, sous-titre, lien vert ── */
.deux-tiers { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin-top: 18px; align-items: start; }
.carte-bloc { padding: 20px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-md); }
.bloc-tete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.bloc-tete h3 { font-size: 15.5px; font-weight: 575; }
.bloc-tete p { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; }
.bloc-tete .passage { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 3px 4px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--vert-fonce); white-space: nowrap; border: 0; background: none; cursor: pointer; }
.bloc-tete .passage svg { width: 16px; height: 16px; }
.bloc-vide { min-height: 150px; display: grid; place-items: center; text-align: center; padding: 0 24px;
  font-size: 13px; line-height: 1.55; color: var(--texte-pale); }
.repartition { display: flex; flex-direction: column; gap: 14px; }
.repartition .ligne-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-size: 13px; }
.repartition .ligne-r b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repartition .ligne-r span { color: var(--texte-doux); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.repartition .jauge { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
.repartition .jauge i { display: block; height: 100%; border-radius: 99px; background: var(--vert); width: 0; transition: width .9s ease-out; }
.liste-actions { display: flex; flex-direction: column; }
.liste-actions button, .liste-actions a { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--bord);
  background: none; font-size: 13.5px; font-weight: 500; color: var(--texte); cursor: pointer; text-align: left; }
.liste-actions > :last-child { border-bottom: 0; }
.liste-actions .carre { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.liste-actions .carre svg { width: 16px; height: 16px; }
.liste-actions .fin { margin-left: auto; color: var(--texte-pale); }
.liste-actions button:hover, .liste-actions a:hover { color: var(--vert-fonce); text-decoration: none; }

/* ── LE BANDEAU (alerte de page, ambre ou vert) ─────────────────────────── */
.bandeau { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-md); margin-bottom: 14px;
  border: 1px solid var(--bord); background: var(--surface); }
.bandeau.ambre { background: color-mix(in srgb, #fb923c 7%, var(--surface)); border-color: color-mix(in srgb, #fb923c 25%, transparent); }
.bandeau.rouge { background: color-mix(in srgb, var(--rouge) 7%, var(--surface)); border-color: color-mix(in srgb, var(--rouge) 25%, transparent); }
.bandeau.vert { background: var(--vert-pale); border-color: var(--vert-bord); }
.bandeau > .plein { flex: 1 1 auto; min-width: 0; }
.bandeau > .plein p { margin: 2px 0 0; }
/* L'identité exigée (tranche 7) : sous la barre haute, sur toutes les pages, tant qu'elle manque. */
.bandeau-identite { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 16px 24px 0; padding: 12px 16px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, #fb923c 25%, transparent); background: color-mix(in srgb, #fb923c 7%, var(--surface)); font-size: 13.5px; }
.bandeau-identite > svg.ic { width: 17px; height: 17px; color: var(--ambre-texte); flex: none; }
.bandeau-identite > div { flex: 1 1 260px; }
.bandeau-identite b { color: var(--ambre-texte); font-weight: 600; }
.bandeau-identite.bloque { border-color: color-mix(in srgb, var(--rouge) 25%, transparent); background: color-mix(in srgb, var(--rouge) 7%, var(--surface)); }
.bandeau-identite.bloque > svg.ic, .bandeau-identite.bloque b { color: var(--rouge-texte); }
@media (max-width: 720px) { .bandeau-identite { margin: 12px 16px 0; } }
.bandeau > svg.ic { width: 17px; height: 17px; margin-top: 1px; color: var(--texte-doux); flex: none; }
.bandeau.ambre > svg.ic, .bandeau.ambre h3 { color: var(--ambre-texte); }
.bandeau.rouge > svg.ic, .bandeau.rouge h3 { color: var(--rouge-texte); }
.bandeau.vert > svg.ic, .bandeau.vert h3 { color: var(--vert-fonce); }
.bandeau h3 { font-size: 13.5px; font-weight: 600; }
.bandeau p { color: var(--texte-doux); margin-top: 4px; font-size: 12.5px; }
.bandeau .actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.liste-verif { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; }
.liste-verif li { display: flex; align-items: center; gap: 6px; color: var(--texte-doux); }
.liste-verif li.fait { color: var(--vert-fonce); }

/* ── LES ONGLETS — d'écran (ombre, vert) et de fiche (bordure, noir) ─────── */
.onglets-ecran, .onglets { display: inline-flex; padding: 4px; gap: 3px; background: var(--surface-alt); border: 1px solid var(--bord);
  border-radius: 10px; max-width: 100%; overflow-x: auto; }
.onglets-ecran button, .onglets-ecran a, .onglets button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none;
  padding: 8px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--texte-doux); cursor: pointer; white-space: nowrap; }
.onglets-ecran button, .onglets-ecran a { padding: 9px 12px; text-decoration: none; }
.onglets-ecran button svg, .onglets-ecran a svg { width: 15px; height: 15px; }
.onglets button svg { width: 14px; height: 14px; }
.onglets-ecran button.actif, .onglets-ecran a.actif { background: var(--surface); color: var(--vert-fonce); font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.onglets button.actif { background: var(--surface); border-color: var(--bord-fort); color: var(--texte); font-weight: 550; }
.onglets button.actif svg { color: var(--vert-fonce); }
.onglets .nb, .onglets-ecran .nb { padding: 1px 5px; border-radius: 5px; background: var(--vert-pale); color: var(--vert-fonce); font-size: 9.5px; font-weight: 600; }

/* ── LE PANNEAU DE FILTRES ──────────────────────────────────────────────── */
.filtres { padding: 14px 18px 16px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-md); }
/* « Filtres » en petit gris espacé, l'entonnoir devant (FilterBar d'EnigmaOS). */
.filtres-tete { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .5px; color: var(--texte-doux); }
.filtres-tete > svg { width: 15px; height: 15px; color: var(--texte-doux); }
.filtres-tete button { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 8px;
  border-radius: 6px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--texte-doux); cursor: pointer; }
.filtres-tete button svg { width: 15px; height: 15px; }
.filtres-tete button:hover { background: var(--surface-alt); }
.filtres-champs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; margin-top: 14px; }
.filtres-champs .champ { width: 220px; }
.filtres-champs .champ.recherche { width: 280px; }
.filtres input.saisie { height: 40px; border-radius: 10px; }
.filtres select.saisie { height: 42px; border-radius: 10px; }
.compte-ligne { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.compte-ligne > span { font-size: 12.5px; font-weight: 500; color: var(--texte-doux); }

.qui-ligne { display: flex; align-items: center; gap: 11px; min-width: 0; }
.qui-ligne .avatar { width: 30px; height: 30px; font-size: 11px; font-weight: 600; border: 0;
  background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet-texte); }
.qui-ligne b { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qui-ligne small { display: block; font-size: 11.5px; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postes-mini { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.etat-large { display: flex; align-items: center; gap: 8px; width: 140px; max-width: 100%; padding: 7px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.etat-large::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.etat-large.vert { color: var(--vert-fonce); }
.etat-large.orange { color: var(--orange-texte); }
.etat-large.bleu { color: var(--bleu-texte); }
.etat-large.gris { color: var(--texte-doux); }
.etat-large.rouge { color: var(--rouge-texte); }
/* Dans un tableau : la pastille d'état (statusChip) remplit sa colonne, arrondie. */
.tableau .etat-large { width: 100%; max-width: 170px; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; border-color: color-mix(in srgb, currentColor 25%, transparent); }
.groupe-lieu { margin-bottom: 14px; }
.groupe-lieu > h4 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 550; margin: 0 0 8px; }
.groupe-lieu > h4 small { font-size: 12px; color: var(--texte-doux); font-weight: 500; }

/* ── LA FICHE : fil d'Ariane, bandeau, onglets, blocs ───────────────────── */
/* Le fil d'Ariane (FilAriane) : flèche 40, le mot vert, un chevron, le nom — 14 à graisse 550. */
.fil-ariane { display: flex; align-items: center; gap: 4px; margin: 0 0 18px; font-size: 14px; font-weight: 550; min-width: 0; }
.fil-ariane .btn.icone { width: 40px; min-height: 40px; color: var(--texte); }
.fil-ariane .btn.icone svg { width: 19px; height: 19px; }
.fil-ariane a { color: var(--vert-fonce); }
.fil-ariane > svg.ic { width: 15px; height: 15px; color: var(--texte-pale); margin: 0 4px; }
.fil-ariane > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeau-fiche { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-md); flex-wrap: wrap; }
.bandeau-fiche .rond { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 18px; font-weight: 600; background: color-mix(in srgb, var(--bleu) 12%, transparent); color: var(--bleu-texte); }
.bandeau-fiche .nom { flex: 1; min-width: 200px; }
.bandeau-fiche h1 { font-size: 20px; font-weight: 550; margin: 0; }
.bandeau-fiche .etiquettes { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.bandeau-fiche .chiffre { text-align: right; }
.bandeau-fiche .chiffre b { display: block; font-size: 22px; font-weight: 600; color: var(--vert-fonce); line-height: 1.2; }
.bandeau-fiche .chiffre small { font-size: 11px; color: var(--texte-doux); }
.bandeau-fiche .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.zone-onglets { margin: 18px 0 16px; }
.entete-bloc { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.entete-bloc p { font-size: 13px; color: var(--texte-doux); }
.entete-bloc small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--vert-fonce); }
.entete-bloc .btn { margin-left: auto; }
.entete-bloc > .ligne { margin-left: auto; flex-wrap: nowrap; }
.entete-bloc > .ligne .btn { margin-left: 0; }
/* Le vide d'un bloc (BlocVide) : 220 px, l'icône 40 pâle, le message 13 gris — sur le fond, sans carte. */
.bloc-vide-fiche { min-height: 220px; display: grid; place-items: center; text-align: center; color: var(--texte-doux); font-size: 13px; padding: 0 24px; }
.bloc-vide-fiche svg { width: 40px; height: 40px; color: var(--texte-pale); display: block; margin: 0 auto 10px; }
.bloc-vide-fiche p { margin: 0; }

/* ── LE RESTE DE L'ESPACE ───────────────────────────────────────────────── */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.carte-etab { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.carte-etab .tete { display: flex; align-items: flex-start; gap: 12px; }
.carte-etab .carre { width: 40px; height: 40px; border-radius: 10px; background: var(--vert-pale); color: var(--vert-fonce);
  display: grid; place-items: center; flex: none; }
.carte-etab.ferme .carre { background: var(--surface-alt); color: var(--texte-pale); }
.carte-etab h3 { font-size: 15px; font-weight: 600; }
.fil-postes { list-style: none; margin: 0; padding: 0; }
.fil-postes li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--bord); align-items: flex-start; }
.fil-postes li:last-child { border-bottom: 0; }
.fil-postes .puce { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--bord-fort); flex: none; }
.fil-postes li.en-cours .puce { background: var(--vert); box-shadow: 0 0 0 4px var(--vert-pale); }
.fil-postes .quoi b { font-weight: 500; font-size: 13.5px; }
.fil-postes .quoi small { display: block; color: var(--texte-doux); font-size: 12px; margin-top: 2px; }
.droits-lieu { margin-bottom: 18px; }
.droits-lieu h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.droit { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--r-sm); margin-bottom: 6px; }
.droit.retire { background: color-mix(in srgb, var(--rouge) 7%, var(--surface)); border-color: color-mix(in srgb, var(--rouge) 25%, transparent); }
.droit.retire .lib { text-decoration: line-through; color: var(--texte-doux); }
.droit .lib { font-size: 13.5px; }
.droit small { display: block; color: var(--texte-doux); font-size: 12px; }
/*  Les lieux en COLONNES (maçonnerie) : une carte courte ne laisse pas de trou sous elle. */
.organigramme { columns: 3 300px; column-gap: 14px; }
.organigramme > .carte { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 14px; vertical-align: top; }
.lieu .domaine { padding: 12px 18px; border-top: 1px solid var(--bord); }
.lieu .carte-tete + .domaine { border-top: 0; }
.lieu .domaine h4 { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lieu .domaine h4 i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.membre { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.membre .avatar { width: 30px; height: 30px; font-size: 10.5px; }
.membre > div { min-width: 0; flex: 1; }
.membre b { font-weight: 550; }
.membre.chef b::after { content: " ★"; color: var(--ambre-texte); }
.membre small { display: block; font-size: 12px; color: var(--texte-doux); }
.membre .puce-etat { margin-left: auto; flex: none; }
.fondateur-org { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 14px; }
.droits { display: flex; flex-wrap: wrap; gap: 4px; }
.fam-point { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 8px; vertical-align: middle; }
.couleur-0 { background: #36c26e; } .couleur-1 { background: #5b9bd5; } .couleur-2 { background: #c77dff; } .couleur-3 { background: #f4a261; }
.couleur-4 { background: #e76f51; } .couleur-5 { background: #2a9d8f; } .couleur-6 { background: #b5905a; } .couleur-7 { background: #8d99ae; }
.chargement { padding: 60px; text-align: center; color: var(--texte-pale); }
.chargement::before { content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--bord-fort);
  border-top-color: var(--vert); animation: tourne .8s linear infinite; }
.code-bloc { background: var(--volet); color: #d6dbe2; border-radius: var(--r-md); padding: 16px; overflow: auto; max-height: 380px;
  font: 12px/1.55 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; white-space: pre; }
.pagination { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 10px 16px; font-size: 12.5px;
  color: var(--texte-doux); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-md); }
.pagination .lignes { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; }
.pagination select.saisie { min-height: 0; height: 34px; width: auto; padding: 0 30px 0 10px; font-size: 13px; border-radius: 10px;
  background-position: calc(100% - 16.5px) 55%, calc(100% - 11.5px) 55%; }
.pagination .btn.icone { width: 30px; min-height: 30px; color: var(--texte-doux); border-radius: 7px; }
.pagination .btn.icone svg { width: 17px; height: 17px; }
.pagination .btn.icone[disabled] { color: var(--bord-fort); opacity: 1; }
.pagination .num { width: 30px; height: 30px; margin: 0 2px; padding: 0; border-radius: 7px; border: 1px solid var(--bord-fort); background: none;
  font-size: 12.5px; font-weight: 500; color: var(--texte); cursor: pointer; }
.pagination .num.actif { background: var(--vert); border-color: var(--vert); color: #fff; }
.pagination .num:hover:not(.actif) { background: var(--surface-alt); }
.hors-page { display: none !important; }
table.tableau th.droite, td.actions-ligne { text-align: right; }
td.actions-ligne { white-space: nowrap; }
td.actions-ligne .btn.icone { width: 32px; min-height: 32px; color: var(--texte-doux); }
td.actions-ligne .btn.icone:hover { color: var(--vert-fonce); }
tr.ligne-vide td { text-align: center; color: var(--texte-doux); padding: 50px 16px; border-bottom: 0; }
.nom-lieu { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nom-lieu b { display: block; font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nom-lieu > svg.ic { width: 17px; height: 17px; }
svg.ic.vert { color: var(--vert-fonce); }
svg.ic.pale { color: var(--texte-pale); }
.nom-lieu small { display: block; font-size: 12px; color: var(--texte-doux); }
.mono-doux { font: 12.5px ui-monospace, Menlo, Consolas, monospace; }
.carre-fiche { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--vert-pale); color: var(--vert-fonce); }
.carre-fiche svg { width: 26px; height: 26px; }
.menu-compte .entree.courante { color: var(--vert-fonce); font-weight: 500; }
.menu-compte .entree span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-compte .titre-menu + .entree, .menu-compte .entree + .titre-menu { margin-top: 0; }
.menu-compte .ligne-compte + .titre-menu { padding-top: 12px; }

/* ── LES LARGEURS ── (EnigmaOS : le rail disparaît sous 1000 px) ─────────── */
@media (max-width: 1180px) { .mesures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .deux-tiers { grid-template-columns: 1fr; }
  .espace-app, .espace-app.replie { grid-template-columns: 1fr; }
  /*  Fermé, le rail est HORS de l'écran, sans ombre (elle débordait en bande grise sur le bord gauche). */
  .barre, .espace-app.replie .barre { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%);
    transition: transform .2s, visibility .2s; box-shadow: none; visibility: hidden; }
  .barre-colle { height: 100%; }
  .espace-app.menu-ouvert .barre { transform: none; box-shadow: var(--ombre-pop); visibility: visible; }
  .espace-app.menu-ouvert .principal::after { content: ""; position: fixed; inset: 0; background: rgba(15, 18, 22, .35); z-index: 25; }
  .barre-tete .replier, .barre-tete .deplier { display: none !important; }
  .haut .menu-mobile { display: inline-flex; }
}
@media (max-width: 700px) {
  .mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .haut { padding: 0 8px; gap: 8px; }
  .recherche-haut, .compte-haut .qui, .compte-haut > button > svg { display: none; }
  .haut .vide-haut { flex: 1; }
  .contenu { padding: 18px 16px 40px; }
  .filtres-champs .champ { width: 100%; }
  .bandeau-fiche .chiffre { text-align: left; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 8px; }
  .menu-compte { width: min(330px, calc(100vw - 16px)); }
}

/* La porte d'EnigmaOS : le mot dans le champ, l'étiquette pour les lecteurs d'écran. */
.cadre .champ.sans-etiquette > .etiquette { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cadre .zone-message:empty { display: none; }
.cadre .zone-message .message { margin-top: 2px; }
.cadre .oubli { margin-top: 10px; font-size: 12.5px; }
.cadre .oubli a { font-weight: 500; }
.cadre input.saisie { height: 40px; font-size: 14px; }
.compte-ligne .onglets { flex: none; }
@media (max-width: 700px) { .compte-ligne { flex-wrap: wrap; } }
.mesure .valeur.long { font-size: 20px; line-height: 1.3; }

/* « Comment fonctionne la plateforme ? » : sous l'oubli, comme sur la porte d'EnigmaOS. */
.cadre .oubli, .cadre .comment { padding-left: 12px; }
.cadre .oubli a { font-weight: 400; }
.cadre .comment { margin-top: 18px; }
.cadre .comment .lien { font-size: 14px; font-weight: 400; }
.etapes-guide { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etapes-guide li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--bord); }
.etapes-guide li:first-child { border-top: 0; padding-top: 2px; }
.etapes-guide .num { width: 28px; height: 28px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; }
.etapes-guide b { font-weight: 500; font-size: 14px; }
.etapes-guide p { margin: 2px 0 0; font-size: 13px; }
.etapes-guide li > svg { color: var(--texte-pale); margin-top: 5px; }
.fenetre-corps > p.sous + .etapes-guide { margin-top: 6px; }

/* ── LA BASCULE DE LANGUE (app_top_bar d'EnigmaOS) : FR | EN ──────────────── */
.bascule-langue { display: inline-flex; flex: none; border: 1px solid var(--bord-fort); border-radius: var(--r-sm); overflow: hidden; }
.bascule-langue button { border: 0; background: none; padding: 7px 10px; font-size: 12px; font-weight: 600; color: var(--texte-doux);
  cursor: pointer; border-radius: 7px; line-height: 1.2; }
.bascule-langue button.actif { background: var(--vert-pale); color: var(--vert-fonce); }
.bascule-langue button:hover:not(.actif) { color: var(--texte); }
.haut > .bascule-langue + .compte-haut { margin-left: -2px; }

/* ── LE SÉLECTEUR DE PÉRIODE (tableau de bord) ─────────────────────────────── */
.periode { display: inline-flex; padding: 3px; gap: 0; background: var(--surface-alt); border: 1px solid var(--bord); border-radius: var(--r-sm); }
.periode button { border: 1px solid transparent; background: none; padding: 6px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 400;
  color: var(--texte-doux); cursor: pointer; white-space: nowrap; }
.periode button.actif { background: var(--surface); border-color: var(--bord); color: var(--texte); font-weight: 500; }
.entete-page .ligne { gap: 10px; }
.mesure .courbe { display: flex; align-items: flex-end; justify-content: flex-end; }
.variation { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 7px; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.variation svg.ic { width: 12px; height: 12px; }
.variation.hausse { color: var(--vert-fonce); background: color-mix(in srgb, var(--vert-fonce) 10%, transparent); }
.variation.baisse { color: var(--rouge-texte); background: color-mix(in srgb, var(--rouge) 10%, transparent); }
.variation.egal { color: var(--texte-doux); background: var(--surface-alt); }

/* ── LES CASES DES LISTES (17 px, rayon 5, bordure 1,5) ───────────────────── */
.case-liste { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; flex: none; display: inline-grid; place-items: center;
  border: 1.5px solid var(--bord-saisie); border-radius: 5px; background: var(--surface); cursor: pointer; vertical-align: middle;
  transition: background .12s, border-color .12s; }
.case-liste:checked, .case-liste:indeterminate { background: var(--vert); border-color: var(--vert); }
.case-liste:checked::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.case-liste:indeterminate::after { content: ""; width: 8px; height: 2px; background: #fff; border-radius: 1px; }
table.tableau th.col-case, table.tableau td.col-case { width: 45px; padding-right: 0; }
table.tableau tr.choisie td { background: var(--vert-pale); }
/*  Le contour de focus d'une ligne se dessine DEDANS : la boîte du tableau (overflow) ne le coupe pas. */
table.tableau tr.cliquable:focus-visible { outline-offset: -2px; }

/* ── LA FICHE : la colonne de droite fait 300 px (« En un coup d'œil ») ────── */
.grille-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 860px) { .grille-fiche { grid-template-columns: 1fr; } }

/* ── LE KIT DES FICHES (fiche_kit · form_kit · data_list d'EnigmaOS) ──────── */
/* Les teintes : vert, violet, bleu (indigo), gris, orange, rouge — 12 % en fond. */
.puce-tag, .puce-etat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap; line-height: 1.43; color: var(--tt, var(--t)); background: color-mix(in srgb, var(--t) 12%, transparent); }
.puce-etat { background: color-mix(in srgb, var(--t) 10%, transparent); border: 1px solid color-mix(in srgb, var(--t) 25%, transparent); padding: 3px 10px; }
.puce-etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/*  `--t` : la teinte EnigmaOS (fonds, points) ; `--tt` : la nuance de son TEXTE, lisible AA (E30). */
.vert { --t: #36c26e; --tt: var(--vert-fonce); } .violet { --t: #8b5cf6; --tt: var(--violet-texte); }
.bleu { --t: #6366f1; --tt: var(--bleu-texte); } .gris { --t: #6f767e; --tt: var(--texte-doux); }
.orange { --t: #fb923c; --tt: var(--orange-texte); } .rouge { --t: #ef4444; --tt: var(--rouge-texte); }
.puce-tag.vert, .puce-etat.vert { color: var(--vert-fonce); }
.bandeau-fiche .titre-ligne { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bandeau-fiche .titre-ligne h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*  L'étoile du fondateur : un ambre LISIBLE (le jaune #f5c242 sur son fond pâle ne se lisait pas). */
.badge-etoile { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; flex: none;
  background: color-mix(in srgb, #f5c242 20%, transparent); color: var(--ambre-texte); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge-etoile svg.ic { color: #eab308; }
.badge-etoile svg.ic { width: 12px; height: 12px; }
.carre-fiche.vert, .carre-fiche.violet, .carre-fiche.bleu, .carre-fiche.gris, .carre-fiche.orange, .carre-fiche.rouge {
  background: color-mix(in srgb, var(--t) 12%, transparent); color: var(--tt, var(--t)); }
.carre-fiche.vert { color: var(--vert-fonce); }
.bandeau-fiche .rond.vert, .bandeau-fiche .rond.violet, .bandeau-fiche .rond.bleu, .bandeau-fiche .rond.gris {
  background: color-mix(in srgb, var(--t) 12%, transparent); color: var(--tt, var(--t)); }
.bandeau-fiche .actions .btn { min-height: 32px; }
/* La section (FormSection) : 16 sous chaque section ; son crayon, 40 de côté. */
.section-fiche { margin-bottom: 16px; }
.actions-section { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/*  Le crayon ne grandit pas l'en-tête : toutes les sections ont la même hauteur. */
.carte-tete .actions-section .btn.icone { width: 34px; min-height: 34px; margin: -8px 0; color: var(--texte); }
.carte-tete .actions-section .btn.icone svg { width: 18px; height: 18px; }
.carte-tete .actions-section .btn.texte { margin: -6px 0; }
.btn.texte.rouge { color: var(--rouge-texte); } .btn.texte.vert-texte { color: var(--vert-fonce); }
/* La ligne-carte (la ligne de demande d'EnigmaOS) : gris clair, bordée, l'icône teintée sans carré. */
.ligne-carte { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; padding: 14px; background: var(--surface-alt);
  border: 1px solid var(--bord); border-radius: var(--r-sm); color: var(--texte); text-decoration: none; }
a.ligne-carte:hover { text-decoration: none; border-color: var(--vert-bord); background: var(--vert-pale); }
.ligne-carte .ico { flex: none; display: grid; color: var(--tt, var(--t)); }
.ligne-carte .ico.vert { color: var(--vert-fonce); }
.ligne-carte .ico svg { width: 18px; height: 18px; }
.ligne-carte .corps { flex: 1; min-width: 0; }
.ligne-carte .titre-l { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.ligne-carte .titre-l b { font-size: 13.5px; font-weight: 550; }
.ligne-carte small { display: block; margin-top: 3px; font-size: 12px; color: var(--texte-doux); }
.ligne-carte > .btn, .ligne-carte > svg.ic { flex: none; align-self: center; }
.section-fiche .ligne-carte:last-child { margin-bottom: 0; }
.espace-serre > * + * { margin-top: 8px; }
/* Après le panneau de filtres : 14, comme la source (SizedBox 14). */
.filtres + .carte, .filtres + .bloc-vide-fiche { margin-top: 14px; }
.filtres-champs .champ.l240 { width: 240px; }
.note-fiche { font-size: 12.5px; margin: -4px 0 16px; }
.petit-texte { font-size: 12.5px; line-height: 1.5; }
/* La pièce d'identité déposée (Mon compte, tranche 7) : son état, puis ce qu'elle est, sur une ligne qui se replie. */
/* Le relevé du compte FileStoreOS (lot B) : ce qui entre, ce qui sort — la couleur double le signe, jamais seule. */
.montant-entree { color: var(--vert-fonce); }
.montant-sortie { color: var(--rouge-texte); }
/* L'alimentation par paiement en ligne (lot B, tranche 2) : le devis ; la page de paiement simulée du poste local. */
.devis-lien { padding: 12px 14px; display: grid; gap: 8px; margin: 0; }
.lien-client { width: 100%; }
.devis-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.devis-ligne dt { color: var(--texte-doux, inherit); }
.devis-ligne dd { margin: 0; font-variant-numeric: tabular-nums; }
.devis-ligne.fort { font-weight: 700; border-top: 1px solid var(--bord, #ddd); padding-top: 8px; }
.montant-simule { font-size: 22px; text-align: center; margin: 4px 0 14px; }
.ligne-piece { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.point-droit { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--t); }
.droit .pousse { margin-left: auto; }
.droits-lieu { margin: 0; }
.droits-lieu .droit:last-child { margin-bottom: 0; }

/* ── Les litiges (lot B, tranche 8) : une carte par litige, le fil des échanges ── */
.carte.litige { border-left: 3px solid var(--bord-fort); }
.carte.litige.ouvert { border-left-color: var(--orange, #e8a33d); }
.fil-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.message-fil { padding: 8px 12px; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--bord); }
.message-fil.equipe { border-color: var(--bord-fort); }
.message-fil p { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; }

/* ── Les fichiers : le logo, les photos (tout vient de la base, par fichier.php) ── */
img.carre-fiche.image { object-fit: cover; background: var(--fond); border: 1px solid var(--bord); padding: 0; }
.ligne-logo { display: flex; gap: 18px; align-items: center; }
.logo-apercu { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex: none; border: 1px solid var(--bord); background: var(--fond); }
.logo-apercu.vide { display: grid; place-items: center; color: var(--texte-doux); }
.logo-apercu.vide svg { width: 28px; height: 28px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 12px; }
.galerie figure { position: relative; margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); aspect-ratio: 4 / 3; background: var(--fond); }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie .retirer { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(20, 24, 31, .62); color: #fff; }
.galerie .retirer svg { width: 16px; height: 16px; }
.galerie .retirer:hover { background: var(--rouge); }
/* La galerie qu'on RANGE (C5) : l'image, la couverture marquée, et sous elle ses gestes (avancer, reculer, retirer). */
.galerie.rangee figure { aspect-ratio: auto; display: flex; flex-direction: column; }
.galerie.rangee .cadre { position: relative; aspect-ratio: 3 / 2; background: var(--fond); }
.galerie.rangee .couverture { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
  background: var(--vert); color: #fff; }
.galerie.rangee .dims { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; background: rgba(20, 24, 31, .62); color: #fff; }
.galerie.rangee .outils { display: flex; border-top: 1px solid var(--bord); }
.galerie.rangee .outils button { flex: 1; min-height: 36px; display: grid; place-items: center; border: 0; background: var(--surface, #fff); color: var(--texte); cursor: pointer; }
.galerie.rangee .outils button + button { border-left: 1px solid var(--bord); }
.galerie.rangee .outils button:hover:not(:disabled) { background: var(--fond); }
.galerie.rangee .outils button.rouge-texte:hover { background: var(--rouge); color: #fff; }
.galerie.rangee .outils button:disabled { opacity: .35; cursor: default; }
.galerie.rangee .outils svg { width: 16px; height: 16px; }
/* Les vidéos (C5b) : la vignette en 16:9, son titre ; l'envoi par morceaux et sa barre. */
.galerie-videos .cadre { aspect-ratio: 16 / 9; }
.galerie-videos figcaption { padding: 6px 8px; font-size: 12.5px; font-weight: 600; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galerie-videos .cadre-vide { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--texte-doux); }
.envoi-video { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: 12.5px; color: var(--texte-doux); }
.envoi-video progress { width: 100%; height: 8px; accent-color: var(--vert); }
.video-fiche { width: 100%; max-height: 70vh; background: #000; border-radius: var(--r-md); }
.consigne-photos { font-size: 12.5px; color: var(--texte-doux); margin: 0 0 10px; line-height: 1.5; }
@media (max-width: 640px) { .galerie.rangee .outils button { min-height: 44px; } }

/* ── CE QUE LE CLIENT LIRA (lot A, tranche 1) : la présentation, ce qu'il offre ── */
.texte-long { white-space: pre-line; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.offres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.offre { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--bord); border-radius: 9px;
  background: var(--surface-alt); font-size: 13px; }
.offre svg { width: 17px; height: 17px; color: var(--vert-fonce); flex: none; }
.groupe-cases { border: 0; margin: 0; padding: 0; min-width: 0; }
.groupe-cases + .groupe-cases { margin-top: 18px; }
.groupe-cases legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--texte-doux); }
.cases-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.cases-choix label.coche svg { width: 17px; height: 17px; color: var(--texte-doux); flex: none; }
.kv dd > a { display: inline-flex; align-items: center; gap: 4px; }
.kv dd > a svg { width: 14px; height: 14px; }

/* ── L'HÉBERGEMENT (lot A, tranche 2) : la grille des nuits, les plans, les paliers ── */
.defile-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grille-dispo { border-collapse: separate; border-spacing: 4px; width: auto; min-width: 100%; }
.grille-dispo th { font-size: 11.5px; font-weight: 600; color: var(--texte-doux); white-space: nowrap; padding: 4px 6px; text-align: center; }
.grille-dispo th[scope=row] { text-align: left; color: var(--texte); font-size: 13px; position: sticky; left: 0; background: var(--surface); }
.grille-dispo th.ce-soir { color: var(--vert-fonce); }
.grille-dispo td.nuit { min-width: 52px; height: 44px; text-align: center; border-radius: 8px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--t) 12%, var(--surface)); color: var(--tt); }
.grille-dispo td.nuit b { font-size: 15px; } .grille-dispo td.nuit small { font-size: 11px; }
.grille-dispo td.libre { --t: #36c26e; --tt: var(--vert-fonce); }
.grille-dispo td.tendu { --t: #fb923c; --tt: var(--orange-texte); }
.grille-dispo td.complet { --t: #6f767e; --tt: var(--texte-doux); }
.grille-dispo td.surres { --t: #ef4444; --tt: var(--rouge-texte); }
.plan-tarif { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.plan-tarif.inactive { opacity: .7; }
.plan-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.plan-tete h4 { margin: 0 0 4px; font-size: 15px; }
.plan-prix { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.plan-prix b { font-size: 18px; font-variant-numeric: tabular-nums; }
.plan-prix small { font-size: 11.5px; color: var(--texte-doux); }
.palier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.palier .saisie { width: 92px; }
.palier select.saisie { width: auto; }
.total-sejour { margin: 10px 0 0; text-align: right; font-size: 14px; }
/* Les réservations (lot A, tranche 3) : le prix demandé à la base, sous le formulaire. */
.devis { margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface-alt); font-size: 13.5px; min-height: 20px; }
.devis p { margin: 0; }
.devis b { font-size: 15px; }
.refus-doux { color: var(--rouge-texte); }
/* L'arrivée (lot A, tranche 4) : une fiche par voyageur. */
.voyageur { padding: 14px 16px 16px; border: 1px solid var(--bord); border-radius: var(--r-md); background: var(--surface-alt); }
.voyageur legend { padding: 0 6px; margin-left: -6px; font-size: 13px; font-weight: 600; color: var(--texte); }
@media (max-width: 640px) {
  .plan-tete { flex-direction: column; } .plan-prix { align-items: flex-start; }
  .palier .saisie { width: 100%; flex: 1 1 100px; }
}

/* ── LA LANGUE AVANT D'ENTRER (la porte, l'entrée de la console) ───────────── */
.colonne { position: relative; }
.langue-porte { position: absolute; top: 20px; right: 24px; }

/* ── LES TABLEAUX : une seule esthétique (celle des Établissements) ──────────── */
.qui-ligne .qui { min-width: 0; }
.nom-marque { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nom-marque b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nom-marque .badge-etoile { padding: 2px 7px; }
table.tableau .qui-ligne b { font-size: 14px; font-weight: 550; }
table.tableau .postes-mini { flex-wrap: wrap; }
table.tableau td.actions-ligne { width: 1%; }
table.tableau td .muet.petit-texte { display: block; }
.carte > table.tableau:first-child th:first-child { border-top-left-radius: var(--r-md); }
.carte > table.tableau:first-child th:last-child { border-top-right-radius: var(--r-md); }
.carte > .carte-tete + table.tableau th { background: var(--surface); }
.carte > .carte-tete .pastille, .carte > .carte-tete .nb-carte { margin-left: auto; }
.nb-carte { padding: 2px 8px; border-radius: 6px; background: var(--vert-pale); color: var(--vert-fonce); font-size: 11.5px; font-weight: 600; }
.groupe-lieu { margin-bottom: 16px; }
.espace-mdp { display: flex; flex-direction: column; gap: 8px; }
.fonction-cel b { font-weight: 550; }
.fonction-cel .pastille { margin-left: 6px; vertical-align: 1px; }
.fonction-cel .muet { display: block; font-size: 12px; margin-top: 3px; }

/* ── SUR TÉLÉPHONE : la ligne devient une CARTE « titre : valeur » ─────────── */
@media (max-width: 760px) {
  .tableau-boite { overflow: visible; }
  table.liste-tableau, table.liste-tableau tbody, table.liste-tableau tr, table.liste-tableau td { display: block; width: 100%; }
  table.liste-tableau thead { display: none; }
  table.liste-tableau tbody tr { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--bord); }
  table.liste-tableau tbody tr:last-child { border-bottom: 0; }
  table.liste-tableau.avec-cases tbody tr { padding-left: 46px; }
  table.liste-tableau td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0; border: 0;
    text-align: right; min-height: 0; }
  table.liste-tableau td[data-libelle]::before { content: attr(data-libelle); flex: none; max-width: 45%; text-align: left;
    font-size: 12px; font-weight: 500; color: var(--texte-doux); }
  table.liste-tableau td > * { min-width: 0; }
  table.liste-tableau td.col-case { position: absolute; left: 14px; top: 14px; width: auto; padding: 0; }
  table.liste-tableau td:is(.col-case + td, :first-child:not(.col-case))::before { content: none; }
  table.liste-tableau td:is(.col-case + td, :first-child:not(.col-case)) { justify-content: flex-start; text-align: left; padding-bottom: 8px; }
  table.liste-tableau td.actions-ligne { width: 100%; justify-content: flex-end; padding-top: 6px; }
  table.liste-tableau .etat-large { width: auto; }
  table.liste-tableau tr.ligne-vide td { justify-content: center; text-align: center; padding: 34px 0; }
  table.liste-tableau.avec-cases tbody tr.ligne-vide { padding-left: 14px; }
  table.liste-tableau tbody tr.choisie { background: var(--vert-pale); }
  .filtres-champs .champ, .filtres-champs .champ.l240 { width: auto; flex: 1 1 200px; }
  table.liste-tableau td.date { white-space: normal; }
  /*  Une cellule de pastilles (postes, droits) : le titre AU-DESSUS, les pastilles sur toute la largeur de la
      carte ; une pastille trop longue se coupe d'une ellipse (son texte entier au survol), jamais sur deux lignes. */
  table.liste-tableau td:has(.postes-mini, .droits) { flex-direction: column; align-items: stretch; text-align: left; gap: 6px; }
  table.liste-tableau td:has(.postes-mini, .droits)::before { max-width: none; }
  table.liste-tableau .droits, table.liste-tableau .postes-mini { justify-content: flex-start; }
  table.liste-tableau .puce-tag, table.liste-tableau .pastille { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .carte-tete { flex-wrap: wrap; }
  .pagination .num:not(.actif), .pagination .btn.icone:is(:first-of-type, :last-of-type) { display: none; }
  .pagination { flex-wrap: nowrap; padding: 8px 10px; }
  .pagination .lignes { margin-left: 8px; }
  .onglets-ecran { width: 100%; }
  .onglets-ecran button, .onglets-ecran a { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 6px; white-space: normal; text-align: center; line-height: 1.25; }
  /*  Trois sous-menus (« Liste des succursales », « Agents par succursale »…) : le libellé passe à la ligne plutôt que
      de pousser la page de côté (DECISIONS § 9 ; la galerie mesure le défilement horizontal). */
  .entete-page > * { min-width: 0; max-width: 100%; }
  .onglets-ecran button svg, .onglets-ecran a svg { display: none; }
  .filtres-champs .champ.recherche { width: 100%; flex-basis: 100%; }
  .langue-porte { top: 14px; right: 16px; }
  /*  Sur téléphone, les actions d'en-tête passent SOUS le titre, sur toute la largeur. */
  .entete-page > .ligne { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; }
  .periode { max-width: 100%; overflow-x: auto; }
  .carte-corps .mono, .verif li, .verif li span { overflow-wrap: anywhere; min-width: 0; }
}

/* Le tableau de bord : les deux colonnes finissent à la même ligne. */
.deux-tiers.egal { align-items: stretch; }
.colonne-cartes { display: flex; flex-direction: column; gap: 14px; }
.colonne-cartes > .carte-bloc:first-child { flex: 1; }

/* ── LA CONSOLE : titres de partie, jauges d'usage ───────────────────────── */
.rangee-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 4px 0 18px; }
.titre-section { font-size: 16px; font-weight: 550; margin: 26px 0 12px; }
.ligne-jauge { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.ligne-jauge > span { color: var(--texte-doux); }
.jauge-usage .barre-p { height: 5px; border-radius: 99px; background: var(--bord); overflow: hidden; margin-top: 6px; }
.jauge-usage .barre-p > i { display: block; height: 100%; width: 0; background: var(--vert); transition: width .6s ease-out; }
.jauge-usage .barre-p > i.plein { background: #fb923c; }
.section-fiche > .carte-tete .btn { margin-top: -6px; margin-bottom: -6px; }

/* Sur téléphone, la marque dans la barre haute (le rail est caché) ; un vide de bloc moins haut. */
.marque-haut { display: none; color: var(--texte); text-decoration: none; }
.marque-haut:hover { text-decoration: none; }
.marque-haut .marque { font-size: 15px; gap: 8px; }
.marque-haut .marque-carre { width: 28px; height: 28px; border-radius: 8px; }
.marque-haut .marque-carre svg { width: 15px; height: 15px; }
@media (max-width: 1000px) { .marque-haut { display: inline-flex; } }
@media (max-width: 700px) { .bloc-vide { min-height: 90px; } .marque-haut .badge-console { display: none; } }

/* Un règlement annulé (D1-1) : la ligne reste, barrée. */
table.tableau tr.annule td { color: var(--texte-doux); }
table.tableau tr.annule td b { text-decoration: line-through; }
.panne-page { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }

/* ── LES CIBLES TACTILES SUR TÉLÉPHONE (E33, décidé le 14 oct. : 44 px, WCAG 2.5.5 AAA) ──────────────────────
   Sur ordinateur, les tailles d'EnigmaOS (32/30/28 px) restent. Sur téléphone, toute cible — bouton, lien qui n'est
   pas dans une phrase, champ, onglet, entrée de menu, case de liste — mesure 44 × 44 au moins. `:root:root` en tête :
   ces règles passent devant les tailles propres à un endroit (la pagination, une barre, une carte). La galerie le MESURE. */
@media (max-width: 640px) {
  :root:root .btn, :root:root .btn.petit, :root:root .btn.large { min-height: 44px; }
  :root:root .btn.icone { width: 44px; min-width: 44px; min-height: 44px; }
  :root:root .saisie, :root:root select.saisie, :root:root .pagination select.saisie { min-height: 44px; height: auto; }
  :root:root .mot-de-passe .voir { width: 44px; height: 44px; right: 0; }
  :root:root .mot-de-passe .saisie { padding-right: 48px; }
  :root:root .bascule-langue button { min-width: 44px; min-height: 44px; }
  :root:root .tuile, :root:root .tuile.pied { min-height: 44px; }
  :root:root .marque-haut { min-height: 44px; display: inline-flex; align-items: center; }
  :root:root .onglets button, :root:root .onglets-ecran button, :root:root .onglets-ecran a, :root:root [role=tab] { min-height: 44px; }
  :root:root .puces button { min-height: 44px; }
  :root:root .pagination .num { width: 44px; height: 44px; }
  :root:root .filtres-tete button { min-height: 44px; }
  :root:root .bloc-tete .passage, :root:root .mesure .ouvrir { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  :root:root .toast .fermer-toast { width: 44px; height: 44px; margin: -8px -10px -8px 4px; }
  :root:root .menu-compte a, :root:root .menu-compte button.entree { min-height: 44px; }
  :root:root button.lien { min-height: 44px; display: inline-flex; align-items: center; }
  :root:root a.lien.petit-texte, :root:root td a.sans-soulignement { min-height: 44px; display: inline-flex; align-items: center; }   /* « La vérifier », l'état d'une identité (§ 8) */
  :root:root .bas a, :root:root .oubli a, :root:root p.muet > a { min-height: 44px; display: inline-flex; align-items: center; }
  :root:root .cible-case { width: 44px; height: 44px; }
  /*  La cible de la case (44 px) ne déborde pas sur la ligne : la carte s'ouvre à droite d'elle (relecture indépendante). */
  :root:root table.liste-tableau td.col-case { left: 4px; top: 2px; }
  :root:root table.liste-tableau.avec-cases tbody tr { padding-left: 54px; }
  :root:root .periode button { min-height: 44px; }
  :root:root .fil-ariane a { min-height: 44px; display: inline-flex; align-items: center; }
  :root:root .pagination .num { flex: none; }
  :root:root label.coche, :root:root .case { min-height: 44px; align-items: center; }
  :root:root .kv dd > a { min-height: 44px; }
  :root:root .bas a { min-width: 44px; justify-content: center; }
}
/* La case d'une liste vit dans son étiquette : sur téléphone, l'étiquette est la cible (44 px). */
.cible-case { display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }

/* ── La facture du comptoir (lot A, tranche 6) : une page qui s'imprime, ou s'enregistre en PDF, telle quelle. ── */
.ligne-actions-facture { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.facture { padding: 28px; display: grid; gap: 20px; }
.facture-tete, .facture-parties { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; }
.facture-emetteur, .facture-titre, .facture-parties > div { display: grid; gap: 3px; align-content: start; }
.facture-emetteur b { font-size: 16px; }
.facture-titre { text-align: right; justify-items: end; }
.facture-titre h2 { margin: 0; font-size: 22px; letter-spacing: .08em; }
.facture-titre .mono { font: 600 14px ui-monospace, Menlo, Consolas, monospace; }
.facture small { color: var(--texte-doux); }
.facture td.nombre { text-align: right; white-space: nowrap; }
.facture-totaux { justify-self: end; min-width: min(340px, 100%); }
.facture-totaux dd { text-align: right; }
.facture-pied { display: grid; gap: 4px; font-size: 12.5px; color: var(--texte-doux); border-top: 1px solid var(--bord); padding-top: 12px; }
@media (max-width: 720px) {
  .facture { padding: 18px; }
  .facture-titre { text-align: left; justify-items: start; }
}
@media print {
  .barre, .haut, .fil-ariane, .non-imprime, .toasts { display: none !important; }
  .espace-app, .principal { display: block !important; }
  .contenu { padding: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
  .facture { box-shadow: none !important; border: 0 !important; padding: 0; color: #000; }
}
.grille-champs .sous-titre-form { grid-column: 1 / -1; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); }

/* Les écrans du métier (metier.js), partagés par la console et l'équipe de FileStoreOS (lot B, tranche 7b). */
.fiche-grille { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13.5px; }
.fiche-grille dt { color: var(--texte-doux); }
.fiche-grille dd { margin: 0; }
.tableau-defile { overflow-x: auto; max-width: 100%; }
.tableau.apercu td { font-size: 12px; white-space: nowrap; padding: 6px 10px; border-bottom: 1px solid var(--bord, #e5e7eb); }
.marge-negative { color: var(--rouge-texte); }
.note-carte { margin: 0; padding: 12px 18px 4px; }

/* ── La cloche (C6a) : le nombre de non lues ; la liste ; le code d'arrivée à l'accueil ── */
.cloche-haut { position: relative; }
.pastille-cloche { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); }
.liste-alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-alertes li { padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--r-md); }
.liste-alertes li.non-lue { border-color: var(--vert); background: var(--vert-pale); }
.ligne-code-arrivee { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; }
.ligne-code-arrivee .saisie { width: 130px; font-size: 16px; letter-spacing: 2px; }
.ligne-code-arrivee small { flex-basis: 100%; }

/* (C6b) LA DEMANDE d'une réservation « sur demande » : l'échéance (ambre), puis la décision ; ce qui a été rendu. */
.bandeau-demande { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 12px 16px; font-size: 13.5px; }
.bandeau-demande > svg.ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--t); }
.bandeau-demande > div { flex: 1 1 auto; min-width: 0; }
.bandeau-demande .bloc { display: block; margin-top: 4px; }
.bandeau-demande.attente { border-color: color-mix(in srgb, #fb923c 30%, transparent); background: color-mix(in srgb, #fb923c 7%, var(--surface)); }
.bandeau-demande.attente > svg.ic, .bandeau-demande.attente b { color: var(--ambre-texte); }

/* (C6c1) LA MESSAGERIE : le fil d'un client (ses bulles à gauche, celles de l'établissement à droite), la réponse. */
.fil-messages { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px 2px; }
.bulle { max-width: 80%; padding: 9px 13px; border-radius: 12px; font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.bulle small { display: block; font-size: 11px; color: var(--texte-doux); margin-top: 3px; }
.bulle.eux { align-self: flex-start; background: var(--surface-alt); border: 1px solid var(--bord); }
.bulle.moi { align-self: flex-end; background: color-mix(in srgb, #36c26e 12%, var(--surface)); border: 1px solid color-mix(in srgb, #36c26e 30%, transparent); }
.repondre textarea { width: 100%; }

/* LES AVIS (C6c2) : la note, les critères, la réponse de l'établissement. */
.note-avis { font-size: 1.4rem; }
.criteres-avis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 18px; font-size: .9rem; }
.criteres-avis li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--bord); padding: 3px 0; }
.criteres-avis b { color: #b7791f; letter-spacing: 1px; }
.reponse-avis { border-left: 3px solid var(--bord); padding: 6px 12px; background: var(--surface-alt); border-radius: 0 8px 8px 0; }
.reponse-avis p { margin: 4px 0 0; }
/* (D5a) La billetterie : les catégories d'un événement, le contrôle à l'entrée. */
.categories-evt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; font-size: .9rem; }
.categories-evt li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--bord); padding: 3px 0; }
.camera-billet { width: 100%; max-height: 300px; border-radius: 10px; background: #000; object-fit: cover; }
.resultat-billet:empty { display: none; }
.billet-ok, .billet-refus { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; }
.billet-ok { background: var(--vert-pale); border: 1px solid var(--vert-bord); }
.billet-refus { background: var(--rouge-pale); color: var(--rouge-texte); }
.billet-ok p { margin: 2px 0 0; }

/* (D7a) Les publications : les vignettes de la galerie, les réponses sous un commentaire. */
.vignette-pub { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.coche-photo { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.reponse-com { margin-left: 24px; }

/* ── LES DOSSIERS (DECISIONS § 7) ─────────────────────────────────────── */
.progression { display: grid; gap: 4px; min-width: 120px; }
.progression .jauge { height: 6px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
.progression .jauge i { display: block; height: 100%; background: var(--vert); border-radius: 99px; width: 0; }
.progression .jauge i.p10 { width: 10%; } .progression .jauge i.p20 { width: 20%; } .progression .jauge i.p30 { width: 30%; }
.progression .jauge i.p40 { width: 40%; } .progression .jauge i.p50 { width: 50%; } .progression .jauge i.p60 { width: 60%; }
.progression .jauge i.p70 { width: 70%; } .progression .jauge i.p80 { width: 80%; } .progression .jauge i.p90 { width: 90%; }
.progression .jauge i.p100 { width: 100%; }
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.frise li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 0 0 18px; position: relative; }
.frise li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 32px; bottom: 2px; width: 2px; background: var(--bord); }
.frise li.faite:not(:last-child)::before { background: var(--vert-bord); }
.frise .puce-frise { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; font-size: 13px;
  background: var(--surface-alt); color: var(--texte-doux); border: 1px solid var(--bord-fort); }
.frise li.faite .puce-frise { background: var(--vert-pale); color: var(--vert-fonce); border-color: var(--vert-bord); }
.frise li.courante .puce-frise { background: var(--vert); color: #fff; border-color: var(--vert); }
.frise li > div { display: grid; gap: 2px; padding-top: 5px; min-width: 0; }
.frise li small { font-size: 12.5px; }
.actions-frise { flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.liste-etapes, .liste-pieces { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.liste-etapes li, .liste-pieces li { display: grid; gap: 2px; }
.liste-pieces { list-style: none; padding-left: 0; }
.liste-pieces li { grid-template-columns: 1fr auto; align-items: center; }
.liste-pieces li small { grid-column: 1 / -1; }
.texte-libre { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 13.5px; }
.tableau-boite small.bloc, small.bloc { display: block; }
.titre-bloc { margin: 14px 0 0; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); }
.lignes-edition { display: grid; gap: 8px; }
.ligne-edition { display: grid; grid-template-columns: 26px minmax(0, 1.2fr) minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.ligne-edition .rang { font-weight: 650; color: var(--texte-doux); text-align: center; }
.ligne-edition .case { align-items: center; white-space: nowrap; font-size: 12.5px; }
/*  Le ciblage d'une pièce du gabarit (DECISIONS § 16, tranche 2) : sous la ligne, sur toute sa largeur. */
.ligne-edition > .cible-piece { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px;
  border-radius: var(--r-sm); background: var(--surface-alt); }
.cible-piece .saisie { width: auto; flex: 0 1 200px; min-width: 0; }
.cible-piece .roles-piece { display: flex; flex-wrap: wrap; gap: 4px 14px; flex-basis: 100%; }
.alerte-piece { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--ambre-texte); font-weight: 600; }
.etat-large.violet { color: var(--violet-texte); }
@media (max-width: 720px) {
  .ligne-edition { grid-template-columns: 26px 1fr auto auto; }
  .ligne-edition > .saisie[data-champ=description] { grid-column: 2 / -1; grid-row: 2; }
  .ligne-edition > .case { grid-column: 2 / -1; grid-row: 3; }
  .ligne-edition > .cible-piece { grid-row: 4; }
  .cible-piece .saisie { flex-basis: 100%; }
}
/*  Le QUESTIONNAIRE (DECISIONS § 16, tranche 3). L'éditeur : une question par bloc, ses précisions dessous. */
.questions-edition { gap: 12px; }
.ligne-question { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--bord); }
.ligne-edition.ligne-q { grid-template-columns: 26px minmax(0, 1.4fr) minmax(0, 1fr) auto auto auto auto; }
.details-question { margin-left: 34px; }
.details-question .cible-piece { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-alt); }
.details-question .ligne { gap: 8px; flex-wrap: wrap; }
.details-question .ligne > .saisie { flex: 1 1 160px; min-width: 0; width: auto; }
.liste-questions li.membre-groupe { margin-left: 22px; padding-left: 10px; border-left: 2px solid var(--bord-fort); }
/*  Le questionnaire d'un dossier : un bloc par personne ; une ligne d'un groupe, un cadre. */
.questionnaire .questions-bloc { display: grid; gap: 12px; }
.bloc-questionnaire + .bloc-questionnaire:not(.carte) { border-top: 1px solid var(--bord); padding-top: 12px; }
.question { display: grid; gap: 4px; min-width: 0; }
.question .ligne { gap: 8px; flex-wrap: wrap; align-items: center; }
.reponse-lue .etiquette { font-size: 12.5px; color: var(--texte-doux); font-weight: 600; }
.groupe-question { display: grid; gap: 8px; }
.lignes-groupe { display: grid; gap: 10px; }
.ligne-groupe { display: grid; gap: 10px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--bord); border-radius: var(--r-sm); min-width: 0; }
.ligne-groupe legend { padding: 0 6px; font-size: 12.5px; font-weight: 650; color: var(--texte-doux); }
/*  (Tranche 18 D) Un TABLEAU du questionnaire : en tableau sur ordinateur, une fiche par ligne sur téléphone ; une période
    (deux mois, « en cours ») ; ses contrôles en défaut, orange s'ils avertissent, rouges s'ils bloquent. */
.tableau-saisie-boite { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--r-sm); }
.tableau-saisie { width: 100%; border-collapse: collapse; }
.tableau-saisie th { text-align: left; font-size: 12.5px; font-weight: 650; color: var(--texte-doux); background: var(--surface-alt); padding: 8px 10px; white-space: nowrap; }
.tableau-saisie th.droite { text-align: right; }
.tableau-saisie td { padding: 6px 8px; border-top: 1px solid var(--bord); vertical-align: top; min-width: 120px; }
.tableau-saisie :is(td, th).col-rang { min-width: 0; width: 40px; text-align: center; }
.tableau-saisie td.col-rang { padding-top: 14px; }
.tableau-saisie td.actions-ligne { min-width: 0; text-align: right; white-space: nowrap; }
.tableau-saisie tr.ligne-groupe { display: table-row; padding: 0; border: 0; border-radius: 0; }
.tableau-saisie td.cellule-cachee > * { visibility: hidden; }
.saisie-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.saisie-periode .saisie { flex: 1 1 130px; width: auto; min-width: 0; }
.controles-tableau { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.controles-tableau li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; }
.controles-tableau li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.controles-tableau li.avertit { background: var(--orange-pale); color: var(--orange-texte); }
.controles-tableau li.bloque { background: var(--rouge-pale); color: var(--rouge-texte); }
.controles-tableau li small { font-weight: 500; }
@media (max-width: 760px) {
  .tableau-saisie-boite { overflow: visible; border: 0; border-radius: 0; }
  .tableau-saisie, .tableau-saisie tbody, .tableau-saisie td { display: block; width: 100%; }
  .tableau-saisie thead { display: none; }
  .tableau-saisie tr.ligne-groupe { display: grid; gap: 10px; padding: 10px 12px 12px; margin-bottom: 10px; border: 1px solid var(--bord); border-radius: var(--r-sm); }
  .tableau-saisie td, .tableau-saisie td.col-rang { border: 0; padding: 0; min-width: 0; width: 100%; text-align: left; }
  .tableau-saisie td[data-libelle]::before { content: attr(data-libelle); display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--texte-doux); }
  .tableau-saisie td.col-rang::before { display: inline; margin-right: 6px; }
  .tableau-saisie td.cellule-cachee { display: none; }
  .tableau-saisie td.actions-ligne { display: flex; justify-content: flex-end; }
}
.valeur-sensible { margin: 0; font: 600 18px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
@media (max-width: 720px) {
  .ligne-edition.ligne-q { grid-template-columns: 26px 1fr auto auto; }
  .ligne-edition.ligne-q > [data-champ=sorte] { grid-column: 2 / -1; grid-row: 2; }
  .ligne-edition.ligne-q > .case { grid-row: 3; }
  .details-question { margin-left: 0; }
}
.grille-mesures { display: grid; gap: 12px; margin-bottom: 18px; }
.grille-mesures.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .grille-mesures.trois { grid-template-columns: 1fr; } }
.lien-piece { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; overflow-wrap: anywhere; min-height: 44px; }
/* Un versement annulé : son texte en teinte douce et son numéro barré (table.tableau tr.annule, plus haut) — pas d'opacité
   en plus : elle faisait tomber le texte sous le contraste AA (3,19:1, la galerie). */
.carte-dossier { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.carte-dossier:hover { border-color: var(--vert-bord); box-shadow: var(--ombre-pop); }
.carte-dossier .carte-corps { display: grid; gap: 10px; }
.carte-dossier p { margin: 0; }
.carte-dossier .etat-large, .bandeau-fiche .etat-large { width: auto; white-space: nowrap; }
/* Sur téléphone, l'en-tête d'un bloc et ses boutons passent à la ligne au lieu de pousser la page de côté. */
@media (max-width: 720px) {
  .entete-bloc { flex-wrap: wrap; }
  .entete-bloc > div:first-child { flex: 1 1 100%; }
  .entete-bloc > .ligne { flex-wrap: wrap; margin-left: 0; }
}
.invitation-client { margin-bottom: 14px; }
.invitation-client .carte-corps { flex-wrap: wrap; gap: 12px; }
.invitation-client p { margin: 2px 0 0; }
.actions-recu { justify-content: space-between; margin-bottom: 16px; }
.recu { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 28px 32px; }
.recu-tete { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 2px solid var(--vert); padding-bottom: 16px; }
.recu-tete h1 { margin: 0 0 4px; font-size: 20px; }
.recu-tete p { margin: 2px 0; font-size: 12.5px; color: var(--texte-doux); }
.recu-numero { text-align: right; display: grid; gap: 2px; }
.recu-numero span { font-size: 12px; letter-spacing: .12em; color: var(--texte-doux); font-weight: 650; }
.recu-numero b { font-size: 18px; }
.recu-corps { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px 18px; margin: 22px 0; }
.recu-corps dt { color: var(--texte-doux); font-size: 13px; }
.recu-corps dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.recu-montant { font-size: 20px; }
.recu-annule { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--rouge-pale, #fdecea); color: var(--rouge-texte, #b42318); font-weight: 650; }
.recu.annule .recu-montant { text-decoration: line-through; }
.recu-pied { border-top: 1px solid var(--bord); padding-top: 12px; font-size: 12.5px; }
.recu-pied p { margin: 2px 0; }
@media (max-width: 600px) {
  .recu { padding: 18px 16px; }
  .recu-tete { flex-direction: column; }
  .recu-numero { text-align: left; }
  .recu-corps { grid-template-columns: 1fr; gap: 2px; }
  .recu-corps dd { margin-bottom: 8px; }
}
@media print {
  .recu { border: 0; padding: 0; max-width: none; color: #000; }
}

/* ── LE GABARIT D'UNE LISTE, PARTOUT (DECISIONS § 8) ─────────────────────────
   Une ligne par rang : le texte long se TRONQUE (entier au survol), le tableau ne déborde pas de sa carte. Un nom et,
   dessous, son cabinet (la personne en a plusieurs). Sur téléphone, la ligne redevient sa carte « titre : valeur ». */
@media (min-width: 761px) {
  table.liste-tableau.avec-cases td { white-space: nowrap; }
  table.liste-tableau .tronque { display: block; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.liste-tableau td .qui-ligne { max-width: 300px; }   /* aussi dans un tableau simple (le personnel par succursale) */
  table.liste-tableau td.col-nom .qui-ligne { max-width: 240px; }
  table.liste-tableau.avec-cases th, table.liste-tableau.avec-cases td { padding-left: 10px; padding-right: 10px; }
  table.liste-tableau .postes-mini .puce-tag { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
}
table.liste-tableau td.mono-doux small { font: 11.5px "Inter", system-ui, sans-serif; letter-spacing: 0; }
.cel-double { display: flex; flex-direction: column; min-width: 0; }
.cel-double small { font-size: 11.5px; color: var(--texte-doux); font-weight: 400; }
.nom-lieu .cel-double b { font-size: 14px; font-weight: 550; }
.carte-corps .passage { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--vert-fonce); text-decoration: none; }
.carte-corps .passage svg { width: 16px; height: 16px; }
.carte-corps .passage:hover { text-decoration: underline; }
select.choix-tableau { height: 40px; width: auto; min-width: 200px; max-width: 280px; }
@media (max-width: 700px) { select.choix-tableau { width: 100%; max-width: none; } }
@media (max-width: 760px) {
  table.liste-tableau td .cel-double { align-items: flex-end; text-align: right; }
  table.liste-tableau td:is(.col-case + td, :first-child:not(.col-case)) .cel-double { align-items: flex-start; text-align: left; }
}
.nom-lieu { min-width: 0; }
.nom-lieu > .cel-double { flex: 0 1 auto; }
.nom-lieu > .cel-double > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-double > * { max-width: 100%; }
/* Les pièces d'une identité, côte à côte (DECISIONS § 8) : l'image entière, cliquable ; le PDF, un lien. */
.galerie-identite { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.galerie-identite figure { margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.galerie-identite img { display: block; width: 100%; height: 200px; object-fit: contain; background: var(--surface-alt); border-radius: 8px; }
.galerie-identite .lien-piece.pdf { display: flex; align-items: center; justify-content: center; gap: 8px; height: 200px; background: var(--surface-alt); border-radius: 8px; }
a.sans-soulignement { text-decoration: none; }
@media (max-width: 640px) { :root:root .carte-corps .passage { min-height: 44px; } }

/* ── LE DIAGNOSTIC DE LA CONSOLE (DECISIONS § 9) : une commande à recopier ── */
pre.bloc-code { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-alt); border: 1px solid var(--bord);
  font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

/* ── LE MODÈLE UNIQUE DES LISTES ET LES RETOUCHES DU PORTEUR (DECISIONS § 10) ──────────────────────────────
   Un titre reçoit le focus quand la page change (garderFocus, pour les lecteurs d'écran) : il ne s'encadre pas.
   Le bouton de sortie est rouge, sur les trois plateformes. La liste : filtres, compte, carte, pagination en bas ;
   la carte prend la place qui reste jusqu'en bas de l'écran (noyau.js, ajusterListes) — un tableau vide y centre son
   message au lieu de laisser un trou sous la pagination. Un écran bas (un petit portable) serre les marges et les
   lignes, sans les écraser. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.btn.sortie { background: var(--rouge); color: #fff; }
.btn.sortie:hover, .btn.sortie:focus-visible { background: var(--rouge-texte); color: #fff; }
.btn.sortie svg { color: #fff; }
.menu-compte button.entree.sortie, .menu-compte button.entree.sortie svg { color: var(--rouge-texte); }
.menu-compte button.entree.sortie:hover { background: var(--rouge-pale); }
.vue-liste { display: flex; flex-direction: column; min-width: 0; }
.vue-liste > .tableau-boite { display: flex; flex-direction: column; }
.vue-liste > .tableau-boite > table { flex: none; }
.vue-liste .pagination-zone { margin-top: 12px; }
.vue-liste tr.ligne-vide td { vertical-align: middle; }
@media (max-height: 800px) and (min-width: 761px) {
  .contenu { padding: 18px 22px 22px; }
  .entete-page { margin-bottom: 10px; }
  .entete-page h1 { font-size: 19px; }
  .entete-page > div > p { margin-top: 2px; font-size: 12.5px; }
  .filtres { padding: 10px 14px 12px; }
  .compte-ligne { margin: 10px 0; }
  table.tableau th { padding: 8px 14px; }
  table.tableau td { padding: 8px 14px; }
  tr.ligne-vide td { padding: 28px 16px; }
  .bandeau-fiche { padding-top: 12px; padding-bottom: 12px; }
}
.fenetre b.etiquette { display: block; font-size: 12px; font-weight: 600; color: var(--texte-doux); margin-bottom: 6px; }
/* Un écran d'ordinateur étroit (jusqu'à 1440 px, la barre de menu prise) : une cellule de texte va à la ligne plutôt que
   de pousser la liste hors de sa carte ; les dates, les états, les actions restent sur une ligne (DECISIONS § 10). */
@media (min-width: 761px) and (max-width: 1440px) {
  table.liste-tableau.avec-cases td { white-space: normal; }
  table.liste-tableau td.nowrap, table.liste-tableau td.date, table.liste-tableau td.actions-ligne { white-space: nowrap; }
  table.liste-tableau .tronque { max-width: 150px; }
  table.liste-tableau.avec-cases th, table.liste-tableau.avec-cases td { padding-left: 8px; padding-right: 8px; }
  table.liste-tableau td.actions-ligne .btn.petit { padding-left: 8px; padding-right: 8px; }
}
/* Un écran bas (un petit portable) : la carte « Mes cabinets » du pied du menu s’efface (elle redit la page Cabinets) — le menu
   garde ses entrées visibles, sans défiler (DECISIONS § 10). */
@media (max-height: 700px) and (min-width: 761px) { .barre-corps .forfait { display: none; } }
/* Une barre du haut SANS recherche (la plateforme des modérateurs) : la langue et le compte vont à droite, comme partout. */
.haut:not(:has(.recherche-haut)) .vide-haut { flex: 1; }

/* ══ L'ATELIER DES PROGRAMMES (DECISIONS § 16, tranches 4 et 5) : trois vues — le parcours (des phases en colonnes, trois
   couloirs en rangées, une palette, un tiroir), les données (des formulaires écrits comme un document, le téléphone du
   client), la fiche ══ */
.atelier { display: grid; gap: 14px; min-width: 0; }
.atelier-tete { display: grid; gap: 8px; position: sticky; top: 0; z-index: 6; background: var(--fond); padding: 4px 0 10px; border-bottom: 1px solid var(--bord); }
.atelier-titre { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.atelier-nom { min-width: 0; }
.atelier-titre h1 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.atelier-titre .ligne { flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.atelier-gestes { display: flex; gap: 8px; flex-wrap: wrap; }
.onglets-atelier { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-alt); border: 1px solid var(--bord); border-radius: var(--r-md); }
.onglet-atelier { display: inline-flex; gap: 6px; align-items: center; border: 0; border-radius: var(--r-sm); padding: 7px 12px; font: inherit; font-weight: 500; background: transparent; color: var(--texte-doux); cursor: pointer; }
.onglet-atelier svg { width: 16px; height: 16px; }
.onglet-atelier.actif { background: var(--surface); color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.atelier-statut { font-size: .85rem; color: var(--texte-doux); }
.atelier-statut.erreur { color: var(--rouge-texte); font-weight: 600; }
.atelier-statut.enregistre { color: var(--vert-fonce); }
.atelier-corps { display: grid; gap: 14px; align-items: start; min-width: 0; }
.atelier-corps h2 { margin: 0; font-size: 1.1rem; }
.atelier-corps.vue-parcours { grid-template-columns: 200px minmax(0, 1fr) minmax(320px, 380px); }
.atelier-corps.vue-donnees { grid-template-columns: 250px minmax(0, 1fr) 340px; }
.atelier-palette, .atelier-tiroir, .atelier-formulaires, .atelier-apercu { position: sticky; top: 92px; max-height: calc(100vh - 106px); overflow: auto;
  display: grid; gap: 10px; align-content: start; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-lg); padding: 14px; min-width: 0; }
.palette-tete { display: grid; gap: 4px; }
.palette-tete h2 { font-size: 1rem; }
.palette-couloir { display: grid; gap: 4px; }
.palette-couloir h3 { display: flex; gap: 6px; align-items: center; margin: 6px 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.palette-couloir h3 svg { width: 15px; height: 15px; }
.piece-palette { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--bord); border-left: 3px solid var(--bord-fort); border-radius: var(--r-sm);
  background: var(--surface-alt); padding: 6px 8px; font: inherit; font-size: .86rem; color: var(--texte); cursor: grab; }
.piece-palette svg { width: 15px; height: 15px; flex: none; color: var(--texte-doux); }
.piece-palette:hover { border-color: var(--bord-saisie); background: var(--surface); }
.palette-couloir.vert .piece-palette { border-left-color: var(--vert); } .palette-couloir.bleu .piece-palette { border-left-color: var(--bleu); }
.palette-couloir.violet .piece-palette { border-left-color: var(--violet); }
/* La grille du parcours : une rangée par couloir, une colonne par phase ; elle défile de côté, la première colonne reste. */
.atelier-parcours { overflow-x: auto; min-width: 0; padding-bottom: 6px; display: grid; gap: 6px; align-content: start; }
.parcours-rangee { display: flex; gap: 6px; align-items: stretch; min-width: max-content; }
.couloir-nom { flex: 0 0 150px; position: sticky; left: 0; z-index: 2; display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--bord); }
.couloir-nom.coin { align-items: center; background: var(--fond); border-color: transparent; }
.couloir-nom small { font-size: .74rem; line-height: 1.3; }
.couloir-icone { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex: none; }
.couloir-icone svg { width: 16px; height: 16px; }
.couloir.vert .couloir-icone { background: var(--vert-pale); color: var(--vert-fonce); }
.couloir.bleu .couloir-icone { background: var(--bleu-pale); color: var(--bleu-texte); }
.couloir.violet .couloir-icone { background: color-mix(in srgb, var(--violet) 14%, var(--surface)); color: var(--violet-texte); }
.phase-tete { flex: 0 0 230px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; text-align: left; padding: 8px 10px;
  border: 1px solid var(--bord-fort); border-radius: var(--r-md); background: var(--surface); font: inherit; color: var(--texte); cursor: pointer; }
.phase-tete:hover { border-color: var(--bord-saisie); }
.phase-tete.actif { border-color: var(--encre); box-shadow: 0 0 0 2px var(--bord-saisie); }
.phase-tete.defaut { border-color: var(--rouge); }
.phase-rang { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--encre); color: var(--surface); font-size: .78rem; font-weight: 700; }
.phase-nom { font-weight: 600; overflow-wrap: anywhere; }
.phase-marques { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.phase-marques .puce-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-ajout { flex: 0 0 120px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; border: 1px dashed var(--bord-saisie); border-radius: var(--r-md);
  background: transparent; font: inherit; color: var(--texte-doux); cursor: pointer; }
.cellule { flex: 0 0 230px; display: grid; gap: 6px; align-content: start; min-height: 96px; padding: 6px; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid transparent; }
.cellule.vide-fin { flex-basis: 120px; background: transparent; }
.cellule.survol { border-color: var(--vert); border-style: dashed; background: var(--vert-pale); }
.cellule-ajout { justify-self: start; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px dashed var(--bord-saisie); border-radius: 8px;
  background: transparent; color: var(--texte-doux); cursor: pointer; opacity: .55; }
.cellule:hover .cellule-ajout, .cellule-ajout:focus-visible { opacity: 1; }
.cellule-ajout svg { width: 14px; height: 14px; }
.carte-parcours { display: grid; gap: 3px; text-align: left; width: 100%; border: 1px solid var(--bord); border-left: 3px solid var(--bord-fort); border-radius: var(--r-sm);
  background: var(--surface); padding: 7px 9px; font: inherit; color: var(--texte); cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); }
.carte-parcours:hover { border-color: var(--bord-saisie); }
.carte-parcours.actif { box-shadow: 0 0 0 2px var(--encre); }
.carte-parcours.defaut { border-color: var(--rouge); }
.carte-parcours.facultative { border-style: dashed; }
.couloir.vert .carte-parcours { border-left-color: var(--vert); } .couloir.bleu .carte-parcours { border-left-color: var(--bleu); }
.couloir.violet .carte-parcours { border-left-color: var(--violet); }
.carte-sorte { display: inline-flex; gap: 5px; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); }
.carte-sorte svg { width: 13px; height: 13px; }
.carte-titre { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.carte-sous { font-size: .76rem; color: var(--texte-doux); overflow-wrap: anywhere; }
.aide-parcours { margin: 4px 0 0; }
.menu-sortes, .menu-slash { position: absolute; z-index: 20; display: grid; gap: 2px; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--bord-fort);
  border-radius: var(--r-md); box-shadow: var(--ombre-pop); }
.menu-sortes button, .menu-slash button { display: flex; gap: 8px; align-items: center; text-align: left; border: 0; border-radius: var(--r-sm); padding: 7px 9px; background: transparent; font: inherit; color: var(--texte); cursor: pointer; }
.menu-sortes button:hover, .menu-sortes button:focus-visible, .menu-slash button:hover, .menu-slash button:focus-visible { background: var(--surface-alt); }
.menu-sortes svg, .menu-slash svg { width: 15px; height: 15px; color: var(--texte-doux); }
.cellule { position: relative; }
/* Le tiroir : la carte ou la phase choisie. */
.tiroir-vide { display: grid; gap: 8px; justify-items: start; color: var(--texte-doux); }
.tiroir-vide > svg { width: 26px; height: 26px; }
.tiroir-contenu { display: grid; gap: 12px; }
.tiroir-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tiroir-couloir { display: inline-flex; gap: 6px; align-items: center; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-doux); }
.tiroir-couloir svg { width: 15px; height: 15px; }
.tiroir-tete.vert .tiroir-couloir { color: var(--vert-fonce); } .tiroir-tete.bleu .tiroir-couloir { color: var(--bleu-texte); } .tiroir-tete.violet .tiroir-couloir { color: var(--violet-texte); }
.bloc-tiroir { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--bord); }
.bloc-tiroir h3 { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.bloc-tiroir .grille-champs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.liste-tiroir { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.liste-tiroir li { display: flex; gap: 6px; align-items: center; font-size: .88rem; }
.liste-tiroir svg { width: 14px; height: 14px; color: var(--texte-doux); flex: none; }
.apercu-ligne { margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-alt); font-size: .88rem; }
.gestes-tiroir { flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--bord); }
/* Les données : une liste à gauche, le document au centre, le téléphone à droite. */
.groupe-docs { display: grid; gap: 4px; }
.groupe-docs h3 { display: flex; gap: 6px; align-items: center; margin: 4px 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.groupe-docs h3 svg { width: 14px; height: 14px; }
.entree-doc { display: grid; gap: 2px; text-align: left; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface-alt); font: inherit; color: var(--texte); cursor: pointer; }
.entree-doc small { font-size: .76rem; color: var(--texte-doux); }
.entree-titre { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.entree-doc.actif { background: var(--vert-pale); border-color: var(--vert-bord); }
.entree-doc.actif small { color: var(--vert-fonce); }
.entree-doc.defaut { border-color: var(--rouge); }
.deja-connu { display: grid; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--bord); }
.deja-connu h3 { display: flex; gap: 6px; align-items: center; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.deja-connu h3 svg { width: 14px; height: 14px; }
.deja-connu p { margin: 0; }
.cache-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atelier-document { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 6px 4px; }
.doc-entete { display: grid; gap: 6px; }
.doc-entete .ligne { flex-wrap: wrap; gap: 8px; align-items: center; }
.doc-entete .ligne select { max-width: 260px; }
.doc-titre .saisie { font-size: 1.45rem; font-weight: 700; border-color: transparent; background: transparent; padding-left: 4px; }
.doc-titre .saisie:hover, .doc-titre .saisie:focus { border-color: var(--bord-saisie); background: var(--surface); }
.doc-corps { display: grid; gap: 8px; }
.doc-corps > h3 { margin: 6px 0 0; font-size: .95rem; }
.doc-ligne { display: grid; gap: 6px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-md); }
.doc-ligne:hover, .doc-ligne:focus-within { border-color: var(--bord); background: var(--surface); }
.doc-ligne.conditionnelle { border-left: 3px solid var(--orange); padding-left: 12px; }
.doc-ligne.de-la-fiche { background: color-mix(in srgb, var(--vert-pale) 55%, transparent); }
.doc-ligne-tete { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.doc-ligne-tete > .avec-compte { flex: 1 1 220px; min-width: 0; }
.doc-ligne-tete > select { flex: 0 0 130px; max-width: 130px; }
.doc-ligne-tete > select.choix-fiche { flex-basis: 190px; max-width: 190px; }
.doc-ligne-tete .puce-tag { white-space: nowrap; }
.doc-ligne-tete > svg { width: 17px; height: 17px; color: var(--texte-doux); }
.saisie.saisie-doc { border-color: transparent; background: transparent; font-size: .98rem; }
.saisie.saisie-doc:hover, .saisie.saisie-doc:focus { border-color: var(--bord-saisie); background: var(--surface); }
.saisie.saisie-doc.titre { font-weight: 700; font-size: 1.05rem; }
.choix-fiche.lie { border-color: var(--vert-bord); background: var(--vert-pale); color: var(--vert-fonce); font-weight: 600; }
.details-ligne { padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-alt); }
.fiche-liste { display: grid; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-lg); }
.fiche-liste-tete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fiche-liste-tete > .avec-compte { flex: 1 1 240px; }
.fiche-liste-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--violet) 30%, var(--surface)); }
.champ-liste { display: grid; gap: 4px; min-width: 0; }
.champ-liste .ligne { gap: 4px; align-items: center; flex-wrap: nowrap; }
.champ-liste .ligne > .avec-compte { flex: 1 1 auto; min-width: 0; }
.champ-liste .ligne > select { flex: 0 0 110px; max-width: 110px; }
.reglages-liste summary { cursor: pointer; color: var(--texte-doux); font-size: .85rem; }
.reglages-liste[open] { flex: 1 1 100%; }
.barre-slash { position: relative; display: flex; gap: 8px; align-items: center; padding: 6px 8px; color: var(--texte-doux); }
.barre-slash .slash { font-size: 1.1rem; font-weight: 600; }
.saisie.saisie-slash { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; border-color: transparent; background: transparent; }
.famille-simulee select { width: auto; }
.saisie.saisie-slash::placeholder { color: var(--texte-doux); opacity: 1; }
.saisie.saisie-slash:focus { border-color: var(--bord-saisie); background: var(--surface); }
.menu-slash { top: 100%; left: 24px; max-height: 320px; overflow: auto; }
.apercu-entete { display: grid; gap: 6px; }
.ecran-client.telephone { width: 100%; max-width: 300px; justify-self: center; border: 8px solid var(--encre); border-radius: 30px; padding: 18px 14px; background: var(--surface); min-height: 420px; align-content: start; }
.btn.faux.large { justify-content: center; margin-top: 6px; }
.champ-faux.connu { display: flex; gap: 6px; align-items: center; color: var(--vert-fonce); background: var(--vert-pale); border-color: var(--vert-bord); }
.champ-faux.connu svg { width: 13px; height: 13px; }
.fiche-apercu { display: grid; gap: 2px; border: 1px solid var(--bord); border-radius: var(--r-md); padding: 8px 10px; }
.fiche-apercu-titre { font-weight: 600; font-size: .85rem; }
/* La fiche : une colonne lisible. */
.atelier-fiche-prog { max-width: 860px; }
.lignes-annuaire { display: grid; gap: 6px; }
.ligne-annuaire { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--bord); border-radius: var(--r-md); }
.ligne-annuaire > svg { width: 18px; height: 18px; color: var(--violet-texte); }
/* Partagés avec le dossier et la page publique du programme. */
.avec-compte { display: grid; gap: 2px; min-width: 0; }
.compte-signes { justify-self: end; font-size: .75rem; }
.cible-piece { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cible-piece input[type=number] { flex: 1 1 190px; min-width: 190px; }
.gestes-ligne { display: inline-flex; gap: 2px; }
.cases-prerequis, .pastilles-issues { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.pastille { display: inline-flex; gap: 4px; align-items: center; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--bleu-pale); color: var(--bleu-texte); font-weight: 600; }
.defile-x { overflow-x: auto; max-width: 100%; }
.table-groupe { border-collapse: collapse; min-width: 100%; }
.table-groupe th, .table-groupe td { border: 1px solid var(--bord-fort); padding: 6px; vertical-align: top; text-align: left; }
.table-groupe th { background: var(--surface); min-width: 150px; }
.table-groupe.petite th { min-width: 90px; font-size: .8rem; }
.liste-defauts { display: grid; gap: 6px; padding-left: 18px; }
.liste-ecarts { display: grid; gap: 4px; padding-left: 18px; }
.famille-simulee { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .85rem; }
.ecran-client { display: grid; gap: 10px; border: 1px solid var(--bord-fort); border-radius: var(--r-lg); padding: 12px; background: var(--fond); }
.ecran-client h3 { margin: 0; font-size: 1rem; }
.bloc-apercu { display: grid; gap: 6px; }
.bloc-apercu h4 { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-doux); }
.liste-apercu { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste-apercu li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-sm); padding: 6px 8px; }
.case-faux { width: 16px; height: 16px; border: 2px solid var(--bord-saisie); border-radius: 4px; }
.champ-faux { display: block; min-height: 30px; border: 1px solid var(--bord-saisie); border-radius: var(--r-sm); background: var(--surface); padding: 4px 8px; font-size: .8rem; color: var(--texte-pale); }
.champ-faux.haut { min-height: 60px; }
.btn.faux { pointer-events: none; opacity: .85; }
.q-apercu { display: grid; gap: 4px; }
.q-apercu.conditionnelle { border-left: 3px solid var(--orange); padding-left: 8px; }
@media (max-width: 1500px) {
  /* Le tiroir prend sa colonne quand il s'ouvre (la grille défile de côté). */
  .atelier-corps.vue-parcours { grid-template-columns: 170px minmax(0, 1fr); }
  .atelier-corps.vue-parcours.avec-tiroir { grid-template-columns: 170px minmax(0, 1fr) 360px; }
  .atelier-corps.vue-parcours .atelier-tiroir:not(.ouvert) { display: none; }
  .atelier-corps.vue-donnees { grid-template-columns: 230px minmax(0, 1fr); }
  .atelier-corps.vue-donnees .atelier-apercu { grid-column: 1 / -1; position: static; max-height: none; justify-items: center; }
  .atelier-corps.vue-donnees .apercu-entete { justify-items: center; }
}
@media (max-width: 1100px) {
  .atelier-corps.vue-parcours, .atelier-corps.vue-parcours.avec-tiroir { grid-template-columns: minmax(0, 1fr); }
  .atelier-palette { position: static; max-height: none; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .palette-tete { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .atelier-corps.vue-donnees { grid-template-columns: minmax(0, 1fr); }
  .atelier-palette, .atelier-formulaires, .atelier-tiroir, .atelier-apercu { position: static; max-height: none; }
  .atelier-tete { position: static; }
  .couloir-nom { flex-basis: 96px; }
  .couloir-nom small { display: none; }
  .phase-tete, .cellule { flex-basis: 200px; }
  .fiche-liste-champs { grid-template-columns: minmax(0, 1fr); }
  .bloc-tiroir .grille-champs { grid-template-columns: minmax(0, 1fr); }
  .piece-palette { min-height: 44px; }
  .cellule-ajout { width: 44px; height: 44px; opacity: 1; }
  .reglages-liste summary { display: flex; align-items: center; min-height: 44px; }
  .saisie.saisie-slash { min-height: 44px; }
  /* Quatre vues (9 nov., les Règles) : deux rangées de deux sur téléphone — sur une seule, la barre débordait de 32 px. */
  .onglets-atelier { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onglet-atelier { min-width: 0; justify-content: center; }
}

/* ══ L'AVANCEMENT D'UN DOSSIER DESSINÉ (tranche 4) : la carte, les états, les tâches ══ */
.carte-dossier { display: grid; gap: 10px; }
.niveau-dossier { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.etape-dossier { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--bord-fort); border-left-width: 5px; border-radius: var(--r-md); background: var(--surface); }
.etape-dossier.ouverte { border-left-color: var(--vert); box-shadow: 0 0 0 2px var(--vert-bord); }
.etape-dossier.terminee { border-left-color: var(--bleu); background: var(--surface-alt); }
.etape-dossier.a_venir { border-left-color: var(--bord-saisie); opacity: .8; }
.etape-dossier.sans_objet { border-left-color: var(--bord); opacity: .55; text-decoration: line-through; text-decoration-color: var(--texte-pale); }
.etape-dossier .tete { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etape-dossier .tete b { flex: 1 1 auto; }
.taches-etape { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.taches-etape li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.couloir-carte { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--surface-alt); color: var(--texte-doux); }
.couloir-carte.vert { background: var(--vert-pale); color: var(--vert-fonce); } .couloir-carte.bleu { background: var(--bleu-pale); color: var(--bleu-texte); }
.couloir-carte.violet { background: color-mix(in srgb, var(--violet) 14%, var(--surface)); color: var(--violet-texte); }
.cartes-programme { display: grid; gap: 2px; }
.qui-carte { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; }
.qui-carte svg, .taches-etape small svg { width: 13px; height: 13px; vertical-align: -2px; }
.qui-carte.a-designer { color: var(--orange-texte); }
.deja-connu-q { display: flex; gap: 4px; align-items: center; color: var(--vert-fonce); }
.ecart-fiche { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--orange-texte); font-weight: 600; }
.deja-connu-q svg, .ecart-fiche svg { width: 13px; height: 13px; }
.attendu-client { display: grid; gap: 12px; }
/*  (DECISIONS § 18.C) Avant quand : la date d'une tâche du client, son état. */
.echeance-client { font-weight: 600; }
.echeance-client.depassee { color: var(--rouge-texte); }
.echeance-client.bientot { color: var(--orange-texte); }
/*  L'Atelier : les jalons du programme (la fiche), le délai d'une carte dans l'aperçu. */
.lignes-jalons { display: grid; gap: 8px; }
.ligne-jalon { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.ligne-jalon > svg { width: 16px; height: 16px; color: var(--texte-doux); }
@media (max-width: 760px) { .ligne-jalon { grid-template-columns: auto minmax(0, 1fr) auto; } .ligne-jalon > :nth-child(3) { grid-column: 2; grid-row: 2; } }
.echeance-apercu svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.ligne-grise { opacity: .6; }
@media (max-width: 760px) {
  .table-groupe.cartes thead { display: none; }
  .table-groupe.cartes tr { display: grid; gap: 4px; border: 1px solid var(--bord-fort); border-radius: var(--r-md); padding: 8px; margin-bottom: 8px; }
  .table-groupe.cartes td { border: 0; padding: 2px 0; }
  .table-groupe.cartes td::before { content: attr(data-colonne); display: block; font-size: .75rem; color: var(--texte-doux); }
}
.ligne-details > select.saisie { width: auto; flex: 0 1 260px; }
.ligne-principale > .gestes-ligne { margin-left: auto; }
/*  (Un tableau répétable défile dans SA boîte, jamais la page : chaque niveau de grille cède sa largeur.) */
.lignes-atelier > *, .tableau-groupe > *, .ligne-atelier > *, .ecran-client > *, .bloc-apercu > *, .q-apercu > * { min-width: 0; }
.tableau-groupe, .ligne-atelier, .defile-x { min-width: 0; }
.table-groupe th { white-space: nowrap; }
.ligne-details > select.saisie, .cible-piece select.saisie { max-width: 100%; min-width: 0; }

/* ── LES RÈGLES D'ADMISSIBILITÉ, LES MODÈLES DE DÉPART (§ 18.F, regles.js) ──────────────────────────────────────── */
.atelier-corps.vue-regles { grid-template-columns: minmax(0, 1fr) 360px; }
.regles-colonne { min-width: 0; }
.regle-atelier .carte-corps { padding: 14px; }
.regle-atelier .large, .essai-famille .large { grid-column: 1 / -1; }
.cases-roles { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cases-roles .case { min-height: 32px; align-items: center; }
.origine-modele { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--bord); border-left: 3px solid var(--orange);
  border-radius: var(--r-sm); background: var(--surface-alt); font-size: .86rem; }
.origine-modele svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.regles-essai .grille-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.liste-verdicts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-verdicts li { display: grid; gap: 2px; border-top: 1px solid var(--bord); padding-top: 8px; }
.liste-verdicts .ligne { flex-wrap: wrap; }
.enonce-regle { font-weight: 500; }
.modeles-depart { display: grid; gap: 10px; }
.modele-depart { display: grid; gap: 6px; padding: 12px 14px; cursor: pointer; }
.modele-depart .etiquettes { flex-wrap: wrap; }
.modele-depart:has(input:checked) { border-color: var(--vert); box-shadow: 0 0 0 1px var(--vert); }
@media (max-width: 1100px) {
  .atelier-corps.vue-regles { grid-template-columns: minmax(0, 1fr); }
  .atelier-corps.vue-regles .atelier-apercu { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .regles-essai .grille-champs { grid-template-columns: minmax(0, 1fr); }
}
/* Le suivi des dossiers et les rendez-vous (§ 18.R) : quatre mesures, puis les sections ; un rendez-vous du client. */
.grille-mesures.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grille-mesures.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grille-mesures.quatre { grid-template-columns: 1fr; } }
.mesure .sous-mesure { margin-top: 4px; font-size: 12px; color: var(--texte-doux); overflow-wrap: anywhere; }
.carte-rdv { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--bord); min-width: 0; }
.carte-rdv:last-child { border-bottom: 0; padding-bottom: 0; }
.carte-rdv p { margin: 0; overflow-wrap: anywhere; }
.carte-rdv a { overflow-wrap: anywhere; }