/* ============================================================
Héros & mentors — port de heros-mentors-m0-cible (lot 1 : la grille).
Scopé sous .pz-m0-heros. Écarts habituels du lot M0 : pas de Google Fonts,
Libre Caslon Text → Roboto Slab.
============================================================ */
.pz-m0-heros {
--ink: #211820;
--cream: #f6f1e8;
--paper: #fffdfa;
--magenta: #a20b86;
/* L'accent de la barre de rubrique : coque.css le lit ici. */
--rubrique-accent: var(--magenta);
--gold: #d2a72d;
--line: #d7cec5;
--muted: #716970;
background: var(--cream);
color: var(--ink);
}
body:has(.pz-m0-heros) { background: #f6f1e8; }
.pz-m0-heros.bg-box { background: var(--cream); border: 0 !important; border-radius: 0; }
div:has(~ .pz-m0-heros) { margin-top: 4px !important; margin-bottom: 6px !important; }
.pz-m0-heros .heros-main { max-width: 1180px; margin: auto; padding: 14px 28px 90px; }
.pz-m0-heros .eyebrow {
display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #b72999;
}
/* La barre de rubrique n'a plus son apparence ici : elle vit dans coque.css
depuis le 19 août, une fois pour toutes. Cette feuille n'en déclare plus que
l'accent, sur sa racine scopée — c'est la seule chose qui varie d'un
territoire à l'autre. Les huit copies qui existaient étaient identiques au
nom de la variable près ; la première page équipée après coup en aurait fait
une neuvième. */
.pz-m0-heros .page-head { max-width: 780px; margin: 26px 0 22px; }
.pz-m0-heros .page-head h1 {
margin: 10px 0 12px; font: 700 clamp(34px, 3.6vw, 46px)/1.06 "Roboto Slab", Georgia, serif;
color: var(--ink);
}
.pz-m0-heros .page-head > p { margin: 0; color: #5f575b; line-height: 1.6; }
.pz-m0-heros .mentor-actuel { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.pz-m0-heros .mentor-actuel a { color: var(--magenta); font-weight: 600; }
.pz-m0-heros .heros-recherche { margin-top: 16px; display: flex; gap: 8px; max-width: 520px; }
.pz-m0-heros .heros-recherche input {
flex: 1; min-width: 0; padding: 11px 14px;
border: 1px solid var(--line); border-radius: 22px; background: var(--paper);
}
.pz-m0-heros .heros-recherche button {
border: 0; border-radius: 22px; background: var(--ink); color: #fff;
padding: 11px 18px; font-weight: 600; cursor: pointer;
}
.pz-m0-heros .heros-portee { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.pz-m0-heros .heros-portee b { color: var(--ink); }
/* --- La grille --- */
.pz-m0-heros .hero-grid {
margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.pz-m0-heros .hero-card {
--tone: #a20b86;
min-height: 330px; position: relative; overflow: hidden;
display: flex; flex-direction: column; padding: 24px;
border: 1px solid var(--line); border-radius: 20px; background: var(--paper);
box-shadow: 0 10px 28px #251b2210;
}
/* Le bandeau de teinte : la Puissance principale se voit avant d'être lue.
Port strict de heros-mentors-m0-cible (dégradé color-mix + medaillon qui
déborde le bandeau). */
.pz-m0-heros .hero-card:before {
content: '';
position: absolute; inset: 0 0 auto; height: 118px;
background: linear-gradient(135deg, color-mix(in srgb, var(--tone), #151015 20%), var(--tone));
opacity: .97;
}
/* Le filigrane : le même portrait que le médaillon, agrandi et fondu — pas un
second visuel, juste la texture qui manquait au bandeau (demande de Boris,
17 août). Doit peindre APRÈS le dégradé et AVANT le médaillon : `position`
la sort du flux normal (peint plus tôt) et son ordre dans le HAML, avant
.hero-emblem, fait le reste.
Le masque radial évite le disque à bord net qu'un portrait carré donnerait ;
la désaturation partielle empêche les couleurs de la photo de se battre avec
la teinte de la Puissance, qui doit rester lisible. */
/* Le conteneur épouse EXACTEMENT le bandeau et clippe : sans lui, le disque
débordait sous la ligne du bandeau et se voyait sur le crème. C'est ce
clip qui impose un conteneur réel plutôt qu'un simple décalage négatif. */
.pz-m0-heros .hero-band-mark {
position: absolute; top: 0; right: 0; left: 0; height: 118px;
overflow: hidden; pointer-events: none;
}
.pz-m0-heros .hero-band-mark svg,
.pz-m0-heros .hero-band-mark img {
position: absolute; top: -24px; right: -24px; width: 190px; height: 190px;
opacity: .26;
}
/* Le masque radial évite le bord net d'un portrait carré ; la désaturation
partielle empêche les couleurs de la photo de se battre avec la teinte de
la Puissance, qui doit rester lisible. */
.pz-m0-heros .hero-band-mark img {
object-fit: cover; border-radius: 50%; filter: grayscale(.5) contrast(1.08);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 76%);
mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 76%);
}
.pz-m0-heros .current-flag {
position: absolute; right: 16px; top: 16px; z-index: 2; padding: 5px 10px; border-radius: 12px;
background: var(--tone); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .1em;
}
/* `position: relative` est nécessaire : sans elle l'emblème peint AVANT le
bandeau (:before, positionné) et se retrouve masqué par le dégradé dès que
celui-ci dépasse quelques pixels — invisible tant que le bandeau ne
mesurait que 5px, ça ne l'est plus à 118px. */
.pz-m0-heros .hero-emblem {
width: 106px; height: 106px; position: relative; display: grid; place-items: center;
margin: 22px 0 18px; border: 8px solid #fff; border-radius: 50%;
background: #fff; box-shadow: 0 8px 26px #0004;
}
.pz-m0-heros .hero-emblem img,
.pz-m0-heros .hero-emblem svg { width: 100%; height: 100%; }
/* Port de la maquette : le portrait REMPLIT le médaillon, contrairement à
l'emblème au trait qui s'y inscrivait. Le repli SVG reste donc correct. */
.pz-m0-heros .hero-emblem.portrait { overflow: hidden; }
.pz-m0-heros .hero-emblem.portrait img { object-fit: cover; border-radius: 50%; }
.pz-m0-heros .hero-card .eyebrow { color: var(--tone); }
.pz-m0-heros .hero-card h2 {
margin: 7px 0 10px; font: 700 25px "Roboto Slab", Georgia, serif; color: var(--ink);
}
.pz-m0-heros .hero-card blockquote {
margin: 0 0 16px; font: 400 15px/1.5 "Roboto Slab", Georgia, serif; color: #554b51;
}
/* --- La signature : principale + deux appuis ---
Port STRICT de motor.css (qui écrase styles.css dans la maquette, chargé
après lui) — ma première version inventait une bordure et un fond blanc,
ce qui faisait ressembler les pastilles au bouton « Lire la fiche ».
Ici : aucune bordure, un fond gris pour les appuis, la teinte de la
Puissance pour la principale.
L'information ne repose pas sur la seule couleur : le mot PRINCIPALE /
APPUI la porte aussi, règle tenue partout dans le lot. */
.pz-m0-heros .power-signature { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0; }
.pz-m0-heros .power-signature span {
display: flex; align-items: center; gap: 5px;
padding: 4px 9px 4px 5px; border-radius: 16px; background: #f0ebe5; color: #5f555b;
}
.pz-m0-heros .power-signature img { width: 18px; height: 18px; }
.pz-m0-heros .power-signature b { font-size: 10px; }
.pz-m0-heros .power-signature small {
margin-left: 2px; color: #968c91; font-size: 7px; letter-spacing: .08em;
}
/* SEUL ÉCART À LA MAQUETTE, demandé par Boris le 17 août : le TEXTE est
assombri de 30%, le fond reste celui de la maquette. À teinte pure, cinq des
six pastilles tombaient sous le seuil AA petit texte (4,5) — Imagination à
2,48. 30% est le minimum mesuré qui les fait toutes passer (pire cas 4,67) ;
en deçà, Imagination et Volonté restaient sous le seuil. La teinte reste
reconnaissable, et c'est bien la couleur de la Puissance. */
.pz-m0-heros .power-signature .principal {
background: color-mix(in srgb, var(--tone, #8b286f), #fff 88%);
color: color-mix(in srgb, var(--tone, #8b286f), #000 30%);
}
.pz-m0-heros .power-signature .principal small { color: inherit; }
/* `margin-top: auto` vit ICI dans la maquette, pas sur la signature : ce sont
les actions qui se collent en bas, la signature suivant simplement la
citation. align-items est un ajout nécessaire : `button_to` enveloppe
« Choisir » dans un