/*
 * Void Hosting : remplissage des grands écrans (accueil et pages vitrines).
 * Fichier indépendant, chargé après le thème : pour revenir à l'ancienne mise en page,
 * il suffit de retirer la ligne <link … home-wide.css> de views/layouts/front.blade.php.
 */

/* 1. Un conteneur plus large quand l'écran le permet (85rem = 1360 px auparavant). */
@media (min-width: 1600px) {
    .void-ui .max-w-\[85rem\] { max-width: 92rem; }
}
@media (min-width: 1900px) {
    .void-ui .max-w-\[85rem\] { max-width: 100rem; }
}

/* 2. Décor de fond : nébuleuses violettes sur les bords et champ d'étoiles très discret,
      fixé à l'écran pour que les marges ne paraissent plus vides. */
body.void-ui::before,
body.void-ui::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

body.void-ui::before {
    background:
        radial-gradient(38% 55% at 0% 22%, rgb(138 43 226 / 16%), transparent 70%),
        radial-gradient(34% 50% at 100% 68%, rgb(138 43 226 / 14%), transparent 70%),
        radial-gradient(28% 40% at 96% 8%, rgb(179 136 255 / 8%), transparent 70%),
        radial-gradient(30% 40% at 4% 92%, rgb(16 185 129 / 5%), transparent 70%);
}

body.void-ui::after {
    opacity: .55;
    background-image:
        radial-gradient(1px 1px at 7% 14%, rgb(255 255 255 / 70%), transparent 60%),
        radial-gradient(1px 1px at 13% 63%, rgb(255 255 255 / 55%), transparent 60%),
        radial-gradient(1.5px 1.5px at 4% 41%, rgb(179 136 255 / 80%), transparent 60%),
        radial-gradient(1px 1px at 18% 86%, rgb(255 255 255 / 45%), transparent 60%),
        radial-gradient(1px 1px at 22% 27%, rgb(255 255 255 / 40%), transparent 60%),
        radial-gradient(1px 1px at 81% 19%, rgb(255 255 255 / 60%), transparent 60%),
        radial-gradient(1.5px 1.5px at 92% 47%, rgb(179 136 255 / 80%), transparent 60%),
        radial-gradient(1px 1px at 87% 78%, rgb(255 255 255 / 50%), transparent 60%),
        radial-gradient(1px 1px at 96% 31%, rgb(255 255 255 / 45%), transparent 60%),
        radial-gradient(1px 1px at 76% 91%, rgb(255 255 255 / 40%), transparent 60%),
        radial-gradient(1px 1px at 48% 6%, rgb(255 255 255 / 35%), transparent 60%),
        radial-gradient(1px 1px at 58% 96%, rgb(255 255 255 / 35%), transparent 60%);
    background-size: 900px 900px;
    animation: void-stars-drift 120s linear infinite;
}

@keyframes void-stars-drift {
    from { background-position: 0 0; }
    to { background-position: 0 900px; }
}

@media (prefers-reduced-motion: reduce) {
    body.void-ui::after { animation: none; }
}

/* 3. Appel à l'action : texte à gauche, boutons à droite, sur toute la largeur. */
@media (min-width: 1024px) {
    .void-cta .void-cta__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'badge actions' 'title actions' 'subtitle actions';
        column-gap: 48px;
        align-items: center;
        max-width: none;
        width: 100%;
        text-align: left;
    }
    .void-cta .void-cta__body > .void-eyebrow { grid-area: badge; justify-self: start; }
    .void-cta .void-cta__title { grid-area: title; max-width: 26ch; }
    .void-cta .void-cta__subtitle { grid-area: subtitle; max-width: 62ch; margin-left: 0; }
    .void-cta .void-cta__actions { grid-area: actions; flex-direction: column; align-items: stretch; justify-content: center; margin-top: 0; min-width: 240px; }
    .void-cta .void-cta__actions .void-btn { justify-content: center; }
    .void-cta { padding: clamp(36px, 4vw, 64px) clamp(36px, 5vw, 80px) !important; }
}

/* 4. FAQ : intitulé à gauche (collant), questions à droite. */
@media (min-width: 1024px) {
    .void-purchase-faq > div {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: 64px;
        align-items: start;
    }
    .void-purchase-faq .void-section__head {
        position: sticky;
        top: 120px;
        margin: 0;
        text-align: left;
    }
    .void-purchase-faq .void-section__head .void-section__title,
    .void-purchase-faq .void-section__head .void-section__subtitle {
        margin-left: 0;
        text-align: left;
    }
    .void-purchase-faq .void-faq-list { max-width: none; width: 100%; margin: 0; }
}

/* 5. Bloc communauté : panneau pleine largeur, bouton à droite. */
.void-community__panel { width: 100%; }
@media (min-width: 1024px) {
    .void-community__panel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 48px;
        max-width: none;
    }
    .void-community__panel > div { max-width: 68ch; }
    .void-community__panel > .void-btn { flex: 0 0 auto; }
}