/* ══════════════════════════════════════════════════════════════════════════
   FICHE CANDIDAT — LE DESSIN, UNE SEULE FOIS, POUR LES DEUX PAGES.

   La fiche etait dessinee DEUX fois : le <style> de profil.html d'un cote,
   les styles injectes par fiche-candidat.js de l'autre, 119 classes contre
   67, et pas UNE en commun. Les deux ecrans se ressemblaient parce que la
   forme avait ete recopiee, pas parce qu'ils lisaient la meme definition.
   Ce fichier est cette definition. Il est charge par profil.html (la fiche
   publique lue par un recruteur) et par mon-profil.html (l'espace candidat).

   LE RECRUTEUR EST LA REFERENCE. Tout ce qui suit vient du <style> de
   profil.html, DEPLACE PAR LA MACHINE, regle par regle, sans retouche : c'est
   ce qui rend le controle « rien n'a bouge cote recruteur » prouvable. Le
   candidat adopte ce dessin.

   CE QUI RESTE DANS LES PAGES, ET POURQUOI. profil.html garde l'habillage
   propre au recruteur — bandeau de revelation, barre de contact, navigation
   entre profils, profils similaires, lecteur flottant, fenetre de contact, et
   tout le chemin des huit profils de demonstration. mon-profil.html garde sa
   barre d'onglets, sa carte `pcp-*`, son formulaire, et la grille du hero qui
   pose cette carte a cote du radar. Aucune de ces regles n'appartient a la
   fiche : les mettre ici les aurait servies a une page qui ne les emploie pas.

   LES SEULES CLASSES `fc-` QUI SURVIVENT sont en bas de ce fichier : le bloc
   sous la carte du candidat (etat de visibilite, bascule, « Copier mon lien »)
   et l'enveloppe de « Forces & axes » cote candidat. Elles n'ont pas
   d'equivalent chez le recruteur — elles ne sont pas une divergence, elles
   sont ce que `vue:'candidat'` dessine en plus.

   Ce fichier est SERVI : il ne rejoint pas .vercelignore, comme style.css.
   ══════════════════════════════════════════════════════════════════════════ */

.profil-hero{flex:1;display:flex;align-items:center;}
/* LE HERO RÉCLAME TOUTE LA LARGEUR. `.profil-hero` est une boîte flexible et
   ce qu'elle contient y est un élément flexible : rien ne l'étire tout seul.
   Le hero n'est plus dans un `.container` — la bande sombre va bord à bord,
   c'est ce que la maquette dessine — donc c'est l'enfant direct qu'on étire. */
.profil-hero > *{width:100%;}
/* LE HERO — UNE BANDE SOMBRE PLEINE, BORD À BORD, 386 px de haut à 1280 px.

   Le chantier 19 ne le décrivait pas : la fiche avait gardé le certificat crème
   encadré. La maquette A dessine tout autre chose — fond encre plein, pas de
   cadre, pas de bandeau de certificat en haut, pas de coin arrondi. La bande
   crème du chantier 19 vient se poser DIRECTEMENT dessous, sans crème parasite
   entre les deux.

   LA GÉOMÉTRIE EST CELLE DE LA MAQUETTE, relevée à 1280 px de large : marge
   intérieure 38/40, rangée plafonnée à 1200 px et centrée. Les quatre colonnes
   valent donc 294 + 308 + 138 + le reste, ce qui pose le cadre photo à 40, le
   nom à 334, le score à 642 et le radar à 780 — exactement les abscisses
   mesurées. Le contrôle de recette les relit dans le navigateur.

   LA HAUTEUR EST PORTÉE PAR LE RADAR : 38 + 310 + 38 = 386. Le cadre photo,
   plus court de sept pixels, est centré. Le hero GRANDIT quand la colonne du
   portrait porte un réglage — la bascule du candidat, le bouton de révélation
   du recruteur : la maquette dessine un candidat public sans réglage, et un
   bouton ne se supprime pas pour tenir une hauteur. */
/* ── LE BORD GAUCHE, UN SEUL POUR TOUTE LA PAGE — consigne d'Anthony du 17/09.
   « Le cadre gauche de la photo s'aligne sur la même verticale que le début des
   blocs du dessous. »

   POURQUOI ILS NE S'ALIGNAIENT PAS, ET C'EST DE L'ARITHMÉTIQUE, PAS UN RÉGLAGE.
   Les blocs crème vivent dans `.container` — `max-width:1240px`, `padding:0 40px`,
   donc 1160 px de contenu. Le hero avait sa propre géométrie : `padding:40px`
   sur la bande, puis une rangée plafonnée à 1200. Deux plafonds différents, donc
   deux bords gauches différents, et l'écart varie avec la largeur :

     largeur utile   bord du hero   bord des blocs   écart
        1265              40              52,5        12,5
        1905             352,5           372,5        20

   Ce sont exactement les 12 et 20 px relevés au navigateur le 17/09. L'écart
   vaut zéro sous 1240, monte jusqu'à 20 entre 1240 et 1280, puis reste à 20.

   LA CORRECTION NE POUSSE AUCUN PIXEL : la rangée du hero prend la géométrie
   DU CONTENEUR — même plafond, même marge intérieure. L'alignement devient vrai
   par construction, à toutes les largeurs et dans les deux vues, sans `calc`,
   sans nombre magique, et sans média-requête.

   CE QUE ÇA COÛTE, ET IL FAUT LE SAVOIR : la rangée passe de 1185/1200 à
   1160 px. Les trois premières colonnes sont fixes (294 + 308 + 138 = 740), donc
   les 25 à 40 px partent de la QUATRIÈME — celle du radar, qui tombe à 420, son
   minimum. Le score et le radar se décalent donc vers la droite du même 12,5 à
   20 px que la photo. C'est inévitable : on ne peut pas déplacer le bord gauche
   d'une rangée sans déplacer ce qu'elle contient, et le § 4 interdit de changer
   les écarts à l'intérieur du bloc. La maquette laisse au radar 87 px de marge
   à droite : il y a la place. */
/* ── § 4 DU 22 BIS : LE HERO N'EST PLUS UNE BANDE, C'EST UN CADRE.
   Consigne d'Anthony du 17/09, sur relevé au navigateur, polices chargées :
   le cadre est 5 px plus large que les blocs DE CHAQUE CÔTÉ — à 1280 px, de
   47,4 à 1217,4 quand les blocs vont de 52,4 à 1212,4.

   COMMENT LES 5 PX TIENNENT À TOUTES LES LARGEURS, SANS NOMBRE MAGIQUE :
   l'enveloppe `.cert-cadre` porte la géométrie des blocs — même plafond, même
   marge que `.container` — et le cadre en déborde de 5 px par une marge
   négative. L'écart ne dépend donc d'aucune largeur de fenêtre.

   ET LE CONTENU RESTE SUR LA VERTICALE DES BLOCS, ce qui est la règle du 22 :
   le cadre rentre de 5 px vers l'intérieur — 1 px de bordure + 4 px de marge
   intérieure —, donc le bord gauche de la photo retombe exactement sur celui
   des blocs. La rangée retrouve ses 1160 px de contenu, ni plus ni moins.
   ⚠ C'est une marge serrée, et elle est voulue : 4 px entre la bordure et la
   photo. Anthony la juge sur l'aperçu.

   LA BORDURE EST LA LIGNE LA PLUS MARQUÉE DU RADAR, rendue opaque. Relevé :
   le contour extérieur du radar vaut `rgba(201,168,106,.55)` sur l'encre, soit
   #7a6c4a une fois aplati. On écrit la couleur OPAQUE : la même bordure en
   transparence, posée sur le crème de la page, ne donnerait pas la teinte du
   radar — elle est mesurée sur encre, pas sur crème. */
/* ── § 3 DU 22 TER : LE CADRE DÉBORDE DE 50 px DE CHAQUE CÔTÉ.
   Relevé de départ : blocs 52,4 → 1212,4, hero 47,4 → 1217,4. Attendu :
   2,4 → 1262,4 à 1280 px, soit les bords des blocs moins et plus 50.

   ÉCRIT COMME UN PLAFOND, PAS COMME UNE MARGE NÉGATIVE, et c'est ce qui rend
   la consigne « jamais de défilement horizontal » vraie par construction. Les
   blocs commencent à (L − min(L, 1240)) / 2 + 40 ; ce cadre commence à
   (L − min(L, 1260)) / 2. Les deux ne diffèrent de 50 que tant qu'il y a
   50 px à prendre : dès que la fenêtre descend sous 1260 px, le cadre est
   simplement collé au bord et ne sort jamais de l'écran. Une marge négative
   de −50 px, elle, aurait débordé de 10 px à 1240 px et fait apparaître une
   barre de défilement.
   LE DÉBORD COMPLET N'EXISTE DONC QU'À PARTIR DE 1260 px de largeur utile.
   En dessous, il vaut la place disponible, et à 900 px la règle étroite rend
   au cadre la gouttière de la page. */
.cert-cadre{max-width:1260px;margin:0 auto;padding:0;}
/* `--photo-bas` : LE BAS DE LA PHOTO, ÉCRIT UNE SEULE FOIS. Le rôle (§ 3) et le
   bloc du score (§ 6) s'alignent dessus : 4 px de décalage de la colonne du
   portrait + 303 px de photo. L'écrire trois fois aurait fait trois vérités à
   tenir d'accord. */
/* ── § 1 DU 22 TER : LE FILET SE VOIT. « On ne le voit même pas » : 1 px de
   #7a6c4a rendait 0,8 px à l'écran. Il passe à 3 px et à #5c5038, le contour
   du radar assombri. Valeur à valider sur l'aperçu, pas règle.
   ── § 3 : LA MARGE INTÉRIEURE PORTE LES 15 px. La photo et le radar doivent
   se tenir à 15 px du bord INTÉRIEUR du filet : c'est exactement ce que fait
   un retrait de 15 px à l'intérieur d'une bordure de 3 px. Aucun décalage
   n'est écrit sur la photo ni sur le radar — ils occupent le contenu du
   cadre, et c'est le cadre qui a bougé.
   LE DÉBORD N'EST PLUS ICI : il est devenu le plafond de l'enveloppe. */
/* `--photo-large` : LA LARGEUR DE LA PHOTO, ÉCRITE UNE SEULE FOIS. Trois
   choses s'y alignent — le cadre lui-même, ce qui vit dessous, et la rangée de
   visibilité du chantier 24 B. Trois copies de 264 auraient divergé le jour où
   l'une des trois change. */
/* `--nom-plancher` : LA TAILLE SOUS LAQUELLE LE FILET NE DESCEND PAS.
   Il est ici et pas dans `fiche.js` parce que c'est la feuille de style qui
   connaît la largeur de la fenêtre : recopier son point de bascule dans le
   script en ferait une seconde source. Sous ce plancher, un nom cesse d'être
   lisible — il déborde alors de nouveau plutôt que de devenir un trait. */
/* ── LOT 35-6 : LE BAS DU HERO GAGNE 9 px, CHEZ LE CANDIDAT ET CHEZ LE RECRUTEUR.
   La piste de statut fait 30 px au lieu des 21 de l'interrupteur (maquette A).
   Elle vit hors du flux, dans le blanc sous la photo : 3 px de colonne + 38 px
   de remplissage = 41 px, qui tenaient 10 + 21 + 10. Il en faut 10 + 30 + 10 =
   50 : le remplissage du bas passe de 38 à 47 px. La règle est sur `.cert`,
   que les deux vues partagent : les deux heros grandissent ensemble, au pixel. */
.cert{--nom-plancher:24px;--photo-bas:307px;--photo-large:264px;background:var(--ink);color:var(--cream);border:3px solid #5c5038;border-radius:8px;padding:38px 15px 47px;margin:0;}
/* LES COLONNES SONT CALÉES EN HAUT, PAS CENTRÉES, et chacune porte son propre
   décalage : c'est ce que le relevé décrit. Le cadre photo descend de 4 px, le
   radar part du haut, le nom part du haut, le score descend de 55 px. */
/* LA GÉOMÉTRIE EST PASSÉE SUR L'ENVELOPPE — la rangée ne la porte plus. Elle
   occupe simplement le contenu du cadre, qui vaut les 1160 px des blocs. */
/* ── §§ 3 ET 4 DU 22 TER : TROIS COLONNES AU LIEU DE QUATRE.
   La colonne du score disparaît — le score est passé dans le bloc du nom.

   LA PREMIÈRE COLONNE VAUT 326 px, ET CE NOMBRE EST CALCULÉ, PAS CHOISI.
   Consigne : la photo s'écarte vers la gauche, mais le bloc nom / score / rôle
   « NE BOUGE PAS horizontalement ». Le bloc du nom commençait au bord des
   blocs + 294. Il commence maintenant au bord du cadre + 3 (filet) + 15
   (retrait) + cette colonne. Or le cadre est à 50 px en dehors des blocs :
   il faut donc 50 + 294 − 18 = 326 px pour retomber exactement au même
   endroit. Vérifié par le calcul à sept largeurs.
   LA DERNIÈRE COLONNE PREND LE RESTE ET LE RADAR SE COLLE À SON BOUT : la
   place libérée par la colonne du score s'ajoute au centre, elle n'agrandit
   rien — le radar garde ses 420 px. */
.cert-corps{display:grid;grid-template-columns:326px 308px minmax(0,1fr);align-items:start;min-height:310px;}
/* LA COLONNE DU PORTRAIT. Elle porte AUSSI le seul réglage que la page
   autorise — la bascule de visibilite du candidat, « Reveler ce candidat »
   chez le recruteur. Ils etaient sur creme, ils sont sur encre : seul leur
   habillage change, leur mecanique est inchangee. */
.cert-colonne-portrait{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:4px;}
/* LE PORTRAIT QUITTE LE CERCLE POUR UN CADRE PRESQUE CARRÉ, bordé d'or fin.
   C'est le changement le plus visible de la maquette. LE FLOU PORTE SUR LE
   CONTENU DU CADRE, JAMAIS SUR LE CADRE : un profil masqué garde le même
   cadre net, et seul ce qu'il contient devient une tache. */
.cert-portrait{width:var(--photo-large);height:303px;flex:none;border:2px solid var(--gold);border-radius:6px;background:transparent;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cert-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
/* LA SILHOUETTE EST UN CARACTÈRE, DONC EN COULEUR. Sur l'encre, le bleu de
   l'émoji se lisait comme une tache bleue et non comme une absence de photo :
   on le désature et on l'éclaircit pour qu'il reste du même monde que le reste. */
.cert-silhouette{font-size:92px;line-height:1;opacity:.3;filter:grayscale(1) brightness(1.7);}
.cert-portrait.cert-floute img,.cert-portrait.cert-floute .cert-silhouette{filter:blur(18px);user-select:none;pointer-events:none;}
/* ── § 3 DU 22 BIS : LE RÔLE DESCEND AU BAS DE LA PHOTO. Relevé : bas de la
   photo 435,9, bas du rôle 317,3. Le nom reste en haut.
   ON NE POUSSE PAS DE PIXELS : la colonne prend la hauteur du bas de la photo
   et répartit ses deux enfants aux extrémités. L'alignement tient donc tout
   seul quand le nom passe d'une ligne à deux, ou change de corps. */
.cert-qui{min-width:0;height:var(--photo-bas);display:flex;flex-direction:column;justify-content:space-between;}
/* LE NOM N'EST PLUS EN SERIF. Big Shoulders condensé, 900, en capitales, sur
   deux lignes — prénom puis nom. Trois corps seulement, par paliers : deux
   fiches voisines ne doivent pas se lire à des tailles quelconques. */
/* L'ÉCART SOUS LE NOM EST EN `em`, PAS EN PIXELS. Avec un interligne de 0,84
   les glyphes débordent de leur propre boîte : l'écart qui pose la ligne de
   base du rôle au bon endroit vaut 0,5625 em, soit les 54 px du relevé à
   96 px — et il suit le corps quand un nom long le fait descendre. */
/* LES DEUX ÉCARTS SONT EN `em`, ET ILS SONT MESURÉS SUR L'ENCRE, pas sur la
   boîte. Avec un interligne de 0,84 les glyphes débordent largement de leur
   propre boîte : la boîte du nom commence 40 px au-dessus de sa première ligne
   de base, et se termine 74 px au-dessus de la dernière. Lire `offsetTop` ne
   dit donc rien de ce qu'on voit. Ces deux valeurs posent la première ligne de
   base à 150 et celle du rôle à 265 — le relevé de la maquette — et elles
   suivent le corps quand un nom long le fait descendre. */
/* ── § 2 DU 22 BIS : L'ACCENT DE LA SECONDE LIGNE NE TOUCHE PLUS LA PREMIÈRE.
   Relevé au navigateur, Big Shoulders Display 900 à 76 px, polices chargées :
   capitales sans accent 62 px (« CANDIDAT »), avec accent 75 px (« MASQUÉ ») —
   l'accent monte donc de 13 px au-dessus des capitales. L'interligne valait
   63,84 px (0,84) : l'accent entrait d'environ 12 px dans la ligne du dessus.

   LA RÈGLE, ET ELLE VAUT POUR TOUT NOM SUR DEUX LIGNES — un « ÉLODIE » ferait
   exactement la même chose que « MASQUÉ » : interligne = hauteur des capitales
   + hauteur de l'accent + 4 px de blanc.

   ÉCRITE EN `calc`, PAS EN RATIO ARRONDI, et c'est ce qui la rend juste aux
   TROIS corps du nom. Les 75 px mesurés à 76 px de corps font 0,987 em, qui
   suit le corps ; les 4 px de blanc, eux, ne suivent pas — un blanc de 4 px
   reste un blanc de 4 px. Un ratio unique de 1,05 aurait manqué de 0,2 px au
   corps de 60. Ce que ça donne : 79,0 px à 76 px de corps, 98,8 à 96, 63,2 à 60
   — toujours au-dessus du minimum, à chaque palier. */
/* ── § 7 DU 22 TER : 3 px RELEVÉS POUR 4 DEMANDÉS. Le calcul du 22 bis
   oubliait le jambage de la ligne du dessus — 1 px sous la ligne de base de
   « CANDIDAT ». Le blanc déclaré perd donc 1 px à l'arrivée : 4 déclarés
   rendaient 3 mesurés. On déclare 5. */
.cert-nom{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:var(--cream);letter-spacing:-.03em;line-height:calc(.987em + 5px);margin:.375em 0 .1875em;}
.cert-nom span{display:block;white-space:nowrap;}
/* ── LE PALIER DE 96 px A DISPARU, ET C'EST UNE CONSÉQUENCE DU § 4, PAS UN
   CHOIX DE STYLE. Le score est entré dans cette colonne, dont la hauteur est
   celle de la photo (307 px). Un nom de deux lignes à 96 px en occupe déjà
   253,5, le rôle 18 : il reste 35,5 px pour le score ET ses deux marges de
   16 px, soit 3,5 px pour le chiffre lui-même. Le palier n'était donc plus
   tenable — ce n'est pas une question de goût, il n'y avait plus la place.
   Conséquence à dire : les noms assez courts pour s'afficher à 96 px
   s'affichent maintenant à 76. */
.cert-nom-76{font-size:76px;}
.cert-nom-60{font-size:60px;}
/* ── CHANTIER 24 A : LE TROISIÈME PALIER ───────────────────────────
   IL N'Y A RIEN À RECALCULER POUR LUI, ET C'EST VOULU. L'interligne et le blanc
   sous l'accent sont écrits en `calc(.987em + 5px)` sur `.cert-nom` : la part
   en `em` suit le corps, les 5 px de blanc n'ont pas à le suivre. Le palier de
   48 px hérite donc de la règle du 22 bis sans qu'on la réécrive — c'est
   exactement pour ça qu'elle avait été écrite en `calc` plutôt qu'en ratio
   arrondi. À 48 px, l'interligne vaut 52,4 px. Vérifié au navigateur, pas
   déduit : l'accent de « MASQUÉ » n'entre pas dans la ligne du dessus. */
.cert-nom-48{font-size:48px;}
/* ── CHANTIER 24 bis : LE QUATRIÈME PALIER ─────────────────────────
   48 px ne suffisait pas à « MARCHAL-BEAUMONT » (360 px dessinés pour 308
   disponibles, mesuré). À 40 px il en fait 300 : il tient. Au-delà, c'est le
   filet de `fiche.js` qui prend la suite — la taille s'y calcule au lieu de se
   choisir, et ce palier est le dernier à être un palier. */
.cert-nom-40{font-size:40px;}
.cert-role{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-glow);line-height:1.5;margin:0;}
/* LE SCORE EST POSÉ NU SUR L'ENCRE : aucun fond, aucune pastille, aucun cadre.
   La couleur seule porte le palier — et aucun mot ne dit lequel. Sous le
   chiffre, et non à côté, la mention à chasse fixe. */
/* LE SCORE DESCEND DE 55 px : sa ligne de base tombe alors à 189 du haut du
   hero, et celle de sa mention à 245 — les deux valeurs du relevé. */
/* ── § 6 DU 22 BIS : LE BLOC DU SCORE ENTIER DESCEND, jusqu'à ce que le bas de
   son libellé touche l'horizontale du bas de la photo — la même ligne que le
   rôle. L'écart entre le chiffre et son libellé ne change pas : c'est le bloc
   qui descend, pas ses pièces qui s'écartent. Les 49 px de décalage du haut
   n'ont plus de raison d'être — c'était le réglage d'un bloc calé en haut. */
/* ── § 4 DU 22 TER : LE SCORE SE RANGE ENTRE LE NOM ET LE RÔLE.
   Plus de colonne à lui : il est le deuxième des trois enfants du bloc du
   nom, qui les répartit du haut au bas de la photo. Le libellé passe À DROITE
   du chiffre, sur la même ligne de base — `align-items:baseline` le pose là
   sans qu'aucun décalage ne soit écrit.

   LES 16 px DE BLANC SONT DANS LA MARGE, PAS DANS UN CALCUL DE POLICE, et
   c'est délibéré : une marge de 16 px tient sa promesse quelle que soit la
   police servie, alors qu'un blanc déduit de la hauteur des glyphes serait
   faux le jour où la police change.

   LE CORPS DE 64 px EST CALCULÉ. La colonne fait 307 px. Le nom à 76 px en
   occupe 202,8 (deux lignes de .987em + 5px, plus ses marges de .375 et
   .1875 em), le rôle 18 : il reste 86,2 px pour le score et ses deux marges
   de 16. Le chiffre ne peut donc pas dépasser 54,2 px de boîte de ligne, soit
   69 px de corps à `line-height:.78`. On prend 64 : la boîte fait 49,9, il
   reste 4,3 px de jeu, et le blanc réel des glyphes vaut 31 px au-dessus et
   17 au-dessous — les deux au-delà des 16 demandés. Au palier de 60 px du
   nom, il en reste 45 de jeu. */
.cert-score{display:flex;align-items:baseline;gap:14px;margin:16px 0;}
.cert-score-val{font-family:var(--font-display);font-weight:900;font-size:64px;line-height:.78;letter-spacing:-.04em;color:rgba(255,248,231,.5);}
.cert.s1 .cert-score-val{color:var(--score-1);}
.cert.s2 .cert-score-val{color:var(--score-2);}
.cert.s3 .cert-score-val{color:var(--score-3);}
/* LA MENTION TIENT SUR UNE LIGNE, et elle n'est plus dessous mais À DROITE du
   chiffre (§ 4 du 22 ter). Ses 148 px mesurés débordaient de la colonne du
   score, qui en faisait 138 ; ils tiennent maintenant largement dans la
   colonne du nom, aux côtés d'un chiffre de deux caractères.
   SON DÉCALAGE DU HAUT N'A PLUS DE SENS : le libellé était sous le chiffre, il
   est à côté, et c'est la ligne de base commune qui le place. */
.cert-score-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:rgba(255,248,231,.62);}
/* LE RADAR EST POUSSÉ AU BOUT DE SA COLONNE : son bord droit tombe donc sur
   le bord du contenu du cadre, c'est-à-dire à 15 px du bord intérieur du
   filet, en miroir de la photo (§ 3). Sa taille ne change pas. */
/* ── CHANTIER 23 C : LE RADAR NE TOUCHE PLUS LE BLOC DU NOM ─────────────
   Mesuré au 22 ter : à 1100 px de large, le radar arrivait à une dizaine de
   pixels du bloc du nom, et à 1024 il le touchait — 0 px, sans chevauchement.

   LA GARDE EST UN RETRAIT SUR LA COLONNE DU RADAR, ET C'EST LE SEUL RÉGLAGE QUI
   TIENNE LES TROIS CONSIGNES À LA FOIS. Un `column-gap` sur la rangée
   déplacerait le bloc du nom — interdit. Une largeur minimale sur la troisième
   colonne pousserait le hero à déborder. Ce retrait-ci, lui, se prend sur la
   BOÎtE DE CONTENU de la colonne : le `max-width:100%` du radar s'y résout,
   donc le radar rétrécit de lui-même et l'écart reste exactement 24 px partout
   où il serrait. Le bloc du nom, lui, ne bouge pas d'un pixel : les deux
   premières colonnes sont en pixels fixes.

   ET RIEN NE CHANGE À 1280, 1440 ET 1920. Le cadre est plafonné à 1260 px : à
   ces largeurs la troisième colonne a déjà bien plus que 420 + 24, le radar
   garde ses 420 px et son bord droit reste à 15 px du filet. Mesuré : l'écart
   y vaut 170 px avant comme après. ────────────────────────────────── */
.cert-radar{min-width:0;position:relative;justify-self:end;padding-left:24px;}
.cert-radar .radar-svg{width:420px;max-width:100%;height:310px;display:block;}
/* L'INDICE SOUS LE RADAR. Il ne s'affiche que côté recruteur, comme les liens
   du radar. Sur encre, il passe en crème atténué — le plancher de contraste
   s'applique, rien qu'on doive lire ne descend sous ce niveau.
   IL EST HORS DU FLUX, et c'est mesuré : dans le flux il ajoutait 23 px au
   radar, et le hero passait de 386 à 409. La maquette ne le dessine pas ; il
   n'en est pas retiré pour autant — il se loge dans la marge basse. */
/* ── § 5 DU 22 TER : « CLIQUEZ UNE DIMENSION » A QUITTÉ LE HERO pour le
   sous-titre de la console. Les deux règles qui l'habillaient sous le radar
   sont retirées, pas laissées sans porteur — une classe orpheline finit par
   être recopiée ailleurs. LE RADAR RESTE CLIQUABLE : seule l'indication a
   déménagé. */
.profil-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.profil-name{font-family:var(--font-display);font-weight:900;font-size:clamp(48px,5.5vw,80px);text-transform:uppercase;letter-spacing:-.02em;line-height:.9;color:var(--ink);margin-bottom:16px;}
.profil-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.profil-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:20px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;display:inline-flex;align-items:center;gap:5px;}
.profil-divider{border:none;border-top:1px solid var(--cream-3);margin:0;}
.profil-section{padding:40px 0;}
.profil-two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;}
.profil-panel{border:1.5px solid var(--cream-3);border-radius:8px;padding:28px;background:var(--cream);display:flex;flex-direction:column;}
.profil-panel-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px;}
.profil-panel-title{font-family:var(--font-display);font-weight:900;font-size:26px;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px;}
.profil-panel-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-3);margin-bottom:24px;}
.radar-svg{width:100%;display:block;overflow:visible;}
.audio-list{display:grid;grid-template-columns:1fr;gap:10px;align-content:start;}
/* LES SIX BANDES ONT DISPARU — chantier 22. La maquette dessine une console, et
   les règles de la bande (`.audio-bande`, `.audio-bande-texte`,
   `.audio-avec-extrait`, `.audio-extrait`, `.audio-contexte`, `.audio-phrase`,
   `.audio-motif`) n'avaient plus un seul porteur. Une classe orpheline finit
   toujours par être recopiée par quelqu'un qui la croit vivante.
   `.audio-card`, `.audio-header`, `.audio-dim-name` et `.audio-score` RESTENT :
   les huit profils de démonstration les emploient, et leur dessin à part n'est
   pas dans ce lot. */
.audio-card{border-radius:6px;padding:12px 14px;background:var(--cream-2);border:1.5px solid var(--cream-3);}
.audio-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.audio-dim-name{font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:-.01em;}

/* ══════════════════════════════════════════════════════════════════════════
   LA CONSOLE D'ÉCOUTE — chantier 22.

   TOUTES LES COULEURS ET TOUTES LES PROPORTIONS D'ICI SONT RELEVÉES SUR LA
   MAQUETTE, `docs/maquettes/maquette-a-page-profil-1.png`, par la machine et
   non à l'œil. Ce que le relevé donne, et ce que la palette du site porte déjà :

     fond de la section      #2b3939  →  var(--teal)      #2d3a3a
     onglet choisi           #c9a768  →  var(--gold)      #c9a86a
     titre de la console     #fef8e7  →  var(--cream)     #fff8e7
     onglet non choisi       #3b4745  →  crème à 7 % sur le fond de section
     carte du lecteur        #222c2d  →  écrite ici, la palette n'a pas ce ton
     filet des deux colonnes #9b8663  →  var(--gold-deep) #a3854f

   Le bord gauche du contenu, les six onglets de largeur égale et leur écart de
   11 px viennent du même relevé : la maquette est un rendu de page à 1280 px,
   agrandi 1,146 fois — 46 px de marge relevés, soit 40 px de CSS.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── § 1 DU 22 BIS : LA CONSOLE NE PREND PLUS TOUTE LA LARGEUR.
   Relevé : la section sombre allait de 0 à 1265 px, les blocs de 52,4 à 1212,4.
   C'est désormais un CADRE de la même largeur que les blocs, aux mêmes bords au
   pixel et à toutes les largeurs, et LE FOND SOMBRE NE VIT QUE DEDANS : autour,
   la page reprend son crème. Coins 8 px, comme les blocs. Aucune bordure.
   La section n'est plus qu'une enveloppe : elle porte la géométrie des blocs,
   le fond et les coins sont passés sur le cadre. */
/* ── § 6 DU 22 TER : LE BANDEAU RESPIRE SOUS LE HERO.
   Relevé : 0 px entre le bas du hero et le haut du bandeau, 44 px entre le bas
   du bandeau et le haut de la console. Consigne : le même écart au-dessus.
   UN SEUL NOMBRE, LU AUX DEUX ENDROITS. Il valait 44 par addition — 4 px de
   marge basse de l'enveloppe du bandeau, 40 px de marge haute de la console —,
   ce qui n'est pas un écart mais deux moitiés qui se seraient séparées au
   premier réglage. La valeur vit maintenant dans `--ecart-bandeau` : la marge
   haute du bandeau la lit, la marge haute de la console la lit, et la règle
   étroite la change UNE fois pour les deux. */
:root{--ecart-bandeau:44px;}
.console{max-width:1240px;margin:var(--ecart-bandeau) auto 40px;padding:0 40px;}
/* LE CADRE LUI-MÊME. Il occupe exactement le contenu de son enveloppe, donc la
   largeur des blocs — un seul bord gauche pour toute la page, par construction
   et non par un nombre. La marge intérieure est celle des panneaux (28 px) :
   c'est un cadre parmi les cadres. */
.console-dedans{background:var(--teal);color:var(--cream);border-radius:8px;padding:28px;}
.console-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px;}
/* ── § 5 DU 22 BIS : UN SEUL TITRE, « Console d'écoute ».
   « Sa voix, six moments » a disparu des deux vues. Le titre garde la police et
   la taille du titre supprimé — Instrument Serif 38 px, crème —, et le
   sur-titre en mono doré n'existe plus : sa règle est retirée plutôt que
   laissée sans porteur.
   ⚠ `text-transform:none` EST EXPLICITE, et c'est un défaut relevé sur
   l'aperçu : `style.css` met toutes les `h2` du site en capitales, et ce titre
   en héritait. La maquette écrit « Console d'écoute » en minuscules. */
/* ── § 2 DU 22 TER : LE TITRE PASSE EN DORÉ. Police, taille et casse du
   22 bis inchangées — seule la couleur change. */
.console-titre{font-family:var(--font-serif);font-weight:400;font-size:38px;line-height:1.05;letter-spacing:-.01em;text-transform:none;margin:0;color:var(--gold);}
/* ── § 5 DU 22 TER : L'INDICE, SOUS LE TITRE. Il vient du hero, où il vivait
   sous le radar. Il reprend l'habillage de l'ancien sur-titre — mono, 10 px,
   espacé — mais en crème atténué et SANS CAPITALES : c'est une phrase, pas une
   étiquette de deux mots, et quarante-six caractères en capitales espacées se
   lisent moins bien qu'ils ne s'affichent.
   LE TITRE ET L'INDICE FORMENT UN GROUPE, à gauche, en face du compteur. Sans
   ce groupe, l'indice serait devenu la troisième colonne d'une rangée qui n'en
   attend que deux. */
.console-titres{min-width:0;}
.console-indice{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:rgba(255,248,231,.62);line-height:1.5;margin:6px 0 0;}
/* LE COMPTEUR. Il porte « EXTRAIT n SUR m · 00:00 / 01:12 », ou la phrase du
   serveur quand il n'y a rien à écouter. VIDE TANT QU'ON NE SAIT RIEN : ni
   « 0 SUR 0 », ni un compte qu'on n'a pas mesuré. */
.console-compteur{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,248,231,.72);text-align:right;padding-top:3px;line-height:1.5;max-width:340px;}
/* ── LA CARTE DU LECTEUR. Une grille de cinq rangées : le gros bouton tient la
   colonne de gauche sur les trois premières, la tête, l'onde et le curseur
   s'empilent à droite, puis le filet et les deux colonnes du bas prennent toute
   la largeur.
   `display:contents` SUR `.audio-lecteur` : le lecteur fait maison garde son
   enveloppe — `brancherLecteur` la reçoit telle quelle — mais ses quatre pièces
   participent à CETTE grille. Sans cela il aurait fallu réécrire le lecteur, et
   c'est précisément ce que le chantier interdit. */
.console-carte{background:#222c2d;border-radius:6px;padding:26px 28px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;grid-template-areas:"bouton tete" "bouton onde" "bouton curseur" "filet filet" "bas bas";align-items:center;}
.console-carte .audio-lecteur{display:contents;}
.console-carte .audio-lecteur-btn{grid-area:bouton;width:64px;height:64px;background:var(--gold);color:var(--ink);font-size:18px;padding-left:3px;align-self:center;}
.console-carte .audio-lecteur-btn:hover:not(:disabled){background:var(--gold-glow);}
/* ── § 5 DU 22 TER : LA TÊTE DE LA CARTE EST UN LIEN vers le détail de la
   dimension — la même adresse que le radar, par la même fonction. C'est un
   vrai `<a>` : il porte le clavier, le menu contextuel et l'ouverture dans un
   onglet, ce qu'un gestionnaire de clic ne fait pas. Sa mise en forme reste
   celle de la tête ; le survol ajoute un soulignement et une flèche, et le
   focus clavier se voit. */
.console-tete{grid-area:tete;display:flex;align-items:baseline;gap:10px;min-width:0;text-decoration:none;color:inherit;}
.console-tete .console-dim{text-decoration-thickness:1px;text-underline-offset:3px;}
.console-tete:hover .console-dim,.console-tete:focus-visible .console-dim{text-decoration:underline;}
.console-tete::after{content:'→';font-family:var(--font-mono);font-size:13px;color:var(--gold);opacity:0;transition:opacity .2s;}
.console-tete:hover::after,.console-tete:focus-visible::after{opacity:1;}
.console-tete:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:3px;}
.console-dim{font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:-.01em;color:var(--cream);}
.console-note{font-family:var(--font-mono);font-size:13px;color:var(--gold);white-space:nowrap;}
/* ── LA FORME D'ONDE. Barres alignées EN BAS — relevé sur la maquette : 48
   barres, un pied commun, des sommets qui varient. Dorées jusqu'à la position
   de lecture, éteintes après.
   AU DÉPART ELLES SONT TOUTES DE MÊME HAUTEUR, et c'est une règle, pas un
   provisoire : des hauteurs tirées au hasard se liraient comme une mesure du
   son. Les vraies hauteurs viennent du fichier, au premier clic. */
.console-onde{grid-area:onde;display:flex;align-items:flex-end;gap:2px;height:46px;margin-top:10px;min-width:0;}
.console-barre{flex:1 1 0;min-width:0;background:rgba(255,248,231,.22);border-radius:1px;transition:background .12s;}
.console-barre-lue{background:var(--gold);}
/* LE CURSEUR RESTE UN VRAI CURSEUR, et il reste dans le document : c'est lui qui
   porte le clavier et les lecteurs d'écran. Il est discret sous l'onde, jamais
   supprimé — une onde n'est pas un contrôle. */
.console-carte .audio-lecteur-barre{grid-area:curseur;width:100%;margin-top:10px;height:3px;background:rgba(255,248,231,.16);}
.console-carte .audio-lecteur-barre::-webkit-slider-thumb{width:9px;height:9px;background:var(--gold);}
.console-carte .audio-lecteur-barre::-moz-range-thumb{width:9px;height:9px;background:var(--gold);}
/* Le temps s'écrit dans le compteur, en haut à droite, comme la maquette le
   dessine. L'élément reste là pour que `brancherLecteur` continue de l'écrire
   sans savoir où il est lu. */
.console-carte .audio-lecteur-temps{display:none;}
/* SANS EXTRAIT, LE LECTEUR CÈDE LA PLACE À UNE PHRASE — jamais à un vide. */
.console-vide{grid-area:onde;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,248,231,.6);line-height:1.6;padding:14px 0;}
.console-filet{grid-area:filet;height:1px;background:rgba(255,248,231,.1);margin:24px 0 20px;}
/* LES DEUX COLONNES DU BAS : à gauche la phrase de la dimension, à droite
   Julien, séparés par un filet vertical. C'est ce que la maquette dessine, et
   la réplique reste dans le même bloc que le lecteur — la décision du 15/09
   tient : jamais après, jamais ailleurs. */
.console-bas{grid-area:bas;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;}
.console-bas-seule{grid-template-columns:minmax(0,1fr);}
.console-phrase{font-size:14px;line-height:1.6;color:rgba(255,248,231,.8);margin:0;}
.console-julien{border-left:1px solid var(--gold-deep);padding-left:24px;min-width:0;}
.console-julien .qui{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:9px;}
.console-julien p{font-style:italic;font-size:13.5px;line-height:1.6;color:rgba(255,248,231,.62);margin:0;}
/* ── LES SIX ONGLETS. Largeurs égales, 11 px d'écart : relevé sur la maquette.
   UN ONGLET NE DISPARAÎT JAMAIS, même sans extrait : il porte alors sa note et
   sa phrase, et le lecteur dit qu'il n'y a rien à écouter. Un onglet absent ne
   se distingue pas d'un onglet jamais dessiné. */
.console-onglets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin-top:22px;}
.console-onglet{display:flex;flex-direction:column;gap:5px;text-align:left;border:none;border-radius:5px;padding:14px 16px;background:rgba(255,248,231,.07);color:var(--cream);cursor:pointer;font:inherit;transition:background .15s;}
.console-onglet:hover{background:rgba(255,248,231,.13);}
.console-onglet-nom{font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;}
.console-onglet-note{font-family:var(--font-mono);font-size:11px;color:rgba(255,248,231,.72);}
.console-onglet-choisi,.console-onglet-choisi:hover{background:var(--gold);color:var(--ink);}
.console-onglet-choisi .console-onglet-note{color:rgba(26,34,34,.72);}
/* LE LECTEUR EST FAIT MAISON, ET C'EST UN REPLI MESURE. `controlsList` a bien
   ete pose — l'attribut est la, verifie dans le document — mais le lecteur natif
   de Chromium est reste IDENTIQUE AU PIXEL PRES : son bouton a trois points
   subsiste. Le lot prevoyait ce cas et son repli : un bouton et une barre, sur
   le modele du lecteur flottant du bas de page. L'element <audio> n'a plus
   `controls` du tout, donc plus de menu a retirer.
   ET ÇA NE PROTEGE TOUJOURS PAS LE FICHIER : l'adresse signee du son reste
   lisible dans le code de la page. Geste de confort, pas serrure. */
.audio-lecteur{display:flex;align-items:center;gap:10px;width:100%;}
.audio-lecteur-btn{width:32px;height:32px;flex:none;border:none;border-radius:50%;cursor:pointer;background:var(--ink);color:var(--cream);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .2s;}
.audio-lecteur-btn:hover:not(:disabled){transform:scale(1.08);}
.audio-lecteur-btn:disabled{opacity:.35;cursor:default;}
.audio-lecteur-barre{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--cream-3);cursor:pointer;}
.audio-lecteur-barre::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:var(--gold-deep);border:none;cursor:pointer;}
.audio-lecteur-barre::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--gold-deep);border:none;cursor:pointer;}
.audio-lecteur-barre:disabled{opacity:.5;cursor:default;}
.audio-lecteur-temps{font-family:var(--font-mono);font-size:10px;color:var(--teal-3);white-space:nowrap;min-width:32px;text-align:right;}
.audio-score{font-family:var(--font-display);font-weight:900;font-size:16px;color:var(--gold-deep);white-space:nowrap;}
.exp-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--cream-3);border-radius:6px;overflow:hidden;margin-bottom:18px;}
.exp-mini-cell{padding:14px 16px;background:var(--cream-2);}
.exp-mini-cell:nth-child(1),.exp-mini-cell:nth-child(2){border-bottom:1.5px solid var(--cream-3);}
.exp-mini-cell:nth-child(odd){border-right:1.5px solid var(--cream-3);}
.exp-mini-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-3);margin-bottom:5px;}
.exp-mini-value{font-family:var(--font-display);font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);line-height:1.1;}
.exp-mini-sub{font-size:11px;color:var(--teal-2);margin-top:3px;}
.quota-box{background:var(--ink);color:var(--cream);border-radius:6px;padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;gap:18px;}
.quota-num{font-family:var(--font-display);font-weight:900;font-size:36px;color:var(--gold);line-height:1;}
/* LE QUOTA NE DISPARAÎT PLUS QUAND IL MANQUE. Sur six fiches réelles, quatre
   n'ont pas de quota : la boîte s'effaçait, et le panneau changeait de forme
   d'un candidat à l'autre sans un mot pour l'expliquer. « Non renseigné » ne se
   dit pas en 36 px — c'est une absence, pas un chiffre. */
.quota-num.quota-vide{font-family:var(--font-mono);font-weight:400;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,248,231,.55);line-height:1.3;}
.quota-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,248,231,.5);margin-top:4px;}
.quota-text{flex:1;font-size:12px;line-height:1.4;color:rgba(255,248,231,.7);}
.hf-bar{margin-bottom:18px;}
/* Même règle pour la répartition chasse/élevage : la piste reste, vide, et la
   ligne du dessous dit pourquoi. Trois fiches réelles sur six sont dans ce cas. */
.hf-bar-vide{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-3);margin-top:6px;}
.hf-bar-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-3);margin-bottom:8px;}
.hf-bar-track{height:10px;background:var(--cream-3);border-radius:5px;overflow:hidden;display:flex;}
.hf-hunt{background:var(--gold-deep);height:100%;}
.hf-farm{background:var(--teal);height:100%;}
.hf-bar-values{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:900;font-size:14px;margin-top:6px;}
.hf-bar-values .hunt-val{color:var(--gold-deep);}
.hf-bar-values .farm-val{color:var(--teal);}
.tag-group{margin-bottom:14px;}
.tag-group:last-child{margin-bottom:0;}
.tag-group-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-3);margin-bottom:8px;}
.tag-group .profil-tags{margin-bottom:0;}
.tag-group .profil-tag{font-size:10px;padding:5px 10px;}
.profil-tag .lang-level{font-weight:700;color:var(--gold-deep);margin-left:3px;}
/* UNE LISTE VIDE PORTE UNE ÉTIQUETTE, ELLE NE DISPARAÎT PAS. Le trait est en
   pointillés et la couleur est celle des libellés éteints : on voit tout de
   suite que c'est une absence et non une réponse. */
.profil-tag.profil-tag-vide{border-style:dashed;border-color:var(--cream-3);color:var(--teal-3);}
.ote-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1.5px solid var(--cream-3);border-radius:6px;overflow:hidden;margin-bottom:18px;}
.ote-cell{padding:14px 8px;text-align:center;background:var(--cream-2);}
.ote-cell:not(:last-child){border-right:1.5px solid var(--cream-3);}
.ote-cell.total{background:var(--ink);color:var(--cream);}
.ote-cell.total .ote-label{color:var(--gold);}
.ote-cell.total .ote-value{color:var(--gold);}
.ote-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-3);margin-bottom:5px;}
.ote-value{font-family:var(--font-display);font-weight:900;font-size:16px;color:var(--ink);white-space:nowrap;}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--cream-3);border-radius:6px;overflow:hidden;margin-bottom:18px;}
.status-cell{padding:14px 16px;background:var(--cream-2);}
.status-cell:nth-child(odd){border-right:1.5px solid var(--cream-3);}
/* LE FILET HORIZONTAL NE SE POSE QUE S'IL Y A UNE RANGÉE EN DESSOUS. La grille
   porte quatre cases sur la fiche réelle — disponibilité, préavis, localisation,
   télétravail — et deux sur le chemin de démonstration. `nth-last-child(n+3)`
   sert les deux : la dernière rangée, quelle qu'elle soit, n'a pas de filet qui
   doublerait la bordure du cadre. */
.status-cell:nth-last-child(n+3){border-bottom:1.5px solid var(--cream-3);}
/* ══ CHANTIER 24 ter F : « FORCES & AXES » DANS UN SEUL CADRE ══════════
   C'était une bande crème pleine largeur, soulignée d'un filet doré — une
   forme à elle seule dans une page qui n'en a pas d'autre. Anthony, le 17/09 :
   un cadre, comme les deux panneaux juste au-dessus.

   LE CADRE N'EST PAS UNE VARIANTE : c'est `.profil-panel`, la même classe que
   les deux panneaux, posée sur l'enveloppe. Bordure, rayon, fond et
   remplissage viennent donc de la même règle — il n'y a rien à tenir en
   accord, c'est littéralement le même dessin.

   LA SECTION NE PORTE PLUS QUE L'ÉCART VERTICAL, celui des autres blocs. La
   bande, le filet doré et le fond crème-2 partent avec la forme. */
/* L'ÉCART AU-DESSUS EST CELUI QUI SÉPARE LES AUTRES BLOCS DE CETTE PAGE, et il
   se mesure : la console est suivie de 40 px de marge, et la section des deux
   panneaux ouvre sur 28 px de remplissage — 68 px entre les deux blocs. Sans
   ce remplissage-ci, le cadre des forces remontait à 40 px des panneaux. */
.forces-section{padding:28px 0 40px;}
.forces-header{text-align:center;margin-bottom:32px;max-width:580px;margin-left:auto;margin-right:auto;}
/* DANS LE CADRE, LES DEUX COLONNES N'ONT PLUS DE FOND À ELLES : le cadre le
   porte. Sans ça, on lirait un panneau dans un panneau. */
.profil-panel .force-panel{background:transparent;}
.forces-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;display:flex;justify-content:center;align-items:center;gap:12px;}
.forces-eyebrow::before,.forces-eyebrow::after{content:'';width:26px;height:1px;background:var(--gold-deep);opacity:.5;}
.forces-title{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,4.8vw,56px);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);line-height:.95;margin-bottom:14px;}
.forces-title .accent{color:var(--gold-deep);font-family:var(--font-serif);font-style:italic;text-transform:none;font-weight:400;letter-spacing:-.01em;}
.forces-subtitle{font-size:15px;color:var(--teal-2);line-height:1.5;}
.forces-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.force-panel{border-radius:8px;padding:28px;position:relative;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.force-panel:hover{transform:translateY(-3px);}
.force-panel.strengths{background:var(--cream);border:1.5px solid var(--gold);}
.force-panel.weaknesses{background:var(--ink);color:var(--cream);}
.force-panel-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid;}
.force-panel.strengths .force-panel-header{border-bottom-color:var(--cream-3);}
.force-panel.weaknesses .force-panel-header{border-bottom-color:rgba(255,248,231,.12);}
.force-icon{font-size:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;}
.force-panel.strengths .force-icon{color:var(--gold-deep);background:rgba(201,168,106,.12);}
.force-panel.weaknesses .force-icon{color:var(--gold);background:rgba(201,168,106,.15);}
.force-panel-titlebox h3{font-family:var(--font-display);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:3px;line-height:1;}
.force-panel-titlebox .sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-3);}
.force-panel.weaknesses .force-panel-titlebox .sub{color:rgba(255,248,231,.4);}
.force-list{display:flex;flex-direction:column;}
.force-item{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed;transition:padding-left .25s ease;}
.force-item:last-child{border-bottom:none;padding-bottom:2px;}
.force-item:first-child{padding-top:2px;}
.force-panel.strengths .force-item{border-bottom-color:var(--cream-3);}
.force-panel.weaknesses .force-item{border-bottom-color:rgba(255,248,231,.08);}
.force-item:hover{padding-left:6px;}
.force-num{font-family:var(--font-display);font-weight:900;font-size:24px;line-height:.9;flex-shrink:0;width:36px;letter-spacing:-.03em;padding-top:4px;}
.force-panel.strengths .force-num{color:var(--gold-deep);}
.force-panel.weaknesses .force-num{color:var(--gold);}
.force-text{flex:1;font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.3;letter-spacing:-.01em;padding-top:6px;text-transform:none;}
.force-panel.strengths .force-text{color:var(--ink);}
.force-panel.weaknesses .force-text{color:var(--cream);}
/* ── LES LARGEURS, § 3.7 DU CHANTIER. Sous 900 px les deux colonnes du bas
   passent l'une sous l'autre ; sous 600 px les six onglets passent sur deux
   lignes de trois. RIEN NE DÉFILE À L'HORIZONTALE : un onglet qu'il faut aller
   chercher en glissant ne se voit pas. */
@media(max-width:900px){:root{--ecart-bandeau:28px;}.console{padding:0 20px;}.console-dedans{padding:20px;}.console-titre{font-size:30px;}.console-entete{flex-direction:column;gap:10px;}.console-compteur{text-align:left;max-width:none;}.console-carte{padding:20px;column-gap:18px;}.console-bas{grid-template-columns:minmax(0,1fr);gap:18px;}.console-julien{border-left:none;border-top:1px solid var(--gold-deep);padding-left:0;padding-top:16px;}}
@media(max-width:600px){.console-onglets{grid-template-columns:repeat(3,minmax(0,1fr));}.console-carte .audio-lecteur-btn{width:52px;height:52px;font-size:15px;}.console-dim{font-size:17px;}}
/* SOUS 900 PX, LA RANGÉE PASSE À UNE COLONNE : le rôle et le score ne sont plus
   à côté de la photo, donc s'aligner sur son bas n'a plus d'objet — les deux
   colonnes reprennent leur hauteur naturelle. L'enveloppe du cadre resserre sa
   marge, le cadre garde ses 5 px de débord. */
@media(max-width:900px){.profil-two-col{grid-template-columns:1fr;}.cert-cadre{padding:0 20px;}.cert{padding:26px 4px;}.cert-qui{height:auto;display:block;}.cert-corps{grid-template-columns:1fr;gap:24px;min-height:0;}/* la rangée passe à UNE colonne : il n'y a plus de voisin à écarter, et le retrait ne ferait qu'indenter le radar. */.cert-radar{padding-left:0;}.cert{--photo-large:200px;}.cert-portrait{height:230px;}/* `--photo-bas` À L'ÉTROIT : 4 px de retrait de colonne + 230 px de photo. Il ne servait pas ici tant que `.cert-qui` passait en hauteur automatique ; la rangée de visibilité s'y accroche désormais, et sans cette ligne elle se poserait 73 px trop bas. */.cert{--photo-bas:234px;}/* L'ÉCHELLE ÉTROITE DESCEND DE 8 EN 8 — 56, 48, 40 — et le quatrième palier la continue à 32. Rapport au palier large : 0,80, dans la même bande que les trois autres (0,74 à 0,83). Le plancher du filet baisse d'autant. */.cert{--nom-plancher:16px;}.cert-nom-76{font-size:56px;}.cert-nom-60{font-size:48px;}.cert-nom-48{font-size:40px;}.cert-nom-40{font-size:32px;}.cert-radar .radar-svg{width:100%;height:auto;}.audio-list{grid-template-columns:1fr;}.ote-grid{grid-template-columns:1fr;}.ote-cell:not(:last-child){border-right:none;border-bottom:1.5px solid var(--cream-3);}.exp-mini-grid,.status-grid{grid-template-columns:1fr;}.exp-mini-cell{border-right:none!important;border-bottom:1.5px solid var(--cream-3);}.exp-mini-cell:last-child{border-bottom:none;}.status-cell{border-right:none!important;border-bottom:1.5px solid var(--cream-3);}.status-cell:last-child{border-bottom:none;}.forces-grid{grid-template-columns:1fr;gap:16px;}}
/* ══════════════════════════════════════════════════════════════════════════
   LE SEUL AJOUT DU DESSIN COTE CANDIDAT — ce que `vue:'candidat'` a en plus.
   ══════════════════════════════════════════════════════════════════════════ */
/* Le cadre du candidat n'est pas une page entiere mais un onglet : ses blocs
   se separent par une marge, pas par les bandes pleine largeur et les filets
   de profil.html. `.profil-section` y aurait mis 40 px de haut et de bas a
   chaque bloc. */
.fc-bloc{margin-bottom:24px;}
/* SOUS LA PHOTO : LE SEUL RÉGLAGE QUE LA PAGE AUTORISE — la piste de statut
   du candidat (lot 35-6, elle a remplacé la bascule). « Révéler ce candidat »
   est parti dans la bannière. C'est le rappel passé par la page qui décide,
   pas la vue.
   « COPIER MON LIEN » A QUITTE CE BLOC. Il fabriquait une adresse SANS JETON,
   donc une fiche masquee pour qui la recevait, pendant que l'onglet de
   modification en donnait une autre, complete — deux adresses pour une meme
   fiche, et le meme « Lien copie ✓ ». Seul le lien a jeton subsiste. */
/* SUR ENCRE DEPUIS LE CHANTIER 19 BIS. Le hero est passé du crème au sombre :
   ces deux contrôles ont changé de fond, pas de mécanique. Le plancher de
   contraste s'applique — rien de ce qu'on doit lire ne descend sous
   `rgba(255,248,231,.72)` sur ce fond, et surtout pas l'état de visibilité,
   qui est la phrase la plus importante de l'espace candidat. */
/* ══ LA PISTE DE STATUT, SOUS LA PHOTO — CHANTIER 35, LOT 35-6 ══════════
   Maquette A (https://claude.ai/artifact/Q9qZ3coaYz9NtwMrMsTZzj) : trois
   segments reliés — Visible, Anonyme, Masqué —, 30 px de haut, chacun avec son
   « i » entouré. Elle remplace l'interrupteur du chantier 24 ter A, au même
   endroit : sous la photo, alignée à gauche sur son cadre.

   HORS DU FLUX, ET C'EST TOUJOURS LA MÊME RAISON. « Les dimensions du hero
   candidat et du hero recruteur sont strictement les mêmes » : le recruteur n'a
   pas de piste, donc dans le flux elle allongerait le hero du candidat et de
   lui seul. En position absolue, elle se loge dans le blanc sous la photo, que
   `.cert` agrandit de 9 px pour les DEUX vues (voir plus haut).

   ELLE S'ACCROCHE À `--photo-bas` ET À `--photo-large`, PAS À DES NOMBRES : le
   bas et la largeur de la photo sont écrits une seule fois. 10 px sous la photo,
   10 px jusqu'au bord intérieur du filet.

   LES COULEURS D'ÉTAT SONT CELLES QUI ÉTAIENT DÉJÀ MESURÉES ICI contre le
   plancher de contraste du hero (crème à 72 % sur l'encre : 8,52) — vert
   #8fd6b0, or `--gold-glow`, saumon #f3ae8b (9,58 / 10,05 / 8,67 sur l'encre).
   L'état choisi prend sa couleur et un fond de la même teinte à 18 % ; les deux
   autres restent en crème à 72 %, le plancher. La couleur ne porte rien seule :
   le mot dit l'état, et `aria-pressed` le dit au lecteur d'écran. */
.fc-visibilite{position:absolute;top:calc(var(--photo-bas) + 10px);left:0;width:var(--photo-large);max-width:100%;height:30px;}
.fc-piste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;box-sizing:border-box;border:1.2px solid rgba(255,248,231,.4);border-radius:7px;overflow:hidden;}
.fc-seg{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:0 4px;border-right:1px solid rgba(255,248,231,.22);color:rgba(255,248,231,.72);transition:background .15s,color .15s;}
.fc-seg:last-child{border-right:0;}
/* LE SEGMENT ENTIER SE CLIQUE, pas seulement son mot : le bouton reste dans le
   flux (le mot et le « i » se centrent ensemble, comme sur la maquette), et son
   pseudo-élément couvre toute la case. Le « i » passe au-dessus. */
.fc-seg-choix{position:static;flex:0 1 auto;min-width:0;margin:0;padding:0;border:0;background:transparent;color:inherit;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap;cursor:pointer;}
.fc-seg-choix::after{content:"";position:absolute;inset:0;}
.fc-seg-choix:focus-visible{outline:none;}
.fc-seg:has(.fc-seg-choix:focus-visible){box-shadow:inset 0 0 0 2px var(--gold-glow);}
.fc-seg-choix:disabled{cursor:progress;}
.fc-seg-lib{display:block;overflow:hidden;text-overflow:clip;}
.fc-seg-visible:has(.fc-seg-choix[aria-pressed="true"]){background:rgba(143,214,176,.18);color:#8fd6b0;}
.fc-seg-anonyme:has(.fc-seg-choix[aria-pressed="true"]){background:rgba(230,201,127,.18);color:var(--gold-glow);}
.fc-seg-masque:has(.fc-seg-choix[aria-pressed="true"]){background:rgba(243,174,139,.18);color:#f3ae8b;}
/* LE « i ». Dessiné à 16 px, mais sa ZONE DE CLIC en fait 28 par un
   pseudo-élément qui déborde : un point de 16 px se rate au doigt. Il reste dans
   la hauteur de la piste (30 px), donc rien n'est rogné. */
.fc-info{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto;border-radius:50%;border:1.2px solid rgba(255,248,231,.55);background:transparent;color:rgba(255,248,231,.88);font-family:var(--font-mono);font-size:9px;font-weight:700;line-height:1;cursor:pointer;padding:0;transition:border-color .15s,color .15s;}
.fc-info::before{content:"";position:absolute;inset:-6px;border-radius:50%;}
.fc-info:hover,.fc-info[aria-expanded="true"]{border-color:var(--gold);color:var(--gold-glow);}
.fc-seg:has(.fc-seg-choix[aria-pressed="true"]) .fc-info{border-color:currentColor;color:currentColor;}
.fc-info:focus-visible{outline:2px solid var(--gold-glow);outline-offset:2px;}
/* LA BULLE. Elle descend — il n'y a pas de place au-dessus — et elle s'accroche
   À GAUCHE : accrochée à droite, elle sortirait de l'écran par la gauche sur un
   téléphone, où la piste ne fait que 200 px. Elle ne dépasse jamais la largeur
   de l'écran moins ses marges. */
.fc-bulle{position:absolute;top:calc(100% + 8px);left:0;z-index:5;box-sizing:border-box;width:max(100%,250px);max-width:calc(100vw - 56px);padding:14px 16px;border-radius:6px;border:1px solid var(--gold-deep);background:#141b1b;box-shadow:0 10px 30px rgba(0,0,0,.45);text-align:left;}
.fc-bulle[hidden]{display:none;}
.fc-bulle-titre{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;margin:0 0 6px;}
.fc-bulle-titre.fc-bulle-visible{color:#8fd6b0;}
.fc-bulle-titre.fc-bulle-anonyme{color:var(--gold-glow);}
.fc-bulle-titre.fc-bulle-masque{color:#f3ae8b;}
/* LE TEXTE DU « i » EST UNE PHRASE ENTIÈRE, pas une étiquette : en sans, pas en
   mono capitales, et au-dessus du plancher de contraste du hero. */
.fc-bulle-corps{margin:0;font-family:var(--font-sans);font-size:12.5px;line-height:1.55;letter-spacing:0;text-transform:none;color:rgba(255,248,231,.88);}
/* LE MESSAGE D'ÉCHEC EST HORS DU FLUX LUI AUSSI : il ne doit jamais être
   silencieux, et jamais agrandir le hero quand tout va bien. Il descend sous la
   piste, donc il peut déborder sur la bannière crème : son fond est OPAQUE, la
   teinte que donnait l'ancien orange à 12 % posé sur l'encre (#322e2a). Sur
   l'encre il ne change pas ; sur le crème, il reste lisible. */
.fc-err{position:absolute;top:calc(100% + 8px);left:0;z-index:6;box-sizing:border-box;width:max(100%,250px);max-width:calc(100vw - 56px);margin:0;padding:12px 14px;border-radius:6px;border-left:3px solid #e08a62;background:#322e2a;font-family:var(--font-sans);font-size:12px;line-height:1.5;letter-spacing:0;text-transform:none;text-align:left;color:rgba(255,248,231,.88);}
.fc-err[hidden]{display:none;}
/* ══════════════════════════════════════════════════════════════════════════
   LA BANNIÈRE CRÈME, SOUS LE CERTIFICAT — la même sur les deux pages.

   Elle remplace la barre d'action sombre qui n'existait que chez le recruteur.
   L'espace candidat n'en avait aucune : ses liens sortants — LinkedIn, CV, sa
   bannière LinkedIn à télécharger — n'avaient nulle part où se poser. En
   écrire une seconde dans `mon-profil.html` aurait remis exactement le défaut
   que le chantier 17 a réparé : deux dessins de la même chose.

   ELLE NE DÉCIDE JAMAIS QUELS BOUTONS ELLE PORTE. `fiche.js` n'en pose un que
   si la page a fourni son rappel ou son lien.
   ══════════════════════════════════════════════════════════════════════════ */
.fiche-barre{margin-top:var(--ecart-bandeau);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--cream-2);border:1.5px solid var(--cream-3);border-radius:8px;padding:18px 24px;}
.fiche-barre-texte{min-width:0;}
.fiche-barre-titre{font-family:var(--font-display);font-weight:900;font-size:18px;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);line-height:1.1;}
.fiche-barre-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-3);margin-top:5px;}
.fiche-barre-sub.fiche-barre-trace{color:var(--gold-deep);}
.fiche-barre-sub[hidden]{display:none;}
/* LE GROUPE DE BOUTONS SE CALE EN HAUT À DROITE — chantier 24 ter D. Il était
   centré verticalement : le bloc de texte étant plus haut que lui, il tombait
   14,4 px sous le haut de la bannière. « Révéler ce candidat » y arrive en
   tête, et la consigne le veut en haut. LES TROIS VUES REMONTENT ENSEMBLE :
   c'est la règle du lot — ce qui les distingue se range dans la bannière,
   mais la bannière, elle, se dessine pareil pour tout le monde. */
/* ⚠ ET IL RESTE À DROITE QUAND LA BANNIÈRE PASSE À LA LIGNE. Mesuré à 1024 px :
   le bouton en plus élargit le groupe, qui ne tient plus à côté du texte et
   passe seul sur une seconde ligne — où `space-between` le colle à GAUCHE,
   à 486 px du bord droit. `margin-left:auto` le ramène à droite sur sa
   propre ligne comme sur la première. */
.fiche-barre-boutons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;align-self:flex-start;margin-left:auto;}
/* LA LIGNE SOUS « RÉVÉLER CE CANDIDAT » — chantier 33, lot 33-2. Le bouton et
   sa phrase forment une colonne ; la phrase prend la largeur du bouton
   (`width:0` + `min-width:100%`) et passe à la ligne plutôt que d'élargir le
   groupe. La colonne étant plus haute qu'un bouton, le groupe se cale en haut
   quand elle est là : sans ça, les autres boutons, centrés, descendraient sous
   le haut de « Révéler ». Les autres vues n'ont pas la colonne et ne bougent
   pas. */
.fiche-barre-boutons:has(.fc-reveler){align-items:flex-start;}
.fc-reveler{display:flex;flex-direction:column;gap:5px;}
.fc-reveler-note{width:0;min-width:100%;font-family:var(--font-mono);font-size:9px;line-height:1.35;color:var(--teal-3);}
/* LES BOUTONS DE LA BANNIÈRE. Ces règles viennent du <style> de `profil.html`,
   où elles habillaient la barre SOMBRE : le crème de leur texte et de leurs
   bordures devient de l'encre, sinon rien ne se lit sur le nouveau fond. Elles
   descendent ici parce que les deux pages les emploient désormais — et parce
   que la fenêtre de contact s'en sert aussi, où « Annuler » s'écrivait en crème
   sur du crème : il était invisible, et il ne l'est plus. */
.action-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:all .2s;white-space:nowrap;border:1.5px solid transparent;background:none;}
.action-btn.primary{background:var(--gold-deep);color:var(--cream);border-color:var(--gold-deep);}
.action-btn.primary:hover:not(:disabled){background:var(--ink);border-color:var(--ink);}
.action-btn.secondary{background:transparent;color:var(--ink);border-color:var(--cream-3);}
.action-btn.secondary:hover:not(:disabled){border-color:var(--ink);}
.action-btn.linkedin-btn{background:#0a66c2;border-color:#0a66c2;color:#fff;}
.action-btn.linkedin-btn:hover{background:#004182;border-color:#004182;}
.action-btn.copy-btn{background:transparent;color:var(--ink);border-color:var(--cream-3);}
.action-btn.copy-btn.copied{color:#2f7a52;border-color:#2f7a52;}
/* UN BOUTON INERTE N'EST PAS UN BOUTON ABSENT. Un lien qu'on ne peut pas
   suivre — verrouillé par le plan, ou jamais renseigné — se voit et dit
   pourquoi : le retirer ferait croire qu'il n'a jamais existé. */
.action-btn.action-btn-inerte{opacity:.45;cursor:not-allowed;}
.action-btn:disabled{opacity:.5;cursor:progress;}
@media(max-width:1100px){.fiche-barre-titre{font-size:15px;}.action-btn{font-size:9px;padding:7px 10px;}}
/* ── SOUS 900 px, LA PISTE GARDE SES 30 px ─────────────────────────────
   La maquette A la dessine à 30 px aussi sur téléphone (photo de 200 px) ; seuls
   le corps du mot, l'interlettrage et le « i » rétrécissent.
   CE QUI SUIT LA PHOTO, ICI, EST L'ÉCART DE GRILLE DE 24 px : la colonne passe à
   une seule rangée. L'interrupteur de 16 px s'y posait 6 px sous la photo et
   laissait 2 px avant le nom (6 + 16 + 2 = 24). Pour 30 px, il faut 6 + 30 + 2 =
   38 : la colonne de la photo prend 14 px de marge basse. Elle est la même chez
   le recruteur — les deux heros grandissent de 14 px à cette largeur, ensemble.
   (Au large, l'écart est de 9 px : l'interrupteur y faisait 21 px, pas 16.) */
@media(max-width:900px){
  .fc-visibilite{top:calc(var(--photo-bas) + 6px);}
  .cert-colonne-portrait{margin-bottom:14px;}
  .fc-seg{gap:3px;padding:0 2px;}
  .fc-seg-choix{font-size:8px;letter-spacing:.06em;}
  .fc-info{width:14px;height:14px;font-size:8px;}
}
@media(max-width:900px){.fiche-barre{flex-direction:column;align-items:stretch;text-align:center;}.fiche-barre-boutons{justify-content:center;align-self:stretch;margin-left:0;}.cert-colonne-portrait{width:100%;align-items:flex-start;}}
/* MÊME FORME DE CE CÔTÉ-CI, et c'est le point : les deux endroits qui dessinent
   ce bloc — le HTML de `profil.html` et `enveloppes()` de `fiche.js` — posent
   désormais le même `.profil-panel`. L'enveloppe ne garde que l'écart vertical,
   celui que `.fc-bloc` donne aux blocs voisins. */
.fc-forces-section{margin-bottom:24px;}