/* Observatoire — habillage commun aux deux volets.
   Le volet « emplois et métiers » a sa propre feuille (radar.css, régénérée) ;
   celle-ci porte ce que les deux partagent : la barre de volets et la frise
   par échéance du volet réglementaire. Tout le reste réutilise les classes
   existantes du site, pour que ces pages vieillissent avec lui. */

/* --- Barre de volets ---------------------------------------------------- */
.volets {
  /* LA BARRE DES QUATRE VOLETS RESTE SOUS LE BANDEAU QUAND ON DÉFILE.
     Demandé par Olivier le 27/08 : les pages de l'Observatoire sont longues, et
     l'onglet où l'on se trouve — comme la possibilité de passer à un autre —
     disparaissait dès le premier écran.
     `top` se cale sur la hauteur du bandeau, qui est fixe et connue ; le fond
     opaque est obligatoire, sans lui le texte de la page défilerait dessous.
     z-index 40 : au-dessus du contenu et des barres collantes du radar (3),
     sous le bandeau (100) et sous le panneau du menu mobile (90). */
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-paper);
  /* Respiration entre le bandeau marine et la barre, commune aux deux volets.
     Elle vivait dans la feuille du radar seulement, et manquait donc au volet
     reglementaire (signale par Olivier le 18/08/2026). */
  padding-top: var(--s-6);
}
.volets__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.volets a {
  display: inline-block;
  padding: var(--s-3) 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.volets a:hover { color: var(--c-ink-900); }
.volets a[aria-current="page"] {
  color: var(--c-ink-900);
  border-bottom-color: var(--c-gold-700);
}

/* --- Frise par échéance -------------------------------------------------- */
/* La date porte l'information : c'est elle qu'un dirigeant cherche, pas le
   titre de la section. Elle est donc traitée en exergue, et non en simple
   intertitre. */
.echeance__date {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  color: var(--c-gold-700);
  margin: 0 0 var(--s-2);
}
.echeance__titre {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-4);
}

/* Mention de vérification : sobre, mais toujours visible. Une page de repères
   qui n'affiche pas sa date de vérification demande une confiance qu'elle ne
   justifie pas. */
.verifie {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-4);
  margin-top: var(--s-6);
}

/* Le timbre de l'observatoire, repris de la page source et posé dans le
   bandeau marine : dates de relevé, sources, population balayée. */
.masthead__timbre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(189, 212, 234, 0.25);
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  color: var(--c-glacier);
}
.masthead__timbre b { color: #FFFFFF; font-weight: 600; }

/* --- Les deux mesures : rendre le choix évident -------------------------- */
/* Signalé par Olivier le 18/08/2026 : la bascule entre « ce que le marché
   NOMME » et « ce qu'il DÉCRIT » était trop discrète pour qu'un visiteur
   comprenne qu'il a deux études sous les yeux. Les onglets prennent donc la
   forme de vrais boutons, avec une consigne au-dessus. */
.radar .bascule {
  /* Signalé par Olivier le 21/08/2026 : en défilant, le graphique se voyait
     « entre les titres », dans une bande à droite de la consigne collante.

     CAUSE MESURÉE EN LIGNE, et elle n'était pas dans les règles de collage :
     la consigne est un `<p>`, et la feuille du radar porte `.radar p {
     max-width: 35rem }`. Son fond opaque s'arrêtait donc à 639 px quand la
     barre des onglets en fait 1 177 : le tableau défilait dans les 580 px
     découverts, à hauteur des onglets.

     Une largeur de confort de lecture appliquée à un élément d'interface :
     la règle était juste pour ce qu'elle visait, et fausse ici. */
  max-width: none;
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: var(--s-6) 0 var(--s-3);
}
.radar .barre {
  gap: var(--s-2);
  border-bottom: 1px solid var(--trait);
  margin-top: 0;
}
.radar .barre label {
  background: #FFFFFF;
  border: 1px solid var(--trait);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  padding: var(--s-3) var(--s-4);
  color: var(--c-ink-900);
  font-size: var(--fs-small);
  transition: background 160ms, color 160ms;
}
.radar .barre label:hover {
  background: var(--c-glacier);
}
.radar #o1:checked ~ .barre label[for=o1],
.radar #o2:checked ~ .barre label[for=o2] {
  background: var(--c-ink-900);
  color: #FFFFFF;
  border-color: var(--c-ink-900);
  border-bottom-color: var(--c-ink-900);
}
.radar #o1:checked ~ .barre label[for=o1] span,
.radar #o2:checked ~ .barre label[for=o2] span {
  color: var(--c-gold-500);
  opacity: 1;
}

/* --- Frise des échéances (volet réglementaire) --------------------------- */
/* Le sommaire réutilise .method-toc de la page Méthode : sticky, bascule
   mobile et scroll-spy sont hérités. Ici, seulement l'habillage en frise :
   un fil vertical, une puce par échéance, la puce active pleine d'or. */
@media (min-width: 1024px) {
  .method-toc--frise .method-toc__list {
    position: relative;
    gap: var(--s-4);
  }
  /* Le fil, derrière les puces. */
  .method-toc--frise .method-toc__list::before {
    content: "";
    position: absolute;
    top: 0.9rem;
    bottom: 0.9rem;
    left: calc(0.75rem + 5px);
    width: 1px;
    background: var(--c-line);
  }
  .method-toc--frise .method-toc__list a {
    grid-template-columns: 11px 1fr;
    gap: 0.9rem;
    align-items: center;
    border-left: 0;
    position: relative;
  }
  .method-toc--frise .method-toc__puce {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--c-paper);
    border: 2px solid var(--c-muted);
    transition: border-color var(--dur) var(--ease),
                background var(--dur) var(--ease);
  }
  .method-toc--frise .method-toc__list a:hover .method-toc__puce {
    border-color: var(--c-gold-700);
  }
  .method-toc--frise .method-toc__list a.is-active {
    border-left: 0;
  }
  .method-toc--frise .method-toc__list a.is-active .method-toc__puce {
    background: var(--c-gold-700);
    border-color: var(--c-gold-700);
  }
}
/* Sur mobile, .method-toc bascule déjà en barre horizontale : la puce
   disparaît, les libellés suffisent. */
@media (max-width: 1023px) {
  .method-toc--frise .method-toc__puce { display: none; }
}

/* Les ancres visées s'arrêtent sous l'en-tête fixe, pas derrière lui.
   Les identifiants sont sur les sections (le scroll-spy a besoin de cibles
   hautes), la marge de défilement aussi. */
.legal-section {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* --- Le texte s'aligne sur la frise ------------------------------------- */
/* La colonne de prose était centrée dans son espace : elle décrochait de
   143 px par rapport au sommaire, et laissait un vide à droite. Elle est
   désormais alignée à gauche, et ce vide accueille les Regards liés. */
.legal-prose__inner { margin-inline: 0; }
/* Le site applique un retrait horizontal à toute balise `section` ; ici il
   décalait chaque section de 49 px par rapport au titre de la frise. */
.legal-prose .legal-section { padding-inline: 0; }

/* --- Regards liés : une vignette EN FACE de son paragraphe ---------------- */
/* Demande d'Olivier du 19/08/2026 : la miniature suit le texte auquel elle se
   rattache, elle ne colle pas à l'écran. Chaque vignette est posée juste
   derrière SON paragraphe ; la grille la place sur la même ligne, dans la
   colonne de droite. Aucun collage, donc aucun espace réservé entre les
   échéances : la colonne ne s'étire plus au-delà de ce qu'elle porte. */
@media (min-width: 1280px) {
  .legal-prose .legal-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: clamp(2rem, 3vw, 3.5rem);
    align-items: start;
  }
  .legal-prose .legal-section > :not(.regards-lie) { grid-column: 1; }
  .legal-prose .legal-section > .regards-lie {
    grid-column: 2;
    /* Le haut de la vignette s'aligne sur le haut de son paragraphe. */
    margin-top: 0;
    margin-bottom: 0;
  }
}

.regards-lie { margin: var(--s-4) 0 var(--s-5); }
.regards-lie a { display: block; text-decoration: none; color: var(--c-ink-900); }
.regards-lie img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  transition: border-color var(--dur) var(--ease);
}
.regards-lie__legende {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-top: var(--s-2);
  color: var(--c-ink-400);
}
.regards-lie a:hover img,
.regards-lie a:focus-visible img { border-color: var(--c-gold-700); }
.regards-lie a:hover .regards-lie__legende { color: var(--c-ink-900); }

/* Sous 1280 px, la vignette reste sous son paragraphe, en largeur limitée. */
@media (max-width: 1279px) {
  .regards-lie { max-width: 18rem; }
}

/* --- Volet RÉMUNÉRATIONS -------------------------------------------------
   Posé le 24/08/2026. Deux composants seulement : la limite de source en tête,
   et la barre d'écart interquartile. Le reste réemploie radar.css.            */

/* La limite de source se lit AUSSI FORT que le chiffre de tête. Ce n'est pas
   une note de bas de page : une mesure qui ne couvre qu'une source et laisse
   croire qu'elle couvre le marché est une réponse plausible, et une réponse
   plausible est pire qu'un silence. Condition posée par Prosper le 24/08. */
.radar-tete__limite {
  margin: 1.1rem auto 0;
  max-width: 40rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--signal);
  background: color-mix(in srgb, var(--signal) 7%, transparent);
  font-family: var(--ff-sans);
  font-size: 1.05rem;      /* mesuré : 14,3 px passait pour une légende, à côté
                              d'une ligne de preuve à 13,9 px. Relevé au
                              navigateur le 24/08, pas relu dans cette feuille. */
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
  text-align: left;
}
.radar-tete__limite b { font-weight: 700; }
@media (max-width: 34rem) { .radar-tete__limite { font-size: .95rem; } }

/* La barre d'écart : une bande du premier au troisième quartile, la médiane en
   repère vertical. Une médiane seule se lit comme « le » salaire ; la bande
   rappelle que la moitié des annonces s'écarte de part et d'autre. */
.radar .barres--ecart {
  /* DEUX CLASSES, ET C'EST DÉLIBÉRÉ. `radar.css` se charge APRÈS cette feuille
     et y pose `.barres { grid-template-columns: … 2.6rem 3.5rem }`. À
     spécificité égale, la dernière feuille l'emporte : une règle écrite ici
     sur `.barres--ecart` seule ne s'appliquait pas du tout — elle existait
     sans rien faire, et je l'ai crue posée jusqu'à la mesurer. Mesuré au
     navigateur le 24/08.

     MESURÉ, pas supposé : avec `auto`, la colonne « Médiane » rendait 44 px
     pour un en-tête qui en demande davantage, et « MÉDIANE » venait coller
     « EFFECTIF ». Les deux colonnes de chiffres reçoivent donc une largeur
     plancher, et les nombres ne se coupent plus. */
  grid-template-columns: minmax(0, 1.7fr) minmax(6rem, 2fr) minmax(5rem, auto) minmax(5.5rem, auto);
  column-gap: 1.1rem;
}
.radar .barres--ecart .br-n, .radar .barres--ecart .br-p { white-space: nowrap; }

/* L'ÉCART EN TOUTES LETTRES, POUR L'ÉCRAN QUI N'A PAS LA BARRE. Mesuré à
   375 px le 24/08 : la bande interquartile est masquée sur un téléphone, et
   la légende continuait de la décrire — un texte qui commente un élément
   absent, exactement la faute des « onglets » corrigée deux heures plus tôt.
   Le lecteur d'un téléphone perdait l'écart, qui est ce qui empêche de lire
   la médiane comme « le » salaire. */
.radar .barres--ecart .ecart-txt { display: none; }
.radar .barres--ecart + .legende { margin-top: 1.4rem; }
.br-piste.ecart { position: relative; background: color-mix(in srgb, var(--trait) 40%, transparent); }
.ecart__bande {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--tech) 45%, transparent);
}
.ecart__med {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px; background: var(--encre);
}

@media (max-width: 34rem) {
  /* Sur un téléphone, la bande n'a plus la largeur d'être lue : elle disparaît.
     Une bande de 30 px ne dit rien d'un écart interquartile, elle fait
     seulement croire qu'elle le dit.

     LE NOM PREND SA PROPRE LIGNE, et ce n'est pas un choix d'esthétique.
     Une première version gardait les quatre colonnes en rétrécissant celle du
     libellé : mesuré à 340 px, « Expertise et référence technique » venait
     recouvrir « 48 k€ ». Tous les réglages de largeur essayés déplaçaient la
     collision sans la supprimer. Le nom occupant toute la ligne, les chiffres
     n'ont plus rien à heurter — la collision devient impossible au lieu d'être
     ajustée. Les en-têtes disparaissent : « 48 k€ » et « 58 ann. » se nomment
     eux-mêmes. */
  .radar .barres--ecart {
    grid-template-columns: 1fr auto;
    column-gap: .8rem;
    row-gap: .3rem;
  }
  .radar .barres--ecart .br-tete,
  .radar .barres--ecart .br-piste.ecart { display: none; }
  .radar .barres--ecart .br-nom { grid-column: 1 / -1; margin-top: .7rem; }
  .radar .barres--ecart .br-n { text-align: left; }
  .radar .barres--ecart .ecart-txt {
    display: inline;
    font-weight: 400;
    color: var(--encre-2);
  }
}

/* Le sommaire du volet Rémunérations est TOUJOURS visible.
   `radar.css` cache `.som-1` et `.som-2` par défaut et ne les révèle que par
   l'onglet coché — mécanique juste pour une page à deux onglets, inapplicable
   à une page qui n'en a pas. D'où une classe propre plutôt qu'un détournement
   de la leur : `som-1` sur cette page aurait dépendu d'un bouton radio absent,
   et le sommaire ne se serait jamais affiché. */
.radar .som-seul { display: block; }

/* --- Deux corrections signalées par Olivier le 25/08, MESURÉES ------------ */

/* « ANNONCES PART » se lisait d'un seul tenant. Mesure : `radar.css` donne
   2,6 rem à la colonne des effectifs, soit 44 px, taillés pour « Postes » ;
   « Annonces » y déborde et vient toucher l'en-tête voisin. Le mot juste ne se
   raccourcit pas pour tenir dans une colonne : c'est la colonne qui s'élargit.
   Deux classes pour passer devant `radar.css`, chargée après cette feuille. */
.radar .barres--etats {
  grid-template-columns: minmax(7.5rem, 15.5rem) 1fr minmax(4.4rem, auto) minmax(3.6rem, auto);
  column-gap: 1.1rem;
}

/* « Il manque un espace entre les commentaires et le graphique. » Juste, et le
   défaut n'était pas propre à cette page : la légende collait la dernière
   ligne de la grille sur TOUTES les planches du site, la marge calculée valant
   zéro. Corrigé partout plutôt qu'ici seulement — deux planches identiques qui
   respirent différemment seraient un défaut de plus. */
.radar .barres + .legende,
.radar .barres--ecart + .legende { margin-top: 1.5rem; }

/* --- Les trois bandeaux de l'Observatoire à la même hauteur --------------- */
/* Demandé par Olivier le 25/08 : « même taille calée sur Emplois et métiers ».
   MESURÉ avant de corriger : le corps du titre est déjà identique sur les trois
   (63,75 px), la différence était la HAUTEUR du bandeau — 687 px, 688 px, et
   567 px pour le volet Rémunérations, dont le titre tenait sur une ligne et le
   chapô sur trois au lieu de quatre.
   On pose donc un plancher plutôt que d'étirer le texte : il ne se déclenche
   qu'aux largeurs où les trois bandeaux se comparent, et cède aux largeurs
   étroites où le texte les rend de toute façon plus hauts. */
@media (min-width: 60rem) {
  .page-observatoire .masthead--simple { min-height: 41.3rem; }
}

/* Le bandeau chiffré, une fois DANS la colonne de droite -------------------- */
/* Demandé par Olivier le 25/08 : « le sommaire latéral doit remonter sous les
   onglets ». Sur la page des emplois, le sommaire commence sous la barre
   d'onglets, qui délimite la zone de contenu ; cette page n'ayant pas
   d'onglets, l'équivalent est de faire entrer le chiffre de tête dans la
   colonne de droite, pour que le sommaire démarre à sa hauteur.

   MAIS SON CALAGE ÉTAIT CALCULÉ POUR LA PLEINE LARGEUR : `radar.css` lui donne
   un padding gauche égal à la colonne du sommaire plus l'écart de grille,
   précisément pour l'aligner sur le contenu quand il est POSÉ AU-DESSUS de la
   grille. Dans la colonne, cette compensation s'ajoute à celle que la grille
   applique déjà, et le chiffre partait 265 px trop à droite. On l'annule. */
.radar .radar-corps > section.radar-tete {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Le sommaire des Repères descend au niveau de celui des Rémunérations ------ */
/* Demandé par Olivier le 25/08 : les trois sommaires à la même hauteur.
   MESURÉ, et le résultat est en partie atteignable seulement.
   Sous la barre des volets, les trois pages n'ont pas la même chose :
     · Emplois     : la consigne des onglets (61 px) + la barre d'onglets (61 px),
                     puis 70 px d'espacement — sommaire à 1 004 px ;
     · Rémunérations : 70 px d'espacement seul — sommaire à 883 px ;
     · Repères     : rien du tout — sommaire à 813 px.
   L'espacement de 70 px est donc déjà commun aux deux premières ; c'est celui
   qui manquait à la troisième, et on le lui donne.
   LES 122 PX QUI SÉPARENT ENCORE EMPLOIS DES DEUX AUTRES SONT SA BARRE
   D'ONGLETS, que les deux autres n'ont pas. Les combler serait poser 122 px de
   blanc sous la barre des volets : essayé, mesuré, regardé — cela fait un trou
   qui donne à la page l'air d'avoir perdu un bloc. On préfère un décalage qui
   s'explique à un vide qui ne s'explique pas. */
.page-observatoire .method-page { padding-top: 70px; }

/* Le tableau des conditions : CINQ colonnes, et la fraction en fait partie -- */
/* Le volet des rémunérations masque l'écart écrit sur grand écran, parce que la
   barre le montre. Ici la barre montre le TAUX, et sa fraction est ce qui le
   PROUVE — « 12 sur 13 » dit d'un coup qu'un taux de 92,3 % repose sur treize
   annonces. La cacher affaiblirait précisément la règle que ces pages
   défendent : un taux se publie avec sa fraction. Elle a donc sa colonne, et
   elle reste visible à toutes les largeurs. */
.radar .barres--conditions {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(5rem, 1.6fr)
                         minmax(4.2rem, auto) minmax(5rem, auto) minmax(4rem, auto);
  column-gap: 1.1rem;
  row-gap: .45rem;
  align-items: center;
}
.radar .barres--conditions .br-n,
.radar .barres--conditions .br-p { white-space: nowrap; text-align: right; }
.radar .barres--conditions + .legende { margin-top: 1.5rem; }

@media (max-width: 46rem) {
  /* Le nom prend sa ligne, les trois chiffres la suivante : aucune collision
     possible, plutôt qu'un réglage de largeurs qui la déplace. */
  .radar .barres--conditions { grid-template-columns: 1fr auto auto; column-gap: .8rem; }
  .radar .barres--conditions .br-tete,
  .radar .barres--conditions .br-piste { display: none; }
  .radar .barres--conditions .br-nom { grid-column: 1 / -1; margin-top: .7rem; }
  .radar .barres--conditions .br-n { text-align: left; }
}

/* --- La méthode se déplie à la demande ------------------------------------ */
/* Olivier juge la page des conditions illisible ; mesuré : le bloc de méthode
   occupait UN TIERS du corps, dans le fil de lecture. Il est excellent, et
   c'est pourquoi il ne doit pas barrer la route : on n'y va pas avant d'avoir
   lu les chiffres, on y va pour vérifier.
   `<details>` plutôt qu'un repli piloté par script : le contenu reste dans le
   document, donc lisible par un moteur et par un lecteur d'écran. */
.radar .methode-repliee { border-top: 1px solid var(--trait); padding-top: 1.4rem; }
.radar .methode-repliee > summary {
  font-family: var(--ff-sans);
  font-size: .84rem;
  color: var(--encre-2);
  cursor: pointer;
  padding: .5rem 0;
  list-style: none;
}
.radar .methode-repliee > summary::-webkit-details-marker { display: none; }
.radar .methode-repliee > summary b { color: var(--encre); font-weight: 700; }
.radar .methode-repliee > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: .6rem;
  color: var(--signal);
  transition: transform .15s;
}
.radar .methode-repliee[open] > summary::before { transform: rotate(90deg); }
.radar .methode-repliee > summary:hover { color: var(--encre); }
.radar .methode-repliee__corps { padding-top: .8rem; }
.radar .methode-repliee footer,
.radar .methode-repliee > summary + * { border-top: 0; }

/* --- Les métiers que le titre de la page désigne --------------------------- */
/* Signalé par Nestor le 25/08 après le verdict d'Olivier : le titre parle des
   métiers RH, et leurs lignes sont noyées parmi vingt-sept — en bas de tableau,
   puisque le classement est par valeur. Un lecteur qui vient pour eux ne les
   trouve pas. On les marque, sans les sortir de l'ordre : leur position DANS le
   classement est justement ce que la page démontre. */
.radar .br-nom--titre {
  font-weight: 600;
  color: var(--encre);
  position: relative;
}
.radar .br-nom--titre::before {
  content: "";
  position: absolute;
  left: -.7rem; top: .1em; bottom: .1em;
  width: 2px;
  background: var(--signal);
}
.radar .br-n.br-nom--titre { font-weight: 700; color: var(--encre); }

/* Les réserves en puces d'une ligne, demandé par Nestor le 25/08 : elles sont
   différenciantes, elles ne doivent pas être un paragraphe qu'on saute. */
.radar .reserve__liste { margin: 0; padding-left: 1.2rem; }
.radar .reserve__liste li { margin-bottom: .55rem; line-height: 1.5; }
.radar .reserve__liste li:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   EXEMPLE DE LECTURE — une ligne du tableau recomposée en toutes lettres.
   Demandé par Olivier le 26/08 : « je ne comprends pas comment le lire ?! ».
   Il se distingue de la légende, qui dit la méthode, alors que celui-ci
   apprend le geste. D'où le filet or et le fond, qui le rendent repérable
   sans l'alourdir : c'est le premier paragraphe qu'on lit sous un tableau
   qu'on ne comprend pas.
   -------------------------------------------------------------------------- */
.radar .exemple {
  font-family: var(--ff-sans);
  font-size: .86rem;
  line-height: 1.62;
  color: var(--encre);
  background: rgba(200, 168, 80, 0.07);
  border-left: 2px solid var(--signal);
  padding: .85rem 1.1rem;
  margin: 1.3rem 0 0;
  max-width: 46rem;
}
.radar .exemple + .legende { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   FAMILLES DE TERMES — quarante lignes d'affilée ne se lisent pas ; cinq
   blocs annoncés, oui. L'intitulé porte la famille, ce qu'elle regroupe, et
   son effectif, pour qu'on sache où l'on est sans remonter au chapeau.
   -------------------------------------------------------------------------- */
.radar .famille {
  font-family: var(--ff-sans);
  font-size: .82rem;
  color: var(--encre);
  margin: 2.1rem 0 .7rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(200, 168, 80, 0.28);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
}
.radar .famille:first-child { margin-top: 0; }
.radar .famille span { color: var(--encre-2); font-size: .78rem; }
.radar .famille i { color: var(--encre-2); font-style: normal; font-size: .72rem;
  margin-left: auto; letter-spacing: .06em; text-transform: uppercase; }

/* Repli des raisons de refus, mot pour mot : la phrase du lecteur est
   au-dessus, la formulation exacte de la donnée est ici. */
.radar .refus-detail { margin-top: .9rem; }
.radar .refus-detail > summary {
  font-family: var(--ff-sans); font-size: .78rem; color: var(--encre-2);
  cursor: pointer; letter-spacing: .02em;
}
.radar .refus-detail > p { font-size: .82rem; margin-top: .7rem; }

/* Les trois épreuves, dépliées : Olivier a buté sur la version courte. */
.radar .epreuves { margin-top: 1.4rem; max-width: 46rem; }
.radar .epreuves p {
  font-family: var(--ff-sans); font-size: .84rem; line-height: 1.62;
  color: var(--encre-2); margin: 0 0 .6rem;
}
.radar .epreuves p:first-child { color: var(--encre); }
.radar .epreuves b { color: var(--encre); }

/* --------------------------------------------------------------------------
   LIGNES DE RÉSIDU — « métier non identifiable » n'est pas un métier, c'est
   notre limite. Elle s'affiche dans le tableau pour que la somme fasse le
   corpus (Olivier, 26/08 : « fais en sorte que les tableaux portent sur le
   corpus »), et elle se distingue à l'œil pour qu'on ne la lise pas comme une
   ligne de métier : filet gauche, italique, teinte plus sourde.
   -------------------------------------------------------------------------- */
.radar .br-nom--residu {
  font-style: italic;
  color: var(--encre-2);
  border-left: 2px solid rgba(120, 132, 156, 0.45);
  padding-left: .55rem;
}
.radar .br-n.br-nom--residu { border-left: 0; padding-left: 0; }

/* Ligne de synthèse : l'ensemble des métiers publiés, pour que l'écart au
   corpus se voie sans être calculé (10,7 points sous le repère). */
.radar .br-nom--synthese {
  font-weight: 600;
  border-top: 1px solid rgba(200, 168, 80, 0.42);
  padding-top: .4rem;
  margin-top: .25rem;
}


/* Sur téléphone, la barre des volets ne colle pas : le bandeau occupe déjà
   68 px, et deux bandeaux fixes prendraient un quart de la hauteur utile.
   La règle du radar fait de même pour ses propres barres sous 60rem. */
@media (max-width: 47.99rem) {
  .volets { position: static; }
}

/* L'APPEL AUX DONNÉES, en clôture des quatre volets.
   Demandé par Olivier le 27/08 : le lecteur qui a un besoin sur une population
   précise doit savoir qu'il peut le demander. Sobre, encadré à gauche comme les
   réserves, jamais en couleur d'alerte : c'est une offre, pas un avertissement. */
.appel-donnees {
  border-left: 3px solid var(--c-accent, #b8860b);
  padding: 0.1rem 0 0.1rem var(--s-4);
  margin: var(--s-6) 0 var(--s-5);
  color: var(--c-muted);
  font-size: var(--fs-small);
}
.appel-donnees b { color: var(--c-ink-900); }
.appel-donnees a { color: var(--c-ink-900); }


/* LES VERBATIM DE CLÔTURE. Des phrases recopiées d'annonces : elles doivent se
   lire comme des citations, pas comme un tableau de plus. */
.verbatim__fam {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: var(--s-6) 0 var(--s-3);
}
.verbatim { list-style: none; margin: 0; padding: 0; }
.verbatim li {
  border-left: 2px solid var(--c-line);
  padding: 0 0 0 var(--s-4);
  margin: 0 0 var(--s-4);
  font-style: italic;
  color: var(--c-ink-900);
}
.verbatim li::before { content: "« "; }
.verbatim li::after { content: " »"; }

/* LES DEUX BORNES DE L'AXE. Elles disent ce que chaque bout de la piste veut
   dire, pour que le lecteur n'ait plus à traduire « part des annonces qui
   n'exigent pas d'expérience » en « ouvert aux débutants ».
   Elles ORIENTENT, elles ne classent pas : aucun seuil n'est tracé. */
.radar .br-axe {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  font-family: var(--ff-sans);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: .35rem;
}
.radar .br-axe span:last-child { text-align: right; }
@media (max-width: 46rem) { .radar .br-axe { display: none; } }

/* I5 — LA PÉDAGOGIE SE REPLIE. Un lecteur qui sait lire un tableau ne doit pas
   traverser son mode d'emploi ; celui qui hésite le trouve d'un clic. */
.exemple-replie { margin: var(--s-4) 0 0; }
.exemple-replie > summary {
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-muted);
  letter-spacing: .02em;
}
.exemple-replie > summary:hover { color: var(--c-ink-900); }
.exemple-replie .exemple { margin-top: var(--s-3); }

/* I3 — LES PONTS ENTRE ONGLETS. Une ligne sobre, jamais un encadré : le pont
   se traverse, il ne se lit pas comme un avertissement. */
.pont {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin: var(--s-5) 0 0;
}
.pont a { color: var(--c-ink-900); }


/* ============================================================
   PAGE PARCOURS. Elle emprunte la grille de l'Observatoire — bandeau, colonne
   de sommaire collante, corps — pour ne pas entretenir un second mécanisme qui
   divergerait. Ce qui suit ne règle que ce qui lui est propre.
   ============================================================ */
.radar.parcours {
  /* Rien ne se colle au-dessus du sommaire ici : ni barre de volets ni
     bascule, seulement l'en-tête du site. La valeur de l'Observatoire
     (header + 11rem) laisserait un trou de onze rem. */
  --haut-colle: calc(var(--header-height) + 1.5rem);
}
.parcours .parcours__intro { max-width: 38rem; margin: 0 0 var(--s-4); }
.parcours .parcours__bloc { padding-block: var(--s-5); }
.parcours .parcours__bloc + .parcours__bloc { border-top: 1px solid var(--trait); }
.parcours .parcours__h2 {
  font-family: var(--ff-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin: 0 0 var(--s-4);
}
.parcours .parcours__entree { margin: 0 0 var(--s-4); max-width: 40rem; break-inside: avoid; }
.parcours .parcours__entree p { margin: 0; }
.parcours .parcours__entree b { color: var(--encre); }
/* L'ENSEIGNE NE SE SÉPARE PAS DE SES MISSIONS : une mission détachée de son
   cabinet se lit comme une mission conduite en propre. */
.parcours .parcours__enseigne { break-inside: avoid; margin: 0 0 var(--s-5); }
.parcours .parcours__enseigne h3 {
  font-family: var(--ff-sans);
  font-size: .95rem;
  margin: 0 0 var(--s-3);
  color: var(--encre);
}
/* LES MISSIONS SE LISENT COMME LES ENTRÉES. Olivier, 28/08 : « au même format
   que L'éditeur et l'intégrateur ». Ce qui les distinguait, mesuré au
   navigateur : un filet de 2 px et un retrait de 25,5 px que les entrées n'ont
   pas. Le reste — corps, interligne, largeur — était déjà identique. */
.parcours .parcours__enseigne p {
  max-width: 38rem;
  margin: 0 0 var(--s-3);
}
.parcours .radar-corps p { max-width: 40rem; }
@media print {
  .site-header, .site-footer, .skip-link, .radar-sommaires,
  .masthead__timbre { display: none; }
  .radar-grille { grid-template-columns: 1fr; }
}
.parcours-sous, .masthead__sous {
  font-family: var(--ff-sans);
  font-size: var(--fs-lead);
  color: var(--c-glacier, #BDD4EA);
  margin: var(--s-3) 0 var(--s-4);
  max-width: 42rem;
}

/* RESSERREMENT DEMANDÉ PAR OLIVIER. Un parcours se lit en diagonale : des
   entrées courtes, denses, qu'on parcourt d'un regard. L'interligne d'article
   y faisait perdre le fil d'une entrée à l'autre. */
.parcours .radar-corps p { line-height: 1.5; margin: 0 0 var(--s-3); }
.parcours .parcours__entree p + p { margin-top: var(--s-2); }
.parcours .parcours__bloc + .parcours__bloc { padding-top: var(--s-5); }

/* LES MISSIONS PRENNENT LE RYTHME DES ENTRÉES QUI PRÉCÈDENT. Olivier :
   « resserre davantage, aligne-toi sur les paragraphes précédents ». Une page
   qui change de respiration au milieu se lit comme deux documents cousus. Les
   valeurs sont donc CELLES DES ENTRÉES, pas des valeurs choisies à part :
   marge basse `--s-3`, interligne 1.5, et le filet de gauche pour séparer. */
.parcours .parcours__enseigne p {
  margin: 0 0 var(--s-3);
  line-height: 1.5;
}
.parcours .parcours__enseigne p:last-child { margin-bottom: 0; }
/* LE PAS DE PROSPER NE S'APPLIQUE PAS À UNE ENSEIGNE. Mesuré au navigateur le
   28/08 : chaque enseigne portait 51,2 px de padding en haut ET en bas, hérités
   de `.radar section { padding-block: var(--pas) }`, parce qu'une enseigne est
   une <section> dans un div.radar. L'écart réel entre deux enseignes valait
   118 px quand mes marges en réglaient 16 : je resserrais ce qui ne comptait
   pas. Même piège que celui neutralisé sur .radar-tete le 19/08, resté sur
   toutes les autres sections. L'espacement d'une enseigne tient à sa marge,
   qui est ici la seule chose qui doit jouer. */
.parcours .parcours__enseigne { margin: 0 0 var(--s-4); padding-block: 0; }
/* UN TITRE APPARTIENT À CE QUI LE SUIT. Olivier, 28/08 : « trop d'espace
   entre les paragraphes via… ». L'enseigne avait autant de blanc en dessous
   qu'au-dessus, ce qui la détachait de ses missions au lieu de les grouper.
   Les proportions sont celles du document imprimé, qui le faisait déjà bien
   (8 points avant, 4 après) : la page s'aligne sur lui, on n'invente pas une
   valeur de plus. */
.parcours .parcours__enseigne h3 { margin: 0 0 var(--s-2); }

/* LE TÉLÉCHARGEMENT EST L'ACTION PRINCIPALE DE LA PAGE. Il était un lien gris
   dans un timbre gris, sur fond marine : Olivier ne le voyait pas, et il avait
   raison — le contraste y était insuffisant pour un lien, sans parler d'un
   appel à l'action. Il devient un bouton, à l'endroit où le regard tombe après
   le chapeau. */
.parcours__telecharger { margin: var(--s-5) 0 0; }
.parcours__telecharger .btn { display: inline-block; }