/* =========================================================
   WOLFPACT — ANIM CSS
   Socle d'animations et signatures visuelles (lot W1).
   S'ajoute à common.css sans rien remplacer.
   ========================================================= */

/* =========================================================
   TYPOGRAPHIE D'AFFICHAGE — Anton
   Urbaine et massive, propre à Wolfpact (ni Cinzel du site SMI,
   ni Bebas des Hommes Iconiques).
   ========================================================= */
:root {
  --display: 'Anton', Impact, 'Haettenschweiler', sans-serif;
  /* Accent par défaut du site : le CYAN DU LOGO (les griffes de la marque).
     member.php le surcharge par la couleur du membre affiché. */
  --accent: var(--accent-cool);
}

/* L'en-tête est mis en flex ici : le balisage ne contient pas le
   .site-header__inner que prévoyait common.css, d'où l'empilement.
   La barre occupe TOUTE la largeur (common.css la bridait à 1100px, ce qui
   se voyait au défilement) ; son contenu reste aligné sur la colonne de 1100. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  max-width: none;
  width: 100%;
  padding-inline: max(1rem, calc((100% - 1100px) / 2));
  /* noir pur : le logo est sur fond #000, il se fond ainsi sans découpe */
  background: #000;
  backdrop-filter: none;
  border-bottom: 1px solid var(--ring);
}

.site-header.compacte {
  background: #000;
}

.site-header .nav { flex: 1 1 auto }

/* Marque = le logo (il porte déjà le mot « WOLFPACT ») */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}

.brand img {
  width: auto;
  height: clamp(42px, 5.2vw, 58px);
  object-fit: contain;
  /* Pas de mix-blend-mode : le backdrop-filter de l'en-tête crée un
     contexte d'isolation qui rendait le logo indiscernable. Le fond noir
     du logo se fond déjà dans l'en-tête sombre. */
  transition: height .35s ease, filter .35s ease;
}

.brand:hover img {
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--accent-cool) 55%, transparent));
}

.site-header.compacte .brand img { height: 34px }

h1,
.section-title,
.card h2,
.hero-text h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.08;
}

.section-title {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  color: var(--fg);
}

/* =========================================================
   BLOCS PLEINE LARGEUR
   Le contenu vit dans <main class="container"> (max 1100px) : cette
   classe permet aux blocs de s'en échapper. --sb (largeur de la barre
   de défilement, mesurée dans app.js) évite le débordement de 100vw.
   ========================================================= */
html { overflow-x: clip }

.pleine-largeur {
  width: calc(100vw - var(--sb, 0px));
  max-width: none;
  margin-left: calc(50% - 50vw + var(--sb, 0px) / 2);
}

/* =========================================================
   COUPLE D'IMAGES JOUR / NUIT (héro d'accueil, cartes, fiches)
   ========================================================= */
.mode-pair {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.mode-pair img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .9s ease;
}

.mode-pair .mp-nuit { opacity: 0 }
html[data-mode="night"] .mode-pair .mp-jour { opacity: 0 }
html[data-mode="night"] .mode-pair .mp-nuit { opacity: 1 }

/* =========================================================
   MODES JOUR / NUIT
   « Jour » ne veut PAS dire thème clair : le fond reste sombre, c'est
   l'identité de Wolfpact. Le jour est simplement plus chaud et plus
   calme ; la nuit rallume les néons et les halos.
   ========================================================= */
:root[data-mode="day"] {
  --bg:    #141210;
  --card:  #1a1714;
  --chip:  #2a2521;
  --ring:  #4a4139;
  --fg:    #f0ece5;
  --muted: #b3a898;
  --grain-opacite: .12;
  --halo-force: .34;
}

:root[data-mode="night"] {
  --bg:    #0c0c0c;
  --card:  #151515;
  --chip:  #222;
  --ring:  #444;
  --fg:    #eae9e6;
  --muted: #a9a49a;
  --grain-opacite: .25;
  --halo-force: .62;
}

:root[data-mode="day"] body {
  background:
    radial-gradient(1200px 900px at 10% -10%, #1a1714 0%, transparent 60%),
    radial-gradient(1200px 900px at 110% 10%, #17140f 0%, transparent 60%),
    linear-gradient(120deg, #141210 0%, #16120f 50%, #141210 100%);
}

:root[data-mode="night"] body {
  background:
    radial-gradient(1200px 900px at 10% -10%, #0f0f0f 0%, transparent 60%),
    radial-gradient(1200px 900px at 110% 10%, #0d0d0d 0%, transparent 60%),
    linear-gradient(120deg, #0c0c0c 0%, #0d0d0d 50%, #0c0c0c 100%);
}

body { transition: background-color .9s ease }

/* Grain et halos : discrets le jour, francs la nuit */
html::before { opacity: var(--grain-opacite, .25) !important }

/* ---------- L'interrupteur ---------- */
.mode-bascule {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  padding: .22rem;
  background: transparent;
  border: 1px solid var(--ring);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .35s ease;
}

.mode-bascule:hover { border-color: var(--accent-cool) }
.mode-bascule:focus-visible { outline: 2px solid var(--accent-cool); outline-offset: 3px }

.mb-icone {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1;
  color: var(--muted);
  transition: background .45s ease, color .45s ease, transform .55s cubic-bezier(.3,1.3,.4,1);
}

:root[data-mode="day"] .mb-jour {
  background: color-mix(in oklab, var(--accent-warm-1) 26%, transparent);
  color: var(--accent-warm-1);
  transform: rotate(0deg) scale(1.06);
}

:root[data-mode="night"] .mb-nuit {
  background: color-mix(in oklab, var(--accent-cool) 26%, transparent);
  color: var(--accent-cool);
  transform: rotate(-18deg) scale(1.06);
}

/* =========================================================
   GRIFFURE — signature graphique de la meute
   Trois entailles obliques qui se tracent à la révélation.
   ========================================================= */
.griffe {
  position: relative;
  padding-bottom: .55rem;
}

.griffe::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 78px;
  height: 12px;
  background: repeating-linear-gradient(74deg,
    var(--accent) 0 3px,
    transparent 3px 13px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .75s cubic-bezier(.2, .75, .2, 1) .12s;
}

.griffe.vu::after,
.vu .griffe::after {
  transform: scaleX(1);
}

/* Variante centrée (titres centrés) */
.griffe.griffe--centre::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

.griffe.griffe--centre.vu::after,
.vu .griffe.griffe--centre::after {
  transform: translateX(-50%) scaleX(1);
}

/* =========================================================
   RÉVÉLATIONS AU DÉFILEMENT
   Masquage conditionné à la classe .js posée sur <html> AVANT le
   rendu (script en ligne dans head.php) : sans JavaScript rien
   n'est caché, et il n'y a aucun clignotement au chargement.
   ========================================================= */
.js .rvl {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .8, .3, 1);
  will-change: opacity, transform;
}

.js .rvl.vu {
  opacity: 1;
  transform: none;
}

/* Décalages en cascade */
.rvl-d1 { transition-delay: .10s }
.rvl-d2 { transition-delay: .20s }
.rvl-d3 { transition-delay: .30s }
.rvl-d4 { transition-delay: .40s }

/* Entrées directionnelles (blocs en alternance) */
.js .rvl--gauche { transform: translateX(-38px) }
.js .rvl--droite { transform: translateX(38px) }
.js .rvl--gauche.vu,
.js .rvl--droite.vu { transform: none }

/* Sous 1024px les blocs s'empilent : l'entrée latérale déborderait
   de quelques pixels avant révélation, on la repasse en vertical. */
@media (max-width: 1024px) {
  .js .rvl--gauche,
  .js .rvl--droite { transform: translateY(26px) }
  .js .rvl--gauche.vu,
  .js .rvl--droite.vu { transform: none }
}

/* =========================================================
   BARRE DE PROGRESSION — l'arc-en-ciel de la meute
   ========================================================= */
#progress-meute {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 60;
  pointer-events: none;
  background: linear-gradient(90deg,
    #38D1D6 0%,
    #F2C154 25%,
    #7C43FF 50%,
    #E3D08A 75%,
    #2ECF8D 100%);
}

/* =========================================================
   BOUTON « HAUT DE PAGE »
   Coin bas-droit : il n'entre en concurrence ni avec le menu
   (en haut) ni avec la barre de progression.
   ========================================================= */
#haut-de-page {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 70;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease,
              border-color .3s ease, color .3s ease, box-shadow .3s ease,
              visibility .4s;
}

#haut-de-page.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#haut-de-page:hover {
  border-color: var(--accent-cool);
  color: var(--fg);
  box-shadow: 0 0 24px -6px var(--accent-cool);
}

#haut-de-page:focus-visible {
  outline: 2px solid var(--accent-cool);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #haut-de-page { transition: opacity .2s ease, visibility .2s }
}

/* =========================================================
   EN-TÊTE — compactage au défilement
   ========================================================= */
.site-header {
  transition: height .35s ease, background .45s ease, border-color .45s ease;
}

.site-header.compacte {
  height: 3.1rem;
  border-bottom-color: color-mix(in oklab, var(--accent-cool) 30%, transparent);
}

.site-header.compacte .brand {
  font-size: 1.15rem;
}

/* Lien de nav actif : couleur seule.
   Un soulignement en griffe se lisait comme une SECONDE barre de progression
   (elle se déplaçait de lien en lien pendant que la vraie barre s'allongeait). */
.nav a {
  position: relative;
}

.nav a.actif {
  color: var(--accent-cool);
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.site-footer {
  max-width: none;
  width: 100%;
  margin-top: 4rem;
  padding: 2.6rem max(1.25rem, calc((100% - 1100px) / 2)) 1.6rem;
  background: #000;
  border-top: 1px solid var(--ring);
}

/* ---------- La meute en cinq cartes — les cinq doigts d'une main ---------- */
.meute-main {
  max-width: 1100px;
  margin: 0 auto 2.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--ring);
}

.meute-main-titre {
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.3rem;
  text-align: center;
}

.meute-main-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .8rem;
}

.meute-lien {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .9rem .8rem;
  border: 1px solid var(--ring);
  border-top: 2px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--card);
  transition: transform .4s ease, border-color .4s ease, background .4s ease;
}

.meute-lien:hover,
.meute-lien:focus-visible {
  transform: translateY(-4px);
  border-top-color: var(--c);
  background: #101010;
}

.meute-lien--courant {
  border-top-color: var(--c);
  background: color-mix(in oklab, var(--c) 10%, #0d0d0d);
}

.ml-doigt {
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.ml-nom {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c, #fff);
}

.ml-role { font-size: .68rem; color: var(--muted) }

/* ---------- Séparateur : trois griffes centrées ----------
   La signature graphique du site sert de filet entre les blocs. */
.footer-griffe {
  display: block;
  width: 64px;
  height: 11px;
  margin: 2.4rem auto;
  background: repeating-linear-gradient(74deg,
    color-mix(in oklab, var(--accent-cool) 70%, transparent) 0 3px,
    transparent 3px 13px);
  opacity: .75;
}

/* ---------- Le plan du site, en ruban centré ---------- */
.footer-plan { text-align: center }

.footer-titre {
  font-family: var(--display);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-cool);
  margin: 0 0 1.1rem;
  text-align: center;
}

.footer-rubriques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem 0;
}

.footer-rubriques li { display: flex; align-items: center }

/* points de séparation, sauf après le dernier */
.footer-rubriques li:not(:last-child)::after {
  content: "·";
  margin: 0 .95rem;
  color: var(--ring);
}

.footer-rubriques a {
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  transition: color .3s ease;
}

.footer-rubriques a:hover,
.footer-rubriques a:focus-visible { color: var(--fg) }

/* ---------- La signature ---------- */
.footer-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
	margin-top: 2em;
}

.footer-logo-lien {
  line-height: 0;
  transition: filter .4s ease;
}

.footer-logo-lien img {
  width: auto;
  height: 74px;
  object-fit: contain;
}

.footer-logo-lien:hover {
  filter: drop-shadow(0 0 16px color-mix(in oklab, var(--accent-cool) 55%, transparent));
}

.footer-devise {
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

.footer-liens {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  font-size: .88rem;
  color: var(--ring);
}

.footer-liens a {
  color: var(--muted);
  text-decoration: none;
  transition: color .3s ease;
}

.footer-liens a:hover { color: var(--accent-cool) }

/* Liens légaux : même composition, un cran plus discrets. Obligatoires sur
   toutes les pages du domaine ; « Préférences cookies » est le seul moyen de
   revenir sur son consentement, la pastille flottante d'iubenda étant masquée. */
.footer-liens--legal {
  margin-top: .55rem;
  font-size: .76rem;
  flex-wrap: wrap;
  row-gap: .3rem;
}

.footer-liens--legal a { opacity: .72 }
.footer-liens--legal a:hover,
.footer-liens--legal a:focus-visible { opacity: 1 }

.footer-bas {
  max-width: 1100px;
  margin: 2.6rem auto 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--ring);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1024px) {
  .meute-main-liste { grid-template-columns: repeat(3, 1fr) }
}

@media (max-width: 820px) {
  .meute-main-liste { grid-template-columns: repeat(2, 1fr) }
  .footer-rubriques li:not(:last-child)::after { margin: 0 .7rem }
  .footer-rubriques a { font-size: .86rem }
  .footer-griffe { margin: 2rem auto }
}

@media (max-width: 460px) {
  .meute-main-liste { grid-template-columns: 1fr }
  .footer-logo-lien img { height: 62px }
}

@media (prefers-reduced-motion: reduce) {
  .meute-lien,
  .footer-logo-lien { transition: none !important }
}

/* Ancres : dégager la hauteur de l'en-tête collant (dont #manifeste et #nuit,
   absents de la liste d'origine de common.css). */
#appel, #manifeste, #couleurs, #fiches, #pacte, #video, #nuit {
  scroll-margin-top: 5.5rem;
}

@media (max-width: 768px) {
  #appel, #manifeste, #couleurs, #fiches, #pacte, #video, #nuit {
    scroll-margin-top: 7rem;
  }
}

/* Petits écrans : 6 entrées de menu + le logo.
   La hauteur doit rester libre, sinon le menu déborde sur le contenu
   (l'état .compacte imposait 3.1rem et provoquait un chevauchement). */
@media (max-width: 768px) {
  .site-header,
  .site-header.compacte {
    height: auto;
    min-height: 3.4rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
    align-items: center;
  }

  .brand img,
  .site-header.compacte .brand img { height: 36px }

  /* Logo à gauche + interrupteur à droite sur la 1re ligne,
     le menu occupe toute la 2e ligne. */
  .brand         { order: 1 }
  .mode-bascule  { order: 2; margin-left: auto }
  .site-header .nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .nav { font-size: .76rem; gap: 0 }
  .nav a { padding: 4px 6px; margin-left: 0 }
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .js .rvl,
  .js .rvl--gauche,
  .js .rvl--droite {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .griffe::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .griffe.griffe--centre::after {
    transform: translateX(-50%) scaleX(1) !important;
  }

  .site-header,
  body,
  .mb-icone {
    transition: none !important;
  }
}