/* =====================================================================
   ServiGo — couche « relief » (chargée en dernier dans includes/header.php)
   Garde la direction artistique (turquoise #2EC4B6, jaune, mise en page,
   logo 3D) et ajoute de la profondeur : fonds en couches, dégradés de la
   même teinte, ombres teintées, survols en élévation.
   Limitée à la page d'accueil (classes page-accueil / page-index posées sur <body>
   par includes/header.php) : seuls l'en-tête et le pied de page sont communs à tout le site.
   Pour revenir au rendu précédent : retirer la ligne <link> de ce fichier.
   ===================================================================== */

:root {
    --sg-mint: #2EC4B6;
    --sg-mint-deep: #159488;
    --sg-mint-ink: #0b5f57;
    --sg-shadow-sm: 0 1px 2px rgba(11, 95, 87, 0.06), 0 2px 6px rgba(11, 95, 87, 0.05);
    --sg-shadow-md: 0 2px 4px rgba(11, 95, 87, 0.05), 0 10px 28px -6px rgba(11, 95, 87, 0.16);
    --sg-shadow-lg: 0 4px 10px rgba(11, 95, 87, 0.06), 0 24px 48px -12px rgba(11, 95, 87, 0.28);
}

/* ---------- 1. Fond de page en couches (au lieu d'un gris uni) ---------- */
:is(body.page-accueil, body.page-index) {
    background-color: #f3f7f7 !important;
    background-image:
        radial-gradient(1100px 520px at 8% -6%, rgba(46, 196, 182, 0.14), transparent 62%),
        linear-gradient(180deg, #f6fbfa 0%, #f2f6f6 100%) !important;
    background-attachment: fixed !important;
}

/* ---------- 2. En-tête : même turquoise, avec matière et profondeur ---------- */
body > header,
header.site-header {
    background: linear-gradient(135deg, #36cfc1 0%, #2EC4B6 45%, #21ab9e 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 24px -10px rgba(11, 95, 87, 0.45) !important;
    position: relative;
}

/* ---------- 3. Bandeau d'accueil (hero) ---------- */
:is(body.page-accueil, body.page-index) .banner-home {
    background:
        radial-gradient(520px 300px at 85% 30%, rgba(255, 255, 255, 0.22), transparent 70%),
        radial-gradient(420px 260px at 0% 100%, rgba(11, 95, 87, 0.35), transparent 70%),
        linear-gradient(135deg, #34cbbd 0%, #2EC4B6 40%, #1a9d91 100%) !important;
    box-shadow: var(--sg-shadow-lg), 0 1px 0 rgba(255, 255, 255, 0.35) inset !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    isolation: isolate;
}
/* Formes décoratives en arrière-plan */
:is(body.page-accueil, body.page-index) .banner-home::before,
:is(body.page-accueil, body.page-index) .banner-home::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
:is(body.page-accueil, body.page-index) .banner-home::before {
    width: 420px;
    height: 420px;
    right: -120px;
    top: -160px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 65%);
}
:is(body.page-accueil, body.page-index) .banner-home::after {
    width: 260px;
    height: 260px;
    left: 38%;
    bottom: -150px;
    border: 40px solid rgba(255, 255, 255, 0.07);
}
:is(body.page-accueil, body.page-index) .banner-home .banner-content,
:is(body.page-accueil, body.page-index) .banner-home .banner-3d-container {
    position: relative;
    z-index: 1;
}
:is(body.page-accueil, body.page-index) .banner-content h1 {
    text-shadow: 0 2px 12px rgba(11, 95, 87, 0.35);
    letter-spacing: -0.01em;
}
:is(body.page-accueil, body.page-index) .banner-content p {
    color: rgba(255, 255, 255, 0.92);
}

/* Bouton jaune : volume + élévation au survol */
:is(body.page-accueil, body.page-index) .cta-btn {
    background: linear-gradient(180deg, #ffdc85 0%, #FFD166 55%, #f6c14b 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 16px -4px rgba(180, 120, 0, 0.45) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    color: #1f2933 !important;
    text-decoration: none !important;
}
:is(body.page-accueil, body.page-index) .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 24px -6px rgba(180, 120, 0, 0.5) !important;
}

/* ---------- 4. Cartes : élévation homogène + survol ---------- */
:is(body.page-accueil, body.page-index) .split-card,
:is(body.page-accueil, body.page-index) .map-section,
:is(body.page-accueil, body.page-index) .pro-hero,
:is(body.page-accueil, body.page-index) .cat-card,
:is(body.page-accueil, body.page-index) .how-step,
:is(body.page-accueil, body.page-index) .testimonial-card {
    background: #fff;
    border: 1px solid rgba(11, 95, 87, 0.08) !important;
    box-shadow: var(--sg-shadow-md) !important;
}
:is(body.page-accueil, body.page-index) .split-card,
:is(body.page-accueil, body.page-index) .map-section {
    border-radius: 1.25rem !important;
}

:is(body.page-accueil, body.page-index) .cat-card,
:is(body.page-accueil, body.page-index) .how-step,
:is(body.page-accueil, body.page-index) .mini-item,
:is(body.page-accueil, body.page-index) .service-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
:is(body.page-accueil, body.page-index) .cat-card:hover,
:is(body.page-accueil, body.page-index) .how-step:hover,
:is(body.page-accueil, body.page-index) .service-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--sg-shadow-lg) !important;
    border-color: rgba(46, 196, 182, 0.35) !important;
}

/* Éléments de liste (annonces / services de l'accueil) */
:is(body.page-accueil, body.page-index) .mini-item {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%) !important;
    border: 1px solid rgba(11, 95, 87, 0.08) !important;
    box-shadow: var(--sg-shadow-sm) !important;
}
:is(body.page-accueil, body.page-index) .mini-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sg-shadow-md) !important;
    border-color: rgba(46, 196, 182, 0.3) !important;
}
:is(body.page-accueil, body.page-index) .mini-thumb {
    box-shadow: 0 4px 12px -2px rgba(11, 95, 87, 0.3);
}

/* Icônes des catégories et des étapes : pastille en relief */
:is(body.page-accueil, body.page-index) .cat-icon,
:is(body.page-accueil, body.page-index) .how-icon {
    display: flex !important; /* bloc : l'icône reste au-dessus du titre */
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, #e9fbf8 0%, #cdf2ed 100%);
    box-shadow: 0 1px 0 #fff inset, 0 6px 14px -6px rgba(11, 95, 87, 0.35);
    margin: 0 auto 0.6rem;
    font-size: 1.6rem !important;
}
:is(body.page-accueil, body.page-index) .cat-card {
    text-decoration: none !important;
}
:is(body.page-accueil, body.page-index) .cat-card:hover {
    background: #fff !important;
    color: var(--sg-mint-ink) !important;
}

/* ---------- 5. Titres de section : barre d'accent ---------- */
:is(body.page-accueil, body.page-index) .categories-section > h2,
:is(body.page-accueil, body.page-index) .how-section > h2,
:is(body.page-accueil, body.page-index) .testimonials-section > h2,
:is(body.page-accueil, body.page-index) .container > h2 {
    position: relative;
    padding-bottom: 0.55rem;
}
:is(body.page-accueil, body.page-index) .categories-section > h2::after,
:is(body.page-accueil, body.page-index) .how-section > h2::after,
:is(body.page-accueil, body.page-index) .testimonials-section > h2::after,
:is(body.page-accueil, body.page-index) .container > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 4px;
    border-radius: 4px;
    background: var(--sg-mint);
}

/* ---------- 6. Bloc Pro : liseré turquoise ---------- */
:is(body.page-accueil, body.page-index) .pro-hero {
    position: relative;
    overflow: hidden;
}
:is(body.page-accueil, body.page-index) .pro-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--sg-mint);
}

/* ---------- 7. Témoignages ---------- */
:is(body.page-accueil, body.page-index) .testimonial-card {
    border-radius: 1.25rem !important;
    position: relative;
}
:is(body.page-accueil, body.page-index) .testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: 0.2rem;
    left: 1rem;
    font-size: 4rem;
    line-height: 1;
    color: rgba(46, 196, 182, 0.18);
    font-family: Georgia, serif;
}

/* ---------- 8. Pied de page : même turquoise, plus profond ---------- */
body .site-footer {
    background: linear-gradient(180deg, #2EC4B6 0%, #1b9f93 100%) !important;
    box-shadow: 0 -10px 30px -12px rgba(11, 95, 87, 0.35);
}

/* ---------- 9. Accessibilité : pas d'animation si l'utilisateur la refuse ---------- */
@media (prefers-reduced-motion: reduce) {
    :is(body.page-accueil, body.page-index) .cat-card:hover,
    :is(body.page-accueil, body.page-index) .how-step:hover,
    :is(body.page-accueil, body.page-index) .service-card:hover,
    :is(body.page-accueil, body.page-index) .mini-item:hover,
    :is(body.page-accueil, body.page-index) .cta-btn:hover {
        transform: none !important;
    }
}