/* =====================================================================
   QaLyZa, site C « Site isométrique » : assets/site.css
   Système de design du site. Ordre de chargement dans <head> :
     1. assets/commun/brand.css   jetons de marque, polices locales (ne jamais modifier)
     2. assets/site.css           ce fichier
     3. assets/pages/<page>.css   mise en page propre à une page (facultatif)
   Conventions : classes en français ; états en « est-… » ; l'accent d'une
   application se pose avec data-app="eqms|lims|mes|ems|ams|lya" (variable --a).
   Mode d'emploi : outils/gabarit-c.md.

   Sommaire
     1.  Jetons animables et tons (Jour / Nuit, sections alternées)
     2.  Base
     3.  Typographie
     4.  Mise en page
     5.  Boutons et liens
     6.  En-tête et navigation
     7.  Interrupteur Jour / Nuit
     8.  Tête de page (avec ou sans diorama)
     9.  Pied de page
     10. Petits composants : statuts, pastilles, puces, coches
     11. Fiches d'application
     12. Schémas d'échange
     13. Tableaux
     14. Planches d'architecte et cotes
     15. Coupe du socle
     16. Plan du site et correspondances
     17. Maquettes d'écran
     18. Avertissement réglementaire
     19. Diorama
     20. Tiroir d'application
     21. Mouvement réduit
   ===================================================================== */


/* =====================================================================
   1. Jetons animables et tons
   Les couleurs sont des propriétés enregistrées (@property) : la bascule
   Jour / Nuit les interpole en une seconde. Trois tons :
     clair         la page de jour
     sombre        la page de nuit, et les sections .ton-alt de jour
     sombre relevé les sections .ton-alt de nuit (la nuit reste sombre)
   ===================================================================== */
@property --fond          { syntax: '<color>'; inherits: true; initial-value: #f9faf8; }
@property --fond-2        { syntax: '<color>'; inherits: true; initial-value: #f3f6f5; }
@property --fond-3        { syntax: '<color>'; inherits: true; initial-value: #e8f1ed; }
@property --surface       { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --texte         { syntax: '<color>'; inherits: true; initial-value: #0a1614; }
@property --texte-2       { syntax: '<color>'; inherits: true; initial-value: #5a7169; }
@property --trait         { syntax: '<color>'; inherits: true; initial-value: rgba(10, 22, 20, .10); }
@property --trait-2       { syntax: '<color>'; inherits: true; initial-value: rgba(10, 22, 20, .18); }
@property --accent        { syntax: '<color>'; inherits: true; initial-value: #246b49; }
@property --accent-doux   { syntax: '<color>'; inherits: true; initial-value: rgba(47, 143, 99, .10); }
@property --verre         { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .72); }
@property --verre-trait   { syntax: '<color>'; inherits: true; initial-value: rgba(10, 22, 20, .09); }
@property --ombre         { syntax: '<color>'; inherits: true; initial-value: rgba(13, 61, 44, .16); }
@property --lavis         { syntax: '<color>'; inherits: true; initial-value: rgba(87, 192, 138, .16); }
@property --ciel-1        { syntax: '<color>'; inherits: true; initial-value: #f9faf8; }
@property --ciel-2        { syntax: '<color>'; inherits: true; initial-value: #eef4f1; }
@property --ciel-3        { syntax: '<color>'; inherits: true; initial-value: #e1eee7; }
@property --halo          { syntax: '<color>'; inherits: true; initial-value: rgba(87, 192, 138, .20); }
@property --signal        { syntax: '<color>'; inherits: true; initial-value: #b8323c; }
@property --encours       { syntax: '<color>'; inherits: true; initial-value: #7d5a1c; }
@property --encours-fond  { syntax: '<color>'; inherits: true; initial-value: rgba(176, 131, 47, .14); }
@property --papier        { syntax: '<color>'; inherits: true; initial-value: #fbfcfa; }
@property --papier-trait  { syntax: '<color>'; inherits: true; initial-value: rgba(36, 107, 73, .09); }
@property --papier-encre  { syntax: '<color>'; inherits: true; initial-value: #2a4a3d; }
@property --plan-h        { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --plan-g        { syntax: '<color>'; inherits: true; initial-value: #e3ece7; }
@property --plan-d        { syntax: '<color>'; inherits: true; initial-value: #cfddd5; }
@property --plan-trait    { syntax: '<color>'; inherits: true; initial-value: rgba(10, 22, 20, .22); }

/* Ton clair (couleurs de base reprises des jetons de brand.css) */
:root {
  --fond: var(--q-paper); --fond-2: var(--q-paper-2); --fond-3: var(--q-paper-3); --surface: var(--q-white);
  --texte: var(--q-ink); --texte-2: var(--q-ink-muted);
  --trait: rgba(10, 22, 20, .10); --trait-2: rgba(10, 22, 20, .18);
  --accent: var(--q-forest); --accent-doux: rgba(47, 143, 99, .10);
  --verre: rgba(255, 255, 255, .72); --verre-trait: rgba(10, 22, 20, .09);
  --ombre: rgba(13, 61, 44, .16); --lavis: rgba(87, 192, 138, .16);
  --ciel-1: #f9faf8; --ciel-2: #eef4f1; --ciel-3: #e1eee7; --halo: rgba(87, 192, 138, .20);
  --signal: var(--q-rouge-encre);                      /* rouge lisible sur fond clair */
  --encours: #7d5a1c; --encours-fond: rgba(176, 131, 47, .14);
  --papier: #fbfcfa; --papier-trait: rgba(36, 107, 73, .09); --papier-encre: #2a4a3d;
  --plan-h: #ffffff; --plan-g: #e3ece7; --plan-d: #cfddd5; --plan-trait: rgba(10, 22, 20, .22);
}
/* Ton sombre */
:root[data-theme="nuit"],
.ton-alt {
  --fond: var(--q-night); --fond-2: var(--q-panel); --fond-3: var(--q-input); --surface: var(--q-panel);
  --texte: #eef3f0; --texte-2: var(--q-mist);
  --trait: rgba(232, 241, 237, .09); --trait-2: rgba(232, 241, 237, .17);
  --accent: var(--q-mint); --accent-doux: rgba(87, 192, 138, .14);
  --verre: rgba(13, 26, 20, .66); --verre-trait: rgba(232, 241, 237, .10);
  --ombre: rgba(0, 0, 0, .55); --lavis: rgba(47, 143, 99, .24);
  --ciel-1: #070f0c; --ciel-2: #0a1c15; --ciel-3: #0d3d2c; --halo: rgba(87, 192, 138, .22);
  --signal: var(--q-rouge);                            /* rouge lisible sur fond sombre */
  --encours: #dcb66e; --encours-fond: rgba(201, 164, 86, .15);
  --papier: #0c2219; --papier-trait: rgba(140, 214, 176, .09); --papier-encre: #cfe6da;
  --plan-h: #1f4234; --plan-g: #132922; --plan-d: #0d1a14; --plan-trait: rgba(232, 241, 237, .16);
}
/* Ton sombre relevé : de nuit, les sections alternées se détachent sans éblouir */
:root[data-theme="nuit"] .ton-alt {
  --fond: #0b1712; --fond-2: #10211a; --fond-3: #163128; --surface: #10211a; --papier: #0f281e;
}

:root {
  color-scheme: light;
  --gouttiere: clamp(16px, 4.2vw, 64px);
  --largeur: 1220px;
  --entete-h: 60px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-sortie: cubic-bezier(.16, 1, .3, 1);
  --duree-theme: 1s;
  /* Inter n'a pas de lettres arabes : polices du système, sans téléchargement */
  --font-arabe: 'Segoe UI', 'SF Arabic', 'Geeza Pro', 'Noto Sans Arabic', 'Noto Naskh Arabic', Tahoma, sans-serif;
}
:root[data-theme="nuit"], .ton-alt { color-scheme: dark; }
:root, .ton-alt {
  transition:
    --fond var(--duree-theme) var(--ease), --fond-2 var(--duree-theme) var(--ease), --fond-3 var(--duree-theme) var(--ease),
    --surface var(--duree-theme) var(--ease), --texte var(--duree-theme) var(--ease), --texte-2 var(--duree-theme) var(--ease),
    --trait var(--duree-theme) var(--ease), --trait-2 var(--duree-theme) var(--ease), --accent var(--duree-theme) var(--ease),
    --accent-doux var(--duree-theme) var(--ease), --verre var(--duree-theme) var(--ease), --verre-trait var(--duree-theme) var(--ease),
    --ombre var(--duree-theme) var(--ease), --lavis var(--duree-theme) var(--ease), --ciel-1 var(--duree-theme) var(--ease),
    --ciel-2 var(--duree-theme) var(--ease), --ciel-3 var(--duree-theme) var(--ease), --halo var(--duree-theme) var(--ease),
    --signal var(--duree-theme) var(--ease), --encours var(--duree-theme) var(--ease), --encours-fond var(--duree-theme) var(--ease),
    --papier var(--duree-theme) var(--ease), --papier-trait var(--duree-theme) var(--ease), --papier-encre var(--duree-theme) var(--ease),
    --plan-h var(--duree-theme) var(--ease), --plan-g var(--duree-theme) var(--ease), --plan-d var(--duree-theme) var(--ease),
    --plan-trait var(--duree-theme) var(--ease);
}

/* Accent d'application : data-app pose --a ; --a-texte reste lisible sur le ton courant */
[data-app="eqms"] { --a: var(--app-eqms); }
[data-app="lims"] { --a: var(--app-lims); }
[data-app="mes"]  { --a: var(--app-mes); }
[data-app="ems"]  { --a: var(--app-ems); }
[data-app="ams"]  { --a: var(--app-ams); }
[data-app="vms"]  { --a: var(--app-vms); }
[data-app="lya"]  { --a: #8b6cf0; }
[data-app] { --a-texte: color-mix(in srgb, var(--a) 56%, var(--texte)); }


/* =====================================================================
   2. Base
   ===================================================================== */
html {
  background: var(--fond);
  scroll-padding-top: calc(var(--entete-h) + 36px);
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}
body {
  background: var(--fond);
  color: var(--texte);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
html.est-verrouille, html.est-verrouille body { overflow: hidden; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.evitement {
  position: fixed; z-index: 100; left: 12px; top: -80px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--surface); color: var(--texte); border: 1px solid var(--trait-2);
  font-weight: 600; text-decoration: none;
}
.evitement:focus { top: 12px; }


/* =====================================================================
   3. Typographie : Inter 600 pour les titres, ton accueillant.
   JetBrains Mono (.q-chrono de brand.css) pour chronos, empreintes et
   horodatages uniquement, jamais en gras.
   ===================================================================== */
.titre-1 {
  font-size: clamp(36px, 4.5vw, 66px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.titre-2 {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.titre-3 {
  font-size: clamp(19px, 1.45vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.titre-4 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.lede {
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.56;
  color: var(--texte-2);
  max-width: 54ch;
  text-wrap: pretty;
}
.texte { color: var(--texte-2); max-width: 66ch; text-wrap: pretty; }
.texte + .texte { margin-top: 12px; }
.texte strong { color: var(--texte); }
.petit { font-size: 14px; line-height: 1.55; }
.q-chrono { font-size: .92em; }
/* Consignes selon le pointeur : à la souris (survol) ou au doigt */
.aide-tactile { display: none; }
@media (hover: none) {
  .aide-souris { display: none; }
  .aide-tactile { display: inline; }
}


/* =====================================================================
   4. Mise en page
   ===================================================================== */
.conteneur { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; }

/* Section : alterner .section et .section.ton-alt ; le pied de page est toujours .ton-alt */
.section {
  position: relative;
  padding-block: clamp(84px, 10vw, 152px);
  background: var(--fond);
  color: var(--texte);
  overflow: clip;
}
.section-lavis {
  background:
    radial-gradient(60% 55% at 100% 0%, var(--lavis), transparent 70%),
    radial-gradient(45% 50% at 0% 100%, var(--accent-doux), transparent 70%),
    var(--fond);
}
.section-tete { max-width: 780px; margin-bottom: clamp(44px, 5.5vw, 80px); }
.section-tete .lede { margin-top: 20px; }
.section-suite { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

.grille-2 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 104px);
  align-items: start;
}
.colle { position: sticky; top: calc(var(--entete-h) + 48px); }
@media (max-width: 1023px) {
  .grille-2 { grid-template-columns: minmax(0, 1fr); }
  .colle { position: static; }
}


/* =====================================================================
   5. Boutons et liens. Le bouton principal reste vert ; jamais de rouge.
   ===================================================================== */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 14px; border: 0;
  font: 600 15.5px/1.2 var(--font-sans); letter-spacing: -0.005em;
  color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #2c8058 0%, #1f5f41 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(13, 61, 44, .55), 0 14px 30px -14px rgba(13, 61, 44, .75);
  transition: transform .25s var(--ease-sortie), box-shadow .25s var(--ease-sortie);
}
.bouton:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 1px rgba(13, 61, 44, .6),
    0 18px 36px -14px rgba(36, 107, 73, .85), 0 0 0 5px rgba(87, 192, 138, .14);
}
.bouton:active { transform: none; }
.bouton-second {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: 14px;
  border: 1px solid var(--trait-2); background: transparent;
  font: 600 15.5px/1.2 var(--font-sans); color: var(--texte); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.bouton-second:hover { background: var(--accent-doux); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.bouton .q-icon, .bouton-second .q-icon { width: 22px; height: 22px; }

.lien {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s;
}
.lien:hover { text-decoration-color: currentColor; }


/* =====================================================================
   6. En-tête et navigation
   ===================================================================== */
.entete {
  position: fixed; z-index: 40; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(1260px, 100% - 24px); height: var(--entete-h);
  display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px;
  border-radius: 18px; border: 1px solid var(--verre-trait);
  background: var(--verre);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 14px 34px -22px var(--ombre);
  color: var(--texte);
}
.logo {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 2px;
  border-radius: 12px; color: inherit; text-decoration: none;
  font-size: 17px; font-weight: 700; letter-spacing: .01em;
}
.logo-pastille { width: 30px; height: 30px; flex: none; }

/* « Demander une démo » : entre le logo et la navigation, le seul bouton plein de l'en-tête ; libellé court
   (« Démo ») quand la place manque, et en tête du menu sur téléphone */
.entete-demo {
  flex: none; display: inline-flex; align-items: center; height: 40px; margin-inline-start: auto; padding: 0 16px;
  border-radius: 11px; font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #2c8058 0%, #1f5f41 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(13, 61, 44, .55), 0 10px 22px -12px rgba(13, 61, 44, .7);
  transition: transform .25s var(--ease-sortie), box-shadow .25s var(--ease-sortie);
}
.entete-demo:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 1px rgba(13, 61, 44, .6),
    0 12px 26px -12px rgba(36, 107, 73, .85), 0 0 0 4px rgba(87, 192, 138, .14);
}
.entete-demo[aria-current="page"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(13, 61, 44, .55), 0 0 0 4px rgba(87, 192, 138, .3);
}
.entete-demo-court { display: none; }
.nav-mobile-demo { width: 100%; margin-bottom: 14px; }

.nav { margin-inline-start: 0; }
.nav-liste { display: flex; align-items: center; gap: 2px; }
.nav-lien {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 13px; border: 0; border-radius: 11px; background: transparent;
  font-size: 14.5px; font-weight: 500; color: var(--texte-2); text-decoration: none; cursor: pointer;
  transition: color .2s, background-color .2s;
}
.nav-lien:hover, .nav-lien[aria-expanded="true"] { color: var(--texte); background: var(--accent-doux); }
.nav-lien[aria-current="page"], .nav-lien.est-actif { color: var(--texte); }
.nav-lien[aria-current="page"]::after, .nav-lien.est-actif::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 5px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.nav-chevron { width: 12px; height: 12px; transition: transform .3s var(--ease-sortie); }
.nav-lien[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Menu « Applications » : six bâtiments, une ligne chacun */
.nav-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 12px); left: 50%; width: 548px; padding: 10px;
  border-radius: 18px; border: 1px solid var(--verre-trait);
  background: var(--surface);
  box-shadow: 0 30px 60px -30px var(--ombre);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .2s var(--ease), transform .3s var(--ease-sortie), visibility 0s linear .3s;
}
.menu.est-ouvert {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .2s var(--ease), transform .3s var(--ease-sortie), visibility 0s;
}
.menu-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.menu-lien {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--texte); text-decoration: none; transition: background-color .2s;
}
.menu-lien:hover, .menu-lien:focus-visible, .menu-lien[aria-current="page"] { background: color-mix(in srgb, var(--a) 14%, transparent); }
.menu-lien .q-icon { width: 38px; height: 38px; color: var(--a); border-radius: 10px; }
.menu-lien strong { display: block; font-size: 15px; line-height: 1.3; }
.menu-lien small { display: block; font-size: 13px; line-height: 1.35; color: var(--texte-2); }

/* Bouton de menu mobile et tiroir de navigation */
.burger {
  display: none; position: relative; flex: none; width: 44px; height: 44px; padding: 0;
  border-radius: 12px; border: 1px solid var(--verre-trait); background: transparent; cursor: pointer;
}
.burger i {
  position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--ease-sortie);
}
.burger i:first-of-type { top: 17px; }
.burger i:last-of-type { top: 25px; }
.burger[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }

.nav-mobile { position: fixed; inset: 0; z-index: 39; visibility: hidden; transition: visibility 0s linear .4s; }
.nav-mobile::before {
  content: ''; position: absolute; inset: 0; background: rgba(4, 10, 8, .44);
  opacity: 0; transition: opacity .35s var(--ease);
}
.nav-mobile-feuille {
  position: absolute; top: 80px; left: 12px; right: 12px; max-height: calc(100svh - 92px); overflow-y: auto;
  overscroll-behavior: contain; padding: 14px;
  border-radius: 20px; border: 1px solid var(--verre-trait);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 30px 60px -30px var(--ombre);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .4s var(--ease-sortie);
}
.nav-mobile.est-ouvert { visibility: visible; transition: visibility 0s; }
.nav-mobile.est-ouvert::before { opacity: 1; }
.nav-mobile.est-ouvert .nav-mobile-feuille { opacity: 1; transform: none; }
.nav-mobile-titre { padding: 4px 8px 8px; font-size: 13.5px; font-weight: 600; color: var(--texte-2); }
.nav-mobile .menu-liste { grid-template-columns: 1fr; }
.nav-mobile-liens { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--trait); }
.nav-mobile-liens a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px;
  font-size: 16px; font-weight: 500; text-decoration: none; color: var(--texte);
}
.nav-mobile-liens a:hover, .nav-mobile-liens a[aria-current="page"] { background: var(--accent-doux); }

/* Sélecteur de langue : la même page en français, en anglais ou en arabe. Dans l'en-tête sur ordinateur,
   dans le menu sur téléphone. */
.langues {
  flex: none; display: flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 12px; border: 1px solid var(--verre-trait);
}
.langue {
  display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--texte-2); text-decoration: none;
  transition: color .2s, background-color .2s;
}
.langue[lang="ar"] { font-family: var(--font-arabe); font-size: 14px; letter-spacing: 0; }
.langue:hover { color: var(--texte); background: var(--accent-doux); }
.langue[aria-current] { color: var(--texte); background: var(--surface); box-shadow: 0 1px 4px -1px var(--ombre); }
.langues-mobile { display: none; }

@media (max-width: 1099px) {
  .entete-demo-long { display: none; }
  .entete-demo-court { display: inline; }
}
/* Tablettes étroites : la navigation se resserre pour laisser sa place au bouton */
@media (min-width: 768px) and (max-width: 859px) {
  .entete { gap: 8px; }
  .nav-lien { padding: 0 10px; }
  .nav-lien[aria-current="page"]::after, .nav-lien.est-actif::after { left: 10px; right: 10px; }
}
@media (max-width: 767px) {
  .entete { height: 56px; padding-left: 12px; gap: 8px; }
  .nav { display: none; }
  .entete .langues { display: none; }
  .burger { display: block; }
  .entete-demo { height: 38px; padding: 0 14px; font-size: 14px; }
  .nav-mobile .langues-mobile { display: flex; margin-top: 10px; }
  .langues-mobile .langue { flex: 1; height: 44px; font-size: 15px; }
  .langues-mobile .langue[lang="ar"] { font-size: 16px; }
}
/* Très petits écrans : le bouton ne tient plus dans l'en-tête, il reste en tête du menu */
@media (max-width: 359px) {
  .entete-demo { display: none; }
  .jour-nuit { margin-inline-start: auto; }
}
@media (min-width: 768px) {
  .nav-mobile { display: none; }
}


/* =====================================================================
   7. Interrupteur Jour / Nuit : le soleil devient lune.
   aria-pressed="true" = nuit. Plusieurs interrupteurs restent synchronisés.
   ===================================================================== */
.jour-nuit {
  position: relative; flex: none; width: 68px; height: 38px; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--verre-trait);
  background: linear-gradient(180deg, #eaf3ee, #d5e8dd);
  box-shadow: inset 0 1px 2px rgba(10, 22, 20, .10);
  transition: background .9s var(--ease);
}
.jour-nuit[aria-pressed="true"] { background: linear-gradient(180deg, #0d3d2c, #08170f); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.jour-nuit-bouton {
  position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: #ffffff;
  box-shadow: 0 2px 6px rgba(13, 61, 44, .25), inset 0 -1px 0 rgba(10, 22, 20, .06);
  transition: transform .9s var(--ease-sortie), background .9s var(--ease);
}
.jour-nuit[aria-pressed="true"] .jour-nuit-bouton {
  transform: translateX(30px); background: #1a3a2e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 0 0 4px rgba(87, 192, 138, .10);
}
.jour-nuit svg { width: 22px; height: 22px; overflow: visible; }
.jour-nuit .rayons { transform-origin: 12px 12px; transition: transform .9s var(--ease-sortie), opacity .6s var(--ease); }
.jour-nuit[aria-pressed="true"] .rayons { transform: rotate(90deg) scale(.4); opacity: 0; }
.jour-nuit .disque { fill: #c9a456; transition: fill .9s var(--ease); }
.jour-nuit[aria-pressed="true"] .disque { fill: #e8f1ed; }
.jour-nuit .morsure { transform: translate(14px, -14px); transition: transform .9s var(--ease-sortie); }
.jour-nuit[aria-pressed="true"] .morsure { transform: translate(4px, -3px); }
.jour-nuit .coeur { transform-origin: 12px 12px; transition: transform .9s var(--ease-sortie); }
.jour-nuit[aria-pressed="true"] .coeur { transform: scale(1.35); }


/* =====================================================================
   8. Tête de page. Pages intérieures : .tete-page (ciel du site), avec
   un diorama cadré sur l'application : .tete-page-grille + .tete-page-scene.
   ===================================================================== */
.tete-page {
  position: relative; overflow: clip;
  padding: calc(var(--entete-h) + clamp(56px, 8vw, 112px)) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(52% 60% at 72% 58%, var(--halo), transparent 72%),
    linear-gradient(180deg, var(--ciel-1) 0%, var(--ciel-2) 52%, var(--ciel-3) 100%);
  color: var(--texte);
}
.tete-page .lede { margin-top: 20px; }
.tete-page-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.tete-page-grille {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.tete-page-scene {
  position: relative; height: clamp(340px, 52vh, 560px);
  /* La maquette déborde du cadre : ses bords se fondent dans le ciel */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
}
@media (max-width: 1023px) {
  .tete-page-grille { grid-template-columns: minmax(0, 1fr); }
  .tete-page-scene { height: clamp(300px, 62vw, 460px); }
}


/* =====================================================================
   9. Pied de page (toujours .ton-alt)
   ===================================================================== */
.pied { padding: clamp(56px, 7vw, 88px) 0 36px; background: var(--fond); color: var(--texte); border-top: 1px solid var(--trait); }
.pied-grille {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(32px, 6vw, 96px);
}
.pied-promesse { margin-top: 16px; max-width: 42ch; font-size: 15px; line-height: 1.55; color: var(--texte-2); }
.pied-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pied-titre { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.pied-nav li + li { margin-top: 2px; }
.pied-nav a {
  display: inline-flex; align-items: center; min-height: 32px; font-size: 14.5px;
  color: var(--texte-2); text-decoration: none; transition: color .2s;
}
.pied-nav a:hover, .pied-nav a[aria-current="page"] { color: var(--texte); }
.pied-bas {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 18px 40px; padding-top: 26px; border-top: 1px solid var(--trait);
}
.pied-bas .avertissement { border: 0; padding: 0; max-width: 80ch; }
.pied-copyright { font-size: 13.5px; color: var(--texte-2); white-space: nowrap; }
@media (max-width: 767px) {
  .pied-grille { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   10. Petits composants
   ===================================================================== */
/* Statut d'un échange : « Disponible » (trait plein, vert), jamais en rouge.
   Tous les échanges de CONTENU § 3.4 sont disponibles (décision du 2026-10-21). */
.statut {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap;
}
.statut::before { content: ''; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.statut-ok { color: var(--accent); background: var(--accent-doux); }

/* Pastille d'application : icône + nom court */
.app-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--a) 38%, var(--trait));
  background: color-mix(in srgb, var(--a) 9%, transparent);
  font-size: 13.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.app-tag .q-icon { width: 22px; height: 22px; color: var(--a); border-radius: 6px; }

.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces li {
  padding: 6px 10px; border-radius: 9px; font-size: 13.5px; line-height: 1.3;
  border: 1px solid var(--trait-2); background: color-mix(in srgb, var(--fond-2) 70%, transparent);
}
.coches li { position: relative; padding-left: 26px; color: var(--texte-2); line-height: 1.55; }
.coches li + li { margin-top: 10px; }
.coches li::before {
  content: ''; position: absolute; left: 3px; top: .45em; width: 11px; height: 6px;
  border-left: 2px solid var(--a, var(--accent)); border-bottom: 2px solid var(--a, var(--accent));
  transform: rotate(-45deg);
}


/* =====================================================================
   11. Fiches d'application : une ligne par bâtiment, lien étiré sur la ligne
   ===================================================================== */
.fiches { border-top: 1px solid var(--trait); }
.fiche-app {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 56px minmax(170px, 1fr) minmax(0, 2.3fr) 168px;
  gap: 6px 28px; align-items: center; padding: 26px 8px; border-bottom: 1px solid var(--trait);
}
.fiche-app::before {
  content: ''; position: absolute; inset: 6px -12px; z-index: -1; border-radius: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--a) 15%, transparent), transparent 75%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.fiche-app:hover::before, .fiche-app:focus-within::before { opacity: 1; }
.fiche-icone {
  width: 56px; height: 56px; color: var(--a); border-radius: 14px;
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--a) 70%, transparent);
}
.fiche-nom { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.fiche-nom span { color: var(--a-texte); }
.fiche-lieu { margin-top: 3px; font-size: 14px; color: var(--texte-2); }
.fiche-accroche { font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.fiche-public { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--texte-2); text-wrap: pretty; }
.fiche-lien { justify-self: end; white-space: nowrap; }
.fiche-lien::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.fiche-lien:focus-visible { outline: none; }
.fiche-lien:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 1023px) {
  .fiche-app { grid-template-columns: 48px minmax(0, 1fr); align-items: start; padding: 24px 0; }
  .fiche-icone { width: 48px; height: 48px; }
  .fiche-app > div:nth-of-type(2), .fiche-lien { grid-column: 2; justify-self: start; }
  .fiche-app::before { inset: 4px -10px; }
}


/* =====================================================================
   12. Schémas d'échange : trait plein et paquet, dans la teinte de
   l'application qui envoie (data-app). Le paquet ne circule qu'au survol.
   ===================================================================== */
.echanges { border-top: 1px solid var(--trait); }
/* Sans data-app (ERP, balances, OPC UA : systèmes du client), une teinte neutre ;
   avec data-app, la couleur de l'application qui envoie (comme sur la maquette). */
.echange:not([data-app]) { --a: var(--texte-2); }
.echange {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 28px 4px; border-bottom: 1px solid var(--trait);
}
.echange::before {
  content: ''; position: absolute; inset: 8px -16px; z-index: -1; border-radius: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--a) 14%, transparent), transparent 75%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.echange:hover::before { opacity: 1; }
.echange-schema { width: 200px; height: 64px; overflow: visible; }
.echange-noeud rect { fill: var(--fond-3); stroke: var(--trait-2); }
.echange-noeud text { fill: var(--texte); font: 600 11px var(--font-sans); }
.echange-voie { fill: none; stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; opacity: .6; transition: opacity .3s var(--ease); }
.echange:hover .echange-voie { opacity: 1; }
.echange-paquet { fill: var(--a); }
.echange-alerte circle { fill: var(--signal); }
.echange-alerte path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.echange-titre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
}
.echange p { margin-top: 8px; font-size: 15px; line-height: 1.58; color: var(--texte-2); max-width: 62ch; text-wrap: pretty; }
.echange p strong { color: var(--texte); }
@media (prefers-reduced-motion: no-preference) {
  .echange:hover .echange-paquet { animation: paquet 1.7s cubic-bezier(.45, .05, .4, 1) infinite; }
}
@keyframes paquet {
  0% { transform: translateX(-46px); opacity: 0; }
  14%, 86% { opacity: 1; }
  100% { transform: translateX(46px); opacity: 0; }
}
/* Échange dans les deux sens (MES et eQMS, .echange-double) : sous la voie de l'aller,
   la voie fine du retour et son paquet, dans la teinte de l'application qui répond ;
   au survol, il part à contre-sens, une demi-période après celui de l'aller. */
.echange-voie-retour { stroke: var(--app-eqms); stroke-width: 1.6; }
.echange-paquet-retour { fill: var(--app-eqms); }
@media (prefers-reduced-motion: no-preference) {
  .echange:hover .echange-paquet-retour { animation: paquet-retour 1.7s cubic-bezier(.45, .05, .4, 1) .85s infinite both; }
}
@keyframes paquet-retour {
  0% { transform: translateX(46px); opacity: 0; }
  14%, 86% { opacity: 1; }
  100% { transform: translateX(-46px); opacity: 0; }
}
@media (max-width: 767px) {
  .echange { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 0; }
}


/* =====================================================================
   13. Tableaux (conformité, correspondances, déploiement).
   .tableau-souple : chaque ligne devient une fiche sous 768 px
   (data-label sur chaque cellule ; site.js rétablit les rôles ARIA).
   ===================================================================== */
.tableau-cadre { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tableau th, .tableau td {
  padding: 16px 22px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait);
}
.tableau thead th {
  padding-block: 10px; font-size: 13.5px; font-weight: 600; color: var(--texte-2);
  border-bottom-color: var(--trait-2);
}
.tableau tbody th { font-weight: 600; }
.tableau td:last-child, .tableau th:last-child { padding-right: 0; }
.tableau .ref { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; color: var(--texte-2); }
/* Modules d'une ligne : une application par ligne, sa pastille puis le module */
.tableau-modules { display: grid; gap: 8px; }
.tableau-modules li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14.5px; line-height: 1.45; color: var(--texte-2); }
.tableau-modules .app-tag { color: var(--texte); }
/* Bordereau des pièces : la liste des documents d'un dossier, comme sur un jeu de plans */
.bordereau { border: 1px solid color-mix(in srgb, var(--papier-encre) 40%, transparent); border-radius: 4px; background: var(--papier); }
.bordereau-titre {
  padding: 12px 16px; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--papier-encre) 40%, transparent);
}
.bordereau-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.bordereau-table td { padding: 8px 16px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.bordereau-table tr:last-child td { border-bottom: 0; }
.bordereau-table td:first-child { width: 1%; white-space: nowrap; color: var(--texte-2); }
.bordereau-liste li { padding: 8px 16px; border-bottom: 1px solid var(--trait); font-size: 14.5px; line-height: 1.45; }
.bordereau-liste li:last-child { border-bottom: 0; }
@media (max-width: 767px) {
  .tableau-souple thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-souple, .tableau-souple tbody, .tableau-souple tr, .tableau-souple th, .tableau-souple td { display: block; width: 100%; }
  .tableau-souple tr { padding: 16px 0; border-bottom: 1px solid var(--trait); }
  .tableau-souple th, .tableau-souple td { padding: 0; border: 0; }
  .tableau-souple td { margin-top: 10px; }
  .tableau-souple td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: 13px; font-weight: 500; color: var(--texte-2);
  }
}


/* =====================================================================
   14. Planches d'architecte. Chaque référentiel est une planche pliée :
   seul son cartouche dépasse ; au survol, au focus ou au clic, elle se
   déplie sur la table à dessin (au-dessus de 1024 px) ou sur place.
   Une planche décrit des mécanismes : jamais un sceau ni un badge.
   ===================================================================== */
.planches {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  grid-template-rows: repeat(5, auto) 1fr;
  gap: 10px clamp(28px, 4vw, 56px);
  align-items: start;
}
.planche { display: contents; }
.planche-entete { grid-column: 1; font-size: inherit; font-weight: inherit; }
.planche-feuille { grid-column: 2; grid-row: 1 / -1; }

.cartouche {
  position: relative; width: 100%; display: grid; gap: 10px; padding: 14px 16px 14px 18px;
  text-align: left; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--trait-2); background: var(--papier); color: var(--texte);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
/* Coin replié : la planche est pliée sous son cartouche */
.cartouche::after {
  content: ''; position: absolute; top: -1px; right: -1px; width: 16px; height: 16px;
  background: linear-gradient(225deg, var(--fond) 50%, var(--trait-2) 50%, var(--papier) 62%);
  border-bottom-left-radius: 3px;
}
.cartouche:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--trait-2)); }
.cartouche[aria-expanded="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.cartouche-nom { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.cartouche-champs {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  border-top: 1px solid var(--trait); font-size: 13.5px; line-height: 1.45;
}
.cartouche-champs > span { display: contents; }
.cartouche-champs small, .cartouche-champs b {
  padding: 6px 0; border-bottom: 1px solid var(--trait); font-size: 13.5px;
}
.cartouche-champs small { padding-right: 12px; color: var(--texte-2); border-right: 1px solid var(--trait); }
.cartouche-champs b { padding-left: 12px; font-weight: 500; }
.cartouche-champs > span:last-child small, .cartouche-champs > span:last-child b { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 1024px) {
  .cartouche[aria-expanded="true"]::before {
    content: ''; position: absolute; top: 50%; right: calc(-1 * clamp(28px, 4vw, 56px)); width: clamp(28px, 4vw, 56px);
    border-top: 1px dashed var(--accent);
  }
}

.planche-feuille { position: relative; min-width: 0; perspective: 2000px; visibility: hidden; }
.planche.est-ouverte .planche-feuille { visibility: visible; }
/* Le papier : trois panneaux qui se déplient (décor), le contenu par-dessus */
.planche-plis { position: absolute; inset: 0; display: flex; pointer-events: none; }
.planche-plis i {
  flex: 1; transform-origin: 100% 50%;
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--papier-trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--papier-trait) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--trait-2);
  box-shadow: 0 30px 60px -44px var(--ombre);
}
.planche-plis i:first-child { border-radius: 6px 0 0 6px; }
.planche-plis i:last-child { border-radius: 0 6px 6px 0; }
/* Les plis restent visibles, à peine : une ombre douce, pas un trait */
.planche-plis i + i {
  border-left: 0;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--papier-encre) 7%, transparent), transparent 18px),
    linear-gradient(var(--papier-trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--papier-trait) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px, 22px 22px;
}
.planche.est-anime .planche-plis i:nth-child(2) { animation: pli-milieu .6s var(--ease-sortie) both; }
.planche.est-anime .planche-plis i:nth-child(1) { animation: pli-gauche .9s var(--ease-sortie) both; }
.planche.est-anime .planche-contenu { animation: apparait .45s var(--ease) .5s both; }
@keyframes pli-milieu { from { transform: rotateY(-176deg); filter: brightness(.86); } to { transform: none; filter: none; } }
@keyframes pli-gauche {
  0%, 40% { transform: rotateY(-176deg); opacity: 0; }
  41% { opacity: 1; filter: brightness(.86); }
  100% { transform: none; opacity: 1; filter: none; }
}
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

.planche-contenu {
  position: relative; display: grid; gap: 22px; margin: 12px;
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid color-mix(in srgb, var(--papier-encre) 30%, transparent);
  color: var(--texte);
}
.planche-titre { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--papier-encre); }
.planche-mecanismes { display: grid; gap: 8px; }
.planche-mecanismes li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--texte-2); }
.planche-mecanismes li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 9px; border-top: 1px solid var(--papier-encre);
}
.planche-mecanismes strong { color: var(--texte); }
.planche-pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
/* Cartouche de la planche, en bas à droite comme sur un plan */
.planche-cartouche {
  display: grid; grid-template-columns: auto minmax(0, 1fr); margin-left: auto; min-width: min(100%, 300px);
  border: 1px solid color-mix(in srgb, var(--papier-encre) 45%, transparent); font-size: 12.5px; line-height: 1.4;
}
.planche-cartouche dt, .planche-cartouche dd { padding: 5px 10px; border-bottom: 1px solid color-mix(in srgb, var(--papier-encre) 22%, transparent); }
.planche-cartouche dt { color: var(--texte-2); border-right: 1px solid color-mix(in srgb, var(--papier-encre) 22%, transparent); }
.planche-cartouche dd { font-weight: 500; }
.planche-cartouche dt:last-of-type, .planche-cartouche dd:last-of-type { border-bottom: 0; }
.planche-dessin svg { width: 100%; height: auto; overflow: visible; }
.planche-dessin text { font-family: var(--font-sans); fill: var(--texte); }
.planche-dessin .d-trait { fill: none; stroke: var(--papier-encre); stroke-width: 1; }
.planche-dessin .d-fin { fill: none; stroke: color-mix(in srgb, var(--papier-encre) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.planche-dessin .d-boite { fill: color-mix(in srgb, var(--papier) 70%, var(--surface)); stroke: var(--papier-encre); stroke-width: 1; }
.planche-dessin .d-accent { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); stroke-width: 1.2; }
.planche-dessin .d-signal { fill: none; stroke: var(--signal); stroke-width: 1.6; }
.planche-dessin .d-signal-plein { fill: var(--signal); }
.planche-dessin .d-alerte { fill: none; stroke: var(--encours); stroke-width: 1.4; stroke-dasharray: 6 4; }
.planche-dessin .d-courbe { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.planche-dessin .d-note { font-size: 12.5px; fill: var(--texte-2); }
.planche-dessin .d-etq { font-size: 13px; font-weight: 600; }
.planche-dessin .d-code { font-family: var(--font-mono); font-size: 11.5px; fill: var(--texte-2); }
.planche-dessin .d-rouge { fill: var(--signal); font-weight: 600; }
/* Un chrono reste en mono sans gras, même quand il est signalé en rouge (règle de la charte) */
.planche-dessin .d-code.d-rouge { font-weight: 400; }

/* Le rouge signale ce que QaLyZa intercepte (excursion, dépassement) et les signaux de sécurité */
.planche-mecanismes li.est-signal::before { border-top: 2px solid var(--signal); top: .55em; }
/* Nomenclature (ALCOA+) : la lettre, le principe, sa preuve */
.alcoa th, .alcoa td { padding-block: 10px; }
.alcoa .alcoa-lettre { width: 1%; padding-right: 14px; font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--accent); }
.alcoa tbody th { white-space: nowrap; }
/* Dessin trop détaillé pour un mobile : il défile dans sa planche, jamais la page */
@media (max-width: 767px) {
  .planche-dessin-large { overflow-x: auto; padding-bottom: 6px; }
  .planche-dessin-large svg { min-width: 560px; }
}

@media (max-width: 1023px) {
  .planches { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
  .planche { display: block; }
  .planche-feuille { display: none; margin-top: 10px; visibility: visible; }
  .planche.est-ouverte .planche-feuille { display: block; }
}

/* Cotes : un enregistrement d'exemple, chaque ligne reliée à son explication */
.cotes { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 0; }
.cote { display: contents; }
.cote-valeur {
  position: relative; padding: 11px 16px; font-size: 14.5px; line-height: 1.45;
  background: color-mix(in srgb, var(--surface) 70%, var(--papier));
  border-inline: 1px solid var(--papier-encre); border-bottom: 1px solid color-mix(in srgb, var(--papier-encre) 22%, transparent);
}
.cote:first-child .cote-valeur { border-top: 1px solid var(--papier-encre); border-radius: 6px 6px 0 0; }
.cote:last-child .cote-valeur { border-bottom: 1px solid var(--papier-encre); border-radius: 0 0 6px 6px; }
.cote-valeur small { display: block; font-size: 12px; color: var(--texte-2); }
.cote-note { position: relative; align-self: center; padding: 6px 0 6px 52px; font-size: 13.5px; line-height: 1.45; color: var(--texte-2); }
.cote-note::before {
  content: ''; position: absolute; left: 6px; top: 50%; width: 38px;
  border-top: 1px dashed color-mix(in srgb, var(--papier-encre) 60%, transparent);
}
.cote-note::after {
  content: ''; position: absolute; left: 3px; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%;
  background: var(--papier-encre);
}
.cote-note strong { color: var(--texte); }
.cote.est-signal .cote-note::after { background: var(--signal); }
@media (max-width: 767px) {
  .cotes { grid-template-columns: minmax(0, 1fr); }
  .cote-valeur { border-radius: 0 !important; }
  .cote-note { padding: 8px 0 14px 28px; }
  .cote-note::before { width: 16px; }
}


/* =====================================================================
   15. Coupe du socle, en éclaté : chaque ligne aligne une couche de la
   dalle (dessin) et son texte ; survoler la ligne soulève la couche.
   ===================================================================== */
.coupe-ligne {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 112px); align-items: center;
}
.coupe-tete { margin-bottom: clamp(8px, 1.5vw, 20px); }
.coupe-tete .section-tete { margin-bottom: 0; }
.coupe-graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.coupe-liste .coupe-ligne { padding-block: 8px; }
.coupe-texte { padding: 4px 0 4px 22px; border-left: 2px solid var(--trait); transition: border-color .3s var(--ease); }
.coupe-texte h3 { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
.coupe-texte p { margin-top: 4px; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--texte-2); text-wrap: pretty; }
/* Les applications d'une couche (accueil et Plateforme) : pastilles réduites */
.coupe-texte .couche-apps {
  margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 13.5px; line-height: 1.4; color: var(--texte-2);
}
.couche-apps .app-tag { padding: 1px 8px 1px 3px; gap: 5px; border-radius: 8px; font-size: 12.5px; }
.couche-apps .app-tag .q-icon { width: 18px; height: 18px; border-radius: 5px; }
.coupe-piece { transition: transform .5s var(--ease-sortie); }
.coupe-ligne.est-actif .coupe-piece { transform: translateY(-10px); }
.coupe-ligne.est-actif .coupe-texte { border-left-color: var(--accent); }
.coupe-graphe polygon { stroke: var(--plan-trait); stroke-width: 1; stroke-linejoin: round; }
.c-dessus { fill: var(--plan-h); transition: fill .35s var(--ease); }
.c-face-g { fill: var(--plan-g); }
.c-face-d { fill: var(--plan-d); }
.coupe-graphe .c-hachure { fill: url(#coupe-hachures); stroke: none; }
.coupe-hachures line { stroke: var(--plan-trait); stroke-width: 1; }
.coupe-graphe .c-joint { fill: var(--q-mint); stroke: none; }
.c-motif { fill: none; stroke: var(--texte-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .35s var(--ease); }
.c-motif-plein { fill: var(--texte-2); transition: fill .35s var(--ease); }
/* Une suppression tentée est rejetée : signal rouge */
.c-rejet { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.coupe-ligne.est-actif .c-dessus { fill: color-mix(in srgb, var(--accent) 22%, var(--plan-h)); }
.coupe-ligne.est-actif .c-motif { stroke: var(--accent); }
.coupe-ligne.est-actif .c-motif-plein { fill: var(--accent); }
.coupe-dalle .f-h { fill: var(--plan-h); }
.coupe-dalle .f-g { fill: var(--plan-g); }
.coupe-dalle .f-d { fill: var(--plan-d); }
.coupe-dalle .f-accent { fill: var(--a); stroke: none; }
.coupe-dalle .f-ligne { fill: none; stroke: var(--plan-trait); stroke-width: .8; }
.coupe-dalle .f-lya { stroke: rgba(255, 255, 255, .25); }
.coupe-dalle .f-lya.f-h { fill: #8b7cf6; }
.coupe-dalle .f-lya.f-g { fill: #6a4fe6; }
.coupe-dalle .f-lya.f-d { fill: #3f5fd9; }
@media (max-width: 767px) {
  .coupe-tete { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .coupe-tete .coupe-graphe { max-width: 320px; }
  .coupe-liste .coupe-ligne { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start; }
  .coupe-texte { padding-left: 14px; }
}


/* =====================================================================
   16. Plan du site (planSVG de diorama.js) et correspondances
   ===================================================================== */
.plan-site { aspect-ratio: 760 / 524; }
.plan-site-svg { display: block; width: 100%; height: auto; overflow: visible; }
.plan-site-svg polygon, .plan-site-svg path, .plan-site-svg ellipse {
  stroke: var(--plan-trait); stroke-width: .6; stroke-linejoin: round;
}
.plan-site-svg .f-h { fill: var(--plan-h); }
.plan-site-svg .f-g { fill: var(--plan-g); }
.plan-site-svg .f-d { fill: var(--plan-d); }
.plan-site-svg .f-joint { fill: var(--q-mint); stroke: none; }
.plan-site-svg .f-allee { fill: var(--plan-g); stroke: none; opacity: .75; }
.plan-site-svg .f-accent { fill: var(--a); stroke: none; }
.plan-site-svg .f-vitre { fill: color-mix(in srgb, var(--plan-d) 62%, #6fa596); }
.plan-site-svg .f-verre.f-g { fill: color-mix(in srgb, var(--plan-g) 70%, #8eaea3); }
.plan-site-svg .f-verre.f-d { fill: color-mix(in srgb, var(--plan-d) 70%, #6f9488); }
.plan-site-svg .f-porte { fill: color-mix(in srgb, var(--plan-d) 82%, #1d2b26); }
.plan-site-svg .f-ligne { fill: none; stroke: var(--plan-trait); stroke-width: .5; }
.plan-site-svg .f-enseigne { fill: none; stroke: var(--q-green); stroke-width: 5; stroke-linecap: round; }
.plan-site-svg .f-lya.f-h { fill: #8b7cf6; }
.plan-site-svg .f-lya.f-g { fill: #6a4fe6; }
.plan-site-svg .f-lya.f-d { fill: #3f5fd9; }
.plan-site-svg .plan-arbre circle { fill: color-mix(in srgb, var(--plan-g) 55%, #9cc8ae); stroke: none; }
.plan-site-svg .plan-arbre path { fill: none; stroke: var(--plan-trait); stroke-width: 1.2; }
/* Repli du diorama : bornes des systèmes du client, allées des échanges et leurs paquets
   (--f : la teinte de l'application qui envoie, posée par diorama.js) */
.plan-site-svg .f-stele-feu.f-h { fill: color-mix(in srgb, var(--plan-h) 55%, #9db8aa); }
.plan-site-svg .plan-flux { transition: opacity .35s var(--ease); }
.plan-site-svg .plan-flux.est-attenue { opacity: .2; }
.plan-site-svg .plan-flux-lueur { fill: none; stroke: var(--f); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .14; }
.plan-site-svg .plan-flux-voie { fill: none; stroke: var(--f); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
/* Échange dans les deux sens (MES ↔ eQMS) : la voie fine du retour, dans la teinte de l'application qui répond */
.plan-site-svg .plan-flux-retour { fill: none; stroke: var(--f); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.plan-site-svg .pq-halo { fill: var(--f); fill-opacity: .3; }
.plan-site-svg .pq-tete, .plan-site-svg .pq-traine { fill: color-mix(in srgb, var(--f) 62%, var(--texte)); }
@media (prefers-reduced-motion: reduce) {
  .plan-site-svg .plan-paquets { display: none; }
}
.plan-site-svg .plan-etq {
  font: 600 17px var(--font-sans); fill: var(--texte);
  paint-order: stroke; stroke: var(--fond); stroke-width: 5px; stroke-linejoin: round;
  transition: opacity .3s var(--ease);
}
.plan-bat { transition: opacity .35s var(--ease); }
.plan-bat .f-h, .plan-bat .f-g, .plan-bat .f-d { transition: fill .35s var(--ease); }
.plan-bat.est-actif .f-h { fill: color-mix(in srgb, var(--a) 38%, var(--plan-h)); }
.plan-bat.est-actif .f-g { fill: color-mix(in srgb, var(--a) 30%, var(--plan-g)); }
.plan-bat.est-actif .f-d { fill: color-mix(in srgb, var(--a) 44%, var(--plan-d)); }
.plan-bat.est-estompe { opacity: .3; }
.plan-site-svg.est-filtre .plan-etq:not(.est-actif), .plan-etq.est-estompe { opacity: .35; }

/* Correspondances : un plan, un tableau ; survoler l'un éclaire l'autre */
.correspondance {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.correspondance-plan { position: sticky; top: calc(var(--entete-h) + 40px); }
.correspondance-plan figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--texte-2); max-width: 46ch; }
.correspondance tbody tr { transition: opacity .3s var(--ease); }
.correspondance tbody.est-filtre tr:not(.est-actif) { opacity: .4; }
.correspondance tbody tr.est-actif th { color: var(--accent); }
@media (max-width: 1023px) {
  .correspondance { grid-template-columns: minmax(0, 1fr); }
  .correspondance-plan { position: static; max-width: 620px; }
}


/* =====================================================================
   17. Maquettes d'écran : l'interface d'une application, schématisée.
   Elles suivent le ton courant (les applications ont un thème clair et sombre).
   ===================================================================== */
.ecran {
  overflow: hidden; border-radius: 16px; border: 1px solid var(--trait-2);
  background: var(--surface); color: var(--texte);
  box-shadow: 0 40px 80px -44px var(--ombre);
}
.ecran-barre {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--trait); background: var(--fond-2);
  font-size: 13.5px; font-weight: 600;
}
.ecran-barre .q-icon { width: 24px; height: 24px; border-radius: 6px; color: var(--a, var(--q-mint)); }
.ecran-fil { margin-left: 4px; font-weight: 500; color: var(--texte-2); }
.ecran-corps { display: grid; gap: 12px; padding: 18px; }
.ecran-bulle { max-width: 88%; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.ecran-bulle-question { justify-self: end; background: var(--fond-3); border-bottom-right-radius: 4px; }
.ecran-bulle-reponse {
  justify-self: start; border-bottom-left-radius: 4px;
  background: color-mix(in srgb, #7c3aed 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #7c3aed 26%, transparent);
}
.ecran-bulle-reponse .q-chrono { color: var(--texte); }
.ecran-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.ecran-suggestions li {
  padding: 5px 11px; border-radius: 999px; font-size: 13px; line-height: 1.4; color: var(--texte-2);
  border: 1px solid color-mix(in srgb, #7c3aed 28%, var(--trait-2));
}
.ecran-note { font-size: 12.5px; color: var(--texte-2); }


/* =====================================================================
   18. Avertissement réglementaire (accueil, Conformité, pied de page)
   ===================================================================== */
.avertissement {
  display: flex; gap: 12px; align-items: flex-start; max-width: 88ch;
  padding-top: 22px; border-top: 1px solid var(--trait);
  font-size: 14px; line-height: 1.6; color: var(--texte-2);
}
.avertissement svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }


/* =====================================================================
   19. Diorama (assets/diorama.js) : toile, étiquettes ancrées, repli SVG.
   Le conteneur est dimensionné par la page ; le module ajoute .dio.
   ===================================================================== */
.dio { position: relative; overflow: hidden; }
.dio.dio-interactif { touch-action: pan-y; cursor: grab; }
.dio.est-glisse { cursor: grabbing; }
.dio.est-chaud { cursor: pointer; }
.dio-toile { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; }
.dio-etiquettes { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.dio-tag {
  position: absolute; left: 0; top: 0; will-change: transform;
  transform: translate3d(-9999px, 0, 0); transition: opacity .4s var(--ease);
}
.dio-pin {
  position: absolute; left: 0; bottom: 0; transform: translate(-50%, -14px);
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; white-space: nowrap;
  border-radius: 11px; border: 1px solid var(--verre-trait); background: var(--verre);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 10px 22px -16px var(--ombre);
  font: 500 13.5px/1.2 var(--font-sans); color: var(--texte);
  transition: border-color .3s, transform .45s var(--ease-sortie);
}
.dio-pin::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px;
  background: linear-gradient(var(--texte-2), transparent); opacity: .7;
}
.dio-pin i {
  flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 24%, transparent);
}
/* Position calculée par diorama.js (--cx, --cy : coin haut gauche de la fiche par rapport au repère),
   pour rester visible sous l'en-tête fixe et dans le cadre de la maquette */
.dio-carte {
  position: absolute; left: 0; top: 0; width: 272px; max-width: calc(100vw - 32px); padding: 13px 15px 14px;
  transform: translate(var(--cx, -136px), calc(var(--cy, -170px) + 6px)) scale(.97); transform-origin: 50% 50%; opacity: 0;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--a) 40%, var(--verre-trait));
  background: var(--verre);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 40px -20px var(--ombre);
  color: var(--texte);
  transition: opacity .3s var(--ease), transform .45s var(--ease-sortie);
}
.dio-carte small { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--texte-2); }
.dio-carte strong { display: block; margin-bottom: 4px; font: 600 14px/1.25 var(--font-sans); }
.dio-carte p { font-size: 13.5px; line-height: 1.45; color: var(--texte-2); }
.dio-tag.est-chaud { z-index: 5; }
.dio-tag.est-chaud .dio-pin { border-color: color-mix(in srgb, var(--a) 60%, transparent); transform: translate(-50%, -16px); }
.dio-tag.est-chaud .dio-carte { opacity: 1; transform: translate(var(--cx, -136px), var(--cy, -170px)) scale(1); }
.dio-etiquettes.est-survol .dio-tag:not(.est-chaud) { opacity: 0; }
.dio-etiquettes.est-focus .dio-tag:not(.est-sel):not(.est-chaud) { opacity: 0; }
.dio-etiquettes.est-focus .dio-tag.est-sel .dio-carte { opacity: 0; }
/* Excursion détectée : le repère de l'EMS passe au rouge le temps du gyrophare */
.dio-alerte { display: none; }
.dio-tag.est-alerte { z-index: 4; }
.dio-tag.est-alerte .dio-alerte {
  display: inline; padding-left: 8px; margin-left: 1px; border-left: 1px solid var(--trait-2);
  color: var(--signal); font-weight: 600;
}
.dio-tag.est-alerte .dio-pin { border-color: color-mix(in srgb, var(--signal) 45%, transparent); }
.dio-tag.est-alerte .dio-pin i { background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 28%, transparent); }
/* La déviation créée dans l'eQMS à l'arrivée du paquet de l'EMS : vert de l'eQMS, jamais rouge.
   Le repère reste lisible même quand la maquette est cadrée sur un autre bâtiment. */
.dio-recu { display: none; }
.dio-tag.est-recu { z-index: 4; }
.dio-etiquettes.est-focus .dio-tag.est-recu:not(.est-sel):not(.est-chaud) { opacity: 1; }
.dio-tag.est-recu .dio-recu {
  display: inline; padding-left: 8px; margin-left: 1px; border-left: 1px solid var(--trait-2);
  color: var(--a-texte); font-weight: 600;
}
.dio-tag.est-recu .dio-pin { border-color: color-mix(in srgb, var(--a) 60%, transparent); }
.dio-repli { position: absolute; inset: 0; }
.dio-repli .plan-site-svg { width: 100%; height: 100%; }
.dio-repli .plan-etq { font-size: 12px; stroke-width: 4px; }
.dio-svg.dio-interactif .plan-bat { cursor: pointer; }
@media (max-width: 767px) {
  .dio-pin { padding: 5px 9px 5px 8px; font-size: 13px; }
  .dio-carte { display: none; }
  .dio-tag.est-alerte .dio-alerte, .dio-tag.est-recu .dio-recu { display: none; }
  .dio-tag.est-alerte .dio-pin-nom { color: var(--signal); font-weight: 600; }
  .dio-tag.est-recu .dio-pin-nom { color: var(--a-texte); font-weight: 600; }
}


/* =====================================================================
   20. Tiroir d'application (dialogue) : panneau à droite, feuille basse
   sous 768 px. Contenu construit par la page (voir accueil.js) : quelques
   lignes, le panneau prend la hauteur de son contenu.
   ===================================================================== */
.voile { display: none; }
.tiroir {
  --a: var(--app-eqms);
  position: fixed; z-index: 60; top: 12px; right: 12px; max-height: calc(100svh - 24px);
  width: min(452px, 100vw - 24px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--verre-trait); color: var(--texte);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 40px 90px -40px var(--ombre);
  transform: translateX(calc(100% + 36px)); visibility: hidden;
  transition: transform .65s var(--ease-sortie), visibility 0s linear .65s;
}
.tiroir.est-ouvert { transform: none; visibility: visible; transition: transform .65s var(--ease-sortie), visibility 0s; }
.tiroir:focus { outline: none; }
.tiroir::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 220px; pointer-events: none;
  background: radial-gradient(80% 100% at 0% 0%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%);
}
.tiroir[data-app="lya"]::before {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(124, 58, 237, .26), transparent 60%),
    radial-gradient(70% 90% at 100% 0%, rgba(47, 108, 237, .20), transparent 60%);
}
.tiroir-defile { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 26px 26px 24px; }
.tiroir-tete { display: flex; align-items: flex-start; gap: 14px; }
.tiroir-tete .q-icon {
  width: 54px; height: 54px; color: var(--a); border-radius: 14px;
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--a) 80%, transparent);
}
.tiroir-lieu { font-size: 13.5px; color: var(--texte-2); }
.tiroir-titre { margin-top: 2px; font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.tiroir-titre span { color: var(--a-texte); }
.tiroir-domaine { margin-top: 2px; font-size: 14px; color: var(--texte-2); }
.tiroir-fermer {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0;
  border-radius: 12px; border: 1px solid var(--trait-2); cursor: pointer;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition: background-color .2s, border-color .2s;
}
.tiroir-fermer:hover { background: var(--accent-doux); border-color: var(--accent); }
.tiroir-fermer svg { width: 16px; height: 16px; }
.tiroir-accroche { margin-top: 22px; font-size: 18.5px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
.tiroir-action { margin-top: 20px; }
.tiroir-nav { position: relative; display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--trait); }
.tiroir-nav button {
  flex: 1; min-width: 0; height: 46px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--trait-2); background: transparent; font-size: 14px; font-weight: 500;
  transition: background-color .2s, border-color .2s;
}
.tiroir-nav button:hover { background: var(--accent-doux); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tiroir-nav .q-icon { width: 24px; height: 24px; color: var(--a); }
.tiroir-nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .voile {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(4, 10, 8, .44);
    opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
  }
  .voile.est-actif { opacity: 1; pointer-events: auto; }
  .tiroir {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: min(86svh, 760px);
    border-radius: 24px 24px 0 0; transform: translateY(calc(100% + 30px));
  }
  .tiroir::after {
    content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 2px; background: var(--trait-2);
  }
  .tiroir-defile { padding: 26px 18px 20px; }
  .tiroir-accroche { font-size: 17px; }
  .tiroir-nav { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .tiroir-sens { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* =====================================================================
   21. Mouvement réduit : brand.css coupe déjà animations et transitions ;
   le thème bascule sans fondu.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --duree-theme: 0s; }
}