/* DAHOMAN — Carnet du Gardien et pages carte. Complète style.css (mêmes couleurs et polices). */

/* Petites icônes dessinées en CSS (masque, carte, jeu, Clé) : couleur = currentColor */
:root {
  --i-masque: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2040%27%3E%3Cpath%20d%3D%27M4%2017C4%207.5%2017%202%2032%202s28%205.5%2028%2015c0%209-6%2016-14%2016-6%200-9-5-14-5s-8%205-14%205C10%2033%204%2026%204%2017z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M11%2018.5c3.5-4.5%2010-4.5%2013%200-3.5%202.4-9.5%202.4-13%200zM40%2018.5c3-4.5%209.5-4.5%2013%200-3.5%202.4-9.5%202.4-13%200z%27%2F%3E%3C%2Fsvg%3E");
  --i-carte: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%275%27%20y%3D%273%27%20width%3D%2714%27%20height%3D%2718%27%20rx%3D%272.5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M9%208.5h6M9%2012.5h6M9%2016.5h3%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --i-jeu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279.3%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M10%207.8l6.2%204.2-6.2%204.2z%27%2F%3E%3C%2Fsvg%3E");
  --i-cle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%2712%27%20r%3D%274.3%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.3%27%2F%3E%3Cpath%20d%3D%27M11.8%2012H21M18.2%2012v3.6M15.4%2012v2.6%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.3%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
}
.slot__masque, .slot__badge::before, .leg::before, .cp-cle {
  display: inline-block; background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}

/* ------------------------------------------------------------------ */
/* Page carte                                                           */
/* ------------------------------------------------------------------ */
.carte-page__grille { display: grid; gap: 30px; align-items: start; }
@media (min-width: 780px) {
  .carte-page__grille { grid-template-columns: minmax(260px, 380px) 1fr; gap: 48px; }
  .cp__carte { position: sticky; top: 24px; }
}
.cp__carte { margin: 0; }
.cp__cadre {
  position: relative; width: 100%; max-width: 380px; margin-inline: auto; aspect-ratio: 600 / 840;
  border-radius: 5.1% / 3.65%; box-shadow: var(--ombre), 0 0 0 3px var(--type, var(--or));
  background: var(--fond-2);
}
.cp__face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.cp__face--e { opacity: 0; transform: scale(.94); }
.cp__face[hidden] { display: none !important; }
.carte-page h1 { font-size: clamp(2.5rem, 8vw, 3.8rem); color: var(--or); overflow-wrap: anywhere; }
.cp__revele { font-weight: 800; color: var(--or); margin: 0 0 14px; }

/* Le masque tombe : la Forme Masquée s'efface et se détache, la Forme Éveillée se révèle. */
.cp__cadre.est-eveille { box-shadow: var(--ombre), 0 0 0 3px var(--type, var(--or)), 0 0 70px -10px var(--type, var(--or)); transition: box-shadow 1.4s ease; }
.cp__cadre.est-eveille .cp__face--m { opacity: 0; transform: translateY(-14px) scale(1.04); filter: blur(3px); transition: opacity 1.3s ease, transform 1.3s ease, filter 1.3s ease; }
.cp__cadre.est-eveille .cp__face--e { opacity: 1; transform: none; transition: opacity 1.5s ease .25s, transform 1.5s cubic-bezier(.2, .8, .2, 1) .25s; }
/* Masque verrouillé (Sombafang avant le 6 février 2027) : le masque tremble, il ne tombe pas. */
.cp__cadre.est-verrouille { animation: cp-tremble .5s ease 2; }
@keyframes cp-tremble { 0%, 100% { transform: none; } 25% { transform: rotate(-1.4deg); } 75% { transform: rotate(1.4deg); } }

.enigme { background: var(--fond-2); border-left: 4px solid var(--or); border-radius: 0 16px 16px 0; padding: 14px 18px; margin: 20px 0; }
.enigme__titre { font-size: 1.15rem; color: var(--or); margin-bottom: .4em; }
.enigme__texte { font-weight: 700; color: var(--creme); margin-bottom: .7em; }
.enigme__reponse summary { cursor: pointer; font-weight: 800; color: var(--or); padding: 6px 0; min-height: 44px; display: flex; align-items: center; }
.enigme__reponse summary:hover { color: var(--or-clair); }
.enigme__reponse p { margin: .4em 0 0; color: var(--creme); }

/* Fiche, qualités, liens */
.cp-bloc { margin: 26px 0; }
.cp-bloc__titre { font-size: 1.2rem; color: var(--or); margin: 0 0 .6em; }
.cp-fiche { display: grid; gap: 0; margin: 0; border: 1.5px solid var(--bord); border-radius: 16px; overflow: hidden; background: var(--fond-2); }
.cp-fiche > div { display: grid; grid-template-columns: minmax(7.5em, 34%) 1fr; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--bord); }
.cp-fiche > div:first-child { border-top: 0; }
.cp-fiche dt { color: var(--texte-doux); font-weight: 700; font-size: .95rem; }
.cp-fiche dd { margin: 0; color: var(--creme); font-weight: 700; overflow-wrap: anywhere; }
.cp-fiche a { color: var(--or); text-decoration: underline; text-underline-offset: .18em; }
.cp-type { width: .8em; height: .8em; border-radius: 50%; background: var(--c, var(--or)); display: inline-block; margin-right: .4em; vertical-align: -.05em; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.cp-cle { --icone: var(--i-cle); width: 1.1em; height: 1.1em; margin-right: .35em; vertical-align: -.2em; color: var(--or); }

.cp-qualites { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 520px; }
.cp-qualites li { display: grid; grid-template-columns: 6.2em 1fr 2.6em; gap: 10px; align-items: center; }
.q__nom { font-weight: 800; color: var(--creme); }
.q__barre { height: 12px; border-radius: 999px; background: var(--fond-3); box-shadow: inset 0 0 0 1.5px var(--bord); overflow: hidden; }
.q__barre > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--or-2), var(--or)); }
.q__val { font: 800 1rem/1 var(--police-titre); color: var(--or); text-align: right; }

.cp-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cp-liens a { display: inline-block; padding: 4px 0; min-height: 32px; }

/* ------------------------------------------------------------------ */
/* Carnet                                                               */
/* ------------------------------------------------------------------ */
.carnet__tete { margin-bottom: 28px; }
.carnet__intro { font-size: 1.15rem; max-width: 62ch; }
.carnet__vie { color: var(--texte-doux); font-size: .95rem; max-width: 62ch; }
.carnet__bloc { margin-top: 42px; }
.carnet__h2 { font-size: clamp(1.4rem, 3.6vw, 1.8rem); color: var(--or); }
.carnet__aide { color: var(--texte-doux); max-width: 64ch; }
.carnet__prog-txt { font: 800 1.05rem/1.3 var(--police-titre); color: var(--creme); margin-bottom: .5em; }
.carnet__fete { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--fond-3); border: 1.5px solid var(--or); color: var(--or); font-weight: 800; }
.carnet__fete[hidden] { display: none; }

.carnet__barre, .reg-page__barre {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; border: 0;
  border-radius: 999px; background: var(--fond-3); overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--bord);
}
.carnet__barre::-webkit-progress-bar, .reg-page__barre::-webkit-progress-bar { background: var(--fond-3); }
.carnet__barre::-webkit-progress-value, .reg-page__barre::-webkit-progress-value { background: linear-gradient(90deg, var(--or-2), var(--or)); border-radius: 999px; }
.carnet__barre::-moz-progress-bar, .reg-page__barre::-moz-progress-bar { background: var(--or); border-radius: 999px; }
.carnet__barre { height: 10px; max-width: 520px; }
.reg-page__barre { height: 9px; margin-top: 8px; max-width: 360px; }

/* Légende : ombre, carte, jeu */
.carnet__legende { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--texte-doux); font-size: .95rem; font-weight: 700; }
.carnet__legende li { display: flex; align-items: center; gap: 8px; }
.leg { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.leg::before { content: ""; width: 15px; height: 15px; }
.leg--ombre { border: 2px dashed var(--bord-fort); color: #8d7f65; }
.leg--ombre::before { --icone: var(--i-masque); width: 17px; height: 11px; }
.leg--carte { background: var(--or); color: var(--encre); }
.leg--carte::before { --icone: var(--i-carte); }
.leg--jeu { background: #2fc2ba; color: var(--encre); }
.leg--jeu::before { --icone: var(--i-jeu); }

/* Les 12 régions : raccourcis */
.carnet__regions ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.reg-puce {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--bord); background: var(--fond-2); color: var(--creme); font-weight: 800; text-decoration: none;
}
.reg-puce:hover, .reg-puce:focus-visible { border-color: var(--or); }
.reg-puce__n { color: var(--or); font-size: .9em; }
.reg-puce.est-complete { border-color: var(--or); background: var(--fond-3); }
.reg-puce.est-complete .reg-puce__n::after { content: " ✓"; }

/* Une page par région */
.carnet__pages { display: grid; gap: 22px; margin-top: 24px; }
.reg-page { background: var(--fond-2); border: 1.5px solid var(--bord); border-radius: var(--rayon); padding: 16px; scroll-margin-top: 16px; }
@media (min-width: 640px) { .reg-page { padding: 20px 22px; } }
.reg-page.est-complete { border-color: var(--or); background: var(--fond-3); }
.reg-page.est-fetee { animation: reg-fete 1.6s ease 1; }
@keyframes reg-fete {
  0% { box-shadow: 0 0 0 0 rgba(243, 212, 138, .0); }
  30% { box-shadow: 0 0 0 6px rgba(243, 212, 138, .55), 0 0 60px rgba(243, 212, 138, .45); }
  100% { box-shadow: 0 0 0 0 rgba(243, 212, 138, 0); }
}
.reg-page__tete { margin-bottom: 14px; }
.reg-page__nom { font-size: 1.35rem; color: var(--creme); margin: 0; }
.reg-page__titre { font-size: .95rem; color: var(--texte-doux); margin: 0 0 6px; }
.reg-page__compte { font-weight: 800; color: var(--or); margin: 0; }

/* Emplacements */
.grille-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 560px) { .grille-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grille-slots { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; } }
.slot { margin: 0; aspect-ratio: 600 / 840; position: relative; }
.slot__vide {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 5.1% / 3.65%;
  border: 2px dashed var(--bord); background: var(--fond); color: #8d7f65;
}
.slot__etat { display: grid; justify-items: center; gap: 5px; }
.slot__masque { --icone: var(--i-masque); width: 34px; height: 22px; opacity: .8; }
.slot__num { font: 800 .85rem/1 var(--police-titre); color: var(--texte-doux); letter-spacing: .05em; }
.slot a { position: absolute; inset: 0; display: block; border-radius: 5.1% / 3.65%; outline-offset: 3px; transition: transform .2s ease; }
.slot a:hover { transform: translateY(-3px); }
.slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 5.1% / 3.65%; box-shadow: 0 0 0 2px var(--type, var(--or)), 0 10px 22px -12px #000; }
.slot.est-trouve { animation: apparition .6s cubic-bezier(.2, .8, .2, 1); }
.slot__badge {
  position: absolute; right: -5px; top: -5px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--or); color: var(--encre); box-shadow: 0 0 0 2px var(--fond), 0 4px 10px -4px #000;
}
.slot__badge::before { content: ""; width: 14px; height: 14px; }
.slot__badge--carte::before { --icone: var(--i-carte); }
.slot__badge--jeu { background: #2fc2ba; }
.slot__badge--jeu::before { --icone: var(--i-jeu); }

.scan-zone { margin-top: 18px; max-width: 420px; }
.scan-zone video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #000; border-radius: 16px; border: 2px solid var(--bord-fort); }
.liste-install { padding-left: 1.2em; max-width: 64ch; }
.liste-install li { margin-bottom: .6em; }

.premium { background: var(--fond-2); border: 1.5px dashed var(--bord-fort); border-radius: var(--rayon); padding: 22px; max-width: 640px; }
.premium__badge { display: inline-block; margin: 0 0 8px; padding: 3px 12px; border-radius: 999px; background: var(--brique); color: var(--creme); font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }

.carnet__fin { border-top: 1px solid var(--bord); padding-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  .slot.est-trouve, .reg-page.est-fetee, .cp__cadre.est-verrouille { animation: none; }
  .slot a, .cp__cadre.est-eveille .cp__face--m, .cp__cadre.est-eveille .cp__face--e { transition: none; }
}