/* 01/10 écran v2 — nouvel écran de lecture (maquette « carnet de Fossilou », version validée par le fondateur).
   Actif SEULEMENT quand <body> porte la classe ecran-v2 (adresse ?ecran=v2, retenu dans la progression ; ?ecran=0 pour revenir).
   Toutes les règles sont préfixées par body.ecran-v2 : sans le drapeau, ce fichier n'a aucun effet.
   On réutilise les éléments existants (#btn-mic, #btn-help, #btn-listen, #btn-done, #p-ok, #p-no, #flag-mode, #btn-skip…) :
   la mise en page passe par display:contents + grille ; seuls quelques éléments sont ajoutés par ecran_v2.js
   (points de progression, Mimot + jauge, texte parent, bouton ⋯ et son menu). */

body.ecran-v2 {
  --v2-cream:#fcf8ef; --v2-ink:#34362c; --v2-coral:#e4572e; --v2-green:#1f5c4e;
  --v2-i-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='13' rx='4'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8'/%3E%3C/svg%3E");
  --v2-i-sand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12M6 22h12M7 2v4c0 3 5 6 5 6s5-3 5-6V2M7 22v-4c0-3 5-6 5-6s5 3 5 6v4M9 6h6M9 19l3-3 3 3'/%3E%3C/svg%3E");
  --v2-i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
  --v2-i-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E");
  /* 09/10 (maquette B) : micro coupé = micro blanc barré, la barre blanche cernée de la couleur du bouton gris (#8d8f7c) ; remplace l'icône pause */
  --v2-i-mic-coupe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23fffaf1' stroke-width='1.8'%3E%3Crect x='8' y='2' width='8' height='13' rx='4'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8'/%3E%3C/g%3E%3Cpath d='M3.5 3.5l17 17' stroke='%238d8f7c' stroke-width='5.4'/%3E%3Cpath d='M3.5 3.5l17 17' stroke='%23fffaf1' stroke-width='2.2'/%3E%3C/svg%3E");
  --v2-micro-coupe:1;   /* 09/10 : marqueur lu par ecran_v2.js (cette feuille sait afficher le micro coupé : étiquette, consigne, annonce) */
  --v2-i-bulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 15a6 6 0 1 1 8 0l-1 3H9zM10 21h4M12 1V0M3 5 1 4M21 5l2-1'/%3E%3C/svg%3E");
  --v2-i-sound:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 4-6 5H2v6h3l6 5zM15 8a6 6 0 0 1 0 8M18 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
}

/* ---------- Cadre : tout l'écran tient sans défiler ---------- */
body.ecran-v2 #screen-page.active {
  height:100vh; height:100dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  width:100%; max-width:560px; margin:0 auto; background:var(--v2-cream); color:var(--v2-ink);
  font-family:"Baloo 2",Andika,sans-serif; padding-top:env(safe-area-inset-top,0px);
}
body.ecran-v2 #screen-page .page-grid,
body.ecran-v2 #screen-page .reading,
body.ecran-v2 #screen-page .controls .side { display:contents; }
body.ecran-v2 #screen-page #mm-pipe-read,
body.ecran-v2 #screen-page #round-badge,
body.ecran-v2 #screen-page #stars-badge,
body.ecran-v2 #screen-page .coach,
body.ecran-v2 #screen-page #steps,
body.ecran-v2 #screen-page #tap-hint,
body.ecran-v2 #screen-page #mic-hint,
body.ecran-v2 #screen-page #btn-skip,
body.ecran-v2 #screen-page .flags > span:not([id]) { display:none !important; }

/* ---------- Barre du haut : ✕ · titre de la page · Mimot + mini-jauge ---------- */
body.ecran-v2 #screen-page > .topbar { flex:none; height:54px; padding:6px 18px; gap:13px; justify-content:flex-start; }
body.ecran-v2 #btn-quit.quit { flex:none; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:#f0ebdf; color:#717465; font-size:0; position:relative; }
body.ecran-v2 #btn-quit.quit::after { content:""; position:absolute; inset:10px; background:currentColor; -webkit-mask:var(--v2-i-cross) center/contain no-repeat; mask:var(--v2-i-cross) center/contain no-repeat; }
body.ecran-v2 #page-title { flex:1; min-width:0; text-align:left; font-family:"Baloo 2",Andika,sans-serif; font-weight:700; font-size:17px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--v2-ink); }
body.ecran-v2 .v2-mimot { flex:none; display:flex; align-items:center; gap:8px; height:48px; }
body.ecran-v2 .v2-mimot img { width:43px; height:47px; object-fit:contain; }
body.ecran-v2 .v2-hatch { display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:10px; line-height:1; color:var(--v2-green); font-weight:700; }
body.ecran-v2 .v2-gauge { height:5px; width:32px; background:#dddccc; border-radius:10px; overflow:hidden; }
body.ecran-v2 .v2-gauge i { display:block; height:100%; background:var(--v2-green); border-radius:10px; }

/* ---------- Points de progression (1 par page) ---------- */
body.ecran-v2 .v2-dots { flex:none; height:14px; display:flex; gap:7px; align-items:flex-start; justify-content:center; }
body.ecran-v2 .v2-dots .d { width:5px; height:5px; border-radius:9px; background:#dedacb; }
body.ecran-v2 .v2-dots .d.done { background:#aab99b; }
body.ecran-v2 .v2-dots .d.now { width:21px; background:var(--v2-coral); }
body.ecran-v2 .v2-dots .echauf { font-size:12px; line-height:1; font-weight:700; color:var(--v2-coral); }

/* ---------- Image : le plus grand possible, en proportion réelle (jamais recadrée) ---------- */
body.ecran-v2 #screen-page .illu { flex:none; display:flex; justify-content:center; align-items:flex-start; padding:0 12px; min-height:0; }
body.ecran-v2 #page-img { display:block; width:auto; height:auto; max-width:100%; max-height:62vh; object-fit:contain;
  border:5px solid #fffdf8; border-radius:64px 64px 24px 24px; box-shadow:0 5px 0 #e9dfc9; background:#fffdf8; }

/* ---------- Phrase : en grand, taille ajustée par ecran_v2.js (50 px sur une ligne, 30-50 px sinon) ---------- */
body.ecran-v2 #text {
  flex:1 1 0; min-height:0; margin:0; padding:10px 14px 4px; background:none; box-shadow:none; border-radius:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-content:center; align-items:center; column-gap:.26em; row-gap:2px; overflow:hidden; text-align:center;
  font-family:Andika,sans-serif; font-weight:700; font-size:44px; line-height:1.22; letter-spacing:-.5px; color:#1f2937;
}
body.ecran-v2 #text.v2-defile { overflow-y:auto; align-content:flex-start; }   /* dernier recours (très longue page) : on défile dans la zone texte, rien n'est coupé */
body.ecran-v2 #text .w, body.ecran-v2 #text .punct { flex:none; white-space:nowrap; }
body.ecran-v2 #text .w { padding:1px .14em; border-radius:11px; }
body.ecran-v2 #text .w.tappable { border-bottom:0; padding-bottom:1px; text-decoration:underline dotted #93c5fd; text-decoration-thickness:3px; text-underline-offset:.18em; }   /* mode phrase : même taille qu'un mot normal (pas de saut de mise en page) */
body.ecran-v2 #text .w.cur { background:#fff0b0; box-shadow:0 3px 0 #edda93; }
body.ecran-v2 #text .w.ok { color:#16a34a; background:#dcfce7; box-shadow:0 3px 0 #b8e8c8; }
body.ecran-v2 #text .w.ok span { color:inherit; }
body.ecran-v2 #text .w.ok .mute { color:#86efac; }
body.ecran-v2 #text .w .s1, body.ecran-v2 #text .w .v { color:#c9461f; }
body.ecran-v2 #text .w .s2 { color:#2563eb; }
body.ecran-v2 #text .w .c { color:#1f2937; }
body.ecran-v2 #text .w.ok .s1, body.ecran-v2 #text .w.ok .s2, body.ecran-v2 #text .w.ok .v, body.ecran-v2 #text .w.ok .c { color:#16a34a; }
body.ecran-v2 #text .punct { color:#5b5d52; }
body.ecran-v2 #text .w.v2-cible-ok { outline:2px dashed #2f7a5d; outline-offset:2px; }
body.ecran-v2 #text .w.v2-cible-ko { outline:2px dashed #b4533a; outline-offset:2px; }

/* ---------- Zone micro : Aide · MICRO · Écouter (J'ai fini seulement si bloqué) ---------- */
body.ecran-v2 #screen-page .controls {
  flex:none; position:relative; height:112px; margin:0; padding:0 16px; background:none;
  display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:1fr; align-items:center; justify-items:center; column-gap:6px;
}
body.ecran-v2 #screen-page .controls::before { content:""; position:absolute; left:50%; bottom:4px; width:180px; height:96px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,#f3dfbc66,transparent 70%); pointer-events:none; }
body.ecran-v2 #screen-page .controls .mic-wrap { grid-column:2; grid-row:1; position:relative; width:88px; height:88px; display:grid; place-items:center; gap:0;
  --mic:#e4572e; --shadow:#b93820; --ring:#e4572e; }
body.ecran-v2 #screen-page .controls .mic-wrap::before,
body.ecran-v2 #screen-page .controls .mic-wrap::after { content:""; position:absolute; inset:-8px; border:1.5px solid var(--ring); border-radius:50%; opacity:.15; pointer-events:none; }
body.ecran-v2 #screen-page .controls .mic-wrap::after { inset:-16px; opacity:.08; }
body.ecran-v2 #btn-mic {
  position:relative; width:84px; height:84px; padding:0; border:0; border-radius:50%; font-size:0; color:#fffaf1;
  background:linear-gradient(145deg,#ffffff19,transparent 65%),var(--mic);
  box-shadow:0 5px 0 var(--shadow),0 10px 16px #b6492521,inset 0 2px 0 #ffffff50;
  display:grid; place-items:center; animation:none; transition:background .35s,box-shadow .35s;
}
body.ecran-v2 #btn-mic .dot { display:none; }
body.ecran-v2 #btn-mic::before { content:""; position:absolute; inset:7px; border:1px solid #ffffff26; border-radius:50%; background:none; }
body.ecran-v2 #btn-mic::after {
  content:""; position:absolute; inset:auto; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:0; font-size:0;
  background:#fffaf1; -webkit-mask:var(--v2-i-mic) center/contain no-repeat; mask:var(--v2-i-mic) center/contain no-repeat; animation:none; display:block;
}
body.ecran-v2 #btn-mic:active { transform:scale(.96); }
/* états (posés par ecran_v2.js sur #screen-page à partir des classes réelles de #btn-mic) */
body.ecran-v2 #screen-page[data-v2-etat=repos] #btn-mic { animation:v2-breathe 2.5s ease-in-out infinite; }
body.ecran-v2 #screen-page[data-v2-etat=ecoute] .mic-wrap::before,
body.ecran-v2 #screen-page[data-v2-etat=ecoute] .mic-wrap::after,
body.ecran-v2 #screen-page[data-v2-etat=voix] .mic-wrap::before,
body.ecran-v2 #screen-page[data-v2-etat=voix] .mic-wrap::after { animation:v2-ripple 2s ease-out infinite; }
body.ecran-v2 #screen-page[data-v2-etat=ecoute] .mic-wrap::after { animation-delay:1s; }
body.ecran-v2 #screen-page[data-v2-etat=voix] .mic-wrap::before,
body.ecran-v2 #screen-page[data-v2-etat=voix] .mic-wrap::after { border-width:3px; animation-duration:.65s; }
body.ecran-v2 #screen-page[data-v2-etat=voix] .mic-wrap::after { animation-delay:.32s; }
body.ecran-v2 #screen-page[data-v2-etat=voix] #btn-mic { animation:v2-voice .65s ease-in-out infinite; }
body.ecran-v2 #screen-page[data-v2-etat=reflechit] .mic-wrap { --mic:#f59e0b; --shadow:#c67b08; --ring:#e6a12d; }
body.ecran-v2 #screen-page[data-v2-etat=reflechit] .mic-wrap::before,
body.ecran-v2 #screen-page[data-v2-etat=reflechit] .mic-wrap::after { border-style:dashed; opacity:.4; animation:v2-orbit 14s linear infinite; }
body.ecran-v2 #screen-page[data-v2-etat=reflechit] #btn-mic::after { -webkit-mask-image:var(--v2-i-sand); mask-image:var(--v2-i-sand); animation:v2-sand 2.5s ease-in-out infinite; }
body.ecran-v2 #screen-page[data-v2-etat=valide] .mic-wrap { --mic:#43886d; --shadow:#28634f; --ring:#43886d; }
body.ecran-v2 #screen-page[data-v2-etat=valide] #btn-mic::after { -webkit-mask-image:var(--v2-i-check); mask-image:var(--v2-i-check); }
/* 09/10 (maquette B validée par Nabil) : micro coupé → bouton gris + micro barré, et l'étiquette « Micro coupé / Touche pour le rallumer »
   au-dessus du bouton (classe v2-coupe posée par ecran_v2.js : vraie pause ou panne, pas pendant la coche verte brève) */
body.ecran-v2 #screen-page[data-v2-etat=pause] .mic-wrap { --mic:#8d8f7c; --shadow:#6c6e5d; --ring:#8d8f7c; }
body.ecran-v2 #screen-page[data-v2-etat=pause] #btn-mic::after { -webkit-mask:none; mask:none; background:var(--v2-i-mic-coupe) center/contain no-repeat; width:40px; height:40px; margin:-20px 0 0 -20px; }
body.ecran-v2 .v2-coupe-etiq { display:none; }
body.ecran-v2 #screen-page.v2-coupe .v2-coupe-etiq { display:block; position:absolute; left:50%; bottom:calc(100% + 16px); transform:translateX(-50%); z-index:3; pointer-events:none;
  white-space:nowrap; text-align:center; background:#fffaf1; border:1.5px solid #cfd0bf; border-radius:12px; padding:3px 12px 4px;
  font:700 16px/1.15 "Baloo 2",Andika,sans-serif; color:#3f4135; box-shadow:0 2px 6px #0000000f; }
body.ecran-v2 .v2-coupe-etiq small { display:block; font:600 12px/1.2 Andika,sans-serif; color:#6b6d5c; }
body.ecran-v2 .v2-annonce { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }   /* annonce pour lecteurs d'écran */
body.ecran-v2 #screen-page.v2-coupe ~ #bandeau-micro { display:none !important; }   /* un ancien app.js (pendant une mise en ligne) : pas de doublon en haut */
@keyframes v2-breathe { 50% { transform:translateY(-4px); } }
@keyframes v2-ripple { 0% { transform:scale(.91); opacity:.4; } 100% { transform:scale(1.15); opacity:0; } }
@keyframes v2-voice { 50% { transform:scale(1.035); } }
@keyframes v2-orbit { to { transform:rotate(360deg); } }
@keyframes v2-sand { 0%,65% { transform:rotate(0); } 90%,100% { transform:rotate(180deg); } }

/* Aide (à gauche) et Écouter (à droite) : icône + petit mot, sans cadre */
body.ecran-v2 #btn-help, body.ecran-v2 #btn-listen {
  grid-row:1; width:72px; min-height:56px; margin:0; padding:0; border:0; border-radius:14px; background:transparent; box-shadow:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-family:"Baloo 2",Andika,sans-serif; font-size:0; font-weight:700; color:#777766; opacity:1;
}
body.ecran-v2 #btn-help { grid-column:1; }
body.ecran-v2 #btn-listen { grid-column:3; }
body.ecran-v2 #btn-help::before, body.ecran-v2 #btn-listen::before { content:""; width:23px; height:23px; background:#b18225; -webkit-mask:var(--v2-i-bulb) center/contain no-repeat; mask:var(--v2-i-bulb) center/contain no-repeat; }
body.ecran-v2 #btn-listen::before { background:#7f8873; -webkit-mask-image:var(--v2-i-sound); mask-image:var(--v2-i-sound); }
body.ecran-v2 #btn-help::after { content:"Aide"; font-size:12px; line-height:1.1; }
body.ecran-v2 #btn-listen::after { content:"Écouter"; font-size:12px; line-height:1.1; }
body.ecran-v2 #btn-help.thinking::before { background:#e6a12d; -webkit-mask-image:var(--v2-i-sand); mask-image:var(--v2-i-sand); }
body.ecran-v2 #btn-help:active, body.ecran-v2 #btn-listen:active { transform:scale(.96); }
/* « J'ai fini » : seulement quand l'enfant est bloqué (aide déclenchée ou 20 s sans progrès) ; il prend la place d'« Écouter » */
body.ecran-v2 #screen-page:not(.v2-bloque) #btn-done { display:none; }
body.ecran-v2 #screen-page.v2-bloque #btn-done:not(.hidden) ~ #btn-listen { display:none; }
body.ecran-v2 #btn-done { grid-column:3; grid-row:1; margin:0; min-height:44px; padding:8px 13px; border:1px solid #d3b383; border-radius:20px; background:#fff1cf; color:#77551e; font-family:"Baloo 2",Andika,sans-serif; font-weight:700; font-size:14px; white-space:nowrap; }

/* Mode « phrase » : le gros bouton (#btn-read, déplacé dans la zone micro) remplace le micro rond, même style corail */
body.ecran-v2 #screen-page .controls #btn-read {
  grid-column:2; grid-row:1; width:auto; max-width:210px; min-width:150px; min-height:64px; margin:0; padding:10px 20px; border:0; border-radius:32px;
  font-family:"Baloo 2",Andika,sans-serif; font-weight:700; font-size:17px; line-height:1.15; color:#fffaf1; white-space:normal; text-wrap:balance;
  background:linear-gradient(145deg,#ffffff19,transparent 65%),#e4572e; box-shadow:0 5px 0 #b93820,0 10px 16px #b6492521,inset 0 2px 0 #ffffff50; animation:v2-breathe 2.5s ease-in-out infinite;
}
body.ecran-v2 #screen-page .controls #btn-read.rec { background:linear-gradient(145deg,#ffffff19,transparent 65%),#c9461f; animation:v2-rec 1.4s ease-out infinite; }
body.ecran-v2 #screen-page .controls #btn-read.wait { background:linear-gradient(145deg,#ffffff19,transparent 65%),#f59e0b; box-shadow:0 5px 0 #c67b08,0 10px 16px #b6492521; opacity:1; animation:none; }
@keyframes v2-rec { 0% { box-shadow:0 5px 0 #a8391a,0 0 0 0 #e4572e55; } 100% { box-shadow:0 5px 0 #a8391a,0 0 0 16px #e4572e00; } }

/* ---------- Zone parent, discrète, tout en bas ---------- */
body.ecran-v2 #screen-page .flags {
  flex:none; position:relative; margin:0; padding:7px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:#eef2ea; border-top:1px solid #dbe3d2;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12px; color:#5d6c58;
}
body.ecran-v2 .v2-parent-txt { flex:1 1 100%; min-width:0; margin:0; font-family:Andika,sans-serif; font-size:12px; line-height:1.35; text-align:center; color:#5d6c58; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.ecran-v2 .v2-parent-txt b { color:var(--v2-green); }
body.ecran-v2 .v2-parent-txt.v2-alerte { white-space:normal; color:#9a3b2a; }
/* 09/10 (maquette B) : micro coupé → consigne pour l'adulte juste au-dessus de ses boutons ✓ (un message technique reste prioritaire) */
body.ecran-v2 .v2-parent-txt.v2-coupe-txt { display:flex; align-items:center; justify-content:center; gap:6px; white-space:normal; background:#fff1d6; border:1.5px solid #f0b429; border-radius:10px; padding:5px 8px; font-size:13px; color:#6b4300; text-wrap:balance; }
body.ecran-v2 .v2-parent-txt.v2-coupe-txt b { color:#6b4300; }
/* 18/10 (Nabil) : voix d'adulte filtrée → la ligne Parent le dit quelques secondes. Même police et même hauteur que la ligne habituelle
   (le cadre est une ombre, pas une bordure ni une marge) : la phrase et les boutons ne bougent pas. */
body.ecran-v2 .v2-parent-txt.v2-adulte-txt { color:#6b4300; background:#fff1d6; border-radius:8px; box-shadow:0 0 0 3px #fff1d6, 0 0 0 4.5px #f0b429; }
body.ecran-v2 .v2-parent-txt.v2-adulte-txt b { color:#6b4300; }
body.ecran-v2 .v2-coupe-ico { display:inline-flex; flex:none; color:#6b4300; }
/* 10/10 (chantier 3) : proposition « pages plus courtes » pour l'adulte, en haut de la zone parent, à la place du texte habituel ;
   un message technique ou la consigne « micro coupé » restent prioritaires (la proposition attend) */
body.ecran-v2 #screen-page .flags #prop-niveau { flex:1 1 100%; margin:0; padding:5px 8px; gap:4px 8px; background:#fff7e0; border:1.5px solid #f0c75e; border-radius:10px;
  font-family:Andika,sans-serif; font-size:13px; line-height:1.3; color:#5a4410; text-wrap:balance; }
body.ecran-v2 #screen-page .flags #prop-niveau b { color:#5a4410; }
body.ecran-v2 #screen-page .flags #prop-niveau button { min-height:32px; height:32px; padding:0 16px; border-radius:10px; font-family:"Baloo 2",Andika,sans-serif; font-size:14px; font-weight:700;
  border:1.5px solid #a9c3b5; background:#fffef8; color:var(--v2-green); }
body.ecran-v2 #screen-page .flags #prop-niveau .pn-oui { background:var(--v2-green); border-color:var(--v2-green); color:#fffaf1; }
body.ecran-v2 #screen-page .flags:has(#prop-niveau) .v2-parent-txt:not(.v2-alerte):not(.v2-coupe-txt) { display:none; }
body.ecran-v2 #screen-page.v2-coupe .flags #prop-niveau, body.ecran-v2 #screen-page .flags:has(.v2-parent-txt.v2-alerte) #prop-niveau { display:none; }
body.ecran-v2 #p-ok, body.ecran-v2 #p-no, body.ecran-v2 .v2-plus {
  flex:1 1 0; min-width:0; height:40px; min-height:40px; margin:0; padding:0 10px; border:1px solid #c5d3bf; border-radius:13px; background:#f8faf5;
  display:flex; align-items:center; justify-content:center; gap:7px; font-family:"Baloo 2",Andika,sans-serif; font-size:13.5px; font-weight:700; color:var(--v2-green); opacity:1;
}
body.ecran-v2 #p-ok { border-color:#a9c3b5; }
body.ecran-v2 #p-no { color:#9a3b2a; border-color:#e2c3b8; }
body.ecran-v2 #p-ok::before, body.ecran-v2 #p-no::before { content:""; flex:none; width:16px; height:16px; background:currentColor; -webkit-mask:var(--v2-i-check) center/contain no-repeat; mask:var(--v2-i-check) center/contain no-repeat; }
body.ecran-v2 #p-no::before { -webkit-mask-image:var(--v2-i-cross); mask-image:var(--v2-i-cross); }
body.ecran-v2 #p-ok .v2-lbl, body.ecran-v2 #p-no .v2-lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
body.ecran-v2 #p-ok[disabled], body.ecran-v2 #p-no[disabled] { opacity:.45; }
/* 01/10 fondateur : même surlignage que dans la phrase, pour que le parent sache de quel mot on parle */
body.ecran-v2 .v2-mot { display:inline-block; padding:0 6px; border-radius:7px; font-weight:800; line-height:1.5; }
body.ecran-v2 #p-ok .v2-mot { background:#fff0b0; box-shadow:0 2px 0 #edda93; color:#2a2320; }
body.ecran-v2 #p-no .v2-mot { background:#dcfce7; box-shadow:0 2px 0 #b8e8c8; color:#226448; }
body.ecran-v2 .v2-plus { flex:0 0 44px; padding:0; font-size:25px; line-height:1; }
body.ecran-v2 #screen-page:not(.v2-signal) #flag-mode, body.ecran-v2 #screen-page:not(.v2-signal) #flag-hint { display:none !important; }
body.ecran-v2 #screen-page.v2-signal #p-ok, body.ecran-v2 #screen-page.v2-signal #p-no, body.ecran-v2 #screen-page.v2-signal .v2-plus { display:none; }
body.ecran-v2 #screen-page.v2-signal #flag-mode { flex:none; height:40px; margin:0; opacity:1; font-size:13.5px; font-weight:700; border-radius:13px; color:var(--v2-green); }
body.ecran-v2 #screen-page.v2-signal #flag-hint { flex:1; font-size:13px; color:var(--v2-green); }
/* Menu ⋯ (avec croix de fermeture) */
body.ecran-v2 .v2-menu { position:absolute; left:14px; right:14px; bottom:calc(100% + 8px); z-index:30; padding:8px; border:1px solid #d9dfd0; border-radius:20px; background:#fffef8; box-shadow:0 -6px 35px #3545351f; }
body.ecran-v2 .v2-menu[hidden] { display:none; }
body.ecran-v2 .v2-menu p { margin:0; padding:4px 50px 4px 10px; font-size:12px; color:#697965; }
body.ecran-v2 .v2-menu button { display:block; width:100%; min-height:44px; padding:9px 12px; border:0; border-radius:10px; background:transparent; text-align:left; font-family:"Baloo 2",Andika,sans-serif; font-size:15px; font-weight:600; color:var(--v2-green); }
body.ecran-v2 .v2-menu button:active, body.ecran-v2 .v2-menu button:hover { background:#eaf0e5; }
body.ecran-v2 .v2-menu button[disabled] { opacity:.45; }
body.ecran-v2 .v2-menu .v2-menu-x { position:absolute; top:6px; right:6px; width:40px; min-height:40px; height:40px; padding:0; display:grid; place-items:center; text-align:center; font-size:18px; color:#697965; border-radius:50%; }
/* le petit message (Compté ✓…) s'affiche en haut pour ne pas couvrir les boutons parents */
body.ecran-v2:has(#screen-page.active) .toast { bottom:auto; top:calc(70px + env(safe-area-inset-top,0px)); }

/* ---------- Petits écrans ---------- */
@media (max-width:370px) {
  body.ecran-v2 #p-ok, body.ecran-v2 #p-no { padding:0 6px; gap:5px; font-size:12.5px; }
  body.ecran-v2 #p-ok::before, body.ecran-v2 #p-no::before { width:14px; height:14px; }
}
@media (max-height:680px) {
  body.ecran-v2 #screen-page > .topbar { height:50px; }
  body.ecran-v2 #screen-page .controls { height:100px; }
  body.ecran-v2 #screen-page .controls .mic-wrap { width:80px; height:80px; }
  body.ecran-v2 #btn-mic { width:76px; height:76px; }
}
@media (prefers-reduced-motion:reduce) {
  body.ecran-v2 #screen-page *, body.ecran-v2 #screen-page *::before, body.ecran-v2 #screen-page *::after { animation:none !important; transition:none !important; }
}
body.ecran-v2 .v2-mimot[hidden], body.ecran-v2 .v2-menu button[hidden] { display:none; }
/* 10/10 (chantier 2) : « Je réessaie seul » sous le micro de l'aide (zoom sur le mot) */
body.ecran-v2 #focus #aide-seul { min-height:44px; margin:2px 0 0; padding:8px 20px; border:1.5px solid #c5d3bf; border-radius:22px; background:#fffef8; box-shadow:none;
  font-family:"Baloo 2",Andika,sans-serif; font-size:16px; font-weight:700; color:var(--v2-green,#1f5c4e); }
body.ecran-v2 #focus #aide-seul[hidden] { display:none; }
/* 10/10 (chantier 4) : micro bloqué — étapes pour l'autoriser */
body.ecran-v2 .cm-bloque .cm-etapes li { background:#f3efe3; color:var(--v2-ink,#34362c); font-family:Andika,sans-serif; }
body.ecran-v2 .cm-bloque .cm-etapes b.n { background:var(--v2-coral,#e4572e); font-family:"Baloo 2",Andika,sans-serif; }