/* Héros des pages machines et investissement : texte et bouton d'un côté ; de l'autre, la machine
   entière dans ses vraies couleurs, posée sous un éclairage de scène (halo champagne, sol tracé sur son empreinte),
   sans filtre ni fondu sur la photo (utilisateur, 25/09/2026), ou une scène en situation (.page-hero__scene) sur une
   page commune aux deux machines. Mobile : l'image d'abord, le texte dessous. */
.page-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: var(--space-9);
    background-color: var(--color-night);
}

.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}

.page-hero__media {
    position: relative;
    order: -1;
    display: grid;
    justify-items: center;
    align-content: end;
    padding-block: var(--space-7) var(--space-5);
}

/* Halo derrière la machine. */
.page-hero__media::before {
    content: '';
    position: absolute;
    inset: 0 -10% 5%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-champagne) 16%, transparent), transparent);
}

/* Machine détourée (_machine_cutout.html.twig) : la photo, et dessous le sol tracé sur son empreinte
   (nappe champagne, ombre diffuse, ombre de contact) dans le repère de l'image, pour suivre l'angle de
   prise de vue quelle que soit la largeur. Sur ce fond presque noir, une ombre seule ne se voit pas : la
   nappe de lumière la fait lire. */
.machine-cutout {
    position: relative;
    z-index: 1;
    display: block;
    width: min(70%, 19rem);
}

.machine-cutout img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.machine-cutout__floor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.machine-cutout__floor polygon {
    transform-box: fill-box;
    transform-origin: center;
}

.machine-cutout__glow {
    fill: var(--color-champagne);
    opacity: 0.3;
    transform: scale(1.9);
}

.machine-cutout__shade {
    fill: #000;
    opacity: 0.7;
    transform: scale(1.08);
}

.machine-cutout__contact {
    fill: #000;
    opacity: 0.9;
}

.page-hero__text {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
}

.page-hero h1 {
    max-width: 34rem;
    font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem);
    text-wrap: balance;
}

.page-hero__lead {
    max-width: var(--measure);
    color: var(--text-secondary);
    font-size: var(--text-md);
}

@media (min-width: 56rem) {
    .page-hero {
        padding-bottom: 0;
    }

    .page-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-9);
    }

    .page-hero__media {
        order: 2;
        align-self: stretch;
        padding-block: var(--space-8);
    }

    .machine-cutout {
        width: min(85%, 26rem);
    }

    .page-hero__text {
        padding-block: var(--space-9);
    }
}

/* Variante des pages communes aux deux machines (investissement) : un café et une glace, deux photos
   décalées en hauteur, à la place de la machine. */
/* En-tête de l'investissement (page commune aux deux machines) : une scène en situation, la machine dans
   un centre commercial avec du public (David, 27/09/2026). Nappe de lumière champagne derrière, plus large
   et plus franche que le halo d'une machine. */
.page-hero__scene {
    position: relative;
    order: -1;
    padding-top: var(--space-6);
}

.page-hero__scene::before {
    content: '';
    position: absolute;
    inset: -15% -25%;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-champagne) 22%, transparent), transparent);
    pointer-events: none;
}

.page-hero__scene img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

@media (min-width: 56rem) {
    .page-hero__scene {
        order: 2;
        align-self: center;
        padding-block: var(--space-8);
    }
}

/* Mobile et tablette (texte sous l'image) : titre, texte et boutons centrés (utilisateur, 25/09/2026). */
@media (max-width: 55.99rem) {
    .page-hero__text {
        justify-items: center;
        text-align: center;
    }

    .page-hero .actions {
        justify-content: center;
    }
}