/* Site public, téléphone d'abord (refonte du 2026-10-27, parcours « Mélange »).
   Trois habillages au choix du visiteur (html[data-hab] : A Chaleureux par défaut, B Coloré ludique, C Nuit mystère) ; une couleur par sorte de jeu.
   Gros textes et boutons, contrastes forts (public âgé). */
:root, html[data-hab="A"] {
	--fond: #faf6ee; --carte: #ffffff; --texte: #2a2420; --doux: #6b6158; --bord: #e8dfd0;
	--accent: #b8571b; --accent-fonce: #8e3f10;
	--c-obj: #c8641f; --c-let: #7a4cc2; --c-nom: #13877a; --c-det: #2f6fd0; --c-dif: #c2255c; --sur-couleur: #ffffff;
	--f-titre: "Fredoka", "Atkinson Hyperlegible", system-ui, sans-serif; --titre-w: 600;
	--f-texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
	--rayon: 16px; --ombre: 0 2px 10px rgba(80, 50, 20, .10);
}
html[data-hab="B"] {
	--fond: #eef2ff; --carte: #ffffff; --texte: #1d1b3a; --doux: #5b5a7c; --bord: #d9def5;
	--accent: #ff6b1a; --accent-fonce: #c94a05;
	--c-obj: #ff6b1a; --c-let: #8b3dff; --c-nom: #00a48e; --c-det: #2b7bff; --c-dif: #e6306e; --sur-couleur: #ffffff;
	--f-titre: "Lilita One", "Nunito", sans-serif; --titre-w: 400;
	--f-texte: "Nunito", "Segoe UI", system-ui, sans-serif;
	--rayon: 22px; --ombre: 0 5px 0 rgba(29, 27, 58, .13);
}
html[data-hab="C"] {
	--fond: #0e1424; --carte: #172038; --texte: #f2ead6; --doux: #a6adc0; --bord: #2a3654;
	--accent: #f0a93b; --accent-fonce: #ffc56b;
	--c-obj: #f0a93b; --c-let: #c39bff; --c-nom: #4fd1c5; --c-det: #7fb2ff; --c-dif: #ff8fb8; --sur-couleur: #0e1424;
	--f-titre: "Marcellus", Georgia, serif; --titre-w: 400;
	--f-texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
	--rayon: 12px; --ombre: 0 0 0 1px rgba(240, 169, 59, .18), 0 8px 24px rgba(0, 0, 0, .45);
	color-scheme: dark;
}
html[data-hab="C"] body { background: radial-gradient(120% 500px at 50% 0, #1c2747, transparent 70%) no-repeat, var(--fond); }
.t-objets-caches { --c: var(--c-obj); }
.t-lettres-cachees { --c: var(--c-let); }
.t-nombres-caches { --c: var(--c-nom); }
.t-retrouve-detail { --c: var(--c-det); }
.t-differences { --c: var(--c-dif); }

* { box-sizing: border-box; }
html { font-size: 17px; }
@media (min-width: 760px) { html { font-size: 18px; } }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--f-texte); line-height: 1.5; }
a { color: var(--accent-fonce); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: var(--titre-w); text-wrap: balance; }
h1 { font-size: 1.8rem; line-height: 1.2; margin: .6em 0 .3em; }
h2 { font-size: 1.35rem; margin: 1.4em 0 .6em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.discret { color: var(--doux); font-size: .9rem; }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête mince : logo + ☰ sur téléphone, liens en ligne sur ordinateur ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fond) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord); }
.entete-haut { display: flex; align-items: center; gap: 8px 24px; min-height: 54px; }
.logo { display: flex; align-items: center; gap: 7px; font-family: var(--f-titre); font-weight: var(--titre-w); font-size: 1.25rem; text-decoration: none; color: var(--texte); margin-right: auto; white-space: nowrap; }
.logo svg { width: 26px; height: 26px; color: var(--c-obj); flex: none; }
.burger { display: grid; place-items: center; width: 46px; height: 46px; border: 0; background: none; color: var(--texte); border-radius: 12px; cursor: pointer; margin-right: -8px; }
.burger svg { width: 26px; height: 26px; }
/* très petits téléphones : le logo se fait plus petit pour que le menu reste dans l'écran */
@media (max-width: 359px) { .entete-haut { column-gap: 8px; } .logo { font-size: 1.05rem; gap: 5px; } .logo svg { width: 20px; height: 20px; } }
.menu { display: none; }
.menu a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; color: var(--texte); padding: 12px 10px; border-radius: 12px; }
.menu a:hover { background: var(--carte); }
.menu .pt { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.entete.ouvert .menu { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; background: var(--carte); padding: 8px 16px 14px; border-bottom: 1px solid var(--bord); box-shadow: 0 12px 24px rgba(0, 0, 0, .15); }
/* ordinateur : le menu sur une ligne ; s'il ne tient pas (mots longs, petite fenêtre), le gabarit met « replie » : ☰ comme sur téléphone */
@media (min-width: 900px) {
	.entete:not(.replie) .burger { display: none; }
	.entete:not(.replie) .menu { display: flex; flex: none; flex-direction: row; position: static; background: none; padding: 0; border: 0; box-shadow: none; gap: 2px; }
	.entete:not(.replie) .menu a { padding: 8px; gap: 6px; font-size: .9rem; border-radius: 999px; white-space: nowrap; }
	.entete-haut { column-gap: 14px; }
	.entete .conteneur { max-width: 1400px; } /* plus de place pour les langues aux mots longs ; aligné sur le jeu */
	.entete:not(.replie) .menu-aide { display: none; } /* « Comment jouer » reste en bas de page */
	.logo { flex: none; }
	.entete-haut { min-height: 64px; }
}
/* liens vers la gestion, seulement dans le navigateur de l'administrateur (ajoutés par le gabarit) */
.vers-gestion { display: flex; gap: 6px; flex: none; }
.vers-gestion a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px dashed var(--doux); border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--texte); white-space: nowrap; }
.vers-gestion a:hover { background: var(--carte); border-style: solid; }
@media (max-width: 1279px) { .vers-gestion span { display: none; } }
.langues { position: relative; }
.langues summary { cursor: pointer; list-style: none; padding: 6px 10px; border: 1px solid var(--bord); border-radius: 999px; font-size: 1.25em; line-height: 1; }
.langues summary::-webkit-details-marker { display: none; }
.langues-liste { position: absolute; right: 0; top: calc(100% + 6px); background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px; min-width: 240px; z-index: 10; box-shadow: 0 8px 24px #0002; }
.langues-liste a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--texte); }
.langues-liste .drapeau { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px #0002; }
.langues-liste a[aria-current] { background: var(--fond); font-weight: 700; }

/* ---------- Boutons ---------- */
.bouton, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--sur-couleur); text-decoration: none; font-weight: 800; border: 0; border-radius: 999px; padding: 0 22px; min-height: 48px; cursor: pointer; font-size: 1rem; font-family: var(--f-texte); }
.bouton:hover, .btn:hover { filter: brightness(1.08); }
.bouton-grand { font-size: 1.2rem; min-height: 56px; padding: 0 36px; }
html[data-hab="B"] .btn.plein, html[data-hab="B"] .bouton { box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn.verre { background: rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(6px); }

/* ---------- Accueil ---------- */
.accueil { display: flex; flex-direction: column; gap: 22px; padding-top: 14px; }
@media (min-width: 760px) { .accueil { gap: 30px; padding-top: 22px; } }
/* en-tête : le slogan en petit et 🎲 Au hasard, puis les jeux tout de suite (pas de grande image) */
.accueil-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.accueil-tete h1 { font-size: 1.15rem; margin: 0; flex: 1 1 260px; }
@media (min-width: 760px) { .accueil-tete h1 { font-size: 1.5rem; } }
/* grilles de l'accueil : 2 jeux par ligne sur téléphone, 3 sur tablette, 4 sur grand écran (12 et 8 jeux sans trou) */
/* sur téléphone : 6 jeux par sorte de jeu, pas plus */
@media (max-width: 759px) { .accueil-grille > .carte:nth-child(n+7) { display: none; } .accueil-grille.accueil-grande > .carte:nth-child(n+7) { display: flex; } .accueil-grille.accueil-grande > .carte:nth-child(n+13) { display: none; } }
@media (min-width: 760px) { .grille.accueil-grille { grid-template-columns: repeat(3, 1fr); } .accueil-grille:not(.accueil-grande) > .carte:nth-child(n+10) { display: none; } }
@media (min-width: 1100px) { .accueil-grille:not(.accueil-grande) > .carte:nth-child(n+10) { display: flex; } }
@media (min-width: 1100px) { .grille.accueil-grille { grid-template-columns: repeat(5, 1fr); } }
.rang-tete h2 a { color: inherit; text-decoration: none; white-space: normal; }
/* 🔥 dans le menu : l'icône seule sur un ordinateur moyen, pour que le menu tienne sur une ligne (le mot reste sous ☰) */
@media (min-width: 900px) and (max-width: 1379px) { .entete:not(.replie) .menu-mot { display: none; } }
/* 🔥 Les plus joués sur l'accueil : une seule ligne (2 × 2 sur téléphone) */
.plus-joues .rang-tete h2::before { display: none; }
@media (max-width: 759px) { .plus-joues .accueil-grille > .carte:nth-child(n+5) { display: none; } }
@media (min-width: 760px) and (max-width: 1099px) { .plus-joues .accueil-grille > .carte:nth-child(n+4) { display: none; } }
/* partie du jour : petite carte (image à gauche, titre et Jouer à droite) ; toute la carte est cliquable */
.jour { position: relative; display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); border-left: 6px solid var(--c, var(--accent)); }
/* image du jour en entier (décor au format large, pas coupé sur les côtés), en 1280 sur les écrans fins (srcset) */
.jour-img { flex: 0 0 45%; max-width: 420px; }
.jour-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--rayon) - 4px); }
.jour-dedans { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jour-sur { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--c, var(--accent)); }
.jour h2 { font-size: 1.15rem; line-height: 1.15; margin: 0; }
.jour h2 a { color: inherit; text-decoration: none; }
.jour h2 a::before { content: ""; position: absolute; inset: 0; }
.jour .boutons { position: relative; z-index: 1; }
.jour .btn.plein { background: var(--c, var(--accent)); }
@media (min-width: 760px) { .jour { padding: 16px; gap: 22px; } .jour h2 { font-size: 1.6rem; } }

/* les catégories : une couleur et une image par sorte de jeu */
.portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.porte { position: relative; overflow: hidden; border-radius: var(--rayon); color: #fff; box-shadow: var(--ombre); text-decoration: none; background: var(--c); min-height: 96px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; }
.porte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; mix-blend-mode: luminosity; }
.porte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 20%, color-mix(in srgb, var(--c) 70%, #000) 100%); }
html[data-hab="B"] .porte img { opacity: .35; }
html[data-hab="C"] .porte { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 45%, #0e1424), #0e1424); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
html[data-hab="C"] .porte img { opacity: .35; mix-blend-mode: normal; }
html[data-hab="C"] .porte::after { background: linear-gradient(200deg, transparent 10%, rgba(5, 8, 16, .85)); }
.porte > * { position: relative; z-index: 1; }
.porte .glyphe { position: absolute; top: 8px; right: 10px; font-family: var(--f-titre); font-size: 1.6rem; line-height: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
html[data-hab="C"] .porte .glyphe { color: var(--c); }
.porte .glyphe svg { width: 28px; height: 28px; }
.porte b { font-family: var(--f-titre); font-weight: var(--titre-w); font-size: 1rem; line-height: 1.1; }
.porte small { font-size: .75rem; font-weight: 700; opacity: .92; }
@media (min-width: 760px) { .portes { gap: 16px; } .porte { min-height: 150px; padding: 16px; } .porte b { font-size: 1.4rem; } .porte .glyphe { font-size: 2.4rem; top: 12px; right: 14px; } .porte .glyphe svg { width: 40px; height: 40px; } .porte small { font-size: .9rem; } }
.bientot { margin: 10px 0 0; text-align: center; color: var(--doux); font-size: .88rem; }

/* titre de chaque section de l'accueil : point de couleur, nom, « Tout voir » */
.rang-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rang-tete h2 { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 1.25rem; }
.rang-tete h2::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.rang-tete a { font-weight: 800; text-decoration: none; padding: 8px 0; color: var(--texte); white-space: nowrap; }

/* ---------- Vignettes de jeux ---------- */
.grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .grille { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .grille { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.carte { display: flex; flex-direction: column; min-width: 0; background: var(--carte); border-radius: var(--rayon); overflow: hidden; text-decoration: none; color: var(--texte); box-shadow: var(--ombre); border: 1px solid transparent; }
.carte:hover { border-color: var(--c, var(--accent)); }
.carte-img { position: relative; display: block; aspect-ratio: 16 / 11; background: var(--bord); }
.carte-img { overflow: hidden; }
.carte-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease-out; will-change: transform; }
/* au survol : léger zoom, et l'image se décale un peu vers la souris (--tx / --ty posés par le petit script du gabarit) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.carte:hover .carte-img img { transform: scale(1.12) translate(var(--tx, 0%), var(--ty, 0%)); }
	.carte:hover .carte-img img.suit { transition: transform .08s linear; }
}
.carte .pastille { position: absolute; left: 6px; top: 6px; background: var(--c); color: var(--sur-couleur); font-size: .66rem; font-weight: 800; border-radius: 999px; padding: 3px 8px; letter-spacing: .04em; }
.carte .neuf { position: absolute; right: 6px; top: 6px; background: #fff; color: #1c1a18; font-size: .66rem; font-weight: 800; border-radius: 999px; padding: 3px 7px; }
.carte .place { position: absolute; left: 6px; bottom: 6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: rgba(28, 26, 24, .82); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.carte .place.medaille { background: #fff; font-size: 1.05rem; padding: 0 3px; }
.carte.fait .carte-img::after { content: "✓"; position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: #2e9e5b; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.carte.fait .carte-img[data-record]::after { content: attr(data-record); width: auto; padding: 0 9px; border-radius: 13px; font-size: .8rem; font-variant-numeric: tabular-nums; }
/* partie pas finie sur cet appareil (2026-11-07) : « ▶ Reprendre · 5/12 » à la place du ✓ */
.carte.en-cours .carte-img[data-reprise]::after { content: attr(data-reprise); position: absolute; right: 6px; bottom: 6px; width: auto; max-width: calc(100% - 12px); height: 26px; padding: 0 10px; border-radius: 13px; background: #e2771b; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.carte b { display: block; padding: 8px 10px 0; font-size: .95rem; line-height: 1.2; }
.carte small { display: block; padding: 2px 10px 10px; color: var(--doux); font-size: .8rem; }
html[data-hab="B"] .carte b, html[data-hab="C"] .carte b { border-top: 3px solid var(--c); padding-top: 7px; }

/* ---------- Publicité : places réservées (hauteur fixée d'avance), jamais pendant la partie ---------- */
.pub { display: grid; place-items: center; min-height: 280px; border-radius: var(--rayon); background: color-mix(in srgb, var(--bord) 35%, transparent); position: relative; overflow: hidden; }
.pub ins { width: 100%; }
.pub-mot { position: absolute; top: 4px; left: 10px; font-size: .68rem; color: var(--doux); text-transform: uppercase; letter-spacing: .08em; }
.pub-essai { min-height: 250px; border: 2px dashed var(--bord); background: none; color: var(--doux); font-size: .9rem; }
@media (min-width: 760px) { .pub { min-height: 120px; } .pub-essai { min-height: 110px; } }

/* ---------- Page d'une catégorie ---------- */
.bandeau { position: relative; overflow: hidden; border-radius: var(--rayon); color: #fff; padding: 18px 16px; background: var(--c); min-height: 110px; display: flex; flex-direction: column; justify-content: flex-end; margin: 14px 0 16px; }
html[data-hab="C"] .bandeau { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 40%, #0e1424), #0e1424); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.bandeau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; mix-blend-mode: luminosity; }
.bandeau > :not(img) { position: relative; }
.bandeau h1 { margin: 0; color: #fff; }
html[data-hab="C"] .bandeau h1 { color: var(--c); }
.bandeau p { margin: 2px 0 0; opacity: .95; max-width: 700px; }
.vide { text-align: center; padding: 48px 16px; }
/* la pub dans la grille : toute la largeur, après 4 lignes sur téléphone (8 jeux) et 2 lignes sur grand écran ; les jeux
   suivants reprennent sur la ligne d'après, sans laisser de case vide, quel que soit le nombre de jeux par ligne */
.grille > .pub { grid-column: 1 / -1; grid-row: 5; }
@media (min-width: 760px) { .grille > .pub { grid-row: 3; } }
/* pastilles de tri (Nouveaux, Facile, Moyen, Difficile) : une ligne qui glisse de côté sur téléphone */
.tri { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px; scrollbar-width: none; }
.tri::-webkit-scrollbar { display: none; }
.tri .puce { flex: none; min-height: 44px; font-weight: 700; }
/* 📶 Choisir par difficulté : un petit choix en bas de page, visible sans attirer l'œil */
.par-niveau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 18px 0; color: var(--doux); font-size: .9rem; }
.par-niveau a { color: inherit; font-weight: 700; padding: 8px 4px; }
.par-niveau small { font-weight: 400; }
.par-niveau .niv { white-space: nowrap; }
.tri .puce.actif { background: var(--c); border-color: var(--c); color: var(--sur-couleur); }
@media (min-width: 760px) { .tri { margin: 0 0 18px; padding: 0; flex-wrap: wrap; } }

/* ---------- Page d'un jeu ---------- */
.fil { margin-top: 14px; color: var(--doux); font-size: .92rem; }
.fil a { color: var(--doux); }
.consigne { font-size: 1.02rem; }
/* le jeu dans la page (ordinateur) : toute la hauteur visible sous la barre du haut (55 px, 65 px dès 900 px de large) */
.cadre-jeu { width: 100%; height: calc(100vh - 75px); height: calc(100dvh - 75px); min-height: 420px; border: 0; border-radius: var(--rayon); background: #16191c; display: block; }
@media (min-width: 900px) { .cadre-jeu { height: calc(100vh - 85px); height: calc(100dvh - 85px); } }
@media (max-width: 760px) { .cadre-jeu { height: 78vh; } }
/* le jeu dans la page : d'abord son image et « ▶ Jouer », puis le jeu à la même place (rien ne saute) */
.scene-jeu { position: relative; scroll-margin-top: 65px; }
@media (min-width: 900px) { .scene-jeu { scroll-margin-top: 75px; } }
/* téléphone : avant « Jouer », l'image entière (le jeu, lui, s'ouvre sur tout l'écran) */
@media (max-width: 760px) { .scene-jeu:has(.lancer) .cadre-jeu { height: auto; min-height: 0; aspect-ratio: 1280 / 715; } }
/* ordinateur, partie lancée : le jeu sort de la colonne du site et prend la largeur de la fenêtre (image plus grande, liste sur le côté) */
@media (min-width: 1240px) { .scene-jeu:not(:has(.lancer)) { width: min(100vw - 32px, 1800px); margin-left: calc(50% - min(50vw - 16px, 900px)); } }
.lancer { position: absolute; inset: 0; padding: 0; border: 0; border-radius: var(--rayon); overflow: hidden; background: #16191c; cursor: pointer; display: grid; place-items: center; }
.lancer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: filter .2s, transform .4s; }
.lancer:hover img, .lancer:focus-visible img { filter: brightness(.9); transform: scale(1.02); }
.lancer .bouton { position: relative; box-shadow: 0 6px 24px #0008; }
/* plein écran demandé par le joueur (« Plein écran ») : le jeu couvre toute la fenêtre, « Quitter » le remet dans la page */
.cadre-jeu.plein { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; z-index: 1000; }
/* téléphone qui ne se met pas en largeur : le jeu pivote d'un quart de tour sur tout l'écran (voir pivoter dans vues/jeu.php) */
.cadre-jeu.plein.pivote { inset: 0 auto auto 100vw; inset: 0 auto auto 100dvw; width: 100vh; width: 100dvh; height: 100vw; height: 100dvw; transform-origin: 0 0; transform: rotate(90deg); }
html.jeu-plein, html.jeu-plein body { overflow: hidden; touch-action: pan-x pan-y; }
/* iPhone : la page reste défilable derrière le jeu, pour que Safari puisse cacher ses barres ; le voile prend le geste du doigt */
html.jeu-plein.jeu-glisser, html.jeu-plein.jeu-glisser body { overflow: visible; }
html.jeu-plein.jeu-glisser body { min-height: 300vh; }
.glisser { position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; color: #fff; background: #000b; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.glisser[hidden] { display: none; }
.glisser strong { font-size: 1.3rem; }
.glisser small { opacity: .8; }
.glisser .doigt { font-size: 2.6rem; animation: glisser-doigt 1.4s ease-in-out infinite; }
@keyframes glisser-doigt { 0%, 100% { transform: translateY(16px); opacity: .5; } 60% { transform: translateY(-16px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .glisser .doigt { animation: none; } }
.description { font-size: 1.02rem; margin-top: 18px; max-width: 820px; }
.description h2 { margin-top: .8em; }
/* « Encore des … » sous le jeu : six jeux du même genre (les déjà faits passent à la fin et se cachent) */
.encore { margin-top: 28px; }
.grille.six > .carte:nth-child(n+7) { display: none; }
@media (min-width: 1100px) { .grille.six { grid-template-columns: repeat(6, 1fr); } }

/* ---------- Textes : présentation de l'accueil (repliée), pages fixes ---------- */
.a-propos { border-top: 1px solid var(--bord); padding-top: 8px; }
.a-propos summary { cursor: pointer; font-weight: 800; padding: 10px 0; list-style-position: inside; }
.presentation, .texte { max-width: 820px; }
.presentation h2, .texte h2 { margin-top: 1.4em; }
.faq details { border-bottom: 1px solid rgba(128,128,128,.3); padding: .55em 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: .5em 0 0; }
.texte-categorie { border-top: 1px solid var(--bord); margin-top: 28px; padding-top: 4px; }
.texte { margin-bottom: 20px; }
.texte .a-remplir { background: #fff3cd; color: #3b2f00; padding: 2px 6px; border-radius: 6px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px 18px; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--texte); text-align: center; }
.tuile:hover { border-color: var(--accent); }
.etiquette { display: inline-block; background: var(--accent); color: var(--sur-couleur); padding: 4px 14px; border-radius: 999px; font-weight: 700; margin: 0; }

/* ---------- Pied de page ---------- */
.pied { margin-top: 48px; border-top: 1px solid var(--bord); background: var(--carte); }
.pied .conteneur { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; padding-top: 20px; padding-bottom: 24px; color: var(--doux); font-size: .92rem; }
.pied-phrase { flex-basis: 100%; margin: 0; }
.pied-jeux { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pied-jeux a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 700; color: var(--texte); text-decoration: none; }
.pied-jeux .pt { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pied-liens { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.pied-liens a { padding: 6px 0; color: var(--doux); }
/* choix de l'habillage (le temps que kaki choisisse) */
.habillages { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.habillages button { font: inherit; font-size: .85rem; border: 1px solid var(--bord); background: var(--fond); color: var(--texte); border-radius: 999px; padding: 6px 12px; cursor: pointer; min-height: 36px; }
.habillages button[aria-pressed="true"] { background: var(--texte); color: var(--fond); border-color: var(--texte); }

/* ---------- Tous les jeux : filtres des joueurs (étiquettes) ---------- */
.filtres { display: grid; gap: 10px; margin: 0 0 24px; }
.filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filtre-nom { font-weight: 700; min-width: 90px; }
.puce { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); color: var(--texte); text-decoration: none; font-size: .95rem; }
.puce small { opacity: .6; }
.puce:hover { border-color: var(--accent); }
.puce.actif { background: var(--accent); border-color: var(--accent); color: var(--sur-couleur); }
.effacer { justify-self: start; font-size: .95rem; }
.apercu-gestion { background: #fff4d6; color: #5a4300; border-radius: var(--rayon); padding: 8px 12px; }
.pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0; }
.pages a { padding: 10px 14px; border: 1px solid var(--bord); border-radius: 10px; text-decoration: none; color: var(--texte); }
.pages a.actif { background: var(--accent); border-color: var(--accent); color: var(--sur-couleur); }

/* ---------- Formulaire de contact ---------- */
.formulaire { display: grid; gap: 14px; max-width: 560px; }
.formulaire label { display: grid; gap: 4px; font-weight: 700; }
.formulaire input, .formulaire textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--texte); }
.formulaire .bouton { justify-self: start; }
.formulaire .piege { position: absolute; left: -9999px; }
.erreur { color: #b3261e; font-weight: 700; }
html[data-hab="C"] .erreur { color: #ff8a80; }
.merci { font-size: 1.15rem; font-weight: 700; }
/* « 🚩 Signaler un problème » sous le jeu */
.signaler-lien { margin: 8px 0 0; text-align: right; }
.signaler-lien button { background: none; border: 0; padding: 6px 4px; color: var(--doux); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.signaler { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: var(--rayon); background: var(--carte); color: var(--texte); padding: 18px 20px 20px; box-shadow: 0 12px 40px #0006; }
.signaler::backdrop { background: #000a; }
.signaler h2 { margin: 0 0 4px; }
.signaler .formulaire p { margin: 0; }
.signaler fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 2px; }
.signaler legend { font-weight: 700; padding: 0 0 4px; }
.signaler .choix { display: flex; gap: 10px; align-items: center; font-weight: 400; padding: 6px 0; cursor: pointer; }
.signaler .choix input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.signaler select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--texte); }
.signaler .boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.bouton-discret { background: none; color: var(--texte); border: 2px solid var(--bord); box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- « 🏆 Mes parties » : historique du joueur sur cet appareil ---------- */
.parties-jouees { margin: 10px 0 0; }
.mon-record { margin: 10px 0 0; font-weight: 700; }
.mon-record a { font-weight: 800; white-space: nowrap; }
.mp-total { font-weight: 800; font-size: 1.1rem; margin: 4px 0 14px; }
.mp-liste { display: grid; gap: 10px; }
.mp-jeu { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; align-items: center; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 10px; }
.mp-img { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: calc(var(--rayon) - 6px); overflow: hidden; background: var(--bord); }
.mp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-img .pastille { position: absolute; left: 4px; top: 4px; background: var(--c); color: var(--sur-couleur); font-size: .6rem; font-weight: 800; border-radius: 999px; padding: 2px 6px; letter-spacing: .04em; }
.mp-infos { min-width: 0; }
.mp-titre { display: block; font-weight: 800; color: var(--texte); text-decoration: none; line-height: 1.2; }
.mp-chiffres { margin: 4px 0 2px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.mp-record { font-variant-numeric: tabular-nums; }
.mp-jeu .bouton { grid-column: 1 / -1; }
@media (min-width: 760px) { .mp-jeu { grid-template-columns: 160px 1fr auto; } .mp-jeu .bouton { grid-column: auto; } }
.mp-pied { margin-top: 24px; text-align: center; }
.mp-pied button { background: none; border: 0; padding: 6px 4px; color: var(--doux); font: inherit; text-decoration: underline; cursor: pointer; }

.integrer { width: min(640px, calc(100% - 32px)); }
.integrer p { margin: 8px 0 0; }
.integrer-apercu { display: block; width: 100%; height: 340px; border: 1px solid var(--bord, #8884); border-radius: 8px; margin-top: 4px; background: #1d1a17; }
#integrer-code { width: 100%; box-sizing: border-box; margin-top: 4px; font: 12px/1.4 ui-monospace, monospace; padding: 8px; border-radius: 8px; resize: vertical; }
.integrer .boutons { margin-top: 12px; }

/* Page « Comment jouer » illustrée */
.cj-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.cj-cat { display: block; text-decoration: none; color: var(--texte); background: var(--carte); border: 2px solid var(--bord); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); text-align: center; }
.cj-cat:hover { border-color: var(--accent); }
.cj-cat b { display: block; padding: 8px 6px 10px; font-size: .95rem; }
.cj-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--bord); overflow: hidden; }
.cj-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cj-ico { font-size: 3rem; }
.cj-vis { background: var(--carte); border: 2px dashed var(--bord); border-radius: var(--rayon); padding: 14px; margin: 10px 0 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cj-rang { justify-content: center; }
.cj-gros { font-size: 2.6rem; gap: 26px; }
.cj-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--sur-couleur); font-weight: 800; font-size: 1.5rem; box-shadow: var(--ombre); }
.cj-btn i { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; line-height: 22px; border-radius: 11px; background: var(--c-let); color: #fff; font-size: .8rem; font-style: normal; text-align: center; }
.cj-geste, .cj-fleche, .cj-halo { font-size: 1.5rem; font-weight: 800; color: var(--doux); }
.cj-scene { position: relative; flex: 1 1 220px; min-height: 120px; border-radius: 12px; background: linear-gradient(135deg, #f6d9a8, #e9b97a); font-size: 4.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cj-cache { position: absolute; font-size: 1.1rem; opacity: .55; filter: saturate(.6); }
.cj-liste { display: flex; gap: 8px; }
.cj-obj { background: var(--fond); border: 2px solid var(--bord); border-radius: 12px; padding: 8px 12px; font-size: 1.5rem; }
.cj-obj.ok { border-color: var(--c-nom); background: #e3f6f1; color: #0b5d53; }
.cj-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 52px; padding: 0 10px; border-radius: 14px; font-size: 1.7rem; font-weight: 800; opacity: .75; transform: rotate(-4deg); }
.cj-chip.l { background: #ece3fa; color: var(--c-let); transform: rotate(5deg); }
.cj-chip.n { background: #dff3ef; color: var(--c-nom); }

.cj-langue { display: flex; gap: 12px; align-items: center; background: #fff3cd; color: #3b2f00; border: 2px solid #f0c040; border-radius: var(--rayon); padding: 12px 16px; margin: 16px 0; font-size: 1.05rem; }
.cj-langue > span:first-child { font-size: 2rem; }
.cj-capture { margin: 12px 0 16px; }
.cj-capture img { width: 100%; height: auto; display: block; border-radius: var(--rayon); border: 2px solid var(--bord); box-shadow: var(--ombre); }