/* ==========================================================================
   PSI AFRICA - Accueil : sections bleues + animations 3D
   Fichier isole et reversible : retirer la ligne <link> dans
   resources/views/pages/home.blade.php pour revenir a l'etat precedent.
   Palette : #030360 #091e3e #113468 #1a4a9e + accents #af0000 / #ff9500
   ========================================================================== */

:root {
    --h3d-b0: #030360;
    --h3d-b1: #091e3e;
    --h3d-b2: #113468;
    --h3d-b3: #1a4a9e;
    --h3d-red: #af0000;
    --h3d-orange: #ff9500;
    --h3d-glass: rgba(255, 255, 255, .09);
    --h3d-glass-b: rgba(255, 255, 255, .20);
}

/* --------------------------------------------------------------------------
   1. SECTIONS BLEUES (alternance : conseil / comment ca marche / preparation / faq)
   -------------------------------------------------------------------------- */
body section.conseil-gratuit-section,
body section.comment-ca-marche-section,
body section.preparation-section,
body section.faq-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    color: #fff;
}

body section.conseil-gratuit-section {
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.6px) 0 0 / 28px 28px,
        linear-gradient(135deg, #030360 0%, #091e3e 48%, #113468 100%) !important;
}
body section.comment-ca-marche-section {
    background:
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px) 0 0 / 28px 28px,
        linear-gradient(160deg, #091e3e 0%, #113468 55%, #1a4a9e 100%) !important;
}
body section.preparation-section {
    background:
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px) 0 0 / 28px 28px,
        linear-gradient(200deg, #1a4a9e 0%, #113468 45%, #030360 100%) !important;
}
body section.faq-section {
    background:
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px) 0 0 / 28px 28px,
        linear-gradient(145deg, #030360 0%, #091e3e 50%, #113468 100%) !important;
}

/* Contenu au-dessus des decors */
body section.conseil-gratuit-section > .container,
body section.comment-ca-marche-section > .container,
body section.preparation-section > .container,
body section.faq-section > .container {
    position: relative;
    z-index: 2;
}

/* Titres / sous-titres lisibles sur bleu */
body section.conseil-gratuit-section .section-title,
body section.comment-ca-marche-section .section-title,
body section.preparation-section .section-title,
body section.faq-section .section-title {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(3, 3, 96, .55);
}
body section.conseil-gratuit-section .section-subtitle,
body section.comment-ca-marche-section .section-subtitle,
body section.preparation-section .section-subtitle,
body section.faq-section .section-subtitle {
    color: rgba(255, 255, 255, .84) !important;
}

/* --- Conseil gratuit : panneau verre depoli --- */
body section.conseil-gratuit-section > .container {
    background: var(--h3d-glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--h3d-glass-b);
    border-radius: 24px;
    padding: 36px 32px !important;
    box-shadow: 0 24px 60px rgba(3, 3, 96, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body section.conseil-gratuit-section p {
    color: rgba(255, 255, 255, .86) !important;
}
body section.conseil-gratuit-section p[style*="font-weight:800"] {
    color: #fff !important;
}
body section.conseil-gratuit-section li {
    color: rgba(255, 255, 255, .92) !important;
}
body section.conseil-gratuit-section li i {
    color: var(--h3d-orange) !important;
}
body .btn-rencontrez-expert {
    animation: h3dPulseRed 2.6s ease-in-out infinite;
}

/* --- Comment ca marche : points / boutons de navigation --- */
body section.comment-ca-marche-section .ccm-dot,
body section.faq-section .faq-dot {
    background: rgba(255, 255, 255, .38);
}
body section.comment-ca-marche-section .ccm-dot.active,
body section.faq-section .faq-dot.active {
    background: var(--h3d-orange);
}
body section.comment-ca-marche-section .ccm-card,
body section.faq-section .faq-item,
body section.preparation-section .preparation-card {
    background: #fff;
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 14px 34px rgba(3, 3, 96, .35);
}
body section.preparation-section .preparation-card:hover,
body section.comment-ca-marche-section .ccm-card:hover,
body section.faq-section .faq-item:hover {
    border-color: var(--h3d-orange);
    box-shadow: 0 22px 46px rgba(3, 3, 96, .5), 0 0 0 1px rgba(255, 149, 0, .6);
}

/* --- Decors : halo flottant (::before) + anneau 3D (::after) --- */
body section.conseil-gratuit-section::before,
body section.comment-ca-marche-section::before,
body section.preparation-section::before,
body section.faq-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 460px;
    height: 460px;
    right: -140px;
    top: -170px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(26, 74, 158, .85), rgba(26, 74, 158, 0) 68%);
    pointer-events: none;
    animation: h3dDrift 16s ease-in-out infinite alternate;
}
body section.conseil-gratuit-section::after,
body section.comment-ca-marche-section::after,
body section.preparation-section::after,
body section.faq-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 280px;
    height: 280px;
    left: -100px;
    bottom: -110px;
    border-radius: 50%;
    border: 2px solid rgba(255, 149, 0, .38);
    box-shadow: 0 0 38px rgba(255, 149, 0, .14), inset 0 0 28px rgba(255, 149, 0, .10);
    pointer-events: none;
    transform: perspective(700px) rotateX(68deg) rotateZ(0deg);
    animation: h3dRing 22s linear infinite;
}
/* variations (mirroir) pour eviter la repetition */
body section.comment-ca-marche-section::before { right: auto; left: -160px; top: auto; bottom: -190px; }
body section.comment-ca-marche-section::after  { left: auto; right: -90px; bottom: auto; top: -90px; border-color: rgba(175, 0, 0, .55); box-shadow: 0 0 38px rgba(175, 0, 0, .18), inset 0 0 28px rgba(175, 0, 0, .14); }
body section.preparation-section::before { right: -120px; top: auto; bottom: -190px; }
body section.preparation-section::after  { left: -80px; bottom: auto; top: -100px; border-color: rgba(255, 255, 255, .28); box-shadow: 0 0 38px rgba(255, 255, 255, .08); }
body section.faq-section::before { right: auto; left: -150px; top: -180px; }
body section.faq-section::after  { left: auto; right: -100px; bottom: -110px; }

/* --------------------------------------------------------------------------
   2. TRANSITIONS DE RYTHME + CTA
   -------------------------------------------------------------------------- */
body section.cta-demarrer-section {
    background: linear-gradient(135deg, #af0000 0%, #c91111 55%, #af0000 100%) !important;
    position: relative;
    overflow: hidden;
}
body section.cta-demarrer-section .psi-btn-anim {
    animation: h3dPulseWhite 2.8s ease-in-out infinite;
}

/* fondu bas du hero vers la section bleue suivante */
body .hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(9, 30, 62, .55), rgba(9, 30, 62, 0));
}

/* --------------------------------------------------------------------------
   3. HERO : canvas 3D + elements flottants de secours
   -------------------------------------------------------------------------- */
.h3d-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.h3d-hero-canvas.on { opacity: 1; }

.h3d-float {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    color: rgba(255, 255, 255, .55);
    font-size: 28px;
    animation: h3dFloat 7s ease-in-out infinite;
    will-change: translate;
}
.h3d-float.o { color: rgba(255, 149, 0, .75); }
.h3d-float.r { color: rgba(255, 255, 255, .35); }

/* --------------------------------------------------------------------------
   4. TILT 3D (survol souris uniquement) + REVELATIONS AU SCROLL
   -------------------------------------------------------------------------- */
.h3d-tilt { will-change: transform; }
.h3d-tilt.h3d-tilting {
    transform: perspective(900px) rotateX(var(--h3d-rx, 0deg)) rotateY(var(--h3d-ry, 0deg)) translateY(-6px) !important;
    transition: transform .09s linear, box-shadow .25s ease, border-color .25s ease !important;
    box-shadow: 0 26px 52px rgba(3, 3, 96, .32) !important;
}

.h3d-rv:not(.h3d-in) { opacity: 0; }
.h3d-rv.h3d-in {
    animation: h3dRise .75s cubic-bezier(.22, 1, .36, 1) var(--h3d-d, 0ms) backwards;
}

/* --------------------------------------------------------------------------
   5. KEYFRAMES (transform / translate / opacity uniquement = GPU)
   -------------------------------------------------------------------------- */
@keyframes h3dDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-40px, 30px, 0) scale(1.12); }
}
@keyframes h3dRing {
    from { transform: perspective(700px) rotateX(68deg) rotateZ(0deg); }
    to   { transform: perspective(700px) rotateX(68deg) rotateZ(360deg); }
}
@keyframes h3dFloat {
    0%, 100% { translate: 0 0; rotate: -4deg; }
    50%      { translate: 0 -16px; rotate: 5deg; }
}
@keyframes h3dRise {
    from { opacity: 0; translate: 0 34px; scale: .96; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes h3dPulseRed {
    0%, 100% { box-shadow: 0 4px 14px rgba(175, 0, 0, .35); }
    50%      { box-shadow: 0 4px 30px rgba(175, 0, 0, .75), 0 0 0 6px rgba(175, 0, 0, .12); }
}
@keyframes h3dPulseWhite {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
    50%      { box-shadow: 0 4px 26px rgba(255, 149, 0, .55), 0 0 0 6px rgba(255, 255, 255, .15); }
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE / MOBILE : decors statiques et allégés
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body section.conseil-gratuit-section,
    body section.comment-ca-marche-section,
    body section.preparation-section,
    body section.faq-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    body section.conseil-gratuit-section > .container {
        padding: 26px 18px !important;
        border-radius: 18px;
        margin-left: 12px;
        margin-right: 12px;
        width: auto;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255, 255, 255, .11);
    }
    body section.conseil-gratuit-section::before,
    body section.comment-ca-marche-section::before,
    body section.preparation-section::before,
    body section.faq-section::before {
        width: 300px;
        height: 300px;
        animation: none;
    }
    body section.conseil-gratuit-section::after,
    body section.comment-ca-marche-section::after,
    body section.preparation-section::after,
    body section.faq-section::after {
        width: 190px;
        height: 190px;
        animation: none;
    }
    body .hero-section::after { height: 60px; }
    .h3d-float { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   7. ACCESSIBILITE : prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body section.conseil-gratuit-section::before,
    body section.comment-ca-marche-section::before,
    body section.preparation-section::before,
    body section.faq-section::before,
    body section.conseil-gratuit-section::after,
    body section.comment-ca-marche-section::after,
    body section.preparation-section::after,
    body section.faq-section::after,
    body .btn-rencontrez-expert,
    body section.cta-demarrer-section .psi-btn-anim,
    .h3d-float {
        animation: none !important;
    }
    .h3d-float, .h3d-hero-canvas { display: none !important; }
    .h3d-rv:not(.h3d-in) { opacity: 1; }
    .h3d-rv.h3d-in { animation: none; }
    .h3d-tilt.h3d-tilting { transform: none !important; }
}