/* Hero Section Styles */
.hero-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding: 60px 9.6em;
    padding-top: 12em;
    box-sizing: border-box;
    background-color: var(--light-background);
    overflow: hidden;
    position: relative;
}

/* Noise overlay sur toute la section */
.hero-section::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 5;
    opacity: 0.05; /* Opacité réduite (était 0.18) */
    mix-blend-mode: overlay;
    animation: grain 8s steps(10) infinite;
    pointer-events: none;
    background-image: 
        repeating-conic-gradient(var(--black) 0%, transparent 0.00002%, transparent 0.00004%, var(--black) 0.00007%),
        repeating-conic-gradient(var(--black) 0%, transparent 0.00001%, transparent 0.0002%, var(--black) 0.00008%);
    background-size: 100px 100px, 150px 150px;
}

/* On remet l'overlay orange, mais en s'assurant qu'il est tout en dessous */
.orange-background-overlay {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: var(--orange-primary);
    z-index: 1; /* Placé derrière tout le reste */
    mix-blend-mode: screen;
}

/* Texte côté gauche - conteneur principal */
.hero-text {
    /* flex: 1; supprimé pour position absolute */
    max-width: 100%;
    position: absolute; /* Positionnement absolu */
    bottom: 2rem; /* Collé en bas */
    left: 2rem; /* Collé à gauche */
    z-index: 10;
    mix-blend-mode: difference;
    margin: 0; /* Reset des marges */
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Gap un peu réduit pour le bas de page */
}

/* Label style */
.hero-label {
    font-family: 'RMMono', monospace;
    font-size: 0.8rem;
    color: var(--grey-text);
    text-transform: uppercase;
    display: flex;
    align-items: baseline;
    gap: 0.5em;
}

/* H1 SEO "Standiste Paris" — rendu identique au span du label, côte à côte. */
.hero-eyebrow-title {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: inherit;
}

/* Style de base pour le titre */
.hero-title {
    font-size: clamp(4rem, 7.5vw, 9.5rem);
    line-height: .96;
    letter-spacing: -.045em;
    margin: 0;
    font-family: 'Arc_Typ', 'RMNeue-Regular', Arial, sans-serif; /* Police Arc_Typ pour les titres */
    text-transform: capitalize;
    color: var(--white); /* Le texte est NOIR */
    mix-blend-mode: difference; /* C'est ça qui fait l'effet */
    font-weight: 500; /* Alignement avec les autres titres (Manifeste) pour corriger le rendu des accents */
}

.hero-title .line {
    display: block;
    white-space: nowrap; /* Empêche les mots de se couper */
}

/* Lettre spéciale en Gridular */
.hero-title .char.gridular-font {
    font-family: 'Gridular', Arial, sans-serif;
    margin-left: 4px;
}

/* Image background full size */
.hero-image-container {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #0b0b0b; /* Fond sombre pour fondre l'image */
}

.hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Remplit tout l'espace */
    object-position: center center;
    opacity: 1;
    position: relative;
}

/* Overlays ajustés pour full size */
.hero-color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--orange-primary);
    mix-blend-mode: color;
    opacity: 0.3;
    z-index: 2;
    pointer-events: none;
}

.hero-noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0.05; /* Opacité réduite (était 0.15) */
    mix-blend-mode: overlay;
    pointer-events: none;
    overflow: hidden;
}

.hero-noise-overlay::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    animation: grain 8s steps(10) infinite;
    background-image: 
        repeating-conic-gradient(var(--black) 0%, transparent 0.00002%, transparent 0.00004%, var(--black) 0.00007%),
        repeating-conic-gradient(var(--black) 0%, transparent 0.00001%, transparent 0.0002%, var(--black) 0.00008%);
    background-size: 100px 100px, 150px 150px;
}

/* Animation pour l'apparition de l'image */
@keyframes imageReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation du grain */
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 25%); }
    90% { transform: translate(-10%, 10%); }
}

/* Animation du halo pulsant */
@keyframes pulse-halo {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Nouveau style pour le texte en RMMono */
.info-text {
    text-transform: uppercase;
    font-family: 'RMMono', sans-serif;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.07;
    position: relative;
}

/* ── Hero Capabilities ── */
.hero-capabilities {
    position: absolute;
    top: auto;
    /* 1. Centrage vertical sur le mot "explorateurs" (2ème ligne en partant du haut, donc 3ème en partant du bas) */
    /* bottom = 2rem (marge) + 2 lignes pleines en dessous (2 * 0.96) + la moitié de la ligne "explorateurs" (0.48) = 2.4 */
    bottom: calc(2rem + 2.4 * clamp(4rem, 7.5vw, 9.5rem)); 

    /* 2. Centrage horizontal mathématique dans l'espace VIDE restant à droite */
    /* On démarre la zone un peu plus à droite pour que le texte soit plus centré vers la droite */
    left: calc(2rem + 8.5 * clamp(4rem, 7.5vw, 9.5rem)); 
    right: 3rem; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25em;
    z-index: 12;
    transform: translateY(50%); 
}

.hero-capabilities__item,
.hero-capabilities__tag {
    font-family: 'RMMono', 'Courier New', monospace;
    font-weight: 400;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--orange-primary) !important;
    cursor: default;
    pointer-events: none;
    white-space: nowrap;
}

.hero-capabilities__item .bracket {
    font-family: 'RMNeue-Regular', sans-serif;
    font-size: 1.15rem;
}

/* Crochets SVG animés au hover — réplique de l'effet du menu (header.css) */
.hero-capabilities__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    pointer-events: auto;
}

.hero-capabilities__item .svg-parenthesis {
    width: 10px;
    flex: 0 0 auto;
    opacity: 1;
    color: var(--orange-primary);
}

.hero-capabilities__item .parenthesis-left {
    transform: translate3d(0, 0, 0);
}

.hero-capabilities__item .parenthesis-right {
    transform: rotate(180deg) translate3d(0, 0, 0);
}

span.hero-capabilities__label {
    margin-top: -2px;
}

/* On force une police qui supporte le séparateur | */
.hero-capabilities__item .pipe {
    font-family: 'RMMono', 'Courier New', monospace;
    font-size: 1rem;
    opacity: 0.8;
    margin: 0 0.4em; /* Espacement autour des pipes */
    font-weight: 400; /* Plus fin pour le pipe */
}

.hero-section .medias img {
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

.hero-section > img {
    pointer-events: none;
    width: 18vw;
    height: 18vw;
    display: block;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    border-radius: 8px;
}

/* SVG Corners pour hero-image-container */
.hero-image-container .corner {
    position: absolute;
    width: 31px;
    height: 31px;
    color: var(--black);
    z-index: 15;
    opacity: 1;
}

.hero-image-container .corner.first {
    top: 10px;
    left: 10px;
}

.hero-image-container .corner.second {
    top: 10px;
    right: 10px;
}

.hero-image-container .corner.third {
    bottom: 10px;
    left: 10px;
}

.hero-image-container .corner.forth {
    bottom: 10px;
    right: 10px;
}

/* (ancien glass-box corners supprimés) */

/* Responsive */
@media screen and (max-width: 1024px) {
    .hero-section {
        flex-direction: column;
        padding: 40px;
        min-height: auto;
    }
    
    .hero-text {
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
    }
    
    .hero-image-container {
        max-width: 100%;
        width: 100%;
        height: 60vh;
    }

    .hero-capabilities {
        width: 100%;
        left: 0;
        top: auto;
        bottom: 2rem;
        right: 0;
        transform: none;
        padding-bottom: 0;
        justify-content: center;
    }

    .hero-capabilities__item,
    .hero-capabilities__sep {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 768px) {
    .hero-section {
        padding: 6em 1.25em 2em;
        flex-direction: column;
        min-height: 65vh;
        align-items: stretch;
    }
    
    .hero-title {
        font-size: clamp(2.6rem, 10vw, 6rem);
        margin-right: 0;
    }

    .hero-text {
        bottom: 1.5rem;
        left: 1.25rem;
        right: 1.25rem;
        gap: 0.75rem;
    }

    .hero-label {
        font-size: 0.7rem;
    }

    .hero-image-container {
        height: 65vh;
        width: 100%;
        clip-path: none;
    }

    /* On masque la capabilities flottante (positionnement calc absolu desktop)
       — l'animation hover-images n'a pas de sens sur mobile non plus. */
    .hero-capabilities {
        display: none;
    }

    /* L'image qui suit la souris (hero-hover-images) : agrandie pour mobile (anim conservée) */
    .hero-section > img {
        width: 50vw;
        height: 50vw;
    }

    /* Coins du container réduits */
    .hero-image-container .corner {
        width: 20px;
        height: 20px;
    }

    /* Glass box hero (s'il existe) ne doit pas dépasser */
    .hero-glass-box {
        max-width: calc(100% - 2.5rem);
    }
}