/* ============================================================================
   LES COMPOSANTS DE LA REFONTE (PLAN-REFONTE.md, paragraphe 4.3).

   La bibliotheque des trois maquettes validees le 29 septembre 2026
   (maquettes/maquette.css), portee dans l'application : UN composant par
   chose, le meme sur tous les ecrans. La page /_composants, servie en local
   seulement, les montre tous, dans chacun de leurs etats.

   Toutes les classes portent le prefixe sk-, trouve a zero occurrence dans
   public/css et resources/views le 29 septembre 2026 : DESIGN.md, paragraphe
   7, raconte les ecrans que .champ, .volet et .temps ont deja casses sans
   lever d'erreur. Les modificateurs sans prefixe (.fait, .ici, .vide, .vieux,
   .accent, .c-action...) ne s'emploient que sous leur composant.

   La feuille se charge apres samko.css et n'y ajoute aucun jeton : teintes,
   espacements, rayons, ombres, polices et echelle des tailles de texte sont
   declares dans le :root de samko.css.

   CE QUI A CHANGE EN PORTANT LA MAQUETTE, et pourquoi :
   - PAS DE color-mix. Un vieux navigateur Android qui l'ignore jette la
     declaration entiere, et un texte clair pose sur le nuit redevient fonce.
     color-mix(in srgb, var(--blanc) N%, transparent) s'ecrit
     rgba(255, 255, 255, .N) ; de meme pour le nuit (26, 58, 92) et le nuit
     profond (18, 41, 63).
   - Aucune regle ne suppose une classe .sk posee sur <body> : aucun gabarit
     ne la pose. Un nombre prend la classe .mono, qui existe.
   - Les commandes prennent --rayon-controle (8 px, decision H1-D7).
     --rayon-bouton reste le rayon des anciens boutons (.bouton, 6 px).
   - Chaque taille de texte lit l'echelle --taille-* de samko.css.
   - Une cible se touche sur 44 px de haut au moins (voir LES CIBLES).
   - Trois defauts de la maquette sont corriges, chacun a sa regle : le trait
     des pastilles d'icone des tuiles, la mention "Vous etes ici" du chemin,
     et le lien de la barre qui perdait son nom sur telephone.
   - Ce qui ne sert qu'un ecran (le heros, le cabinet, la salutation, la tete
     de l'administration, l'en-tete et le pied publics, la fenetre de
     correction, le ruban des metiers, les questions) arrive avec l'etape qui
     l'emploie. Ce qui n'appartient qu'aux maquettes (l'etiquette de maquette,
     la bascule visiteur et apprenant) ne vient jamais.

   Les controles : FeuilleDesComposantsTest, ContrasteDesJetonsTest,
   PaletteDeLaCharteTest, SignatureDeLOrTest et ComposantsTest.
   ========================================================================= */

:root {
  --sk-flanc: 264px;   /* la largeur du flanc des espaces */
  --sk-rail: 76px;     /* le flanc replie : une icone et sa cible de 44 px */
  --sk-barre: 64px;    /* la hauteur de la barre du haut */
}

/* ---- Dans un espace, seul le titre de la page est en Playfair (plan,
   paragraphe 2.4). Les titres de cartes et de panneaux sont des etiquettes
   de travail, en Carlito gras. La regle vise la coque des espaces : sur les
   pages publiques, les titres de section restent en Playfair. ------------ */
.sk-coque h2, .sk-coque h3 { font-family: var(--police-texte); letter-spacing: 0; }

/* ---- Les icones : SVG en ligne, trait de 1,9 (brief, paragraphe 7). Les
   proprietes sont posees sur le svg qui porte le <use> : elles descendent
   dans le symbole, ce que ne garantissent pas des attributs poses sur le
   <symbol>. Les dessins sont dans partiels/icones.blade.php ; chaque
   contexte donne sa taille a l'icone. ------------------------------------- */
.sk-i { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Le pictogramme en deux tons : un aplat ciel eclairci sous un trait
   nuit. Deux <use> par pictogramme, parce qu'un style ne traverse pas un
   <use>. ------------------------------------------------------------------ */
.sk-picto { width: 48px; height: 48px; flex: none; overflow: visible; }
.sk-picto .aplat { fill: var(--ciel-clair); stroke: none; }
.sk-picto .trait { fill: none; stroke: var(--nuit); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ===========================================================================
   LA COQUE DES ESPACES : le flanc, la barre du haut, la page
   =========================================================================== */
.sk-coque {
  display: grid;
  grid-template-columns: var(--sk-flanc) minmax(0, 1fr);
  min-height: 100vh;
}

/* Un bleu nuit uni, comme le heros de l'accueil : ni degrade ni trame. Le
   texte courant du flanc, s'il en vient un, prend le blanc bleute de la
   palette ; les entrees prennent --sur-nuit. */
.sk-flanc {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--e5);
  padding: var(--e5) var(--e4) var(--e4);
  background: var(--nuit); color: var(--sur-nuit-fort);
  /* Les douze entrees du backoffice depassent une vitre de 900 px : le flanc
     defile, et sa barre reste discrete sur le nuit. */
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
/* L'anneau de focus du site est en --inter : 2,6:1 sur le nuit, sous le seuil
   de 3:1 d'un indicateur. Dans le flanc, il passe au ciel eclairci (5,42:1). */
.sk-flanc :focus-visible { outline-color: var(--ciel-clair); }
.sk-flanc-marque { display: block; padding: 0 var(--e3); }
.sk-flanc-logo { width: 196px; height: auto; }

.sk-flanc nav { display: grid; gap: var(--e5); }
.sk-flanc-bloc { display: grid; }
.sk-flanc-groupe { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Le titre d'un groupe est en ciel eclairci : 5,42:1 sur le nuit. Le gris
   acier n'y rend que 2,1:1. */
.sk-flanc-titre {
  margin: 0; padding: 0 var(--e3) var(--e2);
  font-size: var(--taille-11); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ciel-clair);
}
.sk-flanc-lien {
  position: relative;
  display: flex; align-items: center; gap: var(--e3);
  min-height: 44px; padding: 0 var(--e3);
  border-radius: var(--rayon-controle);
  color: var(--sur-nuit); text-decoration: none; font-size: var(--taille-15);
}
.sk-flanc-lien svg { width: 18px; height: 18px; flex: none; }
.sk-flanc-lien:hover { background: rgba(255, 255, 255, .07); color: var(--blanc); }
.sk-flanc-lien[aria-current="page"] {
  background: var(--nuit-surface); color: var(--blanc); font-weight: 700;
}
.sk-flanc-lien[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 3px; background: var(--ciel);
}
/* Une entree du flanc peut etre un bouton (replier la barre) : elle se
   dessine comme les autres. */
button.sk-flanc-lien {
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--taille-15);
}
.sk-flanc-compte {
  margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px;
  display: inline-grid; place-items: center;
  border-radius: var(--rayon-pastille); background: rgba(255, 255, 255, .13);
  color: var(--blanc); font-family: var(--police-mono); font-size: var(--taille-12); font-weight: 600;
}
.sk-flanc-pied {
  margin-top: auto; padding-top: var(--e4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid; gap: 2px;
}

.sk-corps { min-width: 0; display: flex; flex-direction: column; }

.sk-barre {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--e5);
  min-height: var(--sk-barre); padding: 0 var(--e6);
  background: var(--blanc); border-bottom: 1px solid var(--filet);
}
.sk-fil {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--taille-15); color: var(--acier); white-space: nowrap;
}
.sk-fil svg { width: 14px; height: 14px; }
.sk-fil [aria-current="page"] { color: var(--nuit); font-weight: 700; }
.sk-fil a { position: relative; color: inherit; text-decoration: none; }
.sk-fil a:hover { color: var(--inter-texte); text-decoration: underline; }

/* La recherche envoie q vers le catalogue, qui sait deja chercher. 44 px de
   haut, et non 42 comme dans la maquette : c'est une cible. */
.sk-recherche { position: relative; margin-left: auto; width: min(380px, 34vw); }
.sk-recherche input {
  width: 100%; height: 44px; padding: 0 var(--e4) 0 42px;
  border: 1px solid var(--filet-fort); border-radius: var(--rayon-pastille);
  background: var(--papier); color: var(--encre);
  font: inherit; font-size: var(--taille-15);
}
.sk-recherche input::placeholder { color: var(--acier); }
.sk-recherche input:focus-visible { outline: 2px solid var(--inter); outline-offset: 2px; background: var(--blanc); }
.sk-recherche svg {
  position: absolute; left: 15px; top: calc(50% - 8.5px);
  width: 17px; height: 17px; color: var(--acier); pointer-events: none;
}

/* Le menu du compte : un <details> natif, sans script. */
.sk-menu { position: relative; }
.sk-menu > summary {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 48px; padding: 4px 8px; border-radius: var(--rayon-controle);
  list-style: none; cursor: pointer;
}
.sk-menu > summary::-webkit-details-marker { display: none; }
.sk-menu > summary:hover { background: var(--papier); }
.sk-menu > summary > svg { width: 16px; height: 16px; color: var(--acier); }
.sk-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--bleu-voile); color: var(--inter-texte);
  font-size: var(--taille-14); font-weight: 700;
}
.sk-qui { display: grid; line-height: 1.25; }
.sk-qui b { color: var(--nuit); font-size: var(--taille-15); }
.sk-qui small { color: var(--acier); font-size: var(--taille-13); }
.sk-menu-liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  min-width: 232px; padding: var(--e2); margin: 0; list-style: none;
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-2);
}
.sk-menu-liste a, .sk-menu-liste button {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  min-height: 44px; padding: 0 var(--e3); border: 0; border-radius: var(--rayon-controle);
  background: none; color: var(--encre); font: inherit; font-size: var(--taille-15);
  text-align: left; text-decoration: none; cursor: pointer;
}
.sk-menu-liste a:hover, .sk-menu-liste button:hover { background: var(--bleu-voile); color: var(--nuit); }
/* La page du compte affichee : elle n'a pas d'entree au flanc, c'est le menu
   qui la marque. */
.sk-menu-liste a[aria-current="page"] { background: var(--bleu-voile); color: var(--nuit); font-weight: 700; }
.sk-menu-liste svg { width: 17px; height: 17px; color: var(--acier); }
.sk-menu-liste hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e2) 0; }

/* Un lien de la barre, hors du fil : "Voir le site public". */
.sk-lien-barre {
  position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--inter-texte); font-size: var(--taille-15); font-weight: 700; text-decoration: none;
}
.sk-lien-barre svg { width: 16px; height: 16px; }
.sk-lien-barre:hover { text-decoration: underline; }

.sk-page { padding: var(--e6); display: grid; gap: var(--e5); align-content: start; }

/* ---- La grille des tableaux de bord : un principal et un rail. Le rail a
   une largeur bornee : c'est le principal qui prend ce que l'ecran gagne. -- */
.sk-grille {
  display: grid; gap: var(--e5); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}
/* Une seule piste, et qui peut retrecir : sans minmax(0, 1fr), la piste
   implicite prend la largeur du plus large tableau, et la carte deborde
   sous le rail au lieu de faire defiler son tableau. */
.sk-principal, .sk-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); align-content: start; min-width: 0; }

/* ===========================================================================
   LES COMPOSANTS
   =========================================================================== */
.sk-carte {
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-1);
  padding: var(--e5);
}
.sk-carte-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e4);
}
/* Le titre d'une carte est un h2 dans un tableau de bord, un h3 sous le
   titre d'une section : il se dessine pareil. */
.sk-carte-tete h2, .sk-carte-tete h3 { font-size: var(--taille-18); line-height: 1.3; }
.sk-carte-tete .sk-sous { color: var(--acier); font-size: var(--taille-14); }
.sk-voir {
  position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--inter-texte); font-size: var(--taille-14); font-weight: 700; text-decoration: none;
}
.sk-voir svg { width: 15px; height: 15px; }
.sk-voir:hover { text-decoration: underline; }
.sk-carte-pied { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--filet); }

/* ---- Les boutons : le principal est bleu intersection ASSOMBRI, parce que
   le bleu ciel ne porte pas de texte blanc (2,62:1) ; blanc sur
   --inter-texte rend 5,25:1. ---------------------------------------------- */
.sk-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 var(--e5);
  border: 1px solid transparent; border-radius: var(--rayon-controle);
  font: inherit; font-size: var(--taille-15); font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.sk-bouton svg { width: 17px; height: 17px; flex: none; }
.sk-bouton-principal { background: var(--inter-texte); color: var(--blanc); }
.sk-bouton-principal:hover { background: var(--nuit-surface); }
.sk-bouton-second { background: var(--blanc); color: var(--nuit); border-color: var(--filet-fort); }
.sk-bouton-second:hover { background: var(--bleu-voile); border-color: var(--inter); }
/* Le bouton nu prend la couleur de ce qui l'entoure : un bouton ne l'herite
   pas de lui-meme, un lien si (:where(a) de samko.css). */
.sk-bouton-nu { background: none; padding: 0 var(--e3); color: inherit; }
.sk-bouton-nu:hover { text-decoration: underline; }
/* Le petit bouton d'un tableau : dessine sur 36 px, touche sur 44. */
.sk-bouton-petit { position: relative; min-height: 36px; padding: 0 var(--e4); font-size: var(--taille-14); }
/* Un bouton qui n'est qu'une icone : carre, et nomme par son aria-label. */
.sk-bouton-icone { width: 44px; padding: 0; }
/* Le geste qui ne se defait pas, comme la deconnexion (.bouton-sortie). */
.sk-bouton-danger { background: var(--critique); color: var(--blanc); }
.sk-bouton-danger:hover { background: var(--braise); }

.sk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e3); }

/* ---- La pastille d'icone ------------------------------------------------ */
.sk-icone {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bleu-voile); color: var(--inter-texte);
}
.sk-icone svg { width: 20px; height: 20px; }
.sk-icone-seve  { background: var(--succes-voile);   color: var(--seve); }
.sk-icone-ambre { background: var(--attention-voile); color: var(--ambre); }
/* Le controle en defaut de la sante : l encre du refus, sur son voile. */
.sk-icone-braise { background: var(--critique-voile); color: var(--braise); }
.sk-icone-petite { width: 32px; height: 32px; }
.sk-icone-petite svg { width: 16px; height: 16px; }

/* ---- La pastille de statut : UN MOT, sur un voile fonctionnel de la
   charte, ecrit dans la teinte semantique foncee de la meme famille. Les
   encres fonctionnelles de la charte n'y suffisent pas : l'orange rend
   4,08:1 sur son voile, le vert 4,40:1. Les teintes semantiques y rendent
   5,4:1 et plus. ---------------------------------------------------------- */
.sk-statut {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 0 10px; border-radius: var(--rayon-pastille);
  font-size: var(--taille-12); font-weight: 700; line-height: 1; white-space: nowrap;
}
.sk-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sk-statut-attente { background: var(--attention-voile); color: var(--ambre); }
.sk-statut-ok      { background: var(--succes-voile);    color: var(--seve); }
.sk-statut-refus   { background: var(--critique-voile);  color: var(--braise); }
.sk-statut-info    { background: var(--bleu-voile);      color: var(--inter-texte); }
.sk-statut-neutre  { background: var(--papier); color: var(--acier); box-shadow: inset 0 0 0 1px var(--filet); }

/* ---- L'etiquette : ce qu'est une chose (un parcours, une fiche remplie),
   pas ou elle en est. ------------------------------------------------------ */
.sk-etiquette {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px;
  border-radius: 5px; background: var(--bleu-voile); color: var(--inter-texte);
  font-size: var(--taille-12); font-weight: 700; white-space: nowrap;
}
.sk-etiquette-ambre { background: var(--attention-voile); color: var(--ambre); }

/* ---- L'etiquette de metier, posee sur une photographie ----------------- */
.sk-metier {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
  border-radius: var(--rayon-pastille); background: var(--nuit); color: var(--blanc);
  font-size: var(--taille-12); font-weight: 700; letter-spacing: .01em;
}

.sk-code { font-family: var(--police-mono); font-size: var(--taille-13); color: var(--acier); letter-spacing: .02em; }
.sk-ligne-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: var(--taille-14); color: var(--acier); }
/* Le metier, dit en toutes lettres quand la photographie qui le porte
   disparait (telephone). */
.sk-metier-texte { display: none; }

/* ---- La tuile de chiffre ------------------------------------------------ */
.sk-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); }
.sk-tuiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sk-tuiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sk-tuile {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon-tuile);
  background: var(--blanc); color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.sk-tuile:hover { border-color: var(--inter); box-shadow: var(--ombre-1); }
/* ⚠ LA TUILE SERVIE SE DESIGNE A L'OEIL, et pas seulement pour les lecteurs
   d'ecran. Quand une rangee de tuiles tient lieu de filtre, cinq tuiles
   identiques ne disent pas laquelle filtre la liste qu'on est en train de
   lire. La regle vit ici, et non dans un ecran : la planche de composants la
   montre, donc elle ne peut plus diverger en silence. */
.sk-tuile[aria-current="page"] {
  border-color: var(--inter); background: var(--bleu-voile);
  box-shadow: inset 0 0 0 1px var(--inter);
}
.sk-tuile-texte { display: grid; min-width: 0; }
.sk-tuile b {
  font-family: var(--police-mono); font-variant-numeric: tabular-nums;
  font-size: var(--taille-24); font-weight: 600; line-height: 1.1; color: var(--nuit);
}
/* ⚠ LE LIBELLE, ET LUI SEUL. La maquette ecrivait .sk-tuile span : la regle
   prenait aussi la pastille d'icone, qui est un <span>, et son trait passait
   au gris dans les quatre tuiles, vert et ambre compris. */
.sk-tuile-texte > span { font-size: var(--taille-14); line-height: 1.3; color: var(--encre-douce); }
/* La tuile d'une file : le nombre en haut, a cote de l'icone ; le libelle,
   puis l'age du plus ancien. */
.sk-tuile-file { flex-direction: column; align-items: stretch; gap: 2px; }
.sk-tuile-haut { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: 8px; }
.sk-tuile-file b { font-size: var(--taille-28); }
.sk-tuile-libelle { font-size: var(--taille-15); font-weight: 700; color: var(--nuit); line-height: 1.25; }
.sk-tuile-age { display: block; margin-top: 2px; font-size: var(--taille-13); color: var(--acier); }
.sk-tuile-age.vieux { color: var(--ambre); font-weight: 700; }
/* Un zero mesure reste a l'ecran, en gris (DESIGN.md, paragraphe 6). */
.sk-tuile.vide b { color: var(--acier); }
.sk-tuile.vide .sk-icone { background: var(--papier); color: var(--acier); box-shadow: inset 0 0 0 1px var(--filet); }

/* ---- La barre de progression : sa longueur se lit dans --part, posee sur
   l'element (style="--part: 40%"). Une seule teinte : la longueur dit deja
   la grandeur (DESIGN.md, paragraphe 5). --------------------------------- */
.sk-progres { display: block; height: 10px; border-radius: 5px; background: var(--bleu-voile); overflow: hidden; }
.sk-progres::before { content: ""; display: block; height: 100%; width: var(--part, 0%); border-radius: 5px; background: var(--inter); }

/* ---- L'anneau de progression -------------------------------------------- */
.sk-anneau { margin: 0; display: grid; justify-items: center; gap: 6px; }
.sk-anneau-dessin { position: relative; width: 116px; height: 116px; }
.sk-anneau svg { width: 116px; height: 116px; transform: rotate(-90deg); }
.sk-anneau .piste  { fill: none; stroke: var(--bleu-voile); }
.sk-anneau .valeur { fill: none; stroke: var(--inter-texte); stroke-linecap: round; }
.sk-anneau-valeur {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font-family: var(--police-mono); font-size: var(--taille-26); font-weight: 600; color: var(--nuit); line-height: 1;
}
.sk-anneau-valeur small { font-family: var(--police-texte); font-size: var(--taille-12); font-weight: 400; color: var(--acier); margin-top: 4px; }
.sk-anneau-valeur .pc { font-size: .6em; font-weight: 500; }
.sk-anneau figcaption { font-size: var(--taille-13); color: var(--acier); text-align: center; }

/* ---- La carte de formation ---------------------------------------------- */
.sk-formations { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sk-formation {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-1); overflow: hidden; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.sk-formation:hover { border-color: var(--inter); box-shadow: var(--ombre-2); }
.sk-formation-photo { position: relative; aspect-ratio: 2 / 1; background: var(--bleu-voile); }
.sk-formation-photo img { width: 100%; height: 100%; object-fit: cover; }
.sk-formation-photo .sk-metier { position: absolute; left: 12px; bottom: 12px; }
.sk-formation-corps { flex: 1; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); }
.sk-formation h3 { font-size: var(--taille-16); line-height: 1.3; color: var(--nuit); }
.sk-formation-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); font-size: var(--taille-13); color: var(--acier); }
.sk-formation-pied {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--filet);
  font-size: var(--taille-14); font-weight: 700; color: var(--inter-texte);
}
.sk-rond {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--inter-texte); color: var(--blanc);
}
.sk-rond svg { width: 16px; height: 16px; }

/* La carte qui n'est pas une formation : l'appel vers le catalogue. */
.sk-formation-appel {
  justify-content: center; align-items: flex-start; gap: var(--e3); padding: var(--e5);
  background: var(--papier); border-style: dashed; border-color: var(--filet-fort); box-shadow: none;
}
.sk-formation-appel h3 { font-size: var(--taille-17); }
.sk-formation-appel p { margin: 0; font-size: var(--taille-14); color: var(--encre-douce); }

/* ---- Le fil d'activite : des faits dates, chacun avec son lien ---------- */
.sk-fil-activite { display: grid; margin: 0; padding: 0; list-style: none; }
.sk-fil-activite li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start;
  padding: var(--e3) 0; border-top: 1px solid var(--filet);
}
.sk-fil-activite li:first-child { border-top: 0; padding-top: 0; }
.sk-fil-activite li:last-child { padding-bottom: 0; }
.sk-fil-quoi { margin: 0; font-size: var(--taille-15); line-height: 1.4; color: var(--encre); }
.sk-fil-quoi a { color: var(--nuit); font-weight: 700; text-decoration: none; }
.sk-fil-quoi a:hover { text-decoration: underline; }
.sk-fil-quand { display: block; margin-top: 2px; font-size: var(--taille-13); color: var(--acier); }

/* ---- Le chemin, en colonne dans un rail. L'etape courante porte
   aria-current="step" et la classe .ici ; les faites, .fait. ------------- */
.sk-chemin { display: grid; margin: 0; padding: 0; list-style: none; }
.sk-chemin li {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e3);
  padding-bottom: var(--e4);
}
.sk-chemin li:last-child { padding-bottom: 0; }
.sk-chemin li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px;
  width: 2px; border-radius: 2px; background: var(--filet);
}
.sk-chemin li.fait:not(:last-child)::after { background: var(--seve); }
.sk-rang {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--filet-fort); background: var(--blanc); color: var(--acier);
  font-family: var(--police-mono); font-size: var(--taille-13); font-weight: 600;
}
.sk-rang svg { width: 16px; height: 16px; }
.sk-chemin .fait .sk-rang { border-color: var(--seve); background: var(--seve); color: var(--blanc); }
.sk-chemin .ici .sk-rang { border-color: var(--inter-texte); background: var(--inter-texte); color: var(--blanc); box-shadow: 0 0 0 4px var(--bleu-voile); }
.sk-chemin-texte { display: grid; gap: 2px; padding-top: 5px; min-width: 0; }
.sk-chemin-texte b { color: var(--nuit); font-size: var(--taille-15); line-height: 1.3; }
.sk-chemin-texte span { color: var(--acier); font-size: var(--taille-13); line-height: 1.35; }
.sk-chemin .a-venir .sk-chemin-texte b { color: var(--encre-douce); font-weight: 400; }
.sk-chemin .ici .sk-chemin-texte {
  margin: -4px 0 0 -2px; padding: 9px 12px 10px;
  border-radius: var(--rayon-tuile); background: var(--bleu-voile);
}
/* ⚠ LA MENTION SE DECLARE SOUS LE TEXTE DE L'ETAPE, et pas seule : la
   maquette l'ecrivait .sk-ici, que .sk-chemin-texte span battait. Elle
   sortait en gris acier a 13 px au lieu du bleu a 11 px. */
.sk-chemin-texte .sk-ici {
  justify-self: start; margin-top: 4px;
  font-size: var(--taille-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--inter-texte);
}

/* ---- Les elements d'une liste courte, dans un rail : une demande, une
   attestation. ------------------------------------------------------------ */
.sk-element {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start;
  padding: var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon-tuile); background: var(--papier);
}
.sk-element + .sk-element { margin-top: var(--e3); }
.sk-element h3, .sk-element h4 { font-size: var(--taille-15); line-height: 1.35; color: var(--nuit); }
.sk-element p { margin: 4px 0 0; font-size: var(--taille-13); line-height: 1.45; color: var(--encre-douce); }
.sk-element-bas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e2); }
/* La reference publique d'une attestation : elle se recopie, d'ou la chasse
   fixe et le cadre pointille. */
.sk-reference {
  font-family: var(--police-mono); font-size: var(--taille-13); color: var(--nuit);
  padding: 2px 8px; border: 1px dashed var(--filet-fort); border-radius: 6px; background: var(--blanc);
}

/* ---- L'aide : un encadre d'information de la charte, le bleu tres leger,
   a plat, sans filet ni ombre. La pastille d'icone passe au blanc pour s'en
   detacher. Elle se pose avec .sk-carte. ---------------------------------- */
.sk-aide {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e4); align-items: start;
  background: var(--bleu-voile); border-color: transparent; box-shadow: none;
}
.sk-aide .sk-icone { background: var(--blanc); }
.sk-aide h2, .sk-aide h3 { font-size: var(--taille-18); }
.sk-aide p { margin: 6px 0 0; font-size: var(--taille-15); color: var(--encre-douce); }
.sk-aide .sk-actions { margin-top: var(--e4); }

/* ---- L'encadre : une information, une alerte, un succes, un refus. Le
   filet gauche dans la couleur fonctionnelle de la charte, le texte dans la
   teinte semantique foncee de la meme famille, sur son voile : la meme regle
   que les pastilles de statut. -------------------------------------------- */
.sk-encadre {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start;
  padding: var(--e4) var(--e5); border-left: 3px solid; border-radius: 0 var(--rayon-tuile) var(--rayon-tuile) 0;
  font-size: var(--taille-15); line-height: 1.55;
}
.sk-encadre > :only-child { grid-column: 1 / -1; }
.sk-encadre .sk-icone { background: var(--blanc); color: inherit; }
.sk-encadre h3 { font-size: var(--taille-15); line-height: 1.35; color: inherit; }
.sk-encadre p { margin: 2px 0 0; }
.sk-encadre-info      { background: var(--bleu-voile);      color: var(--nuit);   border-left-color: var(--inter); }
.sk-encadre-attention { background: var(--attention-voile); color: var(--ambre);  border-left-color: var(--attention); }
.sk-encadre-succes    { background: var(--succes-voile);    color: var(--seve);   border-left-color: var(--succes); }
.sk-encadre-critique  { background: var(--critique-voile);  color: var(--braise); border-left-color: var(--critique); }

/* ---- L'etat vide : une icone, une phrase qui dit ce qui viendra ici, et
   l'action qui y mene. Le cadre pointille de la carte d'appel. ----------- */
.sk-vide {
  display: grid; justify-items: center; gap: var(--e3);
  padding: var(--e6) var(--e5); text-align: center;
  border: 1px dashed var(--filet-fort); border-radius: var(--rayon-carte);
  background: var(--papier); color: var(--encre-douce);
}
.sk-vide p { margin: 0; max-width: 46ch; font-size: var(--taille-15); line-height: 1.55; text-wrap: pretty; }
.sk-vide p b { color: var(--nuit); }
.sk-vide .sk-bouton { margin-top: var(--e2); }

/* ---- Le tableau --------------------------------------------------------- */
.sk-tableau-boite { margin: 0 calc(-1 * var(--e5)); overflow-x: auto; }
.sk-tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--taille-15); }
.sk-tableau th {
  padding: 0 var(--e3) var(--e2); text-align: left; white-space: nowrap;
  font-size: var(--taille-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acier); border-bottom: 1px solid var(--filet);
}
.sk-tableau td { padding: var(--e3); vertical-align: middle; border-bottom: 1px solid var(--filet); }
.sk-tableau th:first-child, .sk-tableau td:first-child { padding-left: var(--e5); }
.sk-tableau th:last-child, .sk-tableau td:last-child { padding-right: var(--e5); }
.sk-tableau tbody tr:last-child td { border-bottom: 0; }
.sk-tableau tbody tr:hover td { background: var(--papier); }
.sk-tableau .c-action { text-align: right; white-space: nowrap; }
.sk-tableau .c-quand { white-space: nowrap; }
.sk-tableau .c-quoi { min-width: 12rem; }

.sk-personne { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.sk-personne .sk-avatar { width: 34px; height: 34px; font-size: var(--taille-13); }
.sk-personne-texte { display: grid; min-width: 0; }
.sk-personne b { color: var(--nuit); line-height: 1.3; white-space: nowrap; }
.sk-personne small { color: var(--acier); font-size: var(--taille-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-quoi { display: grid; gap: 2px; }
.sk-quoi b { color: var(--encre); line-height: 1.3; }
.sk-quoi .sk-ligne-code { font-size: var(--taille-13); }
.sk-quand-age { display: block; font-size: var(--taille-13); color: var(--acier); }
.sk-quand-age.vieux { color: var(--ambre); font-weight: 700; }

/* ===========================================================================
   LE TABLEAU DE BORD DE L'APPRENANT (etape 5, 5 octobre 2026)

   Portes de maquettes/maquette.css, « La salutation » et « La carte de
   reprise », a l'echelle des jetons. Les tuiles, l'anneau, les cartes de
   formation, le fil d'activite, le chemin et les elements du rail sont plus
   haut : ils etaient valides a l'etape 3.

   ⚠ CES SELECTEURS SONT NEUFS, ET AUCUN N'EN REDECLARE UN AUTRE. La premiere
   ecriture de l'etape les avait poses ici en redefinissant aussi les
   composants valides (le bouton principal y tombait a 4,46:1) ; ils avaient
   ete ramenes, provisoires, dans le style de l'ecran. Ceux-ci les remplacent.
   =========================================================================== */

/* ---- La salutation : le titre de la page et la ligne d'etat a gauche,
   l'anneau a droite, les quatre tuiles dessous, sur toute la largeur. ---- */
.sk-bienvenue {
  display: grid; gap: var(--e5) var(--e6); align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}
.sk-bienvenue h1 { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.375rem); }
.sk-bienvenue p { margin: var(--e2) 0 0; max-width: 60ch; color: var(--encre-douce); font-size: var(--taille-16); text-wrap: pretty; }
.sk-bienvenue .sk-tuiles { grid-column: 1 / -1; }

/* ---- La carte de reprise : la photographie du metier a gauche, sur un
   tiers ; le module, son etape suivante, sa reglette et son geste a droite.
   Sans module a reprendre (une demande, un refus, tout valide, un compte
   neuf), la carte n'a pas de photographie : `.sk-reprise-seule`. -------- */
.sk-reprise {
  display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
  padding: 0; overflow: hidden;
}
.sk-reprise-seule { grid-template-columns: minmax(0, 1fr); }
.sk-reprise-photo { position: relative; min-height: 240px; background: var(--bleu-voile); }
.sk-reprise-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-reprise-photo .sk-metier { position: absolute; left: 14px; top: 14px; }
.sk-reprise-corps { display: grid; gap: var(--e3); align-content: start; padding: var(--e5) var(--e5) var(--e5) var(--e6); }
/* Le titre est un h2 sur le tableau de bord, un h3 sur la page de reference :
   il se dessine pareil. L'enfant direct seulement : l'encadre « à revoir »
   de la carte ne prend pas cette taille. */
.sk-reprise-corps > h2, .sk-reprise-corps > h3 { font-size: var(--taille-23); line-height: 1.25; }
.sk-reprise-texte { margin: 0; max-width: 62ch; color: var(--encre-douce); font-size: var(--taille-16); line-height: 1.55; text-wrap: pretty; }
.sk-surtitre-carte {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--taille-12); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--inter-texte);
}
.sk-surtitre-carte svg { width: 14px; height: 14px; }
.sk-etape {
  display: flex; align-items: center; gap: 10px; margin: 0;
  color: var(--encre); font-size: var(--taille-16);
}
.sk-etape b { color: var(--nuit); }

/* ---- La reglette miniature : les temps du module. Les deux lectures ne
   portent aucun etat, parce que RIEN n'enregistre qu'une section a ete lue
   (DESIGN.md, section 12) : seules les remises en portent un. Elle lit le
   meme releve que l'etape suivante (EtapeSuivante::temps). ------------- */
.sk-reglette {
  display: flex; gap: 6px;
  margin: var(--e2) 0 0; padding: 0; list-style: none;
}
.sk-reglette li {
  flex: 1 1 0; min-width: max-content;
  display: grid; gap: 5px; align-content: start; font-size: var(--taille-13); line-height: 1.25; color: var(--acier);
}
.sk-reglette li::before { content: ""; height: 6px; border-radius: 3px; background: var(--filet); }
.sk-reglette .t { color: var(--encre-douce); }
.sk-reglette .etat { font-weight: 700; font-size: var(--taille-12); }
.sk-reglette .fait::before { background: var(--seve); }
.sk-reglette .fait .etat { color: var(--seve); }
.sk-reglette .ici::before { background: var(--inter-texte); }
.sk-reglette .ici .t { color: var(--nuit); font-weight: 700; }
.sk-reglette .ici .etat { color: var(--inter-texte); }

/* ===========================================================================
   LE TABLEAU DE BORD DE L'ADMINISTRATION (etape 6, 2 octobre 2026)

   Portes de maquettes/maquette.css, section « LE BACK-OFFICE », a l'echelle
   des jetons. La tuile de file et le tableau sont plus haut : les listes du
   back-office les emploient aussi.
   =========================================================================== */

/* ---- La tete : pleine largeur, parce que les six files sont la reponse a la
   question de l'equipe, et qu'a six elles ne tiennent pas dans le principal.
   ⚠ L'ECART QUI LA SEPARE DE LA SUITE EST A ELLE. La maquette le tenait par
   la grille de .sk-page ; la coque de l'application pose .page-app sur le
   contenu, sans grille, et la tete touchait les cartes du dessous. */
.sk-tete-admin { display: grid; gap: var(--e5); margin-bottom: var(--e5); }
.sk-tete-admin-haut { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e3) var(--e6); }
.sk-tete-admin h1 { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.375rem); }
.sk-tete-admin p { margin: var(--e2) 0 0; color: var(--encre-douce); text-wrap: pretty; }
.sk-tete-admin p b { color: var(--nuit); }
.sk-date { color: var(--acier); font-size: var(--taille-14); white-space: nowrap; }

/* ---- La chaine d'apprentissage : une seule teinte, la longueur dit la
   grandeur (DESIGN.md, section 5). A zero, le rail reste : la case existe. */
.sk-chaine { display: grid; gap: var(--e3); margin: 0; padding: 0; list-style: none; }
.sk-chaine li { display: grid; grid-template-columns: minmax(120px, 11rem) minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--e4); }
.sk-chaine .t { font-size: var(--taille-15); color: var(--encre); }
.sk-chaine .barre { height: 10px; border-radius: 5px; background: var(--bleu-voile); overflow: hidden; }
.sk-chaine .barre::before { content: ""; display: block; height: 100%; width: var(--part); border-radius: 5px; background: var(--inter); }
.sk-chaine b { text-align: right; font-family: var(--police-mono); font-size: var(--taille-16); font-weight: 600; color: var(--nuit); }
.sk-chaine-note { margin: var(--e4) 0 0; font-size: var(--taille-13); color: var(--acier); }

/* ---- La sante de la plateforme : une ligne, rouge seulement quand un
   controle l'est. La maquette ne dessinait que l'etat sain : l'etat en
   defaut s'ecrit dans l'encre de la braise, comme un refus. */
.sk-sante { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: center; }
.sk-sante b { display: block; color: var(--nuit); font-size: var(--taille-16); }
/* ⚠ LA PORTEE, ET ELLE SEULE. La maquette ecrivait .sk-sante span : la regle
   prenait aussi les deux nombres du compte et la pastille d'icone, qui
   sortaient en gris et en petit, comme les pastilles des tuiles (plus haut). */
.sk-sante-quoi { display: block; color: var(--acier); font-size: var(--taille-13); }
.sk-sante.defaut b { color: var(--braise); }
.sk-deplier { margin-top: var(--e4); border-top: 1px solid var(--filet); padding-top: var(--e3); }
.sk-deplier summary {
  display: flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; list-style: none;
  color: var(--inter-texte); font-size: var(--taille-14); font-weight: 700;
}
.sk-deplier summary::-webkit-details-marker { display: none; }
.sk-deplier summary svg { width: 15px; height: 15px; transition: transform .15s; }
.sk-deplier[open] summary svg { transform: rotate(180deg); }
.sk-controles { display: grid; gap: 2px; margin: var(--e2) 0 0; padding: 0; list-style: none; }
.sk-controles li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--e3); padding: 5px 0; font-size: var(--taille-14); color: var(--encre-douce); }
.sk-controles .n { color: var(--acier); }
.sk-controles li.defaut { color: var(--braise); font-weight: 700; }
.sk-controles li.defaut .n { color: var(--braise); }
/* L'explication d'un controle en defaut est DANS la page : un survol
   n'existe pas au doigt, et 192 mots dormaient dans des attributs title. */
.sk-controle-quoi { flex-basis: 100%; margin: 4px 0 var(--e2); font-size: var(--taille-13); font-weight: 400; line-height: 1.5; color: var(--encre-douce); }
.sk-controle-quoi code { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 4px; background: var(--papier); color: var(--nuit); font-size: var(--taille-12); }
.sk-controle-quoi a { color: var(--inter-texte); font-weight: 700; }

/* ---- Des chiffres en liste, dans un rail -------------------------------- */
.sk-chiffres { display: grid; margin: 0; padding: 0; list-style: none; }
.sk-chiffres li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--e3); align-items: baseline; padding: var(--e3) 0; border-top: 1px solid var(--filet); }
.sk-chiffres li:first-child { border-top: 0; padding-top: 0; }
.sk-chiffres b { font-family: var(--police-mono); font-size: var(--taille-22); font-weight: 600; color: var(--nuit); text-align: right; }
.sk-chiffres span { font-size: var(--taille-15); color: var(--encre-douce); line-height: 1.35; }
.sk-chiffres .attention b { color: var(--ambre); }

/* ═══ LES COMPOSANTS QUI VIVAIENT DANS LES @push DES ECRANS ═══
   Dix-huit regles etaient recopiees dans quatre a cinq blocs @push de
   l'administration, et EMPLOYEES par des vues qui ne les declaraient pas :
   l'espace de l'apprenant, la fiche du compte, le catalogue d'administration.
   Sur ces pages-la, la barre de recherche et les blocs ne peignaient rien.
   Un composant partage par plusieurs ecrans appartient a la feuille commune.
   ⚠ `admin/sollicitations` garde SA variante des onglets dans son @push : elle
   diverge des quatre autres, et un @push passe apres cette feuille, donc il
   continue d'ecraser chez lui. ------------------------------------------- */
.sk-bloc h2 { font-family: "Playfair Display", Georgia, serif; font-size: var(--taille-18); margin-bottom: var(--e2); }
.sk-bloc { border: 1px solid var(--filet); border-radius: var(--rayon);
           background: var(--blanc); padding: var(--e4) var(--e5); margin-bottom: var(--e4); }
.sk-bloc-sous { font-size: var(--taille-13); color: var(--acier); margin-bottom: var(--e4); max-width: 82ch; }
/* Le geste qui ferme des portes n'a pas la meme couleur que les autres. */
.sk-bloc.attention .sk-tete h2 { color: var(--ambre); }
.sk-bloc.attention { border-color: var(--attention); }
.sk-champ-entree input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--taille-14); padding: var(--e2) 0; color: var(--encre);
}
.sk-champ-entree {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--blanc); border: 1px solid var(--filet-fort); border-radius: var(--rayon-controle);
  padding: 0 var(--e3); flex: 1; min-width: 260px;
}
.sk-champ-entree:focus-within { border-color: var(--inter); box-shadow: 0 0 0 3px var(--bleu-voile); }
.sk-champ-groupe { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e4); }
/* Le bouton passe sous le champ quand la largeur ne les tient pas tous les
   deux : `.sk-champ-entree` exige 260 px, et a 375 px la page glissait
   horizontalement sur les six listes qui incluent `partiels/recherche-file`.
   Meme remede que `.sk-champ-groupe` juste au-dessus. */
.sk-champ-recherche { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.sk-n { font-family: var(--police-mono); font-size: var(--taille-12); }
.sk-onglet {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4); border-radius: var(--rayon-controle);
  font-size: var(--taille-14); font-weight: 600; color: var(--acier);
  text-decoration: none; border: 1px solid var(--filet-fort); background: var(--blanc);
}
.sk-onglet:hover { border-color: var(--inter); color: var(--inter); }
/* ⚠ `--inter-texte` ET NON `--inter` : du blanc sur `--inter` rend 4,46:1, sous
   le seuil de 4,5 exige pour du texte. DESIGN.md le tranche depuis le
   15 septembre : « le bleu n'est pas un seul bleu », `--inter` sert aux traits,
   `--inter-texte` au texte. C'est la meme correction que `.sk-bouton-principal`.
   La BORDURE, elle, reste en `--inter` : un trait n'a qu'un seuil de 3. */
.sk-onglet[aria-current="page"] { background: var(--inter-texte); color: var(--blanc); border-color: var(--inter-texte); }
.sk-onglets { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* ---- Le pied d'une carte de formation : l'icone a gauche, le verbe a droite.
   Les deux classes etaient posees dans la vue depuis la refonte de l'etape 5 et
   n'avaient JAMAIS de regle. Sans dimension, le SVG d'une icone prend toute la
   largeur de sa carte, et c'est exactement ce qu'il faisait. --------------- */
.sk-formation-icone { display: inline-flex; align-items: center; flex: none; color: var(--inter-texte); }
.sk-formation-icone svg { width: 16px; height: 16px; }
.sk-formation-action { font-size: var(--taille-13); font-weight: 700; color: var(--inter-texte); }

/* ---- La fiche d'une demande, dans l'espace de l'apprenant. Six classes posees
   dans la vue sans qu'aucune feuille les connaisse. ------------------------ */
.sk-fiche-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); }
.sk-fiche-titre { font-size: var(--taille-16); font-weight: 700; line-height: 1.3; color: var(--nuit); }
.sk-fiche-quand { font-size: var(--taille-13); color: var(--acier); font-family: var(--police-mono); }
.sk-fiche-meta { margin: var(--e2) 0 0; font-size: var(--taille-13); color: var(--acier); }
.sk-fiche-motif { margin: var(--e3) 0 0; padding: var(--e3) var(--e4); border-left: 3px solid var(--filet-fort); font-size: var(--taille-14); line-height: 1.5; color: var(--encre-douce); background: var(--papier); border-radius: 0 var(--rayon-controle) var(--rayon-controle) 0; }
.sk-fiche-agir { margin: var(--e3) 0 0; }

/* ⚠ `.sk-fiche-demande` VIVAIT DANS LE @push D'UN ECRAN D'ADMINISTRATION, et
   `espace/demandes.blade.php` l'employait sans jamais charger cette feuille-la :
   sur la page de l'apprenant, elle ne peignait rien. Un composant partage par
   deux ecrans appartient a la feuille commune. Les regles DESCENDANTES
   (`.sk-fiche-demande .tete`, `.sujet`, `.qui`) restent dans l'administration :
   elles ne servent qu'a elle. ---------------------------------------------- */
.sk-fiche-demande {
  background: var(--blanc); border: 1px solid var(--filet); border-left: 3px solid var(--filet-fort);
  border-radius: var(--rayon); padding: var(--e4) var(--e5); margin-bottom: var(--e3);
}
.sk-fiche-demande.probleme { border-left-color: var(--critique); }
.sk-fiche-demande.question { border-left-color: var(--ciel); }

/* ---- Les liens d'une carte d'aide : l'espace de l'apprenant et la page du
   profil les emploient tous deux, ils appartiennent donc a la feuille commune
   (fusion du 3 octobre 2026). -------------------------------------------- */
.sk-aide-texte { margin: var(--e2) 0 0; }
.sk-aide-texte a { color: var(--inter-texte); font-size: var(--taille-14); }

/* ===========================================================================
   LES COMPOSANTS DES PAGES PUBLIQUES
   =========================================================================== */

/* ---- L'appel a l'action : une pilule, et un rond qui porte la fleche ---- */
.sk-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e3);
  min-height: 52px; padding: 6px var(--e5) 6px 6px;
  border: 1px solid transparent; border-radius: var(--rayon-pastille);
  font: inherit; font-size: var(--taille-16); font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.sk-cta-rond {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%;
  transition: transform .2s var(--courbe);
}
.sk-cta-rond svg { width: 18px; height: 18px; }
.sk-cta:hover .sk-cta-rond { transform: translateX(3px); }
.sk-cta-seul { padding: 0 var(--e5); }
/* Sur le nuit : fond ciel eclairci, encre nuit, 5,42:1. */
.sk-cta-clair { background: var(--ciel-clair); color: var(--nuit); }
.sk-cta-clair .sk-cta-rond { background: var(--nuit); color: var(--ciel-clair); }
.sk-cta-clair:hover { background: var(--blanc); }
/* Sur le clair : fond nuit, encre blanche, 11,6:1. */
.sk-cta-nuit { background: var(--nuit); color: var(--blanc); }
.sk-cta-nuit .sk-cta-rond { background: var(--ciel-clair); color: var(--nuit); }
.sk-cta-nuit:hover { background: var(--nuit-surface); }
.sk-cta-fantome { padding: 0 var(--e5); background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, .40); }
.sk-cta-fantome:hover { border-color: var(--blanc); }
.sk-cta-ligne { padding: 0 var(--e5); background: var(--blanc); color: var(--nuit); border-color: var(--filet-fort); }
.sk-cta-ligne:hover { border-color: var(--nuit); }
.sk-cta-petit { min-height: 44px; padding: 0 var(--e4); font-size: var(--taille-15); }
.sk-cta .sk-avatar { width: 32px; height: 32px; margin-left: -10px; font-size: var(--taille-12); }

.sk-actions-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e6); }

/* ---- La tete de section : filet d'or, surtitre, titre dont une ligne est
   en italique, et a droite ce qui la complete. La ligne d'accent est en
   --inter-texte sur le clair, en ciel eclairci sur le nuit. -------------- */
.sk-tete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--e4) var(--e7); margin-bottom: var(--e7);
}
.sk-titre-accent .accent { display: block; font-style: italic; color: var(--inter-texte); }
.sur-nuit .sk-titre-accent .accent { color: var(--ciel-clair); }
.sk-tete-texte { margin: 0; max-width: 52ch; color: var(--encre-douce); font-size: var(--taille-17); line-height: 1.6; text-wrap: pretty; }
.sur-nuit .sk-tete-texte { color: rgba(255, 255, 255, .80); }
.sk-tete-centre { flex-direction: column; align-items: center; text-align: center; }
.sk-tete-centre .filet-signature { margin-inline: auto; }

/* ---- Les cartes d'offre : le texte, puis la photographie mordue en bas a
   droite, ou se loge la fleche. Sur la bande nuit, elles sont translucides ;
   la carte vedette est blanche, et remet sa couleur a zero (piege 1 du
   brief). --------------------------------------------------------------- */
.sk-offres { display: grid; gap: var(--e5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-offre {
  position: relative; display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e5); border-radius: 16px; text-decoration: none;
  color: var(--encre-douce); background: var(--blanc); border: 1px solid var(--filet);
  transition: background-color .2s, border-color .2s, transform .2s var(--courbe);
}
.sk-offre:hover { transform: translateY(-3px); border-color: var(--inter); }
.sk-offre h3 { color: var(--nuit); font-family: var(--police-texte); font-size: var(--taille-20); line-height: 1.3; }
.sk-offre-etiquette {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0;
  color: var(--inter-texte); font-size: var(--taille-12); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.sk-offre-etiquette .sk-code { color: var(--acier); letter-spacing: .02em; text-transform: none; }
.sk-offre-texte { margin: 0; font-size: var(--taille-15); line-height: 1.55; text-wrap: pretty; }
.sk-offre-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--acier); font-size: var(--taille-13); }
.sk-offre-meta > span:not(.sk-statut):not(.sk-etiquette) { display: inline-flex; align-items: center; gap: 6px; }
.sk-offre-meta svg { width: 15px; height: 15px; }
.sk-offre-action { margin: 0; color: var(--inter-texte); font-size: var(--taille-15); font-weight: 700; }
.sk-offre-image { position: relative; margin-top: auto; padding-top: var(--e2); }
/* La morsure : un disque transparent dans le masque, centre sur la fleche.
   Seule l'opacite du masque compte : le nuit y vaut un noir. */
.sk-offre-image img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;
  -webkit-mask: radial-gradient(circle at calc(100% - 26px) calc(100% - 26px), transparent 31.5px, var(--nuit) 32px);
  mask: radial-gradient(circle at calc(100% - 26px) calc(100% - 26px), transparent 31.5px, var(--nuit) 32px);
}
.sk-offre-fleche {
  position: absolute; right: 4px; bottom: 4px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--nuit); color: var(--blanc);
  transition: transform .25s var(--courbe);
}
.sk-offre-fleche svg { width: 18px; height: 18px; }
.sk-offre:hover .sk-offre-fleche { transform: rotate(45deg); }
.sk-offre-vedette-marque {
  position: absolute; top: var(--e4); right: var(--e4);
  padding: 4px 10px; border-radius: var(--rayon-pastille);
  background: var(--bleu-voile); color: var(--inter-texte); font-size: var(--taille-12); font-weight: 700;
}

.sur-nuit .sk-offre {
  color: rgba(255, 255, 255, .80);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
}
.sur-nuit .sk-offre:hover { background: rgba(255, 255, 255, .11); border-color: var(--ciel-clair); }
.sur-nuit .sk-offre h3 { color: var(--blanc); }
.sur-nuit .sk-offre-etiquette { color: var(--ciel-clair); }
.sur-nuit .sk-offre-meta { color: rgba(255, 255, 255, .74); }
.sur-nuit .sk-offre-fleche { background: var(--ciel-clair); color: var(--nuit); }
.sur-nuit .sk-offre-vedette { color: var(--encre-douce); background: var(--blanc); border-color: var(--blanc); }
.sur-nuit .sk-offre-vedette:hover { background: var(--blanc); }
.sur-nuit .sk-offre-vedette h3 { color: var(--nuit); }
.sur-nuit .sk-offre-vedette .sk-offre-etiquette { color: var(--inter-texte); }
.sur-nuit .sk-offre-vedette .sk-offre-meta { color: var(--acier); }
.sur-nuit .sk-offre-vedette .sk-offre-fleche { background: var(--nuit); color: var(--ciel-clair); }

/* ---- Le chemin en bande : six ronds relies par un pointille. Entre deux
   etapes faites, le pointille devient un trait plein. -------------------- */
.sk-etapes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e5); margin: 0; padding: 0; list-style: none; text-align: center; }
.sk-etapes li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; }
.sk-etapes li:not(:last-child)::after {
  content: ""; position: absolute; top: 36px; left: calc(50% + 50px); right: calc(50px - 50% - var(--e5));
  border-top: 2px dashed var(--filet-fort);
}
.sk-etapes li.fait::after { border-top-style: solid; border-top-color: var(--seve); }
.sk-etape-rond {
  position: relative; width: 72px; height: 72px; margin-bottom: var(--e3); border-radius: 50%;
  display: grid; place-items: center; background: var(--nuit);
}
.sk-etape-rond .sk-picto { width: 34px; height: 34px; }
.sk-etape-rond .sk-picto .trait { stroke: var(--blanc); stroke-width: 1.8; }
.sk-etape-num {
  position: absolute; top: -6px; right: -10px; min-width: 30px; height: 30px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 15px; border: 3px solid var(--bleu-voile);
  background: var(--ciel-clair); color: var(--nuit); font-family: var(--police-mono); font-size: var(--taille-12); font-weight: 600;
}
.sk-etape-num svg { width: 14px; height: 14px; }
.sk-etapes .fait .sk-etape-num { background: var(--seve); color: var(--blanc); }
.sk-etapes .ici .sk-etape-rond { box-shadow: 0 0 0 7px var(--blanc), 0 0 0 9px var(--ciel-clair); }
.sk-etapes h3 { font-size: var(--taille-17); line-height: 1.3; }
.sk-etapes p { margin: 0; max-width: 26ch; color: var(--encre-douce); font-size: var(--taille-15); line-height: 1.5; text-wrap: pretty; }
.sk-etapes a { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--inter-texte); font-size: var(--taille-15); font-weight: 700; text-decoration: none; }
.sk-etapes a svg { width: 15px; height: 15px; }
.sk-etapes a:hover { text-decoration: underline; }
.sk-etapes-etat { color: var(--seve); font-size: var(--taille-14); font-weight: 700; }
.sk-ici-pastille {
  padding: 4px 10px; border-radius: var(--rayon-pastille); background: var(--nuit); color: var(--blanc);
  font-size: var(--taille-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* ===========================================================================
   LA TETE ET LE PIED DES PAGES PUBLIQUES (etape 7, 6 octobre 2026)
   ---------------------------------------------------------------------------
   Portes de la maquette validee de l'accueil (maquettes/accueil.html) : un
   bandeau d'adresse, une en-tete nuit et opaque, un pied qui dit qui ecrire
   et comment verifier une attestation. Les melanges de la maquette
   (color-mix) s'ecrivent en rgba, et ses rayons de commande en
   --rayon-controle (DESIGN.md, section 13).
   =========================================================================== */

/* ---- Le bandeau d'adresse : la ville, l'adresse de contact, et la
   verification d'une attestation. Rien d'autre (decision R6). ------------ */
.sk-bandeau-haut { background: var(--nuit-profond); color: rgba(255, 255, 255, .76); font-size: var(--taille-13); }
.sk-bandeau-haut .laize { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 38px; }
.sk-bandeau-haut ul { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin: 0; padding: 0; list-style: none; }
.sk-bandeau-haut li { display: inline-flex; align-items: center; gap: 7px; }
.sk-bandeau-haut svg { width: 14px; height: 14px; color: var(--ciel-clair); }
.sk-bandeau-haut a { color: var(--blanc); text-decoration: none; }
.sk-bandeau-haut a:hover { text-decoration: underline; }

/* ---- L'en-tete, nuit et opaque : elle prend la couleur des bandes de tete
   sur lesquelles elle se pose (piege 2 du brief), sans aucun script. ----- */
.sk-entete { position: sticky; top: 0; z-index: 40; background: var(--nuit); border-bottom: 1px solid rgba(255, 255, 255, .10); }
.sk-entete-dedans { display: flex; align-items: center; gap: var(--e6); height: 76px; }
.sk-entete-marque { flex: none; }
.sk-entete-marque img { display: block; width: 190px; height: auto; }
.sk-nav { display: flex; align-items: center; gap: var(--e5); }
.sk-nav a {
  position: relative; padding: 8px 0; white-space: nowrap;
  color: rgba(255, 255, 255, .84); font-size: var(--taille-15); text-decoration: none;
}
.sk-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--ciel-clair); transform: scaleX(0); transform-origin: left center; transition: transform .18s;
}
.sk-nav a:hover, .sk-nav a[aria-current="page"] { color: var(--blanc); }
.sk-nav a:hover::after, .sk-nav a:focus-visible::after, .sk-nav a[aria-current="page"]::after { transform: scaleX(1); }
.sk-entete-actions { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.sk-entete-duo { display: flex; align-items: center; gap: var(--e3); }
.sk-entete-duo form { margin: 0; }
.sk-entete-duo .sk-bouton-nu { color: var(--blanc); }
.sk-entete-duo .sk-bouton-nu:hover { color: var(--ciel-clair); }
/* ⚠ LA RECHERCHE DE LA TETE, ET ELLE SEULE. La maquette visait toute
   recherche posee dans l'en-tete, celle du tiroir comprise : le texte saisi
   y sortait blanc sur la carte blanche du menu. */
.sk-entete-actions > .sk-recherche { margin: 0; width: 15.5rem; }
.sk-entete-actions > .sk-recherche input { color: var(--blanc); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.sk-entete-actions > .sk-recherche input::placeholder { color: rgba(255, 255, 255, .72); }
.sk-entete-actions > .sk-recherche input:focus-visible { outline-color: var(--ciel-clair); background: rgba(255, 255, 255, .14); }
.sk-entete-actions > .sk-recherche svg { color: rgba(255, 255, 255, .72); }
.sk-chercher { display: none; color: var(--blanc); }

/* Le menu du telephone : un <details> natif, et une carte claire sur le nuit,
   dont la couleur est remise a zero (piege 1 du brief). */
.sk-tiroir { position: relative; display: none; }
.sk-tiroir > summary {
  display: grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .30); border-radius: var(--rayon-controle); color: var(--blanc);
}
.sk-tiroir > summary::-webkit-details-marker { display: none; }
.sk-tiroir > summary svg { width: 22px; height: 22px; }
.sk-tiroir-panneau {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
  width: min(320px, calc(100vw - 32px)); display: grid; gap: 2px; padding: var(--e3);
  color: var(--encre); background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-2);
}
.sk-tiroir-panneau a, .sk-tiroir-panneau button {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--e3);
  border: 0; border-radius: var(--rayon-controle); background: none;
  color: var(--encre); font: inherit; font-size: var(--taille-16); text-align: left; text-decoration: none; cursor: pointer;
}
.sk-tiroir-panneau a:hover, .sk-tiroir-panneau button:hover { background: var(--bleu-voile); color: var(--nuit); }
.sk-tiroir-panneau form { margin: 0; }
.sk-tiroir-panneau .sk-recherche { width: 100%; margin: 0 0 var(--e2); }
.sk-tiroir-panneau hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e2) 0; }

/* ---- Le pied : celui de samko.css (nuit profond, filet d'or), qui dit
   enfin qui ecrire et comment verifier une attestation (fiche C7). ------ */
.pied .sk-pied-grille { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: var(--e6); }
.sk-pied-grille h3 {
  margin: 0 0 .8rem; color: var(--ciel-clair); font-family: var(--police-texte);
  font-size: var(--taille-12); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.sk-pied-grille .mention { grid-column: 1 / -1; }
.sk-pied-grille p { max-width: 38ch; }
.sk-pied-marque img { width: 180px; height: auto; }
.sk-pied-contact a { font-weight: 700; }
.sk-verifier { display: flex; gap: var(--e2); margin-top: var(--e3); }
.sk-verifier input {
  flex: 1; min-width: 0; height: 44px; padding: 0 var(--e3);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--rayon-controle);
  background: rgba(255, 255, 255, .08); color: var(--blanc);
  font-family: var(--police-mono); font-size: var(--taille-15);
}
.sk-verifier input::placeholder { color: rgba(255, 255, 255, .62); }
.sk-verifier input:focus-visible { outline: 2px solid var(--ciel-clair); outline-offset: 2px; }
.sk-verifier .sk-cta { min-height: 44px; }

/* ---- La tete et le pied, aux largeurs. Sous 1 400 px, la recherche de la
   tete devient une loupe ; sous 1 100 px, la navigation passe dans le
   menu ; sous 760 px, le bandeau ne garde que l'adresse de contact. ------ */
@media (max-width: 1399px) {
  .sk-entete-actions > .sk-recherche { display: none; }
  .sk-chercher { display: inline-flex; }
}
@media (max-width: 1099px) {
  .sk-nav, .sk-entete .sk-sortir { display: none; }
  .sk-tiroir { display: block; }
  .pied .sk-pied-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-pied-marque, .sk-pied-verifier { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .sk-bandeau-haut .sk-bandeau-lieu { display: none; }
  .sk-bandeau-haut .laize { justify-content: center; }
  .sk-entete-dedans { height: 64px; gap: var(--e3); }
  .sk-entete-marque img { width: 136px; }
  .sk-entete .sk-entrer, .sk-chercher { display: none; }
  .sk-entete-duo .sk-cta { min-height: 40px; padding: 0 var(--e4); font-size: var(--taille-14); }
  .pied .sk-pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-pied-marque, .sk-pied-verifier, .sk-pied-contact { grid-column: 1 / -1; }
}

/* ===========================================================================
   L'ACCUEIL (etape 7, 6 octobre 2026)
   ---------------------------------------------------------------------------
   Porte de maquettes/accueil.html, validee le 29 septembre 2026 : des aplats
   francs, une ligne de titre en italique, des photographies mordues d'un rond
   qui loge un bouton, des pictogrammes en deux tons, un grand chiffre rempli
   d'une photographie, un ruban des metiers. Le bleu nuit ne porte que le
   heros, la bande des parcours et le pied ; l'or reste au filet et au
   logotype. Aucune boucle d'animation.
   =========================================================================== */

/* ---- Le heros, en bleu nuit uni : la bande de tete de la charte. ------- */
/* Le texte courant du heros prend la teinte opaque du nuit : une teinte a
   transparence ne se mesure pas hors de son fond (DESIGN.md, section 13). */
.sk-heros { color: var(--sur-nuit-fort); background: var(--nuit); padding-block: clamp(56px, 8vh, 104px); }
.sk-heros-grille {
  display: grid; align-items: center; gap: var(--e7) clamp(48px, 6vw, 112px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
}
/* ⚠ LE TITRE SE MESURE SUR SA COLONNE, PAS SUR LA VITRE (AccueilTest) : 6 % de
   la colonne, pose sur Georgia, la plus large des polices de repli. En `vw`,
   il cassait en quatre lignes entre 1 080 et 1 150 px. */
.sk-heros-dire { container-type: inline-size; }
.sk-heros h1 { color: var(--blanc); font-size: clamp(1.75rem, 6cqi, 3.4rem); }
.sk-heros .chapo { margin-top: var(--e5); color: rgba(255, 255, 255, .80); font-size: clamp(1.0625rem, .95rem + .4vw, 1.1875rem); }
.sk-etat-ligne {
  display: flex; align-items: flex-start; gap: var(--e3); margin: var(--e6) 0 0; max-width: 60ch;
  color: rgba(255, 255, 255, .84); font-size: var(--taille-16); line-height: 1.5;
}
.sk-etat-ligne .sk-icone { background: rgba(255, 255, 255, .12); color: var(--ciel-clair); }
/* ⚠ « REPRENDRE : *TITRE DU MODULE* » PASSE A LA LIGNE PLUTOT QUE DE DEBORDER.
   Un appel a l'action ne se coupe pas d'ordinaire ; celui du heros et de la
   bande finale porte le titre d'un module, que le corpus ecrit parfois long :
   a 1 024 px, la colonne du heros fait 441 px, et le bouton du titre le plus
   long de la demonstration en demandait 470 (mesure du 6 octobre 2026). */
.sk-heros .sk-cta, .sk-appel .sk-cta { white-space: normal; }

/* La photographie, mordue en haut a droite ou se loge le sceau. La morsure est
   un disque transparent dans le masque, plus large que le sceau de 12 px. */
.sk-heros-visuel { position: relative; }
.sk-cadre { position: relative; }
.sk-cadre > img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 4;
  object-fit: cover; object-position: 30% 50%; border-radius: 22px;
  -webkit-mask: radial-gradient(circle at calc(100% - 46px) 46px, transparent 71.5px, var(--nuit) 72px);
  mask: radial-gradient(circle at calc(100% - 46px) 46px, transparent 71.5px, var(--nuit) 72px);
}
.sk-sceau-rond {
  position: absolute; top: -14px; right: -14px; z-index: 3;
  width: 120px; height: 120px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanc); color: var(--nuit); text-decoration: none;
}
.sk-sceau-rond > svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s var(--courbe-longue); }
.sk-sceau-rond text { fill: var(--nuit); font-family: var(--police-texte); font-size: var(--taille-11); font-weight: 700; letter-spacing: .12em; }
/* Il tourne d'un huitieme au survol, et s'arrete : aucune boucle. */
.sk-sceau-rond:hover > svg { transform: rotate(45deg); }
.sk-sceau-rond:focus-visible { outline: 2px solid var(--ciel-clair); outline-offset: 4px; }
.sk-sceau-fleche { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ciel-clair); color: var(--nuit); }
.sk-sceau-fleche svg { width: 22px; height: 22px; }

/* ---- Les engagements : une rangee sur le blanc, sans carte. ------------ */
.sk-engagements-bande { background: var(--blanc); border-bottom: 1px solid var(--filet); padding-block: clamp(32px, 3.6vw, 52px); }
.sk-engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5) var(--e6); margin: 0; padding: 0; list-style: none; }
.sk-engagements li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e4); align-items: start; }
.sk-engagements h3 { font-size: var(--taille-17); line-height: 1.3; }
.sk-engagements p { margin: 4px 0 0; color: var(--encre-douce); font-size: var(--taille-15); line-height: 1.5; text-wrap: pretty; }

/* ---- La correction, dans sa propre bande : le texte, puis la fenetre. --- */
.sk-correction { display: grid; align-items: center; gap: var(--e7) clamp(40px, 6vw, 112px); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.sk-correction .sk-fenetre { justify-self: end; width: 100%; max-width: 600px; }
.sk-correction .sk-point { padding: 18px 20px; }
.sk-correction .sk-point-enonce, .sk-correction .sk-point-rendu { font-size: var(--taille-15); }
.sk-correction .sk-point-indice { font-size: var(--taille-14); }
.sk-correction .sk-actions-cta { margin-top: var(--e6); }
.sk-correction-texte { margin: var(--e5) 0 0; max-width: 52ch; color: var(--encre-douce); font-size: var(--taille-17); line-height: 1.65; text-wrap: pretty; }
.sk-correction-cle {
  margin: var(--e5) 0 0; max-width: 52ch; padding: var(--e3) var(--e4);
  border-left: 3px solid var(--inter); background: var(--blanc);
  color: var(--nuit); font-size: var(--taille-16); line-height: 1.5;
}

/* La fenetre de produit : role="img", rien de focalisable dedans. */
.sk-fenetre {
  overflow: hidden; color: var(--encre-douce); background: var(--blanc);
  border: 1px solid var(--filet); border-radius: var(--rayon-carte);
  box-shadow: 0 30px 70px -20px rgba(18, 41, 63, .80);
}
.sk-fenetre-tete { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--nuit); border-bottom: 1px solid rgba(255, 255, 255, .10); }
.sk-fenetre-tete i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .26); }
.sk-fenetre-tete .t { margin-left: 6px; color: var(--blanc); font-size: var(--taille-13); font-weight: 700; }
.sk-fenetre-tete .f { margin-left: auto; color: rgba(255, 255, 255, .72); font-family: var(--police-mono); font-size: var(--taille-11); }
.sk-point { padding: 14px 16px; border-left: 3px solid var(--filet); }
.sk-point + .sk-point { border-top: 1px solid var(--filet); }
.sk-point-juste { border-left-color: var(--succes); }
.sk-point-revoir { border-left-color: var(--attention); }
.sk-point-enonce { margin: 0; color: var(--nuit); font-size: var(--taille-14); font-weight: 700; line-height: 1.4; }
.sk-point-enonce .n { margin-right: 8px; color: var(--acier); font-size: var(--taille-13); font-weight: 400; }
.sk-point-rendu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: var(--taille-14); line-height: 1.45; }
.sk-point-rendu b { color: var(--nuit); }
.sk-point-indice {
  margin: 10px 0 0; padding: 9px 12px; border-left: 3px solid var(--attention); border-radius: 0 6px 6px 0;
  background: var(--attention-voile); color: var(--encre-douce); font-size: var(--taille-13); line-height: 1.5;
}
.sk-point-indice b { color: var(--ambre); }
.sk-fenetre-pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 9px 16px;
  border-top: 1px solid var(--filet); color: var(--acier); font-size: var(--taille-12);
}
.sk-fenetre-pied span { white-space: nowrap; }
.sk-fenetre-pied .d { margin-left: auto; }
.sk-fenetre-pied .rond { width: 7px; height: 7px; border-radius: 50%; background: var(--succes); }

/* ---- Le cabinet : le grand chiffre, rempli d'une photographie, dans un
   cadre coupe en biais ; puis ce que le cabinet est, et ses comptes. ----- */
.sk-cabinet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.sk-nombre-cadre {
  padding: 12px; background: var(--nuit) url("../img/metiers/AUD.webp") center / cover;
  clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px);
}
.sk-nombre-dedans {
  display: grid; align-content: center; gap: var(--e3); min-height: 380px; padding: clamp(28px, 4vw, 56px);
  background: var(--blanc); clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px);
}
.sk-grand-nombre {
  margin: 0; font-family: var(--police-texte); font-weight: 700; line-height: .86; letter-spacing: -.045em;
  font-size: clamp(6.5rem, 3rem + 8vw, 11.5rem); color: var(--nuit);
}
/* ⚠ LA PHOTOGRAPHIE DANS LE CHIFFRE, SEULEMENT LA OU ELLE SE DECOUPE. La
   maquette posait le fond nuit et la photographie sur le chiffre lui-meme, en
   nuit : un navigateur qui ne decoupe pas le fond dans le texte aurait peint
   un chiffre nuit sur un rectangle nuit, illisible. Sans decoupe, le chiffre
   reste nuit sur le blanc de son cadre ; avec, il prend la photographie, sur
   le nuit tant qu'elle charge. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sk-grand-nombre {
    background: var(--nuit) url("../img/metiers/AUD.webp") center 40% / cover;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.sk-grand-nombre-legende { margin: 0; color: var(--nuit); font-size: var(--taille-18); font-weight: 700; line-height: 1.3; }
.sk-grand-nombre-legende span { display: block; margin-top: 2px; color: var(--encre-douce); font-size: var(--taille-15); font-weight: 400; }
.sk-cabinet-texte > p { margin: 0; max-width: 60ch; color: var(--encre-douce); font-size: var(--taille-17); line-height: 1.65; }
.sk-cabinet-texte .sk-tete { margin-bottom: var(--e5); }
.sk-cabinet-texte > .sk-comptes-note { margin-top: var(--e3); color: var(--acier); font-size: var(--taille-15); }
.sk-comptes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--e6) 0 0; padding: 0; list-style: none; }
.sk-comptes li { padding: 0 var(--e5); border-left: 1px solid var(--filet-fort); }
.sk-comptes li:first-child { padding-left: 0; border-left: 0; }
.sk-comptes b { display: block; color: var(--nuit); font-size: clamp(1.75rem, 1.2rem + 1vw, 2.25rem); font-weight: 700; line-height: 1.1; }
.sk-comptes span { display: block; margin-top: 4px; color: var(--encre-douce); font-size: var(--taille-15); line-height: 1.4; }
.sk-signature { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--filet); }
.sk-signature img { width: 56px; height: auto; }
.sk-signature b { display: block; color: var(--nuit); }
.sk-signature span { color: var(--acier); font-size: var(--taille-14); }

/* ---- Le ruban des metiers, en ciel eclairci : les metiers ouverts, chacun
   vers le catalogue filtre. Fixe : aucune boucle. ----------------------- */
.sk-ruban { background: var(--ciel-clair); color: var(--nuit); }
.sk-ruban-liste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--e3) var(--e6); margin: 0; padding: var(--e5) 0; list-style: none;
}
.sk-ruban-liste li { display: inline-flex; align-items: center; gap: var(--e6); }
.sk-etoile { width: 20px; height: 20px; flex: none; stroke-width: 2.6; }
.sk-ruban-liste a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--nuit); font-size: clamp(1.0625rem, .9rem + .5vw, 1.375rem); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sk-ruban-liste a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sk-ruban-liste a .n { font-size: .75em; font-weight: 600; }

/* ---- Les modules a l'unite : la carte d'offre, en images 2:1. ---------- */
.sk-modules .sk-offre-image img { aspect-ratio: 2 / 1; }

/* ---- Le chemin, pour l'apprenant : la formation qu'il raconte. ---------- */
.sk-chemin-pour { margin: calc(-1 * var(--e5)) 0 var(--e7); text-align: center; color: var(--encre-douce); }
.sk-chemin-pour b { color: var(--nuit); }

/* ---- Les questions : des lignes, pas des boites, et un rond qui s'ouvre. */
.sk-faq-grille { display: grid; align-items: start; gap: var(--e6) clamp(40px, 5vw, 96px); grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
.sk-faq-grille .sk-tete { display: block; margin-bottom: 0; }
.sk-faq-grille .sk-tete-texte { margin-top: var(--e4); }
/* Le contact, un element nuit sur le sol clair, et non une bande. */
.sk-contact-nuit {
  display: grid; gap: var(--e3); margin-top: var(--e6); padding: var(--e5);
  border-radius: 16px; background: var(--nuit); color: rgba(255, 255, 255, .80);
}
.sk-contact-nuit h3 { color: var(--blanc); font-size: var(--taille-20); }
.sk-contact-nuit p { margin: 0; }
.sk-contact-nuit b { color: var(--blanc); }
.sk-contact-nuit .sk-cta { justify-self: start; }
.sk-sans-coupure { white-space: nowrap; }
.sk-faq { border-top: 1px solid var(--filet); }
.sk-faq details { border-bottom: 1px solid var(--filet); }
.sk-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  min-height: 68px; padding: var(--e3) 0; list-style: none; cursor: pointer;
  color: var(--nuit); font-size: var(--taille-18); font-weight: 700; line-height: 1.35;
}
.sk-faq summary::-webkit-details-marker { display: none; }
.sk-faq summary:hover { color: var(--inter-texte); }
.sk-plus {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--bleu-voile); color: var(--nuit); transition: transform .2s var(--courbe), background-color .2s;
}
.sk-plus svg { width: 16px; height: 16px; }
.sk-faq details[open] .sk-plus { transform: rotate(45deg); background: var(--nuit); color: var(--blanc); }
.sk-faq details p { margin: 0; padding: 0 64px var(--e5) 0; max-width: 72ch; color: var(--encre-douce); font-size: var(--taille-17); line-height: 1.65; }

/* ---- La bande finale, sur le sol clair : le texte, puis une photographie
   mordue en bas a gauche, ou se loge la fleche vers le catalogue. -------- */
.sk-appel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(40px, 6vw, 112px); align-items: center; }
.sk-appel .chapo { margin-top: var(--e4); }
.sk-appel-image { position: relative; margin: 0; }
.sk-appel-image img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 22px;
  -webkit-mask: radial-gradient(circle at 40px calc(100% - 40px), transparent 45.5px, var(--nuit) 46px);
  mask: radial-gradient(circle at 40px calc(100% - 40px), transparent 45.5px, var(--nuit) 46px);
}
.sk-appel-fleche {
  position: absolute; left: 6px; bottom: 6px; width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; background: var(--nuit); color: var(--ciel-clair); text-decoration: none;
  transition: transform .25s var(--courbe);
}
.sk-appel-fleche svg { width: 26px; height: 26px; }
.sk-appel-fleche:hover { transform: rotate(45deg); }
.sk-appel-etiquettes {
  position: absolute; top: var(--e4); left: var(--e4); right: var(--e4);
  display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; list-style: none;
}
.sk-appel-etiquettes li {
  padding: 6px 12px; border-radius: var(--rayon-pastille);
  background: rgba(26, 58, 92, .72); color: var(--blanc);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: var(--taille-13); font-weight: 700;
}

/* ---- L'accueil, aux largeurs. ------------------------------------------ */
/* Au-dela de 1 700 px, l'image du heros grandit avec la laize : sans cela, le
   titre, plafonne par la charte, laisse un vide entre lui et l'image. */
@media (min-width: 1700px) {
  .sk-heros-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); }
}
@media (max-width: 1279px) {
  .sk-heros-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}
@media (max-width: 1099px) {
  .sk-correction { grid-template-columns: minmax(0, 1fr); }
  .sk-correction .sk-fenetre { justify-self: start; max-width: 640px; }
  .sk-cabinet { grid-template-columns: minmax(0, 1fr); }
  .sk-nombre-cadre { max-width: 560px; }
  .sk-faq-grille, .sk-appel { grid-template-columns: minmax(0, 1fr); }
  .sk-appel-image { max-width: 640px; }
}
/* Sous 1 024 px, la photographie passe sous le texte : a cote, le titre
   tomberait sous 28 px. */
@media (max-width: 1023px) {
  .sk-heros-grille { grid-template-columns: minmax(0, 1fr); }
  .sk-heros-visuel { width: min(100%, 640px); }
  .sk-cadre > img { aspect-ratio: 16 / 9; }
}
/* Le telephone : une colonne ; les parcours defilent de cote, les modules
   deviennent des lignes. */
@media (max-width: 760px) {
  .sk-heros { padding-block: var(--e6) var(--e7); }
  .sk-heros h1 { font-size: clamp(1.875rem, 8.4cqi, 2.4rem); }
  .sk-heros .chapo { margin-top: var(--e4); }
  .sk-heros-visuel { width: 100%; padding: 0; }
  .sk-cadre > img {
    aspect-ratio: 16 / 10; border-radius: 16px;
    -webkit-mask: radial-gradient(circle at calc(100% - 34px) 34px, transparent 53.5px, var(--nuit) 54px);
    mask: radial-gradient(circle at calc(100% - 34px) 34px, transparent 53.5px, var(--nuit) 54px);
  }
  .sk-sceau-rond { top: -10px; right: -10px; width: 88px; height: 88px; }
  .sk-sceau-fleche { width: 40px; height: 40px; }
  .sk-fenetre-pied .d { flex-basis: 100%; margin-left: 0; padding-left: 19px; }

  .sk-engagements { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .sk-engagements .sk-picto { width: 40px; height: 40px; }
  .sk-correction .sk-point { padding: 14px 16px; }

  .sk-nombre-dedans { min-height: 0; }
  /* Trois colonnes etranglaient les libelles : une ligne par compte. */
  .sk-comptes { grid-template-columns: minmax(0, 1fr); }
  .sk-comptes li, .sk-comptes li:first-child {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: var(--e3);
    padding: var(--e3) 0; border-left: 0; border-top: 1px solid var(--filet);
  }
  .sk-comptes li:first-child { border-top: 0; padding-top: 0; }
  .sk-comptes b { font-size: var(--taille-26); }

  /* Les parcours defilent de cote, chaque carte s'arretant au bord : on voit
     qu'il y en a d'autres. Le defilement va jusqu'aux bords de la vitre.
     ⚠ LES DEUX CLASSES, ET NON LA SEULE. La colonne unique que `.sk-offres`
     prend sous 760 px est declaree plus bas dans la feuille, et battait
     celle-ci : la premiere carte se tassait dans une colonne d'un mot de
     large, sous les suivantes. Vu sur la capture a 390 px, le 6 octobre. */
  .sk-offres.sk-offres-defile {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--marge)); padding: 0 var(--marge) var(--e2); scroll-padding-inline: var(--marge);
  }
  .sk-offres-defile::-webkit-scrollbar { display: none; }
  .sk-offres-defile > * { scroll-snap-align: start; }

  .sk-modules { gap: var(--e3); }
  .sk-modules .sk-offre { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px var(--e3); padding: var(--e3); }
  .sk-modules .sk-offre > :not(.sk-offre-image) { grid-column: 2; }
  .sk-modules .sk-offre-image { grid-column: 1; grid-row: 1 / span 4; align-self: start; margin: 0; padding: 0; }
  .sk-modules .sk-offre-image img {
    aspect-ratio: 1; border-radius: 10px;
    -webkit-mask: radial-gradient(circle at calc(100% - 17px) calc(100% - 17px), transparent 21.5px, var(--nuit) 22px);
    mask: radial-gradient(circle at calc(100% - 17px) calc(100% - 17px), transparent 21.5px, var(--nuit) 22px);
  }
  .sk-modules .sk-offre-fleche { right: 2px; bottom: 2px; width: 30px; height: 30px; }
  .sk-modules .sk-offre-fleche svg { width: 14px; height: 14px; }
  .sk-modules .sk-offre h3 { font-size: var(--taille-17); }

  .sk-ruban-liste { justify-content: flex-start; gap: var(--e2) var(--e4); }
  .sk-ruban-liste li { gap: var(--e4); }

  /* La ligne de la formation remonte, sur ordinateur, dans la marge que la
     tete de la bande garde sous elle ; ici la tete la reduit, et la ligne
     collait au texte au point de s'y lire comme sa suite. */
  .sk-chemin-pour { margin-top: 0; }

  .sk-faq summary { font-size: var(--taille-17); min-height: 60px; }
  .sk-faq details p { padding-right: 0; font-size: var(--taille-16); }

  .sk-appel-image { display: none; }
}

/* ===========================================================================
   LES CIBLES
   ---------------------------------------------------------------------------
   Une cible se touche sur 44 px de haut au moins, meme quand son dessin est
   plus petit : un lien "Voir tout" fait 20 px, le petit bouton d'un
   tableau 36. Le surplus est un pseudo-element transparent, centre sur la
   cible : il ne change rien a la mise en page. Chaque cible porte deja
   position: relative dans sa propre regle.
   =========================================================================== */
.sk-voir::after, .sk-lien-barre::after, .sk-fil a::after, .sk-etapes a::after, .sk-bouton-petit::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); height: 44px;
}

/* ===========================================================================
   LES LARGEURS
   =========================================================================== */
/* Sous 1 280 px, le rail passe dans la colonne, et chaque bloc prend sa
   place dans l'ordre de lecture d'un telephone : on dit d'abord ou l'on en
   est, puis ce qu'on fait, puis ce qui s'est passe. `display: contents` sur
   deux simples div : aucun repere de navigation n'y est perdu. */
@media (max-width: 1279px) {
  .sk-grille { grid-template-columns: minmax(0, 1fr); }
  .sk-principal, .sk-rail { display: contents; }
  .sk-ordre-1 { order: 1; } .sk-ordre-2 { order: 2; } .sk-ordre-3 { order: 3; } .sk-ordre-4 { order: 4; }
  .sk-ordre-5 { order: 5; } .sk-ordre-6 { order: 6; } .sk-ordre-7 { order: 7; } .sk-ordre-8 { order: 8; }
  .sk-tuiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--e7); }
  .sk-etapes li:nth-child(3)::after { display: none; }
}

@media (max-width: 1099px) {
  .sk-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sous 1 024 px, le flanc devient une barre d'onglets en haut : sur
   telephone, une colonne de navigation mange la moitie de l'ecran. Les
   groupes y perdent leur titre, pas leurs entrees. */
@media (max-width: 1023px) {
  /* ⚠ DEUX RANGEES, ET LA PREMIERE A SA HAUTEUR. Sans `grid-template-rows`,
     les deux rangees se partageaient ce qui restait des 100vh de la coque :
     sur une page courte, la barre d'onglets montait a 200 px (mesure du
     1er octobre 2026, 768 px, la file des copies). */
  .sk-coque { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sk-flanc {
    position: static; height: auto; overflow-x: auto; scrollbar-width: thin;
    flex-direction: row; align-items: center; gap: var(--e4);
    padding: var(--e2) var(--e4);
  }
  .sk-flanc-marque { padding: 0; flex: none; }
  .sk-flanc-logo { width: 132px; }
  .sk-flanc nav, .sk-flanc-bloc { display: flex; gap: var(--e1); }
  .sk-flanc-groupe { display: flex; gap: var(--e1); }
  .sk-flanc-titre, .sk-flanc-pied { display: none; }
  .sk-flanc-lien { white-space: nowrap; }
  .sk-flanc-lien[aria-current="page"]::before { left: 12px; right: 12px; top: auto; bottom: 0; width: auto; height: 3px; }
  .sk-barre { padding: 0 var(--e4); gap: var(--e3); }
  .sk-recherche { width: auto; flex: 1; }
  .sk-page { padding: var(--e5) var(--e4); }
  /* La barre perd le nom du compte et le libelle du site public : mesure le
     1er octobre 2026 a 768 px, la recherche n'y gardait que "Recherche" de
     son invite. La maquette ne les retirait qu'a 760 px.
     ⚠ LE LIEN GARDE SON NOM. La maquette retirait son texte (display: none),
     et le lien, reduit a une icone muette, n'avait plus de nom pour un
     lecteur d'ecran. Le libelle sort de la vue et reste lu. */
  .sk-qui { display: none; }
  .sk-lien-barre span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}

/* ---- LE FLANC REPLIE. `data-flanc="rail"`, pose par public/js/flanc.js et
   seulement au-dessus de 1 024 px : en dessous, le flanc est deja une barre
   d'onglets. Les icones restent, chacune sur sa cible de 44 px ; les
   libelles et les titres de groupe sortent de la vue et restent lus, de
   sorte qu'une entree reduite a son icone garde son nom. ---------------- */
@media (min-width: 1024px) {
  .sk-coque[data-flanc="rail"] { grid-template-columns: var(--sk-rail) minmax(0, 1fr); }
  .sk-coque[data-flanc="rail"] .sk-flanc { padding-inline: var(--e2); }
  .sk-coque[data-flanc="rail"] .sk-flanc-marque { display: grid; place-items: center; padding: 0; }
  /* Le sceau seul marque le flanc replie : le logotype entier n'y tiendrait
     qu'a 11 px de haut. C'est le sceau DU LOGOTYPE CLAIR, rogne a sa gauche
     (les cent premieres unites sur quatre cents) : il garde le lisere qui
     detache son disque du K sur le nuit. */
  .sk-coque[data-flanc="rail"] .sk-flanc-logo {
    width: 40px; height: 32px; object-fit: cover; object-position: left center;
  }
  .sk-coque[data-flanc="rail"] .sk-flanc-titre,
  .sk-coque[data-flanc="rail"] .sk-flanc-lien > span:not(.sk-flanc-compte) {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .sk-coque[data-flanc="rail"] .sk-flanc-lien { justify-content: center; padding: 0; }
  .sk-coque[data-flanc="rail"] .sk-flanc-compte {
    position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
    font-size: var(--taille-11);
  }
  .sk-coque[data-flanc="rail"] .sk-flanc-replier svg { transform: rotate(180deg); }
}

@media (max-width: 760px) {
  .sk-tuiles-5, .sk-tuiles-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La chaine sur telephone : le libelle et le nombre, puis le rail dessous. */
  .sk-chaine li { grid-template-columns: minmax(0, 1fr) 3rem; }
  .sk-chaine .barre { grid-column: 1 / -1; grid-row: 2; }

  /* Une ligne de tableau devient une fiche : qui, quoi, quand et le statut,
     puis l'action sur toute la largeur. L'en-tete sort de la vue et reste
     lu par le lecteur d'ecran. */
  .sk-tableau-boite { margin: 0; overflow: visible; }
  .sk-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .sk-tableau, .sk-tableau tbody { display: block; }
  .sk-tableau tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2) var(--e3);
    padding: var(--e4) 0; border-bottom: 1px solid var(--filet);
  }
  .sk-tableau tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .sk-tableau tbody tr:first-child { padding-top: 0; }
  .sk-tableau td, .sk-tableau td:first-child, .sk-tableau td:last-child { display: block; padding: 0; border: 0; }
  .sk-tableau tbody tr:hover td { background: none; }
  .sk-tableau .c-qui, .sk-tableau .c-quoi { grid-column: 1 / -1; }
  .sk-tableau .c-statut { justify-self: end; align-self: center; }
  .sk-tableau .c-action { grid-column: 1 / -1; text-align: left; }
  .sk-tableau .c-action .sk-bouton { width: 100%; }
  .sk-tableau .c-cache { display: none; }
  .sk-tableau td[data-libelle]::before { content: attr(data-libelle); color: var(--acier); }
  .sk-tableau td[data-libelle] .sk-quand-age { display: inline; }

  .sk-fil { display: none; }
  .sk-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sur telephone, une carte de formation est une vignette : la photo a
     gauche. Pleine largeur, quatre cartes faisaient 1 300 px. Le metier
     quitte la photo, trop petite pour lui, et passe dans le texte. */
  .sk-formation:not(.sk-formation-appel) { flex-direction: row; }
  .sk-formation-photo { flex: none; width: 108px; aspect-ratio: auto; }
  .sk-formation-photo img { position: absolute; inset: 0; }
  .sk-formation-photo .sk-metier { display: none; }
  .sk-metier-texte { display: inline; font-weight: 700; color: var(--nuit); }
  .sk-formation-corps { padding: var(--e3) var(--e4); }
  .sk-actions .sk-bouton { flex: 1 1 100%; }
  .sk-carte { padding: var(--e4); }

  /* La salutation passe sur une colonne et l'anneau s'efface : sur
     telephone, les tuiles disent deja les nombres, et l'anneau repoussait la
     reprise sous la premiere vue. La carte de reprise empile sa photographie
     au-dessus du module, et garde son bord nu, apres `.sk-carte`. */
  .sk-bienvenue { grid-template-columns: minmax(0, 1fr); }
  .sk-bienvenue .sk-anneau { display: none; }
  .sk-reprise { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .sk-reprise-photo { min-height: 0; aspect-ratio: 2 / 1; }
  .sk-reprise-corps { padding: var(--e5) var(--e4); }
  .sk-reglette li { min-width: 0; }
  .sk-reglette .t { font-size: var(--taille-12); }

  .sk-offres { grid-template-columns: minmax(0, 1fr); }
  .sk-tete { margin-bottom: var(--e5); }
  .sk-actions-cta { margin-top: var(--e5); }
  .sk-actions-cta .sk-cta { flex: 1 1 100%; white-space: normal; text-align: left; }
  .sk-actions-cta .sk-cta-fantome, .sk-actions-cta .sk-cta-ligne { justify-content: center; }

  /* Les six etapes passent en colonne, reliees a gauche. */
  .sk-etapes { grid-template-columns: minmax(0, 1fr); row-gap: 0; text-align: left; }
  .sk-etapes li { grid-template-columns: 72px minmax(0, 1fr); justify-items: start; column-gap: var(--e4); padding-bottom: var(--e5); }
  .sk-etapes li > :not(.sk-etape-rond) { grid-column: 2; }
  .sk-etape-rond { grid-row: 1 / span 4; margin-bottom: 0; }
  .sk-etapes li:not(:last-child)::after, .sk-etapes li:nth-child(3)::after {
    display: block; top: 84px; bottom: 6px; left: 35px; right: auto; border-top: 0; border-left: 2px dashed var(--filet-fort);
  }
  .sk-etapes li.fait::after { border-left-style: solid; border-left-color: var(--seve); }
  .sk-etapes h3 { padding-top: 6px; }
}

/* ---- Le mouvement reduit : les transitions des composants tombent. La
   maquette l'ecrivait sous .sk, qu'aucun gabarit ne pose : la regle vise ici
   tout element qui porte une classe sk-, ses enfants et ses pseudo-
   elements. ------------------------------------------------------------- */
/* ---- A l'impression, la page seule : ni flanc, ni barre. Les ecrans qui
   s'impriment (le support de cours, le plan, une etude) n'ont plus a les
   nommer. ------------------------------------------------------------- */
@media print {
  .sk-flanc, .sk-barre { display: none !important; }
  .sk-coque, .sk-corps { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  [class^="sk-"], [class*=" sk-"], [class^="sk-"] *, [class*=" sk-"] *,
  [class^="sk-"]::before, [class*=" sk-"]::before, [class^="sk-"]::after, [class*=" sk-"]::after {
    transition: none !important;
  }
}