/* ————— Tokens — palette "ciel doux" ————— */
:root {
  --ciel-haut: #b5ddf2;
  --ciel-mi: #e2f1f2;
  --ciel-bas: #fdf0e2;
  --creme: #fffaf1;
  --creme-fonce: #f0e4d2;
  --brun: #6d5c4d;
  --brun-doux: #a08d7a;
  --corail: #ef8b76;
  --corail-fonce: #d97663;
  --peche: #f3a98d;
  /* Texte posé sur un accent : bascule en encre sombre si la marque est pâle */
  --on-corail: #fff;
  --on-peche: #fff;
  /* Teinte d'accent très diluée (rond d'icône de la feuille) */
  --accent-soft: rgba(239, 139, 118, 0.14);
  /* Ombre du titre d'intro : dépend de la clarté du ciel, pas du nom du thème */
  --h1-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
  --display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}

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

/* Thème sushi : ciel sakura, accents rouge laque */
body.theme-sushi {
  --ciel-haut: #f6d7d1;
  --ciel-mi: #fbeee4;
  --ciel-bas: #fdf7ea;
  --corail: #d95757;
  --corail-fonce: #b84848;
  --peche: #e2837a;
}

/* Thème roue : nuit indigo, néons */
body.theme-roue {
  --h1-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --ciel-haut: #0d1020;
  --ciel-mi: #161b30;
  --ciel-bas: #232a4d;
  --brun: #eef0ff;
  --brun-doux: #a9b0d6;
  --corail: #c2a055;
  --corail-fonce: #9c7f40;
  --peche: #8f6b32;
}

/* Thème cartes : velours bordeaux, or */
body.theme-cartes {
  --h1-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --ciel-haut: #23101a;
  --ciel-mi: #421a2c;
  --ciel-bas: #5e2a3e;
  --brun: #f4ecdf;
  --brun-doux: #c7b0b8;
  --corail: #c9a45c;
  --corail-fonce: #a3833f;
  --peche: #8d3a52;
}

/* Thème booster : vitrine claire, pour que l'holographique ressorte */
body.theme-booster {
  --ciel-haut: #cfc9e8;
  --ciel-mi: #e6e2f3;
  --ciel-bas: #fbf7fd;
  --corail: #8a63d2;
  --corail-fonce: #6f4cb8;
  --peche: #b58fe4;
}

/* Thème gratte : écrin pétrole, argent et or */
body.theme-gratte {
  --h1-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --ciel-haut: #1e353d;
  --ciel-mi: #2c4c54;
  --ciel-bas: #487074;
  --brun: #f2ece0;
  --brun-doux: #b8c2bd;
  --corail: #d9a33d;
  --corail-fonce: #b3852c;
  --peche: #c05b57;
}

/* Thème casino : velours nocturne, accents or */
body.theme-casino {
  --h1-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --ciel-haut: #221126;
  --ciel-mi: #3d1a2e;
  --ciel-bas: #5c2436;
  --brun: #f5e7d0;
  --brun-doux: #c9a98f;
  --corail: #d99a3d;
  --corail-fonce: #b37d2c;
  --peche: #c94f6d;
}


/* Thème italien : heure dorée toscane, accents tomate */
body.theme-italien {
  --ciel-haut: #f2cf9f;
  --ciel-mi: #f8e6c8;
  --ciel-bas: #fdf4e4;
  --corail: #cd5a4a;
  --corail-fonce: #ad4a3c;
  --peche: #dd9662;
}

html, body {
  height: 100%;
  overflow: hidden;
  /* Aucun geste natif (défilement, rebond, zoom) ne doit voler le doigt aux jeux */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-mi) 55%, var(--ciel-bas) 100%);
  color: var(--brun);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  /* indispensable pour le grattage : sans ça, le navigateur
     transforme le glissement du doigt en défilement et coupe
     les événements pointer */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ————— Menus (jeux, univers) ————— */
.menu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.2rem, 4vw, 2.5rem);
  z-index: 10;
  color: #fff;
  background: rgba(24, 26, 32, 0.42);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  transition: opacity 0.4s ease;
}

.menu.hidden {
  opacity: 0;
  pointer-events: none;
}

.menu-panel {
  position: relative;
  width: min(40rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding-top: 0.5rem;
}

.menu-back {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.35rem 0.2rem;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.menu-back:hover { color: #fff; }
.menu-back:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; border-radius: 4px; }

.kicker {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.55rem;
}

.menu-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.01em;
}

.menu-sub {
  margin-top: 0.6rem;
  max-width: 32rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

@media (min-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
}

.gcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 0.85rem;
  text-align: left;
  font-family: var(--body);
  color: #3f3630;
  background: rgba(255, 251, 244, 0.97);
  border: 1px solid rgba(63, 54, 48, 0.08);
  border-radius: 1.1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.gcard:hover {
  transform: translateY(-1px);
  border-color: rgba(63, 54, 48, 0.2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.gcard:active { transform: translateY(0); }
.gcard:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.gcard-icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: #f1e9db;
  font-size: 1.35rem;
  line-height: 1;
}

.gcard-body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }

.gcard-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.15;
  color: #3f3630;
}

.gcard-desc {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #8f8273;
}

.gcard-arrow {
  font-size: 1.1rem;
  font-weight: 700;
  color: #b9ab98;
  transition: transform 0.16s ease, color 0.16s ease;
}

.gcard:hover .gcard-arrow { transform: translateX(3px); color: #6d5c4d; }

/* ————— Retour aux thèmes ————— */
.back {
  position: fixed;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 5;
  padding: 0.45rem 0.95rem;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 800;
  color: #3f3630;
  background: rgba(255, 251, 244, 0.9);
  border: 1px solid rgba(63, 54, 48, 0.1);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.back:hover { transform: translateY(-1px); }
.back:focus-visible { outline: 3px solid var(--peche); outline-offset: 2px; }

/* ————— Intro ————— */
.intro {
  position: fixed;
  top: clamp(2.5rem, 8vh, 5rem);
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.intro.hidden {
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
}

.eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--on-peche);
  background: var(--peche);
  padding: 0.35rem 1.05rem;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(109, 92, 77, 0.15);
  margin-bottom: 1rem;
}

.intro h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.05;
  color: var(--brun);
  text-shadow: var(--h1-shadow);
}

.hint {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #7a6a58;
  background: rgba(255, 252, 245, 0.82);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(60, 50, 40, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: bounceHint 2.2s ease-in-out infinite;
}

@keyframes bounceHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ————— Reveal ————— */
/* Sans ça, `display: flex` l'emporte sur l'attribut hidden : la carte reste
   invisible mais intercepte les taps dans le bas de l'écran */
.reveal[hidden] { display: none; }

.reveal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(1.6rem, 7vh, 4rem);
  pointer-events: none;
}

.card {
  /* Le texte reste sombre sur fond crème, quel que soit le ciel derrière */
  --brun: #6d5c4d;
  --brun-doux: #a08d7a;
  pointer-events: auto;
  text-align: center;
  max-width: 26rem;
  width: min(26rem, calc(100vw - 2.4rem));
  padding: 1.9rem 2rem 1.4rem;
  border-radius: 2.2rem;
  background: var(--creme);
  border: 2px solid var(--creme-fonce);
  box-shadow: 0 18px 45px rgba(109, 92, 77, 0.22);
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.visible .card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card .eyebrow { margin-bottom: 0.8rem; }

.card h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--brun);
}

.terms {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brun-doux);
}

.unlock {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brun);
}

.cta {
  margin-top: 0.75rem;
  width: 100%;
  padding: 0.95rem 1.4rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-corail);
  background: var(--corail);
  border: none;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--corail-fonce);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--corail-fonce); }
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--corail-fonce); }
.cta:disabled { background: #cbbfb2; box-shadow: 0 5px 0 #ac9f92; cursor: default; }
.cta:focus-visible, .again:focus-visible { outline: 3px solid var(--peche); outline-offset: 3px; }

.again {
  margin-top: 0.8rem;
  padding: 0.4rem;
  width: 100%;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brun-doux);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.again:hover { color: var(--brun); }

/* ————— Footer ————— */
.brand {
  position: fixed;
  bottom: 0.9rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(109, 92, 77, 0.35);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hint { animation: none; }
  .card, .intro { transition-duration: 0.01s; }
}

/* ————— Interrupteur « scénario avis » (menu des jeux) ————— */
.switch {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.3rem;
  padding: 0.75rem 0.95rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
  position: relative;
  width: 2.7rem;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  transition: background 0.2s ease;
}

.switch-thumb {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.switch input:checked + .switch-track { background: var(--corail); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(1.15rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid #fff; outline-offset: 3px; }

.switch-text { display: flex; flex-direction: column; gap: 0.1rem; }
.switch-name { font-size: 0.9rem; font-weight: 800; color: #fff; }
.switch-desc { font-size: 0.76rem; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.66); }

/* ————— Appel à participer (vue du jeu) ————— */
/* `display: inline-block` l'emporterait sur l'attribut hidden */
.hint[hidden], .startcta[hidden] { display: none; }

.startcta {
  position: fixed;
  left: 50%;
  bottom: clamp(2rem, 9vh, 4.5rem);
  z-index: 6;
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 2.8rem));
  padding: 1rem 1.4rem;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-corail);
  background: var(--corail);
  border: none;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--corail-fonce), 0 12px 30px rgba(30, 24, 18, 0.22);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.startcta:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 7px 0 var(--corail-fonce), 0 14px 34px rgba(30, 24, 18, 0.24); }
.startcta:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 2px 0 var(--corail-fonce); }
.startcta:focus-visible { outline: 3px solid var(--peche); outline-offset: 3px; }

/* ————— Parcours de participation ————— */
.flow {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(24, 26, 32, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* `display: flex` l'emporterait sur l'attribut hidden : l'overlay resterait
   invisible mais continuerait d'intercepter les clics */
.flow[hidden], .gpage[hidden] { display: none; }

.flow.visible { opacity: 1; }

.sheet {
  /* le texte reste sombre, même sur les thèmes nocturnes */
  --brun: #6d5c4d;
  --brun-doux: #a08d7a;
  width: min(30rem, 100%);
  max-height: 94vh;
  overflow-y: auto;
  padding: 2rem 1.6rem calc(1.4rem + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--brun);
  background: var(--creme);
  border-radius: 1.8rem 1.8rem 0 0;
  box-shadow: 0 -10px 45px rgba(30, 24, 18, 0.28);
  transform: translateY(16px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 640px) {
  .flow { align-items: center; }
  .sheet { border-radius: 1.8rem; max-height: 88vh; }
}

.flow.visible .sheet { transform: translateY(0); }

.sheet-icon {
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  margin: 0 auto 1.2rem;
  font-size: 2.7rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--accent-soft);
}

.sheet-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  line-height: 1.18;
  color: var(--brun);
}

.sheet-title .accent { color: var(--corail-fonce); }

.sheet-body { margin-top: 0.85rem; font-size: 0.95rem; font-weight: 600; line-height: 1.5; color: var(--brun-doux); }
.sheet-body p + p { margin-top: 0.6rem; }
.sheet-body b { color: var(--brun); }
.sheet-body .small { font-size: 0.8rem; }
.sheet-body .steps + .small { margin-top: 0.9rem; }
.sheet-body p + .steps { margin-top: 1rem; }

/* Liste numérotée « comment participer » */
.steps { list-style: none; margin-top: 1.1rem; text-align: left; display: grid; gap: 0.75rem; }

.steps li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; }

.steps .num {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: var(--brun);
}

.steps p { font-size: 0.92rem; font-weight: 700; line-height: 1.35; color: var(--brun); }

/* Champs de formulaire */
.field {
  display: block;
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brun);
  background: #fff;
  border: 1.5px solid var(--creme-fonce);
  border-radius: 0.9rem;
  outline: none;
  transition: border-color 0.18s ease;
}

.field::placeholder { color: #c5b7a6; font-weight: 600; }
.field:focus { border-color: var(--corail); }
.field[hidden] { display: none; }

.fielderr { margin-top: 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--corail-fonce); }

.optin {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem;
  margin-top: 1rem;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brun-doux);
  cursor: pointer;
}

.optin[hidden] { display: none; }

.optin input {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.05rem;
  accent-color: var(--corail);
  cursor: pointer;
}

.sheet .cta { margin-top: 1.3rem; }
.sheet .again { margin-top: 0.6rem; }
.sheet .again[hidden] { display: none; }

/* Points de progression */
.dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 1.1rem; min-height: 0.5rem; }

.dots span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #d8cbba;
  transition: width 0.25s ease, background 0.25s ease;
}

.dots span.on { width: 1.4rem; background: var(--corail); }

/* ————— Page d'avis simulée ————— */
.gpage {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.4rem;
  background: #f2f4f7;
  color: #2c2a28;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gpage.visible { opacity: 1; }

.gpage-sim {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8f98;
}

.gpage-card {
  width: min(26rem, 100%);
  padding: 1.8rem 1.5rem 1.5rem;
  text-align: center;
  background: #fff;
  border-radius: 1.4rem;
  box-shadow: 0 14px 40px rgba(20, 24, 32, 0.14);
}

.gpage-kicker {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8f98;
}

.gpage-name {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #2c2a28;
}

.gpage-stars { display: flex; justify-content: center; gap: 0.35rem; margin-top: 1.2rem; }

.gpage-stars button {
  padding: 0.2rem;
  font-size: 2rem;
  line-height: 1;
  color: #d7dbe0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.gpage-stars button.on { color: #f5b400; transform: scale(1.08); }
.gpage-stars button:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; border-radius: 4px; }

.gpage-hint { margin-top: 0.8rem; font-size: 0.84rem; font-weight: 600; color: #8a8f98; }
/* La page d'avis simulée doit rester Google, jamais aux couleurs du client */
.gpage .cta {
  margin-top: 1.2rem;
  color: #fff;
  background: #1a73e8;
  box-shadow: 0 5px 0 #1557b0;
}

.gpage .cta:hover { box-shadow: 0 7px 0 #1557b0; }
.gpage .cta:active { box-shadow: 0 2px 0 #1557b0; }
.gpage .cta:disabled { background: #c6cdd6; box-shadow: 0 5px 0 #a8b1bc; }
.gpage .cta:focus-visible { outline: 3px solid #4285f4; }

@media (prefers-reduced-motion: reduce) {
  .flow, .sheet, .gpage, .switch-thumb, .dots span { transition-duration: 0.01s; }
}

/* ————— Panneau « Marque du client » (menu des jeux) ————— */
.brandbox {
  margin-top: 0.6rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.brandbox-sum {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.95rem;
  cursor: pointer;
  list-style: none;
}

.brandbox-sum::-webkit-details-marker { display: none; }

.brandbox-sum::after {
  content: '⌄';
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease;
}

.brandbox[open] .brandbox-sum::after { transform: rotate(180deg); }
.brandbox-sum:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 1rem; }

/* Pastille d'aperçu de la couleur retenue */
.brandbox-dot {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--corail);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.brandbox-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.2rem 0.95rem 0.95rem;
}

.bfield { display: grid; gap: 0.35rem; }

.bfield-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.bfield-row { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.5rem; align-items: center; }

.brandbox input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.65rem;
  outline: none;
}

.brandbox input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.4); font-weight: 600; }
.brandbox input[type="text"]:focus { border-color: rgba(255, 255, 255, 0.6); }

.brandbox input[type="color"] {
  width: 2.6rem;
  height: 2.35rem;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.65rem;
  cursor: pointer;
}

.brandbox input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.brandbox input[type="color"]::-webkit-color-swatch { border: none; border-radius: 0.45rem; }

.bfield-note {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: #ffd9c9;
}

.bfield-note[hidden] { display: none; }

.brandbox-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.15rem; }

.blink {
  flex: 1 1 auto;
  padding: 0.55rem 0.7rem;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.65rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.blink:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.blink:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Aperçu du logo : damier pour juger la transparence */
.bfield-preview {
  display: grid;
  place-items: center;
  padding: 0.6rem;
  border-radius: 0.65rem;
  background-color: rgba(255, 255, 255, 0.9);
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bfield-preview[hidden] { display: none; }

.bfield-inline {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.bfield-inline input { width: 1.1rem; height: 1.1rem; accent-color: var(--corail); cursor: pointer; }
.bfield-preview img { max-width: 100%; max-height: 4.5rem; object-fit: contain; }

/* ————— Le logo du client dans les visuels ————— */
/* Contain partout : un logo carré comme un bandeau très large restent lisibles */
.brandmark {
  display: block;
  max-width: min(14rem, 60vw);
  max-height: 4.4rem;
  margin: 0 auto 1rem;
  object-fit: contain;
}

.brandmark[hidden] { display: none; }

/* Sur fond sombre, un logo sombre disparaîtrait : on lui pose une plaque claire */
body.is-dark .brandmark,
body.theme-casino .brandmark,
body.theme-roue .brandmark,
body.theme-gratte .brandmark,
body.theme-cartes .brandmark {
  padding: 0.5rem 0.9rem;
  border-radius: 0.9rem;
  background: rgba(255, 252, 245, 0.92);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Dans la carte crème, la plaque est inutile */
.brandmark-card,
body.is-dark .brandmark-card {
  max-height: 3rem;
  margin-bottom: 0.9rem;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Un logo est presque toujours dans la couleur de la marque : le poser sur une
   teinte de cette même couleur le ferait disparaître. La plaque reste neutre. */
.sheet-icon.has-logo { background: #fffdf8; box-shadow: inset 0 0 0 1px rgba(63, 54, 48, 0.08); }

/* Logo clair : toutes les plaques passent en sombre */
body.logo-clair .brandmark,
body.logo-clair .sheet-icon.has-logo,
body.logo-clair .gpage-logo,
body.logo-clair .bfield-preview {
  background: #2a2320;
  background-image: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.logo-clair .brandmark-card {
  padding: 0.5rem 0.9rem;
  border-radius: 0.9rem;
}

/* Le rond d'icône devient un cartouche quand il porte un logo large */
.sheet-icon img { max-width: 10.6rem; max-height: 4.6rem; object-fit: contain; }
.sheet-icon img[hidden] { display: none; }

.sheet-icon.has-logo {
  width: auto;
  height: auto;
  max-width: 13rem;
  padding: 0.75rem 1.1rem;
  border-radius: 1.2rem;
}

/* L'établissement noté, comme la photo d'un commerce sur une fiche Google */
.gpage-logo {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto 0.8rem;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 24, 32, 0.1);
}

.gpage-logo[hidden] { display: none; }

.bfield-label em { font-style: normal; font-weight: 700; color: rgba(255, 255, 255, 0.45); }

.brandbox input[type="file"] {
  width: 100%;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.brandbox input[type="file"]::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.45rem 0.7rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.5rem;
  cursor: pointer;
}

.bfield-file {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
}

.bfield-file[hidden] { display: none; }