/* Direction artistique « Affiche » : Big Shoulders Display et Archivo,
   OFL, servies depuis sortants.fr. Genere par pipeline/polices.py.
   Une seule declaration par tranche : les deux familles sont variables,
   font-weight: 100 900 couvre tous les poids avec un seul fichier. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/archivo-fr.woff2) format('woff2');unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0, U+00B2-00B3, U+00B7, U+00BB, U+00C0, U+00C2, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0300-0301, U+0304, U+0308, U+2009, U+2013, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2191, U+2193, U+2212, U+FEFF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+00A1-00A8, U+00AA, U+00AC-00AF, U+00B1, U+00B4-00B6, U+00B8-00BA, U+00BC-00BF, U+00C1, U+00C3-00C5, U+00CC-00CD, U+00D0-00D3, U+00D5-00D8, U+00DA, U+00DD-00DF, U+00E1, U+00E3-00E5, U+00EC-00ED, U+00F0-00F3, U+00F5-00F8, U+00FA, U+00FD-00FE, U+0102, U+0131, U+0303, U+0309, U+2014, U+201A, U+201E, U+2022, U+2044, U+2122, U+2215}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/archivo-latin-etendu.woff2) format('woff2');unicode-range:U+0100-0101, U+0103-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+019D, U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/big-shoulders-display-fr.woff2) format('woff2');unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0, U+00B2-00B3, U+00B7, U+00BB, U+00C0, U+00C2, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0300-0301, U+0304, U+0308, U+2009, U+200B, U+2013, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2191, U+2193, U+2212}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/big-shoulders-display-latin.woff2) format('woff2');unicode-range:U+00A1-00A8, U+00AA, U+00AC-00AF, U+00B1, U+00B4-00B6, U+00B8-00BA, U+00BC-00BF, U+00C1, U+00C3-00C5, U+00CC-00CD, U+00D0-00D3, U+00D5-00D8, U+00DA, U+00DD-00DF, U+00E1, U+00E3-00E5, U+00EC-00ED, U+00F0-00F3, U+00F5-00F8, U+00FA, U+00FD-00FE, U+0131, U+0303, U+0309, U+2014, U+201A, U+201E, U+2022, U+2044, U+2122, U+2215}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/big-shoulders-display-latin-etendu.woff2) format('woff2');unicode-range:U+0100-0130, U+0134-0148, U+014A-0151, U+0154-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01DD, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113}

body{margin:0;background:#F7F6F2;color:#111111;font-family:Archivo, 'Texte ajuste', 'Texte ajuste 2', 'Segoe UI', system-ui, sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{width:100%}
.colonne{max-width:46rem;margin:0 auto;padding:1.4rem 1.25rem}
.wrap.large .colonne{max-width:64rem}
.colonne:last-child{padding-bottom:3rem}
.colonne>:first-child{margin-top:0}
.bande{width:100%}
.bande .dedans{max-width:46rem;margin:0 auto;padding:1.8rem 1.25rem 2rem}
.wrap.large .bande .dedans{max-width:64rem}
.bande .dedans>:first-child{margin-top:0}
.bande .dedans>:last-child{margin-bottom:0}
.bande.jaune{background:#F2C400;color:#111111}
.bande.jaune a{color:#111111} .bande.jaune a:hover{color:#F7F6F2}
.bande.jaune .sous,.bande.jaune .chapeau{color:#111111}
.bande.encre{background:#111111;color:#F7F6F2}
.bande.encre a{color:#F2C400} .bande.encre a:hover{color:#F7F6F2}
.bande.encre .ch{border-top-color:#F2C400}
.bande.encre .ch .v{color:#F2C400}
.bande.encre .ch .l,.bande.encre .sous,.bande.encre .completude,.bande.encre .nb,.bande.encre .ctx{color:#F7F6F2;opacity:.85}
.bande.encre .note{border-left-color:#F2C400;color:#F7F6F2}
.bande.jaune .note{border-left-color:#111111}
.bande.jaune .nb,.bande.jaune .ctx,.bande.jaune .completude{color:#111111}
main>.bande:first-child .dedans{padding-top:2.2rem}
a{color:#111111;text-underline-offset:.15em;text-decoration-thickness:1px}
a:hover{color:#6B5400}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #111111;outline-offset:2px}
strong,b{font-weight:600}
/* Un nom de colonne ne se coupe nulle part tout seul. A 320 px,
   part_candidatures_avec_proposition_2025_pct poussait methodologie.html a
   448 px de large, hors de tout conteneur defilant. La coupure n'intervient
   que faute de place : les noms courts restent entiers, et un identifiant
   coupe reste lisible puisque rien ne s'y insere. */
code{overflow-wrap:anywhere}

.barre{background:#111111;color:#F7F6F2}
.barre-int{max-width:64rem;margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.barre a{color:#F7F6F2;text-decoration:none} .barre a:hover{color:#F2C400}
.barre a:focus-visible{outline:3px solid #F2C400;outline-offset:2px}
.logo{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:900;font-size:1.5rem;line-height:1;letter-spacing:.02em}
.tld{opacity:.55;font-weight:700}
.barre nav{display:flex;align-items:center;gap:1.1rem;font-size:.9rem;font-weight:600;min-width:0}
.barre-int{flex-wrap:wrap}
.rech{position:relative;display:flex;flex:1 1 16rem;max-width:26rem;min-width:12rem}
/* 16 px et pas un dixieme de moins : sous cette taille, Safari sur iOS
   agrandit la page a la mise au point du champ et ne la reduit jamais. Le
   champ etait a .95rem, soit 15,2 px. La bordure claire est ce qui donne au
   champ un bord : son fond et celui de la barre sont tous deux l'encre. */
.rech input{flex:1;min-width:0;font:inherit;font-size:1rem;height:2.75rem;padding:0 .7rem;border:2px solid #F7F6F2;border-right:0;border-radius:0;background:#111111;color:#F7F6F2}
.rech input::placeholder{color:#9A958C;opacity:1}
.rech button{font:inherit;font-size:.9rem;font-weight:600;height:2.75rem;padding:0 .8rem;border:2px solid #F7F6F2;border-radius:0;background:#F7F6F2;color:#111111;cursor:pointer}
.rech button:hover{background:#F2C400}
.rech-page{max-width:34rem;margin:1rem 0 1.4rem;flex:0 1 auto}
.rech-page input{border-color:#111111;background:#F7F6F2;color:#111111;height:3rem}
.rech-page input::placeholder{color:#5C5C5C}
.rech-page button{border-color:#111111;background:#111111;color:#F7F6F2;height:3rem}
.rech-page button:hover{background:#333333}
.sugg{position:absolute;top:2.5rem;left:0;right:0;background:#F7F6F2;color:#111111;border:2px solid #111111;border-top:0;z-index:5;max-height:60vh;overflow:auto}
.sugg a{display:block;padding:.5rem .7rem;border-top:1px solid #D9D7D0;color:#111111;text-decoration:none}
.sugg a:first-child{border-top:0}
.sugg a:hover,.sugg a.on,.sugg a:focus{background:#F2C400;color:#111111;outline:none}
.sugg b{display:block;font-weight:600;font-size:.95rem}
.sugg span{display:block;font-size:.875rem;color:#5C5C5C}
ul.res{list-style:none;padding:0;margin:.4rem 0 1.4rem}
ul.res li{border-top:1px solid #D9D7D0}
ul.res li:last-child{border-bottom:1px solid #D9D7D0}
ul.res a{display:block;padding:.7rem 0;text-decoration:none;min-height:2.75rem}
ul.res a:hover{background:#EFEDE7}
ul.res b{display:block;font-weight:600}
ul.res .ctx{display:block;font-size:.875rem;color:#5C5C5C}
.index-liste{columns:2;gap:2.5rem;list-style:none;padding:0;margin:.4rem 0 1.6rem;font-size:.95rem;line-height:1.9}
.index-liste li{break-inside:avoid;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #D9D7D0}
.index-liste .nb{font-variant-numeric:tabular-nums}
/* Sous 640 px le champ prend une ligne entiere, et il la prend AVANT le
   logotype et le fil : c'est le seul geste de la barre qui reponde a la
   question qu'un visiteur apporte, et il lui faut toute la largeur pour que
   son texte indicatif s'affiche entier. order:-1 ne deplace que lui, l'ordre
   de tabulation reste celui du balisage (logotype, champ, fil). min-width:0
   le laisse retrecir sous 12rem : a 320 px la ligne deborderait sinon. */
@media (max-width:640px){.index-liste{columns:1} .index-liste li{align-items:center} .index-liste a{display:block;flex:1;padding:.6rem 0} .barre-int{gap:.5rem;padding:.55rem 1rem}
 .rech{order:-1;flex-basis:100%;max-width:none;min-width:0} .barre nav{gap:.9rem}
 /* Neuf pixels rendus au texte indicatif : a 320 px il lui manquait un
    caractere, la place utile etant de 170 px pour 170 px demandes. */
 .rech input{padding:0 .55rem} .rech button{padding:0 .65rem}}
/* Le fil doit ceder la place au lien de methode, jamais l'inverse : une boite
   flex refuse par defaut de descendre sous la largeur de son contenu, celle du
   fil debordait donc de sa part et passait sous le lien voisin. min-width:0 la
   laisse retrecir, et l'ellipse se pose sur le lien lui-meme, seul element qui
   deborde vraiment : posee sur le seul parent elle laissait le lien coupe net
   au milieu d'un mot (constat A12). */
.barre nav>a{flex:0 0 auto}
/* L'accueil n'a pas de champ dans le bandeau (sa recherche est dans la bande
   jaune) : avec trois elements au lieu de quatre, l'espacement egal posait le
   menu au milieu du bandeau. Il rejoint la droite, a cote du comparateur,
   comme sur les autres pages (constat du 8 octobre 2026). */
.barre-int:not(:has(.rech)) nav{margin-left:auto}
/* Le lien du fil est une cible de 44 px (padding de .barre a), alignee en bas
   parce qu'un bloc en ligne a debordement cache n'a pas de ligne de base
   utilisable. Le texte voisin restait sur une ligne de 22 px et tombait donc
   12 px plus bas : « masters » et « › methodologie » se lisaient sur deux
   niveaux (constat du 27 septembre 2026). Une ligne de 44 px centre le texte
   a la hauteur de celui du lien. */
.barre .fil{white-space:nowrap;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;line-height:2.75rem}
.barre .fil a{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
/* Barre de tete retractable, sous 640 px seulement.

   Le motif est celui de .reglette, deja ecrit et teste plus bas : une classe
   .retire, un transform, une transition, le retour en flux sous 320 px pour
   le critere de reflux (WCAG 1.4.10) et l'arret de la transition quand le
   visiteur demande moins de mouvement.

   Trois choix qui different de la reglette, et pourquoi :
   - html.js : sans script, personne ne pose .retire, et une barre collee qui
     ne rend jamais sa place prendrait un cinquieme du viewport a 320x568.
     C'est ce que l'arbitrage du 4 septembre a refuse en retirant la barre de
     pouce. Sans script la barre reste donc statique, comme aujourd'hui, et la
     page reste entierement utilisable.
   - sticky et non fixed : la barre garde sa place dans le flux, donc aucun
     calage de padding sur le corps a tenir a jour et aucun decalage de mise
     en page au chargement. Le CLS reste a 0.
   - translateY(-100%) : elle sort par le haut, d'ou elle vient.

   .barre-colle n'est posee que sur les pages sans ruban de jalons : deux
   elements colles au meme bord se recouvriraient, et le ruban des fiches
   garde le bord superieur (voir _landmarks). */
@media (max-width:640px){
 html.js .barre-colle{position:sticky;top:0;z-index:20;
  transform:translateY(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
 html.js .barre-colle.retire{transform:translateY(-100%)}}
@media (max-width:320px){html.js .barre-colle{position:static;transform:none}}
@media (prefers-reduced-motion:reduce){html.js .barre-colle{transition:none}}
/* Le lien vers le comparateur ne s'affiche qu'une fois la selection non vide :
   comparer.js retire l'attribut hidden et ecrit le compte dans le span. Sous
   640 px il prend sa propre ligne, et n'apparait donc que dans un etat que le
   visiteur a lui-meme cree. */
.barre .comparateur-lien{white-space:nowrap;font-size:.9rem;font-weight:600}
@media (max-width:640px){.barre .comparateur-lien{flex-basis:100%}}
/* Cibles de pointage : 24 px minimum de haut, critere 2.5.8 de WCAG 2.2 au
   niveau AA. La regle vise les liens de navigation, hors liens en texte
   courant, que le critere dispense explicitement. Mesure du 3 septembre
   2026 : le fil d'Ariane etait a 16 px et le lien de methode a 22 px. */
.barre a,.topbar a,.nav-pied a,.sources a,.sugg a{display:inline-block;min-height:24px;line-height:1.6}
/* 44 px pour les cibles de navigation, comme la charte le demande pour toute
   cible tactile : le seuil de 24 px ci-dessus est celui de WCAG 2.2 AA, pas
   celui du site. Mesure du 23 septembre 2026 sur une fiche en telephone :
   50 cibles sur 62 sous 44 px, dont les liens du bandeau a 24 px. Le
   rembourrage agrandit la cible sans toucher a la taille du texte. */
.barre a{padding-block:10px}
.sugg a{padding:.45rem .7rem}

h1{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:900;font-size:clamp(2.4rem,8vw,3.6rem);line-height:.92;letter-spacing:-.005em;text-transform:uppercase;margin:1.1rem 0 .3rem;text-wrap:balance}
h1.marque{font-size:clamp(2.9rem,13vw,5.6rem);line-height:.88;text-transform:none;letter-spacing:-.015em}
.chapeau{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.5rem;line-height:1;text-transform:uppercase;margin:0 0 .6rem}
h1 .parcours{display:block;font-size:.4em;font-weight:700;line-height:1.15;letter-spacing:0;text-transform:none;margin-top:.5em}
h1.long{font-size:clamp(1.9rem,6vw,2.6rem)}
.sous{color:#5C5C5C;font-size:.94rem;margin:0 0 1rem}
/* Ligne datee du bandeau : a quelle saison le visiteur arrive. Elle est en
   encre pleine et non en gris, le bandeau jaune ne portant pas le contraste
   d'un texte secondaire. */
.saison{font-size:.875rem;line-height:1.4;margin:.5rem 0 0;font-weight:600}
/* La recherche de la bande d'accueil, 23 septembre 2026 : la seule porte
   d'entree de la page etait le petit champ du bandeau noir. Mesures de la
   charte, 52 px de haut, encre sur papier, angles droits ; la liste de
   suggestions se pose dessous, comme celle du bandeau. */
.rech-accueil{position:relative;display:flex;max-width:40rem;margin:1.3rem 0 .8rem}
.rech-accueil input{flex:1;min-width:0;height:3.25rem;font:inherit;font-size:1.1rem;padding:0 1rem;border:2px solid #111111;border-right:0;border-radius:0;background:#F7F6F2;color:#111111}
.rech-accueil input::placeholder{color:#5C5C5C;opacity:1}
.rech-accueil button{height:3.25rem;padding:0 1.3rem;font:inherit;font-weight:600;border:2px solid #111111;border-radius:0;background:#111111;color:#F7F6F2;cursor:pointer}
.rech-accueil button:hover{background:#F7F6F2;color:#111111}
.rech-accueil input:focus-visible,.rech-accueil button:focus-visible{outline:3px solid #111111;outline-offset:2px}
.rech-accueil .sugg{top:3.25rem}
@media (max-width:640px){.rech-accueil input{font-size:1rem;padding:0 .7rem} .rech-accueil button{padding:0 1rem}}
/* Le dernier dossier, sous la bande d'accueil. */
.dernier-dossier{border-top:3px solid #111111;padding-top:.6rem;margin:1.6rem 0 .4rem}
.dernier-dossier .k{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#5C5C5C;margin-bottom:.25rem}
.dernier-dossier a{font-weight:600;font-size:1.15rem;line-height:1.35}
.dernier-dossier a::after{content:" ›"}
.ouverture{font-size:1.05rem;line-height:1.5;margin:1rem 0}
.millesime{font-size:.875rem;color:#5C5C5C;margin:.4rem 0 0}
h2{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.9rem;line-height:1;text-transform:uppercase;margin:2.6rem 0 .9rem;padding-top:.7rem;border-top:6px solid #F2C400}
.bande h2{border-top-color:#111111;margin-top:1.6rem}
.bande.encre h2{border-top-color:#F2C400}
h3{font-size:1rem;font-weight:600;margin:1.6rem 0 .4rem}

.tete{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:.8rem 0 1rem}
.tete .v{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:900;font-size:clamp(4.5rem,20vw,7.5rem);line-height:.8;letter-spacing:-.02em;color:#111111;animation:glisse .6s cubic-bezier(.2,.8,.2,1) both}
.bande.jaune .tete .v{color:#111111}
.bande.encre .tete .v{color:#F2C400}
.tete .v small{font-size:.55em;vertical-align:.32em}
.tete .l{font-size:.98rem;line-height:1.3;padding-bottom:.35rem;max-width:22rem}
@keyframes glisse{from{transform:translateX(2rem);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tete .v{animation:none}}

/* Impression et enregistrement en PDF. Un usage reel : un service
   d'orientation, un dossier, un entretien. Sans ces regles, le navigateur
   sort les aplats d'encre pleine page, ce qui vide une cartouche et rend le
   texte illisible sur beaucoup d'imprimantes, et il imprime des commandes
   sur lesquelles on ne peut pas cliquer. */
@media print{
 @page{margin:16mm 14mm}
 html,body{background:#fff;color:#000;font-size:10.5pt}
 .barre,.rech,.jalons,.reglette,.envoi,.suite-t,.suite,.suite-donnees,.ailleurs,.actions,.evite,.nav-pied,
 .rubriques,.comparateur-lien,.remonter,#carte,.tri::after{display:none!important}
 .bande,.bande.encre,.bande.jaune,.entete,.encre{background:#fff!important;color:#000!important;
  padding-left:0!important;padding-right:0!important}
 .bande.encre .ch .v,.bande.encre .ch .l,.bande.encre .sous,.tete .v,.tete .l{color:#000!important}
 .ch{border-top:1.5pt solid #000!important}
 /* Le titre de section garde son filet, en noir : c'est ce qui structure
    la page une fois la couleur partie. */
 h2{border-top:2pt solid #000;padding-top:4pt;break-after:avoid}
 h1,h2,h3{break-after:avoid}
 figure,.tablebox,tr,.note{break-inside:avoid}
 /* Ce bloc precede les regles d'ecran, et une media query n'ajoute rien a la
    specificite : sans !important, la taille de table, la bordure de td et les
    trois valeurs de .sources plus bas repassaient a leur valeur d'ecran a
    l'impression, par le seul ordre de la feuille. C'est la raison de tous les
    !important de ce bloc. */
 table{font-size:9pt!important}
 th{background:#fff!important;color:#000!important;border-bottom:1.5pt solid #000}
 td{border-bottom:.5pt solid #999!important}
 .fig{overflow:visible!important} .fig svg{min-width:0!important;width:100%;max-width:170mm}
 /* Un lien imprime sans sa destination est un cul-de-sac. Les liens internes
    sont deja resolus par l'adresse de la page, seuls les externes la
    portent. */
 a{color:#000;text-decoration:underline}
 a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#444;word-break:break-all}
 a[href^="https://sortants.fr"]::after{content:none}
 details{display:block} details>summary{display:none} details>*{display:revert}
 .sources{border-top:1pt solid #000!important;padding-top:6pt!important;font-size:8.5pt!important}
 footer{background:#fff!important;color:#000!important;border-top:1pt solid #000}
 footer a{color:#000!important}
}

.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.9rem 1.4rem;margin:1rem 0}
/* Aucun nombre seul sur sa rangee. Cinq nombres dans quatre colonnes
   laissaient le cinquieme orphelin sur ordinateur, « 0 PUB » a l'accueil,
   « 26 acceptations » sur la fiche : trois colonnes donnent trois et deux.
   Sur telephone, deux colonnes, et un dernier nombre impair prend la
   rangee entiere. Audit d'usage du 23 septembre 2026, constat V3. */
@media (min-width:641px){.chiffres:has(>.ch:nth-child(5):last-child){grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.chiffres>.ch:last-child:nth-child(odd){grid-column:1/-1}}
.ch{border-top:3px solid #111111;padding-top:.4rem}
.ch .v{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:2.1rem;line-height:1;text-transform:uppercase}
.ch .l{font-size:.875rem;color:#5C5C5C;line-height:1.3}
.ch .c{font-size:.875rem;color:#5C5C5C}
/* Le denominateur d'un chiffre : ce sur quoi il est calcule, sous lui, en
   13 px. Une part sans son denominateur se lit comme une part nationale. */
.ch .d{font-size:.8125rem;line-height:1.35;margin-top:.25rem;color:#5C5C5C}
.bande.encre .ch .d{color:#F7F6F2;opacity:.7}
/* Variante serree de la bande de chiffres : elle est le premier ecran, pas
   une respiration. Valeur et libelle se touchent, les rangees se resserrent,
   et la bande rend une centaine de pixels sans qu'un chiffre maigrisse. */
.chiffres.serre{gap:.7rem 1.2rem;margin:0}
.chiffres.serre .ch{padding-top:.3rem}
.bande.serree .dedans{padding-top:1.1rem;padding-bottom:1.2rem}
/* Le premier ecran d'un telephone est ce que la moitie des visiteurs verra.
   Le bandeau et la bande de chiffres y rendent l'air qu'ils prennent sur un
   grand ecran : c'est du blanc, pas du contenu, et le premier grand chiffre
   passe ainsi de 1 055 px a moins de 300 px. */
@media (max-width:640px){
 main>.bande:first-child .dedans{padding-top:1.4rem;padding-bottom:1.2rem}
 .bande.serree .dedans{padding-top:.9rem;padding-bottom:1rem}}

figure{margin:1.2rem 0}
figcaption{font-size:.875rem;color:#5C5C5C;line-height:1.45;margin-top:.4rem}
figcaption b{color:#111111;font-weight:600}
svg{width:100%;height:auto;display:block}
.fig{overflow-x:auto}
@media (min-width:641px){.fig svg{min-width:600px}}
/* Sous 640 px le dessin prend la largeur qu'on lui donne et le viewBox fait le
   reste : la boite ne deborde plus, donc elle ne defile plus, donc plus rien
   n'y est hors de portee du clavier (constat A11). Les figures visees ne
   portent aucun lien : leur boite defilante etait le seul contenu qu'aucune
   tabulation n'atteignait. Le prix est connu et accepte : dans un viewBox de
   640 unites ramene a 280 px, un texte de 12 unites tombe a 5,3 px. Il n'etait
   de toute facon pas lisible avant, le plancher de 560 px le tenait a 10,5 px
   en echange d'un defilement de 280 px pour voir la seconde moitie du dessin.
   Et 320 px de large, c'est un ecran de 1280 px agrandi quatre fois : les
   4,8 px y sortent a 19 px sous l'oeil. Restent les vrais telephones a 375 ou
   430 px, ou le dessin est petit ; les valeurs s'y lisent a cote, dans la
   legende et dans la transcription que porte chaque figure, et le dessin,
   vectoriel, se rapproche au pincement sans se pixeliser.
   Le nuage et les rangees par universite font exception, marques dense : leurs
   points sont des liens, et les reduire ferait tomber la cible du doigt de
   17,7 a 10,6 px, en contradiction avec le constat A10. Ils gardent leur
   largeur, leur boite defile, et le dessin lui-meme prend une entree au
   clavier pour que le defilement soit atteignable a la tabulation. */
@media (max-width:640px){.fig svg{min-width:0} .fig svg.dense{min-width:560px}}
.fig svg.dense:focus-visible{outline:3px solid #111111;outline-offset:-3px}
@media (min-width:641px){.fig.rail svg{min-width:0;max-width:30rem}}
/* Le rail se rend a la largeur qu'on lui donne, et son dessin fait 358
   unites : sous 320 px la colonne n'en laissait que 280, soit une
   reduction a 0,78 qui ramenait le texte du cran a 8,2 px. Pleine largeur
   sous 641 px, les marges de la colonne annulees, il reste 320 px utiles
   et la reduction tombe a 0,89. */
@media (max-width:640px){.fig.rail{margin-left:-1.25rem;margin-right:-1.25rem}}
/* Un nuage de mention porte jusqu'a 80 points, et chaque point repetait les
   memes attributs de peinture : 17,2 pour cent du poids du nuage partait la,
   8,7 pour cent de celui des rangees. Seule la geometrie reste dans le
   balisage, parce qu'elle change d'un point a l'autre, et parce que r pose en
   CSS n'est pas rendu partout, ce qui effacerait la cible du doigt. */
.cible{fill:transparent}
a.pt circle.vis{fill:#111111;stroke:#F7F6F2;stroke-width:.6}
/* L'accent se marque sur le cercle et non sur le lien : la classe pt--accent
   du lien reste le seul compteur des points jaunes du nuage, celui que la
   recette confronte a la legende, et les rangees ne doivent pas le gonfler. */
a.pt circle.vis.acc{fill:#F2C400;stroke:#111111;stroke-width:2}
circle.lab-num{fill:#F7F6F2;fill-opacity:.9;stroke:#111111;stroke-width:.8}
text.lab-num{font-size:10.5px;fill:#111111;text-anchor:middle}
/* La peinture de l'accent compte un selecteur de type de plus que le survol,
   et l'emportait donc sur lui quel que soit l'ordre : un point jaune ne
   s'epaississait plus au passage du pointeur, alors qu'il le faisait quand
   sa peinture etait un attribut de presentation, que toute regle bat. La
   branche .vis.acc rend au survol le rang perdu. */
a.pt .vis{transition:r .1s} a.pt:hover .vis,a.pt:hover .vis.acc{stroke:#111111;stroke-width:2.5}
a.pt:focus-visible{outline:none} a.pt:focus-visible circle.cible{fill:none;stroke:#111111;stroke-width:2}
.lab-num{display:none}
@media (max-width:640px){.lab{display:none} .lab-num{display:block}}
/* Le resume est la seule commande du bloc, donc la cible du doigt. A .875rem
   sur l'interligne de 1,55 du corps, sa boite tombait a 22 px, sous les 24 px
   du critere 2.5.8 : mesure a 375 px le 7 septembre 2026 sur une fiche, sept
   des neuf blocs de transcription y etaient sous le seuil. Le plancher porte
   sur la seule hauteur, seule dimension contrainte ici, la boite etant de
   niveau bloc et donc deja large de toute la colonne. Meme idiome que les
   liens de navigation plus haut. Le prix est de deux pixels par bloc ferme,
   pour qui ne les ouvre pas. */
details.transcription{font-size:.875rem;color:#5C5C5C;margin:.4rem 0 1rem} details.transcription summary{cursor:pointer;font-weight:600;min-height:24px;padding-block:10px}
details.transcription ol{margin:.4rem 0 0;padding-left:0;list-style:none;columns:2;gap:2rem}
details.transcription ol.longue{columns:1} details.transcription li{break-inside:avoid;margin:.1rem 0}

.bandeau{font-size:1rem;line-height:1.5;margin:.6rem 0 1rem;max-width:44rem}
.outils{display:none;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.8rem 0} html.js .outils{display:flex}
.outils .compteur{font-size:.875rem;color:#5C5C5C}
.outils input[type=search]{font:inherit;font-size:.95rem;height:2.75rem;padding:0 .7rem;border:2px solid #111111;border-radius:0;min-width:15rem;background:#F7F6F2;color:#111111}
.outils button{font:inherit;font-size:.9rem;font-weight:600;height:2.75rem;padding:0 .9rem;border:2px solid #111111;border-radius:0;background:#F7F6F2;color:#111111;cursor:pointer}
.outils button:hover{background:#111111;color:#F7F6F2}
.outils select{font:inherit;font-size:.9rem;font-weight:600;height:2.75rem;padding:0 .6rem;border:2px solid #111111;border-radius:0;background:#F7F6F2;color:#111111;cursor:pointer;max-width:14rem}
.lien-action{font:inherit;font-weight:600;color:#111111;background:none;border:0;padding:.5rem 0;cursor:pointer;text-align:left;min-height:2.75rem}
.lien-action:hover{color:#6B5400}
.lien-action.dedans::before{content:"▪ ";color:#F2C400}
td.cmp,th.cmp{width:2.5rem;padding-right:0}
.case{font:inherit;font-weight:700;font-size:1rem;line-height:1;width:2rem;height:2rem;border:2px solid #111111;background:#F7F6F2;color:#111111;cursor:pointer}
.case:hover{background:#F2C400}
.case.dedans{background:#111111;color:#F7F6F2}
.case.dedans::after{content:""}
a.comparateur-lien{font-weight:600}
.jetons{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem} .jetons:empty{margin:0}
.jeton{font:inherit;font-size:.875rem;font-weight:600;min-height:2.25rem;padding:0 .7rem;border:0;border-radius:0;background:#F2C400;color:#111111;cursor:pointer}
.jeton:hover{background:#111111;color:#F7F6F2}
.jeton.vide{background:transparent;border:2px solid #111111}
.compteur{font-size:.875rem;color:#5C5C5C;margin:.2rem 0 .8rem}
.sommaire{font-size:.9rem;line-height:1.7;columns:2;gap:2rem;margin:.6rem 0 1rem;padding:0;list-style:none} .sommaire li{break-inside:avoid}
.sommaire .nb{margin-left:.3rem}
@media (max-width:640px){.sommaire{columns:1;font-size:.875rem;line-height:1.5} .sommaire .nb{display:block;margin:0} details.transcription ol{columns:1;list-style:decimal;padding-left:1.4rem}}
/* Une declaration de display posee par une classe l'emporte sur la regle
   [hidden] de la feuille du navigateur, qui n'a que la specificite d'un
   attribut. Sans cette ligne, tout element cache par du balisage mais mis en
   forme par une classe reste visible : le lien « ouvrir le comparateur »
   s'affichait ainsi avec zero formation retenue, et la carte de partage
   s'affichait sans script pour la produire. */
/* Replis ajustes. Aucune requete : src local() ne telecharge rien, il
   designe une police deja presente sur la machine. Chaque face n'en designe
   qu'une, car size-adjust ne vaut que pour celle qui est retenue. Les valeurs
   viennent de la mesure des fichiers, largeur moyenne sur un echantillon de
   lettres, chiffres et signes du site. */
@font-face{font-family:'Affiche ajuste';src:local('Arial Narrow');
 size-adjust:99.6%;ascent-override:98.8%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:'Affiche ajuste 2';src:local('Impact');
 size-adjust:96.9%;ascent-override:101.5%;descent-override:22.0%;line-gap-override:0%}
@font-face{font-family:'Texte ajuste';src:local('Segoe UI');
 size-adjust:109.2%;ascent-override:80.4%;descent-override:19.2%;line-gap-override:0%}
@font-face{font-family:'Texte ajuste 2';src:local('Arial');
 size-adjust:103.7%;ascent-override:84.7%;descent-override:20.2%;line-gap-override:0%}
[hidden]{display:none!important}
/* La table de comparaison se replie en cartes sous 640 px : huit colonnes
   tenaient sur 805 pixels dans une boite de 350, et l'emploi comme le salaire,
   qui sont la raison d'etre de la page, faisaient partie des colonnes cachees.
   Le tri reste atteignable : les en-tetes triables deviennent une rangee de
   pastilles et gardent leurs gestionnaires. */
@media (max-width:640px){
 .tablebox:has(table.comparateur){overflow-x:visible}
 table.comparateur{display:block}
 table.comparateur thead{display:block;position:sticky;top:0;z-index:2;background:#111111;padding:.45rem .5rem}
 table.comparateur thead tr{display:flex;flex-wrap:wrap;gap:.3rem}
 table.comparateur thead th{display:inline-flex;align-items:center;min-height:2.3rem;
  padding:.25rem .6rem;background:transparent;border:1px solid #5C5C5C;font-size:.75rem;
  letter-spacing:.03em;white-space:nowrap}
 table.comparateur thead th:not(.tri){display:none}
 table.comparateur thead th[aria-sort=ascending],
 table.comparateur thead th[aria-sort=descending]{background:#F2C400;color:#111111;border-color:#F2C400}
 table.comparateur tbody{display:block;border-top:2px solid #111111;padding:.5rem 0 .7rem}
 table.comparateur tbody tr{display:block}
 table.comparateur tbody td{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;border:0;padding:.2rem .1rem;text-align:left}
 table.comparateur tbody td::before{content:attr(data-l);flex:0 0 auto;font-size:.8125rem;
  letter-spacing:.04em;text-transform:uppercase;color:#5C5C5C;font-weight:600}
 table.comparateur tbody td:first-child{display:block;font-weight:600;font-size:1.05rem;
  padding-bottom:.3rem}
 table.comparateur tbody td:first-child::before{content:none}
 table.comparateur tbody td.vide{display:none}
 table.comparateur tbody td.cmp{justify-content:flex-end;padding-top:.4rem}
 table.comparateur tr.variante td{background:transparent}
 table.comparateur tr.variante{border-left:3px solid #D9D7D0;padding-left:.7rem;margin-top:.5rem}
 table.comparateur tr.variante td:first-child{padding-left:0;font-size:.95rem}
}
.tablebox{background:transparent;border:0}
@media (max-width:640px){.tablebox{overflow-x:auto}}

/* Tableaux en cartes sous 640 px. Un tableau de cinq colonnes ne tient pas
   dans 375 px : les colonnes de droite passent hors ecran derriere un
   defilement horizontal que rien n'annonce, et ce sont souvent celles qui
   repondent a la question. Chaque ligne devient donc un bloc, chaque cellule
   une paire intitule / valeur, l'intitule venant de data-l.
   display:block detruit la semantique de tableau pour les technologies
   d'assistance : les roles explicites poses dans le balisage la retablissent,
   c'est la raison de leur presence sur le rendu large ou ils font double
   emploi avec les roles implicites. */
@media (max-width:640px){
 .tablebox.cartes{overflow-x:visible}
 .cartes table{display:block}
 .cartes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .cartes tbody,.cartes tr{display:block}
 .cartes tr{border-top:2px solid #111111;padding:.55rem 0 .7rem}
 .cartes tr:first-child{border-top:0}
 .cartes td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
   border:0;padding:.22rem .1rem;text-align:left}
 .cartes td::before{content:attr(data-l);flex:0 0 auto;font-size:.8125rem;letter-spacing:.04em;
   text-transform:uppercase;color:#5C5C5C;font-weight:600}
 .cartes td:first-child{display:block;font-weight:600;font-size:1.05rem;padding-bottom:.35rem}
 .cartes td:first-child::before{content:none}
 .cartes td.num .v{text-align:right}
 .cartes td .v{min-width:0}
 .cartes caption{text-align:left}
}
/* Ligne de rupture posee DANS le corps du tableau, la ou la serie se coupe.
   Elle porte le nombre de lignes omises et le lien vers la liste entiere. */
tr.rupture td{font-size:.875rem;color:#5C5C5C;background:transparent;
 border-bottom:1px solid #D9D7D0;padding:.7rem}
tr.rupture td a{display:inline-block;min-height:2.75rem;line-height:2.75rem}

/* Tableau « ou se presse la file » en cartes, deux niveaux au lieu de quatre.
   Le mode carte generique reimprimait Candidatures, Places et Par place sur
   chacune des treize lignes, soit 39 intitules pour 39 valeurs, pour environ
   60 px par ligne et aucune information nouvelle. Ici le secteur et son
   rapport tiennent la premiere ligne, les deux effectifs la seconde en petit.
   Les intitules restent dans le HTML, portes par data-l comme partout
   ailleurs : ils sortent apres la valeur, en minuscules. */
@media (max-width:640px){
 .cartes.presse tr{display:flex;flex-wrap:wrap;align-items:baseline;
   column-gap:.4rem;padding:.2rem 0 .55rem}
 /* Le ::after du tr est un element flexible du tr : c'est lui qui force le
    retour a la ligne entre le rapport et les deux effectifs, sans balise
    supplementaire et sans toucher a la semantique du tableau. */
 .cartes.presse tr::after{content:"";order:3;flex:0 0 100%;height:0}
 .cartes.presse td{display:block;padding:0;border:0;text-align:left}
 .cartes.presse td::before{content:none}
 .cartes.presse td:first-child{order:1;flex:1 1 9rem;min-width:0;
   font-size:1.05rem;font-weight:600;padding:0}
 /* Cible de 44 px sans imposer une ligne de 44 px : un nom de secteur long
    passe a la ligne, le rembourrage vertical fait la hauteur. */
 .cartes.presse td:first-child a{display:inline-block;min-height:2.75rem;
   padding:.5rem 0;line-height:1.3}
 .cartes.presse td.rapport{order:2;flex:0 0 auto;
   font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.5rem}
 .cartes.presse td.cand{order:4}
 .cartes.presse td.places{order:5}
 .cartes.presse td.cand,.cartes.presse td.places{flex:0 0 auto;
   font-size:.8125rem;color:#5C5C5C}
 .cartes.presse td.places::before{content:"· ";color:#5C5C5C}
 .cartes.presse td.rapport::after,.cartes.presse td.cand::after,
 .cartes.presse td.places::after{content:" " attr(data-l);text-transform:lowercase;
   font-family:Archivo, 'Texte ajuste', 'Texte ajuste 2', 'Segoe UI', system-ui, sans-serif;font-weight:600;font-size:.8125rem;color:#5C5C5C}
 .cartes.presse tr.rupture{display:block;padding:0}
 .cartes.presse tr.rupture td{padding:.55rem 0}
}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:#F7F6F2;font-weight:600;text-align:left;padding:.55rem .7rem;line-height:1.25;vertical-align:bottom;background:#111111}
th:first-child{padding-left:.5rem}
th .nb,th .ctx,th .completude{color:#F7F6F2;opacity:.8}
th a{color:#F2C400} th a:hover{color:#F7F6F2}
table.comparateur th{position:sticky;top:0;z-index:1}
th.tri{cursor:pointer} th.tri:hover{color:#F2C400}
/* Les deux commandes des tableaux sont des boutons pour qui les entend, et
   rien de plus pour qui les voit : la cellule garde l'aspect qu'elle avait
   quand la ligne entiere portait le clic. */
.deplier,.tri-b{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
 text-align:inherit;cursor:pointer}
.deplier:focus-visible{outline:3px solid #111111;outline-offset:2px}
/* Le bandeau de colonnes est en encre pleine : un contour d'encre y serait
   invisible. Le jaune y tient 11:1, et il ne touche jamais le papier. */
.tri-b:focus-visible{outline:3px solid #F2C400;outline-offset:2px}
th.tri[aria-sort=ascending]::after{content:" ↑"} th.tri[aria-sort=descending]::after{content:" ↓"}
td{padding:.6rem .7rem;border-bottom:1px solid #D9D7D0;vertical-align:top}
td:first-child{padding-left:.5rem}
tr:last-child td{border-bottom:none}
.num{font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}
/* L'en-tete d'une colonne de nombres se cale sur ses nombres. rendu.tableau
   pose la classe num sur les cellules et non sur les en-tetes : la regle se
   lit donc sur la premiere ligne du corps, sans toucher au balisage de
   8 845 fiches. Audit d'usage du 23 septembre 2026, constat V2. */
table:has(tbody tr:first-child td:nth-child(2).num) thead th:nth-child(2),
table:has(tbody tr:first-child td:nth-child(3).num) thead th:nth-child(3),
table:has(tbody tr:first-child td:nth-child(4).num) thead th:nth-child(4),
table:has(tbody tr:first-child td:nth-child(5).num) thead th:nth-child(5),
table:has(tbody tr:first-child td:nth-child(6).num) thead th:nth-child(6),
table:has(tbody tr:first-child td:nth-child(7).num) thead th:nth-child(7){text-align:right}
svg text.valeur{font-variant-numeric:tabular-nums lining-nums}
.note{font-size:.9rem;line-height:1.5;border-left:2px solid #111111;padding:.2rem 0 .2rem 1rem;margin:1rem 0;max-width:44rem}
tbody.grp tr.univ{cursor:pointer}
html.js tbody.grp tr.univ td:first-child::before{content:"▸ ";color:#5C5C5C}
html.js tbody.grp.open tr.univ td:first-child::before{content:"▾ ";color:#5C5C5C}
html.js tbody.grp tr.seule td:first-child::before{content:""}
tr.variante td{background:#EFEDE7}
html.js tbody.grp:not(.open) tr.variante{display:none}
tbody.grp:target tr.univ td{box-shadow:inset 4px 0 0 #F2C400} tbody.grp:target{scroll-margin-top:3rem}
tr.variante td:first-child{padding-left:1.7rem;font-size:.92em}
tbody.renvoi td{background:#EFEDE7}
.nb{font-size:.875rem;color:#5C5C5C;margin-left:.4rem;white-space:nowrap}
.completude{font-size:.875rem;color:#5C5C5C;line-height:1.5}

/* Fin de fiche : une masse, deux registres. La bande d'encre porte le seul
   geste primaire, un aplat jaune sous de l'encre (11,4:1). Dessous, sur
   papier, la navigation en liste typographique, jamais cachee (NN/g : une
   navigation cachee perd 20 % de decouvrabilite), puis la ligne des donnees.
   Aucun export sans usage sur telephone : le JSON a quitte la fiche, il n'a
   ni visualiseur ni application sur iOS et Android d'origine, et Chromium
   l'exclut du partage de fichiers. Enquete du 5 septembre 2026. */
.envoi{background:#111111;color:#F7F6F2;padding:1.6rem 1rem 1.4rem;margin:2.6rem -1rem 0}
.envoi .t{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:900;text-transform:uppercase;font-size:2.35rem;line-height:.95;
 letter-spacing:.01em;margin:0 0 .35rem;text-wrap:balance}
.envoi p{color:#F7F6F2;opacity:.82;font-size:.9375rem;line-height:1.45;margin:0 0 1rem;max-width:34ch}
.envoi .completude{opacity:.7;font-size:.875rem;margin:.7rem 0 0;max-width:none}
.envoi .completude a{color:#F7F6F2}
.partager{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:3.5rem;
 padding:0 1rem;background:#F2C400;color:#111111;border:0;border-radius:0;cursor:pointer;text-decoration:none;
 font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:900;font-size:1.75rem;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.partager small{font-family:Archivo,'Texte ajuste','Texte ajuste 2','Segoe UI',system-ui,sans-serif;font-weight:600;font-size:.8125rem;letter-spacing:.04em;text-transform:none}
.partager svg{display:none}
.partager:hover{background:#F7F6F2}
.partager:focus-visible{outline:3px solid #F7F6F2;outline-offset:3px}
@media (min-width:641px){.envoi{margin-left:0;margin-right:0;padding-left:1.4rem;padding-right:1.4rem}}
.suite-t{font-family:Archivo,'Texte ajuste','Texte ajuste 2','Segoe UI',system-ui,sans-serif;font-weight:600;font-size:.75rem;line-height:1.2;letter-spacing:.1em;
 text-transform:uppercase;color:#5C5C5C;margin:1.8rem 0 .3rem}
.suite{list-style:none;margin:0;padding:0;border-top:2px solid #111111}
.suite li{border-bottom:1px solid #D9D7D0}
.suite a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.8rem;min-height:3rem;
 padding:.55rem 0;text-decoration:none;color:#111111}
.suite .k{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.suite .v{color:#5C5C5C;font-size:.9375rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suite .f{color:#5C5C5C}
.suite a:hover .k{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px}
.suite-donnees{font-size:.875rem;color:#5C5C5C;margin:.9rem 0 0}
.ailleurs{display:flex;flex-wrap:wrap;gap:0 1.4rem;font-size:.9375rem;margin:.5rem 0 1.4rem}
/* Les liens de depart sont volontairement d'un cran en dessous des puces :
   gris, sans cadre, plus petits. On doit voir d'un coup d'oeil ce qui agit
   sur cette page et ce qui mene ailleurs. L'ecart entre eux tient lieu de
   separateur ; le point median du balisage est masque, il pendait en bout de
   ligne des que la liste se repliait. */
.ailleurs a{color:#5C5C5C;font-weight:600;text-decoration:none;display:inline-flex;
 align-items:center;gap:.3rem;min-height:2.75rem;padding:.35rem 0}
.ailleurs a::after{content:"›";color:#D9D7D0;font-weight:400}
.ailleurs a:hover{color:#111111} .ailleurs a:hover::after{color:#F2C400}
.ailleurs .sep{display:none}

/* Reglette du comparateur. Le seul element fixe en bas, et seulement quand
   le comparateur contient quelque chose : c'est l'unique element a etat de
   la fiche, d'interet continu pendant la lecture. Elle se retire au
   defilement vers le bas et revient vers le haut. Marge basse au-dessus de
   la zone de rappel du chrome navigateur (Safari 26 et Chrome 138 posent la
   barre d'adresse en bas), plus l'encoche. Repasse en flux sous 320 px pour
   le critere de reflux (WCAG 1.4.10). Remplace la barre de pouce du
   4 septembre, permanente et portant un lien externe : deux barres basses
   ne coexistent pas (Material 3), et le bas de l'ecran est devenu le
   territoire du navigateur. */
.reglette{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;
 justify-content:space-between;gap:1rem;background:#111111;color:#F7F6F2;text-decoration:none;
 padding:.55rem 1rem calc(.55rem + 28px + env(safe-area-inset-bottom,0px));min-height:3rem;
 transform:translateY(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.reglette.retire{transform:translateY(100%)}
.reglette .n{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:900;font-size:1.5rem;line-height:1;letter-spacing:.01em}
.reglette .o{font-weight:600;font-size:.9375rem;text-transform:uppercase;letter-spacing:.04em;
 border-bottom:3px solid #F2C400;padding-bottom:.1rem;white-space:nowrap}
.reglette:hover .o{border-color:#F7F6F2}
.reglette:focus-visible{outline:3px solid #F2C400;outline-offset:-3px}
body.avec-reglette{padding-bottom:5.5rem}
@media (min-width:641px){.reglette{padding-left:max(1rem,calc((100vw - 46rem)/2));padding-right:max(1rem,calc((100vw - 46rem)/2))}}
@media (max-width:320px){.reglette{position:static;padding:.55rem 1rem} body.avec-reglette{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.reglette{transition:none}}

/* Sommaire de fiche : dans une page longue, savoir ce qui vient et y aller
   d'un geste. Colle sous l'en-tete, defile lateralement au pouce. */
.jalons{position:sticky;top:0;z-index:10;display:flex;gap:.4rem;overflow-x:auto;
 background:#F7F6F2;border-bottom:2px solid #111111;margin:0 0 1.2rem;padding:.5rem 0;
 scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jalons::-webkit-scrollbar{display:none}
.jalons a{flex:0 0 auto;padding:.5rem .8rem;min-height:2.75rem;display:inline-flex;align-items:center;
 font-size:.875rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
 color:#111111;text-decoration:none;border:2px solid transparent;scroll-snap-align:start}
.jalons a:hover{border-color:#111111}
.jalons a:focus-visible{outline:3px solid #111111;outline-offset:-1px}
@media (max-width:640px){.jalons{margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}}
/* Le ruban collant masquait l'element focalise au clavier quand il se trouvait
   dessous : le defilement de focus lui laisse sa hauteur (WCAG 2.4.11). */
html{scroll-padding-top:5rem}
/* Les deux gestes utiles pendant la lecture, epingles a droite du ruban,
   hors du defilement : atteignables a toute position de la page, sans
   barre ajoutee. Deux cibles de barre d'outils, differenciees par l'etat,
   et non une rangee d'objets identiques. 48 px (Material 3). Le jaune ne
   porte que l'etat, sous de l'encre. */
.jalons-gestes{gap:0;overflow:visible;padding:0;align-items:stretch}
.jalons-gestes .sec{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
 padding:.45rem 0;flex:1 1 auto;min-width:0}
.jalons-gestes .sec::-webkit-scrollbar{display:none}
/* A 320 px, la largeur d'un zoom a 400 pour cent, la fenetre ne fait plus que
   180 px de haut et le ruban colle en prenait 54, soit 29 pour cent de ce qui
   reste a lire. C'est cette moitie du constat A15 qu'on tranche : le ruban
   redevient un sommaire ordinaire, en tete de page, et rend sa hauteur au
   texte. Rendre la barre de defilement visible n'y aurait rien change, mais
   l'autre moitie du constat tient toujours a cette largeur, ou un seul onglet
   entre dans le champ : la barre reparait donc ici, faute d'un autre indice
   qu'il y en a d'autres derriere. Le meme choix que pour la reglette, a la
   meme largeur.
   La barre se pose sur .sec, seul element qui defile : le ruban lui-meme
   porte overflow:visible depuis .jalons-gestes, et une barre demandee sur lui
   ne se dessinerait nulle part. Et le bloc vient ici, apres les regles de
   .jalons-gestes, parce qu'une media query n'ajoute rien a la specificite :
   plus haut dans la feuille, la declaration qui masque la barre l'emportait,
   par le seul ordre, sur celle qui la montre. */
@media (max-width:320px){
 .jalons{position:static}
 .jalons-gestes .sec{scrollbar-width:thin}
 .jalons-gestes .sec::-webkit-scrollbar{display:block;height:4px}
 .jalons-gestes .sec::-webkit-scrollbar-thumb{background:#5C5C5C}
}
.jalons-gestes .gestes{display:flex;gap:.4rem;flex:0 0 auto;padding:.45rem 0 .45rem .6rem;
 border-left:1px solid #D9D7D0;align-items:center}
.geste{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;
 min-height:3rem;min-width:3rem;padding:0 .7rem;display:inline-flex;align-items:center;justify-content:center;
 background:#F7F6F2;color:#111111;border:2px solid #111111;border-radius:0;cursor:pointer;text-decoration:none;line-height:1}
.geste svg{display:none}
.geste:hover{background:#111111;color:#F7F6F2}
.geste:focus-visible{outline:3px solid #111111;outline-offset:2px}
.geste[aria-pressed=true]{background:#F2C400;border-color:#F2C400}
.geste[aria-pressed=true]:hover{background:#111111;color:#F7F6F2;border-color:#111111}
@media (max-width:400px){.geste{padding:0 .5rem;font-size:.9375rem}}
.actions{display:flex;flex-direction:column;margin:1.4rem 0}
.actions a{display:flex;justify-content:space-between;align-items:center;min-height:2.75rem;padding:.5rem 0;border-top:1px solid #D9D7D0;text-decoration:none;font-weight:600;gap:1rem}
.actions a:last-child{border-bottom:1px solid #D9D7D0}
.actions.situations a{align-items:flex-start;padding:.9rem 0}
.actions.situations b{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.65rem;line-height:1.05;text-transform:uppercase;display:block}
.actions.situations a:hover b{background:#F2C400;box-shadow:.2rem 0 0 #F2C400,-.2rem 0 0 #F2C400}
.actions.situations .ctx{display:block;font-weight:400;font-size:.875rem;color:#5C5C5C;line-height:1.4;margin-top:.15rem;max-width:34rem}
/* Rangee de rubriques de l'accueil. Elle etait au pied de page, a 8 406 px et
   en liens de 15 px : les villes, les universites, le comparateur et la
   recherche n'etaient cites nulle part avant le dixieme ecran. Ici, cibles de
   44 px et effectif a cote du libelle, l'effectif etant celui de la page
   d'arrivee et non un echantillon. */
.rubriques{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem}
.rubriques a{display:flex;align-items:baseline;gap:.4rem;min-height:2.75rem;
 padding:.6rem .9rem;border:2px solid #111111;text-decoration:none;
 font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.2rem;text-transform:uppercase;line-height:1.1}
.rubriques a:hover{background:#111111;color:#F7F6F2}
.rubriques a:focus-visible{outline:3px solid #111111;outline-offset:2px}
.rubriques .nb{font-family:Archivo, 'Texte ajuste', 'Texte ajuste 2', 'Segoe UI', system-ui, sans-serif;font-weight:600;font-size:.8125rem;color:#5C5C5C}
.rubriques a:hover .nb{color:#F7F6F2}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:3rem;padding:0 1rem;background:#111111;color:#F7F6F2;text-decoration:none;font-weight:600}
.bouton:hover{background:#333333;color:#F7F6F2}
.bouton.creux{background:transparent;color:#111111;border:2px solid #111111} .bouton.creux:hover{background:#111111;color:#F7F6F2}
/* Actualites. Une publication par article, sans cadre ni carte : le filet
   jaune du titre de section suffit a les separer, et c'est deja la regle des
   sections partout ailleurs. La ligne de tete porte la date et le niveau,
   dans le registre des libelles de rubrique, capitales espacees. L'accroche
   garde la graisse qu'elle a sur le reseau, ou elle est la seule ligne lue
   avant le pli. */
.actu-tete{margin:0;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#5C5C5C}
/* Sur la bande jaune, le texte est en encre : le gris secondaire n'y tenait
   que 4,0:1. Constate le 8 octobre 2026 sur la page d'un dossier. */
.bande.jaune .actu-tete{color:#111111}
.actu-accroche{font-size:1.15rem;font-weight:600;line-height:1.4;margin:.7rem 0 1rem}
/* Ou une publication se trouve, en fin d'article. L'interligne de 44 px
   porte la ligne entiere : les deux liens sont des cibles tactiles, et le
   texte qui les relie s'aligne sur elles au lieu de les faire flotter. */
.actu-publie{margin:1.1rem 0 0;font-size:.9375rem;font-weight:600;line-height:2.75rem}
.actu-publie a{display:inline-block;min-height:2.75rem}
/* Le filtre par type de publication. Ce sont des liens vers une page par
   type : le rail garde donc l'apparence du sommaire de fiche, et l'etat
   courant se marque par aria-current, que le script deplace quand il filtre
   sur place. Le compte est en clair : savoir combien de dossiers existent
   avant de cliquer evite un aller-retour. */
.filtre-publications a[aria-current]{border-color:#111111;background:#111111;color:#F7F6F2}
.filtre-publications a[aria-current] .nb{color:#F7F6F2}
.filtre-publications .nb{margin-left:.35rem;font-weight:400;color:#5C5C5C}
/* Un dossier : un article long, avec ses figures et ses sources numerotees.
   Les figures portent une part de la demonstration et gardent leur rapport
   d'origine ; l'attribut de dimension evite que la page saute pendant le
   chargement. */
.figure-dossier{margin:1.6rem 0}
.figure-dossier img{display:block;box-sizing:border-box;width:100%;height:auto;border:2px solid #111111}
/* Une figure ne descend pas sous 840 px et defile dans sa propre boite
   (AGENTS.md, interface tactile) : a 840 px, les libelles de 23 px des figures
   de 1 600 px s'affichent a 12 px, le plancher des graphiques. A 700 px ils
   tombaient a 10 px (contre-verification du 8 octobre 2026). Sur ordinateur,
   une colonne plus etroite fait defiler la figure de la meme facon ; plus
   large, la figure la remplit. La couverture n'est pas dans une boite : elle
   se lit reduite. */
.figure-dossier .defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
.figure-dossier .defile:focus-visible{outline:3px solid #111111;outline-offset:-3px}
.figure-dossier .defile img{min-width:840px;max-width:none}
.en-bref ul{margin:.6rem 0 0;padding-left:1.2rem}
.en-bref li{margin:.5rem 0}
.sources-dossier{font-size:.9375rem;line-height:1.55;padding-left:2.2rem}
.sources-dossier li{margin:.5rem 0}
.sources-dossier a{word-break:break-word}
/* Le renvoi vers une source, en exposant, dans le fil du texte. Cible
   tactile insuffisante par nature : la liste des sources reste atteignable
   par son titre de section, et le renvoi n'est qu'un raccourci. Depuis le
   8 octobre 2026 il tient le plancher de 14 px, au lieu des 13,3 px herites du
   navigateur, et sa zone cliquable s'elargit par une marge interieure que
   des marges negatives retirent de la ligne : l'interligne ne bouge pas. */
sup.renvoi{font-size:.875rem;line-height:0}
sup.renvoi a{display:inline-block;line-height:1;padding:.4rem .2rem;margin:-.6rem -.15rem -.4rem}
sup a{text-decoration:none;font-weight:700}
sup a:hover{text-decoration:underline}
.comptes{display:flex;flex-wrap:wrap;gap:0 2rem;margin:.6rem 0 0;padding:0;list-style:none;font-weight:600}
.comptes a{display:inline-flex;align-items:center;min-height:2.75rem}
/* Bloc encadre. Retenu le 14 septembre 2026, sur deux pages qui se lisaient
   comme un seul bloc continu : douze secteurs de mentions a la suite, et les
   publications reprises des comptes. Le seul filet de titre ne suffisait pas
   a dire ou l'un finit et ou l'autre commence.

   Ce n'est pas une carte au sens que la charte proscrit : angles droits,
   aucune ombre, aucun fond propre, aucun conteneur imbrique, et le cadre est
   un filet, ce dont la hierarchie du site est faite. C'est la grammaire de la
   rangee de rubriques de l'accueil, en bloc plutot qu'en bouton. Le filet
   jaune du titre de section passe en tete de cadre, ou il coiffe le bloc au
   lieu de flotter a deux pixels de sa bordure. */
/* Le sommaire des secteurs, en tete de l'index des mentions. Trois colonnes
   plutot que deux : quarante-six libelles dont le plus long fait cinquante
   signes tiennent alors en seize rangees, contre vingt-trois. Meme grammaire
   que les listes de mentions qui suivent, filet sous chaque ligne, sans le
   nombre : ces liens menent a une section de la page, pas a un catalogue. */
/* Rangee de lettres, en tete des index des villes, des universites et des
   secteurs. Meme grammaire que la rangee de rubriques de l'accueil :
   rectangle a bordure de 2 px, angles droits, 44 px de cote. Les vingt-six
   lettres etaient des liens d'un seul caractere separes par des points
   mediums, soit des cibles de neuf pixels de large sur la page ou l'on vient
   justement chercher une lettre. */
.lettres-index{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:.4rem 0 0}
.lettres-index a{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:0 .3rem;border:2px solid #111111;text-decoration:none;font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.2rem;line-height:1}
.lettres-index a:hover{background:#111111;color:#F7F6F2}
.lettres-index a:focus-visible{outline:3px solid #111111;outline-offset:2px}
.secteurs-index{columns:3;gap:2.5rem;list-style:none;padding:0;margin:.4rem 0 0;font-size:.95rem;line-height:1.9}
.secteurs-index li{break-inside:avoid;border-bottom:1px solid #D9D7D0}
@media (max-width:900px){.secteurs-index{columns:2}}
@media (max-width:640px){.secteurs-index{column-count:auto;max-height:15rem;overflow-y:auto;overscroll-behavior:contain}}
/* Les metiers vises par une fiche du RNCP, et les blocs de competences
   qu'elle decoupe : des inventaires courts, de un a onze items. Filets
   horizontaux comme les tableaux, aucune puce ; la liste presente un
   inventaire, elle n'enumere pas un raisonnement. Le marqueur « commun »
   est un libelle, en 13 px comme les libelles de rubrique, et non une
   couleur : le jaune ne dit qu'une chose a la fois, et il dit deja la
   valeur mesuree ailleurs sur la page. */
.inventaire{list-style:none;padding:0;margin:.6rem 0 1.2rem;font-size:.9375rem;line-height:1.5}
.inventaire li{border-top:1px solid #D9D7D0;padding:.6rem 0}
.inventaire li:last-child{border-bottom:1px solid #D9D7D0}
.inventaire .socle{display:block;font-size:.8125rem;color:#5C5C5C}
details.blocs{margin:.6rem 0 1.2rem}
details.blocs>summary{cursor:pointer;font-weight:600;padding:.7rem 0;min-height:2.75rem;border-top:3px solid #111111}
details.blocs .inventaire{margin-top:0}
.encadre{border:2px solid #111111;border-top:6px solid #F2C400;padding:1rem 1.2rem 1.2rem;margin:1.5rem 0}
.encadre>h2{border-top:0;padding-top:0;margin-top:0}
.encadre>*:last-child{margin-bottom:0}
@media (max-width:640px){.encadre{padding:.9rem .9rem 1rem}}
.sources{margin-top:2rem;border-top:1px solid #D9D7D0;padding-top:.8rem;font-size:.875rem;color:#5C5C5C;line-height:1.5}
.nav-pages{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;margin:1.2rem 0;font-weight:600}
.pied{background:#111111;color:#F7F6F2;font-size:.875rem;line-height:1.7;margin-top:2.4rem}
.pied .dedans{max-width:64rem;margin:0 auto;padding:1.4rem 1.25rem 1.8rem}
.pied a{color:#F2C400} .pied a:hover{color:#F7F6F2}
/* Quatre groupes nommes, qui s'empilent des que la place manque. La
   rangee de quinze liens qu'ils remplacent s'enroulait en paragraphe
   sous 640 px, sans qu'aucune cible n'atteigne 44 px. */
.pied-cols{display:grid;gap:1.4rem 2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.pied-titre{margin:0 0 .35rem;font-weight:600;color:#F7F6F2;opacity:.62;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
.pied-bloc ul{list-style:none;margin:0;padding:0}
.pied-bloc li{margin:0}
.pied-bloc a{display:block;padding:.28rem 0;min-height:24px}
/* Le filet separe ce qui se navigue de ce qui date la page. */
.pied-source{margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(250,249,246,.22);opacity:.78;max-width:52rem}
/* Les entrees de service : joignables depuis chaque page, sans occuper la
   place des rubriques. Le contraste reste au-dessus du seuil, l'opacite ne
   descend pas sous celle de la provenance. */
.pied-annexe{margin:.9rem 0 0;font-size:.8125rem;opacity:.78}
.pied-annexe a{white-space:nowrap}
.pied-marque{margin:.4rem 0 0;opacity:.78}
/* Navigation persistante : premiere ligne du pied, detachee par un filet, et
   cibles de 24 px minimum comme l'exige WCAG 2.2 au niveau AA. */
.nav-pied{font-family:Archivo, 'Texte ajuste', 'Texte ajuste 2', 'Segoe UI', system-ui, sans-serif;font-weight:600;font-size:.94rem;padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid #3a3a3a}
.nav-pied a{display:inline-block;min-height:24px;line-height:24px;padding:0 .1em}
dl.glossaire dt{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.3rem;text-transform:uppercase;margin-top:1.4rem}
dl.glossaire dd{margin:.2rem 0 0}
/* z-index au-dessus de la barre de tete : depuis qu'elle se colle sous
   640 px, un lien d'evitement a z-index 2 se serait affiche derriere elle,
   au pixel pres a l'endroit ou il apparait. */
.evite{position:absolute;left:-999px;top:0;background:#F2C400;color:#111111;padding:.5rem 1rem;font-weight:600;z-index:30} .evite:focus{left:.5rem;top:.5rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
details.sommaire-bloc summary{font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.3rem;text-transform:uppercase;margin:1.6rem 0 .4rem;cursor:pointer}
details.secteur{border-bottom:1px solid #D9D7D0;padding:.7rem 0}
/* min-height : seize des quarante-six intitules tiennent sur une ligne, soit
   une cible de 31 px, sous les 44 px de la SC 2.5.8. Les trente autres
   depassent deja. La ligne s'aligne toujours sur la premiere ligne de base,
   la hauteur en trop passe dessous. */
details.secteur summary{cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-height:2.75rem;font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.5rem;text-transform:uppercase}
/* line-height 2,4 : l'entraxe des liens de mention passe de 29,4 px a environ
   35 px. Trois cent soixante-douze liens en ligne, separes par des points
   medians, se touchent d'une ligne a l'autre a 2. */
details.secteur .liens{margin:.7rem 0 .2rem;font-size:.92rem;line-height:2.4}
/* Les compteurs de secteur debordaient du viewport a 375 px (reflux, 1.4.10). */
details.secteur summary .nb{white-space:normal;text-align:right;margin-left:auto}
/* Volet parent des quarante-six secteurs. Replies, ils tenaient 3 979 px de
   l'accueil, soit 46,4 % de sa hauteur, pour zero lien visible. Ils restent
   sur la page, avec leurs 372 href a un saut de la racine : un seul details
   de plus les ramene a la hauteur de son intitule. Le repli est natif, donc
   il tient sans JavaScript, et le contenu d'un details ferme sort de l'ordre
   de tabulation sans qu'on ait a le declarer. */
details.secteurs-tous{border-top:2px solid #111111;border-bottom:2px solid #111111;margin:1rem 0 2rem}
details.secteurs-tous>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-height:2.75rem;padding:.75rem 0;font-family:'Big Shoulders Display', 'Affiche ajuste', 'Affiche ajuste 2', 'Arial Narrow', Impact, sans-serif;font-weight:700;font-size:1.5rem;text-transform:uppercase;line-height:1.1}
details.secteurs-tous>summary .nb{white-space:normal;text-align:right;margin-left:auto}
details.secteurs-tous[open]>summary{border-bottom:1px solid #D9D7D0}
/* Le dernier secteur porte deja un filet, celui du volet parent tombe
   dessus : deux traits a un pixel d'ecart. */
details.secteurs-tous details.secteur:last-of-type{border-bottom:0}
/* Marqueur d'ouverture. display:flex sur le summary retire le triangle natif,
   et les quarante-six volets n'annoncaient donc plus qu'ils s'ouvraient. Un
   chevron trace au bord, jamais un caractere : content vide ne rentre dans
   aucun nom accessible, la ou un « > » genere est annonce par une partie des
   lecteurs d'ecran.
   Le pivot est instantane, sans transition, et c'est mesure : une transition
   sur ce transform restait bloquee sur sa valeur de depart dans le rendu
   d'essai, donc le chevron pointait a droite sur un volet ouvert. Un marqueur
   d'etat qui retarde sur son etat le decrit faux. Accessoirement, le site
   n'affiche aucune animation en dehors du glissement de la barre de tete, et
   celui-ci n'en ajoute donc pas une. */
details.secteur>summary::after,details.secteurs-tous>summary::after{content:"";flex:0 0 auto;align-self:center;width:.5rem;height:.5rem;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg)}
details.secteur[open]>summary::after,details.secteurs-tous[open]>summary::after{transform:rotate(45deg)}
/* Un lien seul dans son paragraphe, en cible de 44 px. Meme mesure que le
   lien de la ligne de rupture du tableau, qui l'a introduite. */
.lien-cible{margin:.6rem 0 .2rem;font-size:.9375rem;font-weight:600}
.lien-cible a{display:inline-block;min-height:2.75rem;line-height:2.75rem}
.remonter{margin-top:1.4rem}
/* ---------------------------------------------------------------- formulaire
   Direction « Affiche » : angles droits, bordure de 2 px en encre, aucune
   ombre, aucun rayon, aucun cadre autour du groupe. Le champ est un
   rectangle d'encre sur papier, l'etiquette est au-dessus en Archivo 600.
   Hauteur de 3 rem, soit 48 px, la cible tactile de la charte.
   Le formulaire ne prend PAS de jaune : la charte reserve l'accent a la
   valeur mesuree et a l'identite de la page, jamais a un etat d'interface. */
.formulaire{margin:1.4rem 0 0;max-width:36rem}
.champ{margin:0 0 1.2rem}
.champ>label{display:block;font-weight:600;font-size:.9375rem;margin:0 0 .35rem}
.champ .aide{display:block;font-weight:400;font-size:.875rem;color:#5C5C5C;margin:.1rem 0 .4rem}
.champ input,.champ select,.champ textarea{
 font:inherit;font-size:1rem;width:100%;box-sizing:border-box;padding:.6rem .7rem;
 border:2px solid #111111;border-radius:0;background:#F7F6F2;color:#111111}
.champ input,.champ select{height:3rem;padding-top:0;padding-bottom:0}
.champ textarea{min-height:11rem;resize:vertical;line-height:1.5}
.champ input::placeholder,.champ textarea::placeholder{color:#5C5C5C;opacity:1}
/* aria-invalid plutot qu'une classe : l'etat lu par les technologies
   d'assistance et l'etat vu a l'ecran sont alors le meme attribut, et ils ne
   peuvent pas diverger. Le rouge n'entre pas dans la palette : le champ en
   defaut se marque par une bordure de 3 px et un texte d'erreur en encre. */
.champ [aria-invalid="true"]{border-width:3px}
.champ .dit{display:block;font-size:.875rem;font-weight:600;margin:.35rem 0 0}
.champ .dit:empty{display:none}
/* Compteur de caracteres, aligne a droite de l'etiquette. Chiffres tabulaires
   pour que la largeur ne bouge pas a chaque frappe. */
.champ .tete{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.champ .compte{font-size:.8125rem;color:#5C5C5C;font-variant-numeric:tabular-nums}
/* Les deux leurres. Hors ecran plutot que display:none : un robot ignore
   souvent ce qui est masque et remplit ce qu'il trouve dans le DOM. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire button[type=submit]{font:inherit;font-size:1rem;font-weight:600;min-height:3rem;
 padding:0 1.4rem;border:2px solid #111111;border-radius:0;background:#111111;color:#F7F6F2;cursor:pointer}
.formulaire button[type=submit]:hover{background:#333333}
.formulaire button[type=submit][disabled]{background:#5C5C5C;border-color:#5C5C5C;cursor:default}
/* Bloc d'etat, en tete de formulaire : erreur globale ou confirmation. Filet
   epais a gauche, comme une citation, sans couleur de statut. */
.etat{border-left:6px solid #111111;background:#EFEDE7;padding:.9rem 1rem;margin:0 0 1.4rem}
.etat p{margin:0} .etat p+p{margin-top:.5rem}
.etat h2{margin:0 0 .4rem;padding-top:0;border-top:0;font-size:1.5rem}