/* RESTORE ICONS FONTS (Override the forced font above) */
.fa,
.fas,
.far,
.fal,
.fad {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    /* Ensure solid icons have weight */
}

.fab {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Ensure standard weights are respected if needed for Brands */

/* --- OVERRIDE DEFAULT WORDPRESS THEME BUTTON STYLES --- */
/* This removes the unwanted #c36 pink border and styles mentioned by the user */
[type=button],
[type=submit],
button {
    background-color: transparent;
    border: none !important;
    /* Force override of #c36 */
    color: inherit;
    border-radius: 0;
    padding: 0;
    font-weight: inheriting;
}

/* FORCE GLOBAL FONT - USER REQUEST */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button,
input,
textarea,
select {
    font-family: 'Montserrat Alternates', sans-serif !important;
}

/* Ensure images and containers respect max-widths if defined by Tailwind or custom CSS */
img,
video {
    max-width: 100%;
    height: auto;
}

/* Extracted Styles */
/* Variables existantes */
:root {
    --color-primary-green: #38c172;
    --color-cta-start: #4AD6A1;
    --color-dark-blue: #0A365B;
    --color-text-dark: #333;
    --color-text-light: #0B1343;
    --border-color: #E0E4EB;
    /* Couleur de la ligne de séparation */

    /* **MAINTIEN DE LA POLICE GLOBALE** */
    font-family: 'Montserrat Alternates', sans-serif;

    --color-dark-text: #172A46;
    --color-primary-blue: #0B1343;
    /* Bleu très foncé */

    /* NOUVELLES VARIABLES POUR LE HERO */
    --color-primary: #42D2A2;
    /* Vert/Turquoise pour le Hero */
    --color-secondary: #162E48;
    /* Bleu Foncé (Navy) pour le Hero */
    --color-hero-text-dark: #2A3C56;
    /* Texte principal du Hero */
    --color-hero-text-subtle: #556B82;
    /* Texte secondaire/corps du Hero */
    --color-bg-light: #F4F8FA;
    /* Fond de la section Hero */

    /* Variables existantes de votre page */
    --green-primary: #4AE1B6;
    --couleur-texte-sombre: #0B1343;
    --couleur-texte-clair: #4A6385;
    --couleur-primaire: #4AE1B6;
    --couleur-carte: #ffffff;
    --couleur-arriere-plan: #f1f3f6;
    --blue-accent: #1A3E6D;
    --radius: 12px;


}

/* Désactiver le curseur par défaut du navigateur */
body {
    cursor: none;
}

/* 1. ON CACHE LE CURSEUR PAR DÉFAUT */
@media (hover: hover) {
    body {
        cursor: none;
    }
    /* On s'assure que les boutons gardent un curseur interactif si besoin, 
       ou on gère cela via JS en agrandissant le nuage */
    a, button, .close-btn, .submit-btn {
        cursor: none;
    }
}
/* 1. ON RÉACTIVE LE CURSEUR PAR DÉFAUT SUR MOBILE */
@media (max-width: 1024px) {
    body {
        cursor: auto !important;
    }
    
    /* 2. ON CACHE COMPLÈTEMENT LE NUAGE */
    #custom-cursor {
        display: none !important;
        pointer-events: none;
    }

    /* On s'assure que les éléments cliquables retrouvent leur comportement normal */
    a, button, .close-btn, .submit-btn {
        cursor: pointer !important;
    }
}
/* 2. STYLES DU CURSEUR NUAGE PERSONNALISÉ */
#custom-cursor {
    position: fixed;
    width: 80px; /* Légèrement plus grand pour un effet plus "nuage" */
    height: 80px;
    
    /* Dégradé de couleurs entre votre vert et votre bleu */
    background: radial-gradient(
        circle, 
        #4AE1B6 0%,      /* Votre vert primaire au centre */
        #0B1343 50%,     /* Votre bleu accent */
        transparent 80%  /* Disparition douce */
    );
    
    border-radius: 50%;
    pointer-events: none; /* Indispensable pour pouvoir cliquer à travers */
    z-index: 100000; /* Doit être au-dessus de la popup (99999) */
    transform: translate(-50%, -50%);
    
    /* L'effet magique : flou intense + mélange de couleurs */
    filter: blur(35px); 
    opacity: 0.3; /* Opacité pro : visible mais pas gênant */
    
    /* Transition fluide pour suivre le mouvement sans saccades */
    transition: transform 0.1s ease-out, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    will-change: transform;
}

/* 3. EFFET LORS DU SURVOL D'UN BOUTON (Optionnel mais Pro) */
/* Ajoutez une classe .cursor-hover via JS quand vous survolez un lien */
#custom-cursor.active {
    width: 60px;
    height: 60px;
    opacity: 0.5;
    background: radial-gradient(
        circle, 
        #4AE1B6 0%, 
        #43BA98 40%, 
        transparent 75%
    );
}
/* Styles spécifiques pour le Hero pour reproduire l'arrière-plan */
.hero-bg {
    position: relative;
    color: var(--color-hero-text-dark);
    /* Assure la couleur du texte Hero */
    /* Ajout d'un dégradé radial et linéaire pour l'effet de grille en bas */
    margin: 6rem auto;
    /* Marge au-dessus et en dessous, centré */

}


/* Ajustement de la taille du titre */
.hero-title {
    font-size: 2.5rem;
    /* Ajustement pour correspondre à la taille visuelle */
    line-height: 1.1;
}

/* Style spécifique pour le logo MediaForge */
.logo-text {
    color: var(--color-secondary);
    font-weight: 800;
}

.logo-icon {
    color: var(--color-primary);
}

/* Style des boutons pour l'arrondi et le padding */
.btn-primary {
    background-color: #4AE1B6;
    color: var(--color-secondary);
    padding: 14px 28px;
    font-weight: 600;
    font-size: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    transform: scale(1.05);
    /* L'animation professionnelle demandée */
    box-shadow: 0 5px 15px rgba(74, 225, 182, 0.4);
    /* Pas de changement de couleur */
}

.btn-secondary {
    background-color: var(--color-primary-blue);
    color: white;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-secondary:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(11, 19, 67, 0.4);
    /* Pas de changement de couleur */
}

/* Styles pour les petits écrans (Mobile) */
@media (max-width: 767px) {
    /* Cible la taille "Medium" de Tailwind et en dessous */

    .btn-primary,
    .btn-secondary {
        /* Réduire le padding (hauteur et largeur) */
        padding: 10px 20px;
        /* Exemple: réduit de 14px à 10px et de 28px à 20px */

        /* Réduire la taille de la police */
        font-size: 0.7rem;
        /* Exemple: réduit de 0.9rem à 0.8rem */
    }
}

/* --- STYLE : EFFET VERRE DÉPOLI (FROSTED GLASS) --- */
.navbar-glass {
    /* Remplace le bg-white par un fond semi-transparent pour le flou */
    background-color: rgba(255, 255, 255, 0.749);
    /* Légèrement plus transparent */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
}


/* --- Styles pour le carrousel des logos --- */

/* Définition de l'animation de défilement */
@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Défile de la moitié de la largeur totale pour l'effet loop */
}


.logo-carousel-container {
    position: relative;
    /* Modification pour qu'elle suive le flux */
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
    /* Centrage */
    overflow: hidden;
    height: 100px;
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    background: none;

}



.logo-carousel {
    display: flex;
    width: max-content;
    /* La largeur dépend du contenu */
    animation: scroll-logos 30s linear infinite;
    /* Animation de défilement */
    padding: 0px 0;
    gap: 60px;
    /* Espacement équidistant fixe entre chaque logo */
    background-color: transparent;
    margin: 0rem auto;
    /* Marge au-dessus et en dessous, centré */
}

@media (max-width: 768px) {
    .logo-item-partner {
        /* Taille Desktop (par exemple : 128px de large max) */
        max-width: 80px;
        max-height: 70px;
    }

    .logo-carousel {
        gap: 30px;
    }
}



.logo-item-partner {
    flex-shrink: 0;
    display: flex;
    /* Retrait de la largeur fixe 200px */
    justify-content: center;
    align-items: center;
    opacity: 1;
    color: var(--color-hero-text-subtle);
    font-size: 1.2rem;
    font-weight: 600;
    user-select: none;
}

/* Ajout d'une ligne mince sous le carrousel pour l'effet de séparation */
.logo-carousel-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(66, 210, 162, 0.2),
            transparent);
}

/* Styles existants dans HOME.html */

.card-slider {
    overflow: hidden;
    padding: 20px 0;
}

.cards-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
}

.card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 24px;
    width: 300px;
    /* Taille de base pour desktop */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Assurez-vous que les titres et paragraphes du SLIDER utilisent la police Montserrat Alternates */
.card h3,
.card p {
    font-family: 'Montserrat Alternates', sans-serif;
}

.card h3 {
    color: var(--color-dark-text);
    font-weight: 700;
    margin-bottom: 10px;
}

.card p {
    color: var(--color-text-subtle);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 20px;
    flex-grow: 1;
}

.card-link {
    color: var(--color-primary-green);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}

.card-link:hover {
    color: var(--color-primary-blue);
}

/* Navigation Slider */
.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.slider-btn {
    background-color: white;
    color: var(--color-primary-blue);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.slider-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Pas de changement de couleur de fond/bordure agressif, juste l'animation */
    border-color: var(--color-primary-blue);
    background-color: white;
    /* Garde le fond blanc */
    color: var(--color-primary-blue);
    /* Garde la couleur texte/icone */
}

.progress-bar-container {
    flex-grow: 1;
    height: 6px;
    background-color: var(--border-color);
    border-radius: 3px;
    max-width: 300px;
    margin: 0 10px;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-primary-green);
    border-radius: 3px;
    transition: width 0.3s ease-in-out;
}

/* Styles par défaut (Desktop: flex: 0 0 300px;) */
.testimonial-card {
    flex: 0 0 300px;
    height: 400px;
    margin-right: 16px;
    /* ... autres styles ... */
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    background-color: white;
}

.card-image-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- MEDIA QUERY CORRIGÉE (max-width: 767px pour cibler Mobile/Tablette) --- */
@media (max-width: 767px) {

    /* 1. Correction de la largeur des cartes (affichage 2 par ligne) */
    .testimonial-card {
        /* Écrase le 300px desktop. Force 2 cartes par ligne. */
        flex: 0 0 48%;

        /* Réduction de la hauteur pour que l'image s'adapte mieux */
        height: 300px;

        /* Ajustement de la marge entre les cartes */
        margin-right: 10px;
    }

    /* 2. Activer le défilement horizontal (scroll) */
    .slider-wrapper {
        overflow-x: scroll !important;
        padding: 0;
        margin: 0;
    }

    /* 3. Assurer l'absence de translation JS sur petit écran */
    .cards-container {
        transform: none !important;
    }
}


/* Définition de l'animation de pulsation */
@keyframes pulse-once {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Application de l'animation constante */
.map-marker-container.pulsing {
    animation: pulse-once 2s infinite ease-in-out;
}

/* Ajustement de la transformation au survol pour ne pas interférer avec l'ancrage */
/* Note: L'animation de pulsation est désactivée au survol */
.map-marker-container:hover {
    animation: none;
    transform: translate(-50%, -50%) scale(1.2) !important;
}

/* ================================================= */
/* ==================== FOOTER ===================== */
/* ================================================= */
.main-footer {

    width: 100%;
    overflow-x: hidden;
}

/* --- 1. Bande supérieure d'appel à l'action (CTA Bar) --- */
.footer-cta-bar {
    background: linear-gradient(to right, var(--color-cta-start), var(--color-primary-green));
    padding: 60px 5%;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 10px 20px rgba(56, 193, 114, 0.2);
}

.cta-content {
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cta-text {
    font-size: 2.2rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.cta-button {
    background-color: var(--color-primary-blue);
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    transition: background-color 0.3s, transform 0.2s;
}

.cta-button:hover {
    background-color: var(--color-primary-blue);
    transform: translateY(-2px);
}

/* --- 2. Contenu principal du pied de page --- */
.footer-main-content {
    padding: 80px 0 0px 0;
}

.footer-container {
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-col {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 200px;
}

/* Colonne Logo/Description */
.about-company {
    flex: 3;
    min-width: 600px;
    max-width: 400px;
}

.about-company .logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.about-company .logo img {
    height: 45px;
    width: auto;
    margin-right: 10px;
}

.logo-text {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-dark-blue);
}

.company-description {
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 550px;
    color: var(--color-text-light);
}

.footer-col h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-text-light);
}

/* Liens (À propos) */
.links-group {
    flex: 1;
}

.links-group ul {
    list-style: none;
    padding: 0;
}

.links-group li {
    margin-bottom: 10px;
}

.links-group a {
    text-decoration: none;
    color: var(--color-text-light);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.links-group a:hover {
    color: var(--color-dark-blue);
    font-weight: bold;
}

/* --- Groupe Contact (avec Icônes) --- */
.contact-group {
    flex: 1.5;
}

.contact-item {
    display: flex;
    align-items: center;
    /* Centrer l'icône verticalement avec le texte */
    margin-bottom: 12px;
}

.contact-item a {
    /* Utiliser Flexbox pour aligner les éléments internes (icône et texte) */
    display: flex;
    /* Aligner verticalement l'icône et le texte au milieu */
    align-items: center;
    /* (Optionnel) Ajoute un petit espace entre l'icône et le texte */
    gap: 0px;
    /* S'assure que le lien occupe toute la largeur du conteneur */
    text-decoration: none;
    /* Pour supprimer le soulignement par défaut des liens */
    color: inherit;
    /* Pour garder la couleur du texte par défaut */
}

.contact-icon {
    font-size: 1.1rem;
    margin-right: 15px;
    color: var(--color-primary-blue);
}

.contact-item .contact-value {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #0B1343;
    /* Rendre le texte des contacts foncé comme dans l'image */
    margin: 0;

}


/* Ajustement pour le texte de l'adresse qui peut prendre plus de lignes */
.address-item {
    align-items: flex-start;
}

.address-item .contact-icon {
    padding-top: 4px;
    /* Pour aligner l'icône d'adresse en haut */
}

.address-item .contact-value {
    color: var(--color-text-light);
    /* L'adresse est plus claire dans le design */
}

/* --- 3. Section des droits d'auteur (Bottom Bar) --- */
.footer-bottom-bar {
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 0% 30px 0%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-light);
    border-top: 1px solid rgba(11, 19, 67, 0.3);
    /* Ligne de séparation */
}

.copyright,
.reserved-rights {
    flex: 1;
    white-space: nowrap;
}

.reserved-rights {
    text-align: center;
}

.copyright {
    text-align: left;
}


/* Icônes Sociales */
.social-links {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--color-primary-blue);
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.2s, background-color 0.2s;
}

.social-icon:hover {
    opacity: 0.8;
}

/* ==================== UTILITY CLASSES =================== */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: flex !important;
    }

    .mobile-social-icons {
        margin-bottom: 30px;
    }

    .desktop-only {
        display: none !important;
    }
}

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

@media (max-width: 992px) {
    .cta-content {
        flex-direction: column;
        text-align: center;
    }

    .cta-text {
        margin-bottom: 20px;
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {

    /* Organisation principale en colonne */
    .footer-container {
        flex-direction: column;
        gap: 4px;
    }

    /* 1. ALIGNER TOUTES LES COLONNES À GAUCHE */
    .footer-col {
        min-width: 100%;
        max-width: 100%;
        text-align: left;
        /* ALIGNEMENT GAUCHE DU TEXTE */
    }

    /* 2. ALIGNER LES ÉLÉMENTS DE LA COLONNE LOGO/DESCRIPTION À GAUCHE */
    .about-company {
        /* Remplacer align-items: center par flex-start pour aligner à gauche */
        align-items: flex-start;
        text-align: left;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .about-company .logo {
        /* Remplacer justify-content: center par flex-start pour le logo à gauche */
        justify-content: flex-start;
    }

    .company-description {
        max-width: 100%;
    }

    /* 3. ALIGNER LES ÉLÉMENTS DE CONTACT À GAUCHE */
    .contact-item {
        /* Remplacer justify-content: center par flex-start pour aligner les icônes/texte à gauche */
        justify-content: flex-start;
        align-items: center;
    }

    .address-item {
        align-items: flex-start;
        /* Retirer le padding pour aligner sur le bord gauche */
        padding: 0;
    }

    .social-links {
        justify-content: center;
    }
}

/* ================================================= */
/* ============= SECTION CTA BANNER ================ */
/* ================================================= */

.cta-banner {
    background-color: #4AE1B6;
    /* Le vert vif de votre maquette */
    padding: 60px 5%;
    /* Espace intérieur */
    border-radius: 20px;
    /* Bords arrondis */
    margin: 6rem auto;
    /* Marge au-dessus et en dessous, centré */
    width: 96%;
    max-width: 1280px;
    /* Largeur maximale comme votre conteneur principal */

}

.cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Pour le responsive */
    gap: 30px;
    /* Espace entre le texte et le bouton */
}

.cta-banner h2 {
    font-size: 2.5rem;
    /* Grande taille de texte pour le CTA */
    font-weight: 600;
    color: #EFF3FF;
    /* Texte blanc comme sur la maquette */
    margin: 0;
    /* Réinitialise la marge par défaut des h2 */
}

.btn-cta {
    background-color: var(--color-primary-blue);
    /* Le bleu foncé du bouton */
    color: #ffffff;
    padding: 18px 35px;
    border-radius: 12px;
    /* Bords arrondis du bouton */
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    /* Pour aligner le texte et l'icône */
    align-items: center;
    gap: 10px;
    /* Espace entre le texte et l'icône */
}

.btn-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(11, 19, 67, 0.4);
    color:#f1f3f6;
    /* Pas de changement de couleur */
}



/* Responsive pour cette section */
@media (max-width: 768px) {
    .cta-banner {
        margin: 60px 5%;
        /* Garder un peu de marge sur les côtés */
        padding: 40px 5%;
    }

    .cta-content {
        flex-direction: column;
        text-align: center;
    }

    .cta-banner h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
}

/* ================================================= */
/* ============== SECTION TÉMOIGNAGES ============== */
/* ================================================= */

/* Configuration de base */


/* 1. Titre avec Soulignement Dégradé */
.gradient-underline {
    display: inline-block;
    position: relative;
    font-weight: 300;
    color: var(--text-dark);
}

.gradient-underline span {
    font-weight: 600;
}

/* Soulignement */
.gradient-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    /* Dégradé du vert au bleu */
    background: linear-gradient(to right, var(--green-primary), var(--blue-accent));
}

/* 2. Slider Conteneur (Wrapper) */
.slider-container {
    /* Largeur pour le texte (200px) + 3 cartes (3 * 316px) = ~1170px */
    width: 100%;
    max-width: none;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* 3. Texte Flottant à Gauche (Dynamique) */
.floating-text-container {
    flex-shrink: 0;
    width: 230px;
    padding-right: 30px;
    text-align: left;
    align-self: center;
}

.floating-text-container h4 {
    color: var(--green-primary);
    font-size: 1.5rem;
    font-weight: 500;
    transition: opacity 0.3s;
   font-family: Plus Jakarta Sans, ui-sans-serif !important;
    
}

.floating-text-container p {
    color: #0B1343;
    font-size: 1rem;
    transition: opacity 0.3s;
}

/* Styles par défaut (APPLIQUÉS AU DESKTOP) */
.slider-wrapper {
    flex-grow: 1;
    overflow-x: hidden;
    position: relative;
    /* ASSUREZ-VOUS QUE LA REGLE "transform: translateX(21px);" N'EST PAS ICI. */
}

.cards-container {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 20px 0;
}

/* Style des Cartes (Testimonial Card) - LARGEUR FIXE POUR DESKTOP */
.testimonial-card {
    /* Largeur et hauteur par défaut (Desktop) */
    flex: 0 0 300px;
    height: 400px;
    margin-right: 16px;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    background-color: white;
}

/* Conteneurs d'image (Gardés intacts) */
.card-image-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.card-image-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- MEDIA QUERY POUR LE MOBILE (max-width: 767px) --- */
/* CORRECTION CLÉ : Force la largeur des cartes à moins de 50% sur mobile. */
@media (max-width: 767px) {

    .slider-wrapper {
        /* Permet le défilement horizontal sur mobile (annule overflow-x: hidden) */
        overflow-x: scroll !important;
    }

    .testimonial-card {
        /* Écrase la largeur fixe de 300px. Force 2 cartes par ligne. */
        flex: 0 0 48%;

        /* Réduction de la hauteur pour une meilleure visualisation de l'image sur petit écran */
        height: 300px;

        margin-right: 0px;
        /* Réduction de l'espace entre les cartes sur mobile */
    }
}

/* Bouton Play Central */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: #f8fafdcc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    z-index: 50;
}


.play-button::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--green-primary); /* La couleur de votre flèche */
    margin-left: 4px;
    vertical-align: middle;
}
/* 5. Carte Verte (Abdellah Fadlaoui) */
.green-card {
    background: var(--green-primary);
    color: white;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
    text-align: left;
}

.green-card .client-quote {
    margin-top: 4rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* 6. NOUVELLE STRUCTURE DE NAVIGATION (Alignée) */
.navigation-group-aligned {
    width: 100%;
    max-width: none;
    /* Alignement parfait avec .slider-container */
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}

/* Espace réservé pour aligner les contrôles avec la zone de cartes */
.floating-text-placeholder {
    width: 200px;
    flex-shrink: 0;
    padding-right: 30px;
}

/* Conteneur des contrôles (prend la largeur des cartes) */
.controls-area {
    flex-grow: 1;
}

.progress-and-arrows-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espace entre flèches et barre */
    margin-left: 25px;
}

/* Flèches (en haut à gauche) */
.navigation-controls-top {
    display: flex;
    justify-content: flex-start;
    /* Aligner à gauche */
    gap: 10px;
    margin-bottom: 5px;
    /* Petit espace sous les flèches */
}

/* Barre de Progression (même largeur que les cartes) */
#progressBarContainer {
    width: 100%;
    height: 4px;
    /* AUGMENTÉ LA HAUTEUR ICI POUR LA RENDRE PLUS LARGE */
    background-color: #0B1343;
    opacity: 20%;
    border-radius: 4px;
    /* Ajusté le border-radius */
    position: relative;
}

#progressBarFill {
    height: 100%;
    width: 0%;
    background-color: var(--green-primary);
    border-radius: 4px;
    /* Ajusté le border-radius */
    transition: width 0.3s ease-in-out;
}

.nav-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Fond transparent par défaut */
    background-color: transparent; 
    /* Bordure visible maintenant */
    border: 2px solid var(--green-primary) !Important; 
    /* Couleur du signe/icône */
    color: var(--green-primary);
    
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* Transition fluide pour toutes les propriétés */
    transition: all 0.3s ease;
    outline: none; /* Retire le contour de sélection par défaut du navigateur */
}

/* Effet au survol (optionnel mais recommandé) */
.nav-arrow:hover {
    background-color: var(--green-primary);
}

/* Effet quand on CLIQUE */
.nav-arrow:active {
    background-color: var(--green-primary); /* Le fond devient vert */
    color: #ffffff; /* Le signe devient blanc */
}

/* Media Queries pour la Responsivité Mobile */
@media (max-width: 1024px) {
    .slider-container {
        display: block;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .floating-text-container,
    .floating-text-placeholder {
        width: 100%;
        padding: 0 20px 20px 20px;
        text-align: center;
    }

    .testimonial-card {
        flex: 0 0 90%;
        margin: 0 5% 0 5%;
        height: 400px;
    }

    .navigation-group-aligned {
        max-width: 100%;
        padding: 0 20px;
        flex-direction: column;
        align-items: center;
    }

    .navigation-controls-top {
        justify-content: center;
    }

    .floating-text-placeholder {
        display: none;
        /* Cache le placeholder sur mobile pour ne pas gâcher d'espace */
    }
}

.main-title-container .gradient-underline {
    display: inline;
    position: relative;
    font-weight: 700;
    text-align: center;

    /* Règle spécifique pour écraser le h2 span générique du STYLE.css */
    color: var(--green-primary) !important;
    /* CORRECTION DE LA COULEUR */
}

/* Soulignement (ajusté pour la nouvelle structure et positionnement) */
.main-title-container .gradient-underline::after {
    content: '';
    position: absolute;
    left: 50%;
    /* Commence au centre du mot */
    bottom: -8px;
    width: 110%;
    /* Reste large */
    height: 3px;



    /* Déplace le point de départ de 50% vers la gauche, puis applique un décalage de -5% pour l'effet de dépassement */
    /* CORRECTION DU POSITIONNEMENT : Centrage + ajustement */
    transform: translateX(-55%) skewX(-15deg);

    background: none;
    border-bottom: 3px solid;
    /* Utilisation du dégradé pour la bordure */
    border-image: linear-gradient(to right, var(--green-primary), var(--blue-accent)) 1;
    border-image-slice: 1;
}

/* ================================================= */
/* ============== SECTION NOTRE HISTOIRE ============= */
/* ================================================= */

.about-us-story-section {
    width: 96%;
    max-width: 1280px;
    margin: 4rem auto;
    text-align: center;

}

/* Ajustement pour le titre de cette section */
.about-us-story-section .section-header-centered {
    margin-bottom: 60px;
}

.about-us-story-section .section-header-centered h2 {
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 600;
    margin-bottom: 10px;
    MAX-WIDTH: 450PX;
    line-height: 1.2;
    color: var(--couleur-texte-sombre);
    margin-left: auto;
    margin-right: auto;

    /* Ajout de la propriété pour la casse de titre */
    text-transform: capitalize;
}

@media (max-width: 768px) {
    .about-us-story-section .section-header-centered h2 {
        /* Définit la taille de police à 24px pour les tablettes et les mobiles */
        font-size: 24px;
        MAX-WIDTH: 250PX;
        line-height: 1.6;


    }
}

.highlight-text-blue {
    /* Utilisation du dégradé subtil pour "Screens" */
    background: linear-gradient(90deg, #6CC0FF 0%, #00BCD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.section-subtitle-small {
    font-size: 16px;
    color: var(--couleur-texte-sombre);
    margin-top: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;


}

@media (max-width: 768px) {
    .section-subtitle-small {
        font-size: 0.8rem;
        max-width: 320px;



    }
}

.about-us-story-section .section-header-centered h2 {
    /* Propriétés essentielles pour que le pseudo-élément (l'icône) puisse être positionné */
    position: relative;
    display: inline-block;
}

/* ========================================================= */
/* 2. Décoration (Ligne PNG) : Crée le pseudo-élément pour TOUS les spans décorés */
/* ========================================================= */
.souligne-creation {
    position: relative;
    display: inline-block;
}

.souligne-creation::after {
    content: "";
    /* Obligatoire pour afficher le pseudo-élément */

    /* Dimensions et contenu de l'icône */
    width: 100%;
    /* Largeur de la ligne/icône. Ajustez selon votre fichier. */
    height: 15px;
    /* Hauteur de la ligne/icône. Ajustez selon votre fichier. */
    background-image: url('https://mediaforge.agency/wp-content/uploads/2025/12/trait2.png');
    /* ⬅️ CHEMIN VERS VOTRE FICHIER PNG */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    /* Positionnement et centrage */
    position: absolute;
    bottom: -10px;
    /* Décalage vertical sous le texte. Ajustez cette valeur. */
    left: 0;
    /* Positionne le point de départ au milieu du parent */
    transform: none;
    /* Décale l'icône pour un centrage parfait */
}

/* --- Le Bloc de Carte Principal --- */
.story-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    /* Couleur de fond du bloc (Bleu très foncé) */
    background: var(--color-primary-blue);
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    text-align: left;
    align-items: stretch;
    /* Modified to allow children to match height for alignment */
}

.story-text-content {
    max-width: 50%;
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.story-main-title {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: white;
    /* Texte blanc */
    margin-bottom: 25px;
    margin-top:0;
    /* Align with top of image container */
}

.story-description {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    /* Texte gris clair */
    margin-bottom: auto;
    /* Push buttons to bottom if flex container has height */
    flex-grow: 1;
    /* Allow description to take up space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* align text to top */
}

.story-cta-buttons {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top:100px;
    /* Push to bottom just in case */
}


/* Bouton principal "Discover" */
.btn-discover {
    background-color: var(--green-primary);
    color: var(--color-primary-blue);
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.btn-discover:hover {
    transform: scale(1.05);
    /* Animation professionnelle */
    box-shadow: 0 5px 15px rgba(74, 225, 182, 0.4);
    /* Pas de changement de couleur */
}
/* Styles pour Mobile uniquement */



/* Lien texte "Learn More" */
.btn-text-link {
    color: white;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}

/* Image encadrée */
.story-image-content {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    /* Pousse l'image vers la droite */
}

.story-main-image {
    max-width: 100%;
    height: auto;
    /* Si l'image est un simple placeholder, ces styles ne sont pas nécessaires, 
               mais ils aident à visualiser la zone de l'image. */
}


/* Responsive */
@media (max-width: 768px) {
    .story-card {
        flex-direction: column;
        padding: 40px;
    }

    .story-text-content {
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
    }

    .story-main-title {
        font-size: 24px;

    }

    .story-description {
        font-size: 16px;
        margin-bottom: 20px;
        /* Ensure spacing on mobile */
        flex-grow: 0;
        /* Reset flex grow on mobile */
    }

    .story-cta-buttons {
        font-size: 11px;
        MARGIN-TOP: 2px;
        MARGIN-BOTTOM: -50px;

    }

    .story-image-content {
        justify-content: center;
    }
}

/* ================================================= */
/* ============== SECTION PORTÉE MONDIALE (Simplifiée) ============ */
/* ================================================= */

.global-reach-section {
    width: 96%;
    max-width: 1280px;
    margin: 4rem auto;

    text-align: center;
    background-color: var(--color-light-bg-top);
    /* Fond très clair/blanc-bleuté */
}

/* Titre et sous-titre */
.global-reach-section .section-header-centered {
    margin-bottom: 70px;
}

.global-reach-section h2 {
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 800;
    margin-bottom: 10px;
    MAX-WIDTH: 700PX;
    line-height: 1.2;
    color: var(--couleur-texte-sombre);
    margin-left: auto;
    margin-right: auto;

    /* Ajout de la propriété pour la casse de titre */
    text-transform: capitalize;
}



.highlight-text-clients {
    /* Gradient bleu/vert pour le chiffre et le mot "Countries" */
    background: linear-gradient(90deg, #6CC0FF 0%, #00BCD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.global-reach-section .section-subtitle {
    font-size: 16px;
    color: var(--couleur-texte-sombre);
    margin-top: 15px;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
}

.global-reach-section .section-subtitle {
    font-size: 1rem;
    max-width: 300px;

}

.global-reach-section {
    margin: 2rem auto;
    /* Reduced from 4rem */
}


*,
*::before,
*::after {
    box-sizing: border-box;
    /* CLÉ pour gérer le padding de 2rem */
}

/* 🛑 CORRECTION CLÉ : Assurer la stabilité du conteneur de la carte */

.world-map-container {
    padding-bottom: 50%;
    /* Si votre SVG est 2:1 */
    position: relative;
    width: 100%;
    height: 0;
    max-width: 100%;
}

.world-map-image,
.map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.world-map-image {
    object-fit: contain;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .global-reach-section h2 {
        font-size: 2.5rem;
    }

}

/* ================================================= */
/* ============== SECTION PROJETS ACTIFS (FIDÉLITÉ 100% GARANTIE) ============= */
/* ================================================= */

#projets-actifs {

    width: 96%;
    max-width: 1280px;
    margin: 4rem auto;
    /* Marge au-dessus et en dessous, centré */
    text-align: center;
    /* Fond légèrement dégradé */

}

@media (max-width: 768px) {
    #projets-actifs {

        margin-top: -2rem;
        /* Reduced from 4rem */
        margin-bottom: 2rem;
        /* Reduced from 4rem */

    }
}

/* ==================== Titres ==================== */
.header-projets {
    margin-bottom: 50px;
}

.header-projets h1 {
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 600;
    margin-bottom: 10px;
    MAX-WIDTH: 700PX;
    line-height: 1.2;
    color: var(--couleur-texte-sombre);
    margin-left: auto;
    margin-right: auto;

    /* Ajout de la propriété pour la casse de titre */
    text-transform: capitalize;
}

@media (max-width: 768px) {
    .header-projets h1 {
        /* Définit la taille de police à 24px pour les tablettes et les mobiles */
        font-size: 24px;
        line-height: 1.5;

    }
}

/* Style du mot "Projects" souligné en bleu/aqua */
.header-projets .souligne {
    color: #55b897;
    /* J'utilise une nuance plus foncée pour le texte souligné */
}

/* Le sous-trait est appliqué sur le h1 (pas de ::after pour simplifier le style) */

.header-projets p {
    font-size: 16px;
    color: var(--couleur-texte-sombre);
    margin-top: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .header-projets p {
        font-size: 0.8rem;
        max-width: 300px;

    }
}

/* ==================== Grille des Projets ==================== */

.grille-portfolio {
    display: grid;
    gap: 40px;
    /* Espace plus aéré comme sur la maquette */
    grid-template-columns: repeat(2, 1fr);
    /* 2 colonnes simples */
    grid-auto-rows: min-content;
    /* Hauteur adaptée au contenu */
    align-items: start;
}

/* Ajustement pour les zones de la grille */
/* PLACEMENT SPÉCIFIQUE DANS LA GRILLE (POUR MATCHER L'IMAGE) */

/* 1. Association Espoir (Yubo) -> Haut Gauche */
.projet-carte-yubo {
    grid-column: 1;
    grid-row: 1;
}

/* 2. Distamed (Grande) -> Haut Droite */
.projet-carte-grande {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    height: auto;
}

/* 3. Crowned Style (Maxis) -> Bas Gauche */
.projet-carte-maxis {
    grid-column: 1;
    grid-row: 2;
}

/* 4. SH Partner (Fitfun) -> Bas Droite */
.projet-carte-fitfun {
    grid-column: 2;
    grid-row: 2;
}

/* DÉCALAGE VERTICAL (NON-MOBILE) : Crée l'effet décalé demandé */
@media (min-width: 992px) {

    /* 1. Décalage de la colonne de GAUCHE vers le bas */
    .projet-carte-yubo {
        margin-top: 155px;
    }

    /* 2. Remontée de la carte SH Partner (Moins importante pour la faire descendre un peu) */
    .projet-carte-fitfun {
        margin-top: -50px;
    }
}

/* AJUSTEMENT HAUTEUR DES IMAGES */
/* Pour créer le rythme visuel de la maquette */
.image-conteneur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-conteneur.yubo img {
    height: auto;
    /* S'assure que l'image garde ses proportions */
}

.image-conteneur.yubo {
    height: auto;
    /* Format paysage standard */
}

.image-conteneur.from-here {
    /* Distamed */
    height: auto;
    /* Affiche toute l'image sans couper */
}

.image-conteneur.from-here img {
    height: auto;
    /* S'assure que l'image garde ses proportions */
}

.image-conteneur.maxis {
    /* Crowned Style */
    height: auto;
    /* Affiche toute l'image sans couper */
}

.image-conteneur.maxis img {
    height: auto;
}

.image-conteneur.fitfun {
    /* SH Partner */
    height: auto;
    /* Affiche toute l'image sans couper */
}

.image-conteneur.fitfun img {
    height: auto;
}

/* Style commun aux cartes */
/* Style commun aux cartes (Version "Structure Transparente") */
.projet-carte {
    
    /* Fond transparent */
    box-shadow: none;
    /* Pas d'ombre globale sur le conteneur texte+image */
    border-radius: 0;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    
    transition: transform 0.3s ease;
    overflow: visible;
}

.projet-carte:hover {
    transform: translateY(-5px);
   
}

/* Effet de survol sur l'image uniquement */
.projet-carte:hover .image-conteneur {
   
    transform: scale(1.02);
}






/* Contenu textuel des cartes - Sous l'image */
.texte-projet {
    padding: 24px 0 0 0;
    /* Espace entre image et texte */
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: auto;
}

.texte-projet h3 {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 34px;
    font-weight: 600;
    /* Plus gras comme sur l'image */
    margin: 0 0 10px 0;
    color: #0B1343;
}



@media (max-width: 768px) {
    .texte-projet h3 {
        /* Définit la taille de police à 24px pour les tablettes et les mobiles */
        font-size: 22px;
    }
}

.texte-projet p {
    font-size: 15px;
    color: #0B1343;
    /* Bleu gris lisible */
    margin: 0;
    line-height: 1.6;
    max-width: 100%;
    /* Empêche les lignes trop longues */
}


/* Aligner le texte sur la gauche de manière cohérente */
.texte-projet-gauche {
    text-align: left;
}

/* ==================== MEDIA QUERIES ==================== */

@media (min-width: 768px) {
    .texte-projet p {
        font-size: 0.8rem;
        max-width: 400px;

    }

    /* S'assurer que le grand bloc couvre la hauteur des deux petits */
    .projet-carte-grande {
        height: 100%;
    }

    /* Ajuster la grille pour que les lignes aient la bonne hauteur */
    .grille-portfolio {

        min-height: 800px;
        /* Hauteur minimale pour garantir l'alignement */
    }

    /* Garantir que toutes les zones de texte ont exactement la même hauteur */
    .texte-projet {
        min-height: 100px;
        padding-bottom: 20px;
        /* Ajout de padding en bas pour l'espacement */
    }
}

@media (max-width: 992px) {
    .grille-portfolio {
        grid-template-columns: 1fr;
        grid-template-areas:
            "grand"
            "petit1"
            "petit2";
        align-items: stretch;
        min-height: auto;
    }

    .image-conteneur.from-here,
    .image-conteneur.yubo,
    .image-conteneur.maxis {
        height: 300px;
    }

    .projet-carte-grande {
        height: auto;
    }

    .texte-projet {
        min-height: 80px;
    }
}

@media (max-width: 992px) {
    .grille-portfolio {
        grid-template-columns: 1fr !important;
        padding: 1rem;
    }

    /* Réinitialiser le positionnement des cartes pour 1 colonne */
    .projet-carte-yubo,
    .projet-carte-grande,
    .projet-carte-maxis,
    .projet-carte-fitfun {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .image-conteneur.from-here,
    .image-conteneur.yubo,
    .image-conteneur.maxis {
        height: 250px;
    }

    .texte-projet {
        min-height: 70px;
        padding: 15px 0 15px 0;
    }
}


@media (max-width: 767px) {
    /* Le conteneur principal de la grille est déjà en une colonne (grâce à max-width: 992px) */

    .projet-carte {
        /* Assurez-vous que les cartes prennent la place nécessaire */
        height: auto !important;
        min-height: auto !important;
        /* Retirez toute contrainte de marge qui pourrait causer un décalage vertical */
        margin-top: 0 !important;
    }

    /* Important : L'image conteneur doit laisser de la place au texte */
    .image-conteneur,
    .image-conteneur.from-here,
    .image-conteneur.yubo,
    .image-conteneur.maxis,
    .image-conteneur.fitfun {
        /* On retire toute hauteur fixe pour que l'image s'adapte à sa largeur */
        height: auto !important;
        max-height: 400px;
        /* Limite maximale pour les très grandes images */
    }

    /* Le texte projet doit avoir un minimum d'espace et ne pas être écrasé */
    .texte-projet {
        min-height: auto !important;
        padding-top: 20px;
        /* Assure un bon espacement sous l'image */
    }
}

#nos-services {
    width: 96%;
    max-width: 1280px;
    margin: 6rem auto;
    /* Marge au-dessus et en dessous, centré */
    text-align: center;
}

/* Titre principal et sous-titre */
.conteneur-texte-principal {
    margin-bottom: 60px;
}

.conteneur-texte-principal h1 {
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 600;
    margin-bottom: 10px;
    MAX-WIDTH: 700PX;
    line-height: 1.2;
    color: var(--couleur-texte-sombre);
    margin-left: auto;
    margin-right: auto;

    /* Ajout de la propriété pour la casse de titre */
    text-transform: capitalize;
}

/* Style du mot "Services" souligné */
.conteneur-texte-principal h1 .souligne {
    position: relative;
    /* Permet de positionner l'icône par rapport à ce mot */
    display: inline-block;
    /* S'assure que le span prend la largeur de son contenu */
}

.conteneur-texte-principal h1 .souligne::after {
    content: "";
    /* Obligatoire pour afficher le pseudo-élément */

    /* Dimensions de l'icône */
    width: 100%;
    /* Ajustez cette largeur pour votre icône */
    height: 15px;
    /* Ajustez cette hauteur pour votre icône */

    /* Positionnement pour centrer l'icône sous le mot */
    position: absolute;
    bottom: -10px;
    /* Déplace l'icône sous le mot. Ajustez cette valeur. */
    left: 0;
    /* Commence au milieu du mot */
    transform: none;
    /* Décale l'icône vers la gauche de sa propre moitié de largeur pour un centrage parfait */

    /* Affichage de l'icône PNG */
    background-image: url('https://mediaforge.agency/wp-content/uploads/2025/12/trait.png');
    /* ⬅️ REMPLACEZ 'votre-icone.png' par le chemin réel de votre fichier */
    background-size: 100% 100%;
    /* Assure que l'image s'affiche entièrement */
    background-repeat: no-repeat;
    background-position: center;
}

.conteneur-texte-principal p {
    font-size: 16px;
    color: var(--couleur-texte-sombre);
    margin-top: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;

}

@media (max-width: 768px) {
    .conteneur-texte-principal p {
        font-size: 0.76rem;
        max-width: 318px;
    }

}

/* Grille des services (les cartes) */
.grille-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 colonnes */
    gap: 30px;
    /* Espace entre les cartes */
    margin-bottom: 50px;
}

/* Style des cartes individuelles */
.carte-service {
    background-color: #F1F5FF;
    padding: 40px;
    border-radius: var(--radius);
    text-align: left;
    display: flex;
    opacity: 90%;
    flex-direction: column;
    transition: transform 0.3s ease;
    position: relative;
    /* **Étape clé 1 :** Permet de positionner l'icône absolument par rapport à cette carte */
    padding-top: 50px;
    /* **Ajustement :** Augmente l'espace en haut pour que l'icône ne chevauche pas le texte */
}

.carte-service:hover {
    transform: translateY(-5px);
    background-color: #85e7cb;
}

/* Icône bulle */
.icone-bulle {
    /* 🛑 MOBILE (Taille par défaut) 🛑 */
    width: 45px;
    /* Réduction de la largeur sur mobile (ex: 45px) */
    height: 45px;
    /* Réduction de la hauteur sur mobile (ex: 45px) */

    background-color: var(--green-primary);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(102, 199, 167, 0.2);
    position: absolute;

    /* 🛑 ANCRAGE MOBILE 🛑 */
    /* Déplace l'icône vers le haut de la moitié de sa hauteur (45px/2 = 22.5px) */
    top: -22.5px;
    left: 15px;
    /* Ajusté pour mobile (ex: 15px) */

    margin-bottom: 0;
}

/* 💻 MEDIA QUERY (pour les tablettes et desktop) 💻 */
@media (min-width: 768px) {

    /* Appliqué pour les écrans de 768px et plus */
    .icone-bulle {
        /* 🛑 DESKTOP (Taille originale) 🛑 */
        width: 60px;
        height: 60px;

        /* 🛑 ANCRAGE DESKTOP 🛑 */
        /* Déplace l'icône vers le haut de la moitié de sa hauteur (60px/2 = 30px) */
        top: -30px;
        left: 20px;
    }
}

.icone-bulle img {
    width: 50px;
    height: 50px;
    fill: #ffffff;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

.carte-service h3 {
    color: #0B1343;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.carte-service p {
    font-size: 15px;
    color: var(--couleur-texte-clair);
    line-height: 1.6;
    margin: 0 0 25px 0;
    flex-grow: 1;
    /* Assure que les cartes de différentes hauteurs s'alignent correctement */
}

/* Lien "Découvrir Plus / Commencer Maintenant" */
.carte-service a {
    color: var(--couleur-texte-sombre);
    /* Ligne modifiée/ajoutée pour souligner le texte */
    text-decoration: underline;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s;
}

@media (max-width: 767px) {

    /* Réduction pour les titres de carte (h3) */
    .carte-service h3 {
        font-size: 11px;
        /* Réduit de 20px à 16px */
        margin-bottom: 10px;
        /* Optionnel : réduit la marge pour gagner de la place */
    }

    /* Réduction pour les paragraphes de carte (p) */
    .carte-service p {
        font-size: 9px;
        /* Réduit de 15px à 13px */
        line-height: 1.5;
        /* Optionnel : réduit légèrement l'interligne */
        margin-bottom: 10px;
    }

    /* Réduction pour le lien (a) */
    .carte-service a {
        font-size: 10px;
        /* Réduit de 15px à 13px */
    }
}

.carte-service a:hover {
    color: var(--green-primary);
}


/* Bouton CTA "Voir Tous Les Services" */
.conteneur-cta {
    margin-top: 20px;
    text-align: center;
}

.bouton-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    background-color: var(--green-primary);
    color: var(--color-primary-blue);
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 15px;

}

.bouton-cta:hover {
    background-color: #4AE1B6;
    /* Vert légèrement plus foncé au survol */
    transform: translateY(-2px);
}

/* ================== MEDIA QUERIES (Adaptabilité) ================== */

@media (max-width: 992px) {
    .grille-services {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colonnes sur tablette */
    }
}

@media (max-width: 992px) {
    .grille-services {
        grid-template-columns: 1fr !important;
        /* 1 colonne sur mobile et tablette */
        padding: 1rem;
    }

    .conteneur-texte-principal h1 {
        font-size: 23px;
        line-height: 1.5;


    }

    .carte-service {
        padding: 30px;
    }
}

.word-transition {
    display: inline-block;
    min-width: 180px;
    text-align: left;
    color: linear-gradient(135deg, #4AE1B6 0%, #4776E6 100%);

}

.fade-in-vertical {
    animation: fadeInVertical 0.5s ease-in;
}

@keyframes fadeInVertical {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Assurer que le texte fixe ne bouge pas */
.hero-title {
    display: inline-block;
}

.hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background-image: url('https://mediaforge.agency/wp-content/uploads/2025/12/BGHERO.png');
    background-size: cover;
    background-position: bottom center;
    /* Aligne l'image en bas */
    background-repeat: no-repeat;
    z-index: -2;
}

/* 1. Assurez-vous que le parent (span) permet de positionner l'icône */
.header-projets h1 .souligne {
    position: relative;
    /* Permet de positionner l'icône par rapport à ce mot */
    display: inline-block;
    /* S'assure que le span prend la largeur de son contenu */
}

/* 2. Style du pseudo-élément (la "ligne" après le mot) */
.header-projets h1 .souligne::after {
    content: "";
    /* Obligatoire pour afficher le pseudo-élément */

    /* Dimensions de l'icône */
    width: 100%;
    /* Ajustez cette largeur pour votre icône */
    height: 15px;
    /* Ajustez cette hauteur pour votre icône */

    /* Positionnement pour centrer l'icône sous le mot */
    position: absolute;
    bottom: -10px;
    /* Déplace l'icône sous le mot. Ajustez cette valeur. */
    left: 0;
    /* Commence au milieu du mot */
    transform: none;
    /* Décale l'icône vers la gauche de sa propre moitié de largeur pour un centrage parfait */

    /* Affichage de l'icône PNG */
    background-image: url('https://mediaforge.agency/wp-content/uploads/2025/12/trait.png');
    /* ⬅️ REMPLACEZ 'votre-icone.png' par le chemin réel de votre fichier */
    background-size: 100% 100%;
    /* Assure que l'image s'affiche entièrement */
    background-repeat: no-repeat;
    background-position: center;
}

/* 1. Assurez-vous que le parent (span) permet de positionner l'icône */
.section-header-centered h2 .highlight-text-clients {
    position: relative;
    /* Permet de positionner l'icône par rapport à ce mot */
    display: inline-block;
    /* S'assure que le span prend la largeur de son contenu */
}

/* 2. Style du pseudo-élément (la "ligne" après le mot) */
.section-header-centered h2 .highlight-text-clients::after {
    content: "";
    /* Obligatoire pour afficher le pseudo-élément */

    /* Dimensions de l'icône (vous pouvez réutiliser les mêmes que pour 'Projets') */
    width: 100%;
    /* Ajustez cette largeur pour votre icône */
    height: 15px;
    /* Ajustez cette hauteur pour votre icône */

    /* Positionnement pour centrer l'icône sous le mot */
    position: absolute;
    bottom: -10px;
    /* Déplace l'icône sous le mot. Ajustez cette valeur. */
    left: 0;
    /* Commence au milieu du mot */
    transform: none;
    /* Décale l'icône vers la gauche de sa propre moitié de largeur pour un centrage parfait */

    /* Affichage de l'icône PNG */
    background-image: url('https://mediaforge.agency/wp-content/uploads/2025/12/trait2.png');
    /* ⬅️ REMPLACEZ 'votre-icone.png' par le chemin réel de votre fichier */
    background-size: 100% 100%;
    /* Assure que l'image s'affiche entièrement */
    background-repeat: no-repeat;
    background-position: center;
}

/* ========================================================= */
/* 1. Conteneur (.souligne-temoignage) */
/* ========================================================= */
.souligne-temoignage {
    /* Propriétés essentielles pour le positionnement de l'icône */
    position: relative;
    display: inline-block;
}

/* ========================================================= */
/* 2. Décoration (Ligne PNG sous .souligne-temoignage) */
/* ========================================================= */
.souligne-temoignage::after {
    content: "";

    /* Dimensions et contenu de l'icône */
    width: 100%;
    /* Ajustez si nécessaire. */
    height: 15px;
    /* Ajustez si nécessaire. */
    background-image: url('https://mediaforge.agency/wp-content/uploads/2025/12/trait2.png');
    /* ⬅️ CHEMIN VERS VOTRE FICHIER PNG RÉEL */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    /* Positionnement et centrage */
    position: absolute;
    bottom: -10px;
    /* Décalage vertical sous le texte. */
    left: 0;
    transform: none;
}

.section-header-centered h2 {
    /* Mise en page et Taille (identique au H1 précédent) */
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--couleur-texte-sombre);

    /* Centrage de l'élément H2 */
    MAX-WIDTH: 700PX;
    /* Limite la largeur pour que le centrage fonctionne */
    margin-left: auto;
    margin-right: auto;

    /* Gestion des marges */
    margin-top: 0;
    /* Assurez-vous qu'il n'y a pas de marge supérieure non désirée */
    margin-bottom: 10px;
    /* Marge inférieure spécifiée */

    /* Ajout de la propriété pour la casse de titre (Première lettre en Majuscule) */
    text-transform: capitalize;
}

@media (max-width: 768px) {
    .section-header-centered h2 {
        /* Définit la taille de police à 24px pour les tablettes et les mobiles */
        font-size: 24px;
        line-height: 1.6;

    }
}

@keyframes bounce-pin {

    /* Position de base (centrée et tournée) */
    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Position haute (simule le rebond, se lève de 8px) */
    50% {
        transform: translate(-50%, calc(-50% - 8px)) rotate(-45deg);
    }
}

/* Conteneur de la carte utilisant votre image 'carte.png' */
.world-map-container {
    position: relative;
    /* CRUCIAL */
    max-width: 1000px;
    margin: 0 auto;
    /* Ratio pour maintenir la hauteur de la carte (assure la place pour toutes les épingles) */
    padding-bottom: 60%;
    overflow: visible;
    /* AJOUTEZ CELA si vous voulez que les pins puissent déborder un peu */
}

/* ========================================================= */
/* CSS Custom pour l'animation du menu mobile (REQUIRED) */
/* Animation Dropdown verticale et Glassmorphism sur le panneau */
/* ========================================================= */

/* 1. État initial du conteneur (Backdrop) : caché */
#mobile-menu-sidebar {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* 2. État initial du contenu du menu : caché et hauteur zéro (animation verticale) */
#sidebar-content {
    max-height: 0;
    /* Hauteur initiale zéro pour l'animation déroulante */
    overflow: hidden;
    /* Cache le contenu */
    transition: max-height 0.4s ease-in-out;
    /* Animation verticale */
}

/* 3. Classe "is-open" (ajoutée par JS) : Le conteneur est visible */
.is-open {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Quand le conteneur est ouvert, le panneau s'ouvre verticalement */
.is-open #sidebar-content {
    /* Définit une hauteur maximale pour que l'effet de déploiement soit visible */
    max-height: calc(100vh - 5.5rem);
}

/* Applique le style glassmorphism au contenu du menu */
.sidebar-glass {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    /* Important : Supprime la bordure supérieure pour la continuité avec le header */
    border-top: none;
}







/* Conteneur principal qui couvre toute la page */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    /* Léger fond pour le contraste */
    z-index: 9999;
    /* Assurez-vous qu'il est au-dessus de tout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out;
    /* Pour le fade out */
}

/* -------------------------------------------------------------------------------- */
/* ANIMATIONS DU LOGO ET TEXTE (MEDIAFORGE) */
/* -------------------------------------------------------------------------------- */

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Styles pour l'icône */
.app-icon {
    width: 120px;
    height: 120px;
    opacity: 0;
    /* Apparaît via zoomOutFadeIn */
    animation: zoomOutFadeIn 0.8s ease-out forwards;
    object-fit: contain;
    z-index: 2;
    /* Au-dessus du cercle */
}

/* NOUVELLE ANIMATION : CERCLE TOURNANT AUTOUR DU LOGO (Sleek Ring) */
.loader-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid transparent;
    /* Couleur de l'anneau : Côté visible en vert, le reste transparent */
    border-top-color: #4AE1B6;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;

    animation: spin-ring 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Optionnel: Un deuxième anneau plus lent pour effet premium */
.loader-ring::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #0B1343;
    /* Bleu foncé */
    opacity: 0.5;
    animation: spin-ring 2.5s linear infinite;
}

@keyframes spin-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes zoomOutFadeIn {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Styles pour le texte animé 'MediaForge' */
.shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Effet nuage/explosion : Dégradé radial Blanc/Vert */
    background: radial-gradient(circle, rgba(74, 225, 182, 0.3) 0%, rgba(255, 255, 255, 0.8) 40%, transparent 70%);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* === ANIMATIONS DE SORTIE (BOOM EFFECT) === */

/* 1. Container Global : Fade Out Scale avec délai pour laisser l'explosion se voir */
.boom-exit {
    animation: bg-fade-zoom 0.8s ease-out 0.2s forwards;
    pointer-events: none;
}

/* 2. Logo : Contraction (anticipation) puis Explosion (Zoom énorme) */
.boom-exit .logo-container {
    animation: logo-explosion 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

/* 3. Shockwave : Expansion rapide */
.boom-exit .shockwave {
    animation: expand-wave 0.8s ease-out forwards;
}

@keyframes expand-wave {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(15);
        /* Devient immense */
    }
}

@keyframes logo-explosion {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.8);
    }

    /* Recul */
    100% {
        transform: scale(8);
        opacity: 0;
        filter: blur(10px);
    }

    /* Boom */
}

@keyframes bg-fade-zoom {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.loader {
    -webkit-perspective: 700px;
    perspective: 700px;
    font-size: 80px;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);



    /* Poids de la police : SemiBold (600) */
    font-weight: 600;

    /* Couleur du texte par défaut (Bleu Foncé #0B1343) */
    color: #0B1343;
}

.loader>span {
    display: inline-block;
    animation: flip 2.6s infinite linear;
    transform-origin: 0 70%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    color: #0B1343;

}

@keyframes flip {
    35% {
        transform: rotateX(360deg);
    }

    100% {
        transform: rotateX(360deg);
    }
}

.loader>span:nth-child(n+6) {
    color: #4AE1B6;
}

/* FORGE color */
.loader>span:nth-child(2) {
    animation-delay: 0.1s;
}

.loader>span:nth-child(3) {
    animation-delay: 0.2s;
}

.loader>span:nth-child(4) {
    animation-delay: 0.3s;
}

.loader>span:nth-child(5) {
    animation-delay: 0.4s;
}

.loader>span:nth-child(6) {
    animation-delay: 0.5s;
}

.loader>span:nth-child(7) {
    animation-delay: 0.6s;
}

.loader>span:nth-child(8) {
    animation-delay: 0.7s;
}

.loader>span:nth-child(9) {
    animation-delay: 0.8s;
}

.loader>span:nth-child(10) {
    animation-delay: 0.9s;
}



/* -------------------------------------------------------------------------------- */
/* RESPONSIVITÉ MOBILE */
/* -------------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .logo-container {
        gap: 5px;
    }

    .app-icon {
        width: 100px;
        height: 100px;
    }

    .loader {
        font-size: 40px;
    }

    .status-container {
        font-size: 0.7rem;
        margin-top: 24px;
    }

    .line-sweep {
        width: 100px;
        height: 2px;
    }
}

@media (max-width: 767px) {
    .footer-legal-mobile {
        display: none !important;
    }
}


/* =================================================== */
/* Styles par défaut (Desktop) */
/* =================================================== */

/* Masquer par défaut les éléments Mobile sur Desktop */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}


/* =================================================== */
/* MEDIA QUERY : Écrans de Mobile (max-width: 767px) */
/* =================================================== */

/* =================================================== */
/* Styles par défaut (Desktop) */
/* =================================================== */

/* Masquer par défaut les éléments Mobile sur Desktop */
.mobile-only {
    display: none;
}

/* Afficher par défaut les éléments Desktop */
.desktop-only {
    display: block;
}


/* =================================================== */
/* MEDIA QUERY : Écrans de Mobile (max-width: 767px) */
/* =================================================== */

@media (max-width: 768px) {

    /* 1. GESTION DE LA VISIBILITÉ */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    /* 2. CONFIGURATION LAYOUT (CÔTE À CÔTE) - CLÉ : display: flex */


    /* 3. DIMENSIONNEMENT ET ALIGNEMENT DES COLONNES */

    /* Force les deux colonnes à 50% ET ALIGNEMENT À GAUCHE */
    /* ================================================= */
    /* A. CONTENEUR PARENT DU PIED DE PAGE (Pour 50/50) */
    /* ================================================= */
    .footer-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer-bottom-bar {

        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* ================================================= */
    /* B. MISE EN PAGE DES COLONNES (50% de largeur) */
    /* ================================================= */
    .footer-content .footer-col.mobile-only {
        width: 50%;
        box-sizing: border-box;
        margin: 0;
        text-align: left !important;
        padding: 20px 0 0 0;

    }

    /* ================================================= */
    /* C. ALIGNEMENT DES LISTES */
    /* ================================================= */
    .footer-col.links-group.mobile-only ul {
        list-style: none;
        padding-left: 0;
    }

    /* ================================================= */
    /* D. ALIGNEMENT ET ESPACEMENT DES ÉLÉMENTS DE CONTACT (MODIFIÉ ET VERTICAL) */
    /* ================================================= */

    /* Conteneur pour l'espacement horizontal */
    .contact-group.mobile-only {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        /* IMPORTANT : permet aux items de sauter à la ligne si nécessaire */
        width: 100%;
        padding: 0;
    }

    /* Éléments individuels de contact */
    .contact-group.mobile-only .contact-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        /* 🔑 CLÉ DE L'ESPACEMENT VERTICAL UNIFORME */
        margin: 0px 0 10px 0 !important;
        /* Ajoute 10px de marge en bas (vertical) */
        /* Les autres marges restent à 0 pour ne pas interférer avec justify-content: space-around */
    }

    /* Ordre visuel : Icône (1) puis Texte (2) */
    .contact-group.mobile-only .contact-icon {
        order: 1;
        margin-right: 5px !important;
        margin-left: 0 !important;
    }

    .contact-group.mobile-only .contact-value {
        order: 2;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-main-content {
        padding: 0px 0 0px 0;
    }
}


#protected-content {
    -webkit-user-select: none;
    /* Safari / Chrome */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Standard */
    -webkit-touch-callout: none;
    /* Empêche le menu contextuel au long-press sur iOS/Android */
    -webkit-user-drag: none;
    /* Empêche le glisser-déposer */
}

/* Protection spécifique pour les images (empêche le téléchargement par glisser/long-press) */
#protected-content img {
    pointer-events: none;
    /* L'image n'est plus la cible de la souris/touch, le clic passe au travers (vers le lien parent si présent) */
    -webkit-user-drag: none;
}

/* ==========================================
   CONTACT POPUP STYLES
   ========================================== */

#contact-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* Couleur #000000 avec opacité 0.5 comme demandé */
    display: none;
    /* Masqué par défaut */
    justify-content: center;
    align-items: center;
    z-index: 99999;
    padding: 20px;
    backdrop-filter: blur(5px);
}

#contact-popup-overlay.active {
    display: flex;
}

/* Container Principal (Desktop par défaut) */
.popup-container {
    position: relative;
    width: 1080px;
    /* Réduit de 1280px */
    height: 650px;
    /* Réduit de 769px */
    background: #F1F5FF;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Gradients de fond Desktop */
.gradient-1,
.gradient-2 {
    position: absolute;
    width: 826px;
    height: 389px;
    background: rgba(74, 225, 182, 0.4);
    filter: blur(271.95px);
    z-index: 0;
}

.gradient-1 {
    left: -100px;
    top: 127px;
}

.gradient-2 {
    right: -100px;
    bottom: -100px;
}

.popup-container .logo-container {
    position: absolute;
    left: 60px;
    top: 60px;
    z-index: 2;
}

.popup-container .logo-img {
    height: 50px;
    width: auto;
}

/* Bouton Fermer */
.popup-container .close-btn {
    position: absolute;
    width: 52px;
    height: 52px;
    right: 21px;
    top: 22.5px;
    background: rgba(67, 186, 152, 0.12);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    z-index: 10;
    transition: background 0.2s;
}

.popup-container .close-btn:hover {
    background: rgba(67, 186, 152, 0.2);
}

.popup-container .left-info-frame {
    position: absolute;
    width: 480px;
    left: 60px;
    top: 155px;
    display: flex;
    flex-direction: column;
    gap:20px;
    z-index: 2;
}

.popup-container .sub-project {
    font-size: 18px;
    color: #0B1343;
}

.popup-container .main-title {
    
    font-weight: 600;
    font-size: 38px;
    line-height: 1.2;
    color: #0B1343;
}

.popup-container .highlight-wrapper {
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, #0B1343 23.08%, #4AE1B6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.popup-container .underline-svg {
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
}

.popup-container .desc-text {
    font-size: 18px;
    line-height: 1.5;
    color: #0B1343;
    max-width: 503px;
}

.popup-container .contact-section {
    position: absolute;
    left: 60px;
    bottom: 60px;
    z-index: 2;
}

.popup-container .contact-label {
    font-weight: 600;
    font-size: 28px;
    color: #0B1343;
    margin-bottom: 25px;
}

.popup-container .contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popup-container .contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(11, 19, 67, 0.6);
    font-size: 18px;
    text-decoration: none;
}

.popup-container .contact-row svg {
    width: 24px;
    height: 24px;
    fill: #0B1343;
}

.popup-container .contact-form-box {
    position: absolute;
    width: 460px;
    height: 560px;
    right: 70px;
    top: 50px;
    background: #43BA98;
    border-radius: 21px;
   
    display: flex;
    flex-direction: column;
    
    z-index: 5;
    padding:20px; /* Augmenté pour plus d'air */
    gap: 20px !important; /* Espacement standardisé entre les groupes */
    justify-content: flex-start;
}

.popup-container .field-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popup-container .field-label {
    font-weight: 600;
    font-size: 14px;
    color: #FBFBFB;
    margin-top: 10px;
    
}

.popup-container .input-wrapper {
    background: rgba(74, 225, 182, 0.3);
    border: 1px solid #FBFBFB;
    border-radius: 8px;
    padding: 12px 20px;
}

.popup-container .input-field,
.popup-container .textarea-field {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Montserrat Alternates';
    font-size: 15px;
    color: #FFFFFF;
    padding: 8px 1px;
}

.popup-container .textarea-field {
    height: 90px;
    resize: none;
}

.popup-container .input-field::placeholder,
.popup-container .textarea-field::placeholder {
    color: #FBFBFB;
    opacity: 0.7;
}

.popup-container .submit-btn {
    margin-top: 23px;
    align-self: flex-end;
    /* Aligné à droite pour libérer de l'espace à gauche */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px 5px 15px;
    width: 240px;
    height: 45px;
    background: #F1F5FF;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.popup-container .status-msg,
.popup-container .php-msg {
    position: absolute;
    bottom: 40px;
    /* Centrage vertical sur la ligne du texte du bouton (bouton = 80px) */
    right: 255px;
    /* Juste à gauche du bouton (240px + marge) */
    display: none;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    z-index: 20;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    transform: translateY(50%);
    /* Ajustement pour centrage parfait sur la ligne médiane */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}

.popup-container .status-msg:not(:empty),
.popup-container .php-msg {
    display: flex;
}

.popup-container .status-msg.loading,
.popup-container .status-msg.success,
.popup-container .php-msg[style*="color: #FFFFFF"] {
    color: #FFFFFF !important;
}

.popup-container .status-msg.error,
.popup-container .php-msg[style*="color: #ffcccc"] {
    color: #EF4444 !important;
    /* Texte rouge vif */
}

/* Style pour les champs en erreur */
.popup-container .input-wrapper.field-error {
    border-color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.popup-container .submit-text {
    font-weight: 600;
    font-size: 16px;
    color: #43BA98;
}

.popup-container .icon-circle {
    width: 30px;
    height: 30px;
    background: #43BA98;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-container .icon-circle img {
    width: 25px;
    height: 25px;
}

/* ==========================================
   VERSION MOBILE AJUSTÉE
   ========================================== */
@media (max-width: 1024px) {
    .popup-container {
        width: 100%;
        max-width: 768px;
        height: auto;
        min-height: 600px;
        transform: scale(0.9);
    }
}

@media (max-width: 768px) {
    #contact-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
    }

    #contact-popup-overlay.active {
        display: flex;
    }

    .popup-container {
        width: 360px;
        /* Agrandi de 328px à 360px */
        height: 680px;
        /* Agrandi de 616px à 680px */
        background: linear-gradient(180deg, #43BA98 0%, #1E5445 362.42%);
        border-radius: 30px;
        position: relative;
        overflow: hidden;
        margin: 0;
    }

    .popup-container .gradient-1,
    .popup-container .gradient-2,
    .popup-container .logo-container,
    .popup-container .contact-section,
    .popup-container .desc-text {
        display: none;
    }

    .popup-container .close-btn {
        position: absolute;
        width: 36px;
        height: 36px;
        top: 20px;
        right: 20px;
        background: rgba(241, 245, 255, 0.2);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        border: none;
    }

    .popup-container .close-btn img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }

    .popup-container .left-info-frame {
        position: absolute;
        width: 300px;
        left: calc(50% - 150px);
        top: 40px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 10;
    }

    .popup-container .main-title {
        font-size: 22px;
        /* Augmenté de 19px */
        line-height: 1.2;
        color: #FBFBFB;
        margin: 0;
        font-weight: 700;
    }

    .popup-container .sub-project {
        font-size: 14px;
        line-height: 1.4;
        color: #FBFBFB;
        margin-top: 5px;
    }

    .popup-container .highlight-wrapper {
        color: #FBFBFB;
        -webkit-text-fill-color: #FBFBFB;
    }

    .popup-container .underline-svg {
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        filter: brightness(0) invert(1);
    }

    .popup-container .left-info-frame {
        position: absolute;
        width: 300px;
        left: calc(50% - 150px);
        top: 35px;
        /* Légèrement remonté */
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 10;
    }

    .popup-container .contact-form-box {
        position: absolute;
        width: 310px;
        height: auto;
        left: calc(50% - 155px);
        top: 160px;
        background: #43BA98;
        /* STYLE DESKTOP */
        border-radius: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 5;
    }

    .popup-container .field-group {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .popup-container .field-label {
        font-weight: 600;
        
        font-size: 13px;
        color: #FBFBFB;
        text-align: left;
    }

    .popup-container .input-wrapper {
        background: rgba(74, 225, 182, 0.3);
        border: 1px solid #FBFBFB;
        border-radius: 8px;
        padding: 0 15px;
        height: 46px;
        /* TAILLE UNIFORME NOM, TEL, EMAIL */
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    /* Description (5ème field-group) */
    .popup-container .field-group:nth-of-type(5) .input-wrapper {
        height: 90px;
        align-items: flex-start;
        padding-top: 10px;
    }

    .popup-container .input-field,
    .popup-container .textarea-field {
        width: 100%;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        font-family: 'Montserrat Alternates', sans-serif;
        font-size: 14px;
        color: #FFFFFF !important;
        padding: 0;
    }

    .popup-container .input-field::placeholder,
    .popup-container .textarea-field::placeholder {
        color: rgba(251, 251, 251, 0.8) !important;
        opacity: 1 !important;
    }

   .popup-container .submit-btn {
    margin-top: 15px; /* Crée une séparation nette avec le formulaire */
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 25px; /* Plus de padding à gauche pour équilibrer le texte */
    width: 200px; /* Taille plus standard */
    height: 45px; /* Hauteur réduite pour un look plus moderne */
    background: #F1F5FF;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease; /* Animation fluide au survol */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.popup-container .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    background: #FFFFFF;
}

/* Ajustement du cercle de l'icône dans le bouton */
.popup-container .icon-circle {
    width: 38px;
    height: 38px;
    background: #43BA98;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .popup-container .submit-text {
        font-size: 12px;
        /* TEXTE PLUS PETIT */
        font-weight: 600;
        color: #43BA98;
    }

    .popup-container .icon-circle {
        width: 26px;
        /* PLUS COMPACT */
        height: 26px;
        background: #43BA98;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .popup-container .icon-circle img {
        width: 24px;
        /* RATIO IDENTIQUE DESKTOP */
        height: 24px;
        display: block;
    }

    .popup-container .status-msg,
    .popup-container .php-msg {
        position: relative;
        width: 100%;
        margin-top: 10px;
        font-size: 13px;
        font-weight: 700;
        display: none;
        text-align: center;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .popup-container .status-msg:not(:empty),
    .popup-container .php-msg {
        display: block;
    }

    .popup-container .status-msg.loading,
    .popup-container .status-msg.success,
    .popup-container .php-msg[style*="color: #FFFFFF"] {
        color: #FFFFFF !important;
    }

    .popup-container .status-msg.error,
    .popup-container .php-msg[style*="color: #ffcccc"] {
        color: #EF4444 !important;
    }

    /* Champ en erreur sur mobile */
    .popup-container .input-wrapper.field-error {
        border-color: #EF4444 !important;
        background: rgba(239, 68, 68, 0.15) !important;
    }

}

/* ==========================================
   THANK YOU SCREEN & ENVELOPE ANIMATION
   ========================================== */
.thank-you-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* Utilise le fond du parent */
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding: 20px;
    text-align: center;
    color: #FFFFFF;
    animation: fadeIn 0.5s forwards;
    border-radius: inherit;
    /* Utilise l'arrondi du parent */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .thank-you-screen {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 400px !important;
        background: transparent !important;
        padding: 0 !important;
        /* On utilise le padding du parent contact-form-box */
        margin: 0 !important;
    }

    .thank-you-title {
        font-size: 24px !important;
        margin-top: 10px !important;
    }

    .thank-you-text {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .envelope-animation {
        transform: scale(0.85);
        margin-bottom: 20px !important;
    }
}

.thank-you-content {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.thank-you-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

.thank-you-text {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0;
}

.close-thank-you {
    margin-top: 15px;
    padding: 12px 35px;
    background: #F1F5FF;
    color: #43BA98;
    border: none;
    border-radius: 100px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s;
}

.close-thank-you:hover {
    transform: scale(1.05);
}

/* Animation Enveloppe */
.envelope-animation {
    position: relative;
    width: 120px;
    height: 80px;
    margin-bottom: 30px;
}

.envelope {
    position: relative;
    width: 100%;
    height: 100%;
    background: #F1F5FF;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.envelope::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 60px 0 60px;
    border-color: #E2E8F0 transparent transparent transparent;
    z-index: 2;
}

.lid {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 60px 0 60px;
    border-color: #F1F5FF transparent transparent transparent;
    z-index: 10;
    transform-origin: top;
    transition: transform 0.6s 0.2s;
}

.paper {
    position: absolute;
    bottom: 5px;
    left: 10px;
    width: 100px;
    height: 70px;
    background: #FFFFFF;
    z-index: 5;
    transition: transform 0.6s 0.8s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.letter-content img {
    width: 50px;
    height: auto;
}

/* État animé */
.thank-you-screen.active .lid {
    transform: rotateX(180deg);
    z-index: 1;
}

.thank-you-screen.active .paper {
    transform: translateY(-50px);
}