/* =========================================================================
   VO VIETNAM BOUAYE : feuille unique
   Toutes les valeurs viennent de 03_communication/charte.md (direction A).
   Aucune couleur en dur hors des variables ci-dessous.
   ========================================================================= */

/* ---------- Polices, servies par le serveur du club ---------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sous-ensemble vietnamien : indispensable pour « Sơn Long Quyền Thuật ». */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* ---------- Variables de la charte ---------- */

:root {
  /* Palette */
  --encre: #0B0C0E;
  --surface: #141619;
  --filet: #262A30;
  --texte-fort: #F4F5F7;
  --texte-secondaire: #A8AEB6;
  --texte-discret: #7C838B;
  --or: #C9A063;
  --laque: #B23A2E;

  /* Familles */
  --police-titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --police-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Échelle d'espacement, base 4 px */
  --e8: 8px;
  --e12: 12px;
  --e16: 16px;
  --e20: 20px;
  --e32: 32px;
  --e44: 44px;
  --e56: 56px;
  --e76: 76px;
  --e96: 96px;

  /* Marge de page et rythme vertical : mobile d'abord */
  --marge-page: var(--e20);
  --rythme: var(--e44);
  --gouttiere: var(--e20);

  /* Rayons */
  --rayon-bouton: 2px;
  --rayon-carte: 3px;

  /* Largeur maximale du contenu */
  --largeur-max: 1328px;
}

@media (min-width: 900px) {
  :root {
    --marge-page: var(--e56);
    --rythme: var(--e96);
  }
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
}

/* Respecter le réglage système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--encre);
  color: var(--texte-fort);
  font-family: var(--police-titre);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

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

a:hover {
  color: var(--texte-fort);
}

/* Un focus visible partout : condition d'accessibilité au clavier. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--e16);
  color: var(--texte-secondaire);
  max-width: 68ch;
}

/* ---------- Structure ---------- */

.page {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

.section {
  padding-block: var(--rythme);
  border-top: 1px solid var(--filet);
}

.section--sans-filet {
  border-top: 0;
}

.section__entete {
  margin-bottom: var(--e32);
}

/* ---------- Typographie ---------- */

.surtitre {
  font-family: var(--police-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 var(--e12);
  display: block;
}

.surtitre--discret {
  color: var(--texte-discret);
}

.titre-hero {
  font-size: clamp(38px, 8.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.titre-section {
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.titre-carte {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.chapo {
  font-size: 19px;
  line-height: 1.6;
  color: var(--texte-secondaire);
}

.mention {
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte-discret);
}

.a-definir {
  color: var(--texte-discret);
  font-style: italic;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--e32);
  border-radius: var(--rayon-bouton);
  font-family: var(--police-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

@media (min-width: 900px) {
  .btn {
    min-height: 58px;
  }
}

.btn--primaire {
  background: var(--or);
  color: var(--encre);
}

.btn--primaire:hover {
  background: var(--texte-fort);
  color: var(--encre);
}

.btn--secondaire {
  background: transparent;
  color: var(--texte-fort);
  border-color: var(--filet);
}

.btn--secondaire:hover {
  border-color: var(--or);
  color: var(--or);
}

.btn[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e12);
}

/* Lien fléché. Le padding vertical porte la zone tactile à 44 px. */
.lien-fleche {
  display: inline-block;
  padding-block: var(--e12);
  font-family: var(--police-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.lien-fleche:hover {
  text-decoration: underline;
}

/* ---------- En-tête ---------- */

.entete {
  border-bottom: 1px solid var(--filet);
  background: var(--encre);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e16);
  padding-block: var(--e16);
}

.marque {
  display: flex;
  align-items: center;
  gap: var(--e12);
  text-decoration: none;
  color: var(--texte-fort);
  margin-right: auto;
}

.marque__logo {
  width: 44px;
  height: 44px;
  color: var(--texte-fort);
  flex: none;
}

.marque__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.marque__nom {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.marque__lieu {
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--or);
  text-transform: uppercase;
}

/* Pas de menu déroulant : quatre liens tiennent sur une ligne, même à 390 px.
   Un menu à bascule aurait imposé du JavaScript pour une navigation. */
.nav {
  order: 3;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e20);
  border-top: 1px solid var(--filet);
  padding-top: var(--e12);
}

.nav a {
  color: var(--texte-secondaire);
  text-decoration: none;
  font-size: 15px;
  padding-block: var(--e8);
}

.nav a:hover {
  color: var(--texte-fort);
}

.nav a[aria-current='page'] {
  color: var(--texte-fort);
  box-shadow: inset 0 -1px 0 var(--or);
}

.entete .btn {
  min-height: 44px;
  padding-inline: var(--e20);
  font-size: 12px;
}

@media (min-width: 900px) {
  .nav {
    order: 0;
    width: auto;
    border-top: 0;
    padding-top: 0;
    gap: var(--e32);
  }
  .entete .btn {
    margin-left: var(--e32);
  }
}

/* ---------- Bandeau d'accueil ---------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--filet);
}

/* Ancre du logo 3D : un carré calé à droite, 62 % de la hauteur du bandeau
   et au plus 38 % de sa largeur. Le bouton-gabarit le remplit. */
.hero__ancre {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  height: min(62%, 38vw);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  /* Au-dessus du bloc de texte (z-index 1), qui s'étend sur toute la largeur
     du bandeau et avalerait les clics. Le transform ci-dessus crée un contexte
     d'empilement : c'est donc ICI que le z-index doit être posé, pas sur le
     bouton enfant. Le texte étant borné à 55 % de large, rien ne se recouvre. */
  z-index: 3;
}

/* Le filigrane : un grand dragon dont le centre est posé SUR le bord droit
   du bandeau, donc coupé à moitié par ce bord (le bandeau masque son
   débordement). Sa hauteur suit celle du bandeau, il grandit avec elle. */
.hero__filigrane {
  position: absolute;
  top: 50%;
  right: 0;
  height: 95%;
  width: auto;
  transform: translate(50%, -50%);
  opacity: 0.06;
  pointer-events: none;
}

/* La scène 3D se superpose au filigrane quand elle démarre.
   Tant qu'elle ne démarre pas, il ne manque rien à la page. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero__canvas.est-visible {
  opacity: 1;
}

/* Gabarit du logo 3D : il remplit l'ancre. C'est LUI qui décide où est le
   logo, la scène lit sa position et sa taille. Le coin arrondi à 50 % rend la
   zone cliquable circulaire, le navigateur s'en charge. */
.hero__zone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: auto;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

/* `?debug` dans l'adresse : on voit le gabarit et son centre. */
.hero--debug .hero__zone {
  outline: 1px dashed var(--or);
  outline-offset: -1px;
}

.hero--debug .hero__zone::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--laque);
}


/* Le bloc garde la largeur de page ; seul le texte est borné, sinon le
   bandeau se centrerait au lieu de rester aligné à gauche. */
.hero__contenu {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 12vw, 140px);
}

.hero__contenu h1,
.hero__contenu p {
  max-width: 46rem;
}

/* Dès que la scène 3D peut tourner (900 px), le texte laisse la moitié
   droite au logo. En dessous, il reprend toute la largeur : pas de 3D. */
@media (min-width: 900px) {
  .hero__contenu h1,
  .hero__contenu p {
    max-width: min(46rem, 55%);
  }
}

.hero__chapo {
  margin-top: var(--e20);
}

.hero .boutons {
  margin-top: var(--e32);
}

.hero__essai {
  margin-top: var(--e20);
  margin-bottom: 0;
}

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

.grille {
  display: grid;
  gap: var(--gouttiere);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .grille--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grille--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .grille--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  padding: var(--e32);
  display: flex;
  flex-direction: column;
  gap: var(--e12);
}

.carte--media {
  padding: 0;
  overflow: hidden;
}

.carte--media .carte__corps {
  padding: var(--e32);
  display: flex;
  flex-direction: column;
  gap: var(--e12);
}

.carte p {
  margin: 0;
}

.carte__meta {
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}

/* Emplacement photo. */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--encre);
  border-bottom: 1px solid var(--filet);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--e20);
}

/* Emplacement sans photo : le dragon du club en filigrane sur un fond
   légèrement éclairé. Présentable tel quel, donc publiable sans attendre la
   photo. Les fichiers attendus sont notés en commentaire dans le HTML et
   dans `00_pilotage/todo.md` : sans cette trace, le trou deviendrait
   invisible et personne ne fournirait jamais l'image. */
.media--vide {
  background-image:
    url('../img/logo-or.svg'),
    radial-gradient(circle at 50% 45%, rgba(201, 160, 99, 0.09), transparent 62%);
  background-repeat: no-repeat;
  background-position: center 46%, center;
  background-size: 38% auto, cover;
}

.media--vide.media--portrait {
  background-size: 46% auto, cover;
}

.media--portrait {
  aspect-ratio: 4 / 5;
}

/* Une photo remplit son emplacement sans se déformer : le navigateur recadre
   au centre. Positionnement absolu, sinon l'image impose son propre format au
   lieu de suivre celui de l'emplacement. Les rayures restent visibles tant
   qu'aucune image n'est fournie. */
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Bandeau d'appel à l'action ---------- */

.bandeau {
  border: 1px solid var(--or);
  border-radius: var(--rayon-carte);
  background: linear-gradient(100deg, rgba(201, 160, 99, 0.14), rgba(201, 160, 99, 0));
  padding: var(--e32);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e20);
}

.bandeau__texte {
  flex: 1 1 22rem;
}

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

/* ---------- Tableaux ---------- */

.tableau-enveloppe {
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

thead th {
  font-family: var(--police-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  text-align: left;
  padding: var(--e16) var(--e20);
  border-bottom: 1px solid var(--filet);
  background: var(--surface);
}

tbody td,
tbody th {
  padding: var(--e16) var(--e20);
  text-align: left;
  font-weight: 400;
  color: var(--texte-secondaire);
  border-bottom: 1px solid var(--filet);
}

tbody th {
  color: var(--texte-fort);
  font-weight: 700;
}

tbody tr:nth-child(even) {
  background: var(--surface);
}

tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: 0;
}

/* Sous 700 px, le tableau devient une pile de cartes : pas de défilement
   horizontal, chaque cellule porte son intitulé via data-intitule. */
@media (max-width: 699px) {
  .tableau-enveloppe {
    border: 0;
    border-radius: 0;
  }
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }
  thead {
    display: none;
  }
  tbody tr {
    background: var(--surface);
    border: 1px solid var(--filet);
    border-radius: var(--rayon-carte);
    margin-bottom: var(--e12);
    padding: var(--e8) var(--e20);
  }
  tbody tr:nth-child(even) {
    background: var(--surface);
  }
  tbody td,
  tbody th {
    border-bottom: 0;
    padding: var(--e8) 0;
  }
  tbody td::before {
    content: attr(data-intitule);
    display: block;
    font-family: var(--police-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 2px;
  }
}

/* ---------- Listes de faits ---------- */

.faits {
  margin: 0;
  display: grid;
  gap: var(--e20);
}

@media (min-width: 700px) {
  .faits--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.faits div {
  border-top: 1px solid var(--filet);
  padding-top: var(--e12);
}

.faits dt {
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-discret);
  margin-bottom: var(--e8);
}

.faits dd {
  margin: 0;
  color: var(--texte-fort);
}

/* ---------- Contenu long ---------- */

.prose {
  max-width: 68ch;
}

.prose h2 {
  font-size: 24px;
  line-height: 1.2;
  margin-top: var(--e44);
  margin-bottom: var(--e12);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul {
  color: var(--texte-secondaire);
  padding-left: 1.2em;
  margin: 0 0 var(--e16);
}

.prose li {
  margin-bottom: var(--e8);
}

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

.pied {
  border-top: 1px solid var(--filet);
  padding-block: var(--rythme) var(--e44);
  margin-top: var(--rythme);
}

.pied__grille {
  display: grid;
  gap: var(--e32);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .pied__grille {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--gouttiere);
  }
}

.pied h2 {
  font-family: var(--police-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-discret);
  margin-bottom: var(--e16);
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied li a,
.pied p a {
  color: var(--texte-secondaire);
  text-decoration: none;
  display: inline-block;
  padding-block: var(--e12);
}

.pied li a:hover,
.pied p a:hover {
  color: var(--or);
}

.pied p {
  font-size: 15px;
  margin-bottom: var(--e8);
}

.pied__logo {
  width: 52px;
  height: 52px;
  color: var(--texte-fort);
  margin-bottom: var(--e16);
}

.pied__bas {
  border-top: 1px solid var(--filet);
  margin-top: var(--e44);
  padding-top: var(--e20);
  font-size: 15px;
  color: var(--texte-discret);
  /* Le filet doit traverser toute la page : la largeur de lecture des
     paragraphes ne s'applique pas ici. */
  max-width: none;
}

/* ---------- Lien d'évitement ---------- */

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--or);
  color: var(--encre);
  padding: var(--e12) var(--e20);
  z-index: 20;
}

.evitement:focus {
  left: var(--e8);
  top: var(--e8);
}