/* ========================= VARIABLES GLOBALES ========================= */
:root { /* Définition des variables CSS globales */
    --color-bg: #050816; /* Couleur de fond principale, très sombre et moderne */
    --color-bg-soft: #0b1020; /* Variante de fond pour dégradés */
    --color-primary: #3b82f6; /* Bleu vif pour les éléments principaux */
    --color-primary-soft: rgba(59, 130, 246, 0.14); /* Version transparente pour hover */
    --color-accent: #22d3ee; /* Bleu-vert accent pour détails */
    --color-accent-soft: rgba(34, 211, 238, 0.2); /* Accent adouci */
    --color-text: #e5e7eb; /* Texte principal clair */
    --color-text-muted: #9ca3af; /* Texte secondaire gris */
    --color-border-subtle: rgba(148, 163, 184, 0.24); /* Bordure discrète */
    --color-danger: #f97373; /* Rouge doux pour feedback éventuel */

    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.85); /* Ombre douce mais profonde */
    --shadow-elevated: 0 25px 60px rgba(15, 23, 42, 0.95); /* Ombre forte pour éléments importants */

    --radius-lg: 22px; /* Large rayon pour cartes / sections hero */
    --radius-md: 14px; /* Rayon moyen pour boutons / inputs */
    --radius-pill: 999px; /* Rayon pill pour boutons arrondis */

    --header-height: 80px; /* Hauteur nominale du header desktop */
    --transition-fast: 0.18s ease-out; /* Transition rapide pour interactions fines */
    --transition-med: 0.3s ease; /* Transition moyenne par défaut */
}

/* ========================= RÉGLAGES DE BASE ========================= */
*,
*::before,
*::after { /* Boîte de calcul globale */
    box-sizing: border-box; /* Inclut padding et border dans width/height */
}

html, body { /* Réglages de base pour html et body */
    margin: 0; /* Suppression des marges */
    padding: 0; /* Suppression des paddings */
}

body { /* Style global du corps */
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Police moderne */
    background: radial-gradient(circle at top, #111827 0, #020617 40%, #000 100%); /* Fond dégradé radial */
    color: var(--color-text); /* Couleur du texte par défaut */
    min-height: 100vh; /* Hauteur minimum pleine fenêtre */
    -webkit-font-smoothing: antialiased; /* Lissage police */
    line-height: 1.5; /* Hauteur de ligne agréable */
}

/* ========================= CLASSES RÉUTILISABLES ========================= */
.heading-primary { /* Classe pour les titres principaux H1 */
    font-size: clamp(2.2rem, 3.4vw, 3.3rem); /* Taille responsive */
    font-weight: 700; /* Gras fort */
    letter-spacing: 0.03em; /* Espacement léger des lettres */
    margin: 0 0 0.75rem; /* Marge basse */
    color: #f9fafb; /* Blanc quasi pur */
}

.heading-underline { /* Soulignement stylisé sous les titres */
    width: 74px; /* Largeur du soulignement */
    height: 3px; /* Épaisseur de la ligne */
    border-radius: 999px; /* Bord arrondi */
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); /* Dégradé bleu/bleu-vert */
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.7); /* Lueur subtile */
    margin-bottom: 1.35rem; /* Espacement avec le texte suivant */
}

.text-lead { /* Texte introductif / lead */
    font-size: clamp(1rem, 1.2vw, 1.15rem); /* Taille responsive */
    color: var(--color-text-muted); /* Texte adouci */
    max-width: 40rem; /* Largeur max pour confort de lecture */
    margin: 0 0 1.7rem; /* Marge basse */
}

/* ========================= BOUTONS RÉUTILISABLES ========================= */
.btn { /* Base pour tous les boutons */
    display: inline-flex; /* Affichage en flex inline */
    align-items: center; /* Alignement vertical au centre */
    justify-content: center; /* Alignement horizontal au centre */
    gap: 0.5rem; /* Espacement entre icône et texte */
    padding: 0.75rem 1.5rem; /* Padding interne */
    border-radius: var(--radius-pill); /* Forme pilule */
    border: 1px solid transparent; /* Bordure par défaut transparente */
    font-size: 0.95rem; /* Taille de texte bouton */
    font-weight: 500; /* Semi-gras */
    text-decoration: none; /* Suppression soulignement lien */
    cursor: pointer; /* Curseur main */
    transition: transform var(--transition-fast), /* Animation translation */
                box-shadow var(--transition-fast), /* Animation ombre */
                background-color var(--transition-fast), /* Animation fond */
                border-color var(--transition-fast), /* Animation bordure */
                color var(--transition-fast); /* Animation couleur texte */
    white-space: nowrap; /* Pas de retour à la ligne interne */
}

.btn-icon-left { /* Icône alignée à gauche dans le bouton */
    font-size: 1.05rem; /* Taille icône */
}

.btn-primary { /* Style bouton principal */
    background: linear-gradient(135deg, var(--color-primary), #2563eb); /* Dégradé bleu */
    color: #f9fafb; /* Texte clair */
    box-shadow: var(--shadow-elevated); /* Ombre forte */
}

.btn-primary:hover { /* État hover du bouton principal */
    transform: translateY(-2px) scale(1.02); /* Léger soulèvement et zoom */
    box-shadow: 0 32px 80px rgba(37, 99, 235, 0.7); /* Ombre plus marquée */
    background: linear-gradient(135deg, #2563eb, var(--color-primary)); /* Légère inversion du dégradé */
}

.btn-outline { /* Bouton secondaire outline */
    background-color: rgba(15, 23, 42, 0.7); /* Fond sombre semi transparent */
    border-color: rgba(148, 163, 184, 0.7); /* Bordure gris bleuté */
    color: var(--color-text); /* Texte clair */
}

.btn-outline:hover { /* État hover bouton outline */
    background-color: var(--color-primary-soft); /* Fond légèrement bleuté */
    border-color: var(--color-primary); /* Bordure bleue */
    color: #e5edff; /* Texte légèrement plus clair */
    transform: translateY(-2px); /* Légère translation */
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.9); /* Ombre accentuée */
}

.btn-ghost { /* Bouton fantôme (fond très léger) */
    background-color: rgba(15, 23, 42, 0.4); /* Fond très transparent */
    border-color: transparent; /* Sans bordure visible */
    color: var(--color-text-muted); /* Texte gris */
}

.btn-ghost:hover { /* Hover bouton fantôme */
    background-color: rgba(15, 23, 42, 0.8); /* Fond plus opaque */
    color: #f9fafb; /* Texte clair */
    transform: translateY(-2px); /* Translation légère */
}

/* ========================= HEADER ========================= */
.site-header { /* Header global */
    position: fixed; /* Fixe en haut, superposé */
    top: 0; /* Collé en haut */
    left: 0; /* Aligné à gauche */
    width: 100%; /* Largeur pleine */
    z-index: 20; /* Au-dessus du carrousel */
    backdrop-filter: blur(16px); /* Flou de fond type glassmorphism */
    -webkit-backdrop-filter: blur(16px); /* Compatibilité Webkit */
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.95)); /* Fond dégradé sombre translucide */
    border-bottom: 1px solid rgba(148, 163, 184, 0.35); /* Fine bordure basse */
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.85); /* Ombre sous le header */
}

.header-container { /* Conteneur interne du header */
    max-width: 1180px; /* Largeur max */
    margin: 0 auto; /* Centrage horizontal */
    padding: 0.75rem 1.5rem; /* Padding interne */
    display: grid; /* Grille pour alignement */
    grid-template-columns: auto 1fr auto; /* Colonnes : logo / nav / actions */
    align-items: center; /* Alignement vertical */
    gap: 1.25rem; /* Espacement entre colonnes */
}

/* ---------- Logo ---------- */

/* =========================================================
   LOGO DANS LA NAVBAR
   - Logo bien visible
   - Hauteur de la barre inchangée
   - Comportement stable desktop & mobile
========================================================= */

/* Hauteur fixe de la navbar (barre noire) */
.site-header {
    height: 70px;                 /* Ne change plus */
    background-color: #000;       /* Barre noire */
}

/* Conteneur interne */
.header-container {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* Conteneur du logo */
.site-logo {
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;               /* Le logo ne se compresse pas */
}

/* Image du logo */
.logo-img {
    height: 100px;                 /* TAILLE VISIBLE ET MAÎTRISÉE */
    width: auto;
    object-fit: contain;
    display: block;
}

/* Mobile */
@media (max-width: 768px) {
    .logo-img {
        height: 38px;
    }
}



/* ---------- Navigation principale ---------- */
.main-nav { /* Navigation principale */
    justify-self: center; /* Centrage dans la grille */
}

.nav-list { /* Liste UL des liens */
    list-style: none; /* Suppression des puces */
    margin: 0; /* Suppression des marges */
    padding: 0; /* Suppression des paddings */
    display: flex; /* Disposition en ligne */
    align-items: center; /* Alignement vertical */
    gap: 0.35rem; /* Espacement horizontal entre items */
    background-color: rgba(15, 23, 42, 0.75); /* Fond sombre semi transparent */
    border-radius: 999px; /* Pilule globale de navigation */
    border: 1px solid rgba(148, 163, 184, 0.4); /* Bordure subtile */
    padding: 0.25rem; /* Padding interne léger */
}

.nav-item { /* Élément individuel de navigation */
    position: relative; /* Position relative pour éventuels pseudos éléments */
}

.nav-link { /* Liens de navigation */
    display: inline-flex; /* Flex inline */
    align-items: center; /* Alignement vertical */
    padding: 0.35rem 0.85rem; /* Padding interne */
    border-radius: 999px; /* Forme pilule */
    font-size: 0.8rem; /* Taille texte */
    font-weight: 500; /* Semi-gras */
    letter-spacing: 0.02em; /* Espacement lettres */
    text-decoration: none; /* Pas de soulignement */
    color: var(--color-text-muted); /* Couleur texte par défaut */
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); /* Transitions douces */
}

.nav-link:hover { /* État hover des liens */
    background-color: rgba(15, 23, 42, 0.95); /* Fond sombre plus opaque */
    color: #f9fafb; /* Texte clair */
    transform: translateY(-1px); /* Légère translation */
}

.nav-link.active { /* Lien actif */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(34, 211, 238, 0.18)); /* Fond dégradé léger */
    color: var(--color-accent); /* Texte accentué */
}

.nav-link-pill { /* Lien "Espace gratuit" mis en avant */
    background-color: rgba(34, 211, 238, 0.12); /* Fond accentué */
    color: var(--color-accent); /* Texte accent */
    border-radius: 999px; /* Pilule */
}

.nav-link-pill:hover { /* Hover du lien pill */
    background-color: rgba(34, 211, 238, 0.22); /* Fond plus marqué */
}

/* ---------- Zone droite : recherche + bouton CTA ---------- */
.header-right { /* Conteneur zone droite */
    display: flex; /* Disposition flex */
    align-items: center; /* Alignement vertical */
    gap: 0.75rem; /* Espacement horizontal */
}

.header-search { /* Formulaire de recherche dans le header */
    position: relative; /* Position relative pour icône */
    display: flex; /* Flex pour alignement interne */
    align-items: center; /* Alignement vertical */
    background-color: rgba(15, 23, 42, 0.85); /* Fond sombre semi transparent */
    border-radius: var(--radius-pill); /* Pilule */
    padding: 0.38rem 0.55rem 0.38rem 0.95rem; /* Padding interne */
    border: 1px solid var(--color-border-subtle); /* Bordure fine */
    min-width: 200px; /* Largeur minimale du champ */
}

.search-icon { /* Icône de recherche */
    color: var(--color-text-muted); /* Couleur icône */
    display: flex; /* Flexbox */
    align-items: center; /* Alignement vertical */
    justify-content: center; /* Alignement horizontal */
    margin-right: 0.4rem; /* Espacement avec l'input */
    font-size: 0.9rem; /* Taille icône */
}

.search-input { /* Input de recherche */
    background: transparent; /* Fond transparent */
    border: none; /* Pas de bordure native */
    outline: none; /* Suppression contour focus par défaut */
    color: var(--color-text); /* Couleur texte */
    font-size: 0.78rem; /* Taille de police */
    width: 100%; /* Prend toute la largeur disponible */
}

.search-input::placeholder { /* Placeholder de l'input */
    color: var(--color-text-muted); /* Couleur placeholder */
}

.btn-header { /* Bouton Commander dans le header */
    padding-inline: 1.2rem; /* Padding horizontal spécifique */
    font-size: 0.8rem; /* Taille texte réduite */
}

/* ---------- Bouton burger (mobile) ---------- */
.nav-toggle { /* Bouton pour ouvrir/fermer le menu mobile */
    display: none; /* Caché sur desktop */
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    color: #e5e7eb; /* Couleur icône */
    font-size: 1.5rem; /* Taille icône */
    cursor: pointer; /* Curseur main */
}

/* ========================= SECTION HERO CARROUSEL ========================= */
.hero-carousel { /* Section contenant le carrousel */
    position: relative; /* Position relative pour overlay */
    width: 100%; /* Largeur complète */
    min-height: 100vh; /* Hauteur minimum : plein écran */
    display: flex; /* Flex pour centrage global */
    align-items: stretch; /* Étire les enfants en hauteur */
    justify-content: center; /* Centre horizontalement */
    padding-top: var(--header-height); /* Espace pour le header fixe */
    overflow: hidden; /* Coupe tout débordement */
    color: #f9fafb; /* Couleur texte claire */
}

.hero-overlay-gradient { /* Overlay dégradé par-dessus le fond */
    position: absolute; /* Position absolue */
    inset: 0; /* Couvre toute la section */
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.4), transparent 55%), /* Halo bleu en haut à gauche */
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.35), transparent 55%), /* Halo bleu-vert en bas à droite */
        linear-gradient(180deg, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.9)); /* Gradient sombre global */
    z-index: 1; /* Juste au-dessus des images */
    pointer-events: none; /* Ne capte pas la souris */
}

.carousel-wrapper { /* Conteneur principal du carrousel */
    position: relative; /* Position relative pour contrôles et contenu */
    z-index: 2; /* Au-dessus de l'overlay */
    max-width: 1180px; /* Largeur maximale */
    width: 100%; /* Largeur 100% */
    margin: auto; /* Centrage vertical/horizontal dans la section */
    padding: 1.5rem 1.5rem 3rem; /* Padding interne */
}

/* ---------- Slides ---------- */
.carousel-slides { /* Conteneur des slides */
    position: relative; /* Position relative pour empilement */
    border-radius: var(--radius-lg); /* Coins arrondis */
    overflow: hidden; /* Coupe ce qui dépasse */
    box-shadow: var(--shadow-elevated); /* Ombre marquée */
    background-color: #020617; /* Couleur de fond de secours */
    min-height: min(80vh, 540px); /* Hauteur minimum responsive */
}

.carousel-slide { /* Slide individuelle */
    position: absolute; /* Superposées les unes sur les autres */
    inset: 0; /* Couvre tout le conteneur */
    opacity: 0; /* Invisible par défaut */
    pointer-events: none; /* Non interactive par défaut */
    display: grid; /* Grille interne */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); /* Colonne image / colonne texte */
    align-items: stretch; /* Étire le contenu */
    transition: opacity 0.7s ease, transform 0.7s ease; /* Transition souple */
    transform: translateX(4%); /* Légère translation pour effet d'apparition */
}

.carousel-slide.is-active { /* Slide active */
    opacity: 1; /* Visible */
    pointer-events: auto; /* Interactive */
    transform: translateX(0); /* Position normale */
}

/* ---------- Images de slide ---------- */

.slide-image { /* Partie visuelle de la slide */
    position: relative; /* Position pour overlay interne */
    overflow: hidden; /* Coupe débordements */
    background-size: cover; /* Couvre entièrement */
    background-position: center; /* Centrage image */
    filter: saturate(1.15) contrast(1.05); /* Légère amélioration des couleurs */
}

.slide-image::before { /* Overlay pour styliser l'image */
    content: ""; /* Pseudo élément vide */
    position: absolute; /* Position absolue */
    inset: 0; /* Couvre la zone image */
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.4), transparent 55%), /* Dégradé sombre transparent */
        radial-gradient(circle at bottom, rgba(15, 23, 42, 0.55), transparent 60%); /* Assombrissement du bas */
    mix-blend-mode: multiply; /* Mélange avec l'image */
}

.slide-image::after { /* Bord lumineux sur la séparation image/texte */
    content: ""; /* Pseudo élément vide */
    position: absolute; /* Position absolue */
    top: 0; /* Collé en haut */
    right: -1px; /* Légèrement en dehors */
    width: 2px; /* Épaisseur bordure */
    height: 100%; /* Hauteur complète */
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.8), rgba(59, 130, 246, 0.9)); /* Dégradé vertical */
    opacity: 0.5; /* Opacité réduite */
}

/* ---------- Contenu texte des slides ---------- */
.slide-content { /* Colonne texte */
    position: relative; /* Position relative */
    padding: 2.4rem 2.4rem 2.7rem; /* Padding généreux */
    display: flex; /* Flexbox */
    flex-direction: column; /* Colonne verticale */
    justify-content: center; /* Centrage vertical */
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.25), transparent 55%), /* Halo bleu */
                linear-gradient(150deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.98)); /* Fond sombre légèrement texturé */
}

.slide-content::before { /* Légère lueur dans le coin */
    content: ""; /* Pseudo élément */
    position: absolute; /* Position absolue */
    inset: 18px 18px auto auto; /* Position dans le coin haut droit */
    width: 80px; /* Largeur lueur */
    height: 80px; /* Hauteur lueur */
    border-radius: 999px; /* Cercle */
    background: radial-gradient(circle, rgba(34, 211, 238, 0.36), transparent 65%); /* Gradient lueur */
    opacity: 0.9; /* Opacité */
    pointer-events: none; /* Non interactif */
}

/* ---------- Actions dans le hero ---------- */
.hero-actions { /* Conteneur des boutons d'action */
    display: flex; /* Flexbox horizontal */
    flex-wrap: wrap; /* Retour à la ligne si manque d'espace */
    gap: 0.8rem; /* Espacement entre boutons */
}

/* ========================= CONTRÔLES DU CARROUSEL ========================= */
.carousel-control { /* Boutons précédent/suivant */
    position: absolute; /* Position absolue dans le wrapper */
    top: 50%; /* Centrage vertical */
    transform: translateY(-50%); /* Ajustement centré */
    width: 40px; /* Largeur bouton */
    height: 40px; /* Hauteur bouton */
    border-radius: 999px; /* Forme circulaire */
    border: 1px solid rgba(148, 163, 184, 0.55); /* Bordure subtile */
    background-color: rgba(15, 23, 42, 0.88); /* Fond sombre */
    color: #e5e7eb; /* Couleur icône */
    display: flex; /* Flexbox */
    align-items: center; /* Alignement vertical */
    justify-content: center; /* Alignement horizontal */
    cursor: pointer; /* Curseur main */
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9); /* Ombre contrôles */
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); /* Transitions */
    z-index: 3; /* Au-dessus des slides */
}

.carousel-control-prev { /* Bouton précédent */
    left: 1.15rem; /* Position à gauche */
}

.carousel-control-next { /* Bouton suivant */
    right: 1.15rem; /* Position à droite */
}

.carousel-control:hover { /* Hover contrôles */
    background-color: rgba(15, 23, 42, 0.98); /* Fond plus opaque */
    transform: translateY(-50%) translateY(-1px); /* Légère translation vers le haut */
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.95); /* Ombre accentuée */
    border-color: rgba(59, 130, 246, 0.8); /* Bordure bleue */
}

/* ---------- Points de navigation ---------- */
.carousel-dots { /* Conteneur des points */
    position: absolute; /* Position absolue */
    bottom: 1.4rem; /* Position verticale */
    left: 50%; /* Aligné au centre */
    transform: translateX(-50%); /* Ajustement centré */
    display: flex; /* Flexbox horizontal */
    align-items: center; /* Alignement vertical */
    gap: 0.5rem; /* Espacement entre points */
    z-index: 3; /* Au-dessus du contenu */
    padding: 0.3rem 0.6rem; /* Padding interne */
    border-radius: 999px; /* Pilule globale */
    background-color: rgba(15, 23, 42, 0.78); /* Fond sombre translucent */
    border: 1px solid rgba(148, 163, 184, 0.55); /* Bordure subtile */
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.95); /* Ombre */
}

.carousel-dot { /* Bouton de point de navigation */
    width: 9px; /* Largeur */
    height: 9px; /* Hauteur */
    border-radius: 999px; /* Forme circulaire */
    border: none; /* Sans bordure */
    background: rgba(148, 163, 184, 0.7); /* Couleur inactive */
    cursor: pointer; /* Curseur main */
    padding: 0; /* Pas de padding */
    transition: transform var(--transition-fast), background-color var(--transition-fast), width var(--transition-fast); /* Transitions */
}

.carousel-dot.is-active { /* Point actif */
    width: 20px; /* Plus large pour créer un pill */
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); /* Dégradé accent */
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.9); /* Lueur accentuée */
}

/* ========================= RESPONSIVE DESIGN ========================= */

/* ---------- Grand tablettes et petits desktops ---------- */
@media (max-width: 992px) { /* Règles pour écrans <= 992px */
    .header-container { /* Ajustement header */
        grid-template-columns: auto auto; /* Logo + bouton burger/CTA */
        grid-template-areas:
            "logo actions"; /* Organisation en grille */
    }

    .header-left { /* Zone gauche */
        grid-area: logo; /* Affectation zone logo */
    }

    .header-right { /* Zone droite */
        grid-area: actions; /* Affectation zone actions */
        justify-content: flex-end; /* Alignement à droite */
    }

    .main-nav { /* Navigation principale */
        position: fixed; /* Position fixe pour menu déroulant */
        inset-inline: 0; /* Bordures gauche/droite */
        top: var(--header-height); /* Sous le header */
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96)); /* Fond dégradé */
        border-bottom: 1px solid rgba(148, 163, 184, 0.35); /* Bordure basse */
        transform: translateY(-16px); /* Légère translation pour animation */
        opacity: 0; /* Caché par défaut */
        pointer-events: none; /* Non interactif par défaut */
        transition: opacity var(--transition-med), transform var(--transition-med); /* Transitions */
        padding-inline: 1.5rem; /* Padding horizontal */
    }

    .main-nav.is-open { /* Navigation ouverte */
        opacity: 1; /* Visible */
        pointer-events: auto; /* Interactive */
        transform: translateY(0); /* Position rentrée */
    }

    .nav-list { /* Liste de navigation */
        flex-direction: column; /* Colonnes */
        align-items: flex-start; /* Alignement gauche */
        border-radius: 18px; /* Coins arrondis */
        padding: 0.75rem 0.8rem; /* Padding interne */
        background-color: rgba(15, 23, 42, 0.98); /* Fond sombre plein */
        margin-bottom: 1rem; /* Marge basse */
    }

    .nav-item-cta { /* Élément CTA du menu */
        align-self: stretch; /* Prend toute la largeur */
    }

    .nav-link, .nav-link-pill { /* Liens de navigation */
        width: 100%; /* Pleine largeur */
        justify-content: flex-start; /* Alignement du texte à gauche */
        padding-inline: 0.75rem; /* Padding horizontal */
    }

    .header-search { /* Champ de recherche */
        display: none; /* Masqué pour conserver la place dans le header */
    }

    .nav-toggle { /* Bouton burger */
        display: inline-flex; /* Affiché */
    }

    .carousel-slides { /* Hauteur carrousel */
        min-height: 70vh; /* Hauteur ajustée */
    }

    .carousel-slide { /* Disposition slide */
        grid-template-columns: 1fr; /* Une seule colonne en pile */
        grid-template-rows: minmax(220px, 40%) auto; /* Image puis contenu */
    }

    .slide-image { /* Image en haut */
        min-height: 220px; /* Hauteur minimale */
    }

    .slide-image::after { /* Bordure verticale inutile en mobile */
        display: none; /* Masquée */
    }

    .slide-content { /* Contenu texte sur mobile */
        padding: 1.8rem 1.7rem 2.2rem; /* Padding réduit */
    }
}

/* ---------- Mobiles ---------- */
@media (max-width: 640px) { /* Règles pour écrans <= 640px */
    :root { /* Mise à jour des variables */
        --header-height: 70px; /* Hauteur du header réduite */
    }

    .header-container { /* Layout header */
        padding-inline: 1rem; /* Padding horizontal réduit */
        gap: 0.75rem; /* Espacement réduit */
    }

    .logo-mark { /* Logo monogramme */
        width: 30px; /* Taille ajustée */
        height: 30px; /* Taille ajustée */
    }

    .logo-text { /* Texte logo */
        font-size: 0.8rem; /* Taille réduite */
    }

    .btn-header { /* Bouton header */
        padding-inline: 0.85rem; /* Padding horizontal réduit */
        padding-block: 0.5rem; /* Padding vertical réduit */
    }

    .hero-carousel { /* Section hero */
        padding-top: calc(var(--header-height) + 0.4rem); /* Espace supplémentaire */
    }

    .carousel-wrapper { /* Wrapper carrousel */
        padding-inline: 1rem; /* Padding horizontal réduit */
    }

    .carousel-slides { /* Hauteur slides */
        min-height: 78vh; /* Hauteur légèrement augmentée */
    }

    .slide-content { /* Contenu texte */
        padding: 1.6rem 1.35rem 2.1rem; /* Padding ajusté */
    }

    .heading-primary { /* Titre principal */
        font-size: clamp(1.6rem, 6.2vw, 2rem); /* Taille responsive plus petite */
    }

    .text-lead { /* Texte lead */
        font-size: 0.95rem; /* Taille réduite */
        max-width: 100%; /* Pleine largeur */
    }

    .hero-actions { /* Boutons */
        flex-direction: column; /* Empilés */
        align-items: stretch; /* Largeur entière */
    }

    .btn { /* Boutons globaux */
        justify-content: center; /* Centrage texte */
        width: 100%; /* Largeur pleine */
    }

    .carousel-control { /* Contrôles */
        display: none; /* Masqués sur très petits écrans pour épurer */
    }
}

/* ========================= VARIABLES GLOBALES ========================= */
:root { /* Définition des variables CSS réutilisables */
    --color-bg: #050816; /* Couleur de fond principale */
    --color-primary: #3b82f6; /* Couleur principale (bleu) */
    --color-primary-soft: rgba(59, 130, 246, 0.14); /* Variante adoucie de la couleur principale */
    --color-accent: #22d3ee; /* Couleur d’accent (bleu-vert) */
    --color-accent-soft: rgba(34, 211, 238, 0.2); /* Variante adoucie de la couleur d’accent */
    --color-text: #e5e7eb; /* Couleur de texte principale */
    --color-text-muted: #9ca3af; /* Couleur de texte secondaire */
    --color-border-subtle: rgba(148, 163, 184, 0.24); /* Couleur de bordure discrète */

    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.85); /* Ombre douce */
    --shadow-elevated: 0 25px 60px rgba(15, 23, 42, 0.95); /* Ombre marquée */

    --radius-lg: 22px; /* Grand rayon de bordure */
    --radius-md: 14px; /* Rayon moyen de bordure */
    --radius-pill: 999px; /* Rayon très arrondi type pilule */

    --transition-fast: 0.18s ease-out; /* Transition rapide */
    --transition-med: 0.3s ease; /* Transition moyenne */
}

/* ========================= BASE GLOBALE ========================= */
*,
*::before,
*::after { /* Application du box-sizing à tous les éléments */
    box-sizing: border-box; /* Calcul de la taille incluant padding et bordure */
}

html,
body { /* Styles de base HTML et body */
    margin: 0; /* Suppression des marges par défaut */
    padding: 0; /* Suppression des paddings par défaut */
}

body { /* Styles globaux du corps de page */
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Police moderne */
    background: radial-gradient(circle at top, #111827 0, #020617 40%, #000 100%); /* Dégradé de fond sombre */
    color: var(--color-text); /* Couleur du texte par défaut */
    min-height: 100vh; /* Hauteur minimale : plein écran */
    -webkit-font-smoothing: antialiased; /* Lissage des polices */
    line-height: 1.5; /* Hauteur de ligne agréable */
}

/* ========================= BOUTONS RÉUTILISABLES ========================= */
.btn { /* Classe de base pour les boutons */
    display: inline-flex; /* Utilisation de flex pour alignement interne */
    align-items: center; /* Alignement vertical centré */
    justify-content: center; /* Alignement horizontal centré */
    gap: 0.5rem; /* Espacement entre l’icône et le texte */
    padding: 0.75rem 1.5rem; /* Espacement interne */
    border-radius: var(--radius-pill); /* Forme arrondie type pilule */
    border: 1px solid transparent; /* Bordure transparente par défaut */
    font-size: 0.95rem; /* Taille de police des boutons */
    font-weight: 500; /* Poids de police semi-gras */
    text-decoration: none; /* Suppression du soulignement */
    cursor: pointer; /* Curseur en forme de main */
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast); /* Transitions fluides sur plusieurs propriétés */
    white-space: nowrap; /* Empêche les retours à la ligne dans le bouton */
}

.btn-icon-left { /* Classe pour les icônes alignées à gauche dans les boutons */
    font-size: 1.05rem; /* Taille de l’icône */
}

.btn-outline { /* Style de bouton en outline (contour) */
    background-color: rgba(15, 23, 42, 0.7); /* Fond sombre et légèrement transparent */
    border-color: rgba(148, 163, 184, 0.7); /* Bordure gris bleuté */
    color: var(--color-text); /* Couleur de texte claire */
}

.btn-outline:hover { /* Style du bouton outline au survol */
    background-color: var(--color-primary-soft); /* Légère teinte bleue sur le fond */
    border-color: var(--color-primary); /* Bordure bleue plus marquée */
    color: #e5edff; /* Texte légèrement plus clair */
    transform: translateY(-2px); /* Légère élévation du bouton */
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.9); /* Ombre plus prononcée */
}

/* ========================= STRUCTURE GÉNÉRIQUE DE SECTION ========================= */
.section { /* Classe de base pour les sections */
    padding: 4.5rem 1.5rem 4.75rem; /* Espacement interne haut/bas/gauche/droite */
    position: relative; /* Position relative pour éléments décoratifs éventuels */
    z-index: 2; /* Positionnement au-dessus du fond global */
}

.section-inner { /* Conteneur centré pour le contenu de section */
    max-width: 1180px; /* Largeur maximale du contenu */
    margin: 0 auto; /* Centrage horizontal */
}

/* ========================= SECTION SERVICES ========================= */
.section-services { /* Styles spécifiques à la section Services */
    padding-top: 3.2rem; /* Espacement supérieur */
    background:
        radial-gradient(circle at top, rgba(37, 99, 235, 0.12), transparent 55%),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.16), transparent 55%),
        linear-gradient(180deg, #020617 0%, #020617 40%, #020617 100%); /* Fond sombre avec légers halos colorés */
    border-top: 1px solid rgba(15, 23, 42, 0.85); /* Bordure supérieure discrète */
}

/* ---------- En-tête de la section Services ---------- */
.section-header { /* Conteneur de l’en-tête de section */
    max-width: 700px; /* Largeur maximale de l’en-tête */
    margin: 0 auto 2.8rem; /* Centrage horizontal et marge basse */
    text-align: center; /* Alignement du texte au centre */
}

.section-title { /* Titre principal H1 réutilisable */
    font-size: clamp(1.7rem, 2.3vw, 2.1rem); /* Taille de police responsive */
    font-weight: 600; /* Poids semi-gras */
    letter-spacing: 0.04em; /* Espacement des lettres */
    text-transform: uppercase; /* Texte en majuscules */
    color: #f9fafb; /* Couleur très claire */
    margin: 0; /* Suppression des marges par défaut */
}

.section-title-underline { /* Soulignement stylisé sous le titre */
    width: 92px; /* Largeur du soulignement */
    height: 3px; /* Épaisseur du soulignement */
    margin: 0.9rem auto 1.2rem; /* Marges haut/bas et centrage */
    border-radius: 999px; /* Bords très arrondis */
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); /* Dégradé bleu -> bleu-vert */
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.85); /* Lueur autour du soulignement */
}

.section-intro { /* Paragraphe d’introduction de la section */
    font-size: 0.97rem; /* Taille de police du texte d’intro */
    color: var(--color-text-muted); /* Couleur de texte atténuée */
    margin: 0; /* Pas de marge supplémentaire */
}

/* ---------- Grille des cartes de services ---------- */
.services-grid { /* Grille contenant les cartes services */
    display: grid; /* Utilisation de CSS Grid */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Trois colonnes égales par défaut */
    gap: 1.8rem; /* Espacement entre les cartes */
}

/* ---------- Cartes de services ---------- */
.service-card { /* Carte de service individuelle */
    position: relative; /* Position relative pour éléments internes */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Disposition verticale interne */
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.98)); /* Fond dégradé sombre */
    border-radius: 18px; /* Coins arrondis */
    padding: 1.15rem 1.15rem 1.25rem; /* Espacement interne */
    border: 1px solid rgba(148, 163, 184, 0.3); /* Bordure discrète */
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95); /* Ombre portée pour effet carte */
    overflow: hidden; /* Masque les débordements internes */
    transform: translateY(0) scale(1); /* Position et échelle par défaut */
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease; /* Transitions fluides au survol */
}

/* État initial pour l’animation au scroll */
.service-card.js-reveal-on-scroll { /* Carte marquée pour révélation au scroll */
    opacity: 0; /* Carte invisible au départ */
    transform: translateY(24px) scale(0.98); /* Légère translation vers le bas et réduction */
}

/* État visible après intersection */
.service-card.is-visible { /* Carte devenue visible après scroll */
    opacity: 1; /* Opacité totale */
    transform: translateY(0) scale(1); /* Retour à la position normale */
}

/* Effets au survol : zoom léger, ombre renforcée, fond légèrement accentué */
.service-card:hover { /* Styles au survol de la carte */
    transform: translateY(-6px) scale(1.015); /* Légère élévation et agrandissement */
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.95); /* Ombre plus prononcée */
    border-color: rgba(59, 130, 246, 0.75); /* Bordure bleue accentuée */
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.3), rgba(15, 23, 42, 0.98)); /* Fond légèrement plus lumineux */
}



/* ---------- Zone média (image + badge icône) ---------- */
.service-media { /* Conteneur de l’image et du badge */
    position: relative; /* Position relative pour placer le badge */
    border-radius: 16px; /* Coins arrondis */
    overflow: hidden; /* Masquer ce qui déborde de l’image */
    margin-bottom: 1rem; /* Espacement sous l’image */
}

.service-image { /* Image de service stylisée */
    width: 100%; /* Largeur totale de la carte */
    height: 170px; /* Hauteur fixe de l’image */
    background-size: cover; /* L’image couvre tout le conteneur */
    background-position: center; /* L’image est centrée */
    filter: saturate(1.1) contrast(1.05); /* Légère intensification des couleurs */
    transform: scale(1.02); /* Légère mise à l’échelle par défaut */
    transition:
        transform 0.5s ease,
        filter 0.5s ease; /* Transitions sur le zoom et le filtre */
}

/* Zoom léger de l’image au survol de la carte */
.service-card:hover .service-image { /* Lorsque la carte est survolée */
    transform: scale(1.07); /* Zoom léger */
    filter: saturate(1.2) contrast(1.1); /* Couleurs plus prononcées */
}

.service-media::before { /* Overlay dégradé sur l’image */
    content: ""; /* Pseudo-élément vide */
    position: absolute; /* Position absolue par-dessus l’image */
    inset: 0; /* Couvre entièrement l’image */
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.3), transparent 55%),
        radial-gradient(circle at bottom, rgba(15, 23, 42, 0.6), transparent 60%); /* Mélange de dégradés sombres */
    mix-blend-mode: multiply; /* Mode de fusion avec l’image */
    pointer-events: none; /* Ne capte pas les interactions souris */
}

.service-icon-badge { /* Badge circulaire contenant l’icône Bootstrap */
    position: absolute; /* Positionné en bas à droite de l’image */
    bottom: 12px; /* Décalage par rapport au bas */
    right: 12px; /* Décalage par rapport à la droite */
    width: 40px; /* Largeur du badge */
    height: 40px; /* Hauteur du badge */
    border-radius: 999px; /* Forme totalement circulaire */
    background: radial-gradient(circle at 20% 20%, var(--color-accent), var(--color-primary)); /* Dégradé interne */
    display: flex; /* Flexbox pour centrage */
    align-items: center; /* Alignement vertical centré */
    justify-content: center; /* Alignement horizontal centré */
    color: #020617; /* Couleur de l’icône */
    font-size: 1.1rem; /* Taille de l’icône */
    box-shadow: 0 16px 35px rgba(34, 211, 238, 0.7); /* Ombre lumineuse sous le badge */
}

/* ---------- Contenu texte de la carte ---------- */
.service-content { /* Zone textuelle principale de la carte */
    flex: 1; /* Occupe l’espace disponible verticalement */
    padding: 0.4rem 0.2rem 0.65rem; /* Espacement interne */
}

.service-title { /* Titre du service (h2) */
    font-size: 1.02rem; /* Taille du titre */
    font-weight: 600; /* Poids semi-gras */
    color: #f9fafb; /* Couleur du texte */
    margin: 0 0 0.45rem; /* Marge inférieure */
}

.service-description { /* Description courte du service */
    font-size: 0.9rem; /* Taille du texte de description */
    color: var(--color-text-muted); /* Couleur de texte atténuée */
    margin: 0; /* Suppression des marges par défaut */
}

/* ---------- Pied de carte (bouton d’action) ---------- */
.service-footer { /* Zone inférieure de la carte */
    padding-top: 0.75rem; /* Espacement supérieur */
    display: flex; /* Utilisation de flexbox */
    justify-content: flex-start; /* Alignement du contenu à gauche */
}

.service-btn { /* Bouton d’action spécifique aux cartes services */
    font-size: 0.86rem; /* Taille réduite pour le texte du bouton */
    padding: 0.6rem 1.2rem; /* Espacement interne du bouton */
}

/* ========================= RESPONSIVE DESIGN ========================= */

/* ---------- Tablettes et écrans moyens ---------- */
@media (max-width: 992px) { /* Règles pour écrans jusqu’à 992px de large */
    .section { /* Ajustement du padding de section */
        padding-inline: 1.5rem; /* Espacement horizontal identique */
    }

    .services-grid { /* Grille de services en mode tablette */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Deux colonnes sur tablette */
    }
}

/* ---------- Mobiles ---------- */
@media (max-width: 640px) { /* Règles pour écrans jusqu’à 640px de large */
    .section { /* Ajustement du padding de section pour mobile */
        padding-inline: 1.2rem; /* Réduction de l’espacement horizontal */
        padding-top: 3.5rem; /* Légère réduction du padding supérieur */
    }

    .section-header { /* En-tête de section sur mobile */
        margin-bottom: 2.2rem; /* Légère réduction de l’espacement bas */
    }

    .services-grid { /* Grille des services sur mobile */
        grid-template-columns: 1fr; /* Une seule colonne en mobile */
    }

    .service-image { /* Image de carte sur mobile */
        height: 190px; /* Hauteur légèrement augmentée pour le ratio */
    }

    .service-btn { /* Bouton d’action sur mobile */
        width: 100%; /* Bouton pleine largeur */
        justify-content: center; /* Texte centré */
    }
}

/* ========================= VARIABLES GLOBALES ========================= */
:root { /* Définition des variables CSS réutilisables */
    --color-bg: #050816; /* Couleur de fond principale sombre */
    --color-primary: #3b82f6; /* Couleur principale (bleu) */
    --color-primary-soft: rgba(59, 130, 246, 0.14); /* Variante adoucie du bleu */
    --color-accent: #22d3ee; /* Couleur d’accent (bleu-vert) */
    --color-accent-soft: rgba(34, 211, 238, 0.2); /* Variante adoucie de l’accent */
    --color-text: #e5e7eb; /* Couleur de texte principale claire */
    --color-text-muted: #9ca3af; /* Couleur de texte secondaire/grisée */
    --color-border-subtle: rgba(148, 163, 184, 0.24); /* Couleur de bordure discrète */

    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.85); /* Ombre douce */
    --shadow-elevated: 0 25px 60px rgba(15, 23, 42, 0.95); /* Ombre marquée */

    --radius-lg: 22px; /* Grand rayon de bordure */
    --radius-md: 14px; /* Rayon moyen */
    --radius-pill: 999px; /* Rayon très arrondi (pilule) */

    --transition-fast: 0.18s ease-out; /* Transition rapide */
    --transition-med: 0.35s ease; /* Transition moyenne pour les animations */
}

/* ========================= BASE GLOBALE ========================= */
*,
*::before,
*::after { /* Application du box-sizing à tous les éléments */
    box-sizing: border-box; /* Inclure padding et bordure dans width/height */
}

html,
body { /* Styles de base HTML et body */
    margin: 0; /* Suppression des marges par défaut */
    padding: 0; /* Suppression des paddings par défaut */
}

body { /* Style global du corps de page */
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Police moderne */
    background: radial-gradient(circle at top, #111827 0, #020617 40%, #000 100%); /* Dégradé sombre élégant */
    color: var(--color-text); /* Couleur de texte par défaut */
    min-height: 100vh; /* Hauteur minimale : plein écran */
    -webkit-font-smoothing: antialiased; /* Lissage des polices */
    line-height: 1.5; /* Hauteur de ligne confortable */
}

/* ========================= STRUCTURE DE SECTION GÉNÉRIQUE ========================= */
.section { /* Classe de base pour toutes les sections */
    padding: 4.5rem 1.5rem 4.75rem; /* Espacement interne haut/bas/gauche/droite */
    position: relative; /* Position relative pour éléments décoratifs */
    z-index: 2; /* Positionnement au-dessus du fond global */
}

.section-inner { /* Conteneur centralisé pour le contenu */
    max-width: 1180px; /* Largeur maximale */
    margin: 0 auto; /* Centrage horizontal */
}

/* ========================= SECTION 3 : POURQUOI NOUS CHOISIR ========================= */
.section-why { /* Styles spécifiques à la section Pourquoi nous choisir */
    background:
        radial-gradient(circle at top, rgba(37, 99, 235, 0.16), transparent 55%),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.18), transparent 55%),
        linear-gradient(180deg, #020617 0%, #020617 40%, #020617 100%); /* Fond sombre texturé */
    border-top: 1px solid rgba(15, 23, 42, 0.85); /* Bordure supérieure discrète */
}

/* ---------- En-tête de la section Pourquoi ---------- */
.section-header-why { /* Conteneur de l’en-tête de section */
    max-width: 720px; /* Largeur maximale de l’en-tête */
    margin: 0 auto 3rem; /* Centrage horizontal et marge basse */
    text-align: center; /* Alignement du texte au centre */
    opacity: 0; /* Invisible avant animation */
    transform: translateY(24px); /* Légère descente initiale */
    transition: opacity var(--transition-med), transform var(--transition-med); /* Transition fluide */
}

.section-header-why.is-visible { /* État visible après animation au scroll */
    opacity: 1; /* Opacité totale */
    transform: translateY(0); /* Retour à la position normale */
}

.section-eyebrow { /* Petit label au-dessus du titre */
    font-size: 0.75rem; /* Petite taille de police */
    letter-spacing: 0.18em; /* Espacement des lettres accentué */
    text-transform: uppercase; /* Tout en majuscules */
    color: var(--color-accent); /* Couleur d’accent */
    margin: 0 0 0.5rem; /* Marge inférieure */
}

.section-title-why { /* Titre principal (H1/H2 stylisé) */
    font-size: clamp(1.8rem, 2.6vw, 2.3rem); /* Taille responsive */
    font-weight: 600; /* Poids semi-gras */
    letter-spacing: 0.04em; /* Espacement de lettres */
    text-transform: uppercase; /* Majuscules pour un rendu institutionnel */
    color: #f9fafb; /* Couleur très claire */
    margin: 0; /* Suppression des marges par défaut */
}

.section-title-why span { /* Partie du titre accentuée (Rédac) */
    color: var(--color-accent); /* Couleur bleu-vert */
}

.section-title-underline-why { /* Soulignement stylisé sous le titre */
    width: 100px; /* Largeur du soulignement */
    height: 3px; /* Épaisseur du soulignement */
    margin: 1rem auto 1.3rem; /* Centrage et marges */
    border-radius: 999px; /* Bord arrondi type pilule */
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); /* Dégradé bleu à bleu-vert */
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.85); /* Lueur légère */
}

.section-intro-why { /* Phrase courte expliquant les avantages */
    font-size: 0.97rem; /* Taille de police */
    color: var(--color-text-muted); /* Texte atténué */
    margin: 0; /* Pas de marge supplémentaire */
}

/* ---------- Grille des blocs Pourquoi nous choisir ---------- */
.why-grid { /* Grille globale contenant les blocs d’arguments */
    display: grid; /* Utilisation de CSS Grid */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Trois colonnes sur grands écrans */
    gap: 1.8rem; /* Espacement entre les blocs */
}

/* ---------- Carte individuelle Pourquoi nous choisir ---------- */
.why-card { /* Carte d’argument individuelle */
    position: relative; /* Position relative pour les éléments internes */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Contenu en colonne */
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.99)); /* Fond sombre dégradé */
    border-radius: 18px; /* Coins arrondis */
    padding: 1.1rem 1.1rem 1.3rem; /* Espacement interne */
    border: 1px solid rgba(148, 163, 184, 0.3); /* Bordure discrète */
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95); /* Ombre portée pour effet carte */
    overflow: hidden; /* Masquer les débordements */
    transform: translateY(24px); /* Position initiale légèrement plus basse */
    opacity: 0; /* Invisible avant animation */
    transition:
        opacity var(--transition-med),
        transform var(--transition-med),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease; /* Transitions pour animation et hover */
}

/* États d’animation selon la direction choisie via data-reveal */
.why-card[data-reveal="left"] { /* Carte animée depuis la gauche */
    transform: translate(-24px, 24px); /* Translation diagonale */
}

.why-card[data-reveal="right"] { /* Carte animée depuis la droite */
    transform: translate(24px, 24px); /* Translation diagonale inverse */
}

.why-card[data-reveal="bottom"] { /* Carte animée depuis le bas (zoom/fade) */
    transform: translateY(32px) scale(0.98); /* Légère descente et réduction */
}

/* État visible après intersection */
.why-card.is-visible { /* Quand la carte devient visible au scroll */
    opacity: 1; /* Opacité totale */
    transform: translate(0, 0) scale(1); /* Position normale et échelle 1 */
}

/* Effets au survol : zoom léger, ombre renforcée et fond accentué */
.why-card:hover { /* Styles au survol de la carte */
    transform: translateY(-6px) scale(1.015); /* Légère montée et agrandissement */
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.95); /* Ombre plus marquée */
    border-color: rgba(59, 130, 246, 0.75); /* Bordure bleue accentuée */
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.3), rgba(15, 23, 42, 0.99)); /* Fond légèrement plus lumineux */
}

/* ---------- Zone média (photo stylisée) ---------- */
.why-media { /* Conteneur de l’image */
    position: relative; /* Position relative pour effets éventuels */
    border-radius: 16px; /* Coins arrondis */
    overflow: hidden; /* Masque ce qui dépasse */
    margin-bottom: 0.9rem; /* Espacement sous l’image */
}

.why-image { /* Image de la carte Pourquoi nous choisir */
    width: 100%; /* Largeur totale */
    height: 160px; /* Hauteur fixe */
    background-size: cover; /* L’image couvre tout le conteneur */
    background-position: center; /* L’image est centrée */
    filter: saturate(1.1) contrast(1.05); /* Légère intensification des couleurs */
    transform: scale(1.02); /* Très léger zoom par défaut */
    transition:
        transform 0.5s ease,
        filter 0.5s ease; /* Transitions pour le zoom et le filtre */
}

/* Zoom léger de l’image au survol de la carte */
.why-card:hover .why-image { /* Lorsque la carte est survolée */
    transform: scale(1.07); /* Zoom progressif */
    filter: saturate(1.2) contrast(1.1); /* Couleurs plus vives */
}

.why-media::before { /* Overlay dégradé sur l’image */
    content: ""; /* Pseudo-élément vide */
    position: absolute; /* Position absolue */
    inset: 0; /* Couvre entièrement l’image */
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.3), transparent 55%),
        radial-gradient(circle at bottom, rgba(15, 23, 42, 0.6), transparent 60%); /* Mélange de dégradés sombres */
    mix-blend-mode: multiply; /* Mode de fusion avec l’image */
    pointer-events: none; /* Ne capte pas la souris */
}

/* ---------- Contenu texte de la carte ---------- */
.why-content { /* Conteneur textuel de la carte */
    position: relative; /* Position pour le badge icône */
    padding-top: 0.2rem; /* Légère marge supérieure */
}

.why-icon-badge { /* Badge rond contenant l’icône Bootstrap */
    position: absolute; /* Position absolue */
    top: -28px; /* Légèrement au-dessus du contenu texte */
    right: 0; /* Aligné à droite */
    width: 38px; /* Largeur du badge */
    height: 38px; /* Hauteur du badge */
    border-radius: 999px; /* Forme circulaire */
    background: radial-gradient(circle at 20% 20%, var(--color-accent), var(--color-primary)); /* Dégradé interne */
    display: flex; /* Flexbox pour centrage */
    align-items: center; /* Alignement vertical centré */
    justify-content: center; /* Alignement horizontal centré */
    color: #020617; /* Couleur de l’icône */
    font-size: 1rem; /* Taille de l’icône */
    box-shadow: 0 16px 35px rgba(34, 211, 238, 0.7); /* Ombre lumineuse */
}

.why-title { /* Titre court de l’argument */
    font-size: 1.02rem; /* Taille du titre */
    font-weight: 600; /* Poids semi-gras */
    color: #f9fafb; /* Couleur claire */
    margin: 0.6rem 0 0.4rem; /* Marges haut/bas */
}

.why-description { /* Description concise de l’argument */
    font-size: 0.9rem; /* Taille du texte */
    color: var(--color-text-muted); /* Couleur atténuée */
    margin: 0; /* Pas de marge supplémentaire */
}

/* ========================= RESPONSIVE DESIGN ========================= */

/* ---------- Tablettes et écrans intermédiaires ---------- */
@media (max-width: 992px) { /* Règles pour écrans jusqu’à 992px */
    .section { /* Ajustement des sections */
        padding-inline: 1.5rem; /* Espacement horizontal maitenu */
    }

    .why-grid { /* Grille Pourquoi nous choisir */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Deux colonnes sur tablette */
    }

    .why-image { /* Image dans les cartes */
        height: 170px; /* Hauteur légèrement augmentée */
    }
}

/* ---------- Mobiles ---------- */
@media (max-width: 640px) { /* Règles pour écrans jusqu’à 640px */
    .section { /* Ajustement global des sections */
        padding-inline: 1.2rem; /* Réduction de l’espacement horizontal */
        padding-top: 3.5rem; /* Légère réduction du padding haut */
    }

    .section-header-why { /* En-tête de section sur mobile */
        margin-bottom: 2.4rem; /* Légère réduction de la marge basse */
    }

    .why-grid { /* Grille Pourquoi nous choisir sur mobile */
        grid-template-columns: 1fr; /* Une seule colonne */
    }

    .why-image { /* Image sur mobile */
        height: 190px; /* Hauteur un peu plus grande pour le ratio */
    }
}

.section-resources { /* Section dédiée aux ressources gratuites */
    background:
        radial-gradient(circle at top, rgba(37, 99, 235, 0.1), transparent 55%), /* Halo bleu en haut */
        radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.14), transparent 55%), /* Halo bleu-vert en bas */
        linear-gradient(180deg, #020617 0%, #020617 40%, #020617 100%); /* Fond sombre principal */
    border-top: 1px solid rgba(15, 23, 42, 0.85); /* Fine bordure supérieure */
}

/* ---------- En-tête de la section Ressources ---------- */
.section-header-resources { /* Conteneur du titre et de l’intro */
    max-width: 720px; /* Largeur maximale pour un bon confort de lecture */
    margin: 0 auto 3rem; /* Centré avec marge basse */
    text-align: center; /* Texte centré */
    opacity: 0; /* Invisible avant animation au scroll */
    transform: translateY(24px); /* Légère descente initiale */
    transition: opacity var(--transition-med), transform var(--transition-med); /* Transition fluide */
}

.section-header-resources.is-visible { /* État visible après animation */
    opacity: 1; /* Opacité totale */
    transform: translateY(0); /* Retour à la position normale */
}

.section-title-resources { /* Titre de la section Ressources */
    font-size: clamp(1.7rem, 2.4vw, 2.1rem); /* Taille responsive */
    font-weight: 600; /* Poids semi-gras */
    letter-spacing: 0.04em; /* Espacement légèrement augmenté */
    text-transform: uppercase; /* Titre en majuscules */
    color: #f9fafb; /* Couleur claire */
    margin: 0; /* Suppression des marges par défaut */
}

.section-title-underline-resources { /* Soulignement stylisé sous le titre */
    width: 90px; /* Largeur du trait */
    height: 3px; /* Épaisseur du trait */
    margin: 0.9rem auto 1.3rem; /* Marges et centrage */
    border-radius: 999px; /* Bords très arrondis */
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); /* Dégradé bleu -> bleu-vert */
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.8); /* Lueur discrète */
}

.section-intro-resources { /* Petite description de la section */
    font-size: 0.97rem; /* Taille de police */
    color: var(--color-text-muted); /* Couleur de texte atténuée */
    margin: 0; /* Pas de marge supplémentaire */
}

/* ---------- Grille des ressources ---------- */
.resources-grid { /* Grille contenant les cartes de ressources */
    display: grid; /* Utilisation de CSS Grid */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Trois colonnes sur grands écrans */
    gap: 1.8rem; /* Espacement entre les cartes */
}

/* ---------- Carte de ressource ---------- */
.resource-card { /* Carte individuelle de ressource */
    position: relative; /* Position relative pour éléments internes */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Organisation en colonne */
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.99)); /* Fond sombre dégradé */
    border-radius: 18px; /* Coins arrondis */
    padding: 1.1rem 1.1rem 1.3rem; /* Espacement interne */
    border: 1px solid rgba(148, 163, 184, 0.3); /* Bordure discrète */
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95); /* Ombre portée */
    overflow: hidden; /* Masque les débordements */
    transform: translateY(24px); /* Position initiale pour animation au scroll */
    opacity: 0; /* Carte invisible avant apparition */
    transition:
        opacity var(--transition-med),
        transform var(--transition-med),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease; /* Transitions pour apparition et hover */
}

.resource-card.is-visible { /* Carte visible après déclenchement de l’animation au scroll */
    opacity: 1; /* Opacité totale */
    transform: translateY(0); /* Retour à la position normale */
}

.resource-card:hover { /* Effets au survol de la carte */
    transform: translateY(-6px) scale(1.015); /* Légère montée et zoom */
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.95); /* Ombre plus marquée */
    border-color: rgba(59, 130, 246, 0.75); /* Bordure bleue accentuée */
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.3), rgba(15, 23, 42, 0.99)); /* Fond légèrement plus lumineux */
}

/* ---------- Zone média (image stylisée) ---------- */
.resource-media { /* Conteneur de l’image */
    position: relative; /* Position relative */
    border-radius: 16px; /* Coins arrondis */
    overflow: hidden; /* Masque ce qui déborde */
    margin-bottom: 0.9rem; /* Espacement sous l’image */
}

.resource-image { /* Image de la ressource en fond */
    width: 100%; /* Largeur totale */
    height: 160px; /* Hauteur fixe */
    background-size: cover; /* L’image couvre le conteneur */
    background-position: center; /* L’image est centrée */
    filter: saturate(1.1) contrast(1.05); /* Légère intensification des couleurs */
    transform: scale(1.02); /* Légère mise à l’échelle par défaut */
    transition:
        transform 0.5s ease,
        filter 0.5s ease; /* Transitions pour zoom et filtre */
}

.resource-card:hover .resource-image { /* Zoom sur l’image au survol de la carte */
    transform: scale(1.07); /* Zoom léger */
    filter: saturate(1.2) contrast(1.1); /* Couleurs plus vives */
}

.resource-media::before { /* Overlay dégradé au-dessus de l’image */
    content: ""; /* Pseudo-élément vide */
    position: absolute; /* Position absolue */
    inset: 0; /* Couvre l’ensemble de l’image */
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.3), transparent 55%), /* Dégradé sombre oblique */
        radial-gradient(circle at bottom, rgba(15, 23, 42, 0.6), transparent 60%); /* Dégradé sombre en bas */
    mix-blend-mode: multiply; /* Fusion avec l’image */
    pointer-events: none; /* Ne capte pas les événements souris */
}

/* ---------- Contenu texte de la carte ---------- */
.resource-content { /* Conteneur textuel de la carte */
    padding-top: 0.2rem; /* Légère marge supérieure */
}

.resource-title { /* Titre du document */
    font-size: 1rem; /* Taille de police du titre */
    font-weight: 600; /* Poids semi-gras */
    color: #f9fafb; /* Couleur claire */
    margin: 0 0 0.45rem; /* Marge inférieure */
}

.resource-description { /* Brève description du document */
    font-size: 0.9rem; /* Taille de texte */
    color: var(--color-text-muted); /* Couleur de texte atténuée */
    margin: 0; /* Pas de marge supplémentaire */
}

/* ---------- Pied de carte (bouton Télécharger) ---------- */
.resource-footer { /* Zone inférieure de la carte */
    padding-top: 0.75rem; /* Espacement supérieur */
    display: flex; /* Utilisation de flexbox */
    justify-content: flex-start; /* Alignement du contenu à gauche */
}

.btn-download { /* Bouton Télécharger spécifique à cette section */
    font-size: 0.86rem; /* Taille de texte du bouton */
    padding: 0.6rem 1.2rem; /* Espacement interne du bouton */
}

/* ========================= RESPONSIVE DESIGN ========================= */
@media (max-width: 992px) { /* Styles pour tablettes et écrans intermédiaires */
    .resources-grid { /* Grille de ressources sur tablette */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Deux colonnes */
    }

    .resource-image { /* Image de ressource sur tablette */
        height: 170px; /* Hauteur légèrement augmentée */
    }
}

@media (max-width: 640px) { /* Styles pour mobiles */
    .section-resources { /* Section Ressources sur mobile */
        padding-inline: 1.2rem; /* Réduction de l’espacement horizontal */
        padding-top: 3.5rem; /* Légère réduction du padding supérieur */
    }

    .section-header-resources { /* En-tête de la section sur mobile */
        margin-bottom: 2.4rem; /* Réduction de la marge basse */
    }

    .resources-grid { /* Grille de ressources sur mobile */
        grid-template-columns: 1fr; /* Une seule colonne */
    }

    .resource-image { /* Image sur mobile */
        height: 190px; /* Hauteur légèrement augmentée pour un meilleur ratio */
    }

    .btn-download { /* Bouton Télécharger sur mobile */
        width: 100%; /* Bouton pleine largeur */
        justify-content: center; /* Centrage du texte et de l’icône */
    }
}


.section-testimonials {
  padding: 80px 6vw;
  background: radial-gradient(circle at top left, #0b1020, #050816 55%, #020617 100%);
  color: var(--color-text);
}

.section-testimonials__header {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.section-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.testimonials-marquee {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.98));
  box-shadow: var(--shadow-soft);
  padding: 22px 0;
}

.testimonials-marquee__track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: max-content;
  animation: testimonials-loop 40s linear infinite;
}

.testimonials-marquee:hover .testimonials-marquee__track {
  animation-play-state: paused; /* pause au survol */
}

.testimonial-card {
  min-width: 260px;
  max-width: 320px;
  background: radial-gradient(circle at top left, rgba(59,130,246,0.14), #020617);
  border-radius: 18px;
  border: 1px solid var(--color-border-subtle);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-text);
}

.testimonial-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.testimonial-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.testimonial-card__name {
  font-size: 0.98rem;
  margin: 0 0 4px;
}

.testimonial-card__stars {
  color: #facc15;
  font-size: 0.8rem;
}

.testimonial-card__text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Animation horizontale continue */
@keyframes testimonials-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .section-testimonials {
    padding-inline: 16px;
  }

  .testimonials-marquee {
    padding-block: 18px;
  }

  .testimonial-card {
    min-width: 240px;
    max-width: 260px;
  }
}


.section-contact {
  padding: 90px 6vw;
  background: radial-gradient(circle at top right, #0b1020, #050816 55%, #020617 100%);
  color: var(--color-text);
  display: flex;
  justify-content: center;
}

.section-contact__inner {
  width: 100%;
  max-width: 980px;
  display: grid;
  gap: 32px;
  animation: contact-fade-in 0.8s var(--transition-med) forwards;
  opacity: 0;
  transform: translateY(24px);
}

.section-contact__intro {
  max-width: 540px;
}

.contact-form {
  background: radial-gradient(circle at top left, rgba(15,23,42,0.95), #020617);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-elevated);
  padding: 26px 24px 22px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form__field label {
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.contact-form__field input,
.contact-form__field textarea {
  background-color: #020617;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  padding: 9px 11px;
  font-size: 0.92rem;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              background-color var(--transition-fast),
              transform var(--transition-fast);
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--color-text-muted);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary-soft);
  background-color: #050816;
  transform: translateY(-1px);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
}

.field-error {
  min-height: 16px;
  font-size: 0.78rem;
  color: var(--color-danger);
}

.contact-form__footer {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contact-form__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: 360px;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #0b1020;
  font-size: 0.9rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.55);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              filter var(--transition-fast);
}

.contact-form__submit i {
  font-size: 0.95rem;
}

.contact-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.65);
  filter: brightness(1.05);
}

.contact-form__submit:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.5);
}

.contact-form__submit:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.contact-form__feedback {
  margin-top: 10px;
  font-size: 0.85rem;
}

.contact-form__feedback--error {
  color: var(--color-danger);
}

.contact-form__feedback--success {
  color: #4ade80;
}

/* état erreur sur champ */
.contact-form__field input.is-invalid,
.contact-form__field textarea.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px rgba(249, 115, 115, 0.28);
}

/* animation d’apparition */
@keyframes contact-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .section-contact {
    padding-inline: 16px;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding-inline: 18px;
  }

  .contact-form__footer {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .contact-form__submit {
    width: 100%;
    justify-content: center;
  }
}


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

.fr-footer-map-wrapper {
  width: 100%;
  height: 100%;
}

.fr-footer-map-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* remplit tout l’espace */
  display: block;
}


.fr-footer {
  background: radial-gradient(circle at top left, #0b1020, #050816 55%, #020617 100%);
  color: var(--color-text);
  padding: 32px 6vw 22px;
  border-top: 1px solid var(--color-border-subtle);
}

.fr-footer-inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto 18px;
}

/* Logo / marque */
.fr-footer-col--brand {
  max-width: 360px;
}

.fr-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.fr-footer-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at top left, var(--color-primary), var(--color-accent));
  color: #020617;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.65);
}

.fr-footer-logo-text span {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
}

.fr-footer-logo-text small {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.fr-footer-description {
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

/* Titres colonnes */
.fr-footer-heading {
  font-size: 0.92rem;
  margin-bottom: 10px;
}

/* Réseaux sociaux */
.fr-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fr-footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  background: radial-gradient(circle at top left, rgba(148,163,184,0.12), #020617);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.75);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}

.fr-footer-social-link i {
  font-size: 1.1rem;
}

.fr-footer-social-link:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.9);
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: radial-gradient(circle at top left, var(--color-primary-soft), #020617);
}

/* Carte */
.fr-footer-map-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-soft);
}



/* Bas de footer */
.fr-footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fr-footer-copy {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.fr-footer-legal {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ================== RESPONSIVE FOOTER ================== */

@media (min-width: 768px) {
  .fr-footer-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .fr-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .fr-footer-legal {
    text-align: right;
  }
}

@media (min-width: 1200px) {
  .fr-footer {
    padding-inline: 8vw;
  }

  .fr-footer-description {
    font-size: 0.88rem;
  }
}