/* ============================================================================
   Quitalis · système de design « Clinique »
   Direction (ui-ux-pro-max) : Accessible & Ethical + Minimalism, la combinaison
   recommandée pour les produits de santé. Bleu clinique + blanc, contrastes
   verifies AA/AAA, cibles 44px, anneaux de focus 3px, mouvement sobre.
   Structure éditoriale conservée (grille asymétrique, sections numérotées,
   colonne de chiffres) : c'est elle qui porte l'identité, la couleur habille.
   Polices système uniquement (la CSP interdit font-src externe).
   ========================================================================= */

:root {
  /* Bleu clinique : accent unique */
  --bleu: #0b5cd5;           /* primaire, contraste 5.0:1 sur blanc */
  --bleu-fonce: #0847a8;     /* survol, texte de lien sur fond clair */
  --bleu-profond: #0a2e5c;   /* aplats sombres, pied de page */
  --bleu-voile: #eaf1fd;     /* fonds d'appui */
  --bleu-brume: #f5f8fe;     /* fond de page */

  /* Encre (bleutée, jamais noir pur : moins dur en lecture longue) */
  --encre: #0f1b2d;
  --encre-2: #45566e;
  --encre-3: #6b7b93;

  --surface: #ffffff;
  --surface-2: var(--bleu-brume);
  --surface-3: #e9eff8;
  --filet: #d7e2f1;
  --filet-fort: #b9cbe4;

  /* Statuts : couleur + libellé, jamais la couleur seule */
  --ok: #0f7a4f;      --ok-voile: #e7f6ee;
  --attente: #8a5a00; --attente-voile: #fdf3e0;
  --alerte: #c0271f;  --alerte-voile: #fdecea;
  --info: var(--bleu); --info-voile: var(--bleu-voile);

  /* Typographie : serif de titrage (caractère) + sans système (lecture) */
  --titre: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --chiffre: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Rythme 8px, grille 12 colonnes */
  --u: 8px;
  --colonnes: 12;
  --gouttiere: 24px;
  --largeur: 1180px;

  /* Géométrie douce : le produit doit paraître soigné, pas austère */
  --r: 10px;
  --r-s: 6px;
  --r-l: 16px;

  /* Élévation : ombres bleutées, très basses (aucun effet « verre ») */
  --ombre-1: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 1px rgba(15, 27, 45, .04);
  --ombre-2: 0 2px 4px rgba(15, 27, 45, .06), 0 6px 16px rgba(11, 92, 213, .07);
  --ombre-3: 0 12px 32px rgba(15, 27, 45, .16);

  --transition: 150ms cubic-bezier(.2, .6, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bleu: #6aa6ff; --bleu-fonce: #8fbcff; --bleu-profond: #0a1626;
    --bleu-voile: #14243c; --bleu-brume: #0d1622;
    --encre: #eaf0f8; --encre-2: #a9b8cd; --encre-3: #7f8ea6;
    --surface: #131d2b; --surface-2: #0d1622; --surface-3: #1b2839;
    --filet: #26364b; --filet-fort: #3b4f6b;
    --ok: #55c68d; --ok-voile: #10291d; --attente: #e0aa4e; --attente-voile: #2a2110;
    --alerte: #f08a80; --alerte-voile: #2e1817; --info-voile: #14243c;
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ombre-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
    --ombre-3: 0 16px 40px rgba(0, 0, 0, .55);
  }
}

/* En mode sombre le bleu s'éclaircit : un libellé blanc y tomberait à 2,15:1.
   Tout ce qui repose sur un aplat bleu prend donc l'encre profonde (≈9:1). */
@media (prefers-color-scheme: dark) {
  .btn, .btn:hover, .nav a.btn, .nav a.btn:hover,
  .saut-contenu, .saut-contenu:focus, ::selection { color: #0a1626; }
  .btn.ghost, .btn.ghost:hover, .btn.sobre, .nav a.btn.ghost, .nav a.btn.sobre { color: var(--bleu); }
  .btn.sobre { color: var(--encre); }
}

/* ============================ Base ====================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-2);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.14; margin: 0 0 calc(var(--u) * 2); letter-spacing: -0.015em; }
h1 { font-size: clamp(2.05rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.3rem; }
h4 { font-family: var(--texte); font-size: 1rem; font-weight: 600; margin: 0 0 var(--u); }

p { margin: 0 0 calc(var(--u) * 2); max-width: 68ch; }
.lead { font-size: 1.125rem; color: var(--encre-2); line-height: 1.65; }
a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--bleu-fonce); }
strong { font-weight: 600; }
small { font-size: 0.8125rem; color: var(--encre-2); }
hr { border: 0; border-top: 1px solid var(--filet); margin: calc(var(--u) * 4) 0; }

/* Anneau de focus 3px : exigence du style Accessible & Ethical */
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: var(--r-s); }
::selection { background: var(--bleu); color: #fff; }

.surtitre {
  display: block; font-family: var(--chiffre); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu);
  margin-bottom: calc(var(--u) * 1.5); font-weight: 500;
}
.surtitre-accent { color: var(--bleu); }

.num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  font-family: var(--chiffre); font-size: 0.75rem; font-weight: 600;
  color: var(--bleu); background: var(--bleu-voile);
  border: 0; border-radius: 999px;
}

/* ============================ Trame ===================================== */
.trame { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }

.section { padding-block: calc(var(--u) * 9); }
.section + .section { border-top: 1px solid var(--filet); }
.section-pleine { background: var(--surface); }
.section-appui { background: var(--bleu-voile); border-top: 0 !important; }
.section-encre { background: var(--bleu-profond); color: #dbe6f5; border-top: 0 !important; }
.section-encre h1, .section-encre h2, .section-encre h3 { color: #fff; }
.section-encre p { color: #c3d3e8; }
.section-encre .surtitre { color: #8fbcff; }
.section-encre .num { color: #cfe0f8; background: rgba(255, 255, 255, .12); }

.grille { display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); gap: var(--gouttiere); }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c12 { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: 1 / -1; }
  .section { padding-block: calc(var(--u) * 6); }
}

/* ============================ En-tête =================================== */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--filet);
}
@media (prefers-color-scheme: dark) { .entete { background: rgba(19, 29, 43, .88); } }
.entete-in { display: flex; align-items: center; justify-content: space-between; gap: var(--gouttiere); min-height: 68px; }
.nav { display: flex; align-items: center; gap: calc(var(--u) * 2.5); }
.nav a {
  color: var(--encre-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  padding: 8px 10px; border-radius: var(--r-s); transition: background var(--transition), color var(--transition);
}
.nav a:hover { color: var(--bleu); background: var(--bleu-voile); }
.nav a[aria-current="page"] { color: var(--bleu); }
/* Un bouton placé dans la navigation reste un bouton (la règle de lien ci-dessus
   est plus spécifique que .btn et délaverait son libellé). */
.nav a.btn, .nav a.btn:hover { color: #fff; background: var(--bleu); }
.nav a.btn:hover { background: var(--bleu-fonce); }
.nav a.btn.ghost, .nav a.btn.sobre { color: var(--bleu); background: transparent; }
.nav a.btn.ghost:hover { background: var(--bleu-voile); color: var(--bleu-fonce); }
@media (max-width: 860px) { .nav-sec { display: none; } }

.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); font-family: var(--titre); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
/* La marque est bleue, le logotype reste en encre : le SVG porte donc sa propre
   couleur (currentColor) et la decoupe de la coche suit la surface, donc le mode. */
.marque svg { display: block; color: var(--bleu); flex: none; }

/* ============================ Boutons =================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 calc(var(--u) * 2.5);
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  color: #fff; background: var(--bleu);
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; text-decoration: none; box-shadow: var(--ombre-1);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:hover { background: var(--bleu-fonce); color: #fff; box-shadow: var(--ombre-2); }
.btn:active { transform: translateY(1px); box-shadow: var(--ombre-1); }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.btn.ghost { background: transparent; color: var(--bleu); border-color: var(--filet-fort); box-shadow: none; }
.btn.ghost:hover { background: var(--bleu-voile); color: var(--bleu-fonce); box-shadow: none; }
.btn.sobre { background: var(--surface); color: var(--encre); border-color: var(--filet); box-shadow: none; }
.btn.sobre:hover { background: var(--surface-3); color: var(--encre); }
.btn.green { background: var(--ok); }
.btn.green:hover { background: #0c6440; }
.btn.large { min-height: 54px; padding-inline: calc(var(--u) * 4); font-size: 1.0625rem; border-radius: var(--r); }
.btn.pleine { width: 100%; }
.btn.petit { min-height: 38px; font-size: 0.875rem; padding-inline: calc(var(--u) * 1.5); }
.mt { margin-top: calc(var(--u) * 2); }

.stickycta {
  position: fixed; inset: auto 0 0 0; z-index: 50; display: none; gap: var(--u);
  padding: calc(var(--u) * 1.5);
  padding-bottom: max(calc(var(--u) * 1.5), env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--filet); box-shadow: 0 -4px 16px rgba(15, 27, 45, .08);
}
@media (prefers-color-scheme: dark) { .stickycta { background: rgba(19, 29, 43, .96); } }
@media (max-width: 760px) { .stickycta { display: flex; } body { padding-bottom: 86px; } }

/* ============================ Blocs ===================================== */
.bloc, .card {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r);
  padding: calc(var(--u) * 3); box-shadow: var(--ombre-1);
}
.card.glass { background: var(--surface); box-shadow: var(--ombre-1); }
.bloc-accent { border-left: 4px solid var(--bleu); }
.bloc-appui { background: var(--bleu-voile); border-color: transparent; box-shadow: none; }

.liste-filets { list-style: none; margin: 0; padding: 0; }
.liste-filets li { display: flex; gap: calc(var(--u) * 2); padding-block: calc(var(--u) * 2); border-top: 1px solid var(--filet); }
.liste-filets li:first-child { border-top: 0; padding-top: 0; }

/* Chiffre-clé : filet bleu supérieur, valeur en monospace */
.metrique { border-top: 3px solid var(--bleu); padding-top: calc(var(--u) * 1.5); }
.metrique-val { display: block; font-family: var(--chiffre); font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; color: var(--encre); }
.metrique-lib { font-size: 0.875rem; color: var(--encre-2); }

/* ============================ Formulaires =============================== */
label, .lab { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; color: var(--encre); }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]),
select, textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  font: inherit; color: var(--encre);
  background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r-s);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: var(--bleu); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(11, 92, 213, .18);
}
input::placeholder, textarea::placeholder { color: var(--encre-3); }
.aide { font-size: 0.8125rem; color: var(--encre-2); margin-top: 6px; }
.err { font-size: 0.8125rem; color: var(--alerte); margin-top: 6px; font-weight: 500; }
.champ { margin-bottom: calc(var(--u) * 2.5); }
fieldset { border: 1px solid var(--filet); border-radius: var(--r); padding: calc(var(--u) * 2); margin: 0 0 calc(var(--u) * 2); }
legend { font-size: 0.875rem; font-weight: 600; padding-inline: 6px; color: var(--encre); }

/* ============================ Tableaux ================================== */
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
thead th {
  text-align: left; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--encre-2); font-weight: 600; padding: calc(var(--u) * 1.5);
  background: var(--surface-3); border-bottom: 1px solid var(--filet);
}
thead th:first-child { border-top-left-radius: var(--r-s); }
thead th:last-child { border-top-right-radius: var(--r-s); }
tbody td { padding: calc(var(--u) * 1.75) calc(var(--u) * 1.5); border-bottom: 1px solid var(--filet); vertical-align: top; }
tbody tr:hover { background: var(--bleu-brume); }
tbody tr.clickable { cursor: pointer; }
.num-cell, .montant { font-family: var(--chiffre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau-scroll { overflow-x: auto; border-radius: var(--r-s); }

/* ============================ Étiquettes ================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
}
.badge.valide, .badge.paid { color: var(--ok); background: var(--ok-voile); }
.badge.a_valider, .badge.due { color: var(--attente); background: var(--attente-voile); }
.badge.urgent, .badge.overdue { color: var(--alerte); background: var(--alerte-voile); }
.badge.info { color: var(--bleu); background: var(--bleu-voile); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

.alert-box {
  border: 1px solid transparent; border-left: 4px solid var(--alerte);
  background: var(--alerte-voile); color: var(--encre);
  padding: calc(var(--u) * 2); border-radius: var(--r-s); margin-bottom: calc(var(--u) * 2);
}
.alert-box.important { border-left-color: var(--attente); background: var(--attente-voile); }
.notice { background: var(--bleu-voile); border-left: 4px solid var(--bleu); padding: calc(var(--u) * 2); border-radius: var(--r-s); }

/* ============================ Onglets =================================== */
.onglets { display: flex; gap: calc(var(--u) * 0.5); border-bottom: 1px solid var(--filet); margin-bottom: calc(var(--u) * 3); overflow-x: auto; }
.onglets button {
  appearance: none; background: none; border: 0; border-bottom: 3px solid transparent;
  font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--encre-2);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1.5); cursor: pointer; white-space: nowrap; min-height: 44px;
  border-radius: var(--r-s) var(--r-s) 0 0; transition: color var(--transition), background var(--transition);
}
.onglets button:hover { color: var(--bleu); background: var(--bleu-brume); }
.onglets button.active { color: var(--bleu); border-bottom-color: var(--bleu); font-weight: 600; }

/* ============================ Pages applicatives ======================== */
.page-app { min-height: 100vh; background: var(--surface-2); }
.zone { padding-block: calc(var(--u) * 4); }
.center-page { min-height: 100vh; display: grid; place-items: center; padding: var(--gouttiere); background: var(--surface-2); }
.etroit { width: 100%; max-width: 460px; }

.dialog-inner { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-l); padding: calc(var(--u) * 3); max-width: 620px; width: 100%; box-shadow: var(--ombre-3); }
dialog { border: 0; padding: 0; background: transparent; }
dialog::backdrop { background: rgba(10, 22, 38, .55); backdrop-filter: blur(2px); }

.qr-panel { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 3); align-items: center; }
@media (max-width: 700px) { .qr-panel { grid-template-columns: 1fr; } }
.qr-panel img { border: 1px solid var(--filet); border-radius: var(--r-s); background: #fff; padding: 6px; }

/* ============================ Accessibilité & impression ================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saut-contenu { position: absolute; left: -9999px; top: 0; background: var(--bleu); color: #fff; padding: 12px 16px; z-index: 100; border-radius: var(--r-s); }
.saut-contenu:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .entete, .stickycta, .onglets, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .bloc, .card { border-color: #999; box-shadow: none; }
}

/* ============================ Pied ====================================== */
.pied { background: var(--bleu-profond); color: #b8c9e0; padding-block: calc(var(--u) * 6); }
.pied a { color: #e2ecf9; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gouttiere); }
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: calc(var(--u) * 4); padding-top: calc(var(--u) * 3); font-size: 0.8125rem; }

/* ============================ Visuels =================================== */
/* Chaque visuel reserve son ratio avant chargement : aucune secousse de mise
   en page (CLS). Coins arrondis, ombre basse, fond d'attente bleu tres pale. */
.visuel { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--surface-3); box-shadow: var(--ombre-2); }
.visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visuel-3x2 { aspect-ratio: 3 / 2; }
.visuel-4x3 { aspect-ratio: 4 / 3; }
.visuel-21x9 { aspect-ratio: 21 / 9; }
.visuel-carre { aspect-ratio: 1 / 1; }

/* Filet bleu en pied de visuel : rappel de la marque, jamais un degrade decoratif. */
.visuel-signe::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--bleu);
}

/* Cartouche pose sur un visuel (chiffre ou legende), lisible sur toute photo. */
.visuel-cartouche {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  background: rgba(255, 255, 255, .94); color: var(--encre);
  padding: 10px 14px; border-radius: var(--r-s); box-shadow: var(--ombre-2);
  font-size: 0.875rem; font-weight: 600; max-width: calc(100% - 32px);
}
.visuel-cartouche b { font-family: var(--chiffre); color: var(--bleu); }

/* Bande pleine largeur : photo assombrie par un aplat uni (pas un degrade),
   ratio de contraste du texte verifie a 4.5:1 minimum sur l'aplat resultant. */
/* Empilement sans z-index negatif : un enfant en z-index negatif passe DERRIERE
   le fond de son propre parent et devient invisible. L'ordre est donc : fond de
   repli, puis image positionnee, puis aplat de lisibilite, puis contenu. */
.bande { position: relative; overflow: hidden; background: var(--bleu-profond); }
.bande > picture, .bande > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bande > picture > img, .bande > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bande::after { content: ""; position: absolute; inset: 0; background: rgba(10, 46, 92, .82); }
.bande .trame { position: relative; z-index: 1; }

/* Colonne d'introduction qui suit la lecture : evite le grand vide a droite
   d'une colonne courte face a une longue liste. */
.colonne-collante { position: sticky; top: 92px; align-self: start; }
@media (max-width: 900px) { .colonne-collante { position: static; } }

.pile { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.mosaique { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gouttiere); }

/* Un element de grille a `min-width: auto` par defaut : sa largeur minimale est
   celle du contenu, donc une image de 1600 px empeche la colonne de retrecir et
   fait deborder la trame. On autorise explicitement la compression. */
.grille > * { min-width: 0; }
.visuel img, .visuel picture { max-width: 100%; }

/* ============================ Verre et scene 3D ========================= */
/* Le verre n'est jamais pose sous un texte long : il habille l'en-tete, les
   cartouches et les tuiles courtes. Opacite haute (0.72 mini) pour que le
   contraste du texte reste verifie, avec repli opaque si backdrop-filter
   n'est pas supporte. */
.verre {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: var(--r-l);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, var(--ombre-2);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .verre {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
  }
}
@media (prefers-color-scheme: dark) {
  .verre { background: rgba(19, 29, 43, .74); border-color: rgba(255, 255, 255, .12);
           box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, var(--ombre-2); }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .verre { background: rgba(19, 29, 43, .62); }
  }
}

/* Reflet mobile en haut de tuile : la lumiere glisse quand on survole. */
.verre-reflet { position: relative; overflow: hidden; }
.verre-reflet::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Scene WebGL : posee derriere le contenu du heros, jamais interactive. */
.scene-hote { position: relative; isolation: isolate; }
/* La scene est un OBJET pose a droite, derriere les tuiles de verre, et non un
   fond etale : c'est ce qui donne au verre quelque chose a diffracter. */
.scene {
  position: absolute; top: -6%; right: -3%; left: auto;
  width: min(52%, 640px); aspect-ratio: 1 / 1; height: auto;
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 900ms ease-out;
}
.scene.scene-active { opacity: 1; }
.scene-hote > *:not(.scene) { position: relative; z-index: 1; }
@media (max-width: 760px) { .scene { display: none; } }
@media (prefers-reduced-motion: reduce) { .scene { transition: none; } }

/* Declinaisons de placement : meme scene, autre coin, autre echelle. Les trois
   partagent la lumiere et la matiere pour rester une seule famille visuelle. */
.scene-gauche { right: auto; left: -4%; }
.scene-basse { top: auto; bottom: -10%; }
.scene-petite { width: min(38%, 440px); }
.scene-discrete { opacity: 0; }
.scene-discrete.scene-active { opacity: .72; }

/* ============================ Couleur de profession ===================== */
/* Chaque famille de professionnels a sa couleur. Elle habille l'ambiance de
   l'espace de travail et l'etiquette de metier, JAMAIS un statut : valide,
   en attente et alerte gardent leurs couleurs propres, sinon un rouge de
   metier se confondrait avec un rouge d'erreur. Les quatre teintes sont
   verifiees a 5.3:1 minimum sur blanc. */
:root { --pro: var(--bleu); --pro-voile: var(--bleu-voile); }
[data-profession="medecin"]     { --pro: #0b5cd5; --pro-voile: #eaf1fd; }
[data-profession="pharmacien"]  { --pro: #0f7a4f; --pro-voile: #e7f6ee; }
[data-profession="infirmier"]   { --pro: #a8204a; --pro-voile: #fdeaf0; }
[data-profession="sage-femme"]  { --pro: #7a3ba8; --pro-voile: #f3ebfa; }
@media (prefers-color-scheme: dark) {
  [data-profession="medecin"]    { --pro: #6aa6ff; --pro-voile: #14243c; }
  [data-profession="pharmacien"] { --pro: #55c68d; --pro-voile: #10291d; }
  [data-profession="infirmier"]  { --pro: #f083a5; --pro-voile: #2c1420; }
  [data-profession="sage-femme"] { --pro: #c39ae4; --pro-voile: #221a2e; }
}

/* Etiquette de metier : couleur + libelle, jamais la couleur seule. */
.etiquette-pro {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 600; color: var(--pro);
  background: var(--pro-voile); border-radius: 999px; padding: 5px 12px;
}
.etiquette-pro::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
/* Filet de metier en tete d'espace de travail. */
.liseré-pro { border-top: 3px solid var(--pro); }
/* Dans une liste, chaque etiquette porte sa propre famille : la variable est
   donc resolue sur l'element lui-meme comme sur un ancetre. */
.etiquette-pro[data-profession="medecin"]    { --pro: #0b5cd5; --pro-voile: #eaf1fd; }
.etiquette-pro[data-profession="pharmacien"] { --pro: #0f7a4f; --pro-voile: #e7f6ee; }
.etiquette-pro[data-profession="infirmier"]  { --pro: #a8204a; --pro-voile: #fdeaf0; }
.etiquette-pro[data-profession="sage-femme"] { --pro: #7a3ba8; --pro-voile: #f3ebfa; }
@media (prefers-color-scheme: dark) {
  .etiquette-pro[data-profession="medecin"]    { --pro: #6aa6ff; --pro-voile: #14243c; }
  .etiquette-pro[data-profession="pharmacien"] { --pro: #55c68d; --pro-voile: #10291d; }
  .etiquette-pro[data-profession="infirmier"]  { --pro: #f083a5; --pro-voile: #2c1420; }
  .etiquette-pro[data-profession="sage-femme"] { --pro: #c39ae4; --pro-voile: #221a2e; }
}