/* =====================================================================
carte-bop-aptitude.css — l'habillage de la carte, TRAITEMENT NOIR ET OR.
Applique gaming.decision-cedric-la-carte-bop-passe-au-traitement-noir-
et-or-l-eventail-seul-au-centre-sans-la-main-02092026 (V2, VALIDE).
PALETTE, ET RIEN D'AUTRE — vérifiée programmatiquement, pas à l'œil
(voir reconstruire-la-carte-bop-en-noir-et-or-dans-le-composant-02092026,
page de preuve, §palette) :
#09080B · #1A1A1A · #FFF4DE · #EAB939 · #B7203A · #6F4A94 · #C17F2E
LA BRILLANCE VIENT DE CES COULEURS. Jamais d'arc-en-ciel, jamais une
couleur étrangère à la charte.
===================================================================== */
.bop-carte{
--bop-noir-1:#09080B; /* le fond le plus profond, trame */
--bop-noir-2:#1A1A1A; /* encre — variante de trame + fond du verso */
--bop-creme:#FFF4DE; /* ivoire chaud — texte sur fond noir */
--bop-or:#EAB939; /* or — filets, contour évolutif, accents */
--bop-bronze:#C17F2E; /* or sourd — ombre portée de l'or, second plan */
--bop-carmin:#B7203A; /* enseigne Cuisson (♠), accents chauds */
--bop-violet:#6F4A94; /* cartouche BOP APTITUDE */
display:flex; flex-direction:column; align-items:center; gap:16px;
/* Aucune hauteur imposée : la carte grandit avec son registre, et c'est
la page qui défile. Même invariant que les cartes du parcours. */
width:100%; max-width:340px; margin:0 auto;
}
/* ── La scène, et le retournement ────────────────────────────────────── */
/* RATIO CONSERVÉ DU COMPOSANT SERVI : 340×521. */
.bop-scene{
position:relative; width:100%; aspect-ratio:340/521;
cursor:pointer; perspective:1200px;
}
.bop-face{
position:absolute; inset:0;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
border-radius:22px;
transition:transform 520ms ease;
transform-style:preserve-3d;
}
.bop-recto{ transform:rotateY(0deg); }
.bop-verso{
/* GÉOMÉTRIE ALIGNÉE SUR LE RECTO — boîte 334×515 à (3,3) dans le canevas
340×521, la même sur les cinq faces (voir carte-bop-aptitude.js, rect
extérieur du recto). Avant : inset:0 + border-radius:22px hérités de
.bop-face → le verso couvrait les 340×521 SANS AUCUNE MARGE (mesuré par
canal alpha, seuil 16/255 : bbox = canevas entier), contrairement au
recto — les faces n'étaient pas interchangeables, ce qui condamnait le
retournement et l'animation Graal. */
inset:3px;
border-radius:26px;
transform:rotateY(180deg);
background:var(--bop-noir-1); color:var(--bop-creme);
border:3px solid var(--bop-bronze);
box-shadow:inset 0 0 0 1px rgba(234,185,57,.25);
padding:22px 20px 18px;
display:flex; flex-direction:column; gap:10px;
}
/* Le logo officiel, en grand, au verso — inchangé par gaming.decision-
cedric-le-monogramme-mr-est-ecarte-le-vrai-logo-methode-richard-reste-au-
recto-03092026 : « le verso garde son logo […], rien n'indique le
contraire ». Le recto porte maintenant sa propre image du même logo,
plus petite, en pied (voir .bop-logo plus bas) — les deux faces l'ont
chacune désormais, ce ne sont plus des emplacements exclusifs l'un de
l'autre. Centré, sous le titre « Registre ». */
.bop-logo-verso{ display:block; height:34px; width:auto; margin:2px auto 4px; align-self:center; }
.bop-scene.bop-retournee .bop-recto{ transform:rotateY(-180deg); }
.bop-scene.bop-retournee .bop-verso{ transform:rotateY(0deg); }
/* ── Recto ───────────────────────────────────────────────────────────── */
/* LE SVG DESSINE TOUT — fond, contour, éventail — et reste TRANSPARENT
hors du contour de la carte : l'objet doit pouvoir se poser sur
n'importe quel décor (planche du quiz final, scène 3D) sans bande de
fond visible. */
.bop-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* .bop-texte / .bop-logo (le ![]()
posé en HTML par-dessus le
recto) SONT RETIRÉS — cabler-carte-bop-six-modules-03092026 : le logo vit
maintenant DANS le calque de cadre (07_LOGO_METHODE_RICHARD, PNG, cuit
du même maître état 5). Le garder aurait dessiné le logo deux fois. Le
verso, lui, continue de poser son propre ![]()
— voir
.bop-logo-verso ci-dessus, non touché par ce chantier. */
/* ── Verso ───────────────────────────────────────────────────────────── */
.bop-verso-titre{
margin:0; font-family:Georgia, serif; font-size:.72rem; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--bop-or);
}
.bop-verso-nom{ margin:0; font-family:Georgia, serif; font-weight:700; font-size:1.05rem; color:var(--bop-creme); }
/* Le registre est dessiné comme un registre : une ligne par module, un
filet entre les lignes. Trace factuelle, pas nouvelle collection.
PLUS DE flex:1 ICI — troisième emplacement (après demo.js et verifier-
3d.js le 04/09) où « Les Accessoires de Cuisson » dessinait un DÉFAUT
VISIBLE, mais d'une AUTRE cause que miniCarteHref()/slug (le recto rend
bien sa mini-carte, la vérification en direct au navigateur le confirme) :
flex:1 étirait cette liste pour occuper tout l'espace restant de la
colonne du verso, quel que soit son contenu réel. Avec un seul module,
la ligne « Cuisson · 30 août 2026 » se retrouvait suivie d'un grand pan
vide avant le total — pris pour un rectangle d'illustration manquant en
relecture. Retiré : la liste garde sa hauteur naturelle, « 1 formation
maîtrisée » suit directement la dernière ligne, quel que soit le nombre
de modules. */
.bop-registre{ list-style:none; margin:6px 0 0; padding:0; }
.bop-registre li{
display:flex; justify-content:space-between; align-items:baseline; gap:10px;
padding:7px 0; border-bottom:1px solid rgba(234,185,57,.22);
font-size:.82rem; line-height:1.35;
}
.bop-registre-titre{ font-weight:700; color:var(--bop-creme); }
.bop-registre-date{ white-space:nowrap; opacity:.75; font-size:.76rem; color:var(--bop-creme); }
.bop-registre-vide{ justify-content:center; font-style:italic; opacity:.7; border-bottom:none; }
.bop-verso-bas{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.bop-verso-total{ margin:0; font-weight:700; font-size:.84rem; color:var(--bop-or); }
.bop-verso-maj{ margin:0; font-size:.72rem; opacity:.7; }
/* La vérification : discrète, au verso, jamais au recto. */
.bop-verif{
margin-top:4px; padding-top:8px; border-top:1px dashed rgba(234,185,57,.35);
text-align:center;
}
.bop-verif-libelle{ margin:0 0 2px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.bop-verif-lien{
font-family:ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size:.78rem; letter-spacing:.08em; color:var(--bop-or);
}
/* ── Le bouton de retournement ───────────────────────────────────────── */
/* TEXTUEL ET TOUJOURS PRÉSENT : la conception l'exige pour le mobile, et
c'est aussi le seul chemin au clavier. Le toucher s'y ajoute, il ne le
remplace pas. 44 px, comme partout. */
.bop-retourner{
min-height:44px; min-width:44px; padding:10px 20px;
font:inherit; font-size:.88rem;
color:var(--bop-noir-1); background:var(--bop-or);
border:2px solid var(--bop-or); border-radius:999px; cursor:pointer;
font-weight:700;
}
.bop-retourner:hover{ background:var(--bop-bronze); border-color:var(--bop-bronze); }
.bop-retourner:focus-visible{ outline:3px solid var(--bop-creme); outline-offset:3px; }
/* ── Mouvement réduit ────────────────────────────────────────────────── */
/* Pas de rotation 3D : on remplace, avec un fondu court. La conception le
demande explicitement, et c'est aussi ce qui évite le vertige. */
@media (prefers-reduced-motion: reduce){
.bop-face{ transition:opacity 180ms ease; transform:none !important; backface-visibility:visible; }
.bop-verso{ opacity:0; pointer-events:none; }
.bop-scene.bop-retournee .bop-recto{ opacity:0; pointer-events:none; }
.bop-scene.bop-retournee .bop-verso{ opacity:1; pointer-events:auto; }
}
/* ── Téléphone ───────────────────────────────────────────────────────── */
/* Presque pleine largeur, aucune partie coupée, nom lisible sans zoom —
et aucun mouvement dépendant de l'inclinaison du téléphone : il n'y en
a nulle part dans cette feuille, c'est une exigence de la conception. */
@media (max-width:480px){
.bop-carte{ max-width:min(94vw, 340px); }
.bop-retourner{ width:100%; }
}
/* Le QR : DISCRET, au verso, jamais au recto. Assez grand pour être lu
par un téléphone à bout de bras (les lecteurs demandent ~2 cm), pas
plus : ce n'est pas lui qu'on regarde. Fond clair obligatoire — un QR
sur fond sombre ne se lit pas. */
.bop-qr{
display:block; width:74px; height:74px; margin:6px auto 4px;
background:#fff; padding:4px; border-radius:6px;
}