/* Mise en page limitée au bandeau d'accueil ; palette et contenu existants conservés. */
.hero--with-logo .hero__layout {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    padding-block: 48px;
}
.hero__copy { min-width: 0; }
.hero--with-logo h1 { font-size: clamp(36px, 4vw, 60px); }

/* Les deux versions partagent le même cadre pour éviter tout déplacement pendant le fondu. */
.aumya-logo {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1;
    margin: 0 auto;
}
.aumya-logo__image, .aumya-logo__drawing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Le logo plein sert de rendu de base. Le tracé démarre avec la feuille de style. */
.aumya-logo__image { opacity: 1; }
.aumya-logo__drawing { opacity: 0; }
.aumya-logo__drawing path { fill: none; stroke: #fff; stroke-width: 3; }

@media (prefers-reduced-motion: no-preference) {
    .aumya-logo__image { animation: logo-appear 200ms ease 650ms both; }
    .aumya-logo__drawing { animation: logo-disappear 200ms ease 650ms both; }
    .aumya-logo__drawing path {
        stroke-dasharray: 1;
        animation: logo-trace 650ms ease-out both;
    }
}

@keyframes logo-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes logo-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes logo-disappear { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 760px) {
    .hero--with-logo .hero__layout { grid-template-columns: minmax(0, 1fr); }
    .aumya-logo { max-width: 260px; }
}

/* Motif historique limité à ce bloc : couche décorative sous le logo et le texte.
   L’isolation et le débordement masqué empêchent le décor d’empiéter sur les autres sections. */
.hero--with-logo { position: relative; isolation: isolate; overflow: hidden; }
.hero--with-logo .hero__waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .18;
    pointer-events: none;
    user-select: none;
    /* Fondu sur les bords pour raccorder le motif au fond uni des blocs voisins. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
}
.hero--with-logo .hero__layout { position: relative; z-index: 1; }
@media (max-width: 760px) {
    /* Contraste réduit lorsque le texte et le logo sont empilés sur le motif. */
    .hero--with-logo .hero__waves { opacity: .12; }
}