/* Châssis repris d'Alerte Climat Locale (mêmes tokens de couleur, bordures,
   espacements, symboles de gravité) — voir MEMORY reference_deploiement_cloudflare_pages
   et le projet AlerteClimatLocale pour l'origine de ces choix. Rien de météo
   ici : uniquement la structure et les règles de style génériques. */

:root {
  --bleu-fonce: #0d3b66;
  --bleu: #1d5b96;
  --bleu-clair: #eaf2fb;
  --bleu-roi: #1e3a8a;
  --texte: #16232f;
  --texte-discret: #5b6b7a;
  --fond: #eaf0f9;
  --carte-fond: #ffffff;
  --bordure: #d7e3f0;
  --bordure-app: #000000;
  --epaisseur-bordure: 1px;
  --espace-petit: 19px; /* ~5mm : rythme vertical unique entre tous les blocs/modules */

  --niveau-vert: #2e7d32;
  --niveau-jaune: #d4a017;
  --niveau-orange: #e07b00;
  --niveau-rouge: #c62828;
  --niveau-indisponible: #9aa5b1;

  /* Jaune vif dédié au cycle décoratif du titre uniquement (--niveau-jaune,
     couleur de gravité officielle, se lit comme "olive" affiché seul en
     grand sur fond blanc) — jamais utilisé pour un vrai niveau. */
  --titre-jaune-vif: #ffc107;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Voir afficherEcran() dans app.js : évite une bande de fond clair visible
   quand #ecran-accueil déborde de sa hauteur fixe (100dvh). */
body.fond-ecran-accueil {
  background: var(--bleu-roi);
}

.ecran {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--espace-petit) 18px calc(14px + env(safe-area-inset-bottom));
  position: relative;
  border: var(--epaisseur-bordure) solid var(--bordure-app);
}

.ecran[hidden] { display: none; }

#ecran-accueil {
  background: var(--bleu-roi);
  gap: var(--espace-petit);
  /* Hauteur bornée (pas juste min-height) : la fenêtre entière ne doit pas
     s'agrandir quand la liste ou le détail s'ouvre — "Propulsé par BS
     Concept" doit rester à sa place. Seule .liste-etablissements absorbe le
     surplus, en défilant elle-même (overflow-y + min-height:0). */
  height: 100vh;
  height: 100dvh;
  /* Filet de sécurité JS (ajusterHauteurReelle() dans app.js) : reprend le
     pas sur 100dvh quand le navigateur ne le recalcule pas proprement juste
     après une fermeture de clavier virtuel (leçon d'Alerte Climat Locale,
     2026-08-21 — Chrome Android). --vh-app absente tant que le JS n'a pas
     tourné : repli automatique sur 100dvh dans ce cas. */
  height: var(--vh-app, 100dvh);
}

#ecran-accueil > .entete-accueil,
#ecran-accueil > .mention-source {
  flex-shrink: 0;
}

.bouton-annuler {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  font-size: 1.2rem;
  z-index: 5;
}

/* Bloc titre : même esprit visuel que les cartes de contenu, mais non cliquable */

.bloc-titre {
  text-align: center;
  background: var(--carte-fond);
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 16px;
  padding: 14px 16px;
}

/* Écran de saisie */

.entete-saisie {
  margin: 32px 0 28px;
}

.titre-app {
  font-size: 1.6rem;
  margin: 0;
  text-wrap: balance;
  animation: cycle-couleurs-titre 3.8s linear infinite;
}

/* Vague continue rouge → jaune → vert → rouge, jamais un palier suivi d'un
   saut brusque ("clignotant", problématique pour l'épilepsie photosensible).
   Un seul point de couleur par étape (pas de plage figée) + timing `linear` :
   le navigateur interpole en continu sur toute la durée. */
@keyframes cycle-couleurs-titre {
  0% { color: var(--niveau-rouge); }
  33% { color: var(--titre-jaune-vif); }
  66% { color: var(--niveau-vert); }
  100% { color: var(--niveau-rouge); }
}

.sous-titre {
  color: var(--texte-discret);
  margin: 0;
  font-size: 0.95rem;
  text-wrap: balance;
}

.sous-titre-saisie {
  margin: 8px 0 0;
  font-size: 0.82rem;
  text-align: center;
}

#form-lieu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.conteneur-champ {
  position: relative;
}

#form-lieu label {
  font-weight: 600;
  color: var(--bleu-fonce);
  text-wrap: balance;
}

#champ-ville {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 12px;
  background: var(--carte-fond);
  color: var(--texte);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.liste-suggestions {
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--carte-fond);
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 12px;
  max-height: 240px;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(13, 59, 102, 0.12);
}

.liste-suggestions[hidden] { display: none; }

.liste-suggestions li button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--texte);
  cursor: pointer;
}

.liste-suggestions li button:hover,
.liste-suggestions li button:focus {
  background: var(--bleu-clair);
}

.liste-suggestions .departement {
  color: var(--texte-discret);
  font-size: 0.85rem;
}

#bouton-valider {
  margin-top: 8px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--bleu);
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 12px;
  cursor: pointer;
  outline: none;
}

#bouton-valider:disabled {
  background: var(--bordure);
  color: var(--texte-discret);
  cursor: not-allowed;
}

.mention-source {
  text-align: center;
  color: var(--texte-discret);
  font-size: 0.8rem;
  margin-top: auto;
  padding-top: 14px;
  text-wrap: balance;
}

.entete-accueil ~ .mention-source {
  color: #ffffff;
  font-size: 0.85rem;
  padding-top: 0;
}

.mention-source a { color: var(--bleu); }

.entete-accueil ~ .mention-source a {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* Écran d'accueil */

.entete-accueil {
  display: flex;
  flex-direction: column;
  gap: var(--espace-petit);
  margin: 0;
}

.entete-accueil .titre-app {
  font-size: 1.75rem;
  margin: 0;
}

.sous-titre-accueil {
  margin: -11px 0 0;
  font-size: 0.82rem;
  text-align: center;
  color: #ffffff;
}

.ligne-commune {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.nom-commune {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
}

.bouton-localisation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: var(--bordure-app);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  outline: none;
}

.icone-pin {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
}

/* Repère de découverte : anneau bleu clair qui pulse vite autour du picto
   localisation tant que l'utilisateur n'a jamais cliqué dessus. */
.anneau-pulsation-pin {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--bleu-clair);
  pointer-events: none;
  animation: anneau-pulsation-pin 1s ease-out infinite;
}

.anneau-pulsation-pin[hidden] { display: none; }

@keyframes anneau-pulsation-pin {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 0; }
}

.bouton-discret {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--texte-discret);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}

/* Liste des établissements : contrairement à la grille fixe à 4 cases
   d'Alerte Climat Locale, le nombre d'établissements par ville est variable
   (0 à plusieurs dizaines) — c'est donc CETTE liste qui défile en interne
   (min-height:0 + overflow-y:auto, même mécanisme que .panneau-detail chez
   Alerte Climat Locale), pas le panneau de détail. Le reste de l'écran
   (en-tête, panneau de détail, pied de page) reste fixe. */
.liste-etablissements {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.message-liste {
  text-align: center;
  color: #ffffff;
  font-size: 0.9rem;
  padding: 24px 12px;
  text-wrap: balance;
}

/* 3 blocs empilés verticalement (nom en pleine largeur, ligne picto+niveau,
   pastille d'activités) — pas un layout 2 colonnes : refonte du 2026-08-26
   suite au visuel Photoshop fourni par l'utilisateur (voir SUIVI_QUALITE.md). */
.carte-etablissement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background: var(--carte-fond);
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 16px;
  cursor: pointer;
  outline: none;
  text-align: left;
  flex-shrink: 0;
}

/* Feedback tactile bref au clic/appui, en plus de la bordure — même règle
   que le reste de l'appli. */
.carte-etablissement:active,
.carte-etablissement:focus-visible,
.bouton-localisation:active,
.bouton-localisation:focus-visible {
  background-color: var(--bleu-clair);
}

/* Bordure de la carte ENTIÈRE colorée par niveau, pas seulement celle du
   picto — retour explicite de l'utilisateur, 2026-08-26 (capture annotée) :
   "comme ça on repère tout de suite les choses qui sont bonnes" doit
   s'appliquer au bloc, pas juste au bouton. Seule la couleur change, jamais
   l'épaisseur (même règle durable qu'ailleurs). */
.carte-etablissement[data-niveau="vert"] { border-color: var(--niveau-vert); }
.carte-etablissement[data-niveau="jaune"] { border-color: var(--niveau-jaune); }
.carte-etablissement[data-niveau="orange"] { border-color: var(--niveau-orange); }
.carte-etablissement[data-niveau="rouge"] { border-color: var(--niveau-rouge); }
.carte-etablissement[data-niveau="indisponible"] { border-color: var(--niveau-indisponible); }

/* Ligne picto + niveau, sous le nom. */
.carte-etablissement-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Mini picto façon Alerte Climat Locale (même halo coloré, même mécanisme
   de pulsation de sélection). Légèrement agrandi le 2026-08-26 (retour
   utilisateur) : reste fixe pendant que le niveau à côté peut désormais
   passer sur 2 lignes — "le H du bouton ne bouge pas". */
.picto-etablissement {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--carte-fond);
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 13px;
  overflow: hidden;
}

/* Bordure colorée par niveau (retour explicite de l'utilisateur, 2026-08-26 :
   "comme ça on repère tout de suite les choses qui sont bonnes") — remplace
   le noir par défaut ci-dessus. Seule la COULEUR change, jamais l'épaisseur
   (règle durable héritée d'Alerte Climat Locale : box-shadow pour l'emphase,
   jamais border-width, pour ne jamais faire bouger la mise en page). */
.picto-etablissement[data-niveau="vert"] { border-color: var(--niveau-vert); }
.picto-etablissement[data-niveau="jaune"] { border-color: var(--niveau-jaune); }
.picto-etablissement[data-niveau="orange"] { border-color: var(--niveau-orange); }
.picto-etablissement[data-niveau="rouge"] { border-color: var(--niveau-rouge); }
.picto-etablissement[data-niveau="indisponible"] { border-color: var(--niveau-indisponible); }

/* Repère persistant : le picto de l'établissement dont le détail est
   actuellement ouvert garde une bordure bleue pulsante — même mécanisme que
   la sélection d'un picto chez Alerte Climat Locale (pulsation-bordure-
   selection), anneau recalibré à 2px (au lieu de 3px) puisque le picto est
   bien plus compact qu'une carte entière. */
.carte-etablissement[data-selectionnee="true"] .picto-etablissement {
  animation: pulsation-bordure-selection-compacte 1.8s ease-in-out infinite;
}

@keyframes pulsation-bordure-selection-compacte {
  0%, 100% { border-color: var(--bleu); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50% { border-color: #ffffff; box-shadow: 0 0 0 2px #ffffff; }
}

.halo-niveau {
  position: absolute;
  inset: 0;
  opacity: 0.16;
}
.halo-niveau[data-niveau="vert"] { background: var(--niveau-vert); }
.halo-niveau[data-niveau="jaune"] { background: var(--niveau-jaune); }
.halo-niveau[data-niveau="orange"] { background: var(--niveau-orange); }
.halo-niveau[data-niveau="rouge"] { background: var(--niveau-rouge); }
.halo-niveau[data-niveau="indisponible"] { background: var(--niveau-indisponible); }

.icone-etablissement {
  position: relative;
  width: 22px;
  height: 22px;
  color: var(--texte);
}
.picto-etablissement[data-niveau="vert"] .icone-etablissement { color: var(--niveau-vert); }
.picto-etablissement[data-niveau="jaune"] .icone-etablissement { color: var(--niveau-jaune); }
.picto-etablissement[data-niveau="orange"] .icone-etablissement { color: var(--niveau-orange); }
.picto-etablissement[data-niveau="rouge"] .icone-etablissement { color: var(--niveau-rouge); }
.picto-etablissement[data-niveau="indisponible"] .icone-etablissement { color: var(--niveau-indisponible); }

/* Nom : redevenu secondaire le 2026-08-26 (retour utilisateur — "on s'en
   fout un peu à la limite", "ça fait pâté sur 2 lignes") — réduit à 1 seule
   ligne + ellipse (au lieu de 2), taille et graisse diminuées. Le nom
   complet reste toujours disponible en un tap, dans le panneau de détail.
   -webkit-line-clamp est une invention WebKit, donc garanti pris en charge
   sur Safari/iOS. */
.carte-etablissement-nom {
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Niveau : redevenu l'élément dominant le 2026-08-26 (retour utilisateur) —
   "au niveau du H", jamais tronqué, libre de passer sur 2 lignes (ex.
   "Certifié avec mention" / "Haute Qualité des Soins") plutôt qu'une
   ellipse. Le picto (taille fixe, "ne bouge pas") reste centré verticalement
   à côté grâce à align-items:center sur .carte-etablissement-ligne. */
.carte-etablissement-niveau {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texte-discret);
  min-width: 0;
}
.carte-etablissement[data-niveau="vert"] .carte-etablissement-niveau { color: var(--niveau-vert); }
.carte-etablissement[data-niveau="jaune"] .carte-etablissement-niveau { color: var(--niveau-jaune); }
.carte-etablissement[data-niveau="orange"] .carte-etablissement-niveau { color: var(--niveau-orange); }
.carte-etablissement[data-niveau="rouge"] .carte-etablissement-niveau { color: var(--niveau-rouge); }
.carte-etablissement[data-niveau="indisponible"] .carte-etablissement-niveau { color: var(--niveau-indisponible); }

/* Catégories d'activité (ex. "Chirurgie · Obstétrique") : purement
   informatif, jamais un critère de recherche/filtre (décision explicite de
   l'utilisateur — granularité trop grossière et couverture trop inégale
   entre gros et petits établissements pour s'y fier). En pastille grisée
   distincte, avec bordure noire pour bien se détacher du fond de carte
   (retour utilisateur du 2026-08-26 : "on ne le voit pas bien" — même
   traitement de bordure que le reste de l'appli). Pleine largeur, une seule
   ligne, troncature par ellipse — pour qu'aucune ligne de la liste ne se
   désaligne selon qu'un établissement déclare 1 ou 8 catégories (décision
   explicite de l'utilisateur). Liste complète et jamais tronquée dans le
   panneau de détail (ligne "Activités"). Taille augmentée le 2026-08-26
   (2e retour sur la lisibilité de ce bloc). */
.carte-etablissement-activites {
  box-sizing: border-box;
  width: 100%;
  font-size: 0.95rem;
  color: var(--texte-discret);
  background: var(--fond);
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 14px;
  padding: 6px 12px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Panneau de détail : refait en vraie superposition plein écran le
   2026-08-26 après retour d'un test utilisateur réel (une carte en flux
   normal, sous une liste elle-même défilante, laissait la liste visible en
   partie derrière sur les fiches courtes — incohérent). `#panneau-detail`
   est maintenant le fond assombri fixe ; `.panneau-detail-carte` est la
   vraie carte blanche, centrée, avec son propre défilement interne en
   filet de sécurité si jamais son contenu dépassait la hauteur d'écran. */

.panneau-detail {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(13, 59, 102, 0.6);
}

.panneau-detail[hidden] { display: none; }

.panneau-detail-carte {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: var(--carte-fond);
  border: var(--epaisseur-bordure) solid var(--bordure-app);
  border-radius: 16px;
  padding: 20px 20px 16px;
}

/* Flottant (au lieu d'un `position:absolute` + padding-right réservé sur
   TOUTES les lignes du titre) : le texte n'a besoin de contourner la croix
   que sur sa 1ère ligne, pas sur les suivantes — un padding-right uniforme
   gâchait ~32px de largeur même sur les lignes 2/3/4, aggravant justement
   le problème qu'il essayait de résoudre (nom sur 4 lignes au lieu de 2,
   retour utilisateur réel du 2026-08-26). Doit rester le tout premier
   enfant de `.panneau-detail-carte` dans le HTML pour que le flottement
   fonctionne (le texte qui suit dans le flux contourne un flottant
   précédent, jamais un flottant qui le suit). */
.bouton-fermer {
  float: right;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 8px 12px;
  font-size: 1.1rem;
}

/* Titre en 2 parties de poids différents (retour utilisateur, 2026-08-26) :
   nom principal en avant, "site"/complément (après le 1er " - " du nom réel)
   nettement plus petit en dessous — voir separerNomEtablissement() dans
   app.js. Les 2 parties héritent de la couleur du niveau ci-dessous (jamais
   fixée ici), pour rester visuellement liées malgré la différence de taille. */
#detail-titre {
  color: var(--bleu-fonce);
  margin: 0 0 12px;
}

/* text-wrap: balance (déjà utilisé ailleurs dans l'appli, ex. .titre-app) :
   évite les retours à la ligne en "escalier" du retour à la ligne par
   défaut du navigateur (ex. "INSTITUT DE" / "CANCEROLOGIE DE" / "L'OUEST",
   3 lignes très inégales) au profit de lignes plus équilibrées (ex.
   "INSTITUT DE CANCEROLOGIE" / "DE L'OUEST") — retour utilisateur explicite
   du 2026-08-26 ("ça fait vraiment dégueulasse"). Dégrade proprement sur
   les navigateurs qui ne le supportent pas encore (retour au comportement
   par défaut, jamais cassé). */
#detail-titre-principal {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

#detail-titre-site {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2px;
}

#detail-titre-site:empty { display: none; }

.panneau-detail[data-niveau="vert"] #detail-titre { color: var(--niveau-vert); }
.panneau-detail[data-niveau="jaune"] #detail-titre { color: var(--niveau-jaune); }
.panneau-detail[data-niveau="orange"] #detail-titre { color: var(--niveau-orange); }
.panneau-detail[data-niveau="rouge"] #detail-titre { color: var(--niveau-rouge); }
.panneau-detail[data-niveau="indisponible"] #detail-titre { color: var(--niveau-indisponible); }

/* Même cohérence que la carte de la liste : la bordure de la carte du
   détail suit aussi le niveau, pas seulement son titre — "c'est pareil",
   retour explicite de l'utilisateur, 2026-08-26. */
.panneau-detail[data-niveau="vert"] .panneau-detail-carte { border-color: var(--niveau-vert); }
.panneau-detail[data-niveau="jaune"] .panneau-detail-carte { border-color: var(--niveau-jaune); }
.panneau-detail[data-niveau="orange"] .panneau-detail-carte { border-color: var(--niveau-orange); }
.panneau-detail[data-niveau="rouge"] .panneau-detail-carte { border-color: var(--niveau-rouge); }
.panneau-detail[data-niveau="indisponible"] .panneau-detail-carte { border-color: var(--niveau-indisponible); }

/* Centré (pas aligné en haut) : le symbole doit rester à la même hauteur
   que le bloc de texte à côté, y compris quand celui-ci passe sur 2 lignes
   (ex. "Certifié avec mention" / "Haute Qualité des Soins") — retour
   utilisateur du 2026-08-26. */
.ligne-niveau-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

/* La FORME suit le sens du message, pas seulement la couleur : triangle
   (urgence/réserve) réservé à jaune/orange/rouge, coche pour vert (tout va
   bien), tiret neutre pour donnée indisponible — voir
   mettreAJourSymboleGravite() dans js/app.js. Agrandi une 2e fois le
   2026-08-26 (retour utilisateur : "on a de la place à droite", doit
   correspondre à la hauteur des 2 lignes de texte à côté). */
.symbole-niveau {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--niveau-indisponible);
}

.panneau-detail[data-niveau="vert"] .symbole-niveau { color: var(--niveau-vert); }
.panneau-detail[data-niveau="jaune"] .symbole-niveau { color: var(--niveau-jaune); }
.panneau-detail[data-niveau="orange"] .symbole-niveau { color: var(--niveau-orange); }
.panneau-detail[data-niveau="rouge"] .symbole-niveau { color: var(--niveau-rouge); }
.panneau-detail[data-niveau="indisponible"] .symbole-niveau { color: var(--niveau-indisponible); }

#detail-texte {
  margin: 0;
  line-height: 1.5;
  color: var(--texte);
}

/* Coloré par niveau, décision confirmée après réflexion de l'utilisateur
   ("mets-le en couleur suivant la certification, je trouve ça cohérent") —
   2026-08-26. */
.panneau-detail[data-niveau="vert"] #detail-texte { color: var(--niveau-vert); }
.panneau-detail[data-niveau="jaune"] #detail-texte { color: var(--niveau-jaune); }
.panneau-detail[data-niveau="orange"] #detail-texte { color: var(--niveau-orange); }
.panneau-detail[data-niveau="rouge"] #detail-texte { color: var(--niveau-rouge); }
.panneau-detail[data-niveau="indisponible"] #detail-texte { color: var(--niveau-indisponible); }

.detail-lignes {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--texte-discret);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 600px) {
  .ecran { padding-top: 60px; }
}