/* ─────────────────────────────────────────────────────────────────────────────
   integrity.css · écarts d'integritybot.site

   Chargé APRÈS base.css et site.css, qui sont repris tels quels d'enopvp.fr.
   Ce fichier ne contient que ce qui manque ou ce qui doit changer, et rien
   d'autre : même règle que site.css, aucune teinte nouvelle, tout sort de la
   rampe d'encre et des tokens.

   Deux écarts structurels, un composant absent de la référence.
   ───────────────────────────────────────────────────────────────────────────── */

/* ---------- Le motif de fond ----------
   Rien à surcharger ici : `--pattern-url` pointe sur `/assets/motif.svg` dans
   base.css, et `body::before`, `.hero::after` et les classes `.pattern-*` de
   site.css fonctionnent telles quelles. Le piège documenté dans site.css reste
   entier : la bande du héros est en `background-attachment: fixed` pour tuiler
   depuis le même coin de fenêtre que `body::before`, sinon les glyphes ne
   tombent pas au même endroit de part et d'autre de la jointure. */

/* ---------- Écart : la photo de héros ----------
   Pas de photo de serveur à mettre : c'est la bannière de marque, sur fond de
   papier blanc. Elle passe sous les quatre voiles de `.hero::before` et ressort
   en halo clair à droite, derrière la carte. Le `background-position` la décale
   pour que le wordmark ne vienne pas concurrencer le titre de gauche. */
.hero--integrity {
    background-image: url('/assets/banniere.jpg');
    background-position: 76% center;
}

/* ---------- Bandeau de chiffres ----------
   Absent de la référence : EnoPVP annonce ses chiffres dans le marquee. Ici ce
   sont des valeurs vérifiables, elles méritent leur rangée. */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.stat { padding: 20px 16px; text-align: center; }
.stat__v { display: block; font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.stat__k { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-meta); }

@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Tuile sans visuel ----------
   `.piece__grid .tile` est prévue pour une image surmontant son texte, et met
   donc le texte à fleur de colonne. Integrity n'a pas de capture à montrer :
   sans la vignette, les blocs se touchent. Un filet et un retrait rendent la
   colonne lisible, sans ajouter de carte dans la carte. */
.tile--txt { padding-top: 16px; border-top: 1px solid var(--line-1); }
.piece__grid .tile--txt .tile__body { padding: 0; }
.tile--txt h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink-hi); }
.tile--txt p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-mid); }
.tile--txt strong { color: var(--ink-hi); font-weight: 600; }

/* Le sommaire de l'accueil met un lien dans le titre de tuile. base.css neutralise
   la décoration des liens : sans ça rien ne signale qu'on peut cliquer. */
.tile--txt h3 a { transition: color var(--transition-fast); }
.tile--txt h3 a::after { content: " →"; color: var(--ink-decor); font-weight: 400; }
.tile--txt:hover h3 a, .tile--txt h3 a:focus-visible { color: var(--ink); }
.tile--txt:hover h3 a::after { color: var(--fil); }

/* ---------- Rail à sept entrées ----------
   site.css échelonne l'entrée des liens jusqu'au sixième. Integrity en a sept :
   sans ces deux lignes, le dernier apparaît d'un coup pendant que les autres
   défilent encore. */
.rail-open .rail__links .nav-link:nth-child(7) { transition-delay: .42s; }
.rail-open .rail__links .nav-link:nth-child(8) { transition-delay: .47s; }

/* ---------- Numéro d'étape ----------
   `.ghost-num` de base.css, ramené à la taille d'une tuile. */
.tile .ghost-num { display: block; margin-bottom: 2px; font-size: clamp(38px, 5vw, 50px); }

/* ---------- Niveau de permission ----------
   Un chiffre mono dans la rampe, pas une pastille colorée : la hiérarchie se
   fait à l'opacité. Le 5 passe au filet parce qu'il est la seule exception. */
.lvl { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink-decor); }
.lvl--max { color: var(--fil); }

/* ---------- Questions fréquentes ----------
   Absent de la référence. Construit avec `<details>`, donc sans JS : le dépli
   fonctionne même script coupé. */

.faq { display: grid; gap: 8px; margin-top: 24px; }

.faq details { border-bottom: 1px solid var(--line-0); }
.faq details:last-child { border-bottom: 0; }

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    list-style: none;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink-hi);
    transition: color var(--transition-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq summary:focus-visible { color: var(--ink); }

/* Une croix qui pivote en moins : un seul glyphe pour les deux états. */
.faq summary::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    color: var(--fil);
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    transition: transform var(--transition-fast);
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); }

/* ---------- Appel final ---------- */
.cta-end { margin: 24px 0 0; text-align: center; }

/* ═══════════════════════════════════ ENTRÉES, AU RYTHME DU RAIL ═══════════
   Demande du user : que tout le site entre comme le panneau de navigation.

   Le panneau tient sur trois réglages, relevés dans site.css :
     • le panneau lui-même glisse en `.7s cubic-bezier(.34,1.25,.5,1)`, une
       courbe à léger dépassement — c'est elle qui donne le ressort ;
     • ses enfants entrent en `.5s cubic-bezier(.22,1,.36,1)` pour la
       transformation et `.4s ease` pour l'opacité ;
     • ils sont décalés de 50 ms, à partir de 120 ms.

   On applique la même grammaire : le panneau de section joue le rôle du
   panneau de navigation, et ses tuiles celui des liens. Le socle utilisait
   déjà la bonne courbe et le bon pas pour le héros (`.d1/.d2/.d3`), il ne
   manquait que la cascade à l'intérieur des blocs. */

.piece.reveal { animation-timing-function: cubic-bezier(.34, 1.25, .5, 1); }

/* ⚠️ L'opacité nulle est conditionnée à `js-anim`, posée par app.js uniquement
   quand l'observateur va réellement tourner. Posée en dur, elle masquerait les
   tuiles pour de bon chez un visiteur sans JavaScript ou en mouvement réduit —
   c'est exactement la raison pour laquelle le socle laisse `[data-reveal]`
   visible par défaut. Ne pas retirer le préfixe. */
/* ⚠️ `[data-reveal]` est obligatoire : le panneau de la page 404 est un `.piece`
   SANS `data-reveal`, il ne reçoit donc jamais `.reveal`. Sans ce filtre, ses
   enfants resteraient masqués pour toujours le jour où `js-anim` serait posée
   par une autre page du même onglet. */
.js-anim .piece[data-reveal] .piece__grid > *,
.js-anim .piece[data-reveal] .stats > *,
.js-anim .piece[data-reveal] .faq > details,
.js-anim .piece[data-reveal] .tbl tbody tr { opacity: 0; }

.js-anim .piece.reveal .piece__grid > *,
.js-anim .piece.reveal .stats > *,
.js-anim .piece.reveal .faq > details,
.js-anim .piece.reveal .tbl tbody tr {
  animation: fade-up .5s cubic-bezier(.22, 1, .36, 1) both;
}

/* Le décalage, écrit à la main comme les délais du rail et ceux des entrées de
   la carte d'accueil : 120 ms, puis 50 ms par cran. */
.js-anim .piece.reveal .piece__grid > *:nth-child(1),
.js-anim .piece.reveal .stats > *:nth-child(1),
.js-anim .piece.reveal .faq > details:nth-child(1),
.js-anim .piece.reveal .tbl tbody tr:nth-child(1) { animation-delay: .12s; }

.js-anim .piece.reveal .piece__grid > *:nth-child(2),
.js-anim .piece.reveal .stats > *:nth-child(2),
.js-anim .piece.reveal .faq > details:nth-child(2),
.js-anim .piece.reveal .tbl tbody tr:nth-child(2) { animation-delay: .17s; }

.js-anim .piece.reveal .piece__grid > *:nth-child(3),
.js-anim .piece.reveal .stats > *:nth-child(3),
.js-anim .piece.reveal .faq > details:nth-child(3),
.js-anim .piece.reveal .tbl tbody tr:nth-child(3) { animation-delay: .22s; }

.js-anim .piece.reveal .piece__grid > *:nth-child(4),
.js-anim .piece.reveal .stats > *:nth-child(4),
.js-anim .piece.reveal .faq > details:nth-child(4),
.js-anim .piece.reveal .tbl tbody tr:nth-child(4) { animation-delay: .27s; }

.js-anim .piece.reveal .piece__grid > *:nth-child(5),
.js-anim .piece.reveal .faq > details:nth-child(5),
.js-anim .piece.reveal .tbl tbody tr:nth-child(5) { animation-delay: .32s; }

.js-anim .piece.reveal .piece__grid > *:nth-child(6),
.js-anim .piece.reveal .faq > details:nth-child(6),
.js-anim .piece.reveal .tbl tbody tr:nth-child(6) { animation-delay: .37s; }

.js-anim .piece.reveal .piece__grid > *:nth-child(7),
.js-anim .piece.reveal .faq > details:nth-child(7) { animation-delay: .42s; }

.js-anim .piece.reveal .piece__grid > *:nth-child(8) { animation-delay: .47s; }
.js-anim .piece.reveal .piece__grid > *:nth-child(9) { animation-delay: .52s; }

/* Le titre, le résumé et le bandeau de la fenêtre entrent AVANT la cascade,
   dans l'ordre où on les lit — comme la marque du rail, qui part à 50 ms,
   avant ses liens. */
.js-anim .piece[data-reveal] .patch-hero__title,
.js-anim .piece[data-reveal] .patch-hero__summary { opacity: 0; }
.js-anim .piece.reveal .patch-hero__title { animation: fade-up .5s cubic-bezier(.22, 1, .36, 1) .05s both; }
.js-anim .piece.reveal .patch-hero__summary { animation: fade-up .5s cubic-bezier(.22, 1, .36, 1) .1s both; }

/* Filet de sécurité : si le mouvement réduit s'active APRÈS le chargement,
   `js-anim` est déjà posée. On remet tout visible plutôt que de parier. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .piece[data-reveal] .piece__grid > *,
  .js-anim .piece[data-reveal] .stats > *,
  .js-anim .piece[data-reveal] .faq > details,
  .js-anim .piece[data-reveal] .tbl tbody tr,
  .js-anim .piece[data-reveal] .patch-hero__title,
  .js-anim .piece[data-reveal] .patch-hero__summary { opacity: 1; animation: none; }
}