/* Surcouche du thème « crimes » (config/sites.php, clé surcouche) : les dossiers de tueurs en série réels, sur papier dactylographié (piste A de design/pistes/dico_machine_a_ecrire.html).
   Elle se charge après metiers.css (clé surcouche_base) dont elle reprend l'ossature des intercalaires (onglets, feuilles, marché) et la rhabille :
   plus de reliure à anneaux, des feuilles crème lignées comme du papier à machine, un ruban de machine rouge, des tampons rouges (rang, mention judiciaire).
   Ton : sobre. Ce sont de vrais dossiers d'affaires criminelles : ni éclaboussures, ni silhouettes, ni sang, seulement du papier, de l'encre et du rouge de ruban.
   Les rangs 1 à 5 gardent le système de teintes commun (--r1 à --r5, cadre des cartes). Rien ne s'applique aux autres thèmes. */

/* Polices. Special Elite (licence Apache 2.0, voir assets/fonts/LICENCES.txt) est dans assets/fonts ; « Courier Prime » reste la pile de secours de --titre.
   L'intervalle de graisses (100 900) évite que le navigateur fabrique un faux gras sur cette police qui n'a qu'une graisse. */
@font-face{font-family:"Special Elite";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/special-elite-latin.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url("../../fonts/courier-prime-latin.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url("../../fonts/courier-prime-bold-latin.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:italic;font-weight:400;font-display:swap;src:url("../../fonts/courier-prime-italic-latin.woff2") format("woff2")}

/* ===== Palette : feuille crème, encre bleutée de machine, rouge de ruban =====
   papier #F6F1E4 (bureau lignée) · surface #FFFDF6 (feuille) · encre #1E2430 · rouge ruban #B3261E · rouge bouton #A11F18 · traits #CFC7AD, lignes #D9D2BD */
:root{
  --papier:#F6F1E4; --surface:#FFFDF6; --encre:#1E2430; --brume:#CFC7AD; --marque:#1E2430; --marine:#1E2430;
  --doux:rgba(30,36,48,.76);
  --orange:#B3261E; --orange-fort:#A11F18; --orange-texte:#A11F18; --violet:#8C2A22;
  --titre:"Special Elite","Courier Prime","Courier New",monospace; --texte:"Courier Prime","Courier New",monospace;
  --ombre-repos:1px 2px 0 #CFC7AD,0 6px 12px -8px rgba(60,45,20,.35);
  --ombre-leve:2px 4px 0 #CFC7AD,0 18px 26px -14px rgba(60,45,20,.5);
  --ligne:#CDC5AC; --marge:rgba(179,38,30,.38); --trait:#8A826A; --bleu-ligne:rgba(88,124,160,.20); --ligne-carte:rgba(88,124,160,.30);
  --onglet-fond:#E9E1C8; --onglet-texte:#1E2430; --onglet-actif:#FFFDF6;
  --ruban-rouge:#B3261E; --tampon:#B3261E; --nav-fond:#1E2430; --nav-texte:#F6F1E4;
  --manille:#DCC995; --manille-fonce:#C9B27A; --manille-bord:#A38D55;
  --barre-piste:#E9E1C8; --barre-fond:linear-gradient(90deg,#8C1F18,#B3261E); --barre-raies:rgba(255,253,246,.25);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#16181D; --surface:#21242B; --encre:#ECE7D8; --brume:#3B404B; --marque:#ECE7D8; --marine:#0E1013;
    --doux:rgba(236,231,216,.76);
    --orange:#E0584D; --orange-fort:#A11F18; --orange-texte:#F28B80; --violet:#F28B80;
    --ombre-repos:1px 2px 0 #0A0B0E,0 6px 12px -8px rgba(0,0,0,.7);
    --ombre-leve:2px 4px 0 #0A0B0E,0 18px 26px -14px rgba(0,0,0,.85);
    --ligne:#2C3039; --marge:rgba(224,88,77,.38); --trait:#6B6F7A; --bleu-ligne:rgba(130,170,210,.12); --ligne-carte:rgba(130,170,210,.17);
    --onglet-fond:#2B2F38; --onglet-texte:#ECE7D8; --onglet-actif:#21242B;
    --ruban-rouge:#E0584D; --tampon:#F28B80; --nav-fond:#0E1013; --nav-texte:#ECE7D8;
    --manille:#6A5C3C; --manille-fonce:#54482F; --manille-bord:#8A7848;
    --barre-piste:#2B2F38; --barre-fond:linear-gradient(90deg,#B3261E,#E0584D); --barre-raies:rgba(0,0,0,.2);
  }
}
:root[data-theme="dark"]{
  --papier:#16181D; --surface:#21242B; --encre:#ECE7D8; --brume:#3B404B; --marque:#ECE7D8; --marine:#0E1013;
  --doux:rgba(236,231,216,.76);
  --orange:#E0584D; --orange-fort:#A11F18; --orange-texte:#F28B80; --violet:#F28B80;
  --ombre-repos:1px 2px 0 #0A0B0E,0 6px 12px -8px rgba(0,0,0,.7);
  --ombre-leve:2px 4px 0 #0A0B0E,0 18px 26px -14px rgba(0,0,0,.85);
  --ligne:#2C3039; --marge:rgba(224,88,77,.38); --trait:#6B6F7A; --bleu-ligne:rgba(130,170,210,.12); --ligne-carte:rgba(130,170,210,.17);
  --onglet-fond:#2B2F38; --onglet-texte:#ECE7D8; --onglet-actif:#21242B;
  --ruban-rouge:#E0584D; --tampon:#F28B80; --nav-fond:#0E1013; --nav-texte:#ECE7D8;
  --manille:#6A5C3C; --manille-fonce:#54482F; --manille-bord:#8A7848;
  --barre-piste:#2B2F38; --barre-fond:linear-gradient(90deg,#B3261E,#E0584D); --barre-raies:rgba(0,0,0,.2);
}

/* Variables des feuilles de metiers.css : papier, trait gris-brun, pas de lignes propres (la ligne est celle du fond) */
body,:root:not([data-theme="light"]) body,:root[data-theme="dark"] body{--cl:var(--trait);--cl-papier:var(--onglet-actif);--cl-ligne:transparent}
/* Le bureau est une feuille lignée : une ligne toutes les 28 px, comme la maquette */
body{background-color:var(--papier);background-image:repeating-linear-gradient(transparent 0 29px,var(--ligne) 29px 30px);background-attachment:scroll}
/* La marge rouge d'une feuille à machine : un trait vertical discret à gauche du contenu, derrière les feuilles (z-index négatif) */
body::before{content:"";position:fixed;top:0;bottom:0;left:max(5px,calc((100vw - 980px)/2 - 14px));width:2px;background:var(--marge);pointer-events:none;z-index:-1}
/* Le ruban de couleur (en-tête, haut des blocs, sous les titres) : un trait rouge de ruban, pas les couleurs des époques */
:is(.entete,.bloc-page,.hero,.page__tete){--ruban:var(--ruban-rouge)}
.msg__carte::before,.hub__marque::after{background:var(--ruban-rouge)}
/* (Les lueurs de fond des coins, posées par pages.css sur le fond du body, sont remplacées par les lignes du papier : le background-image ci-dessus les écrase.) */

/* ===== Pas de reliure : une feuille posée sur le bureau ===== */
.zone>.page{padding-left:18px;padding-right:18px}
.zone>.page::before{display:none}
.zone>.page>.outils{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
@media (max-width:640px){.zone>.page{padding-left:12px;padding-right:12px}.zone>.page>.outils{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}}

/* ===== Titres, texte, liens ===== */
h1,h2,h3,h4{font-weight:400;letter-spacing:.01em}
h1{font-size:clamp(34px,6vw,50px);line-height:1.1}
/* Titre de page : grand, souligné d'un trait de ruban rouge épais */
.page__tete h1::after{width:100px;height:5px;margin-top:12px;border-radius:0;background:var(--ruban-rouge)}
a{text-decoration-color:var(--ruban-rouge)}
::selection{background:var(--ruban-rouge);color:#fff}

/* ===== En-tête : la plaque de la machine ===== */
.entete{background:var(--papier);border-bottom:2px solid var(--encre);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 3px 0 var(--ruban-rouge)}
.entete::after{display:none}
/* Logo « crimes●wetheque » : le mot en encre, un point rouge rond. Le texte d'origine (« crimes.wetheque ») reste dans la page pour les lecteurs d'écran ;
   le « .wetheque » est réduit à zéro et réécrit par ::after avec le point rouge entre les deux mots (taille : --mt). */
.marque{--mt:28px;font-size:0;font-weight:400;letter-spacing:.01em;display:inline-flex;align-items:baseline;white-space:nowrap}
.marque__theme,.marque::after{font:400 var(--mt)/1.2 var(--titre);color:var(--encre)}
.marque__theme::after{content:"";display:inline-block;width:.3em;height:.3em;margin:0 .07em;border-radius:50%;background:var(--ruban-rouge)}
.marque::after{content:"wetheque"}
@supports (content:"a" / "b"){.marque::after{content:"wetheque" / ""}}
.msg__marque,.acces .marque{--mt:24px}
.pied__marque{--mt:26px}
.pied-site a.pied__marque{font-size:0;font-weight:400;display:inline-flex}
/* Navigation : chaque lien porte en permanence un soulignement rouge épais, le lien courant plus marqué */
/* Menu : pas de soulignement. Le lien actif ou survolé est entouré au marqueur rouge, à main levée ; les autres liens ne sont ni soulignés ni entourés. */
.entete__nav a{position:relative;border-radius:0;font-weight:400;color:var(--encre);background:transparent;box-shadow:none;padding:9px 12px}
.entete__nav a::after{content:"";position:absolute;inset:0 -4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 48' preserveAspectRatio='none' fill='none' stroke='%23B3261E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2.6' d='M16 12C32 4 96 2 138 8c18 3 24 14 17 24-7 11-52 14-96 12C28 43 6 38 5 26 4 15 18 9 40 6'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.6' opacity='.55' d='M24 9C58 4 112 4 140 12c13 5 12 17 0 23-14 6-58 9-100 5'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:0;pointer-events:none}
.entete__nav a:hover,.entete__nav a:focus-visible,.entete__nav a[aria-current]{background:transparent;box-shadow:none;color:var(--encre)}
.entete__nav a:hover::after,.entete__nav a:focus-visible::after,.entete__nav a[aria-current]::after{opacity:1}
/* La machine à écrire est large : entre 780 et 980 px, l'en-tête se resserre pour ne pas déborder */
@media (min-width:780px) and (max-width:980px){
  .marque{--mt:21px;letter-spacing:0}
  .entete{gap:8px}
  .entete__nav a{font-size:13px;padding:8px 7px}
  .entete__droite{gap:8px}
}
@media (max-width:779px){
  .marque{--mt:20px;letter-spacing:0}
  .entete{gap:8px;padding-left:12px;padding-right:12px}
  .entete__droite{gap:8px}
}
@media (max-width:520px){body .entete__droite .btn{padding:7px 8px;font-size:11px;letter-spacing:0}}
@media (max-width:420px){.entete .marque{--mt:18px}}
/* Pages publiques sur grand écran : l'en-tête (marque, cinq époques, deux boutons) est plus large qu'avec une police étroite ; il suit les bords du contenu (1080 px), et sous 1180 px les époques (déjà listées plus bas dans la page) s'effacent */
@media (min-width:780px){
  .entete:has(.entete__droite .btn){padding-left:max(24px,calc((100% - 1080px)/2 + 18px));padding-right:max(24px,calc((100% - 1080px)/2 + 18px))}   /* l'en-tête suit les bords du contenu des pages publiques (1080 px), pas ceux de l'écran */
  .entete:has(.entete__droite .btn) .entete__nav a{font-size:13px;padding:8px 8px}
}
@media (min-width:780px) and (max-width:1180px){
  .entete:has(.entete__droite .btn){grid-template-columns:1fr auto}
  .entete:has(.entete__droite .btn) .entete__nav{display:none}
}
/* Pages publiques sur téléphone : la machine est large, les deux boutons passent sous la marque (et l'en-tête ne reste plus collé en haut) */
@media (max-width:480px){
  .entete:has(.entete__droite .btn){position:static;flex-wrap:wrap;row-gap:8px;justify-content:center}
  .entete:has(.entete__droite .btn) .entete__droite{margin-left:0;width:100%}
  .entete:has(.entete__droite .btn) .entete__droite .btn{flex:1;text-align:center;font-size:13px}
}
@media (max-width:359px){.entete .marque{--mt:15px}}
.nav-bas{background:var(--surface);border-top:2px solid var(--encre)}
/* Téléphone : les onglets ne sont plus décalés (le texte en capitales espacées serait coupé) et la recherche garde un placeholder lisible */
@media (max-width:520px){
  .zone [data-onglet]{--tab-x:-1px}
  .zone [data-onglet]::before{letter-spacing:.03em;font-size:14px}
  .zone .onglet{letter-spacing:0}
  input::placeholder{font-size:14px}
}
/* Messages de confirmation : une note collée sur la feuille, liseré vert de la teinte commune du rang 2 */
.confirmation{background:var(--surface);border:1px solid var(--trait);border-left:6px solid var(--r2);color:var(--encre);font-family:var(--texte)}
.nav-bas a{font-weight:400}

/* ===== Boutons : étiquettes tapées, rectangulaires ===== */
.btn{border-radius:0;font-weight:400;letter-spacing:.04em}
.btn{font-family:var(--titre)}
.btn.principal{background:var(--encre);border-color:var(--encre);color:var(--papier);box-shadow:none}
.btn.principal:hover{background:var(--orange-fort);border-color:var(--orange-fort);color:#fff}
.btn.secondaire{background:transparent;border-color:var(--encre);color:var(--encre)}
.btn.secondaire:hover{background:var(--onglet-fond)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ruban-rouge);outline-offset:3px}
:root[data-theme="dark"] :is(.btn,a,button,input,select,textarea,[tabindex]):focus-visible{outline-color:#F28B80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.btn,a,button,input,select,textarea,[tabindex]):focus-visible{outline-color:#F28B80}}

/* ===== Les intercalaires : des feuilles de dossier, onglet étiqueté à la machine ===== */
.zone [data-onglet]{background:var(--surface);border:1px solid var(--trait);border-radius:0;box-shadow:var(--ombre-repos);
  background-image:repeating-linear-gradient(transparent 0 25px,var(--bleu-ligne) 25px 26px)}
.zone [data-onglet]::before{background:var(--onglet-fond);color:var(--onglet-texte);border:1px solid var(--trait);border-bottom:0;border-top:3px solid var(--ruban-rouge);border-radius:0;font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
:root:not([data-theme="light"]) .zone [data-onglet]::before{color:var(--onglet-texte)}
.zone [data-onglet]{--tab:var(--onglet-fond)}
[data-page="arrivage"] :is(.action-une,.hero--jour,.nouveautes,.boutique-section,.progres,.hero--arrivage){--tab:var(--onglet-fond)}
:where(.zone>.page>[data-onglet],.profil__col>[data-onglet]){--tab:var(--onglet-fond)}
.zone .section-album[data-onglet]{--tab:var(--onglet-fond)}
.zone .onglets{border-bottom:0}
.zone .onglet{background:var(--onglet-fond);color:var(--onglet-texte);font-family:var(--titre);font-weight:400;border:1px solid var(--trait);border-bottom:0;border-top:3px solid transparent;border-radius:0}
.zone .onglet[aria-selected="true"]{background:var(--surface);color:var(--encre);border-top-color:var(--ruban-rouge);border-bottom:1px solid var(--surface)}
.zone .onglet[aria-selected="true"]::after{background:var(--surface)}
.zone [role="tabpanel"]{background-color:var(--surface);background-image:repeating-linear-gradient(transparent 0 25px,var(--bleu-ligne) 25px 26px);border:1px solid var(--trait);border-radius:0;box-shadow:var(--ombre-repos)}
.zone .alertes[data-onglet],.zone .classement[data-onglet]{background-color:var(--surface)}

/* ===== Les cartes : des fiches de dossier sur papier ===== */
.carte{border-radius:3px}
/* Album (et listes de cartes) : de vraies feuilles de 280 px au moins, 2 à 3 par ligne, pour que la phrase, le pays, la période et la mention se lisent.
   Au-dessus de 240 px, la règle commune de cartes.css qui masque ces textes ne s'applique plus. */
.zone .cartes-grille{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 22px;padding:10px 6px 16px}
body .vitrine__cartes{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 22px}
@media (max-width:520px){.zone .cartes-grille{gap:26px 12px;padding:8px 2px 12px}}
/* Une feuille de papier crème posée sur le bureau : pas de cadre coloré par rang, un simple bord de papier, des lignes de feuille et l'ombre d'une feuille posée.
   La rareté se lit au tampon rouge en haut à droite (voir plus bas), pas à la couleur du cadre. */
/* Papier sale froissé : un BLANC (pas de crème : Alexandre veut des cartes blanches), quelques plis gris (un trait sombre doublé d'un trait clair), de très légères taches et un grain en SVG data: (img-src 'self' data: autorisé).
   Sans lignes de feuille (elles restent sur le bureau de la page). Le texte reste en encre foncée sur ce fond clair : contraste largement supérieur à 7 pour 1. */
:root{
  --feuille:#FEFEFD;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .36 0 0 0 0 .36 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --froisse:
    linear-gradient(104deg,transparent 21.6%,rgba(70,70,68,.07) 21.8%,rgba(255,255,255,.38) 22.4%,transparent 23.4%),
    linear-gradient(71deg,transparent 54.6%,rgba(70,70,68,.06) 54.8%,rgba(255,255,255,.32) 55.4%,transparent 56.4%),
    linear-gradient(158deg,transparent 39.6%,rgba(70,70,68,.05) 39.8%,rgba(255,255,255,.3) 40.4%,transparent 41.4%),
    linear-gradient(12deg,transparent 72.6%,rgba(70,70,68,.045) 72.8%,rgba(255,255,255,.28) 73.4%,transparent 74.4%),
    radial-gradient(ellipse 60% 40% at 16% 10%,rgba(120,120,116,.03),transparent 70%),
    radial-gradient(ellipse 55% 45% at 88% 72%,rgba(110,110,106,.04),transparent 70%),
    radial-gradient(circle at 72% 16%,rgba(120,120,116,.035),transparent 16%),
    radial-gradient(circle at 30% 84%,rgba(120,120,116,.03),transparent 14%),
    var(--grain);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--feuille:#2B2E36;--froisse:
    linear-gradient(104deg,transparent 21.6%,rgba(0,0,0,.28) 21.8%,rgba(255,255,255,.05) 22.4%,transparent 23.4%),
    linear-gradient(71deg,transparent 54.6%,rgba(0,0,0,.24) 54.8%,rgba(255,255,255,.045) 55.4%,transparent 56.4%),
    linear-gradient(158deg,transparent 39.6%,rgba(0,0,0,.2) 39.8%,rgba(255,255,255,.04) 40.4%,transparent 41.4%),
    radial-gradient(ellipse 60% 40% at 16% 10%,rgba(200,170,110,.07),transparent 70%),
    radial-gradient(ellipse 55% 45% at 88% 72%,rgba(0,0,0,.18),transparent 70%),
    var(--grain)}
}
:root[data-theme="dark"]{--feuille:#2B2E36;--froisse:
    linear-gradient(104deg,transparent 21.6%,rgba(0,0,0,.28) 21.8%,rgba(255,255,255,.05) 22.4%,transparent 23.4%),
    linear-gradient(71deg,transparent 54.6%,rgba(0,0,0,.24) 54.8%,rgba(255,255,255,.045) 55.4%,transparent 56.4%),
    linear-gradient(158deg,transparent 39.6%,rgba(0,0,0,.2) 39.8%,rgba(255,255,255,.04) 40.4%,transparent 41.4%),
    radial-gradient(ellipse 60% 40% at 16% 10%,rgba(200,170,110,.07),transparent 70%),
    radial-gradient(ellipse 55% 45% at 88% 72%,rgba(0,0,0,.18),transparent 70%),
    var(--grain)}
.carte .face,.carte.r1 .face,.carte.r2 .face,.carte.r3 .face,.carte.r4 .face,.carte.r5 .face,.carte.coloree .face{border:.3cqw solid #D6D6D3;border-radius:.4cqw;box-shadow:var(--ombre-repos);
  background:var(--froisse),linear-gradient(var(--feuille),var(--feuille))}
.carte:hover .face,.carte.actif .face{box-shadow:var(--ombre-leve)}
.carte .face::after{display:none}
.carte.non-possedee::after{border-radius:.4cqw}
/* Les feuilles de l'album ne sont pas alignées au cordeau : une très faible rotation différente pour chaque carte */
:is(.cartes-grille,.vitrine__cartes) li:nth-child(5n+1) .carte{transform:rotate(-1.2deg)}
:is(.cartes-grille,.vitrine__cartes) li:nth-child(5n+2) .carte{transform:rotate(.8deg)}
:is(.cartes-grille,.vitrine__cartes) li:nth-child(5n+3) .carte{transform:rotate(-.5deg)}
:is(.cartes-grille,.vitrine__cartes) li:nth-child(5n+4) .carte{transform:rotate(1.4deg)}
:is(.cartes-grille,.vitrine__cartes) li:nth-child(5n+5) .carte{transform:rotate(-.9deg)}
.carte .image,.carte.coloree .image{background:#CBCBC8;border:0;border-radius:0;box-shadow:none}
.image__photo{filter:grayscale(1) contrast(1.12) brightness(.9);opacity:.8}   /* photos à 80 % d'opacité : le papier transparaît */
.image__gris{background:#C9C9C6}
/* Ombre intérieure légère et chaude (encre brune, pas bleue) qui adoucit le bord de la photo */
.image::after{box-shadow:inset 0 0 8cqw rgba(40,28,12,.30),inset 0 0 3cqw rgba(40,28,12,.14)}   /* ombre intérieure étendue et diffuse */
/* Image par défaut (pas de photo, ou photo noire écartée par le serveur) : un mur gris (bruit de fond), une empreinte digitale en traits fins et des hachures de gravure,
   avec le même traitement que les photos (gris, contraste, légèrement assombrie, 80 % d'opacité) pour aller avec elles. Rien de figuratif : ni silhouette ni sang. */
.image__dossier{position:absolute;inset:0;overflow:hidden;filter:grayscale(1) contrast(1.12) brightness(.9);opacity:.8;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100' fill='none' stroke='%23454545' stroke-width='1.6' stroke-linecap='round' opacity='.45'%3E%3Cpath d='M-30 6C-30-22-10-36 0-36s30 14 30 42'/%3E%3Cpath d='M-24 10C-24-16-8-29 0-29s24 13 24 39'/%3E%3Cpath d='M-18 14C-18-9-6-22 0-22s18 13 18 36'/%3E%3Cpath d='M-12 18C-12-3-4-15 0-15s12 12 12 33'/%3E%3Cpath d='M-6 22C-6 6-2-8 0-8s6 14 6 30'/%3E%3Cpath d='M0 26V-2'/%3E%3C/svg%3E") center/58% no-repeat,
    repeating-linear-gradient(32deg,rgba(30,30,30,.10) 0 1px,transparent 1px 4.2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.5'/%3E%3C/svg%3E"),
    var(--grain),
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.4),transparent 62%),
    linear-gradient(#DADAD7,#C6C6C3)}
.nom{font-family:var(--titre);font-weight:400;text-transform:none;letter-spacing:.005em;color:var(--encre);text-align:left}
.phrase{font-family:var(--texte);font-style:normal;text-align:left;color:var(--encre);line-height:1.35}
.cat{font-family:var(--titre);font-weight:400;border-radius:0;letter-spacing:.04em;text-shadow:none;background:transparent;color:var(--encre);border:0;border-left:1.4cqw solid var(--cat,#1E2430);padding:.5cqw 2cqw}
/* Le tampon de rareté : le nom de la rareté frappé à l'encre. Même taille de texte et même emprise pour tous les rangs (celles de COMMUNE) ;
   seul le STYLE change : fin et grisé, rouge fin, double filet, plein, plein avec double anneau.
   (le nombre de la pastille reste dans la page pour les lecteurs d'écran, il est seulement caché à l'œil) */
.badge,.carte.r4 .badge,.carte.r5 .badge{width:auto;aspect-ratio:auto;display:block;margin-left:auto;border-radius:.3cqw;background:transparent;color:var(--tampon);border:.4cqw solid var(--tampon);padding:.5cqw 2.2cqw .3cqw;
  font:400 0/1 var(--titre);white-space:nowrap;transform:rotate(5deg);box-shadow:none}
.badge::before{font:400 3.6cqw/1.25 var(--titre);letter-spacing:.14em}
.carte.r1 .badge{--tampon:#5C6169;opacity:.8}
.carte.r1 .badge::before{content:"COMMUNE"}
.carte.r2 .badge::before{content:"INHABITUELLE"}
.carte.r3 .badge{box-shadow:inset 0 0 0 .25cqw var(--feuille),inset 0 0 0 .5cqw var(--tampon)}
.carte.r3 .badge::before{content:"RARE"}
.carte.r4 .badge{background:#B3261E;color:#FFFDF6;border-color:#B3261E;box-shadow:inset 0 0 0 .25cqw #FFFDF6}
.carte.r4 .badge::before{content:"ÉPIQUE"}
.carte.r5 .badge{background:#B3261E;color:#FFFDF6;border-color:#B3261E;box-shadow:inset 0 0 0 .25cqw #FFFDF6,inset 0 0 0 .5cqw #B3261E,inset 0 0 0 .75cqw #FFFDF6}
.carte.r5 .badge::before{content:"LÉGENDAIRE"}
.fait,.pied{font-family:var(--titre);font-weight:400}
.faits{border-top:.4cqw dashed var(--trait)}
/* Verso : même hiérarchie que le recto (nom en Special Elite, sans capitales) */
.verso h3{font-family:var(--titre);font-weight:400;text-transform:none;font-size:8.4cqw;letter-spacing:.005em;border-bottom:0;padding-bottom:0;min-height:0}
.verso .texte-verso{font-family:var(--texte);font-size:4.2cqw;line-height:1.38;-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible;margin:1.4cqw 0}   /* le texte complet, sans coupure ni réduction */
.verso .source{border-top:.4cqw dashed var(--trait)}
/* Le verso : un encadré de formulaire, le libellé à gauche, la valeur à droite, reliés par des points comme sur un état civil tapé à la machine */
.infos{gap:0;background:var(--surface);border:.3cqw solid var(--trait);padding:1cqw 2cqw}
.infos div{font:400 3.9cqw/1.5 var(--texte);border-bottom:.3cqw dotted var(--trait);padding:.5cqw 0}
.infos div:last-child{border-bottom:0}
.infos dt{color:var(--doux)}
.infos dd{font-family:var(--texte);font-weight:700;color:var(--encre)}
.lien-verso{color:var(--tampon);font-family:var(--titre);font-weight:400}
/* Verso : le texte, puis « Lire plus » (lien vers l'article Wikipédia), puis le cadre des chiffres et la source */
.verso h3{order:1}
.verso .texte-verso{order:2}
.verso .lien-verso{order:3;align-self:flex-start;font-size:4.2cqw;text-decoration:underline;text-decoration-thickness:.4cqw;text-underline-offset:.7cqw}
.verso .verso__centre{order:4}
.verso .source{order:5}

/* Recto grand format : pays et période sur une ligne, la mention judiciaire en tampon rouge */
@container (min-width:241px){
  /* Disposition de la maquette : le tampon et l'époque en haut, le nom, la phrase, l'image en bloc plein, puis « pays · période » en petit */
  .carte .face.recto{padding:13.5cqw 6cqw 5cqw;gap:2.6cqw}
  .recto .entete-carte{top:4.5cqw;left:6cqw;right:5.5cqw;align-items:flex-start}
  .recto .nom{order:1;font-size:8.6cqw;line-height:1.1;margin:0;-webkit-line-clamp:2;line-clamp:2}
  .recto .phrase{order:2;font-size:4.9cqw;line-height:1.36;-webkit-line-clamp:3;line-clamp:3}
  .recto .image{order:3;flex:1 1 0;height:auto;min-height:26cqw}
  .recto .faits{order:4;display:flex;flex-wrap:wrap;align-items:center;gap:1cqw 0;border-top:0;padding:0 14cqw 0 0;color:var(--doux)}
  .recto .fait{display:block;font-size:3.9cqw;line-height:1.35;text-align:left;color:var(--doux);grid-template-rows:none}
  .recto .fait svg{display:none}
  .recto .fait+.fait::before{content:" · ";white-space:pre}
  /* La mention judiciaire : un tampon rouge encadré, sur sa propre ligne */
  .recto .fait:has(path[d^="M6 21V4"]){flex-basis:100%;order:3;width:fit-content;max-width:100%;margin-top:1.4cqw;padding:.6cqw 2cqw;border:.5cqw solid var(--tampon);color:var(--tampon);
    letter-spacing:.03em;font-size:3.5cqw;line-height:1.25;transform:rotate(-1.5deg);background:rgba(179,38,30,.05)}
  .recto .fait:has(path[d^="M6 21V4"])::before{content:none}
  .recto .pied{right:5cqw;bottom:3cqw}
  /* La mention judiciaire, posée dans l'image : tampon rouge encadré, en bas de la photo, centré. Même taille que le tampon COMMUNE, jamais plus grande ; elle revient à la ligne, centrée, au besoin.
     Elle laisse de la place au sceau (à droite) et au point « Nouveau » (à gauche). Couleurs fixes : tampon noir, sur un fond blanc à 30 % posé sur la photo. */
  .recto .image .fait.fait--image{position:absolute;z-index:2;left:50%;bottom:3.5cqw;transform:translateX(-50%) rotate(-1.5deg);display:block;width:max-content;max-width:calc(100% - 36cqw);margin:0;
    padding:.6cqw 2cqw .4cqw;border:.4cqw solid #14161B;color:#14161B;background:rgba(255,255,255,.3);font:400 3.6cqw/1.25 var(--titre);letter-spacing:.03em;text-align:center;white-space:normal}
  .recto .image .fait.fait--image svg{display:none}
  .recto .image .fait.fait--image::before{content:none}
  /* Légendaire : un second tampon, « dossier classé », posé en haut à gauche de l'image (même taille de texte que les autres tampons) */
  .carte.r5 .image::before{content:"DOSSIER CLASSÉ";position:absolute;z-index:2;left:3cqw;top:3cqw;padding:.5cqw 2.2cqw .3cqw;border:.4cqw solid #B3261E;box-shadow:inset 0 0 0 .25cqw rgba(255,253,246,.92),inset 0 0 0 .5cqw #B3261E;
    color:#B3261E;background:rgba(255,253,246,.92);font:400 3.6cqw/1.25 var(--titre);letter-spacing:.14em;transform:rotate(-6deg);pointer-events:none}
}
/* Petit format (album, marché) : le nom sous l'image, à gauche, sans le trait rouge du grand format */
@container (max-width:240px){
  .nom{flex:none;display:grid;align-content:start;text-align:left;font-size:8.2cqw;border-bottom:.45cqw solid var(--ruban-rouge);padding-bottom:1cqw;margin-top:1.5cqw;-webkit-line-clamp:unset}
  .badge::before{font-size:3.2cqw}
  .badge,.carte.r4 .badge,.carte.r5 .badge{padding:.3cqw 1.4cqw}
  .image .fait--image{display:none}
  .cat{font-size:3.4cqw;padding:.5cqw 1.8cqw}
}

/* Exemplaire unique : le sceau reste doré (c'est le même objet dans tous les thèmes) ; la pastille « ×2 » et le point « Nouveau » prennent l'encre et le rouge du ruban */
.pastille.x2{background:var(--encre);color:var(--papier);border-radius:0}
.pastille:not(.x2){background:var(--ruban-rouge);color:#fff;border-radius:0}
.pastille--point{border-radius:50%;border-color:#FFFDF6}

/* Dos de la carte : une chemise de dossier fermée, tamponnée CLASSÉ */
.carte .face.dosface{--cadre:var(--manille-bord);border-radius:1cqw;
  background:linear-gradient(transparent 44%,var(--ruban-rouge) 44% 49%,transparent 49%) padding-box,repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 5px) padding-box,linear-gradient(var(--manille),var(--manille)) padding-box,var(--cadre) border-box}
.carte .face.dosface::before{content:"CLASSÉ";width:auto;aspect-ratio:auto;padding:1.2cqw 5cqw;border-radius:.4cqw;border:.9cqw double var(--tampon);box-shadow:none;
  font:400 10cqw/1.1 var(--titre);letter-spacing:.14em;color:var(--tampon);background:rgba(255,253,246,.88);transform:rotate(-8deg)}
:root[data-theme="dark"] .carte .face.dosface::before{background:rgba(22,24,29,.88)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .carte .face.dosface::before{background:rgba(22,24,29,.88)}}

/* ===== Pochettes : des enveloppes de dossier, bande de scellé rouge à déchirer ===== */
.pochette{filter:drop-shadow(0 8px 8px rgba(60,45,20,.30)) drop-shadow(0 2px 2px rgba(60,45,20,.28))}
.pochette:focus-visible{border-radius:0}
.po-haut,.po-bas,
.pochette.generale .po-bas,.pochette.categorie .po-bas,.pochette.argentee .po-bas,.pochette.doree .po-bas{
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),linear-gradient(var(--manille),var(--manille));
  background-size:auto,auto;background-position:0 0,0 0;background-repeat:repeat,no-repeat;color:var(--encre)}
.po-bas{box-shadow:inset 0 0 0 .8cqw var(--manille-bord)}
/* La bande du haut, à déchirer : le ruban rouge */
.po-haut{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),linear-gradient(var(--ruban-rouge),var(--ruban-rouge));background-size:auto,auto;background-position:0 0,0 0;color:#fff}
/* L'étiquette tapée à la machine, collée sur l'enveloppe */
.po-contenu,.pochette.generale .po-contenu,.pochette.categorie .po-contenu,.pochette.argentee .po-contenu,.pochette.doree .po-contenu{
  inset:30% 9% 14%;align-content:center;gap:2cqw;background:#FFFDF6;color:#1E2430;border:.5cqw solid #1E2430;box-shadow:inset 0 0 0 1cqw #FFFDF6,inset 0 0 0 1.4cqw #8A826A;
  font:400 8.6cqw/1.15 var(--titre);text-transform:uppercase;letter-spacing:.04em;text-shadow:none;padding:2cqw 1cqw}
.po-contenu small{font:400 6.6cqw var(--titre);opacity:1;text-transform:none}
.pochette.argentee .po-contenu span,.pochette.doree .po-contenu span{color:#1E2430}   /* l'étiquette reste un papier crème à encre sombre, même en thème sombre */
.po-ligne,.pochette.doree .po-ligne,.pochette.argentee .po-ligne{border-top:2px dashed #FFFDF6;top:15%;filter:drop-shadow(0 0 1px rgba(30,36,48,.85))}   /* ligne de déchirure : blanche, cernée d'encre pour se voir sur le rouge comme sur le papier */
.po-doigt{background:rgba(255,253,246,.7)}
.pochette.generale{--manille:#DCC995;--manille-fonce:#C9B27A;--teinte:var(--r3)}
.pochette.categorie{--manille:#D6CBB0;--manille-fonce:#C2B592;--teinte:var(--r2)}
.pochette.argentee{--manille:#C9CED6;--manille-bord:#8A93A1;--teinte:var(--r1);filter:drop-shadow(0 8px 8px rgba(40,50,70,.32)) drop-shadow(0 2px 2px rgba(40,50,70,.28))}
.pochette.doree{--manille:#E3C970;--manille-bord:#A8841F;--teinte:var(--r5);filter:drop-shadow(0 8px 8px rgba(120,80,0,.32)) drop-shadow(0 0 12px rgba(240,200,80,.4))}
.pochette.argentee .po-bas,.pochette.doree .po-bas{color:var(--encre)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pochette.generale{--manille:#7D6D45;--manille-bord:#A8935A}
  :root:not([data-theme="light"]) .pochette.categorie{--manille:#5E5740;--manille-bord:#8A8062}
  :root:not([data-theme="light"]) .pochette.argentee{--manille:#5A6270;--manille-bord:#9AA3B1}
  :root:not([data-theme="light"]) .pochette.doree{--manille:#8A6F22;--manille-bord:#C9A24A}
}
:root[data-theme="dark"] .pochette.generale{--manille:#7D6D45;--manille-bord:#A8935A}
:root[data-theme="dark"] .pochette.categorie{--manille:#5E5740;--manille-bord:#8A8062}
:root[data-theme="dark"] .pochette.argentee{--manille:#5A6270;--manille-bord:#9AA3B1}
:root[data-theme="dark"] .pochette.doree{--manille:#8A6F22;--manille-bord:#C9A24A}

/* ===== Pied de page : le dos de la chemise ===== */
.pied-site{background:var(--nav-fond);color:var(--nav-texte);border-top:0}
.pied-site::before{background:var(--ruban-rouge)}
.pied-site .marque,.pied-site .pied__marque,.pied-site .marque__theme{color:var(--nav-texte)}
.pied-site .marque::after{color:var(--nav-texte)}
.pied-site .marque__theme::after{background:#E0584D}
.pied__theme .marque__theme{color:#F28B80}
.pied__bloc--marque p,.pied__bas p{color:color-mix(in srgb,var(--nav-texte) 80%,transparent)}
.pied__titre,.pied__bloc:nth-of-type(2) .pied__titre,.pied__bloc:nth-of-type(3) .pied__titre{background:transparent;color:var(--nav-texte);font-weight:400;border-radius:0;padding:0 0 4px;border-bottom:2px solid #E0584D;letter-spacing:.08em;text-transform:uppercase}
.pied-site a[aria-current]{color:var(--nav-texte)}
.pied__bas{border-top-color:color-mix(in srgb,var(--nav-texte) 25%,transparent)}
.pied-site a:focus-visible{outline-color:#F28B80;border-radius:0}
.pied-site__coeur{fill:#E0584D;stroke:#E0584D}

/* Pages publiques (vitrine.css) : titres frappés à la machine, une seule graisse ; feuilles et encadrés comme des pages de dossier */
body .vitrine h1{font-weight:400;letter-spacing:.01em}
body .vitrine h2,body .vitrine h3,body .vitrine__categories strong,body .vitrine__faq summary,body .vitrine__num{font-weight:400}
body .vitrine__etapes li,body .vitrine__atouts li,body .vitrine__faq details,body .vitrine__final,body .vitrine__jouer,body .vitrine__categories a{border-color:var(--trait);box-shadow:var(--ombre-repos)}
body .vitrine__num{border-radius:0}
/* Un tampon au-dessus du titre de l'accueil, comme sur la chemise d'un dossier */
.vitrine__hero::before{content:"DOSSIERS";display:inline-block;margin-bottom:14px;padding:3px 16px 1px;border:3px double var(--tampon);color:var(--tampon);font:400 15px/1.3 var(--titre);letter-spacing:.3em;transform:rotate(-3deg);opacity:.9}
body .vitrine__faq summary:focus-visible{outline-color:var(--ruban-rouge)}
body .vitrine__infos div{border-bottom:1px dotted var(--trait)}
body .vitrine__infos dt{font-weight:700}

/* Connexion, inscription, mot de passe : un formulaire tapé sur une feuille de dossier, bandeau rouge en tête */
.acces{margin:32px auto 40px;max-width:460px;padding:30px 28px 32px;background-color:var(--surface);background-image:repeating-linear-gradient(transparent 0 25px,var(--bleu-ligne) 25px 26px);
  border:1px solid var(--trait);border-top:4px solid var(--ruban-rouge);box-shadow:var(--ombre-repos)}
.acces h1{font-size:26px;border-bottom:2px solid var(--encre);padding-bottom:6px}
@media (max-width:480px){.acces{margin:16px 12px 28px;padding:24px 18px 26px}}

/* Boutique : le nom d'une pochette de catégorie était teinté de la couleur de l'époque (trop pâle sur du papier) ; il passe à l'encre, souligné de la couleur */
.boutique__article--categorie .boutique__titre{color:var(--encre);display:inline-block;border-bottom:3px solid var(--cat);padding-bottom:1px}

/* ===== Barres de progression : ruban rouge sur papier ===== */
body .progres__piste{background:var(--barre-piste);border:1px solid var(--trait);box-shadow:none}
body .progres__piste>i{background:repeating-linear-gradient(115deg,var(--barre-raies) 0 8px,transparent 8px 16px),var(--barre-fond);background-size:32px 100%,100% 100%;box-shadow:none}
body .decompte time{background:var(--orange-fort);color:#fff}

/* ===== Angles droits partout : du papier, pas des bulles =====
   Seuls restent ronds les objets qui le sont par nature : pastille de profil, cloche, point « Nouveau », sceau. */
.bloc-page,.encadre,.confirmation,.popin__feuille,.hero,.tuile,.bouton-filtres,.filtres-panneau,.champ-recherche input,.champ input,.champ select,.champ--ligne select,
.carte-vide,.souhaiter,.souhaiter--large,.classement li,.souhait,.alerte__lien,.courbe-verrou,.portefeuille__valeur,.portefeuille__mouvements,.enchere-ligne__lien,
.choix-carte,.invitation,.a-ouvrir,.a-ouvrir__pochette,.action-une,.stat-enchere,.msg__carte,.coffre,.tuile-stat,.depenser__lien,.pochette-achat,.bascule,.evitement,
.decompte time,.zone [data-onglet]::before,.hero__badge,.bouton-filtres__nombre,.puce,.progres__recompense,.palier,.palier>i,.onglet__nb,.souhait__etat--vente,.badge-marche,
.a-ouvrir__action,.jetons,.jetons__delta,.boutique .prix .jetons,.action-une__nombre,.pastille-info,.pastille-nav,.pile-ouvrir__nombre,.pastille.x2,
.barre-progres,.barre-progres i,.progres__piste,.progres__piste>i,.completion__piste,.completion__piste i,.interrupteur__piste,.interrupteur__piste::after,.sceau__bord{border-radius:0}
body .coffre,body .tuile-stat,body .carte-lien,body .depenser__lien,body .completion__piste,body .completion__piste i,body .pied__titre,
body .pied__bloc:nth-of-type(2) .pied__titre,body .pied__bloc:nth-of-type(3) .pied__titre,body .pied__theme,body .pied-site a:focus-visible{border-radius:0}
body input,body select,body textarea,body .admin-menu a,body .admin-menu a[aria-current]{border-radius:0}
a.carte-lien{border-radius:3px}

/* Aperçu d'un visiteur : trois cartes sur une ligne (une par catégorie), un peu plus grandes que les mini-cartes, centrées */
body .vitrine__cartes--apercu li{flex:0 0 300px;width:300px;max-width:100%}
body .vitrine__plus{margin-top:38px;padding:26px 24px;text-align:center;background:var(--surface);border:2px solid var(--encre);box-shadow:0 3px 0 var(--ruban-rouge)}
body .vitrine__plus h3{font-family:var(--titre);font-weight:400;font-size:clamp(22px,3vw,30px);margin:0 0 8px}
body .vitrine__plus p{margin:0 auto 14px;max-width:56ch}
body .vitrine__plus .vitrine__actions{justify-content:center}

/* Liens du menu de l'en-tête (les catégories pour un visiteur, Arrivage, Album, Marché, Classement pour un joueur) : plus espacés */
@media (min-width:780px){ .entete__nav{gap:12px} }
@media (min-width:981px){ .entete__nav{gap:26px} }

/* ===== Le nom de chaque bloc : écrit au feutre rouge, en haut du bloc, un peu glissé derrière lui (plus d'onglet) ===== */
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/manuscrite.ttf") format("truetype")}   /* Caveat (OFL), déjà dans le projet pour les images de dico */
.zone [data-onglet]{margin-top:44px}
/* z-index négatif : le texte passe derrière le fond du bloc (le bloc n'a pas de contexte d'empilement propre), donc le bas des lettres disparaît sous son bord supérieur */
.zone [data-onglet]::before{left:24px;right:auto;top:-26px;bottom:auto;margin:0;z-index:-1;max-width:calc(100% - 48px);overflow:visible;text-overflow:clip;white-space:nowrap;
  padding:0;background:transparent;border:0;border-radius:0;color:var(--ruban-rouge);opacity:.8;   /* feutre rouge, à 80 % d'opacité */
  font:700 30px/1.1 "Caveat","Segoe Script","Bradley Hand",cursive;letter-spacing:.01em;text-transform:none;transform:rotate(-1.4deg);transform-origin:left bottom;text-shadow:.4px 0 0 currentColor}
@media (max-width:520px){ .zone [data-onglet]::before{font-size:26px;left:14px;top:-23px} }

/* ===== Album et portefeuille : cinq cartes par ligne, dans la largeur commune à toutes les pages (980 px) ===== */
@media (min-width:1000px){
  [data-page="album"] .zone .cartes-grille,[data-page="portefeuille"] .zone .cartes-grille{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px}   /* même écart entre colonnes que dico et métiers */
}
@media (min-width:781px) and (max-width:999px){
  [data-page="album"] .zone .cartes-grille,[data-page="portefeuille"] .zone .cartes-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
}

/* Mobile : deux cartes par ligne (les petites cartes ont leur propre composition, sans le détail du verso) */
@media (max-width:780px){
  [data-page="album"] .zone .cartes-grille,[data-page="portefeuille"] .zone .cartes-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;padding:8px 18px 12px}   /* un peu plus petites que celles de dico et métiers (157 px à 390 px d'écran) : environ 141 px */
}

/* ===== Boutique : les pochettes de catégorie sur trois colonnes (le thème n'a que trois catégories : Europe, États-Unis, Hors Europe) ===== */
.boutique--categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px}

/* Titres de blocs au feutre rouge : la règle « :root:not([data-theme="light"]) … » des intercalaires impose sinon la couleur du texte des onglets */
:root:not([data-theme="light"]) .zone [data-onglet]::before,:root[data-theme="dark"] .zone [data-onglet]::before,:root[data-theme="light"] .zone [data-onglet]::before{color:var(--ruban-rouge)}

/* ===== Petites cartes (moins de 240 px : album, portefeuille, carte du jour) : la photo sous la catégorie et le rang, le nom centré au milieu du reste ===== */
@container (max-width:240px){
  .face.recto{padding-top:15cqw}
  .recto .entete-carte{top:4cqw;left:5cqw;right:5cqw;align-items:center}
  .nom{flex:1;display:grid;align-content:center;justify-items:center;text-align:center;border-bottom:0;padding-bottom:0;margin-top:0;font-size:8.6cqw}
}

/* ===== Menu de l'en-tête centré sur ordinateur (joueur connecté ou visiteur) : deux colonnes latérales exactement égales ===== */
@media (min-width:781px){
  .entete{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .entete__nav{justify-self:center;margin-left:0}
  .entete__droite{justify-self:end}
}

/* Joueur connecté : le menu est centré entre le logo (à gauche) et la cloche (à droite), dans la place qui reste, pas au milieu de la page. Le visiteur garde le menu au milieu de la page. */
@media (min-width:781px){
  .entete:not(:has(.entete__droite .btn)){grid-template-columns:auto 1fr auto}
  .entete:not(:has(.entete__droite .btn)) .entete__nav{justify-self:center;margin-left:0}
  .entete:not(:has(.entete__droite .btn)) .entete__droite{justify-self:end}
}


/* Toutes les pages (accueil, album, marché, classement, profil...) : plus de fond ni de bordure autour des blocs ; une dent de scie rouge en bas de chaque bloc les sépare */
body .zone [data-onglet]{background:transparent;border:0;box-shadow:none;position:relative;padding-bottom:40px}
body .zone [data-onglet]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 10 L4 2 L8 10 L12 2 L16 10' fill='none' stroke='%23B3261E' stroke-width='2' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E") repeat-x left center/16px 12px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body .zone [data-onglet]::after,:root[data-theme="dark"] body .zone [data-onglet]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 10 L4 2 L8 10 L12 2 L16 10' fill='none' stroke='%23E0584D' stroke-width='2' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E")}
}

/* Toutes les pages : le nom de chaque bloc est entouré au feutre rouge, comme le lien actif du menu ; plus d'espace sous les blocs */
body .zone [data-onglet]{padding-bottom:58px;margin-top:64px}
body .zone [data-onglet]::before{top:-40px;left:18px;padding:7px 26px 5px;opacity:1;text-shadow:none;transform:rotate(-1deg);transform-origin:left center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 48' preserveAspectRatio='none' fill='none' stroke='%23B3261E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2.6' d='M16 12C32 4 96 2 138 8c18 3 24 14 17 24-7 11-52 14-96 12C28 43 6 38 5 26 4 15 18 9 40 6'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.6' opacity='.55' d='M24 9C58 4 112 4 140 12c13 5 12 17 0 23-14 6-58 9-100 5'/%3E%3C/svg%3E") no-repeat center/100% 100%}
@media (max-width:520px){ body .zone [data-onglet]::before{top:-36px;left:8px;padding:6px 20px 4px} }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body .zone [data-onglet]::before,:root[data-theme="dark"] body .zone [data-onglet]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 48' preserveAspectRatio='none' fill='none' stroke='%23E0584D' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2.6' d='M16 12C32 4 96 2 138 8c18 3 24 14 17 24-7 11-52 14-96 12C28 43 6 38 5 26 4 15 18 9 40 6'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.6' opacity='.55' d='M24 9C58 4 112 4 140 12c13 5 12 17 0 23-14 6-58 9-100 5'/%3E%3C/svg%3E")}
}

body .zone .alertes[data-onglet],body .zone .classement[data-onglet]{background-color:transparent}

/* Titres centrés : « Aujourd'hui » sur l'accueil, tous les titres de bloc sur l'album ; le texte « Pochettes de catégorie » de la boutique */
body[data-page="arrivage"] .zone .hero--jour[data-onglet]::before,body[data-page="album"] .zone [data-onglet]::before{left:50%;transform:translateX(-50%) rotate(-1deg);transform-origin:center}
@media (max-width:520px){ body[data-page="arrivage"] .zone .hero--jour[data-onglet]::before,body[data-page="album"] .zone [data-onglet]::before{left:50%} }
.boutique-section .page__tete--court{text-align:center}

/* La dent de scie rouge est posée de travers, d'un côté puis de l'autre, comme tracée à la main */
body .zone [data-onglet]::after{transform:rotate(-1deg);transform-origin:center}
body .zone [data-onglet]:nth-child(even)::after{transform:rotate(.9deg)}
body .zone [data-onglet]:nth-child(3n)::after{transform:rotate(-1.6deg)}

/* ===== Plus de grand titre de page (il reste lu par les lecteurs d'écran) ; un peu d'air entre l'en-tête et le contenu ===== */
.zone .page>.page__tete h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zone .page>.page__tete:has(>h1:only-child){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0}
.zone .page{padding-top:34px}

/* ===== Marché (proposition) : les onglets sont écrits au feutre ; l'onglet ouvert est entouré comme le menu ; le panneau n'a plus de fond ni de bordure et se ferme par la dent de scie ===== */
.zone .onglets{justify-content:center;flex-wrap:wrap;gap:6px 14px;border-bottom:0;margin-top:6px}
.zone .onglet{background:transparent;border:0;border-radius:0;box-shadow:none;position:relative;color:var(--ruban-rouge);opacity:.72;
  font:700 26px/1.1 "Caveat","Segoe Script","Bradley Hand",cursive;letter-spacing:.01em;padding:8px 22px 6px;margin:0}
.zone .onglet:hover,.zone .onglet:focus-visible{opacity:1}
.zone .onglet[aria-selected="true"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 48' preserveAspectRatio='none' fill='none' stroke='%23B3261E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2.6' d='M16 12C32 4 96 2 138 8c18 3 24 14 17 24-7 11-52 14-96 12C28 43 6 38 5 26 4 15 18 9 40 6'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.6' opacity='.55' d='M24 9C58 4 112 4 140 12c13 5 12 17 0 23-14 6-58 9-100 5'/%3E%3C/svg%3E") no-repeat center/100% 100%;color:var(--ruban-rouge);opacity:1;border:0}
.zone .onglet[aria-selected="true"]::after{display:none}
.zone .onglet__nb{font:400 12px var(--titre)}
.zone [role="tabpanel"]{background:transparent;border:0;box-shadow:none;position:relative;padding:22px 4px 58px;margin-top:6px}
.zone [role="tabpanel"]:not([hidden])::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;pointer-events:none;transform:rotate(-1deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 10 L4 2 L8 10 L12 2 L16 10' fill='none' stroke='%23B3261E' stroke-width='2' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E") repeat-x left center/16px 12px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .zone .onglet[aria-selected="true"],:root[data-theme="dark"] .zone .onglet[aria-selected="true"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 48' preserveAspectRatio='none' fill='none' stroke='%23E0584D' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2.6' d='M16 12C32 4 96 2 138 8c18 3 24 14 17 24-7 11-52 14-96 12C28 43 6 38 5 26 4 15 18 9 40 6'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.6' opacity='.55' d='M24 9C58 4 112 4 140 12c13 5 12 17 0 23-14 6-58 9-100 5'/%3E%3C/svg%3E")}
  :root:not([data-theme="light"]) .zone [role="tabpanel"]:not([hidden])::after,:root[data-theme="dark"] .zone [role="tabpanel"]:not([hidden])::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 10 L4 2 L8 10 L12 2 L16 10' fill='none' stroke='%23E0584D' stroke-width='2' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E")}
}
@media (max-width:520px){ .zone .onglet{font-size:21px;padding:6px 6px 4px} .zone .onglets{gap:4px 6px} }

/* ===== Marché : chaque bloc (souhait, enchère, offre, vente) est une feuille posée de travers, tenue par un bout de scotch ===== */
.souhait,.enchere-ligne__lien{position:relative;margin-top:10px}
.souhait::before,.enchere-ligne__lien::before{content:"";position:absolute;top:-13px;left:50%;width:84px;height:26px;margin-left:-42px;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%),rgba(226,206,150,.72);
  box-shadow:0 1px 2px rgba(60,45,20,.22);transform:rotate(-3deg);
  clip-path:polygon(0 8%,3% 0,6% 10%,9% 0,12% 8%,100% 0,97% 12%,100% 25%,97% 38%,100% 50%,97% 62%,100% 75%,97% 88%,100% 100%,12% 92%,9% 100%,6% 90%,3% 100%,0 92%,3% 75%,0 62%,3% 50%,0 38%,3% 25%)}
.souhait:nth-child(4n+1),.enchere-ligne:nth-child(4n+1) .enchere-ligne__lien{transform:rotate(-1.3deg)}
.souhait:nth-child(4n+2),.enchere-ligne:nth-child(4n+2) .enchere-ligne__lien{transform:rotate(.9deg)}
.souhait:nth-child(4n+3),.enchere-ligne:nth-child(4n+3) .enchere-ligne__lien{transform:rotate(-.6deg)}
.souhait:nth-child(4n+4),.enchere-ligne:nth-child(4n+4) .enchere-ligne__lien{transform:rotate(1.4deg)}
.souhait:nth-child(3n+2)::before,.enchere-ligne:nth-child(3n+2) .enchere-ligne__lien::before{margin-left:-62px;transform:rotate(4deg)}
.souhait:nth-child(3n+3)::before,.enchere-ligne:nth-child(3n+3) .enchere-ligne__lien::before{margin-left:-20px;transform:rotate(-6deg)}
.souhait:nth-child(5n+4)::before,.enchere-ligne:nth-child(5n+4) .enchere-ligne__lien::before{width:70px;margin-left:-30px;transform:rotate(7deg)}
.souhaits,.encheres{gap:30px 22px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .souhait::before,:root:not([data-theme="light"]) .enchere-ligne__lien::before,:root[data-theme="dark"] .souhait::before,:root[data-theme="dark"] .enchere-ligne__lien::before{background:linear-gradient(100deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%),rgba(196,172,112,.6)}
}