/* ============================================================
   CERICLUB : blocs ajoutés ou refondus le 03/10/2026
   (cahier des charges « architecture et textes »).

   Chargée après tailwind.css, elle complète le <style> de la page et
   reprend ses variables de thème (--bg, --accent…), donc le clair et le
   sombre suivent sans règle supplémentaire, sauf mention contraire.

   La classe .js est posée sur <html> par le script de l'en-tête : les
   règles qui en dépendent ne s'appliquent que si le JavaScript tourne.
   Sans lui, tout le contenu reste affiché.
============================================================ */

/* Les ancres internes s'arrêtent sous la barre de navigation fixe. */
#causes, article[id] { scroll-margin-top: 100px; }

/* ── Hero : carrousel de photos d'action ───────────────────────────────── */

/* Téléphone et tablette : le texte, puis la photo en entier, sans voile. */
#hero.hero {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-contenu { order: 1; padding-top: 7.5rem; }
.hero-photos {
  order: 2;
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 3rem;
  overflow: hidden;
  background: var(--bg-3);
}
.hero-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-photo.is-on { opacity: 1; }
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Léger recul de la photo pendant qu'elle est à l'écran. */
.hero-photo.is-on img { animation: hero-recul 9s ease-out both; }
@keyframes hero-recul {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.hero-voile, .hero-defiler { display: none; }

/* Grand écran : la photo passe en fond, sous un voile qui part de la
   gauche. Le titre reste sur une zone presque opaque ; la photo vit sur la
   droite. Le haut est voilé lui aussi, pour la lisibilité du menu. */
@media (min-width: 1024px) {
  #hero.hero {
    position: relative;
    flex-direction: row;
    min-height: 84vh;
  }
  .hero-photos {
    position: absolute;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;
  }
  .hero-voile {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent) 0, transparent 160px),
      linear-gradient(0deg, color-mix(in srgb, var(--bg-2) 75%, transparent) 0, transparent 20%),
      linear-gradient(90deg,
        var(--bg) 0%,
        color-mix(in srgb, var(--bg) 96%, transparent) 38%,
        color-mix(in srgb, var(--bg) 80%, transparent) 47%,
        color-mix(in srgb, var(--bg) 30%, transparent) 60%,
        transparent 74%);
  }
  .hero-contenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 9rem;
    padding-bottom: 6rem;
  }
  .hero-texte { max-width: 40rem; }
  .hero-defiler {
    display: flex;
    align-items: center;
    gap: .75rem;
    position: absolute;
    left: 3rem;
    bottom: 2.25rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .hero-defiler-trait {
    width: 1px;
    height: 1.5rem;
    background: var(--accent);
    animation: defiler 2s ease-in-out infinite;
  }
  @keyframes defiler { 50% { opacity: .35; } }
}

/* ── Bandeau défilant ──────────────────────────────────────────────────────
   La règle d'origine faisait glisser la piste de 100 % de sa largeur alors
   qu'elle contient deux copies du texte : pendant la fin de chaque cycle, le
   bandeau se vidait. À 50 %, la seconde copie prend exactement la place de
   la première et la boucle ne se voit plus. */
.marquee__inner { animation-name: defilement-moitie; }
@keyframes defilement-moitie {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Nos preuves ───────────────────────────────────────────────────────── */
.preuves-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
@media (min-width: 1024px) {
  .preuves-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.preuve-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
}
.preuve-icone--mustard {
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.preuve-icone--teal {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}
[data-theme="dark"] .preuve-icone--mustard { color: var(--accent); }
.ico-preuve { width: 1.5rem; height: 1.5rem; }
.preuve-plus { margin-right: .03em; }
/* Posée par site.js le temps que le chiffre arrive à l'écran : il apparaît
   alors en comptant depuis zéro. Le texte, lui, garde la valeur finale. */
.compteur-attente { opacity: 0; }

/* ── Les trois programmes ──────────────────────────────────────────────── */
.programmes-liste { display: grid; gap: 1.5rem; }
.programme {
  display: grid;
  gap: 2rem;
  padding: 2rem;
  transition: border-color .4s ease, box-shadow .4s ease;
}
.programme:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .programme { padding: 2.75rem; } }
@media (min-width: 1024px) {
  .programme {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 4rem;
    padding: 3rem;
  }
}
.programme-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.programme .causes { grid-column: 1 / -1; }

/* ── Nos causes (sous IMPULSE) ─────────────────────────────────────────── */
.causes {
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}
.causes-grille {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .causes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .causes-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cause {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.cause-face, .cause-detail { padding: 1.75rem; }
.cause-face, .cause-detail-texte { display: flex; flex-direction: column; }
.cause-detail-texte { height: 100%; }
.cause-face > .cause-indice,
.cause-detail-texte > .cause-indice { margin-top: auto; padding-top: 1.5rem; }
.cause-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.cause--teal .cause-icone {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}
[data-theme="dark"] .cause-icone { color: var(--accent); }
[data-theme="dark"] .cause--teal .cause-icone { color: var(--accent-2-soft); }
.ico-cause { width: 1.5rem; height: 1.5rem; }
.cause-accroche {
  margin-top: .75rem;
  font-size: 1.12rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text-strong) 80%, transparent);
}
.cause-indice {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cause-face .cause-indice { color: var(--text-muted); }
.ico-indice { width: 1rem; height: 1rem; }
.cause-texte { margin-top: .9rem; line-height: 1.6; }
.cause-exemple {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-weight: 600;
  line-height: 1.5;
}

/* Face dépliée : couleurs fixes, lisibles dans les deux thèmes
   (moutarde et bleu nuit : 7,1:1 ; sarcelle foncée et crème : 7,4:1). */
.cause-detail { position: relative; }
.cause--moutarde .cause-detail { background: #D4A017; color: #0A1628; }
.cause--teal .cause-detail { background: #1F5C5A; color: #FAF8F2; }
.cause--photo .cause-detail { background: #0A1628; color: #FAF8F2; }
.cause-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cause--photo .cause-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 22, 40, .5) 0%, rgba(10, 22, 40, .9) 62%);
}
.cause-detail-texte { position: relative; z-index: 2; }
.cause-bouton { display: none; }

/* Avec JavaScript, les deux faces se superposent dans la même cellule :
   la carte garde sa hauteur, rien ne bouge autour quand elle s'ouvre. */
.js .cause { display: grid; }
.js .cause-face, .js .cause-detail { grid-area: 1 / 1; }
.js .cause-face { transition: opacity .35s ease; }
.js .cause-detail {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.js .cause.is-open .cause-face { opacity: 0; }
.js .cause.is-open .cause-detail {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .js .cause:hover .cause-face { opacity: 0; }
  .js .cause:hover .cause-detail {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease, visibility 0s;
  }
}
.js .cause-bouton {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cause-bouton:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.causes-chiffre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  margin-top: 2rem;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--text-strong) 85%, transparent);
}
.causes-chiffre-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  font-variation-settings: "opsz" 96;
}

/* ── RISE Moment : fond chaud, pour le distinguer des cartes programme ── */
.rise-moment { background: color-mix(in srgb, var(--accent) 13%, var(--bg)); }
[data-theme="dark"] .rise-moment { background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); }

.rm-intro {
  display: grid;
  gap: 2rem;
  grid-template-areas: "tete" "sous" "photo" "texte";
}
@media (min-width: 1024px) {
  .rm-intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "tete tete" "sous photo" "texte photo";
    column-gap: 4.5rem;
    row-gap: 2rem;
    align-items: start;
  }
  .rm-tete { margin-bottom: 1rem; }
}
.rm-tete { grid-area: tete; }
.rm-sous { grid-area: sous; max-width: 46rem; }
.rm-photo { grid-area: photo; margin: 0; }
.rm-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.rm-texte { grid-area: texte; max-width: 46rem; }

.rm-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
[data-theme="dark"] .rm-badge { color: var(--accent); }
.rm-badge-point {
  width: .4rem;
  height: .4rem;
  border-radius: 999px;
  background: var(--accent);
}

.rm-partie { margin-top: 5rem; }
@media (min-width: 1024px) { .rm-partie { margin-top: 6.5rem; } }
.rm-sur {
  margin-bottom: 1.75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.rm-missions {
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .rm-missions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .rm-missions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rm-mission {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-strong);
}
.ico-coche {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .12rem;
  color: var(--accent-2);
}

.rm-formules {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .rm-formules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .rm-formules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rm-formule {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--line);
  background: var(--bg);
}
.rm-equipe { display: flex; gap: .1rem; color: var(--accent-deep); }
[data-theme="dark"] .rm-equipe { color: var(--accent); }
.ico-personne { width: 1.6rem; height: 1.6rem; }
.rm-duree {
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.rm-duo { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .rm-duo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 5rem;
    align-items: start;
  }
}
.rm-confiance {
  padding: 2.25rem;
  border: 1px solid var(--line);
  background: var(--bg);
}
.rm-confiance-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}
.ico-bouclier { width: 1.5rem; height: 1.5rem; }
.rm-etapes { display: grid; gap: 1.25rem; margin-top: 2rem; }
.rm-etape { display: flex; align-items: flex-start; gap: 1.1rem; }
.rm-etape-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0A1628;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.rm-etape p {
  padding-top: .3rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text-strong) 85%, transparent);
}

.rm-avis {
  position: relative;
  max-width: 56rem;
  margin: 5rem 0 0;
  padding: 2.5rem 2rem 2rem;
  border: 1px solid var(--line);
  background: var(--bg);
}
@media (min-width: 1024px) {
  .rm-avis { margin-top: 6.5rem; padding: 3.5rem 3.5rem 3rem; }
}
.rm-avis-guillemet {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 5rem;
  line-height: .6;
  color: var(--accent);
}
.rm-avis blockquote { margin: 1.25rem 0 0; }
.rm-avis blockquote p {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--text-strong);
}
.rm-avis figcaption {
  margin-top: 1.5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rm-galerie {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .rm-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
.rm-galerie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.rm-lien { margin-top: 3.5rem; font-size: .95rem; color: var(--text-muted); }
.rm-lien a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* ── Nos actions : huit cartes, un album par carte ─────────────────────── */
.actions-grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .actions-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .actions-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* La carte visée par un bouton « Découvrir » se signale à l'arrivée. */
.action:target {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
}

.album { position: relative; background: var(--bg-3); }
.album-piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.album-piste::-webkit-scrollbar { display: none; }
.album-piste:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.album-piste > img {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  scroll-snap-align: start;
}
.album-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 22, 40, .55);
  color: #FAF8F2;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, background-color .25s ease;
}
.js .album-btn { display: inline-flex; }
.album-prec { left: .6rem; }
.album-suiv { right: .6rem; }
.album:hover .album-btn,
.album:focus-within .album-btn { opacity: 1; }
@media (hover: none) { .album-btn { opacity: 1; } }
.album-btn:hover { background: rgba(10, 22, 40, .82); }
.album-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ico-album { width: 1.15rem; height: 1.15rem; }
.album-compte {
  display: none;
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(10, 22, 40, .6);
  color: #FAF8F2;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.js .album-compte { display: inline-block; }

/* ── Notre communauté : portraits 4/5 du bureau ────────────────────────── */
.bureau-grille {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .bureau-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bureau-grille { gap: 1.5rem; }
}
.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #E2A40C;
}
.bureau-texte { padding: 1rem 1rem 1.25rem; }
.bureau-nom { font-size: 1rem; line-height: 1.25; }
@media (min-width: 640px) {
  .bureau-texte { padding: 1.5rem 1.5rem 1.75rem; }
  .bureau-nom { font-size: 1.125rem; }
}

/* ── S'engager : quatre cartes ─────────────────────────────────────────── */
.engager-grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .engager-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .engager-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.btn-inactif,
.btn-inactif:hover {
  opacity: .55;
  cursor: not-allowed;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text);
}

/* ── Pied de page ──────────────────────────────────────────────────────── */
.footer-grille {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-grille > :first-child,
.footer-grille > :last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grille > :last-child { grid-column: auto; }
}
@media (min-width: 1024px) {
  .footer-grille {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr 1.2fr;
    gap: 2.5rem;
  }
  .footer-grille > :first-child { grid-column: auto; }
  .footer-grille a[href*="instagram"] { white-space: nowrap; }
}