/* Surcouche du thème « animaux » (theme.php, clé surcouche) : peau « Bestiaire pop ».
   Aplats vifs sur fond lavande, marine profond, corail, titres Fredoka (lettres rondes) et texte Nunito. L'illustration de la carte est un motif de pois ; 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 corail foncé à texte blanc ; le corail vif sert aux filets et aux décors. */

@font-face{font-family:"Fredoka";font-style:normal;font-weight:300 700;font-display:swap;src:url("/assets/fonts/fredoka-latin.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url("/assets/fonts/nunito-latin.woff2") format("woff2")}

:root{
  --marque:#23245A; --marine:#23245A; --papier:#E6E9FF; --surface:#FFFFFF; --encre:#1B1C3F; --brume:#C8CCF2;
  --orange:#FF6B6B; --orange-fort:#D63D3D; --orange-texte:#C23B3B; --violet:#A24BE0;
  --sur-corail:#1B1C3F;
  --r1:#8D93B8; --r2:#1FB58F; --r3:#3B82F6; --r4:#A24BE0; --r5:#FFB000;
  --doux:rgba(27,28,63,.74);
  --titre:"Fredoka","Trebuchet MS",sans-serif; --texte:"Nunito",system-ui,sans-serif;
  --ombre-repos:0 1px 2px rgba(35,36,90,.16),0 8px 16px -8px rgba(35,36,90,.3);
  --ombre-leve:0 2px 4px rgba(35,36,90,.18),0 22px 30px -14px rgba(35,36,90,.42);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --marque:#B4BAFF; --marine:#14153A; --papier:#14153A; --surface:#22246B; --encre:#EEF0FF; --brume:#3A3D94;
    --orange:#FF8585; --orange-fort:#D63D3D; --orange-texte:#FF8585; --violet:#C58BFF; --sur-corail:#1B1C3F;
    --r1:#9AA0C8; --r2:#2CD3A6; --r3:#6BA2FF; --r4:#C58BFF; --r5:#FFC233;
    --doux:rgba(238,240,255,.76);
    --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:#B4BAFF; --marine:#14153A; --papier:#14153A; --surface:#22246B; --encre:#EEF0FF; --brume:#3A3D94;
  --orange:#FF8585; --orange-fort:#D63D3D; --orange-texte:#FF8585; --violet:#C58BFF; --sur-corail:#1B1C3F;
  --r1:#9AA0C8; --r2:#2CD3A6; --r3:#6BA2FF; --r4:#C58BFF; --r5:#FFC233;
  --doux:rgba(238,240,255,.76);
  --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)}
h1,h2,h3{font-family:var(--titre);font-weight:600}
: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 » = corail foncé (texte blanc, contraste 5 pour 1) ; le corail vif reste pour les filets et les décors */

/* ===== Cartes : les cinq cadres sont faits des couleurs de rang de la peau (teinte éclairée, couleur, teinte assombrie) ===== */
.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) 34%,transparent),var(--ombre-repos)}
.cat{font-family:var(--titre);font-weight:500}
.nom{font-family:var(--titre);font-weight:600;text-transform:none}
.phrase{font-family:var(--texte);font-style:normal;font-weight:600}
.fait{font-family:var(--titre);font-weight:500}

/* ===== Illustration : des pois sur fond lavande, coins très arrondis, la silhouette de la catégorie dedans ===== */
.image{background:var(--brume);border-radius:6cqw}
.image__categorie{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(var(--surface) 1.3cqw,transparent 1.4cqw) 0 0/7cqw 7cqw}
.image__categorie::after{content:"";position:absolute;inset:14% 12% 10%;background:var(--marque);
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.image__categorie[data-categorie="mammiferes"]::after{-webkit-mask-image:url(silhouettes/mammiferes.svg);mask-image:url(silhouettes/mammiferes.svg)}
.image__categorie[data-categorie="oiseaux"]::after{-webkit-mask-image:url(silhouettes/oiseaux.svg);mask-image:url(silhouettes/oiseaux.svg)}
.image__categorie[data-categorie="poissons"]::after{-webkit-mask-image:url(silhouettes/poissons.svg);mask-image:url(silhouettes/poissons.svg)}
.image__categorie[data-categorie="reptiles"]::after{-webkit-mask-image:url(silhouettes/reptiles.svg);mask-image:url(silhouettes/reptiles.svg)}
.image__categorie[data-categorie="invertebres"]::after{-webkit-mask-image:url(silhouettes/invertebres.svg);mask-image:url(silhouettes/invertebres.svg)}

/* Bandeau « jeu indépendant » : lettres rondes, trait de corail dessous */
.avertissement{font-family:var(--texte);font-weight:600;border-bottom:2px solid var(--orange)}


/* ===== Univers « album d'autocollants » : bulles, pastilles, ombres franches. Polices inchangées ===== */
/* Carte = autocollant : très arrondi, contour blanc, ombre décalée sans flou ; pastille de catégorie penchée ; phrase en bulle ; faits en trois pastilles */
.face{border-radius:7cqw}
.carte{filter:drop-shadow(0 1.1cqw 0 color-mix(in srgb,var(--marine) 22%,transparent))}
.carte .face{outline:1cqw solid #fff;outline-offset:-.1cqw}
.carte .image{height:61cqw;border-radius:5cqw;outline:.8cqw solid var(--marine);outline-offset:-.8cqw}
.cat{transform:rotate(-4deg);padding:1.2cqw 3.4cqw;font-weight:600;box-shadow:0 .5cqw 0 rgba(35,36,90,.25)}
.nom{font-size:8cqw;color:var(--marine)}
.phrase{position:relative;margin:0 1cqw;padding:1.3cqw 2.6cqw;border-radius:3.4cqw;background:color-mix(in srgb,var(--brume) 35%,var(--surface));color:var(--encre);font-size:4cqw;line-height:1.25;-webkit-line-clamp:2;line-clamp:2}
.phrase::before{content:"";position:absolute;top:-1.6cqw;left:50%;margin-left:-1.6cqw;border:1.6cqw solid transparent;border-top:0;border-bottom-color:color-mix(in srgb,var(--brume) 35%,var(--surface))}
.carte .faits{border-top:0;padding-top:0;gap:1.4cqw}
.carte .fait{background:color-mix(in srgb,var(--cat,var(--brume)) 28%,var(--surface));border-radius:3cqw;padding:1.1cqw .6cqw;font-size:3.5cqw}
.carte .fait svg{width:5cqw;height:5cqw}
.pied{right:auto;left:50%;transform:translateX(-50%);bottom:2cqw}
/* Page : fond de pois très pâles, navigation en pastilles, titres soulignés d'un trait de pois, boutons gonflés à ombre franche */
body{background-image:radial-gradient(color-mix(in srgb,var(--brume) 70%,transparent) 1.6px,transparent 2.2px);background-size:24px 24px}
.entete{border-bottom:5px solid var(--orange);border-radius:0 0 18px 18px}
.entete__nav a,.onglet{border-radius:999px}
.entete__nav a[aria-current]{background:var(--orange-fort);color:#fff}
.page__tete h1::after{width:88px;height:9px;border-radius:999px;background:radial-gradient(circle,var(--orange) 0 3px,transparent 3.5px) 0 0/14px 9px repeat-x}
.section-album__tete{border-bottom:0;padding-bottom:0}
.section-album__tete h2{display:inline-block;padding:4px 16px;border-radius:999px;background:color-mix(in srgb,var(--cat,var(--brume)) 40%,var(--surface));color:var(--encre);box-shadow:0 3px 0 color-mix(in srgb,var(--cat,var(--marine)) 70%,var(--marine))}
.section-album__tete h2::before{display:none}
.btn{border-radius:999px;box-shadow:0 3px 0 var(--marine);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--marine)}
input,select,textarea{border-radius:14px}

/* ===== 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)) 52%,#14153A);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) 60%,#14153A);color:#fff}
.carte.r5 .badge{box-shadow:0 0 0 .8cqw var(--surface),0 0 0 1.5cqw var(--r5)}

/* ===== Pois sur les photos (posés en CSS sur la photo commune : couleurs d'origine, aucun fichier de plus) ===== */
/* Deux trames : de gros pois espacés sur toute l'image, et de petits pois serrés qui n'apparaissent que sur les bords (ils s'écartent vers le milieu) */
.image:has(.image__photo)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background:radial-gradient(circle,var(--marine) 0 .8cqw,transparent .95cqw) 0 0/4.2cqw 4.2cqw;
  -webkit-mask-image:radial-gradient(ellipse 80% 76% at 50% 48%,transparent 38%,#000 100%);mask-image:radial-gradient(ellipse 80% 76% at 50% 48%,transparent 38%,#000 100%)}
.image:has(.image__photo)::after{background-image:radial-gradient(circle,var(--marine) 0 1.15cqw,transparent 1.3cqw);background-size:9cqw 9cqw;background-position:2cqw 2cqw;
  -webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 48%,rgba(0,0,0,.28) 0,#000 100%);mask-image:radial-gradient(ellipse 70% 66% at 50% 48%,rgba(0,0,0,.28) 0,#000 100%);opacity:.5}

/* ===== 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.2cqw 3.4cqw}
.carte .badge{width:11.5cqw;font-size:6.4cqw}


/* ===== 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}
.carte .faits{margin-bottom:6cqw}

/* ===== Le nom : en haut de la carte, centré, au-dessus de la photo ; les trois faits centrés dans la place libre ===== */
.carte .nom{order:-1;flex:none;position:static;height:13.5cqw;margin:0;padding:0;display:grid;align-content:center;justify-items:center;text-align:center;font-size:6.6cqw;line-height:1.05;overflow:hidden;white-space:normal;-webkit-line-clamp:unset;line-clamp:unset;color:var(--marine);background:none;outline:0;box-shadow:none;border-radius:0;max-width:none}
.recto .entete-carte{top:24.5cqw}
.carte .faits{flex:1;align-content:center;align-items:center;margin-bottom:5cqw}
.carte .pied{display:block;left:50%;right:auto;transform:translateX(-50%);bottom:2cqw}
/* Le liséré intérieur des rangs 2, 3 et 4 suit l'arrondi de la carte */
.carte:is(.r2,.r3,.r4) .face::after{border-radius:5.2cqw}

/* ===== Recto : les trois faits remontés sous la photo, puis un compteur dont l'aiguille pointe la puissance de la carte (son rang) ===== */
.carte .faits{flex:none;align-content:start;margin:3cqw 0 0;row-gap:3.2cqw}
.carte .fait{grid-row:1}
.carte .faits::before,.carte .faits::after{content:"";grid-row:2;grid-column:1/-1;justify-self:center;align-self:end}
/* le cadran : un demi-anneau de cinq secteurs, un par rang (du gris du rang 1 à l'or du rang 5) */
.carte .faits::before{width:32cqw;height:16cqw;border-radius:16cqw 16cqw 0 0;
  background:conic-gradient(from -90deg at 50% 100%,var(--r1) 0 36deg,var(--r2) 36deg 72deg,var(--r3) 72deg 108deg,var(--r4) 108deg 144deg,var(--r5) 144deg 180deg);
  -webkit-mask:radial-gradient(circle at 50% 100%,transparent 0 56%,#000 57% 100%);mask:radial-gradient(circle at 50% 100%,transparent 0 56%,#000 57% 100%)}
/* l'aiguille : une tige et son moyeu, qui tourne autour du centre du cadran selon le rang */
.carte .faits::after{width:3.8cqw;height:14cqw;margin-bottom:-1.9cqw;transform-origin:50% calc(100% - 1.9cqw);transform:rotate(var(--aiguille,0deg));
  background:linear-gradient(90deg,transparent 0 41%,var(--marine) 41% 59%,transparent 59%) 0 0/100% calc(100% - 1.9cqw) no-repeat,radial-gradient(circle at 50% calc(100% - 1.9cqw),var(--marine) 0 1.9cqw,transparent 2cqw)}
.carte.r1{--aiguille:-72deg}
.carte.r2{--aiguille:-36deg}
.carte.r3{--aiguille:0deg}
.carte.r4{--aiguille:36deg}
.carte.r5{--aiguille:72deg}

/* ===== Verso : le titre au même endroit et à la même taille qu'au recto, centré ; le lien devient un vrai bouton centré ===== */
.carte .verso h3{height:13.5cqw;min-height:0;margin:0;padding:0;display:grid;align-content:center;justify-items:center;text-align:center;font-family:var(--titre);font-weight:600;font-size:6.6cqw;line-height:1.05;color:var(--marine);text-transform:none;overflow:hidden;-webkit-line-clamp:unset;line-clamp:unset}
.carte a.lien-verso{display:block;width:fit-content;margin:1cqw auto;padding:2.3cqw 6.5cqw;border-radius:999px;background:var(--orange-fort);color:#fff;font:600 4.4cqw var(--titre);text-align:center;text-decoration:none;box-shadow:0 .9cqw 0 var(--marine)}
.carte a.lien-verso:hover{text-decoration:none;transform:translateY(.3cqw)}

/* ===== Recto : les trois faits au bas de la carte, le compteur (anneau plus large) centré dans la place libre au-dessus d'eux ===== */
.carte .faits{flex:1;display:grid;grid-template-rows:1fr auto;align-content:stretch;margin:2cqw 0 7.5cqw}
.carte .fait{grid-row:2}
.carte .faits::before,.carte .faits::after{grid-row:1;align-self:center}
.carte .faits::before{width:32cqw;height:17.9cqw;border-radius:0;
  background:conic-gradient(from -90deg at 50% 16cqw,var(--r1) 0 36deg,var(--r2) 36deg 72deg,var(--r3) 72deg 108deg,var(--r4) 108deg 144deg,var(--r5) 144deg 180deg,transparent 180deg);
  -webkit-mask:radial-gradient(circle at 50% 16cqw,transparent 0 6.6cqw,#000 6.8cqw 15.9cqw,transparent 16.1cqw);mask:radial-gradient(circle at 50% 16cqw,transparent 0 6.6cqw,#000 6.8cqw 15.9cqw,transparent 16.1cqw)}
.carte .faits::after{width:3.8cqw;height:17.9cqw;margin:0;transform-origin:50% 16cqw;
  background:linear-gradient(90deg,transparent 0 41%,var(--marine) 41% 59%,transparent 59%) 0 2.2cqw/100% 13.8cqw no-repeat,radial-gradient(circle at 50% 16cqw,var(--marine) 0 2cqw,transparent 2.1cqw)}

/* ===== Verso : le titre est vu « à travers la carte » : les lettres sont inversées vers la gauche (effet miroir), les mots restent dans le bon ordre ===== */
.carte .verso h3{transform:scaleX(-1)}

/* ===== Un peu d'air autour de la photo (l'étiquette et le rond du rang suivent ses coins) ===== */
.carte .image{margin:1.6cqw 3cqw 0;height:58cqw}
.recto .entete-carte{top:27cqw;left:10.8cqw;right:10.8cqw}

/* ===== Plus de rond de rang (le compteur le dit) ; l'étiquette de catégorie passe à droite, penchée vers la droite, et dépasse à peine de la photo par le haut ===== */
.carte .badge{display:none}
.recto .entete-carte{top:22.2cqw;left:10.8cqw;right:9.4cqw;justify-content:flex-end}
.cat{transform:rotate(4deg)}