/* Observatoire — emplois et métiers de l'IA.
   Feuille dérivée de la page produite par la session PROSPER, recodée
   sur les jetons de la charte IARH. NE PAS MODIFIER À LA MAIN : elle est
   régénérée par _chantiers/assembler_radar.py à chaque passe de Prosper.
   Sa mise en page est la sienne ; seules les couleurs, les polices et la
   portée des sélecteurs ont changé. */

.radar {
  /* Palette IARH, strictement dans les onze couleurs de la charte.
     Le nuancier de Prosper est conservé dans sa fonction : une progression du
     clair au foncé pour les marques, et une seule couleur saturée en signal. */
  --papier: #F4F6F9;        /* --c-paper   */
  --planche: #FFFFFF;
  --encre: #111E35;         /* --c-ink-900 */
  --encre-2: #6B7FA3;       /* --c-muted   */
  --trait: #DDE4EE;         /* --c-line    */
  --neutre: #BDD4EA;        /* --c-glacier */
  --tech: #6B7FA3;          /* --c-muted   */
  --direction: #2C4A6E;     /* --c-ink-600 */
  --signal: #C8A850;        /* --c-gold-700 */
  --signal-clair: #E5B94E;  /* --c-gold-500 */
  --pas: clamp(3.2rem, 7vw, 5rem);
}
.radar *{box-sizing:border-box}
.radar{margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--ff-sans);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.radar :focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.enveloppe{max-width:1060px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.6rem)}
.colonne{max-width:35rem}
.radar section{padding-block:var(--pas)}
.radar section + section{border-top:1px solid var(--trait)}

.sur{font-family:var(--ff-sans);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--encre-2);
  margin:0 0 1.4rem}
.radar h1{font-family:var(--ff-serif);font-weight:700;
  font-size:clamp(2.15rem,5.6vw,3.7rem);line-height:1.03;letter-spacing:-.012em;
  margin:0 0 1.5rem;text-wrap:balance;max-width:20ch}
.radar h2{font-family:var(--ff-serif);font-weight:700;
  font-size:clamp(1.4rem,3vw,1.95rem);line-height:1.15;letter-spacing:-.008em;
  margin:0 0 1.1rem;text-wrap:balance;max-width:24ch}
.radar h3{font-family:var(--ff-sans);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--encre-2);
  margin:2.4rem 0 .6rem}
.radar p{margin:0 0 1.15rem;max-width:35rem}
.chapeau{font-size:1.16rem;line-height:1.65;max-width:33rem}
.radar strong{font-weight:400;background:linear-gradient(currentColor,currentColor) 0 91%/100% 1px no-repeat;
  color:inherit;text-decoration:none;
  background-image:linear-gradient(color-mix(in srgb,var(--signal) 65%,transparent),
    color-mix(in srgb,var(--signal) 65%,transparent))}
.filet{border:0;border-top:1px solid var(--trait);margin:0}

/* En-tête */
.tete{padding-top:clamp(2.6rem,7vw,4.4rem)}
.timbre{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:baseline;
  font-family:var(--ff-sans);font-size:.78rem;color:var(--encre-2);
  border-top:1px solid var(--trait);padding-top:.9rem;margin-top:2.2rem}
.timbre b{font-weight:700;color:var(--encre)}

/* Planches */
.planche{background:var(--planche);border:1px solid var(--trait);
  padding:clamp(1.2rem,3.4vw,2.2rem);margin:2.2rem 0 0}
.legende{font-family:var(--ff-sans);font-size:.79rem;
  line-height:1.55;color:var(--encre-2);margin:1.5rem 0 0;max-width:44rem}
.legende b{color:var(--encre);font-weight:700}

/* Champ de 774 marques */
.champ{width:100%;height:auto;display:block}
.m{fill:var(--neutre)}
.m-tech{fill:var(--tech)}
.m-direction{fill:var(--direction)}
.m-signal{fill:var(--signal)}
.acc{fill:none;stroke:var(--signal);stroke-width:1.1}
.ann{fill:var(--signal);font-family:var(--ff-sans);font-size:9px;
  font-weight:700}
.cles{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.3rem;
  font-family:var(--ff-sans);font-size:.76rem;color:var(--encre-2)}
.cle{display:flex;align-items:center;gap:.45rem}
.pastille{width:9px;height:9px;flex:none}
.p-tech{background:var(--tech)}.p-neutre{background:var(--neutre)}
.p-direction{background:var(--direction)}.p-signal{background:var(--signal)}

/* Le rapport */
.rapport{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem 1.5rem;
  margin:0 0 1.3rem}
.rapport .n{font-family:var(--ff-serif);font-weight:700;
  font-size:clamp(3.6rem,11vw,6.4rem);line-height:.86;letter-spacing:-.03em;
  color:var(--signal)}
.rapport .l{font-family:var(--ff-sans);font-size:.95rem;
  line-height:1.45;max-width:19rem;color:var(--encre-2)}

/* Barres */
.barres{display:grid;
  grid-template-columns:minmax(7.5rem,15.5rem) 1fr 2.6rem 3.5rem;
  gap:.42rem .75rem;align-items:center;
  font-family:var(--ff-sans);font-size:.8rem}
.br-tete{font-weight:700;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--encre-2);padding-bottom:.35rem;
  border-bottom:1px solid var(--trait)}
.br-nom{line-height:1.3;color:var(--encre)}
.br-dep{color:var(--encre-2)}
.br-piste{height:11px;background:color-mix(in srgb,var(--trait) 55%,transparent)}
.br-jauge{height:100%;background:var(--neutre)}
.br-tech{background:var(--tech)}
.br-direction{background:var(--direction)}
.br-signal{background:var(--signal)}
.br-sal{background:var(--tech)}
.br-faible{background:repeating-linear-gradient(135deg,var(--tech) 0 3px,
  color-mix(in srgb,var(--tech) 32%,transparent) 3px 6px)}
.br-geo{background:var(--tech)}
.br-n{text-align:right;font-weight:700}
.br-p{text-align:right;color:var(--encre-2)}
.br-eff{font-size:.74rem}

/* Trio de comptages */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait);margin:2rem 0 0}
.tuile{background:var(--planche);padding:1.3rem 1.2rem}
.tuile .n{font-family:var(--ff-serif);font-weight:700;
  font-size:2.9rem;line-height:1;color:var(--signal);display:block}
.tuile .l{font-family:var(--ff-sans);font-size:.78rem;
  color:var(--encre-2);display:block;margin-top:.5rem;line-height:1.45}
.tuile code{font-family:var(--ff-sans);font-weight:700;
  color:var(--encre);font-size:.82rem}

/* Comparaison des taux d'affichage */
.taux{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.8rem;margin:1.9rem 0 0}
.jauge-t{font-family:var(--ff-sans)}
.jauge-t .v{font-family:var(--ff-serif);font-weight:700;
  font-size:2.5rem;line-height:1;display:block;margin-bottom:.55rem}
.jauge-t .piste{height:9px;background:color-mix(in srgb,var(--trait) 55%,transparent)}
.jauge-t .rem{height:100%}
.jauge-t .l{font-size:.78rem;color:var(--encre-2);display:block;
  margin-top:.55rem;line-height:1.45}
.t-ia .v{color:var(--signal)} .t-ia .rem{background:var(--signal);width:28%}
.t-reste .v{color:var(--encre)} .t-reste .rem{background:var(--tech);width:52%}

/* Réserves */
.reserve{border-left:2px solid var(--signal);padding-left:1.4rem;
  max-width:34rem}
.reserve p:last-child{margin-bottom:0}

/* Clôture */
.cloture{font-family:var(--ff-serif);font-weight:400;
  font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.35;max-width:32ch}
.appel{font-family:var(--ff-sans);font-size:.9rem;
  color:var(--encre-2);margin-top:2rem}
.appel a{color:var(--signal);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--signal) 45%,transparent)}
.appel a:hover{border-bottom-color:var(--signal)}

.radar footer{border-top:1px solid var(--trait);padding:2.4rem 0 3.4rem;
  font-family:var(--ff-sans);font-size:.76rem;line-height:1.65;
  color:var(--encre-2)}
.radar footer p{max-width:44rem;margin-bottom:.9rem}
.radar footer b{color:var(--encre);font-weight:700}

.defile{overflow-x:auto}

/* ONGLETS SANS JAVASCRIPT. La page est encapsulée par la plateforme et ses
   scripts ne s'exécutent qu'après le flux : un onglet piloté par script
   pourrait rester vide un instant. Deux boutons radio cachés et le sélecteur
   :checked font le même travail, tout de suite et sans dépendance. */
.ong{display:none}
.barre{display:flex;gap:0;border-bottom:1px solid var(--trait);margin:2.4rem 0 0;
  flex-wrap:wrap}
.barre label{font-family:var(--ff-sans);font-size:.82rem;font-weight:700;
  letter-spacing:.03em;padding:.75rem 1.15rem;cursor:pointer;color:var(--encre-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none}
.barre label:hover{color:var(--encre)}
.barre label span{font-weight:400;opacity:.75}
#o1:checked ~ .barre label[for=o1],
#o2:checked ~ .barre label[for=o2]{color:var(--encre);border-bottom-color:var(--signal)}
.pan{display:none}
#o1:checked ~ .radar-grille .pan-1,#o2:checked ~ .radar-grille .pan-2{display:block}
#o1:checked ~ .radar-grille .som-1,#o2:checked ~ .radar-grille .som-2{display:block}
.ong:focus-visible ~ .barre label{outline:2px solid var(--signal);outline-offset:2px}
.rappel{font-family:var(--ff-sans);font-size:.79rem;color:var(--encre-2);
  border-left:2px solid var(--trait);padding-left:1rem;margin:1.8rem 0 0;max-width:44rem}

@media (max-width:560px){
.radar{font-size:16px}
  .barres{grid-template-columns:1fr 2.4rem 3.2rem;gap:.3rem .6rem}
  .br-nom{grid-column:1/-1;padding-top:.5rem;font-size:.78rem}
  .br-piste{grid-column:1/2}
  .br-tete{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* --- Raccords avec le gabarit du site ---------------------------------- */

.page-observatoire .site-header {
  background: rgba(17, 30, 53, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(200, 168, 80, 0.22);
}

/* L'espace entre le bandeau et la barre de volets vit dans observatoire.css :
   regle COMMUNE aux deux volets. Elle etait portee ici seulement, et manquait
   donc au volet reglementaire (signale par Olivier le 18/08/2026). */

.radar {
  padding-top: clamp(1rem, 2.5vw, 1.6rem);
}

/* --- Onglets collants et sommaire par onglet ----------------------------- */
/* Demande d'Olivier du 19/08/2026. Trois éléments s'empilent en haut d'écran,
   dans cet ordre : l'en-tête du site (fixe, 84 px), la barre des deux mesures,
   puis le sommaire de l'onglet. Chacun se colle SOUS le précédent, sinon ils
   se recouvrent. */
.radar .bascule {
  position: sticky;
  top: var(--header-height);
  z-index: 3;
  background: var(--papier);
  margin: 0;
  padding: clamp(1.2rem, 3vw, 1.8rem) 0 0.5rem;
}
.radar .barre {
  position: sticky;
  top: calc(var(--header-height) + 3.4rem);
  z-index: 3;
  background: var(--papier);
  margin-top: 0;
}

/* L'enveloppe de Prosper fait 1060 px : y loger une colonne de sommaire
   aurait rétréci son contenu d'un quart. Sur cette page elle prend la largeur
   du site, et le contenu retrouve ~1030 px une fois le sommaire déduit. */
.radar .enveloppe {
  max-width: var(--container-max);
}
/* Les graphiques de Prosper n'ont ni largeur ni largeur minimale : ils
   suivent leur conteneur et s'effondrent avec lui. Sur téléphone, celui de
   l'onglet des intitulés rendait à 24 px de large. Correctif proposé par
   Nestor le 18/08/2026 : une largeur minimale, le conteneur portant déjà
   `overflow-x: auto` pour offrir le défilement horizontal. */
.radar .defile svg {
  display: block;
  width: 100%;
  min-width: 640px;
}

/* --- Grille de page : une colonne de sommaire pour TOUT le contenu ------- */
/* Le sommaire cessait de suivre la lecture des « Ce que ce document est » :
   il collait dans la grille du panneau, et n'avait plus de conteneur passé la
   fin de celui-ci. La colonne court désormais sur toute la page, panneaux,
   sections communes, comparaison externe et méthode compris. */
.radar-grille {
  display: grid;
  grid-template-columns: var(--colonne-sommaire) 1fr;
  gap: var(--ecart-grille);
  align-items: start;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.radar-corps { min-width: 0; }
.radar-sommaires {
  position: sticky;
  top: var(--haut-colle);
  align-self: start;
  max-height: calc(100vh - var(--haut-colle) - 2rem);
  overflow-y: auto;
}
/* Un seul sommaire visible : celui de l'onglet actif. */
.radar .som-1, .radar .som-2 { display: none; }

/* Une seule méthode depuis le 19/08 : les deux onglets viennent du même
   relevé, elle vaut donc pour les deux. */

/* Cliquer une entrée du sommaire doit amener la section SOUS les barres
   collantes, pas derrière elles. Sans cette marge, la section arrivait
   250 px trop haut et le lecteur croyait le lien mal réglé. */
.radar-corps > section,
.radar .pan > section,
.radar-corps > footer {
  scroll-margin-top: calc(var(--haut-colle) + 1.5rem);
}

/* Le site applique `section { padding: ... var(--container-gutter) }` à TOUTE
   section. Celles de Prosper héritaient donc de 49 px de retrait horizontal,
   qui poussaient tous leurs titres hors de l'axe de lecture. La règle
   `.radar section` de sa feuille ne remet que le rythme vertical. */
.radar section {
  padding-inline: 0;
}

.radar {
  --colonne-sommaire: 15rem;
  --ecart-grille: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  /* Hauteur cumulée de ce qui reste collé en haut d'écran : l'en-tête du
     site, la consigne des onglets et la barre des deux mesures. Mesurée à
     250 px sur grand écran. Tout ce qui doit se placer sous eux s'y réfère. */
  --haut-colle: calc(var(--header-height) + 11rem);
}


/* UN SEUL AXE DE LECTURE. Mesuré le 19/08/2026 : la page en comptait quatre.
   Le contenu des onglets commençait à 435 px, le chiffre de tête et les
   réserves à 307, la barre d'onglets et le rappel à 123. Sur une vue
   d'ensemble, cela se voit immédiatement et ne se justifie par rien.

   Tout ce qui se lit s'aligne donc sur la colonne de contenu, comme sur la
   page Méthode du site : le sommaire occupe seul la marge de gauche. Ces
   blocs ne sont pas mis DANS la grille — ils n'ont pas de sommaire à porter,
   et la grille les contraindrait sans raison. */
.radar .bascule,
.radar .barre {
  padding-left: calc(var(--colonne-sommaire) + var(--ecart-grille));
}
/* Les sections de Prosper portent un filet de séparation : la première d'un
   panneau n'a plus rien au-dessus d'elle. */
.radar .pan > section:first-of-type { padding-top: 0; }

.method-toc--radar {
  position: sticky;
  /* Sous l'en-tête, sous la consigne, sous la barre des onglets. */
  top: calc(var(--header-height) + 8rem);
  align-self: start;
  padding: 0 var(--s-4) var(--s-4) 0;
  border-right: 1px solid var(--trait);
  max-height: calc(100vh - var(--haut-colle) - 2rem);
  overflow-y: auto;
}
.method-toc--radar .method-toc__label {
  font-family: var(--ff-sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--encre-2);
  margin: 0 0 var(--s-3);
}
.method-toc--radar .method-toc__text { font-size: 0.82rem; }

/* Renvoi vers l'autre mesure, en fin d'onglet. Un label, pas un lien : il
   bascule sans JavaScript, comme la barre du haut. */
.radar .bascule-fin {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding-top: clamp(1.2rem, 3vw, 1.8rem);
  border-top: 1px solid var(--trait);
}
.radar .bascule-fin label {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--encre);
  background: #FFFFFF;
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 0.75rem 1.15rem;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.radar .bascule-fin label:hover {
  background: var(--c-glacier);
  border-color: var(--signal);
}

/* --- Le chiffre de tête -------------------------------------------------- */
/* Il était dans le second onglet, donc invisible à l'arrivée : c'est le seul
   rapport dont Prosper réponde sans réserve, il doit être le premier lu.
   Hors des onglets, hors de l'enveloppe de Prosper : sa propre largeur. */
.radar section.radar-tete {
  max-width: var(--container-max);
  margin: 0 auto;
  /* Le padding-block de Prosper (--pas) s'appliquait à ce bloc, qui est une
     section : 85 px au-dessus et au-dessous à 1600 px, soit près de trois
     cents pixels de blanc autour du chiffre. Signalé par Olivier le 19/08. */
  padding: clamp(1rem, 2.5vw, 1.8rem) clamp(1.1rem, 4vw, 2.6rem) clamp(1.5rem, 3vw, 2.2rem)
           calc(clamp(1.1rem, 4vw, 2.6rem) + var(--colonne-sommaire) + var(--ecart-grille));
}
.radar-tete__valeur {
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: clamp(4.5rem, 3rem + 8vw, 9rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--signal);
  margin: 0 0 clamp(1rem, 3vw, 1.6rem);
}
.radar-tete__phrase {
  font-family: var(--ff-serif);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  line-height: 1.3;
  color: var(--encre);
  max-width: 30ch;
  margin: 0 0 1rem;
}
.radar-tete__phrase b { font-weight: 600; background: none; }
.radar-tete__preuve {
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  color: var(--encre-2);
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--trait);
  max-width: 34rem;
}

/* --- Mesure externe, mise en garde, réserves ----------------------------- */
/* En fin de page, parce qu'elles disent ce que la page NE mesure PAS : le
   lecteur doit d'abord avoir lu ce qu'elle mesure. */
.radar section.radar-reserves {
  max-width: var(--container-max);
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.1rem, 4vw, 2.6rem) 0
           calc(clamp(1.1rem, 4vw, 2.6rem) + var(--colonne-sommaire) + var(--ecart-grille));
  border-top: 1px solid var(--trait);
}
.radar-reserves__titre {
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  line-height: 1.15;
  color: var(--encre);
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
  max-width: 24ch;
}
.radar-reserves__bloc { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.radar-reserves__bloc:last-child { margin-bottom: 0; }
.radar-reserves__bloc h3 {
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-2);
  margin: 0 0 0.7rem;
}
.radar-reserves__bloc p {
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--encre);
  max-width: 44rem;
  margin: 0 0 0.7rem;
}
.radar-reserves__note {
  font-size: 0.82rem !important;
  color: var(--encre-2) !important;
}
/* La mise en garde est la seule à porter un filet : elle protège le lecteur
   d'un chiffre faux, elle ne se lit pas comme le reste. */
/* Le rappel de méthode en tête d'onglet porte lui aussi un filet à gauche. */
.radar .rappel {
  margin-left: -1rem;
}

/* Prosper encadre ses réserves d'un filet à gauche. Comme pour la mise en
   garde, le filet passe dans la marge pour que le texte reste sur l'axe. */
.radar .reserve {
  margin-left: -1.4rem;
}

.radar-reserves__bloc--garde {
  border-left: 2px solid var(--signal);
  padding-left: clamp(1rem, 2.5vw, 1.4rem);
  /* Le filet sort dans la marge : sans cela il poussait tout l'encadré de
     26 px et cassait l'axe de lecture. */
  margin-left: calc(-1 * clamp(1rem, 2.5vw, 1.4rem) - 2px);
}

/* Dans la grille de page, la comparaison externe et la méthode n'ont plus de
   retrait propre : la colonne le porte pour elles. Cette règle doit venir
   APRÈS celles qui posent le retrait, sinon elle ne s'applique pas. */
.radar .radar-corps section.radar-reserves,
.radar .radar-corps footer {
  padding-left: 0;
  margin-left: 0;
  max-width: none;
}

/* Sous 1024 px, la grille s'effondre et le sommaire passe au-dessus du
   contenu, sans collage : deux éléments collants sur un petit écran mangent
   la moitié de la hauteur utile. */
@media (max-width: 1023px) {
  /* La grille de page s'effondre : le sommaire passe au-dessus du contenu,
     qui reprend toute la largeur. Sans cette règle la colonne de sommaire
     gardait ses 15 rem et le contenu tombait à 79 px sur un téléphone. */
  .radar-grille { grid-template-columns: 1fr; }
  .radar-sommaires {
    position: static;
    max-height: none;
    overflow-y: visible;
    border-bottom: 1px solid var(--trait);
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-4);
  }

  .radar .enveloppe > section,
  .radar footer,
  .radar .bascule,
  .radar .barre,
  .radar .pan > .rappel { padding-left: 0; }
  .radar section.radar-tete,
  .radar section.radar-reserves { padding-left: clamp(1.1rem, 4vw, 2.6rem); }
  .method-toc--radar {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--trait);
    padding: 0 0 var(--s-4);
  }
  .radar .bascule, .radar .barre { position: static; }
}