/* ==============================================================================================
   REDLIGHT · accueil (landing.html)
   ----------------------------------------------------------------------------------------------
   Ce qui n'appartient qu'à l'accueil : l'allumage, le héros et sa lumière WebGL, les piliers, le
   podium, les avis, l'espace personnel. Le reste (verre, boutons, bandeau, pied) vit dans site.css.
   ============================================================================================== */

/* Le bandeau n'entre qu'avec l'allumage : sur les autres pages, et aux visites suivantes, il est là
   d'emblée — un bandeau qui glisse à chaque changement de page fatigue vite. */
html.intro-joue .nav {
  opacity: 0;
  translate: -50% -18px;
}

html.intro-joue body.entree-lancee .nav {
  opacity: 1;
  translate: -50% 0;
  transition:
    opacity 0.8s var(--sortie) var(--retard, 0s),
    translate 0.9s var(--ressort-doux) var(--retard, 0s),
    height 0.6s var(--ressort-doux),
    top 0.6s var(--ressort-doux);
}

html.secours .nav {
  opacity: 1;
  translate: -50% 0;
}

html.secours .intro {
  display: none;
}

/* ── Allumage : un tube de néon s'allume, puis la lumière ouvre la page ─────────────────────────
   Il ne se joue qu'une fois par session, s'interrompt au premier geste, et masque le temps de
   chargement des données : c'est pendant ces 1,3 s que la page reçoit ses chiffres et son podium. */
.intro {
  display: none;
}

html.intro-joue .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--noir);
  pointer-events: none;
  animation: intro-ouverture 0.72s 0.66s cubic-bezier(0.76, 0, 0.18, 1) forwards;
}

.intro-trait {
  width: min(620px, 72vw);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rouge) 18%, #ffd6d9 50%, var(--rouge) 82%, transparent);
  box-shadow:
    0 0 16px 1px var(--rouge-halo),
    0 0 70px 10px rgb(255 59 78 / 0.22);
  scale: 0 1;
  opacity: 0;
}

html.intro-joue .intro-trait {
  animation:
    intro-trait 0.62s var(--sortie) forwards,
    intro-scintillement 0.62s steps(1, end) forwards;
}

html.intro-passee .intro {
  display: none;
}

@keyframes intro-trait {
  to {
    scale: 1 1;
  }
}

/* Le scintillement d'un vrai tube au démarrage : quelques ratés, puis la lumière tient. */
@keyframes intro-scintillement {
  0% { opacity: 0; }
  10% { opacity: 0.9; }
  18% { opacity: 0.12; }
  26% { opacity: 1; }
  34% { opacity: 0.35; }
  42%, 100% { opacity: 1; }
}

/* La nappe noire se referme sur la ligne de lumière, comme si le tube ouvrait la page. */
@keyframes intro-ouverture {
  to {
    clip-path: inset(50% 0 50% 0);
  }
}

/* ── Héros ───────────────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: 118px 0 80px;
  overflow: clip;
}

.hero-lumiere {
  position: absolute;
  inset: 0;
  /* Repli sans WebGL, et fond affiché pendant la première image : la même lumière, figée. */
  background:
    radial-gradient(60% 70% at 72% 44%, rgb(255 59 78 / 0.34), transparent 60%),
    radial-gradient(40% 50% at 82% 30%, rgb(255 140 120 / 0.18), transparent 60%),
    radial-gradient(80% 90% at 70% 60%, rgb(140 16 39 / 0.5), transparent 70%),
    var(--noir);
}

.hero-lumiere canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--sortie);
}

.hero-lumiere canvas.est-allume {
  opacity: 1;
}

/* Le voile garantit la lisibilité du texte quelle que soit la forme que prend la lumière : sombre à
   gauche où se trouve le titre, et fondu vers le noir en bas pour enchaîner sur la suite. */
.hero-voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(10 6 7 / 0.9) 0%, rgb(10 6 7 / 0.6) 34%, rgb(10 6 7 / 0.05) 66%),
    linear-gradient(0deg, var(--noir) 0%, rgb(10 6 7 / 0) 30%),
    linear-gradient(180deg, rgb(10 6 7 / 0.55) 0%, rgb(10 6 7 / 0) 22%);
}

.hero-grille {
  position: relative;
  z-index: var(--z-contenu);
  width: var(--largeur);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero h1 {
  margin-top: 26px;
  font-size: clamp(40px, 5.1vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 640;
  text-wrap: balance;
}

/* L'accent tient à l'italique et à la couleur de la même famille, jamais à une seconde police. */
.hero h1 em {
  font-style: italic;
  font-weight: 460;
  color: var(--rouge-vif);
}

.hero-sous {
  margin-top: 24px;
  max-width: 44ch;
  font-size: clamp(17px, 1.3vw, 19.5px);
  line-height: 1.55;
  color: var(--encre-2);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
/* ── Carte « en direct » du héros ────────────────────────────────────────────────────────────── */

.carte-zone {
  perspective: 1100px;
}

.carte-vivante {
  padding: 26px 26px 22px;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.cv-direct {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--encre-2);
}

/* Le seul point coloré de la page, parce qu'il dit quelque chose : ces chiffres sont en direct. */
.point-direct {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rouge);
}

.point-direct::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--rouge);
  animation: pulsation 2.4s var(--sortie) infinite;
}

@keyframes pulsation {
  from {
    scale: 0.6;
    opacity: 0.9;
  }
  to {
    scale: 2;
    opacity: 0;
  }
}

.cv-chiffre {
  margin-top: 18px;
  font-size: clamp(48px, 4.6vw, 66px);
  font-weight: 620;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cv-legende {
  margin-top: 8px;
  color: var(--encre-2);
  font-size: 15px;
}

.cv-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.cv-stat {
  padding: 14px 16px;
  border-radius: var(--r-interne);
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.cv-stat-val {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cv-stat-val .ic {
  font-size: 16px;
  color: var(--rouge-vif);
}

.cv-stat-lib {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--encre-3);
}

.cv-podium {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 0.07);
}

.pile {
  display: flex;
  flex: none;
}

.pile img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--noir-2);
  background: var(--noir-3);
}

.pile img + img {
  margin-left: -10px;
}

.cv-podium p {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--encre-2);
}

.cv-podium strong {
  color: var(--encre);
  font-weight: 600;
}

@media (max-width: 900px) {
  .hero {
    padding: 104px 0 56px;
    min-height: auto;
  }

  .hero-grille {
    grid-template-columns: 1fr;
  }

  .hero-voile {
    background:
      linear-gradient(180deg, rgb(10 6 7 / 0.78) 0%, rgb(10 6 7 / 0.35) 48%, rgb(10 6 7 / 0.1) 70%),
      linear-gradient(0deg, var(--noir) 0%, rgb(10 6 7 / 0) 26%);
  }

  .hero-actions .bouton,
  .hero-actions .bouton-verre {
    flex: 1 1 200px;
  }
}

/* ── Sections ────────────────────────────────────────────────────────────────────────────────── */

.section {
  position: relative;
  padding: clamp(88px, 11vw, 150px) 0;
}

/* Le héros finit déjà sur un fondu vers le noir : la première section n'a pas besoin de sa marge
   entière, qui creusait un trou de plus de 400 px sous la lumière. */
.hero + .section {
  padding-top: clamp(24px, 3vw, 48px);
}

.section h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 630;
  text-wrap: balance;
  max-width: 18ch;
}

/* ── Piliers : grille en mosaïque ────────────────────────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(236px, auto);
  gap: 14px;
  margin-top: 56px;
}

/* Une mise en page par nombre de piliers : la mosaïque a toujours exactement autant de cases que de
   contenus, jamais de case vide. Les piliers se règlent dans le dashboard, leur nombre peut changer. */
.bento .case { grid-column: span 6; }
.bento .case:first-child { grid-column: span 12; }

.bento[data-n="1"] .case:first-child { grid-column: 1 / -1; }

.bento[data-n="2"] .case:nth-child(1) { grid-column: 1 / 8; }
.bento[data-n="2"] .case:nth-child(2) { grid-column: 8 / 13; }

.bento[data-n="3"] .case:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
.bento[data-n="3"] .case:nth-child(2) { grid-column: 8 / 13; }
.bento[data-n="3"] .case:nth-child(3) { grid-column: 8 / 13; }

.bento[data-n="4"] .case:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
.bento[data-n="4"] .case:nth-child(2) { grid-column: 8 / 13; }
.bento[data-n="4"] .case:nth-child(3) { grid-column: 8 / 13; }
.bento[data-n="4"] .case:nth-child(4) { grid-column: 1 / 13; }

.bento[data-n="5"] .case:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
.bento[data-n="5"] .case:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.bento[data-n="5"] .case:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
.bento[data-n="5"] .case:nth-child(4) { grid-column: 1 / 6; grid-row: 3; }
.bento[data-n="5"] .case:nth-child(5) { grid-column: 6 / 13; grid-row: 3; }

.case {
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  isolation: isolate;
}

.case-visuel,
.case-spot,
.case-arete {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.case-visuel {
  z-index: -1;
  overflow: hidden;
}

/* Projecteur : la lumière suit le pointeur à l'intérieur de la case, et allume son arête. */
.case-spot {
  z-index: -1;
  opacity: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgb(255 70 85 / 0.13), transparent 45%);
  transition: opacity 0.4s var(--sortie);
}

.case-arete {
  padding: 1px;
  opacity: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgb(255 130 140 / 0.75), transparent 60%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity 0.4s var(--sortie);
}

.case:hover .case-spot,
.case:hover .case-arete {
  opacity: 1;
}

.case-icone {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 28px;
  color: var(--rouge-vif);
  background: rgb(255 59 78 / 0.12);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 0 0 1px rgb(255 59 78 / 0.22);
}

.case-texte {
  margin-top: auto;
  padding-top: 36px;
}

.case h3 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.case p {
  margin-top: 10px;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--encre-2);
}

.case--vedette h3 {
  font-size: clamp(28px, 2.7vw, 38px);
  letter-spacing: -0.035em;
}

.case--vedette p {
  font-size: 17px;
}

/* Visuels propres à chaque case : une case sur deux au moins porte une matière, pas seulement du texte. */
.visuel-flux span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.visuel-flux span:nth-child(1) {
  width: 520px;
  height: 520px;
  right: -140px;
  top: -160px;
  background: radial-gradient(circle, rgb(255 59 78 / 0.5), transparent 62%);
  animation: derive-a 18s ease-in-out infinite alternate;
}

.visuel-flux span:nth-child(2) {
  width: 420px;
  height: 420px;
  right: 60px;
  top: 40px;
  background: radial-gradient(circle, rgb(140 16 39 / 0.75), transparent 64%);
  animation: derive-b 22s ease-in-out infinite alternate;
}

.visuel-flux span:nth-child(3) {
  width: 300px;
  height: 300px;
  right: -40px;
  top: 120px;
  background: radial-gradient(circle, rgb(255 150 130 / 0.3), transparent 60%);
  animation: derive-c 15s ease-in-out infinite alternate;
}

.visuel-flux::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgb(10 6 7 / 0.75) 85%);
}

@keyframes derive-a {
  to { transform: translate(-90px, 70px) scale(1.15); }
}

@keyframes derive-b {
  to { transform: translate(70px, -50px) scale(0.9); }
}

@keyframes derive-c {
  to { transform: translate(-120px, -30px) scale(1.25); }
}

/* Les animations continues ne tournent que lorsque la section est à l'écran. */
.piliers:not(.en-vue) .visuel-flux span,
.piliers:not(.en-vue) .visuel-visages {
  animation-play-state: paused;
}

.visuel-visages {
  position: absolute;
  inset: -20% -10% 30% 35%;
  display: grid;
  grid-template-columns: repeat(5, 64px);
  gap: 12px;
  rotate: -12deg;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
  animation: glisse 26s linear infinite alternate;
}

.visuel-visages img {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  object-fit: cover;
  filter: saturate(0.85);
}

@keyframes glisse {
  to { translate: -40px 30px; }
}

.visuel-points {
  background: radial-gradient(rgb(255 255 255 / 0.13) 1px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(80% 90% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(80% 90% at 100% 0%, #000, transparent 70%);
}

.visuel-anneaux {
  background: repeating-radial-gradient(circle at 100% 0%, rgb(255 59 78 / 0.14) 0 1px, transparent 1px 30px);
  -webkit-mask-image: radial-gradient(90% 100% at 100% 0%, #000, transparent 75%);
  mask-image: radial-gradient(90% 100% at 100% 0%, #000, transparent 75%);
}

.visuel-filigrane .ic {
  position: absolute;
  right: -24px;
  top: -30px;
  font-size: 220px;
  color: var(--rouge);
  opacity: 0.07;
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .bento .case,
  .bento[data-n] .case:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 240px;
  }
}

/* ── Les plus actifs ─────────────────────────────────────────────────────────────────────────── */

.scene {
  display: grid;
  grid-template-columns: 1fr 1.14fr 1fr;
  align-items: end;
  gap: 14px;
  margin-top: 60px;
}

.marche {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 22px 30px;
  overflow: hidden;
  min-height: 272px;
}

/* Le DOM garde l'ordre 1, 2, 3 (celui qu'annonce un lecteur d'écran) ; seule la grille pose le premier
   au centre, sur la plus haute marche. */
.scene .marche {
  grid-row: 1;
}

.scene .marche--1 {
  grid-column: 2;
}

.scene .marche--2 {
  grid-column: 1;
}

.scene .marche--3 {
  grid-column: 3;
}

.marche--1 {
  min-height: 322px;
  --verre-teinte: rgb(40 10 16 / 0.5);
}

.marche--3 {
  min-height: 252px;
}

.marche-rang {
  position: absolute;
  right: 14px;
  bottom: -34px;
  z-index: -1;
  font-size: 170px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.1);
}

.marche-avatar {
  position: relative;
  padding: 3px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
}

.marche--1 .marche-avatar {
  padding: 3.5px;
  background: conic-gradient(from var(--angle, 0deg), var(--rouge), #ffb3a8, var(--rouge-profond), var(--rouge));
  animation: tour 7s linear infinite;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes tour {
  to { --angle: 360deg; }
}

.marche-avatar img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--noir-2);
  background: var(--noir-3);
}

.marche--1 .marche-avatar img {
  width: 112px;
  height: 112px;
}

.marche-couronne {
  position: absolute;
  top: -24px;
  left: 50%;
  translate: -50% 0;
  font-size: 30px;
  color: #ff9d8f;
  filter: drop-shadow(0 4px 12px rgb(255 59 78 / 0.5));
}

.marche-nom {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marche-compte {
  margin-top: 6px;
  font-size: 14px;
  color: var(--encre-2);
}

.marche-compte strong {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--rouge-vif);
}

.suivants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.suivant {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--r-interne);
  background: rgb(255 255 255 / 0.035);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  transition: background-color 0.3s;
}

.suivant:hover {
  background: rgb(255 255 255 / 0.06);
}

.suivant-rang {
  width: 22px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--encre-3);
  text-align: center;
}

.suivant img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--noir-3);
}

.suivant-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 500;
}

.suivant-compte {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--encre-2);
}

@media (max-width: 760px) {
  .scene {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .scene .marche {
    grid-row: auto;
    grid-column: 1;
    min-height: 0;
  }
}

/* ── Avis ────────────────────────────────────────────────────────────────────────────────────── */

.avis-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.avis-chiffre {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 30px;
  font-size: clamp(96px, 11vw, 168px);
  font-weight: 250;
  letter-spacing: -0.06em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.avis-sur {
  font-size: 0.26em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--encre-3);
}

.etoiles {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  font-size: 22px;
  color: var(--rouge-vif);
}

.etoiles .ic.est-vide {
  color: rgb(255 255 255 / 0.15);
}

.avis-compte {
  margin-top: 10px;
  color: var(--encre-2);
}

.avis-note .lien-fleche {
  margin-top: 28px;
}

.avis-liste {
  display: grid;
  gap: 14px;
}

.citation {
  padding: 26px 28px;
}

/* Les avis se chevauchent en léger décalage : une pile de cartes, pas une grille de formulaires. */
.citation:nth-child(even) {
  margin-left: clamp(0px, 5vw, 64px);
}

.citation:nth-child(odd):not(:first-child) {
  margin-right: clamp(0px, 3vw, 40px);
}

.citation-guillemet {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 42px;
  color: rgb(255 59 78 / 0.22);
}

.citation blockquote {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  /* Réserve la place des guillemets en haut à droite : le texte ne doit jamais passer dessous. */
  padding-right: 56px;
}

.citation figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.citation figcaption img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--noir-3);
}

.citation-nom {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
}

.citation-date {
  display: block;
  font-size: 13px;
  color: var(--encre-3);
}

.citation-etoiles {
  display: flex;
  gap: 2px;
  margin-left: auto;
  font-size: 14px;
  color: var(--rouge-vif);
}

.vide {
  padding: 30px;
  color: var(--encre-2);
}

@media (max-width: 900px) {
  .avis-grille {
    grid-template-columns: 1fr;
  }

  .citation:nth-child(n) {
    margin: 0;
  }
}

/* ── Événements ──────────────────────────────────────────────────────────────────────────────── */

.evenements-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 48px;
}

.evenement {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.evenement-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(80% 90% at 80% 0%, rgb(255 59 78 / 0.28), transparent 70%),
    var(--noir-3);
}

.evenement-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evenement-rebours {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  --verre-teinte: rgb(14 7 9 / 0.6);
}

.evenement-rebours .ic {
  color: var(--rouge-vif);
}

.evenement-lieu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.evenement-corps {
  padding: 22px 24px 24px;
}

.evenement-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rouge-vif);
}

.evenement h3 {
  margin-top: 10px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.evenement p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--encre-2);
}

/* ── Aide ────────────────────────────────────────────────────────────────────────────────────── */

.aide-panneau {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.aide-bloc {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  padding: clamp(28px, 4vw, 44px);
  transition: background-color 0.4s var(--sortie);
}

.aide-bloc:hover {
  background: rgb(255 255 255 / 0.035);
}

.aide-bloc + .aide-bloc {
  border-left: 1px solid rgb(255 255 255 / 0.07);
}

.aide-icone {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--rouge-vif);
  background: rgb(255 59 78 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 59 78 / 0.2);
}

.aide-bloc h3 {
  font-size: 22px;
  letter-spacing: -0.025em;
  font-weight: 600;
  align-self: end;
}

.aide-bloc p {
  color: var(--encre-2);
  font-size: 15.5px;
  max-width: 46ch;
}

.aide-bloc .lien-fleche {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .aide-panneau {
    grid-template-columns: 1fr;
  }

  .aide-bloc + .aide-bloc {
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.07);
  }
}

/* ── Dernier appel ───────────────────────────────────────────────────────────────────────────── */

.final {
  position: relative;
  padding: clamp(110px, 14vw, 190px) 0 clamp(96px, 12vw, 150px);
  text-align: center;
  overflow: clip;
}

/* La lumière revient en fin de page : le même tube que l'allumage, cette fois posé à l'horizon. */
.final-lumiere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 100%, rgb(255 59 78 / 0.28), transparent 70%);
}

.final-trait {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(900px, 90vw);
  height: 2px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--rouge) 20%, #ffd6d9 50%, var(--rouge) 80%, transparent);
  box-shadow:
    0 0 20px 1px var(--rouge-halo),
    0 0 90px 14px rgb(255 59 78 / 0.2);
}

.final-contenu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final h2 {
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 640;
  max-width: 16ch;
  text-wrap: balance;
}

.final p {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 18px;
  color: var(--encre-2);
  text-wrap: pretty;
}

.final .bouton {
  margin-top: 40px;
}

/* ── Avis : note des membres et formulaire ───────────────────────────────────────────────────── */

.avis-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 28px;
}

.avis-note .avis-actions .lien-fleche {
  margin-top: 0;
}

.etoiles-saisie {
  display: flex;
  gap: 6px;
  margin-top: 20px;
}

.etoiles-saisie input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.etoiles-saisie label {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 30px;
  color: rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  cursor: pointer;
  transition:
    color 0.2s,
    scale 0.45s var(--ressort),
    background-color 0.2s;
}

.etoiles-saisie label.est-allumee {
  color: var(--rouge-vif);
  background: rgb(255 59 78 / 0.1);
}

.etoiles-saisie label:hover {
  scale: 1.08;
}

.etoiles-saisie input:focus-visible + label {
  outline: 2px solid var(--rouge-vif);
  outline-offset: 3px;
}

.avis-formulaire h2 {
  font-size: 26px;
  font-weight: 620;
  letter-spacing: -0.03em;
  padding-right: 48px;
}

.avis-formulaire > p {
  margin-top: 8px;
  color: var(--encre-2);
  font-size: 15px;
}

.avis-formulaire textarea {
  margin-top: 18px;
}

.avis-formulaire-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.retour-formulaire {
  font-size: 14px;
  color: var(--encre-2);
}

.retour-formulaire.est-erreur {
  color: #ff9a90;
}

/* ── Espace personnel ────────────────────────────────────────────────────────────────────────── */

.espace-tete {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 52px;
}

.espace-tete > img {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px var(--noir-2),
    0 0 0 5px rgb(255 59 78 / 0.5);
}

.espace-nom {
  font-size: 24px;
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.espace-sous {
  color: var(--encre-3);
  font-size: 14px;
}

.espace-eco {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.espace-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 14px;
  margin-top: 26px;
}

.espace-col {
  display: grid;
  gap: 14px;
  align-content: start;
}

.espace-bloc {
  padding: 20px;
}

.espace-bloc-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.espace-bloc-titre h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}

.espace-bloc-titre h3 .ic {
  color: var(--rouge-vif);
}

.stats-tuiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stat-tuile {
  padding: 14px;
  background: rgb(0 0 0 / 0.18);
}

.stat-tuile .ic {
  font-size: 18px;
  color: var(--rouge-vif);
}

.stat-tuile strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-tuile span {
  font-size: 12.5px;
  color: var(--encre-3);
}

.espace-note {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--encre-3);
}

.espace-vide {
  font-size: 14px;
  color: var(--encre-3);
}

.sanctions {
  display: grid;
  gap: 8px;
  max-height: 290px;
  overflow-y: auto;
  scrollbar-width: none;
}

.sanctions::-webkit-scrollbar {
  display: none;
}

.sanction {
  position: relative;
  padding: 12px 14px 12px 18px;
  overflow: hidden;
  background: rgb(0 0 0 / 0.18);
}

.sanction::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rouge);
}

.sanction.est-levee {
  opacity: 0.55;
}

.sanction.est-levee::before {
  background: var(--encre-3);
}

.sanction-titre {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
}

.sanction-titre .ic,
.sanction-titre .rl-icon {
  color: var(--rouge-vif);
}

.sanction-motif {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--encre-2);
}

.sanction-meta {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--encre-3);
}

.espace-statut .bandeau + p,
.espace-statut .bandeau + .bouton,
.espace-statut p + .bouton {
  margin-top: 12px;
}

.espace-statut p {
  font-size: 14px;
  color: var(--encre-2);
}

.preference {
  display: flex;
  align-items: center;
  gap: 16px;
}

.preference strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}

.preference p {
  margin-top: 3px;
  font-size: 13px;
  color: var(--encre-3);
}

.espace-pied {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 820px) {
  .espace-grille {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .stats-tuiles {
    grid-template-columns: 1fr;
  }

  .espace-tete {
    align-items: flex-start;
  }

  .espace-tete > img {
    width: 54px;
    height: 54px;
  }
}

/* ── Tous les avis (fenêtre) ─────────────────────────────────────────────────────────────────── */

.tous-avis-titre {
  padding-right: 52px;
  font-size: 26px;
  font-weight: 620;
  letter-spacing: -0.03em;
}

.tous-avis-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 22px;
}

/* Dans la fenêtre, plus de pile décalée : une grille régulière, et le texte entier. */
.tous-avis-liste .citation {
  margin: 0;
  --verre-teinte: rgb(255 255 255 / 0.02);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}

.tous-avis-liste .citation::after {
  display: none;
}

.tous-avis-liste .citation blockquote {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  font-size: 15.5px;
}