/* ══════════════════════════════════════════════
   motion-v2.css · Greolas Africa · home (FR)
   Surcouche chargee APRES asset/greolas.css.
   Reprend la grammaire de mouvement de lmscom.fr (pg-home-motion.css),
   DA strictement Greolas (tokens de greolas.css, aucune couleur/police
   lmscom). Regle de dosage du brand-board respectee : aucun nouveau
   tapis de motif, aucun nouveau decor origami, un seul moment
   signature (le mark qui s'ouvre dans le hero).
   Sans JS ou en mouvement reduit : tout est visible, rien ne bouge.
   ══════════════════════════════════════════════ */

/* ── SplitText : unites de decoupe ── */
.gm-ch, .gm-w { display: inline-block; will-change: transform, opacity; }
h1 .gm-ch, h2 .gm-ch { transform-origin: 50% 100%; }

/* ── Moment signature : le mark s'ouvre dans le hero ──
   Grand, dans le vide en haut a droite du hero (au-dessus de la colonne
   des preuves) : positionne relativement a .wrap (donc a la colonne de
   contenu) pour rester aligne au meme point quel que soit l'ecart entre
   le wrap (plafonne a --max) et le viewport. Jamais derriere ou sur un
   texte : verifie sans chevauchement H1/intro/CTA/liste a 1024-1920. */
.hero .wrap { position: relative; }
.gm-hero-mark-slot {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(190px, 22vw, 300px);
    z-index: 2;
    pointer-events: none;
}
/* .wrap plafonne a --max (1180px) des ~1310px de viewport : au-dela, la
   colonne des preuves arrete de descendre, donc le mark doit arreter de
   grandir avec vw ou il finit par mordre sur la liste (verifie a 1920). */
@media (min-width: 1310px) {
    .gm-hero-mark-slot { width: 300px; }
}
.gm-hero-mark { display: block; width: 100%; height: auto; color: var(--kola-clair); }
.gm-mark-l, .gm-mark-r { transform-box: fill-box; }
@media (max-width: 900px) {
    .gm-hero-mark-slot { display: none; }
}

/* ── Titres : traitements SplitText (jump / wipe / fill) ── */
[data-gm-title] { isolation: isolate; }

/* ── Parcours "La semaine" dessine au scroll ── */
.semaine__liste { position: relative; }
.gm-steps-line {
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 6px;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}
.gm-steps-track { stroke: rgba(23, 18, 16, .14); stroke-width: 2; stroke-linecap: round; }
.gm-steps-draw { stroke: var(--kola); stroke-width: 3; stroke-linecap: round; }
.sombre .gm-steps-track { stroke: rgba(244, 237, 224, .18); }
.sombre .gm-steps-draw { stroke: var(--kola-clair); }
.semaine__liste .registre__ligne { position: relative; }
.semaine__liste .registre__ligne::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kola);
    transform: scale(0);
    transition: transform .5s var(--ease-out-quint);
    z-index: 1;
}
.sombre .semaine__liste .registre__ligne::before { background: var(--kola-clair); }
.semaine__liste .registre__ligne.vu::before { transform: scale(1); }
@media (max-width: 900px) {
    .gm-steps-line, .semaine__liste .registre__ligne::before { display: none; }
}

/* ── Rail des realisations : fleches + glisser ── */
.mur { position: relative; }
.mur__nav { position: absolute; top: -60px; right: 0; display: flex; gap: .5rem; z-index: 2; }
.mur__prev, .mur__next {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(23, 18, 16, .22); background: transparent; color: inherit;
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-etat) var(--ease-out-quart),
                border-color var(--t-etat) var(--ease-out-quart),
                color var(--t-etat) var(--ease-out-quart);
}
.mur__prev:hover, .mur__next:hover { background: var(--kola); border-color: var(--kola); color: #fff; }
.mur__prev:disabled, .mur__next:disabled { opacity: .32; cursor: default; }
.mur__prev:disabled:hover, .mur__next:disabled:hover { background: transparent; border-color: rgba(23, 18, 16, .22); color: inherit; }
@media (hover: hover) and (pointer: fine) { .mur__piste { cursor: grab; } }
.mur__piste.is-grab { cursor: grabbing; scroll-snap-type: none; }
@media (max-width: 640px) { .mur__nav { display: none; } }

/* ── Ruban : bascule vers la boucle GSAP quand JS est actif ── */
html.gm-loop .ruban__piste { animation: none; will-change: transform; }

/* ── Survols magnetiques ── */
.gm-magnet { display: inline-flex; will-change: transform; }
a.gm-magnet, button.gm-magnet { display: inline-flex; }

/* ── FAQ animee : la reponse garde sa hauteur naturelle apres l'anim ── */
.faq details[open] p { overflow: hidden; }

/* ── Mouvement reduit : tout visible, rien n'anime ── */
@media (prefers-reduced-motion: reduce) {
    .gm-hero-mark-slot { opacity: 1; transform: none !important; }
    .gm-mark-l, .gm-mark-r { transform: none !important; }
    html.gm-loop .ruban__piste { animation: none; }
    .semaine__liste .registre__ligne::before { transform: scale(1); }
    .mur__piste { cursor: auto; }
}