/* ==========================================================================
   RIDEART — feuille de style principale
   Association sportive de glisse urbaine — bassin de Chambéry (73)

   PRINCIPE : chaque section porte son propre thème via des variables locales.
   .section            → fond blanc
   .section--gris      → fond gris très clair
   .section--sombre    → fond sombre
   Tous les composants (cartes, textes, bordures) s'adaptent automatiquement.
   ========================================================================== */

:root{
  /* Palette de marque */
  --orange:#FF6B2C;
  --orange-fonce:#D9480F;
  --jaune:#FFC94D;
  --encre:#14141A;
  --encre-2:#1B1B22;

  /* Thème clair — valeurs par défaut */
  --fond:#FFFFFF;
  --texte:#14141A;
  --texte-doux:#54545F;
  --carte:#FFFFFF;
  --carte-2:#F7F6F4;
  --bordure:rgba(20,20,26,.13);
  --accent-texte:#C2440F;   /* orange assombri : lisible sur fond clair */

  --max:1180px;
  --gutter:clamp(20px, 5vw, 48px);
  --radius:16px;
  --transition:180ms ease;

  --font-titre:'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-texte:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--font-texte);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
code{background:var(--carte-2);border:1px solid var(--bordure);border-radius:5px;padding:1px 6px;font-size:.88em}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

/* Rythme vertical : un paragraphe qui suit un autre garde son air,
   un titre qui suit du texte reprend de la respiration */
p + h3{margin-top:34px}
.lead + p{margin-top:18px}

/* --- Typographie ---------------------------------------------------------- */
h1,h2,h3{font-family:var(--font-titre);font-weight:400;line-height:1.03;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.6rem, 7vw, 5rem);text-transform:uppercase}
h2{font-size:clamp(1.9rem, 4.4vw, 3rem);text-transform:uppercase;margin-bottom:20px}
h3{font-size:clamp(1.2rem, 2.1vw, 1.5rem);text-transform:uppercase;margin-bottom:12px}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* Le héros gère lui-même l'espace sous son titre principal */
.heros h1{margin-bottom:0}
.lead{font-size:clamp(1.03rem,1.8vw,1.22rem);color:var(--texte-doux);max-width:64ch}
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-texte);margin-bottom:14px;
}
.txt-orange{color:var(--accent-texte)}

/* --- Boutons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:15px 30px;border-radius:100px;border:2px solid transparent;
  font-weight:700;font-size:.98rem;text-decoration:none;cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.btn:hover{transform:translateY(-2px)}
.btn--plein{background:var(--orange);color:#14141A;box-shadow:0 6px 20px rgba(255,107,44,.28)}
.btn--plein:hover{background:var(--orange-fonce);color:#fff}
.btn--ligne{border-color:currentColor;color:var(--texte)}
.btn--ligne:hover{background:var(--texte);color:var(--fond)}
.btn-groupe{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* --- En-tête (clair) ------------------------------------------------------ */
.entete{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(20,20,26,.1);
}
.entete__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo img{height:30px;width:auto;display:block}
@media (max-width:420px){.logo img{height:25px}}
.pied .logo img{height:35px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  padding:9px 14px;border-radius:9px;text-decoration:none;font-size:.94rem;font-weight:600;
  color:#3E3E49;transition:color var(--transition),background var(--transition);
}
.nav a:hover{color:var(--encre);background:rgba(20,20,26,.06)}
.nav a[aria-current="page"]{color:var(--accent-texte)}
.nav .btn{padding:11px 22px;margin-left:8px;font-size:.9rem;color:#14141A}
.burger{
  display:none;background:none;border:0;color:var(--encre);padding:10px;cursor:pointer;
  font-size:1.5rem;line-height:1;border-radius:8px;
}
.burger:hover{background:rgba(20,20,26,.07)}

@media (max-width:960px){
  .burger{display:block}
  .nav{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;padding:16px var(--gutter) 28px;
    border-bottom:1px solid rgba(20,20,26,.12);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    transform:translateY(-135%);transition:transform 240ms ease;
  }
  .nav[data-ouvert="true"]{transform:translateY(0)}
  .nav a{padding:14px 16px;font-size:1.05rem}
  .nav .btn{margin:10px 0 0;justify-content:center}
}

/* --- Héros (clair, lumineux) ---------------------------------------------- */
.heros{
  position:relative;overflow:hidden;
  padding:clamp(56px,9vw,104px) 0 clamp(50px,8vw,92px);
  background:
    radial-gradient(820px 420px at 85% 8%, rgba(255,107,44,.16), transparent 62%),
    radial-gradient(620px 380px at 5% 95%, rgba(255,201,77,.16), transparent 60%),
    #FFFFFF;
  border-bottom:1px solid var(--bordure);
}
.heros__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
@media (max-width:900px){.heros__grid{grid-template-columns:1fr}}

/* Variante « image calée sur le texte » :
   la hauteur de la photo est dictée par la colonne de texte — son bord haut
   s'aligne sur la première ligne, son bord bas sur le bas des boutons.
   L'image est en position absolue : elle n'influence donc pas la hauteur
   de la rangée, elle s'y adapte. */
.heros__grid--plein{align-items:stretch}
.heros__media{
  position:relative;overflow:hidden;border-radius:0;
  min-height:0;align-self:stretch;
  /* le bord gauche se fond dans le fond de la section */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 6%, #000 16%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 6%, #000 16%);
}
.heros__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  /* recadrage : garde le rider et le haut de la banderole */
  object-position:50% 40%;
}
@media (max-width:900px){
  /* en une seule colonne, la rangée n'a plus de texte pour donner la hauteur */
  .heros__media{height:340px}
  .heros__media{
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 14%);
            mask-image:linear-gradient(to right, transparent 0%, #000 14%);
  }
}
.heros h1 span{display:block;color:var(--accent-texte)}
.heros .lead{margin-top:20px}

/* --- Sections & thèmes ---------------------------------------------------- */
.section{
  padding:clamp(56px,7.5vw,96px) 0;
  background:var(--fond);color:var(--texte);
}
.section--gris{
  --fond:#F6F5F3;
  --carte:#FFFFFF;
  --carte-2:#EDEBE7;
}
/* Anthracite : plus clair que le fond sombre, pour détacher un bandeau
   au milieu de sections claires sans le confondre avec les blocs sombres. */
.section--anthracite{
  --fond:#2A2A31;
  --texte:#FFFFFF;
  --texte-doux:#C2C2CC;
  --carte:#33333B;
  --carte-2:#3A3A43;
  --bordure:rgba(255,255,255,.14);
  --accent-texte:#FF8A4C;
}
.section--sombre{
  --fond:#14141A;
  --texte:#FFFFFF;
  --texte-doux:#B4B4C0;
  --carte:#1E1E26;
  --carte-2:#262630;
  --bordure:rgba(255,255,255,.14);
  --accent-texte:#FF8A4C;
}
.section__tete{max-width:64ch;margin-bottom:clamp(32px,4.5vw,50px)}
.section__tete--centre{text-align:center;margin-inline:auto}

/* --- Blocs média (emplacements photo) ------------------------------------- */
.media{
  position:relative;border-radius:0;overflow:hidden;
  background:var(--carte-2);border:1px solid var(--bordure);
}
.media img{width:100%;height:100%;object-fit:cover}
.media--16-9{aspect-ratio:16/9}
.media--4-3{aspect-ratio:4/3}
.media--1-1{aspect-ratio:1/1}
.media--vide{
  display:grid;place-items:center;text-align:center;padding:24px;
  color:var(--texte-doux);font-size:.84rem;font-weight:600;letter-spacing:.03em;
  border-style:dashed;
}

/* --- Grilles -------------------------------------------------------------- */
.grille{display:grid;gap:22px}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--4{grid-template-columns:repeat(4,1fr)}
.grille--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.grille--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.grille--3,.grille--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grille--2,.grille--3,.grille--4{grid-template-columns:1fr}}
@media (max-width:620px){.grille--5{grid-template-columns:repeat(2,1fr)}}

/* --- Cartes --------------------------------------------------------------- */
.carte{
  background:var(--carte);border:1px solid var(--bordure);border-radius:var(--radius);
  padding:28px;color:var(--texte);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.carte:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,26,.09)}
.section--sombre .carte:hover{box-shadow:0 12px 30px rgba(0,0,0,.4)}
.carte h3{margin-bottom:12px}
.carte p{color:var(--texte-doux);margin-bottom:0}
.carte__icone{
  width:48px;height:48px;border-radius:12px;background:rgba(255,107,44,.14);
  color:var(--accent-texte);display:grid;place-items:center;margin-bottom:18px;
  font-size:1.35rem;font-family:var(--font-titre);
}

/* --- Chiffres clés -------------------------------------------------------- */
.chiffre{text-align:center}
.chiffre__valeur{font-family:var(--font-titre);font-size:clamp(2.4rem,4.8vw,3.6rem);color:var(--accent-texte);line-height:1}
.chiffre__label{font-size:.85rem;color:var(--texte-doux);letter-spacing:.05em;text-transform:uppercase;margin-top:10px;text-wrap:balance}

/* --- Événements ----------------------------------------------------------- */
.event{
  display:grid;grid-template-columns:104px 1fr auto;gap:26px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--bordure);
}
.event:first-of-type{border-top:1px solid var(--bordure)}
.event__date{
  text-align:center;background:var(--carte-2);border-radius:12px;padding:12px 8px;
  border:1px solid var(--bordure);
}
.event__jour{font-family:var(--font-titre);font-size:1.9rem;line-height:1;color:var(--accent-texte)}
.event__mois{font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--texte-doux)}
.event h3{margin-bottom:6px}
.event__lieu{color:var(--texte-doux);font-size:.93rem;margin:0}
@media (max-width:700px){
  .event{grid-template-columns:80px 1fr;gap:16px}
  .event .btn{grid-column:1/-1;justify-content:center}
}

/* --- Galerie -------------------------------------------------------------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.galerie .media{transition:transform var(--transition)}
.galerie .media:hover{transform:scale(1.02)}

/* --- Tarifs --------------------------------------------------------------- */
.tarif{
  background:var(--carte);border:1px solid var(--bordure);border-radius:var(--radius);
  padding:32px;display:flex;flex-direction:column;color:var(--texte);
}
.tarif--phare{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,107,44,.22)}
.tarif h3{margin-bottom:6px}
.tarif__prix{font-family:var(--font-titre);font-size:2.8rem;color:var(--accent-texte);line-height:1;margin:14px 0 4px}
.tarif__prix small{font-family:var(--font-texte);font-size:.92rem;color:var(--texte-doux);font-weight:600}
.tarif ul{list-style:none;padding:0;margin:20px 0 26px;flex:1}
.tarif li{padding:9px 0 9px 26px;position:relative;color:var(--texte-doux);font-size:.95rem;border-bottom:1px solid var(--bordure)}
.tarif li::before{content:"→";position:absolute;left:0;color:var(--accent-texte);font-weight:700}

/* --- FAQ ------------------------------------------------------------------ */
.faq details{border-bottom:1px solid var(--bordure);padding:4px 0}
.faq summary{
  cursor:pointer;padding:18px 0;font-weight:700;font-size:1.04rem;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center;color:var(--texte);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-texte);font-size:1.6rem;font-family:var(--font-titre);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--texte-doux);padding-bottom:18px;margin:0;max-width:75ch}

/* --- Bandeau d'appel ------------------------------------------------------ */
.appel{
  background:linear-gradient(118deg,var(--orange),#F0873C);
  color:#14141A;border-radius:var(--radius);padding:clamp(34px,5.5vw,60px);text-align:center;
}
.appel h2{color:#14141A}
.appel p{color:rgba(20,20,26,.8);max-width:56ch;margin-inline:auto}
.appel .btn--plein{background:#14141A;color:#fff;box-shadow:none}
.appel .btn--plein:hover{background:#000}
.appel .btn--ligne{border-color:#14141A;color:#14141A}
.appel .btn--ligne:hover{background:#14141A;color:#fff}
.appel .btn-groupe{justify-content:center}

/* --- Partenaires ---------------------------------------------------------- */
.partenaires{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.partenaire{
  background:var(--carte);border:1px solid var(--bordure);border-radius:12px;
  padding:20px 32px;font-weight:700;color:var(--texte-doux);letter-spacing:.04em;
}

/* --- Formulaire ----------------------------------------------------------- */
.champ{display:block;margin-bottom:18px}
.champ span{display:block;margin-bottom:8px;font-weight:600}
.champ input,.champ textarea{
  width:100%;padding:14px;border-radius:10px;border:1px solid var(--bordure);
  background:var(--fond);color:var(--texte);font:inherit;
}
.champ input:focus,.champ textarea:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(255,107,44,.2)}

/* --- Pied de page (sombre, ancre visuelle) -------------------------------- */
.pied{
  background:#14141A;color:#fff;padding:60px 0 30px;
  --texte-doux:#B4B4C0;--bordure:rgba(255,255,255,.13);
}
.pied .logo{color:#fff}
.pied__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
@media (max-width:800px){.pied__grid{grid-template-columns:1fr}}
.pied h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#9C9CAA;margin:0 0 16px}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:10px}
.pied a{color:#D5D5DE;text-decoration:none;font-size:.95rem}
.pied a:hover{color:var(--orange)}
.pied p{color:#A9A9B6}
.reseaux{display:flex;gap:12px;margin-top:20px}
.reseaux a{
  width:42px;height:42px;border-radius:11px;background:#1E1E26;color:#fff;
  border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;
  transition:background var(--transition),border-color var(--transition);
}
.reseaux a:hover{background:var(--orange);border-color:var(--orange);color:#14141A}
.reseaux svg{width:20px;height:20px;fill:currentColor}
.pied__bas{
  margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  color:#9C9CAA;font-size:.86rem;
}

/* --- Utilitaires ---------------------------------------------------------- */
.a-completer{
  display:inline-block;background:rgba(255,201,77,.22);border:1px dashed #C2440F;
  color:#8A3209;border-radius:6px;padding:1px 9px;font-size:.8rem;font-weight:700;letter-spacing:.03em;
}
.section--sombre .a-completer{background:rgba(255,201,77,.16);border-color:#FFC94D;color:#FFC94D}
.saut-contenu{
  position:absolute;left:-9999px;top:0;background:var(--orange);color:#14141A;
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;z-index:100;
}
.saut-contenu:focus{left:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

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

/* ==========================================================================
   VISIONNEUSE (lightbox) — galerie plein écran
   ========================================================================== */
.galerie .media{cursor:zoom-in}
.galerie button.media{padding:0;border:1px solid var(--bordure);background:var(--carte-2);display:block;width:100%}

.visionneuse{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(10,10,12,.96);
  align-items:center;justify-content:center;
}
.visionneuse[data-ouverte="true"]{display:flex}
.visionneuse__figure{
  margin:0;max-width:min(1400px,94vw);max-height:92vh;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.visionneuse__img{
  max-width:100%;max-height:78vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.6);background:#000;
}
.visionneuse__compteur{color:#8F8F9C;font-size:.85rem;letter-spacing:.08em}
.visionneuse__btn{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;width:54px;height:54px;border-radius:50%;font-size:1.7rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:background var(--transition),transform var(--transition);
}
.visionneuse__btn:hover{background:var(--orange);border-color:var(--orange);color:#14141A;transform:scale(1.06)}
.visionneuse__prec{left:max(14px,3vw)}
.visionneuse__suiv{right:max(14px,3vw)}
.visionneuse__fermer{top:18px;right:max(14px,3vw);width:48px;height:48px;font-size:1.4rem}
@media (max-width:640px){
  .visionneuse__btn{width:44px;height:44px;font-size:1.4rem}
  .visionneuse__prec{left:8px}.visionneuse__suiv{right:8px}
  .visionneuse__img{max-height:66vh}
}

/* ==========================================================================
   ENCADRANTS — fiche + diaporama
   ========================================================================== */
.encadrant{
  background:var(--carte);border:1px solid var(--bordure);border-radius:var(--radius);
  overflow:hidden;display:grid;grid-template-columns:300px 1fr;
}
@media (max-width:860px){.encadrant{grid-template-columns:1fr}}
.encadrant__profil{
  padding:28px;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--carte-2);border-right:1px solid var(--bordure);
}
@media (max-width:860px){.encadrant__profil{border-right:0;border-bottom:1px solid var(--bordure)}}
.encadrant__portrait{
  width:140px;height:140px;border-radius:50%;overflow:hidden;flex:none;margin-bottom:18px;
  border:3px solid var(--orange);background:var(--fond);
  display:grid;place-items:center;
}
.encadrant__portrait img{width:100%;height:100%;object-fit:cover;display:block}
.encadrant__portrait span{color:var(--texte-doux);font-size:.76rem;font-weight:600;padding:10px;line-height:1.3}
.encadrant__role{
  display:inline-block;margin-top:2px;padding:4px 14px;border-radius:100px;
  background:rgba(255,107,44,.15);color:var(--accent-texte);
  font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.encadrant__profil h3{margin-bottom:8px}
.encadrant__bio{color:var(--texte-doux);font-size:.93rem;margin:16px 0 0}
.encadrant__corps{padding:28px;display:flex;flex-direction:column}
.encadrant__corps > p{color:var(--texte-doux)}

.diapo{position:relative;border-radius:0;overflow:hidden;background:#0E0E10;margin-top:auto}
.diapo__piste{display:flex;transition:transform 420ms cubic-bezier(.4,0,.2,1)}
.diapo__vue{flex:0 0 100%;aspect-ratio:4/3;background:#0E0E10}
.diapo__vue img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.diapo__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(14,14,16,.6);border:1px solid rgba(255,255,255,.28);color:#fff;
  width:40px;height:40px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background var(--transition);
}
.diapo__nav:hover{background:var(--orange);color:#14141A;border-color:var(--orange)}
.diapo__nav--prec{left:10px}
.diapo__nav--suiv{right:10px}
.diapo__points{
  position:absolute;bottom:12px;left:0;right:0;display:flex;gap:8px;justify-content:center;
}
.diapo__point{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background var(--transition),transform var(--transition);
}
.diapo__point[aria-current="true"]{background:var(--orange);transform:scale(1.3)}

/* ==========================================================================
   VIDÉOS YOUTUBE — lecture différée (aucune requête externe avant le clic)
   ========================================================================== */
.video{
  position:relative;border-radius:0;overflow:hidden;
  background:#0E0E10;aspect-ratio:16/9;border:1px solid var(--bordure);
}
.video img{width:100%;height:100%;object-fit:cover;transition:transform 400ms ease,filter 300ms ease}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__lecture{
  position:absolute;inset:0;width:100%;height:100%;
  background:linear-gradient(180deg,rgba(14,14,16,.05),rgba(14,14,16,.62));
  border:0;cursor:pointer;padding:0;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  gap:8px;text-align:left;
}
.video__lecture:hover img,.video__lecture:focus-visible img{transform:scale(1.04);filter:brightness(1.06)}
.video__icone{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--orange);color:#14141A;
  display:grid;place-items:center;font-size:1.7rem;padding-left:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform 220ms ease,background 220ms ease;
}
.video__lecture:hover .video__icone{transform:translate(-50%,-50%) scale(1.1);background:var(--jaune)}
.video__texte{position:relative;padding:20px;color:#fff}
.video__titre{font-family:var(--font-titre);font-size:1.15rem;text-transform:uppercase;line-height:1.1;display:block}
.video__meta{font-size:.83rem;color:#D4D4DC;display:block;margin-top:5px}
.video-legende{color:var(--texte-doux);font-size:.9rem;margin:12px 0 0}
.video-mention{
  color:var(--texte-doux);font-size:.85rem;margin-top:22px;
  padding-left:14px;border-left:3px solid var(--bordure);
}

/* ==========================================================================
   ASSOCIATION PARTENAIRE — bloc de présentation
   ========================================================================== */
.asso-part{
  background:var(--carte);border:1px solid var(--bordure);border-radius:var(--radius);
  overflow:hidden;display:grid;grid-template-columns:280px 1fr;
}
@media (max-width:860px){.asso-part{grid-template-columns:1fr}}
.asso-part__identite{
  padding:32px;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--carte-2);border-right:1px solid var(--bordure);
}
@media (max-width:860px){.asso-part__identite{border-right:0;border-bottom:1px solid var(--bordure)}}
.asso-part__logo{
  width:110px;height:110px;border-radius:20px;background:var(--encre);color:#fff;
  display:grid;place-items:center;margin-bottom:18px;flex:none;overflow:hidden;
  font-family:var(--font-titre);font-size:1.6rem;letter-spacing:.04em;line-height:1;
}
.asso-part__logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.asso-part__nom{font-family:var(--font-titre);font-size:1.35rem;text-transform:uppercase;line-height:1.1}
.asso-part__bandeau{
  display:inline-block;margin-top:10px;padding:4px 14px;border-radius:100px;
  background:rgba(255,107,44,.15);color:var(--accent-texte);
  font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.asso-part__corps{padding:32px}
.asso-part__corps p{color:var(--texte-doux)}
.asso-part__contacts{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:22px;
  border-top:1px solid var(--bordure);
}
.contact-puce{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:10px 18px;border-radius:100px;border:1px solid var(--bordure);
  background:var(--fond);color:var(--texte);font-size:.9rem;font-weight:600;
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.contact-puce:hover{border-color:var(--orange);background:var(--orange);color:#14141A}
.encart{
  border-left:4px solid var(--orange);background:var(--carte-2);
  border-radius:0 12px 12px 0;padding:22px 26px;margin-top:26px;
}
.encart p{margin:0;color:var(--texte-doux)}
.encart strong{color:var(--texte)}

/* ==========================================================================
   TAMPON — l'emblème RIDEART posé en surimpression sur un bloc
   ========================================================================== */
.appel{position:relative}
/* Tampon posé en bas à gauche du bloc. Il chevauche le bord et déborde vers
   le bas ; sur les grandes largeurs il empiète sur la marge gauche du bloc,
   restée vide puisque titre, texte et boutons sont centrés. Sous 860 px, il
   passe entièrement sous le bloc pour ne jamais croiser les boutons. */
.tampon{
  position:absolute;bottom:-108px;left:22px;
  width:240px;height:auto;
  transform:rotate(-11deg);
  pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(20,20,26,.3));
  transition:transform 500ms cubic-bezier(.34,1.4,.64,1);
}
.appel:hover .tampon{transform:rotate(-4deg) scale(1.04)}
@media (max-width:1100px){
  .tampon{width:200px;bottom:-96px;left:18px}
}
@media (max-width:860px){
  .tampon{width:150px;bottom:-150px;left:14px}
}
@media (max-width:560px){
  .tampon{width:110px;bottom:-112px;left:8px;opacity:.92}
}

/* ==========================================================================
   BANNIÈRE — section illustrée par une image pleine largeur
   ========================================================================== */
.banniere{position:relative;overflow:hidden;isolation:isolate}
.banniere__fond{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;z-index:-2;
}
.banniere::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(14,14,16,.95) 0%,
    rgba(14,14,16,.88) 38%,
    rgba(14,14,16,.62) 70%,
    rgba(14,14,16,.42) 100%);
}
.banniere .wrap{position:relative}
.banniere__legende{
  display:inline-block;margin-top:26px;padding:7px 16px;border-radius:100px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  color:#D4D4DC;font-size:.82rem;
}
.banniere__legende a{
  color:#fff;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45);
  transition:color var(--transition),text-decoration-color var(--transition);
}
.banniere__legende a:hover{color:var(--orange);text-decoration-color:var(--orange)}
@media (max-width:860px){
  .banniere::after{
    background:linear-gradient(180deg,
      rgba(14,14,16,.9) 0%, rgba(14,14,16,.86) 55%, rgba(14,14,16,.72) 100%);
  }
}

/* ==========================================================================
   DUO — bloc deux colonnes texte + photo
   La colonne de texte donne seule la hauteur ; la photo s'y cale, du haut
   de la première ligne au bas du dernier élément (bouton compris).
   ========================================================================== */
.duo{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,5vw,60px);align-items:stretch;
}
.duo__texte{align-self:center}
.duo__media{
  position:relative;overflow:hidden;border-radius:0;
  min-height:0;align-self:stretch;
  background:var(--carte-2);border:1px solid var(--bordure);
}
.duo__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo__media{height:clamp(240px,52vw,340px);order:-1}
}

/* ==========================================================================
   BANDE — aperçu photo cliquable menant à la galerie
   ========================================================================== */
.bande{
  display:grid;grid-template-columns:repeat(8,1fr);gap:8px;
}
.bande__vue{
  display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  border:1px solid var(--bordure);background:var(--carte-2);
}
.bande__vue img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 400ms ease,filter 300ms ease;
}
.bande__vue:hover img,.bande__vue:focus-visible img{transform:scale(1.07);filter:brightness(1.05)}
@media (max-width:1000px){.bande{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.bande{grid-template-columns:repeat(3,1fr);gap:6px}
  .bande__vue:nth-child(n+7){display:none}}

/* ==========================================================================
   ARTICLES — page de liste et page d'article
   ========================================================================== */

/* --- Liste des articles --------------------------------------------------- */
.articles{display:grid;gap:22px}
.article-carte{
  display:grid;grid-template-columns:300px 1fr;
  background:var(--carte);border:1px solid var(--bordure);border-radius:var(--radius);
  overflow:hidden;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.article-carte:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,26,.09)}
@media (max-width:760px){.article-carte{grid-template-columns:1fr}}
.article-carte__media{position:relative;overflow:hidden;background:var(--carte-2);min-height:200px}
.article-carte__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.article-carte__media{height:200px;min-height:0}}
.article-carte__corps{padding:28px;display:flex;flex-direction:column}
.article-carte h3{margin-bottom:10px}
.article-carte h3 a{text-decoration:none}
.article-carte h3 a:hover{color:var(--accent-texte)}
.article-carte p{color:var(--texte-doux);margin-bottom:18px}
.article-meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;
  font-size:.82rem;color:var(--texte-doux);
}
.article-meta__cat{
  padding:4px 13px;border-radius:100px;background:rgba(255,107,44,.15);
  color:var(--accent-texte);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.article-carte__lien{
  margin-top:auto;font-weight:700;color:var(--accent-texte);text-decoration:none;font-size:.95rem;
}
.article-carte__lien:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Page d'article ------------------------------------------------------- */
.article-tete{
  background:
    radial-gradient(700px 340px at 82% 6%, rgba(255,107,44,.14), transparent 62%),
    #FFFFFF;
  padding:clamp(44px,6vw,72px) 0 clamp(30px,4vw,44px);
  border-bottom:1px solid var(--bordure);
}

.article-tete h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:20px}
.article-tete .lead{max-width:none}
/* Couverture et corps d'article alignés sur la largeur du site, comme le menu */
.article__couv{
  position:relative;margin:0 auto;background:var(--carte-2);
  width:100%;max-width:var(--max);padding-inline:var(--gutter);
}
.article__couv img{width:100%;height:auto;display:block;border:1px solid var(--bordure)}
.article__couv figcaption{margin-top:10px;color:var(--texte-doux);font-size:.85rem}
.article__corps{padding:clamp(36px,5vw,56px) 0 clamp(50px,7vw,80px)}
.article__corps p{font-size:1.06rem;line-height:1.75;color:#2E2E38}
.article__corps h3{margin-top:44px;color:var(--texte)}
.article__corps h3:first-child{margin-top:0}
.article__figure{margin:36px 0}
.article__figure img{width:100%;height:auto;display:block;border:1px solid var(--bordure)}
.article__figure figcaption{
  margin-top:10px;color:var(--texte-doux);font-size:.88rem;font-style:italic;
}
.article__cite{
  margin:38px 0;padding:24px 28px;border-left:4px solid var(--orange);
  background:var(--carte-2);font-size:1.12rem;line-height:1.6;color:var(--texte);
}
.article__source{display:block;margin-top:10px;font-size:.85rem;color:var(--texte-doux);font-style:normal}
.article__liste{margin:22px 0;padding-left:0;list-style:none}
.article__liste li{
  position:relative;padding:9px 0 9px 28px;color:#2E2E38;
  border-bottom:1px solid var(--bordure);line-height:1.6;
}
.article__liste li::before{content:"→";position:absolute;left:0;top:9px;color:var(--accent-texte);font-weight:700}
.article__pied{
  margin-top:48px;padding-top:26px;border-top:1px solid var(--bordure);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
}
.article__retour{font-weight:700;color:var(--accent-texte);text-decoration:none}
.article__retour:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Galerie interne d'article (2 colonnes) ------------------------------- */
.article__duo{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:36px 0;
}
.article__duo figure{margin:0}
.article__duo img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid var(--bordure);aspect-ratio:4/5}
.article__duo figcaption{margin-top:8px;color:var(--texte-doux);font-size:.85rem;font-style:italic}
@media (max-width:620px){.article__duo{grid-template-columns:1fr}}

/* Grille souple : les cartes se répartissent 3 par rangée et la dernière
   rangée incomplète reste centrée (utile pour 5 cartes). */
.grille--auto{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.grille--auto > *{flex:1 1 300px;max-width:calc(33.333% - 15px)}
@media (max-width:900px){.grille--auto > *{max-width:calc(50% - 11px)}}
@media (max-width:620px){.grille--auto > *{max-width:100%}}

/* ==========================================================================
   CARTE — plan Google chargé au clic (aucune requête tierce avant)
   ========================================================================== */
.plan{
  position:relative;overflow:hidden;border-radius:0;
  aspect-ratio:16/9;background:var(--carte-2);border:1px solid var(--bordure);
}
@media (max-width:700px){.plan{aspect-ratio:4/3}}
.plan iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.plan__charger{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;padding:28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;
  background:
    radial-gradient(600px 300px at 50% 40%, rgba(255,107,44,.10), transparent 65%),
    repeating-linear-gradient(45deg, var(--carte-2), var(--carte-2) 16px, var(--carte) 16px, var(--carte) 32px);
  color:var(--texte);
}
.plan__epingle{
  width:66px;height:66px;border-radius:50%;background:var(--orange);color:#14141A;
  display:grid;place-items:center;font-size:1.9rem;
  box-shadow:0 10px 26px rgba(255,107,44,.35);
  transition:transform 220ms ease;
}
.plan__charger:hover .plan__epingle{transform:scale(1.08) translateY(-3px)}
.plan__titre{font-family:var(--font-titre);font-size:1.35rem;text-transform:uppercase;line-height:1.1}
.plan__adresse{color:var(--texte-doux);font-size:.95rem;max-width:44ch}
.plan__note{color:var(--texte-doux);font-size:.8rem;margin-top:4px}
.plan-liens{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}

/* ==========================================================================
   BANDEAU PHOTO — image pleine largeur, sans texte
   ========================================================================== */
.bandeau-photo{
  position:relative;overflow:hidden;background:var(--carte-2);
  width:100%;max-width:var(--max);margin:0 auto;
}
/* Photo de groupe : aucun recadrage à l'affichage, tout le monde reste visible. */
.bandeau-photo img{width:100%;height:auto;display:block}
.bandeau-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px var(--gutter) 16px;
  background:linear-gradient(180deg, transparent, rgba(14,14,16,.72));
  color:#E8E8EE;font-size:.88rem;
}
.bandeau-photo figcaption span{display:block;max-width:var(--max);margin:0 auto}


/* Variante claire des icônes de réseaux, pour un usage dans une carte */
.reseaux--carte{margin-top:16px;gap:10px}
.reseaux--carte a{
  width:44px;height:44px;border-radius:12px;
  background:var(--carte-2);border:1px solid var(--bordure);color:var(--texte);
}
.reseaux--carte a:hover{background:var(--orange);border-color:var(--orange);color:#14141A}
.reseaux--carte svg{width:21px;height:21px}

/* ==========================================================================
   MOSAÏQUE — assemblage de photos d'ambiance
   ========================================================================== */
.mosaique{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  grid-auto-rows:clamp(150px,17vw,230px);margin-top:clamp(30px,4vw,44px);
}
.mosaique figure{margin:0;position:relative;overflow:hidden;background:var(--carte-2)}
.mosaique img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 500ms ease,filter 400ms ease}
.mosaique figure:hover img{transform:scale(1.04)}
.mosaique .large{grid-column:span 2}
@media (max-width:820px){
  .mosaique{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(140px,32vw,200px)}
  .mosaique .large{grid-column:span 2}
}

/* Photo pleine largeur d'une section, affichée sans recadrage */
.photo-large{margin:0 0 clamp(28px,4vw,40px);border:1px solid var(--bordure)}
.photo-large img{width:100%;height:auto;display:block}
.photo-large figcaption{margin-top:10px;color:var(--texte-doux);font-size:.88rem}
/* Texte occupant toute la largeur du bloc : il passe en deux colonnes sur
   grand écran pour que les lignes restent lisibles. */
.texte-lecture{max-width:none}
@media (min-width:1000px){
  .texte-lecture{columns:2;column-gap:clamp(34px,4vw,56px)}
  .texte-lecture p{break-inside:avoid}
  .texte-lecture .lead{font-size:1.1rem}
}

/* Liens dans le corps d'un article */
.article__corps p a{
  color:var(--accent-texte);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(194,68,15,.35);
  transition:text-decoration-color var(--transition);
}
.article__corps p a:hover{text-decoration-color:var(--accent-texte)}

/* Partenaires : deux familles distinctes, chacune avec son intitulé */
.partenaires-groupe{margin-bottom:clamp(26px,3.5vw,38px)}
.partenaires-groupe:last-child{margin-bottom:0}
.partenaires-groupe h3{
  text-align:center;font-size:.86rem;letter-spacing:.16em;font-family:var(--font-texte);
  font-weight:700;color:var(--texte-doux);text-transform:uppercase;margin-bottom:16px;
}
.partenaire span{display:block;font-weight:400;font-size:.86rem;margin-top:2px}