/* ========================================
   NEXUS FORMATION - FICHIER CSS PRINCIPAL
   Auteur : Frédérick Martin
   Dernière modification : Février 2026
   
   TABLE DES MATIÈRES :
   1. Reset et variables globales
   2. Header (bandeau + navigation)
   3. Hero (section d'accueil)
   4. Section Présentation
   5. Section Domaines
   6. Section Pédagogie
   7. Section Disponibilité
   8. Section Contact
   9. Footer
   10. Responsive Mobile
   ======================================== */


/* ========================================
   1. RESET ET VARIABLES GLOBALES
   ======================================== */

/* Réinitialisation des marges et paddings par défaut du navigateur */
* {
    margin: 0; /* Supprime toutes les marges externes */
    padding: 0; /* Supprime tous les espacements internes */
    box-sizing: border-box; /* Inclut border et padding dans width/height */
}

/* Variables CSS réutilisables pour les couleurs du site */
:root {
    --primary-color: #2b0934;    /* Rubis foncé - couleur principale */
    --primary-light: #4a1555;    /* Rubis clair - pour variantes */
    --primary-dark: #1a0520;     /* Rubis très foncé - pour footer */
    --accent-color: #9b8fa3;     /* Mauve clair - pour accents et survol */
    --text-light: #f5f5f5;       /* Texte blanc cassé - pour fond sombre */
    --text-dark: #333;           /* Texte noir grisé - pour fond clair */
    --bg-light: #ffffff;         /* Fond blanc */
    --bg-gray: #f8f8f8;          /* Fond gris clair */
}

/* Configuration du défilement de la page */
html {
    scroll-behavior: smooth; /* Défilement fluide lors des clics sur ancres */
    scroll-padding-top: 120px; /* Compense la hauteur du header fixe (évite que les titres soient cachés sous le header) */
}

/* Style global du body (toute la page) */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police par défaut */
    line-height: 1.7; /* Espacement entre les lignes de texte (1.7 = 170% de la hauteur de la police) */
    color: var(--text-dark); /* Couleur du texte par défaut */
    overflow-x: hidden; /* Empêche le scroll horizontal */
}


/* ========================================
   2. HEADER (Bandeau fixe + Navigation)
   ======================================== */

/* Bandeau supérieur violet foncé (fixe en haut de page) */
.top-bar {
    position: fixed; /* Reste fixé en haut même quand on scroll */
    top: 0; /* Collé tout en haut */
    width: 100%; /* Prend toute la largeur de l'écran */
    background: rgba(43, 9, 52, 0.98); /* Violet foncé semi-transparent */
    z-index: 2000; /* Passe au-dessus de tous les autres éléments */
}

/* Conteneur interne du bandeau (centre le contenu) */
.top-bar-inner {
    max-width: 1200px; /* Largeur maximale du contenu */
    margin: 0 auto; /* Centre horizontalement */
    display: flex; /* Utilise flexbox pour disposer les éléments */
    justify-content: space-between; /* Logo à gauche, bouton à droite */
    align-items: center; /* Centre verticalement */
    padding: 0.6rem 2rem; /* Espacement interne : 0.6rem haut/bas, 2rem gauche/droite */
    color: white; /* Couleur du texte */
    min-height: 82px; /* Hauteur minimale du bandeau — ajustée pour logo 70px */
    width: 100%; /* Prend toute la largeur du parent */
}

/* Logo Nexus Formation dans le bandeau */
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 70px; /* Hauteur fixe, largeur auto selon ratio */
    width: auto;
    display: block;
}

/* Conteneur des boutons à droite du bandeau */
.top-actions {
    display: flex; /* Utilise flexbox */
    gap: 1rem; /* Espacement entre les boutons */
    align-items: center; /* Centre verticalement */
}

/* Liens dans la zone des boutons */
.top-actions a {
    color: white; /* Couleur du texte */
    text-decoration: none; /* Retire le soulignement */
    font-weight: 600; /* Semi-gras */
}

/* Bouton "Me contacter" */
.cta {
    background: white; /* Fond blanc */
    color: var(--primary-color) !important; /* Texte violet (force avec !important) */
    padding: 0.4rem 0.8rem; /* Espacement interne */
    border-radius: 6px; /* Coins arrondis */
    font-weight: 700; /* Très gras */
}

/* Bouton au survol de la souris */
.cta:hover {
    background: var(--accent-color); /* Change de couleur */
    color: white !important; /* Texte blanc */
}

/* Barre de navigation (menu) sous le bandeau */
.main-nav {
    position: fixed; /* Reste fixé */
    top: 82px; /* Juste sous le top-bar — ajusté pour logo 70px */
    width: 100%; /* Toute la largeur */
    background: var(--primary-color); /* Fond violet */
    z-index: 2001; /* Au-dessus du top-bar */
}

/* Liste des liens de navigation */
.main-nav .nav-menu {
    display: flex; /* Disposition horizontale */
    justify-content: flex-end; /* Aligné à droite */
    gap: 2rem; /* Espacement entre les liens */
    list-style: none; /* Retire les puces */
    padding: 0.8rem 2rem; /* Espacement interne */
    margin: 0 auto; /* Centre horizontalement */
    max-width: 1200px; /* Largeur maximale */
    width: 100%; /* Prend toute la largeur */
}

/* Liens de navigation individuels */
.main-nav a {
    color: white; /* Texte blanc */
    text-decoration: none; /* Pas de soulignement */
    font-weight: 700; /* Gras */
    line-height: 1.5; /* Hauteur de ligne */
    display: inline-block; /* Permet padding vertical */
    padding: 0.2rem 0; /* Petit espacement vertical */
}

/* Lien au survol */
.main-nav a:hover {
    color: var(--accent-color); /* Change de couleur */
}


/* ========================================
   3. HERO (Section d'accueil)
   ======================================== */

/* Section d'accueil (fond violet avec NEXUS/Formation) */
.hero {
    display: flex; /* Utilise flexbox */
    align-items: flex-start; /* Alignement en haut */
    justify-content: center; /* Centre horizontalement */
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 100%); /* Dégradé violet */
    color: var(--text-light); /* Texte blanc */
    padding: 10rem 2rem 4rem; /* Espacement : 10rem en haut (compense header fixe), 2rem sur côtés, 4rem en bas */
    position: relative; /* Permet positionnement absolu des enfants */
    overflow: hidden; /* Cache ce qui dépasse */
}

/* Effet de fond lumineux subtil sur le hero */
.hero::before {
    content: ''; /* Crée un pseudo-élément vide */
    position: absolute; /* Positionné par rapport au hero */
    top: 0; /* Du haut */
    left: 0; /* De gauche */
    right: 0; /* À droite */
    bottom: 0; /* En bas */
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.03) 50%, transparent 70%); /* Effet lumineux */
    pointer-events: none; /* Ne bloque pas les clics */
}

/* Conteneur du texte du hero */
.hero-content {
    max-width: 800px; /* Largeur maximale */
    text-align: center; /* Texte centré */
    position: relative; /* Au-dessus du ::before */
    z-index: 1; /* Ordre d'empilement */
}

/* Mot "NEXUS" en arrière-plan */
.hero-brand {
    font-size: 6rem; /* Très grande taille */
    font-weight: 700; /* Très gras */
    line-height: 0.85; /* Lignes très rapprochées */
    letter-spacing: 4px; /* Espacement entre lettres */
    opacity: 0.2; /* Très transparent (20% visible) */
    text-transform: uppercase; /* Tout en majuscules */
    margin: 0; /* Pas de marge */
}

/* Baseline "Faciliter l'apprentissage..." */
.hero-baseline {
    font-size: 2.2rem; /* Grande taille */
    font-weight: 600; /* Semi-gras */
    line-height: 1.3; /* Espacement des lignes */
    margin: 0; /* Pas de marge */
    color: white; /* Blanc */
    position: relative; /* Contexte de positionnement */
    z-index: 2; /* Au-dessus de NEXUS et Formation */
}

/* Mot "Formation" en arrière-plan */
.hero-brand-bottom {
    font-size: 6rem; /* Très grande taille */
    font-weight: 700; /* Très gras */
    line-height: 0.85; /* Lignes rapprochées */
    letter-spacing: 4px; /* Espacement lettres */
    opacity: 0.1; /* Encore plus transparent (10% visible) */
    margin: 0; /* Pas de marge */
}

/* Sous-titre "...pour comprendre, maîtriser..." */
.hero-subtitle {
    font-size: 1.4rem; /* Taille moyenne */
    font-weight: 300; /* Léger */
    color: #ffffff; /* Blanc pur */
    opacity: 1; /* Totalement opaque */
    margin: 0; /* Pas de marge */
}


/* ========================================
   4. SECTION PRÉSENTATION
   ======================================== */

/* Conteneur général des sections */
.container {
    max-width: 1200px; /* Largeur maximale du contenu */
    margin: 0 auto; /* Centre horizontalement */
    padding: 4rem 2rem; /* Espacement : 4rem haut/bas, 2rem gauche/droite */
}

/* Section présentation (fond blanc) */
#presentation {
    background: var(--bg-light); /* Fond blanc */
}

/* Grille 2 colonnes : texte à gauche, photo à droite */
.content-grid {
    display: grid; /* Utilise CSS Grid */
    grid-template-columns: 2fr 1fr; /* 2 parts pour texte, 1 part pour photo */
    gap: 4rem; /* Espacement entre colonnes */
    align-items: start; /* Alignement en haut */
    margin-bottom: 4rem; /* Marge en bas */
}

/* Grille inversée : photo à gauche, texte à droite */
.content-grid-reverse {
    display: grid; /* Utilise CSS Grid */
    grid-template-columns: 1.35fr 1.65fr; /* Photo plus petite que texte */
    gap: 4rem; /* Espacement entre colonnes */
    align-items: start; /* Alignement en haut */
}

/* Titre principal (ex: Frédérick MARTIN) */
.text-content h2 {
    font-size: 2.5rem; /* Grande taille */
    color: var(--primary-color); /* Couleur violet */
    margin-bottom: 1.5rem; /* Marge en bas */
}

/* Sous-titres de section (h3) */
.text-content h3 {
    font-size: 1.5rem; /* Taille moyenne */
    color: var(--primary-color); /* Couleur violet */
    margin-top: 2rem; /* Marge en haut */
    margin-bottom: 1rem; /* Marge en bas */
}

/* Premier h3 de la section (pas de marge en haut) */
.text-content h3:first-of-type {
    margin-top: 0; /* Supprime la marge du haut */
}

/* Paragraphes de texte */
.text-content p {
    margin-bottom: 1.2rem; /* Marge en bas */
    font-size: 1.05rem; /* Taille légèrement supérieure à la base */
    line-height: 1.8; /* Espacement des lignes */
}

/* AJOUT : Style des listes à puces dans le contenu texte */
.text-content ul {
    margin-bottom: 1.2rem; /* Espacement en bas de la liste */
    padding-left: 3rem; /* DÉCALAGE DES PUCES VERS LA DROITE - MODIFIABLE (augmente pour décaler plus, diminue pour rapprocher) */
    font-size: 1.05rem; /* Taille du texte des éléments de liste */
    line-height: 1.8; /* Espacement entre les lignes */
}

/* Éléments individuels de la liste */
.text-content li {
    margin-bottom: 0.5rem; /* Espacement entre chaque puce */
}

/* Photo de profil (sticky = reste visible au scroll) */
.image-content {
    position: sticky; /* Reste "collé" lors du scroll */
    top: 120px; /* Distance du haut lors du scroll (compense le header) */
}

/* Image à l'intérieur du conteneur */
.image-content img {
    width: 120%; /* Largeur 120% pour déborder légèrement */
    max-width: 450px; /* Largeur maximale */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Ombre portée */
}

/* Photo du chemin (2ème photo, à gauche) */
.image-content-left {
    position: sticky; /* Reste "collé" lors du scroll */
    top: 120px; /* Distance du haut */
    align-self: start; /* Alignement en haut de la grille */
    filter: saturate(0.9) contrast(0.95); /* Légère désaturation pour effet subtil */
}

/* Image à l'intérieur */
.image-content-left img {
    width: 100%; /* Prend toute la largeur */
    max-width: none; /* Pas de limite de largeur */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Ombre portée */
    display: block; /* Affichage en bloc (évite espace en bas) */
}

/* Style pour les images placeholder (temporaires, en attente de remplacement) */
.placeholder-image {
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%); /* Dégradé gris */
    min-height: 400px; /* Hauteur minimale */
    display: flex; /* Utilise flexbox */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    position: relative; /* Contexte pour le ::before */
}

/* Message visuel sur les placeholders */
.placeholder-image::before {
    content: "Image à remplacer"; /* Texte affiché */
    position: absolute; /* Positionné absolument */
    color: #999; /* Gris */
    font-size: 1.2rem; /* Taille du texte */
    font-weight: 600; /* Semi-gras */
    text-align: center; /* Centré */
}


/* ========================================
   5. SECTION DOMAINES D'INTERVENTION
   ======================================== */

/* Section avec fond violet foncé */
.dark-section {
    background: var(--primary-color); /* Fond violet */
    color: var(--text-light); /* Texte blanc */
}

/* Titre de la section domaines */
.dark-section h2 {
    text-align: center; /* Centré */
    font-size: 2.5rem; /* Grande taille */
    margin-bottom: 3rem; /* Marge en bas */
}

/* Grille auto-responsive pour les cartes de domaines */
.domains-grid {
    display: grid; /* Utilise CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* MODIFIÉ : min 340px par colonne (au lieu de 250px) pour des cartes plus larges avec 3 éléments */
    gap: 2rem; /* RÉDUIT : Espacement entre les cartes (2rem → 1rem) */
}

/* Carte de domaine individuelle */
.domain-card {
    background: rgba(255,255,255,0.05); /* Fond blanc très transparent */
    padding: 2rem 1.2rem; /* MODIFIÉ : Espacement interne (2rem haut/bas, 1.2rem gauche/droite au lieu de 2rem partout) */
    border-radius: 10px; /* Coins arrondis */
    border: 1px solid rgba(255,255,255,0.1); /* Bordure blanche très transparente */
    transition: all 0.3s; /* Animation fluide sur tous les changements */
    text-align: center; /* Centre tout le texte dans la carte */
}

/* Carte au survol */
.domain-card:hover {
    background: rgba(255,255,255,0.08); /* Fond un peu plus visible */
    transform: translateY(-5px); /* Légère élévation */
    border-color: var(--accent-color); /* Bordure change de couleur */
}

/* Titre de la carte */
.domain-card h3 {
    font-size: 1.3rem; /* Taille moyenne */
    margin-bottom: 1rem; /* Marge en bas */
    color: var(--accent-color); /* Couleur accent */
}

/* AJOUT : Paragraphes dans les cartes de domaines */
.domain-card p {
    margin-bottom: 1rem; /* Espacement entre chaque paragraphe (modifiable : augmente pour plus d'espace, diminue pour moins) */
    line-height: 1.6; /* Hauteur de ligne pour meilleure lisibilité */
}

/* Dernier paragraphe sans marge en bas (évite espace inutile en fin de carte) */
.domain-card p:last-of-type {
    margin-bottom: 0; /* Pas de marge sur le dernier paragraphe */
}


/* ========================================
   6. SECTION PÉDAGOGIE
   ======================================== */

/* Section pédagogie (fond blanc) */
#pedagogie {
    background: var(--bg-light); /* Fond blanc */
}

/* Note : Les styles .content-grid, .content-grid-reverse, .text-content, etc. 
   sont déjà définis dans la section Présentation et s'appliquent ici aussi */


/* ========================================
   7. SECTION APPROCHE PÉDAGOGIQUE
   (ancienne section, conservée pour compatibilité)
   ======================================== */

/* Section approche avec fond gris */
#approche {
    background: var(--bg-gray); /* Fond gris clair */
}

/* Titre de la section */
#approche h2 {
    text-align: center; /* Centré */
    font-size: 2.5rem; /* Grande taille */
    color: var(--primary-color); /* Couleur violet */
    margin-bottom: 2rem; /* Marge en bas */
}

/* Conteneur du contenu approche */
.approach-content {
    max-width: 1200px; /* Largeur maximale élargie */
    margin: 0 auto; /* Centre horizontalement */
}

/* Paragraphes dans approche */
.approach-content p {
    font-size: 1.1rem; /* Taille légèrement supérieure */
    margin-bottom: 1.5rem; /* Marge en bas */
    text-align: center; /* Centré */
}


/* ========================================
   8. SECTION DISPONIBILITÉ
   ======================================== */

/* Section disponibilité (fond violet avec dégradé) */
.availability-section {
    background: linear-gradient(135deg, #3a0d44 0%, var(--primary-color) 100%); /* Dégradé violet subtil */
    color: var(--text-light); /* Texte blanc */
}

/* Boîte de disponibilité */
.availability-box {
    text-align: center; /* Contenu centré */
    padding: 2rem; /* Espacement interne */
    background: rgba(255,255,255,0.05); /* Fond blanc très transparent */
    border-radius: 10px; /* Coins arrondis */
    border: 1px solid rgba(255,255,255,0.1); /* Bordure blanche transparente */
    transition: all 0.3s; /* Animation fluide */
}

/* Boîte au survol */
.availability-box:hover {
    background: rgba(255,255,255,0.08); /* Fond un peu plus visible */
    transform: translateY(-5px); /* Légère élévation */
    border-color: var(--accent-color); /* Bordure change de couleur */
}

/* Titre dans la boîte */
.availability-box h2 {
    font-size: 2.2rem; /* Grande taille */
    margin-bottom: 1rem; /* Marge en bas */
}

/* Texte dans la boîte */
.availability-box p {
    font-size: 1.2rem; /* Taille moyenne */
    opacity: 0.9; /* Légèrement transparent */
}


/* ========================================
   9. SECTION CONTACT
   ======================================== */

/* Section contact (fond blanc) */
#contact {
    background: var(--bg-light); /* Fond blanc */
}

/* Titre de la section */
#contact h2 {
    text-align: center; /* Centré */
    font-size: 2.5rem; /* Grande taille */
    color: var(--primary-color); /* Couleur violet */
    margin-bottom: 3rem; /* Marge en bas */
}

/* Conteneur pour centrer la carte */
.contact-centered {
    display: flex; /* Utilise flexbox */
    justify-content: center; /* Centre horizontalement */
}

/* Carte de contact */
.contact-card {
    max-width: 600px; /* Largeur maximale */
    width: 100%; /* Prend toute la largeur disponible jusqu'au max */
    background: var(--bg-gray); /* Fond gris clair */
    padding: 3rem; /* Espacement interne */
    border-radius: 15px; /* Coins bien arrondis */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Ombre portée douce */
    text-align: center; /* Contenu centré */
}

/* Nom dans la carte */
.contact-card h3 {
    font-size: 2rem; /* Grande taille */
    color: var(--primary-color); /* Couleur violet */
    margin-bottom: 1.5rem; /* Marge en bas */
}

/* Conteneur des moyens de contact */
.contact-methods {
    margin: 2rem 0; /* Marges haut et bas */
}

/* Ligne de contact individuelle (icône + texte/lien) */
.contact-item {
    display: flex; /* Disposition horizontale */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    gap: 0.5rem; /* Espacement entre icône et texte */
    margin-bottom: 1.8rem; /* Marge en bas */
}

/* Icônes SVG dans contact */
.contact-item svg {
    color: var(--primary-color); /* Couleur violet */
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

/* Liens de contact */
.contact-item a {
    color: var(--text-dark); /* Couleur texte foncé */
    text-decoration: none; /* Pas de soulignement */
    font-size: 1.2rem; /* Taille moyenne */
    font-weight: 500; /* Semi-gras */
    transition: color 0.3s; /* Animation sur changement de couleur */
}

/* Lien au survol */
.contact-item a:hover {
    color: var(--primary-color); /* Change vers violet */
}

/* Texte de certification */
.contact-certification {
    margin-top: 2.2rem; /* Marge en haut */
    padding-top: 1.6rem; /* Padding en haut */
    border-top: 2px solid rgba(43, 9, 52, 0.1); /* Bordure en haut */
    font-size: 1.05rem; /* Taille */
    color: var(--primary-light); /* Couleur violet clair */
    font-style: italic; /* Italique */
}

/* Texte de disponibilité */
.contact-note {
    margin-top: 0.6rem; /* Marge en haut */
    padding-top: 0; /* Pas de padding */
    font-size: 1.05rem; /* Taille */
    color: var(--primary-light); /* Couleur violet clair */
    font-style: italic; /* Italique */
}


/* ========================================
   10. FOOTER
   ======================================== */

/* Pied de page */
footer {
    background: var(--primary-dark); /* Fond violet très foncé */
    color: var(--text-light); /* Texte blanc */
    text-align: center; /* Centré */
    padding: 2rem; /* Espacement interne */
}

/* Paragraphes dans le footer */
footer p {
    margin: 0.5rem 0; /* Marges haut et bas */
    opacity: 0.8; /* Légèrement transparent */
}


/* ========================================
   11. CURSEUR PERSONNALISÉ (DÉSACTIVÉ)
   ======================================== */

/* Curseur personnalisé circulaire doré */
.custom-cursor {
    width: 60px; /* Largeur */
    height: 60px; /* Hauteur */
    border: 2px solid #d4af37; /* Bordure dorée */
    border-radius: 50%; /* Forme circulaire */
    position: fixed; /* Fixé à l'écran */
    pointer-events: none; /* Ne bloque pas les clics */
    z-index: 9999; /* Au-dessus de tout */
    transition: all 0.2s ease; /* Animation fluide */
    transform: translate(-50%, -50%); /* Centre sur le curseur */
    opacity: 0 !important; /* DÉSACTIVÉ - Retire le !important pour réactiver */
}

/* Curseur visible */
.custom-cursor.cursor-visible {
    opacity: 1; /* Opaque */
}


/* ========================================
   12. RESPONSIVE MOBILE (max-width: 768px)
   Adapte le site pour smartphones et tablettes
   ======================================== */

@media (max-width: 768px) {

    /* HEADER MOBILE */
    .top-bar-inner {
        flex-direction: row; /* Garde l'alignement horizontal */
        justify-content: space-between; /* Logo à gauche, bouton à droite */
        align-items: center; /* Centre verticalement */
        padding: 0.6rem 1rem; /* Padding réduit */
        min-height: 50px; /* Hauteur réduite */
    }

    .brand {
        align-self: center;
    }

    .brand-logo {
        height: 34px; /* Légèrement réduit sur mobile */
    }

    .top-actions .cta {
        padding: 0.3rem 0.6rem; /* Padding réduit */
        font-size: 0.85rem; /* Taille réduite */
    }

    /* NAVIGATION MOBILE */
    .main-nav {
        top: 50px; /* Ajusté à la nouvelle hauteur du top-bar */
    }

    .main-nav .nav-menu {
        display: flex; /* Garde flexbox */
        justify-content: center; /* Centre les liens */
        gap: 0.8rem; /* Espacement réduit */
        padding: 0.6rem 0.5rem; /* Padding réduit */
        flex-wrap: nowrap; /* Reste sur une ligne */
    }

    .main-nav a {
        font-size: 0.85rem; /* Taille réduite */
        white-space: nowrap; /* Empêche le retour à la ligne */
    }

    /* HERO MOBILE */
    .hero {
        padding-top: 8rem; /* Padding réduit */
    }

    .hero-brand {
        font-size: 2.5rem; /* Taille réduite */
        margin: 0 0 0.2rem 0; /* Marge réduite */
        line-height: 0.85; /* Conserve la hauteur de ligne */
    }

    .hero-brand-bottom {
        font-size: 2.5rem; /* Taille réduite */
        margin: 0.2rem 0 0.5rem 0; /* Marge réduite */
        line-height: 0.85; /* Conserve la hauteur de ligne */
    }

    .hero-baseline {
        font-size: 1.3rem; /* Taille réduite */
        margin: 0; /* Pas de marge */
        z-index: 2; /* Au-dessus */
        position: relative; /* Contexte de positionnement */
    }

    .hero-subtitle {
        font-size: 1rem; /* Taille réduite */
    }

    /* PRÉSENTATION MOBILE */
    .content-grid,
    .content-grid-reverse {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 1.5rem; /* Espacement réduit */
    }

    .text-content h2 {
        font-size: 1.8rem; /* Taille réduite */
        margin-bottom: 1rem; /* Marge réduite */
        text-align: center; /* Centré */
        order: 0; /* Ordre d'affichage */
    }

    .text-content {
        order: 2; /* Texte après la photo */
    }

    .text-content h3 {
        font-size: 1.3rem; /* Taille réduite */
    }

    /* Photos mobiles : plus sticky, position normale */
    .image-content {
        position: static; /* Pas sticky sur mobile */
        order: 1; /* Photo avant le texte */
        text-align: center; /* Centrée */
        margin-bottom: 1.5rem; /* Marge en bas */
    }

    .image-content img {
        width: 100%; /* Prend toute la largeur */
        max-width: 100%; /* Pas de limite */
        margin: 0 auto; /* Centre */
    }

    .image-content-left {
        position: static; /* Pas sticky sur mobile */
        min-height: 250px; /* Hauteur minimale */
        order: 1; /* Ordre d'affichage */
    }

    /* DOMAINES MOBILE */
    .domains-grid {
        grid-template-columns: 1fr; /* Une seule colonne */
    }

    .domain-card p {
        font-size: 1.05rem; /* Taille du texte augmentée */
    }

    /* DISPONIBILITÉ MOBILE */
    .availability-box h2 {
        font-size: 1.5rem; /* Taille réduite */
    }

    .availability-box p {
        font-size: 1rem; /* Taille réduite */
    }

    /* CONTACT MOBILE */
    #contact h2 {
        font-size: 1.8rem; /* Taille réduite */
        margin-bottom: 0.75rem; /* Marge réduite */
    }

    /* Padding latéral réduit pour la carte contact en mobile */
    #contact .container {
        padding: 3rem 0.5rem; /* Padding réduit sur les côtés */
    }

    .contact-card {
        padding: 2rem 0.8rem; /* Padding latéral très réduit */
    }

    .contact-card h3 {
        font-size: 1.5rem; /* Taille réduite */
        margin-bottom: 1.5rem; /* Marge conservée */
        line-height: 1.2; /* Hauteur de ligne */
    }

    .contact-item {
        margin-bottom: 1.2rem; /* Marge réduite */
    }

    .contact-item a {
        font-size: 1.05rem; /* Taille harmonisée */
    }

    /* Email plus petit pour tenir sur une ligne */
    .contact-item a[href^="mailto"] {
        font-size: 0.8rem; /* Taille réduite pour l'email */
    }

    .contact-note {
        font-size: 0.95rem; /* Taille réduite */
        margin-top: 0.5rem; /* Marge réduite */
        padding-top: 0.5rem; /* Padding réduit */
    }

    /* CONTAINER GÉNÉRAL MOBILE */
    .container {
        padding: 3rem 1.5rem; /* Padding réduit */
    }
}

/* ========================================
   FIN DU FICHIER CSS
   ======================================== */