.hero{
    background-color: #e6d7ff;
}
.hero-image{
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* Mobile d'abord : logo/texte empilés au-dessus de l'image */
.hero-container {
    position: relative; /* ancre pour .service-de-garde (absolute) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-block: 60px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
}

/* C'est le vrai <h1> de la page (SEO) — voir hero.php. Il garde
   volontairement l'apparence d'un petit badge pour ne pas changer le
   look du hero ; font-family explicite pour ignorer la police des titres
   (Fredoka) appliquée par défaut à h1-h6 dans base.css. */
.hero-badge {
    display: inline-block;
    align-self: flex-start;
    background-color: #fff;
    border: 1px solid #7B2D8E;
    color: #7B2D8E;
    font-family: var(--font-base);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px 6px;
    border-radius: 999px;
}

/* .hero-title (et non plus un sélecteur "h1") : le titre du hero est
   redevenu un <h2> visuellement identique — le vrai <h1>, pensé pour le
   SEO, est maintenant plus bas sur la page (voir mission-v2.php). Cibler
   la classe plutôt que la balise évite de casser ce style si la balise
   change encore. */
.hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #2d1b4e; /* violet foncé, à ajuster selon ta charte de couleurs */
}

.hero-highlight {
    color: #7B2D8E;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Les surlignages pastel standards (base.css) se fondent dans le fond
   mauve du hero (#e6d7ff) — versions plus vives, propres au hero, pour
   qu'ils se détachent bien sur ce fond-là spécifiquement. */
.hero-title .hl-pink   { --hl-color: #F6A9C6; }
.hero-title .hl-yellow { --hl-color: #FFDD70; }

/* Petit cœur dessiné à la main, à côté du texte */
.hero-heart {
    width: 20px;
    height: 18px;
    fill: #E77EA6;
    flex-shrink: 0;
}

/* Vaguelette décorative sous "Bienveillance" — dessinée en SVG inline,
   aucun fichier image à gérer, invisible pour les lecteurs d'écran. */
.hero-underline {
    position: relative;
    display: inline-block;
    margin-bottom: 20px; /* espace entre le texte et la vaguelette */
}
.hero-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 100%;
    height: 50px;
    background-image: url("../img/ligne/ligne-jaune.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.hero-features {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 20px;
    margin-top: 24px;
}
.hero-feature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 180px;
}
.hero-feature-number {
    font-weight: 700;
}

/* Une couleur différente par position, sans ajouter de classe dans le HTML */
.hero-feature:nth-child(1) .hero-feature-number { color: #E23A32; }
.hero-feature:nth-child(2) .hero-feature-number { color: #22B0E0; }
.hero-feature:nth-child(3) .hero-feature-number { color: #A5C61B; }


/* Bandeau de statistiques sous le hero : 4 boîtes colorées à bord supérieur ondulé.
   Version desktop d'origine, inchangée — c'est la version de base ici. */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: transparent; /* on voit le fond du hero derrière les vagues */
    padding-top: 12px;
}
.hero-stat {
    position: relative;
    background: var(--c);
    color: var(--txt, #fff);
    text-align: center;
    margin-top: 26px; /* espace pour la vague du haut */
    padding: 6px 16px 26px;
}
.hero-stat-wave-top {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 26px;
    display: block;
    fill: var(--c);
}
/* Varie la vague d'une boîte à l'autre */
.hero-stat:nth-child(even) .hero-stat-wave-top { transform: scaleX(-1); }

.hero-stat-wave-line {
    display: block;
    width: 55%;
    max-width: 140px;
    height: 18px;
    margin: 0 auto 14px;
    fill: none;
    stroke: var(--line, #fff);
    stroke-width: 3.5;
    stroke-linecap: round;
}
.hero-stat strong {
    display: block;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
}
.hero-stat span {
    display: block;
    font-size: .8rem;
    margin-top: 6px;
    opacity: .95;
}

/* En dessous de 801px : même formule qu'en desktop (bandes pleine couleur
   empilées, vagues), juste plus compacte — et sans l'espace entre les
   bandes qui laissait le mauve du hero percer dans les creux de chaque
   vague. Ici, les bandes se touchent (margin-top: 0) et la vague de
   chaque bande chevauche directement la précédente : les couleurs
   s'enchaînent sans aucun interstice. Seule la toute première vague,
   en haut, garde son espace pour la transition avec le fond du hero
   (padding-top sur .hero-stats). La version desktop ci-dessus n'est pas
   touchée. */
@media (max-width: 800px) {
    .hero-stats {
        grid-template-columns: 1fr;
        padding-top: 20px; /* place pour la vague de la toute première bande */
    }
    .hero-stat {
        margin-top: 0; /* les bandes suivantes touchent directement la précédente */
        padding: 10px 20px 40px;
    }
    .hero-stat-wave-top {
        height: 22px; /* chevauche la bande précédente plutôt que de laisser un vide */
    }
    .hero-stat-wave-line {
        height: 16px;
        margin-bottom: 10px;
    }
    .hero-stat strong {
        font-size: 1.55rem;
    }
    .hero-stat span {
        font-size: .8rem;
        margin-top: 6px;
    }
}
.service-de-garde{
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 1;
}

/* Petits dessins façon crayon d'enfant (soleil, étoile, gribouillis),
   visibles à toutes les tailles d'écran : le tracé est animé par GSAP,
   voir assets/scripts/hero-doodles.js. Cachés par défaut (opacity: 0 sur
   chaque trait) — si GSAP ne se charge pas, ils restent simplement
   absents, sans jamais s'afficher à moitié dessinés ; rien d'autre sur la
   page n'en dépend. */
.hero-doodle {
    display: block;
    position: absolute;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.hero-doodle path,
.hero-doodle circle,
.hero-doodle line {
    opacity: 0;
}
.hero-doodle-sun {
    width: 50px;
    height: 50px;
    top: 2%;
    left: 2%;
    stroke: #F6C11A; /* jaune de la charte */
    stroke-width: 3;
    z-index: 1;
}
.hero-doodle-sun circle {
    fill: rgba(246, 193, 26, 0.15);
}
.hero-doodle-star {
    width: 36px;
    height: 36px;
    top: 16%;
    right: 4%;
    stroke: #E77EA6; /* rose de la charte */
    stroke-width: 2.5;
    z-index: 1;
}
.hero-doodle-scribble {
    position: static; /* dans le flux, juste sous les boutons */
    display: block;
    width: 140px;
    max-width: 60%;
    height: 26px;
    margin: 4px auto 0;
    stroke: #7B2D8E; /* violet de la charte */
    stroke-width: 3;
}

/* "Wow" : chorégraphie d'entrée au chargement (pur CSS, aucun JS, aucune
   dépendance externe) + bulles décoratives flottantes. S'applique à
   toutes les tailles d'écran. */
.hero-container {
    overflow: hidden; /* garde les bulles flottantes dans le hero */
}

/* Deux bulles décoratives, en arrière-plan du contenu */
.hero-container::before,
.hero-container::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: hero-float 8s ease-in-out infinite;
}
.hero-container::before {
    width: 90px;
    height: 90px;
    top: 4%;
    left: 1%;
    background: rgba(255, 255, 255, 0.4);
}
.hero-container::after {
    width: 56px;
    height: 56px;
    top: 55%;
    right: 2%;
    background: rgba(141, 198, 63, 0.35); /* vert de la charte */
    animation-duration: 10s;
    animation-delay: 1.2s;
}
@keyframes hero-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-18px) scale(1.08); }
}

/* Deux bulles de plus, portées par .hero-content (qui a déjà sa propre
   position: relative plus bas) pour ne pas toucher au HTML. */
.hero-content::before,
.hero-content::after {
    content: "";
    position: absolute;
    z-index: -1; /* reste sous le texte, dans le contexte d'empilement de .hero-content */
    border-radius: 50%;
    pointer-events: none;
    animation: hero-float 9s ease-in-out infinite;
}
.hero-content::before {
    width: 40px;
    height: 40px;
    top: 2%;
    right: 10%;
    background: rgba(231, 126, 166, 0.4); /* rose de la charte */
    animation-duration: 7s;
    animation-delay: 0.5s;
}
.hero-content::after {
    width: 28px;
    height: 28px;
    bottom: 4%;
    left: 2%;
    background: rgba(246, 193, 26, 0.4); /* jaune de la charte */
    animation-duration: 11s;
    animation-delay: 2s;
}

.hero-content,
.hero-image {
    position: relative;
    z-index: 1; /* au-dessus des bulles */
}

/* Chaque bloc du hero arrive l'un après l'autre au chargement */
.hero-badge,
.hero-title,
.hero-content > p,
.hero-actions,
.hero-features,
.hero-image {
    opacity: 0;
    animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-badge                      { animation-delay: 0.05s; }
.hero-title                      { animation-delay: 0.15s; }
.hero-content > p:nth-of-type(1) { animation-delay: 0.32s; }
.hero-content > p:nth-of-type(2) { animation-delay: 0.46s; } /* .hero-highlight */
.hero-actions                    { animation-delay: 0.6s; }
.hero-features                   { animation-delay: 0.74s; }
.hero-image                      { animation-delay: 0.88s; }
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Le petit cœur bat doucement, en continu, une fois arrivé */
.hero-heart {
    animation: hero-heartbeat 1.8s ease-in-out 1.3s infinite;
}
@keyframes hero-heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-container::before,
    .hero-container::after,
    .hero-content::before,
    .hero-content::after,
    .hero-badge,
    .hero-title,
    .hero-content > p,
    .hero-actions,
    .hero-features,
    .hero-image,
    .hero-heart {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* À partir de 768px : texte à gauche, image à droite, côte à côte */
@media (min-width: 768px) {
    .hero-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}