.heros {
    position: relative;
    /* À la hauteur de son contenu, plus un écran entier : le vide au-dessus du
       titre et sous les chiffres gênait (retour de la rédaction, 13/10). */
    min-block-size: 0;
    display: grid;
    align-content: center;
    padding-block: calc(var(--entete-h) + 2.5rem) 3rem;
    overflow: clip;
}

/*
 * L'aurore du héros : trois halos de la marque, plus francs que ceux du
 * circuit ailleurs, qui dérivent lentement. C'est elle qui empêche le fond
 * clair d'être un simple blanc.
 */
.heros .circuit::after {
    inset: -10%;
    background:
        radial-gradient(44rem 34rem at 84% 14%, rgb(113 34 246 / 0.42), transparent 62%),
        radial-gradient(38rem 28rem at 64% 72%, rgb(46 163 242 / 0.3), transparent 60%),
        radial-gradient(34rem 26rem at 6% 96%, rgb(55 50 255 / 0.2), transparent 60%);
    animation: aurore 22s ease-in-out infinite alternate;
}

@keyframes aurore {
    50% { transform: translate3d(-4%, 3%, 0) scale(1.06); }
    100% { transform: translate3d(2%, -3%, 0) scale(1.1); }
}

.heros__contenu {
    position: relative;
    z-index: var(--z-contenu);
    display: grid;
    gap: 1.75rem;
    justify-items: start;
}

.heros__titre {
    max-inline-size: 22ch;
    font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/*
 * Le titre est masqué tant que le contrôleur n'a pas découpé les lignes : sans
 * ça, on verrait la phrase entière une frame avant qu'elle ne se replie.
 * `--arme` n'est posée que par le JS, donc sans JavaScript le titre reste
 * simplement visible.
 */
.heros--arme .heros__titre,
.heros--arme .heros__marques-groupe,
.heros--arme .heros__actions,
.heros--arme .heros__chiffres,
.heros--arme .surtitre {
    visibility: hidden;
}

.heros--pret .heros__titre,
.heros--pret .heros__marques-groupe,
.heros--pret .heros__actions,
.heros--pret .heros__chiffres,
.heros--pret .surtitre {
    visibility: visible;
}

/* Le nom du groupe en tête, plus gros ; ses quatre marques sur la ligne d'après. */
.heros__surtitre {
    flex-wrap: wrap;
    row-gap: 0.6em;
}

.heros__groupe {
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--texte);
}

.heros__marques {
    flex-basis: 100%;
}

/* Les quatre marques, à la place du chapô : les cartes de « Qui sommes-nous ». */
.heros__marques-groupe {
    inline-size: 100%;
    margin-block: 0.5rem 1rem;
}

/* Sur téléphone, deux cartes par ligne et plus compactes : les boutons doivent
   rester proches de l'écran d'arrivée. */
@media (max-width: 40rem) {
    .groupe__marques.heros__marques-groupe {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .heros__marques-groupe .groupe__marque {
        gap: 0.7rem;
        padding: 0.9rem;
        border-radius: 0.75rem;
    }

    .heros__marques-groupe .groupe__marque img {
        block-size: 1.8rem;
        max-inline-size: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .heros__marques-groupe .groupe__metiers {
        padding-inline-start: 0.6rem;
        font-size: var(--t-xs);
    }
}

.heros__actions {
    margin-block-start: 0.5rem;
}

/* Accès direct à la cybersécurité, sur sa propre ligne sous les boutons. Le label
   officiel est sur fond blanc : il garde sa vignette blanche. */
.heros__cyber {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    max-inline-size: fit-content;
    padding: 0.45rem 1.1rem 0.45rem 0.45rem;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fond) 70%, transparent);
    color: var(--texte);
    font-size: var(--t-sm);
    text-decoration: none;
    transition: border-color 0.3s var(--ease-sortie), transform 0.4s var(--ease-sortie);
}

.heros__cyber img {
    flex: none;
    inline-size: 2.6rem;
    block-size: auto;
    padding: 0.15rem;
    border-radius: 999px;
    background: #fff;
}

.heros__cyber-fleche {
    transition: transform 0.4s var(--ease-sortie);
}

.heros__cyber:hover {
    border-color: currentColor;
}

.heros__cyber:hover .heros__cyber-fleche {
    transform: translateX(0.3rem);
}

.heros__chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3rem;
    margin-block-start: clamp(2rem, 6vh, 4rem);
    padding-block-start: 1.75rem;
    border-block-start: 1px solid var(--trait);
    inline-size: 100%;
    list-style: none;
    padding-inline: 0;
}

.heros__chiffres li {
    display: grid;
    gap: 0.25rem;
}

.heros__chiffres strong {
    font-family: var(--police-titre);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.heros__chiffres span {
    color: var(--texte-tres-doux);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* — Indice de défilement — */
.heros__indice {
    position: absolute;
    inset-block-end: 2rem;
    inset-inline-end: var(--gouttiere);
    z-index: var(--z-contenu);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--texte-tres-doux);
    text-decoration: none;
    transition: color 0.35s var(--ease-sortie);
}

.heros__indice:hover {
    color: var(--texte);
}

.heros__fleche {
    position: relative;
    inline-size: 1px;
    block-size: 3rem;
    background: linear-gradient(var(--trait-fort), transparent);
    overflow: hidden;
}

/* Un point qui retombe le long du trait : le seul mouvement en boucle du site. */
.heros__fleche::after {
    content: "";
    position: absolute;
    inset-inline-start: -1px;
    inline-size: 3px;
    block-size: 1rem;
    background: var(--accent-3);
    animation: goutte 2.4s var(--ease-doux) infinite;
}

@keyframes goutte {
    0% { transform: translateY(-100%); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(300%); opacity: 0; }
}

@media (max-width: 48rem) {
    .heros__indice {
        display: none;
    }

    .heros__chiffres {
        gap: 1.5rem 2rem;
    }
}

/* Lien vers « Nos sociétés », sur sa propre ligne au-dessus des boutons. */
.heros__histoire {
    margin: 0;
}