/* ==========================================================================
   ÉCRANS — recherche, accueil, fiche, entrée, vérification
   --------------------------------------------------------------------------
   Toute la hiérarchie sert un seul objectif : que l'agent obtienne sa réponse
   en quelques secondes, debout, dans une situation qui se tend. L'ordre de
   lecture imposé est donc la RÉPONSE, puis le GESTE, puis le TEXTE, puis ce
   qui l'EXPOSE et la LIMITE — le droit rassure et prouve, il ne se lit pas
   dans l'urgence.

   Motifs récurrents de la direction « consigne de poste » :
     · repères d'angle en L        délimitent sans enfermer
     · numéro de bloc en mono      donne un ordre de lecture explicite
     · filet hachuré               marque un seuil, langage du balisage
     · capitales condensées        ce qui se lit de loin
   ========================================================================== */

/* --- Recherche -----------------------------------------------------------
   Le champ est l'outil, pas une décoration d'en-tête : il occupe la largeur,
   se colle sous le bandeau et ne quitte jamais l'écran. */
.recherche {
  position: sticky;
  top: var(--h-topbar);
  z-index: 15;
  background: var(--fond);
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--bord);
}
.recherche-boite { position: relative; display: flex; align-items: center; }
/* Loupe en SVG inline (data:) plutôt qu'en pseudo-éléments : deux formes CSS empilées
   se décalent dès que la hauteur du champ change, et le rendu paraît alors bricolé. */
.recherche-boite::before {
  content: '';
  position: absolute;
  left: 19px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 1;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7987' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
}
#q {
  /* Le champ EST l'écran d'accueil : c'est le seul geste attendu, il doit dominer. */
  min-height: var(--h-champ);
  font-size: 19px;
  font-weight: 500;
  padding-left: 52px;
  padding-right: 52px;
  background: var(--fond-2);
  border: 1px solid var(--bord-fort);
}
#q::placeholder {
  font-family: var(--police-titre);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 15px;
}
#q:focus { border-color: var(--ambre); box-shadow: inset 0 0 0 1px var(--ambre); }
.effacer {
  position: absolute;
  right: 8px;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--texte-faible);
  font-size: 22px;
  cursor: pointer;
}
.effacer:hover { color: var(--ambre); }

/* --- Puces d'exemple ------------------------------------------------------ */
.exemples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.exemple {
  font-size: 14px;
  color: var(--texte-doux);
  background: transparent;
  border: 1px solid var(--bord);
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--police);
  transition: border-color .14s, color .14s;
}
.exemple::before { content: '› '; color: var(--ambre-sourd); }
.exemple:hover { border-color: var(--ambre-sourd); color: var(--texte); }

/* --- Accueil -------------------------------------------------------------- */
.accueil { display: flex; flex-direction: column; gap: 40px; margin-top: 28px; }

/*
 * TITRE DE BLOC — numéro, libellé, filet hachuré jusqu'au bord.
 *
 * Le numéro n'est pas un ornement : il donne un ordre de lecture à quelqu'un qui
 * découvre l'écran, et transforme une suite de sections en parcours. Le filet
 * hachuré derrière est le langage du balisage, il dit « zone » sans un mot.
 */
.bloc-accueil { position: relative; }
.titre-bloc {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--police-titre);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 6px;
}
.titre-bloc .num {
  font-family: var(--police-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ambre);
  padding: 2px 6px;
  border: 1px solid var(--ambre-sourd);
  flex: 0 0 auto;
}
/* Le filet occupe tout l'espace restant : la ligne court jusqu'au bord de la colonne. */
.titre-bloc::after {
  content: '';
  flex: 1 1 auto;
  height: 7px;
  min-width: 24px;
  background-image: var(--hachures);
  opacity: .5;
}
.sous-bloc { font-size: 14px; color: var(--texte-faible); margin: 0 0 16px; }
.titre-bloc + .grille-accueil,
.titre-bloc + .bande,
.titre-bloc + .exemples { margin-top: 16px; }

/* auto-fit : le nombre de colonnes suit la place disponible, sans point de rupture à
   maintenir. Le minmax est un MINIMUM, pas une largeur imposée. */
.grille-accueil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 14px;
}

/*
 * CARTE DE SITUATION.
 *
 * Pas de contour complet : un fond, un filet de risque à gauche, et deux repères
 * d'angle. La question en capitales condensées se reconnaît de loin, l'aperçu de
 * réponse se lit ensuite. Rien d'autre — un badge sur chaque carte n'informerait
 * plus, neuf fiches sur onze portant le même niveau.
 */
.carte-accueil {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 156px;
  text-align: left;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--bord-fort);
  padding: 20px 22px;
  cursor: pointer;
  font-family: var(--police);
  color: inherit;
  transition: background .14s, border-color .14s;
}
/* Repère d'angle bas-droite, rappel du motif du bandeau. */
.carte-accueil::after {
  content: '';
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--bord-fort);
  border-bottom: 2px solid var(--bord-fort);
  transition: border-color .14s;
}
.carte-accueil:hover { background: var(--fond-3); }
.carte-accueil:hover::after { border-color: var(--ambre); }
.carte-accueil:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.carte-accueil.gr-haute { border-left-color: var(--rouge); }
.carte-accueil.gr-moyenne { border-left-color: var(--ambre-sourd); }

.carte-accueil .situation {
  font-family: var(--police-titre);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: .035em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--texte);
}
/* Trois lignes d'aperçu : assez pour reconnaître la réponse, trop peu pour croire
   qu'on a tout lu. C'est la fiche qui répond, pas la carte. */
.carte-accueil .apercu {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--texte-doux);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carte-accueil .bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.carte-accueil .lecteurs {
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--texte-faible);
}

/* --- Bande défilante (seconde rangée) ------------------------------------
   Volontairement PAS un carrousel : rien ne tourne tout seul, rien n'est
   masqué par une minuterie. La bande déborde, on la pousse. Le contenu hors
   écran reste dans le document, donc atteignable au clavier, aux lecteurs
   d'écran et à la recherche du navigateur — ce qu'un carrousel perd. */
.bande {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 2px 14px;
  margin: 0 -2px;
  scrollbar-width: thin;
  scrollbar-color: var(--bord-fort) transparent;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.bande::-webkit-scrollbar { height: 6px; }
.bande::-webkit-scrollbar-thumb { background: var(--bord-fort); }
.bande::-webkit-scrollbar-track { background: var(--fond-2); }

.bande-element {
  scroll-snap-align: start;
  /* Une largeur de base qui se réduit sur écran étroit : deux tiers de la
     colonne, pour que la carte suivante dépasse et se voie. */
  flex: 0 0 clamp(220px, 68%, 300px);
  display: flex;
}
.bande-element .carte-accueil { min-height: 138px; }

/* --- Résultats de recherche ---------------------------------------------- */
.resultats { margin-top: 24px; display: grid; gap: 14px; }
.resultat {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--bord-fort);
  padding: 22px 24px;
  cursor: pointer;
  font-family: var(--police);
  color: inherit;
  transition: background .14s, border-color .14s;
}
.resultat:hover { background: var(--fond-3); }
.resultat:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.resultat.gr-haute { border-left-color: var(--rouge); }
.resultat.gr-moyenne { border-left-color: var(--ambre-sourd); }

/* La QUESTION en tête, grande : c'est ce que l'agent scanne pour reconnaître sa
   situation. Tout le reste n'est lu qu'après l'avoir reconnue. */
.resultat .situation {
  font-family: var(--police-titre);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--texte);
}
/* La RÉPONSE, juste dessous : elle suffit très souvent, sans ouvrir la fiche. */
.resultat .extrait {
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte-doux);
  margin: 0;
  /* La carte peut s'étendre, la ligne non : au-delà, l'œil perd le début de la
     ligne suivante. C'est le texte qu'on borne, jamais le bloc. */
  max-width: 78ch;
}
.resultat .meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }

/* Voisines à distinguer, montrées AVEC le résultat : si l'agent doit cliquer
   pour découvrir qu'une autre règle existe, il ne le fera pas. */
.confusion {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bord);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ambre);
}
.confusion::before {
  content: '▲';
  font-size: 10px;
  margin-right: 7px;
  vertical-align: 1px;
}

/* --- Écran vide ----------------------------------------------------------- */
.vide { text-align: center; padding: 56px 20px; color: var(--texte-faible); }
.vide .gros {
  font-family: var(--police-titre);
  font-size: clamp(26px, 5.5vw, 34px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte);
  margin: 0 0 10px;
}
.vide p { max-width: 44ch; margin-left: auto; margin-right: auto; font-size: 16px; }
.vide .exemples { justify-content: center; margin-top: 24px; }

/* --- Fiche ---------------------------------------------------------------- */
.fiche { display: block; }

/* --- Sommaire de fiche ---------------------------------------------------
   Deux dispositions pour un seul balisage, parce que le geste diffère :
   - TÉLÉPHONE : une rangée qu'on balaie du pouce, collée sous la recherche.
   - GRAND ÉCRAN : une colonne dans la marge gauche, jusque-là vide. */
.sommaire {
  position: sticky;
  top: var(--sous-barres);
  z-index: 10;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0;
  margin-bottom: 6px;
  background: var(--fond);
  border-bottom: 1px solid var(--bord);
  /* Masque le débordement latéral sans couper net : le dégradé indique qu'il y a
     encore des éléments hors écran. */
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 24px), transparent 100%);
  scrollbar-width: none;
}
.sommaire::-webkit-scrollbar { display: none; }
.lien-somm {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  font-family: var(--police-titre);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--bord);
  color: var(--texte-doux);
  cursor: pointer;
  transition: color .14s, border-color .14s;
}
.lien-somm .rang {
  font-family: var(--police-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--texte-faible);
  margin-right: 8px;
}
.lien-somm.actif .rang { color: var(--ambre); }
.lien-somm:hover { color: var(--texte); border-color: var(--bord-fort); }
.lien-somm.actif { color: var(--ambre); border-color: var(--ambre-sourd); background: var(--ambre-fond); }

/* --- Voisines ------------------------------------------------------------- */
.voisines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.voisine {
  font-size: 14px;
  padding: 9px 13px;
  background: transparent;
  border: 1px solid #4a3510;
  color: var(--ambre);
  cursor: pointer;
  font-family: var(--police);
  text-align: left;
  transition: background .14s;
}
.voisine:hover { background: var(--ambre-fond); }
.voisine::before { content: '▲ '; font-size: 9px; vertical-align: 2px; }

/* --- Tête de fiche -------------------------------------------------------- */
/*
 * TÊTE DE FICHE — la question, en grand, et rien qui la concurrence.
 *
 * C'est ce que l'agent compare à sa situation réelle avant de lire quoi que ce soit.
 * Le filet hachuré la ferme par le bas : seuil franchi, la réponse commence.
 */
.fiche-tete { padding: 28px 0 0; }
.fiche-tete h1 {
  font-size: clamp(29px, 6.8vw, 44px);
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.06;
}
.fiche-tete .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fiche-tete::after {
  content: '';
  display: block;
  height: 8px;
  margin-top: 20px;
  background-image: var(--hachures);
  opacity: .45;
}

/*
 * LA RÉPONSE — le bloc le plus important du site.
 *
 * Encadré de hachures en haut : c'est le seuil, ce qui dit « ça commence ici ».
 * Corps plus grand que le reste, sur fond distinct : dans neuf cas sur dix,
 * l'agent ne lira que ça, et il faut que ce soit suffisant.
 */
.reponse {
  position: relative;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-left: 5px solid var(--ambre);
  padding: 30px 30px 28px;
  margin: 24px 0 36px;
  font-size: 20.5px;
  line-height: 1.55;
}
/* Étiquette en incrustation sur le bord haut : on sait ce qu'on lit avant de lire. */
.reponse::before {
  content: 'LA RÉPONSE';
  position: absolute;
  top: -9px;
  left: 24px;
  padding: 0 9px;
  background: var(--fond);
  font-family: var(--police-titre);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ambre);
}
/* Repère d'angle bas-droite, comme sur les cartes. */
.reponse::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--ambre-sourd);
  border-bottom: 2px solid var(--ambre-sourd);
}
.reponse strong { color: var(--texte); font-weight: 800; }
.reponse p:first-child strong:first-child { color: var(--ambre); }
.reponse p { margin: 0 0 12px; }
.reponse p:last-child { margin-bottom: 0; }

/* --- Sections de fiche ---------------------------------------------------- */
.section { margin: 34px 0; }
/*
 * TITRE DE SECTION — rang en cartouche, libellé, filet jusqu'au bord.
 *
 * Le rang vient du plan de lecture, pas du fichier : un agent qui arrive au milieu
 * d'une fiche par un lien du sommaire sait immédiatement ce qu'il a sauté.
 */
.section > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--bord);
}
.section > h2 .rang {
  flex: 0 0 auto;
  font-family: var(--police-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--texte-faible);
  padding: 2px 6px;
  border: 1px solid var(--bord);
}
/* Les deux sections qui exposent l'agent se signalent avant d'être lues :
   cartouche plein, pas seulement un titre coloré. */
.section.risque > h2 { color: var(--rouge); border-bottom-color: #4a1f19; }
.section.risque > h2 .rang { color: #170e00; background: var(--rouge); border-color: var(--rouge); }
.section.limite > h2 { color: var(--ambre); border-bottom-color: #4a3510; }
.section.limite > h2 .rang { color: #170e00; background: var(--ambre); border-color: var(--ambre); }

.section p { margin: 0 0 15px; }
.section p strong { color: var(--texte); font-weight: 700; }
.section ul { margin: 0 0 15px; padding-left: 24px; }
.section ul li::marker { color: var(--ambre-sourd); }
.section li { margin-bottom: 12px; }

/*
 * CONSIGNE NUMÉROTÉE — le compteur devient un repère, pas une puce.
 *
 * « Ce que tu fais » est la seule partie qu'on suit dans l'ordre, souvent en
 * situation. Un numéro en cartouche se retrouve d'un coup d'œil quand on relève
 * les yeux entre deux points ; un chiffre suivi d'un point se perd dans le texte.
 */
.section ol {
  list-style: none;
  counter-reset: consigne;
  margin: 0 0 15px;
  padding-left: 0;
}
.section ol > li {
  counter-increment: consigne;
  position: relative;
  padding-left: 44px;
  margin-bottom: 14px;
}
.section ol > li::before {
  content: counter(consigne, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  text-align: center;
  font-family: var(--police-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  color: var(--ambre);
  border: 1px solid var(--ambre-sourd);
}
.section table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.section th, .section td { border: 1px solid var(--bord); padding: 10px 13px; text-align: left; vertical-align: top; }
.section th {
  background: var(--fond-3);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/*
 * TEXTE OFFICIEL — il ne ressemble à rien d'autre sur le site.
 *
 * Fond plus sombre, filet à gauche, référence et version en mono : c'est une
 * PIÈCE, pas une explication. L'agent doit voir au premier coup d'œil que ces
 * mots ne sont pas les nôtres.
 */
.texte-officiel {
  background: var(--fond);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--bord-fort);
  margin: 0 0 16px;
}
.texte-officiel .entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 12px;
  padding: 11px 16px;
  background: var(--fond-3);
  border-bottom: 1px solid var(--bord);
}
.texte-officiel .ref { font-family: var(--police-mono); font-weight: 700; font-size: 13px; color: var(--ambre); }
.texte-officiel .titre-texte { font-size: 13px; color: var(--texte-doux); }
.texte-officiel .version { font-family: var(--police-mono); font-size: 11px; color: var(--texte-faible); margin-left: auto; }
.texte-officiel .corps {
  padding: 16px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--texte-doux);
  white-space: pre-wrap;
}
.texte-officiel .indispo { padding: 16px; font-size: 14px; color: var(--texte-faible); margin: 0; }

/* Citation dans le corps d'une fiche : même langage, en plus léger. */
.section blockquote {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--fond-2);
  border-left: 3px solid var(--ambre-sourd);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte-doux);
}
.section blockquote p:last-child { margin-bottom: 0; }

/* Pied de fiche : d'où vient l'information, qui l'a relue, comment la signaler. */
.tracabilite {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--bord);
  font-size: 13px;
  color: var(--texte-faible);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

/* --- Écran d'entrée (connexion / inscription) ----------------------------- */
.entree { max-width: 440px; margin: 0 auto; padding: 56px 16px 80px; }
.entree .marque-grande {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(38px, 11vw, 54px);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 12px;
  color: var(--texte);
}
/* Filet hachuré sous la marque : le seuil d'entrée. */
.entree .marque-grande::after {
  content: '';
  display: block;
  height: 8px;
  margin: 16px auto 0;
  max-width: 180px;
  background-image: var(--hachures);
  opacity: .6;
}
.entree .accroche { text-align: center; color: var(--texte-doux); margin: 0 0 34px; font-size: 16px; }

.onglets { display: flex; gap: 0; margin-bottom: 26px; border-bottom: 1px solid var(--bord); }
.onglet {
  flex: 1;
  min-height: var(--cible);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--texte-faible);
  font-family: var(--police-titre);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .14s, border-color .14s;
}
.onglet:hover { color: var(--texte-doux); }
.onglet[aria-selected='true'] { color: var(--ambre); border-bottom-color: var(--ambre); }

/* Code de secours : montré UNE fois, jamais réaffiché. La présentation doit
   dire « recopie-le maintenant », pas « tu le retrouveras ». */
.code-secours {
  font-family: var(--police-mono);
  font-weight: 700;
  font-size: clamp(19px, 5.4vw, 25px);
  letter-spacing: .1em;
  text-align: center;
  padding: 20px 14px;
  margin: 18px 0;
  background: var(--fond);
  border: 1px solid var(--ambre-sourd);
  color: var(--ambre);
  word-break: break-all;
}

/* --- Écran de vérification ------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat { background: var(--fond-2); border: 1px solid var(--bord); border-top: 3px solid var(--bord-fort); padding: 16px 18px; }
.stat .valeur { font-family: var(--police-titre); font-size: 32px; font-weight: 700; line-height: 1; color: var(--texte); }
.stat .libelle {
  font-family: var(--police-titre);
  font-size: 11px;
  color: var(--texte-faible);
  margin-top: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.stat.alerte-rouge { border-top-color: var(--rouge); }
.stat.alerte-rouge .valeur { color: var(--rouge); }
.stat.alerte-ambre { border-top-color: var(--ambre); }
.stat.alerte-ambre .valeur { color: var(--ambre); }

.liste { display: grid; gap: 10px; }
.ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 15px 17px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--bord-fort);
}
.ligne .principal { flex: 1; min-width: 200px; }
.ligne .principal strong { color: var(--texte); font-weight: 600; }
.ligne .secondaire { font-size: 13px; color: var(--texte-faible); }

/*
 * ANCRES — toute cible doit dégager la hauteur des barres collées (bandeau +
 * recherche + sommaire). Sans cette marge, un saut vers une section la place
 * SOUS ces barres : l'agent atterrit sur un titre invisible et croit que le
 * lien ne marche pas.
 */
[id='reponse'], [id='faire'], [id='limite'], [id='risque'], [id='texte'] {
  scroll-margin-top: calc(var(--sous-barres) + var(--h-sommaire) + 12px);
}

@media (min-width: 900px) {
  body { font-size: 17.5px; }
  .wrap { padding-bottom: 120px; }

  /* Le sommaire quitte le flux et occupe la marge gauche, jusque-là vide. */
  .fiche {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  /*
   * SEUL le corps de fiche est bridé, parce que c'est le seul texte long du site.
   * Les cartes, la recherche et les résultats occupent toute la largeur : leurs
   * lignes sont courtes par construction, rien ne justifiait de les enfermer dans
   * la contrainte de la fiche.
   */
  .fiche-corps { max-width: var(--max-lecture); }
  .sommaire {
    position: sticky;
    top: calc(var(--sous-barres) + 16px);
    flex-direction: column;
    gap: 0;
    overflow: visible;
    mask-image: none;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    border-left: 1px solid var(--bord);
  }
  .lien-somm {
    border: 0;
    border-left: 3px solid transparent;
    margin-left: -1px;
    padding: 12px 15px;
    text-align: left;
    white-space: normal;
    min-height: 0;
  }
  .lien-somm:hover { background: var(--fond-2); border-left-color: var(--bord-fort); }
  .lien-somm.actif { background: transparent; border-left-color: var(--ambre); color: var(--ambre); }

  .bande { mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%); }
  .bande-element { flex: 0 0 clamp(240px, 34%, 300px); }

  [id='reponse'], [id='faire'], [id='limite'], [id='risque'], [id='texte'] {
    scroll-margin-top: calc(var(--sous-barres) + 16px);
  }
}

/* ==========================================================================
   RESPONSIVE — les trois moments où la mise en page doit changer d'avis
   --------------------------------------------------------------------------
   Le reste s'adapte tout seul (grilles auto-fit, largeurs relatives). Ces
   règles ne traitent que ce qu'une grille ne peut pas deviner : ce qu'on
   sacrifie quand il n'y a plus de place.
   ========================================================================== */

/* --- Téléphone étroit (≤ 480px) ------------------------------------------
   Le bandeau porte quatre choses pour trois places. On retire le pseudo :
   l'agent sait qui il est, il a besoin du bouton, pas de son nom. */
@media (max-width: 480px) {
  .topbar-in { gap: 8px; padding: 8px 12px; }
  .topbar #pseudo { display: none; }
  .marque { font-size: 16px; letter-spacing: .16em; }
  .btn { padding: 0 14px; font-size: 14px; }
  .btn.discret { padding: 0 9px; }
  .wrap { padding-left: 12px; padding-right: 12px; }

  /* La question reste lisible : on descend d'un cran plutôt que de la laisser
     déborder ou couper un mot en deux. */
  .carte-accueil .situation { font-size: 16.5px; letter-spacing: .02em; }
  .resultat .situation { font-size: 19px; }
  .resultat { padding: 18px 17px; }
  .carte-accueil { padding: 17px 18px; }
  .reponse { padding: 20px 18px; font-size: 17.5px; }

  /* Une bande sur écran étroit doit montrer qu'elle continue : la carte
     suivante dépasse franchement. */
  .bande-element { flex: 0 0 82%; }
}

/* --- Très étroit (≤ 360px) -----------------------------------------------
   Cibles tactiles préservées, mais le confort typographique cède. */
@media (max-width: 360px) {
  body { font-size: 16px; }
  .marque { letter-spacing: .1em; }
  .titre-bloc { font-size: 12px; letter-spacing: .14em; gap: 9px; }
  .exemple { font-size: 13px; }
}

/* --- Grand écran (≥ 1400px) ----------------------------------------------
   Trois colonnes plutôt que quatre : six cartes se rangent alors en deux
   rangées pleines, au lieu de 4 + 2 qui donne une seconde rangée orpheline. */
@media (min-width: 1400px) {
  .grille-accueil { grid-template-columns: repeat(3, 1fr); }
  .bande-element { flex: 0 0 clamp(260px, 24%, 320px); }
}