/* La page d'accueil de NDAKILI (AF447), dans l'habit Rue du jeu : elle lit le noyau du jeu (jeu/ndakili.css : polices,
   rôles, nom dessiné) et ne pose ici que sa mise en page. Papier cerné d'encre, ombres franches, jaune taxi pour l'action,
   bois sombre tramé de grain pour les bandeaux, titres en néon sur le bois. Deux thèmes : le papier par défaut, le bois
   le soir. Toute animation se limite à transform et opacity.
   Brice Kengni Zanguim */

/* -- 1. Les rôles de la page, une fois par thème -------------------------------------------------------------------- */
:root { --fond: var(--papier-creux); --texte: var(--encre); --discret: var(--encre-douce); --fond-image: var(--grain-sombre), var(--papier-creux); color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { --fond: var(--brun); --texte: var(--papier); --discret: color-mix(in srgb, var(--papier) 80%, transparent); --fond-image: var(--surface-brune); color-scheme: dark; }
}
:root[data-theme="sombre"] { --fond: var(--brun); --texte: var(--papier); --discret: color-mix(in srgb, var(--papier) 80%, transparent); --fond-image: var(--surface-brune); color-scheme: dark; }

/* -- 2. La page --------------------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--police-texte); font-size: 17px; line-height: 1.55; color: var(--texte); background: var(--fond-image); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2 { font-family: var(--police-titres); font-weight: 400; letter-spacing: .02em; margin: 0 0 14px; }
h1 { font-size: clamp(52px, 10vw, 96px); margin-bottom: 18px; }
h2 { font-size: clamp(22px, 3.4vw, 32px); line-height: 1.15; }
p { margin: 0 0 12px; }

/* le cadre : une étiquette de papier, le seul support du texte posé sur une image */
.cadre { position: relative; padding: 0 28px 24px; color: var(--encre); background: var(--papier); border: 4px solid var(--encre); box-shadow: 9px 9px 0 var(--encre); }
/* son titre : une plaque de bois en tête, les lettres en néon */
.cadre h2 { margin: 0 -28px 18px; padding: 14px 28px 12px; background: var(--surface-brune); border-bottom: 4px solid var(--encre);
  color: color-mix(in srgb, var(--lueur) 45%, var(--papier));
  text-shadow: 0 0 2px var(--lueur), 0 0 8px var(--lueur), 0 0 18px color-mix(in srgb, var(--lueur) 70%, transparent), 0 0 34px color-mix(in srgb, var(--lueur) 45%, transparent); }

.bouton { position: relative; display: inline-block; padding: 14px 30px; font-family: var(--police-titres); font-size: 16px; letter-spacing: .03em;
  text-transform: uppercase; text-decoration: none; color: var(--encre); background: var(--surface-vive); border: 3px solid var(--encre); box-shadow: 5px 5px 0 var(--encre);
  rotate: -1.5deg; transition: transform .12s, box-shadow .12s; }
.bouton:hover, .bouton:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--encre); outline: none; }
.bouton:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--encre); }
.bouton-petit { padding: 8px 16px; font-size: 13px; box-shadow: 3px 3px 0 var(--encre); }

/* -- 3. La tête : une bande de bois, le nom dessiné ----------------------------------------------------------------- */
.tete { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 10px max(16px, env(safe-area-inset-left));
  color: var(--papier); background: var(--surface-brune); border-bottom: 4px solid var(--encre); }
.marque { margin: 0; flex: 1; font-size: 30px; }
.tete-liens { display: flex; gap: 18px; font-size: 14px; font-weight: 600; }
.tete-liens a { text-decoration: none; color: var(--papier); }
.tete-liens a:hover, .tete-liens a:focus-visible { color: var(--vif); outline: none; text-shadow: 0 0 8px var(--vif); }
.theme { display: grid; place-items: center; width: 38px; height: 38px; cursor: pointer; color: var(--encre); background: var(--papier); border: 2px solid var(--encre); box-shadow: 2px 2px 0 var(--encre); }
.theme:hover, .theme:focus-visible { background: var(--vif); outline: none; }

/* -- 4. La une ---------------------------------------------------------------------------------------------------- */
.une { position: relative; min-height: min(86vh, 820px); display: grid; align-items: end; padding: 40px max(16px, 5vw); border-bottom: 4px solid var(--encre); }
.une-image { position: absolute; inset: 0; }
.une-image img { width: 100%; height: 100%; object-fit: cover; }
.une-cadre { position: relative; max-width: 580px; padding-top: 26px; rotate: -1deg; }
.une-phrase { font-size: clamp(17px, 2.2vw, 21px); font-weight: 500; }
.une-note { margin: 18px 0 0; font-size: 14px; color: var(--encre-douce); }

/* -- 5. Les blocs ------------------------------------------------------------------------------------------------- */
.bloc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 70px max(16px, 5vw); max-width: 1320px; margin: 0 auto; }
.bloc-inverse .bloc-texte { order: 2; }
.bloc-texte { rotate: -1deg; }
.bloc-inverse .bloc-texte { rotate: 1deg; }
.bloc-image { width: 100%; height: auto; border: 4px solid var(--encre); box-shadow: 9px 9px 0 var(--encre); }
.annonceurs { padding: 70px max(16px, 5vw) 50px; display: grid; place-items: center; }
.annonceurs-cadre { max-width: 760px; text-align: center; }
.contacts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.contact { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 18px; font-weight: 600; text-decoration: none; color: var(--encre);
  background: var(--papier-creux); border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); transition: transform .12s; }
.contact:hover, .contact:focus-visible { transform: translate(-1px, -1px); background: var(--vif); outline: none; }
.icone-whatsapp { color: var(--gain); }
.arobase { font-family: var(--police-titres); font-size: 22px; color: var(--info); }
.pied { padding: 44px 16px 50px; text-align: center; color: var(--papier); background: var(--surface-brune); border-top: 4px solid var(--encre); }
.pied-mentions { margin-top: 18px; font-size: 13px; color: color-mix(in srgb, var(--papier) 82%, transparent); }

/* -- 5 bis. Les pages intérieures (AF451) : un en-tête au fond tiré du jeu, le titre dans son cadre ; les étapes, les
   touches, les médias, les textes légaux ; tout en étiquettes de papier cernées d'encre. ----------------------------- */
.marque { text-decoration: none; color: inherit; }
.tete-liens a[aria-current="page"] { color: var(--vif); text-shadow: 0 0 8px var(--vif); }
.entete { position: relative; min-height: min(48vh, 440px); display: grid; align-items: end; padding: 40px max(16px, 5vw); border-bottom: 4px solid var(--encre);
  background: var(--surface-brune); }
.entete-image { position: absolute; inset: 0; }
.entete-image img { width: 100%; height: 100%; object-fit: cover; }
.entete-cadre { position: relative; max-width: 640px; padding: 18px 26px 16px; color: var(--encre); background: var(--papier); border: 4px solid var(--encre); box-shadow: 9px 9px 0 var(--encre); rotate: -1deg; }
.entete-cadre h1 { font-size: clamp(32px, 6vw, 56px); margin: 0 0 6px; }
.entete-cadre p { margin: 0; font-size: clamp(16px, 2vw, 19px); font-weight: 500; }
.bloc-seul { max-width: 980px; margin: 0 auto; padding: 50px max(16px, 5vw) 10px; }
.centre { text-align: center; }
.etapes { max-width: 1200px; margin: 0 auto; padding: 60px max(16px, 5vw) 20px; }
.etapes ol { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: etape; }
.etapes li { counter-increment: etape; padding-top: 26px; }
.etapes li::before { content: counter(etape); display: inline-grid; place-items: center; width: 54px; height: 54px; margin: -48px 0 8px -10px; font-family: var(--police-titres); font-size: 28px;
  color: var(--encre); background: var(--surface-vive); border: 3px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); rotate: -3deg; }
.touches { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.touches li { display: flex; align-items: baseline; gap: 12px; }
.touches kbd { flex: none; min-width: 34px; padding: 3px 9px; text-align: center; font-family: var(--police-titres); font-size: 13px; color: var(--encre); background: var(--papier-creux);
  border: 2px solid var(--encre); box-shadow: 2px 2px 0 var(--encre); }
.note { font-size: 15px; color: var(--encre-douce); }
.nom-grand { margin: 24px 0; padding: 36px 20px; text-align: center; font-size: clamp(52px, 10vw, 110px); background: var(--surface-brune); border: 3px solid var(--encre); }
.telechargements { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.galerie img { width: 100%; height: auto; border: 3px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); transition: transform .12s; }
.galerie a:hover img, .galerie a:focus-visible img { transform: translate(-2px, -2px); }
.film { width: 100%; height: auto; display: block; border: 3px solid var(--encre); background: var(--encre); }
.texte-legal { max-width: 860px; margin: 50px auto 10px; padding-top: 22px; }
.texte-legal h2 { font-size: clamp(18px, 2.4vw, 22px); margin: 18px -28px 12px; padding: 10px 28px 8px; }
.texte-legal h2:first-child { margin-top: -22px; }
.texte-legal a { color: var(--info); font-weight: 600; }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; font-size: 14px; font-weight: 600; }
.pied-liens a { color: var(--papier); text-decoration: none; }
.pied-liens a:hover, .pied-liens a:focus-visible { color: var(--vif); outline: none; }

/* -- 6. Les révélations : visibles d'office ; la page ne les masque qu'avec son script --------------------------- */
.avec-revelation .revele { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s ease-out; }
.avec-revelation .revele.vu { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .etapes ol, .galerie { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .touches { grid-template-columns: minmax(0, 1fr); }
  .entete { min-height: 40vh; padding: 24px 16px; }
  .texte-legal { margin: 30px 16px 10px; }
  .bloc { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 44px 16px; }
  .bloc-inverse .bloc-texte { order: 0; }
  .tete-liens { display: none; }
  .marque { font-size: 24px; }
  .une { min-height: 78vh; padding: 24px 16px; }
  .cadre { padding: 0 18px 20px; }
  .cadre h2 { margin: 0 -18px 16px; padding: 12px 18px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton, .contact, .avec-revelation .revele { transition: none; }
}