/* ═══════════════════════════════════════════════════════════════
   PAGE REMPARZ — composants propres à cette page

   Chargée APRÈS main.css et landing.css : les blocs @layer
   ci-dessous S'AJOUTENT aux couches déjà déclarées, l'ordre de
   priorité reste celui fixé en tête de main.css.

   Aucun jeton global n'est redéfini ici. Les quelques couleurs
   propres au jeu vivent dans des variables LOCALES à
   `.page-remparz` : elles ne peuvent donc pas fuir sur le reste
   du site, et elles restent écrites en oklch() comme jetons.css.

   Parti pris assumé : la bannière du jeu reste NOCTURNE dans les
   deux thèmes — c'est une affiche, pas une surface de lecture.
   Tout le reste de la page suit le thème du visiteur.
   ═══════════════════════════════════════════════════════════════ */

@layer composants {

  .page-remparz {
    /* La palette du jeu lui-même, convertie en oklch : la page et le
       jeu partagent exactement les mêmes couleurs.                  */
    --rz-nuit-haut:  oklch(22.3% 0.028 58);   /* pierre #25180E       */
    --rz-nuit-bas:   oklch(18.9% 0.022 56);   /* nuit   #1B110A       */
    --rz-encre-nuit: oklch(95.9% 0.044 85);   /* encre  #FFF0D1       */
    --rz-braise:     oklch(79.9% 0.122 83);   /* braise #E3B65A       */
  }

  /* ═══ Bannière du jeu ═══
     Une seule pile : le décor (aria-hidden) au fond, le texte
     au-dessus. Le décor est entièrement DESSINÉ en CSS — aucune
     image à charger, aucun texte en image. */
  .jeu-hero {
    position: relative;
    isolation: isolate;
    padding-block: 40px 56px;

    & .jeu-hero-corps {
      position: relative;
      z-index: 1;
      border-radius: 26px;
      overflow: hidden;
      padding: clamp(32px, 6vw, 68px) clamp(24px, 5vw, 60px) clamp(56px, 8vw, 88px);
      background: linear-gradient(168deg, var(--rz-nuit-haut), var(--rz-nuit-bas));
      color: var(--rz-encre-nuit);
      border: 1px solid oklch(100% 0 0 / 0.08);
      box-shadow: var(--shadow);

      /* Deux colonnes tant qu'il y a la place : le texte porte
         l'action, l'image porte l'envie. En dessous, l'image
         passe SOUS le texte — sur un téléphone, on veut lire
         l'accroche avant de regarder. */
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
      gap: clamp(28px, 4vw, 56px);
      align-items: center;

      @media (width <= 900px) { grid-template-columns: 1fr; }
    }

    & .jeu-hero-texte { position: relative; z-index: 1; }

    & .jeu-hero-visuel {
      position: relative;
      z-index: 1;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid oklch(100% 0 0 / 0.12);
      box-shadow: 0 30px 70px oklch(0% 0 0 / 0.45);
      rotate: -1deg;

      & img { width: 100%; height: auto; object-fit: contain; }

      @media (width <= 900px) { rotate: 0deg; }
    }

    /* Icône du jeu + nom : même grammaire que .produit-identite
       des autres landings, à l'échelle d'une affiche. */
    & .jeu-identite {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-block: 18px 18px;

      & img {
        width: clamp(56px, 9vw, 84px);
        height: auto;
        border-radius: 18px;
        border: 1px solid oklch(from var(--rz-braise) l c h / 0.35);
      }
    }

    & h1 {
      font-size: clamp(2.8rem, 8vw, 5rem);
      letter-spacing: -0.02em;
      margin: 0;
    }

    & .jeu-accroche {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 2.8vw, 1.95rem);
      line-height: 1.22;
      text-wrap: balance;
      max-width: 24ch;

      & em {
        font-style: normal;
        color: var(--rz-braise);
        display: block;
      }
    }

    & .jeu-intro {
      margin-block-start: 20px;
      max-width: 44ch;
      color: oklch(from var(--rz-encre-nuit) l c h / 0.78);
      font-size: 1.05rem;
    }

    & .carte-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-block-start: 32px;
    }

    /* Sur la nuit, le bouton « trait » a besoin de son propre
       contraste : les jetons de la page (--ink, --line) sont
       calculés pour le fond du site, pas pour cette affiche. */
    & .bouton-trait {
      color: var(--rz-encre-nuit);
      border-color: oklch(100% 0 0 / 0.28);

      &:hover { border-color: var(--rz-braise); color: var(--rz-braise); }
    }
  }

  /* Pastille d'état : le point respire doucement pour dire
     « chantier en cours », jamais pour attirer l'œil de force. */
  .statut-beta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rz-braise);
    border: 1px solid oklch(from var(--rz-braise) l c h / 0.4);
    border-radius: 999px;
    padding: 7px 15px;
  }

  .statut-point {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rz-braise);
    box-shadow: 0 0 0 0 oklch(from var(--rz-braise) l c h / 0.55);
    animation: rz-braise 2.8s ease-out infinite;
  }

  @keyframes rz-braise {
    70%  { box-shadow: 0 0 0 9px oklch(from var(--rz-braise) l c h / 0); }
    100% { box-shadow: 0 0 0 0  oklch(from var(--rz-braise) l c h / 0); }
  }

  /* Décor de la bannière : une lueur de braise, dessinée en CSS —
     aucune image à charger. */
  .jeu-hero-fond {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* La lueur déborde volontairement du cadre : `clip` la retient
       ici, sinon elle élargit le document et fait apparaître une
       barre de défilement horizontale sur téléphone. */
    overflow: clip;

    & .lueur {
      position: absolute;
      inset-block-start: -18%;
      inset-inline-end: -6%;
      width: min(560px, 70%);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, oklch(from var(--rz-braise) l c h / 0.22), transparent 68%);
      filter: blur(6px);
    }

  }

  /* Sur la bannière, les relevés se posent à cheval sur la nuit :
     ils appartiennent visuellement à l'affiche. */
  .jeu-hero .releves {
    position: relative;
    z-index: 2;
    margin-block-start: -34px;
    margin-inline: clamp(0px, 3vw, 40px);
    box-shadow: var(--shadow);
  }

  /* ═══ Récit ═══ */
  .recit {
    max-width: 60ch;

    & .recit-lead {
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 2.3vw, 1.5rem);
      line-height: 1.35;
      text-wrap: balance;
      margin-block-end: 18px;
    }

    & p + p { color: var(--muted); }
  }

  /* ═══ Les partis pris ═══
     auto-fit + minmax : la grille choisit son nombre de colonnes
     toute seule, sans un seul point de rupture écrit à la main. */
  .principes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    margin-block-start: 40px;
  }

  .principe {
    height: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 28px;
    box-shadow: var(--shadow);

    & svg { color: var(--accent); margin-block-end: 16px; }
    & h3 { font-size: 1.08rem; margin-block-end: 9px; }
    & p { color: var(--muted); font-size: 0.94rem; }
  }

  /* ═══ Galerie ═══
     Une pièce large en tête, les autres à sa suite. Les images
     ne sont JAMAIS recadrées (contain), règle du site. */
  .galerie {
    display: grid;
    /* 420 px et non 320 : à la largeur du site, la grille ouvre DEUX
       colonnes sous la pièce large, jamais trois — sinon deux images
       laisseraient un vide à leur droite. */
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 20px;
    margin-block-start: 30px;
  }

  .galerie-piece {
    display: block;

    & figure {
      height: 100%;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-l);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    & img {
      width: 100%;
      height: auto;
      object-fit: contain;
      border-block-end: 1px solid var(--line);
    }

    & figcaption {
      padding: 16px 20px 20px;
      color: var(--muted);
      font-size: var(--text-small);
    }
  }

  /* La pièce large occupe toute la ligne dès qu'il y a la place. */
  .galerie-piece--large { grid-column: 1 / -1; }

  /* Sous la pièce large, les images vont par deux. Quand leur nombre
     est impair, la dernière resterait seule sur sa rangée, à côté
     d'un vide : elle s'étale et ferme la galerie en grand. La règle
     vaut pour n'importe quel nombre d'images — rang pair = dernière
     orpheline, puisque la première est la large. */
  .galerie-piece:last-child:nth-child(even) { grid-column: 1 / -1; }

  /* ═══ Où en est le jeu ═══ */
  .chantier {
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: color-mix(in oklch, var(--accent) 6%, var(--card));
    padding: 34px;

    & h2 { font-size: 1.45rem; }
    & p { color: var(--muted); max-width: 58ch; }
    & p + p { margin-block-start: 14px; }

    & .chantier-serment {
      color: var(--ink);
      border-inline-start: 3px solid var(--accent);
      padding-inline-start: 18px;
      margin-block-start: 20px;
    }
  }

  /* ═══ Bêta ═══
     Trois étapes : même carte que les principes,
     un numéro en chiffre de la police mono, le lien en bas de carte. */
  .etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    margin-block-start: 30px;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }
  .etape {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 28px;
    box-shadow: var(--shadow);

    & h3 { font-size: 1.08rem; }
    & p { color: var(--muted); font-size: 0.94rem; flex: 1 1 auto; }
    & .bouton { align-self: flex-start; margin-block-start: 6px; }
  }
  .etape-numero {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--accent);
  }
  .beta-note {
    margin-block-start: 22px;
    color: var(--muted);
    font-size: 0.94rem;

    & a { color: var(--accent); font-weight: 700; }
  }
  /* ═══ Bloc « ce que deviennent ces informations » ═══ */
  .beta-donnees {
    margin-block-start: 28px;
    border-block-start: 1px solid var(--line);
    padding-block-start: 20px;

    & summary {
      cursor: pointer;
      list-style: none;
      font-weight: 800;
      font-size: 0.92rem;
      display: flex;
      align-items: center;
      gap: 10px;

      &::-webkit-details-marker { display: none; }
      &::before {
        content: "+";
        font-family: var(--font-mono);
        color: var(--accent);
        transition: rotate 0.2s ease;
      }
      &:hover { color: var(--accent); }
    }

    &[open] summary::before { rotate: 45deg; }

    & div { margin-block-start: 14px; display: grid; gap: 12px; }
    & p { color: var(--muted); font-size: 0.88rem; max-width: 62ch; }
    & a { color: var(--accent); font-weight: 700; }
  }
}

/* ─────────────────────────────────────────────────────────────
   ÉTATS — préférences du visiteur
   ───────────────────────────────────────────────────────────── */
@layer etats {
  @media (prefers-reduced-motion: reduce) {
    .statut-point { animation: none; }
  }
}