:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #15151a;
  background: #f5f5f2;
  --ink: #15151a;
  --muted: #73737b;
  --surface: #ffffff;
  --line: #e7e7e3;
  --accent: #15151a;
  --soft: #eeeee9;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f5f5f2; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f5f5f2; }
button { font: inherit; }
button:focus-visible { outline: 3px solid #999; outline-offset: 3px; }

#app { min-height: 100vh; }
.app-shell { width: min(100% - 32px, 560px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 0 28px; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 4px 0 22px; }
.brand-mark { width: 34px; height: 34px; display: block; flex: 0 0 34px; border-radius: 11px; object-fit: contain; }
.brand-name { font-size: 15px; font-weight: 800; flex: 1; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }

.hero { padding: 34px 2px 26px; }
.hero-badge { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; background: var(--soft); font-size: 10px; font-weight: 900; letter-spacing: .13em; margin-bottom: 16px; }
.hero h1 { margin: 0; font-size: clamp(38px, 10vw, 58px); line-height: .98; letter-spacing: -.055em; }
.hero h1 span { color: #7b7b83; }
.hero p { max-width: 470px; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.sport-card { display: flex; align-items: center; gap: 14px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,.035); }
.sport-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--soft); font-size: 23px; }
.sport-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sport-copy span { font-size: 9px; font-weight: 900; letter-spacing: .14em; color: #8a8a91; }
.sport-copy strong { font-size: 17px; }
.sport-copy small { color: var(--muted); font-size: 12px; }
.chevron { font-size: 26px; color: #99999f; padding-right: 2px; }

.primary-button { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; padding: 18px 19px; border: 0; border-radius: 20px; background: var(--accent); color: white; cursor: pointer; box-shadow: 0 12px 26px rgba(0,0,0,.12); transition: transform .15s ease, opacity .15s ease; }
.primary-button:hover { opacity: .92; }
.primary-button:active { transform: translateY(1px); }
.primary-button span:first-child { font-size: 18px; font-weight: 850; }
.button-arrow { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 19px; }

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.menu-card { min-height: 84px; display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.menu-card:last-child { grid-column: 1 / -1; }
.menu-card:hover { transform: translateY(-1px); border-color: #d2d2cd; }
.menu-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 12px; background: var(--soft); font-size: 16px; font-weight: 800; }
.menu-card span:last-child { display: flex; flex-direction: column; gap: 3px; }
.menu-card strong { font-size: 13px; }
.menu-card small { color: var(--muted); font-size: 11px; }

footer { padding: 25px 2px 0; color: #9a9a9f; font-size: 11px; text-align: center; }

.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: end center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.38); backdrop-filter: blur(3px); }
.modal-card { position: relative; width: min(100% - 24px, 520px); margin-bottom: 12px; padding: 27px 22px 22px; border-radius: 25px; background: white; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal-close { position: absolute; top: 13px; right: 13px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--soft); cursor: pointer; font-size: 21px; }
.modal-kicker { font-size: 10px; font-weight: 900; letter-spacing: .13em; color: #85858c; }
.modal-card h2 { margin: 9px 40px 8px 0; font-size: 25px; line-height: 1.08; letter-spacing: -.03em; }
.modal-card p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.secondary-button { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: white; font-weight: 800; cursor: pointer; }
.modal-open { overflow: hidden; }

.error-screen { width: min(100% - 32px, 520px); margin: 0 auto; padding: 80px 0; }
.error-screen h1 { font-size: 38px; margin: 0 0 10px; }
.error-screen p { color: var(--muted); line-height: 1.5; }

@media (min-width: 640px) {
  .app-shell { padding-top: 28px; }
  .hero { padding-top: 58px; }
}


/* --- Quiz mode --- */
.quiz-shell { min-height: 100vh; }
.quiz-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 8px; }
.back-button { width:42px; height:42px; border:0; border-radius:50%; background:#f0f0ee; font-size:22px; cursor:pointer; }
.quiz-progress { font-weight:800; font-size:14px; letter-spacing:.02em; }
.quiz-score { font-size:14px; font-weight:800; color:#666; min-width:50px; text-align:right; }
.quiz-main { max-width:620px; margin:0 auto; padding:20px 0 48px; }
.quiz-kicker { font-size:11px; font-weight:900; letter-spacing:.16em; color:#777; margin-bottom:8px; }
.quiz-main h1, .results-main h1 { margin:0; font-size:clamp(30px, 7vw, 46px); line-height:1.02; letter-spacing:-.04em; }
.quiz-difficulty { display:inline-block; margin-top:12px; padding:6px 10px; border-radius:999px; background:#efefed; color:#666; font-size:12px; font-weight:700; }
.player-photo-wrap { margin:24px auto 20px; width:min(100%, 520px); aspect-ratio:4/3; border-radius:24px; overflow:hidden; background:#ececea; box-shadow:0 12px 35px rgba(0,0,0,.08); }
.player-photo { width:100%; height:100%; object-fit:contain; display:block; background:#ececea; }
.answer-area { text-align:center; margin:18px 0 16px; }
.answer-slots { min-height:58px; display:flex; flex-wrap:nowrap; align-items:flex-end; justify-content:center; gap:clamp(3px, 1.4vw, 7px); width:100%; overflow:hidden; }
.answer-slot { width:clamp(19px, 7.2vw, 28px); flex:0 0 clamp(19px, 7.2vw, 28px); height:36px; border-bottom:2px solid #222; font-size:clamp(18px, 5.8vw, 24px); line-height:34px; font-weight:800; text-align:center; }
.answer-slot.filled { border-bottom-color:#222; }
.answer-separator.space { width:clamp(7px, 2.6vw, 13px); flex:0 0 clamp(7px, 2.6vw, 13px); }
.answer-separator.hyphen { width:clamp(7px, 2.6vw, 13px); flex:0 0 clamp(7px, 2.6vw, 13px); font-size:clamp(18px, 5.8vw, 24px); line-height:34px; }
.answer-hint { margin:10px 0 0; color:#888; font-size:13px; }
.letters-panel { padding:16px; border-radius:24px; background:#f2f2f0; }
.letters-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; }
.letter-button { min-height:48px; border:0; border-radius:13px; background:#fff; font-size:20px; font-weight:800; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.letter-button:active { transform:scale(.97); }
.letter-button.used { opacity:.25; cursor:default; }
.quiz-actions { display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:14px; }
.quiz-actions .primary-button, .quiz-actions .secondary-button { margin:0; }
.quiz-actions .secondary-button { min-width:112px; }
.erase-button { white-space:nowrap; }
.quiz-feedback { margin-top:16px; padding:16px 18px; border-radius:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.quiz-feedback.success { background:#eaf6ee; }
.quiz-feedback.error { background:#f9ecea; }
.quiz-feedback strong { width:100%; font-size:18px; }
.quiz-feedback span { color:#555; font-size:14px; }
.next-button { margin-left:auto; border:0; border-radius:999px; padding:10px 15px; background:#222; color:#fff; font-weight:800; cursor:pointer; }
.results-shell { display:flex; align-items:center; min-height:100vh; }
.results-main { width:100%; max-width:520px; margin:auto; text-align:center; padding:50px 0; }
.results-intro { color:#777; margin:14px 0 25px; }
.result-score { display:flex; align-items:baseline; justify-content:center; gap:8px; margin:10px 0 4px; }
.result-score strong { font-size:82px; line-height:1; letter-spacing:-.06em; }
.result-score span { font-size:24px; color:#888; font-weight:700; }
.result-percent { color:#777; margin-bottom:28px; }
.result-home { width:100%; margin-top:10px; }

@media (max-width:560px) {
  .quiz-main { padding-top:12px; }
  .player-photo-wrap { border-radius:18px; }
  .answer-slot { width:24px; font-size:21px; }
  .letters-grid { grid-template-columns:repeat(5, minmax(0,1fr)); }
  .letter-button { min-height:46px; }
}

.stats-main { max-width:620px; margin:0 auto; padding:35px 0 50px; }
.stats-main h1 { margin:0 0 24px; font-size:clamp(36px,8vw,52px); letter-spacing:-.05em; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.stat-card { padding:20px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 5px 18px rgba(0,0,0,.04); }
.stat-card strong { display:block; font-size:34px; letter-spacing:-.04em; }
.stat-card span { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.stats-note { color:#888; font-size:13px; line-height:1.5; margin:20px 0; }

/* --- Sport / difficulty selection --- */
.sports-section { margin-top: 8px; }
.section-heading { display:flex; flex-direction:column; gap:4px; margin:0 2px 10px; }
.section-heading span { font-size:10px; font-weight:900; letter-spacing:.14em; color:#8a8a91; }
.section-heading strong { font-size:18px; }
.sports-list { display:grid; gap:10px; }
.sport-card-button { width:100%; color:var(--ink); text-align:left; cursor:pointer; appearance:none; }
.sport-card-button:hover { border-color:#d2d2cd; transform:translateY(-1px); }
.sport-card-button:active { transform:translateY(0); }
.selection-main { max-width:620px; margin:0 auto; padding:35px 0 50px; }
.selection-main h1 { margin:0; font-size:clamp(38px,8vw,54px); line-height:1; letter-spacing:-.05em; }
.selection-intro { color:var(--muted); font-size:14px; line-height:1.5; margin:14px 0 24px; max-width:500px; }
.difficulty-list { display:grid; gap:10px; }
.difficulty-card { width:100%; display:flex; align-items:center; gap:12px; padding:17px 15px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; box-shadow:0 5px 18px rgba(0,0,0,.035); }
.difficulty-card:hover { border-color:#d2d2cd; transform:translateY(-1px); }
.difficulty-card:active { transform:translateY(0); }
.difficulty-copy { display:flex; flex-direction:column; gap:4px; flex:1; }
.difficulty-copy strong { font-size:16px; }
.difficulty-copy small { color:var(--muted); font-size:12px; line-height:1.35; }
.difficulty-count { min-width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:#666; font-size:12px; font-weight:900; }


/* --- Credits --- */
.credits-main { max-width: 720px; margin: 0 auto; padding: 35px 0 50px; }
.credits-main h1 { margin: 0; font-size: clamp(38px,8vw,54px); line-height: 1; letter-spacing: -.05em; }
.credits-intro { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 14px 0 24px; max-width: 620px; }
.credits-list { display: grid; gap: 12px; margin-bottom: 18px; }
.credit-card { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 5px 18px rgba(0,0,0,.035); }
.credit-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.credit-sport { display:block; margin-bottom:4px; color:#8a8a91; font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.credit-card h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
.credit-difficulty { flex:0 0 auto; padding:6px 9px; border-radius:999px; background:var(--soft); color:#666; font-size:11px; font-weight:800; }
.credit-details { display:grid; gap:10px; margin:0; }
.credit-details > div { display:grid; grid-template-columns:100px 1fr; gap:10px; padding-top:10px; border-top:1px solid #eeeeeb; }
.credit-details dt { color:#888; font-size:12px; font-weight:700; }
.credit-details dd { margin:0; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.credit-details a { color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
@media (max-width: 520px) {
  .credit-details > div { grid-template-columns:82px 1fr; }
  .credit-header { flex-direction:column; }
}

.language-button {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: inherit;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .55rem .8rem;
  cursor: pointer;
}

/* --- Identité visuelle : première passe --- */
:root {
  color-scheme: light;
  --ink: #173b2b;
  --muted: #66776d;
  --surface: #ffffff;
  --line: #e0e9e2;
  --accent: #17633e;
  --soft: #edf5ef;
  --page: #f4f8f4;
}
html, body { background: var(--page); }
body { color: var(--ink); }
#app { isolation: isolate; }
.app-shell { width: min(100% - 36px, 600px); padding-top: max(18px, env(safe-area-inset-top)); }
.topbar { padding: 7px 0 16px; }
.brand-mark { border-radius: 12px; background: transparent; box-shadow: none; }
.brand-name { color: #173b2b; letter-spacing: -.02em; }
.language-button { color: var(--ink); border-color: var(--line); background: #fff; transition: background .2s, transform .2s; }
.language-button:hover { background: #e8f2ea; transform: translateY(-1px); }
.hero { position: relative; overflow: hidden; margin: 4px 0 22px; padding: 30px 25px 29px; border-radius: 28px; color: #fff; background: radial-gradient(ellipse at 90% 10%,#39865b 0,transparent 38%), linear-gradient(135deg,#123c29,#1b6942 75%,#287b4e); box-shadow: 0 16px 36px #174c3226; }
.hero::after { content: ""; position: absolute; width: 190px; height: 190px; right: -72px; bottom: -100px; border: 1px solid #ffffff24; border-radius: 50%; box-shadow: 0 0 0 22px #ffffff0a,0 0 0 45px #ffffff08; pointer-events: none; }
.hero-badge { position: relative; z-index: 1; color: #d9f3e1; background: #ffffff19; border: 1px solid #ffffff24; }
.hero h1 { position: relative; z-index: 1; max-width: 460px; font-size: clamp(36px,9vw,54px); }
.hero h1 span { color: #b9e8c8; }
.hero p { position: relative; z-index: 1; max-width: 430px; color: #e0eee4; }
.section-heading { margin-bottom: 12px; }
.section-heading span { color: #63806d; }
.section-heading strong { font-size: 20px; letter-spacing: -.025em; }
.sport-card { border-color: #e1eae3; border-radius: 20px; box-shadow: 0 7px 20px #193e2910; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sport-icon { color: #17633e; background: #eaf4ec; }
.sport-card-button:hover { border-color: #a9cbb3; box-shadow: 0 11px 25px #193e2918; }
.primary-button { background: linear-gradient(110deg,#17633e,#23834f); box-shadow: 0 10px 22px #17633e2b; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.primary-button:hover { opacity: 1; filter: brightness(1.06); box-shadow: 0 13px 27px #17633e35; }
.primary-button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.menu-grid { gap: 11px; }
.menu-card { border-color: #e1eae3; border-radius: 18px; box-shadow: 0 6px 18px #193e290a; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.menu-card:hover { transform: translateY(-3px); border-color: #b5d0bc; box-shadow: 0 12px 24px #193e2914; }
.menu-icon { color: #17633e; background: #eaf4ec; }
footer { color: #829388; }
.selection-main, .stats-main, .credits-main { padding-top: 28px; }
.difficulty-card { position: relative; overflow: hidden; border-color: #e1eae3; box-shadow: 0 6px 18px #193e290b; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.difficulty-card::before { content: ""; align-self: stretch; width: 5px; margin: -17px 1px -17px -15px; border-radius: 0 6px 6px 0; background: #9ca3af; }
.difficulty-card:hover { transform: translateY(-2px); box-shadow: 0 11px 22px #193e2916; }
.difficulty-card.difficulty-très-facile::before, .difficulty-card.difficulty-très-facile::before { background: #14532d; }
.difficulty-card.difficulty-facile::before { background: #86cfa0; }
.difficulty-card.difficulty-moyen::before { background: #facc15; }
.difficulty-card.difficulty-difficile::before { background: #ef4444; }
.difficulty-card.difficulty-mixed::before { background: linear-gradient(#14532d 0 25%,#86cfa0 25% 50%,#facc15 50% 75%,#ef4444 75%); }
.difficulty-count { background: #edf5ef; color: #315c40; }
.quiz-shell { background: transparent; }
.back-button { color: var(--ink); background: #e8f1e9; transition: transform .2s, background .2s; }
.back-button:hover { transform: translateX(-2px); background: #dceade; }
.quiz-kicker { color: #63806d; }
.player-photo-wrap { background: #e8efe9; border: 1px solid #e0e9e2; box-shadow: 0 14px 32px #193e2915; }
.player-photo { background: #e8efe9; }
.letters-panel { background: #eaf2eb; border: 1px solid #dce9de; }
.letter-button { color: #173b2b; border: 1px solid #e0e9e2; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.letter-button:not(:disabled):hover { background: #f0faf2; box-shadow: 0 4px 12px #17633e18; }
.letter-button:active { transform: scale(.95); }
.secondary-button { color: var(--ink); border-color: #dce7de; background: #fff; transition: background .2s, transform .2s; }
.secondary-button:hover { background: #f0f6f1; }
.next-button { background: #17633e; }
.stat-card, .credit-card { border-color: #e1eae3; box-shadow: 0 7px 20px #193e2910; }
.stat-card strong { color: #17633e; }
.modal-card { border: 1px solid #e1eae3; }

/* Transitions discrètes entre les vues et respect des préférences système. */
.app-shell { animation: screen-enter .28s ease both; }
@keyframes screen-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media (min-width: 640px) {
  .app-shell { padding-top: 28px; }
  .hero { margin-top: 10px; padding: 42px 34px 38px; }
}

/* Écran de chargement */
.loading-screen { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; color: var(--ink); text-align: center; animation: loading-enter .35s ease both; }
.loading-brand { min-height: 76px; display: grid; place-items: center; }
.loading-logo { display: block; width: min(280px, 72vw); max-height: 150px; object-fit: contain; }
.loading-spinner { width: 28px; height: 28px; border: 3px solid #dce9de; border-top-color: #17633e; border-radius: 50%; animation: loading-spin .8s linear infinite; }
.loading-screen p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-enter { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation-duration: 2s; } }

/* Menu d'accueil : sections mieux séparées et raccourcis équilibrés. */
.app-shell { width: min(100% - 36px, 680px); }
.home-tools { margin-top: 25px; }
.menu-heading { margin-bottom: 12px; }
.menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.menu-card, .menu-card:last-child { grid-column: auto; min-height: 92px; padding: 14px 12px; }
.menu-card { gap: 9px; }
.menu-card strong { font-size: 13px; }
.menu-card small { font-size: 10px; line-height: 1.3; }
@media (max-width: 560px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-card:last-child { grid-column: 1 / -1; }
}

/* Rubriques secondaires : liste claire et accessible depuis l'accueil. */
.home-tools {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #dce8de;
  border-radius: 24px;
  background: linear-gradient(145deg, #f7fbf7, #eef5ef);
}
.menu-heading { margin-bottom: 14px; }
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 0;
}
.menu-card, .menu-card:last-child {
  grid-column: auto;
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  border: 1px solid #dce8de;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 10px #193e290a;
  text-align: left;
}
.menu-card:hover {
  transform: translateX(3px);
  border-color: #9fc3a7;
  box-shadow: 0 7px 16px #193e2914;
}
.menu-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eaf4ec;
  color: #17633e;
  font-size: 19px;
}
.menu-card strong { font-size: 14px; color: #183b29; }
.menu-card small { font-size: 11px; line-height: 1.4; color: #68786c; }
.menu-card > span:last-child { flex: 1; }
.menu-card::after {
  content: '›';
  color: #78927e;
  font-size: 24px;
  line-height: 1;
  padding-left: 6px;
}
@media (max-width: 560px) {
  .home-tools { padding: 16px; }
  .menu-card, .menu-card:last-child { min-height: 68px; }
}

/* Accueil épuré et menu latéral */
.drawer-toggle { border: 0; background: transparent; color: var(--ink); font-size: 25px; cursor: pointer; padding: 7px 10px 7px 0; }
.topbar { gap: 10px; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(12,25,17,.42); }
.side-drawer { position: fixed; z-index: 31; inset: 0 auto 0 0; width: min(310px, 84vw); padding: 22px 16px; background: #fbfdfb; box-shadow: 12px 0 35px #102b1b26; transform: translateX(-105%); transition: transform .24s ease; }
.side-drawer.open { transform: translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding: 5px 4px 22px; color:#183b29; font-size:17px; }
.drawer-close { border:0; background:transparent; font-size:30px; color:#486452; cursor:pointer; }
.drawer-nav { display:grid; gap:10px; }
.drawer-nav .menu-card { width:100%; min-height:68px; }
.stats-tabs { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 14px; }
.stats-tab { border:1px solid #dce8de; border-radius:999px; padding:9px 14px; background:#fff; color:#42604b; font:inherit; font-size:13px; cursor:pointer; }
.stats-tab.active { background:#17633e; border-color:#17633e; color:#fff; }
.stats-scope-label { margin:0 0 12px; color:#56705d; font-size:13px; font-weight:700; }
@media (prefers-reduced-motion: reduce) { .side-drawer { transition:none; } }

/* Guess'Her — jeu adaptatif : les réponses longues restent dans l'écran. */
.quiz-main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 20px 0 48px; }
.quiz-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(22px, 4vw, 48px); }
.quiz-visual, .quiz-controls { min-width: 0; }
.quiz-visual h1 { max-width: 560px; }
.player-photo-wrap { width: 100%; max-width: 560px; margin: 22px auto 0; aspect-ratio: 4 / 3; }
.quiz-controls { padding: 18px; border: 1px solid #e0e9e2; border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 10px 28px #193e290d; }
.answer-area { margin: 2px 0 18px; }
.answer-slots { gap: clamp(2px, .45vw, 5px); overflow: visible; }
.answer-slot { width: auto; min-width: 0; max-width: 28px; flex: 1 1 0; font-size: clamp(11px, min(5.8vw, 2.2vw), 23px); }
.answer-separator.space, .answer-separator.hyphen { width: clamp(5px, 1vw, 11px); flex: 0 0 clamp(5px, 1vw, 11px); }
.letters-panel { padding: 13px; }
.letters-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.letter-button { min-height: 44px; font-size: clamp(16px, 2vw, 20px); }
.quiz-actions { grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr); }
.quiz-actions .secondary-button { min-width: 0; }
.skip-button { white-space: nowrap; }
.quiz-feedback:empty { display: none; }
@media (max-width: 760px) {
  .quiz-main { max-width: 560px; padding-top: 12px; }
  .quiz-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .quiz-visual h1 { font-size: clamp(27px, 7vw, 38px); }
  .player-photo-wrap { width: min(100%, 500px); margin: 16px auto 0; aspect-ratio: 4 / 3; }
  .quiz-controls { padding: 13px; }
  .answer-slot { font-size: clamp(11px, 5vw, 21px); }
  .letters-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  .quiz-controls { padding: 10px; }
  .answer-slots { gap: 2px; }
  .answer-separator.space, .answer-separator.hyphen { width: 5px; flex-basis: 5px; }
  .letters-grid { gap: 5px; }
  .letter-button { min-height: 42px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .letter-button, .primary-button, .secondary-button { transition: none; }
}


/* Guess'Her — disposition verticale : photo puis réponse, sur ordinateur comme mobile. */
.quiz-main { max-width: 620px; }
.quiz-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.quiz-visual, .quiz-controls { width: 100%; }
.quiz-visual { text-align: center; }
.quiz-visual h1 { margin-left: auto; margin-right: auto; }
.player-photo-wrap { width: min(100%, 520px); margin: 20px auto 18px; }
.quiz-controls { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.answer-area { margin: 0 0 16px; }
.quiz-controls .letters-panel { max-width: 520px; margin: 0 auto; }
.quiz-actions, .quiz-feedback { max-width: 520px; margin-left: auto; margin-right: auto; }
.quiz-feedback.near { background: #fff5df; }
.quiz-feedback.near strong { color: #946200; }
.result-comment { margin: 12px 0 26px; padding: 13px 16px; border-radius: 14px; font-weight: 750; }
.result-comment.excellent { color: #17633e; background: #eaf6ee; }
.result-comment.good { color: #795600; background: #fff5df; }
.result-comment.tryAgain { color: #a13a31; background: #f9ecea; }
@media (max-width: 760px) {
  .quiz-layout { display: flex; flex-direction: column; }
  .quiz-controls { padding: 0; }
}

/* Difficultés : couleur sur toute la carte et sur le badge en jeu. */
.difficulty-card { border-width: 1px; }
.difficulty-card.difficulty-très-facile { background:#14532d; border-color:#14532d; color:#fff; }
.difficulty-card.difficulty-facile { background:#bce8c9; border-color:#9bd8ae; color:#173b27; }
.difficulty-card.difficulty-moyen { background:#ffe681; border-color:#f3d34f; color:#4d3a00; }
.difficulty-card.difficulty-difficile { background:#ef4444; border-color:#dc2626; color:#fff; }
.difficulty-card.difficulty-mixed { background:linear-gradient(110deg,#14532d 0 25%,#bce8c9 25% 50%,#ffe681 50% 75%,#ef4444 75%); border-color:#d1d5db; color:#202020; }
.difficulty-card.difficulty-très-facile .difficulty-count,
.difficulty-card.difficulty-difficile .difficulty-count { background:#ffffff28; color:inherit; }
.difficulty-card.difficulty-facile .difficulty-count,
.difficulty-card.difficulty-moyen .difficulty-count,
.difficulty-card.difficulty-mixed .difficulty-count { background:#ffffffa8; color:#243326; }
.quiz-difficulty { border:1px solid transparent; }
.quiz-difficulty.difficulty-très-facile { background:#14532d; color:#fff; }
.quiz-difficulty.difficulty-facile { background:#bce8c9; color:#173b27; }
.quiz-difficulty.difficulty-moyen { background:#ffe681; color:#4d3a00; }
.quiz-difficulty.difficulty-difficile { background:#ef4444; color:#fff; }

/* Thème sombre mémorisé sur cet appareil. */
:root[data-theme="dark"] { color-scheme:dark; --ink:#f1f5f2; --muted:#a7b2aa; --surface:#202923; --line:#39463d; --accent:#247a4b; --soft:#2c382f; background:#121814; color:var(--ink); }
:root[data-theme="dark"] html,
:root[data-theme="dark"] body,
:root[data-theme="dark"] #app { background:#121814; color:var(--ink); }
:root[data-theme="dark"] .sport-card,
:root[data-theme="dark"] .menu-card,
:root[data-theme="dark"] .credit-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .quiz-controls { background:var(--surface); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .hero { background:linear-gradient(125deg,#123b27,#1d6540 72%,#287b4e); }
:root[data-theme="dark"] .hero h1, :root[data-theme="dark"] .brand-name,
:root[data-theme="dark"] .selection-main h1, :root[data-theme="dark"] .stats-main h1,
:root[data-theme="dark"] .credits-main h1, :root[data-theme="dark"] .results-main h1,
:root[data-theme="dark"] .credit-card h2 { color:var(--ink); }
:root[data-theme="dark"] .hero h1 span { color:#b9e8c8; }
:root[data-theme="dark"] .hero p, :root[data-theme="dark"] .selection-intro,
:root[data-theme="dark"] .credits-intro, :root[data-theme="dark"] .results-intro,
:root[data-theme="dark"] .result-percent, :root[data-theme="dark"] .stats-note { color:var(--muted); }
:root[data-theme="dark"] .player-photo-wrap, :root[data-theme="dark"] .player-photo { background:#26332a; border-color:#39463d; }
:root[data-theme="dark"] .letters-panel { background:#202923; border-color:#39463d; }
:root[data-theme="dark"] .letter-button, :root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .stats-tab { background:#2c382f; color:var(--ink); border-color:#465449; }
:root[data-theme="dark"] .letter-button:not(:disabled):hover,
:root[data-theme="dark"] .secondary-button:hover { background:#354439; }
:root[data-theme="dark"] .back-button, :root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .theme-button { background:#2c382f; color:var(--ink); }
:root[data-theme="dark"] .side-drawer { background:#1b241e; color:var(--ink); }
:root[data-theme="dark"] .drawer-head, :root[data-theme="dark"] .drawer-close { color:var(--ink); }
:root[data-theme="dark"] .credit-details > div { border-color:#39463d; }
:root[data-theme="dark"] .credit-details a { color:#c3e8ce; }
:root[data-theme="dark"] .result-comment.excellent { color:#bce8c9; background:#1b3b29; }
:root[data-theme="dark"] .result-comment.good { color:#ffe08a; background:#453a1c; }
:root[data-theme="dark"] .result-comment.tryAgain { color:#ffb4aa; background:#482522; }
.theme-button { width:36px; height:36px; flex:0 0 36px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); font-size:19px; line-height:1; cursor:pointer; }

/* Correctifs de contraste du thème sombre et de la difficulté mixte. */
.difficulty-card.difficulty-mixed { background: var(--surface); color: var(--ink); border-color: var(--line); }
.difficulty-card.difficulty-mixed .difficulty-count { background: var(--soft); color: var(--ink); }
.difficulty-card.difficulty-mixed::before { background: linear-gradient(#14532d 0 25%,#86cfa0 25% 50%,#facc15 50% 75%,#ef4444 75%); }
:root[data-theme="dark"] .hero-badge,
:root[data-theme="dark"] .sport-copy span,
:root[data-theme="dark"] .quiz-score,
:root[data-theme="dark"] .quiz-kicker,
:root[data-theme="dark"] .answer-hint,
:root[data-theme="dark"] .selection-main p,
:root[data-theme="dark"] .stats-main p,
:root[data-theme="dark"] .credits-main p,
:root[data-theme="dark"] .contact-main p,
:root[data-theme="dark"] footer { color: var(--muted); }
:root[data-theme="dark"] .hero h1 span { color: #b9e8c8; }
:root[data-theme="dark"] .sport-copy strong,
:root[data-theme="dark"] .menu-card strong,
:root[data-theme="dark"] .contact-card strong,
:root[data-theme="dark"] .credit-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .answer-slot,
:root[data-theme="dark"] .answer-separator { color: var(--ink); }
:root[data-theme="dark"] .menu-card small,
:root[data-theme="dark"] .menu-card::after,
:root[data-theme="dark"] .chevron,
:root[data-theme="dark"] .result-score span { color: var(--muted); }
:root[data-theme="dark"] .home-tools { background: #1b241e; border-color: var(--line); }
:root[data-theme="dark"] .menu-icon { background: #2c382f; color: #b9e8c8; }
:root[data-theme="dark"] .difficulty-card.difficulty-mixed { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .difficulty-card.difficulty-mixed .difficulty-count { background: var(--soft); color: var(--ink); }
:root[data-theme="dark"] .answer-slot,
:root[data-theme="dark"] .answer-slot.filled { border-bottom-color: #e5eee7; }
:root[data-theme="dark"] .quiz-feedback.success { background: #1b3b29; color: #bce8c9; }
:root[data-theme="dark"] .quiz-feedback.error { background: #482522; color: #ffb4aa; }
:root[data-theme="dark"] .quiz-feedback.near { background: #453a1c; color: #ffe08a; }
:root[data-theme="dark"] .quiz-feedback span { color: inherit; }
:root[data-theme="dark"] .contact-card { background: var(--surface); border-color: var(--line); color: var(--ink); }
.contact-main { max-width: 620px; margin: 0 auto; padding: 28px 0 50px; }
.contact-main h1 { margin: 0; font-size: clamp(38px,8vw,54px); line-height: 1; letter-spacing: -.05em; }
.contact-intro { color: var(--muted); line-height: 1.55; margin: 16px 0 24px; }
.contact-card { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.contact-icon { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:14px; background:var(--soft); color:var(--accent); font-size:22px; }
.contact-card p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
.page-topbar { display:flex; align-items:center; gap:12px; padding:4px 0 12px; }

/* Contact links: readable in both themes and comfortable on mobile. */
.contact-details { align-items: flex-start; }
.contact-copy { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.contact-copy a { color: var(--accent); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }

/* Correctif du bouton de langue en mode sombre. */
:root[data-theme="dark"] .language-button { color: var(--ink); background: var(--surface); border-color: var(--line); }
.contact-linktree { margin-top: 20px; padding: 0 4px; }
.contact-linktree p { margin: 0; color: var(--muted); line-height: 1.5; }
.contact-linktree a { color: var(--accent); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .contact-linktree a { color: #8bd5a5; }

/* Indices : une lettre révélée reste visible et le bouton indique la progression. */
.hint-button { margin-top: 10px; }
.hint-count { opacity: .7; margin-left: 4px; }
.answer-slot.revealed { font-weight: 900; }

/* Guess'Her — écran de jeu compact : les commandes restent accessibles sans défilement sur téléphone. */
.quiz-shell { min-height: 100dvh; }
@media (max-width: 760px) {
  .quiz-topbar { padding: 8px 0 4px; }
  .back-button { width: 38px; height: 38px; }
  .quiz-main { padding: 4px 0 10px; }
  .quiz-visual h1 { font-size: clamp(24px, 6.5vw, 34px); line-height: .98; }
  .quiz-kicker { margin-bottom: 4px; font-size: 10px; }
  .quiz-difficulty { margin-top: 7px; padding: 4px 8px; font-size: 11px; }
  .player-photo-wrap {
    height: clamp(135px, 25dvh, 220px);
    width: min(100%, 440px);
    aspect-ratio: auto;
    margin: 8px auto 8px;
    border-radius: 16px;
  }
  .answer-area { margin: 0 0 8px; }
  .answer-slots { min-height: 44px; }
  .answer-slot { height: 31px; line-height: 29px; font-size: clamp(16px, 5vw, 21px); }
  .answer-separator.hyphen { font-size: 20px; line-height: 29px; }
  .answer-hint { display: none; }
  .hint-button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
  .quiz-controls .letters-panel { padding: 8px; }
  .letters-grid { grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px; }
  .letter-button { min-height: 38px; border-radius: 9px; font-size: 17px; }
  .quiz-actions { gap: 6px; margin-top: 7px; }
  .quiz-actions .primary-button,
  .quiz-actions .secondary-button { min-height: 40px; padding: 7px 8px; font-size: 13px; }
  .quiz-feedback { margin-top: 8px; padding: 10px 12px; border-radius: 14px; }
  .quiz-feedback strong { font-size: 15px; }
  .quiz-feedback span { font-size: 12px; }
  .next-button { padding: 8px 12px; }
}
@media (max-width: 360px) {
  .letters-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 4px; }
  .letter-button { min-height: 36px; font-size: 16px; }
  .player-photo-wrap { height: clamp(120px, 22dvh, 170px); }
  .quiz-actions .primary-button,
  .quiz-actions .secondary-button { font-size: 12px; padding-left: 5px; padding-right: 5px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .player-photo-wrap { height: 19dvh; min-height: 110px; }
  .quiz-visual h1 { font-size: clamp(22px, 6vw, 30px); }
  .letter-button { min-height: 34px; }
  .quiz-controls .letters-panel { padding: 6px; }
}


/* Étape 22 — menu plus direct et drapeaux de langue. */
.language-button { display:flex; align-items:center; gap:4px; padding:5px 7px; font-size:18px; line-height:1; }
.language-button .flag { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; opacity:.42; filter:grayscale(.25); transition:opacity .15s ease, transform .15s ease, background .15s ease; }
.language-button .flag.active { opacity:1; background:var(--soft); transform:scale(1.04); }

/* Accueil : le choix du sport devient l'élément principal. */
.hero { margin: 4px 0 18px; padding: 22px 20px 20px; border-radius: 24px; color:#fff; background: radial-gradient(ellipse at 90% 10%,#39865b 0,transparent 38%), linear-gradient(135deg,#123c29,#1b6942 75%,#287b4e); box-shadow:0 14px 30px #174c3226; overflow:hidden; position:relative; }
.hero::after { content:""; position:absolute; width:170px; height:170px; right:-65px; bottom:-95px; border:1px solid #ffffff24; border-radius:50%; box-shadow:0 0 0 20px #ffffff0a,0 0 0 42px #ffffff08; pointer-events:none; }
.hero-badge { position:relative; z-index:1; padding:6px 9px; margin-bottom:9px; color:#d9f3e1; background:#ffffff19; border:1px solid #ffffff24; font-size:10px; }
.hero h1 { position:relative; z-index:1; max-width:520px; font-size:clamp(30px,8vw,44px); line-height:.98; color:#fff; }
.hero h1 span { color:#b9e8c8; }
.hero p { position:relative; z-index:1; max-width:520px; margin:10px 0 0; color:#e0eee4; font-size:13px; line-height:1.4; }
.sports-section { margin-top: 10px; }
.section-heading { margin-bottom:10px; }
.section-heading strong { font-size:22px; }
.sport-card { padding:16px; border-radius:21px; }
.sport-icon { width:52px; height:52px; border-radius:16px; font-size:25px; }
.sport-copy strong { font-size:18px; }
.sport-copy small { font-size:12px; }

/* Étape 22 — récupérer de la hauteur pour agrandir la photo sans réintroduire le scroll. */
@media (max-width:760px) {
  .player-photo-wrap { height:clamp(165px, 29dvh, 245px); }
  .letters-panel { padding:7px !important; }
  .letters-grid { gap:4px; }
  .letter-button { min-height:37px; }
}
@media (max-width:360px) {
  .player-photo-wrap { height:clamp(145px, 25dvh, 190px); }
}
@media (max-height:700px) and (max-width:760px) {
  .player-photo-wrap { height:24dvh; min-height:125px; }
  .letter-button { min-height:33px; }
}

/* Version 1.1 — palette de difficultés entièrement verte et contrastes renforcés. */
.difficulty-card.difficulty-très-facile { background:#e5f5e9; border-color:#c9e9d2; color:#173b27; }
.difficulty-card.difficulty-facile { background:#bce8c9; border-color:#91d4a7; color:#173b27; }
.difficulty-card.difficulty-moyen { background:#4f9b69; border-color:#347d4e; color:#fff; }
.difficulty-card.difficulty-difficile { background:#174b2c; border-color:#103c22; color:#fff; }
.difficulty-card.difficulty-très-facile::before { background:#d0edd8; }
.difficulty-card.difficulty-facile::before { background:#9ddbb0; }
.difficulty-card.difficulty-moyen::before { background:#2d7447; }
.difficulty-card.difficulty-difficile::before { background:#0c321b; }
.difficulty-card.difficulty-mixed { background:var(--surface); color:var(--ink); border-color:var(--line); }
.difficulty-card.difficulty-mixed::before { background:linear-gradient(#d0edd8 0 25%,#9ddbb0 25% 50%,#4f9b69 50% 75%,#174b2c 75%); }
.difficulty-card.difficulty-très-facile .difficulty-count,
.difficulty-card.difficulty-facile .difficulty-count { background:#ffffffc9; color:#173b27; }
.difficulty-card.difficulty-moyen .difficulty-count,
.difficulty-card.difficulty-difficile .difficulty-count { background:#ffffff26; color:#fff; }
.quiz-difficulty.difficulty-très-facile { background:#e5f5e9; color:#173b27; }
.quiz-difficulty.difficulty-facile { background:#bce8c9; color:#173b27; }
.quiz-difficulty.difficulty-moyen { background:#4f9b69; color:#fff; }
.quiz-difficulty.difficulty-difficile { background:#174b2c; color:#fff; }
.quiz-difficulty.difficulty-mixed::before { background:linear-gradient(#d0edd8 0 25%,#9ddbb0 25% 50%,#4f9b69 50% 75%,#174b2c 75%); }
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile { background:#263d2d; color:#f1f5f2; border-color:#45684f; }
:root[data-theme="dark"] .difficulty-card.difficulty-facile { background:#315d3e; color:#f1f5f2; border-color:#4f805d; }
:root[data-theme="dark"] .difficulty-card.difficulty-moyen { background:#39794f; color:#fff; border-color:#579669; }
:root[data-theme="dark"] .difficulty-card.difficulty-difficile { background:#174b2c; color:#fff; border-color:#28653e; }
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile .difficulty-count,
:root[data-theme="dark"] .difficulty-card.difficulty-facile .difficulty-count { background:#182a1e; color:#f1f5f2; }
:root[data-theme="dark"] .difficulty-card.difficulty-mixed { background:var(--surface); color:var(--ink); }
:root[data-theme="dark"] .quiz-difficulty.difficulty-très-facile { background:#263d2d; color:#f1f5f2; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-facile { background:#315d3e; color:#f1f5f2; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-moyen { background:#39794f; color:#fff; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-difficile { background:#174b2c; color:#fff; }
.answer-slot.revealed { text-transform:none; font-weight:600; }
.back-button, .skip-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); transition:transform .16s ease, background .16s ease, box-shadow .16s ease; }
.back-button { box-shadow:0 2px 6px #102c1a12; font-size:21px; font-weight:700; }
.skip-button { border-radius:13px; padding-inline:14px; font-weight:750; }
.back-button:hover, .skip-button:hover { transform:translateY(-1px); box-shadow:0 5px 12px #102c1a18; }
.back-button:focus-visible, .skip-button:focus-visible, .erase-button:focus-visible { outline:3px solid #65b982; outline-offset:2px; }
:root[data-theme="dark"] .difficulty-copy small { color:#d5e0d8; }
:root[data-theme="dark"] .difficulty-count { color:var(--ink); }

/* Correctifs Guess'Her 1.1 — stabilité des indices, visibilité des drapeaux et navigation. */
.topbar { min-width: 0; flex-wrap: nowrap; }
.brand-name { min-width: 0; white-space: nowrap; }
.theme-button { flex-shrink: 0; }
.language-button { flex: 0 0 auto; min-width: 76px; flex-shrink: 0; justify-content: center; position: relative; z-index: 2; }
.language-button .flag { flex: 0 0 28px; filter: none; opacity: .62; }
.language-button .flag.active { opacity: 1; }

/* Le bouton Passer a une flèche intégrée dans un médaillon, lisible dans les deux thèmes. */
.skip-button { min-height: 44px; padding: 7px 10px; border-radius: 14px; gap: 8px; font-weight: 750; white-space: nowrap; }
.skip-button .skip-icon { display: inline-grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; background: #dcefe2; color: #174b2c; font-size: 19px; line-height: 1; }
:root[data-theme="dark"] .skip-button { background: #26392c; color: #f1f7f2; border-color: #4a6652; }
:root[data-theme="dark"] .skip-button .skip-icon { background: #b9e8c8; color: #123b25; }
.skip-button:active .skip-icon { transform: translateX(1px); }

/* Contrastes renforcés pour les zones de texte secondaires en thème sombre. */
:root[data-theme="dark"] .hero-badge { color: #effbf2; background: #ffffff20; border-color: #ffffff3b; }
:root[data-theme="dark"] .section-heading,
:root[data-theme="dark"] .section-heading strong,
:root[data-theme="dark"] .difficulty-copy strong,
:root[data-theme="dark"] .selection-main h1,
:root[data-theme="dark"] .selection-main p,
:root[data-theme="dark"] .stats-main h1,
:root[data-theme="dark"] .stats-main p,
:root[data-theme="dark"] .credits-main h1,
:root[data-theme="dark"] .credits-main p,
:root[data-theme="dark"] .contact-main h1,
:root[data-theme="dark"] .contact-main p,
:root[data-theme="dark"] .contact-card p,
:root[data-theme="dark"] .credit-card p,
:root[data-theme="dark"] .stat-card p,
:root[data-theme="dark"] .answer-hint,
:root[data-theme="dark"] .quiz-kicker,
:root[data-theme="dark"] .quiz-progress { color: #d7e3da; }
:root[data-theme="dark"] .sport-copy span { color: #c2d2c7; }
:root[data-theme="dark"] .menu-card small,
:root[data-theme="dark"] .sport-copy small,
:root[data-theme="dark"] .difficulty-copy small,
:root[data-theme="dark"] .stats-note,
:root[data-theme="dark"] footer { color: #bdc9c0; }
:root[data-theme="dark"] .answer-slot { color: #f4fbf6; }
:root[data-theme="dark"] .answer-slot.revealed { color: #b9e8c8; }
:root[data-theme="dark"] .letter-button:disabled { color: #9eaaa2; opacity: .68; }
:root[data-theme="dark"] .quiz-feedback.near { background: #3a351f; color: #fff0b8; }
:root[data-theme="dark"] .quiz-feedback.error { background: #3e2423; color: #ffd4cf; }
:root[data-theme="dark"] .quiz-feedback.success { background: #193a28; color: #d3f5de; }

/* Les quatre verts restent distincts en mode sombre, avec du texte suffisamment contrasté. */
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile { background: #294a35; color: #f5fff7; border-color: #527b60; }
:root[data-theme="dark"] .difficulty-card.difficulty-facile { background: #326747; color: #f5fff7; border-color: #5a936c; }
:root[data-theme="dark"] .difficulty-card.difficulty-moyen { background: #287344; color: #ffffff; border-color: #55a16d; }
:root[data-theme="dark"] .difficulty-card.difficulty-difficile { background: #123d27; color: #ffffff; border-color: #34754d; }
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile .difficulty-count,
:root[data-theme="dark"] .difficulty-card.difficulty-facile .difficulty-count { background: #17281d; color: #f5fff7; }
:root[data-theme="dark"] .difficulty-card.difficulty-moyen .difficulty-count,
:root[data-theme="dark"] .difficulty-card.difficulty-difficile .difficulty-count { background: #ffffff20; color: #ffffff; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-très-facile { background: #294a35; color: #f5fff7; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-facile { background: #326747; color: #f5fff7; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-moyen { background: #287344; color: #ffffff; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-difficile { background: #123d27; color: #ffffff; }

@media (max-width: 360px) {
  .topbar { gap: 6px; }
  .brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .brand-name { font-size: 14px; }
  .language-button { min-width: 70px; padding-inline: 4px; }
  .language-button .flag { width: 25px; flex-basis: 25px; height: 27px; }
  .skip-button { gap: 5px; padding-inline: 6px; font-size: 12px; }
}

/* Guess'Her 1.1 follow-up fixes: consistent green palette, theme contrast and language flags. */
.language-button { display:flex; align-items:center; justify-content:center; gap:9px; min-width:76px; min-height:40px; padding:7px 10px; flex:0 0 auto; }
.flag-svg { display:block; width:25px; height:17px; border-radius:2px; opacity:.62; box-shadow:0 0 0 1px #00000016; }
.flag-svg.active { opacity:1; outline:2px solid var(--accent); outline-offset:2px; }
.difficulty-card.difficulty-très-facile { background:#d9f2e2; border-color:#b8e2c8; color:#17452d; }
.difficulty-card.difficulty-facile { background:#8fd3a7; border-color:#72c28e; color:#123c25; }
.difficulty-card.difficulty-moyen { background:#39875a; border-color:#2e754b; color:#fff; }
.difficulty-card.difficulty-difficile { background:#123d29; border-color:#0d3221; color:#fff; }
.difficulty-card.difficulty-mixed { background:linear-gradient(110deg,#d9f2e2 0 25%,#8fd3a7 25% 50%,#39875a 50% 75%,#123d29 75%); border-color:#6a987b; color:#153c28; }
.difficulty-card.difficulty-très-facile .difficulty-count,
.difficulty-card.difficulty-facile .difficulty-count { background:#ffffffb8; color:#173b2b; }
.difficulty-card.difficulty-moyen .difficulty-count,
.difficulty-card.difficulty-difficile .difficulty-count { background:#ffffff24; color:#fff; }
.difficulty-card.difficulty-mixed .difficulty-count { background:#ffffffc9; color:#173b2b; }
.quiz-difficulty.difficulty-très-facile { background:#d9f2e2; color:#17452d; }
.quiz-difficulty.difficulty-facile { background:#8fd3a7; color:#123c25; }
.quiz-difficulty.difficulty-moyen { background:#39875a; color:#fff; }
.quiz-difficulty.difficulty-difficile { background:#123d29; color:#fff; }
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile { background:#254c36; border-color:#37694b; color:#f0fff4; }
:root[data-theme="dark"] .difficulty-card.difficulty-facile { background:#286b43; border-color:#388556; color:#f3fff6; }
:root[data-theme="dark"] .difficulty-card.difficulty-moyen { background:#174c30; border-color:#246440; color:#f4fff6; }
:root[data-theme="dark"] .difficulty-card.difficulty-difficile { background:#0b281a; border-color:#19442d; color:#f4fff6; }
:root[data-theme="dark"] .difficulty-card.difficulty-mixed { background:linear-gradient(110deg,#254c36 0 25%,#286b43 25% 50%,#174c30 50% 75%,#0b281a 75%); border-color:#426b50; color:#f4fff6; }
:root[data-theme="dark"] .difficulty-card .difficulty-copy small { color:inherit; opacity:.88; }
:root[data-theme="dark"] .difficulty-card .difficulty-count { background:#ffffff20; color:#fff; }
:root[data-theme="dark"] .selection-main p,
:root[data-theme="dark"] .selection-intro,
:root[data-theme="dark"] .difficulty-copy small,
:root[data-theme="dark"] .answer-hint,
:root[data-theme="dark"] .quiz-kicker,
:root[data-theme="dark"] .quiz-score,
:root[data-theme="dark"] .stats-note,
:root[data-theme="dark"] .contact-card p,
:root[data-theme="dark"] .credit-details,
:root[data-theme="dark"] .credit-details small { color:#c4d2c8; }
:root[data-theme="dark"] .language-button { background:#202923; border-color:#536457; }
:root[data-theme="dark"] .flag-svg.active { outline-color:#9bd8ae; }
.answer-slot.revealed { text-transform:none; font-weight:600; }
.skip-button .skip-icon { display:inline-grid; place-items:center; width:1.65em; height:1.65em; border-radius:50%; background:currentColor; color:inherit; font-size:1.05em; }
.skip-button .skip-icon { position:relative; }
.skip-button { gap:8px; }

/* Corrections de finition : palette identique dans les deux thèmes et flèche Passer contrastée. */
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile { background:#d9f2e2; border-color:#b8e2c8; color:#17452d; }
:root[data-theme="dark"] .difficulty-card.difficulty-facile { background:#8fd3a7; border-color:#72c28e; color:#123c25; }
:root[data-theme="dark"] .difficulty-card.difficulty-moyen { background:#39875a; border-color:#2e754b; color:#fff; }
:root[data-theme="dark"] .difficulty-card.difficulty-difficile { background:#123d29; border-color:#0d3221; color:#fff; }
:root[data-theme="dark"] .difficulty-card.difficulty-mixed { background:linear-gradient(110deg,#d9f2e2 0 25%,#8fd3a7 25% 50%,#39875a 50% 75%,#123d29 75%); border-color:#6a987b; color:#153c28; }
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile .difficulty-count,
:root[data-theme="dark"] .difficulty-card.difficulty-facile .difficulty-count { background:#ffffffb8; color:#173b2b; }
:root[data-theme="dark"] .difficulty-card.difficulty-moyen .difficulty-count,
:root[data-theme="dark"] .difficulty-card.difficulty-difficile .difficulty-count { background:#ffffff24; color:#fff; }
:root[data-theme="dark"] .difficulty-card.difficulty-mixed .difficulty-count { background:#ffffffc9; color:#173b2b; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-très-facile { background:#d9f2e2; color:#17452d; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-facile { background:#8fd3a7; color:#123c25; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-moyen { background:#39875a; color:#fff; }
:root[data-theme="dark"] .quiz-difficulty.difficulty-difficile { background:#123d29; color:#fff; }
.skip-button .skip-icon { background:#dcefe2; color:#174b2c; }
:root[data-theme="dark"] .skip-button .skip-icon { background:#b9e8c8; color:#123b25; }


/* Final polish: difficulty text contrast and avoid unnecessary page scrolling. */
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile .difficulty-copy strong,
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile .difficulty-copy small,
:root[data-theme="dark"] .difficulty-card.difficulty-facile .difficulty-copy strong,
:root[data-theme="dark"] .difficulty-card.difficulty-facile .difficulty-copy small,
:root[data-theme="dark"] .difficulty-card.difficulty-mixed .difficulty-copy strong,
:root[data-theme="dark"] .difficulty-card.difficulty-mixed .difficulty-copy small { color:#173b2b; opacity:1; }
:root[data-theme="dark"] .difficulty-card.difficulty-très-facile .difficulty-count,
:root[data-theme="dark"] .difficulty-card.difficulty-facile .difficulty-count,
:root[data-theme="dark"] .difficulty-card.difficulty-mixed .difficulty-count { background:#ffffffd9; color:#173b2b; }

/* Selection and quiz screens stay fixed when their content fits; short viewports remain scrollable. */
html:has(.selection-shell), html:has(.quiz-shell) { min-height:100%; }
body:has(.selection-shell), body:has(.quiz-shell) { overflow:hidden; }
.selection-shell, .quiz-shell { min-height:100dvh; min-height:100svh; padding-bottom:12px; box-sizing:border-box; }
.selection-main { padding-bottom:12px; }
@media (max-height: 680px) {
  body:has(.selection-shell), body:has(.quiz-shell) { overflow-y:auto; }
  .selection-shell, .quiz-shell { min-height:100svh; }
}


/* Lisibilité du descriptif sur les cartes Moyen et Difficile en thème clair. */
:root:not([data-theme="dark"]) .difficulty-card.difficulty-moyen .difficulty-copy small,
:root:not([data-theme="dark"]) .difficulty-card.difficulty-difficile .difficulty-copy small {
  color: #f3fff6;
  opacity: 1;
}


/* Lisibilité des glyphes : le I majuscule possède des barres et se distingue du l minuscule. */
.letter-button, .answer-slot { font-family: Arial, Helvetica, sans-serif; }