/**
Theme Name: City Scan
Author: Agence Cybélia
Author URI: http://wpastra.com/about/
Description: Thème sur mesure City Scan
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: city-scan
Template: astra
*/
h2, .entry-content :where(h2) {font-size: 32px;}
@media (max-width: 544px) {
    h1, .entry-content :where(h1) {

        font-size: 34px;
    }
}

h2.widget-title {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}
/* =========================================
   REDÉFINITION DU GRAS (ROBOTO)
   ========================================= */

/* On cible les balises strong et b uniquement dans les paragraphes */
p strong, 
p b,
.uagb-ifb-desc strong { /* Pour les Info Box Spectra */
    font-weight: 600 !important; /* Mets 500 (Medium) ou 600 (Semi-Bold) */
    color: inherit; /* Garde la couleur du texte */
}
/* ==========================================================================
   1. HEADER (ENTÊTE TRANSPARENT & LOGO)
   ========================================================================== */

/* Image de fond du Header */
.ast-theme-transparent-header .main-header-bar, 
.ast-header-break-point #ast-mobile-header {
    background-image: url('https://city-scan.fr/wp-content/uploads/2025/12/fond-header.webp');
    background-size: cover;
    background-position: center;
}

/* Positionnement du Logo (Desktop) */
.ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo .astra-logo-svg {
    margin-left: 60px;
}

/* Nettoyage padding identité site */
.ast-site-identity {
    padding: 0;
}

/* --- RESPONSIVE HEADER --- */

/* Tablette & Mobile (< 921px) */
@media (max-width: 921px) {
    /* On décale l'image de fond pour voir le dégradé */
    .ast-theme-transparent-header .main-header-bar, 
    .ast-header-break-point #ast-mobile-header {
        background-position: 25% top !important; 
    }
}

/* Petit Mobile (< 543px) */
@media (max-width: 543px) {
    /* On annule la marge du logo sur smartphone */
    .ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo .astra-logo-svg {
        margin-left: 0px;
    }
}


/* ==========================================================================
   HERO CITYSCAN
   Structure : Image fond + Formes bleues + Titre + 2 CTA
   ========================================================================== */

/* ====================================
   1. CONTENEUR PRINCIPAL HERO
   ==================================== */



/* 2. IMAGE DE FOND CONTAINER */
.hero-cityscan .uagb-container-inner-blocks-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Si bloc Image en arrière-plan via Spectra */
.hero-cityscan {
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
}

/* ====================================
   3. OVERLAY FORME DÉCORATIVE BLEUE (gauche)
   ==================================== */



/* Forme décorative en haut à gauche (ondes) */
.hero-cityscan::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 472px;
    height: 1180px;
    background-image: url('https://city-scan.fr/wp-content/uploads/2025/12/ondes-left-2.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: 0;
    
    pointer-events: none;
}

/* ====================================
   4. CONTENU (Titre + CTA)
   ==================================== */

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 60px 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: center;
}

/* Force l'alignement à gauche pour Spectra */
.hero-content .uagb-container-inner-blocks-wrap {
    align-items: flex-start !important;
    text-align: left !important;
}

/* ====================================
   5. TITRE PRINCIPAL
   ==================================== */

.hero-title {
    color: #003366;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 60px;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 600px;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
    text-align: left !important;
    align-self: flex-start !important;
}

/* ====================================
   6. CONTENEUR DES 2 CTA
   ==================================== */

.hero-cta-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 700px;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
}

/* Force l'alignement pour le container Spectra */
.hero-cta-wrapper .uagb-container-inner-blocks-wrap {
    justify-content: flex-start !important;
}


/* ====================================
   7. BLOC CTA INDIVIDUEL
   ==================================== */

.hero-cta-block {
    background: rgba(0, 51, 102, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 0px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Hover effect */
.hero-cta-block:hover {
    background: rgba(0, 51, 102, 1);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.4);
}

/* Version claire pour le second bloc */
.hero-cta-block.cta-light {
    background: rgba(91, 188, 228, 0.9);
}

.hero-cta-block.cta-light:hover {
    background: rgba(91, 188, 228, 1);
}

/* ====================================
   8. CONTENU DU CTA
   ==================================== */

/* Titre du CTA */
.cta-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Icône flèche */
.cta-title svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 2.5;
}

/* Sous-titre */
.cta-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Bouton/Logo */
.cta-button {
    display: inline-block;
    background: #ffffff;
    padding: 12px 25px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.cta-button img {
    height: 24px;
    width: auto;
    display: block;
}

.hero-cta-block:hover .cta-button {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

/* Version texte pour le second bloc */
.cta-button-text {
    background: #ffffff;
    color: #5dbce4;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ====================================
   9. RESPONSIVE DESKTOP LARGE
   ==================================== */

@media (min-width: 1400px) {
    .hero-cityscan {
        min-height: 700px;
    }
    
    .hero-title {
        font-size: 64px;
        max-width: 700px;
    }
    
    .hero-cta-wrapper {
        max-width: 800px;
    }
}

/* ====================================
   10. RESPONSIVE TABLETTE
   ==================================== */

@media (max-width: 1024px) {
    .hero-cityscan {
        min-height: 500px;
        height: 60vh;
		background-position: 55% 38% !important;
    }
    
    
    .hero-content {
        padding: 40px 30px;
    }
    
    .hero-title {
        font-size: 44px;
        margin-bottom: 50px;
		z-index: 10 !important;
    }
    
    .hero-cta-wrapper {
        max-width: 600px;
        gap: 20px;
		z-index: 10 !important;
    }
    
    .hero-cta-block {
        padding: 25px 20px;
    }
    
    .cta-title {
        font-size: 18px;
    }
	/* Forme décorative en haut à gauche (ondes) */
.hero-cityscan::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 472px;
    height: 1180px;
    background-image: url('https://city-scan.fr/wp-content/uploads/2025/12/ondes-left-2.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: 0;
    
    pointer-events: none;
}
}

/* ====================================
   11. RESPONSIVE MOBILE
   ==================================== */

@media (max-width: 768px) {
    .hero-cityscan {
        min-height: auto;
        height: auto;
        padding-bottom: 40px !important;
    }
    
    
    /* Forme déco plus petite et discrète */
    .hero-cityscan::after {
        width: 300px;
        height: 300px;
        opacity: 0.2;
    }
    
    .hero-content {
        padding: 40px 20px;
    }
    
    /* Titre */
    .hero-title {
        font-size: 32px;
        margin-bottom: 40px;
        max-width: 100%;
    }
    
    /* CTA en colonne sur mobile */
    .hero-cta-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
    }
    
    .hero-cta-block {
        padding: 25px 20px;
    }
    
    .cta-title {
        font-size: 18px;
    }
    
    .cta-subtitle {
        font-size: 13px;
    }
	/* Forme décorative en haut à gauche (ondes) */
.hero-cityscan::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 320px;
    background-image: url('https://city-scan.fr/wp-content/uploads/2025/12/ondes-left-2.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: 0;
    
    pointer-events: none;
}
}

/* ====================================
   12. MOBILE PETIT
   ==================================== */

@media (max-width: 480px) {
    .hero-cityscan {
        background-position: 70% center !important;
    }
    
    .hero-cityscan::after {
        width: 200px;
        height: 200px;
        top: -30px;
        left: -30px;
    }
    
    .hero-content {
        padding: 30px 15px;
    }
    
    .hero-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .hero-cta-wrapper {
        gap: 15px;
    }
    
    .hero-cta-block {
        padding: 20px 15px;
    }
    
    .cta-title {
        font-size: 16px;
    }
    
    .cta-subtitle {
        font-size: 12px;
        margin-bottom: 15px;
    }
    
    .cta-button,
    .cta-button-text {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ====================================
   13. ACCESSIBILITÉ
   ==================================== */

/* Focus visible */
.hero-cta-block:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Amélioration performance scroll */
.hero-cityscan {
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

/* Anti-aliasing texte */
.hero-title,
.cta-title,
.cta-subtitle {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* ====================================
   MENU HEADER TRANSPARENT
   ==================================== */

/* 1. Le Bloc Bleu (Le fond du texte) */
.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link {
    background-color: #6BC8ED; /* bleu ciel spécifique */
    color: #ffffff !important; /* Texte blanc */
	font-size: 14px; 
    text-transform: uppercase; /* Force les majuscules */
	font-weight: 500 !important; /* Medium */
    /* HAUTEUR & TAILLE DU BLOC */
    line-height: 1 !important; /* CRUCIAL : Écrase la hauteur de ligne par défaut d'Astra */
    padding: 8px 12px !important; /* gères la "grosseur" du rectangle */
    display: inline-block; /* Force le bloc à respecter les marges */
    
    /* ESPACEMENT ENTRE LES BLOCS */
    margin: 0 5px !important; /* Ajoute 5px à gauche et à droite de chaque bloc */
    
    border-radius: 0px; 
    font-weight: 600; 
    position: relative;
}

/* LE TRAIT (État initial : largeur 0) */
.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #6BC8ED;
    bottom: -6px;
    
    /* L'ANIMATION */
    transform: scaleX(0); /* Invisible (largeur 0) */
    transform-origin: center; /* Grandit depuis le milieu */
    transition: transform 0.3s ease; /* Vitesse fluide */
}

/* L'APPARITION (État survolé/actif : largeur 100%) */
.ast-theme-transparent-header .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-theme-transparent-header .main-header-menu > .current-menu-item > .menu-link::after,
.ast-theme-transparent-header .main-header-menu > .current-menu-ancestor > .menu-link::after {
    transform: scaleX(1); /* Devient visible */
}

/* 4. Apparition du Trait pour la Page Active */
.ast-theme-transparent-header .main-header-menu > .current-menu-item > .menu-link::after,
.ast-theme-transparent-header .main-header-menu > .current-menu-ancestor > .menu-link::after {
    opacity: 1; /* Reste visible */
}

/* =========================================
   FIX MENU SUR LAPTOP (Évite le passage à la ligne)
   ========================================= */

@media (min-width: 922px) and (max-width: 1380px) {

    /* 1. ON RÉDUIT LA MARGE DU LOGO */
    /* On passe de 60px à 20px pour gagner de la place à gauche */
    .ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo .astra-logo-svg {
        margin-left: 20px !important; 
        max-width: 140px !important; /* On réduit un peu le logo */
    }

    /* 2. ON COMPACTE LES BLOCS DU MENU */
    .ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link {
        padding: 12px 12px !important; /* Moins d'espace interne (était 12px 20px) */
        margin: 0 3px !important; /* On colle presque les blocs */
        font-size: 12px !important; /* On réduit un peu la police (était 13/14px) */
    }

    /* 3. ON COMPACTE LES BOUTONS CTA À DROITE */
    .cs-wrapper {
        width: 210px !important; /* On réduit la largeur (était 260px) */
        margin-right: -10px !important; /* On colle un peu plus au bord */
    }
    
    /* On réduit le texte des boutons */
    .cs-label {
        font-size: 11px !important;
    }
    
    /* On cache la flèche pour gagner de la place critique */
    .cs-arrow-img, svg.cs-arrow-svg {
        display: none !important;
    }
    
    /* On réduit l'écart icône */
    .cs-right-side, .cs-icons-group {
        gap: 5px !important;
    }
}

/* =========================================
   SOUS-MENUS : FINAL & ROBUSTE (PONT INTÉGRÉ)
   ========================================= */

/* 1. LE CONTENEUR (La boîte du sous-menu) */
.ast-theme-transparent-header .main-header-menu .sub-menu {
    /* --- LA STRATÉGIE DU PONT --- */
    /* Au lieu de margin-top, on utilise padding-top */
    margin-top: 0 !important; 
    padding-top: 15px !important; /* C'est ça qui crée l'espace visuel vide */
    
    /* On rend le fond du conteneur transparent pour que le padding soit invisible */
    background-color: transparent !important;
    box-shadow: none !important; /* On enlève l'ombre du conteneur global */
    border: none !important;
    border-radius: 0px !important;
    
    width: 240px !important;
    
    /* Affichage instantané */
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
}

/* Apparition au survol */
.ast-theme-transparent-header .main-header-menu .menu-item:hover .sub-menu {
    display: block !important;
}

/* 2. LE VRAI FOND COLORÉ (On l'applique aux liens pour simuler la carte) */
/* Comme le conteneur est transparent, on doit colorer l'intérieur */

/* On cible le premier élément pour faire le haut de la boîte */
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item:first-child {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    
    /* On remet l'ombre sur le premier élément pour simuler le haut de la carte */
    box-shadow: 0 -5px 20px rgba(0, 51, 102, 0.15) !important; 
}

/* On cible le dernier élément pour faire le bas de la boîte */
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item:last-child {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.15) !important;
}

/* On colore tous les items pour recréer le bloc bleu */
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item {
    background-color: #6BC8ED !important; /* Bleu Ciel */
    width: 100% !important;
    margin: 0 !important;
}

/* 3. LES LIENS (Contenu) */
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item .menu-link {
    background-color: transparent !important;
    color: #ffffff !important;
    
    font-family: 'NeoSansPro', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    
    display: block !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    line-height: 1.4 !important;
    border-radius: 0px !important; /* CARRÉ */
    
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

/* Enlever le trait du dernier */
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item:last-child .menu-link {
    border-bottom: none !important;
}

/* 4. SURVOL (Hover sur les éléments de liste) */
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item:hover > .menu-link {
    background-color: #003366 !important; /* Bleu Foncé */
    color: #ffffff !important;
}

/* 5. GESTION DU TRAIT (SOULIGNEMENT PARENT) */

/* A. On affiche le trait par défaut (pour Contact, etc.) */
/* (C'est le code que tu as déjà, je ne le remets pas, je mets juste l'exception ci-dessous) */

/* B. EXCEPTION : On CACHE le trait pour les parents qui ont un sous-menu */
.ast-theme-transparent-header .main-header-menu .menu-item-has-children > .menu-link::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
}

/* Optionnel : Garder quand même une couleur de fond au survol du parent avec sous-menu */
.ast-theme-transparent-header .main-header-menu .menu-item-has-children:hover > .menu-link {
    background-color: #0e5d9e; /* Bleu foncé au survol du bouton principal */
}
/* =========================================
   CORRECTIF MENU MOBILE (PLEINE LARGEUR)
   ========================================= */

@media (max-width: 921px) {

    /* 1. RÉINITIALISER LES LIENS (Arrêter le style "Bouton détaché") */
    .ast-header-break-point .main-header-menu .menu-item .menu-link {
        display: block !important; /* Prend toute la largeur */
        width: 100% !important;
        margin: 0 !important; /* Enlève la marge blanche de 5px */
        border-radius: 0 !important; /* Carré */
        border: none !important;
        
        /* On remet un padding confortable pour le doigt */
        padding: 15px 20px !important;
    }

    /* 2. GESTION DES SOUS-MENUS (Supprimer le décalage blanc) */
    .ast-header-break-point .main-header-menu .sub-menu {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        background-color: transparent !important; /* Laisse le parent gérer ou redéfinit */
        box-shadow: none !important;
    }

    .ast-header-break-point .main-header-menu .sub-menu .menu-item .menu-link {
        /* INDENTATION VISUELLE INTERNE */
        /* Au lieu de décaler le bloc (ce qui crée du blanc), on décale le texte dedans */
        padding-left: 40px !important; 
        
        /* On s'assure que le fond reste bleu */
        background-color: #6BC8ED !important; /* Bleu Ciel */
        border-bottom: 1px solid rgba(255,255,255,0.2) !important; /* Séparateur */
    }

    /* 3. COULEURS SPÉCIFIQUES MOBILE */
    /* Menu Principal */
    .ast-header-break-point .main-header-menu > .menu-item > .menu-link {
        background-color: #6BC8ED !important; /* Bleu Ciel */
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }

    /* Enlever le trait blanc animé (inutile sur mobile) */
    .ast-header-break-point .main-header-menu .menu-item .menu-link::after {
        display: none !important;
    }
	/* 4. INTERACTION MOBILE (HOVER & ACTIF) */
    
    /* Au survol (ou au tap du doigt) sur les liens */
    .ast-header-break-point .main-header-menu .menu-item .menu-link:hover,
    .ast-header-break-point .main-header-menu .menu-item .menu-link:active {
        background-color: #003366 !important; /* Bleu Foncé */
        color: #ffffff !important;
    }

    /* Pour garder la page en cours allumée en bleu foncé */
    .ast-header-break-point .main-header-menu .current-menu-item > .menu-link,
    .ast-header-break-point .main-header-menu .current-menu-ancestor > .menu-link {
        background-color: #003366 !important;
    }
}

/* =========================================
FIX MENU MOBILE (SCROLL & BOUTONS)
========================================= */
@media (max-width: 921px) {
code
Code
/* 1. ON LIBÈRE LES BOUTONS (Reset de la position absolue) */
.cs-wrapper {
    position: relative !important; /* Redevient un bloc normal qui coule */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    
    /* On les centre et on met de l'espace */
    margin: 20px auto 40px auto !important; 
    
    /* On s'assure qu'ils gardent leur taille */
    width: 260px !important;
    height: 105px !important;
    
    /* Z-index normal pour ne pas passer au dessus du menu */
    z-index: 1 !important; 
}

/* 2. ON FORCE LE SCROLL DU MENU (Si ça dépasse l'écran) */
/* Cela permet de scroller si le menu ouvert est plus grand que le téléphone */
.ast-mobile-popup-content, 
.ast-mobile-header-content {
    overflow-y: auto !important; /* Scroll vertical autorisé */
    max-height: 85vh !important; /* Sécurité pour voir le bas */
    padding-bottom: 50px !important; /* Espace en bas pour scroller confortablement */
}
}

/* ====================================
BOUTONS HEADER CTA
   ==================================== */

/* 1. FORCER L'ÉLÉMENT HTML À DROITE */
.ast-header-html-1,
.ast-builder-html-element {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* 2. WRAPPER - IMPORTANT: display block pour voir les 2 boutons */
.cs-wrapper {
    display: block !important; /* Changé de flex à block */
    width: 200px !important;
    height: 100px !important; /* Hauteur fixe */
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Supprimer VRAIMENT tous les éléments parasites */
.cs-wrapper p,
.cs-wrapper br,
.cs-wrapper > span:not(.cs-item):not(a) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. CHAQUE BOUTON = 50px de hauteur exacte */
a.cs-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    width: 200px !important;
    height: 50px !important; /* HAUTEUR FIXE */
    
    padding: 0 15px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
    
    /* Forcer l'affichage */
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* Premier bouton en haut */
a.cs-item:first-of-type {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Deuxième bouton en bas */
a.cs-item:last-of-type {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* 4. LE TEXTE */
.cs-label {
    color: #ffffff !important;
    font-family: 'NeoSansPro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

/* 5. GROUPE ICÔNES */
.cs-icons-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    height: 18px !important;
}

/* 6. IMAGES */
img.cs-picto-main {
    height: 18px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

img.cs-lock-fix {
    height: 16px !important;
}

/* 7. FLÈCHE SVG - DÉBUGAGE COMPLET */
svg.cs-arrow-svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* Forcer ABSOLUMENT le stroke blanc */
svg.cs-arrow-svg,
svg.cs-arrow-svg * {
    stroke: #ffffff !important;
    fill: none !important;
}

svg.cs-arrow-svg path,
svg.cs-arrow-svg line {
    stroke: #ffffff !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
    opacity: 1 !important;
}

/* 8. COULEURS */
.cs-dark {
    background-color: #003366 !important;
    z-index: 10 !important;
}

.cs-dark:hover {
    background-color: #002244 !important;
}

.cs-light {
    background-color: #5dbce4 !important;
    z-index: 10 !important;
}

.cs-light:hover {
    background-color: #4aa8d0 !important;
}

/* 9. CORRECTION ASTRA HEADER */
@media (min-width: 922px) {
    .site-header-primary-section-right .ast-builder-html-element {
        padding: 0 !important;
        margin-left: auto !important;
    }
    
    .main-header-bar-wrap .ast-container {
        padding-right: 0 !important;
    }
    
    /* S'assurer que le header a la bonne hauteur */
    .main-header-bar {
        min-height: 100px !important;
    }
}
img.cs-arrow-img {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
}
/* ====================================
   GALERIE EXAMENS - VERSION OPTIMISÉE
   Desktop + Mobile Pro UI/UX
==================================== */

/* ====================================
   DESKTOP (Écrans > 768px)
   ==================================== */

@media (min-width: 769px) {
    /* 1. LE CONTENEUR (CERCLE PARFAIT) */
    .galerie-examens .spectra-image-gallery__media-wrapper {
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        position: relative !important;
        cursor: pointer;
        transform: translateZ(0);
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
        box-shadow: 0 4px 15px rgba(0, 51, 102, 0.15) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 8px 25px rgba(0, 51, 102, 0.25) !important;
    }

    /* 2. L'IMAGE (NOIR & BLANC PAR DÉFAUT) */
    .galerie-examens .spectra-image-gallery__media-thumbnail {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        filter: grayscale(100%) !important;
        transition: filter 0.5s ease, transform 0.5s ease !important;
    }

    /* Image en couleur au hover */
    .galerie-examens .spectra-image-gallery__media-wrapper:hover .spectra-image-gallery__media-thumbnail {
        filter: grayscale(0%) !important;
        transform: scale(1.05) !important;
    }

    /* 3. LA LÉGENDE (Agrandie pour accepter 2 lignes) */
    .galerie-examens .spectra-image-gallery__media-thumbnail-caption-wrapper {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        
        /* MODIFICATION : On passe de 35% à 42% pour loger le texte sur 2 lignes */
        height: 42% !important; 
        
        background: #4b98d3 !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important; /* Centre verticalement */
        justify-content: center !important;
        
        /* Ajustement du padding pour bien centrer */
        padding: 5px 10px 10px 10px !important; 
        
        transition: background 0.3s ease, height 0.3s ease !important;
    }

    /* Hover : On agrandit encore un peu */
    .galerie-examens .spectra-image-gallery__media-wrapper:hover .spectra-image-gallery__media-thumbnail-caption-wrapper {
        background: #003366 !important;
        height: 45% !important; /* Légèrement plus haut au survol */
    }

    /* 4. LE TEXTE (Optimisé pour mots longs) */
    .galerie-examens .spectra-image-gallery__media-thumbnail-caption {
        color: #ffffff !important;
        font-family: 'NeoSansPro', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        
        /* MODIFICATION : On réduit légèrement pour le 1280px */
        font-size: 12.5px !important; 
        line-height: 1.1 !important;
        
        text-align: center !important;
        margin: 0 !important;
        
        /* On supprime le translateY négatif qui faisait remonter le texte sur l'image */
        transform: translateY(0) !important; 
        
        /* Sécurité mots longs */
        overflow-wrap: break-word !important; 
        hyphens: auto !important;
    }
}

/* ====================================
   LAYOUT 6/5 CENTRÉ (Transformation Flexbox)
   ==================================== */

@media (min-width: 1025px) {
    
    /* 1. On casse la Grille Spectra pour passer en Flexbox */
    .galerie-examens .spectra-image-gallery {
        display: flex !important;
        flex-wrap: wrap !important; /* Permet le retour à la ligne */
        justify-content: center !important; /* CENTRE les éléments orphelins (la ligne de 5) */
        gap: 20px !important; /* Espace entre les bulles */
    }

    /* 2. On recalcule la largeur des bulles */
    .galerie-examens .spectra-image-gallery__media-wrapper {
        /* MATHÉMATIQUES : 100% divisé par 6, moins l'espace du gap */
        width: calc(16.666% - 20px) !important;
        
        /* On enlève les limites précédentes pour que ça s'étale bien */
        max-width: none !important; 
        margin: 0 !important;
    }
}

/* ====================================
   CORRECTIF LAPTOP (1024px à 1366px)
   ==================================== */
@media (min-width: 1024px) and (max-width: 1366px) {
    
    /* Ajustement Ostéodensitométrie (Image 7) */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(7) img {
        object-position: 40% center !important; /* On décale un peu pour recentrer */
    }

    /* Ajustement Panoramique (Image 10) */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(10) img {
        object-position: 80% 40% !important; /* Ajuste si la tête est coupée */
        transform: scale(1.2) !important; /* On zoome un peu plus car le rond est petit */
    }

    /* Ajustement Scanner (Image 4) */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(4) img {
        object-position: 90% center !important; 
    }
    
}

/* ====================================
   MOBILE (Écrans ≤ 768px)
   UI/UX OPTIMISÉ
   ==================================== */

@media (max-width: 768px) {
    /* Section titre */
    .galerie-examens-title,
    .wp-block-heading {
        font-size: 32px !important;
        margin-bottom: 30px !important;
        padding: 0 20px !important;
    }

    /* Conteneur galerie : 2 colonnes avec espacement confortable */
    .galerie-examens .spectra-image-gallery__layout--grid,
    .galerie-examens .wp-block-gallery {
        padding: 20px 15px !important;
        gap: 25px !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 1. CERCLES PLUS GRANDS ET MIEUX ESPACÉS */
    .galerie-examens .spectra-image-gallery__media-wrapper {
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important; /* Utilise tout l'espace disponible */
        margin: 0 auto !important;
        
        /* Ombre douce pour la profondeur */
        box-shadow: 0 3px 12px rgba(0, 51, 102, 0.2) !important;
        
        /* Zone tactile confortable (minimum 44x44px recommandé Apple/Material) */
        min-width: 140px !important;
        min-height: 140px !important;
        
        /* Animation tactile */
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        cursor: pointer;
        
        /* Fix Safari mobile */
        -webkit-tap-highlight-color: transparent !important;
        transform: translateZ(0) !important;
    }

    /* Feedback tactile au tap */
    .galerie-examens .spectra-image-gallery__media-wrapper:active {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 8px rgba(0, 51, 102, 0.3) !important;
    }
 /* 2. IMAGE : TOUJOURS EN COULEUR SUR MOBILE */
    .galerie-examens .spectra-image-gallery__media-thumbnail {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        
        /* PAS de noir et blanc sur mobile - plus lisible */
        filter: grayscale(0%) !important;
        
   
        /* Légère optimisation performance */
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }

    /* 3. LÉGENDE : PLUS VISIBLE ET LISIBLE */
    .galerie-examens .spectra-image-gallery__media-thumbnail-caption-wrapper {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        
        /* Hauteur adaptée pour la lisibilité */
        height: 40% !important;
        
        /* Fond bleu avec légère transparence pour voir l'image */
        background: #4b98d3 !important;
        opacity: 1 !important;
        
        /* Centrage du texte */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px 12px 12px !important;
        
        /* Pas d'animation sur mobile pour la performance */
        transition: none !important;
    }

    /* 4. TEXTE : TAILLE CONFORTABLE À LIRE */
    .galerie-examens .spectra-image-gallery__media-thumbnail-caption {
        color: #ffffff !important;
        font-family: 'NeoSansPro', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        
        /* Taille de police optimale pour mobile */
        font-size: 12px !important;
        line-height: 1.15 !important;
        letter-spacing: 0.2px !important;
        
        text-align: center !important;
        margin: 0 !important;
        padding: 0 0px !important;
        
        /* Améliore la lisibilité */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        
        /* Ajustement vertical */
        transform: translateY(-3px) !important;
        
        /* Gestion du texte long - IMPORTANT */
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: manual !important;
        -webkit-hyphens: manual !important;
        
        /* Limite à 3 lignes maximum */
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 5. ESPACEMENT VERTICAL ENTRE LES LIGNES */
    .galerie-examens .spectra-image-gallery__layout--grid {
        row-gap: 30px !important;
    }
}

/* ====================================
   TRÈS PETIT MOBILE (< 400px)
   ==================================== */

@media (max-width: 412px) {
    /* Padding réduit sur petits écrans */
    .galerie-examens .spectra-image-gallery__layout--grid {
        padding: 15px 10px !important;
        gap: 20px !important;
        row-gap: 25px !important;
    }

    /* Cercles légèrement plus petits mais toujours tactiles */
    .galerie-examens .spectra-image-gallery__media-wrapper {
        min-width: 120px !important;
        min-height: 120px !important;
    }

    /* Texte légèrement réduit */
    .galerie-examens .spectra-image-gallery__media-thumbnail-caption {
        font-size: 12px !important;
        line-height: 1.15 !important;
		
		/* 1. ACTIVATION DES TIRETS (Césure) */
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        hyphens: auto !important;
        
        /* 2. SÉCURITÉ MOTS LONGS */
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        
        /* 3. AJUSTEMENT TAILLE */
        font-size: 11px !important; /* Un poil plus petit pour aider */
        line-height: 1.1 !important;
        padding: 0 2px !important; /* Optimise l'espace latéral */
    }
    
    /* Rappel : Ajustement global de la grille */
    .galerie-examens .spectra-image-gallery__layout--grid {
        padding: 15px 5px !important; /* On gagne de la place sur les côtés */
        gap: 15px !important;
    }

    /* Titre */
    .galerie-examens-title,
    .wp-block-heading {
        font-size: 28px !important;
        margin-bottom: 25px !important;
    }
	
}

/* ====================================
   CENTRAGE 11ème BULLE (Tablette & Mobile)
   ==================================== */

/* On cible tout ce qui est plus petit que le PC (< 1024px) */
@media (max-width: 1024px) {
    
    /* Cible le 11ème élément (Télécrâne) */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(11) {
        /* MAGIE : On lui dit d'occuper toutes les colonnes disponibles (de la 1ère à la dernière) */
        grid-column: 1 / -1 !important; 
        
        /* On le centre physiquement */
        margin: 0 auto !important;
		
		/* Sécurité pour qu'elle ne soit jamais plus grosse que les autres */
        max-width: 160px !important; 
    }
    
    /* (Optionnel) Assure-toi que le cadrage de l'image est bon sur mobile aussi */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(11) img {
        object-position: 50% 20% !important; /* Ajuste si besoin */
    }
}

/* ====================================
   CADRAGES SPÉCIFIQUES PAR IMAGE
   Desktop et Mobile différenciés
   ==================================== */

/* DESKTOP */
@media (min-width: 769px) {
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(1) img {
        object-position: 40% -40px !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(2) img {
        object-position: 0% -40px !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(3) img {
        object-position: 55% -56px !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(4) img {
        object-position: 100% 10px !important;
        transform: scale(1.2) !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(5) img {
        object-position: 50% -20px !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(6) img {
        object-position: 40% -35px !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(8) img {
        object-position: 50% -12px !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(9) img {
        object-position: 60% -56px !important;
    }

    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(10) img {
        object-position: 90% -55px !important;
    }
}

/* MOBILE - Cadrages optimisés */
@media (max-width: 768px) {
    /* Image 1 - RADIOLOGIE CONVENTIONNELLE : mieux centrer */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(1) img {
        object-position: 50% -25px !important;
        transform: scale(1.1) !important;
    }

    /* Image 2 - ÉCHOGRAPHIE */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(2) img {
        object-position: center -25px !important;
    }

    /* Image 3 - DOPPLER : recentrer */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(3) img {
        object-position: 50% -25px !important;
        transform: scale(1.15) !important;
    }

    /* Image 4 - SCANNER */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(4) img {
        object-position: 80% center !important;
        transform: scale(1.1) !important;
    }

    /* Image 5 - IRM */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(5) img {
        object-position: center -20px !important;
    }

    /* Image 6 - MAMMOGRAPHIE */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(6) img {
        object-position: 50% 35% !important;
    }

    /* Image 7 - OSTÉODENSITOMÉTRIE */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(7) img {
        object-position: center center !important;
    }

    /* Image 8 - CONE BEAM */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(8) img {
        object-position: center 45% !important;
    }

    /* Image 9 - EOS : mieux cadrer */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(9) img {
        object-position: center -25px !important;
        transform: scale(1.2) !important;
    }

    /* Image 10 - PANORAMIQUE DENTAIRE : recentrer */
    .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(10) img {
        object-position: 60% 40% !important;
        transform: scale(1.15) !important;
    }
}

/* ====================================
   ACCESSIBILITÉ & PERFORMANCE
   ==================================== */

/* Améliore la performance du scroll sur mobile */
.galerie-examens {
    -webkit-overflow-scrolling: touch !important;
    will-change: scroll-position !important;
}

/* Supprime le highlight bleu au tap sur iOS */
.galerie-examens a,
.galerie-examens .spectra-image-gallery__media-wrapper {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
}

/* Focus visible pour l'accessibilité (navigation clavier) */
.galerie-examens .spectra-image-gallery__media-wrapper:focus-visible {
    outline: 3px solid #4b98d3 !important;
    outline-offset: 3px !important;
}

/* ====================================
   GALERIE EXAMENS - ÉTAT ACTIF PAR PAGE
   À ajouter au CSS existant de la galerie
   ==================================== */

/* ====================================
   INSTRUCTIONS :
   1. Trouvez l'ID de chaque page d'examen dans WordPress (Pages → Toutes les pages)
   2. Remplacez les ID ci-dessous par vos vrais ID
   3. L'ordre correspond à l'ordre des images dans votre galerie
   ==================================== */

/* IMAGE 1 - RADIOLOGIE CONVENTIONNELLE */
/* Remplacer 588 par le vrai ID de votre page Radiologie */
body.page-id-588 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(1) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-588 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(1) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 2 - ÉCHOGRAPHIE */
body.page-id-1040 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(2) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1040 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(2) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 3 - DOPPLER */
body.page-id-1068 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(3) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1068 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(3) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 4 - SCANNER */
body.page-id-1087 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(4) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1087 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(4) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 5 - IRM */
body.page-id-1115 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(5) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1115 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(5) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 6 - MAMMOGRAPHIE */

body.page-id-1125 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(6) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1125 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(6) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 7 - OSTÉODENSITOMÉTRIE */

body.page-id-1135 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(7) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1135 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(7) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 8 - CONE BEAM */
body.page-id-1367 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(8) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1367 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(8) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 9 - EOS */
body.page-id-1143 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(9) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1143 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(9) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 10 - PANORAMIQUE DENTAIRE */
body.page-id-1155 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(10) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1155 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(10) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* IMAGE 11 - TELECRANE */
body.page-id-1164 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(11) .spectra-image-gallery__media-thumbnail-caption-wrapper {
    background: #003366 !important;
    height: 38% !important;
}

body.page-id-1164 .galerie-examens .spectra-image-gallery__media-wrapper:nth-child(11) .spectra-image-gallery__media-thumbnail {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* =========================================
   CARTE INTERACTIVE (CORRECTIF PIN STACKING)
   ========================================= */

/* 1. LE CONTENEUR (Le cadre de référence) */
.map-container-robust {
    position: relative !important; /* INDISPENSABLE : C'est le point 0,0 */
    width: 100% !important;
    max-width: 600px !important; /* Taille max de la carte */
    margin: 0 auto 30px auto !important; /* Centré + Marge en bas */
    display: block !important;
    line-height: 0 !important; /* Tue les espaces vides */
}

/* 2. L'IMAGE DE FOND */
.map-base-visual {
    width: 100% !important;
    height: auto !important;
    display: block !important;
	padding: 20px;
}

/* 3. LES PINS (Le correctif) */
.cs-pin {
    position: absolute !important; /* C'est ça qui manquait ou buggait */
    z-index: 10 !important;
    cursor: pointer;
    
    /* TAILLE DES PINS */
    width: 6% !important; /* Ajuste la taille ici (6% de la carte) */
    min-width: 30px !important;
    max-width: 50px !important;
    height: auto !important;
    
    /* ANCRAGE (Pointe en bas) */
    transform: translate(-50%, -100%) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* On force l'image du pin à remplir son div */
.cs-pin img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

/* 4. COORDONNÉES GPS (Ajuste les % pour placer tes villes) */

/* ROMORANTIN (Centre) */
.pin-romo { top: 42%; left: 47%; }

/* AUBAGNE (Sud-Est) */
.pin-aubagne { top: 83%; left: 74%; }

/* TRETS (Sud-Est décalé) */
.pin-trets { top: 80%; left: 68%; }

/* Suresnes (Sud-Est décalé) */
.pin-suresnes { top: 26%; left: 50%; }

/* Roquebillière (Sud-Est décalé) */
.pin-roque { top: 76%; left: 86.5%; }

/* =========================================
   TOOLTIP RICHE (Le Bouton Bleu au survol)
   ========================================= */
.cs-pin::after {
    content: "PRENDRE RDV";
    
    /* Positionnement */
    position: absolute;
    bottom: 100%; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    /* Style Boite */
    background-color: #003366;
    color: #fff;
    font-family: 'NeoSansPro', sans-serif;
    font-weight: 700; 
    font-size: 11px;
    white-space: nowrap;
    
    /* ESPACEMENT : 60px à droite pour caler les 2 icônes */
    padding: 20px 60px 20px 15px; 
    
    /* ICONES ENCODÉES (D + Flèche) */
    background-image: 
        url("https://city-scan.fr/wp-content/uploads/2025/12/doctolib-d-blanc.svg"),
        url("https://city-scan.fr/wp-content/uploads/2025/12/fleche-cs-btn.svg");
    background-repeat: no-repeat, no-repeat;
    /* Taille : D un peu plus gros (18px), Flèche (12px) */
    background-size: 18px auto, 12px 12px;
    
    /* POSITION : D à 35px de la droite | Flèche à 10px de la droite */
    background-position: right 35px center, right 10px center;
    
    /* Animation */
    opacity: 0; visibility: hidden; pointer-events: none;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    border-radius: 0px;
}

/* Le Triangle sous la bulle */
.cs-pin::before {
    content: ""; position: absolute;
    bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(16px);
    border-width: 6px; border-style: solid;
    border-color: #003366 transparent transparent transparent;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}

/* ACTIVATION (Hover ou via JS) */
.cs-pin:hover, .cs-pin.is-active {
    transform: translate(-50%, -110%) scale(1.2) !important;
    z-index: 100 !important;
}
.cs-pin:hover::after, .cs-pin.is-active::after,
.cs-pin:hover::before, .cs-pin.is-active::before {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}
/* =========================================
   INTERACTION COULEUR (LISTE & CARTE)
   ========================================= */

/* 1. CONFIGURATION DE BASE DU CONTAINER */
.bloc-interactif {
    transition: all 0.3s ease;
    cursor: pointer;
    /* Assure-toi que le bleu clair est défini ici ou dans Spectra, peu importe */
}

/* 2. L'ACTIVATION (Au survol souris OU via le JS .is-active) */
.bloc-interactif:hover, 
.bloc-interactif.is-active {
    background-color: #003366 !important; /* Le fond devient BLEU FONCÉ */
    transform: translateY(-5px); /* Petit saut visuel */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Ombre pour le relief */
}

/* 3. LE NETTOYAGE INTÉRIEUR */
/* On force l'Info Box à l'intérieur à devenir transparente pour voir le bleu foncé */
.bloc-interactif:hover .uagb-infobox,
.bloc-interactif.is-active .uagb-infobox,
.bloc-interactif:hover *, 
.bloc-interactif.is-active * {
    background-color: transparent !important; /* Rend l'enfant transparent */
    color: #ffffff !important; /* Rend tout le texte BLANC */
}

/* 4. SÉCURITÉ POUR LES TITRES ET LIENS */
/* Parfois les titres ont leur propre couleur forcée, on les écrase ici */
.bloc-interactif:hover h1, .bloc-interactif:hover h2, .bloc-interactif:hover h3, .bloc-interactif:hover h4, .bloc-interactif:hover p, .bloc-interactif:hover a,
.bloc-interactif.is-active h1, .bloc-interactif.is-active h2, .bloc-interactif.is-active h3, .bloc-interactif.is-active h4, .bloc-interactif.is-active p, .bloc-interactif.is-active a {
    color: #ffffff !important;
}
/* =========================================
   DESIGN "TROUVER UN CENTRE"
   ========================================= */

/* 1. LE CONTENEUR PRINCIPAL (Bleu Ciel) */
.section-recherche-centre {
    background-color: #AECFE8 !important;
    padding-top: 50px !important;
    
    /* MODIF : On enlève le padding bas et côtés pour laisser la place au blanc */
    padding-bottom: 0px !important; 
    
    /* Sécurité pour éviter le scroll horizontal */
    overflow-x: hidden !important; 
}

/* 2. LE TITRE */
.section-recherche-centre h2, 
.section-recherche-centre .wp-block-heading {
    color: #003366 !important;
    text-align: center;
    margin-bottom: 40px !important;
}

/* 3. LA ZONE DE CONTENU (La Carte + Liste) */
/* C'est ici qu'on fait la MAGIE du "Breakout" */
.section-recherche-centre .uagb-tabs__body-wrap {
    background-color: #ffffff !important;
    
    /* --- FORMULE MAGIQUE PLEINE LARGEUR --- */
    width: 100vw !important; /* Prend toute la largeur de la fenêtre */
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important; /* Se recalibre au centre */
    margin-right: -50vw !important;
    
    /* Espacements internes */
    padding-top: 50px !important;
    padding-bottom: 0px !important; /* Espace blanc en bas de page */
    margin-top: 0 !important;
	padding-left: 0;
    padding-right: 0;
}

/* 4. RECENTRER LE CONTENU INTÉRIEUR */
/* Comme le fond blanc fait 100% de l'écran, il faut empêcher le contenu de toucher les bords */
.section-recherche-centre .uagb-tabs__body-container {
    width: 100% !important;
    max-width: 100% !important; /* On enlève la limite de 1140px */
    margin: 0 !important;
    padding: 0 !important; /* Enlève les marges latérales si tu veux que ça touche les bords */
    margin: 0 auto !important; /* Centré */
    padding-left: 0px !important; /* Marge de sécurité mobile */
    padding-right: 0px !important;
}

/* =========================================
   STYLE DES BOUTONS (ONGLETS)
   ========================================= */

/* A. La barre des onglets */
.section-recherche-centre .uagb-tabs__panel {
    background: transparent !important;
    border: none !important;
    margin-bottom: 50px !important; /* Colle au blanc */
    justify-content: center !important;
    gap: 10px !important;
}

/* B. Les Boutons INACTIFS */
.section-recherche-centre .uagb-tab a.uagb-tabs-list {
    background-color: #5ea9d6 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'NeoSansPro', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    padding: 15px 30px !important;
    margin: 0 !important;
}

/* C. Le Bouton ACTIF */
.section-recherche-centre .uagb-tab.uagb-tabs__active a.uagb-tabs-list {
    background-color: #ffffff !important;
    color: #003366 !important;
    /* Petite astuce pour masquer la jointure si besoin */
    position: relative;
    z-index: 10;
}

/* D. Hover */
.section-recherche-centre .uagb-tab a.uagb-tabs-list:hover {
    background-color: #4aa8d0 !important;
}
/* =========================================
   SOLUTION LIENS TEL + DOCTOLIB
   ========================================= */

/* Rend le bloc cliquable visuellement */
.bloc-interactif {
    cursor: pointer !important;
}

/* Style spécifique pour le téléphone (pour bien montrer que c'est un lien à part) */
.bloc-interactif a[href^="tel:"] {
    position: relative;
    z-index: 50; /* Sécurité */
    text-decoration: underline !important;
    font-weight: 700;
    cursor: pointer !important;
}

/* =========================================
   FIX COLONNES SYMÉTRIQUES (CARTE)
   ========================================= */

@media (min-width: 1025px) {
    
    /* 1. LES COLONNES LATÉRALES (25%) */
    .col-laterale {
        /* On force la largeur stricte */
        flex: 0 0 25% !important; 
        width: 25% !important;
        max-width: 25% !important;
        
        /* GESTION DU GAP (Important !) */
        /* Si tu as mis un Gap de 20px dans Spectra, il faut le soustraire */
        /* Sinon 25+50+25 + Gap > 100% */
        /* Décommente la ligne ci-dessous si ta mise en page casse : */
        /* width: calc(25% - 10px) !important; */
    }

    /* 2. LA COLONNE CENTRALE (50%) */
    .col-centrale {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        
        /* Idem pour le Gap */
        /* width: calc(50% - 20px) !important; */
    }
}


/* =========================================
   SCROLLTOTOP
   ========================================= */

#ast-scroll-top {
	height: 3em;
	/* Centrage de la future flèche */
padding-top: 4px;
}
/* --- 2. ON CACHE LE SVG EXISTANT --- */
/* On cible spécifiquement le span et le svg à l'intérieur pour les faire disparaître */
#ast-scroll-top .ast-icon, 
#ast-scroll-top svg {
    display: none !important;
}

/* --- 3. ON CRÉE LA NOUVELLE FLÈCHE --- */
/* On utilise un pseudo-élément pour dessiner la flèche fine */
#ast-scroll-top::before {
    content: "\2191";         /* Code Unicode de la flèche haut (↑) */
    color: #ffffff;           /* Blanc */
    font-size: 32px;          /* Taille de la flèche */
    font-family: Arial, sans-serif; /* Police simple pour un trait net */
    font-weight: 300;         /* 300 pour fin, ou normal */
    line-height: 1;
    margin-bottom: 3px;       /* Petit ajustement pour le centrage optique */
}
.ast-single-post .entry-content a {text-decoration: none;}
/* =========================================
   STYLE FLUENT FORMS (DESIGN LIGNE)
   ========================================= */

/* 1. ON NETTOIE LE STYLE PAR DÉFAUT */
.fluentform .ff-el-form-control {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #999 !important; /* Juste la ligne grise */
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
    color: #333 !important;
    transition: border-color 0.3s ease;
}

/* 2. EFFET FOCUS (Ligne Bleue quand on clique) */
.fluentform .ff-el-form-control:focus {
    border-bottom: 2px solid #003366 !important; /* Bleu CityScan */
    outline: none !important;
}

/* 3. LABELS (TITRES DES CHAMPS) */
.fluentform .ff-el-input--label {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important; /* En gras comme la maquette */
    color: #000 !important;
    margin-bottom: 5px !important;
}



/* 5. CASE À COCHER (RGPD) */
.fluentform .ff_t_c input[type=checkbox] {
    accent-color: #003366; /* Couleur de la case cochée */
}

/* 6. LE BOUTON ENVOYER */
.fluentform .ff-btn-submit {
    background-color: #003366 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    width: auto !important; /* Pas pleine largeur */
    margin-top: 20px !important;
    cursor: pointer;
}

.fluentform .ff-btn-submit:hover {
    background-color: #002244 !important;
}

/* 7. ALIGNEMENT GRILLE (Sécurité) */
/* Fluent Forms gère bien les colonnes, mais on s'assure que ça respire */
.fluentform .ff-t-container {
    margin-bottom: 20px !important;
}



/*enlever des espaces paragraphes, listes à puce*/
.entry-content p {margin-bottom: 0.2em;}
.entry-content ul {margin-top: 0;}
/*Régler le décalage gauche du sous menu*/
.main-header-menu .menu-item:hover>.sub-menu {
    left: 5px;
}
/*Enlever l'ascenseur menu mobile*/
#ast-mobile-header .content-align-flex-start
 {
    overflow: hidden;
}

/* =========================================
   CORRECTIF COULEURS BLANCHES (ID 4)
   ========================================= */

/* 1. LES LABELS (Force le blanc sur le texte "Nom", "Prénom"...) */
#fluentform_4 .ff-el-input--label,
#fluentform_4 .ff-el-input--label label {
    color: #ffffff !important;
    font-weight: 400 !important; /* Ajuste si tu les veux moins gras */
	font-size: 16px;
}

/* 2. LE TEXTE TAPÉ + LIGNE DU BAS */
#fluentform_4 .ff-el-form-control {
    color: #ffffff !important; /* Le texte que l'utilisateur écrit */
    border-bottom-color: rgba(255, 255, 255, 0.5) !important; /* Ligne blanche semi-transparente */
}

/* 3. LE PLACEHOLDER (Le texte "Votre Message" à l'intérieur) */
/* Il faut cibler spécifiquement les placeholders pour changer leur couleur */
#fluentform_4 ::placeholder {
    color: rgba(255, 255, 255, 0.7) !important; /* Blanc un peu transparent */
    opacity: 1; /* Nécessaire pour Firefox */
}

#fluentform_4 :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, 0.7) !important;
}

#fluentform_4 ::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 4. LE TEXTE RGPD (Case à cocher en bas) */
#fluentform_4 .ff_tc_label,
#fluentform_4 .ff_t_c, 
#fluentform_4 .ff_t_c p {
    color: #ffffff !important;
}

#fluentform_4 .ff_t_c a {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* =========================================
   CORRECTIF LISTE DÉROULANTE (TEXTE NOIR)
   ========================================= */

/* On cible les options À L'INTÉRIEUR du menu déroulant */
#fluentform_4 select option {
    color: #333333 !important; /* Texte Gris Foncé / Noir */
    background-color: #ffffff !important; /* Fond Blanc */
}

/* =========================================
   SÉCURITÉ ICONES RÉSEAUX (ANTI-BUG)
   ========================================= */

/* 1. On cible spécifiquement les SVG dans le footer */
.site-footer .uagb-icon-wrapper svg {
    width: 30px !important; /* Taille forcée */
    height: 30px !important;
    max-width: 30px !important; /* Ceinture de sécurité */
}

/* 2. On s'assure que le conteneur les met bien côte à côte (Flex) */
.site-footer .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: row !important; /* Force la ligne */
    gap: 15px !important; /* Espace entre les icônes */
    justify-content: center !important; /* Ou flex-start selon ta maquette */
}

/* 3. On sécurise le lien autour de l'icone */
.site-footer .uagb-svg-wrapper a {
    display: block !important;
    line-height: 0 !important; /* Évite les espaces fantômes sous l'icône */
}


/* =========================================
   FIX GLOBAL : EMPÊCHER LE SCROLL HORIZONTAL
   ========================================= */
html, body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    max-width: 100%;
}
/* =========================================
   FIX MOBILE : SECTION PLEINE LARGEUR
   ========================================= */
@media (max-width: 768px) {
    .section-recherche-centre .uagb-tabs__body-wrap {
        /* On arrête les calculs complexes sur mobile */
        width: 100% !important; 
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        
        /* On s'assure qu'il n'y a pas de padding qui explose la largeur */
        box-sizing: border-box !important;
    }
    
    /* On s'assure que le conteneur parent ne déborde pas */
    .section-recherche-centre {
        width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* =========================================
   BULLES NOUS REJOINDRE (TAILLE FIXE)
   ========================================= */

/* 1. CONFIGURATION GÉNÉRALE (PC & Base) */
.bulle-job {
    /* TAILLE STRICTE : On impose le carré */
    width: 220px !important; 
    height: 220px !important;
    min-width: 220px !important;
    min-height: 220px !important;
    
    /* FORME */
    border-radius: 50% !important;
    
    /* CENTRAGE DU CONTENU */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important; /* Centré dans sa colonne */
    padding: 5px !important; /* Marge de sécurité interne */
}

/* 2. LE TEXTE (PC) */
.bulle-job .uagb-heading-text,
.bulle-job h2, .bulle-job h3, .bulle-job p {
    font-size: 20px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 0 !important;
    width: 100% !important;
    word-break: normal !important; /* Pas de coupure sauvage */
}

/* =========================================
   RESPONSIVE (TABLETTE & MOBILE < 1024px)
   ========================================= */
@media (max-width: 1024px) {
    
    /* 1. ON RÉDUIT LA TAILLE DES CERCLES */
    .bulle-job {
        width: 110px !important;  /* Taille fixe mobile */
        height: 110px !important;
        min-width: 110px !important;
        min-height: 110px !important;
        
        padding: 2px !important; /* Quasi pas de marge interne */
    }

    /* 2. ON RÉDUIT LE TEXTE (Pour que ça rentre) */
    .bulle-job .uagb-heading-text,
    .bulle-job h2, .bulle-job h3 {
        font-size: 12.5px !important; /* Police 10px pour "Administratif" */
        font-weight: 700 !important;
        
        /* Sécurité mots longs */
        overflow-wrap: break-word !important; 
        hyphens: auto !important;
    }
}