/* ============================================================
   COLONNE LATÉRALE — COMPOSANT PARTAGÉ

   Extrait de assets/opco.css le 2026-08-08, SANS RÉÉCRITURE : les règles ci-dessous en
   viennent ligne pour ligne. Elles servaient déjà /opco/{slug} ; elles servent depuis ce jour
   /glossaire/{slug}, qui les avait d'abord RECOPIÉES sous d'autres noms — deux implémentations
   du même composant, dont l'une avait déjà divergé (label en minuscules, champ écrasé) parce
   que le balisage empruntait `op-siret-bar` à une feuille qu'il ne chargeait pas.

   Chargé par gabarits/opco.php et gabarits/glossaire_terme.php. Toute page qui veut une
   colonne d'action collante charge CE fichier, et n'en recopie pas une ligne.

   NE CONTIENT QUE DU GÉNÉRIQUE : ni tuile de barème, ni pastille d'IDCC, ni liste
   d'opérateurs — celles-là restent dans opco.css, elles ne parlent que de la page OPCO.
   ============================================================ */

/* ============================================================
   1. LA GRILLE

   320 px pour la latérale : c'est la largeur qui laisse le champ SIRET recevoir un SIRET
   formaté « 123 456 789 00012 » sans le tronquer, bouton compris. En dessous, le champ ment
   sur ce qu'il accepte.

   ⚠️ AUCUN `overflow:hidden` NI `auto` SUR CETTE GRILLE, ni sur .op-principal. Un ancêtre à
   overflow non-visible annule silencieusement le `position:sticky` de la colonne de droite —
   le bloc se met à défiler comme le reste et rien dans l'inspecteur ne dit pourquoi. Le
   tableau de barèmes, lui, a son propre conteneur à `overflow-x:auto` : il est DANS la
   colonne, il n'en est pas un ancêtre.
   ============================================================ */
@media (min-width:900px){
  .op-grille{display:grid;grid-template-columns:minmax(0,1fr) 320px;
    gap:clamp(32px,4vw,56px);align-items:start}
}
.op-principal{min-width:0}     /* sans ça, le tableau large force la colonne à déborder */

/* ============================================================
   5. LA COLONNE LATÉRALE

   Collante sous l'en-tête. `--nav-h` est republiée en continu par assets/nav.js : l'en-tête
   est sticky et sa hauteur change au défilement, une valeur en dur ferait passer le bloc
   dessous. Le repli 64px sert le temps que le script s'exécute.
   ============================================================ */
.op-lateral{display:flex;flex-direction:column;gap:26px}
@media (min-width:900px){
  .op-lateral{position:sticky;top:calc(var(--nav-h, 64px) + 20px)}
}
.op-carte{border:1px solid var(--ligne);border-radius:12px;padding:20px;background:#fff}
.op-carte h2{font-size:.95rem;font-weight:600;margin:0 0 14px;padding:0;border:0;
  letter-spacing:-.01em;color:var(--encre)}
.op-carte p{margin:0 0 14px;font-size:.9rem;line-height:1.55;color:var(--gris)}

/* ---- le champ SIRET de la latérale -------------------------------------------------------
   Empilé, pas en ligne : à 320 px moins les paddings, un champ et un bouton côte à côte
   laissent 120 px au champ. La barre du hero, elle, est en ligne — c'est la même règle
   (siret.css) appliquée à deux largeurs différentes, pas deux règles. */
.op-siret label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin:0 0 9px}
.op-siret-bar{background:#fff;border:1px solid var(--ligne);border-radius:10px}
.op-siret-bar input{width:100%;font:inherit;font-size:.95rem;padding:13px 14px;border:0;
  background:transparent;color:var(--encre);border-radius:10px}
.op-siret-bar input::placeholder{color:var(--gris-clair)}
.op-siret-bar input:focus{outline:none}
.op-siret .btn{width:100%;margin-top:10px;justify-content:center}

/* ---- sous 900 px : la latérale repasse dans le flux ---------------------------------------
   Sortie du bloc `@media` de opco.css, qu'elle partageait avec les tuiles de barème : celles-ci
   sont propres à la page OPCO et ne suivent pas le composant. */
@media (max-width:899px){
  .op-lateral{position:static;margin-top:40px}
}

/* ---- liste de liens d'une carte -----------------------------------------------------------
   Déplacée depuis assets/glossaire.css le 2026-08-08. Elle y portait
   le préfixe `glo-`, qui n'a plus de sens dans un fichier partagé : la même liste sert les
   termes voisins d'une fiche de glossaire ET les termes cités par un article de blog, et
   servira toute carte qui aligne des liens. Un nom `glo-` ici aurait fait croire à un reste
   du glossaire, et le prochain à passer l'aurait recopié plutôt que réutilisé — c'est
   exactement ce qui est arrivé à la colonne latérale elle-même.

   LISTE VERTICALE, PAS DES PASTILLES : `.op-liens` (opco.css) aligne onze noms courts
   d'opérateurs, c'est de la navigation entre pairs. Ici les libellés sont longs — « Contribution
   à la formation professionnelle » — et une liste se lit mieux qu'une capsule de trois lignes.
   Les deux coexistent volontairement. */
/* ⚠️ `--muted` ET NON `--gris`, bien que ce fichier vive avec les jetons de opco.css : les deux
   sont définis et ne valent PAS la même chose — `--gris` #5b6b7f (site.css), `--muted` #63696f
   (style.css). Le repli #5b6b7f n'est donc jamais atteint. Écrire `--gris` en déplaçant la règle
   aurait changé la couleur du titre sur les 50 fiches, sous couvert d'un simple déménagement.
   Un déplacement se prouve à la valeur près, pas à l'intention près. */
.lat-liens h3{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted, #5b6b7f);margin:0 0 10px}
.lat-liens ul{margin:0;padding:0;list-style:none}
.lat-liens li + li{margin-top:8px}
.lat-liens a{font-size:.9rem;line-height:1.4}