/* La Collection, version 2 (24 oct. 2026, après le premier test) : décor sombre et profond, cartes en relief.
   Charte : ivoire, vert feuillage, encre ; or et argent pour les cartes. Polices du système (aucune requête externe).
   Texte de base 18 px, boutons de 52 px au moins, contraste fort. Les animations s'arrêtent si le téléphone le demande. */
:root {
  --nuit: #13201C; --nuit-2: #1B2D27; --vert: #2F5D50; --vert-clair: #3F7A69; --papier: #F4EFE6; --carte: #FFFDF8;
  --encre: #1E2A2F; --texte: #F6F1E7; --doux: #C9D3CF; --doux-sombre: #4A5652; --ligne: rgba(246,241,231,.16);
  --qualite: #2E7048; --defaut: #B5432B; --or: #F2B33D; --or-clair: #FFE08A; --or-fonce: #8A5D0B; --argent: #C9D1CE;
  --titre: Georgia, "Times New Roman", serif;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--texte); font: 18px/1.5 var(--police);
  background: radial-gradient(ellipse at 50% -10%, #2E5547 0%, var(--nuit) 55%) fixed, var(--nuit);
  padding-bottom: calc(86px + env(safe-area-inset-bottom)); overflow-x: hidden; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--or-clair); }
img { max-width: 100%; display: block; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* Le décor : de la profondeur, des taches de lumière qui dérivent lentement. */
.decor { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.decor i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: .35; animation: derive 26s ease-in-out infinite alternate; }
.decor i:nth-child(1) { background: #2F5D50; left: -30vmax; top: -20vmax; }
.decor i:nth-child(2) { background: #6B5A1E; right: -35vmax; top: 30vh; animation-duration: 32s; opacity: .22; }
.decor i:nth-child(3) { background: #23463C; left: 10vw; bottom: -45vmax; animation-duration: 38s; }
@keyframes derive { to { transform: translate(6vmax, -4vmax) scale(1.08); } }

.entete { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: rgba(19,32,28,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ligne); }
.marque { font: 700 21px/1.1 var(--titre); }
.marque span { display: block; font: 500 13px var(--police); color: var(--doux); }
.lien-apropos { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-weight: 800; font-size: 20px; cursor: pointer; }

main { max-width: 560px; margin: 0 auto; padding: 16px; outline: none; animation: entree .35s ease-out; }
@keyframes entree { from { transform: translateY(10px); } } /* pas de transparence : rien ne reste invisible si les animations sont bloquées */
h1 { font: 700 28px/1.15 var(--titre); margin: 4px 0 8px; }
h2 { font: 700 21px/1.25 var(--titre); margin: 24px 0 8px; }
.sous { color: var(--doux); margin: 0 0 14px; }
.petit { font-size: 15px; color: var(--doux); }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 12px 16px; margin: 10px 0;
  border: 0; border-radius: 16px; background: var(--papier); color: var(--encre); font-weight: 800; font-size: 18px; text-decoration: none; cursor: pointer; text-align: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.clair { background: rgba(246,241,231,.08); color: var(--texte); border: 2px solid rgba(246,241,231,.35); box-shadow: none; }
.btn.or { background: linear-gradient(135deg, var(--or-clair), var(--or) 55%, #D9952A); color: var(--encre); }
.btn.insta { background: linear-gradient(135deg, #F7B24A, #E1306C 55%, #833AB4); color: #fff; }
.btn[disabled] { opacity: .4; cursor: default; }

.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(19,32,28,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--ligne); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
.barre button { min-height: 62px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12.5px; font-weight: 700; color: var(--doux); cursor: pointer; border-radius: 12px; }
.barre button span { font-size: 22px; line-height: 1; }
.barre button[aria-current="page"] { color: var(--or-clair); background: rgba(242,179,61,.12); }

/* ---------- La carte en relief ---------- */
.scene3d { perspective: 1100px; display: flex; justify-content: center; padding: 10px 0 6px; }
.carte3d { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --metal: var(--argent); width: min(100%, 340px); aspect-ratio: 5 / 7; position: relative;
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; touch-action: pan-y; cursor: grab; }
.carte3d.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.carte3d .cadre { position: absolute; inset: 0; border-radius: 22px; padding: 7px; transform-style: preserve-3d;
  background: linear-gradient(145deg, #fff, var(--metal) 30%, #7F8B87 55%, var(--metal) 80%, #fff); box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.carte3d.or { --metal: var(--or); }
.carte3d.or .cadre { background: conic-gradient(from var(--angle, 0deg), #FFF3C4, var(--or), #B9791C, var(--or), #FFF3C4, #FFD36B, #FFF3C4);
  animation: tourne 5s linear infinite; box-shadow: 0 0 46px -4px var(--or), 0 30px 60px rgba(0,0,0,.55); }
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tourne { to { --angle: 360deg; } }
.carte3d .face { position: absolute; inset: 7px; border-radius: 16px; overflow: hidden; background: var(--carte); color: var(--encre); transform: translateZ(18px); display: flex; flex-direction: column; }
.carte3d .photo { position: relative; flex: 1 1 62%; overflow: hidden; }
.carte3d .photo img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transform: translate(calc((var(--mx) - 50%) * -0.06), calc((var(--my) - 50%) * -0.06)); }
.carte3d .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 28%, transparent 62%, rgba(0,0,0,.6)); }
.carte3d .haut { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 6px; transform: translateZ(30px); }
.pastille { font-weight: 800; font-size: 14px; padding: 5px 10px; border-radius: 10px; background: var(--metal, var(--argent)); color: var(--encre); }
.etat { font-weight: 800; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; }
.carte3d.or .etat { background: var(--or); color: var(--encre); }
.carte3d .nom { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 10px; color: #fff; }
.carte3d .nom b { display: block; font: 700 30px/1.05 var(--titre); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.carte3d .nom span { font-weight: 700; font-size: 14px; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.carte3d .bas { padding: 10px 12px 12px; display: grid; gap: 8px; }
.rarete { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--doux-sombre); }
.rarete .gemmes { color: var(--vert); letter-spacing: 2px; font-size: 15px; }
.rarete b { color: var(--encre); }
.etapes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.etapes div { border-radius: 10px; padding: 6px 8px; font-size: 13px; font-weight: 800; text-align: center; background: #ECE6DA; color: var(--doux-sombre); line-height: 1.25; }
.etapes .fait-argent { background: linear-gradient(135deg, #F2F4F3, var(--argent)); color: var(--encre); }
.etapes .fait-or { background: linear-gradient(135deg, var(--or-clair), var(--or)); color: var(--encre); }
.credit-carte { position: absolute; z-index: 2; right: 10px; top: 46px; font-size: 10px; color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.9); transform: translateZ(30px); }
.credit-carte a { color: inherit; }
/* Le reflet qui suit le doigt : argent discret, or éclatant. */
.carte3d .reflet { position: absolute; inset: 7px; border-radius: 16px; pointer-events: none; transform: translateZ(19px); mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,0) 45%); }
.carte3d.or .reflet { mix-blend-mode: soft-light; opacity: .8;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.9), transparent 35%),
    linear-gradient(115deg, transparent 20%, rgba(255,214,102,.5) 35%, rgba(150,220,255,.35) 50%, rgba(255,140,200,.35) 62%, transparent 78%);
  background-size: 100% 100%, 250% 250%; background-position: center, var(--mx) var(--my); }
.carte3d.or::after { content: '✦ ✧ ✦'; position: absolute; top: -18px; left: 0; right: 0; text-align: center; color: var(--or-clair); font-size: 18px; letter-spacing: 18px; transform: translateZ(40px); animation: scintille 2.4s ease-in-out infinite; }
@keyframes scintille { 50% { opacity: .3; } }

/* Le dos de la carte (le mystère du jour) et le retournement quand on la gagne. */
.dos { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; transform: rotateY(180deg) translateZ(1px);
  background: radial-gradient(circle at 50% 40%, #3F7A69, #1B2D27 70%); border: 7px solid #8E9A96; display: grid; place-items: center; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.dos .embleme { text-align: center; color: var(--or-clair); }
.dos .embleme b { display: block; font: 700 76px/1 var(--titre); text-shadow: 0 0 30px rgba(242,179,61,.6); }
.dos .embleme span { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; color: var(--doux); }
.carte3d .cadre, .carte3d .face, .carte3d .reflet { backface-visibility: hidden; }
.carte3d.mystere { transform: rotateY(180deg); }
.carte3d.revele { animation: retourne 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes retourne { from { transform: rotateY(180deg) scale(.9); } 60% { transform: rotateY(-12deg) scale(1.04); } to { transform: rotateY(0) scale(1); } }
.eclat { position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,224,138,.55), transparent 60%); animation: eclat 1.4s ease-out both; }
@keyframes eclat { from { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } to { opacity: 0; transform: scale(1.2); } }

/* ---------- Accueil ---------- */
.promesse { text-align: center; }
.promesse h1 { font-size: 30px; margin-top: 4px; }
.promesse .sous { margin-bottom: 4px; }
.promesse .dos .embleme span { font-size: 9px; letter-spacing: .08em; }
.promesse p { margin: 6px 0; }
.trois { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.trois li { display: flex; gap: 12px; align-items: center; background: rgba(246,241,231,.06); border: 1px solid var(--ligne); border-radius: 14px; padding: 10px 12px; text-align: left; }
.trois i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; }
.trois .c1 { background: rgba(246,241,231,.15); } .trois .c2 { background: linear-gradient(135deg, #F2F4F3, var(--argent)); color: var(--encre); } .trois .c3 { background: linear-gradient(135deg, var(--or-clair), var(--or)); color: var(--encre); }
.niveaux { display: grid; gap: 10px; }
.niveau { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 16px; border-radius: 18px; border: 2px solid var(--ligne);
  background: rgba(246,241,231,.06); cursor: pointer; text-align: left; }
.niveau.conseille { border-color: var(--or); background: rgba(242,179,61,.1); }
.niveau b { display: block; font-size: 19px; }
.niveau small { color: var(--doux); font-size: 15px; }
.niveau .ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(246,241,231,.12); font-size: 24px; }

/* ---------- La partie ---------- */
.indice-media { position: relative; border-radius: 20px; overflow: hidden; background: var(--carte); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.indice-media img.photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.indice-media img.silhouette { width: 100%; aspect-ratio: 4/3; object-fit: contain; padding: 16px; background: linear-gradient(180deg, #F7E7C8, #F4EFE6); }
.credit { font-size: 12.5px; color: var(--doux-sombre); padding: 6px 10px; background: var(--carte); }
.credit a { color: inherit; }
.ecoute { display: grid; place-items: center; gap: 10px; padding: 26px 16px; background: radial-gradient(circle, #3F7A69, var(--vert)); color: #fff; }
.ecoute .rond { width: 98px; height: 98px; border-radius: 50%; border: 0; background: var(--or); color: var(--encre); font-size: 40px; cursor: pointer; box-shadow: 0 0 0 10px rgba(242,179,61,.18); }
.essais { display: flex; gap: 6px; margin: 12px 0 4px; }
.essais i { flex: 1; height: 10px; border-radius: 5px; background: rgba(246,241,231,.18); }
.essais i.rate { background: var(--defaut); }
.indices { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.indices li { background: rgba(242,179,61,.12); border-left: 5px solid var(--or); padding: 10px 12px; border-radius: 8px; }
.indices li b { display: block; font-size: 13.5px; color: var(--or-clair); text-transform: uppercase; letter-spacing: .04em; }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.choix button { min-height: 56px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--ligne); background: rgba(246,241,231,.07); font-weight: 700; font-size: 16.5px; cursor: pointer; line-height: 1.2; }
.choix button.faux { background: rgba(181,67,43,.25); border-color: var(--defaut); color: #F3B5A6; text-decoration: line-through; }
.choix button.juste { background: rgba(46,112,72,.35); border-color: #5DBB84; color: #CFF0DB; }
.resultat { text-align: center; padding: 6px 0; }
.resultat .grand { font: 700 28px/1.2 var(--titre); }
.grille-emoji { font-size: 26px; letter-spacing: 4px; margin: 6px 0; }

/* ---------- Fiche sous la carte ---------- */
.fiche { background: var(--carte); color: var(--encre); border-radius: 20px; padding: 14px; margin-top: 14px; display: grid; gap: 10px; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chiffres div { background: var(--papier); border-radius: 10px; padding: 8px 6px; text-align: center; }
.chiffres small { display: block; font-size: 12px; color: var(--doux-sombre); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.chiffres b { font-size: 16px; }
.trait { display: flex; gap: 10px; align-items: flex-start; }
.trait em { flex: none; font-style: normal; font-weight: 800; font-size: 13px; text-transform: uppercase; color: #fff; padding: 5px 8px; border-radius: 7px; margin-top: 2px; }
.trait.q em { background: var(--qualite); } .trait.d em { background: var(--defaut); }
.secret { background: var(--vert); color: #fff; border-radius: 14px; padding: 12px 14px; }
.secret small { display: block; color: var(--or-clair); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.bloc { padding: 12px 14px; border-radius: 14px; background: var(--papier); }
.bloc b { color: var(--vert); }
.fiche .btn.clair { color: var(--vert); border-color: var(--vert); background: transparent; }
.sources { font-size: 14px; color: var(--doux); padding-left: 18px; }
.sources li { margin: 4px 0; }
.fiche .sources { color: var(--doux-sombre); }
.fiche .sources a, .fiche a { color: var(--vert); }

/* ---------- Album ---------- */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; perspective: 800px; }
.case { position: relative; aspect-ratio: 5/7; border-radius: 12px; border: 2px dashed rgba(246,241,231,.22); display: grid; place-items: center; font-weight: 800; color: rgba(246,241,231,.35);
  background: transparent; padding: 0; cursor: default; overflow: hidden; }
.case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case.neuf { background: radial-gradient(circle at 50% 40%, #3F7A69, #1B2D27 75%); border: 2px solid rgba(246,241,231,.3); }
.case img.sil { object-fit: contain; padding: 10px; background: none; filter: invert(1) brightness(.85); opacity: .75; }
.case.ouverte { cursor: pointer; border-style: solid; transition: transform .2s; }
.case.ouverte:active { transform: scale(.96); }
.case.appris { border: 4px solid var(--argent); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.case.vu { border: 4px solid var(--or); box-shadow: 0 0 16px -2px var(--or), 0 6px 16px rgba(0,0,0,.4); }
.case.vu::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size: 250% 100%; animation: balaye 3.5s ease-in-out infinite; }
@keyframes balaye { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.case .num { position: absolute; left: 4px; top: 4px; z-index: 1; background: rgba(255,255,255,.92); color: var(--encre); border-radius: 6px; font-size: 12px; padding: 1px 5px; }
.case .q { position: absolute; z-index: 1; right: 6px; bottom: 4px; font-size: 18px; color: var(--or-clair); }
.legende-album { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--doux); margin: 10px 0; }
.legende-album i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; }

/* ---------- Progrès, liste, divers ---------- */
.palier { background: rgba(246,241,231,.06); border: 1px solid var(--ligne); border-radius: 14px; padding: 12px 14px; margin: 8px 0; }
.palier .jauge { height: 12px; border-radius: 6px; background: rgba(246,241,231,.15); overflow: hidden; margin-top: 8px; }
.palier .jauge i { display: block; height: 100%; background: linear-gradient(90deg, #5DBB84, var(--or)); }
.palier.gagne { border: 2px solid var(--or); background: rgba(242,179,61,.1); }
.garde { display: flex; gap: 10px; align-items: center; background: rgba(46,112,72,.25); border: 1px solid #5DBB84; border-radius: 14px; padding: 12px 14px; }
.liste-comptage { list-style: none; padding: 0; margin: 0; }
.liste-comptage li { display: grid; grid-template-columns: 64px 1fr 48px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.liste-comptage img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.liste-comptage input { width: 32px; height: 32px; accent-color: var(--or); }
.message-flottant { position: fixed; left: 16px; right: 16px; bottom: 98px; z-index: 9; max-width: 520px; margin: 0 auto; background: var(--papier); color: var(--encre); padding: 12px 16px; border-radius: 14px; text-align: center; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ligne-cases { display: flex; gap: 10px; align-items: flex-start; }
.ligne-cases input { width: 28px; height: 28px; flex: none; accent-color: var(--or); }
.photos-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photos-choix button { padding: 0; border: 3px solid var(--ligne); border-radius: 14px; overflow: hidden; background: none; cursor: pointer; }
.photos-choix img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.photos-choix button.juste { border-color: #5DBB84; } .photos-choix button.faux { border-color: var(--defaut); opacity: .55; }
.sons-choix { display: grid; gap: 8px; }
.sons-choix .rang { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.encadre { background: rgba(246,241,231,.06); border: 1px solid var(--ligne); border-radius: 16px; padding: 12px 14px; margin: 12px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .entete, .barre, .btn, #message, .pas-imprimer, .decor { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 12pt; }
  .liste-comptage li { break-inside: avoid; border-color: #ccc; }
}