.direction-section {
    position: relative;
    padding: 10vh 0;
    overflow: hidden;
    z-index: 3; /* Positionne le texte au-dessus de tout */
    
}

.direction-section-wrapper {
    position: relative;
    overflow: hidden; /* Sécurité pour masquer les bords */
}

.direction-background {
    position: absolute;
    top: calc(-10% - 100px); /* Fait déborder l'image pour masquer les bords + 100px plus haut */
    left: 0;
    width: 100%;
    height: 120%; /* Fait déborder l'image pour masquer les bords */
    background-image: url('http://arcettype.kinsta.cloud/wp-content/uploads/2025/07/Adobe-Express-file.png');
    background-size: auto 130%; /* Force la hauteur pour permettre le décalage */
    background-position: center top; /* Force l'alignement en haut pour cacher le bas */
    z-index: 1; /* Derrière le grain et le texte */
    background-color: #F1F1F1;
}

.direction-background::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at var(--light-x, 50%) var(--light-y, -50%), rgba(255, 255, 255, 0.1), transparent 40%),
        linear-gradient(180deg, transparent, #f0f0f0);
    mix-blend-mode: color;
    pointer-events: none;
}

/* Le grain ne doit plus être sur l'élément qui bouge */
.direction-background::after {
    display: none;
}

/* Le grain revient sur le conteneur statique */
.direction-section-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url(http://arcettype.kinsta.cloud/wp-content/uploads/2025/07/6771a361d82d856d660429c5_grain-slow.gif);
    opacity: 0.04;
    pointer-events: none;
    z-index: 2; /* Positionné entre l'image de fond et le texte */
}

.direction-block {
    position: relative;
    width: 100%;
}

.direction-block_item {
    display: block;
    width: 100%;
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 1.1;
    color: #212121;
    white-space: nowrap;
    margin-bottom: 2rem;
}

.direction-block_item_inner {
    display: inline-block;
    background-color: white;
    padding: 0.5rem 2rem;
}

.direction-block_item_inner img {
    height: 45px;
    width: auto;
    margin: 0 2rem;
    vertical-align: middle;
    filter: grayscale(100%);
}

span.direction-block_item_inner {
    padding-bottom: 25px;
}

.direction-block_item.-one {
    transform: rotate(12deg);
    margin-left: -20%;
}

.direction-block_item.-two {
    transform: rotate(-16deg);
    margin-right: -20%;
    text-align: right;
}

.direction-block_item.-three {
    transform: rotate(-10deg);
    margin-left: -15%;
}

.direction-block_item.-four {
    transform: rotate(14deg);
    margin-right: -15%;
    text-align: right;
}

.direction-block_item.-five {
    transform: rotate(-8deg);
    text-align: center;
    margin-left: -25%; /* Décalage vers la gauche */
}

/* =============================================
   RESPONSIVE — MOBILE (≤768px)
   Les rotations + débordements sont conservés (= l'identité visuelle).
   On réduit juste la typo et l'image inline pour qu'elles tiennent à l'écran.
   ============================================= */
@media (max-width: 768px) {
    .direction-section {
        padding: 6vh 0;
    }

    /* Fond descendu (parallax désactivé sur mobile) pour dégager le titre en
       haut de section — sinon l'image de fond passe derrière et on ne le voit
       pas. */
    .direction-background {
        top: 25%;
        height: 110%;
    }

    .direction-section-wrapper.full-width-section {
        background: #F2F2F2;
    }

    .direction-block_item {
        font-size: clamp(1.6rem, 9vw, 3rem);
        margin-bottom: 1.25rem;
    }

    .direction-block_item_inner {
        padding: 0.35rem 1rem;
    }

    .direction-block_item_inner img {
        height: 26px;
        margin: 0 0.75rem;
    }

    span.direction-block_item_inner {
        padding-bottom: 14px;
    }
}