/* =============================================================================
   Observatoire des refus de délivrance — couche composants PROPRE AU SITE.
   Chargée après commun/theme.css (ep-ui, thème fas-editorial) et
   commun/coquille.css : la base, le focus, l'en-tête, le bandeau d'état, le
   pied, les mentions légales et le mouvement y sont communs aux sites France
   Assos Santé, et ne se redéfinissent pas ici.
   Règles de la charte web ExpectPatient : deux familles (Inter pour ce qui se
   manipule, Georgia pour ce qui se lit), aucune ombre décorative, aucune grille
   de cartes — la profondeur vient des filets et des aplats. Le corail ne porte
   jamais de texte courant (3,35:1) : filets et marques.

   Jetons locaux hors contrat : préfixe x-refus-.
   ENCODAGE DES DONNÉES — motif écrit, exigé par le contrat d'usages :
   les barres d'effectif portent UNE seule série (un comptage) et prennent donc
   la couleur de marque, sans variation ; faire varier leur teinte rejouerait en
   couleur ce que la longueur dit déjà. Seule l'issue est colorée, parce qu'elle
   encode un ÉTAT et non une identité : elle prend les jetons de signal, doublés
   par la forme du repère et par le libellé, jamais la couleur seule.
   ========================================================================== */

:root {
  --x-refus-mesure: 64ch;                                    /* mesure de lecture */
  --x-refus-barre: var(--brand-primary);                     /* effectif, série unique */
  --x-refus-rail: color-mix(in srgb, var(--brand-primary) 9%, transparent);
  --x-refus-selection: color-mix(in srgb, var(--brand-ponctuation) 16%, transparent);
  --x-refus-nav: 48px;                                        /* barre de navigation, accrochée */
  --x-refus-largeur: 1320px;                                  /* colonne des vues : à 1 440 px d'écran,
                                                                 le titre tient sur une ligne et le clip garde sa taille */
}

/* ce qu'on fait défiler jusqu'à soi s'arrête sous la barre de navigation */
html { scroll-padding-top: calc(var(--x-refus-nav) + var(--space-4)); }

h1, h2, h3 { margin: 0; }
h3 { text-wrap: balance; }
a { color: var(--brand-primary); }

/* ---- repères typographiques --------------------------------------------- */
.lede { margin: 0; color: var(--muted); font-size: var(--fs-200); line-height: 1.5; }
.prose {
  margin: 0; max-width: var(--x-refus-mesure);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400); line-height: 1.6;
}
.prose + .prose { margin-top: var(--space-4); }
.prose strong { color: var(--ink); }

/* ---- navigation -------------------------------------------------------------
   L'en-tête, le filet de marque et l'évitement sont dans commun/coquille.css.
   La navigation, propre à l'observatoire, reste accrochée en haut de l'écran :
   avant, elle glissait sous un en-tête collant et disparaissait dès qu'on
   descendait dans une vue. */
.navigation {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: stretch; gap: var(--space-6);
  height: var(--x-refus-nav); padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--paper-bright) 94%, transparent);
  backdrop-filter: blur(12px);
}
/* la barre défile de côté quand les onglets n'y tiennent pas — sur téléphone —,
   et un fondu au bord droit le laisse deviner */
.onglets {
  display: flex; gap: var(--space-8); flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }
.onglets li { display: flex; flex: none; }
.onglet {
  position: relative; display: flex; align-items: center;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  font-size: var(--fs-100); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-out);
}
.onglet::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--brand-primary); transition: right var(--dur-2) var(--ease-io);
}
.onglet:hover { color: var(--ink); }
.onglet[aria-current="page"] { color: var(--brand-primary); }
.onglet[aria-current="page"]::after { right: 0; }
.onglet:focus-visible { outline-offset: -3px; }

/* pas de flex ici : il avalerait les espaces entre le chiffre et la phrase */
.nav-etat {
  align-self: center; flex: none; margin: 0;
  color: var(--muted); font-size: var(--fs-100); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.nav-etat b { display: inline-block; color: var(--brand-primary); font-weight: 700; }
.nav-etat.est-filtre b { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--x-refus-selection); }
/* effacer la sélection depuis la barre accrochée : un clic sur un graphique en
   bas de page pose un filtre, et le bandeau qui permet de l'effacer est loin
   au-dessus, hors de l'écran */
.nav-effacer {
  align-self: center; flex: none; width: 28px; height: 28px;
  margin-left: calc(var(--space-2) - var(--space-6));      /* collé au compteur qu'il remet à zéro */
  display: inline-grid; place-items: center; padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); border-radius: var(--radius-pill);
  background: var(--paper-bright); color: var(--brand-primary); cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-effacer:hover { background: var(--brand-primary); color: var(--paper-bright); }
/* signaler depuis n'importe quelle vue, sans remonter en haut de page */
.nav-appel { align-self: center; flex: none; margin-left: var(--space-4); }
.action-primary.compacte {
  min-height: 32px; padding: 0 var(--space-4); gap: var(--space-2); border-radius: var(--radius-pill);
}

@media (max-width: 760px) {
  .onglets {
    gap: var(--space-6);
    padding-right: 28px;                      /* le dernier onglet sort du fondu */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .navigation { gap: var(--space-4); }
  .nav-effacer { width: 32px; height: 32px; margin-left: calc(var(--space-2) - var(--space-4)); }
  .nav-appel { margin-left: var(--space-3); }
  .action-primary.compacte { padding: 0 var(--space-3); letter-spacing: .06em; }
}
@media (max-width: 560px) {
  /* sur téléphone, la barre porte les onglets et le bouton « Signaler » : le
     compteur ne s'y montre que s'il dit quelque chose, c'est-à-dire sous filtre */
  .nav-etat:not(.est-filtre) { display: none; }
  /* le chiffre à l'œil ; la phrase entière reste lue par les lecteurs d'écran */
  .nav-etat-long, .nav-etat-total {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---- ouverture ------------------------------------------------------------ */
/* Deux colonnes dès qu'il y a la place : le propos à gauche, le clip à droite,
   visible sans défiler, avec l'appel juste dessous. En petite largeur, le clip
   passe JUSTE SOUS LE TITRE, avant le chapeau : placé après, il tombait hors du
   premier écran d'un téléphone. */
.ouverture {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tete" "clip" "suite" "reperes";
  gap: var(--space-6);
  padding: clamp(32px, 5vh, 64px) 0 clamp(32px, 5vh, 56px);
}
.ouverture-tete { grid-area: tete; }
.ouverture-tete .titre { margin-top: var(--space-3); }
.ouverture-suite { grid-area: suite; }
.ouverture .clip { grid-area: clip; }
.ouverture .reperes { grid-area: reperes; }
/* Deux colonnes : le propos à gauche, le clip à droite — et sous le clip les
   repères, sans quoi la colonne de droite s'arrêtait bien avant l'autre. */
@media (min-width: 1080px) {
  .ouverture {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-areas: "tete clip" "suite clip" "suite reperes";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 4vw, 64px); row-gap: var(--space-6);
  }
  .ouverture-suite { align-self: start; }
}
.titre {
  font-size: clamp(var(--fs-800), 5vw, var(--fs-1000));
  font-weight: 600; letter-spacing: -.062em; line-height: .94; color: var(--ink);
}
/* ---- l'appel en tête : ce qu'on demande, avant le reste ------------------------------------------
   Le bouton, l'adresse en clair pour la recopier depuis une projection, et
   l'échéance en note d'attention — un filet corail, qui marque sans porter le
   texte. */
.appel-tete { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-6); }
.appel-ouvert { margin: calc(-1 * var(--space-1)) 0 0; color: var(--ink); font-size: var(--fs-200); font-weight: 600; }
.appel-adresse { margin: 0; max-width: 100%; min-width: 0; color: var(--muted); font-size: var(--fs-200); }
.appel-adresse a { overflow-wrap: anywhere; font-weight: 600; }
.echeance {
  margin: var(--space-1) 0 0; padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 3px solid var(--brand-accent);
  max-width: 52ch; color: var(--ink); font-size: var(--fs-200); line-height: 1.5;
}
.echeance b {
  display: block; color: var(--muted); font-size: var(--fs-100); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}

.titre .suite {
  display: block; margin-top: var(--space-2);
  font-family: Georgia, "Times New Roman", serif; font-size: .66em; font-style: italic;
  font-weight: 400; letter-spacing: -.04em; line-height: 1.08; color: var(--brand-primary);
}
@media (min-width: 1080px) { .ouverture-suite .prose { margin-top: var(--space-6); } }
.reperes {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4);
  margin: var(--space-6) 0 0; padding-top: var(--space-4);
  border-top: 1px solid var(--line-strong); font-size: var(--fs-200); max-width: var(--x-refus-mesure);
}
.reperes dt {
  color: var(--muted); font-size: var(--fs-100); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; padding-top: 2px;
}
.reperes dd { margin: 0; }

/* ---- les vues ---------------------------------------------------------------
   Une colonne centrée, comme les bandes du questionnaire ISTS : sur un grand
   écran, les lignes et les graphiques s'étiraient sans rien dire de plus. */
.vue {
  max-width: calc(var(--x-refus-largeur) + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 7vh, 80px);
}
.vue:focus, .vue :where(h1, h2)[tabindex="-1"]:focus { outline: none; }
#contenu:focus { outline: none; }

/* la tête d'une vue : le fil d'Ariane, le titre, ce que la vue fait */
.tete-vue { padding: clamp(28px, 5vh, 52px) 0 0; }
.tete-vue .intro-vue { margin-top: var(--space-4); }
.tete-bloc { padding-top: clamp(28px, 5vh, 48px); border-top: 1px solid var(--line-strong); }
.tete-bloc .titre-vue { margin-top: var(--space-2); }
.tete-bloc .intro-vue { margin-top: var(--space-4); }
.titre-vue {
  margin: 0; color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-700), 3.4vw, var(--fs-800));
  font-weight: 400; letter-spacing: -.045em; line-height: 1.02;
}
.tete-vue .titre-vue { margin-top: var(--space-3); }
.tete-vue .lede { margin-top: var(--space-3); }

/* le fil d'Ariane a la voix d'un surtitre : il dit où l'on est, en petit */
.ariane ol {
  display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase;
}
.ariane li { display: inline-flex; align-items: baseline; }
.ariane li + li::before {
  content: ""; align-self: center; width: 1px; height: .95em; margin: 0 .85em;
  background: var(--line-strong); transform: rotate(22deg);
}
.ariane a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ariane a:hover { color: var(--brand-primary); border-bottom-color: currentColor; }
.ariane [aria-current="page"] { color: var(--brand-primary); }

/* au bas d'une vue, la précédente et la suivante — des filets, pas des cartes */
.suite-vues {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(40px, 7vh, 72px); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
/* après l'appel à signaler, son filet du bas sert de filet du haut */
.appel + .suite-vues { margin-top: 0; border-top: 0; }
.suite {
  display: grid; gap: var(--space-2); align-content: start; min-width: 0;
  padding: var(--space-6) 0; color: inherit; text-decoration: none;
}
.suite-suivante { grid-column: 2; padding-left: var(--space-6); text-align: right; justify-items: end; }
.suite-precedente + .suite-suivante { border-left: 1px solid var(--line); }
.suite-precedente { padding-right: var(--space-6); }
.suite-titre {
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500);
  letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
  transition: color var(--dur-1) var(--ease-out);
}
.suite-fleche { display: inline-block; color: var(--brand-primary); transition: transform var(--dur-2) var(--ease-out); }
.suite-precedente .suite-fleche { margin-right: .4em; }
.suite-suivante .suite-fleche { margin-left: .4em; }
.suite:hover .suite-titre { color: var(--brand-primary); }
.suite-suivante:hover .suite-fleche { transform: translateX(4px); }
.suite-precedente:hover .suite-fleche { transform: translateX(-4px); }
@media (max-width: 700px) {
  .suite-vues { grid-template-columns: 1fr; }
  .suite-suivante { grid-column: 1; padding-left: 0; }
  .suite-precedente + .suite-suivante { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- contexte et enjeux : quatre rubriques, un texte court et une forme chacune -----------------
   Le texte à gauche, la forme à droite — le gabarit du kit web. La forme
   n'illustre pas : elle dit la phrase de la rubrique. Le périmètre de la règle
   s'élargit ; le refus déplace la personne de lieu en lieu ; la même règle ouvre
   ou ferme selon l'officine ; le registre ne voit qu'une part de ce qui se passe.
   Des filets et des aplats, aucune carte ; le corail ne marque que le refus et
   ne porte aucun texte. */
.contexte { padding-top: clamp(28px, 5vh, 48px); border-top: 1px solid var(--line-strong); }
.contexte .titre-vue { margin: var(--space-2) 0 var(--space-8); }

.rubrique {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "texte forme" "pied forme"; grid-template-rows: auto 1fr;
  gap: 0 clamp(32px, 5vw, 80px); align-items: start;
  padding: clamp(28px, 4vh, 44px) 0; border-top: 1px solid var(--line);
}
.rubrique:first-child { padding-top: 0; border-top: 0; }
.rubrique--visibilite { border-top-color: var(--line-strong); }
.rubrique-texte { grid-area: texte; min-width: 0; }
.rubrique > .forme { grid-area: forme; }
.rubrique-pied { grid-area: pied; min-width: 0; }
.rubrique-quand { font-weight: 600; letter-spacing: .04em; text-transform: none; }
.rubrique-texte h3 {
  margin: var(--space-2) 0 var(--space-4); color: var(--ink);
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-600);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.12;
}
.rubrique-prose {
  margin: 0 0 var(--space-3); max-width: 46ch;
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-300); line-height: 1.6;
}
.rubrique-liste { margin: 0 0 var(--space-4); padding: 0; list-style: none; max-width: 46ch; }
.rubrique-liste li {
  position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-top: 1px solid var(--line); font-size: var(--fs-200); line-height: 1.45;
}
.rubrique-liste li::before { content: "—"; position: absolute; left: 0; color: var(--brand-accent); }
/* en regard de l'observation, ce que le registre a recueilli : un nombre, son
   total et sa date, lus dans les données */
.rubrique-registre {
  display: grid; gap: var(--space-1); max-width: 46ch;
  margin: var(--space-2) 0 0; padding: var(--space-3) 0;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.rubrique-registre-valeur { font-size: var(--fs-200); line-height: 1.4; }
.rubrique-registre-valeur b {
  margin-right: .1em; color: var(--brand-primary);
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-600); font-weight: 400;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.contexte-source { max-width: 52ch; margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--fs-100); line-height: 1.5; }

/* ce que les formes partagent */
.forme { margin: 0; min-width: 0; }
.forme-libelle {
  margin: 0 0 var(--space-2); color: var(--muted);
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.forme-these {
  margin: 0; max-width: 42ch; color: var(--brand-primary);
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500); font-style: italic;
  letter-spacing: -.02em; line-height: 1.3; text-wrap: balance;
}
.forme-note {
  display: block; margin: var(--space-3) 0 0; color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif; font-size: var(--fs-100);
  font-style: normal; letter-spacing: 0; line-height: 1.5;
}

/* la règle — le périmètre s'élargit : ce qui était visé s'ouvre sur « tous les médicaments » */
.glissement {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(40px, 6vw, 88px) minmax(0, 1.05fr);
  min-height: 230px;
}
.glissement-vises { align-self: center; min-width: 0; }
.glissement-vises ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.glissement-vises li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-200); line-height: 1.35; }
.glissement-coin, .glissement-applique { background: color-mix(in srgb, var(--brand-primary) 9%, transparent); }
.glissement-coin { margin-right: -1px; clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 78%); }
.glissement-applique { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--space-6); }
.glissement-tous {
  margin: 0; color: var(--brand-primary);
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(var(--fs-600), 3.2vw, var(--fs-800));
  letter-spacing: -.05em; line-height: .98; text-wrap: balance;
}
.regle-bords { margin: var(--space-6) 0 0; }
.regle-bords > div {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--line);
}
.regle-bords dt { padding-top: 2px; color: var(--brand-primary); font-size: var(--fs-100); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.regle-bords dd { margin: 0; font-size: var(--fs-200); line-height: 1.5; }

/* sur le terrain — le déplacement : une ligne de lieu en lieu, pointillée quand
   elle sort du circuit ; le comptoir, où le refus a lieu, marqué en corail.
   Les lieux sont à égale distance : la ligne dit un ordre, pas un éloignement */
.deplacement {
  display: grid; grid-template-columns: var(--colonnes, 1fr); grid-template-rows: auto auto;
  margin: var(--space-6) 0 0; padding: 0; list-style: none;
}
.troncon { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.troncon-nom {
  margin: 0 var(--space-4) var(--space-4) 0; align-self: end; color: var(--muted);
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase;
}
.troncon-etapes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.lieu {
  position: relative; min-width: 0; padding: var(--space-6) var(--space-4) 0 0;
  border-top: 2px solid var(--brand-primary);
}
.troncon--hors .lieu { border-top: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); }
.lieu::before {
  content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-primary); box-shadow: 0 0 0 4px var(--paper);   /* une réserve dans la ligne, pas une ombre */
}
.lieu--refus::before { background: var(--brand-accent); }
.troncon--hors .lieu::before { background: var(--paper); border: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.lieu b {
  display: block; color: var(--ink); font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400); font-weight: 400; line-height: 1.2; letter-spacing: -.01em;
}
.lieu span { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--fs-100); line-height: 1.45; }
.forme-parcours .forme-note { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--line); }

/* ce qui se joue — la bifurcation : un même départ, deux officines, deux issues.
   La branche du refus bute sur une barre corail ; celle de la délivrance continue */
.bifurcation { display: grid; grid-template-columns: minmax(0, 12rem) clamp(40px, 6vw, 72px) minmax(0, 1fr); margin-bottom: var(--space-4); }
.bif-depart {
  align-self: center; margin: 0; padding-right: var(--space-3); color: var(--ink);
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-400); line-height: 1.35; text-wrap: balance;
}
.bif-lien { position: relative; }
.bif-lien::before {
  content: ""; position: absolute; left: 0; width: 50%; top: calc(50% - 1px);
  border-top: 2px solid var(--brand-primary); transform-origin: left center;
}
.bif-lien::after {
  content: ""; position: absolute; left: 50%; right: 0; top: 25%; bottom: 25%;
  border: 2px solid var(--brand-primary); border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.bif-issues { display: grid; grid-template-rows: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.bif-issue { display: flex; align-items: center; gap: var(--space-3); min-height: 84px; padding-left: var(--space-3); }
.bif-issue::before { content: ""; flex: none; box-sizing: border-box; width: 9px; margin-left: calc(-1 * var(--space-3)); }
.bif-issue--refus::before { height: 30px; border-left: 3px solid var(--brand-accent); }
.bif-issue:not(.bif-issue--refus)::before {
  height: 12px; border-left: 9px solid var(--brand-primary);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.bif-icone {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper-bright); color: var(--brand-primary);
}
.bif-icone .ico { width: 18px; height: 18px; }
.bif-texte { min-width: 0; font-size: var(--fs-200); line-height: 1.4; }
.bif-texte b { display: block; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-400); font-weight: 400; }

/* pourquoi un registre — ce qu'il voit, dans ce qu'il ne voit pas : deux cadres
   ouverts, en pointillé, sans nombre ni échelle ; le cadre plein du registre,
   seul à porter un nombre */
.cadre { min-width: 0; }
.cadre--ouvert {
  padding: var(--space-4);
  border: 1.5px dashed color-mix(in srgb, var(--brand-primary) 40%, transparent); border-radius: var(--radius-md);
}
.cadre-nom { max-width: 46ch; margin: 0 0 var(--space-4); }
.cadre-nom b {
  display: block; color: var(--ink); font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400); font-weight: 400; line-height: 1.25;
}
.cadre-nom span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-100); line-height: 1.45; }
.cadre--registre {
  width: fit-content; max-width: 100%; padding: var(--space-3) var(--space-6);
  border: 2px solid var(--brand-primary); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--paper-bright));
}
.cadre-compte { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin: 0; font-size: var(--fs-200); }
.cadre-compte b {
  color: var(--brand-primary); font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-900);
  font-weight: 400; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums;
}
.forme-visibilite > .forme-these { margin-top: var(--space-4); }

@media (max-width: 1000px) {
  .rubrique { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "forme" "pied"; grid-template-rows: auto; }
  .rubrique > .forme { margin-top: var(--space-4); }
  .rubrique-prose, .rubrique-liste, .rubrique-registre { max-width: 62ch; }
}
/* sur téléphone, la ligne du déplacement descend, et le périmètre s'élargit vers le bas */
@media (max-width: 640px) {
  .glissement { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 44px auto; min-height: 0; }
  .glissement-coin { clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
  .glissement-applique { padding: var(--space-4); }
  .regle-bords > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }

  .deplacement { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .troncon { display: block; grid-row: auto; }
  /* la ligne passe aussi le long du nom d'un tronçon : coupée là, elle dirait une
     rupture — précisément ce que le refus produit rarement */
  .troncon-nom {
    margin: 0 0 0 6px; padding: var(--space-2) 0 var(--space-3) var(--space-6);
    border-left: 2px solid var(--brand-primary);
  }
  .troncon--hors .troncon-nom { border-left: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); }
  .troncon:first-child .troncon-nom { padding-top: 0; border-left-color: transparent; }
  .troncon-etapes { grid-auto-flow: row; }
  .lieu { margin-left: 6px; padding: 0 0 var(--space-4) var(--space-6); border-top: 0; border-left: 2px solid var(--brand-primary); }
  .troncon--hors .lieu { border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); }
  .lieu::before { top: 2px; left: -8px; }
}
@media (max-width: 560px) {
  .bifurcation { grid-template-columns: minmax(0, 7.5rem) 28px minmax(0, 1fr); }
  .bif-depart { font-size: var(--fs-200); }
  .bif-icone { width: 30px; height: 30px; }
  .bif-icone .ico { width: 15px; height: 15px; }
  .bif-texte b { font-size: var(--fs-300); }
}

/* ---- appel à contribution --------------------------------------------------- */
.appel {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-6);
  align-items: center; padding: var(--space-6) 0;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.appel h2 {
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-600);
  font-weight: 400; letter-spacing: -.035em; line-height: 1.1; margin-bottom: var(--space-2);
}
.appel p { margin: 0; color: var(--muted); font-size: var(--fs-200); max-width: 58ch; }
.appel-ouvert-tous { margin-top: var(--space-3) !important; padding-left: var(--space-4); border-left: 3px solid var(--brand-accent); }
.action-primary {
  min-height: 46px; display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-6); border: 0; border-radius: var(--radius-sm);
  background: var(--brand-primary); color: var(--paper-bright); cursor: pointer;
  font: inherit; font-size: var(--fs-100); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-io), transform var(--dur-2) var(--ease-out);
}
.action-primary:hover { background: color-mix(in srgb, var(--brand-primary) 82%, #000); transform: translateY(-2px); }
.action-primary[aria-disabled="true"] { background: var(--muted); cursor: not-allowed; transform: none; }
.todo {
  display: inline-block; margin-top: var(--space-3); padding: 3px var(--space-2);
  border: 1px dashed var(--brand-accent); border-radius: var(--radius-sm);
  color: var(--brand-primary); font-size: var(--fs-100); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 760px) { .appel { grid-template-columns: 1fr; } }

/* ---- trois colonnes à filets ------------------------------------------------- */
.colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.colonnes > * { padding: 0 var(--space-6); border-left: 1px solid var(--line); }
.colonnes > :first-child { padding-left: 0; border-left: 0; }
.chiffre {
  display: block; color: var(--brand-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-800), 5vw, var(--fs-900));
  font-weight: 400; letter-spacing: -.065em; line-height: .94;
}
.chiffre .chiffre-valeur { display: inline-block; font-variant-numeric: tabular-nums; }
.chiffre .unite { font-size: .42em; letter-spacing: -.02em; color: var(--muted); }
.chiffre-label {
  display: block; margin: var(--space-3) 0 0; font-size: var(--fs-100); font-weight: 800;
  letter-spacing: .08em; line-height: 1.45; text-transform: uppercase;
}
.chiffre-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--fs-200); }
@media (max-width: 860px) {
  .colonnes { grid-template-columns: 1fr; }
  .colonnes > * { padding: var(--space-6) 0; border-left: 0; border-top: 1px solid var(--line); }
  .colonnes > :first-child { padding-top: 0; border-top: 0; }
}

/* ---- filtres ------------------------------------------------------------------ */
/* accrochés sous la barre de navigation ; sur téléphone, quatre listes empilées
   mangeraient l'écran : ils défilent avec la page */
.filtres {
  position: sticky; top: var(--x-refus-nav); z-index: 12;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4);
  padding: var(--space-3) 0; margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper);
}
@media (max-width: 760px) { .filtres { position: static; } }
.filtre { display: grid; gap: 4px; }
.filtre label {
  color: var(--muted); font-size: var(--fs-100); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.filtre select {
  min-height: 40px; padding: 0 var(--space-3); font: inherit; font-size: var(--fs-200);
  color: var(--ink); background: var(--paper-bright);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.filtres-etat { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.action-secondary {
  min-height: 40px; display: inline-flex; align-items: center; padding: var(--space-2) 2px;
  border: 0; border-bottom: 1px solid var(--line-strong); background: transparent;
  color: var(--ink); cursor: pointer; font: inherit; font-size: var(--fs-100); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.action-secondary:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.action-secondary[hidden] { display: none; }

/* ---- graphiques : listes à filets ---------------------------------------------- */
.graphiques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.graphique { margin: 0; padding: var(--space-6) var(--space-6) var(--space-4); border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 0; }
.graphique:nth-child(2n+1) { padding-left: 0; border-left: 0; }
.graphique.pleine { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.colonnes + .graphique { margin-top: 40px; }
.questions + .graphique { border-top: 0; padding-top: 0; }
.graphique h3 {
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.15;
}
.graphique .sous { margin: 2px 0 var(--space-4); color: var(--muted); font-size: var(--fs-200); }
.graphique .note { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-100); line-height: 1.5; }
@media (max-width: 900px) {
  .graphiques { grid-template-columns: 1fr; }
  .graphique { padding-left: 0; border-left: 0; }
}

.profil { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.profil-ligne {
  display: grid; grid-template-columns: minmax(0, 13rem) 1fr auto; align-items: center;
  gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line);
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: opacity var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}
.profil-ligne:first-child { border-top: 0; }
.profil-ligne .nom { font-size: var(--fs-200); min-width: 0; }
.profil-ligne .nom .marque { display: inline-flex; align-items: center; gap: var(--space-2); }
.profil-ligne .barre { position: relative; height: 12px; background: var(--x-refus-rail); border-radius: 2px; overflow: hidden; }
.profil-ligne .barre i {
  display: block; height: 100%; border-radius: 0 2px 2px 0;
  background: var(--x-refus-barre); transform-origin: left center;
}
.profil-ligne .compte {
  font-size: var(--fs-200); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 2.4ch; text-align: right;
}
.profil-ligne[aria-pressed="true"] { background: var(--x-refus-selection); }
.profil-ligne[aria-pressed="true"] .nom { font-weight: 700; }
@media (max-width: 560px) {
  .profil-ligne { grid-template-columns: 1fr auto; grid-template-areas: "nom compte" "barre barre"; gap: var(--space-2) var(--space-4); }
  .profil-ligne .nom { grid-area: nom; } .profil-ligne .compte { grid-area: compte; } .profil-ligne .barre { grid-area: barre; }
}

/* repères d'issue : la forme double la couleur */
.repere { width: 11px; height: 11px; flex: none; }
.repere.rond { border-radius: 50%; }
.repere.losange { transform: rotate(45deg); }
.repere.triangle { width: 0; height: 0; background: none !important; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid currentColor; }
.g-delai      { color: var(--signal-succes);    background: var(--signal-succes); }
.g-interrompu { color: var(--signal-attention); background: var(--signal-attention); }
.g-rupture    { color: var(--signal-erreur);    background: var(--signal-erreur); }
.g-nonresolue { color: var(--signal-vigilance); background: var(--signal-vigilance); }
.g-inconnu    { color: var(--muted);            background: var(--muted); }
.b-delai i      { background: var(--signal-succes); }
.b-interrompu i { background: var(--signal-attention); }
.b-rupture i    { background: var(--signal-erreur); }
.b-nonresolue i { background: var(--signal-vigilance); }
.b-inconnu i    { background: var(--muted); }

/* ---- champ lexical ---------------------------------------------------------------- */
.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 0; }
.famille { padding: var(--space-6); border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 0; }
.famille h3 { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500); font-weight: 400; letter-spacing: -.03em; }
.famille .glose { margin: 2px 0 var(--space-4); color: var(--muted); font-size: var(--fs-100); }
.nuage { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.mot {
  padding: 2px 4px; border: 0; background: none; font: inherit; color: var(--ink);
  line-height: 1.15; cursor: pointer; border-radius: 3px;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.mot:hover { color: var(--brand-primary); background: var(--surface-tint); }
.mot[aria-pressed="true"] { background: var(--x-refus-selection); color: var(--brand-primary); font-weight: 700; }
.mot .n { font-size: var(--fs-100); color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.mot-1 { font-size: var(--fs-200); color: var(--muted); }
.mot-2 { font-size: var(--fs-300); }
.mot-3 { font-size: var(--fs-500); }
.mot-4 { font-size: var(--fs-600); font-family: Georgia, "Times New Roman", serif; }
.mot-5 { font-size: var(--fs-700); font-family: Georgia, "Times New Roman", serif; color: var(--brand-primary); letter-spacing: -.03em; }

/* ---- récits ------------------------------------------------------------------------ */
.barre-recherche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-6); }
.champ { display: grid; gap: 4px; flex: 1 1 22rem; }
.champ label { color: var(--muted); font-size: var(--fs-100); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.champ input {
  min-height: 44px; padding: 0 var(--space-3); font: inherit; font-size: var(--fs-300);
  color: var(--ink); background: var(--paper-bright);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.bascule { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-200); cursor: pointer; }
.bascule input { width: 18px; height: 18px; accent-color: var(--brand-primary); cursor: pointer; }
.bascule .aide { display: block; color: var(--muted); font-size: var(--fs-100); max-width: 44ch; }

.recits { display: grid; gap: 0; }
.recit { padding: var(--space-6) 0; border-top: 1px solid var(--line); display: grid; gap: var(--space-3); }
.recit:last-child { border-bottom: 1px solid var(--line); }
.recit-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.recit-tete .rang { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500); color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.recit-tete .lieu { font-size: var(--fs-200); font-weight: 700; }
.recit-tete .sep { color: var(--line-strong); }
.recit-tete .meta { font-size: var(--fs-200); color: var(--muted); }
.recit .texte { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-400); line-height: 1.62; max-width: var(--x-refus-mesure); margin: 0; }
.recit .texte mark { background: var(--x-refus-selection); color: inherit; padding: 0 2px; border-radius: 2px; }
.recit .texte mark.mot {
  background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  box-shadow: inset 0 -2px 0 var(--brand-primary); font-weight: 600;
}
.recit .occurrences {
  margin-left: auto; padding: 2px var(--space-3); border-radius: var(--radius-pill);
  background: var(--x-refus-selection); color: var(--brand-primary);
  font-size: var(--fs-100); font-weight: 700; white-space: nowrap;
}
.recit .texte .caviarde { color: var(--muted); border-bottom: 1px dotted var(--line-strong); }
.etiquettes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
td .repere { display: inline-block; margin-right: var(--space-2); }
.etiq-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-100); color: var(--ink); white-space: nowrap;
}
.vide { margin: 0; padding: var(--space-8) 0; color: var(--muted); font-size: var(--fs-200); text-align: center; border-top: 1px solid var(--line); }

/* ---- tableau ------------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--line-strong); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th {
  padding: var(--space-3); border-bottom: 1px solid var(--line-strong); color: var(--muted);
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .08em; text-align: left;
  text-transform: uppercase; white-space: nowrap; background: var(--paper); position: sticky; top: 0;
}
td { padding: var(--space-3); border-bottom: 1px solid var(--line); font-size: var(--fs-200); vertical-align: top; white-space: nowrap; }

/* ---- méthode -------------------------------------------------------------------------- */
.angles { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: var(--x-refus-mesure); }
.angles li { padding: var(--space-3) 0 var(--space-3) var(--space-6); border-top: 1px solid var(--line); font-size: var(--fs-200); position: relative; }
.angles li::before { content: "—"; position: absolute; left: 0; color: var(--brand-accent); }
.avertissement { margin-top: var(--space-8); padding-left: var(--space-4); border-left: 3px solid var(--brand-accent); }
.avertissement h3 { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500); font-weight: 400; margin-bottom: var(--space-2); }
.avertissement p { margin: 0; font-size: var(--fs-200); color: var(--muted); max-width: var(--x-refus-mesure); }

/* ---- pied : la coquille commune porte le pied ; l'observatoire y ajoute la date
   d'arrêt des données */
.pied-maj { color: var(--muted); font-size: var(--fs-200); }
.pied-maj b { color: var(--ink); font-weight: 700; }

.intro-vue {
  margin: 0 0 var(--space-8); max-width: 72ch;
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500);
  line-height: 1.45; color: var(--ink); letter-spacing: -.01em;
}
.sous-section { padding-top: var(--space-8); margin-top: var(--space-8); border-top: 1px solid var(--line-strong); }
.sous-section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.titre-sous {
  margin: 0 0 var(--space-4); font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600); font-weight: 400; letter-spacing: -.035em; line-height: 1.1;
}
.note-bloc {
  margin: var(--space-6) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-100); line-height: 1.55; max-width: 80ch;
}

/* ---- filtres actifs, en pastilles retirables ---------------------------------------------- */
.jetons-filtres { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; }
/* en tête de la vue d'ensemble : ce qui est sélectionné, et le retour aux onze
   situations — un filet, pas un encadré */
.selection-active {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-8); padding: var(--space-3) 0;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.selection-active .jetons-filtres { width: auto; }
.selection-active .action-secondary { margin-left: auto; }
.jeton-filtre {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px var(--space-3); border: 1px solid var(--brand-primary); border-radius: var(--radius-pill);
  background: var(--x-refus-selection); color: var(--brand-primary);
  font: inherit; font-size: var(--fs-100); font-weight: 700; cursor: pointer;
}
.jeton-filtre .x { font-weight: 400; opacity: .7; }
.jeton-filtre:hover { background: color-mix(in srgb, var(--brand-primary) 16%, transparent); }

/* ---- pastilles : une situation = une marque ------------------------------------------------ */
.pastilles-groupes { display: grid; gap: var(--space-6); }
.pastilles-groupe { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: var(--space-4); align-items: start; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.pastilles-groupe .titre-g { font-size: var(--fs-200); line-height: 1.35; }
.pastilles-groupe .titre-g .repere { display: inline-block; margin-right: var(--space-2); vertical-align: middle; }
.pastilles-groupe .titre-g .n {
  display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
}
.pastilles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pastille {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--paper-bright);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}
.pastille:hover, .pastille:focus-visible { transform: translateY(-3px) scale(1.08); }
.p-delai { background: var(--signal-succes); }
.p-interrompu { background: var(--signal-attention); }
.p-rupture { background: var(--signal-erreur); }
.p-nonresolue { background: var(--signal-vigilance); color: var(--ink); }
.p-inconnu { background: var(--muted); }
@media (max-width: 720px) {
  .pastilles-groupe { grid-template-columns: 1fr; }
}

/* ---- parcours (rubans) ---------------------------------------------------------------------- */
.parcours { width: 100%; display: block; overflow: visible; }
.parcours .ruban { transition: opacity var(--dur-1) var(--ease-out); cursor: pointer; }
.parcours:has(.ruban:hover) .ruban:not(:hover) { opacity: .18; }
.parcours .noeud { cursor: default; }
.parcours text { font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif; }

/* ---- calendrier à points --------------------------------------------------------------------- */
.calendrier { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 0; padding-top: var(--space-4); }
.cal-mois { display: grid; grid-template-rows: 1fr auto auto; gap: var(--space-2); padding: 0 2px; min-width: 0; }
.cal-pile { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; min-height: 92px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-strong); }
.cal-point {
  position: relative; width: 15px; height: 15px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}
/* la cible du pointeur déborde le point : quinze pixels, c'est trop peu pour un doigt */
.cal-point::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.cal-point:hover, .cal-point:focus-visible { transform: scale(1.35); }
.cal-mois .etiq { font-size: 10px; color: var(--muted); text-align: center; }
.cal-mois.vide .etiq { opacity: .5; }
.cal-annees { display: grid; margin-top: var(--space-1); }
.cal-annee { padding-top: var(--space-2); margin: 0 2px; border-top: 1px solid var(--line-strong); color: var(--muted); font-size: var(--fs-100); font-weight: 700; letter-spacing: .06em; text-align: center; }

/* ---- matrice de croisement ---------------------------------------------------------------------- */
.matrice-choix { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-6); }
.matrice-enveloppe { overflow-x: auto; }
.matrice { border-collapse: separate; border-spacing: 2px; width: auto; min-width: 100%; }
.matrice th {
  position: static; background: transparent; padding: var(--space-2) var(--space-3);
  font-size: var(--fs-100); font-weight: 700; letter-spacing: .04em; text-transform: none;
  color: var(--muted); border: 0; white-space: nowrap;
}
.matrice thead th { vertical-align: bottom; text-align: center; }
.matrice tbody th { text-align: left; min-width: 11rem; max-width: 18rem; white-space: normal; padding-right: var(--space-4); }
.matrice td {
  padding: 0; border: 0; text-align: center; vertical-align: middle;
  font-size: var(--fs-200); font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 54px; height: 44px; border-radius: 3px;
}
.matrice td.zero { color: var(--line-strong); font-weight: 400; background: var(--surface-tint); }
.matrice td.total, .matrice th.total { color: var(--brand-primary); font-weight: 700; background: transparent; }
.matrice tr.ligne-total th, .matrice tr.ligne-total td { border-top: 1px solid var(--line-strong); }
.matrice .cellule { cursor: pointer; }

/* ---- le clip, en tête de page : l'affiche, son titre, l'appel ----------------------------------------
   Le clip est sur YouTube. Avant le clic, ce cadre ne contient qu'une image
   servie par le site et le bouton de lecture ; le lecteur de YouTube s'y glisse
   ensuite, par-dessus (app.js). Le bouton couvre tout le cadre — on clique une
   image pour lancer une vidéo —, mais son étiquette se pose en bas à gauche, là
   où l'affiche n'écrit rien. */
.clip { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.clip-figure { display: grid; gap: var(--space-3); margin: 0; min-width: 0; }
.clip-cadre {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--ink);                     /* le noir du lecteur, avant la première image */
}
.clip-affiche, .clip-lecteur { display: block; width: 100%; height: 100%; border: 0; }
.clip-affiche { object-fit: cover; }
.clip-lecteur { position: absolute; inset: 0; }
.clip-lecture {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: clamp(10px, 3.5%, 22px); border: 0; background: none; cursor: pointer; font: inherit;
}
.clip-lecture-signal {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--brand-primary); border-radius: var(--radius-pill);
  background: var(--paper-bright); color: var(--brand-primary);
  font-size: var(--fs-200); font-weight: 700; line-height: 1.2;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.clip-lecture-icone {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-pill); background: var(--brand-primary); color: var(--paper-bright);
}
.clip-lecture-icone svg { width: 16px; height: 16px; }
/* ce que lance le bouton : le lecteur d'un tiers, dit avant le clic */
.clip-lecture-plateforme { font-weight: 400; letter-spacing: .04em; opacity: .8; }
.clip-lecture-plateforme::before { content: "· "; }
.clip-lecture:hover .clip-lecture-signal, .clip-lecture:focus-visible .clip-lecture-signal {
  background: var(--brand-primary); color: var(--paper-bright);
}
.clip-lecture:hover .clip-lecture-icone, .clip-lecture:focus-visible .clip-lecture-icone {
  background: var(--paper-bright); color: var(--brand-primary);
}
.clip-lecture:focus-visible { outline-offset: -4px; }
.clip-cadre[data-etat="lecture"] .clip-affiche, .clip-cadre[data-etat="lecture"] .clip-lecture { display: none; }
.clip-titre {
  margin: 0; color: var(--ink);
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-600); font-style: italic;
  letter-spacing: -.03em; line-height: 1.15;
}
/* le clip est fait pour circuler : on le dit, sous son titre */
.clip-partage { margin: calc(-1 * var(--space-2)) 0 0; color: var(--ink); font-size: var(--fs-200); }
.clip-credit { margin-top: var(--space-1); font-size: var(--fs-100); }

/* ---- l'atelier : trois gestes nommés --------------------------------------------------------- */
.etape { padding-top: var(--space-8); margin-top: var(--space-8); border-top: 1px solid var(--line-strong); }
.etape:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.titre-etape {
  margin: 0 0 var(--space-2); font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600); font-weight: 400; letter-spacing: -.035em; line-height: 1.1;
}
.etape > .lede, .sous-section > .lede { max-width: 72ch; }
.etape > .lede { margin-bottom: var(--space-6); }
.etape > .lede + .lede { margin-top: var(--space-4); }
.sous-section > .lede + .lede { margin-top: var(--space-2); }
.bloc-tableau { margin-top: 40px; }
.bloc-tableau .table-wrap { margin-top: var(--space-4); }
#methode-prose + .titre-sous { margin-top: 40px; }

.questions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.questions-aide { width: 100%; margin: 0 0 var(--space-1); }
.question {
  padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); background: var(--paper-bright); color: var(--ink);
  font: inherit; font-size: var(--fs-200); cursor: pointer; text-align: left;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.question:hover { border-color: var(--brand-primary); background: var(--surface-tint); }
.question[aria-pressed="true"] {
  border-color: var(--brand-primary); background: var(--x-refus-selection);
  color: var(--brand-primary); font-weight: 600;
}

.lecture {
  margin: var(--space-6) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line-strong); max-width: 76ch;
}
.lecture b {
  display: block; margin-bottom: var(--space-2); color: var(--muted);
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.lecture p {
  margin: 0 0 var(--space-2); font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400); line-height: 1.55;
}
.lecture p:last-child { margin-bottom: 0; }
.lecture .prudence { font-family: inherit; font-size: var(--fs-200); color: var(--muted); }

/* ---- index des variables ------------------------------------------------------------------------ */
.index-var { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.index-var a {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  padding: 4px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper-bright); color: var(--ink); font-size: var(--fs-100);
  text-decoration: none; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.index-var a:hover { border-color: var(--brand-primary); background: var(--surface-tint); }
.index-var a .n { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- toutes les variables ---------------------------------------------------------------------- */
.groupe-var { padding-top: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--line-strong); }
.groupe-var:first-child { padding-top: var(--space-4); margin-top: var(--space-4); }
.groupe-var-tete { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
/* la marque d'un groupe : son icône en navy sur un rond clair, comme les
   dimensions du questionnaire ISTS — elle double le titre, jamais seule */
.marque-groupe {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--paper-bright)); color: var(--brand-primary);
}
.marque-groupe .ico { width: 19px; height: 19px; }
.groupe-var-tete h3 {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500);
  font-weight: 400; letter-spacing: -.03em;
}
.groupe-var-tete .glose { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-100); }
.graphique h4 {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-400);
  font-weight: 400; letter-spacing: -.02em; line-height: 1.2;
}

/* ---- carte ------------------------------------------------------------------------------------- */
.carte { display: block; width: 100%; max-width: 660px; height: auto; margin: 0 auto; overflow: visible; }
.carte .dep {
  fill: var(--surface-tint); stroke: var(--paper-bright); stroke-width: .7;
  transition: fill var(--dur-1) var(--ease-out);
}
.carte .dep.actif {
  fill: color-mix(in srgb, var(--brand-primary) 15%, var(--paper-bright));
  stroke: color-mix(in srgb, var(--brand-primary) 30%, transparent); cursor: pointer;
}
.carte .dep.actif:hover, .carte .dep.actif:focus-visible {
  fill: color-mix(in srgb, var(--brand-primary) 28%, var(--paper-bright));
}
.carte .marque {
  cursor: pointer; transform-box: fill-box; transform-origin: center;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}
.carte .marque:hover, .carte .marque:focus-visible { transform: scale(1.25); }
.carte text { font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif; }

/* ---- mentions légales : leur mise en forme est commune (coquille) ; la vue les range en bandes ---- */
.bande-mentions { padding: var(--space-8) 0; border-top: 1px solid var(--line); }
.tete-vue + .bande-mentions { margin-top: var(--space-8); }

/* ---- infobulle ------------------------------------------------------------------------------------ */
#infobulle {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%); transition: opacity var(--dur-1) var(--ease-out);
  max-width: 300px; padding: var(--space-3);
  background: var(--ink); color: var(--paper-bright);
  border-radius: var(--radius-sm); font-size: var(--fs-100); line-height: 1.45;
  box-shadow: var(--shadow-dialog);
}
#infobulle.on { opacity: 1; }
#infobulle b { display: block; font-size: var(--fs-200); margin-bottom: 2px; }
#infobulle span { display: block; color: color-mix(in srgb, var(--paper-bright) 72%, transparent); }

/* ---- le survol qui isole ------------------------------------------------------------------------
   Une marque visée, les autres reculent — en CSS pur, valeurs du kit. C'est un
   état, pas un mouvement : il reste en animations réduites, sans transition. */
.pastilles-groupes:has(.pastille:hover, .pastille:focus-visible) .pastille:not(:hover):not(:focus-visible),
.calendrier:has(.cal-point:hover, .cal-point:focus-visible) .cal-point:not(:hover):not(:focus-visible),
.carte:has(.marque:hover, .marque:focus-visible) .marque:not(:hover):not(:focus-visible),
.isolate-group:has(.profil-ligne:hover, .profil-ligne:focus-visible) .profil-ligne:not(:hover):not(:focus-visible) {
  opacity: .46; filter: saturate(.72);
}

/* ---- mouvement propre à l'observatoire -----------------------------------------------------------
   Le vocabulaire est celui du kit (commun/coquille.css) : trois durées, deux
   courbes, une distance, un pas d'échelonnement — rien de rebondissant sur des
   marques qui comptent des personnes. Chaque graphique a UN verbe, et ce verbe
   dit ce qu'est la donnée :
   · les chiffres clés COMPTENT jusqu'à leur valeur (app.js) ;
   · les pastilles se POSENT une à une : on compte des situations, pas un volume ;
   · le parcours COULE de gauche à droite, du support exigé vers l'issue ;
   · les marques de la carte se posent dans l'ordre où les refus sont survenus ;
   · le fil des signalements MONTE, mois après mois ;
   · les barres POUSSENT depuis leur origine, puis SUIVENT les filtres (app.js).
   Une entrée ne se joue qu'une fois (COQUILLE.entree), et ses états de départ
   sont réservés à l'écran : ni le papier ni les animations réduites ne les
   voient. --rang, posé par app.js, règle l'échelonnement. */
@keyframes x-refus-pose { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes x-refus-coule { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes x-refus-descend-plein { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes x-refus-elargit { from { clip-path: polygon(0 22%, 0 22%, 0 78%, 0 78%); } to { clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 78%); } }
@keyframes x-refus-elargit-bas { from { clip-path: polygon(22% 0, 78% 0, 78% 0, 22% 0); } to { clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); } }
/* la ligne avance : le point et son lieu restent entiers pendant la découpe */
@keyframes x-refus-avance { from { clip-path: inset(-20px 100% -20px 0); } to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes x-refus-descend { from { clip-path: inset(0 -20px 100% -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes x-refus-divise { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes x-refus-cadre { from { border-color: transparent; } }

@media screen and (prefers-reduced-motion: no-preference) {
  /* l'ouverture : la seconde ligne du titre arrive la dernière — le droit, puis
     ce qu'il en reste au comptoir */
  .ouverture-tete .titre .suite { animation: arrive var(--dur-3) var(--ease-out) both; animation-delay: calc(3 * var(--stagger-step)); }

  /* changer de vue : la tête de la vue arrive, échelonnée */
  .tete-vue > * { animation: arrive var(--dur-3) var(--ease-out) both; }
  .tete-vue > :nth-child(2) { animation-delay: var(--stagger-step); }
  .tete-vue > :nth-child(3) { animation-delay: calc(2 * var(--stagger-step)); }

  /* le contexte : chaque forme a son verbe, joué une fois à sa première vue */
  /* la règle s'élargit : la liste de ce qui était visé, puis le coin qui s'ouvre, puis « tous » */
  .forme-glissement.entree-prete :is(.glissement-vises li, .glissement-tous, .regle-bords > div) { opacity: 0; }
  .forme-glissement.entree-prete .glissement-coin { clip-path: polygon(0 22%, 0 22%, 0 78%, 0 78%); }
  .forme-glissement.entree-prete .glissement-applique { clip-path: inset(0 100% 0 0); }
  .forme-glissement.en-entree .glissement-vises li {
    animation: readout-in var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--rang, 0) * var(--stagger-step));
  }
  .forme-glissement.en-entree .glissement-coin { animation: x-refus-elargit var(--dur-3) var(--ease-out) both; animation-delay: calc(4 * var(--stagger-step)); }
  .forme-glissement.en-entree .glissement-applique { animation: x-refus-coule var(--dur-3) var(--ease-out) both; animation-delay: calc(6 * var(--stagger-step)); }
  .forme-glissement.en-entree .glissement-tous { animation: arrive var(--dur-3) var(--ease-out) both; animation-delay: calc(8 * var(--stagger-step)); }
  .forme-glissement.en-entree .regle-bords > div {
    animation: readout-in var(--dur-3) var(--ease-out) both;
    animation-delay: calc((10 + var(--rang, 0)) * var(--stagger-step));
  }

  /* le refus déplace : la ligne avance de lieu en lieu */
  .forme-parcours.entree-prete :is(.lieu, .troncon-nom, .forme-note) { opacity: 0; }
  .forme-parcours.en-entree .lieu {
    animation: x-refus-avance var(--dur-3) var(--ease-io) both;
    animation-delay: calc(var(--rang, 0) * 2 * var(--stagger-step));
  }
  .forme-parcours.en-entree .troncon-nom {
    animation: readout-in var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--rang, 0) * 2 * var(--stagger-step));
  }
  .forme-parcours.en-entree .forme-note { animation: readout-in var(--dur-3) var(--ease-out) both; animation-delay: calc(10 * var(--stagger-step)); }

  /* la même règle se divise : le tronc, les deux branches à la fois, puis les issues */
  .forme-bifurcation.entree-prete .bif-lien::before { transform: scaleX(0); }
  .forme-bifurcation.entree-prete .bif-lien::after { clip-path: inset(50% 0 50% 0); }
  .forme-bifurcation.entree-prete :is(.bif-issue, .forme-these) { opacity: 0; }
  .forme-bifurcation.en-entree .bif-lien::before { animation: bar-grow var(--dur-2) var(--ease-out) both; }
  .forme-bifurcation.en-entree .bif-lien::after { animation: x-refus-divise var(--dur-3) var(--ease-out) both; animation-delay: var(--dur-2); }
  .forme-bifurcation.en-entree .bif-issue {
    animation: readout-in var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--dur-2) + 3 * var(--stagger-step));
  }
  .forme-bifurcation.en-entree .forme-these {
    animation: arrive var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--dur-2) + 7 * var(--stagger-step));
  }

  /* ce que le registre voit : son cadre d'abord, puis, autour, ce qu'il ne voit pas */
  .forme-visibilite.entree-prete .cadre--registre { opacity: 0; }
  .forme-visibilite.entree-prete .cadre--ouvert { border-color: transparent; }
  .forme-visibilite.entree-prete :is(.cadre-nom, .forme-these) { opacity: 0; }
  .forme-visibilite.en-entree .cadre--registre { animation: arrive var(--dur-3) var(--ease-out) both; }
  .forme-visibilite.en-entree .cadre--ouvert,
  .forme-visibilite.en-entree .cadre--ouvert > .cadre-nom {
    animation: x-refus-cadre var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--rang, 1) * 4 * var(--stagger-step));
  }
  .forme-visibilite.en-entree .cadre--ouvert > .cadre-nom { animation-name: readout-in; }
  .forme-visibilite.en-entree .forme-these { animation: readout-in var(--dur-3) var(--ease-out) both; animation-delay: calc(12 * var(--stagger-step)); }

  @media (max-width: 640px) {
    .forme-glissement.entree-prete .glissement-coin { clip-path: polygon(22% 0, 78% 0, 78% 0, 22% 0); }
    .forme-glissement.en-entree .glissement-coin { animation-name: x-refus-elargit-bas; }
    .forme-glissement.entree-prete .glissement-applique { clip-path: inset(0 0 100% 0); }
    .forme-glissement.en-entree .glissement-applique { animation-name: x-refus-descend-plein; }
    .forme-parcours.en-entree .lieu { animation-name: x-refus-descend; }
  }

  /* chiffres clés */
  #indicateurs.entree-prete > * { opacity: 0; }
  #indicateurs.en-entree > * { animation: arrive var(--dur-3) var(--ease-out) both; }
  #indicateurs.en-entree > :nth-child(2) { animation-delay: var(--stagger-step); }
  #indicateurs.en-entree > :nth-child(3) { animation-delay: calc(2 * var(--stagger-step)); }

  /* pastilles */
  #g-pastilles.entree-prete .pastille, #g-pastilles.entree-prete .titre-g { opacity: 0; }
  #g-pastilles.en-entree .titre-g {
    animation: readout-in var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--rang, 0) * var(--stagger-step));
  }
  #g-pastilles.en-entree .pastille {
    animation: x-refus-pose var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--rang, 0) * var(--stagger-step));
  }

  /* parcours */
  #g-parcours.entree-prete .parcours { clip-path: inset(0 100% 0 0); }
  #g-parcours.en-entree .parcours { animation: x-refus-coule calc(2 * var(--dur-3)) var(--ease-io) both; }

  /* carte */
  #g-carte.entree-prete .marque { opacity: 0; }
  #g-carte.en-entree .marque {
    animation: x-refus-pose var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--rang, 0) * var(--stagger-step));
  }

  /* fil des signalements */
  #g-calendrier.entree-prete .cal-point { opacity: 0; }
  #g-calendrier.en-entree .cal-point {
    animation: arrive var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--rang, 0) * var(--stagger-step));
  }

  /* croisements : le tableau croisé se recompose en diagonale quand on change
     de question ; chaque graphique de variable pousse ses barres à sa première vue */
  #g-matrice.en-entree .matrice td, #g-matrice.en-entree .matrice th {
    animation: readout-in var(--dur-2) var(--ease-out) both;
    animation-delay: calc(var(--rang, 0) * var(--stagger-step));
  }
  .graphique.entree-prete .profil-ligne .barre i { transform: scaleX(0); }
  .graphique.en-entree .profil-ligne .barre i {
    animation: bar-grow var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--rang, 0) * var(--stagger-step));
  }

  /* ce qui apparaît quand on sélectionne : le bandeau, le bouton d'effacement,
     un filtre qu'on vient de poser */
  .selection-active, .nav-effacer, .jeton-neuf { animation: readout-in var(--dur-2) var(--ease-out) both; }
}

@media print {
  /* le socle de l'impression est dans la coquille ; ici, ce que l'observatoire retire */
  .navigation, .suite-vues, .filtres, .action-primary, .action-secondary, .barre-recherche { display: none !important; }
  /* une vidéo ne s'imprime pas : le papier garde le titre, la légende et
     l'adresse du questionnaire, en clair */
  .clip-cadre, .clip-credit a { display: none !important; }
  .vue { max-width: none; padding-inline: 0; }
  .graphique, .recit, .mentions-section, .suite, .rubrique { break-inside: avoid; }
}