/* ============================================================================
   Sections d'ouverture animées — grammaire commune
   ----------------------------------------------------------------------------
   Une seule feuille pour toutes les animations de hero : c'est le langage,
   chaque page n'en écrit que la phrase. Ce fichier existe aussi pour ne pas
   reproduire le défaut du site — un CSS recopié dans chaque page, qui a laissé
   13 pages sur 14 avec un menu mobile cassé pendant des semaines.

   Contraintes tenues partout : SVG pur, aucune bibliothèque, aucun JavaScript,
   et prefers-reduced-motion coupe tout mouvement.
   ========================================================================== */

:root{
  --purple:#7c3aed; --purple-l:#a855f7; --cyan:#06b6d4; --amber:#f59e0b;
  --encre:#f1f5f9; --sourd:#94a3b8; --nuit:#0b0819; --nuit-clair:#150f28;
  --liseré:rgba(168,85,247,.20); --liseré-vif:rgba(168,85,247,.95);
}

.canevas{
  position:relative; width:100%; max-width:920px; aspect-ratio:920/430;
  border-radius:26px; overflow:hidden;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(124,58,237,.20), transparent 55%),
    radial-gradient(110% 130% at 92% 100%, rgba(6,182,212,.16), transparent 55%),
    var(--nuit);
  border:1px solid var(--liseré);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}

/* La grille de points : le fond des éditeurs de workflow, repris comme signature
   visuelle commune à toutes les pages. */
.canevas::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:26px 26px; opacity:.5;
}

.canevas > svg{ position:absolute; inset:0; width:100%; height:100% }

/* ── Deux cadrages, pas un ───────────────────────────────────────────────────
   Mesuré : un viewBox de 920 de large réduit à un écran de 390 px tombe à une
   échelle de 0,39 — le texte de 13 px se rend à 5 px. Illisible, et ça reste
   illisible jusqu'à 1024 px, donc sur tablette aussi.
   Chaque animation porte donc DEUX tracés : un cadrage large en paysage, et un
   cadrage étroit en portrait où le flux descend au lieu d'aller vers la droite.
   Ce n'est pas le même dessin mis à l'échelle, c'est la même idée recomposée. */
.canevas.etroit{ aspect-ratio:420/700 }
svg.large { display:block }
svg.etroit{ display:none }
@media (max-width:1023px){
  .canevas{ aspect-ratio:420/700; max-width:460px }
  svg.large { display:none }
  svg.etroit{ display:block }
}

/* ── Vocabulaire partagé ─────────────────────────────────────────────────── */

.boite{ fill:var(--nuit-clair); stroke:rgba(168,85,247,.34); stroke-width:1.5 }

/* Icônes en TRACÉS, jamais en emoji : un emoji dépend de la police système, se
   colore tout seul et casse la palette. */
.icone{ fill:none; stroke:#c4b5fd; stroke-width:1.7;
        stroke-linecap:round; stroke-linejoin:round }

.titre  { fill:var(--encre); font-size:13px; font-weight:700; letter-spacing:-.01em }
.sstitre{ fill:var(--sourd); font-size:10.5px; font-weight:500 }
.etiq   { fill:var(--sourd); font-size:9.5px; font-weight:700;
          letter-spacing:.14em; text-transform:uppercase }

.lien    { fill:none; stroke:rgba(168,85,247,.22); stroke-width:2.5; stroke-linecap:round }
.lien-vif{ fill:none; stroke:url(#flux); stroke-width:2.5; stroke-linecap:round;
           stroke-dasharray:14 210; animation:defile 3.2s linear infinite }
@keyframes defile{ to{ stroke-dashoffset:-224 } }

.paquet{ r:5; filter:drop-shadow(0 0 8px rgba(168,85,247,.9)) }

/* Un nœud qui « respire » quand le flux le traverse. */
.boite-actif{ animation:respire 3.2s ease-in-out infinite }
@keyframes respire{
  0%,62%,100%{ stroke:rgba(168,85,247,.34); filter:none }
  18%,42%    { stroke:var(--liseré-vif); filter:drop-shadow(0 0 14px rgba(168,85,247,.65)) }
}

/* Apparition progressive, pour tout ce qui se « révèle ». */
.revele{ opacity:0; animation:apparait 4s ease-in-out infinite }
@keyframes apparait{ 0%,8%{opacity:0} 22%,72%{opacity:1} 92%,100%{opacity:0} }

/* ⚠️ Sans cette règle, l'animation devient un obstacle pour qui souffre de
   troubles vestibulaires. Le sens doit rester lisible à l'arrêt. */
@media (prefers-reduced-motion:reduce){
  .canevas *{ animation:none!important }
  .revele{ opacity:1!important }
  .paquet{ display:none }
}


/* ── Intégration dans les pages ─────────────────────────────────────────────
   Le canevas remplace le pavé de texte qui ouvrait chaque page : sa substance
   est désormais DANS l'animation (chiffres, garanties, motifs d'écartement).
   Il n'y a donc plus rien à écrire au-dessus. */
.hero-canevas{ margin:26px auto 30px; max-width:920px }
@media (max-width:1023px){ .hero-canevas{ margin:20px auto 24px } }

/* ═══ HÉROS PLEIN ÉCRAN ══════════════════════════════════════════════════════
   Inspiré de la structure de Donoor : chez eux le visuel n'est pas un encart,
   c'est le FOND — la photo occupe tout le premier écran et le texte est posé
   dessus. L'animation était jusqu'ici enfermée dans une carte sous le titre,
   donc reléguée au rang d'illustration alors qu'elle est le meilleur argument
   de la page.

   Ici elle devient le fond du héros. Le titre passe devant.
   La direction artistique ne change pas : même fond, même violet, même
   typographie. Seule la mise en page bouge.
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-hero.plein{
  position:relative; min-height:min(92vh,860px); display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  padding:120px 5% 90px; overflow:hidden; text-align:center;
}

/* Le canevas en fond : il déborde volontairement pour remplir l'écran. */
.hero-fond{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.hero-fond .canevas{
  /* Ratio respecte, largeur pleine, opacite basse. Le fond doit SUGGERER un
     systeme qui tourne derriere le titre, pas se lire. A 42 % il concurrencait
     encore ; a 1,9x d'echelle (slice) il inondait l'ecran. */
  width:100%; max-width:1400px; height:auto; aspect-ratio:920/430;
  border:0; border-radius:0; box-shadow:none; opacity:.16;
}
/* Un voile qui creuse le centre : le texte doit rester lisible sans que
   l'animation disparaisse. Un simple assombrissement uniforme tuerait les
   deux. */
.pg-hero.plein::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Le voile doit CREUSER le centre, pas assombrir uniformément : les libellés
     de l'animation concurrençaient le titre au lieu de l'accompagner. */
  background:radial-gradient(90% 68% at 50% 50%,
    rgba(5,5,10,.97) 0%, rgba(5,5,10,.93) 30%, rgba(5,5,10,.62) 62%,
    rgba(5,5,10,.18) 85%, transparent 100%);
}
.hero-avant{ position:relative; z-index:2; max-width:960px; margin:0 auto }

/* Titre : court, lourd, deux lignes, point final. « Créez votre QR Code.
   Collectez plus de dons. » se lit en une seconde ; une proposition élégante
   de quatre lignes ne se lit pas du tout. */
.pg-hero.plein h1{
  font-size:clamp(38px,6.2vw,76px); line-height:1.02; letter-spacing:-.035em;
  font-weight:900; margin:0 auto 20px; max-width:16ch;
}
.pg-hero.plein .pg-sub{
  font-size:clamp(15.5px,1.5vw,19px); max-width:50ch; margin:0 auto 34px;
  color:rgba(226,232,240,.72);
}
.hero-duo{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.hero-duo .btn{ margin:0 }
/* Le second bouton translucide, comme chez Donoor : présent sans concurrencer. */
.btn-fantome{
  display:inline-flex; align-items:center; gap:8px; min-height:48px;
  padding:14px 24px; border-radius:100px; font-weight:600; font-size:15px;
  color:#e2e8f0; text-decoration:none;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .15s,border-color .15s;
}
.btn-fantome:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3) }

.pg-hero.plein .breadcrumb{ margin-bottom:18px; opacity:.75 }
.pg-hero.plein .pg-tag{ margin-bottom:22px }

@media (max-width:1023px){
  .pg-hero.plein{ min-height:auto; padding:96px 6% 72px }
  .hero-fond .canevas{ width:150%; opacity:.5 }
  .pg-hero.plein::after{
    background:radial-gradient(140% 80% at 50% 50%,
      rgba(5,5,10,.92) 0%, rgba(5,5,10,.78) 45%, rgba(5,5,10,.35) 85%, transparent 100%);
  }
}