/* ==========================================================================
   Polices auto-hébergées (sous-ensemble latin, woff2)
   Graduate, Eduardo Tunni, OFL · Kollektif, Dogu Kaya · IBM Plex Mono, IBM, OFL
   Permanent Marker, Font Diner, Apache 2.0 (uniquement le numéro écrit sur la carte)
   ========================================================================== */

@font-face{ font-family:"Graduate"; src:url("/fonts/graduate-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Kollektif"; src:url("/fonts/kollektif-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Kollektif"; src:url("/fonts/kollektif-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Kollektif"; src:url("/fonts/kollektif-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Kollektif"; src:url("/fonts/kollektif-bolditalic.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/fonts/ibmplexmono-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/fonts/ibmplexmono-medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/fonts/ibmplexmono-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Permanent Marker"; src:url("/fonts/permanentmarker-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+30-39; }

/* ==========================================================================
   Amicale Sportive des Cartes, feuille de style unique
   Structure : 1 jetons · 2 fondations · 3 mise en page · 4 composants
               5 pages · 6 mouvement · 7 impression
   ========================================================================== */

/* ---------- 1. JETONS ---------------------------------------------------- */

:root{
  /* Couleurs de l'identité */
  --navy:#1f2448;
  --navy-fonce:#182142;
  --nuit:#0d131b;
  --encre:#1b2c36;
  --bordeaux:#79170e;
  --bordeaux-fonce:#5f1109;
  --creme:#e2d5b7;
  --creme-fonce:#d9c7a8;
  --papier:#f2ead9;
  --papier-clair:#f8f3e8;

  /* Rôles */
  --fond:var(--papier);
  --texte:var(--navy);
  --texte-doux:rgba(31,36,72,.72);
  --texte-muet:rgba(31,36,72,.55);
  --filet:rgba(31,36,72,.22);
  --filet-fort:rgba(31,36,72,.5);

  /* Sur fond sombre */
  --texte-inv:var(--papier);
  --texte-inv-doux:rgba(242,234,217,.72);
  --texte-inv-muet:rgba(242,234,217,.5);
  --filet-inv:rgba(226,213,183,.28);
  --filet-inv-fort:rgba(226,213,183,.6);

  /* Typographie */
  --f-display:"Graduate","Rockwell","Roboto Slab",serif;
  --f-sans:"Kollektif","Montserrat","Jost","Century Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --t-2:.7rem;
  --t-1:.8125rem;
  --t0:.9375rem;
  --t1:1.0625rem;
  --t2:1.25rem;
  --t3:1.5rem;
  --t4:1.875rem;
  --t5:2.375rem;
  --t6:3rem;

  --lh-serre:1.05;
  --lh-titre:1.15;
  --lh-texte:1.55;
  --lh-mono:1.5;

  --esp-mono:.14em;
  --esp-caps:.08em;

  /* Espacements */
  --s1:.25rem;
  --s2:.5rem;
  --s3:.75rem;
  --s4:1rem;
  --s5:1.5rem;
  --s6:2rem;
  --s7:3rem;
  --s8:4.5rem;
  --s9:6rem;
  --section:clamp(3.25rem, 7vw, 6.5rem);

  /* Largeurs et grille */
  --w-max:1200px;
  --w-texte:34rem;
  --w-etroit:42rem;
  --marge:clamp(1.1rem, 5vw, 4rem);
  --gouttiere:clamp(1rem, 2.5vw, 2rem);

  /* Traits, coins, ombres */
  --trait:1px;
  --rayon:0;
  --rayon-carte:4%;
  --ombre-carte:0 24px 50px -18px rgba(0,0,0,.8);

  /* Mouvement */
  --duree:.45s;
  --duree-court:.2s;
  --courbe:cubic-bezier(.2,.7,.2,1);

  /* Couches */
  --z-entete:50;
  --z-menu:60;
  --z-dialogue:70;
}
/* Petit écran : les repères mono et les petits corps montent d'un cran */
@media (max-width:47.99em){
  :root{ --t-2:.75rem; --t-1:.875rem; --t0:1rem; }

  /* Hauteur d'en-tête */
  --h-entete:3.5rem;
}

@media (min-width:64em){
  :root{ --h-entete:4.25rem; }
}

/* ---------- 2. FONDATIONS ------------------------------------------------ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--fond);
}

body{
  margin:0;
  font-family:var(--f-sans);
  font-size:var(--t1);
  line-height:var(--lh-texte);
  color:var(--texte);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

main{ flex:1 0 auto; }

h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; height:auto; }
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration-color:var(--filet-fort); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ text-decoration-color:currentColor; }

:focus-visible{ outline:2px solid var(--bordeaux); outline-offset:3px; }
.sur-sombre :focus-visible,
.bande--navy :focus-visible,
.bande--nuit :focus-visible,
.entete :focus-visible,
.menu :focus-visible{ outline-color:var(--creme); }

::selection{ background:var(--navy); color:var(--papier); }
.bande--navy ::selection,.bande--nuit ::selection{ background:var(--creme); color:var(--navy); }

.visuellement-cache{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.lien-evitement{
  position:absolute; left:var(--s4); top:-100%;
  background:var(--bordeaux); color:#fff;
  padding:var(--s2) var(--s4);
  font-weight:700; text-decoration:none;
  z-index:100;
}
.lien-evitement:focus{ top:var(--s4); }

/* Registres typographiques */

.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:var(--lh-serre);
  letter-spacing:.01em;
  text-transform:uppercase;
}

.mono{
  font-family:var(--f-mono);
  font-size:var(--t-1);
  line-height:var(--lh-mono);
  letter-spacing:var(--esp-mono);
  text-transform:uppercase;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.mono--petit{ font-size:var(--t-2); }
.mono--doux{ color:var(--texte-doux); }
.bande--navy .mono--doux,.bande--nuit .mono--doux{ color:var(--texte-inv-doux); }

.gras{ font-weight:700; }
.bordeaux{ color:var(--bordeaux); }
.italique{ font-style:italic; }

.titre-section{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:var(--lh-serre);
  font-size:clamp(var(--t4), 4.2vw, var(--t6));
  letter-spacing:.01em;
}

.titre-page{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.98;
  font-size:clamp(2.25rem, 8.5vw, 5.5rem);
  letter-spacing:.005em;
  text-wrap:balance;
}

.sous-titre{
  font-weight:700;
  font-size:clamp(var(--t2), 2.4vw, var(--t3));
  line-height:var(--lh-titre);
  text-wrap:balance;
}

.chapo{
  font-size:clamp(var(--t2), 2vw, var(--t3));
  line-height:1.4;
  max-width:var(--w-etroit);
  text-wrap:pretty;
}

.texte{ max-width:var(--w-texte); text-wrap:pretty; }
.texte p + p{ margin-top:var(--s4); }
.texte h3{ margin-top:var(--s6); margin-bottom:var(--s3); }
.texte ul{ margin-top:var(--s4); padding-left:1.2em; list-style:square; }
.texte li + li{ margin-top:var(--s2); }
.texte strong{ font-weight:700; }

.declaration{
  font-weight:700;
  font-size:clamp(var(--t3), 4vw, 2.75rem);
  line-height:1.12;
  letter-spacing:-.005em;
  text-wrap:balance;
}

/* ---------- 3. MISE EN PAGE ---------------------------------------------- */

.cadre{
  width:min(100% - 2 * var(--marge), var(--w-max));
  margin-inline:auto;
}

.grille{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--gouttiere);
  row-gap:var(--s5);
}
.grille > *{ grid-column:1 / -1; min-width:0; }

@media (min-width:48em){
  .g-1-6{ grid-column:1 / span 6; }
  .g-7-6{ grid-column:7 / span 6; }
  .g-1-7{ grid-column:1 / span 7; }
  .g-8-5{ grid-column:8 / span 5; }
  .g-1-8{ grid-column:1 / span 8; }
  .g-9-4{ grid-column:9 / span 4; }
  .g-1-5{ grid-column:1 / span 5; }
  .g-6-7{ grid-column:6 / span 7; }
  .g-1-4{ grid-column:1 / span 4; }
  .g-5-8{ grid-column:5 / span 8; }
  .g-2-9{ grid-column:2 / span 9; }
  .g-3-8{ grid-column:3 / span 8; }
  .g-1-3{ grid-column:1 / span 3; }
  .g-4-9{ grid-column:4 / span 9; }
  .g-4-6{ grid-column:4 / span 6; }
  .g-10-3{ grid-column:10 / span 3; }
}

.bande{ padding-block:var(--section); }
.bande--serree{ padding-block:clamp(2.25rem, 5vw, 4rem); }
.bande--navy{ background:var(--navy); color:var(--texte-inv); }
.bande--nuit{ background:var(--nuit); color:var(--texte-inv); }
.bande--creme{ background:var(--creme); }
.bande--creme-fonce{ background:var(--creme-fonce); }
.bande--papier{ background:var(--papier); }
.bande--papier-clair{ background:var(--papier-clair); }
.bande--navy a,.bande--nuit a{ text-decoration-color:var(--filet-inv-fort); }

.filet{ border:0; border-top:var(--trait) solid var(--filet); margin:0; }
.bande--navy .filet,.bande--nuit .filet{ border-color:var(--filet-inv); }

.filet-double{
  border:0; margin:0;
  height:5px;
  border-top:var(--trait) solid var(--filet-fort);
  border-bottom:var(--trait) solid var(--filet-fort);
}
.bande--navy .filet-double,.bande--nuit .filet-double{ border-color:var(--filet-inv-fort); }

/* En-tête de section : titre à gauche, repère mono à droite */
.tete-section{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s4);
  padding-bottom:var(--s4);
  border-bottom:var(--trait) solid var(--filet);
  margin-bottom:clamp(var(--s6), 4vw, var(--s8));
  flex-wrap:wrap;
}
.bande--navy .tete-section,.bande--nuit .tete-section{ border-color:var(--filet-inv); }
.tete-section .mono{ color:var(--texte-doux); }
.bande--navy .tete-section .mono,.bande--nuit .tete-section .mono{ color:var(--texte-inv-doux); }

/* ---------- 4. COMPOSANTS ------------------------------------------------ */

/* Boutons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  min-height:3rem;
  padding:.85rem 1.5rem;
  font-family:var(--f-sans);
  font-weight:700;
  font-size:var(--t0);
  letter-spacing:var(--esp-caps);
  text-transform:uppercase;
  text-decoration:none;
  line-height:1.1;
  border:var(--trait) solid var(--navy);
  background:var(--navy);
  color:var(--papier);
  border-radius:var(--rayon);
  transition:background-color var(--duree-court) var(--courbe), color var(--duree-court) var(--courbe), border-color var(--duree-court) var(--courbe), transform var(--duree-court) var(--courbe);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn:hover{ background:var(--navy-fonce); }
.btn:active{ transform:translateY(1px); }

.btn--bordeaux{ background:var(--bordeaux); border-color:var(--bordeaux); color:#fff; }
.btn--bordeaux:hover{ background:var(--bordeaux-fonce); border-color:var(--bordeaux-fonce); }

.btn--contour{ background:transparent; color:var(--navy); }
.btn--contour:hover{ background:var(--navy); color:var(--papier); }

.btn--creme{ background:var(--creme); border-color:var(--creme); color:var(--navy); }
.btn--creme:hover{ background:var(--papier); border-color:var(--papier); }

.btn--contour-inv{ background:transparent; border-color:var(--creme); color:var(--creme); }
.btn--contour-inv:hover{ background:var(--creme); color:var(--navy); }

.btn--large{ width:100%; }
@media (min-width:30em){ .btn--large{ width:auto; min-width:16rem; } }

.btn svg{ width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* Lien fléché discret, pour les fins de section */
.lien-suite{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  min-height:2.5rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--esp-caps);
  font-size:var(--t0);
  text-decoration:none;
  padding-bottom:.15em;
  border-bottom:var(--trait) solid currentColor;
}
.lien-suite svg{ width:.9em; height:.9em; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--duree-court) var(--courbe); }
.lien-suite:hover svg{ transform:translateX(3px); }

/* Étiquette de repère (index, saison, statut) */
.repere{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:var(--t-2);
  letter-spacing:var(--esp-mono);
  text-transform:uppercase;
  font-weight:500;
  padding:.3em .55em .25em;
  border:var(--trait) solid currentColor;
  line-height:1.2;
}
.repere--plein{ background:var(--navy); color:var(--papier); border-color:var(--navy); }
.repere--bordeaux{ background:var(--bordeaux); color:#fff; border-color:var(--bordeaux); }

/* En-tête du site */

.entete{
  position:sticky;
  top:0;
  z-index:var(--z-entete);
  background:var(--navy);
  color:var(--papier);
  border-bottom:var(--trait) solid var(--filet-inv);
}
.entete-barre{
  height:var(--h-entete);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
}

.marque{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
.marque img{ width:2rem; height:auto; flex:none; }
.marque-sigle{
  font-family:var(--f-display);
  font-size:1.35rem;
  letter-spacing:.06em;
  line-height:1;
  padding-top:.1em;
}
.marque-nom{
  display:none;
  font-family:var(--f-mono);
  font-size:var(--t-2);
  letter-spacing:var(--esp-mono);
  text-transform:uppercase;
  color:var(--texte-inv-doux);
  padding-top:.2em;
}
@media (min-width:64em){
  .marque img{ width:2.5rem; }
  .marque-sigle{ font-size:1.55rem; }
  .marque-nom{ display:inline; }
}

.nav-principale{ display:none; }
@media (min-width:64em){
  .nav-principale{ display:flex; align-items:center; gap:clamp(1rem, 2vw, 1.75rem); }
  .nav-principale a{
    font-weight:700;
    font-size:var(--t-1);
    letter-spacing:var(--esp-caps);
    text-transform:uppercase;
    text-decoration:none;
    padding:.4em 0;
    position:relative;
    color:var(--texte-inv);
    white-space:nowrap;
  }
  .nav-principale a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:2px;
    background:var(--creme);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--duree-court) var(--courbe);
  }
  .nav-principale a:hover::after,
  .nav-principale a[aria-current="page"]::after{ transform:scaleX(1); }
  .nav-principale a[aria-current="page"]::after{ background:var(--bordeaux); }
  .nav-principale .nav-carte{
    margin-left:.5rem;
    padding:.6em 1em;
    border:var(--trait) solid var(--creme);
    color:var(--creme);
  }
  .nav-principale .nav-carte::after{ display:none; }
  .nav-principale .nav-carte:hover{ background:var(--creme); color:var(--navy); }
  .nav-principale .nav-carte[aria-current="page"]{ background:var(--creme); color:var(--navy); }
}

.bouton-menu{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:2.75rem;
  padding:0 .25rem;
  font-family:var(--f-mono);
  font-size:var(--t-2);
  letter-spacing:var(--esp-mono);
  text-transform:uppercase;
  color:var(--papier);
}
.bouton-menu .barres{ width:1.4rem; height:.8rem; position:relative; }
.bouton-menu .barres::before,.bouton-menu .barres::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform var(--duree-court) var(--courbe), top var(--duree-court) var(--courbe);
}
.bouton-menu .barres::before{ top:0; }
.bouton-menu .barres::after{ top:calc(100% - 2px); }
.bouton-menu[aria-expanded="true"] .barres::before{ top:calc(50% - 1px); transform:rotate(45deg); }
.bouton-menu[aria-expanded="true"] .barres::after{ top:calc(50% - 1px); transform:rotate(-45deg); }
@media (min-width:64em){ .bouton-menu{ display:none; } }

/* Menu mobile plein écran */

.menu{
  position:fixed;
  inset:var(--h-entete) 0 0 0;
  z-index:var(--z-menu);
  background:var(--navy);
  color:var(--papier);
  overflow:auto;
  padding:var(--s6) var(--marge) max(var(--s6), env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:var(--s6);
}
.menu[hidden]{ display:none; }
.menu-liste a{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.75rem, 8vw, 2.5rem);
  text-transform:uppercase;
  text-decoration:none;
  padding:.45em 0;
  border-bottom:var(--trait) solid var(--filet-inv);
  line-height:1;
}
.menu-liste a[aria-current="page"]{ color:var(--creme); }
.menu-liste a[aria-current="page"]::after{ content:" /"; color:var(--bordeaux); filter:brightness(1.6); }
.menu-secondaire{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); }
.menu-secondaire a{ display:inline-block; padding-block:.5em; font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:var(--esp-mono); text-transform:uppercase; text-decoration:none; color:var(--texte-inv-doux); }
.menu-pied{ margin-top:auto; color:var(--texte-inv-muet); font-family:var(--f-mono); font-size:var(--t-2); letter-spacing:var(--esp-mono); text-transform:uppercase; line-height:1.8; }
body.menu-ouvert{ overflow:hidden; }

/* Pied de page */

.pied{
  background:var(--nuit);
  color:var(--texte-inv-doux);
  padding-block:clamp(2.5rem, 6vw, 4.5rem) max(var(--s6), env(safe-area-inset-bottom));
  font-size:var(--t0);
}
.pied a{ color:var(--texte-inv); text-decoration-color:var(--filet-inv); }
.pied-haut{
  display:grid;
  gap:var(--s6);
  padding-bottom:var(--s6);
  border-bottom:var(--trait) solid var(--filet-inv);
}
@media (min-width:48em){ .pied-haut{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--gouttiere); } }
.pied-marque{ display:flex; gap:var(--s4); align-items:flex-start; }
.pied-marque img{ width:3.25rem; flex:none; }
.pied-marque .display{ font-size:var(--t2); color:var(--texte-inv); }
.pied-marque p{ margin-top:var(--s2); max-width:24rem; }
.pied h2{ font-family:var(--f-mono); font-size:var(--t-2); letter-spacing:var(--esp-mono); text-transform:uppercase; font-weight:500; color:var(--texte-inv-muet); margin-bottom:var(--s3); }
.pied li + li{ margin-top:var(--s1); }
.pied li a,.pied-bas a{ display:inline-block; padding-block:.45em; }
.pied-bas{
  padding-top:var(--s5);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--s3) var(--s5);
  font-family:var(--f-mono);
  font-size:var(--t-2);
  letter-spacing:var(--esp-mono);
  text-transform:uppercase;
  color:var(--texte-inv-muet);
  line-height:1.8;
}
.pied-bas a{ color:var(--texte-inv-doux); }

/* Case carte : cadre au format 2,5 : 3,5, plein ou vide */

.case{
  position:relative;
  aspect-ratio:2.5 / 3.5;
  border:var(--trait) solid var(--filet);
  background:transparent;
  overflow:hidden;
}
.case img{ width:100%; height:100%; object-fit:cover; }
.case--paysage{ aspect-ratio:3 / 2; }
.case--carre{ aspect-ratio:1; }
.case--portrait{ aspect-ratio:4 / 5; }
/* Photographie : un cadre au format du site, une légende mono. Une photo
   absente devient un cadre vide daté (voir js, images de repli). */
.photo{ min-width:0; }
.photo figcaption{ margin-top:var(--s3); color:var(--texte-doux); }
.photos{ display:grid; gap:var(--s5) var(--gouttiere); }
@media (min-width:36em){ .photos{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.case--vide::before,.case--vide::after{
  content:"";
  position:absolute;
  width:.6rem; height:.6rem;
  border-color:var(--filet-fort);
  border-style:solid;
  border-width:0;
}
.case--vide::before{ top:.45rem; left:.45rem; border-top-width:var(--trait); border-left-width:var(--trait); }
.case--vide::after{ bottom:.45rem; right:.45rem; border-bottom-width:var(--trait); border-right-width:var(--trait); }
.case-etiquette{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.4em;
  padding:var(--s3);
  font-family:var(--f-mono);
  font-size:var(--t-2);
  letter-spacing:var(--esp-mono);
  text-transform:uppercase;
  line-height:1.4;
  color:var(--texte-muet);
}
.case-etiquette strong{ font-family:var(--f-display); font-weight:400; font-size:clamp(1rem, 2.4vw, 1.5rem); letter-spacing:.02em; color:var(--texte-doux); }
.bande--navy .case-etiquette strong,.bande--nuit .case-etiquette strong{ color:var(--texte-inv-doux); }
.bande--navy .case,.bande--nuit .case{ border-color:var(--filet-inv); }
.bande--navy .case--vide::before,.bande--navy .case--vide::after,
.bande--nuit .case--vide::before,.bande--nuit .case--vide::after{ border-color:var(--filet-inv-fort); }
.bande--navy .case-etiquette,.bande--nuit .case-etiquette{ color:var(--texte-inv-muet); }

/* Fiche : paires clé/valeur, comme au dos d'une carte */

.fiche{ border-top:var(--trait) solid var(--filet); }
.fiche > div{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s1) var(--s4);
  padding:var(--s3) 0;
  border-bottom:var(--trait) solid var(--filet);
  align-items:baseline;
}
@media (min-width:36em){
  .fiche > div{ grid-template-columns:minmax(6rem, 8.5rem) 1fr; }
}
.fiche dt{
  font-family:var(--f-mono);
  font-size:var(--t-2);
  letter-spacing:var(--esp-mono);
  text-transform:uppercase;
  color:var(--texte-doux);
  font-weight:500;
}
.fiche dd{ margin:0; }
.fiche .fin{ display:block; font-size:var(--t0); color:var(--texte-doux); margin-top:.15em; }
.bande--navy .fiche,.bande--navy .fiche > div,.bande--nuit .fiche,.bande--nuit .fiche > div{ border-color:var(--filet-inv); }
.bande--navy .fiche dt,.bande--nuit .fiche dt,
.bande--navy .fiche .fin,.bande--nuit .fiche .fin{ color:var(--texte-inv-doux); }

/* Affichage borné dans le temps (voir js/asc.js) */
[data-apres]:not(.periode-affiche){ display:none !important; }
[data-avant].periode-cachee{ display:none !important; }

/* Carte d'adhérent interactive (scène 3D) */

.carte-membre{
  --rx:0deg; --ry:0deg; --px:50%; --py:42%; --o:0; --tx:0;
  --rayon-cr80:clamp(12px, 3.6vw, 17px);
  --force-lumiere:.5;
  perspective:1100px;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  position:relative;
  width:min(100%, 440px);
  margin-inline:auto;
}
.carte-membre-corps{
  position:relative;
  aspect-ratio:856 / 540;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  will-change:transform;
  cursor:pointer;
}
.carte-membre-ombre{
  position:absolute; left:7%; right:7%; bottom:-11%; height:9%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6), rgba(0,0,0,.25) 55%, transparent 75%);
  filter:blur(14px);
  transform:translateX(calc(var(--tx) * -1.1px));
  pointer-events:none;
}
.carte-membre-face{
  position:absolute; inset:0;
  border-radius:var(--rayon-cr80);
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:var(--nuit);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, var(--ombre-carte);
}
.carte-membre-face img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.carte-membre-face--verso{ transform:rotateY(180deg); }
.carte-membre-numero{
  position:absolute; left:91.3%; top:12.4%;
  transform:translate(-50%,-50%) rotate(-2deg);
  font-family:"Permanent Marker","Segoe Print",cursive;
  font-size:clamp(11px, 3.4vw, 16px);
  color:#1b1c22;
  opacity:.88;
  letter-spacing:-.02em;
  transform-style:flat;
}
.carte-membre-couche{ position:absolute; inset:0; pointer-events:none; border-radius:var(--rayon-cr80); }
.carte-membre-grain{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.55'/></svg>");
  background-size:120px;
  opacity:.035;
}
.carte-membre-vernis{
  background-image:url("/img/vernis.png");
  background-repeat:no-repeat;
  background-size:200% 200%;
  background-position:var(--px) var(--py);
  mix-blend-mode:screen;
  opacity:calc(var(--force-lumiere) * (.35 + var(--o) * .45));
}
.carte-membre-ombrage{
  background:radial-gradient(70% 58% at calc(200% - var(--px) * 2) calc(200% - var(--py) * 2), rgba(13,19,27,.3), rgba(13,19,27,.13) 40%, transparent 62%);
  mix-blend-mode:multiply;
  opacity:calc(.08 + var(--o) * .1);
}
.carte-membre-aide{
  margin-top:calc(var(--s5) + 4%);
  text-align:center;
  font-family:var(--f-mono);
  font-size:var(--t-2);
  letter-spacing:var(--esp-mono);
  text-transform:uppercase;
  color:var(--texte-inv-muet);
  transition:opacity .8s ease;
}
.carte-membre-aide.off{ opacity:0; }

/* Grille du panneau : une case par carte de la checklist.
   13 colonnes dès qu'il y a la place, 5 colonnes tapables sur téléphone. */

.panneau{
  display:grid;
  grid-template-columns:repeat(13, minmax(0,1fr));
  gap:clamp(3px, .55vw, 7px);
}
.panneau-case{
  position:relative;
  aspect-ratio:2.5 / 3.5;
  border:var(--trait) solid var(--filet-inv);
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--texte-inv-muet);
  padding:0;
  overflow:hidden;
  transition:background-color var(--duree-court) var(--courbe), border-color var(--duree-court) var(--courbe);
}
.panneau-case img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.panneau-case--identifiee{ border-style:dashed; border-color:var(--filet-inv-fort); color:var(--texte-inv-doux); }
.panneau-case--trouvee{ background:var(--creme); border-color:var(--creme); color:var(--navy); }
.panneau-case--image .panneau-case-numero{
  position:absolute; left:0; bottom:0;
  padding:.15em .4em;
  font-size:.6rem;
  color:var(--papier);
  background:rgba(13,19,27,.6);
}
button.panneau-case{ cursor:pointer; }
button.panneau-case:hover{ border-color:var(--creme); color:var(--papier); }
button.panneau-case--trouvee:hover{ background:var(--papier); color:var(--navy); }
@media (max-width:47.99em){
  .panneau:not(.panneau--apercu){ grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
  .panneau:not(.panneau--apercu) .panneau-case{ font-size:.8rem; }
}
/* Aperçu sur l'accueil : le même panneau, en motif compact, sans interaction.
   13 colonnes sur téléphone, 26 sur grand écran : les 130 cases tiennent en un regard. */
.panneau--apercu{ gap:clamp(2px, .4vw, 5px); }
.panneau--apercu .panneau-case{ font-size:.55rem; letter-spacing:0; }
@media (max-width:47.99em){ .panneau--apercu .panneau-case-numero{ display:none; } }
@media (min-width:48em){ .panneau--apercu{ grid-template-columns:repeat(26, minmax(0,1fr)); } }
.panneau-lien{ display:block; margin-top:var(--s6); text-decoration:none; color:inherit; }
.panneau-lien:hover .panneau-case:not(.panneau-case--trouvee){ border-color:var(--filet-inv-fort); }
.panneau-lien:focus-visible{ outline:2px solid var(--creme); outline-offset:6px; }

/* Boîte de dialogue (détail d'une case) */

.dialogue{
  border:var(--trait) solid var(--filet-inv-fort);
  background:var(--navy);
  color:var(--papier);
  padding:var(--s5);
  width:min(92vw, 26rem);
  max-height:calc(100svh - 2rem);
  box-sizing:border-box;
  overflow:auto;
  z-index:var(--z-dialogue);
}
.dialogue::backdrop{ background:rgba(13,19,27,.7); }
.dialogue .fiche{ margin-top:var(--s4); border-color:var(--filet-inv); }
.dialogue .fiche > div{ border-color:var(--filet-inv); }
.dialogue .fiche dt{ color:var(--texte-inv-doux); }
.dialogue .mono--doux{ color:var(--texte-inv-doux); }
.dialogue-visuel{ width:min(8rem, 34vw); margin-top:var(--s4); border:var(--trait) solid var(--filet-inv-fort); aspect-ratio:2.5 / 3.5; overflow:hidden; }
.dialogue-visuel img{ width:100%; height:100%; object-fit:cover; }
.dialogue-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin-top:var(--s5); }
.dialogue-actions .dialogue-fermer{ margin-top:0; }
.dialogue-fermer{ margin-top:var(--s5); }

/* Liste-programme (saison, rencontres) */

.programme{ border-top:var(--trait) solid var(--filet); }
.programme-ligne{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:var(--s3) var(--s5);
  padding:var(--s5) 0;
  border-bottom:var(--trait) solid var(--filet);
  align-items:start;
}
.programme-date{
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.95;
  font-size:var(--t3);
  color:var(--navy);
}
.programme-date small{ display:block; font-family:var(--f-mono); font-size:var(--t-2); letter-spacing:var(--esp-mono); text-transform:uppercase; color:var(--texte-doux); margin-top:.35em; font-weight:500; }
.programme-corps{ min-width:0; }
.programme-titre{ font-weight:700; font-size:var(--t2); line-height:1.15; }
.programme-info{ margin-top:var(--s2); color:var(--texte-doux); font-size:var(--t0); }
.programme-info .mono{ display:block; margin-bottom:.35em; color:var(--texte-doux); }
.programme-action{ margin-top:var(--s2); grid-column:2; }
.programme--compact .programme-info{ margin-top:var(--s1); }
.programme--compact .programme-info .mono{ margin-bottom:0; }
.programme-titre a{ display:inline-block; padding-block:.35em; margin-block:-.35em; text-decoration:none; color:inherit; }
.programme-titre a:hover{ text-decoration:underline; text-underline-offset:.15em; }
/* Accueil, petit écran : une ligne = date, événement, lieu. Tout se lit en deux secondes. */
@media (max-width:47.99em){
  .programme--compact .programme-ligne{ grid-template-columns:1fr; gap:var(--s2); padding-block:var(--s5); }
  .programme--compact .programme-date{ display:flex; align-items:baseline; gap:var(--s3); font-size:var(--t3); }
  .programme--compact .programme-date small{ margin-top:0; }
  .programme--compact .programme-action{ display:none; }
}
.programme-ligne--passee .programme-date{ color:var(--texte-muet); }
@media (min-width:48em){
  .programme-ligne{ grid-template-columns:8rem 1fr auto; gap:var(--s5) var(--s6); }
  .programme-action{ margin-top:0; align-self:center; }
  .programme-date{ font-size:var(--t4); }
}

/* Liste de liens réseaux */

.reseaux{ display:grid; gap:var(--s3); }
@media (min-width:30em){ .reseaux{ grid-template-columns:1fr 1fr; } }
.reseaux a{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3); min-width:0;
  padding:var(--s4);
  border:var(--trait) solid var(--filet);
  text-decoration:none;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--esp-caps);
  font-size:var(--t0);
  transition:background-color var(--duree-court) var(--courbe), color var(--duree-court) var(--courbe);
}
.reseaux a:hover{ background:var(--navy); color:var(--papier); }
.reseaux svg{ width:1.15rem; height:1.15rem; fill:currentColor; flex:none; }
.reseaux span{ display:flex; align-items:center; gap:var(--s3); }
.bande--navy .reseaux a,.bande--nuit .reseaux a{ border-color:var(--filet-inv); }
.bande--navy .reseaux a:hover,.bande--nuit .reseaux a:hover{ background:var(--creme); color:var(--navy); }

/* ---------- 5. PAGES ----------------------------------------------------- */

/* --- Accueil : hero --- */

.hero{
  background:var(--navy);
  color:var(--papier);
  padding-block:clamp(2rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(var(--s6), 6vw, var(--s8));
  position:relative;
  overflow:hidden;
}
/* Le titre occupe toute la largeur ; le blason se loge dans le creux
   à droite des deux premières lignes, plus courtes que la troisième. */
.hero-haut{ position:relative; container-type:inline-size; }
.hero-titre{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:.005em;
  font-size:clamp(2.6rem, 15vw, 11.5rem);
  font-size:min(15.7cqw, 11.5rem);
  color:var(--papier);
}
.hero-titre span{ display:block; }
.hero-titre span:nth-child(3){ color:var(--creme); }
.hero-devise{
  margin-top:clamp(var(--s5), 3.5vw, var(--s7));
  font-weight:700;
  font-size:clamp(var(--t2), 2.6vw, var(--t4));
  line-height:1.2;
  color:var(--papier);
}
.hero-blason{
  position:absolute;
  top:0;
  right:0;
  width:21cqw;
  max-width:22rem;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
/* Dès qu'il y a une marge, le blason grandit et déborde du cadre, comme sur une couverture */
@media (min-width:64em){
  .hero-blason{ top:-6%; right:-5cqw; width:25cqw; }
}
.hero-bas{
  display:none;
  padding-top:var(--s5);
  border-top:var(--trait) solid var(--filet-inv);
}
.hero-meta{ display:flex; flex-wrap:wrap; gap:.35em .9em; color:var(--texte-inv-doux); }
.hero-meta span{ white-space:nowrap; }
.hero-meta span:not(:last-child)::after{ content:"/"; margin-left:.9em; color:var(--texte-inv-muet); }
.mono-liste{ display:flex; flex-wrap:wrap; gap:.3em .8em; }
.mono-liste span{ white-space:nowrap; }
.mono-liste span:not(:last-child)::after{ content:"/"; margin-left:.8em; opacity:.55; }
.hero-bas p{ color:var(--texte-inv-doux); max-width:22rem; }

@media (min-width:48em){
  .hero-bas{ display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:end; gap:var(--s4) var(--s6); }
  .hero-meta{ flex-wrap:nowrap; }
  .hero-bas p{ justify-self:end; text-align:right; }
}
@media (min-width:64em){
  .hero{ min-height:calc(100svh - var(--h-entete)); }
}

/* --- Accueil : prochaine rencontre (affiche) --- */

.affiche{ background:var(--creme); color:var(--navy); }
.affiche-int{
  padding-block:clamp(2.5rem, 6vw, 5rem);
  display:grid;
  gap:var(--s5) var(--gouttiere);
}
.affiche-date{
  display:flex; align-items:baseline; gap:.3em;
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.85;
}
.affiche-jour{ font-size:clamp(5rem, 24vw, 11rem); letter-spacing:-.01em; }
.affiche-mois{ font-size:clamp(1.75rem, 8vw, 3.5rem); color:var(--bordeaux); }
.affiche-quoi{ min-width:0; }
.affiche-titre{
  font-weight:700;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.01em;
  font-size:clamp(2.25rem, 10.5vw, 5rem);
}
.affiche-edition{
  display:flex; align-items:center; gap:var(--s3);
  margin-top:var(--s4);
}
.affiche-edition::before{ content:""; flex:1; height:var(--trait); background:var(--filet-fort); max-width:8rem; }
.affiche-edition span{ font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.06em; font-size:var(--t0); }
.affiche-quand{ margin-top:var(--s4); }
.affiche-texte{ margin-top:var(--s3); max-width:30rem; color:var(--texte-doux); }
.affiche-entree{
  margin-top:var(--s4);
  font-weight:700; text-transform:uppercase; letter-spacing:var(--esp-caps);
  color:var(--bordeaux);
}
.affiche-action{ display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; }
.affiche-compteur{ color:var(--texte-doux); }

@media (min-width:48em){
  .affiche-int{ grid-template-columns:repeat(12, minmax(0,1fr)); align-items:end; }
  .affiche-date{ grid-column:1 / span 4; flex-direction:column; align-items:flex-start; gap:.1em; align-self:center; }
  .affiche-quoi{ grid-column:5 / span 8; }
  .affiche-titre{ font-size:clamp(2.25rem, 7vw, 5rem); }
  .affiche-action{ grid-column:5 / span 8; flex-direction:row; align-items:center; gap:var(--s4); }
}
@media (min-width:64em){
  .affiche-date{ grid-column:1 / span 3; }
  .affiche-quoi{ grid-column:4 / span 6; }
  .affiche-titre{ font-size:clamp(2.5rem, 5.5vw, 5rem); }
  .affiche-action{ grid-column:10 / span 3; flex-direction:column; align-items:flex-start; align-self:end; gap:var(--s3); }
  .affiche-action .btn--large{ min-width:0; width:100%; }
}

/* --- Accueil : manifeste --- */

.manifeste{ background:var(--papier); }
.manifeste-int{ display:grid; gap:var(--s6) var(--gouttiere); align-items:center; }
.manifeste-texte .declaration{ color:var(--navy); }
.manifeste-texte p{ margin-top:var(--s5); max-width:30rem; color:var(--texte-doux); }
.manifeste-texte .lien-suite{ margin-top:var(--s5); }
.manifeste-visuel{ position:relative; }
.manifeste-visuel .case{ background:var(--creme-fonce); }
@media (min-width:48em){
  .manifeste-int{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .manifeste-texte{ grid-column:1 / span 5; }
  .manifeste-visuel{ grid-column:6 / span 7; }
}

/* --- Accueil et page : challenge --- */

.challenge-int{ display:grid; gap:var(--s6) var(--gouttiere); }
.challenge-chiffres{ display:flex; align-items:baseline; gap:.35em; flex-wrap:wrap; }
.challenge-compte{
  font-family:var(--f-display);
  font-size:clamp(4rem, 13vw, 8.5rem);
  line-height:.9;
  letter-spacing:-.01em;
  color:var(--creme);
  font-variant-numeric:tabular-nums;
}
.challenge-sur{
  font-family:var(--f-display);
  font-size:clamp(1.5rem, 4vw, 2.5rem);
  color:var(--texte-inv-doux);
}
.challenge-chiffres-bloc .mono{ margin-top:var(--s3); }
.challenge-texte{ min-width:0; }
.challenge-texte .sous-titre{ color:var(--papier); }
.challenge-texte p + p{ margin-top:var(--s4); color:var(--texte-inv-doux); max-width:30rem; }
.challenge-texte .btn{ margin-top:var(--s5); }
.panneau-legende{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); margin-top:var(--s4); color:var(--texte-inv-doux); }
.panneau-legende span{ display:inline-flex; align-items:center; gap:.5em; }
.panneau-legende i{ display:inline-block; width:.8rem; height:1.1rem; border:var(--trait) solid var(--filet-inv); }
.panneau-legende i.identifiee{ border-style:dashed; border-color:var(--filet-inv-fort); }
.panneau-legende i.trouvee{ background:var(--creme); border-color:var(--creme); }
.panneau-bloc{ margin-top:clamp(var(--s6), 5vw, var(--s8)); }
.panneau-aide{ margin-top:var(--s4); color:var(--texte-inv-doux); }
@media (min-width:48em){
  .challenge-int{ grid-template-columns:repeat(12, minmax(0,1fr)); align-items:end; }
  .challenge-chiffres-bloc{ grid-column:1 / span 5; }
  .challenge-texte{ grid-column:7 / span 6; }
}

/* --- Accueil et page : carte du mois --- */

.cdm{ background:var(--papier); }
.cdm-int{ display:grid; gap:var(--s6) var(--gouttiere); align-items:start; }
.cdm-visuel .case{ max-width:min(22rem, 78vw); margin-inline:auto; background:var(--creme); }
.cdm-visuel .case img{ object-fit:contain; background:var(--creme); }
.cdm-visuel figcaption{ margin-top:var(--s3); text-align:center; color:var(--texte-doux); }
.cdm-corps{ min-width:0; }
.cdm-numero{ display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap; }
.cdm-numero .display{ font-size:clamp(var(--t3), 4vw, var(--t5)); }
.cdm-titre{
  margin-top:var(--s4);
  font-weight:700;
  font-size:clamp(var(--t4), 4.5vw, 3rem);
  line-height:1.05;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.cdm-fiche{ margin-top:var(--s5); }
.cdm-chapo{ margin-top:var(--s5); font-size:var(--t2); line-height:1.4; max-width:32rem; }
.cdm-corps .lien-suite, .cdm-corps .btn{ margin-top:var(--s5); }
@media (min-width:48em){
  .cdm-int{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .cdm-visuel{ grid-column:1 / span 4; }
  .cdm-corps{ grid-column:6 / span 7; }
}

/* Page carte du mois : article */
.article-tete{ padding-block:clamp(2.5rem, 6vw, 5rem) var(--s6); }
.article-tete .titre-page{ margin-top:var(--s4); font-size:clamp(2rem, 7vw, 4.25rem); }
.article-corps{ display:grid; gap:var(--s6) var(--gouttiere); align-items:start; padding-bottom:var(--section); }
.article-corps .cdm-visuel{ position:sticky; top:calc(var(--h-entete) + var(--s5)); }
@media (min-width:48em){
  .article-corps{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .article-corps .cdm-visuel{ grid-column:1 / span 4; }
  .article-corps .texte{ grid-column:6 / span 6; }
}
.article-corps .texte p:first-of-type{ font-size:var(--t2); line-height:1.4; }
.article-pied{ margin-top:var(--s7); padding-top:var(--s5); border-top:var(--trait) solid var(--filet); color:var(--texte-doux); font-size:var(--t0); }

/* --- Accueil : saison --- */

.saison-tete .display{ font-size:clamp(var(--t4), 5vw, var(--t6)); }
.saison-tete .display em{ font-style:normal; color:var(--bordeaux); }

/* --- Accueil : vie de l'amicale --- */

.vie-int{ display:grid; gap:var(--s6) var(--gouttiere); }
.vie-texte{ max-width:30rem; }
.vie-texte p{ margin-top:var(--s4); color:var(--texte-doux); }
/* Seconde place pour une photo : un portrait, à gauche du texte dès qu'il y a la place */
.vie-photo{ order:3; max-width:15rem; }
.vie-photo .case{ background:var(--creme-fonce); }
@media (min-width:48em){
  .vie-int{ grid-template-columns:repeat(12, minmax(0,1fr)); grid-template-rows:auto 1fr; align-items:start; }
  .vie-photo{ order:0; grid-column:1 / span 4; grid-row:1 / span 2; max-width:none; }
  .vie-texte{ grid-column:6 / span 7; grid-row:1; padding-top:var(--s3); }
  .vie-reseaux{ grid-column:6 / span 7; grid-row:2; grid-template-columns:1fr 1fr; align-self:start; }
}

/* --- Accueil et page : prendre sa carte --- */

.adhesion{ background:var(--navy); color:var(--papier); overflow:hidden; }
.adhesion-int{ display:grid; gap:var(--s7) var(--gouttiere); align-items:center; }
.adhesion-texte .titre-section{ color:var(--papier); }
.adhesion-prix{
  margin-top:var(--s5);
  display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap;
  font-family:var(--f-display);
  font-size:clamp(2.25rem, 8vw, 4rem);
  line-height:.9;
  color:var(--creme);
}
.adhesion-prix small{ font-size:.35em; color:var(--texte-inv-doux); letter-spacing:.06em; }
.adhesion-texte p{ margin-top:var(--s4); color:var(--texte-inv-doux); max-width:28rem; }
.adhesion-texte .fiche{ margin-top:var(--s5); }
.adhesion-actions{ margin-top:var(--s6); display:flex; flex-wrap:wrap; gap:var(--s3); }
.adhesion-serie{ margin-top:var(--s5); }
.adhesion-serie .display{ font-size:var(--t2); color:var(--creme); }
.adhesion-serie .mono{ color:var(--texte-inv-doux); margin-top:.2em; }
@media (min-width:48em){
  .adhesion-int{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .adhesion-texte{ grid-column:1 / span 6; }
  .adhesion-carte{ grid-column:7 / span 6; }
}
@media (min-width:64em){
  .adhesion-texte{ grid-column:1 / span 5; }
  .adhesion-carte{ grid-column:7 / span 6; }
}

/* --- Pages intérieures : bandeau de titre --- */

.bandeau{
  background:var(--navy);
  color:var(--papier);
  padding-block:clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 4rem);
}
.bandeau-int{ display:grid; gap:var(--s5) var(--gouttiere); align-items:end; }
.bandeau .titre-page{ color:var(--papier); }
.bandeau .titre-page em{ font-style:normal; color:var(--creme); }
.bandeau-chapo{ color:var(--texte-inv-doux); font-size:clamp(var(--t1), 1.8vw, var(--t2)); line-height:1.45; max-width:30rem; }
.bandeau-repere{ color:var(--texte-inv-doux); margin-bottom:var(--s4); }
@media (min-width:48em){
  .bandeau-int{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .bandeau-titre{ grid-column:1 / span 8; }
  .bandeau-chapo{ grid-column:9 / span 4; padding-bottom:.45rem; }
}

/* --- Page rencontre (30 septembre) --- */

.evenement-tete{ background:var(--navy); color:var(--papier); }
.evenement-tete .affiche-int{ padding-block:clamp(2.5rem, 7vw, 5.5rem); }
.evenement-tete .affiche-mois{ color:var(--creme); }
.evenement-tete .affiche-entree{ color:var(--creme); }
.evenement-tete .affiche-texte{ color:var(--texte-inv-doux); }
.evenement-tete .affiche-edition::before{ background:var(--filet-inv-fort); }
.evenement-tete .affiche-compteur{ color:var(--texte-inv-doux); }
.evenement-corps{ display:grid; gap:var(--s7) var(--gouttiere); align-items:start; }
.evenement-corps .fiche{ margin-top:var(--s3); }
.evenement-aside{ display:grid; gap:var(--s5); }
.evenement-aside .repere{ margin-bottom:var(--s3); }
@media (min-width:48em){
  .evenement-corps{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .evenement-principal{ grid-column:1 / span 7; }
  .evenement-aside{ grid-column:9 / span 4; }
}

/* --- Page challenge --- */

.regles{ counter-reset:regle; }
.regles li{
  counter-increment:regle;
  display:grid;
  grid-template-columns:3rem 1fr;
  gap:var(--s4);
  padding:var(--s4) 0;
  border-bottom:var(--trait) solid var(--filet-inv);
  align-items:baseline;
}
.regles li::before{
  content:counter(regle, decimal-leading-zero);
  font-family:var(--f-display);
  font-size:var(--t3);
  color:var(--creme);
}
.regles li strong{ display:block; font-weight:700; }
.regles li span{ display:block; color:var(--texte-inv-doux); margin-top:.2em; }
.contribuer{ display:grid; gap:var(--s5) var(--gouttiere); }
.contribuer .btn{ margin-top:var(--s4); }
@media (min-width:48em){
  .contribuer{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .contribuer > *:first-child{ grid-column:1 / span 5; }
  .contribuer > *:last-child{ grid-column:7 / span 6; }
}
/* --- Page l'amicale --- */

.chapitre{ display:grid; gap:var(--s5) var(--gouttiere); padding-block:clamp(2.5rem, 5vw, 4rem); border-top:var(--trait) solid var(--filet); }
.chapitre:first-of-type{ border-top:0; }
.chapitre-titre .titre-section{ font-size:clamp(var(--t3), 3.5vw, var(--t5)); }
.chapitre-titre .mono{ display:block; margin-bottom:var(--s3); color:var(--texte-doux); }
.valeurs{ display:grid; gap:var(--s2); margin-top:var(--s2); }
.valeurs li{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(var(--t4), 6vw, 3.25rem); line-height:1; }
.valeurs li:nth-child(2){ color:var(--bordeaux); }
.bureau{ display:grid; gap:var(--s4); margin-top:var(--s2); }
.bureau li{ padding:var(--s4) 0; border-top:var(--trait) solid var(--filet); }
.bureau li:last-child{ border-bottom:var(--trait) solid var(--filet); }
.bureau strong{ display:block; font-size:var(--t2); }
.bureau .mono{ color:var(--texte-doux); }
@media (min-width:48em){
  .chapitre{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .chapitre-titre{ grid-column:1 / span 4; }
  .chapitre-corps{ grid-column:6 / span 7; }
}

/* --- Page mentions légales, 404 --- */

.simple{ padding-block:clamp(2.5rem, 6vw, 5rem); }
.simple .texte h2{ margin-top:var(--s7); margin-bottom:var(--s4); }
.simple .texte h2:first-of-type{ margin-top:0; }
.simple .fiche{ margin-top:var(--s4); }
.cartouche{
  border:var(--trait) solid var(--filet-fort);
  padding:var(--s5);
  margin-top:var(--s5);
  background:var(--creme);
}
.cartouche p + p{ margin-top:var(--s4); }
.cartouche .en{ font-size:var(--t0); color:var(--texte-doux); border-top:var(--trait) solid var(--filet); padding-top:var(--s4); margin-top:var(--s4); }

/* --- Page réseaux --- */
.rs-int{ max-width:34rem; margin-inline:auto; text-align:center; padding-block:clamp(2.5rem, 6vw, 5rem); }
.rs-int img{ width:6rem; margin:0 auto var(--s5); }
.rs-int .reseaux{ margin-top:var(--s6); text-align:left; }
.rs-int .reseaux a{ flex-direction:column; align-items:flex-start; gap:var(--s2); }

/* ---------- 6. MOUVEMENT ------------------------------------------------- */

/* Une seule séquence d'ouverture : le nom, puis le blason, puis la devise */
.hero-titre span{
  opacity:0;
  transform:translateY(.25em);
  animation:apparition .7s var(--courbe) forwards;
}
.hero-titre span:nth-child(1){ animation-delay:.05s; }
.hero-titre span:nth-child(2){ animation-delay:.17s; }
.hero-titre span:nth-child(3){ animation-delay:.29s; }
.hero-blason,.hero-devise,.hero-bas{ opacity:0; animation:apparition .7s var(--courbe) forwards; }
.hero-blason{ animation-delay:.35s; }
.hero-devise{ animation-delay:.5s; }
.hero-bas{ animation-delay:.6s; }

@keyframes apparition{
  to{ opacity:1; transform:none; }
}

.menu:not([hidden]){ animation:menu-entree var(--duree-court) var(--courbe); }
@keyframes menu-entree{
  from{ opacity:0; transform:translateY(-.5rem); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important; }
  .hero-titre span,.hero-blason,.hero-devise,.hero-bas{ opacity:1; transform:none; }
  .carte-membre-vernis{ display:none; }
}

/* ---------- 7. IMPRESSION ------------------------------------------------ */

@media print{
  .entete,.menu,.pied,.bouton-menu,.carte-membre-aide{ display:none !important; }
  body{ background:#fff; color:#000; }
  .bande--navy,.bande--nuit,.hero,.bandeau,.adhesion,.evenement-tete{ background:#fff !important; color:#000 !important; }
  a{ text-decoration:underline; }
}