/*
 * Theme Name:  Hello Elementor Child
 * Theme URI:   https://sylvaingerard.com
 * Description: Thème enfant de Hello Elementor — LP locales SEO sylvaingerard.com
 * Author:      Projet sylvaingerard.com
 * Author URI:  https://sylvaingerard.com
 * Template:    hello-elementor
 * Version:     1.1.0
 * License:     GNU General Public License v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: hello-elementor-child
 */

/* ============================================================
   SOMMAIRE
   ============================================================
   1.  Import Google Fonts — Nunito
   2.  Variables CSS (design tokens)
   3.  Reset & base
   4.  Typographie globale
   5.  Boutons CTA
   6.  LP — Hero
   7.  LP — Réassurance
   8.  LP — Événements
   9.  LP — Prestation détaillée
   10. LP — Pourquoi Sylvain
   11. LP — Témoignage
   12. LP — Zones couvertes
   13. LP — FAQ accordéon CSS pur
   14. LP — Maillage interne
   15. LP — CTA final
   16. Utilitaires
   17. Media queries — tablette (min-width: 768px)
   18. Media queries — desktop (min-width: 1024px)
   ============================================================ */


/* ============================================================
   1. IMPORT GOOGLE FONTS — NUNITO
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');


/* ============================================================
   PRÉ-FOOTER — CTA "Besoin d'une prestation ?"
   ============================================================ */

.sg-prefooter {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
    position: relative;
    overflow: hidden;
    font-family: var(--sg-font);
}

.sg-prefooter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(249,9,50,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.sg-prefooter .sg-container {
    position: relative;
    z-index: 1;
}

.sg-prefooter__inner {
    background-color: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--sg-radius-lg);
    padding: var(--sg-space-2xl) var(--sg-space-xl);
    text-align: center;
}

.sg-prefooter__title {
    color: var(--sg-white);
    font-size: var(--sg-size-h2);
    font-weight: var(--sg-weight-black);
    margin-bottom: var(--sg-space-sm);
}

.sg-prefooter__subtitle {
    color: var(--sg-text-light);
    font-size: var(--sg-size-lg);
    margin-bottom: var(--sg-space-xl);
}

.sg-prefooter__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sg-font);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-red);
    background-color: var(--sg-white);
    text-decoration: none;
    padding: 0.9rem 2rem;
    border-radius: var(--sg-radius-pill);
    transition:
        background-color var(--sg-transition),
        color var(--sg-transition),
        transform var(--sg-transition),
        box-shadow var(--sg-transition);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sg-prefooter__cta:hover {
    background-color: var(--sg-red);
    color: var(--sg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,9,50,0.35);
}


/* ============================================================
   FOOTER PRINCIPAL
   ============================================================ */

.sg-footer {
    background-color: var(--sg-dark);
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
    font-family: var(--sg-font);
}

/* Dégradé rouge subtil comme sur le site existant */
.sg-footer::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: radial-gradient(ellipse at 100% 100%, rgba(139,0,50,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.sg-footer__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-xl);
    padding-block: var(--sg-space-2xl);
    align-items: start;
}

/* Logo */
.sg-footer__brand img {
    height: 56px;
    width: auto;
    filter: brightness(1);
}

.sg-footer__brand a {
    display: inline-block;
    text-decoration: none;
}

/* Colonnes */
.sg-footer__col-title {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-black);
    color: var(--sg-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--sg-space-md);
    padding-bottom: var(--sg-space-xs);
    border-bottom: 2px solid var(--sg-red);
    display: inline-block;
}

.sg-footer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-sm);
}

.sg-footer__link {
    font-size: var(--sg-size-base);
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color var(--sg-transition);
}

.sg-footer__link:hover {
    color: var(--sg-white);
}

.sg-footer__address {
    font-style: normal;
    font-size: var(--sg-size-base);
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
}

/* Réseaux sociaux */
.sg-footer__social {
    display: flex;
    gap: var(--sg-space-sm);
}

.sg-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: 2px solid var(--sg-red);
    border-radius: 50%;
    color: var(--sg-red);
    text-decoration: none;
    transition:
        background-color var(--sg-transition),
        color var(--sg-transition),
        transform var(--sg-transition);
}

.sg-footer__social-link:hover {
    background-color: var(--sg-red);
    color: var(--sg-white);
    transform: scale(1.1);
}

/* Copyright */
.sg-footer__copyright {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-block: var(--sg-space-lg);
    text-align: center;
}

.sg-footer__copyright p {
    font-size: var(--sg-size-sm);
    color: rgba(255,255,255,0.4);
    margin: 0;
}


/* ============================================================
   FOOTER RESPONSIVE — tablette (min-width: 768px)
   ============================================================ */

@media (min-width: 768px) {

    .sg-footer__inner {
        grid-template-columns: auto 1fr 1fr auto;
        align-items: center;
        gap: var(--sg-space-2xl);
    }

    .sg-prefooter__title { font-size: 2rem; }
}

/* ============================================================
   FOOTER RESPONSIVE — mobile (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {

    .sg-prefooter__inner {
        padding: var(--sg-space-xl) var(--sg-space-lg);
    }

    .sg-prefooter__title { font-size: 1.375rem; }
    .sg-prefooter__subtitle { font-size: var(--sg-size-base); }

    .sg-footer__inner {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--sg-space-xl);
    }

    .sg-footer__brand {
        grid-column: 1 / -1;
    }

    .sg-footer__social {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}


/* ============================================================
   HEADER — Design pill / liquid glass
   Sticky, fond bleu marine, coins arrondis
   S'applique sur toutes les pages du site
   ============================================================ */

.sg-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 8px var(--sg-space-lg);
    transition: padding var(--sg-transition), background var(--sg-transition);
}

/* Conteneur pill */
.sg-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-space-lg);
    background-color: rgba(15, 25, 55, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--sg-radius-pill);
    border: 1.5px solid transparent;
    background-clip: padding-box;
    padding: 8px 12px 8px 16px;
    max-width: var(--sg-max-width);
    margin-inline: auto;
    box-shadow:
        0 4px 32px rgba(8,17,44,0.35),
        0 1px 0 rgba(255,255,255,0.12) inset,
        0 -1px 0 rgba(255,255,255,0.04) inset;
    position: relative;
    transition: background var(--sg-transition), box-shadow var(--sg-transition);
}

/* Bordure gradient lumineux simulée via pseudo-élément */
.sg-header__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--sg-radius-pill);
    border: 1.5px solid transparent;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.35) 0%,
        rgba(255,255,255,0.08) 40%,
        rgba(255,255,255,0.03) 100%
    ) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

/* Highlight supérieur — ligne de lumière */
.sg-header__inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.4) 30%,
        rgba(255,255,255,0.4) 70%,
        transparent 100%
    );
    border-radius: var(--sg-radius-pill);
    pointer-events: none;
}

/* Effet scrolled — légèrement plus opaque */
.sg-header--scrolled .sg-header__inner {
    background-color: rgba(12, 20, 45, 0.82);
    box-shadow:
        0 8px 40px rgba(8,17,44,0.5),
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 -1px 0 rgba(255,255,255,0.04) inset;
}

.sg-header__logo img {
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
}

@media (min-width: 1024px) {
    .sg-header__logo img { height: 36px !important; }
}

/* Navigation desktop */
.sg-header__nav {
    display: none;
    flex: 1;
    justify-content: center;
}

.sg-header__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sg-header__item {
    position: relative;
}

.sg-header__link,
.sg-header__link:visited,
.sg-header__link:hover,
.sg-header__link:focus,
.sg-header__nav a,
.sg-header__nav a:visited {
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
}

.sg-header__link:hover,
.sg-header__link--active {
    color: var(--sg-white) !important;
    background-color: rgba(255,255,255,0.08);
}

/* Forcer la visibilité du CTA Réserver */
.sg-header__cta,
.sg-header__cta:visited {
    color: var(--sg-white) !important;
    background-color: var(--sg-red) !important;
    text-decoration: none !important;
}

.sg-header__cta:hover {
    background-color: var(--sg-red-dark) !important;
    color: var(--sg-white) !important;
}

.sg-header__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--sg-font);
    font-size: 0.9375rem;
    font-weight: var(--sg-weight-semi);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--sg-radius-pill);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--sg-transition), background var(--sg-transition);
}
.sg-header__chevron {
    transition: transform var(--sg-transition);
    flex-shrink: 0;
}

.sg-header__dropdown-toggle[aria-expanded="true"] .sg-header__chevron {
    transform: rotate(180deg);
}

/* Dropdown menu */
.sg-header__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background-color: rgba(20, 30, 55, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--sg-radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(8,17,44,0.40);
    list-style: none;
    padding: 8px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    transition:
        opacity var(--sg-transition),
        visibility var(--sg-transition),
        transform var(--sg-transition);
}

.sg-header__dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.sg-header__dropdown-link {
    display: block;
    font-family: var(--sg-font);
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-semi);
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--sg-radius-md);
    transition: background var(--sg-transition), color var(--sg-transition);
    white-space: nowrap;
}

.sg-header__dropdown-link:hover {
    background-color: rgba(249,9,50,0.12);
    color: var(--sg-white);
}

/* Bouton CTA Réserver */
.sg-header__cta {
    display: none;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-family: var(--sg-font);
    font-size: 0.875rem;
    font-weight: var(--sg-weight-bold);
    color: var(--sg-white);
    background-color: var(--sg-red);
    text-decoration: none;
    padding: 8px 18px;
    border-radius: var(--sg-radius-pill);
    transition:
        background-color var(--sg-transition),
        transform var(--sg-transition),
        box-shadow var(--sg-transition);
}

.sg-header__cta:hover {
    background-color: var(--sg-red-dark);
    color: var(--sg-white);
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(249,9,50,0.35);
}

/* Burger mobile */
.sg-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--sg-radius-md);
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    transition: background var(--sg-transition);
}

.sg-header__burger:hover {
    background: rgba(255,255,255,0.15);
}

.sg-header__burger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--sg-white);
    border-radius: 2px;
    transition: transform var(--sg-transition), opacity var(--sg-transition);
}

/* Burger animé open */
.sg-header__burger--open .sg-header__burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sg-header__burger--open .sg-header__burger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.sg-header__burger--open .sg-header__burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile */
.sg-mobile-menu {
    display: none;
    max-width: var(--sg-max-width);
    margin-inline: auto;
    background-color: rgba(20, 30, 55, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--sg-radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
    margin-top: 8px;
    padding: var(--sg-space-md);
    box-shadow: 0 8px 32px rgba(8,17,44,0.40);
}

.sg-mobile-menu--open {
    display: block;
}

.sg-mobile-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sg-mobile-menu__link {
    display: block;
    font-family: var(--sg-font);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-semi);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--sg-radius-md);
    transition: background var(--sg-transition), color var(--sg-transition);
}

.sg-mobile-menu__link:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--sg-white);
}

.sg-mobile-menu__link--sub {
    font-size: var(--sg-size-sm);
    color: rgba(255,255,255,0.55);
    padding-left: var(--sg-space-xl);
}

.sg-mobile-menu__link--sub:hover {
    color: rgba(255,255,255,0.85);
}

.sg-mobile-menu__cta {
    display: block;
    text-align: center;
    font-family: var(--sg-font);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-white);
    background-color: var(--sg-red);
    text-decoration: none;
    padding: 12px;
    border-radius: var(--sg-radius-pill);
    margin-top: var(--sg-space-sm);
    transition: background-color var(--sg-transition);
}

.sg-mobile-menu__cta:hover {
    background-color: var(--sg-red-dark);
    color: var(--sg-white);
}

/* Suppression forcée de tout espace en haut — Hello Elementor ajoute un padding */
html,
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Compense le header fixe — padding sur les sections de contenu */
.sg-hp-hero {
    padding-top: calc(64px + var(--sg-space-3xl));
}

/* Sur les LP le padding-top du hero remplace celui de base */
.sg-lp .sg-hero {
    padding-top: calc(64px + var(--sg-space-xl));
}

/* Mobile */
@media (max-width: 767px) {
    .sg-hp-hero {
        padding-top: calc(60px + var(--sg-space-xl));
    }
    .sg-lp .sg-hero {
        padding-top: calc(60px + var(--sg-space-md));
    }
}

/* Pages Elementor — compense le header fixe */
.elementor-top-section:first-child,
.e-con:first-child {
    margin-top: 80px !important;
}

/* ============================================================
   HEADER RESPONSIVE — desktop (min-width: 1024px)
   ============================================================ */

@media (min-width: 1024px) {

    .sg-header__nav  { display: flex; }
    .sg-header__cta  { display: inline-flex; }
    .sg-header__burger { display: none; }

    .sg-header__logo img { height: 44px; }
}

/* ============================================================
   HEADER RESPONSIVE — tablette (min-width: 768px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .sg-header__cta { display: inline-flex; }
}


/* ============================================================
   2. VARIABLES CSS
   Palette exacte : #08112c (fond sombre) | #f90932 (rouge) | #ffffff (blanc)
   ============================================================ */

:root {
    /* --- Palette principale --- */
    --sg-dark:          #08112c;      /* Bleu nuit — fond hero, sections sombres */
    --sg-dark-soft:     #0d1a38;      /* Bleu nuit légèrement plus clair — cartes sombres */
    --sg-dark-border:   rgba(255,255,255,0.08); /* Bordure subtile sur fond sombre */
    --sg-red:           #f90932;      /* Rouge vif — CTA, accents, soulignés */
    --sg-red-dark:      #d4071f;      /* Rouge foncé — hover */
    --sg-white:         #ffffff;      /* Blanc — texte sur fond sombre, fonds clairs */
    --sg-white-soft:    #f4f6fa;      /* Blanc cassé — fond sections alternées */
    --sg-text-dark:     #08112c;      /* Texte sur fond blanc */
    --sg-text-muted:    #4a5568;      /* Texte secondaire sur fond blanc */
    --sg-text-light:    rgba(255,255,255,0.75); /* Texte secondaire sur fond sombre */

    /* --- Typographie --- */
    --sg-font:          'Nunito', sans-serif;
    --sg-size-sm:       0.875rem;
    --sg-size-base:     1rem;
    --sg-size-lg:       1.125rem;
    --sg-size-xl:       1.375rem;
    --sg-size-h1:       2rem;
    --sg-size-h2:       1.5rem;
    --sg-size-h3:       1.125rem;
    --sg-weight-normal: 400;
    --sg-weight-semi:   600;
    --sg-weight-bold:   700;
    --sg-weight-black:  800;
    --sg-lh-base:       1.7;
    --sg-lh-tight:      1.25;

    /* --- Espacements --- */
    --sg-space-xs:   0.5rem;
    --sg-space-sm:   0.75rem;
    --sg-space-md:   1rem;
    --sg-space-lg:   1.5rem;
    --sg-space-xl:   2rem;
    --sg-space-2xl:  3rem;
    --sg-space-3xl:  4.5rem;

    /* --- Formes --- */
    --sg-radius-sm:   6px;
    --sg-radius-md:   12px;
    --sg-radius-lg:   20px;
    --sg-radius-pill: 100px;

    /* --- Ombres --- */
    --sg-shadow-sm:  0 2px 8px rgba(8,17,44,0.10);
    --sg-shadow-md:  0 6px 24px rgba(8,17,44,0.14);
    --sg-shadow-lg:  0 12px 48px rgba(8,17,44,0.20);

    /* --- Transitions --- */
    --sg-transition: 0.22s ease;

    /* --- Layout --- */
    --sg-max-width:      1100px;
    --sg-max-width-text: 720px;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

.sg-lp {
    font-family: var(--sg-font);
    font-size: var(--sg-size-base);
    line-height: var(--sg-lh-base);
    color: var(--sg-text-dark);
    background-color: var(--sg-white);
}

.sg-lp img:not(.sg-header__logo img):not(.sg-header img) {
    max-width: 100%;
    height: auto;
    display: block;
}

.sg-lp a {
    color: var(--sg-red);
    text-decoration: none;
    transition: color var(--sg-transition), opacity var(--sg-transition);
}

.sg-lp a:hover,
.sg-lp a:focus {
    color: var(--sg-red-dark);
}


/* ============================================================
   4. TYPOGRAPHIE GLOBALE
   ============================================================ */

.sg-lp h1,
.sg-lp h2,
.sg-lp h3,
.sg-lp h4 {
    font-family: var(--sg-font);
    font-weight: var(--sg-weight-black);
    line-height: var(--sg-lh-tight);
    margin-top: 0;
    margin-bottom: var(--sg-space-md);
}

.sg-lp h1 { font-size: var(--sg-size-h1); }
.sg-lp h2 { font-size: var(--sg-size-h2); }
.sg-lp h3 { font-size: var(--sg-size-h3); }

.sg-lp p {
    margin-top: 0;
    margin-bottom: var(--sg-space-md);
}

.sg-lp p:last-child { margin-bottom: 0; }

/* Conteneur centré */
.sg-container {
    width: 100%;
    max-width: var(--sg-max-width);
    margin-inline: auto;
    padding-inline: var(--sg-space-lg);
}

/* Titre de section avec soulignement rouge */
.sg-section__title {
    text-align: center;
    margin-bottom: var(--sg-space-xl);
    color: inherit;
}

.sg-section__title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--sg-red);
    margin: var(--sg-space-sm) auto 0;
    border-radius: var(--sg-radius-pill);
}

.sg-section--dark .sg-section__title { color: var(--sg-white); }
.sg-section--light .sg-section__title { color: var(--sg-dark); }
.sg-section--soft .sg-section__title  { color: var(--sg-dark); }


/* ============================================================
   5. BOUTONS CTA
   ============================================================ */

.sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sg-space-xs);
    font-family: var(--sg-font);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--sg-radius-pill);
    padding: 0.9rem 1.8rem;
    transition:
        background-color var(--sg-transition),
        border-color var(--sg-transition),
        color var(--sg-transition),
        transform var(--sg-transition),
        box-shadow var(--sg-transition);
}

.sg-btn:focus-visible {
    outline: 3px solid var(--sg-red);
    outline-offset: 3px;
}

/* Rouge — principal */
.sg-btn--red {
    background-color: var(--sg-red);
    border-color: var(--sg-red);
    color: var(--sg-white);
}

.sg-btn--red:hover,
.sg-btn--red:focus {
    background-color: var(--sg-red-dark);
    border-color: var(--sg-red-dark);
    color: var(--sg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,9,50,0.35);
}

/* Contour blanc — sur fond sombre */
.sg-btn--outline-white {
    background-color: transparent;
    border-color: var(--sg-white);
    color: var(--sg-white);
}

.sg-btn--outline-white:hover,
.sg-btn--outline-white:focus {
    background-color: var(--sg-white);
    color: var(--sg-red);
    transform: translateY(-2px);
    box-shadow: var(--sg-shadow-md);
}

/* Large */
.sg-btn--lg {
    font-size: var(--sg-size-lg);
    padding: 1.1rem 2.25rem;
}


/* Hero — layout 2 colonnes */
.sg-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-xl);
    align-items: center;
}

.sg-hero__content {
    text-align: center;
}

.sg-hero__image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sg-hero__image img {
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    object-fit: cover;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}


/* ============================================================
   6. LP — HERO
   Fond #08112c avec effet de lumière rouge subtil
   ============================================================ */

.sg-hero {
    background-color: var(--sg-dark);
    color: var(--sg-white);
    padding-bottom: var(--sg-space-3xl);
    padding-top: var(--sg-space-3xl);
    position: relative;
    overflow: hidden;
}

.sg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 50%, rgba(249,9,50,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(255,255,255,0.02) 0%, transparent 50%);
    pointer-events: none;
}

.sg-hero .sg-container {
    position: relative;
    z-index: 1;
}

/* Badge eyebrow */
.sg-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-xs);
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sg-white);
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--sg-radius-pill);
    padding: 0.35rem 0.9rem;
    margin-bottom: var(--sg-space-lg);
}

/* H1 */
.sg-hero__title {
    color: var(--sg-white);
    font-size: var(--sg-size-h1);
    font-weight: var(--sg-weight-black);
    line-height: 1.15;
    margin-bottom: var(--sg-space-sm);
}

/* Sous-titre en rouge — comme "Un artiste drôlement magique" */
.sg-hero__tagline {
    font-size: var(--sg-size-lg);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-red);
    margin-bottom: var(--sg-space-md);
}

/* Texte d'intro */
.sg-hero__subtitle {
    font-size: var(--sg-size-base);
    color: var(--sg-text-light);
    line-height: 1.65;
    margin-bottom: var(--sg-space-xl);
    max-width: 540px;
}

/* Boutons */
.sg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-md);
}

/* Téléphone dans le hero */
.sg-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-xs);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-semi);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color var(--sg-transition);
}

.sg-hero__phone:hover { color: var(--sg-red); }
.sg-hero__phone::before { content: '📞'; font-size: 0.9rem; }


/* ============================================================
   7. LP — RÉASSURANCE
   Fond blanc — 3 chiffres clés en ligne
   ============================================================ */

.sg-reassurance {
    background-color: var(--sg-white);
    border-bottom: 1px solid rgba(8,17,44,0.07);
    padding-block: var(--sg-space-xl);
}

.sg-reassurance__grid {
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-lg);
}

.sg-reassurance__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
}

.sg-reassurance__number {
    font-size: 2rem;
    font-weight: var(--sg-weight-black);
    color: var(--sg-dark);
    line-height: 1;
}

.sg-reassurance__label {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-semi);
    color: var(--sg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sg-reassurance__item + .sg-reassurance__item {
    border-top: 1px solid rgba(8,17,44,0.07);
    padding-top: var(--sg-space-lg);
}


/* ============================================================
   8. LP — ÉVÉNEMENTS
   Fond #08112c — liste d'occasions sur fond sombre
   ============================================================ */

.sg-events {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
}

.sg-events__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-sm);
}

.sg-events__item {
    display: flex;
    align-items: center;
    gap: var(--sg-space-md);
    padding: var(--sg-space-md) var(--sg-space-lg);
    background-color: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--sg-radius-md);
    color: var(--sg-white);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-semi);
    transition: background-color var(--sg-transition), border-color var(--sg-transition);
}

.sg-events__item:hover {
    background-color: rgba(249,9,50,0.08);
    border-color: rgba(249,9,50,0.25);
}

.sg-events__item::before {
    content: '';
    width: 7px;
    height: 7px;
    min-width: 7px;
    background-color: var(--sg-red);
    border-radius: 50%;
}


/* ============================================================
   9. LP — PRESTATION DÉTAILLÉE
   Fond blanc — contenu riche
   ============================================================ */

.sg-prestation {
    background-color: var(--sg-white);
    padding-block: var(--sg-space-2xl);
}

.sg-prestation__lead {
    font-size: var(--sg-size-lg);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin-bottom: var(--sg-space-xl);
    padding-left: var(--sg-space-lg);
    border-left: 3px solid var(--sg-red);
    line-height: 1.5;
}

.sg-prestation__content {
    color: var(--sg-text-dark);
    line-height: var(--sg-lh-base);
}

.sg-prestation__content p { margin-bottom: var(--sg-space-lg); }
.sg-prestation__content strong { color: var(--sg-dark); font-weight: var(--sg-weight-bold); }


/* ============================================================
   10. LP — POURQUOI SYLVAIN
   Fond blanc cassé — 4 cartes blanches
   ============================================================ */

.sg-why {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-2xl);
}

.sg-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-lg);
}

.sg-why__card {
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-lg);
    padding: var(--sg-space-xl);
    box-shadow: var(--sg-shadow-sm);
    border-top: 3px solid var(--sg-red);
    transition: box-shadow var(--sg-transition), transform var(--sg-transition);
}

.sg-why__card:hover {
    box-shadow: var(--sg-shadow-md);
    transform: translateY(-3px);
}

.sg-why__card-icon {
    font-size: 1.75rem;
    margin-bottom: var(--sg-space-sm);
    line-height: 1;
}

.sg-why__card-title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin-bottom: var(--sg-space-sm);
}

.sg-why__card-text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    line-height: 1.65;
    margin: 0;
}


/* ============================================================
   11. LP — TÉMOIGNAGE
   Fond #08112c — citation blanche sur fond sombre
   ============================================================ */

.sg-testimonial {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sg-testimonial::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(249,9,50,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.sg-testimonial .sg-container { position: relative; z-index: 1; }

.sg-testimonial__stars {
    color: var(--sg-red);
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    margin-bottom: var(--sg-space-lg);
}

.sg-testimonial__quote {
    font-size: var(--sg-size-lg);
    font-style: italic;
    font-weight: var(--sg-weight-semi);
    color: var(--sg-white);
    line-height: 1.65;
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--sg-space-lg);
    padding: 0 var(--sg-space-xl);
    position: relative;
}

.sg-testimonial__quote::before {
    content: '\201C';
    font-size: 5rem;
    font-style: normal;
    color: var(--sg-red);
    line-height: 1;
    position: absolute;
    top: -1.5rem;
    left: 0;
    opacity: 0.5;
}

.sg-testimonial__author {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sg-red);
}


/* ============================================================
   12. LP — ZONES COUVERTES
   Fond blanc cassé
   ============================================================ */

.sg-zones {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-xl);
}

.sg-zones__text {
    font-size: var(--sg-size-base);
    color: var(--sg-text-muted);
    line-height: 1.8;
    text-align: center;
    max-width: var(--sg-max-width-text);
    margin-inline: auto;
}


/* ============================================================
   13. LP — FAQ LOCALE
   Fond blanc — accordéon CSS pur
   ============================================================ */

.sg-faq {
    background-color: var(--sg-white);
    padding-block: var(--sg-space-2xl);
}

.sg-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-sm);
    max-width: var(--sg-max-width-text);
    margin-inline: auto;
}

.sg-faq__item {
    border: 1px solid rgba(8,17,44,0.10);
    border-radius: var(--sg-radius-md);
    overflow: hidden;
    background-color: var(--sg-white);
    transition: border-color var(--sg-transition), box-shadow var(--sg-transition);
}

.sg-faq__item[open] {
    border-color: var(--sg-red);
    box-shadow: 0 4px 16px rgba(249,9,50,0.07);
}

.sg-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-space-md);
    padding: var(--sg-space-md) var(--sg-space-lg);
    font-family: var(--sg-font);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color var(--sg-transition);
}

.sg-faq__question::-webkit-details-marker { display: none; }

.sg-faq__question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: var(--sg-weight-normal);
    color: var(--sg-red);
    flex-shrink: 0;
    transition: transform var(--sg-transition);
    line-height: 1;
}

.sg-faq__item[open] > .sg-faq__question::after { transform: rotate(45deg); }
.sg-faq__question:hover { color: var(--sg-red); }

.sg-faq__answer {
    padding: var(--sg-space-md) var(--sg-space-lg) var(--sg-space-lg);
    border-top: 1px solid rgba(8,17,44,0.07);
    font-size: var(--sg-size-base);
    color: var(--sg-text-muted);
    line-height: var(--sg-lh-base);
}

.sg-faq__answer p { margin: 0; }


/* ============================================================
   14. LP — MAILLAGE INTERNE
   Fond #08112c — navigation en bas de page
   ============================================================ */

.sg-internal-links {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-xl);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.sg-internal-links__label {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
    margin-bottom: var(--sg-space-md);
}

.sg-internal-links__list {
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

.sg-internal-links__item a {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-xs);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-semi);
    color: var(--sg-white);
    text-decoration: none;
    transition: color var(--sg-transition);
}

.sg-internal-links__item a::before {
    content: '→';
    color: var(--sg-red);
    font-weight: var(--sg-weight-black);
    transition: transform var(--sg-transition);
}

.sg-internal-links__item a:hover { color: var(--sg-red); }
.sg-internal-links__item a:hover::before { transform: translateX(4px); }

.sg-internal-links__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: var(--sg-weight-bold);
    background-color: rgba(249,9,50,0.12);
    color: var(--sg-red);
    border: 1px solid rgba(249,9,50,0.25);
    border-radius: var(--sg-radius-pill);
    padding: 0.1em 0.6em;
    margin-left: var(--sg-space-xs);
    vertical-align: middle;
}


/* ============================================================
   15. LP — CTA FINAL
   Fond #08112c — "Besoin d'une prestation ?" comme sur le site
   ============================================================ */

.sg-cta-final {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-3xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sg-cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(249,9,50,0.08) 0%, transparent 65%);
    pointer-events: none;
}

.sg-cta-final .sg-container { position: relative; z-index: 1; }

.sg-cta-final__title {
    color: var(--sg-white);
    font-size: var(--sg-size-h2);
    font-weight: var(--sg-weight-black);
    margin-bottom: var(--sg-space-md);
}

.sg-cta-final__subtitle {
    color: var(--sg-text-light);
    font-size: var(--sg-size-lg);
    margin-bottom: var(--sg-space-xl);
    max-width: 520px;
    margin-inline: auto;
}


/* Force la visibilité du H1 — Hello Elementor peut le masquer sur certaines configs */
.sg-lp .sg-hero__title,
.sg-lp h1#sg-hero-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--sg-white) !important;
    font-size: var(--sg-size-h1);
    font-weight: var(--sg-weight-black);
    line-height: 1.15;
    margin-bottom: var(--sg-space-md);
}


/* ============================================================
   CORRECTIF — Titre section blanc sur fond sombre
   ============================================================ */

.sg-section__title--white {
    color: var(--sg-white);
}

.sg-section__title--white::after {
    background-color: var(--sg-red);
}


/* ============================================================
   CORRECTIF — CTA sur fond sombre toujours rouge
   Tous les boutons sur fond #08112c sont rouges, pas outline blanc
   ============================================================ */

.sg-events .sg-btn,
.sg-cta-final .sg-btn,
.sg-internal-links .sg-btn,
.sg-hero .sg-btn {
    background-color: var(--sg-red);
    border-color: var(--sg-red);
    color: var(--sg-white);
}

/* Scale au hover — même couleur, texte blanc conservé */
.sg-btn--red:hover,
.sg-btn--red:focus,
.sg-events .sg-btn:hover,
.sg-cta-final .sg-btn:hover {
    background-color: var(--sg-red);
    border-color: var(--sg-red);
    color: var(--sg-white) !important; /* Force le blanc — priorité sur les règles héritées du thème parent */
    transform: scale(1.04);
    box-shadow: 0 6px 24px rgba(249,9,50,0.40);
}

.sg-events__cta {
    text-align: center;
    margin-top: var(--sg-space-xl);
}


/* ============================================================
   CARDS ÉVÉNEMENTS — fond sombre
   ============================================================ */

.sg-events__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-space-sm);
}

.sg-events__card {
    display: flex;
    align-items: center;
    gap: var(--sg-space-md);
    padding: var(--sg-space-md) var(--sg-space-lg);
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--sg-radius-md);
    transition: background-color var(--sg-transition), border-color var(--sg-transition);
}

.sg-events__card:hover {
    background-color: rgba(249,9,50,0.08);
    border-color: rgba(249,9,50,0.25);
}

.sg-events__card-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.sg-events__card-label {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-semi);
    color: var(--sg-white);
    line-height: 1.4;
}


/* ============================================================
   CARDS PRESTATION — fond blanc
   ============================================================ */

.sg-prestation__intro {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    line-height: 1.7;
    margin-bottom: var(--sg-space-2xl);
    max-width: var(--sg-max-width-text);
}

.sg-prestation__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-lg);
    margin-top: var(--sg-space-xl);
}

.sg-prestation__card {
    background-color: var(--sg-white);
    border: 1px solid rgba(8,17,44,0.08);
    border-radius: var(--sg-radius-lg);
    padding: var(--sg-space-xl);
    box-shadow: var(--sg-shadow-sm);
    border-top: 3px solid var(--sg-red);
    transition: box-shadow var(--sg-transition), transform var(--sg-transition);
}

.sg-prestation__card:hover {
    box-shadow: var(--sg-shadow-md);
    transform: translateY(-3px);
}

.sg-prestation__card-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--sg-space-sm);
    display: block;
}

.sg-prestation__card-title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin-bottom: var(--sg-space-xs);
    margin-top: 0;
}

.sg-prestation__card-text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    line-height: 1.65;
    margin: 0;
}


/* ============================================================
   RÉASSURANCE — 4 chiffres clés
   ============================================================ */

.sg-reassurance__icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}


/* ============================================================
   FAQ — lien contact dans les réponses
   ============================================================ */

.sg-faq__link {
    color: var(--sg-red);
    text-decoration: underline;
    font-weight: var(--sg-weight-semi);
}

.sg-faq__link:hover {
    color: var(--sg-red-dark);
}


/* ============================================================
   16. UTILITAIRES
   ============================================================ */

.sg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.sg-divider {
    width: 40px;
    height: 3px;
    background-color: var(--sg-red);
    border: none;
    border-radius: var(--sg-radius-pill);
    margin-block: var(--sg-space-lg);
}

.sg-divider--center { margin-inline: auto; }

.sg-text-red    { color: var(--sg-red); }
.sg-text-white  { color: var(--sg-white); }
.sg-text-dark   { color: var(--sg-dark); }
.sg-text-muted  { color: var(--sg-text-muted); }
.sg-text-bold   { font-weight: var(--sg-weight-bold); }
.sg-text-black  { font-weight: var(--sg-weight-black); }
.sg-text-center { text-align: center; }


/* ============================================================
   PAGE SPECTACLE CABARET — .sg-cabaret
   ============================================================ */

.sg-cab-main { font-family: var(--sg-font); }

.sg-cab-section-title {
    font-size: var(--sg-size-h2);
    font-weight: var(--sg-weight-black);
    color: var(--sg-dark);
    text-align: center;
    margin-bottom: var(--sg-space-xl);
}
.sg-cab-section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--sg-red);
    margin: var(--sg-space-sm) auto 0;
    border-radius: var(--sg-radius-pill);
}
.sg-cab-section-title--left  { text-align: left; }
.sg-cab-section-title--left::after { margin-inline: 0; }
.sg-cab-section-title--white { color: var(--sg-white); }
.sg-cab-section-title--dark  { color: var(--sg-dark); }

/* Hero */
.sg-cab-hero {
    background-color: var(--sg-dark);
    color: var(--sg-white);
    padding-top: calc(64px + var(--sg-space-3xl));
    padding-bottom: var(--sg-space-3xl);
    position: relative;
    overflow: hidden;
}
.sg-cab-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 40%, rgba(249,9,50,0.07) 0%, transparent 55%);
    pointer-events: none;
}
.sg-cab-hero .sg-container { position: relative; z-index: 1; }
.sg-cab-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
}
.sg-cab-hero__eyebrow {
    display: inline-block;
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sg-white);
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--sg-radius-pill);
    padding: 0.35rem 0.9rem;
    margin-bottom: var(--sg-space-lg);
}
.sg-cab-hero__title {
    font-size: 1.875rem;
    font-weight: var(--sg-weight-black);
    color: var(--sg-white);
    line-height: 1.2;
    margin-bottom: var(--sg-space-md);
}
.sg-cab-hero__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-light);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}
.sg-cab-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-md);
    align-items: center;
}
.sg-cab-hero__phone {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-weight: var(--sg-weight-semi);
    transition: color var(--sg-transition);
}
.sg-cab-hero__phone:hover { color: var(--sg-red); }
.sg-cab-hero__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    object-fit: cover;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

/* Numéros */
.sg-cab-numeros {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-2xl);
}
.sg-cab-numeros__intro {
    text-align: center;
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--sg-space-2xl);
    line-height: 1.7;
}
.sg-cab-numeros__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-lg);
}
.sg-cab-numero-card {
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-lg);
    overflow: hidden;
    box-shadow: var(--sg-shadow-sm);
    transition: box-shadow var(--sg-transition), transform var(--sg-transition);
}
.sg-cab-numero-card:hover {
    box-shadow: var(--sg-shadow-md);
    transform: translateY(-3px);
}
.sg-cab-numero-card__img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.sg-cab-numero-card--participation {
    background-color: var(--sg-dark);
    display: flex;
    align-items: center;
}
.sg-cab-numero-card--participation .sg-cab-numero-card__content {
    padding: var(--sg-space-xl);
}
.sg-cab-numero-card--participation .sg-cab-numero-card__title { color: var(--sg-white); }
.sg-cab-numero-card--participation .sg-cab-numero-card__text  { color: var(--sg-text-light); }
.sg-cab-numero-card__content {
    padding: var(--sg-space-lg);
}
.sg-cab-numero-card__icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: var(--sg-space-sm);
}
.sg-cab-numero-card__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin: 0 0 var(--sg-space-xs);
}
.sg-cab-numero-card__text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Participation */
.sg-cab-participation {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
}
.sg-cab-participation__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
}
.sg-cab-participation__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-light);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}
.sg-cab-participation__details {
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-md);
    margin-bottom: var(--sg-space-xl);
}
.sg-cab-participation__detail {
    display: flex;
    align-items: center;
    gap: var(--sg-space-md);
    font-size: var(--sg-size-base);
    color: rgba(255,255,255,0.8);
}
.sg-cab-participation__detail strong { color: var(--sg-white); }
.sg-cab-participation__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    object-fit: cover;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

/* Repas anciens */
.sg-cab-anciens {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-2xl);
}
.sg-cab-anciens__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
}
.sg-cab-anciens__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    object-fit: cover;
    box-shadow: var(--sg-shadow-lg);
}
.sg-cab-anciens__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}
.sg-cab-anciens__list {
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-sm);
    margin-bottom: var(--sg-space-xl);
}
.sg-cab-anciens__item {
    display: flex;
    align-items: center;
    gap: var(--sg-space-md);
    font-size: var(--sg-size-base);
    color: var(--sg-text-muted);
    padding: var(--sg-space-sm) var(--sg-space-md);
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-md);
    border-left: 3px solid var(--sg-red);
}

/* Pour qui */
.sg-cab-pourqui {
    background-color: var(--sg-white);
    padding-block: var(--sg-space-2xl);
}
.sg-cab-pourqui__intro {
    text-align: center;
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--sg-space-2xl);
    line-height: 1.7;
}
.sg-cab-pourqui__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-space-lg);
}
.sg-cab-pourqui-card {
    padding: var(--sg-space-xl);
    background-color: var(--sg-white-soft);
    border-radius: var(--sg-radius-lg);
    border-top: 3px solid var(--sg-red);
}
.sg-cab-pourqui-card__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--sg-space-sm);
}
.sg-cab-pourqui-card__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin-bottom: var(--sg-space-xs);
}
.sg-cab-pourqui-card__text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Maillage */
.sg-cab-maillage {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-lg);
    border-top: 1px solid rgba(8,17,44,0.07);
}
.sg-cab-maillage__titre {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sg-space-sm);
}
.sg-cab-maillage__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-xs) var(--sg-space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}
.sg-cab-maillage__list a {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    text-decoration: none;
    transition: color var(--sg-transition);
}
.sg-cab-maillage__list a::before { content: '→ '; color: var(--sg-red); }
.sg-cab-maillage__list a:hover  { color: var(--sg-dark); }

/* Responsive tablette */
@media (min-width: 768px) {
    .sg-cab-hero__inner         { grid-template-columns: 1fr 1fr; }
    .sg-cab-hero__title         { font-size: 2.25rem; }
    .sg-cab-hero__image img     { margin-inline: 0; max-width: 100%; }
    .sg-cab-numeros__grid       { grid-template-columns: repeat(3, 1fr); }
    .sg-cab-participation__inner { grid-template-columns: 1fr 1fr; }
    .sg-cab-participation__image img { margin-inline: 0; max-width: 100%; }
    .sg-cab-anciens__inner      { grid-template-columns: 1fr 1fr; }
    .sg-cab-anciens__image img  { margin-inline: 0; max-width: 100%; }
}

/* Responsive mobile */
@media (max-width: 767px) {
    .sg-cab-hero { padding-top: calc(60px + var(--sg-space-xl)); text-align: center; }
    .sg-cab-hero__title { font-size: 1.5rem; }
    .sg-cab-hero__actions { justify-content: center; }
    .sg-cab-hero__actions .sg-btn { width: 100%; max-width: 300px; justify-content: center; }
    .sg-cab-section-title { font-size: 1.375rem; }
    .sg-cab-pourqui__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   PAGE SPECTACLE ENFANTS — .sg-enfants
   ============================================================ */

.sg-enf-main { font-family: var(--sg-font); }

/* Titres */
.sg-enf-section-title {
    font-size: var(--sg-size-h2);
    font-weight: var(--sg-weight-black);
    color: var(--sg-dark);
    text-align: center;
    margin-bottom: var(--sg-space-xl);
}
.sg-enf-section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--sg-red);
    margin: var(--sg-space-sm) auto 0;
    border-radius: var(--sg-radius-pill);
}
.sg-enf-section-title--left { text-align: left; }
.sg-enf-section-title--left::after { margin-inline: 0; }
.sg-enf-section-title--white { color: var(--sg-white); }
.sg-enf-section-title--dark  { color: var(--sg-dark); }

/* Hero */
.sg-enf-hero {
    background-color: var(--sg-dark);
    color: var(--sg-white);
    padding-top: calc(64px + var(--sg-space-3xl));
    padding-bottom: var(--sg-space-3xl);
    position: relative;
    overflow: hidden;
}
.sg-enf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 40%, rgba(249,9,50,0.07) 0%, transparent 55%);
    pointer-events: none;
}
.sg-enf-hero .sg-container { position: relative; z-index: 1; }
.sg-enf-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
}
.sg-enf-hero__eyebrow {
    display: inline-block;
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sg-white);
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--sg-radius-pill);
    padding: 0.35rem 0.9rem;
    margin-bottom: var(--sg-space-lg);
}
.sg-enf-hero__title {
    font-size: 1.875rem;
    font-weight: var(--sg-weight-black);
    color: var(--sg-white);
    line-height: 1.2;
    margin-bottom: var(--sg-space-md);
}
.sg-enf-hero__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-light);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}
.sg-enf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-md);
    align-items: center;
}
.sg-enf-hero__phone {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-weight: var(--sg-weight-semi);
    transition: color var(--sg-transition);
}
.sg-enf-hero__phone:hover { color: var(--sg-red); }
.sg-enf-hero__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    object-fit: cover;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

/* Section spectacle */
.sg-enf-spectacle {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-2xl);
}
.sg-enf-spectacle__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
    margin-bottom: var(--sg-space-xl);
}
.sg-enf-spectacle__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    object-fit: cover;
    box-shadow: var(--sg-shadow-lg);
}
.sg-enf-spectacle__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}
.sg-enf-disciplines {
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-lg);
    margin-bottom: var(--sg-space-xl);
}
.sg-enf-discipline {
    display: flex;
    gap: var(--sg-space-lg);
    align-items: flex-start;
    padding: var(--sg-space-lg);
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-lg);
    border-left: 3px solid var(--sg-red);
    box-shadow: var(--sg-shadow-sm);
}
.sg-enf-discipline__icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}
.sg-enf-discipline__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin: 0 0 var(--sg-space-xs);
}
.sg-enf-discipline__text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Anniversaires */
.sg-enf-anniv {
    background-color: var(--sg-white);
    padding-block: var(--sg-space-2xl);
}
.sg-enf-anniv__intro {
    text-align: center;
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--sg-space-2xl);
    line-height: 1.7;
}
.sg-enf-anniv__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-lg);
    margin-bottom: var(--sg-space-2xl);
}
.sg-enf-step {
    display: flex;
    gap: var(--sg-space-lg);
    align-items: flex-start;
    padding: var(--sg-space-lg);
    background-color: var(--sg-white-soft);
    border-radius: var(--sg-radius-lg);
}
.sg-enf-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background-color: var(--sg-red);
    color: var(--sg-white);
    font-size: var(--sg-size-lg);
    font-weight: var(--sg-weight-black);
    border-radius: 50%;
    line-height: 1;
}
.sg-enf-step__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin: 0 0 var(--sg-space-xs);
}
.sg-enf-step__text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    line-height: 1.6;
    margin: 0;
}
.sg-enf-anniv__cta { text-align: center; }

/* Événements */
.sg-enf-events {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
}
.sg-enf-events__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
}
.sg-enf-events__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-light);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}
.sg-enf-events__list {
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-md);
    margin-bottom: var(--sg-space-xl);
}
.sg-enf-event-item {
    display: flex;
    gap: var(--sg-space-md);
    align-items: flex-start;
    padding: var(--sg-space-md);
    background-color: rgba(255,255,255,0.05);
    border-radius: var(--sg-radius-md);
    border-left: 3px solid var(--sg-red);
}
.sg-enf-event-item span:first-child { font-size: 1.5rem; flex-shrink: 0; }
.sg-enf-event-item strong {
    display: block;
    color: var(--sg-white);
    font-size: var(--sg-size-base);
    margin-bottom: 4px;
}
.sg-enf-event-item p {
    color: var(--sg-text-light);
    font-size: var(--sg-size-sm);
    line-height: 1.6;
    margin: 0;
}
.sg-enf-events__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    object-fit: cover;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

/* Maillage */
.sg-enf-maillage {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-lg);
    border-top: 1px solid rgba(8,17,44,0.07);
}
.sg-enf-maillage__titre {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sg-space-sm);
}
.sg-enf-maillage__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-xs) var(--sg-space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}
.sg-enf-maillage__list a {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    text-decoration: none;
    transition: color var(--sg-transition);
}
.sg-enf-maillage__list a::before { content: '→ '; color: var(--sg-red); }
.sg-enf-maillage__list a:hover { color: var(--sg-dark); }

/* Responsive tablette */
@media (min-width: 768px) {
    .sg-enf-hero__inner        { grid-template-columns: 1fr 1fr; }
    .sg-enf-hero__title        { font-size: 2.25rem; }
    .sg-enf-hero__image img    { margin-inline: 0; max-width: 100%; }
    .sg-enf-spectacle__inner   { grid-template-columns: 1fr 1fr; }
    .sg-enf-spectacle__image img { margin-inline: 0; max-width: 100%; }
    .sg-enf-anniv__steps       { grid-template-columns: 1fr 1fr; }
    .sg-enf-events__inner      { grid-template-columns: 1fr 1fr; }
    .sg-enf-events__image img  { margin-inline: 0; max-width: 100%; }
}

/* Responsive mobile */
@media (max-width: 767px) {
    .sg-enf-hero { padding-top: calc(60px + var(--sg-space-xl)); text-align: center; }
    .sg-enf-hero__title { font-size: 1.5rem; }
    .sg-enf-hero__actions { justify-content: center; }
    .sg-enf-hero__actions .sg-btn { width: 100%; max-width: 300px; justify-content: center; }
    .sg-enf-section-title { font-size: 1.375rem; }
}


/* ============================================================
   PAGE SPECTACLE DE NOËL — .sg-noel
   ============================================================ */

.sg-noel-main {
    font-family: var(--sg-font);
}

/* --- Titres de section --- */
.sg-noel-section-title {
    font-size: var(--sg-size-h2);
    font-weight: var(--sg-weight-black);
    color: var(--sg-white);
    text-align: center;
    margin-bottom: var(--sg-space-xl);
}

.sg-noel-section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--sg-red);
    margin: var(--sg-space-sm) auto 0;
    border-radius: var(--sg-radius-pill);
}

.sg-noel-section-title--left { text-align: left; }
.sg-noel-section-title--left::after { margin-inline: 0; }
.sg-noel-section-title--dark { color: var(--sg-dark); }


/* --- Hero --- */
.sg-noel-hero {
    background-color: var(--sg-dark);
    color: var(--sg-white);
    padding-top: calc(64px + var(--sg-space-3xl));
    padding-bottom: var(--sg-space-3xl);
    position: relative;
    overflow: hidden;
}

.sg-noel-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 40%, rgba(249,9,50,0.08) 0%, transparent 55%);
    pointer-events: none;
}

.sg-noel-hero .sg-container { position: relative; z-index: 1; }

.sg-noel-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
}

.sg-noel-hero__eyebrow {
    display: inline-block;
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sg-white);
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--sg-radius-pill);
    padding: 0.35rem 0.9rem;
    margin-bottom: var(--sg-space-lg);
}

.sg-noel-hero__title {
    font-size: 1.875rem;
    font-weight: var(--sg-weight-black);
    color: var(--sg-white);
    line-height: 1.2;
    margin-bottom: var(--sg-space-md);
}

.sg-noel-hero__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-light);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}

.sg-noel-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-md);
    align-items: center;
}

.sg-noel-hero__phone {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-weight: var(--sg-weight-semi);
    transition: color var(--sg-transition);
}

.sg-noel-hero__phone:hover { color: var(--sg-red); }

.sg-noel-hero__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    object-fit: cover;
}


/* --- Présentation --- */
.sg-noel-presentation {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
}

.sg-noel-presentation__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
    margin-bottom: var(--sg-space-2xl);
}

.sg-noel-presentation__text {
    color: var(--sg-text-light);
    font-size: var(--sg-size-lg);
    line-height: 1.7;
    margin-bottom: var(--sg-space-lg);
}

.sg-noel-video-link-wrap {
    margin-top: var(--sg-space-lg);
}

.sg-noel-video-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-xs);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-semi);
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color var(--sg-transition);
}

.sg-noel-video-link:hover {
    color: var(--sg-white);
}

.sg-noel-presentation__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    object-fit: cover;
}

/* Cards disciplines */
.sg-noel-disciplines {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-space-md);
    margin-bottom: var(--sg-space-2xl);
}

.sg-noel-discipline-card {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 3px solid var(--sg-red);
    border-radius: var(--sg-radius-lg);
    padding: var(--sg-space-lg);
    text-align: center;
    transition: background-color var(--sg-transition);
}

.sg-noel-discipline-card:hover {
    background-color: rgba(249,9,50,0.08);
}

.sg-noel-discipline-card__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--sg-space-sm);
}

.sg-noel-discipline-card__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-white);
    margin-bottom: var(--sg-space-xs);
}

.sg-noel-discipline-card__text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-light);
    line-height: 1.6;
    margin: 0;
}

.sg-noel-presentation__cta {
    text-align: center;
}


/* --- Pour qui (Arbre de Noël) --- */
.sg-noel-pourqui {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-2xl);
}

.sg-noel-pourqui__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-2xl);
    align-items: center;
}

.sg-noel-pourqui__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--sg-radius-lg);
    margin-inline: auto;
    box-shadow: var(--sg-shadow-lg);
    object-fit: cover;
}

.sg-noel-pourqui__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}

.sg-noel-audiences {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-space-sm);
    margin-bottom: var(--sg-space-xl);
}

.sg-noel-audience-card {
    display: flex;
    align-items: center;
    gap: var(--sg-space-sm);
    padding: var(--sg-space-sm) var(--sg-space-md);
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-md);
    border-left: 3px solid var(--sg-red);
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-semi);
    color: var(--sg-dark);
    box-shadow: var(--sg-shadow-sm);
}


/* --- Pourquoi Sylvain --- */
.sg-noel-why {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
}

.sg-noel-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-space-lg);
}

.sg-noel-why-card {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 3px solid var(--sg-red);
    border-radius: var(--sg-radius-lg);
    padding: var(--sg-space-xl);
}

.sg-noel-why-card__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--sg-space-sm);
}

.sg-noel-why-card__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-white);
    margin-bottom: var(--sg-space-xs);
}

.sg-noel-why-card__text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-light);
    line-height: 1.6;
    margin: 0;
}


/* --- Maillage interne discret --- */
.sg-noel-maillage {
    background-color: var(--sg-white);
    padding-block: var(--sg-space-lg);
    border-top: 1px solid rgba(8,17,44,0.07);
}

.sg-noel-maillage--inline {
    background-color: transparent;
    padding-block: 0;
    border-top: 1px solid rgba(8,17,44,0.07);
    margin-top: var(--sg-space-xl);
    padding-top: var(--sg-space-lg);
}

.sg-noel-maillage__titre {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sg-space-sm);
}

.sg-noel-maillage__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-xs) var(--sg-space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

.sg-noel-maillage__list a {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    text-decoration: none;
    transition: color var(--sg-transition);
}

.sg-noel-maillage__list a::before {
    content: '→ ';
    color: var(--sg-red);
}

.sg-noel-maillage__list a:hover {
    color: var(--sg-dark);
}


/* --- Fiche technique --- */
.sg-noel-fiche {
    background-color: var(--sg-white);
    padding-block: var(--sg-space-2xl);
}

.sg-noel-fiche .sg-noel-section-title { color: var(--sg-dark); }

.sg-noel-fiche__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-md);
}

.sg-noel-fiche-bloc {
    display: flex;
    align-items: flex-start;
    gap: var(--sg-space-lg);
    padding: var(--sg-space-lg);
    background-color: var(--sg-white-soft);
    border-radius: var(--sg-radius-lg);
    border-left: 3px solid var(--sg-red);
}

.sg-noel-fiche-bloc__icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.sg-noel-fiche-bloc__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin: 0 0 var(--sg-space-xs);
}

.sg-noel-fiche-bloc__text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    line-height: 1.65;
    margin: 0;
}


/* --- Contact rapide --- */
.sg-noel-contact {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sg-noel-contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(249,9,50,0.07) 0%, transparent 65%);
    pointer-events: none;
}

.sg-noel-contact .sg-container { position: relative; z-index: 1; }

.sg-noel-contact__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-light);
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: var(--sg-space-xl);
    line-height: 1.7;
}

.sg-noel-contact__infos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sg-space-xl);
    margin-bottom: var(--sg-space-xl);
}

.sg-noel-contact__info {
    font-size: var(--sg-size-lg);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-white);
    text-decoration: none;
    transition: color var(--sg-transition);
}

.sg-noel-contact__info:hover { color: var(--sg-red); }


/* ============================================================
   NOËL RESPONSIVE — tablette (min-width: 768px)
   ============================================================ */

@media (min-width: 768px) {

    .sg-noel-hero__inner { grid-template-columns: 1fr 1fr; }
    .sg-noel-hero__title { font-size: 2.25rem; }
    .sg-noel-hero__image img { margin-inline: 0; max-width: 100%; }

    .sg-noel-presentation__inner { grid-template-columns: 1fr 1fr; }
    .sg-noel-presentation__image img { margin-inline: 0; max-width: 100%; }

    .sg-noel-disciplines { grid-template-columns: repeat(4, 1fr); }

    .sg-noel-pourqui__inner { grid-template-columns: 1fr 1fr; }
    .sg-noel-pourqui__image img { margin-inline: 0; max-width: 100%; }

    .sg-noel-why__grid { grid-template-columns: repeat(4, 1fr); }

    .sg-noel-villes__grid { grid-template-columns: repeat(3, 1fr); }

    .sg-noel-fiche__grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   NOËL RESPONSIVE — mobile (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {

    .sg-noel-hero {
        padding-top: calc(60px + var(--sg-space-xl));
        padding-bottom: var(--sg-space-2xl);
        text-align: center;
    }

    .sg-noel-hero__title { font-size: 1.5rem; }
    .sg-noel-hero__actions { justify-content: center; }
    .sg-noel-hero__actions .sg-btn { width: 100%; max-width: 300px; justify-content: center; }

    .sg-noel-section-title { font-size: 1.375rem; }

    .sg-noel-why__grid { grid-template-columns: 1fr; }
    .sg-noel-audiences { grid-template-columns: 1fr; }
}


/* ============================================================
   PAGE D'ACCUEIL — .sg-hp
   Styles spécifiques à front-page.php
   Scope : .sg-hp-* pour ne pas interférer avec les LP
   ============================================================ */

/* --- Reset page d'accueil --- */
.sg-hp-main {
    font-family: var(--sg-font);
}

/* ============================================================
   HP — HERO
   ============================================================ */

.sg-hp-hero {
    background-color: var(--sg-dark);
    color: var(--sg-white);
    padding-block: var(--sg-space-3xl);
    position: relative;
    overflow: hidden;
}

.sg-hp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(249,9,50,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(255,255,255,0.02) 0%, transparent 50%);
    pointer-events: none;
}

.sg-hp-hero .sg-container {
    position: relative;
    z-index: 1;
}

.sg-hp-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-xl);
    align-items: center;
}

.sg-hp-hero__content {
    text-align: center;
}

.sg-hp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-xs);
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sg-white);
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--sg-radius-pill);
    padding: 0.35rem 0.9rem;
    margin-bottom: var(--sg-space-lg);
}

.sg-hp-hero__title {
    font-size: 1.875rem;
    font-weight: var(--sg-weight-black);
    color: var(--sg-white);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: var(--sg-space-sm);
}

.sg-hp-hero__tagline {
    font-size: var(--sg-size-xl);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-red);
    margin-bottom: var(--sg-space-md);
    line-height: 1.3;
}

.sg-hp-hero__text {
    font-size: var(--sg-size-base);
    color: var(--sg-text-light);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
    max-width: 480px;
    margin-inline: auto;
}

.sg-hp-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sg-space-md);
}

.sg-hp-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-xs);
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-semi);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color var(--sg-transition);
}

.sg-hp-hero__phone:hover { color: var(--sg-red); }

.sg-hp-hero__image {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.sg-hp-hero__image img {
    width: 100%;
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 8px 32px rgba(249,9,50,0.20));
    animation: sg-float 4s ease-in-out infinite;
}

@keyframes sg-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}


/* ============================================================
   HP — RÉASSURANCE
   ============================================================ */

.sg-hp-reassurance {
    background-color: var(--sg-white);
    border-bottom: 1px solid rgba(8,17,44,0.07);
    padding-block: var(--sg-space-xl);
}

.sg-hp-reassurance__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-space-lg);
}

.sg-hp-reassurance__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: var(--sg-space-lg);
    background-color: var(--sg-white-soft);
    border-radius: var(--sg-radius-lg);
    border-bottom: 3px solid var(--sg-red);
}

.sg-hp-reassurance__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.sg-hp-reassurance__number {
    font-size: 1.75rem;
    font-weight: var(--sg-weight-black);
    color: var(--sg-dark);
    line-height: 1;
}

.sg-hp-reassurance__label {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-semi);
    color: var(--sg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}


/* ============================================================
   HP — PRÉSENTATION
   ============================================================ */

.sg-hp-presentation {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-2xl);
}

.sg-hp-presentation__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-2xl);
}

.sg-hp-presentation__label {
    display: block;
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-red);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--sg-space-sm);
}

.sg-hp-presentation__title {
    font-size: var(--sg-size-h2);
    font-weight: var(--sg-weight-black);
    color: var(--sg-dark);
    margin-bottom: var(--sg-space-md);
}

.sg-hp-presentation__text {
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    line-height: 1.7;
    margin-bottom: var(--sg-space-xl);
}

.sg-hp-presentation__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-space-md);
}

.sg-hp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sg-space-lg) var(--sg-space-md);
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-sm);
    border-top: 3px solid var(--sg-red);
}

.sg-hp-stat__icon {
    font-size: 1.5rem;
    margin-bottom: var(--sg-space-xs);
}

.sg-hp-stat__number {
    font-size: 1.75rem;
    font-weight: var(--sg-weight-black);
    color: var(--sg-dark);
    line-height: 1;
}

.sg-hp-stat__label {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    font-weight: var(--sg-weight-semi);
    text-align: center;
    margin-top: 0.2rem;
}


/* ============================================================
   HP — SECTION TITRE GÉNÉRIQUE
   ============================================================ */

.sg-hp-section-title {
    text-align: center;
    font-size: var(--sg-size-h2);
    font-weight: var(--sg-weight-black);
    color: var(--sg-dark);
    margin-bottom: var(--sg-space-xl);
}

.sg-hp-section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--sg-red);
    margin: var(--sg-space-sm) auto 0;
    border-radius: var(--sg-radius-pill);
}

.sg-hp-section-title--white {
    color: var(--sg-white);
}

.sg-hp-section-title__sub {
    display: block;
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-normal);
    color: var(--sg-text-light);
    margin-top: var(--sg-space-xs);
}

.sg-hp-section-title--white .sg-hp-section-title__sub {
    color: rgba(255,255,255,0.6);
}


/* ============================================================
   HP — PRESTATIONS
   ============================================================ */

.sg-hp-prestations {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-2xl);
}

.sg-hp-prestations__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-md);
    justify-content: center;
}

.sg-hp-prestation-card {
    width: calc(50% - var(--sg-space-md) / 2);
    flex-shrink: 0;
}

.sg-hp-prestation-card {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--sg-radius-lg);
    padding: var(--sg-space-lg);
    transition: background-color var(--sg-transition), border-color var(--sg-transition), transform var(--sg-transition);
    display: flex;
    flex-direction: column;
    gap: var(--sg-space-xs);
}

.sg-hp-prestation-card:hover {
    background-color: rgba(249,9,50,0.08);
    border-color: rgba(249,9,50,0.25);
    transform: translateY(-3px);
}

.sg-hp-prestation-card__icon {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: var(--sg-space-xs);
}

.sg-hp-prestation-card__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-white);
    margin: 0;
}

.sg-hp-prestation-card__desc {
    font-size: var(--sg-size-sm);
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.sg-hp-prestation-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-red);
    text-decoration: none;
    margin-top: var(--sg-space-sm);
    transition: gap var(--sg-transition), color var(--sg-transition);
}

.sg-hp-prestation-card__link:hover {
    color: var(--sg-white);
    gap: 8px;
}


/* ============================================================
   HP — FICHE TECHNIQUE
   ============================================================ */

.sg-hp-fiche {
    background-color: var(--sg-white);
    padding-block: var(--sg-space-2xl);
}

.sg-hp-fiche__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-space-md);
    margin-bottom: var(--sg-space-xl);
}

.sg-hp-fiche-bloc {
    display: flex;
    align-items: flex-start;
    gap: var(--sg-space-lg);
    padding: var(--sg-space-lg);
    background-color: var(--sg-white-soft);
    border-radius: var(--sg-radius-lg);
    border-left: 3px solid var(--sg-red);
}

.sg-hp-fiche-bloc__icon {
    font-size: 1.75rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.1rem;
}

.sg-hp-fiche-bloc__content {
    flex: 1;
}

.sg-hp-fiche-bloc__title {
    font-size: var(--sg-size-base);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-dark);
    margin-bottom: var(--sg-space-xs);
    margin-top: 0;
}

.sg-hp-fiche-bloc__text {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    line-height: 1.65;
    margin: 0;
}

.sg-hp-fiche__cta {
    text-align: center;
    margin-top: var(--sg-space-xl);
}


/* ============================================================
   HP — CTA FINAL
   ============================================================ */

.sg-hp-cta-final {
    background-color: var(--sg-dark);
    padding-block: var(--sg-space-3xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sg-hp-cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(249,9,50,0.08) 0%, transparent 65%);
    pointer-events: none;
}

.sg-hp-cta-final .sg-container {
    position: relative;
    z-index: 1;
}

.sg-hp-cta-final__title {
    color: var(--sg-white);
    font-size: var(--sg-size-h2);
    font-weight: var(--sg-weight-black);
    margin-bottom: var(--sg-space-md);
}

.sg-hp-cta-final__subtitle {
    color: var(--sg-text-light);
    font-size: var(--sg-size-lg);
    margin-bottom: var(--sg-space-xl);
}

/* ============================================================
   HP — ZONE D'INTERVENTION (VILLES)
   ============================================================ */

.sg-hp-villes {
    background-color: var(--sg-white-soft);
    padding-block: var(--sg-space-2xl);
}

.sg-hp-villes__intro {
    text-align: center;
    font-size: var(--sg-size-lg);
    color: var(--sg-text-muted);
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--sg-space-xl);
    line-height: 1.7;
}

.sg-hp-villes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sg-space-md);
}

.sg-hp-ville-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sg-space-xs);
    padding: var(--sg-space-lg);
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-lg);
    border-left: 3px solid var(--sg-red);
    box-shadow: var(--sg-shadow-sm);
    text-decoration: none;
    transition: box-shadow var(--sg-transition), transform var(--sg-transition), border-color var(--sg-transition);
}

.sg-hp-ville-card:hover {
    box-shadow: var(--sg-shadow-md);
    transform: translateY(-3px);
    border-color: var(--sg-dark);
}

.sg-hp-ville-card__dept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: var(--sg-weight-black);
    color: var(--sg-white);
    background-color: var(--sg-red);
    border-radius: var(--sg-radius-pill);
    padding: 0.15em 0.6em;
    letter-spacing: 0.05em;
}

.sg-hp-ville-card__nom {
    font-size: var(--sg-size-lg);
    font-weight: var(--sg-weight-black);
    color: var(--sg-dark);
    line-height: 1;
}

.sg-hp-ville-card__label {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-semi);
    color: var(--sg-red);
    margin-top: var(--sg-space-xs);
}


/* Maillage discret accueil — après fiche technique */
.sg-hp-maillage {
    margin-top: var(--sg-space-xl);
    padding-top: var(--sg-space-lg);
    border-top: 1px solid rgba(8,17,44,0.07);
}

.sg-hp-maillage__titre {
    font-size: var(--sg-size-sm);
    font-weight: var(--sg-weight-bold);
    color: var(--sg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sg-space-sm);
}

.sg-hp-maillage__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-xs) var(--sg-space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

.sg-hp-maillage__list a {
    font-size: var(--sg-size-sm);
    color: var(--sg-text-muted);
    text-decoration: none;
    transition: color var(--sg-transition);
}

.sg-hp-maillage__list a::before {
    content: '→ ';
    color: var(--sg-red);
}

.sg-hp-maillage__list a:hover {
    color: var(--sg-dark);
}


/* ============================================================
   HP — RESPONSIVE TABLETTE (min-width: 768px)
   ============================================================ */

@media (min-width: 768px) {

    .sg-hp-hero__title { font-size: 2.25rem; }

    .sg-hp-hero__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--sg-space-2xl);
    }

    .sg-hp-hero__content { text-align: left; }

    .sg-hp-hero__text { margin-inline: 0; }

    .sg-hp-hero__actions {
        flex-direction: row;
        justify-content: flex-start;
    }

    .sg-hp-hero__image img { max-width: 420px; }

    /* Réassurance — 4 colonnes */
    .sg-hp-reassurance__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .sg-hp-reassurance__item {
        border-bottom: none;
        border-top: 3px solid var(--sg-red);
    }

    /* Présentation — 2 colonnes */
    .sg-hp-presentation__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--sg-space-3xl);
    }

    .sg-hp-presentation__content { flex: 1; }
    .sg-hp-presentation__stats   { flex: 1; }

    /* Prestations — 3 colonnes sur tablette */
    .sg-hp-prestation-card {
        width: calc(33.333% - var(--sg-space-md) * 2 / 3);
    }

    /* Villes — 3 colonnes */
    .sg-hp-villes__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Fiche technique — 2 colonnes */
    .sg-hp-fiche__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   HP — RESPONSIVE DESKTOP (min-width: 1024px)
   ============================================================ */

@media (min-width: 1024px) {

    .sg-hp-hero { padding-block: 6rem; }
    .sg-hp-hero__title { font-size: 2.5rem; }
    .sg-hp-hero__tagline { font-size: 1.5rem; }
    .sg-hp-hero__image img { max-width: 360px; }

    /* Prestations — 4 colonnes sur desktop */
    .sg-hp-prestation-card {
        width: calc(25% - var(--sg-space-md) * 3 / 4);
    }

    .sg-hp-section-title { font-size: 2.125rem; }
}


/* ============================================================
   HP — MOBILE SPÉCIFIQUE (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {

    .sg-hp-hero {
        padding-block: 2.5rem;
    }

    .sg-hp-hero__title { font-size: 1.625rem; }
    .sg-hp-hero__tagline { font-size: var(--sg-size-lg); }

    .sg-hp-hero__actions .sg-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .sg-hp-hero__image img {
        max-width: 240px;
    }

    .sg-hp-presentation__stats {
        grid-template-columns: 1fr 1fr;
    }

    .sg-hp-section-title { font-size: 1.375rem; }

    .sg-hp-cta-final__title { font-size: 1.375rem; }

    .sg-hp-cta-final .sg-btn {
        width: 100%;
        max-width: 320px;
    }
}



   Corrections spécifiques pour les éléments qui nécessitent
   un traitement particulier sur petit écran.
   ============================================================ */

@media (max-width: 767px) {

    /* --- Variables réduites sur mobile --- */
    :root {
        --sg-space-2xl: 2rem;
        --sg-space-3xl: 2.75rem;
    }

    /* --- Conteneur — padding réduit --- */
    .sg-container {
        padding-inline: var(--sg-space-md);
    }

    /* --- Hero --- */
    .sg-hero {
        padding-block: 2.5rem;
        text-align: center;
    }

    .sg-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--sg-space-lg);
    }

    /* Image hero — masquée visuellement sur mobile, gérée par <picture> */
    .sg-hero__image {
        display: none;
    }

    .sg-hero__eyebrow {
        font-size: 0.75rem;
    }

    .sg-hero__title {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .sg-hero__tagline {
        font-size: var(--sg-size-base);
    }

    .sg-hero__subtitle {
        font-size: var(--sg-size-sm);
        margin-inline: auto;
    }

    .sg-hero__actions {
        flex-direction: column;
        align-items: center;
        gap: var(--sg-space-sm);
    }

    /* Bouton CTA pleine largeur sur mobile */
    .sg-hero__actions .sg-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    /* --- Réassurance — 2×2 sur mobile --- */
    .sg-reassurance {
        padding-block: var(--sg-space-lg);
    }

    .sg-reassurance__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sg-space-md);
        flex-direction: unset; /* annule le flex de base */
    }

    .sg-reassurance__item {
        padding: var(--sg-space-md);
        background-color: var(--sg-white-soft);
        border-radius: var(--sg-radius-md);
        border-top: none;
        padding-top: var(--sg-space-md);
    }

    .sg-reassurance__item + .sg-reassurance__item {
        border-left: none;
        border-top: none;
    }

    .sg-reassurance__number {
        font-size: 1.5rem;
    }

    .sg-reassurance__icon {
        font-size: 1.25rem;
    }

    .sg-reassurance__label {
        font-size: 0.75rem;
    }

    /* --- Événements — 1 colonne sur mobile --- */
    .sg-events {
        padding-block: 2rem;
    }

    .sg-events__grid {
        grid-template-columns: 1fr;
        gap: var(--sg-space-xs);
    }

    .sg-events__card {
        padding: var(--sg-space-sm) var(--sg-space-md);
    }

    .sg-events__card-icon {
        font-size: 1.25rem;
    }

    .sg-events__card-label {
        font-size: var(--sg-size-sm);
    }

    .sg-events__cta .sg-btn {
        width: 100%;
        max-width: 320px;
    }

    /* --- Titre section visible sur fond sombre --- */
    .sg-section__title--white {
        font-size: 1.375rem;
    }

    /* --- Prestation — 1 colonne sur mobile --- */
    .sg-prestation {
        padding-block: 2rem;
    }

    .sg-prestation__lead {
        font-size: var(--sg-size-base);
        padding-left: var(--sg-space-md);
    }

    .sg-prestation__intro {
        font-size: var(--sg-size-base);
        margin-bottom: var(--sg-space-lg);
    }

    .sg-prestation__grid {
        grid-template-columns: 1fr;
        gap: var(--sg-space-sm);
        margin-top: var(--sg-space-lg);
    }

    .sg-prestation__card {
        padding: var(--sg-space-md);
        border-top: 3px solid var(--sg-red);
    }

    .sg-prestation__card-icon {
        font-size: 1.75rem;
        margin-bottom: var(--sg-space-xs);
    }

    .sg-prestation__card-title {
        font-size: var(--sg-size-base);
        margin-bottom: 0.25rem;
    }

    .sg-prestation__card-text {
        font-size: var(--sg-size-sm);
    }

    /* --- Pourquoi Sylvain — 1 colonne sur mobile --- */
    .sg-why {
        padding-block: 2rem;
    }

    .sg-why__grid {
        grid-template-columns: 1fr;
        gap: var(--sg-space-sm);
    }

    .sg-why__card {
        padding: var(--sg-space-md);
        border-top: 3px solid var(--sg-red);
    }

    .sg-why__card-icon {
        font-size: 1.75rem;
        margin-bottom: var(--sg-space-xs);
    }

    .sg-why__card-title {
        font-size: var(--sg-size-base);
        margin-bottom: 0.2rem;
    }

    .sg-why__card-text {
        font-size: var(--sg-size-sm);
    }

    /* --- Témoignage --- */
    .sg-testimonial {
        padding-block: 2rem;
    }

    .sg-testimonial__quote {
        font-size: var(--sg-size-base);
        padding: 0 var(--sg-space-lg);
    }

    .sg-testimonial__quote::before {
        font-size: 3rem;
        top: -1rem;
    }

    /* --- Zones couvertes --- */
    .sg-zones {
        padding-block: var(--sg-space-lg);
    }

    .sg-zones__text {
        font-size: var(--sg-size-sm);
        text-align: left;
    }

    /* --- FAQ --- */
    .sg-faq {
        padding-block: 2rem;
    }

    .sg-faq__question {
        font-size: var(--sg-size-sm);
        padding: var(--sg-space-sm) var(--sg-space-md);
    }

    .sg-faq__answer {
        padding: var(--sg-space-sm) var(--sg-space-md) var(--sg-space-md);
        font-size: var(--sg-size-sm);
    }

    /* --- Maillage interne --- */
    .sg-internal-links {
        padding-block: var(--sg-space-lg);
    }

    .sg-internal-links__list {
        flex-direction: column;
        gap: var(--sg-space-sm);
    }

    .sg-internal-links__item a {
        font-size: var(--sg-size-sm);
    }

    /* --- CTA final --- */
    .sg-cta-final {
        padding-block: 2.5rem;
    }

    .sg-cta-final__title {
        font-size: 1.375rem;
    }

    .sg-cta-final__subtitle {
        font-size: var(--sg-size-sm);
        margin-bottom: var(--sg-space-lg);
    }

    .sg-cta-final .sg-btn {
        width: 100%;
        max-width: 320px;
    }

    /* --- Titres de section --- */
    .sg-section__title {
        font-size: 1.375rem;
        margin-bottom: var(--sg-space-lg);
    }
}


/* ============================================================
   18. MEDIA QUERIES — TABLETTE (min-width: 768px)
   ============================================================ */

@media (min-width: 768px) {

    .sg-lp h1,
    .sg-hero__title { font-size: 2.5rem; }
    .sg-lp h2       { font-size: 1.875rem; }
    .sg-lp h3       { font-size: 1.25rem; }

    .sg-hero { padding-block: var(--sg-space-3xl); }

    /* Réassurance — 4 colonnes côte à côte */
    .sg-reassurance__grid {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0;
    }

    .sg-reassurance__item {
        flex: 1;
        padding-inline: var(--sg-space-xl);
        background-color: transparent;
        border-radius: 0;
    }

    .sg-reassurance__item + .sg-reassurance__item {
        border-top: none;
        padding-top: 0;
        border-left: 1px solid rgba(8,17,44,0.07);
    }

    .sg-reassurance__number { font-size: 2.5rem; }

    /* Événements — 2 colonnes */
    .sg-events__grid { grid-template-columns: repeat(2, 1fr); }

    /* Prestation — 2 colonnes */
    .sg-prestation__grid { grid-template-columns: repeat(2, 1fr); }

    /* Cards prestation — retour layout vertical */
    .sg-prestation__card {
        flex-direction: column;
        border-left: none;
        border-top: 3px solid var(--sg-red);
        gap: var(--sg-space-sm);
        padding: var(--sg-space-md);
    }

    .sg-prestation__card-icon {
        font-size: 1.75rem;
        margin-bottom: 0;
    }

    .sg-prestation__card-title {
        font-size: var(--sg-size-base);
        margin-bottom: 0.25rem;
    }

    .sg-prestation__card-text {
        font-size: var(--sg-size-sm);
    }

    /* Pourquoi — 2 colonnes */
    .sg-why__grid { grid-template-columns: 1fr 1fr; }

    /* Cards why — layout vertical propre sur mobile */
    .sg-why__card {
        flex-direction: column;
        border-left: none;
        border-top: 3px solid var(--sg-red);
        gap: var(--sg-space-sm);
        padding: var(--sg-space-md);
    }

    .sg-why__card-icon {
        font-size: 1.75rem;
        margin-bottom: 0;
    }

    .sg-why__card-title {
        font-size: var(--sg-size-base);
        margin-bottom: 0.25rem;
    }

    .sg-why__card-text {
        font-size: var(--sg-size-sm);
    }

    /* Maillage — inline */
    .sg-internal-links__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--sg-space-md) var(--sg-space-2xl);
    }
}


/* ============================================================
   19. MEDIA QUERIES — DESKTOP (min-width: 1024px)
   ============================================================ */

@media (min-width: 1024px) {

    .sg-lp h1,
    .sg-hero__title { font-size: 2.875rem; }
    .sg-lp h2       { font-size: 2.125rem; }
    .sg-lp h3       { font-size: 1.375rem; }

    .sg-hero            { padding-block: 5rem; }
    .sg-hero__inner     {
        grid-template-columns: 1fr 1fr;
        gap: var(--sg-space-3xl);
        align-items: center;
    }
    .sg-hero__content   { text-align: left; }
    .sg-hero__image img { max-width: 100%; }
    .sg-hero__subtitle  { font-size: var(--sg-size-lg); margin-inline: 0; }
    .sg-hero__tagline   { font-size: var(--sg-size-xl); }
    .sg-hero__actions   { flex-direction: row; justify-content: flex-start; }
    .sg-hero__actions .sg-btn { width: auto; }

    .sg-reassurance     { padding-block: var(--sg-space-2xl); }
    .sg-reassurance__number { font-size: 2.75rem; }

    /* Événements — 3 colonnes */
    .sg-events__grid    { grid-template-columns: repeat(3, 1fr); }
    .sg-events          { padding-block: var(--sg-space-3xl); }

    /* Prestation — 3 colonnes */
    .sg-prestation__grid { grid-template-columns: repeat(3, 1fr); }
    .sg-prestation      { padding-block: var(--sg-space-3xl); }

    /* Pourquoi — 4 colonnes */
    .sg-why__grid       { grid-template-columns: repeat(4, 1fr); }
    .sg-why             { padding-block: var(--sg-space-3xl); }

    /* FAQ */
    .sg-faq             { padding-block: var(--sg-space-3xl); }
    .sg-faq__list       { max-width: none; }

    /* Témoignage */
    .sg-testimonial__quote { font-size: 1.5rem; }

    /* CTA final */
    .sg-cta-final .sg-btn { width: auto; }
    .sg-events__cta .sg-btn { width: auto; }
}