/* ============================================================
   1. VARIABLES
   ============================================================ */
:root{
  /* valeurs relevées directement dans le logo officiel et ton visuel */
  --navy:#092134;
  --bordeaux:#961421;
  --gold:#C59216;
  --creme:#F3F2ED;          /* le blanc cassé de tes visuels */

  --font-display:'Archivo Black', Impact, sans-serif;
  --font-body:'Barlow', system-ui, sans-serif;

  --max:1120px;
  --gutter:22px;
}

/* ============================================================
   2. BASES
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  font-size:17px;line-height:1.65;
  color:var(--navy);
  background:var(--creme);padding-bottom:var(--bande-h);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.03;letter-spacing:-.02em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

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

/* ============================================================
   3. BANDEAU TRICOLORE — repris de tes visuels
   ============================================================ */
.stripes{display:flex;flex-direction:column}
.stripes i{display:block;height:7px}
.stripes i:nth-child(1){background:var(--navy)}
.stripes i:nth-child(2){background:var(--bordeaux)}
.stripes i:nth-child(3){background:var(--gold)}

/* la bande du bas reste visible en permanence, par-dessus le tiroir */
.stripes-flip{position:fixed;left:0;right:0;bottom:0;z-index:95}
.stripes-flip i:nth-child(1){background:var(--gold)}
.stripes-flip i:nth-child(3){background:var(--navy)}

/* ============================================================
   4. FILET À L'ÉTOILE — ouvre chaque section
   ============================================================ */
.divider{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.divider svg{flex:none}
.divider i{display:block;height:3px;width:78px;background:var(--gold)}
.section-navy .divider i{background:var(--gold)}

/* ============================================================
   5. BOUTONS
   ============================================================ */
.btn{
  display:inline-block;font-family:var(--font-body);
  font-weight:600;font-size:16px;text-decoration:none;
  padding:15px 26px;border:2px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:#DCA71E}
.btn-red{background:var(--bordeaux);color:var(--creme)}
.btn-red:hover{background:#B01A28}



/* ============================================================
   7. HERO
   ============================================================ */
.hero{position:relative;background:var(--navy);color:var(--creme);padding:84px 0 92px;overflow:hidden}

/* étoile en filigrane — l'emblème de l'association, traits seuls */
.ghost,.ghost-soft{
  position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:500px;pointer-events:none;z-index:1;
}
.ghost{opacity:.11}
.hero .wrap{position:relative;z-index:2}

.hero h1{font-size:clamp(40px,9.2vw,84px);max-width:14ch;text-transform:uppercase}
.hero h1 .rouge{color:var(--bordeaux)}
.hero h1 .or{color:var(--gold)}

.tagline{margin-top:26px;font-size:clamp(19px,3.4vw,26px);font-weight:600;color:var(--gold)}
.hero p.intro{margin-top:20px;max-width:52ch;font-size:18px;color:rgba(243,242,237,.82)}
.hero-actions{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================
   8. SECTIONS
   ============================================================ */
.section{position:relative;padding:78px 0;overflow:hidden}
.section-creme{background:var(--creme)}
.section-navy{background:var(--navy);color:var(--creme)}

.section .wrap{position:relative;z-index:2}
.section h1,.section h2{font-size:clamp(28px,5.5vw,44px);text-transform:uppercase;max-width:20ch;font-weight:400;margin-bottom:34px}
.section-navy h2{color:var(--creme)}

/* sur fond marine, les cartes se cernent de crème */
.section-navy .action,
.section-navy .event,
.section-navy .support-item,
.section-navy .lead{margin-top:20px;max-width:60ch;font-size:19px}

/* sur fond clair, on inverse les traits clairs en traits sombres */
.ghost-soft{opacity:.09;filter:invert(1)}

/* ============================================================
   9. LE PROJET
   ============================================================ */
.claim{font-family:var(--font-display);font-size:clamp(26px,5vw,40px);line-height:1.12;text-transform:uppercase;margin-top:38px}
.claim span{display:block}
.claim span:nth-child(2){color:var(--bordeaux)}
.claim span:nth-child(3){color:var(--gold)}

/* ============================================================
   10. NOS ACTIONS
   ============================================================ */
.actions{margin-top:44px;display:grid;gap:18px}
@media(min-width:640px){
  .actions{grid-template-columns:repeat(4,1fr)}
  .action{grid-column:span 2}
  .action:nth-child(5){grid-column:2/span 2}
}
@media(min-width:960px){
  .actions{grid-template-columns:repeat(6,1fr)}
  .action{grid-column:span 2}
  .action:nth-child(4){grid-column:2/span 2}
  .action:nth-child(5){grid-column:auto/span 2}
}
.action{background:var(--creme);border:2px solid var(--navy);padding:0 26px 28px}
.action h3{font-size:21px;text-transform:uppercase;margin-bottom:12px}
.action p{font-size:16px;color:rgba(9,33,52,.8)}
/* sur fond marine, le texte des cartes repasse en marine */
.section-navy .action,
.section-navy .support-item,
.section-navy 
/* ============================================================
   12. ÉVÉNEMENTS
   ============================================================ */
.events{margin-top:44px;display:grid;gap:20px}
@media(min-width:820px){.events{grid-template-columns:1fr 1fr}}

.event{background:var(--creme);border:2px solid var(--navy);padding:0 26px 28px}
/* bandeau tricolore en tête de chaque carte */
.top{display:flex;margin:0 -26px 22px;height:7px}
.top i{flex:1}
.top i:nth-child(1){background:var(--navy)}
.top i:nth-child(2){background:var(--bordeaux)}
.top i:nth-child(3){background:var(--gold)}
.event .date{font-weight:600;font-size:15px;color:var(--bordeaux);display:block;margin-bottom:10px}
.event h3{font-size:22px;text-transform:uppercase;margin-bottom:8px}
.event .meta{font-size:15px;color:rgba(9,33,52,.7);margin-bottom:14px}
.event p{font-size:16px;margin-bottom:20px}
.empty-note{margin-top:30px;font-size:16px;color:rgba(9,33,52,.65)}

/* ============================================================
   13. MAEVASOA
   ============================================================ */

/* ============================================================
   14. NOUS SOUTENIR
   ============================================================ */
.support{margin-top:40px;display:grid;gap:18px}
@media(min-width:700px){.support{grid-template-columns:1fr 1fr}}
.support-item{background:var(--creme);border:2px solid var(--navy);padding:0 26px 28px}
.support-item h3{font-size:19px;text-transform:uppercase;margin-bottom:8px}
.support-item p{font-size:16px;color:rgba(9,33,52,.8)}

/* ============================================================
   FORMULAIRE D'INSCRIPTION
   ============================================================ */
.form{margin-top:40px;max-width:760px}
.form-grid{display:grid;gap:18px}
@media(min-width:680px){.form-grid{grid-template-columns:1fr 1fr}}
.field-large{grid-column:1/-1}

.field label{display:block;font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:16px;
  color:var(--navy);background:var(--creme);
  border:2px solid var(--navy);border-radius:0;padding:12px 13px;
}
.field textarea{min-height:120px;resize:vertical}
/* la liste déroulante s'ouvre en blanc système : on la force au crème */
.field select option{background:var(--creme);color:var(--navy)}
/* la case à cocher est dessinée par le navigateur : on la redessine */
.consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  background:var(--creme);border:2px solid var(--navy);
  display:grid;place-content:center;cursor:pointer;
}
.consent input[type=checkbox]::before{
  content:"";width:10px;height:10px;transform:scale(0);
  background:var(--bordeaux);transition:transform .1s ease;
}
.consent input[type=checkbox]:checked::before{transform:scale(1)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--gold);outline-offset:1px;border-color:var(--navy);
}
.field .hint{font-size:13px;color:rgba(9,33,52,.65);margin-top:6px}

.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(9,33,52,.85)}
.consent input{width:20px;height:20px;flex:none;margin-top:3px}
.form-send{grid-column:1/-1;margin-top:6px}

/* champ piège anti-robots : invisible pour un visiteur */
.trap{position:absolute;left:-9999px;opacity:0}

/* ============================================================
   15. CONTACT ET PIED DE PAGE
   ============================================================ */
.contact-grid{margin-top:36px;display:grid;gap:26px}
@media(min-width:700px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-grid h3{font-size:18px;text-transform:uppercase;margin-bottom:10px}
.contact-grid a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   AJOUTS POUR LE SITE MULTI-PAGES
   ============================================================ */


/* onglet de la page en cours */


/* ============================================================
   EN-TÊTE
   ============================================================ */
:root{--drawer-l:300px;--entete-h:103px;--bande-h:21px}  /* 21 px de bandeau + 80 px de barre + 2 px de filet */

.entete{position:sticky;top:0;z-index:60;background:var(--creme)}

.nav{background:var(--creme);border-bottom:2px solid var(--navy)}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  height:80px;display:flex;align-items:center;gap:14px;
}

/* le bouton à trois barres, tout à gauche */
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:44px;height:44px;flex:none;padding:0 4px;
  background:transparent;border:none;cursor:pointer;
}
.burger i{display:block;height:4px;flex:none;background:var(--navy)}

/* le logo juste à sa droite du bouton */
.logo{display:flex;align-items:center;flex:none}
.logo img{height:54px;width:auto}

/* ------------------------------------------------------------
   DÉFILEMENT DES PARTENAIRES DANS LA BARRE DU HAUT
   ------------------------------------------------------------ */
/* largeur calée sur exactement huit ronds, collée à droite */
.bandeau-partenaires{
  display:none;                 /* affiché à partir de 900 px, voir plus bas */
  --bp-rond:56px;--bp-gap:14px;
  flex:none;margin-left:auto;overflow:hidden;
  width:calc(8 * var(--bp-rond) + 7 * var(--bp-gap));
  /* un peu plus haut que les ronds : à hauteur égale, un arrondi de calcul
     suffisait à rogner le bas des cercles */
  height:calc(var(--bp-rond) + 12px);
}
.bp-piste{display:flex;align-items:center;height:100%;gap:var(--bp-gap);width:max-content}

/* chaque logo dans son rond crème cerné de marine */
.bp-item{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:var(--bp-rond);height:var(--bp-rond);border-radius:50%;overflow:hidden;
  background:var(--creme);border:2px solid var(--navy);
}
/* Le logo est dimensionné directement plutôt que par une marge intérieure :
   la marge se combinait au calcul des bordures et décalait l'image dans
   le rond. Ici c'est le centrage du conteneur qui place l'image, sans calcul. */
.bp-item img{width:68%;height:68%;object-fit:contain;padding:0}
/* trois tailles au choix selon la forme du logo */
.bp-item img.moyen{width:82%;height:82%}
.bp-item img.serre{width:90%;height:90%}
/* plein remplit tout le rond */
.bp-item img.plein{width:100%;height:100%;object-fit:cover}
.bp-item:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* le défilement : la piste contient deux fois la même série,
   on la décale de la moitié puis on recommence */
@keyframes bp-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.bp-piste.anime{animation:bp-defile var(--bp-duree,34s) linear infinite}
.bandeau-partenaires:hover .bp-piste.anime{animation-play-state:paused}

@media(min-width:900px){.bandeau-partenaires{display:flex;align-items:center}}
@media (prefers-reduced-motion:reduce){.bp-piste.anime{animation:none}}


/* ============================================================
   MENU LATÉRAL
   Le tiroir recouvre le coin haut-gauche et rejoue exactement
   la barre du haut : le bouton et le logo restent en place.
   ============================================================ */
/* le tiroir démarre sous le filet de l'en-tête, qui reste visible */
.drawer{
  position:fixed;top:calc(var(--entete-h) - 2px);left:0;bottom:var(--bande-h);z-index:80;
  width:var(--drawer-l);max-width:86vw;
  background:var(--navy);color:var(--creme);
  transform:translateX(-100%);transition:transform .22s ease;
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.ouvert{transform:translateX(0)}


.drawer nav{display:flex;flex-direction:column;padding:16px 0}
.drawer nav a{
  padding:14px 22px;font-size:17px;font-weight:600;
  text-decoration:none;color:var(--creme);border-left:4px solid transparent;
}
.drawer nav a:hover{background:var(--bordeaux)}
.drawer nav a.actif{border-left-color:var(--gold);color:var(--gold)}

.drawer-separateur{height:2px;background:var(--gold);margin:10px 22px}

.burger:focus-visible,.drawer nav a:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;
}

/* ============================================================
   MENU OUVERT : le contenu se décale, il reste lisible et cliquable
   ============================================================ */
body > header,body > section{transition:margin-left .22s ease}

.drawer-voile{position:fixed;top:calc(var(--entete-h) - 2px);left:0;right:0;bottom:var(--bande-h);z-index:70;display:none;background:transparent;border:none}

@media(min-width:900px){
  body.menu-ouvert > header,
  body.menu-ouvert > section{margin-left:var(--drawer-l)}
}

/* sous 900 px il n'y a pas la place de décaler : le tiroir se superpose
   et un clic à côté le referme */
@media(max-width:899px){
  .drawer-voile.ouvert{display:block}
}

@media (prefers-reduced-motion:reduce){
  .drawer,body > header,body > section{transition:none}
}

/* ============================================================
   PAGE STAFF — un profil à la fois, les voisins en petit de chaque côté
   ============================================================ */
:root{--rond:clamp(170px,40vw,250px);--cote:clamp(58px,15vw,96px)}

.staff{position:relative;margin-top:44px;text-align:center}

/* les deux petits ronds, calés sur le centre du grand */
.staff-cote{
  position:absolute;top:calc(var(--rond) / 2 - var(--cote) / 2);
  width:calc(var(--cote) + 40px);padding:0;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:transparent;border:none;cursor:pointer;
}
.staff-cote:hover .staff-cote-img{opacity:1;transform:scale(1.06)}
.staff-cote[data-dir="-1"]{left:-20px}
.staff-cote[data-dir="1"]{right:-20px}
.staff-cote:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.staff-cote-img{
  display:block;width:var(--cote);height:var(--cote);
  border-radius:50%;overflow:hidden;
  background:var(--creme);border:2px solid var(--navy);
  background-size:cover;background-position:center;
  opacity:.72;transition:opacity .18s ease,transform .18s ease;
}
.staff-cote-img.vide{background-size:74%;background-repeat:no-repeat;background-position:center}

.staff-cote-nom{
  font-size:clamp(11px,2.5vw,13px);font-weight:600;line-height:1.25;
  color:var(--navy);text-transform:uppercase;letter-spacing:.02em;
}

/* un seul profil affiché à la fois */
.coach{display:none}
.coach.actif{display:block}

.coach-photo{
  width:var(--rond);height:var(--rond);margin:0 auto 30px;
  border-radius:50%;background:var(--creme);
  border:3px solid var(--navy);overflow:hidden;
}
.coach-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* image affichée entière plutôt que recadrée : emblème, logo… */
.coach-photo.vide img{object-fit:contain;padding:16%}
/* logo très large : on réduit la marge pour qu'il reste lisible */
.coach-photo.large img{padding:6%}
/* logo qui remplit mal son carré : même traitement que dans le bandeau */
.coach-photo.serre img{padding:7%}

.coach h3{
  font-size:clamp(26px,5.4vw,42px);text-transform:uppercase;
  margin-bottom:10px;color:var(--navy);
}
.coach-role{
  font-size:clamp(17px,2.6vw,21px);font-weight:600;line-height:1.35;
  color:var(--bordeaux);margin:0 auto 22px;max-width:46ch;
}
.coach-texte{max-width:58ch;margin:0 auto;font-size:17px;color:var(--navy)}

/* lien vers le site d'un partenaire */
.coach-lien{margin-top:26px}


@media (prefers-reduced-motion:reduce){.staff-cote,.staff-cote-img{transition:none}}

/* ============================================================
   FICHE D'UN PARTENAIRE
   ============================================================ */
/* Sur les fiches, le filigrane est calé à distance fixe du haut plutôt
   qu'au milieu : les noms et les activités n'ayant pas la même longueur,
   les sections n'ont pas la même hauteur et il se retrouvait décalé
   d'une fiche à l'autre, surtout sur téléphone. */
#partenaire .ghost-soft{top:60px;transform:none}

/* Même chose sur les deux pages à défilement : d'un profil à l'autre les
   textes n'ont pas la même longueur, la section change donc de hauteur
   et un filigrane centré sauterait à chaque changement. */
#partenaires .ghost-soft,
#staff .ghost-soft{top:60px;transform:none}

.fiche{margin-top:40px;text-align:center}
.fiche .coach-photo{margin:0 auto 30px}
/* les blocs de texte sont bornés en largeur : sans marges automatiques
   ils resteraient collés à gauche malgré le centrage */
.fiche h1{max-width:22ch;margin:0 auto 12px}
.fiche .coach-role{max-width:46ch;margin:0 auto 32px}
.fiche-texte{max-width:62ch;margin:0 auto 18px;font-size:17px;color:var(--navy)}
.fiche-retour{margin-top:40px;font-size:16px}
.fiche-retour a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}