/* PROPOSITION 2 « Carte tactique » (copie de a-champ, voir le dernier bloc) ; COPIE DE TEST « A-CHAMP » de la variante A, avec un effet « champ de bataille » renforcé (voir le dernier bloc de ce fichier).
   L’Ordre du Corbeau : variante A « Acier » (sombre uniquement, aucune ressource externe).
   Composition architecturale : grandes plaques d’acier, lignes techniques fines, angles biseautés, titres massifs.
   Palette de la charte graphique : l’acier, l’ombre et le corbeau. */

/* Les polices sont celles du dossier polices/ (copies exactes des originaux, licence OFL).
   font-display: block pour les titres : on attend la police (3 s au plus) au lieu d’afficher un instant
   une police de remplacement massive (Impact, Arial Black) qui change toute la mise en page. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("polices/BarlowCondensed-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("polices/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --noir: #060809;        /* noir corbeau : fond principal */
  --graphite: #14191D;    /* fonds secondaires, panneaux */
  --acier-obscur: #242C33;/* bordures, composants */
  --gris-acier: #4A545E;  /* séparateurs, lignes techniques (jamais pour du texte) */
  --argent: #929AA4;      /* textes secondaires, icônes */
  --acier-clair: #CDD0D5; /* titres, texte courant */
  --reflet: #F2F4F7;      /* textes prioritaires */
  --bleu-acier: #344756;  /* survols et détails rares */

  --police-titres: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --filet: rgba(146, 154, 164, 0.22);  /* filet technique fin (argent à faible opacité) */
  --duree: 150ms;
  --largeur: 76rem;
  --largeur-large: 92rem;
  --hauteur-entete: 4.25rem;
  --coupe: 18px;          /* biseau des cartes */
}

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

html {
  color-scheme: dark;
  background: var(--noir);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none; /* jamais de gras ou d’italique simulé */
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--acier-clair);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--reflet); text-underline-offset: 0.2em; }

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

.container {
  width: min(100% - 2rem, var(--largeur));
  margin-inline: auto;
}
.container--large { width: min(100% - 2rem, var(--largeur-large)); }
@media (min-width: 48rem) {
  .container { width: min(100% - 4rem, var(--largeur)); }
  .container--large { width: min(100% - 4rem, var(--largeur-large)); }
}

/* Cache de l’interface : icônes en sprite. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone {
  flex: none;
  width: 1.125em;
  height: 1.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-linecap: butt;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--reflet);
  color: var(--noir);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- En-tête et navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--noir);
  border-bottom: 1px solid var(--acier-obscur);
}
/* éclat argenté sur l’arête basse de l’en-tête */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(40%, 28rem);
  height: 1px;
  background: linear-gradient(90deg, var(--argent), transparent);
  opacity: 0.7;
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--hauteur-entete);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--reflet);
  text-decoration: none;
}
.brand-mark { width: 2.75rem; height: 2.75rem; mix-blend-mode: lighten; }
.brand-name {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.site-nav ul { display: flex; gap: 0.125rem; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9375rem;
  color: var(--acier-clair);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color var(--duree), color var(--duree), background-color var(--duree);
}
.site-nav a:hover { color: var(--reflet); border-bottom-color: var(--bleu-acier); background: var(--graphite); }

.menu-toggle { display: none; }
.menu-toggle[hidden] { display: none; }

/* Partenaires : entrée mise en évidence (biseau, fond d’acier, filet clair). L’en-tête étant fixé en haut, elle reste accessible partout.
   Ordinateur : à droite de la navigation. Téléphone : à côté du bouton Menu (voir plus bas). */
.brand { margin-right: auto; }
.site-nav { order: 1; }
.lien-partenaires {
  --c: 8px;
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  background: var(--acier-obscur);
  box-shadow: inset 0 0 0 1px var(--argent);
  color: var(--reflet);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color var(--duree), box-shadow var(--duree);
}
.lien-partenaires:hover { background: var(--bleu-acier); box-shadow: inset 0 0 0 1px var(--reflet); }
.lien-partenaires:focus-visible { outline: 2px solid var(--reflet); outline-offset: -6px; }
.lien-partenaires .icone { width: 1.25em; height: 1.25em; color: var(--acier-clair); }
@media (min-width: 72.01rem) {
  .site-nav { margin-right: 0.5rem; }
}

@media (max-width: 72rem) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0 1rem;
    background: var(--graphite);
    color: var(--reflet);
    border: 1px solid var(--gris-acier);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--duree);
  }
  .menu-toggle:hover { border-color: var(--bleu-acier); }
  .menu-toggle[hidden] { display: none; }

  .menu-toggle-bars,
  .menu-toggle-bars::before,
  .menu-toggle-bars::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    background: var(--reflet);
    content: "";
  }
  .menu-toggle-bars { position: relative; }
  .menu-toggle-bars::before { position: absolute; top: -6px; }
  .menu-toggle-bars::after { position: absolute; top: 6px; }

  .brand-mark { width: 2.5rem; height: 2.5rem; }
  .brand-name { font-size: 1.25rem; }

  /* Téléphone : marque, Partenaires, Menu sur une ligne ; la navigation (repliée ou non) passe dessous. */
  .lien-partenaires { order: 1; padding: 0 0.75rem; font-size: 0.75rem; letter-spacing: 0.08em; }
  .menu-toggle { order: 2; }
  .site-nav { order: 3; margin-right: 0; }

  /* Sans JavaScript, la navigation reste visible sous la marque. */
  .header-inner { flex-wrap: wrap; padding-block: 0.5rem; }
  .site-nav { width: 100%; }
  .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--acier-obscur); }
  .site-nav li + li { border-top: 1px solid var(--acier-obscur); }
  .site-nav a { width: 100%; min-height: 48px; font-size: 0.9375rem; border-bottom: 0; border-left: 3px solid transparent; }
  .site-nav a:hover { border-left-color: var(--bleu-acier); }

  /* Avec JavaScript : menu replié par défaut. */
  .js .site-nav { display: none; padding-bottom: 0.5rem; }
  .js .site-nav.is-open { display: block; }
}

/* Petit téléphone : marque, Partenaires et Menu tiennent sur une seule ligne. */
@media (max-width: 30rem) {
  .header-inner { gap: 0.5rem; }
  .brand { gap: 0.5rem; }
  .brand-mark { width: 2.25rem; height: 2.25rem; }
  .brand-name { font-size: 0.9375rem; letter-spacing: 0.04em; }
  .lien-partenaires { padding: 0 0.625rem; font-size: 0.6875rem; letter-spacing: 0.06em; }
  .lien-partenaires .icone { display: none; }
  /* Menu : les trois barres seules (le mot reste lu par les lecteurs d’écran). */
  .menu-toggle { padding: 0; justify-content: center; width: 44px; }
  .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 23.99rem) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Accueil ---------- */

/* Deux zones : titre (une seule ligne), accroche et boutons à gauche ; emblème à droite (point d’ancrage).
   La hauteur suit le contenu : sur grand écran, la section « Rejoindre » apparaît tout de suite sous l’accueil.
   Pas d’image de fond : le décor est tracé en CSS (plaques en biais, lignes techniques, grain fin). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noir);
  border-bottom: 1px solid var(--acier-obscur);
  scroll-margin-top: var(--hauteur-entete);
}

/* Décor : rien de cliquable, rien de coloré. */
.hero-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Repères verticaux fins (grille de douze colonnes), qui s’effacent vers le bas. */
.hero-deco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(146, 154, 164, 0.07) 0 1px, transparent 1px calc(100% / 12));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

.plate { position: absolute; inset: 0; }
.plate--droite {
  background: linear-gradient(165deg, rgba(36, 44, 51, 0.5) 0%, rgba(20, 25, 29, 0.38) 52%, rgba(6, 8, 9, 0.55) 100%);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 48% 100%);
}
/* micro-rayures de l’acier brossé, très discrètes */
.plate--droite::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(104deg, rgba(242, 244, 247, 0.03) 0 1px, transparent 1px 5px);
}
.plate--gauche {
  background: linear-gradient(180deg, rgba(20, 25, 29, 0.6), rgba(6, 8, 9, 0.6));
  clip-path: polygon(0 0, 22% 0, 8% 100%, 0 100%);
}
.arete {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--argent) 0%, rgba(146, 154, 164, 0) 75%);
  opacity: 0.5;
  clip-path: polygon(62% 0, calc(62% + 2px) 0, calc(48% + 2px) 100%, 48% 100%);
}
.fil { position: absolute; height: 1px; background: var(--gris-acier); opacity: 0.6; }
.fil::after {
  /* point de fixation en bout de ligne */
  content: "";
  position: absolute;
  top: -4px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--argent);
  border-radius: 50%;
  background: var(--noir);
}
.fil--1 { top: 9%; right: 0; width: 24%; }
.fil--1::after { left: -4px; }
.fil--2 { bottom: 7%; left: 0; width: 1.5rem; }
.fil--2::after { right: -4px; }
.fil--3 { top: 12%; left: 0; width: 1.5rem; }
.fil--3::after { right: -4px; }

/* Grain fin : bruit tracé par un filtre SVG intégré (aucun fichier, aucune requête). */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .82 0 0 0 0 .86 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-areas:
    "titre    emblem"
    "accroche emblem"
    "actions  emblem";
  column-gap: clamp(1.5rem, 3.4vw, 3rem);
  row-gap: clamp(0.75rem, 1.6vh, 1.25rem);
  align-content: center;
  padding-block: clamp(1.5rem, 5vh, 3.5rem);
}

/* Conteneur de requête : la taille du titre se règle sur la largeur de sa colonne (voir h1). */
.hero-titre { grid-area: titre; min-width: 0; container-type: inline-size; }
.hero-accroche { grid-area: accroche; min-width: 0; align-self: end; }
.hero-actions { grid-area: actions; align-self: start; }

/* Emblème : grand, net, ancré à droite. */
.hero-emblem {
  grid-area: emblem;
  position: relative;
  justify-self: end;
  align-self: center;
  width: min(100%, 44vh);
  max-width: none;
}
.hero-emblem img { width: 100%; mix-blend-mode: lighten; }
/* repères d’angle autour de l’emblème */
.hero-emblem::before,
.hero-emblem::after {
  content: "";
  position: absolute;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--gris-acier);
  pointer-events: none;
}
.hero-emblem::before { top: 4%; left: 6%; border-right: 0; border-bottom: 0; }
.hero-emblem::after { bottom: 4%; right: 0; border-left: 0; border-top: 0; }

/* Reflet métallique : un passage unique, 0,2 s de délai + 0,9 s = 1,1 s au total, CSS seul.
   La bande n’est visible que sur les parties claires de l’emblème (masque de luminance de l’image elle-même).
   Sans prise en charge du masque, ou en mouvement réduit : aucun reflet. */
.emblem-reflet { display: none; pointer-events: none; }
@supports ((mask-mode: luminance) or (-webkit-mask-mode: luminance)) {
  @media (prefers-reduced-motion: no-preference) {
    .emblem-reflet {
      display: block;
      position: absolute;
      inset: 0;
      -webkit-mask: url("images/emblem-corbeau.png") center / 100% 100% no-repeat;
      mask: url("images/emblem-corbeau.png") center / 100% 100% no-repeat;
      -webkit-mask-mode: luminance;
      mask-mode: luminance;
      background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%) 100% 0 / 250% 100% no-repeat;
      animation: reflet-emblem 0.9s ease-in-out 0.2s 1 both;
    }
  }
}
@keyframes reflet-emblem {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 clamp(0.5rem, 1.6vh, 1.25rem);
  color: var(--argent);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 2.5rem; height: 2px; background: var(--argent); flex: none; }
.eyebrow-num { order: -1; color: var(--reflet); font-family: var(--police-titres); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.2em; line-height: 1; }

/* Titre sur une seule ligne. « L’ORDRE DU CORBEAU » mesure environ 7,8 em : la taille se règle donc sur la largeur de la colonne (cqw),
   ce qui évite tout débordement, du téléphone à l’écran large. Repli en vw pour un navigateur sans requêtes de conteneur. */
h1 {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: min(8.4vw, 11.5vh);
  font-size: min(calc(100cqw / 8), 11.5vh);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--reflet);
}
.h1-ligne {
  display: block;
  /* reflet d’acier : dégradé vertical argent, sans aucune autre teinte */
  background: linear-gradient(180deg, var(--reflet) 8%, var(--acier-clair) 58%, var(--argent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (forced-colors: active) {
  .h1-ligne { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
}

.tagline {
  margin: 0 0 0.5rem;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: clamp(1.125rem, 1.45vw, 1.5rem);
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--argent);
}

.lead {
  margin: 0;
  max-width: 30rem;
  padding-left: 1.125rem;
  border-left: 3px solid var(--gris-acier);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--acier-clair);
}

.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.button-row--hero { margin-top: 0; gap: 0.875rem; }
/* Grand écran : les deux boutons s’empilent à largeur égale (la colonne est étroite) ; téléphone : voir plus bas. */
@media (min-width: 62rem) {
  .button-row--hero { flex-direction: column; align-items: flex-start; }
  .button-row--hero .btn { width: 19.5rem; max-width: 100%; padding-inline: 1.5rem; }
}

/* Téléphone et tablette : tout est empilé (titre, accroche, emblème plus petit, boutons). */
@media (max-width: 61.99rem) {
  .hero-deco .plate--gauche, .hero-deco .fil--3 { display: none; }
  .plate--droite { clip-path: polygon(0 62%, 100% 48%, 100% 100%, 0 100%); }
  .arete { clip-path: polygon(0 62%, 100% 48%, 100% calc(48% + 2px), 0 calc(62% + 2px)); background: linear-gradient(90deg, rgba(146, 154, 164, 0), var(--argent)); }
  .fil--1 { display: none; }
  .hero-deco::before { background: repeating-linear-gradient(90deg, rgba(146, 154, 164, 0.07) 0 1px, transparent 1px calc(100% / 6)); }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titre" "accroche" "emblem" "actions";
    row-gap: 1.25rem;
    padding-block: 2rem 2.5rem;
  }
  .hero-accroche { align-self: start; }
  .tagline { font-size: 1.25rem; }
  .hero-emblem { justify-self: center; width: min(62%, 14rem); }
  .hero-actions { align-self: stretch; margin-top: 0.25rem; }
}

/* ---------- Boutons ---------- */

.btn {
  --c: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.5rem 1.5rem;
  border: 0;
  font-family: var(--police-texte);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  /* angles biseautés : coin haut-gauche et bas-droit */
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  position: relative;
  isolation: isolate;
  transition: color var(--duree), background-color var(--duree), box-shadow var(--duree);
}
.btn:not(.btn--todo) { flex-wrap: nowrap; }
.btn:focus-visible { outline: 2px solid var(--reflet); outline-offset: -6px; }
.btn--primary:focus-visible { outline-color: var(--noir); }
.btn--grand { min-height: 56px; padding: 0.75rem 2rem; font-size: 0.9375rem; }

.btn--primary { background: var(--reflet); color: var(--noir); }
/* filet secondaire : dessiné avec une ombre interne (le clip-path coupe les bordures) */
.btn--secondary { background: var(--graphite); color: var(--reflet); box-shadow: inset 0 0 0 1px var(--gris-acier); }

a.btn--primary:hover { background: var(--acier-clair); box-shadow: inset 0 -3px 0 var(--bleu-acier); }
a.btn--secondary:hover,
button.btn--secondary:hover { background: var(--acier-obscur); box-shadow: inset 0 0 0 1px var(--bleu-acier), inset 0 -3px 0 var(--bleu-acier); }
.btn--primary .icone { transition: transform var(--duree); }
a.btn--primary:hover .icone { transform: translateX(3px); }

@media (max-width: 30rem) {
  .button-row .btn { flex: 1 1 100%; }
}

/* Emplacements à compléter : visibles (étiquette .todo). */
.todo {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border: 1px dashed var(--argent);
  background: var(--noir);
  color: var(--acier-clair);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--noir);
  scroll-margin-top: var(--hauteur-entete);
  --remplissage: var(--graphite);   /* fond des cartes */
  --bord: var(--acier-obscur);      /* filet des cartes */
}
.section--graphite {
  background: var(--graphite);
  border-block: 1px solid var(--acier-obscur);
  --remplissage: var(--noir);
}
.section--acier {
  background:
    repeating-linear-gradient(104deg, rgba(242, 244, 247, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--acier-obscur), var(--graphite) 100%);
  border-block: 1px solid var(--gris-acier);
  --remplissage: var(--noir);
  --bord: var(--gris-acier);
}

/* En-tête de section : repère numéroté, grand titre, filet technique. */
.section-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--filet);
}
.section-head::after {
  /* repère plein sur le filet, comme une plaque soudée */
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: clamp(4rem, 9vw, 8rem);
  height: 3px;
  background: var(--argent);
}
.num {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--argent);
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  line-height: 1;
}
.num::after { content: ""; width: 2.5rem; height: 1px; background: var(--gris-acier); }

.section-title {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: clamp(3.25rem, 9vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--reflet);
  max-width: 20ch;
}

.section-intro { max-width: 42rem; font-size: 1.125rem; color: var(--acier-clair);  margin-bottom: 2rem; }

.subtitle {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--acier-clair);
}
.subtitle::after { content: ""; flex: 1; height: 1px; background: var(--filet); }

.prose { max-width: 44rem; font-size: 1.0625rem; }
.prose p:last-child { margin-bottom: 0; }
.prose--duo { max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); }
.prose--duo p:first-child { font-size: clamp(1.1875rem, 1.9vw, 1.4375rem); line-height: 1.55; color: var(--reflet); }
.prose--duo p:last-child { margin-bottom: 1rem; }
.muted { color: var(--argent); }

/* ---------- Cartes ---------- */

.card-grid { display: grid; gap: 1.25rem; }
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

/* Carte ou panneau biseauté : filet acier d’1 px fabriqué par superposition (le clip-path coupe les bordures). */
.card,
.panel,
.stat {
  position: relative;
  isolation: isolate;
  background: var(--bord);
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, var(--coupe) 100%, 0 calc(100% - var(--coupe)));
  transition: background-color var(--duree);
}
.card::before,
.panel::before,
.stat::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--remplissage);
  clip-path: polygon(0 0, calc(100% - var(--coupe) + 1px) 0, 100% calc(var(--coupe) - 1px), 100% 100%, calc(var(--coupe) - 1px) 100%, 0 calc(100% - var(--coupe) + 1px));
}
.card:hover,
.panel:hover,
.stat:hover { background: var(--bleu-acier); }

.card { padding: 2rem 1.75rem; }
/* repère supérieur : barre d’acier qui devient plus claire au survol */
.card::after,
.stat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  background: var(--argent);
  transition: background-color var(--duree), width var(--duree);
}
.card:hover::after,
.stat:hover::after { background: var(--reflet); width: 4.5rem; }

.icone--carte { width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem; color: var(--argent); stroke-width: 1.75; transition: color var(--duree); }
.card:hover .icone--carte { color: var(--reflet); }

.card h3, .card h4, .card-title {
  margin-bottom: 0.625rem;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--reflet);
}
.card p { color: var(--acier-clair); }
.card p:last-child { margin-bottom: 0; }
.card .btn { margin-top: 0.5rem; }
.button-row--card { margin-top: 1.25rem; }
.button-row--card .btn { margin-top: 0; }

.card--partenaire { padding: 2.25rem 2rem; }

.panel { --coupe: 26px; padding: 2.25rem 2rem; }
.panel p { color: var(--acier-clair); }
.panel-title {
  margin-bottom: 1rem;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--reflet);
}
.panel p:last-of-type { margin-bottom: 0; }
.panel .muted { color: var(--argent); }

/* Candidature : panneau mis en avant (filet clair + barre latérale). */
.panel--discord { --bord: var(--argent); --remplissage: var(--graphite); }
.panel--discord::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--reflet);
}
.panel--discord:hover { background: var(--argent); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; align-items: stretch; }
.split--wide { gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }

/* Soutien : panneau large, fond acier, barre latérale claire. */
.panel--support {
  --bord: var(--argent);
  --remplissage: var(--acier-obscur);
  margin-top: 1.25rem;
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
}
.panel--support::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--acier-clair);
}
.panel--support:hover { background: var(--argent); }
.panel--support p { max-width: 46rem; }
.panel--support .todo { background: var(--graphite); }
.panel--plain { --bord: var(--gris-acier); }

.partner-code { margin: 1.25rem 0 0; font-weight: 500; }
.code-line { margin: 1.25rem 0 0; }
.server-id {
  display: inline-block;
  max-width: 100%;
  padding: 0.75rem 1rem;
  background: var(--noir);
  border: 1px solid var(--gris-acier);
  border-left: 3px solid var(--argent);
  color: var(--reflet);
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
  user-select: all;
}

.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.copy-row .btn[hidden] { display: none; }
.copy-status { color: var(--acier-clair); font-size: 0.9375rem; font-weight: 500; }
button.btn { cursor: pointer; }

/* ---------- Statistiques ---------- */

/* Chiffres et Rejoindre : sections plus compactes que les autres (Rejoindre doit se voir tout de suite sous l’accueil). */
.section--chiffres,
.section--rejoindre { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--chiffres .section-head,
.section--rejoindre .section-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.section--chiffres .section-title,
.section--rejoindre .section-title { font-size: clamp(2.75rem, 6vw, 4.75rem); }
.section--chiffres .section-intro { margin-bottom: 1.5rem; }
.section--chiffres .stat dd { font-size: clamp(3.75rem, 7vw, 6rem); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin: 0; }
.stat { --coupe: 22px; margin: 0; padding: 2rem 1.75rem 1.75rem; display: flex; flex-direction: column; }
.stat dt {
  min-height: 2.6em;
  color: var(--acier-clair);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.stat dd {
  margin: auto 0 0;
  padding-top: 0.5rem;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--reflet);
  font-variant-numeric: tabular-nums;
}
.stat dd[data-valeur="indisponible"] {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 0;
  padding-top: 3.25rem;
  color: var(--acier-clair);
}
.stats-status,
.stats-date {
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--argent);
  color: var(--acier-clair);
  font-size: 1rem;
  font-weight: 500;
}
.stats-date { margin-top: 1.5rem; }
.stats-date[hidden], .stats-status[hidden] { display: none; }
.stats[data-etat="disponible"] .stat dd { color: var(--reflet); }
.stats[data-etat="indisponible"] .stat dd { color: var(--argent); }

/* ---------- Présentation : « Pourquoi nous rejoindre » et valeurs ---------- */

.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* Valeurs : liste compacte, sans cartes (l’information reste la même, la section est plus courte). */
.valeurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1.5rem 2rem; }
.valeur { padding-top: 1rem; border-top: 1px solid var(--gris-acier); }
.valeur h4 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.375rem;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--reflet);
}
.icone--valeur { width: 1.5rem; height: 1.5rem; color: var(--argent); stroke-width: 1.75; }
.valeur p { margin: 0; color: var(--acier-clair); font-size: 0.9375rem; line-height: 1.55; }

/* ---------- Créateurs à la une ---------- */

.une .subtitle { margin-top: 0; }
.une + .split { margin-top: clamp(3rem, 6vw, 4.5rem); }
.fiches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; }
.fiches-grid[hidden] { display: none; }
.fiches-attente {
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--argent);
  color: var(--acier-clair);
  font-size: 1.0625rem;
  font-weight: 500;
}
.fiches-attente[hidden] { display: none; }
.fiche-sous-titre { margin: 0 0 0.5rem; color: var(--argent); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fiche-jeux { margin: 0 0 0.75rem; color: var(--acier-clair); font-size: 0.9375rem; font-weight: 600; }
.fiche-reseaux { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.75rem; }
.fiche-reseaux a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ---------- Révélation au défilement : fondu léger, 12 px au plus (jamais en mouvement réduit) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease-out, transform 500ms ease-out, background-color var(--duree);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}
@media print {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Bouton « Rejoindre » fixé (téléphone) ---------- */

.cta-fixe { display: none; }
@media (max-width: 40rem) {
  .cta-fixe {
    display: inline-flex;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    height: 52px;   /* 56 px au maximum, cible tactile ≥ 44 px */
    min-height: 0;
    padding-block: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms, transform 200ms, visibility 0s linear 200ms;
  }
  .cta-fixe.is-visible { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  /* Espace réservé : le bouton ne masque jamais la fin de la page, ni un élément qui reçoit le focus. */
  body { padding-bottom: calc(52px + 1.5rem + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: 6rem; }
}

/* ---------- Pied de page ---------- */

.site-footer {
  position: relative;
  padding-block: 3rem;
  background: var(--noir);
  border-top: 1px solid var(--acier-obscur);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: min(40%, 28rem);
  height: 1px;
  background: linear-gradient(90deg, var(--argent), transparent);
  opacity: 0.7;
}
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.footer-mark { width: 5rem; height: 5rem; mix-blend-mode: lighten; }
.footer-texte { flex: 1 1 24rem; }
.footer-name {
  margin: 0 0 0.625rem;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--acier-clair);
}
.footer-note { margin: 0 0 0.25rem; color: var(--argent); font-size: 0.9375rem; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--reflet);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
a.footer-link { text-decoration: none; border-bottom: 3px solid var(--gris-acier); transition: border-color var(--duree); }
a.footer-link:hover { border-bottom-color: var(--bleu-acier); }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  a.btn--primary:hover .icone { transform: none; }
  .emblem-reflet { display: none !important; animation: none !important; }
  .cta-fixe { transform: none !important; }
}

/* =====================================================================================================
   CHAMP DE BATAILLE : surcouche de la copie de test (tout ce qui suit s’ajoute à la variante A).
   CSS et SVG intégrés seulement : aucune image ajoutée, aucune ressource externe. Les effets sont décoratifs
   (aria-hidden ou pseudo-éléments sans texte utile) ; le contraste du texte n’est pas modifié.
   ===================================================================================================== */

:root {
  --diag: clamp(1.25rem, 2.6vw, 3rem);   /* hauteur de la découpe en biais en haut de chaque section */

  /* Grain fin (bruit SVG, 180 px) et poussière (nuages SVG, 640 px) : tuiles intégrées, aucune requête. */
  --grain-fin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .83 0 0 0 0 .88 0 0 0 .26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-doux: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .83 0 0 0 0 .88 0 0 0 .17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --poussiere: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .6 0 0 0 0 .66 0 0 0 .42 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

  /* Quatre coins de viseur (traits de 14 px, couleur = currentColor de l’élément). */
  --coins:
    linear-gradient(currentColor, currentColor) 0 0 / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px 14px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px 14px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 1px 14px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1px 14px no-repeat;
}

/* ---------- Fond des sections : poussière, grain, éraflures, bords assombris ---------- */

.section {
  isolation: isolate;
  overflow: hidden;
  overflow: clip;            /* le filigrane qui dépasse ne crée jamais de défilement horizontal */
  border-top: 0;             /* la découpe en biais remplace le filet horizontal du haut */
  /* découpe en diagonale : le haut de chaque section est coupé en biais */
  clip-path: polygon(0 var(--diag), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(4rem, 9vw, 8rem) + var(--diag));
}
.section--chiffres,
.section--rejoindre { padding-top: calc(clamp(2.5rem, 5vw, 4.5rem) + var(--diag)); }

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 130% 95% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.42) 100%),
    repeating-linear-gradient(112deg, transparent 0 61px, rgba(205, 208, 213, 0.05) 61px 62px, transparent 62px 149px),
    var(--poussiere),
    var(--grain-fin);
  background-size: auto, auto, 640px 640px, 180px 180px;
  opacity: 0.5;              /* dosage : garde le texte secondaire (argent) au-dessus de 4,5:1 sur les sections graphite */
}
/* Filet lumineux le long de la découpe */
.section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--diag) + 2px);
  pointer-events: none;
  background: linear-gradient(90deg, var(--argent), rgba(146, 154, 164, 0.2) 75%, rgba(146, 154, 164, 0.05));
  clip-path: polygon(0 calc(100% - 2px), 100% 0, 100% 2px, 0 100%);
  opacity: 0.7;
}

/* Sous l’accueil : arête droite et horizontale (la bande noire venait du clip-path en biais de cette section, qui laissait voir
   le fond noir de la page entre l’accueil et elle, plus le filet incliné ::after). Les autres sections gardent leur découpe. */
.hero + .section--rejoindre {
  clip-path: none;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
.hero + .section--rejoindre::after { display: none; }

/* Section d’acier : les rayures brossées de A, en plus marquées */
.section--acier {
  background:
    repeating-linear-gradient(104deg, rgba(242, 244, 247, 0.045) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--acier-obscur), var(--graphite) 100%);
}

/* Filigrane : une partie de l’emblème, à très faible opacité, derrière le texte. */
#presentation > .container,
#createurs > .container { position: relative; }
#presentation > .container::before,
#createurs > .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(34rem, 90vw);
  aspect-ratio: 1;
  background: url("images/emblem-corbeau.png") center / contain no-repeat;
  mix-blend-mode: lighten;
  opacity: 0.075;
  pointer-events: none;
}
#presentation > .container::before { top: 6rem; right: -10rem; }
#createurs > .container::before { top: 12rem; left: -12rem; transform: scaleX(-1); }

/* ---------- Têtes de section et sous-titres : repères de carte tactique ---------- */

.section-head {
  /* coins de viseur sur les deux angles du haut */
  background:
    linear-gradient(var(--gris-acier), var(--gris-acier)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--gris-acier), var(--gris-acier)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--gris-acier), var(--gris-acier)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--gris-acier), var(--gris-acier)) 100% 0 / 1px 14px no-repeat;
  padding-top: 0.5rem;
}
.section-head::before {
  position: absolute;
  top: 0.625rem;
  right: 0.875rem;
  color: var(--argent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
/* Étiquettes décoratives : la syntaxe « contenu / texte alternatif vide » les cache aux lecteurs d’écran
   (un navigateur qui ne la connaît pas n’affiche simplement pas l’étiquette). */
#rejoindre .section-head::before { content: "Secteur 02 · Grille B2" / ""; }
#presentation .section-head::before { content: "Secteur 03 · Grille C3" / ""; }
#statistiques .section-head::before { content: "Secteur 04 · Grille D4" / ""; }
#partenaires .section-head::before { content: "Secteur 05 · Grille E5" / ""; }
#createurs .section-head::before { content: "Secteur 06 · Grille F6" / ""; }
@media (max-width: 30rem) {
  .section-head::before { font-size: 0.625rem; letter-spacing: 0.16em; right: 0.5rem; }
}

/* Losange avant les sous-titres */
.subtitle::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  background: var(--argent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---------- Cartes, panneaux et stats : grain dans le remplissage, biseaux conservés ---------- */

.card::before,
.panel::before,
.stat::before { background: var(--grain-doux), var(--remplissage); }

.server-id { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }

/* ---------- Pied de page ---------- */

.site-footer { background-image: var(--grain-fin), var(--poussiere); background-size: 180px 180px, 640px 640px; }

/* ---------- Accueil ---------- */

/* Fond : poussière et bords assombris (le grain de A est renforcé). */
.hero-deco {
  background:
    radial-gradient(ellipse 90% 85% at 64% 46%, transparent 38%, rgba(0, 0, 0, 0.6) 100%),
    var(--poussiere);
  background-size: auto, 640px 640px;
}
.grain { opacity: 0.2; }

/* Règle graduée le long du bord haut */
.hero-deco::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, rgba(146, 154, 164, 0.7) 0 1px, transparent 1px 100px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(146, 154, 164, 0.45) 0 1px, transparent 1px 10px) 0 0 / 100% 4px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
}

/* Coins de viseur sur le cadre de l’accueil */
.hero::before {
  content: "";
  position: absolute;
  inset: 0.875rem;
  z-index: 0;
  color: var(--argent);
  opacity: 0.55;
  background: var(--coins);
  pointer-events: none;
}

/* Étiquettes de carte tactique (décoratives, absentes sur petit écran pour ne rien chevaucher) */
.tag {
  position: absolute;
  display: none;
  color: var(--argent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 48rem) {
  .tag { display: flex; align-items: center; gap: 0.75rem; }
  .tag--hg { top: 1.25rem; left: calc((100% - min(100% - 4rem, var(--largeur-large))) / 2); }
  .tag--bd { bottom: 1.125rem; right: calc((100% - min(100% - 4rem, var(--largeur-large))) / 2); flex-direction: row-reverse; }
  .tag::before { content: ""; width: 1.75rem; height: 1px; background: var(--gris-acier); }
}

/* Hachures de zone en bas à gauche */
.hachure {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(34%, 28rem);
  height: min(42%, 16rem);
  background: repeating-linear-gradient(-45deg, rgba(146, 154, 164, 0.2) 0 1px, transparent 1px 8px);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 90%);
  mask-image: linear-gradient(90deg, #000, transparent 90%);
}

/* Réticule autour de l’emblème (SVG, derrière l’image) */
.reticule {
  position: absolute;
  z-index: -1;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  overflow: visible;
  fill: none;
  stroke: var(--argent);
  stroke-width: 1;
  opacity: 0.4;
  pointer-events: none;
}
.reticule * { vector-effect: non-scaling-stroke; }
.ret-cercle { stroke-opacity: 0.55; }
.ret-anneau { stroke-dasharray: 1 7; stroke-width: 3; stroke-opacity: 0.8; transform-origin: 50% 50%; transform-box: fill-box; }
.ret-croix { stroke-opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  .ret-anneau { animation: ret-tour 140s linear infinite; }
}
@keyframes ret-tour { to { transform: rotate(360deg); } }

/* Titre : lueur discrète et un balayage de lumière unique, plus lent que le reflet de l’emblème (1,4 s). */
.h1-ligne {
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, var(--reflet) 8%, var(--acier-clair) 58%, var(--argent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(205, 208, 213, 0.18));
}
@media (prefers-reduced-motion: no-preference) {
  .h1-ligne { animation: balayage-titre 1.4s ease-in-out 0.7s 1 both; }
}
@keyframes balayage-titre {
  from { background-position: 100% 0, 0 0; }
  to { background-position: 0% 0, 0 0; }
}
@media (forced-colors: active) {
  .h1-ligne { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; filter: none; }
  .hero::before, .reticule { display: none; }
}

/* Mouvement réduit : aucune animation ajoutée par cette surcouche. */
@media (prefers-reduced-motion: reduce) {
  .ret-anneau, .h1-ligne { animation: none !important; }
}

/* =====================================================================================================
   PROPOSITION 2 : « CARTE TACTIQUE » (s’ajoute à a-champ)
   Quadrillage de plan d’état-major sur tout le fond, règles graduées sur les bords, repères en croix, anneaux de portée,
   étiquettes encadrées, filets pointillés. Plus de poussière ni de coupes en biais.
   ===================================================================================================== */

:root {
  --diag: 0px;
  --grille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23929AA4' shape-rendering='crispEdges'%3E%3Cpath stroke-opacity='.07' d='M48 .5V240M96 .5V240M144 .5V240M192 .5V240M.5 48H240M.5 96H240M.5 144H240M.5 192H240'/%3E%3Cpath stroke-opacity='.18' d='M.5 0V240M0 .5H240'/%3E%3Cpath stroke-opacity='.6' d='M114 120.5H126M120.5 114V126'/%3E%3C/svg%3E");
}

.section { clip-path: none; border-top: 1px solid var(--gris-acier); }
#presentation > .container::before, #createurs > .container::before { display: none; }

/* Fond : règle graduée à gauche, quadrillage, bords légèrement assombris */
.section::before {
  opacity: 1;
  background-image:
    repeating-linear-gradient(180deg, rgba(146, 154, 164, 0.7) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(180deg, rgba(146, 154, 164, 0.45) 0 1px, transparent 1px 24px),
    radial-gradient(ellipse 130% 100% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.35) 100%),
    var(--grille);
  background-size: 14px 100%, 8px 100%, auto, 240px 240px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
/* Règle graduée le long du bord haut */
.section::after {
  display: block;
  height: 7px;
  clip-path: none;
  opacity: 1;
  background:
    repeating-linear-gradient(90deg, rgba(146, 154, 164, 0.7) 0 1px, transparent 1px 120px) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(146, 154, 164, 0.5) 0 1px, transparent 1px 24px) 0 0 / 100% 4px no-repeat;
}

/* Accueil : quadrillage plus net, anneaux de portée autour de l’emblème */
.hero-deco::before { display: none; }
.hero-deco {
  background:
    repeating-radial-gradient(circle at 84% 50%, transparent 0 79px, rgba(146, 154, 164, 0.16) 79px 80px),
    radial-gradient(ellipse 100% 100% at 60% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
    var(--grille);
  background-size: auto, auto, 240px 240px;
}
.grain { opacity: 0.08; }
.reticule { opacity: 0.6; }
.tag {
  padding: 0.4rem 0.6rem 0.35rem;
  border: 1px solid var(--gris-acier);
  background: rgba(6, 8, 9, 0.85);
}
.tag::before { display: none; }
@media (max-width: 61.99rem) {
  .hero-deco {
    background:
      repeating-radial-gradient(circle at 50% 62%, transparent 0 79px, rgba(146, 154, 164, 0.16) 79px 80px),
      var(--grille);
    background-size: auto, 240px 240px;
  }
}

/* Étiquettes de section encadrées */
.section-head { border-bottom: 1px dashed var(--gris-acier); }
.section-head::before {
  padding: 0.4rem 0.6rem 0.35rem;
  border: 1px solid var(--gris-acier);
  background: var(--noir);
  top: 0.25rem;
  right: 0;
}
.subtitle::after { height: 0; border-top: 1px dashed var(--gris-acier); background: none; }
.valeur { border-top: 1px dashed var(--gris-acier); }

/* Cartes : filet plus fin, repère d’angle conservé */
.section--acier, .section--graphite { --bord: var(--gris-acier); }
.site-footer { background-image: var(--grille); background-size: 240px 240px; }

/* =====================================================================================================
   OPTIMISATIONS DE LA PROPOSITION 2 (suite à l’analyse de la page complète)
   Marges plus serrées, boutons mieux placés, fonds de sections plus contrastés, grille estompée sous le texte,
   cartes et statistiques plus compactes sur téléphone. Aucun texte ni structure modifié.
   ===================================================================================================== */

/* Fonds : noir franc / graphite un peu plus clair (la grille et les repères restent identiques) */
.section { --fond: var(--noir); }
.section--graphite { background: #1C2328; --fond: #1C2328; }
.section--acier { --fond: #1D242A; }
.site-footer { --fond: var(--noir); isolation: isolate; overflow-x: clip; }

/* Sans la section En jeu, Partenaires et Créateurs seraient deux sections graphite à la suite : Partenaires repasse en noir */
#partenaires { background: var(--noir); --fond: var(--noir); --remplissage: var(--graphite); --bord: var(--acier-obscur); }

/* Marges verticales : 8 rem devient 6 rem sur Présentation, Partenaires et Créateurs */
#presentation, #partenaires, #createurs { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }

/* Créateurs : blocs moins espacés */
#createurs .section-head { margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.une + .split { margin-top: clamp(2rem, 4vw, 3rem); }

/* Rejoindre : bouton Discord poussé en bas de sa carte ; bouton Soutenir à droite du texte (à partir de 768 px) */
.panel--discord { display: flex; flex-direction: column; }
.panel--discord .button-row { margin-top: auto; padding-top: 1.75rem; }

/* Grille estompée sous les blocs de texte : un halo de la couleur du fond masque les traits derrière les lignes */
.prose, .section-intro, .valeur, .stats-status, .stats-date, .fiches-attente, .footer-texte { position: relative; isolation: isolate; }
.prose::before, .section-intro::before, .valeur::before, .stats-status::before, .stats-date::before, .fiches-attente::before, .footer-texte::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.75rem;
  background: radial-gradient(ellipse farthest-corner at 50% 50%, var(--fond) 68%, transparent 100%);
  pointer-events: none;
}
/* Éléments dotés d’un filet : le halo commence à l’intérieur du filet (jamais par-dessus) */
.stats-status::before, .stats-date::before, .fiches-attente::before { inset: -0.5rem -0.75rem -0.5rem 0; }
.valeur::before { inset: 0 -0.75rem -0.5rem; }
/* Section d’acier (rayures brossées) : halo translucide, pour atténuer la grille sans tache visible */
.section--acier .section-intro::before, .section--acier .stats-status::before, .section--acier .stats-date::before {
  background: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(29, 36, 42, 0.55) 68%, transparent 100%);
}

/* Accueil : l’étiquette de secteur est remontée de 8 px */
.tag--hg { top: 0.75rem; }

/* Statistiques : « indisponible » dans la police des chiffres, aligné sur leur base, en capitales discrètes */
.section--chiffres .stat dd[data-valeur="indisponible"] {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  padding-top: 0.5rem;
  margin-bottom: 0.25rem;   /* aligne la base des capitales sur celle des chiffres voisins */
  color: var(--argent);
}

/* Téléphone */
@media (max-width: 47.99rem) {
  /* Présentation : l’icône à côté du titre dans les cartes */
  .card-grid--3 .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: 1.5rem 1.25rem; }
  .card-grid--3 .card .icone--carte { grid-column: 1; grid-row: 1; width: 2.25rem; height: 2.25rem; margin: 0; }
  .card-grid--3 .card h4 { grid-column: 2; grid-row: 1; margin: 0; }
  .card-grid--3 .card p { grid-column: 1 / -1; margin: 0.75rem 0 0; }
  /* Rejoindre : marges intérieures des panneaux 1,5 rem */
  #rejoindre .panel, #rejoindre .panel--support { padding: 1.5rem; }
}
/* Statistiques : Membres et En ligne côte à côte (le troisième bloc garde toute la largeur) ; sous 384 px, une colonne */
@media (min-width: 24rem) and (max-width: 47.99rem) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .stats-grid .stat:nth-child(3) { grid-column: 1 / -1; }
  .stat { padding: 1.5rem 1.25rem 1.25rem; }
  .section--chiffres .stat dd { font-size: clamp(2.5rem, 11vw, 3.25rem); }
}

/* Bouton de copie du code partenaire : désactivé tant que le code n’est pas renseigné */
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
button.btn--secondary:disabled:hover { background: var(--graphite); box-shadow: inset 0 0 0 1px var(--gris-acier); }
.panel--support .server-id { background: var(--noir); }

/* =====================================================================================================
   Panneau « Soutenir le serveur » : une colonne de texte, puis une rangée d’actions (code, copie, soutien)
   Téléphone et tablette : tout est empilé, pleine largeur. À partir de 992 px : une seule rangée alignée
   (code et bouton Copier à gauche, bouton Soutenir à l’extrémité droite), sous un filet pointillé.
   ===================================================================================================== */
.panel--support { display: flex; flex-direction: column; align-items: flex-start; }
.panel--support > p:not(.partner-code):not(.code-line) { max-width: 46rem; }
.panel--support .partner-code { align-self: stretch; max-width: none; margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px dashed var(--gris-acier); }
.panel--support .code-line { margin: 0.75rem 0 0; }
.panel--support .copy-row { margin-top: 0.75rem; }
.panel--support .button-row { margin-top: 1.25rem; }

@media (max-width: 47.99rem) {
  .panel--support .code-line, .panel--support .copy-row, .panel--support .button-row { align-self: stretch; }
  .panel--support .server-id { display: block; }
  .panel--support .copy-row .btn, .panel--support .button-row .btn { flex: 1 1 100%; }
}

@media (min-width: 62rem) {
  .panel--support { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; justify-items: start; }
  .panel--support > .panel-title { grid-column: 1 / -1; grid-row: 1; }
  .panel--support > p:not(.partner-code):not(.code-line) { grid-column: 1 / -1; grid-row: 2; }
  .panel--support > .soutien-durees { grid-column: 1 / -1; grid-row: 3; }
  .panel--support > .soutien-points { grid-column: 1 / -1; grid-row: 4; columns: 2; column-gap: 3rem; }
  .panel--support > .partner-code { grid-column: 1 / -1; grid-row: 5; justify-self: stretch; }
  .panel--support > .code-line { grid-column: 1; grid-row: 6; margin: 0.875rem 0 0; }
  .panel--support > .copy-row { grid-column: 2; grid-row: 6; margin: 0.875rem 0 0; position: relative; }
  .panel--support > .button-row { grid-column: 4; grid-row: 6; margin: 0.875rem 0 0; justify-self: end; }
  /* le message de copie ne décale pas la rangée : il s’affiche sous le bouton */
  .panel--support .copy-status { position: absolute; left: 0; top: 100%; margin-top: 0.4rem; white-space: nowrap; }
}

/* Partenaires : les deux boutons de la carte Wardogs France côte à côte (grand écran) ; sinon empilés */
@media (min-width: 75rem) {
  #partenaires .button-row--card:has(.btn + .btn) { flex-wrap: nowrap; }
  #partenaires .button-row--card:has(.btn + .btn) .btn { flex: 1 1 0; min-width: 0; padding-inline: 1rem; }
}

/* Panneau « Soutenir le serveur » : durées (étiquettes) et conditions (liste courte) */
.soutien-durees { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.875rem; margin-top: 1.25rem; }
.panel .soutien-label {
  margin: 0;
  color: var(--argent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.panel--support .soutien-label { color: var(--acier-clair); }
.durees { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.durees li {
  padding: 0.375rem 0.875rem;
  background: var(--noir);
  box-shadow: inset 0 0 0 1px var(--gris-acier);
  color: var(--reflet);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.soutien-points { margin: 1.25rem 0 0; max-width: 46rem; }
.soutien-points li { position: relative; margin: 0 0 0.5rem; padding-left: 1.25rem; color: var(--acier-clair); font-size: 0.9375rem; line-height: 1.55; break-inside: avoid; }
.soutien-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--argent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@media (min-width: 62rem) {
  .panel--support > .soutien-points { max-width: none; }
}

/* Bouton « Soutenir » de l'en-tête : même forme que « Partenaires », en or (seul endroit où l'or est utilisé) */
.lien-soutenir {
  --or: #E0B650;
  background: var(--noir);
  box-shadow: inset 0 0 0 1px var(--or);
  color: var(--or);
}
.lien-soutenir .icone { color: var(--or); }
.lien-soutenir:hover { background: #2A2211; box-shadow: inset 0 0 0 1px #F0CB6E; color: #F0CB6E; }
.lien-soutenir:focus-visible { outline-color: var(--or); }
@media (min-width: 72.01rem) {
  .lien-soutenir { margin-left: 0.5rem; }
}
@media (max-width: 30rem) {
  .header-inner { gap: 0.375rem; }
  .lien-soutenir { padding: 0 0.5rem; }
}
/* Place dans l'en-tête avec le bouton « Soutenir » : navigation resserrée sur écran moyen */
@media (min-width: 72.01rem) and (max-width: 82rem) {
  .site-nav a { padding: 0 0.5rem; letter-spacing: 0.08em; }
  .lien-soutenir { margin-left: 0.25rem; }
  .lien-partenaires .icone { display: none; }
}

/* Petit téléphone (sous 448 px) : « Partenaires » quitte l'en-tête et passe dans le menu replié, comme les autres liens ;
   l'en-tête garde le logo, le nom (dès 384 px), « Soutenir » et « Menu ». Ailleurs, le lien du menu reste masqué. */
.nav-partenaires { display: none; }
@media (max-width: 28rem) {
  .lien-partenaires:not(.lien-soutenir) { display: none; }
  .nav-partenaires { display: list-item; }
}

/* Mention de lien affilié (carte OuiHeberg) : petite note lisible, comme les autres notes de la page */
.mention-affilie { margin: 0.875rem 0 0; color: var(--acier-clair); font-size: 0.8125rem; line-height: 1.5; max-width: 28rem; }

/* Très petit écran : les cartes de la section Partenaires ne dépassent pas la marge (minimum 19 rem remplacé par la largeur disponible) */
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }