* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background-color: black;
  font-family: sans-serif;
}

/*.screen {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}*/

#splashscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

#splashscreen img {
  max-width: 70%;
  max-height: 70%;
  animation: fadeIn 2s ease-in-out;
}

/*@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}*/

.fade-in {
  animation: fadeIn 1s ease forwards;
}

.fade-out {
  animation: fadeOut 1s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.zoom-pulse {
  animation: zoomPulse 0.5s ease-in-out infinite;
}

@keyframes zoomPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.hidden {
  display: none !important;
  /*opacity: 0;
  visibility: hidden;   
  pointer-events: none;*/
}

#tap-to-continue {
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Container form — largeur responsive, centrage */
#config-form.fl-form {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  gap: 2.4vh !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: min(92vw, 46vh) !important;     /* largeur contrôlée */
  max-width: 90vw !important;
  padding: 3vh 3.6vw !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 2vh !important;
  margin: 0 auto !important;
  box-shadow: 0 1.2vh 3vh rgba(0,0,0,0.45) !important;
  color: #ffffff !important;
  position: relative !important;
}

/* Ligne (label) : bloc vertical, éviter héritage horizontal */
#config-form.fl-form .fl-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 1vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  min-width: 0 !important; /* évite overflow */
}

/* Label texte (titre du champ) */
#config-form.fl-form .fl-label,
#config-form.fl-form .labs {
  display: block !important;
  color: #ffffff !important;
  font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 3.6vh !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* Inputs text/number */
#config-form.fl-form .fl-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 1.4vh 2.2vh !important;
  font-size: 2.4vh !important;
  color: #0a0f1a !important;
  background: rgba(255,255,255,0.92) !important;
  border: none !important;
  border-radius: 1.2vh !important;
  outline: none !important;
  margin-top: 1.5vh !important;
}

/* Select styling */
#config-form.fl-form .fl-select {
  width: 100% !important;
  padding: 1.2vh 1.6vh !important;
  font-size: 2.4vh !important;
  border-radius: 1.2vh !important;
  border: none !important;
  background: rgba(255,255,255,0.92) !important;
  color: #0a0f1a !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin-top: 1.5vh !important;
}

/* Bouton submit — style bouton dégradé bleu 3D, centré */
#config-form.fl-form .fl-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 1.6vh 0 !important;
  font-size: 2.8vh !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  border: none !important;
  border-radius: 1.6vh !important;
  cursor: pointer !important;

  /* fallback bg */
  background-color: #8f4aa0 !important;

  /* gradient (dernier déclaré, utilisé par navigateurs modernes) */
  background-image: radial-gradient(circle at 50% 50%, rgba(158,93,167,1) 0%, rgba(132,65,152,1) 100%) !important;
  
  box-shadow:
    inset 0 1.2vh 2vh rgba(255,255,255,0.18) !important,
    inset 0 -1vh 1.6vh rgba(0,0,0,0.22) !important,
    0 .8vh 2vh rgba(0,0,0,0.45) !important;

  transition: transform .14s ease, box-shadow .14s ease !important;
  margin-top: 1vh !important;
  font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing : 0.2vh;
}

/* Hover/active pour submit */
#config-form.fl-form .fl-submit:hover { transform: scale(1.03) !important; }
#config-form.fl-form .fl-submit:active { transform: translateY(1px) !important; }

/* Forcer l'input placeholder / caret color si besoin */
#config-form.fl-form input::placeholder { color: rgba(0,0,0,0.35) !important; }
#config-form.fl-form input, #config-form.fl-form select { caret-color: #0a0f1a !important; }

/* Petite protection : annule styles invalidants hérités (ex : text-align:center) */
#config-form.fl-form, 
#config-form.fl-form * {
  text-align: left !important;
}

/* Si un style tiers force display:inline-block ou float, on écrase */
#config-form.fl-form > label,
#config-form.fl-form .fl-row { display:block !important; float:none !important; }

/* Media: portrait adaptation (optionnel) */
@media (orientation:portrait) {
  #config-form.fl-form { width: min(92vw, 86vw) !important; padding: 3.6vh 4vw !important; }
  #config-form.fl-form .fl-label { font-size: 3vh !important; }
  #config-form.fl-form .fl-input, #config-form.fl-form .fl-select { font-size: 2.6vh !important; padding: 1.6vh 2vh !important; }
  #config-form.fl-form .fl-submit { font-size: 3vh !important; padding: 1.8vh 0 !important; }
}



















/*.centered-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.2em;
  background-color: #111;
  color: white;
}

.centered-form input, .centered-form select {
  padding: 8px;
  font-size: 1em;
  width: 200px;
}

.centered-form button {
  padding: 10px 20px;
  font-size: 1em;
  margin-top: 10px;
  background-color: #444;
  color: white;
  border: none;
  border-radius: 5px;
}*/

/*#home {
  background-color: #f0f0f0;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
}*/

/* -------- Home layout -------- */
/*.home-wrap {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 16px;
	height: 100%;
	padding: 16px;
	background: #0d0d0d;
	color: #fff;
}*/

/* Zone infos défilantes (marquee-like) */
/*.home-info {
  position: relative;
  overflow: hidden;
  background: #141414;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
}*/
/*.home-info span {
  display: inline-block;
  white-space: nowrap;
  animation: slideText 12s linear infinite;
}*/
@keyframes slideText {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/* Boutons */
/*.btn {
  padding: 14px 16px;
  font-size: 1.05rem;
  border: 1px solid #444;
  border-radius: 12px;
  background: #1d1d1d;
  color: #fff;
}*/
.btn.primary { background: #2266ff; border-color: #2266ff; }
.btn.danger { background: #bb2626; border-color: #bb2626; }
.btn.link { background: transparent; border-color: #444; }



/* -------- Settings layout -------- */
/*.settings-wrap {
  display: grid;
  gap: 16px;
  height: 100%;
  padding: 16px;
  background: #0d0d0d;
  color: #fff;
}*/

/*.settings-block {
  background: #141414;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 12px;
}

.settings-block h3 { margin-bottom: 8px; }

.settings-block .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #222;
}
.settings-block .row:last-child { border-bottom: none; }
.settings-block .row.strong span { font-weight: 600; }*/


/* ========== PLAY: Layout de base ========== */
/*.play-wrap {
  display: grid;
  gap: 12px;
  height: 100%;
  padding: 12px;
  background: #0b0b0b;
  color: #fff;
}*/
/* ========== HUD (score + ladder) ========== */
/*.play-hud {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}*/
/*.score-box {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: #141414;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 8px 12px;
}*/
/*.score-label { opacity: .8; font-size: .9rem; }*/
/*.score-value { font-size: 1.4rem; font-weight: 700; }*/

/* Slider/échelle de score (anim en JS) */
.ladder {
  display: flex;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}
.ladder-step {
  font-size: .9rem;
  opacity: .6;
  transition: color .3s, opacity .3s;
}
.ladder-step.active {
  color: #38b6ff;
  opacity: 1;
}

/* ========== Question ========== */
/*.play-question {
  background: #141414;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px;
  min-height: 80px;
  display: flex; align-items: center;
}*/
/*.question-text {
  font-size: 1.1rem;
  line-height: 1.4;
}*/

/* ========== Choix (4 boutons) ========== */
/*.play-choices {
  display: grid;
  gap: 10px;
}*/


/*.choice {
  position: relative;
  background: #1c1c1c;
  border: 1px solid #3a3a3a;
  color: #fff;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  min-height: 56px;
  transition: transform .08s ease, box-shadow .2s;
}*/

/* ========== Timer (sprite 15 images) ========== */
/*.play-timer {
  display: flex; align-items: center; justify-content: center;
}*/
/*.timer-sprite {
  width: min(480px, 90%);
  height: auto;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
}*/

/* ========== Outils (boutons image-only) ========== */
/*.play-tools {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  justify-content: center;
  align-items: center;
}*/
/*.tool-btn {
  background: transparent;
  border: none;
  padding: 0;
  line-height: 0;
}*/
/*.tool-btn img {
  width: 56px; height: 56px; display: block;
}*/





/* caché au départ */
/*.streak-box.hidden { display: none; }

.streak-box {
  position: absolute;
  right: .75rem;
  top: 10%;
  width: 220px;
  height: 80%;
  overflow: hidden;
  background: rgba(0,0,0,.65);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 30;
  opacity: 0;
  transition: opacity 220ms ease;
  will-change: opacity;
}*/

#score-ladder.streak-static {
  position: relative;
  display: flex;
  flex-direction: column;     
  justify-content: flex-start; 
  gap: 0;
  padding: 8px 10px;
}

/* une ligne */
.streak-item {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #FFF;
  opacity: 1;
  display:flex;        /* bouton devient flex-container */
  align-items:center;  /* centre verticalement le texte */
  justify-content:center; /* centre horizontalement le texte */
  text-align:center;   /* si texte multi-ligne */
}

.streak-item.active {
  color: #fff;
  opacity: 1;
  font-weight: 700;
  
}

/*.streak-cursor {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 28px;                 
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 0 12px rgba(255,255,255,.35) inset;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 700ms ease;
}*/

.btn.disabled { 
  opacity: .5; 
  pointer-events: none; 
  filter: grayscale(100%); 
}


.btn-danger   { background:#c62828; color:#fff; border:none; padding:10px 14px; border-radius:10px; }
.btn-secondary{ background:#2c2c2c; color:#fff; border:none; padding:10px 14px; border-radius:10px; }

@keyframes popIn { from { transform: scale(.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* ===== Favorites / Rank ===== */
/*#favorites.screen { padding: 12px; }*/

/*.fav-container {
  display: grid;
  gap: 12px;
}*/

/*.fav-panel { min-height: 140px; }*/



/*.fav-card-title {
  font-weight: 600;
  margin-bottom: 8px;
  opacity: .9;
}*/



/*.fav-actions {
  margin-top: 14px;
  display: flex; justify-content: flex-end;
}*/

/*.donate-options { margin: 12px 0; }*/



/* Orientation : PORTRAIT     ***********************************************************************************************/
/***********************************************************************************************************************/
@media (orientation: portrait) {
  /*.home-buttons {
    display: grid;
    gap: 12px;
  }*/
  /*.settings-wrap {
    grid-template-rows: auto auto 1fr;
  }*/
  
   /*.play-wrap {
    grid-template-rows: auto auto 1fr auto auto; /* HUD, Question, Choix, Timer, Tools */
  }*/
  
  /*.play-choices { grid-template-columns: 1fr; }*/
  
  /*.fav-container { grid-template-columns: 1fr; }*/
}

/* Orientation : PAYSAGE      ***********************************************************************************************/
/***********************************************************************************************************************/
@media (orientation: landscape) {
  .home-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
  }
  /*.home-info { order: 1; }*/
  /*.home-buttons { order: 2; }
  .home-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }*/
  /*.settings-wrap {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }*/
  
 /*.play-wrap {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto 1fr auto; 
    grid-template-areas:
      "hud hud"
      "question choices"
      "timer tools";
    align-items: stretch;
  }*/
  /*.play-hud      { grid-area: hud; }*/
  /*.play-question { grid-area: question; }*/
  /*.play-choices  { grid-area: choices; }*/
  /*.play-timer    { grid-area: timer; }*/
  /*.play-tools    { grid-area: tools; }*/
  /*.play-choices { grid-template-columns: 1fr; } /* Une colonne; tu peux passer en 2x2 si tu veux */
  
  /*.fav-container { grid-template-columns: 1fr 1fr 1fr; }*/
}

/* ===== Pause Overlay ===== */
#pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;              /* au-dessus du jeu */
  transition: opacity .18s ease;
  opacity: 0;
  pointer-events: none;      /* pas cliquable quand caché */
}
#pause-overlay .pause-inner {
  color: #fff;
  font-size: 3rem;
  user-select: none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
#pause-overlay.show {
  opacity: 1;
  pointer-events: auto;      /* bloque toute interaction dessous */
}

/* .hidden existe déjà chez toi, on la réutilise */










































/* ====== Police locale Fredoka (Condensed Bold) ====== */
/* ⚠️ mets le bon chemin RELATIF AU FICHIER CSS */
@font-face{
  font-family:"Fredoka";
  src: url("fonts/Fredoka_Condensed-Bold.ttf") format("truetype");
  font-weight:700;            /* ta fonte est Bold → 700 */
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family: "Rubik";                   /* le nom que tu veux utiliser */
  src: url("fonts/Rubik-Light.woff2") format("woff2");
  font-weight: 700;                            /* poids normal */
  font-style: normal;
  font-display: swap;                          /* affiche une police système en attendant le chargement */
}
@font-face {
  font-family: "RubikBold";                   /* le nom que tu veux utiliser */
  src: url("fonts/Rubik-Bold.woff2") format("woff2");
  font-weight: 700;                            /* poids normal */
  font-style: normal;
  font-display: swap;                          /* affiche une police système en attendant le chargement */
}
@font-face{
  font-family:"Dancing";
  src: url("fonts/DancingScript-VariableFont_wght.ttf") format("truetype");
  font-weight:700;            /* ta fonte est Bold → 700 */
  font-style:normal;
  font-display:swap;
}

/* ====== Reset + body centré ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{
  display:flex; align-items:center; justify-content:center;
  background:#0a0f1a;
  font-family:"Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow:hidden;
  margin: 0;
  padding: 0;
  background: url("./images/bg-portrait.png") center / cover no-repeat;
  background-attachment: fixed;
}
@media (orientation: landscape) {
  body {
    background-image: url("./images/bg-landscape.png");
  }
}

/* ====== Écran principal ====== */
.screen{
  width:calc(100vw - 2vh);
  height:98vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:center/cover no-repeat url("./images/bg-portrait.png");
  overflow:hidden;
}
.fond_afa{
	width: 100%;
	height: 100%;
	display:flex;
	flex-direction: column;
  align-items:center;
  justify-content:center;
   
}
#io{
	font-family:"Dancing", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow:hidden;
}

/* ====== Wrapper 50/50 ====== */
.home-wrap{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:stretch;
}

/* ====== Split gauche (images superposées) ====== */
.split-left{
  width:calc((100vw - 2vh) * 0.5);
  height:100%;
  position:relative; display:flex; align-items:center; justify-content:center;
}

/* Conteneur autorisé = 80% de la zone gauche (L et H) */
.split-left::before{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:calc((100vw - 2vh) * 0.5 * 0.8);
  height:calc(98vh * 0.8);
}

/* Deux images superposées, centrées, ≤ 80% */
.left-img{
  position:absolute;
  max-width:calc((100vw - 2vh) * 0.5 * 0.8);
  max-height:calc(98vh * 0.8);
  width:auto; height:auto;
  top:50%; left:50%; transform:translate(-50%,-50%);
  object-fit:contain;
  /*pointer-events:none;*/
  filter:drop-shadow(0 .6vh 1.6vh rgba(0,0,0,.25));
}
.left-img-2{ 
	transform:translate(-50%,-50%) scale(0.98); 
	opacity:1;
	/*animation: pulseZoom 0.5s ease-in-out infinite;*/
}
.sary{
	animation: pulseZoom 0.5s ease-in-out infinite;
}

@keyframes pulseZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* zoom léger */
  }
  100% {
    transform: scale(1);
  }
}
.hm{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-direction : column;
	width: 100%;
	/*background-color: #742596;*/
}

/* ====== Split droite (boutons) ====== */
.split-right{
  width:calc((100vw - 2vh) * 0.5);
  height:100%;
  position:relative; display:flex; align-items:center; justify-content:center;
}

/* Groupe de boutons : colonne, repartition égale + gaps, cadré à 80% de H */
.home-buttons{
  display:flex; flex-direction:column; align-items:stretch; justify-content:stretch;
  gap:7vh;                             /* paysage remplacé plus bas */
  width:calc((100vw - 2vh) * 0.5 * 0.8);
  max-width:calc((100vw - 2vh) * 0.5 * 0.8);
  height:calc(98vh * 0.8);
  max-height:calc(98vh * 0.8);
}
.home-buttons > .btn{ 
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;                    /* le texte pilotera la hauteur, pas le padding */
	padding-bottom: 0;
	line-height: 1;
}

/* ====== Boutons ====== */
.btn{
  position:relative;
  border:none; outline:none;
  border-radius:1000px;
  /*padding:2.2vh 3.6vh;
  font-size:3vh;*/
  font-weight:700;
  letter-spacing:.12vh;
  text-transform:uppercase;
  color:#fff;
  cursor:pointer;
  box-shadow:0 1vh 3vh rgba(0,0,0,.35);
  transform:translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  background:radial-gradient(circle at 50% 50%, rgb(25, 94, 168), rgb(19, 73, 158));
  font-family:"Fredoka", sans-serif;   /* utilise bien la fonte déclarée */
}

/* Icône interne à droite (⚠️ chemins relatifs au CSS) */
.btn::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:center/contain no-repeat;
  pointer-events:none;
}
/* Icônes par bouton */
#btn-play::after{      background-image:url("./images/play.png"); }
/*#btn-settings::after{  background-image:url("./images/settings.png"); }*/
#btn-favorites::after{ background-image:url("./images/rank.png"); }
#btn-privacy::after{   background-image:url("./images/privacy.png"); }
#btn-donate::after{    background-image:url("./images/donate.png"); }
#btn-quit::after{      background-image:url("./images/quit.png"); }

/* Hover + Focus */
.btn:hover{ transform:scale(1.04); filter:brightness(1.03); box-shadow:0 1.2vh 3.4vh rgba(0,0,0,.4); }
.btn:focus-visible{ outline:.6vh solid rgba(255,255,255,.6); outline-offset:.3vh; filter:brightness(1.06); }

/* Dégradés spécifiques */
#btn-play{      background:radial-gradient(circle at 50% 50%, rgb(39,170,225), rgb(20,120,200)); }
/*#btn-settings{  background:radial-gradient(circle at 50% 50%, rgb(134,75,207), rgb(103,44,176)); }*/
#btn-favorites{ background:radial-gradient(circle at 50% 50%, rgb(61,186,107), rgb(24,145,74)); }
#btn-privacy{   background:radial-gradient(circle at 50% 50%, rgb(61,186,107), rgb(24,145,74)); }
#btn-donate{    background:radial-gradient(circle at 50% 50%, rgb(214,58,162), rgb(162,36,130)); }
#btn-quit{      background:radial-gradient(circle at 50% 50%, rgb(160,160,160), rgb(110,110,110)); }

/* Sécurité anti-débordement */
.screen, .home-wrap, .split-left, .split-right{ overflow:hidden; }

/* Bouton en haut à gauche */
#btn-settings {
  position: absolute;
  top: 2vh;       /* marge depuis le haut */
  left: 2vh;      /* marge depuis la gauche */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;    /* au-dessus du reste */
  width: 8vh;     /* carré basé sur la hauteur viewport */
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image à l’intérieur : occupe tout le bouton */
#btn-settings img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* garde le ratio */
}

/********PARTIE SETTINGS*******/
#settings.screen{
	flex-direction:column;
  }
.settings-title{
  display:flex; align-items:center; justify-content:center;
}
.settings-title h2{
  margin:0; color:#fff;
  font-weight:700;
  text-shadow:0 .6vh 1.6vh rgba(0,0,0,.5);
}
.settings-wrap{
  flex:1;                               /* 85% portrait / 80% paysage */
  display:flex;
  padding:0 2vh 2vh 2vh;                /* gaps bords */
  gap:2vh;                            /* gaps entre parties */
  width: 100%;
  align-items:center; justify-content:center;
}
.settings-wrap > * {
  flex: 1 1 0;   /* parts égales */
  min-width: 0;  /* évite le débordement horizontal */
  min-height: 0; /* évite le débordement vertical */
  align-self: stretch; /* occupe toute la largeur ou hauteur dispo */
}
.settings-block{
  display:flex;
  flex-direction:column;
  row-gap:2vh;             /* espace entre haut/sep/bas */
  padding:2vh;
  background:rgba(255,255,255,.1);
  border-radius:2vh;
  min-height:0;            /* évite le débordement flex */
}
.settings-block .block-icon{
  flex:0 0 15%;            /* prend exactement 15% */
  height:15%;
  aspect-ratio:1/1;        /* carré */
  object-fit:contain;
  align-self:center;       /* centré horizontalement */
}
.settings-block .sep{
  flex:0 0 .5vh;           /* hauteur fixe */
  height:.5vh;
  width:70%;               /* pas pleine largeur */
  align-self:center;
  border-radius:1vh;
  background:rgba(255,255,255,.85);
  box-shadow:0 .2vh 1vh rgba(0,0,0,.15) inset;
}

/* --- Zone basse : tous les éléments après .sep --- */
/* Ils se partagent équitablement la hauteur disponible, gaps respectés */
.settings-block > .sep ~ *{
  flex:1 1 0;              /* parts égales */
  min-height:0;            /* autorise la réduction */
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Chaque ligne = flex pour séparer input (à gauche) et texte (à droite) */
.child {
  display:flex;
  align-items:center;         /* aligne verticalement */
  justify-content:space-between; /* input extrême gauche, texte extrême droite */
  width:100%;                 /* occupe toute la largeur dispo */
  padding:0 2vh;              /* un peu d’air sur les côtés */
  direction:rtl;              /* rend la ligne RTL (texte aligné à droite) */
  text-align:right;           /* force l’alignement du span à droite */
  border-bottom: 1px solid #FFF;
}
.settings-block > .sep ~ .child{
  display:grid !important;
  grid-template-columns: auto 1fr; /* [case][texte] */
  align-items:center;
  column-gap:2vh;
  width:100%;
  padding-inline: 0 2vh;          /* colle la case au bord gauche */
  direction:ltr;
}
.settings-block .child:last-child { border-bottom: none; }
/* Input (case à cocher) */
.child input[type="checkbox"]{
  justify-self:start;
  margin:0;
}
/* Texte */
.child span{
  justify-self:end;               /* colle le texte à droite */
  text-align:right;
  min-width:0;
  font-size:2.2vh;
  color : #FFF;
}
.child span.kel{
  font-size:1.5vh;
}
label.child select {
  max-width:50%;
  justify-self:end;
  font-size:2vh;
}
#btn-back-home, #btn-fav-back, #close-donate, #close-share, #close-message, #close-askDonate {
  position:absolute;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  z-index:100;      /* toujours au-dessus des autres contenus */
}
#btn-fav-back img {
  width:100%;
  height:100%;
}
#btn-back-home img {
  width:100%;
  height:100%;
}
#close-donate img {
  width:100%;
  height:100%;
}
#close-share img {
  width:100%;
  height:100%;
}
#close-message img {
  width:100%;
  height:100%;
}
#close-askDonate img {
  width:100%;
  height:100%;
}
.settings-block .btn-group {
  flex:1 1 0;          /* prend sa part de la zone basse */
  display:flex;
  flex-direction:column;
  gap:2vh;             /* espace entre les boutons */
  min-height:0;
}

.settings-block .btn-group .btn {
  flex:1 1 0;          /* boutons de hauteurs égales */
  border-bottom : none;
  font-size : 5vw;
  
  display:flex;        /* bouton devient flex-container */
  align-items:center;  /* centre verticalement le texte */
  justify-content:center; /* centre horizontalement le texte */
  text-align:center;   /* si texte multi-ligne */
}
/* Popups */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.popup-card {
	display: flex;
  flex-direction: column;
  /*background: #111;*/
  border: 1px solid #333;
  border-radius: 2vw;
  padding: 2vw;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  background: url("images/fond_mom.png") no-repeat center bottom / 100% auto, -webkit-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background: url("images/fond_mom.png") no-repeat center bottom / 100% auto,    -moz-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background:  url("images/fond_mom.png") no-repeat center bottom / 100% auto,       -ms-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background:  url("images/fond_mom.png") no-repeat center bottom / 100% auto,           -o-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background: url("images/fond_mom.png") no-repeat center bottom / 100% auto,                radial-gradient(circle at 50% 50%, rgb(164, 103, 176), rgb(126, 81, 155));
	border: 0.3vw solid #563B6B;
	box-shadow:	inset 0 0 0 0.2vw #fff;
	border-radius: 3vw;
	
	/*background-image: url("images/fond_mom.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 25%; *//* hauteur = 25% par défaut (portrait) */
}
.popup-card h3 {
  background: url("images/left2.png") no-repeat center top;
  background-size: contain;
  text-indent: -9999rem;   /* masque le texte */
  height: 8vh;             /* hauteur relative à l'écran */
  margin: 0 auto 2vh auto;
  width: 100%;
}
.popup-body {
	display: flex;
  flex-direction: column;
  overflow: auto;
  margin: 0 1vh 1vh;
  font-size : 2.5vh;
  text-align: center;
}
.popup-actions {
  display: flex;
  justify-content: flex-end;
  flex: 1;
  overflow-y: auto;
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}
.popup-actions.three {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}
.popup-actions.four {
  display: flex;
  justify-content: space-between; /* pousse les enfants aux extrémités */
  align-items: center;            /* aligne verticalement si besoin */
  width: 100%;
  padding: 0 2vw;
}
.four .btn {
  min-width: 20%;   /* optionnel : largeur mini pour éviter que ce soit trop petit */
  text-align: center;
}
.popup-body::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}
#close-appinfo, #close-credits {
  margin: auto 1vw 1vw auto; /* marge à droite et en bas */
  font-size: 2vh;
  padding : 2vh;
}
.popup-actions.two {
  justify-content: space-between;
}
.fb-link {
  text-decoration: none;   /* enlève le soulignement */
  color: #FFF;          /* garde la couleur du texte du paragraphe */
  display: inline-flex;    /* aligne icône et texte */
  align-items: center;
  gap: 0.5rem;             /* espace entre icône et texte */
  margin : 0 auto;
  cursor: pointer;
  transition: background 0.3s ease;
}
.fb-link:hover {
  background: rgba(255, 255, 255, 0.1);
}
.fb-icon {
  width: 4vw;
  height: auto;
  display: inline-block;
  
}

/********PARTIE FAVOURITE*******/
#favorites.screen{
	flex-direction:column;
  }
.settings-title{
  display:flex; align-items:center; justify-content:center;
}
.settings-title h2{
  margin:0; color:#fff;
  font-weight:700;
  text-shadow:0 .6vh 1.6vh rgba(0,0,0,.5);
}
.fav-container{
  flex:1;                               /* 85% portrait / 80% paysage */
  display:flex;
  padding:0 2vh 2vh 2vh;                /* gaps bords */
  gap:2vh;                            /* gaps entre parties */
  width: 100%;
  align-items:center; justify-content:center;
}
.fav-container > * {
  flex: 1 1 0;   /* parts égales */
  min-width: 0;  /* évite le débordement horizontal */
  min-height: 0; /* évite le débordement vertical */
  align-self: stretch; /* occupe toute la largeur ou hauteur dispo */
}
.fav-panel{
  display:flex;
  flex-direction:column;
  /*background:rgba(255,255,255,.1);*/
  min-height:0;            /* évite le débordement flex */
}
.fav-card {
	width: 100%;
	height: 100%;
	/*border: 1px solid rgba(255,255,255,0.08);*/
	padding : 2vh;
	background: -webkit-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background: -moz-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background:  -ms-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background:  -o-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background:  radial-gradient(circle at 50% 50%, rgb(164, 103, 176), rgb(126, 81, 155));
	border: 0.2vh solid #563B6B;
	box-shadow:	inset 0 0 0 0.1vh #fff;
}
.fav-card-title {
  font-weight: 600;
  font-size: 2.5vh;
  color : #000;
  height : 15%;
  text-align: center;
}
.fav-card-body {
	font-size: 2vh;
	color: #FFF;
	height : 85%;
	overflow-y: auto;
	-ms-overflow-style: none;  /* IE/Edge */
	scrollbar-width: none;     /* Firefox */
}

.fav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fav-list li {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px dashed rgba(255,255,255,.12);
  padding: 8px 0;
  /*font-size: .95rem;*/
  color : #FFF;
}
.fav-list li:last-child { border-bottom: none; }
.fav-offline {
	height: 85%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5vh;
	text-align: center;
}
#fav-usercat, #fav-usercat *{
	 min-height: 0;
	 box-sizing: border-box;
}
#divScore  {
	flex: 5 1 0;
	display:inline-flex;
	align-self:flex-end;
	align-items:center;
	justify-content:center;
	padding:1.2vh 2.2vh;
	border-radius:2vh;
	background:linear-gradient(to bottom, rgb(43,73,107), rgb(51,86,125));
	color:#fff;
	font-weight:700;
	font-size:2vh;
	white-space:nowrap;
	box-shadow:0 1vh 3vh rgba(0,0,0,.25);
}
#divTrophy {
	flex: 60 1 0;
	display:flex;
	align-items:center;
	justify-content:center;
}
#divStars  {
	flex: 15 1 0;
	display:flex;
	align-items:center;
	justify-content:center;
}
#divName   {
	flex: 20 1 0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 2vh; 
	font-size:3.4vh;
	font-weight:700;
	color:#0a0f1a;
	text-align:center;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color: #FFF;
}

/* Images: s'adaptent sans pousser le parent */
#divTrophy img,
#divStars  img {
	max-width:100%;   /* l’image ne dépassera jamais la largeur du parent */
	max-height:100%;  /* idem pour la hauteur */
	width:auto;       /* conserve le ratio */
	height:auto;      /* conserve le ratio */
	object-fit:contain; /* (optionnel) ajuste bien dans le conteneur */
}

/********PARTIE DONATE*******/
.popup-content {
  width: 92vw;       /* 420px ≈ 26rem */
  max-height: 90vh;               /* limite à 60% du parent */
  /*background: #111;*/
  color: #fff;
  border-radius: 0.9rem;          /* 14px ≈ 0.9rem */
  padding: 1.2rem 1rem;          /* 18px ≈ 1.2rem ; 16px ≈ 1rem */
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.35);
  animation: popIn 0.2s ease;
  display:flex;                  /* colonne flex */
  flex-direction:column;
	background: url("images/fond_tapitra.png") no-repeat center bottom / 100% auto, -webkit-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background: url("images/fond_tapitra.png") no-repeat center bottom / 100% auto,    -moz-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background:  url("images/fond_tapitra.png") no-repeat center bottom / 100% auto,       -ms-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background:  url("images/fond_tapitra.png") no-repeat center bottom / 100% auto,           -o-radial-gradient(50% 50%, circle, rgb(164, 103, 176), rgb(126, 81, 155));
	background: url("images/fond_tapitra.png") no-repeat center bottom / 100% auto,                radial-gradient(circle at 50% 50%, rgb(164, 103, 176), rgb(126, 81, 155));
	border: 0.2vh solid #563B6B;
	box-shadow:	inset 0 0 0 0.1vh #fff;
}
#skrol, #skrol2, #skrol3, #skrol4 {
	flex:1 1 auto;                 /* prend l’espace restant */
	min-height:0;                  /* *** CLEF anti-débordement *** */
	overflow:auto;
	-ms-overflow-style:none;
	scrollbar-width:none;
}
#skrol::-webkit-scrollbar {
	display: none; 
}
#skrol2::-webkit-scrollbar {
	display: none; 
}
#skrol3::-webkit-scrollbar {
	display: none; 
}
#skrol4::-webkit-scrollbar {
	display: none; 
}
.popup-content h3 {
	margin: 0 0 8px;
	font-size: 3vh;
	padding-bottom : 1vh;
color: #FFF;
}
.popup-text {
	margin: 0 0 1vh;
	opacity: 1;
	background-color: rgba(255,255,255,0.1);
	text-align: justify;
	font-size: 2vh;
	padding : 2vh;
}




/* -------- Onglets (boutons) -------- */
.tabs{
  display:flex;
  gap:.5rem;
  margin:.5rem 0 1rem 0;
  flex-wrap: nowrap;
overflow-x: auto;
}
.tabs::-webkit-scrollbar {
  display: none;          /* cache la scrollbar sur Chrome/Safari */
}

.tab{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .8rem;
  border:.06rem solid #ddd;
  border-radius:.75rem;
  background:#fafafa;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.tab:hover{ background:#f3f4f6; border-color:#bbb; transform: translateY(-.05rem); }
.tab.active{ background:#eef2f7; border-color:#888; font-weight:600; }

/* (si un jour tu mets des logos) */
.tab img{
  display:block;
  height: 2.25rem;
  width:auto;
}

/* -------- Panneaux -------- */
.tabpanes .pane{ display:none; }
.tabpanes .pane.active{ display:block; }

/* -------- Ligne de paiement -------- */
.payline{
  display:flex;
  align-items:center;
  justify-content:space-between;
	flex-direction : column;
  gap:.75rem;
  padding:.75rem;
  background:#f8fafc;
	opacity : 0.8;
  border:.06rem solid #eef2f7;
	color: #000;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.4), inset 0 -2px 6px rgba(0,0,0,0.2);
}

.label{ font-size:.9rem; opacity:.7; }
.value{ font-size:1.25rem; font-weight:700; letter-spacing:.02em; }
.hint{ font-size:.9rem; opacity:.8; }

/* Actions (copier / partager) */
.actions{
  display:flex;
  gap:.5rem;
  flex-shrink:0;
}
.actions .copy,
.actions .share{
  padding:.45rem .7rem;
  border:.06rem solid #ddd;
  border-radius:.6rem;
  background:rgba(86,59,107,1);
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
	color: #FFF;
}
.actions .copy:hover,
.actions .share:hover{ background:#f9fafb; border-color:#bbb; color: #000;}

/* -------- "Optionnel" + ligne sur la même ligne -------- */
/* Remplace dans ton HTML la ligne "(Optionel )<hr>" par :
<div class="section-title"><span>(Optionnel)</span><hr></div> */
.section-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:1rem 0 .5rem 0;
}
.section-title span{
  white-space:nowrap;
  font-style:italic;
  color:#555;
}
.section-title hr{
  flex:1;
  border:none;
  border-top:.06rem solid #ccc;
}

/* -------- Formulaire confirmation -------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap:.75rem;
  margin:.5rem 0;
}
label{ display:flex; flex-direction:column; gap:.25rem; font-size:.95rem; }

input, select{
  padding:.55rem .6rem;
  border:.06rem solid #ddd;
  border-radius:.5rem;
  background:#fff;
}
button[type="submit"]{
  margin-top:.5rem;
  padding:.6rem .9rem;
  border:.06rem solid #ddd;
  border-radius:.7rem;
  background:#fff;
  cursor:pointer;
}
button[type="submit"]:hover{ background:#f9fafb; border-color:#bbb; }

.tiny{ font-size:.85rem; opacity:.7; padding-top: 1vh; }

/* -------- Responsive petits écrans -------- */
@media (max-width: 30rem){ /* ~480px */
  .value{ font-size:1.1rem; }
  .tab img{ height: 2rem; }
}

/********PARTIE JOUER*******/
/***************************/
.play-wrap{
  position:relative;
  margin:auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  width: 100%;
  height: 100%;
}
.play-hud{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2vh;
  padding:0 2vh;
  height:10vh;            /* 10% de l’écran */
  flex:0 0 10vh;
}
.play-hud > *{
  flex:1 1 0;
  min-width:0;
}
.tool-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.8vh;
  padding:0.8vh 1.2vh;
  background:transparent;
  border:none;
  cursor:pointer;
  height:100%;
}
.tool-btn .labelAction{
  text-transform:uppercase;
  font-size:2vw;
  line-height:1;
  font-family:"Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #FFF;
}
.tool-btn img {
  max-height:95%;   /* l’image ne dépassera jamais 60% de la hauteur du bouton */
  max-width:95%;    /* idem en largeur */
  height:auto;
  width:auto;
  object-fit:contain; /* garde les proportions */
  display:block;
}
.tool-btn.disabled img { filter: grayscale(1) brightness(.6); }
.score-box{
  /* wrapper de position pour le badge + valeur */
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  height:100%;
}
.score-box-2{
  /* wrapper de position pour le badge + valeur */
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  height:100%;
}
.score-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:4vh;                /* rond visible dans la barre de 10vh */
  width:4vh;
  border-radius:50%;
  border:.4vh solid #fff;      /* bordure épaisse blanche */
  color:#fff;
  font-weight:700;
  background:linear-gradient(to bottom, rgb(19,73,158), rgb(39,170,225)); /* sombre → clair */
  box-shadow:0 1vh 2.4vh rgba(0,0,0,.25);
  z-index:2;
}

/* Valeur (score-value) : pilule rectangulaire, légèrement plus basse que le rond.
   Superposition de 50% sous le rond : on tire la pilule vers la gauche.  */
.score-value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:3vh;                 /* un peu plus petit que le rond */
  min-width:20vh;               /* largeur mini (≈ “00000”) */
  padding:0 3vh;                /* padding horizontal */
  margin-left:-3.4vh;           /* ≈ -50% du diamètre du rond (6.8vh / 2) */
  border-radius:0 1000vh 1000vh 0;  /* bord droit très arrondi */
  border:.4vh solid #fff;       /* bordure un peu moins épaisse */
  background:linear-gradient(to bottom, rgb(19,73,158), rgb(39,170,225));
  color:#fff;
  font-weight:800;
  letter-spacing:.15vh;
  box-shadow:0 1vh 2.4vh rgba(0,0,0,.20);
  z-index:1;
  transform:translateZ(0);
}

/* Streak overlay : par défaut présent dans le flux (flex), mais invisible */
.streak-box{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;                         /* base = invisible */
  transform:scale(.98);              /* petit zoom-out au repos */
  transition: opacity .22s ease, transform .22s ease;
  pointer-events:none;               /* inactif quand invisible */
  z-index:50;
  background-color: rgba(0,0,0,0.4);
}

/* .show est la SEULE classe qui rend visible (showStreakBox l’ajoute) */
.streak-box.show{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

/* Optionnel: .hidden force display:none quand hideStreakBox a fini */
.streak-box.hidden{
  display:none !important;
}

/* La zone “échelle” : taille, style */
.streak-box .ladder{
  position:relative;                 /* nécessaire pour positionner le curseur */
  height:auto;                       /* selon le contenu */
  width:40%;                         /* paysage */
  background:rgba(0,0,0,1);
  border-radius:1vh;
  padding:2vh;
  box-shadow:0 1.2vh 3vh rgba(0,0,0,.35);
}

/* Ligne d’échelle (assure une hauteur constante) */
.ladder .row{
  height:28px;                       /* ⚠️ doit matcher rowH dans ton JS (28) */
  display:flex; align-items:center; justify-content:space-between;
  gap:1vh;
}

/* Curseur animé par le JS (translateY) */
.streak-cursor{
  position:absolute; left:0; right:0;
  height:28px;                       /* même hauteur que .row */
  border-radius:1vh;
  background:linear-gradient(90deg, rgba(39,170,225,.4), rgba(19,73,158,.4));
  pointer-events:none;
  transition: transform 700ms ease;  /* ⚠️ doit matcher CURSOR_MS dans le JS */
    /*background-color: #A45;*/
}


.play-question{
	flex:0 0 40vh;    /* 40% de la hauteur écran */
	height:40vh;
	display:flex; align-items:center; justify-content:center;
	background:center/contain no-repeat url("images/brou.png"); /* remplace l’image */
	background-size: 100% 100%;   /* prend 100% de la largeur ET 100% de la hauteur */
	background-repeat: no-repeat; /* pas de répétition */
	background-position: center;  /* bien centré */
}
.question-text{
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:2vh 4vh;
  width:100%;
  height:100%;
  color: #FFF;
  font-size: 2.5vh;
  font-family:"RubikBold", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.play-timer{
  flex:0 0 10vh;    /* 10% de la hauteur écran */
  height:10vh;
  display:flex; align-items:center; justify-content:center;
}
.timer-sprite{
  max-height:100%;
  width:auto;
}
.play-choices{
  /* Paysage : 40% écran ; Portrait : 30% (géré plus bas) */
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:2vh;
  padding:2vh;
}
.choice{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2.2vh 3.2vh;
  border:none;
  border-radius:1000vh;  /* arrondi total */
  /*background:linear-gradient(to bottom, rgb(25,94,168), rgb(19,73,158));*/
  background: -webkit-radial-gradient(50% 50%, circle, rgb(158, 93, 167), rgb(132, 65, 152));
	background:     -moz-radial-gradient(50% 50%, circle, rgb(158, 93, 167), rgb(132, 65, 152)));
	background:         -ms-radial-gradient(50% 50%, circle, rgb(158, 93, 167), rgb(132, 65, 152));
	background:             -o-radial-gradient(50% 50%, circle, rgb(158, 93, 167), rgb(132, 65, 152));
	background:                 radial-gradient(circle at 50% 50%, rgb(158, 93, 167), rgb(132, 65, 152));
	border: 2px solid #ccc;    /* optionnel */
  color:#fff; font-weight:700;
  box-shadow:0 1vh 3vh rgba(0,0,0,.25);
  cursor:pointer;
  min-height:4.4vh;
  gap : 2vh;
  font-size: 1.8vh;
  font-family:"RubikBold", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.choice > span{
  display:block;
  width:100%;
}
.choice:active { transform: scale(.98); }
.choice.correct  {
	background: #0e3;
	border-color: #0e3;
	color: #041;
	border: 2px solid #ccc;    /* optionnel */
	background: -webkit-radial-gradient(50% 50%, circle, rgb(13, 146, 112), rgb(8, 139, 94));
	background:     -moz-radial-gradient(50% 50%, circle, rgb(13, 146, 112), rgb(8, 139, 94));
	background:         -ms-radial-gradient(50% 50%, circle, rgb(13, 146, 112), rgb(8, 139, 94));
	background:             -o-radial-gradient(50% 50%, circle, rgb(13, 146, 112), rgb(8, 139, 94));
	background:                 radial-gradient(circle at 50% 50%, rgb(13, 146, 112), rgb(8, 139, 94));
}
.choice.wrong    {
	background: #e33;
	border-color: #e33;
	color: #300;
	border: 2px solid #ccc;    /* optionnel */
	background: -webkit-radial-gradient(50% 50%, circle, rgb(174, 10, 50), rgb(150, 10, 10));
	background:     -moz-radial-gradient(50% 50%, circle, rgb(174, 10, 50), rgb(150, 10, 10));
	background:         -ms-radial-gradient(50% 50%, circle, rgb(174, 10, 50), rgb(150, 10, 10));
	background:             -o-radial-gradient(50% 50%, circle, rgb(174, 10, 50), rgb(150, 10, 10));
	background:                 radial-gradient(circle at 50% 50%, rgb(174, 10, 50), rgb(150, 10, 10));
}
.choice.disabled {  }
/*.choice span { display: inline-block; }*/
.choice.correct-answer {
  /*background-color: white !important;*/
  color: black !important;   /* pour que le texte reste lisible */
  border: 2px solid #ccc;    /* optionnel */
  background: -webkit-radial-gradient(50% 50%, circle, rgb(25, 94, 168), rgb(19, 73, 158));
	background:     -moz-radial-gradient(50% 50%, circle, rgb(25, 94, 168), rgb(19, 73, 158));
	background:         -ms-radial-gradient(50% 50%, circle, rgb(25, 94, 168), rgb(19, 73, 158));
	background:             -o-radial-gradient(50% 50%, circle, rgb(25, 94, 168), rgb(19, 73, 158));
	background:                 radial-gradient(circle at 50% 50%, rgb(25, 94, 168), rgb(19, 73, 158));
}

/* ========== Popup de fin ========== */
.end-card { text-align: center; }
.end-score {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: 1vh;
  justify-content: center;
  align-items: baseline;
  margin: 8px 0 12px;
  padding-top: 1vh;
  padding-bottom : 1vh;
  font-size: 3vh;
  color: #FFF;
  background-color: rgba(255,255,255,0.1);
}
.end-stars { margin: 8px 0 16px; }
.end-stars img { width: 180px; height: auto; }
.end-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;                /* occupe toute la largeur dispo */
	padding: 0 3vw;
}
#btn-end-share, #btn-end-share2  {
  margin: 0 auto;             /* pousse automatiquement pour rester au centre */
}
.img-btn { background: transparent; border: none; padding: 0; }
.img-btn img { width: 5vh; height: 5vh; display: block; }
.zesta{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	margin: 0 auto;
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(85, 188, 13)), to(rgb(85, 188, 13)));
	background: -moz-linear-gradient(top,  rgb(85, 188, 13),  rgb(85, 188, 13));
	color: #FFF;
	padding : 1vh;
	font-family:"Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 2vh;
	border-radius : 2vh;
	border:.3vh solid #fff;
	letter-spacing:.15vh;
}
.txtQuit{
	font-size : 2.5vh;
	text-align : center;
}
.noir{
	color: #000;
}
.tip{
	text-align: center;
}
/* Overlay pub / bloqueur de clics */
#ad-overlay { 
  position: fixed; inset: 0; 
  display: none;            /* caché par défaut */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0);/* transparent (change l’opacité si tu veux assombrir) */
  z-index: 10000;
  pointer-events: all;       /* capte les clics */
}
#ad-overlay.show { display: flex; }
#ad-overlay .ad-slot {
  pointer-events: none;      /* rien de cliquable pour l’instant */
}



























/* ====== PORTRAIT ====== */
@media (orientation:portrait){
	.fond_afa{
		background:center/cover no-repeat url("./images/bg-portrait2.png");
		gap : 20vh;
	}
	#logo_ban{
		width : 80%;
		height: auto;
		/*background-color: #789521;*/
	}
	#io{
		font-size: 3.2vh;
	}
	#tapeo{
		font-size: 3.2vh;
	}
  .home-wrap{ flex-direction:column; }
  .split-left, .split-right{ width:100%; height:calc(98vh * 0.5); }
  .home-buttons{
    gap:6vw;                                         /* gaps plus fins en portrait */
    width:calc((100vw - 2vh) * 0.8);
    max-width:calc((100vw - 2vh) * 0.8);
    height:calc(98vh * 0.5 * 0.9);                   /* groupe≤90% de la moitié */
    max-height:calc(98vh * 0.5 * 0.9);
  }
  .left-img{
    max-width:calc((100vw - 2vh) * 0.8);
    max-height:calc(98vh * 0.5 * 0.8);
  }
  .home-buttons > .btn{
    min-height: calc( (98vh * 0.5 * 0.9 - 5 * 6vh) / 6 );
    font-size:  calc( ((98vh * 0.5 * 0.9 - 5 * 6vh) / 6) * 1.1);
  }
  .btn::after{
    height: calc( ((98vh * 0.5 * 0.9 - 5 * 6vh) / 6) * 2.5 );
    width:  calc( ((98vh * 0.5 * 0.9 - 5 * 6vh) / 6) * 2.5 );
    right:  calc( ((98vh * 0.5 * 0.9 - 5 * 6vh) / 6) * 0.4 );
  }
  #btn-settings {
    width: 10vw;   /* carré */
    height: 10vw;
  }
  
  /********PARTIE SETTINGS*******/
  /* Titre */
	.settings-title{
	  height:15%; /* portrait par défaut (15% du parent) */
	}
	.settings-title h2{
	  font-size:4.6vh; letter-spacing:.15vh;
	}
	.settings-wrap{ flex-direction:column; height : 85%; }
	.settings-block .block-icon{
		flex-basis:20%;
		height:20%;
	  }
	#btn-back-home, #btn-fav-back, #close-donate, #close-share, #close-message, #close-askDonate {
	  top:2vw;          /* distance depuis le haut */
	  left:2vw;         /* distance depuis la gauche */
	  width:7vw;        /* taille du bouton */
	  height:7vw;      /* toujours au-dessus des autres contenus */
	}
	.child{
		border-bottom:none;
	}
	.popup-card {
		width : 80%;
		border: 0.3vh solid #563B6B;
		box-shadow:	inset 0 0 0 0.2vh #fff;
		border-radius: 2vh;
	}
	
	/********PARTIE POP UP QUITTER*******/
	#ask-quit-text{
		font-size : 4vh;
		color: #FFF;
	}
	#cancel-quit, #confirm-quit{
		margin: auto 1vw 1vw 1vw; /* marge à droite et en bas */
		font-size: 2vh;
		padding : 2vh;
	}
	
	/********PARTIE FAVOURITE*******/
	.fav-container{ flex-direction:column; height : 85%; }
	.fav-card {
		padding : 2vh;
		border-radius: 2vh;
	}
	#fav-usercat{
		align-items:stretch;   /* chaque enfant peut s’auto-aligner */
		gap:2vh;
		height: 100%;
	}
	
	/********PARTIE JOUER*******/
	.play-hud .score-box{ display:none; }
	.play-tools{
		display:flex;
		height: 10vh;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	/* Cacher les labels des tools en portrait */
	.tool-btn .labelAction{ display:none; }

	/* Streak : largeur 80% */
	.streak-box .ladder{ width:80%; }  /* portrait */

	/* Question : image de fond portrait */
	.play-question{
		background-image:url("images/brou.png");
		background-size: 100% 100%;   /* prend 100% de la largeur ET 100% de la hauteur */
		background-repeat: no-repeat; /* pas de répétition */
		background-position: center;  /* bien centré */
	}

	/* Timer : limiter la largeur du sprite à 80% */
	.timer-sprite{ max-width:80%; }

	/* Choix : hauteur 30% écran, colonne unique */
	.play-choices{
		flex:0 0 30vh;
		height:30vh;
		flex-direction:column;
		flex-wrap:nowrap;
	}
	.play-choices .choice{
		flex:1 1 0;
		width:80%;      /* 80% en portrait */
		margin:0 auto;
	}
	.ngeza{
		font-size: 2.2vh;
		text-align : center;
	}
	.sary {
		width: 80%;
		height: auto;
	}
	.hm{
		gap : 6vh;
	}
	.install-btn{
	  /* layout */
	  display:inline-flex;
	  align-items:center;
	  justify-content:center;
	  gap: 1.2vh;

	  /* dimensions fluides */
	  padding: 1.6vw 3vh;
	  /*min-height: 6.5vw;
	  min-width: 24vh;*/
	  border-radius: 2.2vh;
	  border: none;

	  /* typo fluide */
	  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	  font-weight: 700;
	  /*font-size: clamp(2.6vh, 2.2vh + 0.3vw, 3.2vh);*/
	  font-size: 2vh;
	  letter-spacing: 0.08vh;

	  /* couleurs & effets (vw/vh only) */
	  color:#fff;
	  background: linear-gradient(145deg, #1ec47e, #0ba864);
	  box-shadow: 0 0 1.2vw rgba(14,180,110,0.55);

	  /* interactions */
	  cursor:pointer;
	  transition: transform 0.2s ease, box-shadow 0.2s ease;
	  transform-origin: center;
	}

	.install-btn .btn-icon{
	  width: 3.2vh;      /* lié à la hauteur d’écran */
	  height: 3.2vh;
	  object-fit: contain;
	  flex-shrink: 0;
	  filter: drop-shadow(0 0 0.6vw rgba(0,0,0,0.2));
	}

}

/* ====== PAYSAGE ====== */
@media (orientation:landscape){
  .screen{ background-image:url("./images/bg-landscape.png"); }
  .fond_afa{
		background:center/100% 100% no-repeat url("./images/bg-landscape2.png");
		gap : 4vw;
	}
	#logo_ban{
		width : 30%;
		height: auto;
		/*background-color: #789521;*/
	}
	#io{
		font-size: 3.2vw;
	}
	#tapeo{
		font-size: 2.5vw;
	}
  .divider{
    display:block;
    width:1.2vh; height:calc(98vh * 0.8);
    background:rgba(255,255,255,.75);
    border-radius:1vh; box-shadow:0 .4vh 2vh rgba(0,0,0,.25) inset;
  }
  .home-buttons{
    gap:9vh;                                         /* plus d’air en paysage */
    width:calc((100vw - 2vh) * 0.5 * 0.8);
    max-width:calc((100vw - 2vh) * 0.5 * 0.8);
    height:calc(98vh * 0.8);
    max-height:calc(98vh * 0.8);
  }
  .home-buttons > .btn{
    min-height: calc( (98vh * 0.8 - 5 * 9vh) / 6 );
    font-size:  calc( ((98vh * 0.8 - 5 * 9vh) / 6) * 0.99 );
  }
  .btn::after{
    height: calc( ((98vh * 0.8 - 5 * 9vh) / 6) * 1.5 );
    width:  calc( ((98vh * 0.8 - 5 * 9vh) / 6) * 1.5 );
    right:  calc( ((98vh * 0.8 - 5 * 9vh) / 6) * 0.4 );
  }
  #btn-settings {
    width: 9vh;   /* plus petit en paysage */
    height: 9vh;
  }
  
  
  /********PARTIE SETTINGS*******/
  .settings-title{ height:20%; }         /* 20% du parent */
  .settings-title h2{ font-size:4vw; letter-spacing:.15vw; }
  .settings-wrap{ flex-direction:row; height : 80%;}
  #btn-back-home, #btn-fav-back, #close-donate, #close-share, #close-message, #close-askDonate {
	  top:2vh;          /* distance depuis le haut */
	  left:2vh;         /* distance depuis la gauche */
	  width:7vh;        /* taille du bouton */
	  height:7vh;      /* toujours au-dessus des autres contenus */
	}
	.child span{
	  justify-self:end;               /* colle le texte à droite */
	  text-align:right;
	  min-width:0;
	  font-size:2.2vw;
	}
	.child span.kel{
	  font-size:1.5vw;
	}
	label.child select {
	  max-width:50%;
	  justify-self:end;
	  font-size:2vw;
	}
	.settings-block .btn-group {
	  flex:1 1 0;          /* prend sa part de la zone basse */
	  display:flex;
	  flex-direction:column;
	  gap:1vw;             /* espace entre les boutons */
	  min-height:0;
	}

	.settings-block .btn-group .btn {
	  flex:1 1 0;          /* boutons de hauteurs égales */
	  border-bottom : none;
	  font-size : 4vh;
	  margin-bottom : 2vw;
	  margin-top : 2vw;
	  
	  display:flex;        /* bouton devient flex-container */
	  align-items:center;  /* centre verticalement le texte */
	  justify-content:center; /* centre horizontalement le texte */
	  text-align:center;   /* si texte multi-ligne */
	}
	.popup-card {
		width : 60%;
		background:
      url("images/fond_mom.png") no-repeat center bottom / 100% auto,
      radial-gradient(circle at 50% 50%, rgb(164,103,176), rgb(126,81,155));
	}
	.popup-card h3 {
	  height: 8vw;             /* hauteur relative à l'écran */
	  margin: 0 auto 2vw auto;
	  width: 100%;
	}
	.popup-body {
	  margin: 0 1vw 1vw;
	  font-size : 2vw;
	}
	#close-appinfo, #close-credits {
	  margin: auto 1vh 1vh auto; /* marge à droite et en bas */
	  font-size: 2vw;
	  padding : 2vw;
	}
	
	/********PARTIE POP UP QUITTER*******/
	#ask-quit-text{
		font-size : 5vw;
		color: #FFF;
	}
	#cancel-quit, #confirm-quit{
		margin: auto 1vh 1vh 1vh; /* marge à droite et en bas */
		font-size: 2vw;
		padding : 2vw;
	}
	
	/********PARTIE FAVOURITE*******/
	.fav-container{ flex-direction:row; height : 80%;}
	.fav-card {
		padding : 2vw;
		border-radius: 2vw;
		border: 0.2vw solid #563B6B;
	box-shadow:	inset 0 0 0 0.1vw #fff;
	}
	.fav-card-title {
	  font-weight: 600;
	  font-size: 2.5vw;
	  height : 15%;
	}
	.fav-card-body {
		font-size: 2vw;
		color: #FFF;
		height : 85%;
	}
	#fav-usercat{
		align-items:stretch;   /* chaque enfant peut s’auto-aligner */
		gap:2vw;
		height: 100%;
	}
	#divScore  {
		padding:1.2vw 2.2vw;
		border-radius:2vw;
		font-size:2vw;
		box-shadow:0 1vw 3vw rgba(0,0,0,.25);
	}
	#divName   {
		padding:0 2vw; 
		font-size:3.4vw;
	}
	
	/********PARTIE DONATE*******/
	.popup-content {
		width: 92vw; 
	}

	.popup-content h3 {
		font-size: 2.5vw;
		padding-bottom : 1vw;
	}
	.popup-text {
		margin: 0 0 1vw;
		font-size: 2vw;
		padding : 1.5vw;
	}
	.ngeza{
		font-size: 2.1vw;
		text-align : center;
	}
	.payline{
		flex-direction : row;
	}
	.tiny{ padding-top: 1vw; }
	.fav-offline {
		font-size: 2vw;
	}
	
	
	
	/********PARTIE JOUER*******/
	.score-box-2{ display:none; }
	.score-value{
		height: 2.5vw;                 /* un peu plus petit que le rond */
		min-width:10vw;               /* largeur mini (≈ “00000”) */
		padding:0 1vw;                /* padding horizontal */
		margin-left:-2.4vw;           /* ≈ -50% du diamètre du rond (6.8vh / 2) */
		border-radius:0 1000vw 1000vw 0;  /* bord droit très arrondi */
		border:.25vw solid #fff;       /* bordure un peu moins épaisse */
		background:linear-gradient(to bottom, rgb(19,73,158), rgb(39,170,225));
		font-weight:800;
		letter-spacing:.15vw;
		box-shadow:0 1vw 2.4vw rgba(0,0,0,.20);
		font-size: 1vw;
	}
	.score-label{
		height:3vw;                /* rond visible dans la barre de 10vh */
		width: 3vw;
		border:.4vw solid #fff;      /* bordure épaisse blanche */
		color:#fff;
		font-weight:700;
		box-shadow:0 1vw 2.4vw rgba(0,0,0,.25);
		font-size: 1.5vw;
	}
	/* Choix : hauteur 30% écran, colonne unique */
	.play-choices{
		height:40vh;
		flex-wrap:wrap;
		flex-direction: row;    /* disposition horizontale */
		flex-wrap: wrap;        /* retour à la ligne → 2 lignes */
		align-items: center;
		justify-content: center;
		gap: 3vh 4vw;           /* vertical / horizontal */
	}
	.play-choices .choice{
		flex: 0 0 40%;          /* largeur ≈ 40% du parent */
		max-width: 40%;
		gap : 2vw;
		font-size: 1.5vw;
	}
	.question-text{
		font-size: 2vw;
	}
	
	.end-score {
	  gap: 1vw;
	  margin: 8px 0 12px;
	  padding-top: 1vw;
	  padding-bottom : 1vw;
	  font-size: 3vw;
	}
	.img-btn img { width: 5vw; height: 5vw; display: block; }
	.zesta{
		padding : 1vw;
		font-size: 2vw;
		border-radius : 2vw;
		border:.3vw solid #fff;
		letter-spacing:.15vw;
	}
	.txtQuit{
		font-size : 2.5vw;
		text-align : center;
	}
	.sary {
		width: 60%;
		height: auto;
	}
	.hm{
		gap : 6vw;
	}
	
	.install-btn{
	  /* layout */
	  display:inline-flex;
	  align-items:center;
	  justify-content:center;
	  gap: 1.2vw;

	  /* dimensions fluides */
	  padding: 1.6vh 3vw;
	  /*min-height: 6.5vh;
	  min-width: 24vw;*/
	  border-radius: 2.2vw;
	  border: none;

	  /* typo fluide */
	  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	  font-weight: 700;
	  /*font-size: clamp(2.6vw, 2.2vw + 0.3vh, 3.2vw);*/
	  font-size: 2.5vw;
	  letter-spacing: 0.08vw;

	  /* couleurs & effets (vw/vh only) */
	  color:#fff;
	  background: linear-gradient(145deg, #1ec47e, #0ba864);
	  box-shadow: 0 0 1.2vw rgba(14,180,110,0.55);

	  /* interactions */
	  cursor:pointer;
	  transition: transform 0.2s ease, box-shadow 0.2s ease;
	  transform-origin: center;
	}

	.install-btn .btn-icon{
	  width: 3.2vw;      /* lié à la hauteur d’écran */
	  height: 3.2vw;
	  object-fit: contain;
	  flex-shrink: 0;
	  filter: drop-shadow(0 0 0.6vw rgba(0,0,0,0.2));
	}
	

}