/* ==========================================================
   ✏️ GUIDE DE MODIFICATION RAPIDE
   - Couleurs : changez les valeurs dans :root juste en dessous
       --or      : le jaune/or du site (logo)
       --noir    : le fond du site
       --texte   : la couleur du texte principal
   - Polices : changez --police-titre et --police-texte
   - Largeur du site : --largeur
   Le reste du fichier n'a pas besoin d'être modifié.
   ========================================================== */

/* ==========================================================
   Rulers of Rome (RoR) — feuille de style commune
   Couleurs tirées du logo : noir pur + or #F9D189
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap");

:root {
  --noir: #000000;
  --or: #f9d189;
  --or-pale: #fbe3b4;
  --or-voile: rgba(249, 209, 137, 0.06);
  --or-trait: rgba(249, 209, 137, 0.35);
  --texte: #efe6d2;
  --texte-doux: #b9ae98;

  --police-titre: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --police-texte: "Barlow", "Segoe UI", Arial, sans-serif;

  --largeur: 1100px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--or-pale);
}

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.1;
  color: var(--or);
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.8rem, 7vw, 5rem);
  letter-spacing: 0.01em;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
}

h3 {
  font-size: 1.5rem;
}

p {
  margin: 0 0 1em;
  max-width: 62ch;
}

.conteneur {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}

.lien-evitement {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--or);
  color: var(--noir);
  padding: 0.6rem 1rem;
  z-index: 20;
}

.lien-evitement:focus {
  left: 0;
}

/* ---------- En-tête et navigation ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--noir);
  border-bottom: 1px solid var(--or-trait);
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding-block: 0.6rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--or);
}

.marque img {
  width: 46px;
  height: 46px;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--texte);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.menu a:hover {
  color: var(--or);
  border-bottom-color: var(--or-trait);
}

.menu a[aria-current="page"] {
  color: var(--or);
  border-bottom-color: var(--or);
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--or);
  background: var(--or);
  color: var(--noir);
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}

.bouton:hover {
  background: var(--noir);
  color: var(--or);
}

.bouton--contour {
  background: transparent;
  color: var(--or);
}

.bouton--contour:hover {
  background: var(--or);
  color: var(--noir);
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

/* ---------- Accueil : héros ---------- */
.heros {
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.heros .conteneur {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 3rem;
}

.heros .accroche {
  font-family: var(--police-titre);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 500;
  color: var(--or-pale);
  max-width: 36ch;
  margin-bottom: 1rem;
}

.heros .presentation {
  color: var(--texte-doux);
}

/* le logo animé est décrit plus bas (section « Logo animé ») */

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--or-trait);
}

.section-intro {
  color: var(--texte-doux);
  margin-bottom: 2rem;
}

/* ---------- Cartes (streams, membres, coaching) ---------- */
.grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.carte {
  background: var(--or-voile);
  border: 1px solid var(--or-trait);
  border-radius: 2px;
  padding: 1.4rem;
}

.carte h3 {
  margin-bottom: 0.3em;
}

.carte p {
  color: var(--texte-doux);
  margin-bottom: 0.6em;
}

.carte p:last-child {
  margin-bottom: 0;
}

.carte .detail {
  font-size: 0.95rem;
}

/* Zone vidéo des streams */
.apercu-stream {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: -1.4rem -1.4rem 1.2rem;
  background: var(--noir);
  border-bottom: 1px solid var(--or-trait);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.apercu-stream img {
  width: 38%;
  opacity: 0.85;
}

.apercu-stream iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.etat {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--noir);
  background: var(--or);
  padding: 0.1rem 0.6rem;
  border-radius: 2px;
  margin-bottom: 0.8rem;
}

/* Fiche membre */
.membre {
  text-align: center;
}

.membre > img {
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  object-fit: cover;          /* la photo remplit le cercle sans être déformée */
  object-position: center top; /* garde le visage bien cadré */
  border: 2px solid var(--or); /* anneau doré autour de la photo */
}

.membre p {
  margin-inline: auto;
}

/* ---------- Réseaux sociaux ---------- */
.reseaux {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.reseaux a {
  display: inline-block;
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--or-trait);
  text-decoration: none;
  font-weight: 500;
  border-radius: 2px;
  transition: background 0.2s, border-color 0.2s;
}

.reseaux a:hover {
  background: var(--or-voile);
  border-color: var(--or);
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.contact dl {
  margin: 0;
}

.contact dt {
  font-weight: 600;
  color: var(--or);
}

.contact dd {
  margin: 0 0 1rem;
}

/* ---------- Pages intérieures ---------- */
.titre-page {
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
}

.titre-page p {
  color: var(--texte-doux);
  font-size: 1.15rem;
}

/* Historique : frise chronologique */
.frise {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.8rem;
  border-left: 2px solid var(--or);
}

.frise li {
  position: relative;
  padding-bottom: 2.4rem;
}

.frise li::before {
  content: "";
  position: absolute;
  left: calc(-1.8rem - 7px);
  top: 0.55rem;
  width: 12px;
  height: 12px;
  background: var(--noir);
  border: 2px solid var(--or);
  border-radius: 50%;
}

.frise .date {
  font-family: var(--police-titre);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1.2;
}

.frise h3 {
  font-size: 1.25rem;
  color: var(--texte);
  margin-bottom: 0.3em;
}

.frise p {
  color: var(--texte-doux);
}

/* Palmarès : tableau */
.defilement {
  overflow-x: auto;
  border: 1px solid var(--or-trait);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

caption {
  text-align: left;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--or);
  padding: 1rem 1rem 0.6rem;
  caption-side: top;
}

th,
td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--or-trait);
}

th {
  color: var(--or);
  font-weight: 600;
  background: var(--or-voile);
}

tbody tr:hover {
  background: var(--or-voile);
}

.podium {
  font-weight: 600;
  color: var(--or);
}

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--or-trait);
  padding-block: 2rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.pied .conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.pied img {
  width: 40px;
  height: 40px;
}

.pied p {
  margin: 0;
}

/* ---------- Adaptation mobile ---------- */
@media (max-width: 760px) {
  .heros .conteneur,
  .contact {
    grid-template-columns: 1fr;
  }

  .heros-logo {
    order: -1;
  }

  .logo-vivant {
    max-width: 300px;
  }

  .entete .conteneur {
    justify-content: center;
  }

  .menu {
    justify-content: center;
  }
}

/* Photo d'un coach : remplit toute la zone 16/9 sans déformation */
.apercu-stream--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
}

/* ---------- Drapeaux, icônes, ELO ---------- */
.drapeau {
  display: inline-block;
  width: 1.3em;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-inline: 0.3em;
  vertical-align: -0.1em;
  border: 1px solid var(--or-trait);
  border-radius: 2px;
}

.carte h3 .drapeau {
  width: 0.9em;
  vertical-align: 0.02em;
}

.liens-chaine {
  list-style: none;
  display: flex;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0;
}

.icone-lien {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--or-trait);
  border-radius: 2px;
  transition: background 0.2s, border-color 0.2s;
}

.icone-lien:hover {
  background: var(--or-voile);
  border-color: var(--or);
}

.icone-lien img {
  width: 22px;
  height: 22px;
}

.stats {
  display: flex;
  gap: 1.8rem;
  margin: 0.9rem 0 0;
}

.membre .stats {
  justify-content: center;
}

.stats dt {
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.stats dd {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1.1;
}

.reseaux a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.reseaux .icone {
  width: 20px;
  height: 20px;
}

/* ---------- Tri des membres ---------- */
.tri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}

.tri[hidden] {
  display: none;
}

.tri span {
  color: var(--texte-doux);
  margin-right: 0.3rem;
}

.tri-bouton {
  font: inherit;
  font-weight: 600;
  color: var(--or);
  background: transparent;
  border: 1.5px solid var(--or);
  border-radius: 2px;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.tri-bouton:hover {
  background: var(--or-voile);
}

.tri-bouton[aria-pressed="true"] {
  background: var(--or);
  color: var(--noir);
}

.carte.membre {
  position: relative;
}

.rang {
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  font-family: var(--police-titre);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--or);
}

.rang:empty {
  display: none;
}

/* La statistique utilisée pour le classement ressort en or, l'autre est atténuée */
[data-tri="1v1"] .stat-tg dd,
[data-tri="tg"] .stat-1v1 dd {
  color: var(--texte);
}

/* ---------- Easter egg : pseudo cliquable (voir js/easter-egg.js) ---------- */
[data-secret] {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.secousse {
  animation: secousse 0.35s ease-in-out infinite;
}

.secousse-forte {
  animation: secousse 0.15s ease-in-out infinite;
}

@keyframes secousse {
  0%, 100% { transform: translateX(0) rotate(0); }
  25%      { transform: translateX(-3px) rotate(-1.5deg); }
  75%      { transform: translateX(3px) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .secousse,
  .secousse-forte {
    animation: none;
  }
}

/* ---------- Sous-menu « Accueil » (Streams, Coaching, Contact) ---------- */
.menu > li {
  position: relative;
}

.fleche {
  font-size: 0.7em;
  margin-left: 0.1em;
}

.sous-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 11;
  min-width: 11rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--noir);
  border: 1px solid var(--or-trait);
  border-top: 2px solid var(--or);
}

/* Visible au survol de la souris ou quand on navigue au clavier (Tab) */
.a-sous-menu:hover > .sous-menu,
.a-sous-menu:focus-within > .sous-menu {
  display: block;
}

.menu .sous-menu a {
  display: block;
  padding: 0.55rem 1rem;
  border-bottom: 0;
}

.menu .sous-menu a:hover {
  background: var(--or-voile);
  color: var(--or);
}

/* Écrans tactiles (pas de survol) : les 3 liens restent visibles à la suite du menu */
@media (hover: none) {
  .menu > .a-sous-menu,
  .sous-menu {
    display: contents;
  }

  .fleche {
    display: none;
  }

  .menu .sous-menu a {
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
  }

  .menu .sous-menu a:hover {
    background: none;
    border-bottom-color: var(--or-trait);
  }
}

/* ==========================================================
   Logo animé de l'accueil
   Calques (images/logo/) : base (disque), anneau, lettre-1/2/3, loup-tete, oreille-1/2, machoire.
   Le loup bouge EN PERMANENCE (.loup-idle) et, par-dessus, une animation
   est jouée de temps en temps par js/logo.js (.loup-geste, lettres, anneau) :
     .anim-regard : le loup tourne la tête à gauche puis à droite
     .anim-hurle  : le loup lève le museau, ondes sonores + lueur
     .anim-eclat  : un reflet lumineux balaye le loup et les lettres
     .anim-vague  : les lettres R-o-R se soulèvent l'une après l'autre
     .anim-tour   : une lumière fait le tour de l'anneau
     .anim-oreilles : le loup bouge ses oreilles
     .anim-serre  : le loup serre les dents de façon menaçante
   ✏️ Durées : à garder identiques à celles de js/logo.js (liste ANIMATIONS).
   ✏️ Mouvement permanent : modifiez les angles/valeurs de vivant-rot, vivant-dep
      et vivant-ech (plus grand = plus visible).
   ========================================================== */
.logo-vivant {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  margin-inline: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: lueur 6s ease-in-out infinite;
}

.logo-vivant .calque {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

@keyframes lueur {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(249, 209, 137, 0.12)); }
  50%      { filter: drop-shadow(0 0 24px rgba(249, 209, 137, 0.3)); }
}

/* ---------- Le loup : deux enveloppes pour cumuler les mouvements ----------
   .loup-idle  = mouvement permanent (3 rythmes différents : il ne se répète jamais exactement)
   .loup-geste = animation ponctuelle jouée par-dessus
   Le pivot est au niveau du cou. */
.loup-idle,
.loup-geste {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 48% 56%;
}

.loup-idle {
  will-change: transform;
  animation:
    vivant-rot 7s ease-in-out infinite,
    vivant-dep 9s ease-in-out infinite,
    vivant-ech 5.5s ease-in-out infinite;
}

@keyframes vivant-rot {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: -2.2deg; }
  50%      { rotate: 0.8deg; }
  75%      { rotate: 2.2deg; }
}

@keyframes vivant-dep {
  0%, 100% { translate: 0 0; }
  30%      { translate: -0.6% -1%; }
  60%      { translate: 0.7% -0.3%; }
  80%      { translate: 0.2% -1.2%; }
}

@keyframes vivant-ech {
  0%, 100% { scale: 1; }
  50%      { scale: 1.028; }
}

/* ---------- Animation 1 : le regard ---------- */
.logo-vivant.anim-regard .loup-geste {
  animation: regard 6s ease-in-out;
}

@keyframes regard {
  0%   { transform: rotate(0) translateX(0); }
  12%  { transform: rotate(-4deg) translateX(-0.8%); }
  30%  { transform: rotate(-4deg) translateX(-0.8%); }
  48%  { transform: rotate(5deg) translate(1%, -0.3%); }
  66%  { transform: rotate(5deg) translate(1%, -0.3%); }
  82%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0) translateX(0); }
}

/* ---------- Animation 2 : le hurlement ---------- */
.logo-vivant.anim-hurle {
  animation: lueur-forte 3.6s ease-in-out;
}

.logo-vivant.anim-hurle .loup-geste {
  animation: hurle 3.6s ease-in-out;
}

.logo-vivant.anim-hurle .lettre {
  animation: vibre 3.6s ease-in-out;
}

@keyframes hurle {
  0%   { transform: rotate(0) translateY(0) scale(1); }
  22%  { transform: rotate(-9deg) translateY(-1.5%) scale(1.05); }
  30%  { transform: rotate(-8.2deg) translateY(-1.5%) scale(1.05); }
  38%  { transform: rotate(-9.2deg) translateY(-1.5%) scale(1.05); }
  46%  { transform: rotate(-8.2deg) translateY(-1.5%) scale(1.05); }
  54%  { transform: rotate(-9deg) translateY(-1.5%) scale(1.05); }
  62%  { transform: rotate(-8.4deg) translateY(-1.5%) scale(1.05); }
  70%  { transform: rotate(-9deg) translateY(-1.5%) scale(1.05); }
  100% { transform: rotate(0) translateY(0) scale(1); }
}

@keyframes vibre {
  0%, 100% { transform: scale(1); }
  25%, 70% { transform: scale(1.012); }
}

@keyframes lueur-forte {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(249, 209, 137, 0.12)); }
  25%, 70% { filter: drop-shadow(0 0 34px rgba(249, 209, 137, 0.6)); }
}

/* Ondes sonores qui partent de la gueule, découpées dans le disque */
.logo-vivant .ondes {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.logo-vivant .onde {
  position: absolute;
  left: 72%;
  top: 40%;
  width: 6%;
  aspect-ratio: 1;
  border: 3px solid var(--or);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.logo-vivant.anim-hurle .onde {
  animation: onde 1.6s ease-out 0.7s both;
}

.logo-vivant.anim-hurle .onde-2 {
  animation-delay: 1.5s;
}

@keyframes onde {
  0%   { width: 6%; opacity: 0.9; }
  100% { width: 130%; opacity: 0; }
}

/* ---------- Animation 3 : l'éclat (reflet qui balaye loup + lettres) ---------- */
.logo-vivant .eclat {
  pointer-events: none;
  opacity: 0;
  filter: brightness(0) invert(1);
  -webkit-mask-image: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%);
  mask-image: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 150% 0;
  mask-position: 150% 0;
}

.logo-vivant.anim-eclat .eclat {
  animation: balaye 2.4s ease-in-out;
}

.logo-vivant.anim-eclat .loup-geste {
  animation: salut 2.4s ease-in-out;
}

@keyframes balaye {
  0%   { opacity: 0;   -webkit-mask-position: 150% 0; mask-position: 150% 0; }
  8%   { opacity: 0.9; }
  92%  { opacity: 0.9; }
  100% { opacity: 0;   -webkit-mask-position: -50% 0; mask-position: -50% 0; }
}

@keyframes salut {
  0%, 100% { transform: scale(1) rotate(0); }
  40%      { transform: scale(1.035) rotate(-1.5deg); }
  70%      { transform: scale(1.02) rotate(1deg); }
}

/* ---------- Animation 4 : la vague des lettres ---------- */
.logo-vivant.anim-vague .lettre {
  animation: vague 1.3s ease-in-out 2;
}

.logo-vivant.anim-vague .lettre-2 {
  animation-delay: 0.25s;
}

.logo-vivant.anim-vague .lettre-3 {
  animation-delay: 0.5s;
}

.logo-vivant.anim-vague .loup-geste {
  animation: hoche 3.2s ease-in-out;
}

@keyframes vague {
  0%, 100% { transform: translateY(0); filter: none; }
  35%      { transform: translateY(-4.5%); filter: drop-shadow(0 0 16px rgba(249, 209, 137, 0.9)) brightness(1.2); }
}

@keyframes hoche {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(2.5deg) translateY(0.8%); }
  45%      { transform: rotate(-1.5deg); }
  70%      { transform: rotate(2deg) translateY(0.6%); }
}

/* ---------- Animation 5 : la lumière qui fait le tour de l'anneau ---------- */
.logo-vivant .anneau {
  pointer-events: none;
  opacity: 0;
  filter: brightness(0) invert(1);
  -webkit-mask-image: conic-gradient(from 0deg, transparent 0deg 230deg, #000 350deg, transparent 360deg);
  mask-image: conic-gradient(from 0deg, transparent 0deg 230deg, #000 350deg, transparent 360deg);
}

.logo-vivant.anim-tour {
  animation: lueur-forte 3.2s ease-in-out;
}

.logo-vivant.anim-tour .anneau {
  animation: tour 3.2s cubic-bezier(0.5, 0, 0.5, 1);
}

@keyframes tour {
  0%   { opacity: 0;    transform: rotate(0); }
  8%   { opacity: 0.95; }
  92%  { opacity: 0.95; }
  100% { opacity: 0;    transform: rotate(720deg); }
}

/* ---------- Animation 6 : les oreilles ----------
   Chaque oreille est un calque à part (oreille-1 = proche, oreille-2 = lointaine).
   Elles pivotent autour de leur base (transform-origin) et s'enfoncent un peu
   dans la tête pour que la jonction reste invisible ; les deux oreilles
   bougent en décalé, et la tête s'incline légèrement, comme à l'écoute. */
.logo-vivant .oreille-1 {
  transform-origin: 48.1% 13%;
}

.logo-vivant .oreille-2 {
  transform-origin: 54.4% 11.3%;
}

.logo-vivant.anim-oreilles .loup-geste {
  animation: ecoute 2.8s ease-in-out;
}

.logo-vivant.anim-oreilles .oreille-1 {
  animation: oreille-proche 2.8s ease-in-out;
}

.logo-vivant.anim-oreilles .oreille-2 {
  animation: oreille-lointaine 2.8s ease-in-out;
}

@keyframes ecoute {
  0%, 100% { transform: rotate(0); }
  15%, 85% { transform: rotate(-1.5deg); }
}

@keyframes oreille-proche {
  0%, 100% { transform: rotate(0) translateY(0); }
  8%  { transform: rotate(-7deg) translateY(0.55%); }
  18% { transform: rotate(5deg) translateY(0.4%); }
  28% { transform: rotate(-6deg) translateY(0.55%); }
  38% { transform: rotate(0) translateY(0); }
  60% { transform: rotate(6deg) translateY(0.5%); }
  70% { transform: rotate(-6deg) translateY(0.5%); }
  80% { transform: rotate(4deg) translateY(0.3%); }
  90% { transform: rotate(0) translateY(0); }
}

@keyframes oreille-lointaine {
  0%, 100% { transform: rotate(0) translateY(0); }
  12% { transform: rotate(8deg) translateY(0.55%); }
  22% { transform: rotate(-6deg) translateY(0.45%); }
  32% { transform: rotate(7deg) translateY(0.55%); }
  44% { transform: rotate(0) translateY(0); }
  64% { transform: rotate(-8deg) translateY(0.55%); }
  74% { transform: rotate(7deg) translateY(0.5%); }
  84% { transform: rotate(-5deg) translateY(0.4%); }
  94% { transform: rotate(0) translateY(0); }
}

/* ---------- Animation 7 : les dents serrées ----------
   La mâchoire est un calque à part (machoire.png) : elle remonte d'un coup
   (16 px à droite, 24 px en haut sur le logo d'origine, soit 1,48 % et 2,22 %)
   pendant que la tête s'incline vers l'avant, puis tout tremble comme si le
   loup grinçait des dents, avant de se détendre. */
.logo-vivant.anim-serre {
  animation: lueur-forte 2.8s ease-in-out;
}

.logo-vivant.anim-serre .loup-geste {
  animation: serre-tete 2.8s linear;
}

.logo-vivant.anim-serre .machoire {
  animation: serre-machoire 2.8s linear;
}

@keyframes serre-tete {
  0%   { transform: rotate(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  14%  { transform: rotate(3deg) translateY(0.4%); }
  22%  { transform: rotate(3.4deg) translate(0.25%, 0.45%); }
  30%  { transform: rotate(2.7deg) translate(-0.2%, 0.35%); }
  38%  { transform: rotate(3.4deg) translate(0.25%, 0.45%); }
  46%  { transform: rotate(2.7deg) translate(-0.2%, 0.35%); }
  54%  { transform: rotate(3.4deg) translate(0.25%, 0.45%); }
  62%  { transform: rotate(2.7deg) translate(-0.2%, 0.35%); }
  72%  { transform: rotate(3deg) translateY(0.4%); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0); }
}

@keyframes serre-machoire {
  0%   { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  14%  { transform: translate(1.48%, -2.22%); }
  22%  { transform: translate(1.38%, -2.1%); }
  30%  { transform: translate(1.58%, -2.32%); }
  38%  { transform: translate(1.38%, -2.1%); }
  46%  { transform: translate(1.58%, -2.32%); }
  54%  { transform: translate(1.38%, -2.1%); }
  62%  { transform: translate(1.58%, -2.32%); }
  72%  { transform: translate(1.48%, -2.22%); animation-timing-function: ease-in-out; }
  100% { transform: translate(0, 0); }
}

/* Accessibilité : pas d'animation si l'appareil demande de les réduire */
@media (prefers-reduced-motion: reduce) {
  .logo-vivant,
  .logo-vivant * {
    animation: none !important;
  }
}

/* ==========================================================
   Effets visuels (voir js/effets.js pour les effets pilotés en JavaScript)
   ✏️ Vitesses et intensités : modifiez les durées (0.8s...) et les valeurs
   d'opacité (rgba(..., 0.16)...) ci-dessous.
   ========================================================== */

/* ---------- Calques de fond (créés par js/effets.js) ---------- */
.braises,
.lueur-curseur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

.braises {
  width: 100%;
  height: 100%;
}

.lueur-curseur {
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 209, 137, 0.1), transparent 65%);
}

main,
.pied {
  position: relative;
  z-index: 1;
}

/* Barre de progression de lecture */
.progression {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 3px;
  background: linear-gradient(90deg, var(--or), #fff1cc);
  box-shadow: 0 0 10px rgba(249, 209, 137, 0.7);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Entrée de page et fondu de sortie ---------- */
@keyframes monte {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes zoom-entree {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: none; }
}

@keyframes apparait {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

main {
  animation: fondu-entree 0.6s ease-out backwards;
}

@keyframes fondu-entree {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.sortie main,
body.sortie .pied {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Accueil : le texte du héros arrive en cascade, le logo se déploie */
.heros .accroche   { animation: monte 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
.heros .presentation { animation: monte 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; }
.heros .groupe-boutons { animation: monte 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both; }
.heros-logo { animation: zoom-entree 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }

/* Pages intérieures : titre et phrase arrivent en glissant */
.titre-page p { animation: monte 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }

/* Grands titres : reflet doré qui passe lentement */
.heros h1,
.titre-page h1 {
  color: var(--or);
  background: linear-gradient(100deg, var(--or) 35%, #fff7e0 50%, var(--or) 65%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    monte 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both,
    reflet 7s linear 1.2s infinite;
}

@keyframes reflet {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* ---------- Apparition au défilement (classes ajoutées par js/effets.js) ---------- */
.reveal:not(.visible) {
  opacity: 0;
}

.reveal.visible {
  animation: apparait 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s) both;
}

/* Souligné doré qui se trace sous les titres de section */
.section h2 {
  position: relative;
  padding-bottom: 0.45em;
}

.section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 4rem;
  background: linear-gradient(90deg, var(--or), transparent);
}

.section h2.reveal:not(.visible)::after {
  width: 0;
}

.section h2.reveal.visible::after {
  animation: trace-barre 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}

@keyframes trace-barre {
  from { width: 0; }
  to   { width: 4rem; }
}

/* Ligne de séparation des sections : un éclat doré la parcourt */
.section {
  position: relative;
}

.section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent) no-repeat;
  background-size: 30% 100%;
  animation: parcours-ligne 7s linear infinite;
}

@keyframes parcours-ligne {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

/* ---------- En-tête et navigation ---------- */
.entete .conteneur {
  transition: padding 0.3s ease;
}

.marque img {
  transition: width 0.3s ease, height 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.marque:hover img {
  transform: rotate(-10deg) scale(1.1);
}

.entete {
  transition: box-shadow 0.3s ease;
}

.entete.compact {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(249, 209, 137, 0.5);
}

.entete.compact .conteneur {
  padding-block: 0.2rem;
}

.entete.compact .marque img {
  width: 36px;
  height: 36px;
}

.menu a:hover {
  text-shadow: 0 0 14px rgba(249, 209, 137, 0.6);
}

/* ---------- Boutons : reflet qui traverse au survol ---------- */
.bouton {
  position: relative;
  overflow: hidden;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.3s;
}

.bouton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.bouton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(249, 209, 137, 0.25);
}

.bouton:hover::after {
  animation: brille 0.8s ease;
}

.bouton:active {
  transform: scale(0.97);
}

@keyframes brille {
  to { left: 140%; }
}

/* ---------- Cartes : lumière qui suit la souris, soulèvement, inclinaison ---------- */
.carte {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease-out, border-color 0.3s, box-shadow 0.3s;
}

.carte::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(249, 209, 137, 0.16), transparent 70%);
}

@media (hover: hover) {
  .carte:hover {
    transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    border-color: var(--or);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 26px rgba(249, 209, 137, 0.18);
  }

  .carte:hover::before {
    opacity: 1;
  }
}

/* Photo des membres : léger zoom et halo au survol */
.membre > img {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s;
}

.membre:hover > img {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 0 0 4px rgba(249, 209, 137, 0.15), 0 0 28px rgba(249, 209, 137, 0.55);
}

/* Aperçu des streams : le loup flotte doucement, les photos de coachs zooment */
.apercu-stream:not(.apercu-stream--photo) img {
  animation: flotte 5s ease-in-out infinite;
}

.apercu-stream img {
  transition: scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.carte:hover .apercu-stream img {
  scale: 1.1;
}

@keyframes flotte {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* Icônes de chaînes et réseaux sociaux */
.icone-lien {
  transition: background 0.2s, border-color 0.2s, transform 0.25s, box-shadow 0.3s;
}

.icone-lien:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(249, 209, 137, 0.25);
}

.reseaux a {
  transition: background 0.2s, border-color 0.2s, transform 0.25s, box-shadow 0.3s;
}

.reseaux a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(249, 209, 137, 0.2);
}

.reseaux .icone {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reseaux a:hover .icone {
  transform: rotate(-12deg) scale(1.2);
}

/* ---------- Historique : la frise se trace et les points pulsent ---------- */
.frise {
  position: relative;
}

.frise.suivi {
  border-left-color: transparent;
}

.frise.suivi::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--or);
  transform: scaleY(0);
  transform-origin: top;
}

.frise.suivi.visible::before {
  animation: trace-frise 2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes trace-frise {
  to { transform: scaleY(1); }
}

.frise li.visible::before {
  animation: pulse-point 1.8s ease-out 2;
}

@keyframes pulse-point {
  0%   { box-shadow: 0 0 0 0 rgba(249, 209, 137, 0.6); }
  100% { box-shadow: 0 0 0 14px rgba(249, 209, 137, 0); }
}

/* ---------- Palmarès : lignes qui s'illuminent ---------- */
tbody tr {
  transition: background 0.25s, box-shadow 0.25s;
}

tbody tr:hover {
  box-shadow: inset 4px 0 0 var(--or);
}

.podium {
  text-shadow: 0 0 12px rgba(249, 209, 137, 0.45);
}

/* ---------- Pied de page ---------- */
.pied img {
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pied img:hover {
  transform: rotate(360deg);
}

/* ---------- Accessibilité : on coupe tout si l'appareil demande moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Lisibilité : les blocs de texte masquent les braises derrière eux ---------- */
.carte {
  background: linear-gradient(var(--or-voile), var(--or-voile)), #060606;
}

.defilement {
  background: #060606;
}

/* ---------- Texte de présentation (accueil) et programme de coaching ---------- */
.heros .presentation strong {
  color: var(--or);
  font-weight: 600;
}

.programme {
  margin: 0.4rem 0 1.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--or-trait);
}

.programme summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--or);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.programme summary::-webkit-details-marker {
  display: none;
}

.programme summary::before {
  content: "\25B8";
  display: inline-block;
  transition: transform 0.25s ease;
}

.programme[open] summary::before {
  transform: rotate(90deg);
}

.programme-contenu {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.programme-contenu p {
  max-width: none;
}

.programme-contenu ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.programme-contenu li {
  margin-bottom: 0.6rem;
}

.programme-contenu strong {
  color: var(--texte);
}

/* ---------- Lien « Profil AoE2Insights » sous les ELO des membres ---------- */
.lien-profil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--or-trait);
  border-radius: 2px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.25s, box-shadow 0.3s;
}

.lien-profil:hover {
  background: var(--or-voile);
  border-color: var(--or);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(249, 209, 137, 0.2);
}

/* ---------- Palmarès : en-tête d'année et lecture du tableau ---------- */
.annee th {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  color: var(--or);
  background: rgba(249, 209, 137, 0.12);
}

tbody td:first-child {
  white-space: nowrap;
}

/* ---------- Palmarès : logo de la team devant le nom de l'équipe ---------- */
.equipe {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
}

.logo-equipe {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

tbody tr:hover .logo-equipe {
  transform: rotate(-14deg) scale(1.12);
}

/* ---------- Palmarès : logos des équipes adverses ---------- */
.logo-adversaire {
  flex: none;
  display: block;
  width: 44px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

tbody tr:hover img.logo-adversaire {
  transform: scale(1.18);
}


/* Rôles des membres (Leader en rouge, Captain en vert) */
.membre .role {
  margin: -0.2rem 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.membre .role--leader { color: #ff5a5a; }
.membre .role--capitaine { color: #5fd47a; }

/* Pages à titre : on retire le trait et le grand vide entre l'introduction et le contenu */
.titre-page + .section {
  border-top: 0;
  padding-top: 0;
}
.titre-page + .section::before {
  display: none;
}