/* BC Desk : variante D (mise en page) avec l'apparence de la variante C (fond bleu nuit uni, panneaux translucides).
   Charte Capset (docs/prototypes/ui.md) :
   - bleu Capset #005395 (--navy) : identité, en-têtes, éléments actifs, bouton principal ;
   - cyan #069ADC (--cyan) : accent, focus clavier, liens d'action ;
   - rouge #F01C21 (--red) : réservé aux actions fortes (« Nouvelle demande ») et aux alertes, jamais décoratif.
   Toutes les couleurs passent par les variables ci-dessous ; les composants (src/web) n'en écrivent aucune en dur :
   statut, priorité et teinte d'un Client sont portés par data-statut, data-priorite et la classe teinte-N.

   Échelle d'espacements (multiples de 4 px) :
     --e-1 4px · --e-2 8px · --e-3 12px · --e-4 16px · --e-5 24px · --e-6 32px
   Échelle de rayons :
     --r-xs 4px (code en ligne) · --r-s 8px (champs compacts, boîtes du fil, puces de navigation)
     --r-m 10px (boutons, champs, encadrés) · --r-l 14px (panneaux) · --r-rond 999px (pastilles)
   Champs : une seule règle (input, select, textarea) en deux tailles, normale par défaut et compacte dans les
   barres d'outils et rangées d'actions (.compact, .tools, .rangee, .actions-ticket, .abonnes, .ajout, .email-entrant, .proprietes). */
:root {
  /* Charte */
  --navy: #005395;
  --navy-clair: #1a6fb5;
  --navy-voile: rgba(0, 83, 149, 0.45);
  --night: #06182f;
  --night-2: #0a2a4a;
  --cyan: #069adc;
  --cyan-voile: rgba(6, 154, 220, 0.1);
  --teal: #19b7cf;
  --teal-clair: #7fd3e6;
  --teal-voile: rgba(25, 183, 207, 0.1);
  --teal-voile-2: rgba(25, 183, 207, 0.18);
  --red: #f01c21;
  --red-voile: rgba(240, 28, 33, 0.1);
  --alerte-texte: #ff8a8d;
  --blanc: #fff;
  --noir: #000;

  /* Note interne */
  --note: #e8c66a;
  --note-voile: rgba(232, 198, 106, 0.08);
  --note-voile-2: rgba(232, 198, 106, 0.16);
  --note-texte: #f5e3b3;
  --sur-note: #3a2c00;

  /* Textes et surfaces */
  --texte: #e6f1fb;
  --texte-2: #cfe3f5;
  --texte-3: #7f9ab3;
  --verre: rgba(255, 255, 255, 0.05);
  --verre-bord: rgba(255, 255, 255, 0.1);
  --champ: rgba(255, 255, 255, 0.07);
  --champ-bord: rgba(255, 255, 255, 0.14);
  --champ-bord-survol: rgba(255, 255, 255, 0.26);
  --ligne: rgba(255, 255, 255, 0.08);
  --ligne-douce: rgba(255, 255, 255, 0.05);
  --survol: rgba(255, 255, 255, 0.05);
  --pastille: rgba(255, 255, 255, 0.08);
  --piste: rgba(255, 255, 255, 0.12);
  --bord-bouton: rgba(255, 255, 255, 0.18);
  --fond-outils: rgba(10, 32, 58, 0.92);
  --fond-code: rgba(0, 0, 0, 0.3);
  --fond-modale: rgba(3, 12, 24, 0.6);

  /* Statuts d'un Ticket (pastilles, barre d'avancement) */
  --statut-nouveau: #19b7cf;
  --statut-pris-en-charge: #d98a00;
  --statut-en-cours: #069adc;
  --statut-en-attente-client: #8b5cf6;
  --statut-en-attente-client-voile: rgba(139, 92, 246, 0.45);
  --statut-en-attente-client-texte: #c4b5fd;
  --statut-resolu: #14966b;
  --statut-clos: #8496a8;

  /* Priorités : le rouge restant réservé aux alertes, la priorité haute est en orange */
  --priorite-haute: #f97316;
  --priorite-normale: #069adc;
  --priorite-basse: #8496a8;

  /* Teintes des Clients (monogrammes), choisies par l'identifiant du Client modulo 8 */
  --client-0: #005395;
  --client-1: #0e9f6e;
  --client-2: #d97706;
  --client-3: #6366f1;
  --client-4: #be185d;
  --client-5: #0891b2;
  --client-6: #7c3aed;
  --client-7: #65a30d;

  /* Espacements */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;

  /* Rayons */
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 10px;
  --r-l: 14px;
  --r-rond: 999px;

  /* Tailles des champs et boutons (taille normale ; voir .compact) */
  --champ-police: 14px;
  --champ-pad: 10px 12px;
  --champ-rayon: var(--r-m);
  --btn-police: 14px;
  --btn-pad: 9px 16px;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; background: var(--night); color: var(--texte); }
a { color: var(--teal); }
.small { font-size: 12px; }
.muted { color: var(--texte-3); }

/* Focus clavier : un anneau cyan sur tout élément interactif */
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--r-xs); }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--r-m); padding: var(--btn-pad); font-weight: 600; font-size: var(--btn-police); font-family: inherit; cursor: pointer; text-decoration: none; transition: background-color 0.12s, filter 0.12s; }
.btn:focus-visible { border-radius: var(--r-m); }
.btn-primary { background: var(--navy); color: var(--blanc); }
.btn-primary:hover { background: var(--navy-clair); }
.btn-ghost { background: transparent; color: var(--texte); border: 1px solid var(--bord-bouton); }
.btn-ghost:hover { background: var(--survol); border-color: var(--champ-bord-survol); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: none; }
.btn-primary:disabled { background: var(--navy); }
.btn-ghost:disabled { background: transparent; }
/* Action forte (« Nouvelle demande ») : seul usage du rouge pour un bouton */
.bar .btn-primary { background: var(--red); color: var(--blanc); }
.bar .btn-primary:hover { background: var(--red); filter: brightness(1.12); }

/* Icônes (#35) : sprite Lucide public/icones.svg, à la couleur du texte. Bouton à icône seule : .btn-icone,
   avec un badge éventuel (compteur à traiter). */
.icone { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.btn-icone { position: relative; padding: var(--e-2); }
.btn-icone .icone { width: 18px; height: 18px; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-rond); background: var(--red); color: var(--blanc); font-size: 11px; font-weight: 700; line-height: 1; }

/* Menu utilisateur : avatar à initiales, en <details> natif */
.menu-utilisateur { position: relative; }
.menu-utilisateur summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; border-radius: var(--r-rond); }
.menu-utilisateur summary::-webkit-details-marker { display: none; }
.avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-rond); background: var(--navy); color: var(--blanc); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px var(--bord-bouton); }
.menu-utilisateur summary:hover .avatar, .menu-utilisateur[open] .avatar { box-shadow: 0 0 0 2px var(--cyan); }
.menu-utilisateur .nom { display: none; }
.menu-utilisateur .menu { position: absolute; right: 0; top: calc(100% + var(--e-2)); z-index: 20; min-width: 200px; display: grid; gap: var(--e-2); padding: var(--e-3); background: var(--night-2); border: 1px solid var(--verre-bord); border-radius: var(--r-m); box-shadow: 0 8px 24px var(--fond-modale); }
.menu-utilisateur .menu form { margin: 0; }
.menu-utilisateur .menu .btn { width: 100%; --btn-pad: 7px 12px; --btn-police: 13px; }

/* Champs : une seule règle, deux tailles */
input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea {
  font-family: inherit; font-size: var(--champ-police); line-height: 1.4; color: var(--blanc); background: var(--champ);
  border: 1px solid var(--champ-bord); border-radius: var(--champ-rayon); padding: var(--champ-pad); min-width: 0;
  transition: border-color 0.12s;
}
:is(input, select, textarea):hover:not(:disabled) { border-color: var(--champ-bord-survol); }
:is(input, select, textarea):focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
:is(input, select, textarea):disabled { opacity: 0.55; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--texte-3); }
textarea { resize: vertical; line-height: 1.5; }
select option { background: var(--night-2); color: var(--texte); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cyan); }
input[type="date"] { color-scheme: dark; }
input[type="file"] { font-family: inherit; font-size: 13px; color: var(--texte-2); }
input[type="file"]::file-selector-button { margin-right: var(--e-2); font: inherit; font-weight: 600; color: var(--texte); background: transparent; border: 1px solid var(--bord-bouton); border-radius: var(--r-s); padding: 5px 10px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--survol); border-color: var(--champ-bord-survol); }
.compact, .tools, .rangee, .actions-ticket, .abonnes, .ajout, .email-entrant, .proprietes {
  --champ-police: 13px; --champ-pad: 6px 10px; --champ-rayon: var(--r-s); --btn-police: 13px; --btn-pad: 7px 12px;
}

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-rond); font-size: 12px; font-weight: 500; background: var(--pastille); color: var(--texte-2); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--texte-3); }
.dot[data-statut="Nouveau"] { background: var(--statut-nouveau); }
.dot[data-statut="Pris en charge"] { background: var(--statut-pris-en-charge); }
.dot[data-statut="En cours"] { background: var(--statut-en-cours); }
.dot[data-statut="En attente client"] { background: var(--statut-en-attente-client); }
.dot[data-statut="Résolu"] { background: var(--statut-resolu); }
.dot[data-statut="Clos"] { background: var(--statut-clos); }
.alerte { border-left: 3px solid var(--red); background: var(--red-voile); padding: 10px 12px; border-radius: 0 var(--r-s) var(--r-s) 0; }

/* Fond de la variante C */
.D {
  min-height: 100vh;
  color: var(--texte);
  background: radial-gradient(900px 500px at 100% 100%, var(--teal-voile-2), transparent 60%),
    linear-gradient(160deg, var(--night), var(--night-2)) fixed;
}
.panel { background: var(--verre); border: 1px solid var(--verre-bord); border-radius: var(--r-l); backdrop-filter: blur(10px); overflow: auto; min-height: 0; }

/* Accueil et refus */
.D.centre { display: grid; place-items: center; padding: var(--e-4); }
.carte { width: min(460px, 100%); padding: var(--e-6); display: grid; gap: 14px; justify-items: start; border-top: 3px solid var(--navy); }
.carte .logo { height: 26px; }
.carte h1 { margin: 6px 0 0; font-size: 24px; font-weight: 600; }
.carte p { margin: 0; }

/* Espace support */
.D.cli { display: grid; height: 100vh; }
.main { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.bar { display: flex; align-items: center; gap: 18px; padding: var(--e-4) 28px; border-bottom: 1px solid var(--ligne); background: linear-gradient(90deg, var(--navy-voile), transparent 70%); flex-wrap: wrap; }
.bar img { height: 22px; }
.bar h1 { margin: 0; font-size: 20px; font-weight: 600; }
.brand-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-clair); }
.bar .sp { flex: 1; }
.seg { display: inline-flex; background: var(--piste); border-radius: var(--r-m); padding: 3px; }
.seg a { color: var(--texte-2); padding: 7px 14px; border-radius: var(--r-s); font-weight: 600; text-decoration: none; }
.seg a:hover { background: var(--survol); }
.seg a.on { background: var(--blanc); color: var(--navy); }

.body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; padding: 18px 28px 28px; min-height: 0; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--texte-3); font-size: 12px; padding: 10px 14px; border-bottom: 1px solid var(--ligne); }
td { padding: 10px 14px; border-bottom: 1px solid var(--ligne-douce); vertical-align: top; }
td a { color: var(--texte); text-decoration: none; }
tr.r:hover td { background: var(--survol); }
tr.sel td { background: var(--navy-voile); }
tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
td.vide { padding: var(--e-5) 14px; }

.tl { padding: 20px 22px; }
.tl h2 { margin: 6px 0 10px; font-size: 19px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--e-2); }
.avancement { margin: var(--e-4) 0; }
.progress { display: flex; gap: var(--e-1); }
.progress div { flex: 1; height: 6px; border-radius: 3px; background: var(--piste); }
.progress div.on { background: linear-gradient(90deg, var(--navy), var(--cyan)); }
.progress-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--texte-3); margin-top: 6px; }
.progress div.attente { background: repeating-linear-gradient(90deg, var(--statut-en-attente-client) 0 8px, var(--statut-en-attente-client-voile) 8px 14px); }
.progress-labels .attente { color: var(--statut-en-attente-client-texte); font-weight: 600; }

.formulaire { display: grid; gap: 14px; }
.formulaire h2 { margin-bottom: 0; }
/* Libellé au-dessus du champ ; l'astérisque d'un champ obligatoire se place juste après le libellé */
.formulaire label { display: grid; grid-template-columns: auto 1fr; gap: 6px 4px; font-size: 12px; font-weight: 600; color: var(--texte-2); }
.formulaire label > :is(input, select, textarea) { grid-column: 1 / -1; }
.formulaire label:has(> :is(input, select, textarea):required)::after { content: "*"; grid-row: 1; grid-column: 2; color: var(--alerte-texte); }
.formulaire .actions { display: flex; justify-content: flex-end; gap: var(--e-2); }

/* Console Intervenant */
.D.con { display: grid; grid-template-columns: 230px minmax(0, 1fr); height: 100vh; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 18px 14px; background: var(--verre); border-right: 1px solid var(--ligne); border-top: 3px solid var(--navy); backdrop-filter: blur(10px); overflow: auto; }
.nav img { height: 24px; margin: 2px 8px 20px; align-self: flex-start; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); color: var(--texte); text-decoration: none; }
.nav a:hover { background: var(--survol); }
.nav a.on { background: var(--navy-voile); color: var(--blanc); font-weight: 600; box-shadow: inset 3px 0 0 var(--cyan); }
.nav .n { margin-left: auto; font-size: 12px; color: var(--texte-3); }
.nav .n.hot { background: var(--red); color: var(--blanc); border-radius: var(--r-rond); padding: 0 7px; }
.nav .sp { flex: 1; }
.nav .menu-utilisateur summary { padding: 6px 8px; border-radius: var(--r-s); }
.nav .menu-utilisateur summary:hover { background: var(--survol); }
.nav .menu-utilisateur .avatar { width: 28px; height: 28px; font-size: 11px; }
.nav .menu-utilisateur .nom { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .menu-utilisateur .menu { top: auto; bottom: calc(100% + var(--e-1)); left: 0; right: auto; }
.mono { width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--blanc); background: var(--client-0); }
.mono.teinte-1 { background: var(--client-1); }
.mono.teinte-2 { background: var(--client-2); }
.mono.teinte-3 { background: var(--client-3); }
.mono.teinte-4 { background: var(--client-4); }
.mono.teinte-5 { background: var(--client-5); }
.mono.teinte-6 { background: var(--client-6); }
.mono.teinte-7 { background: var(--client-7); }
.prio { display: inline-flex; align-items: center; gap: var(--e-1); }
.prio .icone { stroke-width: 2.5; }
.prio[data-priorite="Haute"] { color: var(--priorite-haute); }
.prio[data-priorite="Normale"] { color: var(--priorite-normale); }
.prio[data-priorite="Basse"] { color: var(--priorite-basse); }
.tools { display: flex; gap: var(--e-2); align-items: center; padding: var(--e-3) 14px; border-bottom: 1px solid var(--ligne); position: sticky; top: 0; background: var(--fond-outils); z-index: 1; flex-wrap: wrap; }
.tools input { flex: 1; min-width: 180px; }
tr.day td { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); background: var(--ligne-douce); padding: 6px 14px; }
.fil { margin-top: 14px; }
.ev { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--e-3); padding: 10px 0; position: relative; }
.ev::before { content: ""; position: absolute; left: 13px; top: 38px; bottom: -10px; width: 1px; background: var(--piste); }
.ev:last-child::before { display: none; }
.ev .ico { position: relative; width: 28px; height: 28px; border-radius: var(--r-s); display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--pastille); }
/* Nature de l'élément, en marque sur l'avatar de l'auteur */
.ev .ico .nature { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: var(--r-rond); background: var(--night-2); border: 1px solid var(--verre-bord); color: var(--texte-2); }
.ev .ico .nature .icone { width: 10px; height: 10px; stroke-width: 2.5; }
.ev.note .ico .nature { color: var(--note); border-color: var(--note); }
.ev.systeme .ico { color: var(--texte-3); }
.ev .box { margin-top: var(--e-1); white-space: pre-wrap; line-height: 1.5; background: var(--champ); border: 1px solid var(--verre-bord); border-radius: var(--r-s); padding: 8px 10px; }
.ev.note .box { background: var(--note-voile); border: 1px dashed var(--note); color: var(--note-texte); }
/* Actions d'un Intervenant sur le Ticket (console) */
.actions-ticket { display: grid; gap: var(--e-2); margin: var(--e-3) 0 var(--e-1); padding: 10px 12px; border: 1px solid var(--verre-bord); border-radius: var(--r-m); background: var(--ligne-douce); }
.actions-ticket form, .actions-ticket .rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; }
/* Abonnés d'un Ticket (#9) */
.abonnes { display: grid; gap: 6px; margin: 10px 0; padding: 8px 12px; border: 1px solid var(--verre-bord); border-radius: var(--r-m); background: var(--ligne-douce); }
.abonnes form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.abonnes .chip .btn { padding: 0 6px; font-size: 12px; border: none; }
.info { border-left: 3px solid var(--cyan); background: var(--cyan-voile); padding: 10px 12px; border-radius: 0 var(--r-s) var(--r-s) 0; }
.ev.systeme .box { background: transparent; border: 0; padding: 0; color: var(--texte-3); }
.libelle-note { color: var(--note); }

/* Formulaire de message sous le fil ; en Note interne, jaune pointillé comme dans le fil (variante D) */
.composeur { display: grid; gap: 10px; margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--ligne); }
.composeur .actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.composeur .aide-note { display: none; margin-right: auto; color: var(--note); }
.composeur .fichiers { display: grid; gap: var(--e-1); }
.pieces { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12px; }
.icone-fichier { width: 14px; height: 14px; margin-right: var(--e-1); color: var(--texte-3); vertical-align: -2px; }
/* Pièces jointes citées dans un message (#39) : vignette cliquable, envoi en arrière-plan depuis le champ texte */
.box .apercu { display: inline-block; vertical-align: top; border-radius: var(--r-s); }
.box .apercu img { display: block; max-width: min(100%, 360px); max-height: 240px; border-radius: var(--r-s); border: 1px solid var(--verre-bord); }
.formulaire .fichiers input[type="file"] { font-weight: 400; }
.envoi-pieces { margin: 0; }
.envoi-pieces:empty { display: none; }
textarea.depot { outline: 2px dashed var(--cyan); outline-offset: 2px; background: var(--cyan-voile); }
.bascule { display: inline-flex; justify-self: start; background: var(--pastille); border-radius: var(--r-m); padding: 3px; }
.bascule label { padding: 6px 12px; border-radius: var(--r-s); font-size: 13px; font-weight: 600; color: var(--texte-2); cursor: pointer; }
.bascule label:hover { background: var(--survol); }
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule label:has(input:checked) { background: var(--blanc); color: var(--navy); }
.bascule label:has(input[value="note"]:checked) { background: var(--note); color: var(--sur-note); }
.bascule label:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.composeur:has(input[value="note"]:checked) textarea { background: var(--note-voile); border: 1px dashed var(--note); color: var(--note-texte); }
.composeur:has(input[value="note"]:checked) .aide-note { display: inline; }
.composeur:has(input[value="note"]:checked) .btn-primary { background: var(--note); color: var(--sur-note); }
/* Section Clients de la barre latérale */
.nav .titre-section .icone { width: 14px; height: 14px; }
.nav .titre-section { margin-top: 18px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-3); }
.nav .titre-section.on { color: var(--blanc); }
.nav .mono { width: 22px; height: 22px; font-size: 10px; flex: none; }
.nav .nom-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Focus Client */
.fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 18px; margin: 0; padding: var(--e-4) 18px; border-bottom: 1px solid var(--ligne); }
.fiche .large { grid-column: 1 / -1; }
.fiche dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-3); margin-bottom: var(--e-1); }
.fiche dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.fiche dd > div { width: 100%; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--texte-2); }
.fiche .tenant { display: block; }
/* Fiche client en panneau latéral : contexte, Contrats, puis les administrations en bas */
.fiche-client .fiche { padding: var(--e-4) 0; }
.actions-fiche { display: flex; flex-wrap: wrap; gap: var(--e-2); padding-top: var(--e-4); }
.alerte-texte { color: var(--alerte-texte); }
.avec-mono { display: inline-flex; align-items: center; gap: 10px; }

/* Administration d'un Client */
.marge { margin: var(--e-4) 22px 0; }
.admin-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.admin-liste > li { background: var(--champ); border: 1px solid var(--verre-bord); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 6px; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.societes { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: var(--e-1); }
.en-ligne { margin: 0; }
.btn-mini { padding: 3px 9px; font-size: 12px; font-weight: 500; background: transparent; color: var(--texte-3); border: 1px solid var(--champ-bord); }
.btn-mini:hover { color: var(--texte); border-color: var(--champ-bord-survol); }
.ajout { display: flex; gap: var(--e-2); }
.ajout input { flex: 1; }
.lien-copie { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--texte-2); }

/* Rattachement : choix de l'Espace support, validation */
.choix-espace { display: grid; gap: 10px; width: 100%; }
.choix { display: flex; align-items: center; gap: 10px; background: var(--champ); border: 1px solid var(--verre-bord); border-radius: var(--r-m); padding: 10px 12px; cursor: pointer; }
.choix:hover { border-color: var(--champ-bord-survol); }
.actions-ligne { display: flex; gap: 6px; }

/* Création d'un Ticket (#38) : Type en cartes, Environnement et Société côte à côte */
.formulaire .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); align-items: start; }
.formulaire .aide { margin: -6px 0 0; }
.formulaire:has(input[name="type"][value="Incident"]:checked) .aide { color: var(--texte-2); }
/* Environnement et Société obligatoires pour un Incident : l'astérisque suit le Type, avec ou sans script */
.formulaire:has(input[name="type"][value="Incident"]:checked) label.si-incident::after { content: "*"; grid-row: 1; grid-column: 2; color: var(--alerte-texte); }
.types { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 6px; }
.types legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--texte-2); }
.types:has(input:required) legend::after { content: " *"; color: var(--alerte-texte); }
.cartes-type { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-2); }
.formulaire label.carte-type {
  position: relative; display: grid; grid-template-columns: 1fr; align-content: start; gap: var(--e-1);
  padding: var(--e-3); border: 1px solid var(--champ-bord); border-radius: var(--r-m); background: var(--champ);
  font-weight: 400; cursor: pointer; transition: border-color 0.12s, background-color 0.12s;
}
.formulaire .types label.carte-type::after { content: none; }
.carte-type:hover { border-color: var(--champ-bord-survol); }
/* Le bouton radio reste dans le formulaire (clavier, validation) mais la carte entière le représente */
.carte-type input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; }
.carte-type .nom-type { display: inline-flex; align-items: center; gap: var(--e-2); font-size: 14px; font-weight: 600; color: var(--texte); }
.carte-type .nom-type .icone { width: 18px; height: 18px; color: var(--texte-3); }
.carte-type:has(input:checked) .nom-type .icone { color: var(--cyan); }
.carte-type .aide-type { font-size: 12px; line-height: 1.4; color: var(--texte-3); }
.carte-type:has(input:checked) { border-color: var(--cyan); background: var(--navy-voile); box-shadow: inset 0 0 0 1px var(--cyan); }
.carte-type:has(input:checked) .aide-type { color: var(--texte-2); }
.carte-type:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.carte-type:has(input[aria-invalid="true"]) { border-color: var(--alerte-texte); }
/* Message d'erreur au niveau du champ concerné */
.erreur-champ { grid-column: 1 / -1; font-size: 12px; font-weight: 500; color: var(--alerte-texte); }
.formulaire :is(input, select, textarea)[aria-invalid="true"]:not([type="radio"]) { border-color: var(--alerte-texte); }

/* Liste pleine largeur ; Ticket en panneau latéral, Nouvelle demande en fenêtre modale (#36) */
.body.pleine { grid-template-columns: minmax(0, 1fr); }
/* Toute la ligne ouvre le Ticket : le lien du titre s'étend à la ligne. */
tr.r { position: relative; cursor: pointer; }
tr.r a.lien-ticket::after { content: ""; position: absolute; inset: 0; }
tr.r a.lien-ticket:focus-visible { outline: none; }
tr.r:has(a.lien-ticket:focus-visible) td { background: var(--navy-voile); }
tr.r:has(a.lien-ticket:focus-visible) td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.volet { color: var(--texte); background: linear-gradient(160deg, var(--night), var(--night-2)); border: 1px solid var(--verre-bord); padding: 0; max-width: none; max-height: none; overflow: auto; overscroll-behavior: contain; }
.volet::backdrop { background: var(--fond-modale); }
body:has(.volet:modal) { overflow: hidden; }
/* Croix de fermeture, toujours visible en haut à droite pendant le défilement */
.volet-tete { position: sticky; top: 0; height: 0; display: flex; justify-content: flex-end; align-items: flex-start; z-index: 2; }
.volet-tete .fermer { margin: var(--e-3) var(--e-3) 0 0; padding: var(--e-2); background: var(--night-2); }
.volet-tete .fermer .icone { width: 18px; height: 18px; }
.volet > .tl > :is(div:first-child, h2:first-of-type) { padding-right: 44px; }
/* Sans script : le volet ouvert remplace la page */
.volet[open]:not(:modal) { position: fixed; inset: 0; z-index: 10; width: auto; height: auto; margin: 0; border: 0; }
.panneau:modal { inset: 0 0 0 auto; margin: 0; width: max(60vw, min(640px, 100vw)); height: 100dvh; border-width: 0 0 0 1px; animation: glisse 0.18s ease-out; }
.panneau:modal:has(> .fiche-client) { width: min(520px, 100vw); }
.modale:modal { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: var(--r-l); }
@keyframes glisse { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .panneau:modal { animation: none; } }

/* Ticket dans la console (#37) : en-tête, puis le fil et le composeur à gauche, le panneau de propriétés à droite.
   Le volet a la hauteur de l'écran : le fil et le panneau défilent chacun de leur côté, le composeur reste en bas. */
.volet > .ticket-console { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; }
.ticket-console .entete { flex: none; display: grid; gap: var(--e-1); padding-bottom: var(--e-3); border-bottom: 1px solid var(--ligne); }
.ticket-console .entete h2 { margin: 2px 0; }
.ticket-console .entete :is(.alerte, .bandeau-github) { margin: var(--e-2) 0 0; }
.ticket-grille { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e-5); }
.ticket-fil { display: flex; flex-direction: column; min-height: 0; }
.ticket-fil .defilement { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ticket-fil .composeur { flex: none; margin-top: 0; padding: var(--e-3) 0 var(--e-4); gap: var(--e-2); }
.ticket-fil .composeur textarea { height: 6.5em; }

/* Panneau de propriétés : pastilles cliquables, puis Temps passé, Tickets GitHub et Abonnés en sections */
.proprietes { min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--e-3); padding: var(--e-4) 0 var(--e-4) var(--e-4); border-left: 1px solid var(--ligne); }
.proprietes form { margin: 0; }
.proprietes .prendre { width: 100%; justify-content: center; }
.props { display: grid; gap: var(--e-1); margin: 0; }
.props > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--e-2); min-height: 32px; }
.props dt { font-size: 12px; color: var(--texte-3); }
.props dd { margin: 0; min-width: 0; font-size: 13px; }
.pastille-prop { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r-rond); font-size: 13px; font-weight: 500; color: var(--texte); background: var(--pastille); white-space: nowrap; }
.pastille-prop.inerte { background: transparent; padding-left: 0; }
summary.pastille-prop { cursor: pointer; list-style: none; transition: border-color 0.12s, background-color 0.12s; }
summary.pastille-prop::-webkit-details-marker { display: none; }
summary.pastille-prop:hover { border-color: var(--champ-bord-survol); }
summary.pastille-prop:focus-visible { border-radius: var(--r-rond); }
.menu-prop[open] > summary.pastille-prop { border-color: var(--cyan); background: var(--cyan-voile); }
.pastille-prop .chevron { width: 14px; height: 14px; color: var(--texte-3); }
.menu-prop { position: relative; }
.menu-prop .menu { position: absolute; z-index: 3; top: calc(100% + var(--e-1)); left: 0; min-width: 180px; max-height: 280px; overflow: auto; display: grid; padding: var(--e-1); border: 1px solid var(--verre-bord); border-radius: var(--r-m); background: var(--night-2); box-shadow: 0 8px 24px var(--fond-modale); }
.menu-prop .menu button { display: flex; align-items: center; gap: var(--e-2); width: 100%; padding: 6px 10px; border: 0; border-radius: var(--r-s); font: inherit; font-size: 13px; text-align: left; color: var(--texte); background: transparent; cursor: pointer; }
.menu-prop .menu button:hover:not(:disabled) { background: var(--survol); }
.menu-prop .menu button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.menu-prop .menu button[aria-current] { cursor: default; color: var(--texte-3); }
.menu-prop .menu .coche { margin-left: auto; color: var(--cyan); }
/* Les blocs du Ticket deviennent des sections du panneau */
.proprietes :is(.actions-ticket, .abonnes) { grid-template-columns: minmax(0, 1fr); margin: 0; padding: var(--e-3) 0 0; border: 0; border-top: 1px solid var(--ligne); border-radius: 0; background: none; }
.proprietes .actions-ticket > .rangee:first-child > b, .proprietes .abonnes > b { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-3); }
.proprietes .rangee { gap: 6px; }
.proprietes .rangee :is(input, select) { flex: 1 1 100px; max-width: 100%; }
.proprietes .rangee input[name="reference"] { flex-basis: 100%; }
.proprietes .github .liens-github li { align-items: flex-start; }
.proprietes .chip { white-space: normal; }

@media (max-width: 900px) {
  .panneau:modal { width: 100vw; border-width: 0; }
  .modale:modal { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .formulaire .colonnes { grid-template-columns: 1fr; }
  .nav .titre-section { margin-top: 0; }
  .D.con { grid-template-columns: 1fr; height: auto; }
  .nav { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--ligne); }
  .nav img { margin: 0 8px 0 0; }
  .nav .sp { display: none; }
  /* Le menu utilisateur déborde sous la barre : ni coupé par le défilement, ni recouvert par l'en-tête */
  .nav { overflow: visible; position: relative; z-index: 3; }
  .nav .menu-utilisateur { margin-left: auto; }
  .nav .menu-utilisateur .nom { display: none; }
  .nav .menu-utilisateur .menu { top: calc(100% + var(--e-1)); bottom: auto; left: auto; right: 0; }
  .D.cli { height: auto; }
  .bar { padding: 14px var(--e-4); gap: var(--e-3); }
  .body { grid-template-columns: 1fr; padding: var(--e-4); }
  /* Ticket (#37) : une seule colonne qui défile en entier, le panneau de propriétés sous le fil et le composeur */
  .volet > .ticket-console { display: block; height: auto; padding: var(--e-4); }
  .ticket-grille { display: block; }
  .ticket-fil .defilement { overflow: visible; }
  .proprietes { margin-top: var(--e-4); padding: var(--e-4) 0 0; border-left: 0; border-top: 1px solid var(--ligne); }
}

/* Affectations (console et administration de l'Espace support) */
.affectations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; }
.affectations label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texte-2); }

/* Contrats et Temps passé (#12) */
.soldes { display: grid; gap: var(--e-1); padding-bottom: 0; }
.temps .saisies { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.temps details summary { cursor: pointer; }
.temps details form { margin-top: 6px; }

/* E-mails à qualifier (console) et Tickets liés */
.email-entrant { border-top: 1px solid var(--verre-bord); }
.email-entrant h3 { margin: 6px 0 8px; font-size: 16px; }
.email-entrant .box { margin: 8px 0; white-space: pre-wrap; line-height: 1.5; background: var(--champ); border: 1px solid var(--verre-bord); border-radius: var(--r-s); padding: 8px 10px; max-height: 12em; overflow: auto; }
.email-entrant .rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; }
.email-entrant input.numero { width: 7em; }
.email-entrant select { max-width: 100%; }
.tickets-lies { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-1); }
/* Base de connaissance (#14) : liste des Articles, rendu Markdown, synchronisation */
.articles .compte { margin: 10px 14px 0; }
.articles .vide { padding: var(--e-5) 14px; margin: 0; }
.liste-articles { list-style: none; margin: 0; padding: 0; }
.liste-articles li { padding: 10px 14px; border-bottom: 1px solid var(--ligne-douce); display: grid; gap: 3px; }
.liste-articles li:hover { background: var(--survol); }
.liste-articles li.sel { background: var(--navy-voile); box-shadow: inset 3px 0 0 var(--cyan); }
.liste-articles a { color: var(--texte); text-decoration: none; }
.liste-articles .extrait { color: var(--texte-2); }
.chip.visibilite-interne { background: var(--note-voile-2); color: var(--note); }
.synchro { border-top: 1px solid var(--ligne); display: grid; gap: 6px; justify-items: start; }
.synchro h2 { font-size: 15px; }
.synchro p { margin: 0; }
.markdown { line-height: 1.6; color: var(--texte-2); overflow-wrap: anywhere; }
.markdown h1, .markdown h2, .markdown h3 { color: var(--texte); margin: 18px 0 8px; }
.markdown h1 { font-size: 18px; }
.markdown h2 { font-size: 16px; }
.markdown h3 { font-size: 14px; }
.markdown pre { background: var(--fond-code); border: 1px solid var(--verre-bord); border-radius: var(--r-s); padding: 10px 12px; overflow-x: auto; }
.markdown :not(pre) > code { background: var(--pastille); padding: 1px 5px; border-radius: var(--r-xs); }
.markdown blockquote { margin: 0; border-left: 3px solid var(--cyan); padding: 2px 12px; color: var(--texte-3); }
.markdown table { margin: 10px 0; }
.markdown img { max-width: 100%; border-radius: var(--r-s); }
/* Tickets GitHub (#13) : console uniquement */
.github .liens-github { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.github .liens-github li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.github .chip.ferme { background: var(--teal-voile-2); color: var(--teal); }
.github details summary { cursor: pointer; }
.github details .formulaire { margin-top: var(--e-2); display: grid; gap: var(--e-2); }
.github textarea { width: 100%; }
.bandeau-github { display: grid; gap: var(--e-2); margin: var(--e-3) 0 var(--e-1); padding: 10px 12px; border-left: 3px solid var(--teal); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--teal-voile); }
.bandeau-github p { margin: 0; }
.bandeau-github .rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.bandeau-github form { margin: 0; }
/* Administration (/admin, ADR 0007) : plein écran, barre latérale dédiée (variante B de docs/prototypes/admin.md) */
.D.adm { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100vh; }
.adm .nav .retour-console { color: var(--texte-3); font-size: 13px; }
.adm .nav .titre-admin { margin: var(--e-3) 10px var(--e-1); }
.adm .nav .n .dot { vertical-align: middle; }
/* Lignes à la hauteur de leur contenu : sans cela, les panneaux (.panel, min-height: 0) se tassent dans la hauteur de l'écran au lieu de faire défiler la page. */
.admin { overflow: auto; padding: var(--e-6) 48px 90px; max-width: 960px; display: grid; grid-auto-rows: max-content; gap: var(--e-3); align-content: start; }
.entete-admin { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.entete-admin h1 { margin: var(--e-1) 0 0; font-size: 22px; font-weight: 600; }
.admin > p { margin: 0; }
.admin .titre-groupe { margin: var(--e-5) 0 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-3); }
/* Statut d'un service : point coloré, toujours accompagné de son libellé (pastille ou title) */
.dot[data-etat="ok"] { background: var(--teal); }
.dot[data-etat="alerte"] { background: var(--note); }
.dot[data-etat="erreur"] { background: var(--red); }
.dot[data-etat="absent"] { background: var(--texte-3); }
.chip.etat-service[data-etat="alerte"] { color: var(--note-texte); }
.chip.etat-service[data-etat="erreur"] { background: var(--red-voile); color: var(--alerte-texte); }
.a-faire { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.a-faire li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--verre); border: 1px solid var(--verre-bord); border-radius: var(--r-m); }
.a-faire li > span:not(.dot) { flex: 1; }
.service-admin { padding: var(--e-3) var(--e-4); scroll-margin-top: var(--e-4); }
.service-admin > header { display: flex; align-items: center; gap: 10px; }
.service-admin h3 { margin: 0; flex: 1; font-size: 15px; }
.valeurs-service { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; }
.valeurs-service li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: 6px 0; border-top: 1px solid var(--ligne-douce); }
.valeurs-service .contenu { background: var(--fond-code); padding: 2px 6px; border-radius: var(--r-xs); word-break: break-all; }
/* Source d'une valeur : variable de déploiement, secret Worker ou absente */
.source { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: var(--r-rond); border: 1px solid var(--champ-bord); color: var(--texte-3); }
.source[data-source="secret-worker"] { color: var(--note-texte); border-color: var(--note); }
.source[data-source="absente"] { color: var(--alerte-texte); border-color: var(--red); }
.service-admin h3 a { color: inherit; text-decoration: none; }
.service-admin h3 a:hover { text-decoration: underline; }
/* Progression des guides et en-tête d'un service (étapes guidées de la variante C) */
.resume-service { padding: var(--e-3) var(--e-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.progression-guides { display: grid; gap: 6px; flex: 1; min-width: 200px; font-size: 13px; }
.jauge { height: 6px; border-radius: 3px; background: var(--piste); overflow: hidden; }
.jauge > div { height: 100%; background: linear-gradient(90deg, var(--navy), var(--cyan)); }
.dernier-test { margin: 0; flex-basis: 100%; color: var(--texte-2); }
.dernier-test[data-reussi="false"] { color: var(--alerte-texte); }
.etapes-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.etape-guide { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--verre); border: 1px solid var(--verre-bord); border-radius: var(--r-m); }
.etape-guide h3 { margin: 1px 0 var(--e-1); font-size: 15px; }
.etape-guide .markdown > :first-child { margin-top: 0; }
.etape-guide .markdown > :last-child { margin-bottom: 0; }
.coche { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--champ-bord); display: grid; place-items: center; }
.etape-guide[data-etat="faite"] .coche { background: var(--teal); border-color: var(--teal); color: var(--night); }
.etape-guide[data-etat="a-faire"] .coche { border-color: var(--cyan); }
.etape-guide[data-etat="manuelle"] .coche { border-style: dashed; }
.valeurs-etape { margin-top: var(--e-3); padding: 2px 10px; background: var(--ligne-douce); border-radius: var(--r-s); }
.valeurs-etape li:first-child { border-top: 0; }
.source[data-source="d1"] { color: var(--teal-clair); border-color: var(--teal); }
/* Expiration d'un secret (#55) : J-n, à surveiller sous 30 jours, en erreur une fois passée */
.expiration { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-2); }
.expiration[data-etat="alerte"] { color: var(--note-texte); }
.expiration[data-etat="erreur"] { color: var(--alerte-texte); }
/* Champ d'un Paramètre (#52) : « Remplacer » replié en <details> natif, sans script ; un secret n'est jamais réaffiché */
.champ-parametre { scroll-margin-top: var(--e-4); }
.champ-parametre > p { flex-basis: 100%; margin: 0; }
.actions-parametre { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-2); margin-left: auto; }
.actions-parametre form { margin: 0; }
.remplacer-parametre > summary { list-style: none; cursor: pointer; }
.remplacer-parametre > summary::-webkit-details-marker { display: none; }
.remplacer-parametre[open] { flex-basis: 100%; display: grid; gap: var(--e-2); }
.remplacer-parametre[open] > summary { justify-self: start; }
/* Boutons d'en-tête d'un service : action propre (resynchronisation) et « Tester » */
.actions-service { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.actions-service form { margin: 0; }
/* Boîte support (#56) : abonnement Graph et assistant de bascule, sous le guide */
.boite-abonnement, .assistant-bascule { margin-top: var(--e-4); scroll-margin-top: var(--e-4); }
.boite-abonnement h2 { margin: 0 0 var(--e-1); font-size: 16px; }
.boite-abonnement .rangee form, .assistant-bascule form { margin: var(--e-2) 0 0; }
.assistant-bascule pre { white-space: pre-wrap; word-break: break-all; }
/* Journal d'audit */
.journal-audit td { vertical-align: middle; }
/* Tenants : Clients d'un tenant et lien de consentement en attente */
.clients-tenant { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.tenants-admin code { word-break: break-all; }
.tenants-admin .lien-copie { margin-top: var(--e-1); }
/* Utilisateurs & rôles (#58) */
.utilisateurs-admin td { vertical-align: middle; }
.utilisateurs-admin form { margin: 0; }
.utilisateurs-admin td:last-child { text-align: right; }
/* Bandeau des secrets qui expirent sous 30 jours (#58), sur toutes les pages de l'administration */
.bandeau-expirations { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--note); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--note-voile-2); color: var(--note-texte); }
.bandeau-expirations[data-etat="erreur"] { border-left-color: var(--red); background: var(--red-voile); color: var(--alerte-texte); }
.bandeau-expirations p { margin: 0; }
.bandeau-expirations a { color: inherit; }
@media (max-width: 900px) {
  .D.adm { grid-template-columns: 1fr; height: auto; }
  .adm .nav .titre-admin { display: none; }
  .admin { padding: var(--e-4); }
}