/* ==========================================================================
POLICES EXTERNES — fichiers déposés dans le dossier « polices/ », À CÔTÉ de
index.html (comme « fonds/ » pour les décors). Si un fichier manque, le repli
système prend le relais (voir --police-* plus bas). font-display:swap =
le texte s'affiche tout de suite, puis la police se substitue au chargement.
========================================================================== */
@font-face{ font-family:"Andika"; font-weight:400; font-display:swap; src:url("polices/Andika-400.ttf"); }
@font-face{ font-family:"Andika"; font-weight:700; font-display:swap; src:url("polices/Andika-700.ttf"); }
/* Baloo 2 en police VARIABLE (400 → 800, licence OFL, sous-ensemble latin) : l'ancien fichier
n'avait que la graisse normale, d'où des titres « sans gras ». Repli sur l'ancien fichier. */
@font-face{ font-family:"Baloo 2 PG"; font-weight:400 800; font-display:swap;
src:url("polices/Baloo2-variable.woff2") format("woff2"), url("polices/Baloo_2.woff2") format("woff2"); }
@font-face{ font-family:"Comfortaa PG"; font-weight:400; font-display:swap; src:url("polices/Comfortaa-Regular.ttf"); }
@font-face{ font-family:"Comfortaa PG"; font-weight:700; font-display:swap; src:url("polices/Comfortaa-Bold.ttf"); }
@font-face{ font-family:"Luciole"; font-weight:400; font-display:swap; src:url("polices/Luciole-400.woff2"); }
@font-face{ font-family:"Luciole"; font-weight:700; font-display:swap; src:url("polices/Luciole-700.woff2"); }
@font-face{ font-family:"Marelle"; font-weight:400; font-display:swap; src:url("polices/Marelle-Regular.ttf"); }
@font-face{ font-family:"Nunito PG"; font-weight:400; font-display:swap; src:url("polices/Nunito-Regular.ttf"); }
@font-face{ font-family:"Nunito PG"; font-weight:700; font-display:swap; src:url("polices/Nunito-Bold.ttf"); }
@font-face{ font-family:"OpenDyslexic"; font-weight:400; font-display:swap; src:url("polices/OpenDyslexic-Regular.otf"); }
@font-face{ font-family:"Fredoka PG"; font-weight:400; font-display:swap; src:url("polices/fredoka-400.woff2"); }
@font-face{ font-family:"Fredoka PG"; font-weight:700; font-display:swap; src:url("polices/fredoka-700.woff2"); }
@font-face{ font-family:"Quicksand PG"; font-weight:400; font-display:swap; src:url("polices/quicksand-latin-400-normal.ttf"); }
@font-face{ font-family:"Quicksand PG"; font-weight:700; font-display:swap; src:url("polices/quicksand-latin-700-normal.ttf"); }
/* ==========================================================================
THE PLAYGROUND v0.3 — feuille de style unique
--------------------------------------------------------------------------
DIRECTION : LA COUR À LA CRAIE.
Trois couleurs, pas une de plus : ROUGE, JAUNE, BLEU. Ce sont celles des
marquages d'une cour d'école, et se limiter à trois oblige chaque couleur
à porter une information — jamais un ornement.
Le sol est un gris neutre et lisse. Les dessins d'enfants (marelle, ballon,
soleil, étoile) sont TRACÉS à la craie, jamais illustrés : un trait clair,
irrégulier, qui reste loin derrière le contenu.
Deux règles de fond héritées des versions précédentes :
• PEINTURE (--p-*) contre ENCRE (--e-*). Les aplats gardent la même
saturation jour et nuit ; les textes colorés s'ajustent au thème. Sans
cette séparation, chaque règle serait à repeindre deux fois.
• Le terrain de jeu est TOUJOURS blanc, quel que soit le thème : un jeu
projeté se lit mieux en noir sur blanc, et les images fournies par les
enseignants ont presque toujours un fond blanc.
1. Jetons & thèmes 2. Sol 3. Écritures 4. Boutons 5. Zones
6. Craie 7. Cartes 8. La cour 9. Le préau 10. Le terrain
11. Clavier 12. Les jeux 13. Panneau 14. Bas de page 15. Réglages
========================================================================== */
/* ---------- 1. Jetons & thèmes ---------- */
:root{
/* Les trois couleurs. Aplats : identiques dans les deux thèmes.
Le texte qui se pose dessus n'est pas le même partout : le jaune est
clair, il appelle une encre sombre ; le rouge et le bleu sont sombres,
ils appellent du blanc. Mesuré, pas supposé. */
--p-rouge:#d42a1f; --p-jaune:#ffc42e; --p-bleu:#1f6ec2;
/* Le score volant (+1 / −1) est posé sur : ces deux encres doivent
donc exister à la racine, pas seulement dans #vue-jeu. */
--ok:#0f9d63; --ko:#e63329;
/* « encre » : l'encre principale. Elle était employée à sept endroits sans
avoir jamais été définie — les couleurs de texte retombaient sur l'héritage
(parfois juste, parfois non) et les FONDS devenaient transparents, ce qui
rendait les bulles de survol illisibles. On l'aligne sur --ligne, qui suit
le thème. */
--encre:var(--ligne);
--sur-peinture:#1a1c22; /* encre sombre — sur le jaune */
--sur-rouge:#ffffff; --sur-jaune:#1a1c22; --sur-bleu:#ffffff;
--trait:3px; --trait-fin:2px;
--rayon:14px; --rayon-s:10px;
--decal:0 4px 0 var(--ombre-portee);
--gite:-.6deg;
/* Quatre écritures au choix, aucune à télécharger : toutes sont déjà
installées sur au moins un système courant. Le repli final est une grasse
arrondie, jamais un sans-serif plat. */
--police-ecole: "Chalkboard SE", "Comic Sans MS", "Segoe Print", "Bradley Hand",
"Marker Felt", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
--police-ronde: ui-rounded, "Hiragino Maru Gothic ProN", "Quicksand", "Comfortaa",
"Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", sans-serif;
--police-classique: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Lettres larges et ouvertes : le repli le plus sûr pour les lecteurs
fragiles, sans dépendre d'un fichier de police. */
--police-lisible: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif;
/* Polices externes (fichiers dans polices/) — repli système si absentes. */
--police-andika: "Andika", Verdana, Tahoma, sans-serif;
--police-luciole: "Luciole", Verdana, Tahoma, sans-serif;
--police-opendyslexic: "OpenDyslexic", Verdana, Tahoma, sans-serif;
--police-comfortaa: "Comfortaa PG", ui-rounded, "Trebuchet MS", sans-serif;
--police-nunito: "Nunito PG", system-ui, "Segoe UI", sans-serif;
--police-fredoka: "Fredoka PG", ui-rounded, "Trebuchet MS", sans-serif;
--police-quicksand: "Quicksand PG", ui-rounded, "Trebuchet MS", sans-serif;
--police-baloo: "Baloo 2 PG", ui-rounded, "Trebuchet MS", sans-serif;
--police-marelle: "Marelle", "Comic Sans MS", ui-rounded, sans-serif;
--texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
--bas:50px;
}
/* --craieface se résout ICI, sur body : les surcharges data-police ne sont
visibles que sur body et ses descendants, jamais sur :root. */
body { --craieface:var(--police-ecole); }
body[data-police="ecole"] { --craieface:var(--police-ecole); }
body[data-police="ronde"] { --craieface:var(--police-ronde); }
body[data-police="classique"] { --craieface:var(--police-classique); }
body[data-police="lisible"] { --craieface:var(--police-lisible); }
body[data-police="andika"] { --craieface:var(--police-andika); }
body[data-police="luciole"] { --craieface:var(--police-luciole); }
body[data-police="opendyslexic"] { --craieface:var(--police-opendyslexic); }
body[data-police="comfortaa"] { --craieface:var(--police-comfortaa); }
body[data-police="nunito"] { --craieface:var(--police-nunito); }
body[data-police="fredoka"] { --craieface:var(--police-fredoka); }
body[data-police="quicksand"] { --craieface:var(--police-quicksand); }
body[data-police="baloo"] { --craieface:var(--police-baloo); }
body[data-police="marelle"] { --craieface:var(--police-marelle); }
/* — Plein jour — */
:root, body[data-theme="jour"]{
--sol:#eceef1; --sol-2:#f6f7f9; --sol-3:#e0e3e7;
--bloc:#ffffff;
--ligne:#1d2027;
--efface:rgba(29,32,39,.72);
--voile:rgba(29,32,39,.07);
--voile-fort:rgba(29,32,39,.24);
--ombre-portee:rgba(29,32,39,.20);
--craie-trait:rgba(29,32,39,.16);
--veil-carte:rgba(29,32,39,.74);
--e-rouge:#c22a1e; --e-jaune:#8a6200; --e-bleu:#175f9f; --e-violet:#6b3fa0; --e-vert:#2f7d34;
}
/* — Tombée de nuit — */
body[data-theme="nuit"]{
--sol:#262a31; --sol-2:#2f333c; --sol-3:#1e2128;
--bloc:#343943;
--ligne:#f2f4f6;
--efface:rgba(242,244,246,.66);
--voile:rgba(242,244,246,.10);
--voile-fort:rgba(242,244,246,.26);
--ombre-portee:rgba(0,0,0,.40);
--craie-trait:rgba(242,244,246,.15);
--veil-carte:rgba(12,14,18,.80);
/* --encre vaut var(--ligne), mais calculée sur :root (encre sombre) : on la
recalcule ici, sinon consignes et panneaux restaient sombres sur sombre. */
--encre:var(--ligne);
--e-rouge:#ff8a7d; --e-jaune:#ffc42e; --e-bleu:#7cc0ff; --e-violet:#c9a3f0; --e-vert:#7fca7f;
}
/* Certaines surfaces restent BLANCHES dans les deux thèmes : les cartes
d'Associer images, les cartes de l'Œil de lynx, la tuile mystère, l'encart
QR. En tombée de nuit, --ligne devient une encre CLAIRE : leur texte y
virait au gris pâle, illisible. On y rétablit donc une encre sombre fixe,
et des couleurs vives qui tiennent sur blanc. */
body[data-theme="nuit"] .ap-carte .ap-mot,
body[data-theme="nuit"] .dobble-mot,
body[data-theme="nuit"] .qr-note{ color:#1a1c22; }
body[data-theme="nuit"] .kim-mystere .kim-q{ color:#175f9f; }
body[data-theme="nuit"] .dobble-sym--mot:hover .dobble-mot{ color:#175f9f; }
/* Chaque famille de contenu a sa couleur : quelles activités peuvent
échanger leur jeu. C'est une information, pas une décoration. */
:root{ --fam-paires:var(--e-bleu); --fam-mots:var(--e-bleu); --fam-images:var(--e-rouge);
--fam-categories:var(--e-jaune); --fam-quiz:var(--e-violet); --fam-phrases:var(--e-vert); }
/* ---------- 2. Sol ----------
Uni. Aucun grain, aucun semis de points : le fond ne doit rien disputer
aux dessins de craie ni au contenu. */
*{ box-sizing:border-box; }
/* `min-height` et non `height` : le corps peut grandir avec son contenu, ce qui
est indispensable pour que le pied de page reste collé en bas des pages
courtes SANS recouvrir les pages longues. */
html{ height:100%; overscroll-behavior:none; }
body{ min-height:100%; overscroll-behavior:none; }
body{ margin:0; font-family:var(--texte); font-size:16px; color:var(--ligne);
background:var(--sol); transition:background-color .2s, color .2s; }
h1,h2,h3{ margin:0; }
button{ font-family:inherit; cursor:pointer; color:inherit; }
input,textarea,select{ font-family:var(--texte); font-size:15px; }
:focus-visible{ outline:3px solid var(--p-bleu); outline-offset:3px; }
[hidden]{ display:none !important; }
/* ---------- 3. Écritures ---------- */
.ecrit{ font-family:var(--craieface); font-weight:700; letter-spacing:.01em; }
.marque{ border:0; background:none; padding:5px 2px; display:flex; align-items:center; gap:12px; }
.marque .mot{ font-family:var(--craieface); font-weight:700; font-size:clamp(21px,2.7vw,30px);
line-height:1; letter-spacing:.01em; }
.marque:hover .mot{ color:var(--e-bleu); }
/* Le logo : trois carrés d'une marelle — rouge en haut, jaune dessous,
bleu à sa droite. Les teintes sont fixes : le logo ne change pas de
couleur avec le thème. */
.marelle{ display:grid; grid-template-columns:repeat(2,12px); grid-template-rows:repeat(2,12px);
gap:1.5px; flex:none; transform:rotate(-6deg); }
.marelle i{ display:block; width:12px; height:12px; border-radius:2.2px; }
.marelle i:nth-child(1){ grid-area:1 / 1; background:#cc3326; }
.marelle i:nth-child(2){ grid-area:2 / 1; background:#f4be37; }
.marelle i:nth-child(3){ grid-area:2 / 2; background:#2d6fc4; }
/* ---------- 4. Boutons ----------
TOUS les boutons ont un fond blanc. La couleur ne sert qu'au trait et au
texte : elle désigne l'action sans jamais l'assombrir. */
.bouton{ font-family:var(--craieface); font-weight:700; font-size:clamp(14px,1.35vw,16px);
line-height:1; border:var(--trait) solid var(--ligne); border-radius:var(--rayon-s);
background:var(--bloc); color:var(--ligne); padding:11px 16px;
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
box-shadow:var(--decal); transition:transform .08s, box-shadow .08s, background .12s; }
.bouton:hover{ background:var(--sol-2); }
.bouton:active{ transform:translateY(3px); box-shadow:none; }
.bouton .em{ font-family:var(--texte); font-size:1.1em; }
.bouton--rouge{ border-color:var(--e-rouge); color:var(--e-rouge); }
.bouton--jaune{ border-color:var(--e-jaune); color:var(--e-jaune); }
/* Jaune du logo pour le trait, encre sombre pour le texte (le jaune est trop
clair pour servir de texte sur fond blanc). */
.bouton--collection{ border-color:var(--p-jaune); color:var(--sur-jaune); }
.bouton--collection:hover{ background:var(--p-jaune); color:var(--sur-jaune); border-color:var(--p-jaune); }
.bouton--bleu{ border-color:var(--e-bleu); color:var(--e-bleu); }
.bouton--fantome{ border-color:var(--voile-fort); color:var(--efface); box-shadow:none; }
.bouton--fantome:hover{ border-color:var(--ligne); color:var(--ligne); }
.bouton--petit{ font-size:13px; padding:10px 12px; min-height:42px; box-shadow:none; border-width:var(--trait-fin); }
.bouton--icone{ padding:0; width:44px; height:44px; justify-content:center; font-size:18px; }
.bouton[disabled]{ opacity:.38; cursor:not-allowed; box-shadow:none; }
/* ---------- 5. Zones ----------
Le nom de chaque zone est écrit à cheval sur la ligne qui la délimite,
comme le nom d'un terrain tracé au sol. */
.zone{ position:relative; border:var(--trait) solid var(--voile-fort); border-radius:var(--rayon);
padding:26px 20px 18px; margin:0 0 26px; background:var(--bloc); }
.zone > .nom-zone{ position:absolute; top:-.72em; left:18px;
font-family:var(--craieface); font-weight:700; font-size:clamp(15px,1.6vw,18px);
line-height:1.2; background:var(--bloc); padding:0 10px; }
.zone--rouge{ border-color:var(--e-rouge); } .zone--rouge > .nom-zone{ color:var(--e-rouge); }
.zone--jaune{ border-color:var(--e-jaune); } .zone--jaune > .nom-zone{ color:var(--e-jaune); }
.zone--bleu{ border-color:var(--e-bleu); } .zone--bleu > .nom-zone{ color:var(--e-bleu); }
.zone--violet{ border-color:var(--e-violet); } .zone--violet > .nom-zone{ color:var(--e-violet); }
.zone--phrases{ border-color:var(--e-vert); } .zone--phrases > .nom-zone{ color:var(--e-vert); }
.mention{ font-size:13.5px; color:var(--efface); line-height:1.5; margin:0 0 6px; }
.mention code{ font-family:var(--mono); font-size:12px; background:var(--voile);
padding:2px 6px; border-radius:4px; color:var(--ligne); }
.mention strong{ color:var(--ligne); }
/* ---------- 6. Craie ----------
Un seul tracé : la marelle. Cantonné à l'accueil — sous un formulaire, un
fond dessiné ne rend service à personne. */
.decor{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; display:none; }
body[data-decor="1"] .decor{ display:block; }
.decor svg{ position:absolute; }
.decor .tr{ fill:none; stroke:var(--craie-trait); stroke-width:3;
stroke-linecap:round; stroke-linejoin:round; }
.decor .tr-fin{ stroke-width:2.2; }
.decor .nb{ font-family:var(--craieface); font-weight:700; fill:var(--craie-trait); font-size:24px; text-anchor:middle; }
.decor .d-marelle{ right:24px; bottom:64px;
/* La marelle est deux fois plus haute que large : on la borne d'abord par la
hauteur disponible pour qu'elle tienne entière dans le coin. */
height:clamp(180px,32vh,300px); width:auto; }
/* ---------- 7. Cartes ---------- */
.groupe{ margin-bottom:26px; }
.groupe-titre{ font-family:var(--craieface); font-weight:700; font-size:15px; color:var(--efface);
margin-bottom:11px; display:flex; align-items:center; gap:10px; }
.groupe-titre::after{ content:""; flex:1; height:2px; background:var(--voile); border-radius:2px; }
/* Un titre de groupe qui porte un bouton d'action : le trait passe entre le
texte et le bouton, jamais après. */
.groupe-titre--action{ gap:12px; }
.groupe-titre--action > span:first-child{ flex:none; }
.groupe-titre--action::after{ order:1; }
.groupe-titre--action .bouton{ order:2; flex:none; }
.groupe-vide{ color:var(--efface); font-size:14px; margin:0; padding:14px 16px;
border:2px dashed var(--voile); border-radius:var(--rayon); }
.vide-collections{ text-align:center; padding:48px 24px; border:2px dashed var(--voile);
border-radius:var(--rayon); background:var(--bloc); max-width:560px; margin:20px auto; }
.vide-collections .ic{ font-size:52px; display:block; margin-bottom:10px; }
.vide-collections .t{ font-family:var(--craieface); font-weight:700; font-size:20px; margin:0 0 6px; }
.vide-collections .d{ color:var(--efface); font-size:14.5px; line-height:1.5; margin:0 auto 18px; max-width:400px; }
/* Glisser une carte vers un dossier. */
.enveloppe[draggable="true"]{ cursor:grab; }
.enveloppe.en-vol{ opacity:.4; }
.enveloppe.en-vol .carte{ cursor:grabbing; }
[data-cible-dossier].survol-depot .carte{ border-color:var(--e-rouge);
box-shadow:0 0 0 3px var(--e-rouge), var(--decal); transform:translateY(-3px); }
/* Sélecteur d'activités à ranger. */
.rg-liste{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto;
margin:12px 0; padding-right:4px; }
.rg-item{ display:flex; align-items:center; gap:11px; padding:9px 11px;
border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s);
cursor:pointer; transition:border-color .12s, background .12s; }
.rg-item:hover{ border-color:var(--ligne); background:var(--voile); }
.rg-item:has(input:checked){ border-color:var(--e-rouge); background:var(--survol-rouge, var(--voile)); }
.rg-item input{ flex:none; width:18px; height:18px; accent-color:var(--e-rouge); }
.rg-emoji{ flex:none; width:38px; height:38px; display:grid; place-items:center; font-size:26px; }
.rg-emoji img{ width:38px; height:38px; object-fit:cover; border-radius:7px;
border:var(--trait-fin) solid var(--voile-fort); }
.rg-texte{ display:flex; flex-direction:column; min-width:0; }
.rg-nom{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rg-meta{ font-size:12.5px; color:var(--efface); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Tuiles compactes : on doit voir toute une classe d'un coup d'œil. */
.grille-cartes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr)); gap:14px;
grid-auto-rows:1fr; }
.grille-cartes--dossiers{ grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); }
/* Tablette : au maximum 4 tuiles d'activité par ligne (elles seraient sinon trop
petites), et 5 pour les dossiers (plus compacts). */
@media (min-width:700px) and (max-width:1024px){
.grille-cartes{ grid-template-columns:repeat(4, 1fr); }
.grille-cartes--dossiers{ grid-template-columns:repeat(5, 1fr); }
}
.enveloppe{ position:relative; display:flex; }
.carte{ flex:1; position:relative; text-align:left; display:block;
padding:15px 15px 13px 18px; min-height:132px; overflow:hidden;
border:var(--trait-fin) solid var(--voile-fort);
border-left:6px solid var(--bord, var(--voile-fort)); border-radius:var(--rayon);
background:var(--bloc); box-shadow:var(--decal); transform:rotate(var(--gite));
transition:transform .13s cubic-bezier(.2,.9,.3,1.3), box-shadow .13s, border-color .13s; }
.carte[data-bord="dossier"], .carte[data-bord="paires"]{ --bord:var(--p-bleu); }
.carte[data-bord="images"]{ --bord:var(--p-rouge); }
.carte[data-bord="categories"]{ --bord:var(--p-jaune); }
.carte[data-bord="quiz"]{ --bord:var(--e-violet); }
.carte[data-bord="phrases"]{ --bord:var(--e-vert); }
.carte[data-bord="collection"]{ --bord:var(--p-jaune); }
.carte:hover{ transform:rotate(0deg) translateY(-3px); box-shadow:0 8px 0 var(--ombre-portee);
border-color:var(--bord, var(--ligne)); border-left-width:8px; }
.enveloppe:nth-child(even) .carte{ --gite:.7deg; }
/* L'emoji d'une tuile occupe la même surface qu'une vignette importée (46px),
pour que les cartes à icône et les cartes à image s'alignent visuellement. */
.carte .emoji{ display:flex; align-items:center; justify-content:center;
width:46px; height:46px; font-size:32px; line-height:1; margin-bottom:8px;
overflow:hidden; flex:none; }
.carte .emoji img{ width:46px; height:46px; object-fit:cover; border-radius:8px;
border:var(--trait-fin) solid var(--voile-fort); }
.carte .nom{ display:block; font-family:var(--craieface); font-weight:700; font-size:15px;
line-height:1.15; overflow-wrap:anywhere; }
.carte .nb{ display:block; font-family:var(--mono); font-size:11px; color:var(--efface); margin-top:5px; }
.carte .avert{ display:block; margin-top:6px; font-size:11.5px; color:var(--e-rouge); line-height:1.25; }
.carte.ajout{ background:none; border-style:dashed; box-shadow:none; color:var(--efface); padding-bottom:13px;
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; min-height:112px; transform:none; }
.carte.ajout:hover{ border-style:solid; color:var(--ligne); transform:translateY(-3px); }
.carte.ajout .plus{ font-family:var(--craieface); font-weight:700; font-size:32px; line-height:1; }
.carte.ajout .lib{ font-family:var(--craieface); font-weight:700; font-size:13px; margin-top:3px; }
/* Au survol, la tuile entière se grise et ses actions apparaissent au centre.
La tuile au repos n'est donc encombrée de rien, et toutes gardent la même
hauteur. */
.actions-carte{ position:absolute; inset:0; left:-6px; display:flex; align-items:center;
justify-content:center; gap:9px; flex-wrap:wrap; padding:10px; cursor:pointer;
border-radius:var(--rayon); background:var(--veil-carte);
opacity:0; pointer-events:none; transition:opacity .14s ease; }
.enveloppe:hover .actions-carte, .enveloppe:focus-within .actions-carte{
opacity:1; pointer-events:auto; }
.actions-carte button{ width:42px; height:42px; flex:none; border-radius:10px;
border:var(--trait-fin) solid transparent; background:#fff; color:#1d2027;
font-size:16px; display:grid; place-items:center; box-shadow:0 2px 0 rgba(0,0,0,.25);
transition:transform .1s, box-shadow .1s; }
.actions-carte button:hover{ transform:translateY(-2px); box-shadow:0 4px 0 rgba(0,0,0,.25); }
.actions-carte button:active{ transform:translateY(2px); box-shadow:none; }
.actions-carte button.jouer{ width:54px; height:54px; font-size:21px;
background:var(--p-bleu); color:var(--sur-bleu); }
.actions-carte button.jouer[disabled]{ background:#fff; color:#8a8f98; box-shadow:none;
cursor:not-allowed; }
.actions-carte button.oter:hover{ background:var(--p-rouge); color:var(--sur-rouge); }
/* La croix de suppression, en haut à droite de la tuile : discrète au repos,
elle apparaît au survol au-dessus de l'overlay d'actions et vire au rouge. */
.carte-croix{ position:absolute; top:6px; right:6px; z-index:4;
width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); color:var(--efface);
font-size:14px; line-height:1; cursor:pointer; box-shadow:var(--decal);
opacity:0; pointer-events:none; transition:opacity .14s, background .12s, color .12s, transform .1s, border-color .12s; }
.enveloppe:hover .carte-croix, .enveloppe:focus-within .carte-croix{ opacity:1; pointer-events:auto; }
.carte-croix:hover{ background:var(--p-rouge); color:var(--sur-rouge); border-color:transparent; transform:scale(1.1); }
.carte-croix:active{ transform:scale(.92); }
@media (hover:none){ .carte-croix{ opacity:1; pointer-events:auto; } }
/* La flèche « remonter » : à gauche de la croix, elle sort l'élément du dossier
courant vers le dossier parent (ou la cour). N'apparaît que dans un dossier. */
.carte-remonter{ position:absolute; top:6px; right:38px; z-index:4;
width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); color:var(--efface);
font-size:15px; line-height:1; cursor:pointer; box-shadow:var(--decal);
opacity:0; pointer-events:none; transition:opacity .14s, background .12s, color .12s, transform .1s, border-color .12s; }
.enveloppe:hover .carte-remonter, .enveloppe:focus-within .carte-remonter{ opacity:1; pointer-events:auto; }
.carte-remonter:hover{ background:var(--p-bleu); color:var(--sur-bleu, #fff); border-color:transparent; transform:scale(1.1); }
.carte-remonter:active{ transform:scale(.92); }
@media (hover:none){ .carte-remonter{ opacity:1; pointer-events:auto; } }
/* Sans survol — tableau interactif, tablette — les actions restent affichées
sous la tuile, car il n'y a rien à survoler. */
@media (hover:none){
.actions-carte{ position:static; inset:auto; opacity:1; pointer-events:auto;
background:none; padding:9px 0 0; margin-top:10px; justify-content:flex-start;
border-top:2px solid var(--voile); border-radius:0; cursor:default; }
.actions-carte button{ box-shadow:none; border-color:var(--voile-fort); }
.actions-carte button.jouer{ width:42px; height:42px; font-size:16px; }
}
.actions-carte button{ flex:1; min-width:0; height:32px; border:var(--trait-fin) solid var(--voile-fort);
background:var(--bloc); border-radius:7px; font-size:13px; color:var(--efface);
display:grid; place-items:center; }
.actions-carte button:hover{ border-color:var(--ligne); color:var(--ligne); background:var(--sol-2); }
.actions-carte button.jouer{ flex:1.4; border-color:var(--e-bleu); color:var(--e-bleu); }
.actions-carte button.jouer:hover{ background:var(--p-bleu); color:var(--sur-bleu); border-color:var(--p-bleu); }
.actions-carte button.jouer[disabled]{ opacity:.34; cursor:not-allowed; background:var(--bloc);
border-color:var(--voile-fort); color:var(--efface); }
.actions-carte button.oter:hover{ border-color:var(--e-rouge); color:var(--e-rouge); background:var(--bloc); }
.ruban{ display:inline-block; margin-top:8px; font-family:var(--craieface); font-weight:700;
font-size:11px; line-height:1; padding:5px 8px; border-radius:5px;
color:var(--sur-bleu); background:var(--p-bleu); }
.ruban[data-c="images"]{ background:var(--p-rouge); color:var(--sur-rouge); }
.ruban[data-c="categories"], .ruban[data-c="collection"]{
background:var(--p-jaune); color:var(--sur-jaune); }
/* ---------- 8. La cour ---------- */
.cour{ max-width:1140px; margin:0 auto; padding:18px clamp(14px,3.5vw,36px) 50px; }
.entete-cour{ display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; margin-bottom:22px; }
.entete-cour .outils{ margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; }
.fil{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-family:var(--mono); font-size:12.5px; }
.fil button{ border:0; background:none; padding:2px 4px; color:var(--efface);
font-family:inherit; font-size:inherit; border-radius:4px; }
.fil button:hover{ color:var(--ligne); background:var(--voile); }
.fil .sep{ color:var(--efface); opacity:.5; }
.titre-page{ font-family:var(--craieface); font-weight:700; font-size:clamp(28px,4.2vw,44px);
line-height:1.02; overflow-wrap:anywhere; }
.sous-compte{ font-family:var(--mono); font-size:12.5px; color:var(--efface); margin-top:7px; }
.barre-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 24px; align-items:center; }
/* Le grand départ : trois portes, une par couleur. */
.trois-portes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr)); gap:14px;
margin-bottom:28px; }
.porte{ border:var(--trait) solid var(--ligne); border-radius:var(--rayon); padding:20px 18px;
background:var(--bloc); text-align:left; display:flex; flex-direction:column; gap:7px;
box-shadow:var(--decal); transition:transform .13s, box-shadow .13s, background .13s; }
.porte:hover{ transform:translateY(-3px); box-shadow:0 9px 0 var(--ombre-portee); background:var(--sol-2); }
.porte:active{ transform:translateY(3px); box-shadow:none; }
.porte .ic{ font-size:32px; line-height:1; }
.porte .t{ font-family:var(--craieface); font-weight:700; font-size:19px; }
.porte .d{ font-size:13px; color:var(--efface); line-height:1.4; }
.porte--activite{ border-color:var(--e-rouge); } .porte--activite .t{ color:var(--e-rouge); }
.porte--dossier{ border-color:var(--e-bleu); } .porte--dossier .t{ color:var(--e-bleu); }
.porte--collection{ border-color:var(--e-jaune); } .porte--collection .t{ color:var(--e-jaune); }
/* ---------- 9. Le préau ---------- */
.rangee{ display:flex; gap:12px; flex-wrap:wrap; }
.champ{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; flex:1 1 160px; }
.champ label, .entetes-col label, .bloc-cat .etiq{ font-family:var(--craieface); font-weight:700;
font-size:12.5px; color:var(--efface); }
.champ input[type=text], .champ input[type=url], .champ input[type=password],
.champ textarea, .champ select, .ligne-item input[type=text],
.bloc-cat textarea, .bloc-cat input{
border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s); padding:10px 12px;
background:var(--sol-2); color:var(--ligne); width:100%; }
.champ input:focus, .champ select:focus, .champ textarea:focus,
.ligne-item input:focus, .bloc-cat input:focus, .bloc-cat textarea:focus{
border-color:var(--p-bleu); outline:none; background:var(--bloc); }
.champ textarea, .bloc-cat textarea{ resize:vertical; min-height:54px; }
.champ select{ appearance:none;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 18px) 52%, calc(100% - 12px) 52%;
background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:34px; }
.choix-mode{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; }
.entetes-col{ display:grid; gap:11px; margin-bottom:8px; }
.ligne-item{ display:grid; gap:11px; align-items:start; margin-bottom:9px; }
.ligne-item .num{ font-family:var(--craieface); font-weight:700; font-size:16px; color:var(--efface);
padding-top:11px; text-align:right; }
.ligne-item .sup{ border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc);
border-radius:var(--rayon-s); width:42px; height:44px; font-size:14px; color:var(--efface); }
.ligne-item .sup:hover{ border-color:var(--e-rouge); color:var(--e-rouge); }
.zone-image{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
img.vignette{ height:44px; width:44px; object-fit:contain; background:#fff; border-radius:8px;
border:var(--trait-fin) solid var(--voile-fort); background:#fff; }
.bloc-cat{ border:var(--trait-fin) dashed var(--voile-fort); border-radius:var(--rayon);
padding:14px; margin-bottom:12px; }
.bloc-cat .tete{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.bloc-cat .tete input{ flex:1; }
.bloc-cat .etiq{ display:block; margin-bottom:5px; }
.plot{ width:15px; height:15px; border-radius:3px; flex:none; }
/* Éditeur du Quiz Show : une carte par question. */
.bloc-q{ border:var(--trait-fin) dashed var(--voile-fort); border-radius:var(--rayon);
padding:14px; margin-bottom:14px; }
.bloc-q .tete{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.bloc-q .tete input[data-champ="enonce"]{ flex:1; font-weight:700; }
.q-num{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
background:var(--e-violet); color:#fff; font-family:var(--craieface); font-weight:700; }
.q-corps{ display:flex; gap:16px; flex-wrap:wrap; }
.q-gauche{ flex:1; min-width:260px; }
.q-type{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.q-type label{ display:flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
border:var(--trait-fin) solid var(--voile-fort); cursor:pointer; font-size:14px; }
.q-type label.actif{ border-color:var(--e-violet); background:color-mix(in srgb, var(--e-violet) 12%, transparent); }
.q-options{ display:flex; flex-direction:column; gap:7px; }
.q-opt{ display:flex; align-items:center; gap:9px; }
.q-opt input[type="checkbox"]{ flex:none; width:20px; height:20px; accent-color:var(--ok); }
.q-opt input[type="text"]{ flex:1; }
.q-opt .sup{ flex:none; }
.q-texte .etiq{ display:block; margin:8px 0 5px; }
/* --- Sélecteur de son (mot lu, lien mp3, ou fichier du Nuage) --- */
.son-barre{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.son-barre input[type="text"]{ flex:1; min-width:0; }
.son-etat{ min-height:18px; font-size:13px; color:var(--efface); margin:6px 0; }
.son-nav{ margin-top:10px; border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s); overflow:hidden; }
.son-fil{ padding:7px 10px; font-size:13px; font-weight:600; background:var(--voile);
border-bottom:var(--trait-fin) solid var(--voile-fort); word-break:break-all; }
.son-liste{ max-height:230px; overflow:auto; }
.son-item{ display:block; width:100%; text-align:left; padding:8px 10px; border:0; background:none;
cursor:pointer; font:inherit; font-size:14px; color:inherit; }
.son-item:hover{ background:var(--voile); }
.son-item:disabled{ opacity:.5; cursor:default; }
.son-info{ padding:12px; font-size:13px; color:var(--efface); line-height:1.5; }
/* Cellule d'une colonne « Son » : le champ, plus le bouton 🎵. */
.cell-son{ display:flex; gap:6px; align-items:center; min-width:0; }
.cell-son input[type="text"]{ flex:1; min-width:0; }
.cell-son.a-fichier input[type="text"]{ font-size:12px; color:var(--efface); }
/* Bouton son d'une question de quiz. */
.q-son{ flex:none; width:34px; height:34px; border-radius:var(--rayon-s); cursor:pointer;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); font-size:15px; }
.q-son.actif{ border-color:var(--e-violet); background:var(--e-violet); }
.quiz-reecoute{ cursor:pointer; font-size:.7em; vertical-align:middle; opacity:.85; }
/* Bascule entre les deux modes de saisie. */
.mode-saisie{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.q-video{ margin-top:10px; }
.q-video .etiq{ display:block; margin:0 0 5px; }
.q-video > input[type="text"]{ width:100%; }
.q-bornes{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;
font-size:13px; color:var(--efface); }
.q-bornes input[type="text"]{ width:96px; }
.q-image{ flex:none; width:150px; }
.q-ajout-img{ width:150px; height:120px; border:2px dashed var(--voile-fort); border-radius:var(--rayon-s);
background:var(--bloc); color:var(--efface); cursor:pointer; font-size:13px; line-height:1.4;
display:grid; place-items:center; transition:border-color .12s; }
.q-ajout-img span{ font-size:30px; display:block; }
.q-ajout-img:hover{ border-color:var(--e-violet); }
.q-vignette{ position:relative; width:150px; }
.q-vignette img{ width:150px; height:120px; object-fit:contain; background:#fff; border-radius:var(--rayon-s);
border:var(--trait-fin) solid var(--voile-fort); }
.q-oter{ position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%;
background:#111; color:#fff; border:2px solid #fff; cursor:pointer; font-size:15px; font-weight:700;
display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.5); z-index:3;
transition:transform .1s, background .12s; }
.q-oter:hover{ background:var(--ko); transform:scale(1.12); }
/* La barre du bas : l'enregistrement au pied du formulaire, là où le regard
finit sa course. */
/* La barre « Enregistrer / Jouer » n'est PLUS fixée : elle vit en bas du
contenu de l'éditeur et se rejoint en faisant défiler la page, comme le pied
de page. On ne masque donc plus rien derrière elle. */
.barre-bas{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
border:0; border-top:var(--trait) solid var(--ligne); border-radius:0;
background:var(--bloc); padding:16px clamp(14px,3.5vw,36px); margin:22px 0 0; }
.barre-bas .temoin{ margin-left:8px; }
/* L'éditeur réserve de la place en bas pour ne rien cacher derrière le bandeau fixe (barre + footer). */
#vue-preau{ padding-bottom:0; }
.temoin{ font-family:var(--mono); font-size:12px; color:var(--efface); }
.poids-act{ border:1px solid var(--voile-fort); border-radius:6px; padding:2px 7px; }
.poids-act--lourd{ color:var(--e-rouge); border-color:var(--e-rouge); }
/* Copier l'image ou n'en garder que le lien. */
.px-copie{ display:flex; align-items:flex-start; gap:9px; margin:12px 0 2px;
font-size:13.5px; line-height:1.35; cursor:pointer; }
.px-copie input{ margin-top:3px; flex:none; }
.px-copie small{ display:block; color:var(--efface); font-size:12px; }
.temoin[data-etat="enregistre"]{ color:var(--e-bleu); }
/* ---------- 10. Le terrain ----------
TOUJOURS blanc, dans les deux thèmes : un jeu projeté se lit mieux en noir
sur blanc, et les images des enseignants ont presque toujours un fond blanc.
On redéfinit donc localement tous les jetons de surface. */
.grille-jeux{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,156px),1fr)); gap:12px; }
.tuile-jeu{ position:relative; border:var(--trait-fin) solid var(--pot,var(--voile-fort));
border-radius:var(--rayon); background:var(--bloc); padding:14px 12px 12px; text-align:left;
display:flex; flex-direction:column; gap:6px; min-height:134px;
box-shadow:var(--decal); transition:transform .12s, box-shadow .12s, background .12s; }
.tuile-jeu .ic{ font-size:28px; line-height:1; }
.tuile-jeu .n{ font-family:var(--craieface); font-weight:700; font-size:15px; line-height:1.1;
color:var(--pot,var(--ligne)); }
.tuile-jeu .f{ font-size:12px; color:var(--efface); line-height:1.3; margin-top:auto; }
.tuile-jeu .pourquoi{ font-size:11.5px; color:var(--e-rouge); line-height:1.3; margin-top:auto; }
.tuile-jeu:not([disabled]):hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--ombre-portee);
background:var(--sol-2); }
.tuile-jeu[disabled]{ opacity:.42; cursor:not-allowed; box-shadow:none; border-style:dashed; }
.tuile-jeu[aria-current="true"]{ box-shadow:0 0 0 3px var(--pot) inset, var(--decal); }
/* Tuiles d'un parcours : un pastillon numéroté en haut à gauche (✓ quand fait). */
.tuile-parcours .pc-rang{ position:absolute; top:8px; right:8px; min-width:26px; height:26px;
padding:0 7px; border-radius:13px; background:var(--ligne); color:var(--bloc);
font-family:var(--craieface); font-weight:700; font-size:14px; display:grid; place-items:center; line-height:1; }
.tuile-parcours.pc-fait{ border-color:var(--p-vert); }
.tuile-parcours.pc-fait .pc-rang{ background:var(--p-vert); color:#fff; }
.grille-parcours{ margin-top:6px; }
/* La consigne, en surimpression sur la scène DÉJÀ affichée : pas d'écran vide
avant le jeu, la scène (ou le menu du parcours) reste visible en fond. */
.voile-consigne{ position:absolute; inset:0; z-index:80; display:grid; place-items:center;
padding:20px; background:rgba(20,20,24,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); animation:vc-entree .18s ease; }
.voile-consigne .carte-consigne{ display:block; max-width:min(90vw,560px); width:100%;
background:var(--bloc); border-radius:var(--rayon); box-shadow:var(--decal); padding:24px 26px 20px;
text-align:center; }
.voile-consigne .modal-titre{ margin-bottom:8px; }
.voile-consigne .actions-modal{ margin-top:16px; justify-content:center; }
@keyframes vc-entree{ from{ opacity:0; } to{ opacity:1; } }
#vue-jeu{
--sol:#eef0f2; --sol-2:#e6e9ec; --sol-3:#dde1e5; --bloc:#ffffff;
--ligne:#1d2027; --efface:rgba(29,32,39,.66);
--voile:rgba(29,32,39,.07); --voile-fort:rgba(29,32,39,.26);
--ombre-portee:rgba(29,32,39,.22);
--e-rouge:#c22a1e; --e-jaune:#8a6200; --e-bleu:#175f9f; --e-violet:#6b3fa0;
position:fixed; inset:0; max-height:100dvh; z-index:40; background:var(--sol); color:var(--ligne);
display:flex; flex-direction:column; overscroll-behavior:none; }
/* En mode nuit, la scène de jeu doit rester sombre elle aussi (sinon le fond
clair « efface » le thème dès qu'on ouvre un jeu). On y reprend la palette
nuit du body. */
body[data-theme="nuit"] #vue-jeu{
--sol:#262a31; --sol-2:#2f333c; --sol-3:#1e2128; --bloc:#343943;
--ligne:#f2f4f6; --efface:rgba(242,244,246,.66);
--voile:rgba(242,244,246,.10); --voile-fort:rgba(242,244,246,.26);
--ombre-portee:rgba(0,0,0,.40);
--e-rouge:#ff6b5e; --e-jaune:#e0b64a; --e-bleu:#5aa9e6; --e-violet:#b18ce0; }
@media (prefers-reduced-motion:no-preference){
#vue-jeu:not([hidden]){ animation:sifflet .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes sifflet{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
}
/* Le bandeau du terrain : une bande unie, d'une seule couleur. */
/* Le bandeau prend une des trois couleurs à chaque partie : la classe voit
d'un coup d'œil qu'on a changé de jeu. */
.jeu-hud{ flex:none; display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
padding:11px clamp(12px,3vw,24px); background:var(--p-bleu); color:var(--sur-bleu); }
.jeu-hud[data-teinte="rouge"]{ background:var(--p-rouge); color:var(--sur-rouge); }
.jeu-hud[data-teinte="jaune"]{ background:var(--p-jaune); color:var(--sur-jaune); }
.jeu-hud[data-teinte="bleu"] { background:var(--p-bleu); color:var(--sur-bleu); }
/* Le nom de l'activité et son sous-titre partagent UNE ligne : empilés, ils
donnaient au bandeau une seconde ligne pour rien, et rognaient d'autant la
place du jeu. Le sous-titre suit le nom, séparé par une fine barre. */
.jeu-hud > div:first-child{ display:flex; align-items:baseline; gap:10px;
min-width:0; flex:0 1 auto; overflow:hidden; }
.jeu-hud .titre{ font-family:var(--craieface); font-weight:700; font-size:clamp(17px,2vw,23px);
line-height:1.1; white-space:nowrap; flex:none; }
.jeu-hud .liste{ font-family:var(--mono); font-size:12px; opacity:.75;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
padding-left:10px; border-left:1px solid currentColor; align-self:center; }
.jeu-hud .liste:empty{ display:none; border:0; padding:0; }
.jeu-hud .droite{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; }
/* Les actions coulent normalement dans la barre sur ordinateur… */
.jeu-actions{ display:contents; }
.jeu-actions .jeu-menu-item .lbl{ display:none; } /* icônes seules sur grand écran */
#jeu-changer .lbl{ display:inline; } /* sauf « Changer de jeu » */
/* Sur la bande colorée, les boutons restent blancs à encre sombre : c'est
lisible sur les trois couleurs sans avoir à décliner chaque état. */
.jeu-hud .bouton{ background:#fff; color:#1d2027; border-color:#fff; box-shadow:none; }
.jeu-hud .bouton:hover{ background:#e8ebee; }
/* …et se replient en menu déroulant sous un bouton burger sur téléphone. */
@media (max-width:640px){
.jeu-hud{ padding:8px 12px; gap:6px 10px; }
.jeu-hud .titre{ font-size:17px; }
.jeu-hud .liste{ display:none; }
/* Score, burger et quitter restent alignés sur une seule ligne. */
.jeu-hud .droite{ flex-wrap:nowrap; gap:6px; }
.jeu-burger{ display:inline-flex !important; }
.jeu-actions{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60;
flex-direction:column; align-items:stretch; gap:6px; padding:8px; min-width:210px;
background:#fff; border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.28); }
.jeu-actions.ouvert{ display:flex; }
.jeu-actions .bouton{ width:100%; justify-content:flex-start; gap:12px; height:auto; padding:11px 14px; font-size:16px; }
.jeu-actions .bouton .lbl{ display:inline !important; font-family:var(--craieface); font-weight:700; }
.jeu-actions .bouton--icone{ width:100%; }
}
.score{ font-family:var(--craieface); font-weight:700; font-size:clamp(17px,2.2vw,24px);
line-height:1; padding:9px 15px; border-radius:9px; background:#fff; color:#1d2027; }
.score b{ color:#c22a1e; }
.jeu-scene{ flex:1; min-height:0; overflow:hidden; overflow:clip; overscroll-behavior:none; display:flex; flex-direction:column;
align-items:center; justify-content:center; position:relative; }
.jeu-large{ justify-content:flex-start; }
/* Les jeux « pleine largeur » (associer images, placement…) recuperent la
marge laterale : plus de blancs inutiles a gauche et a droite. */
.jeu-scene .jeu-piste:has(.app-zones){ padding-left:6px; padding-right:6px; }
/* La piste porte tout le contenu du jeu. Elle est mise à l'échelle par le JS
(Scene.ajuster) pour TENIR dans la scène : la page de jeu ne défile jamais. */
.jeu-piste{ display:flex; flex-direction:column; align-items:center; width:100%;
gap:clamp(8px,1.5vh,18px); padding:clamp(6px,1.1vh,14px) clamp(6px,1.2vw,22px);
text-align:center; transform-origin:center center; will-change:transform; box-sizing:border-box; }
/* Sur téléphone : padding gauche/droite réduit → tuiles plus larges. Et les
étiquettes de texte sont un peu plus grosses. */
@media (max-width:560px){
.jeu-piste{ padding-left:6px; padding-right:6px; }
.app-reserve{ padding:8px 5px; gap:8px; }
/* Texte du menu burger bien noir. */
.jeu-actions .bouton, .jeu-actions .bouton .lbl,
#jeu-burger, #jeu-burger .lbl, #jeu-burger [aria-hidden]{ color:#111 !important; }
}
.consigne{ font-size:clamp(15px,1.9vw,22px); color:var(--efface); max-width:32ch; line-height:1.4;
text-align:center; margin-left:auto; margin-right:auto; }
/* Posée à même la piste (donc sur le fond décoratif du thème), la consigne se
met sur un panneau blanc bordé : lisible de loin, quel que soit le fond.
Ciblage en ENFANT DIRECT : les consignes logées dans une carte (flashcards,
écran de fin, plateaux de quiz) gardent leur habillage propre. */
.jeu-piste > .consigne, .panneau-consigne, .jeu-piste > .ta-panneau{
background:var(--bloc); color:var(--encre);
border:var(--trait-fin) solid var(--ligne); border-radius:var(--rayon);
box-shadow:var(--decal); padding:clamp(7px,1.2vh,12px) clamp(12px,1.8vw,22px);
max-width:min(92vw,46ch); margin-left:auto; margin-right:auto; }
.mot-geant{ font-family:var(--craieface); font-weight:700; font-size:clamp(40px,8.5vw,110px);
line-height:1.02; overflow-wrap:anywhere; max-width:15ch; }
/* Flashcards : une vraie carte qui se retourne en 3D. */
.fc-scene{ perspective:1400px; display:flex; justify-content:center; margin:6px 0 18px; }
.fc-carte{ position:relative; width:min(92vw, 74vh, 720px); min-height:180px; aspect-ratio:3/2;
transform-style:preserve-3d; transition:transform .5s cubic-bezier(.3,.8,.35,1.1); }
/* Dès que la hauteur est posée en JS (pour s'adapter aux textes longs),
l'aspect-ratio ne s'applique plus — la hauteur explicite prime. */
.fc-carte[style*="height"]{ aspect-ratio:auto; }
.fc-carte[data-face="1"]{ transform:rotateY(180deg); }
.fc-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
border:3px solid var(--ligne); border-radius:20px; background:var(--bloc);
display:grid; place-items:center; padding:18px; box-shadow:var(--decal); overflow:hidden; }
.fc-verso{ transform:rotateY(180deg); }
/* Le texte est ajusté en JS pour remplir la carte ; cette taille est le plafond. */
.fc-texte{ font-family:var(--craieface); font-weight:700; font-size:clamp(30px,7vw,88px);
line-height:1.08; text-align:center; overflow-wrap:anywhere; color:var(--encre); }
/* Par défaut l'image est entière et CENTRÉE dans la carte. En mode « remplir »
elle couvre toute la carte et se déplace au glisser (objectPosition posé en
JS) ; un double-clic la recentre. */
.fc-img{ display:block; width:100%; height:100%; max-width:100%; max-height:100%;
min-width:0; min-height:0; object-fit:contain; object-position:50% 50%; }
.fc-img[data-cadre="remplir"]{ width:100%; height:100%; max-width:none; max-height:none;
object-fit:cover; cursor:grab; touch-action:none; }
.fc-img[data-cadre="remplir"].fc-glisse{ cursor:grabbing; }
/* Le bouton de recadrage, jumeau du bouton d'écoute, posé en bas à gauche. */
.fc-cadrer{ position:absolute; left:6px; bottom:6px; width:clamp(40px,6vw,52px);
height:clamp(40px,6vw,52px); border-radius:50%; border:0; cursor:pointer;
background:var(--bloc); color:var(--ligne); font-size:clamp(17px,2.3vw,23px); line-height:1;
display:grid; place-items:center; box-shadow:0 3px 10px rgba(0,0,0,.28);
transition:transform .1s; }
.fc-cadrer:hover{ transform:scale(1.08); }
.fc-cadrer:active{ transform:scale(.96); }
/* Une image de flashcard peut porter un bouton d'écoute (le mot associé) :
« image + son » sur la même carte. Le bouton se pose en bas à droite. */
/* Le bloc image occupe TOUTE la zone utile de la face (padding 18px compris).
En absolu + place-items:center hérité, il se dimensionnait sur l'image et
celle-ci débordait en bas : il est désormais étiré, hauteur bornée. */
.fc-img-bloc{ position:relative; place-self:stretch; width:100%; height:100%;
min-width:0; min-height:0; display:grid; place-items:center; overflow:hidden; }
.fc-ecoute{ position:absolute; right:6px; bottom:6px; width:clamp(40px,6vw,52px);
height:clamp(40px,6vw,52px); border-radius:50%; border:0; cursor:pointer;
background:var(--e-bleu); color:#fff; font-size:clamp(19px,2.6vw,26px); line-height:1;
display:grid; place-items:center; box-shadow:0 3px 10px rgba(0,0,0,.28);
transition:transform .1s; }
.fc-ecoute:hover{ transform:scale(1.08); }
.fc-ecoute:active{ transform:scale(.96); }
.fc-sous{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.indice-geant{ font-family:var(--craieface); font-weight:700; font-size:clamp(22px,4vw,52px);
line-height:1.1; color:var(--e-bleu); overflow-wrap:anywhere; }
.jeu-fin{ display:flex; flex-direction:column; align-items:center; gap:18px; }
/* Fin de partie : le mot d'encouragement se pose sur un panneau blanc, au
centre de l'écran — même dans les jeux « pleine largeur », où la piste est
normalement collée en haut. */
.jeu-piste > .jeu-fin{ background:var(--bloc); color:var(--encre);
border:var(--trait) solid var(--ligne); border-radius:var(--rayon);
box-shadow:var(--decal); max-width:min(94vw,860px);
padding:clamp(20px,3.4vh,44px) clamp(22px,4vw,56px); margin:auto; }
.jeu-scene .jeu-piste:has(> .jeu-fin){ margin:auto; justify-content:center; }
.jeu-fin .gros{ font-family:var(--craieface); font-weight:700; font-size:clamp(32px,6vw,76px); line-height:1.05; }
.jeu-fin .suite{ display:flex; gap:11px; flex-wrap:wrap; justify-content:center; }
.progression{ font-family:var(--mono); font-size:13px; color:var(--efface); }
/* Elle suit souvent une rangée de boutons : on lui donne de l'air, et un fond
blanc discret pour rester lisible sur les fonds de thème. */
.jeu-piste > .progression{ margin-top:clamp(6px,1.4vh,14px);
margin-bottom:clamp(6px,1.4vh,14px);
background:var(--bloc); color:var(--encre); border-radius:999px;
padding:4px 14px; box-shadow:var(--decal); }
/* En tête de piste (Devine-mot, Anagramme, Flashcards…) elle annonce ce qui
suit : pas de marge haute inutile, mais de l'air avant la grille. */
.jeu-piste > .progression:first-child{ margin-top:0; margin-bottom:clamp(10px,2.2vh,24px); }
.pastille-tts{ border:var(--trait) solid var(--ligne); background:var(--bloc);
width:62px; height:62px; border-radius:50%; font-size:25px; display:grid; place-items:center;
flex:none; box-shadow:var(--decal); }
.pastille-tts:hover{ background:var(--sol-2); }
.pastille-tts:active{ transform:translateY(3px); box-shadow:none; }
/* Carte « son » : le mot est caché, on l'écoute. Un haut-parleur qui invite au
clic, dimensionné en em pour suivre la taille de la carte qui l'accueille. */
.carte-son{ display:inline-grid; place-items:center; cursor:pointer;
width:1.7em; height:1.7em; border-radius:50%; font-size:1.15em; line-height:1;
color:var(--ligne); background:var(--voile); border:var(--trait-fin) solid var(--voile-fort);
transition:transform .12s ease, background .12s ease; }
.carte-son:hover{ background:var(--sol-2); transform:scale(1.06); }
.carte-son:active{ transform:scale(.94); }
.fc-son{ display:grid; place-items:center; font-size:clamp(48px,11vh,110px); }
.img-jeu{ max-width:min(46vw,420px); max-height:38vh; border-radius:var(--rayon-s); background:#fff;
border:var(--trait-fin) solid var(--voile-fort); object-fit:contain; }
.ruban-etape{ font-family:var(--craieface); font-weight:700; font-size:12.5px; padding:5px 11px;
border-radius:6px; background:var(--p-jaune); color:var(--sur-jaune); }
/* Le rail : les jeux nourris par le même contenu, à portée de clic. */
/* Le rail des jeux compatibles, à droite : de petites icônes qui grossissent
au survol, comme les applications du dock d'un Mac. Elles prennent ainsi peu
de place au repos et laissent la scène respirer. */
.rail-jeux{ position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:5;
display:flex; flex-direction:column; gap:5px; }
/* La bulle est SŒUR du bouton, pas son enfant : sinon l'agrandissement au
survol l'étirerait elle aussi, et le texte deviendrait flou et décalé. */
.rail-case{ position:relative; display:block; }
.rail-jeux .etiq-rail{ font-family:var(--craieface); font-weight:700; font-size:9px;
color:var(--efface); text-align:center; line-height:1.15; margin-bottom:1px; }
.rail-jeux button{ position:relative; width:36px; height:36px; border-radius:9px;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); font-size:17px;
display:grid; place-items:center; transform-origin:right center;
transition:transform .16s cubic-bezier(.2,.8,.3,1.25), border-color .12s, box-shadow .16s; }
/* Le grossissement se fait par transform : il ne déplace pas ses voisines. */
.rail-jeux button:hover,
.rail-jeux button:focus-visible{ border-color:var(--ligne); z-index:7;
transform:scale(1.42) translateX(-2px); box-shadow:0 4px 14px rgba(0,0,0,.24); }
.rail-emoji{ display:grid; place-items:center; line-height:1; }
.rail-jeux button[aria-current="true"]{ border-color:var(--p-bleu); box-shadow:0 0 0 3px var(--p-bleu) inset; }
/* Le nom du jeu s'affiche à gauche de sa tuile au survol. */
/* Bulle de survol : NOIR SUR BLANC dans les deux thèmes. Elle se pose sur des
fonds très variés (images de thème comprises) ; une couleur fixe est le seul
moyen de garantir qu'elle reste lisible partout. Le liseré et l'ombre la
détachent du fond. */
.rail-nom{ position:absolute; right:calc(100% + 10px); top:50%; z-index:8;
transform:translateY(-50%) translateX(6px); background:#fff; color:#1a1c22;
padding:5px 10px; border-radius:8px; font-family:var(--craieface); font-weight:700;
font-size:13px; white-space:nowrap; opacity:0; pointer-events:none;
border:1px solid rgba(0,0,0,.18); box-shadow:0 3px 12px rgba(0,0,0,.28);
transition:opacity .13s, transform .13s; }
.rail-case:hover .rail-nom,
.rail-jeux button:focus-visible + .rail-nom{ opacity:1; transform:translateY(-50%) translateX(0); }
#vue-jeu[data-rail="1"] .jeu-scene{ padding-right:58px; }
@media (max-width:1000px){ .rail-jeux{ display:none; } #vue-jeu[data-rail="1"] .jeu-scene{ padding-right:inherit; } }
/* ---------- 11. Clavier ---------- */
.clavier{ display:flex; flex-direction:column; gap:8px; align-items:center; width:100%; }
.clavier .rang{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.clavier button{ border:var(--trait-fin) solid var(--voile-fort); border-radius:9px;
background:var(--bloc); font-family:var(--craieface); font-weight:700;
font-size:clamp(16px,2vw,23px); min-width:clamp(36px,4.3vw,58px);
height:clamp(44px,6.3vh,60px); padding:0 9px; box-shadow:var(--decal);
transition:transform .07s, box-shadow .07s; }
.clavier button:hover{ background:var(--sol-2); }
.clavier button:active{ transform:translateY(3px); box-shadow:none; }
.clavier button.large{ min-width:clamp(62px,8.5vw,112px); font-size:clamp(13px,1.4vw,17px); }
.clavier button[data-etat="absent"]{ background:var(--sol-3); color:var(--efface); opacity:.5; box-shadow:none; }
.clavier button[data-etat="present"]{ background:var(--p-jaune); border-color:var(--p-jaune); color:var(--sur-jaune); }
.clavier button[data-etat="bon"]{ background:var(--p-bleu); border-color:var(--p-bleu); color:var(--sur-bleu); }
/* Téléphone : chaque rangée tient sur UNE ligne, les touches rétrécissent au lieu de passer à la ligne. */
@media (max-width:640px){
.clavier{ gap:6px; }
.clavier .rang{ flex-wrap:nowrap; gap:4px; width:100%; }
.clavier button{ min-width:0; flex:1 1 0; padding:0 2px; font-size:clamp(15px,4.4vw,20px);
height:clamp(42px,7vh,52px); }
.clavier button.large{ flex:1.7 1 0; min-width:0; font-size:clamp(12px,3.4vw,16px); }
}
/* ---------- 12. Les jeux ----------
Dans les jeux seulement, deux couleurs de plus disent juste ou faux. C'est
fonctionnel : un code qui repose sur la seule nuance de bleu se perdrait. */
#vue-jeu{ --ok:#0f9d63; --ko:#e63329; }
.grille-lettres{ display:grid; gap:clamp(3px,.5cqw,5px); font-family:var(--craieface);
font-weight:700; user-select:none; touch-action:none;
/* Repère de mesure : les lettres se dimensionnent sur la LARGEUR RÉELLE de
la grille, pas sur celle de l'écran. Avec un font-size en vw, une grille
de 15 colonnes sur écran large donnait des cases petites et des lettres
énormes, qui débordaient avant de se faire rogner. */
container-type:inline-size; }
.grille-lettres .cel{ display:grid; place-items:center; aspect-ratio:1; border-radius:5px;
background:var(--sol-2); border:1px solid var(--voile); font-size:clamp(11px,2cqw,28px);
min-width:0; min-height:0; overflow:hidden; line-height:1;
transition:background .09s, color .09s; }
/* Une case fait ~100cqi/n de large : la lettre en occupe un peu plus de la
moitié, ce qui la garde à l'aise quelle que soit la taille de la grille. */
@supports (font-size:1cqi){
.grille-lettres .cel{ font-size:min(28px, calc(100cqi / var(--mm-n,10) * .54)); }
}
.grille-lettres .cel[data-sel="1"]{ background:var(--p-jaune); border-color:var(--p-jaune); color:var(--sur-jaune); }
.grille-lettres .cel[data-trouve="1"]{ background:var(--ok); border-color:var(--ok); color:#fff; }
.grille-lettres .cel[data-faux="1"]{ background:var(--ko); border-color:var(--ko); color:#fff; animation:mm-secoue .26s; }
@keyframes mm-secoue{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } }
/* Mode défi de Mots-mêlés : un paquet à piocher, un indice à la fois. */
.mm-defi{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:4px 0; }
.mm-clue-zone{ display:flex; align-items:center; justify-content:center; min-height:64px; }
.mm-clue-zone .mm-item{ font-family:var(--craieface); font-weight:700; font-size:clamp(20px,3cqw,30px);
color:var(--ligne); background:var(--voile); border-radius:var(--rayon-s); padding:10px 18px; }
.mm-clue-zone .mm-item img{ max-height:110px; max-width:220px; object-fit:contain; border-radius:var(--rayon-s); }
.mm-clue-zone .mm-ecoute{ font-size:44px; background:none; border:0; cursor:pointer; }
.liste-a-trouver{ display:flex; flex-wrap:wrap; gap:8px 10px; justify-content:center; align-items:center;
width:100%; max-width:min(96cqw,1800px); margin-inline:auto; }
.liste-a-trouver .mm-item{ font-family:var(--craieface); font-weight:700; padding:7px 13px;
border-radius:7px; border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc);
color:var(--ligne); font-size:clamp(13px,1.6cqw,20px); display:inline-flex; align-items:center; gap:6px; }
.liste-a-trouver .mm-item img{ height:clamp(30px,4.6cqh,52px); width:auto; object-fit:contain;
display:block; border-radius:4px; }
.liste-a-trouver button.mm-ecoute{ cursor:pointer; font-size:clamp(18px,2.4cqw,26px); padding:6px 12px; }
.liste-a-trouver button.mm-ecoute:hover{ background:var(--sol-2); }
.liste-a-trouver .mm-item[data-ok="1"]{ background:var(--ok); border-color:var(--ok); color:#fff;
text-decoration:line-through; }
.liste-a-trouver .mm-item[data-ok="1"] img{ outline:2px solid #fff; }
.motus-grille{ display:grid; gap:7px; }
.motus-grille .rangee-m{ display:flex; gap:7px; justify-content:center; }
.motus-case{ width:clamp(38px,5.4cqw,72px); height:clamp(38px,5.4cqw,72px); border-radius:9px;
display:grid; place-items:center; font-family:var(--craieface); font-weight:700;
font-size:clamp(20px,3cqw,40px); border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); }
.motus-case[data-e="bon"]{ background:var(--ok); border-color:var(--ok); color:#fff; }
.motus-case[data-e="present"]{ background:var(--p-jaune); border-color:var(--p-jaune); color:var(--sur-jaune); }
.motus-case[data-e="absent"]{ background:var(--sol-3); border-color:var(--sol-3); color:var(--efface); }
.cases-mot{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.case-lettre{ min-width:clamp(30px,4.4cqw,58px); height:clamp(46px,6.4cqw,76px); border-radius:8px;
display:grid; place-items:center; font-family:var(--craieface); font-weight:700;
font-size:clamp(22px,3.4cqw,44px); border-bottom:4px solid var(--ligne); background:var(--sol-2); }
/* Pendu : un terme en plusieurs mots. Chaque mot est un groupe insécable ; le
retour à la ligne se fait ENTRE les mots, jamais au milieu de l'un d'eux. */
.pendu-groupe{ display:flex; gap:8px; flex-wrap:nowrap; }
.cases-mot:has(.pendu-groupe){ gap:10px clamp(20px,3.4cqw,44px); align-items:flex-end; }
/* Trait d'union, apostrophe… : donnés d'emblée, sans case à remplir. */
.case-lettre.case-donnee{ background:transparent; border-bottom-color:var(--voile-fort);
color:var(--efface); min-width:clamp(18px,2.4cqw,30px); }
.case-lettre.ok{ background:var(--ok); color:#fff; border-color:var(--ok); }
.case-lettre.faux{ background:var(--ko); color:#fff; border-color:var(--ko); }
/* Mot composé : un blanc entre « pomme », « de » et « terre ». */
.case-lettre.coupe, .motus-case.coupe{ margin-left:clamp(8px,1.8cqw,22px); }
.tuiles-lettres{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; max-width:min(92cqw,880px);
/* Respiration entre la zone « mot à composer » et le vivier de lettres. */
margin-top:clamp(10px,2.4cqh,26px); }
.tuile-l{ border:var(--trait) solid var(--ligne); border-radius:10px; background:var(--bloc);
font-family:var(--craieface); font-weight:700; font-size:clamp(20px,3cqw,35px);
min-width:clamp(44px,5.4cqw,70px); height:clamp(50px,7.2cqh,74px); box-shadow:var(--decal);
transition:transform .07s, box-shadow .07s; }
.tuile-l:hover{ background:var(--p-jaune); border-color:var(--p-jaune); }
.tuile-l:active{ transform:translateY(3px); box-shadow:none; }
.tuile-l[disabled]{ opacity:.18; cursor:default; box-shadow:none; }
.pendu-dessin{ width:clamp(150px,20cqw,250px); height:auto; overflow:visible; }
/* La fleur porte ses couleurs en attributs (fill/stroke), plus rien à imposer ici. */
.pendu-dessin ellipse{ transition:opacity .3s; }
/* Devine-mot : le clavier virtuel ne doit pas coller à la grille Motus. */
#mo-clavier{ margin-top:clamp(10px,2.4cqh,26px); }
/* Mots mêlés : la liste des mots ne colle pas à la grille. */
.liste-a-trouver{ margin-top:clamp(10px,2.2cqh,24px); }
/* Tuiles harmonisées : rangées équilibrées et DERNIÈRE RANGÉE CENTRÉE.
Le conteneur reçoit --cols (colonnes) et --gap ; chaque tuile occupe une
fraction exacte de la largeur pour donner « --cols » tuiles par rangée. */
.tuiles-centre{ display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start;
gap:var(--gap,12px); margin:0 auto; }
.tuiles-centre > *{ flex:0 0 calc((100% - (var(--cols,4) - 1) * var(--gap,12px)) / var(--cols,4)); }
.grille-memory{ perspective:1300px; }
.mcarte{ aspect-ratio:1; border:0; background:none; padding:0; position:relative;
transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.9,.3,1.2); }
.mcarte[data-face="1"]{ transform:rotateY(180deg); }
.mcarte .f{ position:absolute; inset:0; border-radius:10px; display:grid; place-items:center;
backface-visibility:hidden; padding:6px; overflow:hidden;
border:var(--trait-fin) solid var(--voile-fort); }
/* Dos de carte : fond blanc casse. Le logo contient du bleu — sur un dos bleu,
une case du logo disparaissait. Sur blanc, les trois couleurs ressortent. */
.mcarte .dos{ background:#f7f4ec; border:3px solid var(--p-bleu); }
/* Le logo suit la taille de la carte : en pixels fixes, il remplissait
presque toute la carte sur téléphone. */
.mcarte .dos{ container-type:size; }
.mcarte .dos .marelle{ grid-template-columns:repeat(2,19cqmin); grid-template-rows:repeat(2,19cqmin);
gap:2cqmin; transform:rotate(-5deg); }
.mcarte .dos .marelle i{ width:auto; height:auto; border-radius:4cqmin; }
/* Dos de carte PERSONNALISÉ (image choisie dans l'activité) : memory, deck,
boîtes mystérieuses. Quand il est posé, l'image remplace le motif par défaut. */
#vue-jeu[data-dos="1"] .mcarte .dos{ background-image:var(--dos-image); background-size:cover; background-position:center; }
#vue-jeu[data-dos="1"] .mcarte .dos .marelle{ display:none; }
#vue-jeu[data-dos="1"] .deck-dos{ background:var(--dos-image) center/cover no-repeat; }
#vue-jeu[data-dos="1"] .deck-dos::after{ border-color:rgba(255,255,255,.75); }
#vue-jeu[data-dos="1"] .boite .devant{ background-image:var(--dos-image) !important;
background-size:cover; background-position:center; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,.75); }
.mcarte .avant{ background:var(--bloc); color:var(--ligne); transform:rotateY(180deg);
font-family:var(--craieface); font-weight:700; font-size:clamp(12px,1.6cqw,22px);
line-height:1.1; overflow-wrap:anywhere; }
/* Le texte est un BLOC borné à la carte : il revient à la ligne au lieu de
dépasser (un texte direct dans une grille centrée prenait la largeur du texte
non coupé). La police est réduite en JS pour tenir, la carte ne change pas
de taille ; une loupe permet de lire en grand si c'est devenu petit. */
.mcarte .avant .me-mot{ display:block; width:100%; max-height:100%; text-align:center;
white-space:normal; overflow-wrap:break-word; overflow:hidden; }
.me-loupe{ position:absolute; right:1px; bottom:1px; width:26px; height:26px; border:0;
border-radius:50%; background:var(--voile-fort); color:var(--ligne); font-size:13px;
display:grid; place-items:center; cursor:zoom-in; padding:0; z-index:4; opacity:.85; }
.me-loupe:hover{ opacity:1; }
.mcarte .avant img{ max-width:100%; max-height:100%; object-fit:contain; }
.mcarte[data-pris="1"]{ opacity:.3; pointer-events:none; }
.roue-bloc{ position:relative; display:grid; place-items:center;
/* La flèche dépasse en haut et le disque descend bas : on réserve l'écart
avec le bouton « Faire tourner » qui suit. */
margin-bottom:clamp(12px,2.6cqh,28px); }
.roue{ width:var(--roue-taille,min(58cqh,60cqw,500px)); aspect-ratio:1; border-radius:50%; position:relative;
border:var(--trait) solid var(--ligne); box-shadow:var(--decal);
transition:transform 4.6s cubic-bezier(.15,.9,.2,1); }
/* Deux roues côte à côte (une par colonne). */
.roue-duo{ display:flex; gap:clamp(12px,3cqw,44px); justify-content:center; align-items:flex-start; flex-wrap:wrap; width:100%; }
.roue-col{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.roue-titre{ font-family:var(--craieface); font-weight:700; font-size:clamp(16px,2.1cqw,24px); color:var(--efface); line-height:1.1; }
.roue-duo .roue{ width:var(--roue-taille,min(40cqh,42cqw,360px)); }
.roue-fleche{ position:absolute; top:-9px; left:50%; transform:translateX(-50%);
border-left:16px solid transparent; border-right:16px solid transparent;
border-top:29px solid var(--ligne); z-index:2; }
/* L'étiquette orbite avec la roue ; son contenu tourne EN SENS INVERSE de la
même quantité, donc le mot reste horizontal pendant toute la rotation. */
.roue-etiquette{ position:absolute; left:50%; top:50%; width:47%;
height:var(--roue-bande,30px); margin-top:calc(var(--roue-bande,30px) / -2); /* hauteur reelle : sinon overflow:hidden coupe TOUT */
transform-origin:0 50%; display:flex; align-items:center; justify-content:center;
padding-left:13%; padding-right:2%; pointer-events:none; overflow:hidden; }
.roue-duo .roue-etiquette{ height:var(--roue-bande,26px); margin-top:calc(var(--roue-bande,26px) / -2); }
.roue-etiquette span{ display:block; font-family:var(--craieface); font-weight:700;
color:#1c1712; white-space:nowrap; text-align:center; line-height:1; max-width:100%;
overflow:hidden; text-overflow:ellipsis;
font-size:var(--roue-fonte,clamp(11px,1.7cqw,17px));
text-shadow:0 1px 0 rgba(255,255,255,.35); }
.roue-duo .roue-etiquette span{ font-size:var(--roue-fonte,clamp(10px,1.4cqw,15px)); }
/* Une case-image sur la roue : vignette dans le secteur. */
.roue-vignette{ display:block; width:var(--roue-vign,clamp(26px,4.4cqw,52px)); height:var(--roue-vign,clamp(26px,4.4cqw,52px));
object-fit:contain; background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.3); }
/* L'image tirée, affichée en grand. */
.roue-tire-img{ max-width:min(46cqw,340px); max-height:40cqh; object-fit:contain;
background:var(--bloc); border-radius:var(--rayon); padding:8px;
box-shadow:0 6px 20px rgba(0,0,0,.28); }
.roue-centre{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:20%; aspect-ratio:1; border-radius:50%; background:var(--bloc);
border:var(--trait) solid var(--ligne); display:grid; place-items:center; z-index:1; }
.roue-centre .marelle{ transform:rotate(-5deg) scale(1.15); }
.grille-boites{ perspective:1400px; }
.boite{ aspect-ratio:1; border:0; background:none; padding:0; position:relative;
transform-style:preserve-3d; transition:transform .42s cubic-bezier(.2,.9,.3,1.2); }
.boite[data-ouverte="1"]{ transform:rotateY(180deg); pointer-events:none; }
/* Une image révélée s'agrandit d'un clic. */
.boite.boite--image[data-ouverte="1"]{ pointer-events:auto; cursor:zoom-in; }
.boite .f{ position:absolute; inset:0; border-radius:var(--rayon-s); display:grid; place-items:center;
backface-visibility:hidden; overflow:hidden; padding:7px;
border:var(--trait-fin) solid var(--voile-fort); }
.boite .devant{ font-family:var(--craieface); font-weight:700; font-size:clamp(24px,4cqw,54px); }
.boite .derriere{ background:var(--bloc); color:var(--ligne); transform:rotateY(180deg);
font-family:var(--craieface); font-weight:700; font-size:clamp(13px,1.8cqw,28px);
line-height:1.1; overflow-wrap:anywhere; }
.boite .derriere img{ max-width:100%; max-height:100%; object-fit:contain; }
.boite:not([data-ouverte="1"]):hover{ transform:translateY(-4px); }
/* Jeu de Kim — les images dispersées sur une aire, à la volée. */
/* Quiz Show — plateau façon jeu télévisé, sur fond profond. */
.quiz-plateau{ width:min(96cqw,1100px); margin:0 auto;
background:radial-gradient(circle at 50% 30%, #26407a 0%, #16264d 65%, #0f1c3a 100%);
border-radius:var(--rayon); padding:clamp(14px,2.4cqw,26px); color:#fff;
box-shadow:inset 0 0 60px rgba(0,0,0,.35); }
.quiz-haut{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.quiz-chrono{ font-family:var(--craieface); font-weight:700; font-size:clamp(24px,4cqw,44px);
min-width:2.4em; text-align:center; color:#ffd23f; }
.quiz-chrono.presse{ color:#ff5a4d; animation:quiz-bat .6s infinite; }
@keyframes quiz-bat{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
.quiz-avance{ font-family:var(--craieface); font-weight:700; font-size:clamp(15px,2cqw,22px); opacity:.85; }
.quiz-score{ font-family:var(--craieface); font-weight:700; font-size:clamp(18px,2.6cqw,28px); color:#7dffb0; }
.quiz-scene{ display:flex; gap:clamp(14px,2.5cqw,30px); align-items:center; flex-wrap:wrap; justify-content:center; }
.quiz-image{ flex:none; }
.quiz-image img{ width:min(38cqw,360px); max-height:46cqh; object-fit:contain; background:#fff;
border-radius:var(--rayon); padding:10px; }
/* Vidéo de la question : format 16/9 fluide, coupable d'un clic. */
.quiz-video{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
.quiz-video-cadre{ width:min(46cqw,520px); aspect-ratio:16/9; max-height:52cqh;
border-radius:var(--rayon); overflow:hidden; background:#000;
box-shadow:0 6px 22px rgba(0,0,0,.45); }
.quiz-video-cadre iframe,
.quiz-video-cadre video{ width:100%; height:100%; border:0; display:block; background:#000; }
@media (max-width:760px){ .quiz-video-cadre{ width:min(92cqw,520px); max-height:38cqh; } }
.quiz-droite{ flex:1; min-width:min(90cqw,420px); }
.quiz-enonce{ font-family:var(--craieface); font-weight:700; font-size:clamp(20px,3.2cqw,38px);
line-height:1.15; margin-bottom:clamp(14px,2.4cqw,26px); text-shadow:0 2px 8px rgba(0,0,0,.4); }
.quiz-reponses{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:clamp(9px,1.6cqw,15px); }
.quiz-rep{ display:flex; align-items:center; gap:12px; text-align:left; padding:clamp(12px,2cqw,18px);
border-radius:var(--rayon); background:rgba(11,22,46,.72); color:#fff;
border:3px solid #ffd23f; cursor:pointer; font-size:clamp(15px,2.2cqw,22px);
transition:transform .1s, background .12s, border-color .12s; }
.quiz-rep:hover:not([disabled]){ transform:translateY(-2px); background:rgba(30,52,102,.9); }
.quiz-lettre{ flex:none; width:1.7em; height:1.7em; border-radius:50%; display:grid; place-items:center;
background:#ffd23f; color:#16264d; font-family:var(--craieface); font-weight:700; }
.quiz-txt{ font-family:var(--craieface); font-weight:700; }
.quiz-rep.quiz-bon{ background:var(--ok); border-color:#fff; }
.quiz-rep.quiz-mauvais{ background:var(--ko); border-color:#fff; }
.quiz-rep.quiz-retiree{ opacity:.18; pointer-events:none; }
.quiz-rep[disabled]{ cursor:default; }
.quiz-saisie{ display:flex; gap:10px; flex-wrap:wrap; }
.quiz-saisie input{ flex:1; min-width:200px; font-family:var(--craieface); font-weight:700;
font-size:clamp(18px,2.6cqw,26px); padding:12px 16px; border-radius:var(--rayon-s);
border:3px solid #ffd23f; background:rgba(11,22,46,.7); color:#fff; }
.quiz-saisie input::placeholder{ color:rgba(255,255,255,.5); }
.quiz-verdict{ margin-top:14px; font-family:var(--craieface); font-weight:700;
font-size:clamp(17px,2.4cqw,24px); min-height:1.4em; }
.quiz-verdict.juste{ color:#7dffb0; } .quiz-verdict.faux{ color:#ff8a7d; }
.quiz-jokers{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:clamp(16px,2.6cqw,28px); }
.quiz-joker{ font-family:var(--craieface); font-weight:700; font-size:clamp(13px,1.8cqw,18px);
padding:9px 18px; border-radius:999px; background:#d33b7d; color:#fff; border:2px solid #ff7ab0;
cursor:pointer; transition:transform .1s, opacity .12s; }
.quiz-joker:hover:not([disabled]){ transform:translateY(-2px); }
.quiz-joker.arme{ background:#7dffb0; color:#0f1c3a; border-color:#fff; }
.quiz-joker[disabled]{ opacity:.35; cursor:default; }
.bouton--violet{ border-color:var(--e-violet); color:var(--sur-jaune); background:var(--e-violet);
color:#fff; }
/* Associer (appariement) : zones en haut, réserve de mots en bas. La grille est
équilibrée + dernière rangée centrée par .tuiles-centre (voir plus haut). */
.app-zones{ margin:6px auto 14px; width:100%; max-width:2400px; box-sizing:border-box; }
/* ---- Associer images « clic → choix » : images grandes, cases nettes ---- */
.apc-zones{ margin:6px auto 14px; width:100%; max-width:2400px; box-sizing:border-box; }
.apc-zone{ background:var(--bloc); border:var(--trait) solid var(--ligne); border-radius:var(--rayon);
padding:8px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--decal);
transition:border-color .14s, opacity .3s, transform .3s; }
.apc-cible{ display:grid; place-items:center; min-height:min(24cqh,220px); padding:4px; }
.apc-cible img{ max-width:100%; max-height:min(24cqh,220px); object-fit:contain; cursor:zoom-in; }
.apc-cible .app-mot{ font-size:clamp(16px,2.2cqw,26px); line-height:1.16; white-space:normal;
text-align:center; font-family:var(--craieface); font-weight:700; color:var(--ligne); }
/* La case de dépôt : taille fixe, texte centré et contenu (jamais de débordement). */
.apc-fente{ height:clamp(52px,8cqh,74px); width:100%; border:2px dashed var(--voile-fort);
border-radius:var(--rayon-s); display:flex; align-items:center; justify-content:center;
text-align:center; padding:6px 10px; overflow:hidden; cursor:pointer;
background:var(--bloc); transition:background .12s, border-color .12s;
font-family:var(--craieface); font-weight:700; color:var(--ligne);
font-size:clamp(15px,1.9cqw,21px); }
.apc-fente:hover{ background:color-mix(in srgb, var(--e-violet) 8%, transparent); border-color:var(--e-violet); }
.apc-txt{ max-width:100%; max-height:100%; overflow:hidden; display:block; }
.apc-fente--vide .apc-txt{ display:none; }
.apc-vide{ font-size:clamp(20px,3cqw,30px); color:var(--voile-fort); }
.apc-fente:not(.apc-fente--vide) .apc-vide{ display:none; }
/* Page fixe (voir caler() dans associer.js) : toutes les images tiennent à l'écran. */
.apg-root{ width:100%; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; }
.apc-zones.apc-zones--fixe{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr));
grid-template-rows:repeat(var(--lignes),minmax(0,1fr)); gap:var(--gap); margin:0 auto 6px; flex:none; }
.apc-zones--fixe .apc-zone{ min-width:0; min-height:0; width:auto; margin:0; padding:2px; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.apc-zones--fixe .apc-cible{ flex:1 1 0; min-height:0; padding:0; overflow:hidden; }
.apc-zones--fixe .apc-cible img{ max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }
.apc-zones--fixe .apc-fente{ flex:none; height:var(--apc-fente); padding:1px; }
.apc-zones--fixe .apc-vide{ font-size:clamp(14px,calc(var(--apc-fente) * .55),30px); }
.apc-bon{ border-color:var(--ok); }
.apc-bon .apc-fente{ border-color:var(--ok); border-style:solid; background:color-mix(in srgb, var(--ok) 12%, transparent); }
.apc-faux{ border-color:var(--ko); }
.apc-faux .apc-fente{ border-color:var(--ko); border-style:solid; background:color-mix(in srgb, var(--ko) 12%, transparent); }
.apc-efface{ opacity:0; transform:scale(.85); pointer-events:none; }
@media (max-width:640px){
.apc-cible{ min-height:min(18cqh,150px); }
.apc-cible img{ max-height:min(18cqh,150px); }
.apc-fente{ height:clamp(44px,6.5cqh,60px); }
}
/* Pioche : une seule étiquette à glisser, centrée, renouvelée à chaque dépôt. */
.apg-pioche{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px;
min-height:74px; margin:6px auto 14px; }
/* Téléphone en hauteur : la grille (2 tuiles par rangée) dépasse l'écran ;
l'étiquette à glisser reste collée en bas, toujours à portée de doigt. */
@media (max-width:600px) and (orientation:portrait){
.apg-pioche{ position:sticky; bottom:0; z-index:6; margin:6px 0 10px; padding:8px 10px;
background:var(--bloc); border:var(--trait-fin) solid var(--voile-fort); border-radius:14px;
box-shadow:0 -6px 16px var(--voile); }
}
.apg-aide{ font-family:var(--craieface); font-weight:700; color:var(--efface); font-size:clamp(14px,1.9cqw,18px); }
.apg-fini{ font-family:var(--craieface); font-weight:700; color:var(--e-vert); font-size:clamp(14px,1.9cqw,18px); }
.apg-etq{ cursor:grab; }
.apg-vise{ background:color-mix(in srgb, var(--e-violet) 14%, transparent); border-color:var(--e-violet); border-style:solid; }
/* Étiquette posée : elle épouse la case (100 %) sans déborder. */
.apc-fente .apg-etq--pose{ width:100%; height:100%; margin:0; border-radius:var(--rayon-s);
box-shadow:none; display:flex; align-items:center; justify-content:center; overflow:hidden;
white-space:normal; padding:4px 8px; }
.apc-fente .apg-etq--pose .app-mot{ max-width:100%; max-height:100%; overflow:hidden; white-space:normal;
overflow-wrap:anywhere; word-break:break-word; }
.app-zone{ background:var(--bloc); border:var(--trait) solid var(--ligne); border-radius:var(--rayon);
padding:8px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--decal); transition:border-color .14s; }
.app-cible{ display:grid; place-items:center; min-height:min(14cqh,120px); padding:4px; }
.app-cible img{ max-width:100%; max-height:min(14cqh,120px); object-fit:contain; }
.app-mot{ font-family:var(--craieface); font-weight:700; font-size:clamp(18px,2.6cqw,30px);
text-align:center; color:var(--ligne); overflow-wrap:anywhere; max-width:100%; }
/* Associer : la cible (mot ou phrase) s'affiche entièrement, sur plusieurs
lignes si besoin, à une taille modérée. */
.app-cible .app-mot{ font-size:clamp(15px,2cqw,23px); line-height:1.16; white-space:normal; }
/* La case de dépôt a une taille FIXE (les tuiles restent uniformes) ; l'étiquette
déposée est bornée à la case, et sa police rétrécit pour y tenir (voir JS). */
.app-fente{ height:clamp(56px,8cqh,76px); border:2px dashed var(--voile-fort); border-radius:var(--rayon-s);
display:grid; place-items:center; padding:5px; transition:background .12s, border-color .12s; }
/* Dans une case de dépôt, l'étiquette épouse la case : un gros rembourrage y
volerait la place des deux lignes de texte. */
.app-fente .app-etq{ width:100%; height:100%; padding:4px 8px;
display:flex; flex-direction:column; justify-content:center; align-items:center;
text-align:center; overflow:hidden; }
.app-fente .app-etq img{ max-width:100%; max-height:100%; object-fit:contain; }
.app-fente .app-etq .app-mot{ max-width:100%; max-height:100%; overflow:hidden; }
.app-fente.app-vise{ border-color:var(--e-violet); border-style:solid; background:color-mix(in srgb, var(--e-violet) 12%, transparent); }
/* Sur téléphone : tuiles d'Associer plus LARGES que hautes — image et case plus
courtes pour gagner en largeur et perdre en longueur. */
@media (max-width:560px){
.app-cible{ min-height:min(10cqh,78px); padding:2px; }
.app-cible img{ max-height:min(10cqh,78px); }
.app-fente{ height:clamp(40px,6cqh,54px); padding:4px; }
/* Réserve : étiquettes sur une seule ligne, aussi larges que nécessaire. */
.app-reserve .app-etq{ max-width:92cqw; }
.app-reserve .app-etq--multi .app-mot{ white-space:nowrap; }
}
.app-vide{ color:var(--efface); font-size:13px; font-style:italic; }/* Un emplacement de réserve : garde sa place même quand son mot le quitte
(largeur et hauteur figées en JS au démarrage). Rien ne se décale. */
.app-slot{ display:inline-flex; align-items:center; justify-content:center; }
/* Une étiquette : un mot à glisser. */
.app-etq{ font-family:var(--craieface); font-weight:700; font-size:var(--taille-etq, clamp(15px,1.9cqw,20px));
max-width:100%; box-sizing:border-box; overflow:visible; white-space:normal; overflow-wrap:break-word;
text-align:center; touch-action:none; user-select:none; -webkit-user-select:none;
padding:12px 22px; border-radius:22px; cursor:grab;
background:var(--p-jaune); color:var(--sur-jaune); border:var(--trait) solid var(--sur-jaune);
box-shadow:0 3px 0 rgba(0,0,0,.22); transition:transform .1s, box-shadow .1s, opacity .12s; }
.app-etq:hover{ transform:translateY(-2px); box-shadow:0 5px 0 rgba(0,0,0,.22); }
.app-etq:active{ transform:translateY(1px); box-shadow:none; }
.app-etq.app-vol{ opacity:.4; }
/* Étiquette CHOISIE au tap (tactile) : bien visible, prête à être posée. */
.app-etq.app-choisi{ outline:3px solid var(--e-bleu); outline-offset:2px;
transform:translateY(-2px) scale(1.04); box-shadow:0 6px 0 rgba(0,0,0,.22); }
.app-zone{ cursor:pointer; }
.app-cible img{ cursor:zoom-in; }
.app-etq.posee{ box-shadow:none; }
.app-etq[draggable="false"]{ cursor:default; }
/* Étiquette multi-lignes (Associer, Reformer, Trier) : texte PETIT DÈS LE DÉPART
pour tenir dans la case, et retour à la ligne. Le fit au dépôt ne fait que
réduire encore un texte exceptionnellement long — jamais grandir. */
.app-etq--multi{ white-space:normal; overflow-wrap:anywhere; word-break:break-word;
line-height:1.14; text-align:center; touch-action:none; user-select:none; -webkit-user-select:none; }
/* Étiquette une-ligne (Associer images) : le terme ne revient JAMAIS à la
ligne ; la police se réduit juste ce qu'il faut (géré en JS). */
.app-etq--ligne{ white-space:nowrap; text-align:center;
touch-action:none; user-select:none; -webkit-user-select:none; }
.app-etq--ligne .app-mot{ white-space:nowrap; }
/* Une fois DÉPOSÉE dans une zone, l'étiquette épouse exactement la case : sa
police se réduit et le texte passe à la ligne (l'étiquette devient plus
« longue » en hauteur, jamais plus large que la case). */
.app-fente .app-etq--ligne{ white-space:normal; width:100%; height:100%; }
.app-fente .app-etq--ligne .app-mot{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
/* Le texte d'une étiquette (span interne) est PETIT dès le départ pour tenir
dans la case — sans toucher aux images-cibles (.app-cible .app-mot). */
.app-etq .app-mot{ font-size:clamp(15px,1.9cqw,20px); line-height:1.14; }
/* Téléphone : étiquettes de texte plus grosses (placée après la règle de
base pour la remplacer). */
@media (max-width:560px){ .app-etq .app-mot{ font-size:17px; } }
/* Réserve : les étiquettes à déposer sont BIEN plus grosses (l'ajustement les met
sur une ligne et ne rétrécit que si c'est vraiment trop long). */
.app-reserve .app-etq--gros .app-mot{ font-size:clamp(22px,3.2cqw,34px); }
.app-reserve .app-etq--ligne.app-etq--gros .app-mot{ font-size:clamp(18px,2.7cqw,28px); }
@media (max-width:560px){ .app-reserve .app-etq--gros .app-mot{ font-size:clamp(20px,6cqw,26px); } }
/* Réserve ADAPTATIVE (Associer images) : chaque étiquette prend la LARGEUR de
son texte et une HAUTEUR auto, toutes à la même taille de police. Un mot court
reste étroit, une phrase longue s'élargit puis passe à la ligne — jamais de
texte tronqué, jamais de débordement. */
.app-reserve--adaptatif{ align-items:flex-start; }
.app-reserve--adaptatif .app-slot{ width:auto !important; height:auto !important;
min-width:0 !important; min-height:0 !important; }
.app-reserve--adaptatif .app-etq{ width:auto; height:auto; max-width:min(92%, 680px);
white-space:normal; overflow-wrap:break-word; word-break:break-word; overflow:visible;
padding:12px 20px; line-height:1.18; }
.app-reserve--adaptatif .app-etq .app-mot{ white-space:normal; max-width:100%;
overflow-wrap:break-word; word-break:break-word; }
/* Zoom d'une image en plein écran (Associer images, etc.). */
/* Associer images — appariement façon LearningApps (cartes mélangées). */
.ap-grille{ display:flex; flex-wrap:wrap; gap:clamp(8px,1.6cqw,16px); justify-content:center;
align-content:flex-start; width:min(100%,1400px); margin:6px auto; }
.ap-carte{ width:clamp(92px,24cqw,150px); aspect-ratio:1; display:grid; place-items:center;
background:#fff; border:var(--trait) solid var(--ligne); border-radius:var(--rayon);
box-shadow:var(--decal); cursor:pointer; padding:8px; box-sizing:border-box;
touch-action:none; user-select:none; -webkit-user-select:none;
transition:transform .1s, box-shadow .1s, opacity .35s, background .15s, border-color .15s; }
.ap-carte:hover{ transform:translateY(-3px); }
.ap-carte img{ max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; }
.ap-carte .ap-mot{ width:100%; height:100%; display:grid; place-items:center; overflow:hidden;
font-family:var(--craieface); font-weight:700; color:var(--ligne); text-align:center;
line-height:1.1; overflow-wrap:anywhere; font-size:clamp(15px,3.4cqw,24px); pointer-events:none; }
.ap-carte.ap-choisi{ outline:4px solid var(--e-bleu); outline-offset:2px; transform:translateY(-3px); box-shadow:0 8px 0 var(--ombre-portee); }
.ap-carte.ap-vise{ outline:4px dashed var(--e-bleu); outline-offset:2px; background:color-mix(in srgb, var(--e-bleu) 10%, #fff); }
.ap-carte.ap-bon{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 13%, #fff); cursor:default; }
.ap-carte.ap-faux{ border-color:var(--ko); animation:secousse .3s; }
.ap-carte.ap-parti{ opacity:0; transform:scale(.55); pointer-events:none; }
/* --- Espace LIBRE (canevas) : Associer texte ET images ---
Les tuiles sont posées en absolu ; on les déplace où l'on veut, elles restent
là où on les lâche. Une paire assemblée reste sur place, rien n'est rangé en
bas de page. */
.ap-canvas{ position:relative; width:min(100%,2200px); margin:6px auto 0;
min-height:0; touch-action:none; }
/* Pendant la mesure, un mot trop long se voit au lieu de se couper. */
.ap-canvas.ap-mesure .ap-carte.ap-texte .ap-mot{ overflow-wrap:normal; word-break:normal; }
.ap-canvas .ap-carte{ position:absolute; left:0; top:0; margin:0; aspect-ratio:auto;
transform:rotate(var(--rot,0deg)); transition:box-shadow .12s, background .15s, border-color .15s;
z-index:2; touch-action:none; } /* canevas qui défile : glisser une carte la déplace, sans faire défiler */
.ap-canvas .ap-carte.ap-image{ width:var(--ap-img,clamp(96px,20cqw,168px)); height:var(--ap-img,clamp(96px,20cqw,168px));
aspect-ratio:1; display:grid; place-items:center;
/* Pistes de taille définie : une image en hauteur reste DANS son cadre. */
grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); }
.ap-canvas .ap-carte.ap-image img{ width:100%; height:100%; object-fit:contain; }
.ap-canvas .ap-carte.ap-texte{ width:max-content; min-width:96px; max-width:var(--ap-max,min(42cqw,320px));
height:auto; min-height:0; font-size:var(--ap-txt,17px); padding:.24em .62em;
display:flex; align-items:center; justify-content:center; }
.ap-canvas .ap-carte.ap-texte .ap-mot{ width:auto; height:auto; overflow:visible;
white-space:normal; overflow-wrap:break-word; word-break:break-word;
font-size:var(--ap-txt,clamp(17px,2cqw,23px)); line-height:1.18; }
.ap-canvas .ap-carte:hover{ transform:rotate(var(--rot,0deg)); box-shadow:0 8px 0 var(--ombre-portee); z-index:5; }
/* Aucune image sur le canevas (Associer texte) : la place gagnee sert a
grossir le texte, donc les etiquettes elles-memes. */
.ap-canvas--texte .ap-carte.ap-texte{ min-width:104px; max-width:var(--ap-max,min(46cqw,420px)); padding:.26em .7em; }
.ap-canvas--texte .ap-carte.ap-texte .ap-mot{ font-size:var(--ap-txt,clamp(19px,2.5cqw,30px)); }
/* Liseré DIFFÉRENT selon le côté : les termes (A) et les traductions (B) ne
peuvent pas s'appairer entre eux, et ça se voit d'un coup d'œil. */
.ap-canvas .ap-carte[data-cote="a"]{ border-color:var(--e-bleu); border-width:3px; }
.ap-canvas .ap-carte[data-cote="b"]{ border-color:var(--e-rose,#d5468a); border-width:3px;
border-style:dashed; }
.ap-canvas .ap-carte.ap-drag{ z-index:50; box-shadow:0 12px 22px rgba(0,0,0,.3); cursor:grabbing; }
.ap-canvas .ap-carte.ap-vise{ outline:4px dashed var(--e-vert,#2aa775); outline-offset:2px;
background:color-mix(in srgb, var(--e-vert,#2aa775) 10%, #fff); }
/* Appairée : les deux tuiles passent en GRIS (état « lié »). Un re-clic les
sépare et elles redeviennent blanches (retrait de .ap-lie). */
.ap-canvas .ap-carte.ap-lie{ border-color:#9aa0a6 !important; border-style:solid !important;
background:#e9eaec; color:#5a5f66; z-index:3; box-shadow:none; }
.ap-canvas .ap-carte.ap-lie img{ filter:grayscale(.55) opacity(.85); }
.ap-canvas .ap-carte.ap-bon{ border-color:var(--ok) !important; background:color-mix(in srgb, var(--ok) 16%, #fff); color:var(--ligne); }
.ap-canvas .ap-carte.ap-bon img{ filter:none; }
.ap-canvas .ap-carte.ap-faux{ border-color:var(--ko) !important; animation:secousse .3s; }
.ap-fin-flottant{ position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:60;
pointer-events:none; text-align:center; }
.ap-carte .ap-son{ font-size:clamp(30px,8cqw,52px); }
/* Appariement tout-texte (Associer terme↔traduction) : tuiles rectangulaires
compactes et uniformes → moins de blanc, texte plus gros. */
.ap-grille--texte{ gap:clamp(8px,1.8cqw,14px); }
/* TOUTES les tuiles ont la MÊME taille : une étiquette longue ne fait plus
grandir sa voisine ni décaler la ligne. C'est la police qui se réduit pour
tenir (calculée en JS) ; si le texte devient petit, une loupe permet de
l'afficher en grand. */
/* TROIS tuiles par rangée, toutes EXACTEMENT de la même taille : c'est la
police qui s'adapte (voir ajusterTexteCartes), jamais la tuile. */
.ap-grille--texte{ width:100%; max-width:1600px; }
.ap-grille--texte .ap-carte{ aspect-ratio:auto; border-width:4px; padding:10px 14px;
flex:0 0 calc((100% - 2 * clamp(8px,1.6cqw,16px)) / 3);
width:calc((100% - 2 * clamp(8px,1.6cqw,16px)) / 3);
height:clamp(78px,16cqh,132px);
min-height:0; max-width:none; position:relative; }
@media (max-width:560px){
/* Sur téléphone, deux par rangée restent plus lisibles. */
.ap-grille--texte .ap-carte{ flex-basis:calc((100% - clamp(8px,1.6cqw,16px)) / 2);
width:calc((100% - clamp(8px,1.6cqw,16px)) / 2); }
}
.ap-grille--texte .ap-carte .ap-mot{ display:flex; align-items:center; justify-content:center;
width:100%; height:100%; max-width:none; text-align:center; line-height:1.12;
font-size:clamp(20px,4.6cqw,32px); white-space:normal; overflow:hidden; overflow-wrap:break-word; }
/* Loupe : n'apparaît que si le texte a dû être fortement réduit. */
.ap-loupe{ position:absolute; right:2px; bottom:2px; width:30px; height:30px; border:0;
border-radius:50%; background:var(--voile-fort); color:var(--ligne); font-size:15px;
display:grid; place-items:center; cursor:zoom-in; padding:0; z-index:3; opacity:.85; }
.ap-loupe:hover{ opacity:1; }
.ap-zoom-mot{ font-family:var(--craieface); font-weight:700; text-align:center;
font-size:clamp(26px,7cqw,46px); line-height:1.2; padding:18px 6px; overflow-wrap:break-word; }
/* Liserés : termes (côté a) en ROUGE, traductions (côté b) en BLEU — tant que la
paire n'est pas résolue (le vert/rouge de correction reprend ensuite la main). */
.ap-grille--texte .ap-carte[data-cote="a"]:not(.ap-bon):not(.ap-faux){ border-color:var(--e-rouge); }
.ap-grille--texte .ap-carte[data-cote="b"]:not(.ap-bon):not(.ap-faux){ border-color:var(--e-bleu); }
/* Éparpillement : cartes posées librement dans un grand espace. */
.ap-grille.ap-eparse{ position:relative; display:block; width:min(100%,1500px);
margin:8px auto; }
.ap-eparse .ap-carte,
.ap-eparse .ap-carte:hover,
.ap-eparse .ap-carte.ap-choisi{ position:absolute; margin:0;
transform:translate(-50%,-50%) rotate(var(--rot,0deg)); }
.ap-eparse .ap-carte:hover{ z-index:6; }
.ap-eparse .ap-carte.ap-choisi{ z-index:10; }
.ap-eparse .ap-carte.ap-parti{ transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.55); }
.ap-eparse .ap-carte{ max-width:none; flex:none; }
/* Éparpillées, les étiquettes sont dimensionnées en pixels par le JS (elles
remplissent la scène) : la largeur en pourcentage de la grille rangée ne
doit plus s'appliquer. */
.ap-grille--texte.ap-eparse .ap-carte{ padding:9px 14px; }
.ap-grille--texte.ap-eparse .ap-carte .ap-mot{ font-size:clamp(21px,3cqw,40px); }
.mcarte.me-parti{ opacity:0; pointer-events:none; transition:opacity .35s ease; }
@media (max-width:560px){ .ap-carte{ width:clamp(84px,29cqw,132px); } }
/* --- Associer images (mode « classique », grille non tout-texte) ---
Les cartes-IMAGE gardent un cadre carré qui s'ajuste au portrait/paysage.
Les cartes-TEXTE prennent la LARGEUR de leur contenu ; un texte long revient
à la ligne (la carte grandit en hauteur) SANS réduire la police. */
.ap-grille:not(.ap-grille--texte) .ap-carte.ap-image{ aspect-ratio:1; }
.ap-grille:not(.ap-grille--texte) .ap-carte.ap-image img{ width:100%; height:100%; object-fit:contain; }
.ap-grille:not(.ap-grille--texte) .ap-carte.ap-texte{
aspect-ratio:auto; width:auto; min-width:96px; max-width:min(46cqw,340px);
height:auto; min-height:clamp(56px,10cqh,94px); padding:9px 14px; }
.ap-grille:not(.ap-grille--texte) .ap-carte.ap-texte .ap-mot{
width:auto; height:auto; display:flex; align-items:center; justify-content:center;
white-space:normal; overflow:visible; overflow-wrap:break-word; word-break:break-word;
font-size:clamp(17px,2cqw,22px); line-height:1.18; }
.zoom-image{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
background:rgba(0,0,0,.82); padding:24px; cursor:zoom-out; animation:zoomApparait .12s ease; }
.zoom-image img{ max-width:94cqw; max-height:90cqh; object-fit:contain; border-radius:12px;
background:#fff; box-shadow:0 12px 44px rgba(0,0,0,.5); }
.zoom-fermer{ position:fixed; top:16px; right:20px; width:44px; height:44px; border-radius:50%;
border:0; background:rgba(255,255,255,.92); color:#111; font-size:20px; cursor:pointer;
display:grid; place-items:center; }
@keyframes zoomApparait{ from{ opacity:0 } to{ opacity:1 } }
/* La réserve, en bas : les mots pas encore placés. */
.app-reserve .app-etq{ max-width:min(86cqw,360px); } /* un mot très long ne s'étale plus sur toute la largeur */
.app-reserve{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-content:flex-start;
min-height:0; padding:7px 10px; margin:0 auto 10px; width:100%; max-width:2400px; box-sizing:border-box;
background:color-mix(in srgb, var(--e-violet) 7%, transparent); border-radius:var(--rayon);
border:2px dashed var(--voile-fort);
transition:background .12s, border-color .12s, padding .18s ease, min-height .18s ease; }
/* Réserve vide (tout est rangé) : réduite à une fine bande, discrète. */
.app-reserve--vide{ padding:3px; opacity:.5; border-style:dotted; }
.app-reserve.app-vise{ border-color:var(--e-violet); border-style:solid; }
/* Après vérification : vert = bien placé, rouge = mauvaise place. */
.app-zone.app-bon{ border-color:var(--ok); }
.app-zone.app-bon .app-fente{ border-color:var(--ok); border-style:solid; }
.app-zone.app-bon .app-etq{ background:var(--ok); color:#fff; border-color:var(--ok); }
.app-zone.app-faux{ border-color:var(--ko); }
.app-zone.app-faux .app-fente{ border-color:var(--ko); border-style:solid; }
.app-zone.app-faux .app-etq{ background:var(--ko); color:#fff; border-color:var(--ko); }
.app-barre{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.app-compte{ font-family:var(--craieface); font-weight:700; font-size:clamp(15px,2cqw,20px); color:var(--encre); }
/* Reformer : une ligne de cases ordonnées où reconstruire la phrase. */
.app-progres{ text-align:center; font-family:var(--craieface); font-weight:700; color:var(--efface);
font-size:clamp(13px,1.7cqw,16px); margin:0 0 6px; }
.app-phrase{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:stretch;
background:var(--bloc); border:var(--trait) solid var(--ligne); border-radius:var(--rayon);
padding:14px; margin:0 0 16px; min-height:66px; }
.app-case{ min-width:60px; min-height:48px; display:flex; align-items:center; justify-content:center;
border:2px dashed var(--voile-fort); border-radius:var(--rayon-s); padding:3px; }
.app-case.app-vise{ border-color:var(--e-violet); border-style:solid;
background:color-mix(in srgb, var(--e-violet) 12%, transparent); }
.app-case.app-bon{ border-color:var(--ok); border-style:solid; }
.app-case.app-bon .app-etq{ background:var(--ok); color:#fff; border-color:var(--ok); }
.app-case.app-faux{ border-color:var(--ko); border-style:solid; }
.app-case.app-faux .app-etq{ background:var(--ko); color:#fff; border-color:var(--ko); }
.app-indice-phrase{ text-align:center; font-family:var(--craieface); color:var(--efface);
font-size:clamp(14px,1.9cqw,19px); margin:0 0 12px; }
.bouton--valider{ background:var(--ok); color:#fff; border-color:var(--ok); }
/* Deck de cartes : un paquet qu'on retourne. */
.deck-scene{ display:grid; place-items:center; min-height:min(64cqh,560px); }
.deck-carte{ width:min(74cqw, 40cqh, 360px); aspect-ratio:3/4.2; border-radius:var(--rayon);
border:var(--trait) solid var(--ligne); box-shadow:var(--decal); overflow:hidden;
display:grid; place-items:center; padding:0;
animation:deck-pose .18s cubic-bezier(.2,.9,.3,1.35); }
@keyframes deck-pose{ from{ transform:scale(.9) rotate(-2deg); opacity:.4; } to{ transform:none; opacity:1; } }
/* Le dos : motif de carte à jouer, invite à cliquer. */
.deck-dos{ cursor:pointer; background:
repeating-linear-gradient(45deg, var(--p-bleu) 0 14px, color-mix(in srgb, var(--p-bleu) 82%, #000) 14px 28px);
color:#fff; position:relative; transition:transform .12s, box-shadow .12s; }
.deck-dos::after{ content:""; position:absolute; inset:10px; border:3px solid rgba(255,255,255,.55);
border-radius:calc(var(--rayon) - 4px); }
.deck-dos:hover{ transform:translateY(-4px); box-shadow:0 10px 0 var(--ombre-portee); }
.deck-dos:active{ transform:translateY(2px); box-shadow:none; }
.deck-motif{ font-size:min(28cqw,150px); line-height:1; filter:drop-shadow(0 2px 0 rgba(0,0,0,.25)); z-index:1; }
.deck-vide{ background:var(--bloc); color:var(--efface); border-style:dashed; }
.deck-vide::after{ border-color:var(--voile-fort); }
.deck-rebattre{ display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1;
font-family:var(--craieface); font-weight:700; font-size:clamp(16px,2.4cqw,24px); color:var(--encre); }
.deck-ic{ font-size:clamp(34px,6cqw,60px); line-height:1; }
/* La face : l'image, plein cadre, sur fond blanc. */
.deck-face{ cursor:pointer; background:#fff; }
.deck-face img{ width:100%; height:100%; object-fit:contain; padding:14px; }
/* Deux paquets côte à côte (paquet 1 / paquet 2). */
.deck-double{ display:flex; justify-content:center; align-items:flex-start;
gap:clamp(14px,4cqw,48px); width:100%; }
.deck-col{ display:flex; flex-direction:column; align-items:center; gap:10px; flex:0 1 auto; min-width:0; }
.deck-col-titre{ font-family:var(--craieface); font-weight:700;
font-size:clamp(14px,1.8cqw,20px); color:var(--efface); }
.deck-scene--double{ min-height:min(52cqh,460px); }
.deck-scene--double .deck-carte{ width:min(40cqw, 34cqh, 300px); }
@media (max-width:560px){
.deck-double{ gap:10px; }
.deck-scene--double .deck-carte{ width:min(43cqw, 30cqh, 220px); }
.deck-col-titre{ font-size:13px; }
}
.kim-nuage{ position:relative; width:min(100%,2100px); margin:0 auto; box-sizing:border-box; }
.kim-piece{ position:absolute; transform:translate(-50%,-50%) rotate(var(--r,0deg));
width:var(--kt,110px); aspect-ratio:1; }
.kim-piece img{ width:100%; height:100%; object-fit:contain; background:#fff;
border-radius:var(--rayon-s); border:var(--trait-fin) solid var(--voile-fort);
padding:6px; box-shadow:var(--decal); }
.kim-barre{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; }
/* La loupe vide : le repère visuel du jeu, avant le mélange. */
.kim-loupe{ width:58px; height:58px; color:var(--e-bleu); flex:none; }
.kim-loupe svg{ width:100%; height:100%; }
/* La tuile mystère : blanche avec un « ? », elle révèle l'image au clic. */
.kim-reveal{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.kim-mystere{ width:clamp(110px,16cqw,180px); aspect-ratio:1; border-radius:var(--rayon);
background:#fff; border:var(--trait) solid var(--e-bleu); overflow:hidden; padding:0;
display:grid; place-items:center; box-shadow:var(--decal);
transition:transform .12s, box-shadow .12s; }
.kim-mystere:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--ombre-portee); }
.kim-mystere:active{ transform:translateY(2px); box-shadow:none; }
.kim-mystere .kim-q{ font-family:var(--craieface); font-weight:700;
font-size:clamp(48px,7cqw,90px); color:var(--e-bleu); }
.kim-mystere img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.kim-mystere.revelee{ border-color:var(--ok); box-shadow:0 0 0 4px var(--ok), var(--decal);
cursor:default; }
@media (prefers-reduced-motion:no-preference){
.kim-mystere.revelee{ animation:kim-pop .4s cubic-bezier(.2,.9,.3,1.4); }
@keyframes kim-pop{ from{ transform:scale(.7) rotate(-6deg); } to{ transform:none; } }
}
.dobble-table{ display:flex; gap:clamp(10px,2.4cqw,32px); align-items:center;
justify-content:center; flex-wrap:wrap; }
.dobble-carte{ width:min(58cqw,68cqh,640px); aspect-ratio:1; border-radius:50%; background:#fff;
position:relative; border:var(--trait) solid var(--ligne); box-shadow:var(--decal); overflow:hidden; }
.dobble-sym{ position:absolute; border:0; background:none; padding:0; display:grid;
place-items:center; border-radius:50%; }
.dobble-sym img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }
/* Symbole en toutes lettres : une pastille lisible, ajustée à sa place. */
/* Mots : pas de cercle ni de cadre — juste le mot, pivoté à divers angles. */
.dobble-sym--mot{ background:none; border:0; }
.dobble-sym--mot:hover{ background:none; }
.dobble-sym--mot:hover .dobble-mot{ color:var(--e-bleu); }
.dobble-sym--mot .dobble-mot{ text-shadow:0 1px 2px rgba(0,0,0,.18); }
.dobble-mot{ font-family:var(--craieface); font-weight:700; color:var(--encre); line-height:1;
font-size:clamp(12px,1.7cqw,24px); text-align:center; overflow-wrap:anywhere; padding:2px;
pointer-events:none; }
.dobble-sym:hover{ background:rgba(47,127,212,.18); }
.dobble-carte.faux{ animation:secousse .34s; }
.dobble-carte.bon{ border-color:var(--ok); box-shadow:0 0 0 7px var(--ok), var(--decal); }
@keyframes secousse{ 0%,100%{ transform:none; } 25%{ transform:translateX(-9px); } 75%{ transform:translateX(9px); } }
/* Tape-taupe : des taupes dessinées qui sortent de la terre, un mot dans une
bulle de parole au-dessus de chacune. On clique celles de la bonne catégorie. */
.ta-panneau{ display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:6px; }
.ta-panneau-titre{ font-family:var(--craieface); font-weight:700; font-size:clamp(14px,1.8cqw,20px);
color:var(--efface); }
.cible-cat{ font-family:var(--craieface); font-weight:700; font-size:clamp(28px,5cqw,64px);
line-height:1.05; color:var(--e-bleu); }
.pre-taupes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.8cqw,24px);
/* Bornée aussi par la HAUTEUR (téléphone à l'horizontale) : deux rangées de
trous ≈ 0,47 × la largeur, sous le panneau de la catégorie. */
width:min(90cqw,760px,calc((100cqh - 160px) * 2.1)); margin-top:clamp(26px,5cqh,54px); }
/* Chaque taupe est un bouton = une case de la grille. Plus large que haute
pour que les deux rangées tiennent à l'écran. */
.taupe{ position:relative; aspect-ratio:1.42; border:0; background:none; padding:0; cursor:pointer; }
/* La cage masque la taupe hors du trou : elle y glisse sans jamais déborder. */
.ta-cage{ position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
width:66%; aspect-ratio:1; overflow:hidden; z-index:2; }
.ta-mole{ position:absolute; inset:0; transform:translateY(103%);
transition:transform .2s cubic-bezier(.2,.9,.3,1.4); }
.taupe[data-sortie="1"] .ta-mole{ transform:translateY(0); }
.ta-svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 4px 4px rgba(0,0,0,.22)); }
/* La butte de terre, au pied de la taupe : elle passe DERRIÈRE, si bien que la
taupe surgit légèrement devant le trou. */
.ta-butte{ position:absolute; left:50%; bottom:2%; transform:translateX(-50%); width:86%; height:22%;
background:radial-gradient(ellipse at 50% 22%, #b58561 0%, #8c6344 66%, #74513a 100%);
border-radius:50%; z-index:1; box-shadow:0 3px 0 rgba(0,0,0,.09); }
/* Décompte de 3 secondes avant le lancement. */
.ta-compte{ position:absolute; inset:0; display:grid; place-items:center; z-index:20;
font-family:var(--craieface); font-weight:700; font-size:clamp(56px,13cqw,150px);
color:var(--e-bleu); pointer-events:none; }
/* Le chiffre se pose sur un panneau blanc bordé : le fond du plateau est
illustré, un simple texte s'y noyait. */
.ta-compte-txt{ display:block; background:#fff; color:var(--e-bleu);
border:6px solid var(--ligne); border-radius:26px;
padding:.06em .3em .12em; line-height:1.08; text-align:center;
box-shadow:0 8px 0 rgba(0,0,0,.18); max-width:90cqw; overflow-wrap:anywhere; }
.ta-compte.ta-pop{ animation:ta-compte-pop .45s cubic-bezier(.2,.9,.3,1.5); }
@keyframes ta-compte-pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
/* La bulle de parole, au-dessus de la taupe — sans flèche. */
.ta-bulle{ position:absolute; left:50%; top:2px; transform:translate(-50%, -100%) scale(.8);
transform-origin:bottom center; background:#fffdf5; border:3px solid #4a3524; border-radius:14px;
padding:5px 14px; font-family:var(--craieface); font-weight:700; font-size:clamp(14px,2cqw,26px);
color:#2a1f16; white-space:nowrap; box-shadow:0 2px 0 rgba(0,0,0,.14);
opacity:0; transition:opacity .18s, transform .18s; z-index:3; pointer-events:none; }
.taupe[data-sortie="1"] .ta-bulle{ opacity:1; transform:translate(-50%, -100%) scale(1); }
/* Retour visuel après la frappe : la bulle change de couleur, la taupe réagit. */
.taupe[data-frappe="bon"] .ta-mole{ animation:ta-bon .32s; }
.taupe[data-frappe="faux"] .ta-mole{ animation:ta-faux .32s; }
.taupe[data-frappe="bon"] .ta-bulle{ background:#d6f5e3; border-color:var(--ok); color:#0a5c38; }
.taupe[data-frappe="faux"] .ta-bulle{ background:#fdd9d5; border-color:var(--ko); color:#8a1a10; }
/* « -1 » qui jaillit d'une taupe ratée : rouge, monte et s'efface. */
.ta-moins{ position:absolute; left:50%; top:8%; transform:translateX(-50%); z-index:6;
font-family:var(--craieface); font-weight:700; font-size:clamp(28px,4cqw,52px);
color:var(--ko); text-shadow:0 2px 0 rgba(255,255,255,.7); pointer-events:none;
animation:ta-moins-monte .7s ease-out forwards; }
@keyframes ta-moins-monte{ from{ opacity:0; transform:translate(-50%,10px) scale(.6); }
25%{ opacity:1; transform:translate(-50%,-6px) scale(1.1); }
to{ opacity:0; transform:translate(-50%,-52px) scale(1); } }
@keyframes ta-bon{ 50%{ transform:translateY(0) scale(1.16); } }
@keyframes ta-faux{ 25%{ transform:translateY(0) translateX(-7px) rotate(-6deg); } 75%{ transform:translateY(0) translateX(7px) rotate(6deg); } }
/* Confettis : trois couleurs, rien d'autre. Coupés si le système demande à
réduire les animations. */
.confettis{ position:fixed; inset:0; z-index:65; pointer-events:none; overflow:hidden; }
.confettis i{ position:absolute; top:-16px; width:10px; height:15px; border-radius:2px;
animation:tomber linear forwards; }
@keyframes tomber{ to{ transform:translateY(108cqh) rotate(720deg); opacity:.15; } }
.jeu-fin .bravo{ font-family:var(--craieface); font-weight:700;
font-size:clamp(30px,5cqw,64px); line-height:1.1; color:var(--e-bleu); text-align:center; }
.volant{ position:fixed; z-index:60; font-family:var(--craieface); font-weight:700;
font-size:clamp(24px,3.2cqw,44px); pointer-events:none; animation:monter .8s ease-out forwards; }
@keyframes monter{ to{ transform:translateY(-72px); opacity:0; } }
/* ---------- 13. Panneau ---------- */
.overlay{ position:fixed; inset:0; z-index:70; display:none; align-items:center;
justify-content:center; padding:18px; background:rgba(20,22,28,.62); }
.overlay.ouverte{ display:flex; }
.modal{ background:var(--bloc); border:var(--trait) solid var(--ligne); border-radius:var(--rayon);
box-shadow:0 10px 0 var(--ombre-portee); width:100%; max-width:520px; padding:24px 22px 20px;
position:relative; max-height:90cqh; overflow-y:auto; color:var(--ligne); }
/* Un panneau qui présente des étiquettes de jeu a besoin de largeur : sinon un
terme un peu long revient à la ligne au milieu d'un mot. */
.modal:has(.rep-choix-grille){ max-width:min(94cqw,1000px); }
.modal-close{ position:absolute; top:11px; right:11px; border:var(--trait-fin) solid var(--voile-fort);
background:var(--bloc); width:34px; height:34px; border-radius:8px; font-size:14px; color:var(--efface); }
.modal-close:hover{ border-color:var(--e-rouge); color:var(--e-rouge); }
.modal-titre{ font-family:var(--craieface); font-weight:700; font-size:22px; line-height:1.1; margin-bottom:8px; }
.modal-sub{ color:var(--efface); font-size:14.5px; margin-bottom:18px; line-height:1.5; }
.modal-sub strong{ color:var(--ligne); }
.actions-modal{ display:flex; flex-direction:column; gap:10px; margin-top:13px; }
.actions-modal .bouton{ justify-content:center; }
.erreur{ border:var(--trait-fin) solid var(--e-rouge); color:var(--e-rouge); border-radius:9px;
padding:10px 13px; font-size:13.5px; font-weight:700; margin:11px 0; }
.info{ border:var(--trait-fin) dashed var(--voile-fort); border-radius:9px; padding:11px 13px;
font-size:13.5px; margin:11px 0; line-height:1.45; color:var(--efface); }
.info strong{ color:var(--ligne); }
.interrupteur{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--efface);
margin:11px 0; cursor:pointer; }
.interrupteur input{ width:20px; height:20px; accent-color:var(--p-bleu); flex:none; }
.emoji-choix{ display:flex; flex-wrap:wrap; gap:7px; margin:7px 0 12px; }
.emoji-choix button{ border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc);
border-radius:9px; width:46px; height:46px; font-size:21px; }
.emoji-choix button.actif{ border-color:var(--p-bleu); background:var(--sol-2); }
/* Sélecteur d'emojis complet (par thème). */
.emo-cat{ margin-bottom:14px; }
.emo-cat-nom{ font-family:var(--craieface); font-weight:700; font-size:13px; color:var(--efface);
margin:0 0 6px; position:sticky; top:0; background:var(--bloc); padding:2px 0; }
.emo-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:4px; }
.emo-btn{ border:var(--trait-fin) solid transparent; background:var(--sol-2); border-radius:8px;
height:42px; font-size:22px; cursor:pointer; transition:transform .08s, border-color .12s, background .12s; }
.emo-btn:hover{ border-color:var(--p-bleu); background:var(--bloc); transform:scale(1.12); }
/* Une icône d'activité qui ouvre le sélecteur : on montre que c'est cliquable. */
.champ-emoji{ position:relative; }
.champ-emoji input{ cursor:pointer; }
.champ-emoji::after{ content:"▾"; position:absolute; right:8px; bottom:11px; font-size:12px;
color:var(--efface); pointer-events:none; }
.mentions{ font-size:13.5px; line-height:1.6; color:var(--efface); }
.mentions p{ margin:0 0 13px; }
.mentions strong{ color:var(--ligne); }
.mentions a{ color:var(--e-bleu); font-weight:700; }
/* QR code de partage : à projeter, les élèves scannent. */
.qr-partage{ display:flex; flex-direction:column; align-items:center; gap:8px;
margin:14px 0; padding:14px; background:#fff; border:var(--trait) solid var(--ligne);
border-radius:var(--rayon); }
.qr-partage svg{ width:min(220px, 56cqw); height:auto; display:block; }
.qr-note{ font-size:12.5px; color:var(--efface); text-align:center; max-width:260px; }
.boite-lien{ display:flex; gap:8px; margin:11px 0; }
.boite-lien input{ flex:1; font-family:var(--mono); font-size:12px;
border:var(--trait-fin) solid var(--voile-fort); border-radius:9px; padding:10px 11px;
background:var(--sol-2); color:var(--ligne); }
.etape{ display:flex; align-items:center; gap:10px; border:var(--trait-fin) solid var(--voile-fort);
border-radius:10px; padding:9px 11px; margin-bottom:8px; }
.etape .rang{ font-family:var(--craieface); font-weight:700; font-size:18px; color:var(--efface); min-width:20px; }
.etape .quoi{ flex:1; min-width:0; }
.etape .quoi b{ font-family:var(--craieface); font-size:15px; display:block; }
.etape .quoi small{ color:var(--efface); font-size:12px; }
.etape .fleches{ display:flex; gap:5px; }
.etape .fleches button, .etape .oter{ border:var(--trait-fin) solid var(--voile-fort);
background:var(--bloc); border-radius:7px; width:32px; height:32px; color:var(--efface); font-size:12px; }
.etape .fleches button:hover{ border-color:var(--ligne); color:var(--ligne); }
.etape .oter:hover{ border-color:var(--e-rouge); color:var(--e-rouge); }
/* Réglages : une ligne par option, libellé à gauche, commande à droite. */
/* Réglages affichés directement dans l'éditeur (bloc « Le jeu »). */
.reglages-inline{ margin-top:14px; padding:12px 14px; border-radius:14px;
background:color-mix(in srgb, var(--ligne) 6%, transparent); display:flex; flex-direction:column; gap:11px; }
.reglages-inline-titre{ font-family:var(--pochoir); text-transform:uppercase; letter-spacing:.04em; font-size:14px; opacity:.7; }
.reglage-ligne{ display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; }
.reglage-ligne .lib{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.reglage-ligne .lib small{ color:var(--efface); font-size:12px; line-height:1.3; }
.reglage-ligne input[type=checkbox]{ width:22px; height:22px; flex:none; accent-color:var(--e-bleu); }
.reglage-ligne select{ flex:none; max-width:60%; }
/* Réglages RÉVÉLABLES : menu déroulant en bas de l'éditeur. Fermé par défaut,
il s'ouvre au clic sur son en-tête. Rendu comme une zone d'éditeur. */
.reglages-deroulant{ margin:0 0 18px; border-radius:var(--rayon);
border:var(--trait) solid var(--ligne); background:var(--bloc);
box-shadow:var(--decal); overflow:hidden; }
.reglages-deroulant-tete{ display:flex; align-items:center; gap:10px; cursor:pointer;
list-style:none; padding:16px 18px; font-family:var(--pochoir);
text-transform:uppercase; letter-spacing:.045em; font-size:16px; color:var(--ligne);
user-select:none; }
.reglages-deroulant-tete::-webkit-details-marker{ display:none; }
.reglages-deroulant-titre{ flex:1; }
.reglages-deroulant-fleche{ transition:transform .18s ease; font-size:15px; opacity:.7; }
.reglages-deroulant[open] .reglages-deroulant-fleche{ transform:rotate(180deg); }
.reglages-deroulant-tete:hover{ background:color-mix(in srgb, var(--ligne) 5%, transparent); }
.reglages-deroulant-corps{ padding:0 18px 18px; }
.reglages-deroulant-corps .reglages-inline{ margin-top:0; background:transparent; padding:0; }
/* Astuce Canva : encart déroulant discret dans l'éditeur d'images. */
.astuce-canva{ margin:12px 0 2px; border-radius:var(--rayon-s);
border:2px dashed color-mix(in srgb, var(--e-jaune) 55%, var(--voile-fort));
background:color-mix(in srgb, var(--e-jaune) 10%, transparent); overflow:hidden; }
.astuce-canva-tete{ display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
padding:11px 14px; font-family:var(--craieface); font-weight:700; color:var(--encre);
font-size:clamp(13.5px,1.7cqw,16px); user-select:none; }
.astuce-canva-tete::-webkit-details-marker{ display:none; }
.astuce-canva-titre{ flex:1; }
.astuce-canva-fleche{ transition:transform .18s ease; opacity:.65; }
.astuce-canva[open] .astuce-canva-fleche{ transform:rotate(180deg); }
.astuce-canva-corps{ margin:0; padding:0 18px 14px 34px; display:flex; flex-direction:column; gap:7px;
color:var(--encre); font-size:clamp(13px,1.6cqw,15px); line-height:1.4; }
.astuce-canva-corps li{ list-style:decimal; }
.reglage{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
border-bottom:2px solid var(--voile); padding:12px 0; }
.reglage:last-of-type{ border-bottom:0; }
.reglage .lib{ flex:1 1 190px; min-width:0; }
.reglage .lib b{ font-family:var(--craieface); font-weight:700; font-size:15px; display:block; }
.reglage .lib small{ color:var(--efface); font-size:12.5px; line-height:1.4; display:block; margin-top:3px; }
.reglage select{ flex:0 0 auto; min-width:150px; border:var(--trait-fin) solid var(--voile-fort);
border-radius:var(--rayon-s); padding:9px 11px; background:var(--sol-2); color:var(--ligne); }
.reglage input[type=checkbox]{ width:22px; height:22px; accent-color:var(--p-bleu); flex:none; }
/* ---------- 14. Bas de page ---------- */
/* Le pied de page suit le contenu : on le rejoint en défilant jusqu'en bas,
il ne flotte plus au-dessus de la page. */
footer.bas{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
padding:16px 14px; min-height:var(--bas);
background:var(--bloc); border-top:var(--trait-fin) solid var(--voile-fort);
font-family:var(--craieface); font-weight:700; font-size:12.5px; }
footer.bas a, footer.bas button{ color:var(--efface); text-decoration:none; border:0;
background:none; font-family:inherit; font-size:inherit; font-weight:inherit;
padding:13px 4px; cursor:pointer; }
footer.bas a:hover, footer.bas button:hover{ color:var(--e-bleu); }
footer.bas a:first-child{ color:var(--ligne); }
#bascule-theme{ display:inline-flex; align-items:center; gap:6px; }
body.en-jeu footer.bas{ display:none; }
/* Pendant un jeu (plein écran), le corps ne défile pas : plus de « faux
défilement » ni de barre de scroll parasite sur téléphone. */
body.en-jeu, html.en-jeu{ overflow:hidden; height:100%; height:100dvh; }
/* ---------- 14bis. Thèmes décoratifs (fond des jeux) ---------- */
/* Le sélecteur, dans le préau : un aperçu du fond + le nom. */
.theme-choix{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,118px),1fr)); gap:8px; }
.theme-btn{ display:flex; flex-direction:column; gap:5px; padding:5px; cursor:pointer;
border:2px solid var(--voile-fort); border-radius:12px; background:var(--bloc);
font-family:var(--craieface); font-weight:700; font-size:11.5px; color:var(--encre);
transition:border-color .12s, box-shadow .12s; }
.theme-btn:hover{ border-color:var(--e-violet); }
.theme-btn.actif{ border-color:var(--e-violet); box-shadow:0 0 0 2px var(--e-violet); }
.theme-apercu{ height:42px; border-radius:8px; border:1px solid var(--voile-fort); }
.theme-nom{ text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Fond personnel : lien + téléversement. */
.fond-perso{ margin-top:14px; }
.fond-rangee{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fond-rangee input[type="url"]{ flex:1; min-width:200px; }
.fond-actuel{ display:flex; align-items:center; gap:11px; margin-top:9px; flex-wrap:wrap; }
.fond-vignette{ flex:none; width:56px; height:38px; border-radius:6px; background-size:cover;
background-position:center; border:var(--trait-fin) solid var(--voile-fort); }
.fond-etat{ font-size:13px; color:var(--efface); }
/* Les décors viennent de TES images (dossier « fonds/ »), chargées à la volée
dans l'aperçu du sélecteur et sur la scène de jeu. En leur absence (hors
ligne, ou image non déposée), on affiche un fond NEUTRE — aucun motif « tout
fait ». Ainsi seuls tes visuels apparaissent. */
.theme-apercu{ background:var(--sol); }
/* ---------- 15. Réglages fins ---------- */
@media print{ #vue-jeu, .overlay, footer.bas, .decor{ display:none !important; } }
@media (max-width:680px){
/* Le pied de page étant dans le flux, sa hauteur s'ajuste d'elle-même quand
il passe sur deux lignes : plus rien à compenser. */
footer.bas{ align-content:center; row-gap:2px; column-gap:14px; }
footer.bas a, footer.bas button{ padding:7px 3px; }
.bouton .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.actions-modal .bouton .lbl, .barre-actions .bouton .lbl,
.trois-portes .bouton .lbl,
.jeu-actions .bouton .lbl, #jeu-burger .lbl{ position:static; width:auto; height:auto; overflow:visible; clip:auto; color:#111; }
/* 3. Enregistrer / Jouer / Imprimer : l'icône seule, pour gagner la place. */
.barre-bas .bouton{ padding:11px 15px; }
.barre-bas .bouton .em{ font-size:19px; }
.pre-taupes{ grid-template-columns:repeat(2,1fr); width:min(90cqw,760px,calc((100cqh - 130px) * .95)); }
.dobble-carte{ width:min(80cqw,320px); }
.zone{ padding:26px 14px 16px; }
}
@media (prefers-reduced-motion:reduce){
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; }
.roue, .roue-etiquette span{ transition-duration:.6s !important; }
.carte{ transform:none; }
}
/* Lien intégrable (iframe) : pas de « cour » où revenir, on masque Quitter. */
body.mode-integre #jeu-quitter{ display:none; }
/* Dans un cadre : pas de pied de page (liens du depot, mentions...). */
body.mode-cadre footer.bas, body.mode-integre footer.bas{ display:none !important; }
/* En iframe, le bandeau du jeu DISPARAÎT totalement du flux pour que le jeu
occupe tout le cadre. Il ne reste qu'un hamburger flottant, transparent, posé
par-dessus tout en haut à droite (il n'est pas compté comme une ligne). */
body.mode-integre .jeu-hud{
position:fixed; top:0; right:0; left:auto; width:auto; min-height:0;
margin:0; padding:6px 8px 0 0; gap:0; background:transparent !important;
border:0 !important; box-shadow:none !important; color:inherit !important;
z-index:9999; pointer-events:none; /* laisse cliquer le jeu à travers */
flex:none; display:block; overflow:visible;
}
body.mode-integre .jeu-hud > div:first-child{ display:none; } /* titre + liste */
body.mode-integre .jeu-hud .score{ display:none; }
body.mode-integre .jeu-hud #jeu-titre{ display:none; }
/* Le conteneur des outils : seul le hamburger reste cliquable. */
body.mode-integre .jeu-hud .droite{ margin:0; position:static; display:block; }
/* Hamburger flottant : trois traits noirs sur fond transparent. */
body.mode-integre .jeu-burger{
display:inline-flex !important; pointer-events:auto;
width:38px; height:38px; padding:0; align-items:center; justify-content:center;
background:transparent !important; border:0 !important; box-shadow:none !important;
color:transparent; font-size:0; position:relative; cursor:pointer;
}
body.mode-integre .jeu-burger .lbl{ display:none !important; }
body.mode-integre .jeu-burger span[aria-hidden]{ display:none; } /* on masque le ☰ d'origine */
body.mode-integre .jeu-burger::before{
content:""; position:absolute; left:8px; right:8px; top:11px; height:0;
border-top:3px solid #111;
box-shadow:0 6px 0 #111, 0 12px 0 #111; /* les 2 autres traits */
border-radius:2px;
}
body.mode-integre .jeu-burger:hover::before{ border-color:#000; box-shadow:0 6px 0 #000, 0 12px 0 #000; }
/* Menu déroulant : panneau flottant sous le hamburger, cliquable. */
body.mode-integre .jeu-actions{
display:none; position:fixed; top:48px; right:8px; left:auto; z-index:9999;
pointer-events:auto; flex-direction:column; gap:6px;
background:var(--bloc,#fff); border:2px solid var(--ligne,#1d2027);
border-radius:12px; padding:8px; box-shadow:0 10px 26px rgba(0,0,0,.3); min-width:200px;
}
body.mode-integre .jeu-actions.ouvert{ display:flex; }
body.mode-integre .jeu-actions .jeu-menu-item{ width:100%; }
body.mode-integre .jeu-actions .bouton{ width:100%; justify-content:flex-start; gap:12px;
height:auto; padding:11px 14px; font-size:16px; background:transparent; color:var(--ligne); border-color:transparent; }
body.mode-integre .jeu-actions .bouton:hover{ background:color-mix(in srgb, var(--ligne,#1d2027) 8%, transparent); }
body.mode-integre .jeu-actions .bouton .lbl{ display:inline !important; position:static;
width:auto; height:auto; overflow:visible; clip:auto; color:inherit;
font-family:var(--craieface); font-weight:700; }
body.mode-integre .jeu-actions .bouton--icone{ width:100%; }
/* Le jeu occupe tout le cadre : la scène part du bord haut. */
body.mode-integre .jeu-scene{ padding-top:0; }
/* Résultats de recherche par mots-clés. */
#rech-resultats{ max-height:min(52cqh,440px); overflow-y:auto; }
.rech-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit;
background:var(--sol-2); border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s);
padding:9px 12px; margin-bottom:7px; cursor:pointer; color:var(--ligne); }
.rech-item:hover{ border-color:var(--p-bleu); background:var(--bloc); }
.rech-item .rech-emoji{ font-size:24px; flex:none; line-height:1; }
.rech-item .rech-txt{ display:flex; flex-direction:column; min-width:0; }
.rech-item .rech-txt b{ font-family:var(--craieface); }
.rech-item .rech-txt small{ color:var(--efface); font-size:12.5px; margin-top:1px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Commutateur du partage : un seul jeu / tous ses jeux. */
.partage-choix{ display:flex; flex-direction:column; gap:8px; margin:4px 0 12px;
border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s); padding:10px 12px; }
.partage-choix .pc-opt{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
font-family:var(--craieface); font-weight:700; font-size:15px; cursor:pointer; }
.partage-choix .pc-opt small{ font-weight:400; color:var(--efface); }
.partage-choix select{ font:inherit; }
.partage-choix select:disabled{ opacity:.5; }
/* « Pas d'impair » : deux paquets, une carte de chaque, on juge PAIR / PAS DE PAIR. */
.pi-table{ display:flex; align-items:center; justify-content:center; gap:clamp(10px,3cqw,44px); flex-wrap:wrap; }
.pi-pile{ position:relative; }
.pi-pile::before, .pi-pile::after{ content:""; position:absolute; inset:0; border-radius:16px;
background:var(--bloc); border:3px solid var(--ligne); z-index:-1; box-shadow:var(--decal); }
.pi-pile::before{ transform:translate(6px,7px) rotate(2.2deg); }
.pi-pile::after{ transform:translate(11px,13px) rotate(-2.4deg); }
.pi-pile[data-vide="1"]::before, .pi-pile[data-vide="1"]::after{ display:none; }
.pi-carte{ width:min(44cqw,380px); min-height:min(28cqh,210px); border:3px solid var(--ligne);
border-radius:16px; background:var(--bloc); display:grid; place-items:center; padding:8px 14px;
box-shadow:var(--decal); transition:transform .3s ease, opacity .3s ease; transform-style:preserve-3d; }
.pi-carte img{ max-width:100%; max-height:min(24cqh,180px); object-fit:contain; }
.pi-mot{ font-family:var(--craieface); font-weight:700; font-size:clamp(20px,4.2cqw,46px);
color:var(--encre); line-height:1.08; text-align:center; display:block; max-width:100%;
white-space:normal; overflow-wrap:anywhere; }
.pi-carte.pi-cache{ transform:rotateY(90deg); opacity:0; }
.pi-carte.pi-part{ transform:translateY(-46px) scale(.55) rotate(6deg); opacity:0; }
.pi-carte.pi-faux{ animation:secousse .34s; border-color:var(--ko); }
.pi-carte.pi-bon{ border-color:var(--ok); box-shadow:0 0 0 5px var(--ok), var(--decal); }
.pi-vs{ font-family:var(--craieface); font-weight:700; font-size:clamp(22px,3.4cqw,40px); color:var(--efface); }
.pi-boutons{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:clamp(20px,4cqh,44px); }
.pi-boutons .bouton{ font-size:clamp(16px,2.5cqw,25px); padding:14px 26px; }
/* « Trier, c'est gagné ! » : des cartons (catégories) où ranger les étiquettes. */
/* La scene occupe TOUT le cadre : cartons en haut (grille equilibree, donc plus
grands), espace libre en dessous ou les etiquettes se posent ou l'on veut. */
.tri-scene{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
width:min(100%,2100px); margin:clamp(12px,2cqh,26px) auto 0; box-sizing:border-box; gap:10px; }
.tri-boites{ display:grid; grid-template-columns:repeat(var(--tri-cols,3),1fr);
gap:clamp(8px,1.6cqw,16px); flex:3 1 0; min-height:0;
width:100%; margin:0; box-sizing:border-box; }
.tri-boite{ min-width:0; min-height:0; background:var(--bloc);
border:var(--trait) solid var(--ligne); border-radius:var(--rayon); box-shadow:var(--decal);
display:flex; flex-direction:column; overflow:hidden; }
.tri-titre{ font-family:var(--craieface); font-weight:700; font-size:clamp(17px,2.3cqw,27px);
padding:11px 12px; background:color-mix(in srgb, var(--e-jaune) 18%, var(--bloc)); color:var(--encre);
border-bottom:var(--trait-fin) solid var(--voile-fort); text-align:center; overflow-wrap:anywhere; }
.tri-drop{ flex:1; min-height:70px; padding:11px; display:flex; flex-wrap:wrap; gap:7px;
align-content:flex-start; justify-content:center; overflow:auto; transition:background .12s; }
/* Espace libre : chaque etiquette est posee en absolu, deplacable partout. */
.tri-libre{ position:relative; flex:2 1 0; min-height:110px; width:100%;
border:2px dashed var(--voile-fort); border-radius:var(--rayon-s);
background:color-mix(in srgb, var(--e-violet) 6%, transparent);
touch-action:none; overflow:visible; }
.tri-libre > .app-etq{ position:absolute; left:0; top:0; margin:0;
transform:rotate(var(--rot,0deg)); max-width:min(40cqw,340px); }
.tri-libre > .app-etq:hover{ transform:rotate(var(--rot,0deg)) translateY(-2px); z-index:5; }
.tri-libre.app-vise{ background:color-mix(in srgb, var(--e-violet) 13%, transparent); }
@media (max-width:640px){
/* Telephone : pas de glisser, retour au flux simple (on tape pour choisir). */
.tri-scene{ display:block; }
.tri-boites{ flex:none; margin-bottom:10px; }
.tri-libre{ position:static; display:flex; flex-wrap:wrap; gap:8px;
justify-content:center; padding:8px 5px; }
.tri-libre > .app-etq{ position:static; transform:none; max-width:92cqw; }
}
.tri-drop.app-vise{ background:color-mix(in srgb, var(--e-violet) 12%, transparent); }
.app-etq.app-bon{ background:var(--ok); color:#fff; border-color:var(--ok); }
.app-etq.app-faux{ background:var(--ko); color:#fff; border-color:var(--ko); }
/* Barre de chrono du mode défi (Œil de lynx). */
.do-chrono{ width:min(90cqw,700px); height:16px; border-radius:10px; background:var(--sol-2);
border:var(--trait-fin) solid var(--voile-fort); overflow:hidden; margin:0 auto; }
.do-chrono-fill{ height:100%; width:100%; border-radius:10px; background:var(--e-vert);
transition:width .12s linear, background .3s; }
/* Chrono-logique : une liste d'éléments à réordonner (glisser ou flèches ▲▼). */
.chr-liste{ list-style:none; margin:0 auto; padding:0; width:min(94cqw,720px);
display:flex; flex-direction:column; gap:9px; counter-reset:chr; }
.chr-item{ display:flex; align-items:center; gap:10px; background:var(--bloc);
border:var(--trait) solid var(--ligne); border-radius:var(--rayon); box-shadow:var(--decal);
padding:10px 12px; cursor:grab; touch-action:none;
transition:transform .1s, box-shadow .1s, border-color .12s, background .12s; }
.chr-item:active{ cursor:grabbing; }
.chr-item.chr-vol{ opacity:.5; }
.chr-numerote .chr-item{ counter-increment:chr; }
.chr-numerote .chr-item::before{ content:counter(chr); flex:none; width:30px; height:30px; border-radius:50%;
display:grid; place-items:center; background:var(--p-bleu); color:#fff;
font-family:var(--craieface); font-weight:700; font-size:15px; }
.chr-poignee{ flex:none; color:var(--efface); font-size:18px; letter-spacing:-3px; cursor:grab; user-select:none; }
.chr-texte{ flex:1; text-align:left; font-family:var(--craieface); font-weight:700;
font-size:clamp(15px,2.2cqw,24px); color:var(--ligne); white-space:normal; overflow-wrap:break-word; }
.chr-ecoute{ flex:none; background:none; border:0; font-size:22px; cursor:pointer; padding:2px 6px; border-radius:8px; }
.chr-ecoute:hover{ background:var(--voile); }
.chr-fleches{ flex:none; display:flex; flex-direction:column; gap:2px; }
.chr-fleches button{ background:var(--sol-2); border:var(--trait-fin) solid var(--voile-fort);
border-radius:6px; width:30px; height:22px; cursor:pointer; font-size:11px; color:var(--ligne);
display:grid; place-items:center; transition:background .1s; }
.chr-fleches button:hover{ background:var(--p-jaune); border-color:var(--p-jaune); }
.chr-item[data-ok="1"]{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, var(--bloc)); }
.chr-item[data-ok="0"]{ border-color:var(--ko); background:color-mix(in srgb, var(--ko) 12%, var(--bloc)); }
.chr-item[data-ok] .chr-fleches, .chr-item[data-ok] .chr-poignee{ visibility:hidden; }
/* Remettre en ordre : des images (vignettes) à replacer dans la bonne séquence,
par glisser-déposer ou avec les flèches ◀ ▶. La frise s'enroule sur plusieurs
rangées si les images sont nombreuses ; l'ajustement de scène la fait tenir. */
.ord-piste{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
gap:clamp(9px,1.5cqw,18px); margin:6px auto 0; padding:6px 2px; width:min(96cqw,1000px); counter-reset:ord; }
.ord-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
background:var(--bloc); border:var(--trait) solid var(--ligne); border-radius:var(--rayon); box-shadow:var(--decal);
padding:11px 11px 9px; cursor:grab; width:clamp(118px,19cqw,182px); touch-action:none;
transition:transform .1s, box-shadow .1s, border-color .12s, background .12s; }
.ord-item:active{ cursor:grabbing; }
.ord-item.ord-vol{ opacity:.45; }
.ord-numerote .ord-item{ counter-increment:ord; }
.ord-numerote .ord-item::before{ content:counter(ord); position:absolute; top:-13px; left:-13px; z-index:3;
width:31px; height:31px; border-radius:50%; display:grid; place-items:center;
background:var(--p-rose); color:#fff; font-family:var(--craieface); font-weight:700; font-size:15px; box-shadow:var(--decal); }
.ord-vignette{ width:100%; aspect-ratio:1/1; border-radius:var(--rayon-s); overflow:hidden;
background:var(--sol-2); display:grid; place-items:center; }
.ord-vignette img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }
.ord-legende{ font-family:var(--craieface); font-weight:700; font-size:clamp(13px,1.6cqw,19px);
color:var(--ligne); text-align:center; white-space:normal; overflow-wrap:break-word; max-width:100%; line-height:1.16; }
.ord-ecoute{ position:absolute; top:8px; right:8px; z-index:2; background:var(--bloc);
border:var(--trait-fin) solid var(--voile-fort); border-radius:50%; width:31px; height:31px;
font-size:16px; cursor:pointer; display:grid; place-items:center; padding:0; }
.ord-ecoute:hover{ background:var(--p-jaune); border-color:var(--p-jaune); }
.ord-fleches{ display:flex; gap:8px; margin-top:1px; }
.ord-fleches button{ background:var(--sol-2); border:var(--trait-fin) solid var(--voile-fort);
border-radius:8px; width:38px; height:27px; cursor:pointer; font-size:14px; color:var(--ligne);
display:grid; place-items:center; transition:background .1s; }
.ord-fleches button:hover{ background:var(--p-jaune); border-color:var(--p-jaune); }
.ord-item[data-ok="1"]{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, var(--bloc)); }
.ord-item[data-ok="0"]{ border-color:var(--ko); background:color-mix(in srgb, var(--ko) 12%, var(--bloc)); }
.ord-item[data-ok] .ord-fleches{ visibility:hidden; }
/* ---------- Reformer : mots à glisser dans l'ordre (frise qui s'enroule) ----------
Aucune zone de dépôt : la tuile se dimensionne à son mot → texte GROS, une ligne. */
/* ==================== Jeu de dominos ====================
Refonte visuelle (29/09/2026) : dominos ivoire en relief, séparateur gravé
et rivet de laiton, plateau en feutrine verte bordé de bois, main posée sur
un plateau de bois. Mécanique inchangée (chaîne DÉBUT → FIN, pose alternée
horizontale / verticale, solo projeté et duo tablette retourné à 180°).
La police suit le réglage d'écriture de l'appli (--craieface). */
.jeu-piste:has(.dm-app){ padding:0; gap:0; height:100%; }
.dm-app{ --dm-p1:#1e6fd9; --dm-p2:#ad1457; --dm-ok:#0b7a4b; --dm-ko:#b3261e; --dm-encre:#1f2a30;
--dm-ivoire:#fffdf7; --dm-ivoire2:#efe6d2; --dm-arete:#c9b98f;
--dm-feutre:#1d7a50; --dm-feutre2:#0f4d31; --dm-bois:#7a4a28; --dm-bois2:#4b2b15; --dm-or:#ffd166;
--dm-w:240px; --dm-h:107px;
width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden;
border-radius:var(--rayon); font-family:var(--craieface, system-ui, sans-serif);
text-align:initial; }
/* --- Le domino : ivoire, arêtes arrondies, relief sur trois épaisseurs --- */
.dm-domino{ position:relative; display:flex; flex-shrink:0; padding:0; cursor:pointer;
color:var(--dm-encre); font:inherit;
background:linear-gradient(155deg, var(--dm-ivoire) 0%, #f8f2e3 55%, var(--dm-ivoire2) 100%);
border:1px solid var(--dm-arete); border-radius:calc(var(--dm-h) * .14);
box-shadow:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 0 rgba(140,110,60,.16),
0 1px 0 #c2b085, 0 3px 0 #ab9870, 0 5px 0 #97835b, 0 10px 18px rgba(0,0,0,.32);
transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
/* Le rivet central, là où se rejoignent les deux moitiés. */
.dm-domino::after{ content:""; position:absolute; left:50%; top:50%; z-index:2;
width:calc(var(--dm-h) * .11); height:calc(var(--dm-h) * .11); border-radius:50%;
transform:translate(-50%,-50%); pointer-events:none;
background:radial-gradient(circle at 35% 30%, #fff6c9 0 18%, #d9a82e 45%, #8a6414 100%);
box-shadow:0 1px 1px rgba(0,0,0,.35); }
.dm-domino:not(.dm-pose):hover{ transform:translateY(-5px) rotate(-.8deg);
box-shadow:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 0 rgba(140,110,60,.16),
0 1px 0 #c2b085, 0 3px 0 #ab9870, 0 5px 0 #97835b, 0 18px 26px rgba(0,0,0,.38),
0 0 0 3px var(--dm-or); }
.dm-domino:not(.dm-pose):focus-visible{ outline:4px solid var(--dm-or); outline-offset:4px; }
.dm-domino:not(.dm-pose):active{ transform:translateY(2px);
box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 1px 0 #c2b085, 0 2px 4px rgba(0,0,0,.3); }
/* Posé sur le plateau : il « tombe » en place, puis reste calme. */
.dm-domino.dm-pose{ cursor:default;
box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 1px 0 #c2b085, 0 3px 0 #a8956c, 0 6px 10px rgba(0,0,0,.35);
animation:dm-pose .38s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes dm-pose{ from{ transform:translateY(-28px) scale(1.12) rotate(-4deg); opacity:0; }
to{ transform:none; opacity:1; } }
/* Le dernier posé brille : c'est lui qu'il faut prolonger. */
.dm-domino.dm-dernier{ box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 1px 0 #c2b085, 0 3px 0 #a8956c,
0 6px 10px rgba(0,0,0,.35), 0 0 0 4px var(--dm-or), 0 0 22px 4px rgba(255,209,102,.55); }
.dm-domino.dm-dernier .dm-half:last-of-type{ background:radial-gradient(ellipse at center, rgba(255,209,102,.28), transparent 70%); }
/* --- Les deux moitiés --- */
.dm-half{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
padding:calc(var(--dm-h) * .07); gap:calc(var(--dm-h) * .06); text-align:center;
font-weight:800; color:var(--dm-encre); font-size:calc(var(--dm-h) * .24);
overflow:hidden; position:relative; min-width:0; min-height:0; border-radius:inherit; }
.dm-img{ max-width:86%; max-height:calc(var(--dm-h) * .56); object-fit:contain;
border-radius:calc(var(--dm-h) * .05); filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.dm-half:has(.dm-img):not(:has(.dm-txt)) .dm-img{ max-height:calc(var(--dm-h) * .78); }
/* Le texte passe à la ligne plutôt que de rétrécir à l'extrême. */
.dm-txt{ line-height:1.05; white-space:normal; overflow-wrap:anywhere; hyphens:auto; max-width:100%;
text-shadow:0 1px 0 rgba(255,255,255,.8); }
.dm-audio{ display:flex; justify-content:center; align-items:center; flex-shrink:0; z-index:5;
border-radius:50%; cursor:pointer; color:#fff;
background:radial-gradient(circle at 35% 30%, #5fa2ff, var(--dm-p1) 70%);
width:calc(var(--dm-h) * .30); height:calc(var(--dm-h) * .30); font-size:calc(var(--dm-h) * .15);
box-shadow:0 3px 0 #0d4ea6, 0 4px 8px rgba(0,0,0,.25); }
.dm-audio:active{ transform:translateY(3px); box-shadow:none; }
/* Séparateur gravé : un trait sombre doublé d'un reflet clair. */
.dm-domino[data-rot="0"]{ flex-direction:row; width:var(--dm-w); height:var(--dm-h); }
.dm-domino[data-rot="0"] .dm-half-g{ border-right:2px solid rgba(110,85,40,.38);
box-shadow:1px 0 0 rgba(255,255,255,.9); }
.dm-domino[data-rot="1"]{ flex-direction:column; width:var(--dm-h); height:var(--dm-w); }
.dm-domino[data-rot="1"] .dm-half-g{ border-bottom:2px solid rgba(110,85,40,.38);
box-shadow:0 1px 0 rgba(255,255,255,.9); }
/* --- DÉBUT / FIN : de vraies pastilles, contrastées --- */
.dm-bout{ display:inline-flex; align-items:center; gap:.3em; padding:.28em .6em;
border-radius:999px; border:2px solid currentColor; letter-spacing:.08em;
text-transform:uppercase; font-size:.72em; line-height:1; max-width:100%; white-space:nowrap; }
.dm-bout--debut{ color:var(--dm-ok); background:#e2f4ea; }
.dm-bout--debut::before{ content:"\25B6"; font-size:.8em; }
.dm-bout--fin{ color:var(--dm-ko); background:#fde8e6; }
.dm-bout--fin::after{ content:"\25A0"; font-size:.8em; }
/* --- Erreur --- */
.dm-domino.dm-faux{ animation:dm-secousse .42s both;
background:linear-gradient(155deg, #fff1ee, #ffc8bf); border-color:var(--dm-ko);
box-shadow:0 0 0 3px var(--dm-ko), 0 8px 16px rgba(179,38,30,.35); }
@keyframes dm-secousse{ 15%,75%{ transform:translateX(7px) rotate(1deg); } 35%,55%{ transform:translateX(-7px) rotate(-1deg); } }
/* --- Mode solo (projeté) : feutrine + main sur un plateau de bois --- */
.dm-app--solo{ background:var(--dm-bois2); }
.dm-app--solo .dm-domino.dm-pose{ margin-right:-2px; margin-bottom:14px; }
.dm-plateau-boite{ flex:1.5; padding:26px 16px; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth;
background:
repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
radial-gradient(ellipse at 50% 35%, #2a9466 0%, var(--dm-feutre) 45%, var(--dm-feutre2) 100%);
box-shadow:inset 0 0 70px rgba(0,0,0,.45), inset 0 -2px 0 rgba(0,0,0,.3);
border-bottom:12px solid var(--dm-bois); border-image:linear-gradient(180deg, #9a6236, var(--dm-bois2)) 1; }
.dm-plateau{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
align-content:flex-start; gap:12px; width:100%; max-width:1400px; margin:0 auto; min-width:0; }
.dm-plateau:empty::before{ content:attr(data-vide); /* posé par le jeu, dans la langue de l'activité */
margin-top:clamp(20px, 8cqh, 80px); padding:.6em 1.2em; border-radius:999px;
color:rgba(255,255,255,.88); border:2px dashed rgba(255,255,255,.35);
font-weight:700; font-size:clamp(15px, 2cqw, 22px); letter-spacing:.02em; }
.dm-reserve{ flex:1.15; padding:18px; display:flex; flex-wrap:wrap; justify-content:center;
align-content:flex-start; gap:15px; overflow-y:auto;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 11px),
repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 23px),
linear-gradient(180deg, #6e4222, var(--dm-bois2));
box-shadow:inset 0 14px 22px rgba(0,0,0,.45); }
/* --- Mode duo (tablette) --- */
.dm-app--duo{ background:var(--dm-bois2); }
.dm-app--duo .dm-domino.dm-pose{ margin-right:-2px; margin-bottom:8px; }
.dm-app--duo .dm-audio{ background:radial-gradient(circle at 35% 30%, #4fd1a0, var(--dm-ok) 70%); box-shadow:0 3px 0 #064d30; }
.dm-zone{ flex:1; display:flex; flex-direction:column; padding:15px; box-sizing:border-box;
overflow-y:auto; overflow-x:hidden; position:relative; transition:opacity .3s, filter .3s;
background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 11px),
linear-gradient(180deg, #6e4222, var(--dm-bois2)); }
.dm-zone--2{ transform:rotate(180deg); box-shadow:inset 0 -5px 0 var(--dm-p2); }
.dm-zone--1{ box-shadow:inset 0 5px 0 var(--dm-p1); }
.dm-zone.dm-endormi{ opacity:.45; filter:grayscale(70%) brightness(.9); pointer-events:none; }
.dm-joueur{ align-self:center; display:flex; align-items:center; justify-content:center; gap:10px;
margin-bottom:10px; padding:5px 8px 5px 16px; border-radius:999px; color:#fff;
font-size:16px; font-weight:800; letter-spacing:.12em; box-shadow:0 3px 0 rgba(0,0,0,.3); }
.dm-joueur--1{ background:var(--dm-p1); }
.dm-joueur--2{ background:var(--dm-p2); }
.dm-pts{ letter-spacing:0; font-weight:800; padding:2px 10px; border-radius:999px;
background:rgba(0,0,0,.25); color:inherit; font-variant-numeric:tabular-nums; }
.dm-main{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.dm-centre{ flex:1.8; display:flex; min-height:0;
background:radial-gradient(ellipse at 50% 40%, #2a9466 0%, var(--dm-feutre) 50%, var(--dm-feutre2) 100%);
box-shadow:inset 0 0 60px rgba(0,0,0,.45); }
.dm-app--duo .dm-plateau{ flex:1; padding:15px; overflow-y:auto; align-content:flex-start; gap:8px; }
.dm-panneau{ width:140px; flex-shrink:0; display:flex; flex-direction:column; align-items:center;
justify-content:center; padding:10px; background:rgba(0,0,0,.22); border-left:3px solid rgba(0,0,0,.25); }
.dm-tour{ width:100%; height:120px; border-radius:16px; font-weight:800; font-size:18px; color:#fff;
display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
background:var(--dm-p1); border:3px solid rgba(255,255,255,.85);
box-shadow:0 5px 0 rgba(0,0,0,.35), 0 0 24px rgba(30,111,217,.55); transition:background .3s, box-shadow .3s; }
.dm-tour[data-j="2"]{ background:var(--dm-p2); box-shadow:0 5px 0 rgba(0,0,0,.35), 0 0 24px rgba(173,20,87,.55); }
/* --- Téléphone --- */
@media (max-width:768px){
.dm-domino{ box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 #c2b085, 0 3px 0 #a8956c, 0 6px 10px rgba(0,0,0,.3); }
.dm-plateau-boite{ padding:14px 8px; border-bottom-width:8px; }
.dm-reserve{ padding:12px 5px; gap:8px; }
.dm-app--duo .dm-domino.dm-pose{ margin-right:-2px; margin-bottom:5px; }
.dm-zone{ padding:8px; }
.dm-joueur{ font-size:12px; margin-bottom:5px; padding:3px 6px 3px 10px; }
.dm-main{ gap:5px; }
.dm-app--duo .dm-plateau{ padding:8px; gap:4px; }
.dm-panneau{ width:80px; padding:5px; }
.dm-tour{ height:70px; font-size:12px; border-width:2px; border-radius:10px; }
}
@media (prefers-reduced-motion: reduce){
.dm-domino.dm-pose, .dm-domino.dm-faux{ animation:none; }
.dm-domino:not(.dm-pose):hover{ transform:none; }
}
.rf-piste{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
gap:clamp(10px,1.8cqw,18px); width:min(96cqw,1500px); margin:16px auto; padding:6px; }
.rf-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
background:var(--p-jaune); border:var(--trait) solid var(--sur-jaune); border-radius:16px;
padding:14px 24px; box-shadow:0 4px 0 rgba(0,0,0,.2); cursor:grab; touch-action:none;
user-select:none; -webkit-user-select:none;
transition:transform .1s, box-shadow .1s, border-color .15s, background .15s; }
.rf-item:hover{ transform:translateY(-2px); }
.rf-item:active{ cursor:grabbing; }
.rf-item.rf-vol{ opacity:.45; }
.rf-mot{ font-family:var(--craieface); font-weight:700; white-space:normal; overflow-wrap:break-word; line-height:1.1;
color:var(--sur-jaune); font-size:clamp(24px,3.6cqw,42px); }
.rf-fleches{ display:flex; gap:8px; }
.rf-fleches button{ border:0; background:rgba(0,0,0,.12); color:var(--sur-jaune);
width:32px; height:26px; border-radius:8px; cursor:pointer; font-size:14px;
display:grid; place-items:center; padding:0; transition:background .1s; }
.rf-fleches button:hover{ background:rgba(0,0,0,.22); }
.rf-item[data-ok="1"]{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 16%, var(--bloc)); }
.rf-item[data-ok="1"] .rf-mot{ color:var(--ok); }
.rf-item[data-ok="0"]{ border-color:var(--ko); background:color-mix(in srgb, var(--ko) 16%, var(--bloc)); }
.rf-item[data-ok="0"] .rf-mot{ color:var(--ko); }
.rf-item[data-ok] .rf-fleches{ visibility:hidden; }
@media (max-width:560px){
.rf-piste{ gap:8px; }
.rf-item{ padding:10px 15px; border-radius:13px; }
.rf-mot{ font-size:clamp(19px,6.6cqw,30px); }
}
/* Poubelle des pièges : on y glisse les mots intrus. */
.rf-poubelle{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
width:min(92cqw,620px); min-height:66px; margin:6px auto 2px; padding:12px 18px; border-radius:16px;
border:3px dashed var(--voile-fort); background:color-mix(in srgb, var(--ko) 6%, transparent);
color:var(--efface); font-family:var(--craieface); font-weight:700;
transition:background .12s, border-color .12s; }
.rf-poubelle.rf-vise{ border-style:solid; border-color:var(--ko);
background:color-mix(in srgb, var(--ko) 15%, transparent); }
.rf-poubelle-icone{ font-size:26px; }
.rf-poubelle .rf-item{ padding:8px 15px; }
.rf-poubelle .rf-item .rf-mot{ font-size:clamp(17px,2.4cqw,24px); }
.rf-poubelle .rf-fleches{ display:none; }
@media (max-width:560px){ .rf-poubelle{ min-height:56px; padding:10px 12px; } }
/* Petites flèches de réordonnancement dans l'éditeur d'images. */
.reordonner{ display:flex; flex-direction:column; gap:2px; }
.reordonner .mini-fleche{ background:var(--sol-2); border:var(--trait-fin) solid var(--voile-fort);
border-radius:5px; width:26px; height:18px; cursor:pointer; font-size:10px; color:var(--ligne);
display:grid; place-items:center; padding:0; transition:background .1s; }
.reordonner .mini-fleche:hover:not(:disabled){ background:var(--p-jaune); border-color:var(--p-jaune); }
.reordonner .mini-fleche:disabled{ opacity:.3; cursor:default; }
/* Zone de dépôt d'images en lot (éditeur). */
.p-depot-images{ display:flex; align-items:center; gap:12px; justify-content:center; text-align:center;
border:2px dashed var(--e-rose); border-radius:var(--rayon); padding:14px 18px; margin:12px 0 4px;
cursor:pointer; color:var(--ligne); background:color-mix(in srgb, var(--e-rose) 6%, transparent);
transition:background .12s, border-color .12s; font-size:14px; line-height:1.25; }
.p-depot-images:hover, .p-depot-images.survol{ background:color-mix(in srgb, var(--e-rose) 15%, transparent); border-color:var(--ligne); }
.p-depot-images.survol{ border-style:solid; }
.p-depot-images.occupe{ opacity:.6; pointer-events:none; }
.p-depot-images .em{ font-size:24px; flex:none; }
.p-depot-images em{ color:var(--efface); font-style:italic; }
/* Recherche d'images Pixabay (modale). */
.px-barre{ display:flex; gap:10px; margin:12px 0 4px; }
.px-barre input{ flex:1; min-width:0; font:inherit; font-size:16px; padding:11px 13px;
border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s);
background:var(--sol-2); color:var(--ligne); }
.px-barre input:focus{ outline:none; border-color:var(--p-bleu); background:var(--bloc); }
.px-etat{ min-height:20px; color:var(--efface); font-size:14px; margin:4px 0; }
.px-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); gap:10px;
max-height:52cqh; overflow:auto; padding:2px; }
.px-vig{ position:relative; padding:0; border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s);
overflow:hidden; cursor:pointer; background:var(--sol-2); aspect-ratio:4/3;
transition:transform .1s, border-color .1s; }
.px-vig:hover{ border-color:var(--p-bleu); transform:translateY(-2px); }
.px-vig img{ width:100%; height:100%; object-fit:cover; display:block; }
.px-vig.px-charge{ opacity:.5; }
.px-vig.px-charge::after{ content:"…"; position:absolute; inset:0; display:grid; place-items:center;
font-size:30px; color:#fff; text-shadow:0 1px 4px #000; }
.px-pied{ text-align:center; margin-top:12px; }
.px-credit{ margin-top:10px; font-size:12px; color:var(--efface); text-align:center; }
.px-credit a{ color:var(--p-bleu); }
/* ==========================================================================
LE CASIER — bibliothèque communautaire, intégrée à la cour.
Redessiné aux couleurs de la craie : bandeaux vifs, relief franc, tuiles
qui se soulèvent. Tout est scopé sous #casier-container.
========================================================================== */
#casier-container{ max-width:1180px; margin:0 auto; }
#casier-container *{ box-sizing:border-box; }
#casier-container .cs-intro{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
border:var(--trait) solid var(--e-bleu); border-radius:var(--rayon); background:var(--bloc);
padding:16px 18px; margin-bottom:20px; box-shadow:var(--decal); }
#casier-container .cs-intro .cs-ic{ font-size:40px; line-height:1; }
#casier-container .cs-intro h2{ font-family:var(--craieface); font-weight:700; font-size:clamp(19px,2.4cqw,26px);
margin:0; color:var(--e-bleu); }
#casier-container .cs-intro p{ margin:3px 0 0; color:var(--efface); font-size:14px; line-height:1.45; }
#casier-container .cs-barre{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px; }
#casier-container .cs-barre input,
#casier-container .cs-barre select{ font:inherit; font-size:15px; padding:11px 13px;
border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s);
background:var(--sol-2); color:var(--ligne); }
#casier-container .cs-barre input{ flex:1 1 260px; min-width:200px; }
#casier-container .cs-barre input:focus,
#casier-container .cs-barre select:focus{ outline:none; border-color:var(--p-bleu); background:var(--bloc); }
#casier-container .cs-compte{ font-family:var(--mono); font-size:12.5px; color:var(--efface); margin:2px 2px 18px; }
#casier-container .cs-grille{ display:grid; gap:16px;
grid-template-columns:repeat(auto-fill,minmax(min(100%,248px),1fr)); }
#casier-container .cs-carte{ background:var(--bloc); border:var(--trait-fin) solid var(--voile-fort);
border-radius:var(--rayon); box-shadow:var(--decal); overflow:hidden;
display:flex; flex-direction:column; transition:transform .13s, box-shadow .13s, border-color .13s;
transform:rotate(var(--gite,-.5deg)); }
#casier-container .cs-carte:nth-child(even){ --gite:.6deg; }
#casier-container .cs-carte:hover{ transform:rotate(0deg) translateY(-4px);
box-shadow:0 9px 0 var(--ombre-portee); border-color:var(--pot,var(--e-bleu)); }
#casier-container .cs-bandeau{ height:12px; background:var(--pot,var(--p-bleu)); }
/* Croix de retrait : uniquement sur SES PROPRES partages (jeton local). */
#casier-container .cs-carte{ position:relative; }
#casier-container .cs-croix{ position:absolute; top:18px; right:8px; z-index:3;
width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); color:var(--efface);
font-size:14px; line-height:1; cursor:pointer; box-shadow:var(--decal);
transition:background .12s, color .12s, transform .1s, border-color .12s; }
#casier-container .cs-croix:hover{ background:var(--p-rouge); color:#fff; border-color:transparent; transform:scale(1.1); }
#casier-container .cs-croix:active{ transform:scale(.92); }
#casier-container .cs-corps{ padding:15px 16px 8px; flex:1; }
#casier-container .cs-carte h3{ font-family:var(--craieface); font-weight:700; font-size:18px;
margin:0 0 10px; line-height:1.15; color:var(--ligne); overflow-wrap:anywhere; }
#casier-container .cs-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
#casier-container .cs-etiq{ font-family:var(--craieface); font-weight:700; font-size:11.5px;
padding:4px 10px; border-radius:999px; background:var(--voile); border:var(--trait-fin) solid var(--voile-fort);
color:var(--efface); }
#casier-container .cs-etiq.mat{ border-color:var(--e-bleu); color:var(--e-bleu); }
#casier-container .cs-etiq.type{ border-color:var(--e-vert); color:var(--e-vert); }
#casier-container .cs-auteur{ font-size:13px; color:var(--efface); }
#casier-container .cs-auteur strong{ color:var(--ligne); }
#casier-container .cs-pied{ display:flex; gap:8px; padding:10px 16px 16px; }
#casier-container .cs-btn{ font-family:var(--craieface); font-weight:700; font-size:14px; cursor:pointer;
border:var(--trait) solid var(--ligne); border-radius:var(--rayon-s); padding:10px 12px; flex:1;
background:var(--bloc); color:var(--ligne); box-shadow:var(--decal); transition:transform .08s, box-shadow .08s, background .12s; }
#casier-container .cs-btn:active{ transform:translateY(3px); box-shadow:none; }
#casier-container .cs-btn.jouer{ border-color:var(--e-rouge); color:#fff; background:var(--p-rouge); }
#casier-container .cs-btn.jouer:hover{ filter:brightness(1.06); }
#casier-container .cs-btn.dupliquer{ border-color:var(--e-bleu); color:var(--e-bleu); }
#casier-container .cs-btn.dupliquer:hover{ background:var(--sol-2); }
#casier-container .cs-etat{ text-align:center; padding:54px 20px; color:var(--efface); }
#casier-container .cs-loader{ width:44px; height:44px; margin:0 auto 16px; border-radius:50%;
border:5px solid var(--voile-fort); border-top-color:var(--p-bleu); animation:cs-tourne .9s linear infinite; }
@keyframes cs-tourne{ to{ transform:rotate(360deg); } }
#casier-container .cs-vide{ text-align:center; padding:48px 24px; border:2px dashed var(--voile-fort);
border-radius:var(--rayon); background:var(--bloc); max-width:600px; margin:24px auto; }
#casier-container .cs-vide .ic{ font-size:52px; display:block; margin-bottom:10px; }
#casier-container .cs-vide .t{ font-family:var(--craieface); font-weight:700; font-size:20px; margin:0 0 6px; color:var(--ligne); }
#casier-container .cs-vide .d{ color:var(--efface); font-size:14.5px; line-height:1.55; margin:0 auto; max-width:440px; }
#casier-container .cs-vide code{ font-family:var(--mono); font-size:12px; background:var(--voile);
padding:2px 6px; border-radius:4px; color:var(--ligne); }
#casier-container .cs-erreur{ border:var(--trait-fin) solid var(--e-rouge); color:var(--e-rouge);
border-radius:var(--rayon); padding:18px; max-width:560px; margin:36px auto; background:var(--bloc); text-align:center; }
#casier-container .cs-erreur strong{ display:block; margin-bottom:6px; font-family:var(--craieface); }
@media (prefers-reduced-motion:reduce){ #casier-container .cs-loader{ animation:none; } #casier-container .cs-carte{ transform:none; } }
/* ==========================================================================
MODE 2 JOUEURS — bandeau de score commun (Memory, Œil de lynx).
========================================================================== */
.duo-hud{ display:flex; align-items:stretch; justify-content:center; gap:10px; flex-wrap:wrap;
margin:0 auto 10px; width:min(96cqw,640px); }
.duo-j{ display:flex; align-items:center; gap:9px; padding:8px 16px; border-radius:var(--rayon);
border:var(--trait) solid var(--ligne); background:var(--bloc); box-shadow:var(--decal);
transition:transform .12s, box-shadow .12s, border-color .12s; opacity:.6; }
.duo-j.actif{ opacity:1; transform:translateY(-2px); }
.duo-a{ border-color:var(--p-bleu); }
.duo-a.actif{ box-shadow:0 0 0 3px var(--p-bleu), var(--decal); }
.duo-b{ border-color:var(--p-rose); }
.duo-b.actif{ box-shadow:0 0 0 3px var(--p-rose), var(--decal); }
.duo-nom{ font-family:var(--craieface); font-weight:700; font-size:clamp(14px,1.9cqw,18px); color:var(--ligne); white-space:nowrap; }
.duo-pts{ font-family:var(--craieface); font-weight:700; font-size:clamp(18px,2.4cqw,24px);
min-width:1.4em; text-align:center; }
.duo-a .duo-pts{ color:var(--p-bleu); }
.duo-b .duo-pts{ color:var(--p-rose); }
.duo-tour{ display:flex; align-items:center; padding:6px 14px; font-size:clamp(13px,1.7cqw,16px);
color:var(--efface); }
.duo-tour b{ color:var(--ligne); }
/* Œil de lynx en duo : chaque rond porte la couleur de son joueur. */
.do-duo .dobble-carte[data-cote="g"]{ outline:4px solid var(--p-bleu); outline-offset:2px; }
.do-duo .dobble-carte[data-cote="d"]{ outline:4px solid var(--p-rose); outline-offset:2px; }
/* Duo : chaque joueur et son étiquette forment une colonne — l'étiquette reste
toujours au-dessus de SON rond, que les ronds soient côte à côte ou empilés. */
.do-joueur{ display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; }
.do-etiq{ font-family:var(--craieface); font-weight:700; font-size:clamp(15px,2.4cqw,22px);
padding:7px 18px; border-radius:var(--rayon); border:var(--trait) solid; background:var(--bloc);
box-shadow:var(--decal); white-space:nowrap; }
.do-etiq.do-a{ border-color:var(--p-bleu); color:var(--p-bleu); }
.do-etiq.do-b{ border-color:var(--p-rose); color:var(--p-rose); }
.do-etiq b{ font-size:1.15em; }
/* ==========================================================================
IMPRESSION — planches à découper (mots mêlés, memory, flashcards).
Rempli à la demande dans #planche-impression, masqué à l'écran, seul visible
à l'impression. Tout est scopé sous #planche-impression.
========================================================================== */
#planche-impression{ display:none; }
@media print {
body > *{ display:none !important; }
body > #planche-impression{ display:block !important; }
html, body{ background:#fff !important; }
*{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
@page{ size:A4; margin:12mm; }
}
#planche-impression{ color:#111; font-family:"Andika","Segoe UI",system-ui,sans-serif; }
#planche-impression *{ box-sizing:border-box; }
.pl-page{ page-break-after:always; }
.pl-page:last-child{ page-break-after:auto; }
.pl-titre{ font-family:"Fredoka","Andika",sans-serif; font-weight:700; font-size:22pt; margin:0 0 2mm; text-align:center; }
.pl-sous{ text-align:center; font-size:11pt; color:#333; margin:0 0 6mm; }
.pl-consigne{ font-size:12pt; margin:0 0 5mm; }
/* Grille de lettres (mots mêlés) */
.pl-grille{ display:grid; gap:0; width:max-content; max-width:100%; margin:0 auto 6mm;
border:1.4pt solid #111; }
.pl-cel{ width:9mm; height:9mm; display:flex; align-items:center; justify-content:center;
font-size:14pt; font-weight:700; border:0.5pt solid #bbb; text-transform:uppercase; }
.pl-cel.pl-sol{ background:#ffe08a; border-color:#e0a200; }
.pl-mots{ column-width:42mm; column-gap:8mm; font-size:12.5pt; }
.pl-mots li{ break-inside:avoid; margin:0 0 1.5mm; }
.pl-mots ul{ list-style:none; padding:0; margin:0; }
.pl-mots li::before{ content:"\2610\00a0\00a0"; } /* case à cocher */
/* Cartes à découper (memory & flashcards) */
.pl-planche{ display:grid; grid-template-columns:repeat(var(--cols,4), 1fr); gap:3mm; }
.pl-carte{ border:1.2pt dashed #888; border-radius:2mm; aspect-ratio:3/4;
display:flex; align-items:center; justify-content:center; padding:3mm; overflow:hidden;
text-align:center; page-break-inside:avoid; }
.pl-carte .pl-txt{ font-weight:700; font-size:15pt; line-height:1.1; overflow-wrap:anywhere; }
.pl-carte img{ max-width:100%; max-height:100%; object-fit:contain; }
/* Dos de carte memory */
.pl-dos{ background-size:cover; background-position:center; }
/* Impression : dos blanc casse (le bleu du logo se perdait sur un dos bleu)
— et cela economise beaucoup d'encre. */
.pl-dos-defaut{ background:#f7f4ec; position:relative; border:1pt solid #3f8fd6; }
.pl-dos-defaut .pl-marelle{ display:grid; grid-template-columns:repeat(2, 7mm); grid-template-rows:repeat(2, 7mm);
gap:0.9mm; transform:rotate(-6deg) scale(1.2); }
.pl-dos-defaut .pl-marelle i{ display:block; width:7mm; height:7mm; border-radius:1.3mm; }
.pl-dos-defaut .pl-marelle i:nth-child(1){ grid-area:1 / 1; background:#cc3326; }
.pl-dos-defaut .pl-marelle i:nth-child(2){ grid-area:2 / 1; background:#f4be37; }
.pl-dos-defaut .pl-marelle i:nth-child(3){ grid-area:2 / 2; background:#2d6fc4; }
/* Cartes pliables (flashcards) : recto en haut, verso en bas retourné à 180°. */
.pl-pli{ border:1.2pt solid #444; border-radius:2mm; page-break-inside:avoid; overflow:hidden; }
.pl-pli .pl-moitie{ height:34mm; display:flex; align-items:center; justify-content:center;
padding:3mm; text-align:center; }
.pl-pli .pl-recto{ border-bottom:1.2pt dashed #888; }
.pl-pli .pl-verso{ transform:rotate(180deg); background:#f4f6f8; }
.pl-pli .pl-txt{ font-weight:700; font-size:15pt; line-height:1.1; overflow-wrap:anywhere; }
.pl-pli img{ max-width:100%; max-height:30mm; object-fit:contain; }
/* Verso « dos » d'une carte memory pliable : le dos remplit la moitié. */
.pl-pli-memory .pl-verso-dos{ padding:0; }
.pl-verso-dos .pl-dos-img{ width:100%; height:100%; max-height:none; object-fit:cover; }
.pl-verso-dos.pl-dos-defaut{ background:#f7f4ec; }
/* Cartes d'Œil de lynx (Dobble) à découper : des ronds. */
.pl-do-planche{ display:grid; grid-template-columns:repeat(2, 1fr); gap:6mm; }
.pl-do-carte{ position:relative; aspect-ratio:1; border:1.3pt solid #333; border-radius:50%;
background:#fff; overflow:hidden; page-break-inside:avoid; }
.pl-do-sym{ position:absolute; display:grid; place-items:center; }
.pl-do-sym img{ width:100%; height:100%; object-fit:contain; }
.pl-do-mot{ font-weight:700; font-size:11pt; line-height:1; text-align:center; overflow-wrap:anywhere; }
/* Dominos à découper : deux moitiés séparées par un trait pointillé. */
.pl-dm-planche{ display:grid; grid-template-columns:repeat(2, 1fr); gap:4mm; }
.pl-dm{ display:flex; border:1.4pt solid #111; border-radius:2mm; height:26mm;
overflow:hidden; page-break-inside:avoid; background:#fff; }
.pl-dm-moitie{ flex:1; display:flex; align-items:center; justify-content:center;
padding:2mm; text-align:center; overflow:hidden; min-width:0; }
.pl-dm-moitie:first-child{ border-right:1pt dashed #888; }
.pl-dm-txt{ font-weight:700; font-size:12.5pt; line-height:1.1; overflow-wrap:anywhere; }
.pl-dm-bout{ font-weight:700; font-size:11pt; letter-spacing:1.5pt; }
.pl-dm-moitie img{ max-width:100%; max-height:22mm; object-fit:contain; }
.pl-dm-sol{ column-width:60mm; column-gap:8mm; font-size:12pt; margin:0; padding-left:6mm; }
.pl-dm-sol li{ break-inside:avoid; margin:0 0 1.5mm; }
.pl-note{ font-size:9pt; color:#555; text-align:center; margin-top:5mm; }
/* ==========================================================================
PLACEMENT SUR IMAGE
========================================================================== */
/* --- Éditeur --- */
.rep-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0 10px; }
/* Le cadre est fixe et défile ; c'est le calque intérieur que le zoom étire.
Les repères vivent en pourcentage de ce calque : leurs coordonnées ne
bougent pas d'un iota quand on agrandit, seul le geste devient précis. */
.rep-plan{ position:relative; max-width:100%; line-height:0; border-radius:10px;
overflow:auto; box-shadow:0 1px 8px rgba(0,0,0,.16); cursor:crosshair;
max-height:56cqh; overscroll-behavior:contain; }
.rep-plan--zoome{ cursor:crosshair; box-shadow:0 1px 8px rgba(0,0,0,.16), inset 0 0 0 2px var(--p-bleu); }
.rep-zoom{ position:relative; width:calc(var(--zoom,1) * 100%); }
.rep-plan img{ display:block; width:100%; height:auto; user-select:none; -webkit-user-select:none; }
.rep-points{ position:absolute; inset:0; }
.rep-zoombar{ display:flex; align-items:center; gap:4px; }
.rep-zbtn{ width:32px; height:32px; border-radius:var(--rayon-s); border:var(--trait-fin) solid var(--voile-fort);
background:var(--bloc); color:var(--ligne); font-family:var(--craieface); font-weight:700;
font-size:17px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; }
.rep-zbtn--large{ width:auto; padding:0 10px; font-size:13px; }
.rep-zbtn:hover{ border-color:var(--p-bleu); }
.rep-zval{ min-width:52px; text-align:center; font-family:var(--craieface); font-weight:700;
font-size:13px; color:var(--efface); line-height:1; }
.rep-pt{ position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%;
border:3px solid #fff; background:var(--p-bleu); color:#fff; font-family:var(--craieface); font-weight:700;
font-size:14px; cursor:grab; padding:0; box-shadow:0 1px 4px rgba(0,0,0,.5); touch-action:none;
display:grid; place-items:center; }
.rep-pt:active{ cursor:grabbing; }
.rep-pt.survol{ background:var(--p-jaune); color:var(--sur-jaune); transform:translate(-50%,-50%) scale(1.22); z-index:2; }
.rep-liste{ list-style:none; margin:14px 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; }
.rep-ligne{ display:flex; align-items:center; gap:10px; }
.rep-num{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--p-bleu); color:#fff;
display:grid; place-items:center; font-family:var(--craieface); font-weight:700; font-size:14px; }
.rep-ligne input{ flex:1; }
/* --- Joueur : image grande + repères cliquables (rouge = à faire, vert = fait) --- */
.rep-jeu{ display:flex; flex-direction:column; gap:6px; width:100%; }
.rep-consigne{ flex:none; margin:0 0 2px; }
.rep-board{ position:relative; flex:1 1 auto; min-height:0; width:100%; margin:0 auto; }
.rep-fond{ position:absolute; border-radius:10px; box-shadow:0 2px 14px rgba(0,0,0,.2);
user-select:none; -webkit-user-select:none; }
.rep-marqueurs{ position:absolute; inset:0; pointer-events:none; }
/* Un simple pictogramme d'epingle : plus discret qu'une pastille numerotee.
Il pointe l'endroit exact et change de couleur selon l'etat. */
.rep-marqueur{ position:absolute; transform:translate(-50%,-100%); pointer-events:auto; cursor:pointer;
width:auto; height:auto; padding:0 2px; border:0; background:none; box-shadow:none;
font-size:clamp(26px,6.5cqw,40px); line-height:1; z-index:2;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
transition:transform .12s, filter .18s; }
.rep-marqueur span{ pointer-events:none; display:block; }
/* Zone tactile elargie autour de l'epingle (sans la grossir visuellement). */
.rep-marqueur::before{ content:""; position:absolute; inset:-9px -8px; border-radius:14px; }
.rep-marqueur:hover{ transform:translate(-50%,-100%) scale(1.15); }
/* Vert des qu'une etiquette a ete choisie (et si la reponse est juste). */
.rep-marqueur[data-etat="repondu"],
.rep-marqueur[data-etat="bon"]{
filter:hue-rotate(105deg) saturate(1.5) drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
/* Halo blanc a la correction, pour bien distinguer juste / faux. */
.rep-marqueur[data-etat="bon"] span,
.rep-marqueur[data-etat="faux"] span{ border-radius:50%;
box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ok); }
.rep-marqueur[data-etat="faux"] span{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ko); }
/* Barre d'actions : fixée en bas de la zone de jeu, toujours visible. */
.rep-barre{ flex:none; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
padding:6px 6px 2px; }
/* Fenêtre de choix des étiquettes (grosse cible tactile, texte lisible). */
/* Les étiquettes prennent la largeur de LEUR texte et se rangent en lignes :
une grille à colonnes égales coupait « The conservatory » en deux. */
/* Texte libre : la réponse écrite remplace l'épingle (position calée en JS, centrée sur le point). */
.rep-saisie{ position:absolute; z-index:2; pointer-events:auto; cursor:pointer;
font:inherit; font-family:var(--craieface); font-weight:700; font-size:clamp(13px,1.7cqw,18px); line-height:1.2;
padding:4px 10px; border-radius:999px; border:2px solid var(--ligne); background:#fff; color:#1d2027;
box-shadow:0 2px 6px rgba(0,0,0,.25); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-saisie[data-etat="repondu"]{ border-color:var(--p-bleu); }
.rep-saisie[data-etat="bon"]{ border-color:var(--ok); }
.rep-saisie[data-etat="faux"]{ border-color:var(--ko); text-decoration:line-through var(--ko); }
.rep-champ{ display:block; width:100%; box-sizing:border-box; font:inherit; font-size:clamp(20px,3cqw,30px);
text-align:center; padding:14px 16px; border-radius:14px; border:2px solid var(--voile-fort);
background:var(--sol-2); color:inherit; }
.rep-champ:focus{ outline:3px solid var(--p-bleu); outline-offset:2px; }
.rep-choix-grille{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.rep-choix-grille > *{ flex:0 0 auto; max-width:100%; }
.rep-choix{ min-height:60px; padding:14px 20px; border-radius:16px; cursor:pointer;
font-family:var(--craieface); font-weight:700; font-size:clamp(17px,4.2cqw,22px); line-height:1.15;
text-align:center; white-space:normal; overflow-wrap:break-word;
background:var(--p-jaune); color:var(--sur-jaune); border:3px solid var(--sur-jaune);
box-shadow:0 3px 0 rgba(0,0,0,.18); transition:transform .08s; }
.rep-choix:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.18); }
.rep-choix--actuel{ background:color-mix(in srgb, var(--p-bleu) 16%, var(--bloc)); border-color:var(--p-bleu); color:var(--ligne); }
/* Accessibilité (zoom, gros texte) : aucune tuile ne sort de l'écran. */
#vue-cour, #vue-preau{ overflow-x:clip; }
/* ---- Appariement « collant » (mode texte, façon LearningApps) ---- */
.ap-paire{ display:inline-flex; align-items:stretch; vertical-align:middle; }
.ap-eparse .ap-paire{ position:absolute; transform:translate(-50%,-50%); z-index:4; }
.ap-paire .ap-carte{ position:static !important; transform:none !important; margin:0; box-shadow:none; }
.ap-paire .ap-carte[data-cote="a"]{ border-top-right-radius:4px; border-bottom-right-radius:4px; }
.ap-paire .ap-carte[data-cote="b"]{ border-top-left-radius:4px; border-bottom-left-radius:4px; }
.ap-couture{ flex:0 0 36px; align-self:stretch; margin:0 -2px; cursor:pointer; z-index:6;
display:grid; place-items:center; background:transparent; border:0; position:relative; }
/* Zone tactile un peu plus large que le trait, pour le doigt. */
.ap-couture::after{ content:""; position:absolute; inset:-6px -8px; }
.ap-couture::before{ content:""; width:3px; height:62%; border-radius:3px; background:rgba(0,0,0,.32); }
/* Les ciseaux restent VISIBLES : au doigt il n'y a pas de survol, on ne savait
donc pas où appuyer pour séparer une paire. */
.ap-couture span{ position:absolute; font-size:15px; opacity:.92; transition:transform .12s;
background:var(--bloc); border:2px solid var(--ko); border-radius:50%; width:30px; height:30px;
display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.ap-couture:hover span, .ap-couture:focus-visible span{ opacity:1; transform:scale(1.12); }
.ap-couture:hover::before{ background:var(--ko); }
.ap-paire.ok .ap-couture::before{ background:color-mix(in srgb, var(--ok) 60%, transparent); }
/* Tuile « portée » pendant un glisser-déposer (Reformer, Chrono, Remettre en ordre). */
.reord-fantome{ opacity:.96; transform-origin:center; box-shadow:0 10px 22px rgba(0,0,0,.28);
filter:brightness(1.02); border-radius:14px; cursor:grabbing; }
/* Trier & jeux à zones : un emplacement vidé se replie (retiré du flux) pour que
la réserve rétrécisse à mesure et ne pousse pas le bouton Vérifier hors écran. */
.app-slot--vide{ display:none !important; }
/* Associer images : la réserve NE BOUGE PAS. Les étiquettes ont toutes la même
taille (celle d'une case de dépôt), et un emplacement libéré garde sa place
au lieu de se replier — sinon toute la réserve se réorganise à chaque dépôt
et les étiquettes sautent sous le doigt de l'élève. */
.app-reserve--stable .app-slot{ width:var(--etq-w,160px); height:var(--etq-h,64px); }
.app-reserve--stable .app-slot--vide{ display:inline-flex !important; visibility:hidden; }
.app-reserve--stable .app-etq{ width:var(--etq-w,160px); height:var(--etq-h,64px);
max-width:none; padding:5px 9px; border-radius:14px;
display:flex; align-items:center; justify-content:center; overflow:hidden; }
.app-reserve--stable .app-etq .app-mot{ max-width:100%; max-height:100%; overflow:hidden; }
/* Sa hauteur est acquise dès le départ : elle ne se replie plus en fin de partie. */
.app-reserve--stable.app-reserve--vide{ padding:7px 10px; opacity:.55; }
/* Trier sur téléphone : fenêtre de choix du carton au tap d'une étiquette. */
.tri-choix-mot{ font-family:var(--craieface); font-weight:800; font-size:clamp(20px,5cqw,30px);
text-align:center; margin:4px 0 14px; color:var(--ligne); }
.tri-choix-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:10px; }
.tri-choix{ min-height:62px; padding:14px 12px; border-radius:16px; cursor:pointer;
font-family:var(--craieface); font-weight:700; font-size:clamp(17px,4.5cqw,22px); line-height:1.15;
background:var(--p-jaune); color:var(--sur-jaune); border:3px solid var(--sur-jaune);
box-shadow:0 3px 0 rgba(0,0,0,.18); transition:transform .08s; }
.tri-choix:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.18); }
/* Zone du bas : les paires assemblées s'y empilent, en attendant « Vérifier ». */
.ap-assemblees{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-start;
width:min(100%,2100px); margin:16px auto 0; padding:26px 8px 10px; position:relative;
background:color-mix(in srgb, var(--e-violet) 6%, transparent);
border:2px dashed var(--voile-fort); border-radius:var(--rayon);
border-top:4px solid var(--ligne); }
/* Intitulé posé sur la ligne de séparation : on voit bien que les paires
formées descendent dans une zone à part. */
.ap-assemblees::before{ content:"Paires formées"; position:absolute; left:50%; top:-2px;
transform:translate(-50%,-50%); background:var(--sol); color:var(--efface);
font-family:var(--craieface); font-weight:700; font-size:clamp(12px,1.5cqw,16px);
padding:2px 12px; border-radius:20px; white-space:nowrap; }
.ap-assemblees .ap-paire{ position:static !important; transform:none !important; }
.ap-barre{ display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.ap-paire.ok .ap-carte{ border-color:var(--ok); }
.ap-paire.faux .ap-carte{ border-color:var(--ko); }
/* Journal de diagnostic */
.jr-etat{ display:grid; gap:4px; margin:6px 0 10px; padding:10px 12px; border-radius:12px;
background:var(--voile); font-size:15px; }
.jr-liste{ list-style:none; margin:0 0 10px; padding:0; max-height:44cqh; overflow:auto;
border:1px solid var(--voile-fort); border-radius:12px; }
.jr-liste li{ padding:8px 10px; border-bottom:1px solid var(--voile); font-size:13px; line-height:1.35; }
.jr-liste li:last-child{ border-bottom:0; }
.jr-t{ display:inline-block; padding:1px 7px; border-radius:20px; background:var(--voile-fort);
font-size:11px; font-weight:700; margin:0 4px; }
.jr-ko{ color:var(--ko); }
.jr-ko .jr-t{ background:color-mix(in srgb, var(--ko) 24%, transparent); }
.jr-rep .jr-t{ background:color-mix(in srgb, var(--ok) 24%, transparent); }
.jr-d{ opacity:.72; font-size:12px; }
/* ==========================================================================
LE CORRIGÉ (« Voir les réponses ») — lisible de loin, pour la projection.
========================================================================== */
.cor-voile{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.62);
display:grid; place-items:center; padding:14px; overscroll-behavior:none; }
.cor-boite{ background:var(--bloc); color:var(--ligne); border-radius:var(--rayon);
border:var(--trait) solid var(--ligne); box-shadow:0 12px 0 var(--ombre-portee);
width:min(100%,1500px); max-height:94dvh; display:flex; flex-direction:column; overflow:hidden; }
.cor-tete{ flex:none; display:flex; align-items:center; gap:12px; justify-content:space-between;
padding:12px 16px; border-bottom:2px solid var(--voile-fort); }
.cor-titre{ font-family:var(--craieface); font-weight:800; font-size:clamp(18px,2.4cqw,30px); }
.cor-corps{ flex:1; min-height:0; overflow:auto; padding:16px 18px 22px; }
/* Placement sur image : le schéma avec les étiquettes à leur place. */
.cor-plan{ position:relative; display:inline-block; line-height:0; margin:0 auto; }
.cor-plan img{ display:block; max-width:100%; max-height:74dvh; border-radius:10px; }
.cor-etq{ position:absolute; transform:translate(-50%,-50%); line-height:1.1;
font-family:var(--craieface); font-weight:700; font-size:clamp(13px,1.5cqw,22px);
background:var(--bloc); color:var(--ligne); border:3px solid var(--ok);
border-radius:12px; padding:5px 10px; white-space:normal; max-width:min(30cqw,240px);
text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.45); }
/* Phrases / ordre : une colonne bien lisible. */
.cor-liste{ margin:0 auto; padding-left:1.6em; max-width:1100px;
font-family:var(--craieface); font-weight:700; font-size:clamp(19px,2.5cqw,34px); line-height:1.4; }
.cor-liste li{ margin:0 0 12px; }
.cor-liste--phrases{ list-style:decimal; }
.cor-liste--ordre{ list-style:decimal; }
/* Remettre en ordre : les images dans le bon ordre. */
.cor-images{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.cor-images li{ position:relative; background:var(--voile); border-radius:14px; padding:10px;
display:flex; flex-direction:column; align-items:center; gap:8px; }
.cor-images img{ width:100%; max-height:26dvh; object-fit:contain; border-radius:8px; }
.cor-rang{ position:absolute; left:6px; top:6px; width:34px; height:34px; border-radius:50%;
background:var(--p-bleu); color:#fff; display:grid; place-items:center;
font-family:var(--craieface); font-weight:800; font-size:17px; }
.cor-leg{ font-family:var(--craieface); font-weight:700; font-size:clamp(14px,1.6cqw,22px); text-align:center; }
/* Trier : un carton par catégorie. */
.cor-cartons{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.cor-carton{ border:3px solid var(--ligne); border-radius:16px; padding:12px 14px; background:var(--voile); }
.cor-carton h3{ margin:0 0 10px; font-family:var(--craieface); font-size:clamp(18px,2.2cqw,28px);
text-align:center; border-bottom:2px dashed var(--voile-fort); padding-bottom:8px; }
.cor-carton ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.cor-carton li{ background:var(--bloc); border:2px solid var(--voile-fort); border-radius:20px;
padding:7px 14px; font-family:var(--craieface); font-weight:700; font-size:clamp(15px,1.9cqw,26px); }
/* ==========================================================================
MOTS CROISÉS
========================================================================== */
.mc-jeu{ display:flex; flex-wrap:wrap; gap:clamp(12px,2cqw,28px); align-items:flex-start;
justify-content:center; width:100%; }
/* La grille vit dans une boîte : c'est elle qui borne la largeur et, sur les
écrans vraiment étroits, qui laisse défiler latéralement plutôt que de
réduire les cases jusqu'à l'illisible. */
/* Grand écran : la grille à gauche, le panneau et le mot mystère dans une
colonne étroite à droite. La grille récupère ainsi TOUTE la hauteur — la
mettre au-dessus du panneau la rapetissait au lieu de l'agrandir. */
/* Sous la grille : le mot en cours (sans encadre), les listes eventuelles,
puis le bandeau du mot mystere JUSTE au-dessus du bouton « Verifier ». */
.mc-bas{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
.mc-bas .mc-mot, .mc-bas .mc-mystere{ width:min(100%,1100px); margin:0; }
.mc-bas .mc-listes{ width:min(100%,1100px); max-width:none; margin:0;
max-height:22cqh; overflow:auto; }
.mc-bas .mc-indices li{ cursor:pointer; }
.mc-boite{ flex:1 1 320px; box-sizing:border-box; overflow-x:auto;
overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:2px;
min-width:0; display:flex; justify-content:center; align-items:flex-start; }
/* Grand écran : la grille grandit jusqu'à remplir la HAUTEUR disponible, pas
seulement la largeur de sa colonne. Une grille haute et étroite restait
sinon minuscule au milieu d'un écran de projection à moitié vide. */
@media (min-width:861px){
.mc-grille{ width:min(100%, calc(var(--mc-haut,74dvh) * var(--cols) / var(--rows))); }
}
/* minmax(0,1fr) et non 1fr : sinon chaque colonne garde pour plancher la
largeur de son contenu (le caractère saisi), et la grille déborde. */
.mc-grille{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr));
gap:2px; box-sizing:border-box; margin:0 auto; width:100%;
container-type:inline-size; }
.mc-vide{ aspect-ratio:1; min-width:0; min-height:0; }
/* min-width/min-height à 0 : sans cela, la taille minimale automatique de
l'élément de grille (la hauteur de ligne de la lettre) l'emporte sur
aspect-ratio, et les cases cessent d'être carrées quand la grille rétrécit. */
.mc-case{ position:relative; aspect-ratio:1; background:var(--bloc);
border:2px solid var(--ligne); border-radius:3px;
min-width:0; min-height:0; overflow:hidden; }
.mc-num{ position:absolute; left:2px; top:0; font-size:clamp(8px,1vw,12px); font-style:normal;
font-family:var(--craieface); font-weight:700; color:var(--efface); line-height:1.1; pointer-events:none; }
.mc-case input{ width:100%; height:100%; border:0; background:transparent; text-align:center;
font-family:var(--craieface); font-weight:700; font-size:clamp(13px,2.4cqw,30px);
text-transform:uppercase; color:var(--ligne); padding:0; line-height:1; min-width:0; }
/* Comme pour les mots mêlés : la lettre se mesure sur la case, pas sur l'écran. */
@supports (font-size:1cqi){
.mc-case input{ font-size:min(30px, calc(100cqi / var(--cols,10) * .58)); }
.mc-num{ font-size:min(12px, calc(100cqi / var(--cols,10) * .26)); }
}
.mc-case input:focus{ outline:3px solid var(--p-bleu); outline-offset:-3px; }
.mc-case.mc-actif{ background:color-mix(in srgb, var(--p-jaune) 30%, var(--bloc)); }
.mc-case.mc-bon{ background:color-mix(in srgb, var(--ok) 26%, var(--bloc)); border-color:var(--ok); }
.mc-case.mc-faux{ background:color-mix(in srgb, var(--ko) 22%, var(--bloc)); border-color:var(--ko); }
.mc-listes{ flex:1 1 220px; max-width:560px; min-width:0; text-align:left; display:flex;
flex-direction:column; gap:12px; }
.mc-bloc h3{ margin:0 0 6px; font-family:var(--craieface); font-size:clamp(15px,1.8cqw,21px);
border-bottom:2px solid var(--voile-fort); padding-bottom:4px; }
.mc-indices{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.mc-indices li{ display:flex; align-items:center; gap:7px; cursor:pointer; padding:4px 6px;
border-radius:8px; font-size:clamp(13px,1.5cqw,18px); line-height:1.25; }
.mc-indices li:hover{ background:var(--voile); }
.mc-indices li img{ max-height:44px; max-width:70px; object-fit:contain; border-radius:4px; }
.mc-long{ margin-left:auto; opacity:.6; font-size:.85em; font-style:normal; }
.mc-ecoute{ border:0; background:var(--p-bleu); color:#fff; width:32px; height:32px;
border-radius:50%; cursor:pointer; font-size:15px; }
/* ---- Le mot mystère ----
Un bandeau de cases blanches, qui se remplissent à mesure que les mots sont
trouvés. Sur téléphone il est replié : un œil l'ouvre. */
.mc-mystere{ width:min(100%,720px); margin:clamp(10px,2cqw,18px) auto 0;
border:3px solid var(--voile-fort); border-radius:var(--rayon);
background:var(--bloc); padding:8px 10px 10px; box-sizing:border-box; }
.mc-mystere.mc-mys-complet{ border-color:var(--ok);
background:color-mix(in srgb, var(--ok) 10%, var(--bloc)); }
.mc-mystere.mc-mys-complet .mc-mys-titre{ color:var(--ok); }
.mc-mys-oeil{ display:flex; align-items:center; gap:10px; width:100%; border:0;
background:transparent; cursor:pointer; padding:2px 0; text-align:left; color:inherit; }
.mc-mys-titre{ font-family:var(--craieface); font-weight:700;
font-size:clamp(15px,1.9cqw,21px); color:var(--ligne); }
.mc-mys-etat{ font-family:var(--craieface); font-size:clamp(12px,1.4cqw,15px);
color:var(--efface); margin-left:auto; }
.mc-mys-ic{ font-size:clamp(17px,2.1cqw,22px); line-height:1; }
.mc-mystere[data-ouvert="0"] .mc-mys-ic{ opacity:.45; }
.mc-mys-cases{ display:flex; flex-wrap:wrap; justify-content:center;
gap:clamp(3px,.7cqw,7px); margin-top:9px; }
.mc-mystere[data-ouvert="0"] .mc-mys-cases{ display:none; }
/* Les cases du mot mystère restent BLANCHES dans les deux thèmes (c'est une
feuille d'exercice, pas un écran). Leurs encres sont donc fixes elles aussi :
avec les couleurs du thème nuit, du texte clair sur fond blanc serait
illisible. Toutes les paires ci-dessous dépassent 6:1 sur blanc. */
.mc-mys-case{ position:relative; width:clamp(26px,4.4cqw,46px); aspect-ratio:1;
background:#fff; border:2px solid #1d2027; border-radius:4px;
display:grid; place-items:center; }
.mc-mys-case i{ position:absolute; left:2px; top:0; font-style:normal;
font-family:var(--craieface); font-weight:700; font-size:clamp(7px,1cqw,11px);
color:#4a4f57; line-height:1.1; }
.mc-mys-case b{ font-family:var(--craieface); font-weight:700;
font-size:clamp(15px,2.6cqw,30px); color:#1a1c22; text-transform:uppercase; }
.mc-mys-case.mc-mys-pleine{ background:#e6dcf2; border-color:#6b3fa0; }
.mc-mys-case.mc-mys-pleine b{ color:#5a3489; }
/* Une lettre qu'aucun mot ne peut fournir : elle est OFFERTE dès le départ,
en gris plutôt qu'en violet — on voit qu'elle n'a pas été gagnée. */
.mc-mys-case.mc-mys-offerte{ background:#e6e7ea; border-style:dashed;
border-color:#6c727c; }
.mc-mys-case.mc-mys-offerte b{ color:#4a4f57; }
/* Dans la grille, les cases qui portent une lettre du mot mystère. */
/* Violet, pour ne pas se confondre avec le jaune du mot en cours de saisie. */
/* Case noire : le blanc d'un mot compose (ex. NEW YORK). Rien a y ecrire. */
.mc-noir{ aspect-ratio:1; background:var(--ligne); border:var(--trait-fin) solid var(--ligne);
border-radius:3px; min-width:0; min-height:0; }
.mc-case.mc-mys{ border-color:var(--e-violet); }
.mc-case.mc-mys.mc-mys-ok{ background:color-mix(in srgb, var(--e-violet) 20%, var(--bloc)); }
.mc-mysnum{ position:absolute; right:2px; bottom:0; font-style:normal;
font-family:var(--craieface); font-weight:700; font-size:clamp(7px,.9cqw,11px);
color:var(--e-violet); line-height:1.1; pointer-events:none; }
.mc-indice{ display:flex; align-items:center; gap:7px; min-width:0; }
.mc-texte{ overflow-wrap:anywhere; }
@media (max-width:700px){
/* Sur téléphone, la grille tient ENTIÈRE à l'écran : plus de listes
d'indices (elles prenaient la moitié de la hauteur pour rien, puisque le
panneau du bas donne l'indice du mot que l'on est en train d'écrire). */
.mc-jeu{ flex-direction:column; align-items:stretch; gap:0; }
.mc-boite{ width:100%; overflow:visible; }
/* La largeur est bornée par la hauteur disponible : une grille haute et
étroite rétrécit d'elle-même au lieu de déborder par le bas. */
.mc-grille{ width:min(100%, calc(46dvh * var(--cols) / var(--rows))); }
.mc-case input{ font-size:clamp(11px,3.6cqw,22px); }
.mc-num{ font-size:9px; }
/* Le bandeau du mot mystère se glisse au-dessus du panneau. */
.mc-mystere{ position:sticky; bottom:0; z-index:5; box-shadow:0 -4px 12px var(--voile); }
}
/* ---- Le panneau du mot en cours ----
Sur TOUS les écrans : on clique une case, le panneau donne l'indice et les
cases où écrire. Les listes « Horizontalement / Verticalement » ne sont plus
dans la page (elles prenaient la moitié de la largeur pour de longues lignes
presque vides) ; un bouton les rouvre dans une fenêtre. */
.mc-mot{ z-index:6; margin:6px auto 0; width:min(100%,1100px); box-sizing:border-box;
background:transparent; border:0; border-radius:0; padding:2px 6px 4px; }
.mc-mot-tete{ display:flex; align-items:center; gap:9px; min-width:0; }
.mc-mot-num{ flex:none; min-width:32px; height:32px; padding:0 8px; border-radius:8px;
background:var(--p-bleu); color:#fff; font-family:var(--craieface); font-weight:700;
font-size:16px; display:grid; place-items:center; }
.mc-mot-indice{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
font-size:clamp(17px,2.1cqw,25px); line-height:1.2; overflow:hidden; }
.mc-mot-indice img{ max-height:clamp(38px,6cqh,64px); width:auto; border-radius:6px; display:block; }
/* Une image d'indice s'agrandit d'un clic : petite loupe au survol. */
.mc-image-zoom{ position:relative; border:0; background:none; padding:0; cursor:zoom-in;
line-height:0; border-radius:6px; }
.mc-image-zoom .mc-loupe{ position:absolute; right:3px; bottom:3px; font-size:12px;
line-height:1; background:rgba(0,0,0,.55); color:#fff; border-radius:5px; padding:2px 3px;
opacity:0; transition:opacity .12s; }
.mc-image-zoom:hover .mc-loupe, .mc-image-zoom:focus-visible .mc-loupe{ opacity:1; }
.mc-indices .mc-image-zoom img{ max-height:46px; width:auto; border-radius:5px; }
.mc-mot-btn{ flex:none; width:34px; height:34px; border-radius:8px; padding:0;
border:var(--trait-fin) solid var(--p-bleu); background:var(--bloc);
color:var(--p-bleu); font-size:18px; line-height:1; cursor:pointer; }
.mc-mot-btn:hover{ background:color-mix(in srgb, var(--p-bleu) 14%, var(--bloc)); }
@media (max-width:700px){ .mc-mot-indice{ font-size:17px; } }
/* Mot agrandi au centre : l'indice flotte au-dessus, la grille est recadrée. */
.mc-jeu{ position:relative; }
.mc-jeu > .mc-mot{ position:absolute; top:12px; left:50%; transform:translateX(-50%);
width:min(calc(100% - 20px),680px); margin:0; z-index:7; box-sizing:border-box;
background:var(--bloc); border:var(--trait-fin) solid var(--ligne); border-radius:12px;
padding:10px 12px 12px; box-shadow:0 6px 18px var(--voile); }
.mc-jeu > .mc-mot.mc-en-bas{ top:auto; bottom:12px; }
.mc-pop-ligne{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.mc-pop-cases{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:nowrap; gap:5px; }
.mc-pop-case{ flex:none; box-sizing:border-box; padding:0; text-align:center; text-transform:uppercase;
border:2px solid var(--ligne); border-radius:4px; background:#fff; color:#1a1c22;
font-family:var(--craieface); font-weight:700; line-height:1; }
.mc-pop-case:focus{ outline:none; background:#9be49b; border-color:#3a9a3a; }
.mc-pop-noir{ flex:none; border-radius:4px; background:var(--ligne); }
/* « OK » referme le panneau et rend l'écran à la grille. */
.mc-mot-ok{ display:block; margin:10px auto 0; min-width:120px; }
/* Les listes, quand la fenêtre les rouvre. */
.mc-listes--modal{ display:flex; flex-direction:column; gap:14px; max-height:62cqh;
overflow:auto; text-align:left; }
.mc-listes--modal .mc-indices li{ cursor:pointer; }
/* Planche imprimée : cases blanches, traits noirs, indices dessous. */
#planche-impression .pl-mc-grille{ display:grid; gap:0; margin:0 auto 8mm;
grid-template-columns:repeat(var(--cols),9mm); }
#planche-impression .pl-mc-case{ width:9mm; height:9mm; border:0.4pt solid #000;
position:relative; background:#fff; }
#planche-impression .pl-mc-vide{ width:9mm; height:9mm; }
#planche-impression .pl-mc-num{ position:absolute; left:0.6mm; top:0.2mm; font-size:6pt; }
#planche-impression .pl-mc-mys{ background:#eee; }
#planche-impression .pl-mc-mysnum{ position:absolute; right:0.6mm; bottom:0.2mm; font-size:6pt; font-weight:700; }
#planche-impression .pl-mc-mystere{ margin:0 auto 7mm; text-align:center; }
#planche-impression .pl-mc-mystere h3{ font-size:11pt; margin:0 0 2mm; }
#planche-impression .pl-mc-mysligne{ display:flex; justify-content:center; gap:1mm; flex-wrap:wrap; }
#planche-impression .pl-mc-myscase{ width:9mm; height:9mm; border:0.6pt solid #000;
position:relative; background:#fff; }
#planche-impression .pl-mc-myscase i{ position:absolute; left:0.6mm; top:0.2mm;
font-size:6pt; font-style:normal; }
#planche-impression .pl-mc-myscase b{ font-size:12pt; line-height:9mm; display:block;
text-align:center; }
#planche-impression .pl-mc-listes{ display:grid; grid-template-columns:1fr 1fr; gap:6mm; font-size:10pt; }
#planche-impression .pl-mc-listes h3{ font-size:11pt; margin:0 0 2mm; border-bottom:0.4pt solid #000; }
#planche-impression .pl-mc-listes ol{ margin:0; padding-left:6mm; }
#planche-impression .pl-mc-listes li{ margin-bottom:1.4mm; }
/* ==========================================================================
DIAGNOSTIC DU JEU (éditeur) — ce qui ne passera pas, et pourquoi
========================================================================== */
.reglages-diag:empty{ display:none; }
.reglages-diag{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.diag-ligne{ margin:0; font-size:13.5px; line-height:1.45; color:var(--ligne); }
.diag-ligne b{ font-family:var(--craieface); }
/* --ok / --ko ne vivent que dans la scène de jeu : dans l'éditeur, on prend
les encres globales, déjà auditées pour le contraste dans les deux thèmes. */
.diag-ko{ color:var(--e-rouge); }
.diag-ok{ color:var(--e-vert); }
.diag-info{ color:var(--efface); }
.diag-mot{ display:inline-block; background:color-mix(in srgb, var(--e-rouge) 12%, transparent);
border:1.5px solid var(--e-rouge); color:var(--e-rouge); border-radius:6px;
padding:1px 7px; margin:2px 2px 0 0; font-family:var(--craieface); font-weight:700; }
.diag-mystere{ border-top:2px dashed var(--voile-fort); padding-top:9px;
display:flex; flex-direction:column; gap:8px; }
.diag-lettres{ display:flex; flex-wrap:wrap; gap:5px; }
.diag-lettre{ display:flex; flex-direction:column; align-items:center; gap:2px;
border:2px solid var(--voile-fort); border-radius:6px; padding:3px 6px; background:var(--bloc);
min-width:34px; }
.diag-lettre b{ font-family:var(--craieface); font-weight:700; font-size:17px; line-height:1; }
.diag-lettre small{ font-size:9.5px; color:var(--efface); max-width:74px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.diag-lettre--ko{ border-color:var(--e-rouge); color:var(--e-rouge); }
.diag-lettre--ko small{ color:var(--e-rouge); }
.reglage-texte{ min-width:180px; }
/* ==========================================================================
PLACEMENT SUR IMAGE — le plan corrigé : numéros sur l'image + légende
========================================================================== */
.cor-reperes{ display:flex; flex-direction:column; align-items:center; gap:14px;
width:100%; min-height:0; }
.cor-reperes .cor-plan{ flex:0 1 auto; min-height:0; }
.cor-reperes .cor-plan img{ max-height:52dvh; }
/* La pastille numérotée : lisible sur n'importe quel fond, d'où le double
cerne blanc puis sombre plutôt qu'une simple couleur. */
.cor-num{ position:absolute; transform:translate(-50%,-50%); line-height:1;
width:clamp(24px,3.2cqw,38px); height:clamp(24px,3.2cqw,38px); border-radius:50%;
display:grid; place-items:center; font-family:var(--craieface); font-weight:700;
font-size:clamp(13px,1.7cqw,20px); background:#1f6ec2; color:#fff;
border:3px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.45); }
.cor-num--bon{ background:#0f7a4d; }
.cor-num--faux{ background:#c2251b; }
.cor-legende{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
justify-content:center; gap:8px 18px; max-width:1100px; overflow:auto; min-height:0; }
.cor-legende li{ display:flex; align-items:center; gap:8px;
font-family:var(--craieface); font-weight:700;
font-size:clamp(15px,1.9cqw,26px); color:var(--ligne); }
.cor-lnum{ flex:none; width:clamp(22px,2.6cqw,32px); height:clamp(22px,2.6cqw,32px);
border-radius:50%; display:grid; place-items:center; background:#1f6ec2;
color:#fff; font-size:clamp(12px,1.4cqw,17px); }
.cor-lg--bon .cor-lnum{ background:#0f7a4d; }
.cor-lg--faux .cor-lnum{ background:#c2251b; }
.cor-lg--faux .cor-lmot{ color:var(--e-rouge); }
#vue-jeu .cor-lg--faux .cor-lmot{ color:var(--ko); }
.cor-lerr{ font-weight:400; font-size:.72em; color:var(--efface); }
/* En jeu, la correction prend la place du plateau. */
.rep-corrige{ flex:1 1 auto; min-height:0; display:flex; justify-content:center;
overflow:auto; padding:2px; }
/* ==========================================================================
VISIONNEUSE D'IMAGE — agrandir un indice, avec zoom et déplacement
========================================================================== */
.visio{ position:fixed; inset:0; z-index:200; background:rgba(15,17,22,.86);
display:flex; flex-direction:column; align-items:stretch;
animation:visio-appar .14s ease; }
@keyframes visio-appar{ from{ opacity:0 } to{ opacity:1 } }
.visio-barre{ flex:none; display:flex; justify-content:flex-end; gap:8px;
padding:12px clamp(12px,3cqw,24px); }
.visio-btn{ width:44px; height:44px; border-radius:11px; border:0; cursor:pointer;
background:rgba(255,255,255,.14); color:#fff; font-size:22px; line-height:1;
display:grid; place-items:center; font-family:var(--craieface); font-weight:700; }
.visio-btn:hover{ background:rgba(255,255,255,.26); }
.visio-fermer{ background:rgba(255,255,255,.2); }
.visio-cadre{ flex:1; min-height:0; overflow:hidden; display:grid; place-items:center;
touch-action:none; cursor:zoom-in; }
.visio-cadre--zoom{ cursor:grab; }
.visio-cadre--zoom:active{ cursor:grabbing; }
.visio-img{ max-width:94cqw; max-height:82cqh; border-radius:10px; user-select:none;
-webkit-user-select:none; transition:transform .05s linear;
box-shadow:0 12px 40px rgba(0,0,0,.5); }
/* ==========================================================================
QUIZ MISE — parier ses points sur la bonne réponse
Thème « Cour de récré » (oct. 2026) : fond clair, tuiles blanches à liseré,
mises jaune marelle, pastilles de lettres aux couleurs du logo.
========================================================================== */
.qm-plateau{ width:min(96cqw,1000px); margin:0 auto; color:var(--ligne);
background:var(--sol); border-radius:var(--rayon); padding:clamp(16px,2.6cqw,30px); }
.qm-haut{ display:flex; align-items:center; justify-content:space-between; gap:12px;
font-family:var(--craieface); font-weight:700; margin-bottom:clamp(12px,2cqw,20px); }
.qm-avance{ font-size:clamp(15px,2cqw,22px); color:var(--efface); }
.qm-score{ display:inline-flex; align-items:center; gap:8px; font-size:clamp(20px,2.8cqw,30px); line-height:1.2;
color:#1a1c22; background:var(--p-jaune); border-radius:999px; padding:4px 18px 4px 10px;
box-shadow:0 3px 0 var(--p-jaune-ombre); }
.qm-image{ text-align:center; margin-bottom:14px; }
.qm-image img{ width:min(40cqw,340px); max-height:38cqh; object-fit:contain;
background:#fff; border:2px solid var(--voile-fort); border-radius:var(--rayon); padding:10px; }
.qm-enonce{ font-family:var(--craieface); font-weight:700; text-align:center;
font-size:clamp(21px,3.4cqw,40px); line-height:1.15; margin-bottom:clamp(16px,2.6cqw,28px);
background:var(--bloc); border:2px solid var(--voile-fort); border-top:6px solid var(--p-bleu);
border-radius:var(--rayon); padding:clamp(14px,2.4cqw,28px); box-shadow:0 8px 22px rgba(31,36,48,.07); }
/* La rangée des quatre mises. */
.qm-mises-titre{ text-align:center; font-family:var(--craieface); font-weight:700;
font-size:clamp(18px,2.6cqw,28px); margin-bottom:clamp(12px,2cqw,18px); }
.qm-mises-rangee{ display:grid; grid-template-columns:repeat(4,1fr);
gap:clamp(8px,1.6cqw,16px); max-width:640px; margin:0 auto; }
.qm-mise{ font-family:var(--craieface); font-weight:700; font-size:clamp(26px,5cqw,50px);
padding:clamp(16px,3cqw,30px) 0; border-radius:var(--rayon); cursor:pointer; color:#1a1c22;
background:var(--p-jaune); border:0; box-shadow:0 6px 0 var(--p-jaune-ombre);
transition:transform .09s, box-shadow .09s; }
.qm-mise:hover:not([disabled]){ transform:translateY(-2px); box-shadow:0 8px 0 var(--p-jaune-ombre); }
.qm-mise:active:not([disabled]){ transform:translateY(4px); box-shadow:0 2px 0 var(--p-jaune-ombre); }
.qm-mise[disabled]{ opacity:.35; cursor:not-allowed; filter:grayscale(.5); }
.qm-mises-aide{ text-align:center; font-size:clamp(13px,1.6cqw,16px);
color:var(--efface); margin:clamp(12px,2cqw,18px) 0 0; }
/* Les tuiles de réponse (cachées avant la mise, révélées après). */
.qm-reponses{ display:grid; grid-template-columns:1fr;
gap:clamp(11px,1.8cqw,17px); }
/* Deux colonnes dès qu'il y a la place : quatre réponses tiennent alors sur
deux lignes, comme au Quiz Show, au lieu de s'aligner en une seule rangée. */
@media (min-width:560px){ .qm-reponses{ grid-template-columns:repeat(2,1fr); } }
.qm-rep{ display:flex; align-items:center; gap:12px; text-align:center; padding:clamp(13px,2.1cqw,20px);
border-radius:var(--rayon); background:var(--bloc); color:var(--ligne); border:2px solid var(--voile-fort);
box-shadow:0 4px 0 var(--voile-fort); --pastille:var(--p-rouge); --pastille-encre:#fff;
cursor:pointer; font-size:clamp(15px,2.2cqw,22px); transition:transform .1s, background .12s, border-color .12s, box-shadow .12s;
animation:qm-retourne .32s ease both; }
@keyframes qm-retourne{ from{ transform:rotateX(90deg); opacity:0 } to{ transform:rotateX(0); opacity:1 } }
.qm-rep:hover:not([disabled]){ transform:translateY(-2px); border-color:var(--pastille); box-shadow:0 6px 0 var(--pastille); }
.qm-rep[data-j="1"], .qm-rep[data-j="5"]{ --pastille:var(--p-bleu); }
.qm-rep[data-j="2"], .qm-rep[data-j="6"]{ --pastille:var(--p-jaune); --pastille-encre:#1a1c22; }
.qm-rep[data-j="3"], .qm-rep[data-j="7"]{ --pastille:#2f7d34; }
.qm-rep[data-j="4"]{ --pastille:#6b3fa0; }
.qm-lettre{ flex:none; width:1.7em; height:1.7em; border-radius:50%; display:grid; place-items:center;
background:var(--pastille); color:var(--pastille-encre); font-family:var(--craieface); font-weight:700; }
.qm-txt{ font-family:var(--craieface); font-weight:700; flex:1; text-align:center; }
.qm-rep--bon, .qm-rep--bon:hover{ background:#2f7d34; border-color:#2f7d34; color:#fff; box-shadow:0 4px 0 #1f5a24; }
.qm-rep--faux, .qm-rep--faux:hover{ background:var(--p-rouge); border-color:var(--p-rouge); color:#fff; box-shadow:0 4px 0 var(--p-rouge-ombre); }
.qm-rep--bon .qm-lettre, .qm-rep--faux .qm-lettre{ background:#fff; color:#1a1c22; }
.qm-rep[disabled]{ cursor:default; }
/* Sélection multiple (question à plusieurs bonnes réponses). */
.qm-rep--sel{ border-color:var(--p-bleu); background:var(--f-tester-teinte); box-shadow:0 4px 0 var(--p-bleu); }
.qm-rep--multi .qm-lettre{ border-radius:6px; }
.qm-multi-aide{ grid-column:1 / -1; margin:0 0 4px; font-family:var(--craieface); font-weight:700;
color:var(--f-tester-encre); font-size:clamp(13px,1.8cqw,17px); text-align:center; }
.qm-valider{ grid-column:1 / -1; justify-self:center; margin-top:6px;
font-size:clamp(15px,2cqw,20px); padding:12px 30px; }
.qm-valider[disabled]{ opacity:.45; cursor:default; }
.qm-verdict{ text-align:center; margin-top:clamp(14px,2.2cqw,22px); min-height:1.4em; }
.qm-gagne, .qm-perdu{ display:inline-block; font-family:var(--craieface); font-weight:700;
font-size:clamp(22px,3.4cqw,38px); padding:8px 22px; border-radius:999px; color:#fff; }
.qm-gagne{ background:#2f7d34; box-shadow:0 4px 0 #1f5a24; }
.qm-perdu{ background:var(--p-rouge); box-shadow:0 4px 0 var(--p-rouge-ombre); }
/* Écran de fin : victoire ou game over. */
.qm-fin{ width:min(92cqw,620px); margin:0 auto; text-align:center; color:var(--ligne);
background:var(--bloc); border:2px solid var(--voile-fort); border-top:6px solid var(--p-jaune);
border-radius:var(--rayon); padding:clamp(26px,5cqw,54px) clamp(20px,4cqw,40px);
box-shadow:0 18px 44px rgba(31,36,48,.12); }
.qm-fin-titre{ font-family:var(--craieface); font-weight:700; font-size:clamp(30px,6cqw,58px); }
.qm-fin-score{ display:inline-block; font-family:var(--craieface); font-weight:700; font-size:clamp(40px,8cqw,80px);
color:#1a1c22; background:var(--p-jaune); border-radius:999px; padding:.08em .5em; box-shadow:0 5px 0 var(--p-jaune-ombre);
line-height:1.15; margin:clamp(12px,2cqw,22px) 0; }
.qm-fin-mot{ font-family:var(--craieface); font-weight:700; font-size:clamp(18px,2.6cqw,26px);
color:var(--efface); margin:0 0 clamp(18px,3cqw,30px); }
.qm-fin .bouton{ margin:4px; }
.qm-rejouer{ font-size:clamp(18px,2.4cqw,24px); padding:15px 30px; }
@media (max-width:560px){
.qm-mise{ font-size:clamp(24px,9cqw,44px); }
}
/* ==========================================================================
JEU « Trousse pour un » — habillage illustré
--------------------------------------------------------------------------
Les décors (avion, papier, table, tableau, trousses) sont des SVG dessinés
à la main, embarqués en data-URI : formes rondes, dégradés doux, lumière
d'ambiance et liseré clair — une même famille graphique pour tout le jeu.
Aucun fichier à héberger, aucune requête réseau. Total : ~10 ko.
Tout est scopé sous .tp-arcade pour ne rien percuter du reste du site.
========================================================================== */
.tp-arcade{
--tp-img-avion:url("data:image/svg+xml,");
--tp-img-papier:url("data:image/svg+xml,");
--tp-img-tableau:url("data:image/svg+xml,");
--tp-img-trousse1:url("data:image/svg+xml,");
--tp-img-trousse2:url("data:image/svg+xml,");
--tp-img-trousse3:url("data:image/svg+xml,");
--tp-img-trousse4:url("data:image/svg+xml,");
--tp-img-trousse5:url("data:image/svg+xml,");
--tp-encre:#33384a; --tp-mur-h:#c9dcf2; --tp-mur-b:#f3f8fe; --tp-sol:#e3bd91;
--tp-or:#f5a72c; --tp-rouge:#f2604f;
/* Le bureau est construit en CSS, pas en image : sa géométrie est donc
connue au pixel près, et les trousses peuvent s'y poser exactement.
--tp-h-bureau = hauteur totale ; --tp-h-plateau = épaisseur du dessus.
--tp-l-trousse fixe l'échelle : plan reculé pour dégager du ciel entre
les avions et les trousses. */
--tp-h-bureau:clamp(78px,11cqh,118px);
--tp-h-plateau:clamp(17px,2.4cqh,25px);
--tp-l-trousse:clamp(150px,19cqw,250px);
--tp-h-trousse:calc(var(--tp-l-trousse) * 127 / 320);
position:relative; width:100%; height:100%;
font-family:var(--craieface); font-weight:700; letter-spacing:.01em;
user-select:none; color:var(--tp-encre);
}
.tp-scene{
position:relative; width:100%; height:100%; min-height:420px;
overflow:hidden; touch-action:none;
/* Mur en dégradé puis sol : la profondeur naît du fond, pas des contours. */
background:linear-gradient(180deg, var(--tp-mur-h) 0%, var(--tp-mur-b) 62%,
var(--tp-mur-b) 78%, var(--tp-sol) 78%, #c39764 100%);
}
/* Halo de lumière, comme un projecteur de salle. */
.tp-scene::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background:radial-gradient(ellipse 70% 55% at 50% 32%, rgba(255,255,255,.7), transparent 70%);
}
/* ---- Décor : tableau blanc ---- */
.tp-decor{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.tp-tableau{
position:absolute; top:5%; left:50%; transform:translateX(-50%);
width:min(52%, 620px); aspect-ratio:700 / 300;
background:var(--tp-img-tableau) center/contain no-repeat;
filter:drop-shadow(0 16px 22px rgba(40,50,70,.22));
display:grid; place-items:center; padding:6% 8% 12%;
}
/* La question s'affiche AU TABLEAU : lisible du fond de la classe, et le
décor cesse d'être purement ornemental. */
.tp-tableau-mot{
font-size:clamp(18px,3.2cqw,46px); line-height:1.15; text-align:center;
color:#2b2f3a; max-width:100%; overflow-wrap:anywhere;
}
/* Image \u2192 mot : l'image remplit le tableau (sans d\u00e9former) ; la cellule a une
hauteur d\u00e9finie gr\u00e2ce \u00e0 la piste minmax(0,1fr). */
.tp-tableau{ grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); }
.tp-tableau-mot--img{ width:100%; height:100%; min-height:0; display:grid; place-items:center; }
.tp-tableau-img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; user-select:none; }
/* Le tableau épouse l'image : il se réduit à sa taille et prend son format (--r =
largeur / hauteur, posé par le jeu). Il est alors dessiné en CSS, aux couleurs
du tableau illustré : l'illustration étirée se déformerait. */
.tp-tableau.tp-tableau--img{
display:block; width:auto; aspect-ratio:auto; padding:clamp(8px,1.3cqw,15px);
background:linear-gradient(180deg,#e9eff7,#bcc9db); border-radius:clamp(12px,2cqw,22px);
}
.tp-tableau--img::after{
content:""; position:absolute; top:100%; left:50%; transform:translate(-50%,-35%);
width:clamp(80px,30%,200px); height:clamp(10px,1.3cqw,16px); border-radius:99px;
background:linear-gradient(#f2604f,#f2604f) 14% 50%/32% 50% no-repeat,
linear-gradient(#3d9ee0,#3d9ee0) 86% 50%/32% 50% no-repeat, #a9b8ca;
}
.tp-tableau--img .tp-tableau-mot--img{
display:block; width:auto; height:auto; padding:clamp(5px,.9cqw,10px);
background:linear-gradient(160deg,#fff,#fbfdff 55%,#e8f0f8); border-radius:clamp(7px,1.1cqw,12px);
}
.tp-tableau--img .tp-tableau-img{
display:block; max-width:none; max-height:none; height:auto;
width:min(56cqw, calc(32cqh * var(--r,1))); aspect-ratio:var(--r,1);
}
/* ---- Barre de temps ---- */
.tp-barre-temps{
position:absolute; top:0; left:0; width:100%; height:10px; z-index:6;
background:rgba(43,47,58,.12);
}
.tp-jauge{ height:100%; width:100%; background:linear-gradient(90deg,#ffd36e,var(--tp-or));
border-radius:0 6px 6px 0; transition:width .1s linear, background .4s; }
/* ---- HUD : pastilles douces ---- */
.tp-hud{
position:absolute; top:20px; left:20px; right:20px; z-index:7;
display:flex; justify-content:space-between; align-items:flex-start;
font-size:clamp(13px,1.6cqw,20px); pointer-events:none;
}
.tp-arcade[data-mode="arcade"] .tp-hud{ top:26px; }
.tp-hud-boite{
background:rgba(255,255,255,.86); color:var(--tp-encre);
border-radius:999px; padding:7px 16px;
box-shadow:0 4px 10px rgba(40,50,70,.16);
}
.tp-vies{ font-size:clamp(15px,1.9cqw,23px); letter-spacing:2px;
background:rgba(255,255,255,.86); border-radius:999px; padding:6px 15px;
box-shadow:0 4px 10px rgba(40,50,70,.16); }
/* ---- Zone de vol ---- */
.tp-vol{ position:absolute; inset:0; z-index:5; overflow:hidden; }
.tp-avion{
position:absolute; left:0; top:0; will-change:transform;
display:flex; flex-direction:column; align-items:center;
cursor:pointer; pointer-events:auto;
}
/* L'avion ne tangue pas : il glisse. Toute oscillation brouille la lecture du
mot qu'il porte et rend le clic moins précis. */
.tp-plane{
width:clamp(92px,12cqw,172px); aspect-ratio:2 / 1;
background:var(--tp-img-avion) center/contain no-repeat;
filter:drop-shadow(0 10px 12px rgba(40,50,70,.28));
transition:opacity .5s, transform .4s;
}
.tp-avion:hover .tp-plane{ filter:drop-shadow(0 10px 12px rgba(40,50,70,.28)) brightness(1.06); }
/* ---- Le mot, sur un morceau de papier déchiré ---- */
.tp-postit{
margin-top:-6px; position:relative; z-index:2;
min-width:clamp(88px,11cqw,158px); max-width:250px;
padding:clamp(13px,1.5cqw,20px) clamp(12px,1.4cqw,20px) clamp(19px,2.2cqw,30px);
background:var(--tp-img-papier) center/100% 100% no-repeat;
filter:drop-shadow(0 6px 8px rgba(40,50,70,.2));
color:var(--tp-encre); font-size:clamp(14px,1.6cqw,23px); line-height:1.2;
text-align:center; overflow-wrap:anywhere;
}
.tp-postit--chute{
position:absolute; left:0; top:0; margin:0; z-index:8;
pointer-events:none; will-change:transform;
}
/* ---- La table + les trousses ---- */
/* Le bureau ne bouge jamais : il occupe toute la scène. Ce sont les trousses
qui défilent — la résolue sort à gauche, la suivante entre par la droite. */
.tp-desk{
position:absolute; left:0; right:0; bottom:0; z-index:4;
height:calc(var(--tp-h-bureau) + var(--tp-h-trousse));
}
.tp-table{
position:absolute; left:0; right:0; bottom:0;
height:var(--tp-h-bureau); z-index:0;
}
/* Le plateau : c'est son arête haute qui sert de sol aux trousses. */
.tp-table::before{
content:""; position:absolute; left:0; right:0; top:0;
height:var(--tp-h-plateau);
border-radius:10px 10px 5px 5px;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 34px),
linear-gradient(180deg,#f8daad 0%,#eec18a 42%,#dca868 74%,#c48f52 100%);
box-shadow:0 2px 0 rgba(255,255,255,.62) inset,
0 -2px 0 rgba(120,78,36,.28) inset,
0 16px 24px rgba(40,50,70,.2);
}
/* La façade : légèrement en retrait, plus sombre — c'est ce décalage qui
donne l'épaisseur, sans aucun contour dessiné. */
.tp-table::after{
content:""; position:absolute; left:2.5%; right:2.5%;
top:calc(var(--tp-h-plateau) - 3px); bottom:0;
border-radius:0 0 12px 12px;
background:linear-gradient(180deg,#c08c52 0%,#a97540 46%,#8d5c30 100%);
box-shadow:0 8px 14px rgba(80,50,20,.3) inset,
0 14px 20px rgba(40,50,70,.18);
}
.tp-trousse{
position:absolute; z-index:1;
left:50%; margin-left:calc(var(--tp-l-trousse) / -2);
bottom:calc(var(--tp-h-bureau) - 4px);
width:var(--tp-l-trousse); height:var(--tp-h-trousse);
background:var(--tp-img-trousse1) center/contain no-repeat;
display:flex; justify-content:center; align-items:center; text-align:center;
filter:drop-shadow(0 8px 10px rgba(40,50,70,.3));
/* Position de repos : hors champ à droite. */
transform:translateX(120cqw);
transition:transform .55s cubic-bezier(.22,.9,.28,1), filter .25s;
}
.tp-trousse.tp-t-1{ background-image:var(--tp-img-trousse1); }
.tp-trousse.tp-t-2{ background-image:var(--tp-img-trousse2); }
.tp-trousse.tp-t-3{ background-image:var(--tp-img-trousse3); }
.tp-trousse.tp-t-4{ background-image:var(--tp-img-trousse4); }
.tp-trousse.tp-t-5{ background-image:var(--tp-img-trousse5); }
/* Tapis roulant : l'active se pose au centre, la résolue sort par la gauche. */
.tp-trousse.active{ transform:translateX(0);
filter:drop-shadow(0 14px 16px rgba(40,50,70,.34)) brightness(1.04); }
.tp-trousse.solved{ transform:translateX(-120cqw);
filter:drop-shadow(0 8px 10px rgba(40,50,70,.25)) saturate(.45); }
.tp-trousse.solved::after{
content:"\2713"; position:absolute; top:-14px; right:-6px;
width:clamp(28px,3.4cqw,42px); height:clamp(28px,3.4cqw,42px); border-radius:50%;
background:#3ec98a; color:#fff; display:grid; place-items:center;
font-size:clamp(16px,2cqw,24px); box-shadow:0 4px 9px rgba(40,50,70,.3);
animation:tp-tampon .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes tp-tampon{ from{ transform:scale(0) rotate(-40deg); } to{ transform:none; } }
/* ---- Le bonus cœur ---- Un papier rose porté par un avion plus rapide.
Il ne se largue pas : on le ramasse au clic et la vie est acquise. */
.tp-postit--coeur{
filter:drop-shadow(0 6px 10px rgba(200,60,90,.3))
hue-rotate(-38deg) saturate(1.5);
font-size:clamp(24px,3cqw,44px); line-height:1;
padding-bottom:clamp(22px,2.6cqw,34px);
}
.tp-postit--coeur span{ color:#e8386a; text-shadow:0 1px 0 rgba(255,255,255,.8);
display:block; animation:tp-battement .8s ease-in-out infinite; }
@keyframes tp-battement{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.16); } }
.tp-avion--pris{ transition:opacity .38s ease-out; opacity:0; pointer-events:none; }
/* Le zip du dessin suffit : plus de zip CSS. */
.tp-zip{ display:none; }
/* Le mot ne s'écrit qu'au tableau : la trousse reste un pur réceptacle. */
.tp-mot{ display:none; }
/* ---- Textes volants ---- */
.tp-volant{
position:absolute; z-index:9; pointer-events:none;
font-size:clamp(16px,2.2cqw,30px); color:#2a9d63;
text-shadow:0 2px 6px rgba(255,255,255,.9);
animation:tp-monte .95s cubic-bezier(.2,.9,.3,1) forwards;
}
.tp-volant--err{ color:var(--tp-rouge); }
@keyframes tp-monte{ 0%{ transform:translateY(0) scale(.7); opacity:0; }
22%{ transform:translateY(-12px) scale(1.1); opacity:1; }
100%{ transform:translateY(-58px) scale(1); opacity:0; } }
/* ---- Message central ---- */
.tp-message{
position:absolute; top:38%; left:50%; z-index:10;
min-width:min(78cqw,420px);
background:rgba(255,255,255,.96); color:var(--tp-encre);
border-radius:26px; padding:28px 36px; text-align:center;
transform:translate(-50%,-50%);
display:flex; flex-direction:column; align-items:center; gap:10px;
box-shadow:0 22px 44px rgba(40,50,70,.3);
animation:tp-pop .32s cubic-bezier(.2,1.5,.4,1) both;
}
.tp-message[hidden]{ display:none; }
@keyframes tp-pop{ 0%{ transform:translate(-50%,-50%) scale(.7); opacity:0; }
100%{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
.tp-big{ display:inline-block; color:var(--tp-or); font-size:clamp(34px,7cqw,68px);
line-height:1; text-shadow:0 3px 0 rgba(40,50,70,.16); }
.tp-titre{ font-size:clamp(17px,2.4cqw,28px); line-height:1.35; }
.tp-ok{ color:#2a9d63; }
.tp-sous{ font-size:clamp(12px,1.5cqw,17px); color:rgba(43,47,58,.62); }
@media (max-width:640px){
.tp-tableau{ width:84%; top:4%; }
.tp-tableau.tp-tableau--img{ top:max(4%, 46px); } /* sous la manche et les cœurs */
.tp-tableau--img .tp-tableau-img{ width:min(82cqw, calc(24cqh * var(--r,1))); }
.tp-arcade{ --tp-h-bureau:clamp(66px,9cqh,92px); --tp-h-plateau:15px;
--tp-l-trousse:clamp(132px,38cqw,200px); }
}
/* ---- Classement des equipes (fin de partie) ---- */
.cl-bloc{ width:min(94cqw,520px); margin:clamp(14px,2.5cqh,26px) auto 0; text-align:left;
background:var(--bloc); border:var(--trait) solid var(--ligne); border-radius:var(--rayon);
box-shadow:var(--decal); padding:14px 16px; }
.cl-label{ display:block; font-family:var(--craieface); font-weight:700;
font-size:clamp(15px,1.9cqw,19px); color:var(--encre); margin-bottom:8px; }
.cl-ligne-saisie{ display:flex; gap:8px; flex-wrap:wrap; }
.cl-ligne-saisie input{ flex:1 1 160px; min-width:0; font-size:18px; padding:11px 13px;
border-radius:9px; background:var(--sol-2); color:var(--ligne);
border:var(--trait-fin) solid var(--voile-fort); font-family:inherit; }
.cl-ok{ font-family:var(--craieface); font-weight:700; color:var(--ok); margin:0 0 4px; }
.cl-vide{ color:var(--efface); font-size:15px; margin:8px 0 0; }
.cl-liste{ list-style:none; margin:12px 0 0; padding:0; max-height:34cqh; overflow-y:auto; }
.cl-ligne{ display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:9px; }
.cl-ligne:nth-child(odd){ background:var(--sol-2); }
.cl-ligne.cl-neuf{ background:color-mix(in srgb, var(--ok) 20%, transparent);
outline:2px solid var(--ok); }
.cl-rang{ width:1.9em; text-align:center; font-size:18px; }
.cl-nom{ flex:1; font-family:var(--craieface); font-weight:700; font-size:clamp(15px,1.9cqw,19px);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-pts{ font-family:var(--craieface); font-weight:800; font-size:clamp(16px,2.1cqw,21px); color:var(--encre); }
.cl-vider{ margin-top:10px; }
/* ---------- Plateaux de jeu télévisé (Quiz Show, Quiz Mise) ----------
Ces deux jeux prennent TOUT l'écran sous l'en-tête : pas de marge, pas de
fond d'activité, et des questions/réponses nettement plus grandes pour la
vidéoprojection. */
#vue-jeu[data-plateau] .jeu-scene{ padding:0; }
#vue-jeu[data-plateau="quiz"] .jeu-scene{ background-color:var(--sol); }
#vue-jeu[data-plateau="quizmise"] .jeu-scene{ background-color:var(--sol); }
/* Une image de plateau a été trouvée dans « fonds/ » : le dégradé du plateau
cède la place à un simple voile sombre, pour qu'on la voie. */
#vue-jeu[data-plateau-fond="1"] .quiz-plateau{ background:transparent; box-shadow:none; }
/* Quiz Mise (thème clair) : l'image reste visible, les textes passent sur des blocs opaques. */
#vue-jeu[data-plateau-fond="1"] .qm-plateau{ background:transparent; }
#vue-jeu[data-plateau-fond="1"] .qm-avance{ background:var(--bloc); color:var(--ligne); padding:2px 14px; border-radius:999px; }
#vue-jeu[data-plateau-fond="1"] .qm-mises{ background:var(--bloc); border:2px solid var(--voile-fort); border-radius:var(--rayon); padding:clamp(14px,2.4cqw,28px); }
#vue-jeu[data-plateau] .jeu-piste{ padding:0; gap:0; width:100%; min-height:100%; justify-content:center; }
#vue-jeu[data-plateau] .quiz-plateau,
#vue-jeu[data-plateau] .qm-plateau{
width:100%; max-width:none; min-height:100%; margin:0; border-radius:0;
display:flex; flex-direction:column; justify-content:center;
padding:clamp(12px,2cqh,32px) clamp(16px,4cqw,72px); box-sizing:border-box; }
/* La question doit être PRÈS de l'en-tête : le plateau part du haut au lieu
d'être centré, et la barre chrono/score reste dans le flux, juste au-dessus. */
#vue-jeu[data-plateau] .quiz-plateau,
#vue-jeu[data-plateau] .qm-plateau{ justify-content:flex-start; }
#vue-jeu[data-plateau] .quiz-haut,
#vue-jeu[data-plateau] .qm-haut{ margin:0 0 clamp(6px,1.2cqh,16px); }
#vue-jeu[data-plateau] .quiz-plateau.qz-ouverture{ justify-content:center; }
/* Les jokers passent AVANT la question : on choisit son aide en voyant venir
la manche, pas après coup en bas de l'écran. */
#vue-jeu[data-plateau] .quiz-haut{ order:0; }
#vue-jeu[data-plateau] .quiz-jokers{ order:1; position:static; margin:0 0 clamp(10px,1.8cqh,24px); }
#vue-jeu[data-plateau] .quiz-scene{ order:2; }
#vue-jeu[data-plateau] .quiz-plateau > .quiz-scene,
#vue-jeu[data-plateau] .qm-plateau > *:not(.qm-haut){ width:100%; }
/* Questions et réponses agrandies. */
#vue-jeu[data-plateau] .quiz-enonce{ font-size:clamp(26px,4.6cqw,64px); }
#vue-jeu[data-plateau] .qm-enonce{ font-size:clamp(26px,4.8cqw,66px); }
#vue-jeu[data-plateau] .quiz-rep,
#vue-jeu[data-plateau] .qm-rep{ font-size:clamp(18px,2.7cqw,36px); padding:clamp(14px,2.2cqh,26px) clamp(14px,2cqw,26px); }
#vue-jeu[data-plateau] .quiz-saisie input{ font-size:clamp(20px,2.8cqw,38px); }
#vue-jeu[data-plateau] .quiz-verdict{ font-size:clamp(20px,2.8cqw,38px); }
#vue-jeu[data-plateau] .quiz-chrono{ font-size:clamp(28px,4.6cqw,58px); }
#vue-jeu[data-plateau] .quiz-image img{ width:min(34cqw,520px); max-height:52cqh; }
#vue-jeu[data-plateau] .qm-image img{ width:min(30cqw,460px); max-height:34cqh; }
#vue-jeu[data-plateau] .qm-mises-rangee{ max-width:min(90cqw,900px); }
#vue-jeu[data-plateau] .qm-mise{ font-size:clamp(30px,5.6cqw,72px); }
#vue-jeu[data-plateau] .qm-mises-titre{ font-size:clamp(20px,3cqw,38px); }
/* ---------- Pied de page toujours en bas ----------
Sur les pages courtes, le pied ne doit plus « flotter » au milieu : le corps
fait au moins la hauteur de l'écran et le pied est poussé tout en bas. */
body{ display:flex; flex-direction:column; min-height:100dvh; }
/* En colonne flex, une marge horizontale `auto` (le centrage de `.cour`) annule
l'étirement : sans `width:100%`, la cour se rétrécirait à son contenu. */
body > .cour{ width:100%; }
body > footer.bas{ margin-top:auto; }
/* ---------- Quiz Show : générique d'ouverture ---------- */
.qz-ouverture{ position:relative; overflow:hidden; align-items:center; text-align:center; }
.qz-faisceaux{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.qz-faisceaux i{ position:absolute; top:-40%; left:50%; width:16cqw; height:180%;
background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 72%);
filter:blur(6px); transform-origin:50% 0; animation:qz-balai 3.6s ease-in-out infinite alternate; }
.qz-faisceaux i:nth-child(1){ animation-delay:0s; margin-left:-34cqw; }
.qz-faisceaux i:nth-child(2){ animation-delay:-1.2s; }
.qz-faisceaux i:nth-child(3){ animation-delay:-2.4s; margin-left:34cqw; }
@keyframes qz-balai{ from{ transform:rotate(-19deg); } to{ transform:rotate(19deg); } }
.qz-marque{ position:relative; font-family:var(--craieface); font-weight:700;
font-size:clamp(44px,9cqw,140px); line-height:1; letter-spacing:.02em;
color:#ffd23f; text-shadow:0 0 18px rgba(255,210,63,.55), 0 6px 0 rgba(0,0,0,.45);
animation:qz-arrivee .7s cubic-bezier(.16,1.2,.4,1) both; }
.qz-sous{ position:relative; font-family:var(--craieface); font-weight:700; color:#fff;
font-size:clamp(20px,3.2cqw,44px); margin-top:clamp(8px,1.6cqh,20px);
animation:qz-arrivee .7s .25s cubic-bezier(.16,1.2,.4,1) both; }
.qz-compte{ position:relative; font-family:var(--craieface); font-weight:700;
color:rgba(255,255,255,.75); font-size:clamp(15px,2cqw,26px); margin-top:6px;
animation:qz-arrivee .7s .45s cubic-bezier(.16,1.2,.4,1) both; }
.qz-passer{ position:relative; margin-top:clamp(18px,3cqh,38px);
font-size:clamp(16px,2.2cqw,26px); padding:clamp(10px,1.6cqh,18px) clamp(20px,3cqw,40px);
animation:qz-arrivee .7s .65s cubic-bezier(.16,1.2,.4,1) both; }
@keyframes qz-arrivee{ from{ opacity:0; transform:translateY(26px) scale(.9); } to{ opacity:1; transform:none; } }
/* ---------- Quiz Show : thème « Cour de récré » (oct. 2026) ----------
Même atmosphère que Quiz Mise : fond clair, tuiles blanches à liseré,
pastilles de lettres aux couleurs de la marelle, score en pastille jaune.
(Remplace l'ancien habillage néon sur fond nuit.) */
#vue-jeu[data-plateau="quiz"] .quiz-plateau{ background:var(--sol); color:var(--ligne); box-shadow:none; }
#vue-jeu[data-plateau="quiz"] .quiz-haut{ font-family:var(--craieface); font-weight:700; }
#vue-jeu[data-plateau="quiz"] .quiz-chrono{ color:var(--ligne); background:var(--bloc); border:2px solid var(--voile-fort);
border-radius:999px; padding:2px 20px; line-height:1.2; min-width:3.4em; text-align:center;
font-variant-numeric:tabular-nums; text-shadow:none; }
#vue-jeu[data-plateau="quiz"] .quiz-chrono.presse{ color:#fff; background:var(--p-rouge); border-color:var(--p-rouge); }
#vue-jeu[data-plateau="quiz"] .quiz-avance{ color:var(--efface); opacity:1; }
#vue-jeu[data-plateau="quiz"] .quiz-score{ display:inline-flex; align-items:center; gap:8px; line-height:1.2; color:#1a1c22;
background:var(--p-jaune); border-radius:999px; padding:4px 18px; box-shadow:0 3px 0 var(--p-jaune-ombre);
text-shadow:none; }
#vue-jeu[data-plateau="quiz"] .quiz-enonce{
/* Au moins un centimètre entre l'énoncé et la première rangée de réponses. */
margin:0 auto clamp(1cm,4cqh,1.8cm); max-width:min(94%,1500px);
padding:clamp(16px,2.8cqh,38px) clamp(22px,3.6cqw,56px); line-height:1.3; text-align:center;
color:var(--ligne); background:var(--bloc); border:2px solid var(--voile-fort);
border-top:6px solid var(--p-bleu); border-radius:var(--rayon);
box-shadow:0 8px 22px rgba(31,36,48,.07); text-shadow:none; }
#vue-jeu[data-plateau="quiz"] .quiz-image img, #vue-jeu[data-plateau="quiz"] .quiz-video-cadre{ border:2px solid var(--voile-fort);
border-radius:var(--rayon); box-shadow:0 8px 22px rgba(31,36,48,.07); }
/* Réponses : tuiles blanches, pastille de lettre colorée (rouge, bleu, jaune, vert, violet). */
#vue-jeu[data-plateau="quiz"] .quiz-rep{ background:var(--bloc); color:var(--ligne); border:2px solid var(--voile-fort);
border-radius:var(--rayon); box-shadow:0 4px 0 var(--voile-fort);
--pastille:var(--p-rouge); --pastille-encre:#fff;
transition:transform .1s, background .12s, border-color .12s, box-shadow .12s; }
#vue-jeu[data-plateau="quiz"] .quiz-rep[data-j="1"], #vue-jeu[data-plateau="quiz"] .quiz-rep[data-j="5"]{ --pastille:var(--p-bleu); }
#vue-jeu[data-plateau="quiz"] .quiz-rep[data-j="2"], #vue-jeu[data-plateau="quiz"] .quiz-rep[data-j="6"]{ --pastille:var(--p-jaune); --pastille-encre:#1a1c22; }
#vue-jeu[data-plateau="quiz"] .quiz-rep[data-j="3"], #vue-jeu[data-plateau="quiz"] .quiz-rep[data-j="7"]{ --pastille:#2f7d34; }
#vue-jeu[data-plateau="quiz"] .quiz-rep[data-j="4"]{ --pastille:#6b3fa0; }
#vue-jeu[data-plateau="quiz"] .quiz-rep:hover:not([disabled]){ transform:translateY(-2px); background:var(--bloc);
border-color:var(--pastille); box-shadow:0 6px 0 var(--pastille); }
#vue-jeu[data-plateau="quiz"] .quiz-lettre{ background:var(--pastille); color:var(--pastille-encre); border:0; box-shadow:none; text-shadow:none; }
#vue-jeu[data-plateau="quiz"] .quiz-txt{ flex:1; text-align:center; }
#vue-jeu[data-plateau="quiz"] .quiz-rep.quiz-bon{ background:#2f7d34; border-color:#2f7d34; color:#fff; box-shadow:0 4px 0 #1f5a24; }
#vue-jeu[data-plateau="quiz"] .quiz-rep.quiz-mauvais{ background:var(--p-rouge); border-color:var(--p-rouge); color:#fff; box-shadow:0 4px 0 var(--p-rouge-ombre); }
#vue-jeu[data-plateau="quiz"] .quiz-rep.quiz-bon .quiz-lettre, #vue-jeu[data-plateau="quiz"] .quiz-rep.quiz-mauvais .quiz-lettre{ background:#fff; color:#1a1c22; }
#vue-jeu[data-plateau="quiz"] .quiz-rep.quiz-retiree{ opacity:.25; box-shadow:none; }
/* Réponse écrite et verdict. */
#vue-jeu[data-plateau="quiz"] .quiz-saisie input{ background:var(--bloc); color:var(--ligne); border:2px solid var(--voile-fort);
border-radius:var(--rayon); box-shadow:none; }
#vue-jeu[data-plateau="quiz"] .quiz-saisie input:focus{ outline:3px solid var(--p-bleu); outline-offset:1px; }
#vue-jeu[data-plateau="quiz"] .quiz-saisie input::placeholder{ color:var(--efface); }
#vue-jeu[data-plateau="quiz"] .quiz-verdict.juste{ color:#2f7d34; }
#vue-jeu[data-plateau="quiz"] .quiz-verdict.faux{ color:var(--p-rouge); }
/* Jokers : boutons blancs à relief ; un joker armé passe au jaune. */
#vue-jeu[data-plateau="quiz"] .quiz-joker{ background:var(--bloc); color:var(--ligne); border:2px solid var(--voile-fort);
border-radius:999px; box-shadow:0 3px 0 var(--voile-fort); text-shadow:none; }
#vue-jeu[data-plateau="quiz"] .quiz-joker:hover:not([disabled]){ border-color:var(--p-bleu); box-shadow:0 5px 0 var(--p-bleu); }
#vue-jeu[data-plateau="quiz"] .quiz-joker.arme{ background:var(--p-jaune); color:#1a1c22; border-color:var(--p-jaune);
box-shadow:0 3px 0 var(--p-jaune-ombre); opacity:1; }
/* Générique : les projecteurs deviennent trois bandes de marelle très pâles. */
#vue-jeu[data-plateau="quiz"] .qz-faisceaux i{ filter:blur(10px); opacity:.5;
background:linear-gradient(180deg, var(--p-jaune), transparent 72%); }
#vue-jeu[data-plateau="quiz"] .qz-faisceaux i:nth-child(1){ background:linear-gradient(180deg, var(--p-rouge), transparent 72%); opacity:.28; }
#vue-jeu[data-plateau="quiz"] .qz-faisceaux i:nth-child(3){ background:linear-gradient(180deg, var(--p-bleu), transparent 72%); opacity:.28; }
#vue-jeu[data-plateau="quiz"] .qz-marque{ color:var(--p-bleu); text-shadow:0 5px 0 var(--p-jaune); }
#vue-jeu[data-plateau="quiz"] .qz-sous{ color:var(--ligne); text-shadow:none; }
#vue-jeu[data-plateau="quiz"] .qz-compte{ color:var(--efface); }
#vue-jeu[data-plateau="quiz"] .quiz-joker.qz-passer{ background:var(--p-rouge); color:#fff; border-color:var(--p-rouge);
box-shadow:0 5px 0 var(--p-rouge-ombre); }
#vue-jeu[data-plateau="quiz"] .quiz-joker.qz-passer:hover{ border-color:var(--p-rouge); box-shadow:0 7px 0 var(--p-rouge-ombre); }
@media (prefers-reduced-motion:reduce){
.qz-faisceaux i, .qz-marque, .qz-sous, .qz-compte, .qz-passer{ animation:none; }
}
/* ---------- Plateaux : lisibilité de l'écran de fin et du classement ----------
La scène est sombre (néon ou tapis) : les textes qui héritent de l'encre
habituelle y disparaissaient. On leur donne un panneau et une encre claire. */
/* Même sur un plateau sombre, le feedback de fin reste sur panneau BLANC. */
#vue-jeu[data-plateau] .jeu-fin{
color:var(--encre); background:var(--bloc);
border:var(--trait) solid var(--ligne); border-radius:var(--rayon); box-shadow:var(--decal);
padding:clamp(20px,3.4cqh,44px) clamp(22px,4cqw,60px);
max-width:min(94cqw,900px); margin:auto; }
#vue-jeu[data-plateau] .jeu-fin .gros{ color:var(--encre); text-shadow:none; }
#vue-jeu[data-plateau] .jeu-fin .bravo{ color:var(--e-bleu); }
#vue-jeu[data-plateau] .jeu-fin .consigne,
#vue-jeu[data-plateau] .jeu-fin .ruban-etape{ color:var(--encre); }
/* Le score de la barre du haut : pastille claire, encre sombre — donc lisible
quel que soit le fond derrière. */
#vue-jeu[data-plateau] #jeu-score{ background:#fff; color:#12162c; }
/* Quiz Show : quatre réponses sur deux lignes de deux. */
#vue-jeu[data-plateau="quiz"] .quiz-reponses{
grid-template-columns:repeat(2,minmax(0,1fr)); max-width:min(96%,1500px); margin:0 auto;
/* Au moins un centimètre entre les deux rangées. */
row-gap:clamp(1cm,3.4cqh,1.7cm); }
@media (max-width:620px){
#vue-jeu[data-plateau="quiz"] .quiz-reponses{ grid-template-columns:minmax(0,1fr); }
}
/* ==========================================================================
TUTORIELS
========================================================================== */
.tuto-liste{ display:flex; flex-direction:column; gap:20px; }
.tuto-cat-nom{ font-family:var(--craieface); font-weight:700; font-size:12px;
letter-spacing:.06em; text-transform:uppercase; color:var(--efface);
margin-bottom:6px; padding-bottom:5px; border-bottom:var(--trait-fin) solid var(--voile); }
.tuto-item{ display:flex; align-items:center; gap:10px; width:100%;
background:var(--sol-2); border:var(--trait-fin) solid var(--voile-fort);
border-radius:10px; padding:11px 12px; text-align:left; cursor:pointer;
transition:border-color .15s, background .15s; }
.tuto-item:hover{ border-color:var(--p-bleu); background:var(--sol-3,var(--sol-2)); }
.tuto-item-emoji{ font-size:22px; flex:none; width:32px; text-align:center; }
.tuto-item-texte{ flex:1; min-width:0; }
.tuto-item-titre{ display:block; font-weight:700; font-size:14px; color:var(--ligne);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tuto-item-meta{ display:block; font-size:12px; color:var(--efface); margin-top:2px; }
.tuto-item-fleche{ font-size:20px; color:var(--efface); flex:none; }
.tuto-retour{ background:none; border:none; color:var(--e-bleu); font-size:13px;
font-weight:700; cursor:pointer; padding:0 0 10px; display:flex; align-items:center; gap:5px; }
.tuto-retour:hover{ text-decoration:underline; }
.tuto-meta{ margin-bottom:16px !important; }
.tuto-etapes{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.tuto-etapes li{ background:var(--sol-2); border:var(--trait-fin) solid var(--voile-fort);
border-radius:10px; padding:12px 14px; counter-increment:etape;
display:grid; grid-template-columns:28px 1fr; gap:0 10px; }
.tuto-etapes{ counter-reset:etape; }
.tuto-etapes li::before{ content:counter(etape); font-family:var(--craieface); font-weight:700;
font-size:17px; color:var(--p-bleu); line-height:1.3; }
.tuto-etapes li strong{ font-size:14px; color:var(--ligne); display:block; margin-bottom:4px; }
.tuto-etapes li p{ margin:0; font-size:13.5px; color:var(--efface); line-height:1.5;
grid-column:2; }
.tuto-etapes li strong{ grid-column:2; }
.tuto-jeux-liste{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.tuto-jeux-liste li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px;
color:var(--efface); line-height:1.5; }
.tuto-jeu-em{ font-size:19px; flex:none; width:26px; text-align:center; }
.tuto-jeux-liste strong{ color:var(--ligne); }
/* Trier — étiquette mode son uniquement */
.tri-etq-son{ font-size:22px; min-width:44px; min-height:44px;
display:flex; align-items:center; justify-content:center; padding:6px 10px; }
/* ==========================================================================
CONNEXIONS — retrouver les groupes de mots
========================================================================== */
.cx-jeu{ display:flex; flex-direction:column; gap:12px; height:100%;
justify-content:center; max-width:1100px; margin:0 auto; width:100%; }
/* Bandeaux des groupes trouvés */
.cx-resolus{ display:flex; flex-direction:column; gap:8px; }
.cx-resolus:empty{ display:none; }
.cx-bande{ background:var(--cx-teinte); border-radius:12px; padding:10px 14px;
text-align:center; color:var(--cx-encre,#fff); animation:cx-tombe .45s cubic-bezier(.2,.9,.3,1.2); }
.cx-bande-nom{ font-family:var(--craieface); font-weight:700; font-size:clamp(15px,2.1cqw,21px);
line-height:1.15; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.cx-bande-mots{ font-size:clamp(12px,1.5cqw,15px); opacity:.92; margin-top:3px; }
@keyframes cx-tombe{ from{ opacity:0; transform:translateY(-14px) scale(.96); } }
/* Grille des mots restants */
.cx-grille{ display:grid; grid-template-columns:repeat(var(--cx-cols,4), minmax(0,1fr));
gap:8px; }
.cx-mot{ background:var(--sol-2); border:var(--trait-fin) solid var(--voile-fort);
border-radius:12px; padding:14px 8px; cursor:pointer; min-height:64px;
display:flex; align-items:center; justify-content:center; text-align:center;
font-family:var(--craieface); font-weight:700; color:var(--ligne);
font-size:clamp(13px,1.9cqw,20px); line-height:1.15; word-break:break-word;
transition:transform .12s, background .15s, border-color .15s; }
.cx-mot:hover{ border-color:var(--p-bleu); }
.cx-mot[data-choisi="1"]{ background:var(--ligne); color:var(--sol-2);
border-color:var(--ligne); transform:scale(.96); }
.cx-secoue{ animation:cx-secoue .42s; }
@keyframes cx-secoue{
10%,90%{ transform:translateX(-3px) scale(.96); }
30%,70%{ transform:translateX(5px) scale(.96); }
50%{ transform:translateX(-5px) scale(.96); } }
/* Pied : vies, boutons, message */
.cx-pied{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.cx-vies{ display:flex; align-items:center; gap:7px; }
.cx-vies-txt{ font-size:13px; color:var(--efface); margin-right:3px; }
.cx-vie{ width:13px; height:13px; border-radius:50%; background:var(--ligne);
transition:background .25s, transform .25s; }
.cx-vie[data-perdue="1"]{ background:var(--voile-fort); transform:scale(.72); }
.cx-boutons{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.cx-message{ min-height:22px; font-family:var(--craieface); font-weight:700;
font-size:15px; text-align:center; }
.cx-message[data-ton="bon"]{ color:var(--p-vert); }
.cx-message[data-ton="faux"]{ color:var(--e-rouge,var(--p-rose)); }
.cx-message[data-ton="presque"]{ color:var(--p-jaune); }
.cx-message[data-ton="neutre"]{ color:var(--efface); }
@media (max-width:640px){
.cx-grille{ gap:6px; }
.cx-mot{ min-height:54px; padding:9px 5px; border-radius:10px; }
.cx-boutons .bouton{ font-size:13px; padding:8px 11px; }
}
/* Éditeur — compteur de mots par groupe */
.grp-compte{ font-size:12px; font-weight:700; padding:3px 8px; border-radius:99px;
white-space:nowrap; flex:none; }
.grp-compte[data-etat="ok"]{ background:color-mix(in srgb, var(--p-vert) 18%, transparent); color:var(--p-vert); }
.grp-compte[data-etat="peu"]{ background:var(--voile); color:var(--efface); }
.grp-compte[data-etat="trop"]{ background:color-mix(in srgb, var(--p-rose) 20%, transparent); color:var(--p-rose); }
/* ==========================================================================
TRIER — étiquettes portant une image
========================================================================== */
.app-etq[data-media="1"]{ display:flex; flex-direction:column; align-items:center;
gap:5px; padding:7px; }
.app-etq[data-media="1"] img{ display:block; width:clamp(58px,9cqw,104px);
height:clamp(58px,9cqw,104px); object-fit:contain; border-radius:8px;
background:var(--sol-2); pointer-events:none; }
.tri-etq-mot{ font-size:clamp(11px,1.4cqw,15px); line-height:1.1; max-width:112px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Dans un carton, les vignettes se resserrent pour que le carton en contienne
davantage sans devoir défiler. */
.tri-drop .app-etq[data-media="1"] img{ width:clamp(42px,5.4cqw,66px); height:clamp(42px,5.4cqw,66px); }
/* Aperçu dans la fenêtre de choix (téléphone) */
.tri-choix-img{ text-align:center; margin-bottom:6px; }
.tri-choix-img img{ max-width:190px; max-height:150px; object-fit:contain;
border-radius:10px; background:var(--sol-2); }
/* Vignette du corrigé projeté */
.cor-vign{ width:34px; height:34px; object-fit:contain; vertical-align:middle;
border-radius:5px; background:var(--sol-2); }
/* Éditeur — bande « une image par mot » sous chaque catégorie */
.cat-medias{ margin-top:10px; padding-top:9px; border-top:var(--trait-fin) solid var(--voile); }
.cat-medias-titre{ display:block; font-size:12px; color:var(--efface); margin-bottom:7px; }
.cat-pastilles{ display:flex; flex-wrap:wrap; gap:9px; }
.cat-pastille{ position:relative; display:flex; flex-direction:column; align-items:center;
gap:3px; width:70px; }
.cat-vign{ width:56px; height:56px; border-radius:9px; cursor:pointer; padding:0;
background:var(--sol-2); border:var(--trait-fin) dashed var(--voile-fort);
display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cat-pastille[data-a="1"] .cat-vign{ border-style:solid; border-color:var(--p-vert); }
.cat-vign img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.cat-vign:hover{ border-color:var(--p-bleu); }
.cat-plus{ font-size:19px; color:var(--efface); line-height:1; }
.cat-pastille-mot{ font-size:11px; color:var(--efface); max-width:70px; text-align:center;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-oter{ position:absolute; top:-5px; right:2px; width:19px; height:19px; padding:0;
border-radius:50%; border:0; cursor:pointer; background:var(--ligne); color:var(--sol-2);
font-size:11px; line-height:19px; }
/* Planche imprimée des mots croisés : indice sous forme d'image. */
.pl-mc-img{ display:inline-block; max-width:132px; max-height:96px; object-fit:contain;
vertical-align:middle; border:1px solid #bbb; border-radius:4px; background:#fff; }
@media print{ .pl-mc-img{ max-width:112px; max-height:82px; } }
/* Loupe de recherche d'image, posée en haut à GAUCHE de la pastille (la croix
de retrait occupe la droite). */
.cat-chercher{ position:absolute; top:-5px; left:2px; width:19px; height:19px; padding:0;
border-radius:50%; border:0; cursor:pointer; background:var(--p-bleu); color:#fff;
font-size:10px; line-height:19px; }
.cat-chercher:hover{ filter:brightness(1.12); }
/* Haut-parleur : le son du mot (lien mp3 / Nuage). Posé sous la loupe, à
gauche ; il devient vert quand un fichier est attaché au mot. */
.cat-son{ top:auto; bottom:-5px; left:2px; background:var(--efface,#667); }
.cat-son--pose{ background:var(--ok,#2e9e5b); }
/* Médias à trier tels quels : pas de mot sous la vignette, une rangée de
boutons d'ajout au-dessus. */
.cat-seuls-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.cat-seuls .cat-vign{ font-size:24px; display:grid; place-items:center; }
.cat-lot{ margin-bottom:8px; }
/* Corrigé d'« Associer » : les paires justes, en tableau, pour la trace écrite. */
.cor-paires{ width:100%; border-collapse:collapse; font-size:clamp(15px,2cqw,22px); }
.cor-paires th{ font-family:var(--pochoir); text-transform:uppercase; letter-spacing:.04em;
font-size:.72em; opacity:.7; text-align:left; padding:6px 10px; }
.cor-paires td{ padding:7px 10px; border-top:var(--trait-fin) solid var(--voile-fort); }
.cor-paires .cor-vign{ max-height:52px; max-width:96px; object-fit:contain; vertical-align:middle; }
/* Trier : le menu qui décide de la nature des étiquettes (mots / images / sons).
Il commande tout l'éditeur, il est donc mis en évidence. */
.tri-mode-champ{ max-width:420px; margin:2px 0 12px; }
.tri-mode-champ select{ font-size:16px; }
/* Trier en mode IMAGES : l'étiquette EST l'image, sans mot — elle peut donc
être grande dans l'espace libre. Une fois rangée dans un carton, elle
rapetisse pour qu'il en tienne plusieurs sans défilement. */
.tri-libre > .app-etq[data-media="1"] img{ width:clamp(96px,15cqw,220px);
height:clamp(96px,15cqw,220px); }
.tri-drop .app-etq[data-media="1"] img{ width:clamp(40px,5cqw,62px);
height:clamp(40px,5cqw,62px); transition:width .16s ease, height .16s ease; }
@media (max-width:640px){
.tri-libre > .app-etq[data-media="1"] img{ width:clamp(84px,26cqw,140px);
height:clamp(84px,26cqw,140px); }
}
/* « Bravo » en cours de jeu : au centre de l'écran, en grand, panneau blanc. */
.bravo-central{ position:fixed; inset:0; z-index:3000; display:grid; place-items:center;
pointer-events:auto; background:transparent; animation:bravoEntre .22s ease-out; }
.bravo-central-panneau{ background:#fff; color:var(--ok);
border:var(--trait) solid var(--ligne); border-radius:var(--rayon); box-shadow:var(--decal);
font-family:var(--craieface); font-weight:700; font-size:clamp(40px,8cqw,110px); line-height:1.05;
padding:clamp(18px,3cqh,40px) clamp(28px,5cqw,72px); text-align:center; max-width:90cqw; }
.bravo-central--ko .bravo-central-panneau{ color:var(--ko); }
.bravo-central--sort{ opacity:0; transition:opacity .25s ease; }
@keyframes bravoEntre{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:none; } }
/* ==========================================================================
DICTÉE
========================================================================== */
.dc-lecteur{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:6px 0 12px; }
.dc-saisie{ display:block; width:min(100%,900px); margin:0 auto; box-sizing:border-box;
font:inherit; font-size:clamp(18px,2.4cqw,28px); line-height:1.35; padding:12px 16px;
border-radius:12px; border:2px solid var(--voile-fort); background:var(--sol-2); color:inherit; resize:vertical; }
.dc-saisie:focus{ outline:3px solid var(--p-bleu); outline-offset:2px; }
.dc-saisie[readonly]{ opacity:.8; }
.dc-correction{ width:min(100%,900px); margin:12px auto 0; display:flex; flex-direction:column; gap:8px;
font-size:clamp(17px,2.2cqw,26px); }
.dc-ligne{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:baseline; }
.dc-etiq{ font-size:.68em; opacity:.75; min-width:6.5em; font-family:var(--craieface); font-weight:700; }
.dc-m{ padding:1px 6px; border-radius:6px; }
.dc-m[data-ok="1"]{ background:color-mix(in srgb, var(--ok) 22%, transparent); }
.dc-m[data-ok="0"]{ background:color-mix(in srgb, var(--ko) 24%, transparent); text-decoration:underline wavy var(--ko); }
.dc-ligne--saisie .dc-m[data-ok="0"]{ text-decoration:line-through var(--ko); }
/* Associer images, mode liste (plus de 14 images) */
.apg-liste .apc-fente{ cursor:pointer; }
.apg-liste .apc-fente:hover{ border-color:var(--p-bleu); }
.apg-choix{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-height:55cqh; overflow:auto; margin:12px 0; }
.apg-choix .bouton{ font-size:clamp(15px,1.9cqw,20px); }
/* Casier : étiquette de niveau */
.cs-etiq.niv{ background:color-mix(in srgb, var(--p-jaune) 45%, transparent); }
/* Quiz Show : question illustrée — l'image s'aligne sur le haut de la question
et l'ensemble se resserre pour que les quatre réponses restent à l'écran. */
#vue-jeu[data-plateau] .quiz-scene:has(> .quiz-image){ flex-wrap:nowrap; align-items:flex-start; }
#vue-jeu[data-plateau] .quiz-scene:has(> .quiz-image) .quiz-image img{ width:min(30cqw,460px); max-height:42cqh; }
#vue-jeu[data-plateau] .quiz-scene:has(> .quiz-image) .quiz-enonce{ font-size:clamp(22px,3.4cqw,48px);
margin-bottom:clamp(12px,2.4cqh,28px); padding:clamp(12px,2.2cqh,28px) clamp(18px,3cqw,44px); }
#vue-jeu[data-plateau] .quiz-scene:has(> .quiz-image) .quiz-rep{ font-size:clamp(16px,2.2cqw,30px);
padding:clamp(10px,1.6cqh,18px) clamp(12px,1.6cqw,20px); }
@media (max-width:760px){
#vue-jeu[data-plateau] .quiz-scene:has(> .quiz-image){ flex-wrap:wrap; justify-content:center; }
#vue-jeu[data-plateau] .quiz-scene:has(> .quiz-image) .quiz-image img{ width:min(80cqw,360px); max-height:26cqh; }
}
/* Accessibilité — contraste 5,4:1 du texte blanc (audit 29/09/2026) */
.bouton--valider{ background:#0b7a4b; border-color:#0b7a4b; }
/* ==========================================================================
16. THÈME « COUR DE RÉCRÉ » (oct. 2026)
Couche posée APRÈS tout le reste : elle surcharge sans rien supprimer.
Les choix enregistrés (thème jour/nuit, police) restent respectés.
========================================================================== */
:root{
/* Les trois couleurs du logo marelle */
--p-rouge:#cc3326; --p-jaune:#f4be37; --p-bleu:#2d6fc4;
--p-rouge-ombre:#8f2219; --p-jaune-ombre:#b88a14; --p-bleu-ombre:#1b4a87;
/* Familles de jeux : liseré, encre (texte/icône), teinte (fond d'icône) */
--f-tester:#2d6fc4; --f-tester-encre:#1f5aa8; --f-tester-teinte:#dde8f7;
--f-classer:#2f7d34; --f-classer-encre:#2f7d34; --f-classer-teinte:#e2f1e2;
--f-ordonner:#6b3fa0; --f-ordonner-encre:#6b3fa0;--f-ordonner-teinte:#ece3f6;
--f-ecrire:#f4be37; --f-ecrire-encre:#8a6200; --f-ecrire-teinte:#fdf1d3;
--f-observer:#cc3326; --f-observer-encre:#cc3326;--f-observer-teinte:#fbe3e0;
--rayon:18px; --rayon-s:12px;
--gite:0deg; /* tuiles droites */
--titre:var(--police-baloo);
}
:root, body[data-theme="jour"]{
--sol:#fbfbf9; --sol-2:#f6f4ee; --sol-3:#ece8de;
--voile-fort:#e2ded4;
}
body[data-theme="nuit"]{
--f-tester-encre:#7cc0ff; --f-tester-teinte:rgba(45,111,196,.24);
--f-classer-encre:#7fca7f; --f-classer-teinte:rgba(47,125,52,.26);
--f-ordonner-encre:#c9a3f0; --f-ordonner-teinte:rgba(107,63,160,.28);
--f-ecrire-encre:#ffc42e; --f-ecrire-teinte:rgba(244,190,55,.20);
--f-observer-encre:#ff8a7d; --f-observer-teinte:rgba(204,51,38,.24);
}
/* Icônes SVG */
.icone-pg{ display:inline-block; flex:none; vertical-align:middle; }
.bouton .icone-pg{ margin:-2px 0; }
/* Boutons « en relief » : aplats pleins pour les actions principales */
.bouton--rouge{ background:var(--p-rouge); border-color:var(--p-rouge); color:#fff;
box-shadow:0 4px 0 var(--p-rouge-ombre); }
.bouton--bleu{ background:var(--p-bleu); border-color:var(--p-bleu); color:#fff;
box-shadow:0 4px 0 var(--p-bleu-ombre); }
.bouton--collection{ background:var(--p-jaune); border-color:var(--p-jaune); color:#1a1c22;
box-shadow:0 4px 0 var(--p-jaune-ombre); }
.bouton--rouge:hover, .bouton--bleu:hover, .bouton--collection:hover{ filter:brightness(1.07); }
.bouton--rouge:hover{ background:var(--p-rouge); color:#fff; border-color:var(--p-rouge); }
.bouton--bleu:hover{ background:var(--p-bleu); color:#fff; border-color:var(--p-bleu); }
.bouton--collection:hover{ background:var(--p-jaune); color:#1a1c22; border-color:var(--p-jaune); }
/* Tuiles : liseré en HAUT (plus à gauche), droites, coins plus ronds */
.carte{ border-left:var(--trait-fin) solid var(--voile-fort);
border-top:6px solid var(--bord, var(--voile-fort)); transform:none; }
.carte:hover{ transform:translateY(-3px); border-left-width:var(--trait-fin); }
.carte[data-famille="tester"]{ --bord:var(--f-tester); }
.carte[data-famille="classer"]{ --bord:var(--f-classer); }
.carte[data-famille="ordonner"]{ --bord:var(--f-ordonner); }
.carte[data-famille="ecrire"]{ --bord:var(--f-ecrire); }
.carte[data-famille="observer"]{ --bord:var(--f-observer); }
/* Titres en Baloo 2 */
h1, h2, .cour-titre, #cour-titre{ font-family:var(--titre); }
/* ---------- 16b. Ma cour ---------- */
.bouton--casier{ border-color:var(--ligne); color:var(--ligne); }
.carte{ padding:20px 18px 18px; min-height:150px; }
/* Icône du jeu (ou du dossier) : toujours au même endroit, en haut à gauche */
.carte .emoji{ width:52px; height:52px; margin:0; border-radius:14px; font-size:30px;
background:var(--sol-2); color:var(--ligne); }
.carte .emoji img{ width:52px; height:52px; border-radius:14px; }
.carte[data-bord="dossier"] .emoji{ background:none; color:var(--p-bleu); width:auto; justify-content:flex-start; margin-bottom:8px; }
.carte[data-famille="tester"] .emoji{ background:var(--f-tester-teinte); color:var(--f-tester-encre); }
.carte[data-famille="classer"] .emoji{ background:var(--f-classer-teinte); color:var(--f-classer-encre); }
.carte[data-famille="ordonner"] .emoji{ background:var(--f-ordonner-teinte); color:var(--f-ordonner-encre); }
.carte[data-famille="ecrire"] .emoji{ background:var(--f-ecrire-teinte); color:var(--f-ecrire-encre); }
.carte[data-famille="observer"] .emoji{ background:var(--f-observer-teinte); color:var(--f-observer-encre); }
/* Tuile d'activité : icône + titre centré verticalement, titre coupé à 2 lignes */
.carte > button[data-ouvrir]{ display:flex !important; flex-wrap:wrap; align-items:center; gap:14px; min-height:52px; }
.carte > button[data-ouvrir] .nom{ flex:1; min-width:0; font-family:var(--titre); font-size:18px; line-height:1.25;
display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:normal; }
.carte > button[data-ouvrir] .avert{ flex-basis:100%; margin-top:0; }
.carte .nom{ font-family:var(--titre); }
/* Actions des activités : toujours visibles, en bas de la tuile */
.actions-carte[data-veil-type="element"], .actions-carte[data-veil-type="bloque"]{
position:static; inset:auto; opacity:1; pointer-events:auto; background:none; border:0;
padding:0; margin-top:20px; justify-content:flex-start; flex-wrap:nowrap; gap:8px; cursor:default; border-radius:0; }
.actions-carte[data-veil-type="element"] button, .actions-carte[data-veil-type="bloque"] button{
flex:none; width:40px; height:40px; border-radius:10px; border:0; background:var(--sol-2);
color:var(--ligne); box-shadow:none; display:grid; place-items:center; }
.actions-carte[data-veil-type="element"] button.jouer, .actions-carte[data-veil-type="bloque"] button.jouer{
flex:1; width:auto; display:flex; align-items:center; justify-content:center; gap:3px;
background:var(--p-rouge); color:#fff; font-family:var(--craieface); font-weight:700; font-size:15px; }
.actions-carte[data-veil-type="bloque"] button.jouer[disabled]{ background:var(--sol-3); color:var(--efface); }
.grille-cartes{ gap:22px; }
/* Les trois portes : liserés rouge / bleu / jaune, icône dans un carré teinté */
.porte{ border-top:6px solid var(--p-rouge); }
.porte--dossier{ border-top-color:var(--p-bleu); }
.porte--collection{ border-top-color:var(--p-jaune); }
.porte .ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
background:var(--f-observer-teinte); color:var(--p-rouge); font-size:0; }
.porte--dossier .ic{ background:var(--f-tester-teinte); color:var(--p-bleu); }
.porte--collection .ic{ background:var(--f-ecrire-teinte); color:var(--f-ecrire-encre); }
.porte .t{ font-family:var(--titre); }
.grille-cartes:not(.grille-cartes--dossiers){ grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
/* ---------- 16c. Quel jeu pour ma classe ? ---------- */
[data-famille="tester"] { --fc:var(--f-tester); --fe:var(--f-tester-encre); --ft:var(--f-tester-teinte); }
[data-famille="classer"] { --fc:var(--f-classer); --fe:var(--f-classer-encre); --ft:var(--f-classer-teinte); }
[data-famille="ordonner"]{ --fc:var(--f-ordonner); --fe:var(--f-ordonner-encre); --ft:var(--f-ordonner-teinte); }
[data-famille="ecrire"] { --fc:var(--f-ecrire); --fe:var(--f-ecrire-encre); --ft:var(--f-ecrire-teinte); }
[data-famille="observer"]{ --fc:var(--f-observer); --fe:var(--f-observer-encre); --ft:var(--f-observer-teinte); }
.titre-page{ font-family:var(--titre); }
.lien-retour{ all:unset; cursor:pointer; font-family:var(--craieface); font-weight:700; color:var(--efface);
padding:4px 0; margin-bottom:4px; display:inline-block; }
.lien-retour:hover, .lien-retour:focus-visible{ color:var(--ligne); text-decoration:underline; }
.ancres-familles{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 28px; }
.ancre-famille{ display:inline-flex; align-items:center; gap:8px; font-family:var(--craieface); font-weight:700;
font-size:15px; padding:9px 14px; border-radius:999px; background:var(--bloc); color:var(--ligne);
border:var(--trait-fin) solid var(--fc, var(--voile-fort)); cursor:pointer; }
.ancre-famille::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--fc, var(--voile-fort)); }
.famille-jeux{ margin:0 0 40px; scroll-margin-top:16px; }
.famille-tete{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:16px; }
.famille-tete h2{ margin:0; font-family:var(--titre); font-size:30px; line-height:1.1; color:var(--fe, var(--ligne)); }
.famille-tete span{ color:var(--efface); }
.famille-jeux .grille-jeux{ grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:16px; }
.tuile-jeu--famille{ border:var(--trait-fin) solid var(--voile-fort); border-top:6px solid var(--fc, var(--voile-fort));
border-radius:18px; padding:18px 16px; gap:12px; min-height:150px; cursor:pointer; color:var(--ligne); font:inherit; }
.tuile-jeu--famille .ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
background:var(--ft, var(--sol-2)); color:var(--fe, var(--ligne)); font-size:28px; }
.tuile-jeu--famille .n{ font-family:var(--titre); font-size:19px; line-height:1.15; color:var(--ligne); }
.tuile-jeu--famille .f{ font-size:13px; }
.choix-associer{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.choix-associer .bouton{ justify-content:center; padding:14px 18px; }
/* ---------- 16d. Mes collections ---------- */
.grille-cartes.grille-cartes--collections{ grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:28px; }
.enveloppe--collection{ padding-top:8px; }
.enveloppe--collection::before{ content:""; position:absolute; left:12px; right:12px; top:0; height:24px;
border-radius:16px 16px 0 0; background:#f8d77a; }
body[data-theme="nuit"] .enveloppe--collection::before{ background:#8a6f2a; }
.carte--collection{ position:relative; z-index:1; --bord:var(--p-jaune); min-height:200px; }
.carte--collection > button[data-ouvrir]{ flex-direction:column; align-items:stretch; gap:16px; }
.col-tete{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding-right:24px; }
.carte--collection > button[data-ouvrir] .col-tete .nom{ flex:1; font-size:20px; }
.col-nb{ flex:none; font-family:var(--craieface); font-weight:700; font-size:13px; padding:4px 10px; border-radius:999px;
background:var(--f-ecrire-teinte); color:var(--f-ecrire-encre); }
.col-etapes{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.col-etape{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
background:var(--ft, var(--sol-2)); color:var(--fe, var(--ligne)); }
.col-chevron{ color:var(--voile-fort); display:grid; place-items:center; }
.col-plus{ font-family:var(--craieface); font-weight:700; color:var(--efface); }
.col-ou{ font-size:13px; color:var(--efface); }
.vide-collections .ic{ color:var(--f-ecrire-encre); }
/* ---------- 16e. Le Casier ---------- */
#casier-container .cs-intro .cs-ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
background:var(--sol-2); color:var(--ligne); font-size:0; }
#casier-container .cs-intro h2{ font-family:var(--titre); }
#casier-container .cs-grille{ gap:22px; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); }
#casier-container .cs-carte{ transform:none; border-top:6px solid var(--fc, var(--pot, var(--p-bleu))); border-radius:18px; }
#casier-container .cs-carte:nth-child(even){ --gite:0deg; }
#casier-container .cs-carte:hover{ transform:translateY(-3px); border-color:var(--voile-fort); border-top-color:var(--fc, var(--pot, var(--p-bleu))); }
#casier-container .cs-croix{ top:10px; }
#casier-container .cs-corps{ padding:20px 18px 8px; }
#casier-container .cs-tete{ display:flex; align-items:center; gap:14px; min-height:52px; margin-bottom:12px; padding-right:22px; }
#casier-container .cs-icone{ flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
background:var(--ft, var(--sol-2)); color:var(--fe, var(--ligne)); }
#casier-container .cs-carte h3{ font-family:var(--titre); margin:0; font-size:18px; line-height:1.25; overflow-wrap:normal;
display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#casier-container .cs-pied{ padding:10px 18px 18px; }
#casier-container .cs-btn{ display:flex; align-items:center; justify-content:center; gap:3px; border:0; box-shadow:none;
height:40px; padding:0 12px; border-radius:10px; }
#casier-container .cs-btn.jouer{ flex:1; background:var(--p-rouge); color:#fff; }
#casier-container .cs-btn.dupliquer{ flex:none; gap:6px; background:var(--sol-2); color:var(--ligne); }
/* ---------- 16f. Accueil ---------- */
#vue-accueil{ max-width:1200px; margin:0 auto; padding:8px 0 64px; }
#vue-accueil[hidden]{ display:none; }
.acc-heros{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:40px; align-items:center; padding:24px 0 64px; }
.acc-texte{ display:flex; flex-direction:column; gap:22px; }
.acc-texte h1{ margin:0; font-family:var(--titre); font-weight:800; font-size:clamp(44px,7vw,72px); line-height:.98; }
.acc-texte h1 span{ color:var(--p-rouge); }
.acc-texte p{ margin:0; font-size:clamp(17px,1.8vw,20px); color:var(--efface); max-width:520px; line-height:1.5; }
.acc-boutons{ display:flex; flex-wrap:wrap; gap:14px; }
.bouton.acc-grand{ font-size:18px; padding:15px 26px; }
/* Démo animée */
.acc-demo{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:520px; justify-self:center; }
.acc-ecran{ background:#fff; color:#1f2430; border-radius:22px; box-shadow:0 18px 40px rgba(0,0,0,.18); overflow:hidden; }
.acc-barre{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:2px solid #f1eee6; }
.acc-disc{ color:#fff; font-weight:700; font-size:14px; padding:6px 12px; border-radius:999px; transition:background .4s; }
.acc-jeu{ font-family:var(--titre); font-weight:800; font-size:20px; }
.acc-scene{ position:relative; height:320px; font-family:var(--craieface); }
.acc-consigne{ position:absolute; left:20px; top:12px; margin:0; font-size:14px; color:#4a5160; }
.acc-ch{ position:absolute; left:20px; right:20px; height:54px; display:flex; align-items:center; gap:14px; padding:0 16px;
border:2px solid #e2ded4; border-radius:12px; background:#fff; transition:top .5s ease, background .4s, border-color .4s; }
.acc-ch strong{ font-family:var(--titre); font-size:22px; width:60px; flex:none; }
.acc-ch.ok{ background:#e6f3e6; border-color:#2f7d34; }
.acc-question{ margin:0; padding:24px 20px 16px; text-align:center; font-family:var(--titre); font-weight:700; font-size:24px; }
.acc-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 20px; }
.acc-options div{ height:64px; border-radius:14px; background:#f1eee6; display:grid; place-items:center; font-weight:700; font-size:22px; transition:all .4s; }
.acc-options div.ok{ background:#2f7d34; color:#fff; }
.acc-options div.eteint{ opacity:.35; }
.acc-bac{ position:absolute; top:140px; width:42%; height:138px; border-radius:16px; border:3px dashed #c9a23a; background:#fff6db;
display:flex; justify-content:center; padding-top:6px; box-sizing:border-box; font-family:var(--titre); font-size:22px; }
.acc-bac + .acc-bac{ border-color:#2d6fc4; background:#eef4fb; }
.acc-mot{ position:absolute; width:22%; height:38px; border-radius:10px; background:#1f2430; color:#fff; display:grid; place-items:center;
font-weight:700; transition:left .5s ease, top .5s ease; }
.acc-cnx{ padding:16px 20px; display:flex; flex-direction:column; gap:8px; }
.acc-bande{ height:60px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; font-size:14px; }
.acc-bande strong{ font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.acc-rangee{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.acc-rangee div{ height:60px; border-radius:12px; background:#efece4; display:grid; place-items:center; font-weight:700; font-size:15px; text-transform:uppercase; }
.acc-points{ display:flex; justify-content:center; gap:8px; }
.acc-points button{ width:12px; height:12px; border-radius:999px; border:0; padding:0; background:var(--voile-fort); cursor:pointer; transition:all .3s; }
.acc-points button.actif{ width:32px; }
/* Comment ça marche */
.acc-etapes{ background:var(--bloc); border:var(--trait-fin) solid var(--voile-fort); border-radius:28px; padding:56px 32px; margin-bottom:56px; }
.acc-etapes h2, .acc-contenu h2{ margin:0 0 36px; font-family:var(--titre); font-weight:800; font-size:clamp(32px,4vw,46px); line-height:1.05; }
.acc-etapes h2{ text-align:center; }
.acc-trois{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:28px; text-align:center; }
.acc-trois > div{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.acc-num{ width:92px; height:92px; border-radius:24px; background:var(--c); color:#fff; transform:rotate(var(--r));
font-family:var(--titre); font-weight:800; font-size:46px; display:grid; place-items:center; }
.acc-trois h3{ margin:8px 0 0; font-family:var(--titre); font-size:25px; }
.acc-trois p{ margin:0; color:var(--efface); max-width:300px; }
/* Un contenu = des jeux */
.acc-contenu{ background:var(--p-bleu); color:#fff; border-radius:28px; padding:44px; display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:40px; align-items:center; }
.acc-contenu-txt{ display:flex; flex-direction:column; gap:18px; }
.acc-contenu h2{ margin:0; }
.acc-contenu-txt > p{ margin:0; color:#eef4fb; }
.acc-sur{ margin:0; color:#fff3c4 !important; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:14px; }
.acc-liste{ background:#fff; color:#1f2430; border-radius:18px; padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.acc-liste strong{ font-family:var(--titre); font-size:20px; }
.acc-liste div{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 20px; font-size:15px; }
.acc-contenu-jeux{ display:flex; flex-direction:column; gap:16px; }
.acc-tuiles{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.acc-tuiles button{ font:inherit; cursor:pointer; border:0; border-radius:14px; padding:12px 6px; background:#fff; color:#1f2430;
display:flex; flex-direction:column; align-items:center; gap:6px; transition:background .3s; }
.acc-tuiles button span{ font-size:12px; font-weight:700; line-height:1.15; text-align:center; }
.acc-tuiles button.actif{ background:var(--p-jaune); }
.acc-apercu{ background:#1f5aa8; border-radius:18px; padding:18px 22px; display:flex; flex-direction:column; justify-content:center;
gap:12px; height:164px; box-sizing:border-box; overflow:hidden; }
.acc-apercu strong{ color:var(--p-jaune); display:block; }
.acc-apercu span{ color:#eef4fb; font-size:15px; }
.acc-cases{ display:flex; align-items:center; gap:10px; }
.acc-cases.serre{ gap:3px; } .acc-cases.colle{ gap:0; }
.acc-groupe{ display:flex; align-items:center; }
.acc-case{ min-width:0; height:44px; padding:0 14px; border-radius:10px; background:#fff; color:#1f2430 !important;
display:flex; align-items:center; justify-content:center; font-family:var(--titre); font-weight:700; font-size:16px !important; position:relative; }
.acc-case.acc-carte{ height:56px; }
.acc-case.acc-lettre{ width:40px; padding:0; font-size:22px !important; border-radius:8px; }
.acc-case.acc-jaune{ background:var(--p-jaune); }
.acc-case.acc-vide{ background:transparent; color:#fff !important; }
.acc-case.acc-ok{ background:#2f7d34; color:#fff !important; } .acc-case.acc-ko{ background:var(--p-rouge); color:#fff !important; }
.acc-case.acc-fleche{ background:transparent; color:#fff !important; font-size:24px !important; padding:0 4px; }
.acc-case.acc-trait{ width:48px; height:3px; padding:0; border-radius:2px; }
.acc-case.acc-dom-g{ border-radius:10px 0 0 10px; } .acc-case.acc-dom-d{ border-radius:0 10px 10px 0; border-left:2px solid #9aa3b5; }
.acc-case.acc-coche::after{ content:"\2713"; position:absolute; right:-7px; top:-7px; width:20px; height:20px; border-radius:999px;
background:#2f7d34; color:#fff; font-size:12px; display:grid; place-items:center; }
@media (max-width:560px){
.acc-tuiles{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.acc-contenu{ padding:28px 20px; } .acc-etapes{ padding:40px 20px; }
}
/* ---------- 16g. En-tête, Nuage, Tutoriels ---------- */
.outils .bouton .lbl-entete{ white-space:nowrap; }
.bouton--nuage-ok{ border-color:var(--e-vert); color:var(--e-vert); }
.bouton--nuage-ok::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--e-vert); }
@media (max-width:640px){ .outils .lbl-entete{ display:none; } .outils #btn-tuto, .outils #btn-nuage{ padding:0; width:44px; height:44px; justify-content:center; } .bouton--nuage-ok::after{ display:none; } }
.modal{ border-radius:22px; border-color:var(--voile-fort); }
/* Log in Nuage */
.nuage-ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin-bottom:12px;
background:var(--f-tester-teinte); color:var(--p-bleu); }
.bouton.nuage-go{ width:100%; justify-content:center; font-size:17px; padding:15px; }
.nuage-garanties{ list-style:none; margin:16px 0; padding:14px 16px; border-radius:14px; background:var(--sol-2);
display:flex; flex-direction:column; gap:9px; font-size:15px; }
.nuage-garanties li{ display:flex; align-items:center; gap:10px; }
.nuage-garanties .icone-pg{ color:var(--p-bleu); }
.bouton.nuage-sans{ width:100%; justify-content:center; box-shadow:none; border-color:var(--voile-fort); }
/* Centre Tutoriels */
.modal.modal--tuto{ max-width:min(94vw,1040px); padding:0; overflow:hidden; display:flex; }
.modal--tuto .modal-close{ z-index:2; }
.tuto-centre{ display:flex; width:100%; min-height:min(640px,86vh); max-height:90vh; }
.tuto-cote{ width:270px; flex:none; padding:26px 18px; border-right:var(--trait-fin) solid var(--voile-fort);
display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.tuto-cote .modal-titre{ font-family:var(--titre); font-size:28px; margin:0 0 6px 6px; }
.tuto-recherche{ display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:0 12px; border-radius:12px;
border:var(--trait-fin) solid var(--voile-fort); background:var(--sol-2); color:var(--efface); }
.tuto-recherche input{ font:inherit; font-size:15px; border:0; outline:none; background:transparent; color:var(--ligne); padding:10px 0; width:100%; min-width:0; }
.tuto-cats{ display:flex; flex-direction:column; gap:4px; }
.tuto-cat-btn{ font:inherit; text-align:left; cursor:pointer; padding:11px 12px; border-radius:10px; border:0; background:transparent; color:var(--ligne); }
.tuto-cat-btn:hover{ background:var(--sol-2); }
.tuto-cat-btn.actif{ background:var(--p-jaune); color:#1a1c22; font-weight:700; box-shadow:0 3px 0 var(--p-jaune-ombre); }
.tuto-principal{ flex:1; min-width:0; padding:30px 34px; overflow-y:auto; }
.tuto-titre-cat{ margin:0 0 20px; font-family:var(--titre); font-size:30px; padding-right:40px; }
.tuto-cartes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:16px; }
.tuto-carte{ font:inherit; cursor:pointer; text-align:left; color:var(--ligne); background:var(--bloc);
border:var(--trait-fin) solid var(--voile-fort); border-top:6px solid var(--p-rouge); border-radius:18px;
padding:18px; display:flex; flex-direction:column; gap:10px; transition:transform .12s; }
.tuto-carte:hover{ transform:translateY(-3px); }
.tuto-carte-ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--f-observer-teinte); color:var(--p-rouge); }
.tuto-carte-titre{ font-family:var(--titre); font-size:19px; line-height:1.2; }
.tuto-carte-meta{ font-size:13px; color:var(--efface); margin-top:auto; }
@media (max-width:700px){
.tuto-centre{ flex-direction:column; max-height:none; }
.modal.modal--tuto{ overflow-y:auto; display:block; }
.tuto-cote{ width:auto; border-right:0; border-bottom:var(--trait-fin) solid var(--voile-fort); }
.tuto-cats{ flex-direction:row; flex-wrap:wrap; }
.tuto-principal{ padding:22px 18px; }
}
/* ---------- 16h. Graisses des titres ---------- */
.titre-page, #cour-titre, #vue-accueil h1, .acc-etapes h2, .acc-contenu h2, .famille-tete h2, .tuto-titre-cat,
.tuto-cote .modal-titre{ font-weight:800; }
.carte .nom, .col-tete .nom, .tuile-jeu--famille .n, #casier-container .cs-carte h3, .tuto-carte-titre, .acc-jeu,
.acc-trois h3, .acc-liste strong, .acc-ch strong, .modal-titre, .porte .t{ font-weight:700; }
/* ---------- 16i. Accueil fidèle à la maquette ---------- */
:root{ --texte:var(--police-andika); }
/* Logo marelle et nom du site */
.marelle{ grid-template-columns:repeat(2,19px); grid-template-rows:repeat(2,19px); gap:2px; transform:rotate(-6deg); }
.marelle i{ width:19px; height:19px; border-radius:4px; }
.marque .mot{ font-family:var(--titre); font-weight:800; font-size:clamp(20px,2.2vw,26px); letter-spacing:0; }
.entete-cour{ padding-top:14px; padding-bottom:14px; }
.lien-entete{ all:unset; cursor:pointer; font-family:var(--titre); font-weight:700; font-size:17px; color:var(--ligne); padding:10px 8px; }
.lien-entete:hover, .lien-entete:focus-visible{ color:var(--p-rouge); }
body:not([data-accueil]) #lien-applis{ box-shadow:inset 0 -3px 0 var(--p-rouge); }
#outils-cour{ gap:14px; align-items:center; }
#outils-cour .bouton{ font-family:var(--titre); font-weight:700; }
/* Sur l'accueil : ni décor de craie, ni loupe (comme la maquette) */
body[data-accueil] .decor{ display:none !important; }
body[data-accueil] #btn-recherche{ display:none; }
@media (max-width:760px){ #lien-fonctions{ display:none; } .lien-entete{ font-size:15px; padding:8px 2px; } }
/* Héros */
.acc-texte p{ font-family:var(--police-andika); color:#4a5160; }
body[data-theme="nuit"] .acc-texte p{ color:var(--efface); }
#vue-accueil .bouton{ font-family:var(--titre); font-weight:700; }
.bouton.acc-second{ box-shadow:none; border:2px solid var(--ligne); }
.acc-scene, .acc-question, .acc-options, .acc-mot, .acc-rangee, .acc-bande{ font-family:var(--police-andika); }
.acc-ch span{ font-family:var(--police-andika); }
/* « Comment ça marche ? » : bande blanche pleine largeur, comme la maquette */
.acc-etapes{ border-radius:0; border:0; border-top:2px solid #ece8de; border-bottom:2px solid #ece8de;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:88px max(32px, calc(50vw - 600px)); }
body[data-accueil]{ overflow-x:clip; }
.acc-contenu{ margin-top:0; }
#vue-accueil .acc-etapes + .acc-contenu{ margin-top:88px; }
/* ---------- 16j. Cour fidèle à la maquette ---------- */
/* Les boutons-tuiles portent « all:unset » en ligne : il faut !important pour les mettre en page */
.carte > button[data-ouvrir]{ flex-wrap:wrap !important; align-items:center !important; gap:14px !important; min-height:52px !important; }
.carte--collection > button[data-ouvrir]{ flex-direction:column !important; align-items:stretch !important; gap:16px !important; }
.carte--collection{ min-height:0; }
/* Titre + compteur à gauche, boutons à droite */
#vue-cour{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; align-items:end; }
#vue-cour > #cour-retour{ grid-column:1 / -1; grid-row:1; justify-self:start; }
#vue-cour > #cour-titre{ grid-column:1; grid-row:2; margin:0; }
#vue-cour > #cour-compteur{ grid-column:1; grid-row:3; }
#vue-cour > #cour-actions{ grid-column:2; grid-row:2 / 4; align-self:end; justify-content:flex-end; margin:0; }
#vue-cour > #cour-contenu{ grid-column:1 / -1; grid-row:4; margin-top:28px; }
@media (max-width:860px){ #vue-cour{ grid-template-columns:minmax(0,1fr); } #vue-cour > #cour-actions{ grid-column:1; grid-row:4; justify-content:flex-start; margin-top:16px; } #vue-cour > #cour-contenu{ grid-row:5; } }
.sous-compte{ font-family:var(--police-andika); font-size:18px; margin-top:6px; }
.fil{ font-family:var(--police-andika); font-size:15px; }
.groupe-titre{ font-family:var(--titre); font-weight:800; font-size:26px; color:var(--efface); margin:8px 0 14px; }
.groupe-titre::after{ display:none; }
.groupe-titre--action::after{ display:block; }
.carte .nb{ font-family:var(--police-andika); font-size:15px; margin-top:6px; }
.carte[data-bord="dossier"] .nom{ font-size:21px; }
/* Décor de craie : absent des maquettes */
.decor{ display:none !important; }
body:not([data-accueil]) #lien-fonctions{ display:none; }
/* Boutons d'action : « Jouer » toujours lisible */
.grille-cartes:not(.grille-cartes--dossiers):not(.grille-cartes--collections){ grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); }
.actions-carte[data-veil-type="element"] button, .actions-carte[data-veil-type="bloque"] button{ width:38px; height:40px; }
.actions-carte[data-veil-type="element"] button.jouer, .actions-carte[data-veil-type="bloque"] button.jouer{ min-width:96px; }
.grille-cartes.grille-cartes--collections{ grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); }
.carte--collection .actions-carte button.jouer{ min-width:150px; }
#vue-cour[hidden]{ display:none; }
/* ---------- 16k. Respiration, Casier, dossiers, collections ---------- */
.cour{ max-width:1280px; }
/* Tuiles plates comme les maquettes : fine bordure, pas d'ombre portée */
.carte, #casier-container .cs-carte{ box-shadow:none; border-color:#ece8de; }
body[data-theme="nuit"] .carte, body[data-theme="nuit"] #casier-container .cs-carte{ border-color:var(--voile-fort); }
.carte:hover, #casier-container .cs-carte:hover{ box-shadow:0 10px 22px rgba(31,36,48,.08); }
/* Dossiers plus larges, titre un peu plus petit */
.grille-cartes.grille-cartes--dossiers{ grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:22px; }
.carte[data-bord="dossier"] .nom{ font-size:18px; overflow-wrap:normal; word-break:normal; hyphens:manual; }
/* Collections */
.carte--collection .col-tete .nom{ font-size:21px !important; }
.carte-coin{ position:absolute; top:10px; right:10px; z-index:4; display:flex; gap:6px; padding:4px; border-radius:999px;
background:var(--bloc); opacity:0; pointer-events:none; transition:opacity .14s; }
.enveloppe:hover .carte-coin, .enveloppe:focus-within .carte-coin{ opacity:1; pointer-events:auto; }
@media (hover:none){ .carte-coin{ opacity:1; pointer-events:auto; } }
.carte-coin button{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); color:var(--efface); font-size:13px; }
.carte-coin button:hover{ color:var(--ligne); border-color:var(--ligne); }
.carte-coin button.oter:hover{ background:var(--p-rouge); color:#fff; border-color:transparent; }
.carte--collection .actions-carte button.jouer{ flex:1; }
/* Le Casier façon maquette */
#casier-container .cs-barre{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:0 0 6px; }
#casier-container .cs-barre[hidden]{ display:none; }
.cs-cherche{ display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:12px; background:var(--bloc);
border:var(--trait-fin) solid var(--voile-fort); color:var(--efface); }
.cs-cherche input{ font:inherit; font-size:16px; border:0 !important; outline:none; background:transparent !important; color:var(--ligne);
padding:11px 0 !important; width:240px; max-width:60vw; box-shadow:none !important; }
.cs-puces{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-puce{ font-family:var(--titre); font-weight:700; font-size:15px; cursor:pointer; padding:8px 14px; border-radius:999px;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); color:var(--ligne); }
.cs-puce.actif{ background:var(--ligne); color:var(--bloc); border-color:var(--ligne); }
#casier-container .cs-compte{ font-family:var(--police-andika); font-size:15px; color:var(--efface); text-align:right; margin:0 0 16px; }
#casier-container .cs-meta{ align-items:center; gap:8px 10px; margin-bottom:4px; }
#casier-container .cs-etiq.mat{ background:var(--sol-2); border-color:transparent; color:var(--ligne); font-family:var(--titre); font-size:13px; }
#casier-container .cs-meta .cs-auteur{ font-family:var(--police-andika); font-size:14px; color:var(--efface); }
#casier-container .cs-carte{ min-height:0; }
/* ---------- 16l. Choix du partage ---------- */
.choix-partage{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
@media (max-width:480px){ .choix-partage{ grid-template-columns:1fr; } }
.choix-partage-btn{ font:inherit; cursor:pointer; text-align:left; color:var(--ligne); background:var(--bloc);
border:var(--trait-fin) solid var(--voile-fort); border-top:6px solid var(--p-bleu); border-radius:18px;
padding:16px; display:flex; flex-direction:column; gap:8px; transition:transform .12s; }
.choix-partage-btn:not([disabled]):hover{ transform:translateY(-3px); }
.choix-partage-btn .ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--f-tester-teinte); color:var(--p-bleu); }
.choix-partage-btn .t{ font-family:var(--titre); font-weight:700; font-size:19px; }
.choix-partage-btn .d{ font-size:14px; color:var(--efface); line-height:1.35; }
.choix-partage-btn--casier{ border-top-color:var(--p-jaune); }
.choix-partage-btn--casier .ic{ background:var(--f-ecrire-teinte); color:var(--f-ecrire-encre); }
.choix-partage-btn[disabled]{ opacity:.55; cursor:not-allowed; }
/* ---------- 16m. Le jeu dans un grand cadre, dans la page ----------
Façon Wordwall : l'en-tête du site reste en place, le jeu est contenu dans un
grand cadre arrondi, son titre et ses boutons juste en dessous. Plein écran,
mode élève, intégration et petits écrans : le jeu reprend toute la surface. */
body{ --fond-page:var(--sol); }
/* 640 px de haut (et non 480) : un TBI réglé à 125-150 % n'a que ~510 px utiles ;
dans le cadre, sous l'en-tête, le jeu tombait à ~360 px. En dessous : tout l'écran. */
@media (min-width:600px) and (min-height:640px){
body:not(.mode-integre):not(.mode-cadre) #vue-jeu:not([hidden]){
top:var(--haut-entete, 92px); bottom:0; left:0; right:0; max-height:none;
padding:0 max(20px, calc((100vw - 1680px) / 2 + 20px)) 18px; background:var(--fond-page); }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu .jeu-scene{
order:1; border-radius:24px; border:2px solid #ece8de; background-color:var(--sol);
box-shadow:0 18px 44px rgba(31,36,48,.12); }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu .jeu-hud{
order:2; background:transparent !important; color:var(--ligne) !important; padding:16px 4px 0; }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu .jeu-hud .titre{
font-family:var(--titre); font-weight:800; font-size:clamp(24px,2.4vw,32px); }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu .jeu-hud .bouton{
background:var(--bloc); color:var(--ligne); border:2px solid #ece8de; }
}
:root:fullscreen #vue-jeu:not([hidden]){ inset:0 !important; padding:0 !important; max-height:100dvh !important; }
:root:fullscreen #vue-jeu .jeu-scene{ border-radius:0 !important; border:0 !important; box-shadow:none !important; }
:root:-webkit-full-screen #vue-jeu:not([hidden]){ inset:0 !important; padding:0 !important; max-height:100dvh !important; }
:root:-webkit-full-screen #vue-jeu .jeu-scene{ border-radius:0 !important; border:0 !important; box-shadow:none !important; }
/* Casier : nom de l'auteur·rice sur une ligne, coupé par « … » */
#casier-container .cs-meta{ flex-wrap:nowrap; min-width:0; }
#casier-container .cs-meta .cs-etiq{ flex:none; }
#casier-container .cs-meta .cs-auteur{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* La scène de jeu est le repère de mesure : cqw/cqh = % de la scène (et non de
l'écran). Le jeu tient donc toujours dans son cadre, quelle que soit sa taille. */
.jeu-scene{ container-type:size; container-name:scene; }
/* ---------- 16n. Dominos aux couleurs du site ---------- */
.dm-app{ --dm-p1:var(--p-bleu); --dm-p2:var(--p-rouge); --dm-ok:#2f7d34; --dm-ko:var(--p-rouge); --dm-or:var(--p-jaune); --dm-encre:#1f2430; }
.dm-app--solo, .dm-app--duo{ background:var(--sol-2); }
.dm-plateau-boite, .dm-centre{ background:radial-gradient(circle, var(--voile-fort) 1.2px, transparent 1.4px) 0 0 / 22px 22px, var(--sol-2);
box-shadow:none; border-bottom:2px dashed var(--voile-fort); border-image:none; }
.dm-reserve, .dm-zone{ background:var(--bloc); box-shadow:none; border-top:6px solid var(--f-observer); }
.dm-zone--1{ border-top-color:var(--p-bleu); box-shadow:none; }
.dm-zone--2{ border-top-color:var(--p-rouge); box-shadow:none; }
.dm-app .dm-domino{ background:#fff; border:2px solid #e2ded4; border-radius:14px;
box-shadow:0 4px 0 #e2ded4, 0 8px 16px rgba(31,36,48,.08); }
.dm-app .dm-domino::after{ background:var(--p-jaune); box-shadow:none; }
.dm-app .dm-domino:not(.dm-pose):hover{ transform:translateY(-4px); box-shadow:0 4px 0 #e2ded4, 0 14px 22px rgba(31,36,48,.12), 0 0 0 3px var(--p-jaune); }
.dm-app .dm-domino:not(.dm-pose):active{ transform:translateY(2px); box-shadow:0 1px 0 #e2ded4; }
.dm-app .dm-domino.dm-pose{ box-shadow:0 3px 0 #e2ded4; }
.dm-app .dm-domino.dm-dernier{ box-shadow:0 3px 0 #e2ded4, 0 0 0 4px var(--p-jaune); }
.dm-app .dm-domino.dm-dernier .dm-half:last-of-type{ background:rgba(244,190,55,.16); }
.dm-half{ font-family:var(--titre); font-weight:700; }
.dm-app .dm-audio{ background:var(--p-bleu); box-shadow:0 3px 0 var(--p-bleu-ombre); }
.dm-app--duo .dm-audio{ background:#2f7d34; box-shadow:0 3px 0 #1f5a24; }
.dm-plateau:empty::before{ color:var(--efface); border-color:var(--voile-fort); font-family:var(--titre); }
.dm-joueur{ font-family:var(--titre); letter-spacing:.04em; box-shadow:none; }
.dm-panneau{ background:transparent; border-left:2px solid var(--voile-fort); }
.dm-tour{ font-family:var(--titre); border:0; box-shadow:0 5px 0 var(--p-bleu-ombre); }
.dm-tour[data-j="2"]{ box-shadow:0 5px 0 var(--p-rouge-ombre); }
/* ---------- 16o. Rail hors du cadre, Connexions, démo calme ---------- */
@media (min-width:600px) and (min-height:640px){
body:not(.mode-integre):not(.mode-cadre) #vue-jeu[data-rail="1"]:not([hidden]){
padding-right:calc(max(20px, calc((100vw - 1680px) / 2 + 20px)) + 58px); }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu[data-rail="1"] .jeu-scene{ padding-right:0; }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu .rail-jeux{
right:max(14px, calc((100vw - 1680px) / 2 + 14px)); top:calc(50% - 30px); }
}
/* Connexions occupe davantage le cadre */
.cx-jeu{ max-width:min(1500px, 94cqw); gap:clamp(10px,1.6cqh,18px); }
.cx-grille{ gap:clamp(8px,1.2cqw,14px); }
.cx-mot{ min-height:clamp(64px, 12cqh, 120px); font-size:clamp(15px,2.2cqw,28px); border-radius:14px; }
.cx-bande{ padding:clamp(10px,1.8cqh,18px) 16px; }
.cx-bande-nom{ font-size:clamp(16px,2.4cqw,26px); }
.cx-bande-mots{ font-size:clamp(13px,1.7cqw,19px); }
@media (prefers-reduced-motion: reduce){ #vue-accueil *{ transition:none !important; animation:none !important; } }
/* ---------- 16p. Roue plus grande ---------- */
#ro-reste{ display:none; } /* le compteur de mots est retiré : place gagnée pour la roue */
.jeu-piste:has(> .roue-bloc), .jeu-piste:has(> .roue-duo){ gap:12px; padding-top:8px; padding-bottom:8px; }
/* ---------- 16q. Nom du jeu, fil d'Ariane, Réutiliser, Boîtes ---------- */
#bo-reste{ display:none; }
.carte > button[data-ouvrir] .txt-carte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.carte > button[data-ouvrir] .jeu-nom{ font-family:var(--police-andika); font-size:13px; color:var(--efface);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.carte > button[data-ouvrir] .txt-carte .nom{ -webkit-line-clamp:2; line-clamp:2; }
.fil [data-saut]{ cursor:pointer; border-radius:8px; padding:2px 6px; }
.fil [data-saut]:hover, .fil [data-saut]:focus-visible{ color:var(--p-rouge); text-decoration:underline; }
.btn-reutiliser{ position:fixed; left:20px; bottom:20px; z-index:60; padding:12px 18px; }
/* ---------- 16r. Fenêtre du mot (Mots-croisés) sur fond blanc ---------- */
.mc-mot{ background:var(--bloc); border:2px solid var(--voile-fort); border-radius:16px; padding:10px 12px 12px;
box-shadow:0 12px 28px rgba(31,36,48,.18); }
/* ---------- 16s. Lien partagé (mode élève) au nouveau visuel ---------- */
body.mode-eleve #outils-cour, body.mode-eleve #fil-ariane{ display:none !important; }
body.mode-eleve .eleve-jeux{ margin-top:8px; }
body.mode-eleve .tuile-jeu--famille{ min-height:130px; }
/* ---------- 16t. Roue sur toute la hauteur (commandes à côté) ---------- */
.jeu-piste.roue-cote{ display:grid !important; grid-template-columns:auto minmax(240px,340px);
grid-template-rows:1fr auto auto 1fr; grid-template-areas:"roue ." "roue bouton" "roue res" "roue .";
column-gap:clamp(56px,6cqw,96px) !important; row-gap:16px !important; align-items:center; justify-content:center; width:100%; height:100%; }
.jeu-piste.roue-cote > .roue-bloc{ grid-area:roue; margin:0 !important; }
.jeu-piste.roue-cote > #ro-tourner, .jeu-piste.roue-cote > .bouton{ grid-area:bouton; justify-self:stretch; }
.jeu-piste.roue-cote > #ro-resultat{ grid-area:res; min-height:0 !important; }
/* ---------- 16u. Dossiers : liseré stable + actions en coin (comme les collections) ---------- */
.carte{ border-top-color:var(--bord, var(--voile-fort)); }
.actions-carte[data-veil-type="dossier"]{ inset:auto; top:10px; right:10px; left:auto; bottom:auto; width:auto;
padding:4px; gap:6px; flex-wrap:nowrap; border-radius:999px; background:var(--bloc);
border:var(--trait-fin) solid var(--voile-fort); cursor:default; z-index:4; }
.actions-carte[data-veil-type="dossier"] button{ width:30px; height:30px; border-radius:50%; box-shadow:none;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); color:var(--efface); }
.actions-carte[data-veil-type="dossier"] button:hover{ transform:none; color:var(--ligne); border-color:var(--ligne); box-shadow:none; }
.actions-carte[data-veil-type="dossier"] button.jouer{ display:none; }
.actions-carte[data-veil-type="dossier"] button.oter:hover{ background:var(--p-rouge); color:#fff; border-color:transparent; }
@media (hover:none){ .actions-carte[data-veil-type="dossier"]{ opacity:1; pointer-events:auto; } }
/* ---------- 16v. Survol des tuiles sans artefact (Safari) ----------
Safari repeint mal une tuile arrondie à overflow:hidden quand sa bordure
change de couleur PENDANT qu'elle se déplace : des pans de couleur
apparaissent. Au survol, seule la tuile bouge ; la bordure reste fixe. */
.carte, #casier-container .cs-carte, .tuile-jeu--famille, .tuto-carte, .choix-partage-btn{
transition:transform .14s ease, box-shadow .14s ease; transform:translateZ(0); backface-visibility:hidden;
-webkit-backface-visibility:hidden; isolation:isolate; }
.carte:hover, .carte:focus-within{ border-color:#ece8de; border-top-color:var(--bord, var(--voile-fort));
border-left-width:var(--trait-fin); transform:translate3d(0,-3px,0); }
body[data-theme="nuit"] .carte:hover, body[data-theme="nuit"] .carte:focus-within{ border-color:var(--voile-fort); border-top-color:var(--bord, var(--voile-fort)); }
#casier-container .cs-carte:hover{ transform:translate3d(0,-3px,0); }
.tuile-jeu--famille:hover, .tuto-carte:hover{ transform:translate3d(0,-3px,0); }
/* ---------- 16w. Démarrage sans « flash » de la cour ----------
index.html contient la cour : sans ceci, on la voyait avant que app.js
n'affiche la page d'accueil. La page reste masquée jusqu'à ce que app.js pose
body[data-pret] (secours : elle se dévoile seule au bout de 6 s). */
body:not([data-pret]) > *{ opacity:0; animation:pg-secours .01s 6s forwards; }
@keyframes pg-secours{ to{ opacity:1; } }
@keyframes pg-entree{ from{ opacity:0; } }
@media (prefers-reduced-motion:no-preference){
body[data-pret] > .cour, body[data-pret] > .bas{ animation:pg-entree .18s ease-out; }
}
/* ---------- 16x. Classement en ligne (fenêtre de fin + modale de partage) ---------- */
.cll-attente{ text-align:center; padding:22px; font-size:34px; }
.cll-qui{ margin:10px 0 6px; font-size:17px; }
.cll-vide{ color:var(--efface); font-size:14px; margin:8px 0 0; }
.cll-liste{ list-style:none; margin:10px 0 0; padding:0; max-height:42vh; overflow-y:auto; }
.cll-ligne{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; }
.cll-ligne:nth-child(odd){ background:var(--sol-2); }
.cll-ligne.cll-moi{ background:color-mix(in srgb, var(--p-jaune) 30%, transparent); outline:2px solid var(--p-jaune); outline-offset:-2px; }
.cll-rang{ width:1.9em; flex:none; text-align:center; font-size:17px; }
.cll-nom{ flex:1; min-width:0; font-family:var(--titre); font-weight:700; font-size:17px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cll-temps{ flex:none; color:var(--efface); font-size:13px; font-variant-numeric:tabular-nums; }
.cll-pts{ flex:none; font-family:var(--titre); font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; }
.cll-initiales{ display:flex; gap:14px; justify-content:center; margin:12px 0; }
.cll-initiales label{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:14px; color:var(--efface); }
.cll-initiales input{ width:64px; height:64px; text-align:center; text-transform:uppercase;
font-family:var(--titre); font-weight:800; font-size:32px; border-radius:14px;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); color:var(--ligne); }
.cll-initiales input:focus{ outline:3px solid var(--p-bleu); outline-offset:1px; }
.cll-pseudo{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px;
padding:12px; border-radius:14px; background:var(--sol-2); }
.cll-pseudo[hidden]{ display:none; }
.cll-pseudo strong{ font-family:var(--titre); font-size:24px; color:var(--p-bleu); }
.cll-prof{ margin:0 0 12px; padding:10px 12px; border-radius:12px; background:var(--sol-2); }
.cll-prof[hidden]{ display:none; }
.cll-prof-tete{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cll-prof-tete span{ flex:1; color:var(--efface); font-size:13px; }
.cll-prof .cll-liste{ max-height:24vh; }
.cll-prof .cll-ligne:nth-child(odd){ background:var(--bloc); }
/* ==========================================================================
05/10/2026 — icônes de titre, feedbacks progressifs, dictée en cases,
Memor'image
========================================================================== */
.ico-titre{ display:inline-flex; vertical-align:-0.18em; margin-right:.3em; }
.tuto-jeu-em .icone-pg{ color:var(--p-bleu); }
.fb-ligne{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 8px; }
.fb-bornes{ flex:none; font-size:14px; white-space:nowrap; }
.champ .fb-ligne input[type=number]{ width:64px; padding:8px 6px; text-align:center; font:inherit;
border:2px solid var(--voile-fort); border-radius:10px; background:var(--sol-2); color:inherit; }
.champ .fb-ligne input[type=text]{ flex:1 1 220px; min-width:0; width:auto; }
.fb-suppr{ flex:none; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
background:var(--voile); color:inherit; font-size:15px; }
.fb-suppr:hover{ background:color-mix(in srgb, var(--ko) 22%, transparent); }
.dc-cases{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 8px; width:min(100%,1000px); margin:0 auto; }
.dc-case{ flex:0 1 auto; width:clamp(84px,13cqw,170px); min-width:0; box-sizing:border-box; text-align:center;
font:inherit; font-size:clamp(17px,2.2cqw,26px); padding:10px 8px;
border-radius:12px; border:2px solid var(--voile-fort); background:var(--sol-2); color:inherit; }
.dc-case:focus{ outline:3px solid var(--p-bleu); outline-offset:2px; }
.dc-case[data-ok="1"]{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 20%, var(--sol-2)); }
.dc-case[data-ok="0"]{ border-color:var(--ko); background:color-mix(in srgb, var(--ko) 20%, var(--sol-2)); text-decoration:line-through var(--ko); }
.rm-vitrine{ height:56cqh; display:grid; place-items:center; }
.rm-vedette{ height:100%; max-width:92cqw; aspect-ratio:1; object-fit:contain; box-sizing:border-box; background:#fff;
border-radius:var(--rayon-s); border:var(--trait-fin) solid var(--voile-fort); padding:10px;
box-shadow:var(--decal); animation:rm-entre .25s ease both; }
.rm-vedette.sort{ animation:rm-sort .22s ease both; }
@keyframes rm-entre{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }
@keyframes rm-sort{ to{ opacity:0; transform:scale(.9); } }
.rm-pastilles{ display:flex; gap:8px; justify-content:center; margin:12px 0 0; }
.rm-pastilles i{ width:12px; height:12px; border-radius:50%; background:var(--voile-fort); }
.rm-pastilles i.vu{ background:var(--p-bleu); }
.rm-grille{ display:grid; grid-template-columns:repeat(var(--c,4),minmax(0,1fr)); gap:clamp(6px,1.2cqw,14px);
margin:0 auto 12px; box-sizing:border-box; }
.rm-tuile{ position:relative; aspect-ratio:1; padding:0; overflow:hidden; cursor:pointer; background:#fff;
border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s); box-shadow:var(--decal); }
.rm-tuile img{ display:block; width:100%; height:100%; object-fit:contain; padding:6%; box-sizing:border-box; }
.rm-tuile:focus-visible{ outline:3px solid var(--p-bleu); outline-offset:2px; }
.rm-tuile[data-etat]{ cursor:default; }
.rm-tuile[data-etat="ok"]{ outline:4px solid var(--ok); outline-offset:-2px; }
.rm-tuile[data-etat="donnee"]{ outline:4px dashed var(--efface); outline-offset:-2px; }
.rm-tuile[data-etat="donnee"] img{ opacity:.6; }
.rm-tuile.rm-faux{ outline:4px solid var(--ko); outline-offset:-2px; animation:rm-secoue .38s; }
@keyframes rm-secoue{ 20%{ transform:translateX(-6px); } 50%{ transform:translateX(6px); } 80%{ transform:translateX(-3px); } }
.rm-rang{ position:absolute; top:4%; left:4%; min-width:1.75em; height:1.75em; padding:0 .3em; border-radius:999px;
display:grid; place-items:center; background:var(--ok); color:#fff; font-weight:700; font-size:clamp(13px,1.8cqw,22px); }
.rm-tuile[data-etat="donnee"] .rm-rang{ background:var(--efface); }
/* ==========================================================================
05/10/2026 (2) — en-tête, export/import, dictée, tri libre, cadre de jeu
========================================================================== */
/* En-tête : Tutoriels est un lien texte comme ses voisins ; Nuage connecté = nuage vert seul. */
.outils #btn-tuto.lien-entete{ width:auto; height:auto; padding:10px 8px; }
.bouton.bouton--nuage-ok{ color:var(--e-vert); border-color:var(--e-vert); background:var(--bloc); }
.bouton--nuage-ok::after{ display:none; }
@media (max-width:760px){ .outils #btn-tuto.lien-entete{ padding:8px 2px; } }
@media (max-width:420px){ .outils #btn-tuto.lien-entete{ display:none; } }
/* Cadre de jeu moderne conservé quand la fenêtre rétrécit : marges réduites. */
@media (min-width:600px) and (max-width:1023px) and (min-height:480px){
body:not(.mode-integre):not(.mode-cadre) #vue-jeu:not([hidden]){ padding:0 12px 12px; }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu .jeu-scene{ border-radius:18px; }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu .jeu-hud{ padding:10px 2px 0; }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu[data-rail="1"]:not([hidden]){ padding-right:12px; } /* rail masqué sous 1000px */
}
@media (min-width:1001px) and (max-width:1023px) and (min-height:480px){
body:not(.mode-integre):not(.mode-cadre) #vue-jeu[data-rail="1"]:not([hidden]){ padding-right:70px; }
body:not(.mode-integre):not(.mode-cadre) #vue-jeu .rail-jeux{ right:8px; }
}
/* Exporter / Importer */
.tr-outils{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 8px; }
.tr-compte{ font-size:14px; color:var(--efface); }
.tr-arbre{ max-height:min(46vh,420px); overflow:auto; border:2px solid var(--voile-fort); border-radius:14px; padding:8px 12px; }
.tr-liste{ list-style:none; margin:0; padding:0; }
.tr-liste .tr-liste{ margin-left:13px; padding-left:14px; border-left:2px solid var(--voile); }
.tr-ligne{ display:flex; align-items:center; gap:9px; padding:6px 2px; cursor:pointer; min-width:0; }
.tr-ligne input{ flex:none; width:18px; height:18px; accent-color:var(--p-bleu); }
.tr-ic{ flex:none; display:inline-flex; color:var(--p-bleu); }
.tr-dossier > .tr-ligne .tr-ic{ color:var(--p-jaune); }
.tr-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-type{ flex:none; font-size:12px; color:var(--efface); border:1px solid var(--voile-fort); border-radius:999px; padding:1px 8px; }
/* Dictée : correction centrée, détachée des boutons */
.dc-correction{ align-items:center; margin:18px auto 22px; }
.dc-correction .dc-ligne{ justify-content:center; align-items:center; }
.dc-correction .dc-etiq{ min-width:0; margin-right:6px; }
.dc-cases + .dc-correction{ margin-top:18px; }
/* Tri : plus d'encadré autour des étiquettes à trier */
.tri-libre{ border:0; background:transparent; }
.tri-libre.app-vise{ background:transparent; }
/* Grand ménage : bandeau de la cour et liste à cocher */
.menage-bandeau{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; }
.menage-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.menage-tous{ display:flex; gap:8px; margin:4px 0 8px; }
.menage-ligne{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.menage-ligne input{ width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--p-bleu); }
.menage-etq{ font-size:11px; padding:1px 7px; border-radius:99px; background:color-mix(in srgb, var(--e-jaune) 30%, transparent); }
/* Fond transparent (intégration dans Genially, un ENT…) : posé sur par
appliquerFondScene() pendant le jeu. La scène garde sa couleur éventuelle
(style en ligne) ; tout ce qui est derrière s'efface. */
html.fond-transparent{ color-scheme:normal; }
html.fond-transparent, html.fond-transparent body, html.fond-transparent #vue-jeu{
background:transparent !important; background-image:none !important; }
html.fond-transparent #vue-jeu .jeu-scene{ box-shadow:none; border-color:transparent; }
html.fond-transparent .decor{ display:none !important; }
/* Fond choisi par l'enseignant peu contrasté, ou inconnu : double liseré
blanc + noir autour des boutons du jeu (contraste d'au moins 3:1 garanti). */
#vue-jeu[data-anneau="1"] .jeu-scene .bouton{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #1d2027 !important; }
#vue-jeu[data-anneau="1"] .jeu-scene .bouton--fantome{ background:var(--bloc, #fff); color:var(--ligne, #1d2027); }
/* Apparence choisie par l'enseignant (préau ▸ Apparence du jeu), posée par
appliquerApparence(). :where() garde une spécificité faible : les couleurs
« juste / faux » des jeux restent prioritaires. Le texte (--st-*-encre) est
noir ou blanc, au plus contrasté. */
:where(#vue-jeu[data-st-etq="1"]) :is(.app-etq, .rep-saisie, .ord-item, .cx-mot){
background:var(--st-etq); color:var(--st-etq-encre); border-color:var(--st-etq-encre); }
:where(#vue-jeu[data-st-carte="1"]) :is(.mcarte .avant, .fc-face, .deck-face, .dm-domino){
background:var(--st-carte); color:var(--st-carte-encre); }
:where(#vue-jeu[data-st-bouton="1"]) .jeu-scene .bouton--valider{
background:var(--st-bouton); border-color:var(--st-bouton); color:var(--st-bouton-encre); }
:where(#vue-jeu[data-st-police="1"]) :is(.app-etq, .app-mot, .rep-saisie, .ord-item, .cx-mot, .mcarte .avant, .me-mot, .fc-face, .deck-face, .dm-half){
font-family:var(--st-police); }
.ap-ligne{ align-items:center; margin:6px 0; font-size:13.5px; }
.ap-ligne select{ margin-left:auto; }
/* Aperçu du fond transparent sur le site (fond noir rayé posé en JS) : une
mention discrète rappelle que ce noir n'apparaîtra pas dans Genially. */
#vue-jeu[data-apercu-transparent="1"] .jeu-scene::after{
content:"Aper\00E7u : fond transparent"; position:absolute; left:12px; bottom:10px; z-index:50;
pointer-events:none; font:600 12px/1 var(--texte); color:#fff; background:rgba(0,0,0,.55);
padding:6px 10px; border-radius:999px; letter-spacing:.02em; }
/* Burger du mode intégré (lien partagé, Genially…) : pastille blanche cernée de
foncé, visible sur n'importe quel fond, sombre ou transparent compris. */
body.mode-integre .jeu-burger{
background:#fff !important; border:2px solid #111 !important; border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,.35) !important; }
body.mode-integre .jeu-burger::before{ left:7px; right:7px; top:9px; }
/* Trier : la scène remplit déjà le cadre (trier.js) ; la mise à l'échelle
automatique (Scene.ajuster, au chargement d'une image ou d'une police)
rapetissait tout, étiquettes comprises. Elle ne s'applique plus ici. */
.jeu-piste:has(> .tri-scene){ transform:none !important; }
/* Vérifier / Valider jamais collé au bord de la scène : la barre qui les porte
garde une marge sûre en dessous et sur les côtés (elle s'ajoute à celle de la
piste ; place aussi pour l'ombre du bouton et le liseré d'accessibilité). */
.jeu-scene :is(.app-barre, .rep-barre, .ap-barre, .cx-boutons){
margin-bottom:max(18px, 2.4cqh); padding-inline:14px; box-sizing:border-box; max-width:100%; }
/* Deux roues : TOUJOURS côte à côte (plus de passage à la ligne qui empilait
la 2ᵉ roue sous la 1ʳᵉ), titres alignés en bas sur une même rangée, donc
les deux roues commencent à la même hauteur quelle que soit la longueur des
titres. La taille vient de roue.js (largeur réelle disponible). */
.roue-duo{ display:grid; grid-template-rows:auto auto; grid-auto-flow:column; grid-auto-columns:auto;
justify-content:center; align-items:end; column-gap:clamp(16px,3cqw,44px); row-gap:18px;
flex-wrap:nowrap; width:100%; }
.roue-duo .roue-col{ display:contents; }
.roue-duo .roue-titre{ justify-self:center; align-self:end; text-align:center;
max-width:var(--roue-taille, 360px); overflow-wrap:anywhere; }
.roue-duo .roue-bloc{ align-self:start; }
/* Tirage à deux roues : la roue s'assombrit et le mot tiré apparaît en son
milieu (.roue-voile, posé par roue.js). Seul « Termes traités » reste
dessous : sa place est réservée, rien ne bouge ni ne déborde. */
.roue-res-duo{ min-height:clamp(52px,7cqh,64px); width:100%; display:flex; align-items:center; justify-content:center; }
.roue-voile{ position:absolute; inset:0; z-index:2; border-radius:50%;
background:rgba(14,16,22,.8); display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:clamp(6px,1.2cqh,12px); padding:12%; box-sizing:border-box; text-align:center;
animation:roue-voile-in .35s ease-out; }
.roue-voile[hidden]{ display:none; }
.roue-duo .roue-fleche{ z-index:3; } /* la flèche reste visible par-dessus */
.roue-voile .mot-geant{ font-size:calc(var(--roue-taille, 300px) * var(--k, .1)) !important; color:#fff;
line-height:1.1; overflow-wrap:anywhere; max-width:100%; margin:0;
text-shadow:0 2px 8px rgba(0,0,0,.55); }
.roue-voile .roue-tire-img{ max-width:70%; max-height:60%; padding:6px; }
@keyframes roue-voile-in{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .roue-voile{ animation:none; } }
/* ==========================================================================
17. CONFORT DE JEU ET ACCESSIBILITÉ (audit d'octobre 2026)
========================================================================== */
/* Tablettes et TBI : pas de zoom au double tap, pas de sélection de texte ni de
menu « Enregistrer l'image » pendant une partie rapide (taupe, memory…).
:where() = spécificité nulle : les étiquettes à glisser gardent leur
touch-action:none, déclaré plus haut. Les champs de saisie restent sélectionnables. */
#vue-jeu .jeu-scene{ -webkit-user-select:none; user-select:none;
-webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
#vue-jeu .jeu-scene :is(input, textarea, select, [contenteditable="true"]){ -webkit-user-select:text; user-select:text; }
:where(#vue-jeu) :where(button, .mcarte, .boite, [role="button"]){ touch-action:manipulation; }
/* Juste / faux : un signe en plus de la couleur (RGAA 3.1 ; élèves daltoniens). */
:is(.app-etq.app-bon, .app-zone.app-bon .app-etq, .app-case.app-bon .app-etq)::after{ content:"\00a0\2714"; }
:is(.app-etq.app-faux, .app-zone.app-faux .app-etq, .app-case.app-faux .app-etq)::after{ content:"\00a0\2718"; }
/* Champs de recherche sans contour propre : le focus se voit sur leur cadre (RGAA 10.7). */
.tuto-recherche:focus-within, .cs-cherche:focus-within{ outline:3px solid var(--p-bleu); outline-offset:2px; }
/* Textes posés à même la scène (mot tiré, compteurs, titres des roues) : sur un
fond illustré ou transparent, un panneau blanc les rend lisibles de loin.
data-fond-image est posé par appliquerFondScene(). */
#vue-jeu[data-fond-image="1"] .jeu-scene :is(.mot-geant, .indice-geant, .progression, .app-compte, .roue-titre):not(:empty):not(.roue-voile *):not(.fc-face *){
background:var(--bloc); color:var(--encre); width:fit-content; margin-inline:auto;
padding:.15em .6em; border-radius:12px; box-shadow:var(--decal); }
/* Écrans tactiles : boutons des jeux d'au moins 44 px (un doigt d'enfant rate
une cible de 26-32 px). La loupe des cartes de Memory reste plus petite pour
ne pas masquer le mot. */
@media (pointer:coarse){
.jeu-scene :is(.chr-fleches button, .ord-fleches button, .rf-fleches button, .rep-zbtn, .mc-ecoute, .mc-mot-btn){
min-width:44px; min-height:44px; }
.jeu-scene .me-loupe{ width:36px; height:36px; }
}
/* Roue : un mot qui serait tête en bas (moitié gauche) fait un demi-tour à
l'arrêt de la roue (roue.js, orienter()). */
.roue-etiquette span{ transition:transform .35s ease; }
.roue-etiquette--inv span{ transform:rotate(180deg); }
/* Associer image / texte : une paire formée est un peu plus petite et se range
en haut à gauche du canevas (associer.js, rangerPaires) ; elle y glisse. */
.ap-canvas .ap-carte.ap-lie.ap-image{ width:calc(var(--ap-img, 140px) * .74); height:calc(var(--ap-img, 140px) * .74); }
.ap-canvas .ap-carte.ap-lie.ap-texte{ min-width:0; max-width:calc(var(--ap-max, 320px) * .8); padding:.16em .5em; }
.ap-canvas .ap-carte.ap-lie.ap-texte .ap-mot{ font-size:calc(var(--ap-txt, 19px) * .8); }
.ap-canvas .ap-carte.ap-glisse{ transition:left .35s ease, top .35s ease, box-shadow .12s, background .15s, border-color .15s; }
@media (prefers-reduced-motion:reduce){ .ap-canvas .ap-carte.ap-glisse{ transition:none; } }
/* Ordre des dossiers : petites flèches en bas à gauche de la carte (visibles au
survol, au clavier, et toujours sur écran tactile). */
.carte .dossier-ordre{ position:absolute; left:10px; bottom:10px; display:flex; gap:6px; z-index:4;
opacity:0; pointer-events:none; transition:opacity .15s; }
.enveloppe:hover .dossier-ordre, .enveloppe:focus-within .dossier-ordre{ opacity:1; pointer-events:auto; }
@media (hover:none){ .carte .dossier-ordre{ opacity:1; pointer-events:auto; } }
.dossier-ordre button{ width:30px; height:30px; padding:0; border-radius:50%; display:grid; place-items:center;
font-size:13px; line-height:1; cursor:pointer; box-shadow:none;
border:var(--trait-fin) solid var(--voile-fort); background:var(--bloc); color:var(--efface); }
.dossier-ordre button:hover, .dossier-ordre button:focus-visible{ color:var(--ligne); border-color:var(--ligne); }
@media (pointer:coarse){ .dossier-ordre button{ width:40px; height:40px; } }
/* ==========================================================================
18. TEXTE À TROUS (jeux/texte-a-trous.js) et son éditeur dans le préau
========================================================================== */
.tat-texte{ width:min(100%, 72ch); margin:0 auto; text-align:left; background:var(--bloc); color:var(--encre);
border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon); box-shadow:var(--decal);
padding:clamp(14px,2.4cqw,30px) clamp(16px,3cqw,40px); font-size:clamp(18px,2.3cqw,30px); line-height:2.15;
max-height:64cqh; overflow:auto; overflow-wrap:break-word; }
.tat-champ, .tat-menu, .tat-case, .tat-bascule{ font:inherit; font-weight:700; color:var(--encre);
vertical-align:baseline; line-height:1.25; border-radius:8px; margin:0 .12em; }
.tat-champ{ width:calc(var(--l, 6) * 0.62em + 1em); max-width:100%; padding:.05em .35em; text-align:center;
border:0; border-bottom:3px solid var(--p-bleu); background:color-mix(in srgb, var(--p-bleu) 8%, var(--bloc)); }
.tat-champ::placeholder{ color:color-mix(in srgb, var(--encre) 38%, transparent); font-weight:400; letter-spacing:.06em; }
.tat-champ:focus{ outline:3px solid var(--p-bleu); outline-offset:2px; }
.tat-menu{ padding:.05em .3em; border:2px solid var(--p-bleu); background:var(--bloc); max-width:100%; cursor:pointer; }
.tat-case{ min-width:calc(var(--l, 6) * 0.62em + 1em); min-height:1.4em; padding:.02em .45em; cursor:pointer;
border:2px dashed var(--p-bleu); background:color-mix(in srgb, var(--p-bleu) 6%, var(--bloc)); }
.tat-case.tat-plein{ border-style:solid; background:color-mix(in srgb, var(--p-jaune) 30%, var(--bloc)); }
.tat-bascule{ padding:.02em .5em; cursor:pointer; border:2px solid var(--e-violet, #6b3fa0);
background:color-mix(in srgb, var(--e-violet, #6b3fa0) 10%, var(--bloc)); }
.tat-bascule::after{ content:" \21BB"; font-size:.7em; opacity:.6; }
:is(.tat-champ, .tat-menu, .tat-case, .tat-bascule).tat-ok{ border-color:var(--ok); border-style:solid;
background:color-mix(in srgb, var(--ok) 16%, var(--bloc)); color:var(--encre); opacity:1; cursor:default; }
:is(.tat-champ, .tat-menu, .tat-case, .tat-bascule).tat-ko{ border-color:var(--ko); border-style:solid;
background:color-mix(in srgb, var(--ko) 12%, var(--bloc)); animation:secousse .3s; }
.tat-case.tat-ok::after, .tat-bascule.tat-ok::after{ content:"\00a0\2714"; font-size:.75em; }
.tat-case.tat-ko::after{ content:"\00a0\2718"; font-size:.75em; }
.tat-banque, .tat-reserve{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 auto 12px;
width:min(100%, 72ch); }
.tat-banque-mot{ font-family:var(--craieface); font-weight:700; font-size:clamp(16px,1.9cqw,24px);
padding:.2em .7em; border-radius:999px; border:2px dashed var(--voile-fort); background:var(--bloc); }
.tat-etq{ font-family:var(--craieface); font-weight:700; font-size:clamp(17px,2cqw,26px); padding:.3em .8em;
border-radius:12px; border:2px solid var(--sur-jaune, #1d2027); background:var(--p-jaune); color:var(--sur-jaune, #1d2027);
cursor:grab; box-shadow:0 3px 0 rgba(0,0,0,.2); touch-action:manipulation; }
.tat-etq[aria-pressed="true"]{ outline:4px solid var(--e-bleu); outline-offset:2px; transform:translateY(-2px); }
.tat-texte--erreurs .tat-mot{ font:inherit; color:inherit; background:none; border:0; padding:0 .04em; margin:0;
border-radius:6px; cursor:pointer; line-height:inherit; }
.tat-texte--erreurs .tat-mot:hover{ background:color-mix(in srgb, var(--p-jaune) 35%, transparent); }
.tat-texte--erreurs .tat-mot.tat-ok{ background:color-mix(in srgb, var(--ok) 18%, transparent); font-weight:700; cursor:default; }
.tat-texte--erreurs .tat-mot.tat-ok::after{ content:"\00a0\2714"; font-size:.7em; }
.tat-texte--erreurs .tat-mot.tat-pas{ background:color-mix(in srgb, var(--ko) 18%, transparent); animation:secousse .3s; }
@media (prefers-reduced-motion:reduce){ .tat-ko, .tat-pas{ animation:none !important; } }
/* Préau : éditeur du texte à trous */
.tt-texte{ width:100%; min-height:180px; font:inherit; font-size:16px; line-height:1.6; padding:10px 12px;
border:var(--trait-fin) solid var(--voile-fort); border-radius:var(--rayon-s); background:var(--bloc); color:var(--ligne); resize:vertical; }
.tt-outils{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0; }
#tt-cliquer.actif{ background:var(--p-bleu); color:#fff; border-color:var(--p-bleu); }
.tt-apercu{ padding:12px 14px; border-radius:var(--rayon-s); background:var(--sol-2); line-height:2; font-size:16px; }
.tt-apercu .tt-trou{ background:color-mix(in srgb, var(--p-jaune) 55%, transparent); color:inherit; padding:.05em .35em; border-radius:6px; font-weight:700; }
.tt-apercu .tt-trou small{ font-size:.7em; opacity:.7; margin-left:.2em; }
.tt-apercu .tt-mot{ font:inherit; background:none; border:1px dashed transparent; border-radius:6px; padding:0 .15em; cursor:pointer; color:inherit; }
.tt-apercu .tt-mot:hover, .tt-apercu .tt-mot:focus-visible{ border-color:var(--p-bleu); background:color-mix(in srgb, var(--p-bleu) 10%, transparent); }
.tt-apercu .tt-mot.tt-trou{ border-style:solid; border-color:transparent; }
/* Visionneuse d'image (indices des Mots-croisés, zooms) : AU-DESSUS DE TOUT (le panneau
des définitions des Mots-croisés est à 500), et l'image remplit l'écran d'emblée,
proportions gardées, même si c'est une petite vignette. */
.visio{ z-index:2147483000; }
.visio-img{ width:94vw; height:calc(100dvh - 92px); max-width:none; max-height:none; object-fit:contain; }
.visio:fullscreen{ background:#0f1116; }
.visio:fullscreen .visio-img{ width:98vw; height:calc(100vh - 80px); }
/* Partage : ligne « Classement en ligne » et son bouton ⓘ (liste des jeux compatibles). */
.pc-cl-ligne{ display:flex; align-items:flex-start; gap:8px; margin:10px 0; }
.pc-cl-ligne .pc-opt{ flex:1; display:block; margin:0; }
.pc-indispo{ opacity:.55; }
.info-i{ flex:none; width:26px; height:26px; border-radius:50%; padding:0; display:grid; place-items:center;
font:italic 700 15px/1 Georgia, "Times New Roman", serif; cursor:pointer;
border:2px solid var(--p-bleu); color:var(--p-bleu); background:var(--bloc); }
.info-i[aria-expanded="true"]{ background:var(--p-bleu); color:#fff; }
@media (pointer:coarse){ .info-i{ width:36px; height:36px; } }
/* Corbeille (72 h) : une ligne par élément, « Restaurer » bien visible. */
.corb-liste{ list-style:none; margin:12px 0; padding:0; max-height:55vh; overflow:auto; }
.corb-liste li{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--ligne); }
.corb-txt{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.corb-actions{ display:flex; gap:6px; flex:none; }
/* Chasse aux erreurs : le chrono (rouge dans les 10 dernières secondes d'une limite) ;
éditeur et corrigé : le mot faux barré, sa correction à côté. */
.tat-chrono{ font-family:var(--craieface); font-weight:700; font-size:clamp(18px,2.4vw,26px); min-width:4.5em; font-variant-numeric:tabular-nums; }
.tat-chrono--presse{ color:var(--ko); }
.tt-apercu .tt-err s, .cor-faux{ opacity:.7; text-decoration-thickness:2px; }
.tt-apercu .tt-err small{ font-weight:700; opacity:1; font-size:.85em; }
/* ---- Myster'Image : l'image se découvre, la jauge de temps descend ---- */
.my-cadre{ display:flex; justify-content:center; margin:6px auto 0; }
.my-toile{ display:block; width:min(86cqw, calc(54cqh * var(--r,1.5))); aspect-ratio:var(--r,1.5);
border-radius:14px; background:#3a4152; box-shadow:0 10px 26px rgba(40,50,70,.25); }
.my-temps{ width:min(86cqw, 640px); height:10px; margin:12px auto 0; border-radius:99px;
background:rgba(43,47,58,.14); overflow:hidden; }
.my-jauge{ height:100%; width:100%; border-radius:99px; background:linear-gradient(90deg,#ffd36e,#f2604f); }
.my-actions, .my-saisie{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; margin-top:14px; }
.my-saisie[hidden]{ display:none; }
.my-stop{ font-size:clamp(17px,2.2cqw,24px); padding:14px 30px; }
.my-chrono{ font-variant-numeric:tabular-nums; font-weight:700; font-size:clamp(16px,2cqw,22px); }
.my-saisie .rep-champ{ width:min(60cqw, 360px); font-size:clamp(17px,2.2cqw,24px); }
.my-message{ min-height:1.4em; margin:12px auto 0; text-align:center; font-size:clamp(16px,2cqw,22px); }
.my-message b{ font-size:1.25em; }
.my-message--ok{ color:var(--e-vert, #2a9d63); }
.my-message--rate{ color:var(--e-rouge, #cc3326); }
/* Téléphone à l'horizontale : la scène de « Trousse pour un » prend la hauteur
de l'écran, sans minimum (les tailles suivent déjà cqh). */
@media (max-height:520px){
.tp-scene{ min-height:0; }
.tp-tableau.tp-tableau--img{ top:max(4%, 40px); }
.tp-tableau--img .tp-tableau-img{ width:min(56cqw, calc(26cqh * var(--r,1))); }
}