/* Dessins façon crayon d'enfant, répartis dans le site (en plus de ceux
   du hero) : le tracé est animé par GSAP, voir
   assets/scripts/gsap/section-doodles.js. Chaque trait est caché par
   défaut (opacity: 0) — si GSAP ne se charge pas, le dessin reste
   simplement absent, jamais à moitié tracé. La position/couleur précise
   de chaque dessin se règle dans le fichier CSS de sa section. */
.doodle {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.doodle path,
.doodle circle,
.doodle line,
.doodle polyline {
    opacity: 0;
}

/* Grande ligne décorative en arrière-plan (style "surligneur"), qui se
   dessine au rythme exact du scroll dans la section (data-scrub="true").
   Teinte turquoise commune à toutes, pour une touche cohérente et bien
   distincte des petits dessins d'accent (soleil, étoile, gribouillis...).
   Très fine opacité : elle reste discrète derrière le contenu. */
.doodle-bg-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    stroke: #bf96ff;
    stroke-width: 6;
    opacity: 0.12;
}
/* Le hero a deux tracés (un large, un vertical) : un seul affiché à la
   fois selon la largeur d'écran, pour ne jamais étirer/écraser le mauvais
   tracé dans un cadre qui ne lui convient pas. */
.doodle-bg-line-mobile {
    display: none;
}
@media (max-width: 800px) {
    .doodle-bg-line-desktop {
        display: none;
    }
    .doodle-bg-line-mobile {
        display: block;
    }
}

/* Effet "scroll reveal" : chaque <section> apparaît en fondu/glissement
   quand elle entre dans l'écran (géré par assets/scripts/reveal.js).
   Pur CSS — plus léger que GSAP pour ce genre de petite apparition. */
section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Cartes : apparition en cascade quand leur section devient visible.
   Pour animer une nouvelle carte, ajoute simplement sa classe à cette liste. */
section :is(
    .value-card,
    .principle-card,
    .step-card,
    .dimension-card,
    .programme-highlight,
    .habitude-card,
    .groupe-card,
    .infos-card,
    .parents-card,
    .contact-card,
    .step
) {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.5s ease,
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                background-color 0.2s ease;
}
/* Les blocs "programme-highlight" glissent depuis la gauche */
section .programme-highlight {
    transform: translateX(-40px);
}

section.is-visible :is(
    .value-card,
    .principle-card,
    .step-card,
    .dimension-card,
    .programme-highlight,
    .habitude-card,
    .groupe-card,
    .infos-card,
    .parents-card,
    .contact-card,
    .step
) {
    opacity: 1;
    transform: none;
}

/* Délai en cascade selon la position de la carte dans son conteneur */
section.is-visible :is(
    .value-card, .principle-card, .step-card, .dimension-card, .programme-highlight,
    .habitude-card, .groupe-card, .infos-card, .parents-card, .contact-card, .step
) {
    transition-delay: calc(0.1s + var(--i, 0) * 0.1s);
}
section.is-visible :is(
    .value-card, .principle-card, .step-card, .dimension-card, .programme-highlight,
    .habitude-card, .groupe-card, .infos-card, .parents-card, .contact-card, .step
):nth-child(2) { --i: 1; }
section.is-visible :is(
    .value-card, .principle-card, .step-card, .dimension-card, .programme-highlight,
    .habitude-card, .groupe-card, .infos-card, .parents-card, .contact-card, .step
):nth-child(3) { --i: 2; }
section.is-visible :is(
    .value-card, .principle-card, .step-card, .dimension-card, .programme-highlight,
    .habitude-card, .groupe-card, .infos-card, .parents-card, .contact-card, .step
):nth-child(4) { --i: 3; }
section.is-visible :is(
    .value-card, .principle-card, .step-card, .dimension-card, .programme-highlight,
    .habitude-card, .groupe-card, .infos-card, .parents-card, .contact-card, .step
):nth-child(5) { --i: 4; }
section.is-visible :is(
    .value-card, .principle-card, .step-card, .dimension-card, .programme-highlight,
    .habitude-card, .groupe-card, .infos-card, .parents-card, .contact-card, .step
):nth-child(n+6) { --i: 5; }

/* Survol : la carte se soulève, sans délai */
section.is-visible :is(
    .value-card, .principle-card, .step-card, .dimension-card, .programme-highlight,
    .habitude-card, .groupe-card, .infos-card, .parents-card, .contact-card, .step
):hover {
    transform: translateY(-6px);
    transition-delay: 0s;
}

/* Respecte les utilisateurs qui ont désactivé les animations
   dans leur système (accessibilité) */
@media (prefers-reduced-motion: reduce) {
    section,
    section :is(
        .value-card, .principle-card, .step-card, .dimension-card, .programme-highlight,
        .habitude-card, .groupe-card, .infos-card, .parents-card, .contact-card, .step
    ) {
        opacity: 1;
        transform: none;
        transition: none;
    }
}