/* ============================================================
   Octobre Rose - habillage saisonnier
   Posé par le script en tête de chaque page : la classe « octobre-rose »
   n'est sur <html> que pendant le mois d'octobre. Le 1er novembre, elle
   ne l'est plus, et le site reprend ses verts sans qu'on y touche.

   CE FICHIER NE FAIT QUE REDEFINIR DES JETONS. Toute la charte passe par
   eux depuis scripts/jetons-couleur.py : redéfinir six verts suffit à
   repeindre bandeaux, boutons, pastilles et colonnes de l'espace
   membres. Les rares couleurs qui gardent leur sens - le vert d'un
   paiement confirmé, le rouge d'une alerte, l'or de l'association -
   ne bougent pas.

   La spécificité (html.octobre-rose) l'emporte sur le :root de chaque
   page sans dépendre de l'ordre de chargement.

   POUR ARRÊTER L'HABILLAGE AVANT LA FIN DU MOIS : vider ce fichier
   suffit. La classe continuera d'être posée, mais elle ne repeindra
   plus rien, et le site reprendra ses verts à la première visite. Pas
   besoin de toucher aux soixante-dix pages.

   L'HABILLAGE REVIENDRA SEUL CHAQUE OCTOBRE. C'est voulu : la campagne
   est annuelle. Pour qu'il ne revienne pas, remplacer dans le script en
   tête des pages « getMonth()===9 » par une année précise, ou retirer
   ce fichier du dépôt.
   ============================================================ */

html.octobre-rose {
  /* Les six verts de la charte deviennent la gamme du ruban rose.
     Le ton le plus sombre porte DEUX roles : le fond des surfaces
     foncees - entete, pied de page, colonne des membres - et la couleur
     des titres sur blanc. D'ou #AD1457 : 6,97 dans les deux sens, quand
     le bordeaux precedent assombrissait tout le site pour rien. */
  --green-deep: #AD1457;
  --green-deep-2: #C2185B;
  --green-deep-3: #D81B60;
  --green: #C2185B;
  --green-rgb: 194, 24, 91;
  --green-deep-rgb: 173, 20, 87;
  --green-light: #E84A86;
  --green-soft: #F8A5C2;

  /* Les tons neutres prennent la même teinte, sinon le gris-vert des
     textes secondaires jure avec le rose. */
  --ink: #2B0F1C;
  --text-muted: #6E5460;
  --paper-alt: #FBEDF2;
  --section-alt: #FDF5F8;
  --line: rgba(173, 20, 87, 0.22);
  --line-fin: rgba(173, 20, 87, 0.12);
  --shadow: 0 12px 32px rgba(173, 20, 87, 0.18);
}

html.octobre-rose[data-theme="dark"] {
  --green: #F06292;
  --green-light: #F06292;
  --green-soft: #F8A5C2;
  --text-heading: #F8A5C2;
  --ink: #F4E7EC;
  --text-muted: #BCA2AD;
  --paper: #150A10;
  --paper-alt: #1F0F17;
  --section-alt: #1F0F17;
  --surface: #211119;
  --line: rgba(255, 255, 255, 0.14);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ===== Les cartes de la page d'accueil =====
   Elles portent leur propre petite palette, déclarée sur la carte. La
   variante « or » n'est pas touchée : l'or reste l'or. */
html.octobre-rose .intro-card {
  --c-tint: #FDF2F6;
  --c-blob: #F6CFDC;
  --c-btn-hover: #AD1457;
}
html.octobre-rose .intro-card.theme-menthe {
  --c-tint: #FCEDF3;
  --c-blob: #F3C6D7;
}
html.octobre-rose[data-theme="dark"] .intro-card {
  --c-tint: #23121A;
}
html.octobre-rose[data-theme="dark"] .intro-card.theme-menthe {
  --c-tint: #24141C;
}

/* ===== Le ruban, discrètement =====
   Un liseré rose en haut de page : le signe de la campagne, sans rien
   ajouter au contenu ni déplacer quoi que ce soit. */
html.octobre-rose body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, #C2185B 0%, #F06292 50%, #C2185B 100%);
  pointer-events: none;
}
@media print {
  html.octobre-rose body::before { display: none; }
}

/* ===== Le hero du mois =====
   Pendant octobre, le hero habituel s'efface et celui-ci prend sa place.
   Le texte à gauche, l'affiche à droite : l'affiche porte déjà ses
   propres mots, poser les nôtres par-dessus les rendrait illisibles.
   Vider cette feuille rend la page à son hero d'origine. */
html.octobre-rose .hero { display: none; }
html.octobre-rose #hero-octobre {
  /* Le hero occupe le premier ecran a lui seul : la collecte de fonds
     apparaissait sous l'affiche sans qu'on ait defile, et deux appels se
     disputaient le premier regard. 77 px : la hauteur de l'entete, qui
     reste collee en haut. */
  display: flex;
  align-items: center;
  min-height: calc(100vh - 77px);
  min-height: calc(100svh - 77px);
  position: relative;
  padding: 54px 0 48px;
  /* Le voile AVANT l'image dans la pile : dense a gauche pour que le
     titre et le paragraphe se lisent, plus leger a droite pour laisser
     paraitre le ruban. La couleur de repli couvre le temps du
     chargement, et sur les reseaux ou l'image n'arrive jamais. */
  background:
    linear-gradient(100deg, rgba(173,20,87,0.95) 0%, rgba(194,24,91,0.88) 42%, rgba(216,27,96,0.56) 100%),
    url("../uploads/octobre-rose-fond.jpg") center / cover no-repeat,
    linear-gradient(135deg, #AD1457 0%, #C2185B 48%, #D81B60 100%);
  color: #FFFFFF;
}
html.octobre-rose #hero-octobre > .wrap { width: 100%; }
html.octobre-rose .hero-or-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  html.octobre-rose .hero-or-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 44px; }
}
html.octobre-rose .hero-or-eyebrow {
  font-family: var(--mono, monospace);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFE3A0;
  margin-bottom: 14px;
}
html.octobre-rose #hero-octobre h1 {
  font-family: var(--display, sans-serif);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  color: #FFFFFF;
  text-wrap: balance;
}
html.octobre-rose #hero-octobre h1 em { font-style: normal; color: #FFD3E2; }
html.octobre-rose .hero-or-intro {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 16px 0 0;
  max-width: 60ch;
}
html.octobre-rose .hero-or-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* L'affiche est montrée ENTIÈRE : elle est verticale, et un recadrage
   lui couperait soit le ruban, soit les trois messages. */
html.octobre-rose .hero-or-affiche { margin: 0; justify-self: center; }
html.octobre-rose .hero-or-affiche img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
@media (max-width: 899px) {
  html.octobre-rose #hero-octobre {
    padding: 36px 0 34px;
    /* Sur telephone, le texte occupe toute la largeur : le voile ne peut
       plus s'alleger d'un cote sans passer sous les mots. */
    background:
      linear-gradient(160deg, rgba(173,20,87,0.95) 0%, rgba(194,24,91,0.90) 55%, rgba(216,27,96,0.78) 100%),
      url("../uploads/octobre-rose-fond.jpg") center / cover no-repeat,
      linear-gradient(135deg, #AD1457 0%, #C2185B 48%, #D81B60 100%);
  }
  html.octobre-rose .hero-or-affiche img { max-height: 420px; }
}