/* ==========================================================================
   1. Conteneur header + fonds (dégradé hero, voile navbar)
   ========================================================================== */

.site-header{
    position: relative;
    width: 100%;
    height: 70vh;

    display: flex;
    flex-direction: column;
}

/* Header compact (pages de service, partials/header-nav-only.ejs) : pas de .site-header-hero,
   donc pas besoin (et surtout pas de la place) de la hauteur 70vh du hero complet — sinon la
   navbar se retrouve avec un immense vide en dessous. */
.site-header--nav-only{
    height: auto;
}

.site-header-background{
    position: absolute;
    inset: 0;
    z-index: 5;

    background: linear-gradient(
        135deg,
        var(--color-primary-dark) 0%,
        var(--color-primary) 100%
    );
}

.site-header-navbar-background{
    position: absolute;
    inset: 0;
    z-index: 6;

    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-header-background) 94%, var(--color-primary) 6%) 0%,
        color-mix(in srgb, var(--color-header-background) 60%, transparent) 24%,
        transparent 42%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    mask-image: linear-gradient(180deg, black 0%, black 18%, transparent 40%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 18%, transparent 40%);
}


/* ==========================================================================
   2. Hero : grille 3x3, 4 zones (carrousel / intro / texte "artisan" / avis)
      directement enfants de .site-header-hero.

           col1       col2         col3
      L1 [carou.]  [ intro  ]   [ vide  ]
      L2 [carou.]  [ (intro)]   [ avis  ]
      L3 [carou.]  [ texte artisan ..... ]
   ========================================================================== */

.site-header-hero{
    position: relative;
    z-index: 7;
    flex: 1 1 auto;

    display: grid;
    /* minmax(0, 1fr) sur les deux axes : un simple 1fr ne descend jamais sous le min-content de
       son contenu (ici la photo du carrousel), ce qui faisait exploser la largeur de la colonne 1
       bien au-delà du viewport (overflow horizontal constaté sur /contact). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0;

    width: 100%;
    max-width: 1280px;
    height: 440px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    box-sizing: border-box;
}

/* div2 : grid-area 1 / 2 / 3 / 3 — lignes 1 et 2 : le titre et le bouton sont centrés ensemble */
.hero-intro{
    grid-area: 1 / 2 / 3 / 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    text-align: center;
}

.hero-title{
    font-family: var(--font-family-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-text);
    text-shadow: 0 1px 16px color-mix(in srgb, var(--color-surface) 80%, transparent);
}

/* Bouton "Devis gratuit", sous le titre dans .hero-intro */
.hero-intro-cta{
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-intro-cta .contact-card--hero{
    align-self: center;
}

/* div1 : grid-area 1 / 1 / 4 / 2 — carrousel-photo sur toute la hauteur du hero, coins arrondis */
.hero-showcase-carousel{
    grid-area: 1 / 1 / 4 / 2;
    padding-right: var(--space-lg);
    box-sizing: border-box;
}

.hero-showcase-carousel .carousel{
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.hero-showcase-carousel .carousel-track{
    height: 100%;
}

/* div3 : grid-area 3 / 2 / 4 / 4 — texte "artisan", large bande en bas, collé au bord gauche */
.hero-text-presentaiton{
    grid-area: 3 / 2 / 4 / 4;
    justify-self: start;
    padding-top: var(--space-lg);
    text-align: left;
}

.hero-text-presentaiton .histoire-title{
    font-family: var(--font-family-heading);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text);
    margin-bottom: var(--space-2xs);
}

.hero-text-presentaiton .presentation-text{
    font-family: var(--font-family-base);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-inverse);
}

/* div4 : grid-area 2 / 3 / 3 / 4 — wrapper neutre (sans filter/opacity) qui porte le placement en
   grille et sert d'ancre à .hero-bee. Le mix-blend-mode de l'abeille a besoin de composer
   directement avec le dégradé du fond ; s'il était descendant de .hero-showcase-center, le
   backdrop-filter de cette dernière créerait un contexte d'empilement qui l'isolerait du fond et
   le blanc du sprite resterait opaque (constaté à l'écran). */
.hero-avis-wrap{
    grid-area: 2 / 3 / 3 / 4;
    align-self: center;
    justify-self: center;
    margin-left: var(--space-lg);
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-showcase-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);

    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-large);
    background-color: color-mix(in srgb, var(--color-surface) 55%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--color-surface) 40%, transparent);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

/* Abeille qui tourne en boucle autour de la pastille avis. Deux animations indépendantes :
   - hero-bee-fly : déplacement le long d'une ellipse centrée sur la pastille (offset-path),
     offset-rotate:auto oriente le sprite dans le sens du vol (donc tête en bas sur le haut du
     tour — assumé, on regarde le rendu).
   - hero-bee-flap : battement d'ailes, permute les 3 sprites (milieu/baissée/levée) par paliers
     nets (steps(1), pas de fondu) — indépendant de la position.
   ⚠️ Les PNG sources fournis avaient un fond blanc plein, sans canal alpha. mix-blend-mode:multiply
   ne suffit pas à le faire disparaître ici : .hero-bee est profondément imbriqué sous
   .site-header-hero, qui a son propre position:relative + z-index (nécessaire pour passer
   au-dessus du dégradé de fond) — ça crée un contexte d'empilement qui isole le blend du dégradé,
   le blanc reste donc opaque (constaté à l'écran). D'où l'usage de copies détourées (fond blanc →
   alpha, générées avec Pillow, redimensionnées à 240px) plutôt que des fichiers sources d'origine
   (supprimés, non référencés une fois les copies en place). */
.hero-bee{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;

    background-image: url("../image/acceuil/animation/abeille-aile-milieu.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;

    offset-path: ellipse(130px 78px at 50% 50%);
    /* offset-rotate:auto orienterait le sprite tangentiellement à la trajectoire — sur un tour
       complet, ça le retourne tête en bas sur toute la moitié haute de l'ellipse. Angle fixe
       (l'abeille garde sa pose "en vol" telle que dessinée, jamais à l'envers) + un flip
       horizontal (hero-bee-face) qui la retourne gauche/droite selon le sens de déplacement réel
       sur l'ellipse, pour qu'elle regarde toujours vers où elle va sans jamais paraître inversée. */
    offset-rotate: 0deg;
    animation:
        hero-bee-fly 9s linear infinite,
        hero-bee-flap 0.36s steps(1) infinite,
        hero-bee-face 9s steps(1) infinite;
}

@keyframes hero-bee-fly{
    to{ offset-distance: 100%; }
}

/* Le tracé de l'ellipse part du point le plus à droite et descend d'abord vers le bas : sur la
   moitié basse du tour (0-50%), l'abeille se déplace vers la gauche (le dessin natif, tête en
   haut à gauche, lui va déjà) ; sur la moitié haute (50-100%), elle se déplace vers la droite,
   d'où le flip horizontal. Retournement net (steps(1)) plutôt qu'une transition : le passage par
   scaleX(0) pendant la transition écrasait visuellement le sprite (rendu cassé). */
@keyframes hero-bee-face{
    0%{ transform: scaleX(1); }
    50%{ transform: scaleX(-1); }
    100%{ transform: scaleX(-1); }
}

@keyframes hero-bee-flap{
    0%{ background-image: url("../image/acceuil/animation/abeille-aile-milieu.webp"); }
    33%{ background-image: url("../image/acceuil/animation/abeille-aile-baissee.webp"); }
    66%{ background-image: url("../image/acceuil/animation/abeille-aile-levee.webp"); }
    100%{ background-image: url("../image/acceuil/animation/abeille-aile-milieu.webp"); }
}

/* Abeille libre : mêmes classes de base (.hero-bee), mais ancrée sur le centre de
   .site-header-hero avec une grande ellipse qui parcourt toute la largeur du header (pas une
   petite boucle collée à un élément, comme celle sur la pastille avis) — vol plus lent et plus
   ample pour donner une impression de liberté. animation-duration en liste (une valeur par
   animation du raccourci "animation" posé sur .hero-bee : fly, flap, face, dans cet ordre). */
.hero-bee--free{
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    offset-path: ellipse(440px 130px at 50% 50%);
    animation-duration: 16s, 0.34s, 16s;
}

/* Rat qui fait des allers-retours en ligne droite le long du bas de TOUT le header (ancré sur
   .site-header, position:relative — pas sur le carrousel). z-index au-dessus du dégradé de fond
   (5) et du hero (7) pour rester visible sur toute la largeur. Deux animations indépendantes,
   même principe que les abeilles : déplacement + flip (hero-rat-run) et cycle de jambes
   (hero-rat-legs, 3 sprites, steps(1)). */
.hero-rat{
    position: absolute;
    bottom: 4px;
    width: 40px;
    height: 40px;

    background-image: url("../image/acceuil/animation/rat-jambe-milieu.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* pointer-events actif (contrairement aux abeilles) : c'est ce qui permet le hover avec le
       curseur-cible ci-dessous. Ne bloque rien en dessous puisque le rat est petit et se déplace. */
    z-index: 8;

    animation:
        hero-rat-run 34s linear infinite,
        hero-rat-legs 0.6s steps(1) infinite;
}

/* Curseur-cible au survol du rat : copie 32x32 du visuel fourni (447x447 à l'origine, bien trop
   grand pour un curseur, original supprimé une fois la copie en place). Hotspot (16 16) centré sur
   le viseur pour que le point de clic tombe pile dessus. */
.hero-rat:hover{
    cursor: url("../image/acceuil/curseur.png") 16 16, crosshair;
}

/* Aller-retour en une seule passe 0%-100% plutôt que animation-direction:alternate (qui aurait
   demandé de synchroniser une 2e animation de flip en sens inverse — pas simple avec steps()).
   left en %, relatif à la largeur de .site-header (le containing block) — contrairement à
   transform:translateX(%) qui se baserait sur la largeur du sprite lui-même (40px). Bornes 2%/97%
   (pas -4%/102%) : .site-header fait toute la largeur de la fenêtre, donc sortir de 0-100% faisait
   dépasser le rat hors du viewport (popping/scrollbar horizontal au demi-tour). Le flip horizontal
   (scaleX) est net (timing-function steps(1) posé sur le palier 50%→50.6%) : dessiné tourné vers la
   droite nativement, donc scaleX(-1) quand il court vers la gauche. Le flip retour (100%→0%,
   boucle) est déjà instantané "gratuitement" (les timing-functions ne s'appliquent pas au bouclage
   entre deux itérations). */
@keyframes hero-rat-run{
    0%{ left: 2%; transform: scaleX(1); animation-timing-function: linear; }
    50%{ left: 97%; transform: scaleX(1); animation-timing-function: steps(1); }
    50.6%{ left: 97%; transform: scaleX(-1); animation-timing-function: linear; }
    100%{ left: 2%; transform: scaleX(-1); }
}

@keyframes hero-rat-legs{
    0%{ background-image: url("../image/acceuil/animation/rat-jambe-milieu.webp"); }
    33%{ background-image: url("../image/acceuil/animation/rat-jambe-etendue.webp"); }
    66%{ background-image: url("../image/acceuil/animation/rat-jambe-repliee.webp"); }
    100%{ background-image: url("../image/acceuil/animation/rat-jambe-milieu.webp"); }
}

.hero-showcase-stars{
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: var(--color-accent-dark);
}

.hero-showcase-score{
    font-family: var(--font-family-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text);
}

.hero-showcase-reviews{
    font-family: var(--font-family-base);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--color-text-soft);
}


/* ==========================================================================
   3. Responsive — tablette et mobile (≤1024px, même palier que navbar.css) : la grille 3x3
   fixe (hauteur 320px, grid-area en dur) ne tient pas sur un écran étroit, donc on repasse tout
   en colonne empilée (display:flex) dans l'ordre du DOM — carrousel, titre, bouton, texte
   "artisan", avis — plutôt que de rejouer les grid-area en media query. Les grid-area posées plus
   haut deviennent simplement no-op sous flex, pas besoin de les annuler une par une.
   ========================================================================== */

@media (max-width: 1024px){
    .site-header{
        height: auto;
    }

    .site-header-hero{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        gap: var(--space-lg);
        padding: var(--space-lg) var(--space-md);
    }

    .hero-showcase-carousel{
        width: 100%;
        max-width: 380px;
        aspect-ratio: 4 / 3;
        padding-right: 0;
    }

    .hero-intro,
    .hero-intro-cta,
    .hero-text-presentaiton{
        width: 100%;
        justify-self: unset;
        padding-top: 0;
    }

    .hero-avis-wrap{
        margin-left: 0;
    }

    /* Animations décoratives coupées sur tablette/mobile : perf (offset-path + plusieurs
       animations simultanées) et les trajectoires en % sont calées sur la largeur du hero en
       version desktop (ligne, ellipses) — plus pertinentes une fois le hero empilé en colonne. */
    .hero-bee,
    .hero-rat{
        display: none;
    }
}