/* ============================================================
   PAGE OPCO — mise en page à deux colonnes. Chargée par gabarits/opco.php seul.

   CE QUE CE FICHIER FAIT, ET CE QU'IL NE FAIT PAS.
   Il pose la GRILLE, les TUILES, les PILLS, la GARDE AMBRÉE et la colonne latérale. Il ne
   redéfinit ni la prose, ni le tableau de barèmes, ni les encarts : tout cela vit déjà dans
   assets/site.css et n'avait aucune raison de bouger. L'anneau bleu du champ SIRET, lui, vient
   de assets/siret.css, partagé avec l'accueil — il n'est pas redéfini ici.

   REGISTRE. Celui de l'accueil et du reste du site : le filet porte la structure, jamais
   l'ombre portée ; le bleu est réservé à ce qui est cliquable.
   UNE EXCEPTION, ASSUMÉE : le bandeau de métriques. Ailleurs sur le site les grands nombres
   sont écrits fin (graisse 300) sur fond blanc — ici ils sont en 500 sur aplat teinté. La
   raison est fonctionnelle, pas décorative : posé au-dessus du premier paragraphe, ce chiffre
   doit être vu AVANT d'être lu, et une graisse 300 sur blanc y pesait moins que le texte qui
   le suit. Le reste de la page reste au registre du filet.
   ============================================================ */

/* La page passe de 940 à 1140 px : c'est la largeur du conteneur du site, et il faut loger
   une colonne de lecture confortable À CÔTÉ d'une colonne latérale, pas en dessous. */
.opco-page.op-grille{max-width:1140px}

/* La grille, la colonne latérale, la carte et le champ SIRET ont été extraits vers
   assets/lateral.css le 2026-08-08 : ils sont partagés avec /glossaire/{slug}.
   Ce fichier ne garde que ce qui ne concerne QUE la page OPCO. */

/* ============================================================
   2. LE BANDEAU DE MÉTRIQUES

   APLAT TEINTÉ, PAS DE BORDURE. Une tuile cernée d'un filet gris sur fond blanc pèse moins que
   le paragraphe qui la suit : le filet dessine un contour, il ne crée pas de masse. C'est la
   surface colorée qui fait ressortir un chiffre, et c'est la seule exception assumée au parti
   pris « le filet plutôt que l'aplat » du reste du site — parce qu'ici l'objet n'est pas une
   structure à lire, c'est un chiffre à voir avant de lire.

   FLEX ET NON GRID, et c'est ce qui donne la hiérarchie demandée. `flex:2` contre `flex:1` :
   sur trois tuiles, la principale prend exactement la moitié de la largeur et les deux autres
   se partagent le reste. Une grille à colonnes fixes ne sait pas faire ça sans connaître à
   l'avance le nombre de tuiles — or il varie de 0 à 3 selon l'opérateur. Avec deux tuiles la
   principale prend deux tiers, seule elle prend tout : la règle se dégrade d'elle-même.
   ============================================================ */
.op-tuiles{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 28px;padding:0}

/* Tuile SECONDAIRE — gris neutre, demi-part. Elle qualifie le chiffre principal, elle ne
   rivalise pas avec lui. */
.op-tuile{flex:1 1 150px;min-width:0;border:0;border-radius:12px;padding:18px 20px;
  background:var(--fond-doux)}
.op-tuile dt{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin:0 0 10px}
/* 1.35rem ≈ 22 px sur les secondaires : nettement sous les 28 px de la principale, la
   hiérarchie doit s'entendre sans lire. Chiffres tabulaires pour que deux tuiles côte à côte
   alignent leurs colonnes — sinon l'œil lit une hésitation là où il n'y en a pas. */
.op-tuile dd{margin:0;font-size:1.35rem;font-weight:500;line-height:1.15;color:var(--encre);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.op-tuile dd .op-tuile-unite{display:block;font-size:.75rem;font-weight:400;color:var(--gris);
  letter-spacing:0;line-height:1.4;margin-top:7px}

/* Tuile PRINCIPALE — le plafond, en euros ou en heures. Bleu très clair (--bleu-pale, déjà à
   la palette du site), double part de largeur, chiffre à 28 px.
   Le libellé passe en bleu soutenu et la mention d'unité en encre douce : sur un aplat bleu,
   le gris des secondaires perdrait le contraste qu'il a sur le gris. */
.op-tuile--cle{flex:2 1 320px;background:var(--bleu-pale)}
.op-tuile--cle dt{color:var(--bleu-fonce)}
.op-tuile--cle dd{font-size:1.75rem;font-weight:500;color:var(--encre)}
.op-tuile--cle dd .op-tuile-unite{font-size:.75rem;color:var(--encre-doux)}

/* ============================================================
   3. LA GARDE AMBRÉE

   Elle ne dit jamais un montant : elle dit ce que le barème NE COUVRE PAS. Palette d'alerte
   du site (--alerte*), pas une couleur inventée pour l'occasion.
   Le filet épais est à GAUCHE et non tout autour : un cadre complet en ambre lit « erreur »,
   un filet latéral lit « à savoir ». Ce n'est pas une erreur, c'est une limite de périmètre.
   ============================================================ */
.op-garde{background:var(--alerte-fond);border:1px solid var(--alerte-ligne);
  border-left:3px solid var(--alerte);border-radius:8px;padding:14px 16px;margin:0 0 30px;
  color:var(--alerte);font-size:.92rem;line-height:1.55}
.op-garde strong{font-weight:600}

/* ============================================================
   4. LES BRANCHES EN PILLS

   Une pill par branche au barème. C'est une LISTE DE FAITS, pas une navigation : les pills
   ne sont pas cliquables tant que la convention correspondante n'a pas de page publiée. Une
   pastille qui a l'air d'un bouton et ne réagit pas coûte plus qu'elle ne rapporte.
   L'IDCC est en chiffres tabulaires et en gris : il identifie, il ne se lit pas.
   ============================================================ */
.op-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.op-pill{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--ligne);
  border-radius:999px;padding:6px 13px;font-size:.86rem;color:var(--encre-doux);
  background:var(--fond-doux)}
.op-pill span{font-size:.78rem;color:var(--gris-clair);font-variant-numeric:tabular-nums}


/* ---- les deux listes d'opérateurs --------------------------------------------------------
   SÉPARÉES, et c'est une distinction de fond, pas de présentation : les onze premiers
   financent des SALARIÉS, les trois derniers des NON-SALARIÉS (dirigeants, artisans,
   professions libérales). Une même entreprise relève des deux à la fois. Les mélanger sous
   « autres OPCO » ferait chercher son dirigeant dans la liste où il n'est pas. */
.op-liens ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.op-liens li{margin:0}
.op-liens a{display:inline-block;border:1px solid var(--ligne);border-radius:999px;
  padding:5px 12px;font-size:.84rem;color:var(--encre-doux);text-decoration:none;
  transition:border-color .15s,color .15s}
.op-liens a:hover{border-color:var(--bleu);color:var(--bleu)}
.op-liens h3{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-clair);margin:0 0 10px}
.op-liens + .op-liens{margin-top:18px}

/* ============================================================
   6. SOUS 900 px

   La latérale passe SOUS la colonne principale — c'est déjà l'ordre du DOM, il n'y a donc
   rien à réordonner : la grille se replie et le flux normal fait le travail. Le collant est
   retiré (il n'a plus de voisin à accompagner) et le bloc SIRET reste atteignable, en fin de
   lecture, là où le visiteur vient précisément de lire son barème.
   ============================================================ */
@media (max-width:899px){
  .op-tuile{flex:1 1 100%}          /* sous 900 px les tuiles s'empilent : une demi-largeur de téléphone ne tient pas « 1 100 € à 1 800 € » sur une ligne */
  .op-tuile--cle dd{font-size:1.6rem}
}

/* MENTION DE SOURCE — jumelle de .ac-confiance-note, sur fond clair cette fois.
   Même rôle : dire ce qu'on n'affiche pas. Discrète (gris, petite) parce qu'elle qualifie la
   page sans lui disputer la vedette, mais pas cachée : elle reste au-dessus du chapô. */
.op-note-source{max-width:660px;margin:0 0 22px;font-size:.86rem;line-height:1.55;
                color:var(--gris);border-left:2px solid var(--ligne);padding-left:12px}