/* =============================================================
   Sonia Orriger — Bandeau d'accueil
   Trois zones : les fumées (mécanismes de défense), l'illustration,
   le titre. Empilées sur mobile, côte à côte à partir de 1024px.
   ============================================================= */

.hero {
    position: relative;
    padding-block: var(--e-lg) var(--e-3xl);
    overflow: hidden;
}

.hero__grille {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--e-2xl);
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
    grid-template-areas:
        "pitch"
        "illu"
        "defenses";
}

/* ── Mention manuscrite en breton ───────────────────────────── */
.hero__mention {
    position: relative;
    z-index: 3;
    max-width: var(--largeur-max);
    margin: 0 auto var(--e-md);
    padding-inline: var(--gouttiere);
    font-family: var(--f-plume);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    text-align: right;
    color: var(--c-encre);
}

.hero__mention .svg-soulignement {
    width: clamp(90px, 12vw, 150px);
    height: auto;
    margin-left: auto;
    color: var(--c-olive);
}

/* ── Le titre et la carte de visite ─────────────────────────── */
.hero__pitch {
    position: relative;
    grid-area: pitch;
}

/* Partie colorée du fond (image de Sonia). Calque pleine largeur, sous la
   grille : la partie grise passe par-dessus. Le canevas est conservé entier
   et calé à droite, pour garder l'emplacement voulu dans sa maquette. */
.hero__aquarelle {
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;              /* mobile : derrière le titre et le portrait */
    z-index: 0;
    pointer-events: none;
}

.hero__aquarelle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 45%; /* centre de la zone colorée de l'image */
}

.hero__titre {
    display: flex;
    flex-direction: column;
    font-family: var(--f-titre);
    font-weight: 900;
    font-stretch: 76%;          /* la maquette utilise un Archivo nettement condensé */
    line-height: .9;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--c-encre);
}

.hero__titre-haut { font-size: var(--t-hero-haut); }
.hero__titre-bas  { font-size: var(--t-hero-bas); }

.hero__sous-titre {
    margin-top: var(--e-md);
    font-size: clamp(1.05rem, 1.9vw, 1.45rem);
    line-height: 1.45;
    color: var(--c-encre);
}

.hero__sous-titre::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin-top: var(--e-md);
    background-color: var(--c-encre);
}

/* ── Portrait et signature ──────────────────────────────────── */
.hero__carte-visite {
    display: grid;
    justify-items: center;
    text-align: center;
    margin-top: var(--e-xl);
}

.hero__portrait {
    width: clamp(160px, 22vw, 230px);
    aspect-ratio: 1;
    margin-bottom: var(--e-sm);
    border-radius: var(--r-rond);
    overflow: hidden;
    box-shadow: 0 0 0 6px var(--c-blanc), var(--ombre-carte);
}

.hero__portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__signature {
    margin-bottom: 0;
    font-family: var(--f-plume);
    font-size: var(--t-signature);
    line-height: 1.1;
}

.hero__role {
    font-size: var(--t-petit);
    line-height: 1.4;
    color: var(--c-encre-doux);
}

/* ── Illustration au trait ──────────────────────────────────── */
.hero__illustration {
    position: relative;
    z-index: 2;
    grid-area: illu;
    align-self: end;
    justify-self: center;
    width: min(100%, 360px);
}

.hero__illustration-img {
    width: 100%;
    height: auto;
}

/* ── Les fumées et les phrases ──────────────────────────────── */
.hero__defenses {
    position: relative;
    grid-area: defenses;
    display: grid;
    align-content: center;
    padding-block: clamp(1rem, 3vw, 2rem);
}

/* Le nuage n'englobe que les phrases : la phrase clé reste sur fond clair */
.hero__nuage {
    position: relative;
    padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 3rem);
}

/* Partie grise du fond (image de Sonia), convertie en noir + transparence :
   identique sur blanc, et elle assombrit la couleur au lieu de la masquer.

   Ancrage : le point de l'image où se trouve le centre de sa masse sombre
   (26,9 % × 35,2 % du fichier recadré) est posé au centre du bloc des phrases.
   translate() en pourcentage se rapporte à l'image elle-même, d'où un
   centrage exact à toutes les largeurs — et les cercles restent ronds,
   l'image n'étant jamais déformée. */
.hero__fumees {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero__fumees img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--fumees-echelle, 2.4) * 100%);
    max-width: none;
    height: auto;
    transform: translate(-26.9%, -35.2%);

    /* Les cercles sont coupés aux bords haut et gauche de son image. Quand ces
       bords tombent dans l'écran (grands écrans, empilement mobile), un fondu
       remplace la coupure franche. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 12%),
        linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to right, transparent 0, #000 12%),
        linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
            mask-composite: intersect;
}

.hero__defenses-liste {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: clamp(.9rem, 2.4vw, 1.8rem) clamp(.5rem, 2vw, 1.5rem);
    text-align: center;
}

.hero__defense {
    font-family: var(--f-texte);
    font-weight: var(--g-normal);
    letter-spacing: var(--l-large);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--c-blanc);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.hero__defense--sm { font-size: clamp(.7rem, 1.4vw, .82rem); }
.hero__defense--md { font-size: clamp(.78rem, 1.6vw, .95rem); }
.hero__defense--lg { font-size: clamp(.86rem, 1.9vw, 1.1rem); }

/* Décalages : la grille reste régulière, le rendu paraît dispersé */
.hero__defense:nth-child(4n + 1) { transform: translate(6%, -8%); }
.hero__defense:nth-child(4n + 2) { transform: translate(-4%, 10%); }
.hero__defense:nth-child(4n + 3) { transform: translate(-8%, -4%); }
.hero__defense:nth-child(4n + 4) { transform: translate(8%, 6%); }

/* ── Phrase clé sous les fumées ─────────────────────────────── */
.hero__phrase-cle {
    position: relative;
    z-index: 1;
    /* Texte foncé : il doit passer sous la masse sombre de l'image grise.
       En % de la largeur de colonne, donc proportionnel à l'image. Mesuré :
       60 % nécessaires à 375 px, 54 % à 768 px. Voir aussi le bloc desktop. */
    margin-top: 62%;
    font-size: var(--t-petit);
    font-weight: var(--g-demi);
    letter-spacing: var(--l-large);
    line-height: 1.9;
    text-transform: uppercase;
    color: var(--c-encre);
}

.hero__phrase-cle::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin-top: var(--e-md);
    background-color: var(--c-encre);
}

/* ═══ Tablette ═══════════════════════════════════════════════ */
@media (min-width: 768px) {
    .hero__grille {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "pitch pitch"
            "defenses illu";
        align-items: center;
    }

    .hero__carte-visite {
        justify-items: end;
        text-align: right;
    }
}

/* ═══ Desktop ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .hero {
        padding-block: var(--e-3xl) var(--e-4xl);
    }

    .hero__grille {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr) minmax(0, 1.17fr);
        grid-template-areas: "defenses illu pitch";
        gap: var(--e-md);
        align-items: center;
    }

    .hero__mention {
        position: absolute;
        inset: var(--e-md) 0 auto 0;
        margin: 0 auto;
    }

    /* La couleur retrouve tout le bandeau, calée à droite comme sa maquette */
    .hero__aquarelle {
        inset: 0;
        height: auto;
    }

    .hero__aquarelle img { object-position: right center; }

    .hero__illustration {
        width: 430px;
        max-width: none;
        margin-bottom: clamp(-5rem, -4vw, -2rem);
        transform: translateX(6%);
    }

    .hero__phrase-cle { padding-left: var(--e-md); }

    /* Phrases plus aérées, comme dans sa maquette où elles s'étalent sur les
       cercles. En allongeant le bloc, cela fait aussi descendre la phrase clé
       sous la masse sombre, où le texte foncé reste lisible. */
    /* Interligne progressif : 1,8 rem à 1024 px → 2,6 rem à 1280 px. La
       colonne est plus étroite à 1024 px, donc l'image aussi : avec l'écart
       maximal, « J'évite » sortait du cercle (fond trop clair pour du blanc). */
    .hero__defenses-liste { row-gap: clamp(1.8rem, 5vw - 1.4rem, 2.6rem); }

    /* La phrase clé est en texte foncé : elle doit passer sous la masse sombre.
       Marge exprimée en % de la largeur de colonne — donc proportionnelle à
       l'image, qui grandit avec la colonne. Valeur mesurée : il faut 27 % à
       1024 px, 34 % à 1280 px et 39 % à 1600 px, où la colonne plafonne. */
    .hero__phrase-cle { margin-top: 42%; }
}

@media (min-width: 1280px) {
    .hero__illustration { width: 510px; }
}