/* Site commun : accueil (héros, sélecteur de thèmes, comment, pourquoi) et page « Tous les thèmes ». Pensé pour six thèmes comme pour cent :
   des tuiles compactes (icône du thème, nom, une phrase, un pied), une grille qui se remplit toute seule, la recherche et les familles sur la page complète. */

/* ===== Héros : une promesse, trois puces, deux boutons ; à droite, des cartes de plusieurs thèmes ===== */
.hub--accueil .bande--hero.hero .bande__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:24px 48px;padding-top:56px;padding-bottom:calc(46px + var(--pente))}
.hero__texte{max-width:640px}
.hero__puces{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero__puces li{padding:6px 14px 6px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);font:700 14px var(--titre);color:#fff}
.hero__puces li::before{content:"✓";margin-right:7px;color:#7FD08A;font-weight:800}
.hero__puces li.hero__puce--picto::before{content:none}   /* la coche ne sert qu'à « gratuit » : les deux autres pastilles ont leur propre pictogramme */
.hero__picto{width:16px;height:16px;margin:-2px 7px -2px 0;vertical-align:-3px;fill:none;stroke:#7FD08A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero .hub__titre{max-width:15em;margin-left:0;text-align:left}
.hero .hub__accroche-hero{margin-left:0;max-width:46ch;text-align:left}
.hero .hub__actions{justify-content:flex-start;margin-top:30px}
.hero .hub__btn:not(.hub__btn--principal){border-color:#fff;color:#fff;background:transparent}
.hero__chiffres{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:15px;color:rgba(255,255,255,.8)}
.hero__chiffres strong{color:#fff;font-weight:800}
.hero__cartes{position:relative;height:400px}
.hero__cartes img{position:absolute;width:40%;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.4))}
.hero__cartes img:nth-child(1){left:2%;top:36px;transform:rotate(-12deg)}
.hero__cartes img:nth-child(2){left:30%;top:0;transform:rotate(-4deg);z-index:2}
.hero__cartes img:nth-child(3){left:56%;top:44px;transform:rotate(7deg);z-index:1}
.hero__cartes img:nth-child(4){left:10%;top:184px;width:44%;transform:rotate(5deg);z-index:3}
.hero__cartes img:nth-child(5){left:46%;top:190px;width:44%;transform:rotate(-6deg);z-index:4}
.hero--court .bande__in{padding-top:44px;padding-bottom:calc(72px + var(--pente))}
.hub--accueil .bande--hero.hero--court .bande__in{grid-template-columns:minmax(0,1fr)}
@media (max-width:1000px){
  .hub--accueil .bande--hero.hero .bande__in{grid-template-columns:minmax(0,1fr)}
  /* sur mobile et tablette : les cartes passent sous le texte, en transparence */
  .hub--accueil .hero:not(.hero--court) .hero__texte{display:contents}   /* pour glisser les cartes entre le texte et les boutons */
  .hero__puces{order:1}.hero .hub__titre{order:2}.hero .hub__accroche-hero{order:3}.hero__cartes{order:4}.hero .hub__actions{order:5}.hero__chiffres{order:6}
  .hero__cartes{height:230px;max-width:520px;width:100%;margin:-130px auto -100px;opacity:.3;z-index:0}   /* elles remontent derrière la phrase d'accroche */
  .hero__puces,.hero .hub__titre,.hero .hub__accroche-hero,.hero .hub__actions,.hero__chiffres{position:relative;z-index:1}
  .hero .hub__accroche-hero{text-shadow:0 1px 3px rgba(0,20,60,.95),0 0 14px rgba(0,20,60,.9),0 0 28px rgba(0,20,60,.7)}
  .hero__cartes img{width:34%}
  .hero__cartes img:nth-child(1){left:4%;top:26px}
  .hero__cartes img:nth-child(2){left:28%;top:0}
  .hero__cartes img:nth-child(3){left:54%;top:26px}
  .hero__cartes img:nth-child(4),.hero__cartes img:nth-child(5){display:none}
}

/* ===== Sélecteur de thèmes : tuiles compactes ===== */
.selecteur .hub__sous-titre{margin-bottom:28px}
.hub--accueil .bande--themes .bande__in{padding-bottom:calc(72px + var(--pente))}
.tuiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.tuiles>li[hidden]{display:none}
.selecteur__suite{margin:34px 0 0;text-align:center}
.selecteur__vide{margin:28px 0 0;padding:24px;text-align:center;color:var(--doux);background:var(--surface);border:1px dashed var(--brume);border-radius:14px}
@media (max-width:560px){.tuiles{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ===== Page « Tous les thèmes » : recherche et familles ===== */
.outils{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:0 0 14px}
.outils__recherche{position:relative;flex:1 1 300px;max-width:520px}
.outils__recherche::before{content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-9px;border:2px solid var(--doux);border-radius:50%;box-shadow:7px 8px 0 -5px var(--doux)}   /* la loupe */
.outils__recherche input{width:100%;padding:14px 16px 14px 46px;border:2px solid var(--brume);border-radius:14px;background:var(--surface);color:var(--encre);font:500 17px var(--texte)}
.outils__recherche input:focus{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--marque)}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{padding:9px 16px;border:2px solid var(--brume);border-radius:999px;background:var(--surface);color:var(--encre);font:700 15px var(--titre);cursor:pointer;min-height:40px}
.puce:hover{border-color:var(--marque)}
.puce[aria-pressed="true"]{background:var(--marque);border-color:var(--marque);color:#fff}
.puce:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.outils__compte{margin:0 0 20px;font-size:14.5px;color:var(--doux)}

/* ===== Comment ça marche, Pourquoi jouer : quatre colonnes, l'icône au-dessus, un texte court ===== */
.avantages{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:none}
.avantage{--c:var(--c1);position:relative;display:grid;align-content:start;gap:8px;padding:24px 20px 22px;background:var(--surface);border-radius:16px;border-top:6px solid var(--c);box-shadow:var(--ombre-repos);text-align:left}
.avantage__ico{background:var(--c);margin-bottom:6px}
.avantage__num{position:absolute;top:14px;right:18px;font:800 34px/1 var(--titre);color:color-mix(in srgb,var(--c) 30%,transparent)}
.avantage h3{margin:0;font:700 18.5px/1.25 var(--titre);color:var(--encre)}
.avantage p{margin:0;font-size:15.5px;line-height:1.5;color:var(--doux)}
@media (max-width:1000px){.avantages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .avantages{grid-template-columns:minmax(0,1fr);gap:14px}
  .avantage{grid-template-columns:auto 1fr;column-gap:16px;align-items:start;padding:18px}
  .avantage__ico{grid-row:1/3;margin:0}
  .avantage__num{top:10px;right:14px;font-size:26px}
}

/* l'ancienne règle du haut de page mettait tout en colonne 1 (hub.css) : le texte à gauche, les cartes à droite */
.hub--accueil .bande--hero.hero > .bande__in > *{grid-column:auto}

/* ===== Fonds des sections : un motif léger par bande, repris des sites (papier à points du dictionnaire, cahier ligné des crimes, carton des métiers, quadrillage du wiki, pois des animaux). Du CSS pur : aucune image à charger ===== */
.hub--accueil .bande--themes::before,.hub--accueil .bande--comment::before,.hub--accueil .bande--atouts::before,.hub--accueil .bande--actus::before,.hub--accueil .bande--faq::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.hub--accueil .bande--themes .bande__in,.hub--accueil .bande--comment .bande__in,.hub--accueil .bande--atouts .bande__in,.hub--accueil .bande--actus .bande__in,.hub--accueil .bande--faq .bande__in{position:relative;z-index:1}
.bande--themes::before{background:radial-gradient(rgba(60,40,10,.14) 1px,transparent 1.4px) 0 0/14px 14px}
.bande--comment::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 6px),linear-gradient(115deg,transparent 62%,rgba(255,255,255,.06) 62% 64%,transparent 64% 70%,rgba(255,255,255,.05) 70% 71%,transparent 71%)}
.bande--atouts::before{background:repeating-linear-gradient(transparent 0 29px,color-mix(in srgb,var(--c6) 26%,transparent) 29px 30px),linear-gradient(90deg,transparent calc(50% - 640px),rgba(210,73,75,.28) calc(50% - 640px) calc(50% - 638px),transparent calc(50% - 638px))}
.bande--actus::before{background:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px) 0 0/28px 28px}
.bande--faq::before{background:radial-gradient(color-mix(in srgb,var(--c1) 24%,transparent) 2.2px,transparent 2.8px) 0 0/28px 28px}
/* sous chaque titre de section : les cinq cadres de rareté des cartes (argent, vert, bleu, violet, or) */
.hub--accueil .bande--themes h2::after,.hub--accueil .bande--comment h2::after,.hub--accueil .bande--atouts h2::after,.hub--accueil .bande--faq h2::after{content:"";display:block;width:92px;height:6px;margin-top:12px;border-radius:3px;background:linear-gradient(90deg,#8B94A3 0 20%,#2F8F6B 20% 40%,#2E6FD6 40% 60%,#9B5BD6 60% 80%,#C9961A 80%)}

/* ===== Petits pictogrammes en fond (outils, livres, loupe, patte, voiture, étoile… : un clin d'œil à chaque univers), d'un seul fichier SVG découpé en masque, teinté par bande ===== */
.hub--accueil .bande--hero::after,.hub--accueil .bande--themes::after,.hub--accueil .bande--comment::after,.hub--accueil .bande--atouts::after,.hub--accueil .bande--actus::after,.hub--accueil .bande--faq::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;-webkit-mask:url(../img/hub-deco.svg) var(--dx,0) var(--dy,0)/620px 440px;mask:url(../img/hub-deco.svg) var(--dx,0) var(--dy,0)/620px 440px}
.bande--hero::after{background:rgba(255,255,255,.07);--dx:60px;--dy:30px}
.bande--themes::after{background:rgba(0,45,98,.10);--dx:200px;--dy:90px}
.bande--comment::after{background:rgba(255,255,255,.12);--dx:10px;--dy:140px}
.bande--atouts::after{background:color-mix(in srgb,var(--c6) 34%,transparent);--dx:120px;--dy:40px}
.bande--actus::after{background:rgba(255,255,255,.14);--dx:260px;--dy:10px}
.bande--faq::after{background:color-mix(in srgb,var(--c1) 30%,transparent);--dx:80px;--dy:200px}
.hub--accueil .bande--hero .bande__in{z-index:1}
@media (max-width:700px){.hub--accueil .bande::after{-webkit-mask-size:440px 312px;mask-size:440px 312px}}

/* =====================================================================================================================
   Un design propre à chaque section : chacune reprend l'univers d'un des sites (fonds, titres, blocs et pictogrammes différents).
   Comment ça marche = métiers · Pourquoi jouer = crimes · Choisis ton univers = dictionnaire · Actualités = wiki · Questions = animaux
   ===================================================================================================================== */
.bande--comment::after{-webkit-mask-image:url(../img/hub-deco-metiers.svg);mask-image:url(../img/hub-deco-metiers.svg)}
.bande--atouts::after{-webkit-mask-image:url(../img/hub-deco-crimes.svg);mask-image:url(../img/hub-deco-crimes.svg)}
.bande--themes::after{-webkit-mask-image:url(../img/hub-deco-dico.svg);mask-image:url(../img/hub-deco-dico.svg)}
.bande--actus::after{-webkit-mask-image:url(../img/hub-deco-wiki.svg);mask-image:url(../img/hub-deco-wiki.svg)}
.bande--faq::after{-webkit-mask-image:url(../img/hub-deco-animaux.svg);mask-image:url(../img/hub-deco-animaux.svg)}

/* --- Choisis ton univers : page de dictionnaire --- */
.hub--accueil .bande--themes{background:color-mix(in srgb,#F4ECD6 60%,var(--papier))}
.bande--themes h2{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.01em;color:#2A2217}
.hub--accueil .bande--themes h2::after{width:230px;height:6px;border-radius:0;background:none;border-top:1px solid #2A2217;border-bottom:2px solid #2A2217}
.bande--themes .hub__sous-titre{font-style:italic;color:#5E5237}
.bande--themes::after{background:rgba(60,40,10,.10)}

/* --- Comment ça marche : tickets de carton perforés (métiers) --- */
.hub--accueil .bande--comment h2::after{width:150px;height:0;border-top:3px dashed rgba(255,255,255,.85);background:none;border-radius:0}
.bande--comment .avantages{filter:drop-shadow(0 8px 10px rgba(0,0,0,.28))}
.bande--comment .avantage{border-top:0;border-radius:6px;box-shadow:none;padding:26px 20px 56px;
  -webkit-mask:radial-gradient(circle 12px at 0 calc(100% - 50px),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% calc(100% - 50px),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 12px at 0 calc(100% - 50px),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% calc(100% - 50px),#0000 97%,#000) right/51% 100% no-repeat;
  background:repeating-linear-gradient(0deg,rgba(35,88,184,.05) 0 1px,transparent 1px 5px),#FFFDF8}
.bande--comment .avantage::after{content:"";position:absolute;left:16px;right:16px;bottom:50px;border-top:2px dashed #C9D3E8}
.bande--comment .avantage__ico{border-radius:50%}
.bande--comment .avantage__num{top:auto;bottom:14px;right:18px;font:800 18px/1 ui-monospace,"Courier New",monospace;color:#8DA0C8}
.bande--comment .avantage__num::before{content:"N° "}


/* --- Pourquoi jouer : feuillets de cahier posés sur la table (crimes) --- */
.bande--atouts h2,.bande--atouts .avantage h3{font-family:"Courier New",ui-monospace,monospace}
.bande--atouts h2{letter-spacing:.02em;text-transform:uppercase;font-size:clamp(24px,3vw,32px)}
.hub--accueil .bande--atouts h2::after{width:180px;height:7px;border-radius:2px;background:#B3261E;transform:rotate(-1.2deg)}
.bande--atouts .avantage{border-top:0;border-radius:2px;background:#FFFDF6;box-shadow:2px 4px 0 rgba(30,36,48,.16);padding-top:30px}
.bande--atouts .avantage:nth-child(odd){transform:rotate(-1deg)}
.bande--atouts .avantage:nth-child(even){transform:rotate(.9deg)}
.bande--atouts .avantage::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;margin-left:-37px;background:rgba(236,214,140,.8);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.bande--atouts .avantage__ico{border-radius:50%;background:transparent;color:var(--c);border:2.5px solid var(--c);box-shadow:none;outline:2px dashed color-mix(in srgb,var(--c) 45%,transparent);outline-offset:3px;transform:rotate(-8deg)}
.bande--atouts .avantage__ico svg{stroke:var(--c)}
.bande--atouts .avantage h3{font-size:17px}

/* --- Actualités : la page du wiki, ses encadrés et ses liens bleus --- */
.hub--accueil .bande--actus{background:#F8F9FA;color:#202122}
.hub--accueil .bande--actus h2{font-family:Georgia,"Linux Libertine","Times New Roman",serif;font-weight:400;color:#202122;font-size:clamp(26px,3vw,34px)}
.hub--accueil .bande--actus h2::after{content:"";display:block;width:100%;height:1px;margin-top:8px;border-radius:0;background:#A2A9B1}
.bande--actus::before{background:linear-gradient(rgba(51,102,204,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(51,102,204,.07) 1px,transparent 1px) 0 0/28px 28px}
.bande--actus::after{background:rgba(51,102,204,.11)}
.bande--actus .hub__actu{padding:0 20px 18px;background:#fff;border:1px solid #A2A9B1;border-radius:2px;box-shadow:none;overflow:hidden}
.bande--actus .hub__actu .hub__date{margin:0 -20px 10px;padding:7px 20px;background:#EAF3FF;border-bottom:1px solid #A2A9B1;font:600 13px var(--texte);color:#202122;text-transform:uppercase;letter-spacing:.04em}
.bande--actus .hub__actu h3{font:400 22px/1.25 Georgia,"Times New Roman",serif}
.hub--accueil .bande--actus .hub__actu h3 a{color:#3366CC}
.hub--accueil .bande--actus .hub__lien{color:#3366CC;font-weight:600}

/* --- Questions : bulles rondes et pastel (animaux) --- */
.hub--accueil .bande--faq{background:#EEF0FF}
.bande--faq::before{background:radial-gradient(rgba(255,107,107,.30) 2.4px,transparent 3px) 0 0/30px 30px}
.bande--faq::after{background:rgba(35,36,90,.10)}
.bande--faq h2{font-family:ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;font-weight:900;color:#23245A}
.hub--accueil .bande--faq h2::after{width:130px;height:12px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12' viewBox='0 0 26 12'%3E%3Cpath d='M0 6q6.5-8 13 0t13 0' fill='none' stroke='%23FF6B6B' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/26px 12px repeat-x}
.bande--faq .hub__faq details{background:#fff;border:3px solid #fff;border-radius:28px;box-shadow:0 5px 0 #C8CCF2}
.bande--faq .hub__faq details:nth-child(4n+2){box-shadow:0 5px 0 #FFC9C9}
.bande--faq .hub__faq details:nth-child(4n+3){box-shadow:0 5px 0 #BDEBD3}
.bande--faq .hub__faq details:nth-child(4n+4){box-shadow:0 5px 0 #FFE3A3}
.bande--faq .hub__faq summary{padding:16px 22px;color:#23245A;font-family:ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;font-weight:800;font-size:17.5px}
.bande--faq .hub__faq summary::after{content:"+";display:grid;place-items:center;width:30px;height:30px;margin-left:12px;border-radius:50%;background:#FF6B6B;color:#fff;font:800 22px/1 system-ui;float:right}
.bande--faq .hub__faq details[open] summary::after{content:"\2212"}
.bande--faq .hub__faq details p{padding:0 22px 20px}

/* ===== Les sections se superposent par leur biais ===== */
.hub--accueil .feuille{position:relative}
.hub--accueil .feuille + .feuille{margin-top:calc(var(--pente) * -1)}
.hub--accueil .feuille .bande{margin-top:0}
/* pas d'espace au-dessus des titres de section : seul le biais de la bande reste */
.hub--accueil .bande:not(.bande--hero):not(.bande--final) .bande__in{padding-top:calc(14px + var(--pente))}
.hub--accueil .bande--final .bande__in{padding-top:calc(30px + var(--pente))}

/* ===== Appel final : le dernier moment pour faire cliquer. Des dos de cartes en éventail, les icônes des univers, un bouton qui bat ===== */
.hub--accueil .bande--final{overflow:hidden}
.hub--accueil .bande--final .bande__in{position:relative;z-index:1;padding-top:calc(60px + var(--pente));padding-bottom:72px}
.appel__icones{display:flex;justify-content:center;margin:0 0 46px}
.appel__icones img{width:44px;height:44px;margin-left:-10px;border-radius:12px;border:3px solid var(--orange-fort);box-shadow:0 4px 10px rgba(0,0,0,.25);background:#fff}
.appel__icones img:first-child{margin-left:0}
.hub--accueil .bande--final h2{font-size:clamp(30px,5vw,46px);max-width:20em;margin-inline:auto;line-height:1.12;text-wrap:balance}
.appel__texte{margin:12px auto 0;font-size:19px}
.hub--accueil .bande--final .hub__actions{margin-top:30px}
.appel__bouton{padding:18px 38px;font-size:20px;box-shadow:0 8px 0 rgba(120,40,0,.45),0 14px 24px rgba(0,0,0,.25);animation:appel-bat 2.4s ease-in-out infinite}
.appel__bouton:hover,.appel__bouton:focus-visible{transform:translateY(2px);box-shadow:0 5px 0 rgba(120,40,0,.45),0 10px 18px rgba(0,0,0,.25);animation:none}
.appel__bouton span{display:inline-block;transition:transform .15s ease}
.appel__bouton:hover span{transform:translateX(5px)}
.appel__preuves{margin:42px 0 0;font-size:15px;opacity:.92;letter-spacing:.02em}
.appel__dos{position:absolute;z-index:0;width:clamp(90px,13vw,190px);height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.4));animation:appel-flotte 6s ease-in-out infinite}
.appel__dos--2{left:11%;bottom:-26px;transform:rotate(9deg);animation-delay:-2s}
@keyframes appel-bat{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes appel-flotte{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media (max-width:700px){.appel__dos{width:78px}.appel__dos--2{left:-14px;bottom:-14px}}
@media (prefers-reduced-motion:reduce){.appel__bouton,.appel__dos{animation:none}}

/* ===== Transition vers un univers : sa couleur de fond se répand depuis le point touché (hub-themes.js) ===== */
.transition-univers{position:fixed;inset:0;z-index:9999;pointer-events:none;clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .6s cubic-bezier(.5,0,.2,1)}
.transition-univers.va{clip-path:circle(150vmax at var(--x,50%) var(--y,50%))}
@media (prefers-reduced-motion: reduce){.transition-univers{transition:none}}

/* ===== Actualités : les titres seulement, sur deux colonnes (accueil et « À lire aussi » sous chaque article) ===== */
.actus-titres{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.actus-titres a{display:block;height:100%;padding:14px 18px 14px 20px;background:#fff;border:1px solid #A2A9B1;border-left:5px solid #3366CC;border-radius:2px;font:400 19px/1.3 Georgia,"Times New Roman",serif;color:#3366CC;text-decoration:none}
.actus-titres a:hover,.actus-titres a:focus-visible{background:#EAF3FF;text-decoration:underline;text-underline-offset:3px}
.actus-titres a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (max-width:700px){.actus-titres{grid-template-columns:minmax(0,1fr)}}

/* ===== Appel final : bordure blanche autour des icônes, texture sur le orange (hachures, grain et pois) ===== */
.appel__icones img{border:3px solid #fff}
.hub--accueil .bande--final{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
  repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px),
  radial-gradient(rgba(120,40,0,.16) 1.4px,transparent 1.8px) 0 0/22px 22px,
  radial-gradient(ellipse 60% 90% at 50% 0%,#D9601E,transparent 70%),#B8420C}

/* ===== Barre de défilement et texte surligné aux couleurs du site commun ===== */
:root{--sb-piste:#E4E8F2;--sb-pouce:linear-gradient(180deg,#F37021,#C2549A 55%,#7B70C8)}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--sb-piste)}
::-webkit-scrollbar-thumb{background:var(--sb-pouce);border-radius:8px;border:3px solid var(--sb-piste)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#D9601E,#A8407F 55%,#5F54B0);border-color:var(--sb-piste)}
::-webkit-scrollbar-corner{background:var(--sb-piste)}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:#C2549A #E4E8F2}}
::selection{background:#F37021;color:#fff;text-shadow:none}
.bande--hero ::selection,.bande--comment ::selection,.bande--final ::selection{background:#fff;color:#002D62}
img::selection{background:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sb-piste:#14233F}}


/* le + / − des questions est dessiné (deux traits) : il est exactement au centre du rond */
.bande--faq .hub__faq summary::after{content:"";font-size:0;background:linear-gradient(#fff,#fff) center/14px 3px no-repeat,linear-gradient(#fff,#fff) center/3px 14px no-repeat,#FF6B6B}
.bande--faq .hub__faq details[open] summary::after{content:"";background:linear-gradient(#fff,#fff) center/14px 3px no-repeat,#FF6B6B}



/* dernière section : les univers à venir, en initiales colorées à côté des logos */
.appel__icones{flex-wrap:nowrap;gap:0;max-width:none;margin-inline:auto}   /* tous les logos sur une seule ligne : ils se serrent quand l'écran est étroit */
.appel__icones img,.appel__lettre{flex:none;--w:min(44px,calc((100vw - 40px + 10px*(var(--n) - 1))/var(--n)));width:var(--w);height:var(--w)}
.appel__lettre{display:grid;place-items:center;width:44px;height:44px;margin-left:-10px;border-radius:12px;border:3px solid #fff;background:var(--accent);color:#fff;font:800 clamp(12px,calc(var(--w,44px)*.45),20px) var(--titre);box-shadow:0 4px 10px rgba(0,0,0,.25)}


/* espaces de l'appel final : la règle générale « .hub__final p { margin: 0 auto } » les écrasait, on la bat par la précision du sélecteur */
.hub--accueil .bande--final .appel__icones{margin:0 auto 23px}
.hub--accueil .bande--final .appel__texte{margin:7px auto 0}
.hub--accueil .bande--final .appel__preuves{margin:22px auto 0}

.compteur{font-variant-numeric:tabular-nums}

/* ===== Les cartes du héros arrivent par la droite et par le bas, l'une après l'autre (animation légère, une seule fois) ===== */
@media (prefers-reduced-motion:no-preference){
  .hero__cartes img{animation:carte-arrive .75s cubic-bezier(.2,.7,.2,1) both}
  .hero__cartes img:nth-child(1){animation-delay:.05s}
  .hero__cartes img:nth-child(2){animation-delay:.15s}
  .hero__cartes img:nth-child(3){animation-delay:.25s}
  .hero__cartes img:nth-child(4){animation-delay:.35s}
  .hero__cartes img:nth-child(5){animation-delay:.45s}
  @keyframes carte-arrive{from{translate:70px 90px;opacity:0}to{translate:0 0;opacity:1}}
}


/* ===== Actualités : surlignage, tableaux, encadrés et « Cet article parle de » ===== */
.hub__corps mark{background:linear-gradient(transparent 52%,color-mix(in srgb,var(--orange) 50%,transparent) 52%);color:inherit;padding:0 .12em;border-radius:2px}
.hub__corps blockquote{position:relative;margin:16px 0 20px;padding:11px 16px 11px 46px;border:0;border-radius:14px;background:color-mix(in srgb,var(--c2) 10%,var(--surface));color:var(--encre)}
.hub__corps blockquote::before{content:"“";position:absolute;left:12px;top:0;font:800 48px/1 Georgia,serif;color:var(--c2)}
.hub__corps blockquote p:last-child{margin-bottom:0}
.hub__tableau{margin:16px 0 20px;overflow-x:auto;border-radius:12px;box-shadow:var(--ombre-repos)}
.hub__tableau table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.35;background:var(--surface)}
.hub__tableau th{padding:8px 14px;background:var(--marine,#002D62);color:#fff;text-align:left;font:700 14px/1.25 var(--titre);white-space:nowrap}
.hub__tableau td{padding:7px 14px;border-top:1px solid var(--brume);vertical-align:top}
.hub__tableau tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--c2) 7%,var(--surface))}
@media (max-width:560px){
  .hub__tableau thead{display:none}
  .hub__tableau td{display:block;border-top:0;padding:6px 14px}
  .hub__tableau td::before{content:attr(data-titre) " : ";font:700 13px var(--titre);color:var(--doux);text-transform:uppercase;letter-spacing:.04em}
  .hub__tableau tbody tr{display:block;padding:8px 0;border-top:3px solid var(--brume)}
  .hub__tableau tbody tr:first-child{border-top:0}
  .hub__tableau tbody tr:nth-child(even) td{background:none}
}
.apropos-theme{margin:30px 0 0;padding:0;text-align:left}
.apropos-theme__titre{margin:0 0 8px;font:700 13px var(--titre);text-transform:uppercase;letter-spacing:.09em;color:var(--doux)}
.apropos-theme__tuile{max-width:none;margin:0;grid-template-columns:minmax(0,1fr)}
.apropos-theme .tuile{grid-template-rows:auto auto;gap:8px;padding:14px 16px 10px}
.apropos-theme .tuile__corps{display:none}   /* ici, la tuile reste courte : icône, nom, cartes et difficulté suffisent */

/* Les logos de l'appel final : une petite inclinaison à droite ou à gauche, d'un logo à l'autre, pour qu'ils ne soient pas alignés au cordeau (suite de 8 angles, décalée tous les 5 logos) */
.appel__icones>*{rotate:0deg}
.appel__icones>:nth-child(8n+1){rotate:-6deg}
.appel__icones>:nth-child(8n+2){rotate:4deg}
.appel__icones>:nth-child(8n+3){rotate:-3deg}
.appel__icones>:nth-child(8n+4){rotate:7deg}
.appel__icones>:nth-child(8n+5){rotate:-8deg}
.appel__icones>:nth-child(8n+6){rotate:3deg}
.appel__icones>:nth-child(8n+7){rotate:-4deg}
.appel__icones>:nth-child(8n+8){rotate:6deg}
.appel__icones>:nth-child(5n){rotate:-5deg}
.appel__icones>:nth-child(7n){rotate:5deg}