:root {
  --fond: #fff7ec; --carte: #ffffff; --texte: #2d2a3e; --doux: #77708a; --bord: #eadfce;
  --accent: #ff6f91; --accent-2: #5b8def; --bon: #2fb36d; --mauvais: #e5534b; --jaune: #ffd166;
  --rayon: 22px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--fond); color: var(--texte); font: 18px/1.4 "Segoe UI", system-ui, "Comic Sans MS", sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; border-radius: 18px; background: var(--carte); padding: 12px 22px; box-shadow: 0 4px 0 var(--bord), 0 6px 14px rgba(0,0,0,.06); transition: transform .1s, box-shadow .1s; }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--bord); }
button:disabled { cursor: default; opacity: .55; }
button.principal { background: var(--accent); color: #fff; box-shadow: 0 4px 0 #d94f73; }
button.petit { padding: 8px 14px; font-size: .9em; }
.rangee { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

/* ---------- menus ---------- */
.menu { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.menu h1 { font-size: 2rem; margin: 6px 0 18px; }
.menu h2 { font-size: 1.3rem; margin: 26px 0 12px; color: var(--doux); }
.entete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.entete h1 { margin: 0; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.carte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 18px 12px; border-radius: var(--rayon); font-size: 1.15rem; font-weight: 600; text-align: center; }
.carte small { font-weight: 400; color: var(--doux); font-size: .85rem; }
.carte.bientot { opacity: .45; }
.carte .etiquette { position: absolute; top: 8px; right: 10px; font-size: .7rem; background: var(--jaune); border-radius: 10px; padding: 2px 8px; font-weight: 600; }
.carte .etiquette.ok { background: var(--bon); color: #fff; }
.carte .numero { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-2); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
.carte.revision .numero { background: var(--accent); }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 2rem; margin-bottom: 6px; }
.carte-ajout { font-size: 2.4rem; color: var(--accent); }
#form-reglages { margin: 18px 0; background: var(--carte); border-radius: var(--rayon); padding: 20px; max-width: 560px; display: grid; gap: 14px; }
#form-profil { margin-top: 22px; background: var(--carte); border-radius: var(--rayon); padding: 20px; max-width: 460px; display: grid; gap: 14px; }
#form-profil input[type=text], #form-profil input:not([type]) { font: inherit; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--bord); width: 100%; margin-top: 6px; }
fieldset { border: 2px solid var(--bord); border-radius: 14px; display: grid; gap: 8px; }

/* ---------- game ---------- */
#ecran-jeu { height: 100vh; display: grid; place-items: center; background: #2d2a3e; }
#scene-boite { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: #fff; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#barre { position: absolute; top: 1.4%; left: 1%; right: 1%; display: flex; align-items: center; gap: 1.2cqw; pointer-events: none; }
#barre > * { pointer-events: auto; }
.rond { width: 4.6cqw; height: 4.6cqw; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; font-size: 2.2cqw; display: grid; place-items: center; }
#titre-lecon { font-weight: 700; font-size: 1.9cqw; background: rgba(255,255,255,.85); border-radius: 14px; padding: .4cqw 1.2cqw; }
#points { display: flex; gap: .5cqw; flex: 1; justify-content: center; }
#points span { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: rgba(255,255,255,.7); border: 2px solid rgba(0,0,0,.12); }
#points span.fait { background: var(--bon); }
#points span.courant { background: var(--jaune); transform: scale(1.3); }
.voix-etat { font-size: 1.4cqw; background: rgba(255,255,255,.8); border-radius: 12px; padding: .2cqw .8cqw; }
.voix-etat:empty { display: none; }

#bulle { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); max-width: 62%; min-width: 26%; background: #fff; border-radius: 2.2cqw; padding: 1.2cqw 2cqw; box-shadow: 0 .5cqw 1.5cqw rgba(0,0,0,.15); text-align: center; animation: apparait .25s ease-out; }
.bulle-nom { font-size: 1.3cqw; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.bulle-cible { font-size: 3.4cqw; font-weight: 700; line-height: 1.2; margin-top: .3cqw; }
.bulle-trad { font-size: 2.2cqw; color: var(--doux); margin-top: .4cqw; }
.bulle-trad.seule { font-size: 2.6cqw; color: var(--texte); font-weight: 600; }
.mot-bon { color: var(--bon); }
.mot-faible { color: var(--mauvais); text-decoration: underline wavy; text-underline-offset: .4cqw; }
@keyframes apparait { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } }

#reponses { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: 92%; display: grid; gap: 1cqw; justify-items: center; }
.reponses-grille { display: flex; flex-wrap: wrap; gap: 1.4cqw; justify-content: center; }
.reponse { position: relative; min-width: 18cqw; min-height: 7cqw; font-size: 2.6cqw; font-weight: 700; border-radius: 2.4cqw; padding: 1cqw 3.6cqw 1cqw 2cqw; display: flex; align-items: center; gap: 1cqw; background: #fff; border: .35cqw solid #fff; }
.reponse-image { flex-direction: column; padding: 1cqw 2cqw 1.2cqw; }
.reponse-image svg { width: 8cqw; height: 7cqw; }
.reponse-son { position: absolute; top: .5cqw; right: .7cqw; font-size: 1.6cqw; opacity: .7; }
.reponse.bon { border-color: var(--bon); background: #e3f8ec; animation: rebond .4s; }
.reponse.mauvais { border-color: var(--mauvais); background: #fde8e7; animation: secoue .4s; }
.reponse.indice { border-color: var(--jaune); animation: pulse 1s infinite; }
@keyframes rebond { 50% { transform: scale(1.08); } }
@keyframes secoue { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
.zone-micro { display: flex; align-items: center; gap: 1.5cqw; }
.micro { font-size: 3cqw; font-weight: 700; padding: 1.4cqw 4cqw; border-radius: 5cqw; background: var(--accent); color: #fff; box-shadow: 0 .5cqw 0 #d94f73; animation: pulse 1.6s infinite; }
.micro.actif { background: var(--mauvais); animation: none; }
.micro-son { font-size: 2.6cqw; width: 5.6cqw; height: 5.6cqw; padding: 0; border-radius: 50%; flex: none; }
.micro-fini { font-size: 2.4cqw; font-weight: 700; padding: 1.1cqw 3cqw; border-radius: 5cqw; background: var(--bon); color: #fff; box-shadow: 0 .5cqw 0 #23905a; }
.niveau { width: 18cqw; height: 1.2cqw; background: rgba(255,255,255,.7); border-radius: 1cqw; overflow: hidden; }
.niveau > div { height: 100%; width: 0; background: var(--bon); transition: width .08s; }
#reponses .petit { font-size: 1.3cqw; opacity: .8; }
.message { background: #fff; border-radius: 1.6cqw; padding: 1cqw 2cqw; font-size: 2cqw; font-weight: 600; }
#fin { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); }
#fin button { font-size: 2.2cqw; padding: 1.2cqw 2.6cqw; }

/* objects on the stage */
.objet.cliquable { cursor: pointer; }
.objet.cliquable .objet-dessin { animation: invite 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.objet.cliquable:hover .objet-dessin { filter: drop-shadow(0 0 10px #ffd166) drop-shadow(0 0 4px #fff); }
.objet.montre .objet-dessin { filter: drop-shadow(0 0 14px #ffd166) drop-shadow(0 0 6px #ff6f91); animation: invite .9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes invite { 50% { transform: scale(1.12); } }

/* ---------- picture card and chalkboard (modifiers image / tableau) ---------- */
#panneau { position: absolute; left: 2%; top: 11%; width: 27%; height: 34%; display: grid; place-items: center; border-radius: 1.6cqw; pointer-events: none; }
#panneau.panneau-tableau { background: #2f5d46; border: .8cqw solid #9b6b3f; box-shadow: inset 0 0 2cqw rgba(0,0,0,.35), 0 .6cqw 1.2cqw rgba(0,0,0,.2); }
#panneau .craie { color: #fbfbf2; font: 700 4.4cqw/1.15 "Comic Sans MS", "Segoe Print", system-ui, sans-serif; text-align: center; padding: 0 1cqw; text-shadow: 0 0 .3cqw rgba(255,255,255,.35); word-break: break-word; }
#panneau.panneau-image { background: #fffdf6; border: .7cqw solid #d9b44a; box-shadow: 0 .6cqw 1.4cqw rgba(0,0,0,.2); }
#panneau .images { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4cqw; padding: .8cqw; }
#panneau .images span svg { width: 9cqw; height: 8cqw; }
#panneau .images.n1 span svg { width: 17cqw; height: 15cqw; }
#panneau .images.n2 span svg { width: 11cqw; height: 10cqw; }
#panneau .images.n5 span svg, #panneau .images.n6 span svg { width: 7cqw; height: 6.2cqw; }
#scene-boite.avec-panneau #bulle { left: 64%; max-width: 66%; }
.mot-moyen { color: #d98a00; }

/* candle flames flicker (church) */
.flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: flamme 1.3s ease-in-out infinite alternate; }
.flamme:nth-of-type(2n) { animation-duration: 1.7s; }
@keyframes flamme { 0% { transform: scale(1, 1); } 40% { transform: scale(.9, 1.12) rotate(-3deg); } 70% { transform: scale(1.05, .94) rotate(2deg); } 100% { transform: scale(.95, 1.06); } }

/* online saving */
.nuage { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--doux); }
.nuage small { flex-basis: 100%; }
.message-erreur { flex-basis: 100%; color: var(--mauvais); font-size: .9rem; }

/* skip / translate buttons in the speech bubble */
.bulle-passer { position: absolute; top: .6cqw; right: .8cqw; font-size: 1.6cqw; padding: .2cqw .7cqw; border-radius: 1cqw; background: #f1f3f8; border: 0; cursor: pointer; }
.bulle-traduire { margin-top: .5cqw; font-size: 1.4cqw; padding: .3cqw 1cqw; border-radius: 1cqw; background: #fff4d6; border: 2px solid #f2c94c; cursor: pointer; }
/* analog clock panel */
#panneau.panneau-horloge { background: transparent; }
#panneau .horloge { width: 100%; height: 100%; filter: drop-shadow(0 .5cqw .8cqw rgba(0,0,0,.2)); }
/* picture of the place on the menu cards */
.carte-scene { justify-content: flex-start; padding-top: 10px; }
.carte .vignette { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--rayon) - 6px); margin-bottom: 6px; background: #eef2f7; }
/* clean stage for the menu pictures (outils/vignettes.mjs) */
body.vignette #barre, body.vignette #bulle, body.vignette #reponses, body.vignette #panneau { display: none !important; }

/* review page (?relecture) */
.relecture { max-width: 1100px; }
.relecture .aide { color: var(--doux); }
.rel-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-scene { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; box-shadow: 0 1px 4px rgba(0,0,0,.08); min-width: 160px; }
.rel-scene small { color: var(--doux); }
.rel-scene.pret { background: #e7f6ea; }
.rel-scene.prevu { opacity: .5; }
.rel-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.rel-table td { padding: 6px 10px; border-bottom: 1px solid #eef0f4; vertical-align: top; }
.rel-type { width: 28px; text-align: center; }
.rel-qui { width: 110px; color: var(--accent); font-weight: 600; }
.rel-la { font-weight: 600; }
.rel-li { color: #444; }
.rel-table code { font-size: .7rem; color: #aab; }
.rel-detail td { color: #99a; font-size: .85rem; }
.rel-note { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: .85rem; border: 1px dashed #d6d9e0; border-radius: 6px; padding: 3px 6px; background: #fcfcfd; resize: vertical; }
.rel-note:not(:placeholder-shown) { border: 2px solid #f2c94c; background: #fffaf0; }
.rel-note.ok { border-color: #4caf50; }
a.bouton { display: inline-block; text-decoration: none; padding: 4px 10px; border-radius: 10px; background: #eef2f7; color: inherit; font-size: .85rem; }
.lien-parent { text-align: center; margin-top: 18px; }
.lien-parent a { color: var(--doux); }

/* progress page (parent) */
.suivi { max-width: 1000px; }
.suivi-resume { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 10px 0 20px; }
.suivi-resume > div { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 4px; }
.suivi-resume b { font-size: 1.6rem; color: var(--accent); }
.suivi-resume span { color: var(--doux); font-size: .9rem; }
.suivi-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.suivi-table td { padding: 6px 10px; border-bottom: 1px solid #eef0f4; vertical-align: middle; }
.suivi-prog tr:not(.commence) td:first-child { color: #889; }
.suivi-table small { color: var(--doux); }
.suivi-niveau { color: #aab; font-size: .8rem; width: 50px; }
.suivi-barre { display: inline-block; width: 120px; height: 10px; border-radius: 5px; background: #eef0f4; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.suivi-barre span { display: block; height: 100%; background: var(--bon); }
.suivi h3 { margin: 16px 0 6px; color: var(--doux); }

/* subjects (tags of the lessons) */
.sujets #sujets-recherche { width: 100%; font: inherit; font-size: 1.1rem; padding: 10px 14px; border-radius: 14px; border: 2px solid #e3e6ee; margin: 6px 0 10px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { padding: 8px 14px; border-radius: 20px; background: #fff; border: 2px solid #e8ebf2; font: inherit; font-size: .95rem; cursor: pointer; }
.puce:hover { border-color: var(--accent); }
.puce small { color: var(--doux); margin-left: 4px; }
.carte .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.carte .tag { font-size: .7rem; font-weight: 500; padding: 2px 8px; border-radius: 10px; background: #eef3ff; color: #4a5a8a; cursor: pointer; }
.carte .tag:hover { background: #dbe5ff; }
.carte-sujet .lieu { font-size: .75rem; color: var(--accent); }

/* entrance of the online site (js/porte.js) and invitations screen (js/invitations.js) */
.porte-boite, .inv-boite { max-width: 640px; margin: 24px auto; padding: 22px 26px; background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); line-height: 1.5; }
.porte-boite hr { border: 0; border-top: 1px solid #e6e1ee; margin: 18px 0; }
.porte-grand { font-size: 1.25rem; font-weight: 700; }
.porte-message:empty, .inv-etat:empty { display: none; }
.porte-attente { color: var(--doux); }
.inv-boite label { display: flex; gap: 8px; align-items: center; flex: 1 1 320px; }
.inv-boite input { flex: 1; min-width: 0; padding: 8px 10px; font: inherit; border: 1px solid #cfc8db; border-radius: 8px; }
.inv-liste { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.inv-lien { background: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: 0 1px 6px rgba(0, 0, 0, .07); display: grid; gap: 6px; }
.inv-lien code { overflow-wrap: anywhere; font-size: .85rem; background: #f4f1f8; padding: 3px 6px; border-radius: 6px; }
.inv-lien.inactif { opacity: .6; }
.porte > h1 { text-align: center; }

/* footnote for two accepted spellings (js/notes_bas.js) */
sup.note-et { font-size: .7em; color: #c2185b; margin-left: 1px; }
.note-bas { margin-top: .6em; font-size: .82rem; color: #6b6480; text-align: left; line-height: 1.3; }
.note-bas p { margin: .2em 0; }