/* ==========================================================================
   1. VARIABLES, TYPOGRAPHIES & CONFIGURATION GENERALE
   ========================================================================== */

/* ==========================================================================
   POLICES LOCALES (OPTIMISATION & INDÉPENDANCE)
   ========================================================================== */

/* ANTON */
@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('data/fonts/anton-v27-latin-regular.woff2') format('woff2');
}

/* TENOR SANS */
@font-face {
    font-family: 'Tenor Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('data/fonts/tenor-sans-v21-latin-regular.woff2') format('woff2');
}

/* QUESTRIAL */
@font-face {
    font-family: 'Questrial';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('data/fonts/questrial-v19-latin-regular.woff2') format('woff2');
}

/* INTER */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('data/fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('data/fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('data/fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('data/fonts/inter-v20-latin-700.woff2') format('woff2');
}

html, body {
    /* Empêche Safari de zoomer bizarrement sur le texte lors du passage en paysage */
    -webkit-text-size-adjust: 100%; 
}

:root {
    /* Palette de couleurs (Nuances douces et contrastées) */
    --color-bg-desktop: #f4f1ea;
    --color-bg-mobile: #ffffff;
    --color-text-dark: #2c3e50;
    --color-text-light: #ffffff;
    
    /* Typographies Standard */
    --font-main-titles: 'Tenor Sans', sans-serif;
    --font-main-body: 'Inter', sans-serif;
    
    /* Typographies Spécifiques Segment Mème "???" */
    --font-meme-titles: 'Anton', sans-serif;
    --font-meme-body: 'Questrial', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main-body);
    color: var(--color-text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-color: var(--color-bg-mobile);
}

/* Configuration Desktop (Blobs en fond localisés) */
@media (min-width: 769px) {
    body {
        background-color: var(--color-bg-desktop);
    }

    /* On applique le fond .png uniquement sur le bloc central de la roue */
    .wheel-and-text-wrapper {
        background-image: url('data/assets/blobs-background.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover; /* Évite de trop zoomer/déformer tes blobs */
        width: 100%;
    }
}

/* Application de Tenor Sans sur les titres du site */
.cv-header h1, 
.cv-header h2,
.achievements-container h3,
.modal-box h2.category-title {
    font-family: var(--font-main-titles);
    font-weight: normal;
}

/* Modification des graisses pour le texte de la modal */
.modal-box p strong {
    font-weight: 700; /* Inter Bold pour faire ressortir les mots clés */
}

.modal-box p .text-light {
    font-weight: 300; /* Inter Light pour le jargon plus discret */
    opacity: 0.8;
}

/* ==========================================================================
   2. BLOC HEADER (Design Épuré & Identité CV)
   ========================================================================== */

/* ==========================================================================
   2. BLOC HEADER (Design Unifié & Centré Verticalement - Desktop)
   ========================================================================== */
.cv-header {
    display: flex;
    flex-direction: column; /* Tout s'aligne verticalement */
    align-items: center;    /* Centrage horizontal parfait */
    justify-content: center;
    padding: 30px 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(5px);
    width: 100%;
    font-family: 'Tenor Sans', sans-serif;
    gap: 20px; /* Espace constant entre l'identité et le bloc de boutons */
}

.header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0px;
}

/* Conteneur du nom courbé */
.brand-curve-container {
    width: 460px;
    height: 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-svg {
    width: 100%;
    height: 100%;
}

.brand-text {
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 24px;
    fill: var(--color-text-dark);
    letter-spacing: 3px;
}

.header-left h2.brand-title {
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 0.95rem;
    color: #566573;
    letter-spacing: 5px;
    font-weight: normal;
    margin: 4px 0 0 0;
}

/* --- Bloc Boutons CTA Centré --- */
.header-right {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.header-right .btn-cta {
    font-family: 'Tenor Sans', sans-serif !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: normal;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-phone { background-color: #636f63; color: #ffffff; }
.btn-email { background-color: #1A2B3C; color: #ffffff; }
.btn-view-cv { background-color: #e8dfd1; color: #2c3e50; }

.btn-cta:hover { 
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

@media (max-width: 768px) {
    .cv-header {
        padding: 20px 15px !important;
        gap: 15px !important;
    }
    
    .brand-curve-container {
        width: 100% !important;
        max-width: 350px !important;
        height: 42px !important;
    }
    
    .brand-text {
        font-size: 23px !important;
        letter-spacing: 1px !important;
    }
    
    .header-left h2.brand-title { 
        font-size: 0.72rem !important; 
        letter-spacing: 1.5px !important;
        white-space: nowrap !important;
        margin: 2px 0 0 0 !important;
    }
    
    .header-right {
        width: 100% !important;
        gap: 8px !important;
    }
    
    .header-right .btn-cta {
        flex: 1 !important; 
        padding: 10px 4px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        gap: 4px !important;
    }
    
    .btn-icon {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ==========================================================================
   3. BLOC CENTRAL : ZONE DE LA ROUE
   ========================================================================== */
.main-content {
    flex: 0.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Aligne la roue vers le haut */
    padding: 20px 20px 0 20px;   /* On réduit le padding du bas à 0 */
    width: 100%;
}

.wheel-container {
    position: relative;
    width: 360px;
    height: 360px;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Le disque de la roue : 10 secteurs (9 classiques alternés + 1 segment unique "???") */
.wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid var(--color-text-dark);
    
    background: conic-gradient(
        /* Tour de chauffe alterné (Secteurs 1 à 3) */
        #636f63 0deg 36deg,     /* Success Story */
        #a68966 36deg 72deg,    /* Deep Dive */
        #e8dfd1 72deg 108deg,   /* Vision */
        
        /* Deuxième alternance (Secteurs 4 à 6) */
        #636f63 108deg 144deg,  /* Success Story */
        #a68966 144deg 180deg,  /* Deep Dive */
        #e8dfd1 180deg 216deg,  /* Vision */
        
        /* Troisième alternance (Secteurs 7 à 9) */
        #636f63 216deg 252deg,  /* Success Story */
        #a68966 252deg 288deg,  /* Deep Dive */
        #e8dfd1 288deg 324deg,  /* Vision */
        
        /* LE SEGMENT MYSTÈRE UNIQUE (Secteur 10) */
        #880e4f 324deg 360deg   /* ??? (Mèmes) */
    );
    
    position: absolute;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transition: transform 5s cubic-bezier(0.1, 0.8, 0.3, 1); 
}

.wheel-pointer {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.2rem;
    color: var(--color-text-dark);
    z-index: 10;
}

.btn-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid white;
    background-color: var(--color-text-dark);
    color: white;
    font-family: var(--font-main-titles);
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bouton passer l'animation */
.btn-skip {
    padding: 10px 20px;
    background-color: #1A2B3C ;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-family: var(--font-main-body);
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.3s ease, background-color 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    /* Réduction de la largeur à 50% */
    width: 50% !important;
    
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    /* On lui donne une largeur max fixe sur Desktop pour éviter l'effet "gros pavé" */
    width: 200px !important;

}

.btn-skip:hover {
    background-color: rgba(44, 62, 80, 1);
}

/* Utilitaires de masquage */
.hidden { display: none !important; }

@media (max-width: 768px) {
    /* Sur mobile, on peut vouloir que le bouton "Passer l'animation" reprenne 50% de la largeur de l'écran */
    .btn-skip {
        width: 50% !important;
    }
}

/* ==========================================================================
   4. BLOC BAS : LES SUCCÈS (ACHIEVEMENTS)
   ========================================================================== */
.achievements-container {
    padding: 30px 20px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
}

.achievements-container h3 {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.badges-list {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.badge {
    /* 1) Flexibilité totale sans déformation (fini le débordement et l'ovale) */
    width: 70px;
    max-width: 100%;
    aspect-ratio: 1 / 1 !important; /* Force le ratio parfait, horizontalement et verticalement */
    flex-shrink: 1; /* Autorise les badges à réduire proprement ensemble si l'écran est très étroit */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 2) Masquage des coins carrés du fichier image */
    border-radius: 50% !important; /* Recoupe les angles droits de l'image pour la rendre parfaitement ronde */
    overflow: hidden !important;
    
    background-color: transparent; 
    box-shadow: none;  
    
    /* 3) Intégration de l'image */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important; 
    
    transition: all 0.3s ease;
}

/* Style quand un badge est verrouillé */
.badge.locked {
    filter: grayscale(100%) contrast(1.2) blur(0.5px);
    opacity: 0.45; /* Légèrement remonté pour garder de la lisibilité sur le chiffre */
}

/* ==========================================================================
   5. MODALS & TOAST BANNER (BASE & DESKTOP SANCTUARISÉ)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Version Desktop validée */
.modal-box {
    position: relative;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    max-width: 700px; /* Ta modification validée */
    width: 100%;       /* Ta modification validée */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.modal-box h2.category-title {
    margin-bottom: 10px; /* Ta modification validée */
}

/* --- BADGE ENTREPRISE (MODAL) --- */
.modal-company-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 10px !important;
    margin-bottom: 2px !important;
    padding: 4px 10px !important;
    
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px dotted currentColor !important; 
    border-radius: 20px !important;
    opacity: 0.85 !important;
    
    font-family: var(--font-main-body) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    width: fit-content !important;
}

.modal-company-badge .company-icon {
    font-size: 0.85rem !important;
    filter: grayscale(100%);
}

.modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
}

.modal-box p {
    font-family: var(--font-main-body);
    font-size: 0.95rem;
    text-align: justify;
    line-height: 1.5;
    word-break: break-word;
}

/* Alignement du bouton Fermer sur Desktop */
.modal-footer {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.modal-box .btn-skip {
    width: 160px !important;
}

/* --- BOUTON DE FERMETURE DE LA MODAL (STYLE INTEGRAL ANCRE) --- */
.btn-close-modal {
    display: block !important;
    width: 100% !important;
    max-width: 150px !important;
    margin: 0 auto !important;
    padding: 12px 24px !important;
    border: none !important;
    
    font-family: var(--font-main-body) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: opacity 0.2s ease, transform 0.1s ease !important;
}

/* --- ADAPTATION FORCEE DU FOND ET DU TEXTE SELON LA CATEGORIE --- */

/* 1. Catégories à fond sombre (Bouton fond Blanc, Texte Sombre) */
.modal-success-story .btn-close-modal,
.modal-meme-dark .btn-close-modal {
    background-color: #f9f9f9 !important;
    color: #010000 !important;
}

/* 2. Catégories à fond clair (Bouton fond Sombre, Texte Blanc) */
.modal-deep-dive .btn-close-modal,
.modal-vision .btn-close-modal {
    background-color: #010000 !important;
    color: #f9f9f9 !important;
}

/* Classes dynamiques de couleurs */
.modal-success-story { background-color: #636f63 !important; color: #f9f9f9 !important; }
.modal-deep-dive { background-color: #a68966 !important; color: #010000 !important; }
.modal-vision { background-color: #e8dfd1 !important; color: #010000 !important; }
.modal-meme-dark { background-color: #880e4f !important; color: #f9f9f9 !important; }

.modal-meme-style { font-family: var(--font-meme-body) !important; }
.modal-meme-style h2 {
    font-family: var(--font-meme-titles) !important;
    text-transform: uppercase;
    font-size: 2.4rem;
}



/* Effet au survol sur Desktop (Léger changement d'opacité) */
@media (min-width: 769px) {
    .btn-close-modal:hover {
        opacity: 0.85 !important;
        transform: scale(1.02);
    }
}

/* Version Mobile compacte */
@media (max-width: 768px) {
    .btn-close-modal {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }
}
/* ==========================================================================
   ROBUSTE MOBILE UI (Header ajusté & Modal Plein écran sans Zoom)
   ========================================================================== */
@media (max-width: 768px) {
    
/* 1. RECADRAGE DU HEADER ET DES BOUTONS CTA (Fixe la roue décalée) */
    .cv-header {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
        padding: 15px 20px !important;
    }
    
    /* RETOUCHE : On cible le nouveau sélecteur, on réduit et on force la ligne unique */
    .header-left h1.brand-name { 
        font-size: 1.2rem !important; 
        letter-spacing: 1px !important;
        white-space: nowrap !important;
    }
    
    /* AJOUT : Légère compensation d'espacement pour le nom de famille */
    .header-left .last-name {
        letter-spacing: 2px !important;
    }
    
    /* RETOUCHE : On cible le nouveau sous-titre pour le faire tenir en une ligne */
    .header-left h2.brand-title { 
        font-size: 0.75rem !important; 
        letter-spacing: 1.5px !important;
        white-space: nowrap !important;
    }
    
    /* INCHANGÉ : Ta structure qui aligne parfaitement tes 3 boutons côte à côte */
    .header-right {
        width: 100% !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .header-right .btn-cta {
        flex: 1 !important; 
        justify-content: center !important;
        padding: 10px 8px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }

    /* --- 2. VERROUILLAGE DE LA MODAL (ANTI-ZOOM ET FORCE SYSTEME) --- */
    .modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important; /* Force l'overlay à s'arrêter pile au-dessus de la barre Edge/Android */
        height: auto !important; /* Annule l'usage du svh/vh */
        width: 100% !important;
        align-items: flex-start !important;
        overflow: hidden !important;
    }

    .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important; /* La box épouse l'overlay de force */
        left: 0 !important;
        height: auto !important; /* Plus de calcul d'unité de hauteur */
        max-height: none !important;
        border-radius: 0 !important;
        padding: 20px !important;
        margin: 0 !important;
        
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .modal-header {
        flex-shrink: 0 !important;
        padding-top: 25px !important;
    }

    .modal-box h2, .category-title {
        padding-right: 85px !important;
        box-sizing: border-box !important;
    }

    .modal-company-badge {
        display: flex !important;
        font-size: 0.75rem !important;
        padding: 3px 8px !important;
    }

    .modal-body {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .modal-footer {
        flex-shrink: 0 !important;
        margin-top: auto !important;
        padding-bottom: env(safe-area-inset-bottom, 10px) !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        /* Le "position: fixed" est supprimé ici, c'est lui qui créait le bug d'affichage */
    }

    .modal-box .btn-skip {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .modal-category-badge {
        top: 15px !important;
        right: 15px !important;
    }

    /* Règles Spécifiques poru la modal "Offre Exceptionnelle" */ 

.modal-offre-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .modal-offre-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* Ajustements des paddings sur mobile pour maximiser l'espace */
    .modal-offre-header { padding: 15px 20px 10px 20px; }
    .modal-offre-text-container { padding: 15px 20px; }
    .modal-offre-footer { padding: 10px 20px 20px 20px; }



}

/* ==========================================================================
   6. GLOSSAIRE (VERSION INTEGRALE & DEPORTEE SANS TRONCATURE)
   ========================================================================== */
.glossaire-terme {
    border-bottom: 2px dashed currentColor !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-block !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent;
}

/* Désactivation définitive des anciennes infobulles CSS qui se faisaient tronquer */
.glossaire-terme::after,
.glossaire-terme::before {
    display: none !important;
    content: "" !important;
}

/* --- L'INFOBULLE UNIQUE ET GLOBALE (INJECTEE DANS LE BODY) --- */
.custom-tooltip {
    position: fixed !important;
    bottom: 30px !important; /* Calée en bas de l'écran */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 500px !important; /* Largeur confort sur desktop */
    background-color: #1e293b !important; /* Fond sombre élégant (Slate 800) */
    color: #ffffff !important;
    padding: 16px 18px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
    z-index: 99999 !important; /* Passe au-dessus de tout, même de la modal */
    font-family: var(--font-main-body) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    pointer-events: none; /* Évite que l'infobulle ne gêne la souris */
    animation: apparitionTooltip 0.2s ease-out;
}

/* Le petit badge "?" au centre en haut de l'infobulle */
.custom-tooltip-badge {
    position: absolute !important;
    top: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    background-color: #1e293b !important;
    color:#f9f9f9 !important;
    border: 2px solid #f9f9f9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-main-body) !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2) !important;
}

/* Le rappel du mot-clé AVEC LA LIGNE SEPARATRICE UNIFIEE */
.custom-tooltip-header {
    font-family: var(--font-main-title);
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    
    /* Intégration de la ligne séparatrice */
    border-bottom: 1px solid #ffffff !important; 
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

/* Le texte de la définition */
.custom-tooltip-body {
    font-family: var(--font-main-body);
    font-size: 0.85rem;
    opacity: 0.9;
    text-align: center;
}

/* Style spécifique, fin et isolé pour l'infobulle des badges */
.tooltip-badge {
    position: absolute; /* Crucial pour le positionnement JS */
    pointer-events: none;
    background: #1A2B3C; /* Fond sombre comme tes modals */
    border: 0.5px dashed #f9f9f9; /* Rappel doré */
    border-radius: 20px;
    padding: 8px 12px; /* Beaucoup plus compact */
    color: #f9f9f9;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    width: max-content; /* S'adapte pile à la taille du texte */
    max-width: 220px; /* Évite que ça devienne trop large sur mobile */
    font-family: 'Inter', sans-serif;
}

/* Ajustements typographiques internes pour garder le tout proportionné */
.tooltip-badge div {
    line-height: 1.3;
}

/* Petite animation d'apparition douce */
@keyframes apparitionTooltip {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 768px) {
    /* On désactive les anciens pseudo-éléments qui posaient problème */
    .glossaire-terme::before,
    .glossaire-terme::after {
        display: none !important;
    }

    /* Le nouveau conteneur global de l'infobulle injecté en JS */
    .custom-tooltip {
        position: fixed !important;
        bottom: 30px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(0) !important;
        width: 90% !important;
        max-width: 400px !important;
        background-color: #1e293b !important; /* Ajuste selon la couleur de ton choix */
        color: #ffffff !important;
        padding: 15px !important;
        border-radius: 8px !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-sizing: border-box !important;
        z-index: 99999 !important;
        font-family: var(--font-main-body) !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        transition: transform 0.2s ease !important;
    }

    /* La petite pastille "?" ancrée CHIRURGICALEMENT au-dessus de la boîte */
    .custom-tooltip-badge {
        display: flex !important;
        position: absolute !important;
        top: -20px !important; /* Se cale à 12px au-dessus du toit de la boîte (28px de hauteur + 12px de marge) */
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Design de ton cercle */
        width: 28px !important;
        height: 28px !important;
        background-color: #2c2c2c !important;
        color: #f9f9f9 !important;
        border: 2px solid #f9f9f9 !important; /* Utilise la couleur héritée ou fixe-la si besoin */
        border-radius: 50% !important;
        
        /* Alignement et typographie (Inter) */
        align-items: center !important;
        justify-content: center !important;
        font-family: var(--font-main-body) !important;
        font-size: 0.9rem !important;
        font-weight: bold !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2) !important;
    }

    /* Le rappel du mot-clé en haut de l'infobulle mobile */
.custom-tooltip-header {
    font-family: var(--font-main-titles); /* Tenor Sans pour rappeler la charte */
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 1px;
    margin-bottom: 8px; /* Espace avec la définition */
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Fine ligne de séparation */
    color: #ffffff;
}

/* Optionnel : Si le fond de la modal ou du mot est sombre/clair, on s'assure que le header reste contrasté */
.custom-tooltip-body {
    opacity: 0.9; /* Rend le texte de la définition un poil plus discret que le titre */
}

}

/* Positionnement organique le long des camemberts (de l'extérieur vers l'intérieur) */
.wheel-text {
    position: absolute;
    top: 0;
    left: 50%;
    width: 36px; /* Correspond environ à la largeur de la part au bord extérieur */
    height: 50%; /* S'arrête pile au centre de la roue */
    margin-left: -18px; /* Moitié de la largeur pour un centrage parfait */
    
    /* Origine de la rotation au centre de la roue (en bas de la boîte) */
    transform-origin: bottom center;
    
    /* On tourne SEULEMENT pour positionner chaque part (36° * index + 18° pour le milieu) */
    transform: rotate(calc(var(--item-nb) * 36deg + 18deg));
    
    /* MAGIE : On force le texte à s'écrire verticalement de haut en bas */
    writing-mode: vertical-lr;
    
    /* Alignement : le haut du texte va vers le haut (l'extérieur de la roue) */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 15px; /* Marge de sécurité pour ne pas coller à la bordure noire extérieure */
    
    /* Styles typographiques */
    font-family: var(--font-main-titles); /* Tenor Sans */
    font-size: 0.72rem; /* Taille fine pour que "SUCCESS STORY" respire sur mobile */
    font-weight: normal;
    color: var(--color-text-light);
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

/* Style spécifique pour le segment mème "???" */
.wheel-text[style*="--is-meme: 1"] {
    font-family: var(--font-meme-titles) !important; /* Anton */
    font-size: 1.2rem !important;
    letter-spacing: 1px;
    color: #ffffff;
    padding-top: 25px; /* Ajustement pour centrer le "???" dans la longueur du segment */
}

/* Ajustement des couleurs pour le secteur beige (Vision) */
.wheel-text:nth-child(3),
.wheel-text:nth-child(6),
.wheel-text:nth-child(9) {
    color: var(--color-text-dark) !important;
}

/* Le badge de catégorie dans la modal */
.modal-category-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    
    /* Design demandé : fond transparent et bordures en pointillés */
    background: transparent;
    border: 1px dashed currentColor; /* Prend automatiquement la couleur du texte de la modal actuelle ! */
    border-radius: 4px;
    
    /* Espacement et typo */
    padding: 4px 10px;
    font-family: var(--font-main-body);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.5px;
    opacity: 0.8; /* Un poil discret pour ne pas voler la vedette au titre principal */
    
    /* Sécurité pour éviter que le titre ne chevauche le badge si le titre est trop long */
    z-index: 10;
}

/* ==========================================================================
   7. STRUCTURE SPÉCIFIQUE POUR LES MODALS MÈMES
   ========================================================================== */

/* Conteneur principal qui sépare l'image et le texte */
.modal-meme-container {
    display: flex !important;
    flex-direction: row !important; /* Côte à côte par défaut sur desktop */
    gap: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    flex: 1 !important;
    overflow-y: auto !important; /* Permet le défilement interne si le texte est long */
}

/* Encapsulation de l'image du mème */
.modal-meme-media {
    flex: 0 0 45% !important; /* L'image prend 45% de la largeur max sur PC */
    max-width: 280px !important;
    display: flex !important;
    justify-content: center !important;
}

.modal-meme-media img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Zone de texte du mème */
.modal-meme-text {
    flex: 1 !important;
    font-family: var(--font-meme-body, sans-serif) !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* Force les titres du header à utiliser la police Anton */
.modal-meme-dark .modal-header h2.category-title {
    font-family: var(--font-meme-titles), sans-serif !important;
    text-transform: uppercase; /* Optionnel : pour donner le style "Impact/Meme" typique de la police Anton */
    letter-spacing: 0.5px;
}

.modal-meme-dark .modal-header h3 {
    font-family: var(--font-meme-body), sans-serif !important;
    opacity: 0.8;
}

/* Force le texte du mème à utiliser la police Questrial */
.modal-meme-dark .modal-meme-text p {
    font-family: var(--font-meme-body), sans-serif !important;
    font-size: 1.2rem !important;
}

/* Boutons de base pour la modal mème */
.modal-meme-dark .btn-meme-choice {
    padding: 10px 20px;
    font-family: var(--font-meme-body), 'Questrial', sans-serif;
    font-size: 1rem;
    margin: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px; /* Optionnel, selon ton design */
}

/* Premier bouton : Transparent et bordure pointillés */
.modal-meme-dark .btn-meme-dashed {
    background: transparent;
    border: 2px dashed #F9F9F9;
    color: #F9F9F9;
}

.modal-meme-dark .btn-meme-dashed:hover {
    background: rgba(249, 249, 249, 0.1);
}

/* Deuxième bouton : Fond plein et texte sombre */
.modal-meme-dark .btn-meme-solid {
    background-color: #F9F9F9;
    border: 2px solid #F9F9F9;
    color: #010101;
    font-weight: bold;
}

.modal-meme-dark .btn-meme-solid:hover {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}

/* ==========================================================================
   9. SOUS-MODAL EN SURIMPRESSION (NIVEAU 2) - VERSION CORRIGÉE
   ========================================================================== */

/* L'overlay de fond noir intermédiaire */
.sub-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    z-index: 1050 !important; /* Juste au-dessus de la modal principale */
}

/* La Boîte de la Sous-Modal élargie */
.sub-modal-box {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95% !important;
    max-width: 550px !important; /* Augmenté pour donner plus de largeur et d'espace */
    background-color: #880e4f !important; /* Ton bordeaux lie-de-vin */
    border: 2px dashed #F9F9F9 !important;
    border-radius: 12px !important;
    padding: 35px 25px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9) !important;
    z-index: 1100 !important; /* Priorité absolue au premier plan */
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    animation: subModalFadeIn 0.25s ease-out;
}

.sub-modal-body p {
    font-family: var(--font-meme-body), 'Questrial', sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: #F9F9F9 !important;
    text-align: center !important;
}

.sub-modal-footer {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    width: 100% !important;
}

/* --- REPRISE STRICTE DU LOOK DES BOUTONS MÈMES --- */

.sub-modal-footer .btn-meme-choice {
    padding: 12px 24px !important;
    font-family: var(--font-meme-body), 'Questrial', sans-serif !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

/* Bouton Appeler (Solide) */
.sub-modal-footer .btn-meme-solid {
    background-color: #F9F9F9 !important;
    border: none !important;
    color: #010101 !important;
}
.sub-modal-footer .btn-meme-solid:hover {
    background-color: #e0e0e0 !important;
    transform: scale(1.02) !important;
}

/* Bouton Fermer (Dashed) */
.sub-modal-footer .btn-meme-dashed {
    background: transparent !important;
    border: 2px dashed #F9F9F9 !important;
    color: #F9F9F9 !important;
}
.sub-modal-footer .btn-meme-dashed:hover {
    background: rgba(249, 249, 249, 0.1) !important;
    transform: scale(1.02) !important;
}

/* Animation d'apparition */
@keyframes subModalFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Alignement mobile adaptatif */
@media (max-width: 480px) {
    .sub-modal-footer {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .sub-modal-footer .btn-meme-choice {
        width: 100% !important;
    }
}

/* --- REGLAGES RESPONSIVE MOBILE (REDMI 15C & CO) --- */
@media (max-width: 768px) {
    .modal-meme-container {
        flex-direction: column !important; /* L'image passe au-dessus du texte */
        gap: 16px !important;
        justify-content: flex-start !important;
    }

    .modal-meme-media {
        flex: none !important;
        width: 100% !important;
        max-width: 200px !important; /* Légèrement plus petite sur mobile pour laisser la place au texte */
        margin: 0 auto !important;
    }

    .modal-meme-text {
        text-align: center !important; /* Texte centré sur mobile pour l'esthétique */
        font-size: 0.95rem !important;
    }

    /* --- Application des typographies spécifiques au segment mème --- */


}

/* FIN SECTION 9 */

/* ==========================================================================
   10. BANNIÈRES DE SUCCÈS (GAMIFICATION)
   ========================================================================== */

.banner-succes-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    background: #1A2B3C;
    border: 0.5px solid #e8dfd1; /* Bordure dorée */
    box-shadow: 0 4px 20px #1A2B3C, 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 9999; /* Par-dessus tout le site */
    animation: bannerSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Conteneur de l'icône dans la bannière */
.banner-succes-icon {
    width: 55px;         /* Taille réduite et mieux proportionnée */
    height: 55px;
    flex-shrink: 0;      /* Empêche le badge de se déformer ou de s'écraser */
    margin-right: 16px;  /* Donne de l'air entre le badge et le texte */
    
    display: flex;
    align-items: center;
    justify-content: center;
    /* On active l'animation en boucle */
    animation: badgePulse 2s ease-in-out infinite;
}

/* L'image du badge à l'intérieur */
.banner-success-badge {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;  /* Sécurité pour conserver le masque bien rond */
}

.banner-succes-content h4 {
    font-family: var(--font-main-titles), sans-serif;
    color: #f9f9f9;
    font-size: 1rem;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-succes-content p {
    font-family: var(--font-main-body), sans-serif;
    color: #f9f9f9;
    font-size: 0.85rem;
    opacity: 0.9;
    line-height: 1.3;
}

/* Animation de sortie */
.banner-succes-container.banner-fade-out {
    animation: bannerSlideOut 0.3s ease-in forwards;
}

/* Keyframes Animations */
@keyframes bannerSlideIn {
    from {
        top: -100px;
        opacity: 0;
    }
    to {
        top: 20px;
        opacity: 1;
    }
}

@keyframes bannerSlideOut {
    from {
        top: 20px;
        opacity: 1;
    }
    to {
        top: -100px;
        opacity: 0;
    }
}

@keyframes trophyBounce {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08); /* Léger zoom de 8% pour rester subtil et élégant */
    }
    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   SECTION INTRODUCING THE CONCEPT
   ========================================================================== */
.intro-concept-container {
    max-width: 600px;
    margin: 20px auto 25px auto; /* Ajuste le 20px (haut) pour avoir la distance parfaite sous la roue */
    padding: 0 20px;
    text-align: center;
}

.intro-concept-text {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.85rem; /* Petits caractères */
    line-height: 2;
    color: var(--color-text-dark); /* S'adaptera au fond clair de la page */
    opacity: 0.85; /* Rendu plus léger et élégant */
}

/* Style optionnel sur mobile pour resserrer le texte si nécessaire */
@media (max-width: 768px) {
    .intro-concept-container {
        margin: 15px auto;
    }
    .intro-concept-text {
        font-size: 0.8rem;
        padding: 0 10px;
    }
}

/* Style de base pour les badges intégrés au texte */
.badge-inline {
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 4px; /* Bords arrondis légers et propres */
    font-size: 0.8rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

/* Badge Success Story */
.badge-success {
    background-color: #636f63;
    color: #f9f9f9;
}

/* Badge Deep Dive */
.badge-deep {
    background-color: #a68966;
    color: #010000;
}

/* Badge Vision */
.badge-vision {
    background-color: #e8dfd1;
    color: #010000;
}

/* Badge Mystère ??? */
.badge-mystere {
    background-color: #880e4f;
    color: #f9f9f9;
    font-family: 'Anton', sans-serif; /* Changement de police unique */
    letter-spacing: 1px;
    padding: 2px 10px;
}

/* ==========================================================================
   MODAL OFFRE EXCEPTIONNELLE (MISES À JOUR)
   ========================================================================== */

.modal-offre-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
}

.modal-offre-content {
    background: #1c2d3d;
    color: #f9f9f9;
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh; /* Sécurité desktop */
    display: flex;
    flex-direction: column; /* Force l'alignement vertical Header -> Body -> Footer */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    font-family: var(--font-main-titles), 'Tenor Sans', sans-serif;
}

/* --- 1. HEADER --- */
.modal-offre-header {
    position: relative;
    padding: 20px 30px 10px 30px;
    text-align: center;
}
.modal-offre-title {
    margin: 0;
    font-size: 1.5rem;
}
.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #ffffff;
    z-index: 1010;
}

/* --- 2. BODY (Contenu scrollable si trop long) --- */
.modal-offre-body {
    flex: 1; /* Prend tout l'espace disponible et pousse le footer vers le bas */
    overflow-y: auto; /* Permet de scroller uniquement ici si le texte est long */
}
.modal-banner {
    width: 100%;
    height: auto;
    display: block;
}
.modal-offre-text-container {
    padding: 20px 30px; /* On garde le padding de 30px propre au texte */
    text-align: center;
}

/* --- 3. FOOTER (Boutons figés en bas) --- */
.modal-offre-footer {
    padding: 15px 30px 30px 30px;
    background: #1c2d3d; /* Même fond pour fusionner proprement */
}

/* Séparateur & Boutons */
.modal-separator-wave {
    width: 100%;
    height: 10px;
    background-image: url('data/assets/wave_separator.png');
    margin: 20px 0 0 0;
}

.modal-separator-wave-container {
    width: 100%;
    height: 10px;
    background-image: url('data/assets/wave_separator.png');

}

.modal-offre-waouw {
    font-size: 2rem;
}

.txt-accroche { 
    font-size: 1.2rem;
}

.modal-offre-conditions {
    font-size: 0.8rem;
}

.txt-accroche-nuit {
    font-size: 1.05rem;
}

.cta-container {
    display: flex;
    flex-direction: row; /* Aligne les boutons côte à côte */
    gap: 12px;
    width: 100%;
}

.btn-cta-offre, .btn-cta-secondaire {
    flex: 1; /* Force les deux boutons à avoir exactement la même largeur */
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap; /* Évite que le texte du bouton passe sur deux lignes */
    font-family: var(--font-main-titles), 'Tenor Sans', sans-serif;
}

.btn-cta-offre {
    background: #f9f9f9;
    color: #1A2B3C;
    border: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-family: var(--font-main-titles), 'Tenor Sans', sans-serif;
}

.btn-cta-offre:hover {
    background: #636f63;
    color: #f9f9f9;
    transform: translateY(-1px);
}

.btn-cta-secondaire {
    background: transparent;
    color: #f9f9f9;
    border: 2px dashed #f9f9f9; /* Bordure en pointillés assortie */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-cta-secondaire:hover {
    background: rgba(249, 249, 249, 0.1); /* Léger voile blanc transparent */
}

/* ==========================================================================
   11. SOUS-MODAL QR CODE - LAYOUT HORIZONTAL
   ========================================================================== */
.modal-qrcode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Fond un poil plus sombre pour faire ressortir la modal */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999 !important;
    animation: fadeInOffre 0.25s ease-out;
}

.modal-qrcode-content {
    background: #1c2d3d;
    color: #f9f9f9;
    border-radius: 16px;
    width: 90%;
    max-width: 680px; /* Élargie pour le format split */
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    position: relative;
    font-family: var(--font-main-titles), 'Tenor Sans', sans-serif;
}

/* Flexbox pour aligner le QR code et le texte côte à côte */
.modal-qrcode-layout {
    display: flex;
    align-items: center;
    gap: 35px;
}

.modal-qrcode-left {
    flex: 0 0 auto;
}

.modal-qrcode-right {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* QR Code optimisé */
.qr-code-img {
    width: 220px;
    height: 220px;
    border-radius: 12px;
    border: 8px solid #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: block;
}

/* Ta punchline en gros */
.qr-code-headline {
    margin: 0 0 12px 0;
    font-size: 1.75rem; 
    line-height: 1.25;
    letter-spacing: 0.5px;
    font-weight: bold;
    color: #ffffff;
}

.qr-code-text {
    font-family: var(--font-main-body), 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

/* Zone plus petite pour le numéro de téléphone */
.qr-code-phone {
    font-family: var(--font-main-body), 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* Ligne de séparation subtile */
}

/* Optionnel : repli propre si l'écran est trop petit */
@media (max-width: 640px) {
    .modal-qrcode-layout {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .modal-qrcode-right {
        text-align: center;
    }
}

/* ==========================================================================
   12 STYLE DES LIENS CLASSIQUES (DANS LES MODALS)
   ========================================================================== */
.modal-link {
    color: inherit !important; /* S'adapte automatiquement au fond clair/sombre de la modal */
    text-decoration: none !important;
    border-bottom: 2px solid currentColor !important; /* Ligne PLEINE pour se détacher du glossaire */
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: opacity 0.2s ease !important;
    -webkit-tap-highlight-color: transparent;
}

/* L'indicateur visuel de redirection (Flèche sortante) */
.modal-link::after {
    content: "\2197\FE0E" !important; /* \2197 est la flèche, \FE0E force le rendu TEXTE sur iOS */
    font-size: 0.8rem !important;
    display: inline-block !important;
    margin-left: 5px !important; /* Espacement parfait et stable au pixel près */
    transition: transform 0.2s ease !important;
    vertical-align: middle !important;
}

/* Micro-interaction au survol */
@media (min-width: 769px) {
    .modal-link:hover {
        opacity: 0.75 !important;
    }
    
    /* La flèche s'envole légèrement vers le haut/droite au survol */
    .modal-link:hover::after {
        transform: translate(2px, -2px) !important;
    }
}

/* ==========================================================================
   13. CRÉDITS DE PIED DE PAGE (FOOTER FINAL)
   ========================================================================== */
.footer-credits {
    margin-top: 25px;
    font-family: var(--font-main-body);
    font-size: 0.8rem;
    color: var(--color-text-dark);
    opacity: 0.6;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer-link {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.footer-link:hover {
    opacity: 1;
}

.footer-separator {
    user-select: none;
}