/* ==========================================================================
   HERO — bandeau d'en-tête de page. Variantes utilisées sur l'ensemble des
   pages (fullphoto sur l'accueil/la marque, split sur produit/saveurs,
   iconside sur revendeurs/contact/faq, simple sur mentions légales).
   ========================================================================== */

.hero {
    position: relative;
    padding: 150px 0 90px;
    overflow: hidden
}

.hero.full {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 72px
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 60% at 16% 86%, rgba(120, 135, 150, .07), transparent 60%)
}

.hero-bg.cool {
    background: radial-gradient(50% 60% at 16% 86%, rgba(120, 135, 150, .07), transparent 60%)
}

.hero-mouse {
    display: none
}

.hero .wrap {
    position: relative;
    width: 100%
}

.hero.split .wrap {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 24px;
    align-items: center
}

.hero.split.wide .wrap {
    max-width: 1670px;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 22px
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--lime)
}

.hero h1 {
    font-size: clamp(46px, 7.6vw, 100px);
    margin-bottom: 20px
}

.hero h1 .o {
    -webkit-text-stroke: 1.6px var(--blanc);
    color: transparent
}

.hero .sub {
    font-size: clamp(16px, 1.3vw, 19px);
    color: #d2d2ce;
    max-width: 460px;
    line-height: 1.55;
    margin-bottom: 30px
}

.hero .sub b {
    color: var(--blanc)
}

.hero-prod {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px
}

.hero-prod .ring {
    position: absolute;
    border: 1px solid #101014;
    border-radius: 50%
}

.hero-prod .r1 {
    width: 460px;
    height: 460px
}

.hero-prod .r2 {
    width: 660px;
    height: 660px;
    border-color: #0b0b0e
}

.hero-prod img {
    width: min(98%, 860px)
}

.hero-meta {
    display: flex;
    gap: 26px;
    margin-top: 34px;
    flex-wrap: wrap
}

/* Sur la home, ce bloc liste les 3 gammes (texte court) plutot que des
   compteurs numeriques : taille reduite par rapport a l'ancien 32px, pensee
   pour un nom de produit sur 1-2 mots plutot qu'un chiffre. */
.hero-meta .m b {
    font-family: var(--util);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    display: block
}

.hero-meta .m span {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gris)
}

/* HERO FULL PHOTO (accueil / marque / usages) — plafonnee a 80vh (photo ou
   video en fond) */
.hero.fullphoto {
    height: 80vh;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 112px 0 64px;
    overflow: hidden
}

.hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0
}

.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% 28%
}

.hero-photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%)
}

/* Page Usages : video hero en couleur, pas de desaturation (demande
   Herve). Le fullphoto video generique reste desature (ex. Collab). */
body[data-tone="usages"] .hero-photo video {
    filter: none
}

#page-marque .hero-photo img {
    object-position: 62% 30%
}

.hero-photo .hp-mobile {
    display: none
}

.hero-photo:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #000 0%, #000 28%, rgba(0, 0, 0, .88) 41%, rgba(0, 0, 0, .42) 54%, rgba(0, 0, 0, .06) 66%, transparent 76%),
        linear-gradient(180deg, rgba(0, 0, 0, .32), transparent 24%, transparent 76%, rgba(0, 0, 0, .55));
    opacity: .5
}

.hero.fullphoto .wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1670px
}

.hero-copy {
    max-width: 540px
}

.hero-meta .m {
    padding-left: 0
}

.hero-meta .m+.m {
    padding-left: 26px;
    border-left: 1px solid var(--ligne)
}

.hero-meta .micon {
    display: none
}

/* HERO ICON SIDE (revendeurs / contact / faq) */
.hero.iconside .wrap {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 70px;
    max-width: 1670px
}

.hero.iconside .wrap>div:first-child {
    max-width: 620px;
    flex: 0 1 auto
}

.hero-icon {
    display: flex;
    align-items: center
}

.hero-icon img {
    height: 100%;
    max-height: 460px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(148, 163, 178, .12))
}

.hero-icon.shift-contact img {
    transform: translate(-34px, 26px)
}

@media(max-width:900px) {
    .hero.split .wrap {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .hero.split.wide .wrap {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .hero-prod {
        min-height: 340px;
        order: -1
    }

    .hero-prod .r1,
    .hero-prod .r2 {
        display: none
    }

    .hero-meta {
        gap: 20px
    }

    /* Titre par-dessus la photo/video (comme en desktop), plafonne a 80vh,
       au lieu de l'ancien empilement photo au-dessus / texte en dessous.
       IMPORTANT : sur mobile (Safari iOS notamment), "vh" se calcule sur la
       hauteur d'ecran barre d'adresse masquee (la plus grande possible), pas
       sur ce qui est reellement visible au chargement (barre affichee) —
       resultat, 70vh/80vh peut visuellement remplir tout l'ecran tant que la
       barre n'a pas disparu, meme si le CSS est correct. On ajoute "svh"
       (small viewport height, calculee sur le plus petit espace visible
       possible) en repli progressif : les navigateurs qui le supportent
       l'utilisent a la place et la video ne deborde plus jamais de la zone
       reellement visible. Les navigateurs qui ne le supportent pas ignorent
       la ligne et gardent la valeur "vh" ci-dessus. */
    .hero.fullphoto {
        height: 80vh;
        height: 80svh;
        min-height: 80vh;
        min-height: 80svh;
        display: flex;
        align-items: center;
        padding: 90px 0 40px;
        overflow: hidden
    }

    .hero-photo {
        position: absolute;
        inset: 0;
        height: 100%;
        max-height: none;
        border-radius: 0;
        overflow: hidden;
        margin-bottom: 0
    }

    .hero-photo .hp-desktop {
        display: none
    }

    .hero-photo .hp-mobile {
        display: block
    }

    .hero-copy {
        max-width: none
    }

    .hero-meta {
        justify-content: space-between
    }

    .hero-meta .m {
        flex: 1;
        padding-left: 0 !important;
        border-left: none !important;
        text-align: left
    }

    .hero-meta .micon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        color: var(--lime);
        margin-bottom: 8px;
        font-size: 17px
    }

    .hero.iconside .wrap {
        flex-direction: column;
        gap: 0
    }

    .hero.iconside .wrap>div:first-child {
        max-width: none
    }

    .hero-icon {
        display: none
    }
}