/* ==========================================================================
   OCTOBRE ROSE (octobre 2026) : le thème du mois
   Le petit ruban fixé en haut à gauche (et son explication), puis l'écran de chargement, montré à la première
   page d'une visite et quand on recharge la page (classe html.has-intro posée par le script de <head>).
   Le tout est animé par assets/js/intro.js.
   Pour le mois suivant : remplacer ce fichier et intro.js.
   ========================================================================== */
:root {
  --intro-bg: #fafafa;         /* le fond du site : l'écran se fond dans la page */
  --intro-pink: #ec5b92;       /* le ruban */
  --intro-pink-text: #c4306b;  /* le même rose, plus foncé pour les petits textes (contraste 5:1 sur le fond) */
}

/* ---------- Le petit ruban fixé sur le site ---------- */
/* En haut à gauche, à la hauteur du menu : la place est libre sur toutes les largeurs d'écran */
.cause {
  position: fixed;
  top: 30px;
  left: 24px;
  z-index: 9;
  font-family: var(--font);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.9);
  transform-origin: 22px 22px;
}
.cause.is-in {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.4s var(--ease-std), transform var(--spring-04-06-d) var(--spring-04-06);
}
.cause.is-waiting, .cause.is-instant { transition: none; }

.cause__btn {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow-pill), 0 0 0 1px rgba(0, 0, 0, 0.05);
  color: var(--intro-pink);
}
.cause__ico { display: block; width: 24px; height: 24px; flex: none; }
.cause__ico svg { width: 100%; height: 100%; }
/* Survol (ordinateur) : le nom de la campagne glisse à côté du ruban */
.cause__lbl {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
  opacity: 0;
  transition: max-width var(--spring-02-05-d) var(--spring-02-05), margin var(--spring-02-05-d) var(--spring-02-05), opacity 0.25s ease;
}
@media (hover: hover) {
  .cause__btn:hover .cause__lbl { max-width: 110px; margin: 0 4px 0 8px; opacity: 1; }
}
@media (min-width: 768px) {
  .cause.is-open .cause__lbl { max-width: 110px; margin: 0 4px 0 8px; opacity: 1; }
}
.cause__btn:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* Le reflet, pour qu'on remarque la pastille : toutes les 4,5 s, une lumière rose fait le tour du bord
   et une bande de lumière passe sur le ruban. Il s'arrête pour de bon à la première ouverture (classe is-shining,
   gérée par intro.js) ; pas de reflet avec le réglage « animations réduites ». */
@property --cause-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cause__btn { position: relative; }
.cause__reflet { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cause.is-shining.is-in .cause__btn::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--cause-angle), rgba(236, 91, 146, 0) 0deg 200deg, rgba(236, 91, 146, 0.95) 335deg, rgba(236, 91, 146, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    animation: cause-tour 4.5s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite both;
  }
  .cause.is-shining.is-in .cause__reflet { animation: cause-reflet 4.5s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite both; }
}
@keyframes cause-tour {
  0% { --cause-angle: 0deg; opacity: 0; }
  8%, 38% { opacity: 1; }
  48%, 100% { --cause-angle: 360deg; opacity: 0; }
}
@keyframes cause-reflet {
  0%, 6% { transform: translateX(0); opacity: 1; }
  30%, 100% { transform: translateX(36px); opacity: 1; }
}

/* L'explication, sous le ruban */
.cause__panel {
  position: absolute;
  top: 54px;
  left: 0;
  width: min(340px, calc(100vw - 32px));
  padding: 22px 22px 20px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 24px 48px -12px rgba(0, 0, 0, 0.12);
  color: var(--black);
  outline: none;
  transform-origin: 22px 0;
}
.cause__panel[hidden] { display: none; }
.cause__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--black);
}
.cause__close svg { width: 18px; height: 18px; }
.cause__kicker { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: var(--intro-pink-text); }
.cause__title { margin: 0 40px 10px 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.cause__text { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5; color: var(--gray-700); }
.cause__facts { display: grid; gap: 8px; margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--gray-150); border-bottom: 1px solid var(--gray-150); }
.cause__facts li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--gray-700);
}
.cause__facts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--intro-pink); }
.cause__facts strong { color: var(--black); font-weight: 600; }
.cause__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--gray-100);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
  transition: background 0.2s ease;
}
.cause__link span { font-size: 12px; font-weight: 500; color: var(--gray-500); }
@media (hover: hover) { .cause__link:hover { background: var(--gray-150); } }

@media (max-width: 767.98px) {
  .cause { left: 16px; }
}

/* ---------- L'écran de chargement ---------- */
/* Sur téléphone, la page continue sous les barres du navigateur (sous la barre du bas de Safari depuis iOS 26,
   sous le bas de l'écran dans l'application Google). L'écran et son fond d'attente font exactement la taille de la
   fenêtre (inset: 0, rien de plus) : Safari reconnaît alors un écran plein et peint sa couleur sous sa barre.
   Plus grand (100lvh), il ne le reconnaissait plus et la page se voyait dessous. Là où le navigateur ne peint rien,
   une ombre décalée de 160 px, sans flou, recouvre la bande sous la fenêtre. */
/* En attendant que le script dessine l'écran : le fond seul, pour ne jamais voir la page en dessous */
html.has-intro:not(.intro-ready) body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 12;
  background: var(--intro-bg);
  box-shadow: 0 160px 0 var(--intro-bg);
}

/* Au-dessus du menu et du formulaire, sous le curseur personnalisé (13) */
.intro {
  position: fixed;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  box-shadow: 0 160px 0 var(--intro-bg);
  color: var(--black);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
}
html:not(.has-intro) .intro { display: none; }  /* sécurité : si le script s'arrête, le site reprend la main */
/* Pendant l'écran, la barre de contact reste cachée : elle monte quand l'écran a disparu */
html.has-intro .contact-bar-wrap { transform: translateX(-50%) translateY(100px); visibility: hidden; }

/* Le voile blanc qui cache le site : à la fin, il glisse vers le bas et le site apparaît de haut en bas */
.intro__veil {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 300%;
  background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0) 33.3%, var(--intro-bg) 45%, var(--intro-bg) 100%);
  transform: translateY(-45%);
}
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* La phrase, sous le ruban (sa place est calculée par le script) */
.intro__text {
  position: absolute;
  left: 50%;
  width: min(88vw, 32em);
  transform: translateX(-50%);
  text-align: center;
}
.intro__message {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.38;
  text-wrap: balance;
}
.intro__cta {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--intro-pink-text);
}
/* Lettres qui s'écrivent une à une (le script règle leur apparition) */
.intro__w { display: inline-block; white-space: nowrap; }
.intro__char { display: inline-block; opacity: 0; }
/* Le message complet, lu une fois par les lecteurs d'écran */
.intro__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 767.98px) {
  .intro__cta { margin-top: 14px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cause.is-in { transition: opacity 0.4s ease; }
}
@media print {
  .cause, .intro { display: none; }
}