/* ==========================================================================
Parts partagées des gabarits internes (Lot 5, vague A)
--------------------------------------------------------------------------
Porté du prototype (`style.css` 383-423, 465-495, 511-530) — hero interne,
fil d'Ariane, grilles génériques, colonnes latérales, cartes, pagination.
ÉCART ASSUMÉ par rapport à la spec §3.1, qui demande « une feuille par
FAMILLE de gabarit » et interdit une feuille globale « pages internes » :
cette feuille-ci n'est pas une feuille de pages internes, c'est la feuille
des PARTS PARTAGÉES du §3.4. Le raisonnement est le même que pour le
markup — la carte de réalisation est écrite une fois, son CSS aussi. La
dupliquer dans six feuilles de famille aurait garanti la dérive que le §3.4
cherche justement à éviter, et sans build de concaténation il n'y a pas de
troisième voie. Le CSS réellement propre à un écran reste dans sa famille.
Trois adaptations, toutes dues au passage du `background-image` en ligne du
prototype à de vraies balises `` (srcset + lazy + fetchpriority, le
poste le plus rentable du budget 4G, README §12) :
• les conteneurs d'image reçoivent `object-fit:cover` sur leur `` ;
• ils gardent un fond gris, pour ne pas laisser un trou blanc quand un
contenu n'a pas d'image mise en avant ;
• `.pager` habille la sortie de `the_posts_pagination()`, qui emboîte ses
liens dans un `.nav-links` — le prototype n'avait pas cette couche.
========================================================================== */
/* ------------------------------------------------ hero de page interne --- */
.phero{position:relative;margin-top:calc(-1 * var(--hdr-h));background:var(--ink);color:#fff;padding:calc(var(--hdr-h) + clamp(44px,6vw,88px)) var(--pad) clamp(36px,5vw,72px);overflow:hidden;}
/* 2026-09-09 — ÉCLAIRCISSEMENT DEMANDÉ PAR LE CLIENT, écart assumé au
prototype (`style.css` 385-386 : opacité .2, voile opaque / .82 / .28).
DEUX leviers, et le second est le principal : le hero interne est sombre
moins par son voile que parce que la photo n'y vit qu'à 20 % d'opacité.
Elle passe à 32 %, le voile s'allège au milieu et à droite.
L'arrêt de GAUCHE reste opaque, volontairement : c'est là que commencent le
fil d'Ariane, le surtitre, le H1 et le chapô, et c'est le fond `--ink` que
`scripts/contrastes.php` prend pour référence (« Texte des sections sombres
et du hero »). Le laisser opaque, c'est ne rien invalider de la mesure. */
.phero__img{position:absolute;inset:0;opacity:.32;}
.phero__img img{width:100%;height:100%;object-fit:cover;display:block;}
.phero__veil{position:absolute;inset:0;background:linear-gradient(90deg,#20272E 0%,rgba(32,39,46,.70) 50%,rgba(32,39,46,.20) 100%);}
.phero__in{position:relative;max-width:var(--wrap);margin:0 auto;}
.phero h1{margin:0;max-width:940px;font-size:clamp(29px,4.4vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.022em;}
.phero__lead{margin:clamp(16px,2vw,24px) 0 0;max-width:680px;font-size:clamp(15px,1.3vw,18.5px);line-height:1.65;color:var(--light);}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-3);margin-bottom:clamp(24px,4vw,52px);}
.crumbs a{color:var(--muted-3);}
.crumbs a:hover{color:var(--orange);}
.crumbs i{color:var(--orange);font-style:normal;}
.crumbs b{color:#fff;font-weight:400;}
/* ------------------------------------------------- grilles génériques --- */
.two{display:grid;gap:clamp(28px,4vw,80px);}
.two--85-115{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
.two--115-85{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.two--aside-320{grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,72px);}
.two--aside-300{grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,72px);}
.two--aside-280{grid-template-columns:minmax(0,1fr) 280px;gap:clamp(28px,4vw,72px);}
.two--11-9{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3vw,56px);}
.two--115-1{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,52px);}
/* `.cells` est aussi déclaré par `blocks/section-chiffres.css`, à l'identique.
La copie est STRUCTURELLE et non un oubli : l'accueil ne charge pas cette
feuille-ci (elle ne part que sur les pages internes), et le bloc doit rendre
sa grille sans elle. Seules les variantes réellement utilisées ici sont
reprises — le bandeau des cinq faits d'une étude de cas. */
.cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.cells--160{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.cell{background:#fff;padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,32px);}
.cardgrid{display:grid;gap:clamp(16px,2.4vw,32px);}
.cardgrid--220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.cardgrid--280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.cardgrid--300{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
/* README §7.9 : sous 3 résultats, les colonnes sont PLAFONNÉES pour que les
cartes gardent une échelle de carte au lieu de s'étirer. */
.cardgrid--300-400{grid-template-columns:repeat(auto-fill,minmax(300px,400px));justify-content:start;}
/* --------------------------------------------------- colonnes latérales -- */
.aside{position:sticky;top:170px;align-self:start;display:grid;gap:16px;}
.aside--130{top:130px;}
.aside--static{position:static;top:auto;align-content:start;}
/* Lot 9 — le visuel qui ferme la colonne de la page Contact
(`contact.html` 314). Port de `.person__img` (`style.css` 433) : c'est le
même dessin, 4/5 en noir et blanc ; on ne réutilise pas la classe du bloc
`grille-cartes`, dont la feuille n'est pas enfilée ici et qui porte en plus
des règles de cellule de grille. Sans image, l'aplat de palette, comme
partout depuis le Lot 7bis. */
.aside__img{position:relative;aspect-ratio:4/5;background-color:var(--grey);overflow:hidden;}
.aside__img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);}
.box{border:1px solid var(--line);padding:24px;}
.box--dark{background:var(--ink);color:#fff;padding:28px;border:0;}
.box--dark-sm{background:var(--ink);color:#fff;padding:26px;border:0;}
.box--grey{background:var(--grey);padding:24px;border:0;--secondaire:var(--body);}
.box__k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--secondaire);margin-bottom:14px;}
.box__k--light{color:var(--muted-3);}
.box__t{font-size:18px;font-weight:700;line-height:1.3;}
.box__t--sm{font-size:17px;line-height:1.35;}
.box p{margin:12px 0 20px;font-size:14.5px;line-height:1.7;color:var(--light);}
.box--grey p{margin:0 0 16px;font-size:13.5px;line-height:1.65;color:var(--secondaire);}
.box__rows{display:grid;}
.box__row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;border-top:1px solid var(--line);color:var(--ink);font-size:14.5px;font-weight:600;}
.box__row:hover{color:var(--orange);}
.box__row i{color:var(--orange);font-style:normal;}
.box__row--48{min-height:48px;}
.box__row--48 em{font-family:var(--mono);font-size:11px;color:var(--secondaire);font-style:normal;}
.box__row.is-active{color:var(--orange);}
.box__note{display:grid;gap:6px;padding:16px 0;border-top:1px solid var(--line);color:var(--ink);}
.box__note:hover{color:var(--orange);}
.box__note-d{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--secondaire);}
.box__note-t{font-size:14.5px;font-weight:600;line-height:1.4;}
.box__facts > div{padding:18px 22px;border-bottom:1px solid var(--line);}
/* `.box__facts` est un modificateur POSÉ SUR `.box` dans le prototype
(`contact.html` 300) : les deux paddings s'ajoutent, c'est voulu et vérifié
au navigateur (24px sur l'encadré, 18/22 par ligne). L'en-tête de la fiche
technique n'existe pas dans le prototype (l'aside de contact n'a pas de
label) : il est ajouté sans padding de ligne ni filet, pour rester une
étiquette et pas une ligne de données. */
.box__facts > .box__facts-head{padding:0;border-bottom:0;}
.box__facts .box__k{margin-bottom:0;}
.box__facts-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--secondaire);margin-bottom:8px;}
.box__facts-v{font-size:15px;font-weight:600;}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tags span{display:inline-flex;align-items:center;height:32px;padding:0 12px;background:var(--grey);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
/* ----------------------------------------------------- barres de filtres - */
/* Les « chips » sont des LIENS (spec §3.3), pas des boutons : le prototype en
faisait des `