/* Vendu ! : feuille de style */

:root {
  color-scheme: light;
  --fond: #f4f1ea;
  --fond-2: #ebe6db;
  --carte: #ffffff;
  --carte-2: #faf8f3;
  --encre: #1c1a17;
  --encre-2: #5b564d;
  --encre-3: #8d877b;
  --ligne: rgba(28, 26, 23, 0.08);
  --accent: #e2532c;
  --accent-fonce: #b53d1b;
  --accent-clair: #ffe7de;
  --bleu: #2b5fd9;
  --bleu-clair: #e3ebff;
  --vert: #24955a;
  --vert-clair: #dcf5e6;
  --jaune: #e6a418;
  --jaune-clair: #fff1cc;
  --orange: #ef7d2d;
  --orange-clair: #ffe4cf;
  --rouge: #d63c3c;
  --rouge-clair: #ffe0e0;
  --tache-1: #ffb08a;
  --tache-2: #9fc0ff;
  --tache-3: #ffe08a;
  --ombre-1: 0 1px 2px rgba(30, 20, 10, 0.06), 0 2px 6px rgba(30, 20, 10, 0.06);
  --ombre-2: 0 1px 2px rgba(30, 20, 10, 0.06), 0 10px 24px -8px rgba(30, 20, 10, 0.22), 0 30px 50px -30px rgba(30, 20, 10, 0.35);
  --ombre-3: 0 2px 4px rgba(30, 20, 10, 0.08), 0 18px 36px -10px rgba(30, 20, 10, 0.30), 0 50px 80px -40px rgba(30, 20, 10, 0.45);
  --reflet: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --rayon: 22px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-chiffres: "SF Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #15130f;
  --fond-2: #1d1a15;
  --carte: #221f19;
  --carte-2: #29251e;
  --encre: #f3efe6;
  --encre-2: #b8b1a3;
  --encre-3: #7d776b;
  --ligne: rgba(243, 239, 230, 0.09);
  --accent: #ff7a50;
  --accent-fonce: #d9522b;
  --accent-clair: #3a221a;
  --bleu: #7ea2ff;
  --bleu-clair: #1f2a45;
  --vert: #4fd48a;
  --vert-clair: #1c3328;
  --jaune: #ffc84a;
  --jaune-clair: #3b2f12;
  --orange: #ff9a4d;
  --orange-clair: #3d2614;
  --rouge: #ff6b6b;
  --rouge-clair: #3f1d1d;
  --tache-1: #7a3a22;
  --tache-2: #22356e;
  --tache-3: #5c4a12;
  --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --ombre-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 24px -8px rgba(0, 0, 0, 0.6), 0 30px 50px -30px rgba(0, 0, 0, 0.8);
  --ombre-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 36px -10px rgba(0, 0, 0, 0.7), 0 50px 80px -40px rgba(0, 0, 0, 0.9);
  --reflet: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #15130f;
    --fond-2: #1d1a15;
    --carte: #221f19;
    --carte-2: #29251e;
    --encre: #f3efe6;
    --encre-2: #b8b1a3;
    --encre-3: #7d776b;
    --ligne: rgba(243, 239, 230, 0.09);
    --accent: #ff7a50;
    --accent-fonce: #d9522b;
    --accent-clair: #3a221a;
    --bleu: #7ea2ff;
    --bleu-clair: #1f2a45;
    --vert: #4fd48a;
    --vert-clair: #1c3328;
    --jaune: #ffc84a;
    --jaune-clair: #3b2f12;
    --orange: #ff9a4d;
    --orange-clair: #3d2614;
    --rouge: #ff6b6b;
    --rouge-clair: #3f1d1d;
    --tache-1: #7a3a22;
    --tache-2: #22356e;
    --tache-3: #5c4a12;
    --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --ombre-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 24px -8px rgba(0, 0, 0, 0.6), 0 30px 50px -30px rgba(0, 0, 0, 0.8);
    --ombre-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 36px -10px rgba(0, 0, 0, 0.7), 0 50px 80px -40px rgba(0, 0, 0, 0.9);
    --reflet: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--police);
  color: var(--encre);
  background: var(--fond);
  line-height: 1.45;
  overflow-x: hidden;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}
a { color: var(--bleu); }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.01em; }

/* ---------- fond animé (dérive continue) ---------- */
.fond {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(1200px 800px at 50% -10%, var(--fond-2), var(--fond) 60%);
}
.tache {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.75; will-change: transform;
  animation: derive 38s ease-in-out infinite alternate;
}
.t1 { width: 60vmax; height: 60vmax; left: -20vmax; top: -25vmax; background: var(--tache-1); animation-duration: 41s; }
.t2 { width: 55vmax; height: 55vmax; right: -25vmax; top: 10vmax; background: var(--tache-2); animation-duration: 47s; animation-delay: -12s; }
.t3 { width: 45vmax; height: 45vmax; left: 20vmax; bottom: -30vmax; background: var(--tache-3); animation-duration: 53s; animation-delay: -25s; }
.grille {
  position: absolute; inset: 0; opacity: 0.35;
  background-image: linear-gradient(var(--ligne) 1px, transparent 1px), linear-gradient(90deg, var(--ligne) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
@keyframes derive {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(9vw, 6vh, 0) scale(1.12); }
  66%  { transform: translate3d(-6vw, 11vh, 0) scale(0.94); }
  100% { transform: translate3d(5vw, -8vh, 0) scale(1.08); }
}

/* ---------- en-tête ---------- */
.entete {
  max-width: 1280px; margin: 0 auto; padding: 18px 0 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.marque { position: relative; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.halo {
  position: absolute; left: -12px; top: 50%; width: 70px; height: 70px; border-radius: 50%; transform: translateY(-50%);
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%); opacity: 0.35; filter: blur(8px);
  animation: respire 4.5s ease-in-out infinite;
}
@keyframes respire {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.30; }
  50% { transform: translateY(-50%) scale(1.35); opacity: 0.55; }
}
.logo { position: relative; width: 44px; height: 44px; filter: drop-shadow(0 6px 10px rgba(226, 83, 44, 0.35)); }
.titre-bloc { display: flex; flex-direction: column; }
.titre { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.accroche { font-size: 0.86rem; color: var(--encre-2); margin-top: 3px; }
.nav { display: flex; gap: 8px; }
.bouton-nav {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre-1), var(--reflet);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bouton-nav:hover { transform: translateY(-2px); box-shadow: var(--ombre-2), var(--reflet); }
.bouton-nav:active { transform: translateY(0); box-shadow: var(--ombre-1); }
.bouton-nav span { font-size: 0.9rem; font-weight: 600; }
@media (max-width: 560px) {
  .bouton-nav span { display: none; }
  .bouton-nav { padding: 7px 9px; }
  .nav { gap: 6px; }
  .accroche { display: none; }
  .titre { font-size: 1.6rem; }
  .logo { width: 38px; height: 38px; }
  .entete { padding-top: 12px; flex-wrap: nowrap; }
}

/* ---------- pub ---------- */
.pub { max-width: 1280px; margin: 8px auto; min-height: 0; }
.pub[hidden] { display: none; }

/* ---------- plateau ---------- */
.plateau {
  max-width: 1280px; margin: 10px auto 0;
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 900px) {
  .plateau { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: start; }
}
.carte {
  position: relative; background: var(--carte); border-radius: var(--rayon); padding: 22px;
  box-shadow: var(--ombre-2), var(--reflet); border: 1px solid var(--ligne); isolation: isolate;
  animation: apparait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.carte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 40%);
}
:root[data-theme="sombre"] .carte::before { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 40%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .carte::before { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 40%); } }
.carte-jeu { animation-delay: 0.08s; }
@keyframes apparait { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

.jour { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jour h2 { font-size: 1.35rem; font-weight: 800; }
.jour-date { color: var(--encre-2); font-size: 0.95rem; }
.etiquette {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px; background: var(--bleu-clair); color: var(--bleu);
}
.consigne { margin: 8px 0 14px; color: var(--encre-2); font-size: 0.95rem; }

/* ---------- indices ---------- */
.indices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.indice {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px;
  padding: 7px 12px; border-radius: 16px; background: var(--carte-2); border: 1px dashed var(--ligne);
  color: var(--encre-3); min-height: 44px; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, background 0.35s;
}
.indice .num {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem;
  background: var(--fond-2); color: var(--encre-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.indice .texte::before { content: "Indice caché"; font-size: 0.85rem; }
.indice.prochain .texte::before { content: "Indice caché, se révèle au prochain essai raté"; }
.indice.revele { color: var(--encre); background: var(--carte); border-style: solid; box-shadow: var(--ombre-2), var(--reflet); transform: translateY(-2px); padding: 12px 14px; min-height: 58px; }
.indice.revele .num { width: 34px; height: 34px; border-radius: 12px; font-size: 0.95rem; background: linear-gradient(160deg, var(--accent), var(--accent-fonce)); color: #fff; box-shadow: 0 6px 12px -4px rgba(226, 83, 44, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.indice.revele .texte::before { content: none; }
.indice.revele .texte { font-weight: 600; font-size: 1rem; }
.indice.revele .texte small { display: block; font-weight: 400; color: var(--encre-2); font-size: 0.85rem; margin-top: 2px; }
.indice.nouveau { animation: souleve 0.7s cubic-bezier(0.2, 0.9, 0.2, 1.2) both; }
@keyframes souleve {
  0% { transform: translateY(10px) scale(0.97); box-shadow: var(--ombre-1); }
  60% { transform: translateY(-6px) scale(1.015); box-shadow: var(--ombre-3); }
  100% { transform: translateY(-2px) scale(1); box-shadow: var(--ombre-2), var(--reflet); }
}
.lien-retour { display: inline-block; margin-top: 14px; font-weight: 600; }

/* ---------- saisie ---------- */
.saisie-bloc { display: grid; gap: 10px; }
.etiquette-saisie { font-weight: 700; font-size: 1.02rem; }
.saisie { position: relative; }
.saisie input {
  width: 100%; font: 700 1.7rem/1 var(--police-chiffres); letter-spacing: 0.01em; padding: 16px 52px 16px 18px;
  border-radius: 16px; border: 2px solid var(--ligne); background: var(--carte-2); color: var(--encre);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.saisie input:focus { border-color: var(--accent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06), 0 0 0 4px var(--accent-clair); }
.saisie input::placeholder { color: var(--encre-3); font-weight: 600; }
.saisie .euro { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 1.4rem; color: var(--encre-3); }
.saisie.secoue { animation: secoue 0.4s ease; }
@keyframes secoue { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; border-radius: 16px; cursor: pointer;
  font-weight: 800; font-size: 1.05rem; border: 1px solid var(--ligne); background: var(--carte); color: var(--encre);
  box-shadow: var(--ombre-1), var(--reflet), 0 4px 0 -1px var(--fond-2);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-2), var(--reflet), 0 6px 0 -1px var(--fond-2); }
.bouton:active { transform: translateY(2px); box-shadow: var(--ombre-1), 0 1px 0 -1px var(--fond-2); }
.bouton-principal {
  color: #fff; border-color: transparent;
  background: linear-gradient(160deg, var(--accent), var(--accent-fonce));
  box-shadow: 0 10px 22px -8px rgba(226, 83, 44, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 0 -1px var(--accent-fonce);
}
.bouton-principal:hover { box-shadow: 0 16px 28px -10px rgba(226, 83, 44, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 0 -1px var(--accent-fonce); filter: brightness(1.05); }
.bouton-principal:active { box-shadow: 0 6px 14px -8px rgba(226, 83, 44, 0.6), 0 1px 0 -1px var(--accent-fonce); }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.aide-saisie { margin: 0; color: var(--encre-2); font-size: 0.9rem; }

/* ---------- essais ---------- */
.essais { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.essai {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px; background: var(--carte-2); border-left: 6px solid var(--encre-3);
  box-shadow: var(--ombre-1); animation: glisse 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes glisse { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.essai .rang { font-weight: 800; color: var(--encre-3); }
.essai .montant { font-family: var(--police-chiffres); font-weight: 700; font-size: 1.05rem; }
.essai .retour { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.essai.loin { border-left-color: var(--rouge); background: var(--rouge-clair); }
.essai.loin .retour { color: var(--rouge); }
.essai.proche { border-left-color: var(--orange); background: var(--orange-clair); }
.essai.proche .retour { color: var(--orange); }
.essai.chaud { border-left-color: var(--jaune); background: var(--jaune-clair); }
.essai.chaud .retour { color: var(--jaune); }
.essai.gagne { border-left-color: var(--vert); background: var(--vert-clair); }
.essai.gagne .retour { color: var(--vert); }

/* ---------- résultat ---------- */
.resultat { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ligne); display: grid; gap: 14px; animation: apparait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.verdict { font-size: 1.35rem; font-weight: 800; }
.verdict.gagne { color: var(--vert); }
.verdict.perdu { color: var(--rouge); }
.prix-reel {
  display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(160deg, var(--carte-2), var(--carte)); border: 1px solid var(--ligne); box-shadow: var(--ombre-2), var(--reflet);
}
.prix-reel-etiquette { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre-2); font-weight: 700; }
.prix-reel-valeur { font-family: var(--police-chiffres); font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.prix-reel-detail { color: var(--encre-2); font-size: 0.95rem; }
.ou { margin: 0; color: var(--encre-2); font-size: 0.95rem; }
.partage { display: grid; gap: 10px; }
.partage-texte {
  margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--fond-2); font: 600 1rem/1.6 var(--police); white-space: pre-wrap;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
}
.partage-boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.prochain { margin: 0; color: var(--encre-2); }
.prochain strong { font-family: var(--police-chiffres); color: var(--encre); }

/* ---------- pied ---------- */
.pied { max-width: 1280px; margin: 28px auto 0; color: var(--encre-3); font-size: 0.82rem; text-align: center; }
.pied p { margin: 4px 0; }
.pied a { color: var(--encre-2); }

/* ---------- fenêtres ---------- */
.fenetre { border: 0; padding: 0; background: transparent; max-width: min(92vw, 560px); width: 100%; }
.fenetre::backdrop { background: rgba(20, 15, 10, 0.55); backdrop-filter: blur(6px); }
.fenetre-contenu {
  position: relative; background: var(--carte); color: var(--encre); border-radius: var(--rayon); padding: 26px 24px;
  box-shadow: var(--ombre-3), var(--reflet); border: 1px solid var(--ligne); display: grid; gap: 14px;
  animation: apparait 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; max-height: 85dvh; overflow: auto;
}
.fermer {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ligne);
  background: var(--carte-2); cursor: pointer; box-shadow: var(--ombre-1); font-weight: 700;
}
.regles { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 10px; }
.exemple { display: flex; gap: 12px; justify-content: center; font-size: 1.4rem; margin: 4px 0; }
.stats-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { display: grid; text-align: center; padding: 12px 6px; border-radius: 14px; background: var(--carte-2); box-shadow: var(--ombre-1), var(--reflet); }
.stat strong { font-size: 1.5rem; font-family: var(--police-chiffres); }
.stat span { font-size: 0.75rem; color: var(--encre-2); }
.repartition { display: grid; gap: 6px; }
.barre { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px; font-weight: 700; }
.barre i { display: block; height: 26px; border-radius: 8px; background: var(--encre-3); color: #fff; font-style: normal; font-size: 0.85rem; line-height: 26px; padding: 0 8px; text-align: right; min-width: 28px; box-shadow: var(--ombre-1); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.barre i.actif { background: linear-gradient(160deg, var(--vert), #167a45); }
.petit { margin: 0; color: var(--encre-3); font-size: 0.82rem; }
.archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.archive li a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px;
  background: var(--carte-2); text-decoration: none; color: inherit; box-shadow: var(--ombre-1), var(--reflet); border: 1px solid var(--ligne);
  transition: transform 0.15s, box-shadow 0.15s;
}
.archive li a:hover { transform: translateY(-2px); box-shadow: var(--ombre-2), var(--reflet); }
.archive .a-num { font-weight: 800; }
.archive .a-info { display: block; color: var(--encre-2); font-size: 0.85rem; }
.archive .a-etat { font-weight: 700; white-space: nowrap; }
.archive .a-etat.gagne { color: var(--vert); }
.archive .a-etat.perdu { color: var(--rouge); }
.archive .a-etat.encours { color: var(--jaune); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--encre); color: var(--fond); padding: 10px 16px; border-radius: 999px; font-weight: 700; box-shadow: var(--ombre-3);
  transition: opacity 0.25s, transform 0.25s; z-index: 50;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- page à propos ---------- */
.page { max-width: 820px; margin: 10px auto 0; }
.page .carte { padding: 28px; }
.page h2 { font-size: 1.4rem; margin: 22px 0 8px; }
.page h2:first-child { margin-top: 0; }
.page p, .page li { color: var(--encre-2); }
.page strong { color: var(--encre); }

/* ---------- accessibilité / mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .tache, .halo, .indice.nouveau, .carte, .essai, .resultat, .fenetre-contenu { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}