/* =========================================================================
   home.css — Accueil TEGEA v2
   Le hero est l'animation « G » historique (logo TEGEA → le G tourne et
   devient l'estrade → les 4 sphères s'y posent), servie par static/dist.
   Ce fichier n'ajoute qu'une surcouche premium + les sections de la page.
   ========================================================================= */

/* ---- Raffinements du hero « G / estrade / sphères » ---------------------- */
/* Halo chaud très discret derrière la scène, grain global déjà appliqué. */
.gh-hero{
  background:
    radial-gradient(72% 54% at 50% 4%, rgba(232,132,42,.055) 0%, transparent 62%),
    radial-gradient(90% 70% at 50% 108%, rgba(35,72,97,.05) 0%, transparent 55%),
    #f7f4ee;
}

/* Trait du logo étoffé — monoline affirmé mais élégant à l'échelle du hero. */
.gh-stroke{stroke-width:7.8}
/* Le G — signature de la marque — en orange TEGEA.
   Épaisseur pilotable via --gw (animée pendant la choré) ; 7.8 px au repos. */
.gh-stroke--g{stroke:var(--orange,#e8842a);stroke-width:var(--gw,7.8)}

/* Sphères : perle plus chaude, ombres teintées navy plus profondes */
.gh-sphere-face{
  background-color:#f1ede4;
  background-image:
    radial-gradient(circle at 37% 24%, #ffffff, rgba(255,255,255,0) 54%),
    radial-gradient(circle at 50% 66%, #f6f1e8 0%, #dde2e4 100%);
  border-color:rgba(35,72,97,.22);
  box-shadow:
    inset 0 3px 12px rgba(255,255,255,.85),
    inset 0 -16px 30px rgba(35,72,97,.08),
    0 26px 52px -24px rgba(27,58,77,.55);
}
.gh-sphere:hover .gh-sphere-face{
  border-color:rgba(232,132,42,.6);
  box-shadow:
    0 34px 60px -24px rgba(27,58,77,.55),
    0 0 0 1.5px rgba(232,132,42,.32);
}
/* Titre de sphère = intitulé complet de l'offre (« Ajuster la trajectoire »…) :
   police généreuse (le sous-titre a été retiré, la place est libre) mais qui
   tient sur 2 lignes dans le disque (immersif) comme dans les cartes. */
.gh-spheres-layer .gh-sphere-verb{font-size:12cqw;line-height:1.1}
.gh-cards .gh-sphere-verb{font-size:1.14rem}

/* Invite finale : encadrée de deux tirets orange, encre plus posée */
.gh-prompt{color:var(--navy-700);font-weight:650;letter-spacing:.22em}
.gh-hero:not(.is-static) .gh-prompt::before,
.gh-hero:not(.is-static) .gh-prompt::after{
  content:"";display:inline-block;width:26px;height:2px;border-radius:2px;
  background:var(--orange);vertical-align:middle;
}
.gh-hero:not(.is-static) .gh-prompt::before{margin-right:14px}
.gh-hero:not(.is-static) .gh-prompt::after{margin-left:14px}

/* Repère de scroll accordé à la charte */
.gh-cue{color:var(--navy-700)}

/* Mode statique (mobile / reduced-motion) : l'invite reste sereine */
.gh-hero.is-static .gh-prompt{color:var(--navy)}

/* ---- Piliers (Erik + le modèle) ------------------------------------------ */
.pillars{gap:26px}
.pillar{
  position:relative;background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--orange);
  border-radius:var(--radius);padding:34px 36px 34px;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:transform .32s var(--t),box-shadow .32s var(--t);
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pillar-char{
  width:96px;height:96px;object-fit:contain;margin-bottom:18px;
  filter:drop-shadow(0 12px 16px rgba(27,58,77,.16));
}
.pillar h3{margin-bottom:.45em}
.pillar p{font-size:.97rem;color:var(--navy-700);margin-bottom:1.1rem}
.pillar .link-arrow{margin-top:auto}

/* ---- Cartes des 4 offres -------------------------------------------------- */
.home-offer-card{overflow:hidden;padding-bottom:26px}
.home-offer-card .card-num i{font-style:normal;color:var(--muted);letter-spacing:.06em}
.home-offer-card h3{margin-top:.55em}
.home-offer-card .card-char{
  position:absolute;right:-14px;bottom:-12px;width:104px;opacity:.14;pointer-events:none;
  transition:opacity .35s,transform .45s var(--t);
}
.home-offer-card:hover .card-char{opacity:.3;transform:translateY(-6px) rotate(-2deg)}