/* Surcouche du thème « transports » (theme.php, clé surcouche) : peau « Wagon-lit ».
   Vert de wagon, papier gris-vert, laiton, titres Josefin Sans (Art déco) et texte Lora. L'illustration de la carte est une arche ; la silhouette de la catégorie s'y pose.
   Le thème ne redéfinit que les variables du socle (assets/css/themes/neutre.css), les cadres des cinq rangs et l'illustration : rien ne s'applique aux autres thèmes.
   Les boutons principaux sont en bronze foncé à texte blanc ; le laiton clair sert aux filets et aux décors. */

@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url("/assets/fonts/josefin-sans-latin.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/lora-latin.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-weight:400 700;font-display:swap;src:url("/assets/fonts/lora-italic-latin.woff2") format("woff2")}

:root{
  --marque:#123D35; --marine:#123D35; --papier:#DCE5E0; --surface:#F6F9F6; --encre:#14231F; --brume:#B6C6BD;
  --orange:#B8872E; --orange-fort:#946A1A; --orange-texte:#7A5A14; --violet:#2C5E9E;
  --sur-laiton:#14231F;
  --r1:#7F8F89; --r2:#2F7A5B; --r3:#2C5E9E; --r4:#7B2D5B; --r5:#B8872E;
  --doux:rgba(20,35,31,.72);
  --titre:"Josefin Sans","Century Gothic",sans-serif; --texte:"Lora",Georgia,serif;
  --ombre-repos:0 1px 2px rgba(18,61,53,.16),0 8px 16px -8px rgba(18,61,53,.3);
  --ombre-leve:0 2px 4px rgba(18,61,53,.18),0 22px 30px -14px rgba(18,61,53,.42);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --marque:#86CDB6; --marine:#0A1512; --papier:#0E1C19; --surface:#17312B; --encre:#E4EEE8; --brume:#2D4C44;
    --orange:#D9A84A; --orange-fort:#946A1A; --orange-texte:#D9A84A; --violet:#7FA9E0; --sur-laiton:#14231F;
    --r1:#8FA098; --r2:#4CAF86; --r3:#5B93D6; --r4:#C26AA0; --r5:#D9A84A;
    --doux:rgba(228,238,232,.74);
    --ombre-repos:0 1px 2px rgba(0,0,0,.45),0 8px 16px -8px rgba(0,0,0,.6);
    --ombre-leve:0 2px 4px rgba(0,0,0,.5),0 22px 30px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --marque:#86CDB6; --marine:#0A1512; --papier:#0E1C19; --surface:#17312B; --encre:#E4EEE8; --brume:#2D4C44;
  --orange:#D9A84A; --orange-fort:#946A1A; --orange-texte:#D9A84A; --violet:#7FA9E0; --sur-laiton:#14231F;
  --r1:#8FA098; --r2:#4CAF86; --r3:#5B93D6; --r4:#C26AA0; --r5:#D9A84A;
  --doux:rgba(228,238,232,.74);
  --ombre-repos:0 1px 2px rgba(0,0,0,.45),0 8px 16px -8px rgba(0,0,0,.6);
  --ombre-leve:0 2px 4px rgba(0,0,0,.5),0 22px 30px -14px rgba(0,0,0,.8);
}

body{font-family:var(--texte);letter-spacing:.005em}
h1,h2,h3{font-family:var(--titre);font-weight:700;letter-spacing:.02em}
:is(.entete,.bloc-page,.hero,.page__tete){--ruban:var(--orange)}
.msg__carte::before,.hub__marque::after{background:var(--orange)}

/* Boutons et pastilles : fond « orange fort » = bronze foncé (texte blanc, contraste 4,8 pour 1) ; le laiton clair reste pour les filets et les décors */

/* ===== Cartes : les cinq cadres sont faits des couleurs de rang de la peau (métal éclairci, couleur, métal assombri) ===== */
.carte.r1{--cadre:linear-gradient(135deg,color-mix(in srgb,var(--r1) 40%,#fff),var(--r1) 38%,color-mix(in srgb,var(--r1) 55%,#fff) 58%,color-mix(in srgb,var(--r1) 72%,#000))}
.carte.r2{--cadre:linear-gradient(135deg,color-mix(in srgb,var(--r2) 45%,#fff),var(--r2) 38%,color-mix(in srgb,var(--r2) 55%,#fff) 58%,color-mix(in srgb,var(--r2) 72%,#000))}
.carte.r3{--cadre:linear-gradient(135deg,color-mix(in srgb,var(--r3) 45%,#fff),var(--r3) 38%,color-mix(in srgb,var(--r3) 55%,#fff) 58%,color-mix(in srgb,var(--r3) 72%,#000))}
.carte.r4{--cadre:linear-gradient(135deg,color-mix(in srgb,var(--r4) 45%,#fff),var(--r4) 38%,color-mix(in srgb,var(--r4) 55%,#fff) 58%,color-mix(in srgb,var(--r4) 72%,#000))}
.carte.r5{--cadre:linear-gradient(135deg,color-mix(in srgb,var(--r5) 50%,#fff),var(--r5) 35%,color-mix(in srgb,var(--r5) 55%,#fff) 55%,color-mix(in srgb,var(--r5) 72%,#000));--teinte:var(--r5)}
.carte.r5 .face{box-shadow:0 0 5cqw color-mix(in srgb,var(--r5) 32%,transparent),var(--ombre-repos)}
.cat{font-family:var(--titre);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:3.5cqw}
.nom{font-family:var(--titre);text-transform:none;letter-spacing:.01em}
.phrase{font-family:var(--texte)}
.fait{font-family:var(--titre);font-weight:600}

/* ===== Illustration : une arche sur fond papier, un filet de laiton au pied, la silhouette de la catégorie dedans ===== */
.image{background:var(--surface);border-radius:2cqw}
.image__categorie{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(var(--orange),var(--orange)) 50% 100%/80% 3cqw no-repeat}
.image__categorie::before{content:"";position:absolute;left:10%;right:10%;top:8%;bottom:3cqw;background:var(--brume);border-radius:50cqw 50cqw 0 0}
.image__categorie::after{content:"";position:absolute;inset:18% 15% 12%;background:var(--marque);
  -webkit-mask:center bottom/contain no-repeat;mask:center bottom/contain no-repeat}
.image__categorie[data-categorie="voitures"]::after{-webkit-mask-image:url(silhouettes/voitures.svg);mask-image:url(silhouettes/voitures.svg)}
.image__categorie[data-categorie="deux-roues"]::after{-webkit-mask-image:url(silhouettes/deux-roues.svg);mask-image:url(silhouettes/deux-roues.svg)}
.image__categorie[data-categorie="trains"]::after{-webkit-mask-image:url(silhouettes/trains.svg);mask-image:url(silhouettes/trains.svg)}
.image__categorie[data-categorie="avions"]::after{-webkit-mask-image:url(silhouettes/avions.svg);mask-image:url(silhouettes/avions.svg)}
.image__categorie[data-categorie="bateaux"]::after{-webkit-mask-image:url(silhouettes/bateaux.svg);mask-image:url(silhouettes/bateaux.svg)}

/* Bandeau « jeu indépendant » : lettres Art déco, filet de laiton dessous */
.avertissement{font-family:var(--titre);font-weight:500;letter-spacing:.03em;border-bottom:2px solid var(--orange)}


/* ===== Univers « voyage en train » : billets, rails, gare. Polices inchangées ===== */
/* Carte = billet de voyage : coins peu arrondis, nom en capitales espacées, ligne de perforation pointillée avec ses deux encoches avant les chiffres */
.face{border-radius:1.8cqw}
.nom{text-transform:uppercase;letter-spacing:.07em;font-size:5.9cqw}
.carte .faits{position:relative;border-top:.55cqw dashed var(--orange);margin-top:1cqw}
.carte .faits::before,.carte .faits::after{content:"";position:absolute;top:-2.3cqw;width:4.4cqw;height:4.4cqw;border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 .5cqw var(--brume)}
.carte .faits::before{left:-6.8cqw}
.carte .faits::after{right:-6.8cqw}
.carte .image{border-radius:.8cqw;outline:.7cqw solid var(--surface);outline-offset:-.7cqw}
.cat{border-radius:.6cqw}
.pied{letter-spacing:.12em}
/* Page : filet double de laiton sous l'en-tête, titres soulignés d'une voie ferrée, boutons et onglets carrés */
.entete{border-bottom:4px double var(--orange)}
\.page__tete h1::after{width:104px;height:9px;border-radius:0;opacity:.95;background:linear-gradient(var(--orange),var(--orange)) 0 1px/100% 2px no-repeat,linear-gradient(var(--orange),var(--orange)) 0 6px/100% 2px no-repeat,repeating-linear-gradient(90deg,var(--orange) 0 2px,transparent 2px 9px) 0 0/100% 100%}
.section-album__tete{border-bottom:2px dashed color-mix(in srgb,var(--cat,var(--brume)) 70%,transparent)}
.section-album__tete h2{text-transform:uppercase;letter-spacing:.08em;font-size:19px}
.section-album__tete h2::before{border-radius:0;transform:none;width:20px;height:10px;margin-right:12px;background:var(--cat,var(--orange))}
.btn,.entete__nav a,.onglet{border-radius:2px}
.btn{text-transform:uppercase;letter-spacing:.07em;font-size:13px}
input,select,textarea{border-radius:2px}
.entete__nav a[aria-current]{background:none;box-shadow:inset 0 -3px 0 var(--orange)}

/* ===== Lisibilité : texte blanc sur fond assez sombre ===== */
/* Étiquette de catégorie et pastille « Nouveau » : la couleur de la catégorie, assombrie, avec du texte blanc */
.cat,.pastille:not(.x2){background:color-mix(in srgb,var(--cat,var(--marque)) 50%,#0E1F1B);color:#fff;text-shadow:none}
/* Rond du rang : la couleur du rang, assombrie, avec le chiffre en blanc (le rang 5 garde sa bague claire autour) */
.carte .badge{background:color-mix(in srgb,var(--teinte) 62%,#0E1F1B);color:#fff}
.carte.r5 .badge{box-shadow:0 0 0 .8cqw var(--surface),0 0 0 1.5cqw var(--r5)}

/* ===== Calques sur les photos (posés en CSS sur la photo commune : aucun fichier de plus) ===== */
/* Teinte douce : couleurs atténuées et voile de la couleur de la catégorie ; hachures fines en diagonale par-dessus, comme une gravure */
.image:has(.image__photo) .image__photo{filter:saturate(.6) contrast(.97)}
.image:has(.image__photo)::before{content:"";position:absolute;inset:0;z-index:1;background:var(--cat,var(--orange));mix-blend-mode:multiply;opacity:.3;pointer-events:none}
.image:has(.image__photo)::after{background-image:repeating-linear-gradient(135deg,transparent 0 1.1cqw,rgba(14,31,27,.26) 1.1cqw 1.45cqw)}

/* ===== Même carte en petit qu'en grand : le format mini du socle (nom seul, sous 240 px) est désactivé ; tout est en cqw, la carte garde donc ses proportions ===== */
.carte .phrase{display:-webkit-box}
.carte .faits{display:grid}
.carte .pied{display:block}
.carte .nom{flex:none;display:-webkit-box;align-content:normal;margin-top:.5cqw;-webkit-line-clamp:2;line-clamp:2}
.carte .cat{padding:1.1cqw 3cqw}
.carte .badge{width:11.5cqw;font-size:6.4cqw}
/* Les trois faits du bas : centrés verticalement dans la place qui reste sous la phrase (au-dessus du numéro) */
.carte .faits{flex:1;align-content:center;align-items:center;margin-bottom:5cqw;padding-bottom:0}
.carte .faits::before,.carte .faits::after{top:-2.3cqw}

/* ===== Devant de la carte : pas de description (elle se lit au verso) ; les trois faits restent centrés dans la place libre ===== */
.carte .phrase{display:none}

/* ===== Le crédit de la photo est centré ===== */
.credit-image{text-align:center}

/* ===== Le rang : un scotch collé sur le haut de la carte ; il passe par-dessus le bord et se devine derrière, sur 3 pixels ===== */
.carte .face{overflow:visible}
.carte .recto .badge{position:absolute;top:-10.9cqw;right:-1.5cqw;width:13cqw;height:22.4cqw;margin:0;aspect-ratio:auto;border-radius:0;display:grid;align-content:end;justify-items:center;padding-bottom:6.4cqw;
  font:700 7.6cqw/1 var(--titre);color:#fff;text-shadow:0 .3cqw .6cqw rgba(0,0,0,.35);box-shadow:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.3) 0 2.2cqw,transparent 2.2cqw),linear-gradient(90deg,rgba(255,255,255,.16),transparent 24%,transparent 76%,rgba(0,0,0,.14)),color-mix(in srgb,var(--teinte) 62%,#0E1F1B);
  clip-path:polygon(0 0,100% 0,100% 100%,87.5% 96%,75% 100%,62.5% 96%,50% 100%,37.5% 96%,25% 100%,12.5% 96%,0 100%);opacity:.97}   /* bout de scotch déchiré */
.carte.r5 .recto .badge{background:linear-gradient(to bottom,rgba(255,255,255,.4) 0 2.2cqw,transparent 2.2cqw),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 46%,transparent 62%),color-mix(in srgb,var(--r5) 70%,#0E1F1B);box-shadow:none}
.carte .verso .badge{display:none}
.carte .verso::before{content:"";position:absolute;top:-3.4cqw;left:6cqw;width:13cqw;height:1.2cqw;background:color-mix(in srgb,var(--teinte) 62%,#0E1F1B);pointer-events:none}

/* ===== Recto : plus d'air autour du titre (le trait pointillé descend avec) ; les trois faits restent centrés dans la place qui reste ===== */
.carte .nom{margin:3.2cqw 0 3.8cqw}
.carte .faits{margin-top:0}

/* ===== Verso : le lien vers l'article est un large bout de scotch collé de travers, aux deux bouts déchirés ===== */
.carte a.lien-verso{display:block;width:fit-content;margin:2.4cqw auto;padding:3.1cqw 10cqw;color:#fff;font:700 4.4cqw var(--titre);letter-spacing:.1em;text-transform:uppercase;text-align:center;text-decoration:none;transform:rotate(-2.2deg);opacity:.97;
  background:linear-gradient(to bottom,rgba(255,255,255,.3) 0 16%,transparent 16%),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1.2cqw,transparent 1.2cqw 2.4cqw),var(--orange-fort);
  filter:drop-shadow(0 .5cqw .6cqw rgba(0,0,0,.25));
  clip-path:polygon(0 0,100% 0,97.2% 12%,100% 25%,97.2% 37%,100% 50%,97.2% 62%,100% 75%,97.2% 87%,100% 100%,0 100%,2.8% 87%,0 75%,2.8% 62%,0 50%,2.8% 37%,0 25%,2.8% 12%)}
.carte a.lien-verso:hover{text-decoration:none;transform:rotate(-2.2deg) translateY(.3cqw)}

/* ===== Le scotch du verso dépasse du bord de la carte, et on en voit un bout sur le recto ===== */
.carte .verso .texte-verso{min-height:44cqw}   /* le scotch est toujours à la même hauteur, quelle que soit la longueur du texte */
.carte a.lien-verso{margin:2.4cqw -8.4cqw 2.4cqw auto;padding:3.1cqw 18.4cqw 3.1cqw 11cqw;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,2.8% 87%,0 75%,2.8% 62%,0 50%,2.8% 37%,0 25%,2.8% 12%)}
/* Le bout du scotch vu du recto : le verso est le dos de la carte, son bord droit est le bord gauche du recto */
.carte .recto::before{content:"";position:absolute;left:-2.6cqw;top:73cqw;width:1.2cqw;height:11.5cqw;background:var(--orange-fort);pointer-events:none}

/* ===== Une tache de café par carte, sous les trois faits du recto. Cinq formes (SVG), une par tranche du nombre au hasard de la carte ; sa place et son opacité varient aussi d'une carte à l'autre (--hasard et --hasard2, posés par le moteur) ===== */
.carte{isolation:isolate}
.carte .face{isolation:isolate}
.carte .deco{--h:var(--hasard,50);
  --f1:calc(max(0,min(1,(var(--h) - 0 + 1) * 1000)) * max(0,min(1,(19 - var(--h) + 1) * 1000)));
  --f2:calc(max(0,min(1,(var(--h) - 20 + 1) * 1000)) * max(0,min(1,(39 - var(--h) + 1) * 1000)));
  --f3:calc(max(0,min(1,(var(--h) - 40 + 1) * 1000)) * max(0,min(1,(59 - var(--h) + 1) * 1000)));
  --f4:calc(max(0,min(1,(var(--h) - 60 + 1) * 1000)) * max(0,min(1,(79 - var(--h) + 1) * 1000)));
  --f5:calc(max(0,min(1,(var(--h) - 80 + 1) * 1000)) * max(0,min(1,(99 - var(--h) + 1) * 1000)));
  position:absolute;z-index:-1;pointer-events:none;left:3cqw;top:84cqw;width:94cqw;height:46cqw;
  background:url(taches/tache-1.svg) calc(var(--hasard2,50) * 1%) calc(var(--hasard,50) * 1%)/calc((48cqw + var(--hasard,50) * .32cqw) * var(--f1)) auto no-repeat,
    url(taches/tache-2.svg) calc(var(--hasard2,50) * 1%) calc(var(--hasard,50) * 1%)/calc((48cqw + var(--hasard,50) * .32cqw) * var(--f2)) auto no-repeat,
    url(taches/tache-3.svg) calc(var(--hasard2,50) * 1%) calc(var(--hasard,50) * 1%)/calc((48cqw + var(--hasard,50) * .32cqw) * var(--f3)) auto no-repeat,
    url(taches/tache-4.svg) calc(var(--hasard2,50) * 1%) calc(var(--hasard,50) * 1%)/calc((48cqw + var(--hasard,50) * .32cqw) * var(--f4)) auto no-repeat,
    url(taches/tache-5.svg) calc(var(--hasard2,50) * 1%) calc(var(--hasard,50) * 1%)/calc((48cqw + var(--hasard,50) * .32cqw) * var(--f5)) auto no-repeat;
  opacity:calc(.1 + var(--hasard2,50) * .003)}   /* entre 10 % et 40 % */

/* ===== Verso : le tableau est toujours au bas de la carte, le scotch « En savoir plus » est centré entre le texte et lui ===== */
.carte .verso .texte-verso{flex:none;min-height:44cqw}
.carte .verso .verso__centre{flex:none;min-height:33cqw;justify-content:flex-end}
.carte .verso .source{margin-top:0}
.carte a.lien-verso{margin-top:auto;margin-bottom:auto}

/* ===== Verso : l'icône de la catégorie en tampon, centré sur la carte, à 10 % d'opacité, remonté, sous le texte et sous le scotch ===== */
.carte .verso .deco{display:block;left:50%;top:33%;width:62cqw;height:44cqw;z-index:-1;transform:translate(-50%,-50%);opacity:.06;background:var(--marque);
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.carte .verso .deco[data-categorie="voitures"]{-webkit-mask-image:url(silhouettes/voitures.svg);mask-image:url(silhouettes/voitures.svg)}
.carte .verso .deco[data-categorie="deux-roues"]{-webkit-mask-image:url(silhouettes/deux-roues.svg);mask-image:url(silhouettes/deux-roues.svg)}
.carte .verso .deco[data-categorie="trains"]{-webkit-mask-image:url(silhouettes/trains.svg);mask-image:url(silhouettes/trains.svg)}
.carte .verso .deco[data-categorie="avions"]{-webkit-mask-image:url(silhouettes/avions.svg);mask-image:url(silhouettes/avions.svg)}
.carte .verso .deco[data-categorie="bateaux"]{-webkit-mask-image:url(silhouettes/bateaux.svg);mask-image:url(silhouettes/bateaux.svg)}