/* --- SOCLE GLOBAL PROPRE --- */
/* --- VERROUILLAGE DU HAUT DE PAGE --- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    min-height: 100vh;
    background-color: var(--f2m-blue);
    color: var(--f2m-text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Socle universel sans bavure */


:root {
    --f2m-blue: #0a101d;
    --f2m-accent: #1e3a8a;
    --f2m-gold: #d4af37;
    --f2m-text: #e2e8f0;
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --theme-color: var(--f2m-gold); /* La couleur caméléon, Or par défaut */
}

.page-algebre { --theme-color: #00f0ff; }
.page-analyse { --theme-color: #39ff14; }
.page-probas  { --theme-color: #ff1495; }
.page-synthese { --theme-color: #ff073a; }


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   SÉCURITÉ ET ERGONOMIE (Scroll et Débordements)
   ========================================================================== */

/* 1. Espace de respiration pour que le Scroll Espion puisse voir le dernier Acte */
#cours-container {
    padding-bottom: 65vh; 
}

/* 2. Protection Anti-casse pour les écrans étroits (Mobile/Tablette) */
/* Sécurise la Matrice, la Vitrine et le Paywall */
#cours-container, .enonce-vitrine, .master-class-cta {
    max-width: 100%;
    overflow-x: auto;     /* Déclenche l'ascenseur horizontal si l'équation est trop longue */
    overflow-y: hidden;
    word-wrap: break-word; /* Force le texte long sans espace à revenir à la ligne */
}

/* 3. Protection spécifique du panneau des solutions (Accordéons) */
.panel {
    max-width: 100%;
    overflow-x: auto;
}





/* --- LE FOND ÉTOILÉ (Génération CSS) --- */
#starfield, #stars, #stars2, #stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: transparent;
    pointer-events: none; /* Empêche le fond d'intercepter les clics */
}



/* Création d'un motif d'étoiles statique via radial-gradient */
#stars {
    background-image: 
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 90px 40px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.9), rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.5;
}

/* --- HEADER & GLITCH EFFECT --- */
header {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}


/* --- LE CONTENEUR DU LOGO --- */
.glitch-container {
    display: inline-flex; /* 'inline-flex' au lieu de 'flex' pour garder la boîte resserrée sur le texte */
    justify-content: center;
    position: relative;   /* CRUCIAL : garde le filtre collé au logo */
    margin-bottom: 40px;  /* Augmenté légèrement pour aérer avant les blocs néon */
}

/* --- L'EFFET DE DÉCRYPTAGE (FILTRE F2M) --- */
.glitch-container::after {
    content: "";
    position: absolute;
    top: -10%; 
    left: -10%; 
    width: 120%; 
    height: 120%;
    /* Le grain Base64 */
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVX1VqH3AAAAB3RSTlMAAAAAAABu3vKxAAAAW0lEQVR42mNgwA8YmRChwJAhM5MhnmHixCnjFk6cOH3ixCnjJk6cOH3ixKnjJk6cOH3ixGnjJk6cOH3ixOnjJk6cOH3ixBnjJk6cOH3ixJnjJk6cOH3ixPnjJk4EAOVVqH+6K3l6AAAAAElFTkSuQmCC') repeat;
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: overlay; /* Permet au grain de fusionner avec les couleurs du texte */
    
    /* L'animation se lance au chargement, dure 3 secondes, et s'arrête définitivement (forwards) */
    animation: f2m-denoise 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Scénario de nettoyage du bruit */
@keyframes f2m-denoise {
    0%   { opacity: 1; transform: translate(0, 0); }
    20%  { opacity: 0.8; transform: translate(-5px, 5px); }
    40%  { opacity: 0.9; transform: translate(5px, -5px); }
    60%  { opacity: 0.4; transform: translate(-2px, 2px); }
    80%  { opacity: 0.1; transform: translate(2px, -2px); }
    100% { opacity: 0; transform: translate(0, 0); display: none; }
}

.glitch {
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    color: white;
    letter-spacing: 5px;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 red;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 cyan;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 31px, 0); }
    20% { clip: rect(62px, 9999px, 12px, 0); }
    40% { clip: rect(29px, 9999px, 86px, 0); }
    60% { clip: rect(76px, 9999px, 4px, 0); }
    80% { clip: rect(3px, 9999px, 58px, 0); }
    100% { clip: rect(89px, 9999px, 44px, 0); }
}

header h2 {
    font-size: 1.5rem;
    color: var(--f2m-gold);
    margin-bottom: 15px;
}

header p {
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: 40px;
    color: #94a3b8;
}

/* --- BOUTONS --- */
.btn-primary {
    background: transparent;
    color: var(--f2m-gold);
    border: 1px solid var(--f2m-gold);
    padding: 15px 30px;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--f2m-gold);
    color: var(--f2m-blue);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.full-width {
    width: 100%;
    margin-top: 15px;
}




/* Le titre des Actes dans la zone de cours */
.f2m-acte-container h3 {
    color: var(--theme-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}



/* Donne de l'oxygène à l'intérieur des cadres */
.dojo-bloc {
    padding: 25px 35px; /* 25px en haut/bas, 35px sur les côtés */
}

/* Assure que les définitions et énoncés respirent bien */
.dojo-bloc h3 {
    margin-top: 20px;
    margin-bottom: 15px;
}

.dojo-bloc p {
    line-height: 1.6; /* Rend le texte mathématique beaucoup plus lisible */
    margin-bottom: 25px; /* Éloigne l'énoncé du bouton de correction */
}






/* --- STRUCTURE MAIN --- */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 100px 20px;
}

/* --- GLASSMORPHISM PANELS --- */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: var(--f2m-gold);
}

.section-header i { font-size: 1.5rem; }
.center { justify-content: center; text-align: center; }
.center-text { text-align: center; margin-bottom: 30px; }

/* --- INTERACTIVE BOX (Simulateur) --- */
.interactive-box {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--f2m-gold);
    padding: 20px;
    margin: 30px 0;
}

.interactive-box h3 {
    color: white;
    margin-bottom: 15px;
}

.slider-container {
    margin: 20px 0;
}

input[type=range] {
    width: 100%;
    margin-top: 10px;
}

.dashboard {
    display: flex;
    justify-content: space-around;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 5px;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-title {
    font-size: 0.9rem;
    color: #94a3b8;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--f2m-gold);
}

/* --- ACCORDÉON --- */
.accordion {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: 1px solid var(--glass-border);
    text-align: left;
    outline: none;
    font-size: 1rem;
    font-weight: bold;
    transition: 0.4s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.active, .accordion:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.panel {
    padding: 0 18px;
    background-color: rgba(0, 0, 0, 0.2);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
}
.panel p, .panel ul { padding: 15px 0; }
.panel ul { padding-left: 20px; }


/* --- LE PASSE-PARTOUT F2M POUR LES ACCORDÉONS DYNAMIQUES --- */
.panel.f2m-ouvert {
    display: block !important;
    max-height: 3000px !important; /* Assez grand pour toute équation */
    opacity: 1 !important;
    visibility: visible !important;
    padding: 15px !important; /* Ajustez selon l'espacement voulu */
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important; /* Petite ligne dorée F2M */
}



/* --- FORMULAIRE --- */
.input-group {
    margin-bottom: 15px;
}

.input-group input, .input-group select, .input-group textarea {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    color: white;
    font-size: 1rem;
    border-radius: 5px;
}

.input-group textarea {
    height: 100px;
    resize: vertical;
}

.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
    outline: none;
    border-color: var(--f2m-gold);
}

.form-disclaimer {
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
    margin-top: 15px;
}



/* --- SECTION OFFRES & GRILLES --- */
.gold-title {
    color: var(--f2m-gold);
    margin: 30px 0 15px 0;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
}

.parcours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.parcours-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    padding: 20px;
    border-radius: 5px;
    border-top: 3px solid var(--f2m-gold);
}

.parcours-card h4 {
    color: white;
    margin-bottom: 10px;
}

.check-list {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.check-list li {
    margin-bottom: 10px;
    color: var(--f2m-text);
}

.check-list i {
    color: var(--f2m-gold);
    margin-right: 10px;
}

.resultats-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.badge {
    background: var(--f2m-gold);
    color: var(--f2m-blue);
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* --- PROTECTION TYPOGRAPHIQUE MATHJAX (Correction Optique) --- */
mjx-container {
    font-size: 1.15em !important; /* Agrandit subtilement pour reposer l'œil */
    color: #cbd5e1 !important; /* Un gris-bleu très clair qui supprime l'éblouissement */
}

mjx-container svg {
    opacity: 0.9; /* Adoucit la luminosité du tracé vectoriel */
}

/* 1. Forcer les blocs MathJax à scroller horizontalement sans déborder */
mjx-container[display="true"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Optionnel : ajoute une petite marge en bas pour l'ascenseur visuel */
    padding-bottom: 5px; 
}


/* --- LA CAGE MATHJAX (Force le scroll horizontal sur mobile) --- */
.latex-content {
    width: 100%;
    max-width: 100vw; /* Ne peut pas dépasser la largeur de l'écran */
    overflow-x: auto !important;
    overflow-y: hidden;
    
    /* Magie noire pour iOS/Android : rend le glissement au doigt ultra-fluide */
    -webkit-overflow-scrolling: touch; 
    
    /* Espace en bas pour éviter que la barre de défilement ne mange le texte */
    padding-bottom: 15px; 
}

/* On force également les gros blocs MathJax à ne pas s'étirer à l'infini */
.latex-content mjx-container[display="true"] {
    min-width: 100%;
}



/* --- HYPERESPACE BACKGROUND --- */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Reste toujours derrière le contenu */
    pointer-events: none; /* N'empêche pas de cliquer sur les boutons */
}



/* --- LE TITRE PRINCIPAL (Signal Net) --- */
.glitch-text {
    position: relative;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 3px;
    display: inline-block;
}

/* --- LES CANAUX RVB (Décalage de chrominance) --- */
.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Canal Rouge (Décalage gauche violent) */
.glitch-text::before {
    left: 4px;
    text-shadow: -3px 0 #ff003c;
    /* Animation de 3 secondes, répétée à l'infini */
    animation: cryptage-canal-1 3s infinite linear alternate-reverse;
}

/* Canal Cyan (Décalage droite violent) */
.glitch-text::after {
    left: -4px;
    text-shadow: 3px 0 #00ffff;
    animation: cryptage-canal-2 3s infinite linear alternate-reverse;
}

/* --- RYTHME SACCADÉ & SIGNAL PUR AU REPOS --- */
@keyframes cryptage-canal-1 {
    0%, 75% { opacity: 0; transform: translate(0); } /* Invisible au repos */
    75.1% { opacity: 1; } /* S'allume d'un coup */
    76% { clip-path: inset(10% 0 60% 0); transform: translate(-6px, 1px); }
    78% { clip-path: inset(40% 0 20% 0); transform: translate(6px, -1px); }
    80% { clip-path: inset(80% 0 5% 0); transform: translate(-6px, 2px); }
    82% { clip-path: inset(5% 0 80% 0); transform: translate(6px, -2px); }
    84% { clip-path: inset(20% 0 50% 0); transform: translate(-4px, 1px); }
    84.9% { opacity: 1; }
    85%, 100% { opacity: 0; transform: translate(0); } /* Disparaît instantanément */
}

@keyframes cryptage-canal-2 {
    0%, 75% { opacity: 0; transform: translate(0); }
    75.1% { opacity: 1; }
    76% { clip-path: inset(60% 0 10% 0); transform: translate(6px, -1px); }
    78% { clip-path: inset(20% 0 40% 0); transform: translate(-6px, 1px); }
    80% { clip-path: inset(5% 0 80% 0); transform: translate(6px, -2px); }
    82% { clip-path: inset(80% 0 5% 0); transform: translate(6px, 2px); }
    84% { clip-path: inset(50% 0 20% 0); transform: translate(4px, -1px); }
    84.9% { opacity: 1; }
    85%, 100% { opacity: 0; transform: translate(0); }
}

/* --- STABILISATION DU SIGNAL AU SURVOL --- */
.glitch-text:hover::before,
.glitch-text:hover::after {
    animation: none !important; /* Coupe le moteur de glitch */
    opacity: 0 !important;      /* Force l'invisibilité des parasites */
}

/* --- ENCART TÉLÉCHARGEMENT (TEASER) --- */
/* --- L'HYPERCUBE F2M (Le conteneur du Pack) --- */
.teaser-box {
    position: relative;
    background: rgba(10, 14, 23, 0.8);
    border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 30px;
    margin: 40px auto;
    max-width: 650px;
    
    /* 1. Effet 3D (L'Hypercube au repos) */
    transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5), 
                0 0 10px rgba(0, 255, 255, 0.1) inset;
    
    /* 2. Le "Bruit" avant traitement F2M */
    filter: blur(0.5px) contrast(1.1);
    animation: glitch-idle 2.5s infinite alternate;
    
    /* Transition fluide pour le passage à l'état net */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- L'ACTIVATION DU FILTRE (Au survol de la souris) --- */
.teaser-box:hover {
    /* L'hypercube se redresse et fait face à l'utilisateur */
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1.02);
    
    /* Le signal devient parfait */
    filter: blur(0px) contrast(1); 
    border: 1px solid rgba(0, 255, 255, 1);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.3),
                0 0 15px rgba(0, 255, 255, 0.2) inset;
                
    /* Stoppe le grésillement */
    animation: none; 
}

/* --- ANIMATION DU GRÉSILLEMENT (Aberration Chromatique) --- */
@keyframes glitch-idle {
    0% { text-shadow: 1px 0px 0px rgba(255, 0, 60, 0.7), -1px 0px 0px rgba(0, 255, 255, 0.7); }
    50% { text-shadow: -1px 1px 0px rgba(255, 0, 60, 0.5), 1px -1px 0px rgba(0, 255, 255, 0.5); }
    100% { text-shadow: 1px -1px 0px rgba(255, 0, 60, 0.7), -1px 1px 0px rgba(0, 255, 255, 0.7); }
}

.teaser-title {
    color: #00ffff;
    font-size: 1.1rem;
    margin-bottom: 12px;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.teaser-text {
    color: #e0e0e0;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Mise en valeur du mot d'ordre */
.teaser-text strong {
    color: #ff003c;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* --- LISTE DU PACK DEEPTECH --- */
.teaser-list {
    list-style: none; /* Supprime les puces par défaut */
    padding: 0;
    margin: 20px 0 0 0;
    text-align: left; /* On aligne à gauche pour faciliter la lecture */
}

.teaser-list li {
    color: #e0e0e0;
    font-size: 0.95rem;
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    line-height: 1.4;
}

/* Création d'une puce personnalisée (chevron cyan) */
.teaser-list li::before {
    content: "►"; 
    color: #00ffff;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.8rem;
    /* Petit effet de lueur sur la puce */
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.teaser-list li strong {
    color: #ffffff;
    font-weight: bold;
}

.access-granted-banner {
    background-color: rgba(0, 255, 128, 0.1); /* Fond vert cybernétique très léger */
    border: 1px solid #00ff80; /* Bordure vert fluo */
    color: #00ff80;
    text-align: center;
    padding: 15px;
    margin-bottom: 30px;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 0.9rem;
    box-shadow: 0 0 15px rgba(0, 255, 128, 0.2);
    /* Petite animation d'apparition */
    animation: flash-success 0.5s ease-out forwards;
}

@keyframes flash-success {
    0% { opacity: 0; transform: translateY(-10px); }
    50% { opacity: 1; box-shadow: 0 0 30px rgba(0, 255, 128, 0.6); }
    100% { opacity: 1; box-shadow: 0 0 15px rgba(0, 255, 128, 0.2); }
}

/* Le Tag Académique : Rigoureux et Institutionnel */
.tag-academic {
    background-color: #161b22; 
    color: #ffffff; /* Blanc pur pour trancher */
    font-weight: 800; /* Extra gras */
    border: 1px solid #6e7681; /* Bordure plus marquée */
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
}

/* Le Tag Ceinture : L'esprit Martial */
.tag-belt {
    padding: 4px 12px;
    border-radius: 20px; /* Bords très arrondis (pilule) */
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* ==========================================================================
   SYSTÈME DE CEINTURES : TAGS, ANIMATIONS ET ÉTATS (OPACITÉ 42%)
   ========================================================================== */

/* ==========================================================================
   F2M-TECH : ARCHITECTURE VISUELLE UNIFIÉE (BADGES, ARÈNES, ANIMATIONS)
   ========================================================================== */

/* --- 1. LES TAGS (BADGES) --- */
.ceinture-blanche  { background-color: #f0f6fc; color: #0d1117; }
.ceinture-jaune    { background-color: #d29922; color: #ffffff; }
.ceinture-orange   { background-color: #f0883e; color: #ffffff; }
.ceinture-verte    { background-color: #238636; color: #ffffff; }
.ceinture-bleue    { background-color: #1f6feb; color: #ffffff; }
.ceinture-violette { background-color: #0b0c10; color: #bc13fe; border: 1px solid #9d4edd; text-shadow: 0 0 5px rgba(188, 19, 254, 0.5); }
.ceinture-marron   { background-color: #8b4513; color: #ffffff; }
.ceinture-noire    { background-color: #010409; color: #ff7b72; border: 1px solid #ff7b72; box-shadow: 0 0 10px rgba(255, 123, 114, 0.5); }

/* --- 2. LES ANIMATIONS DE RESPIRATION (KEYFRAMES GLOW) --- */
@keyframes pulse-glow-blanche  { 0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); } 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.5); } }
@keyframes pulse-glow-jaune    { 0% { box-shadow: 0 0 5px rgba(210, 153, 34, 0.1); border-color: rgba(210, 153, 34, 0.3); } 100% { box-shadow: 0 0 20px rgba(210, 153, 34, 0.5); border-color: rgba(210, 153, 34, 0.9); } }
@keyframes pulse-glow-orange   { 0% { box-shadow: 0 0 5px rgba(240, 136, 62, 0.1); border-color: rgba(240, 136, 62, 0.3); } 100% { box-shadow: 0 0 20px rgba(240, 136, 62, 0.5); border-color: rgba(240, 136, 62, 0.9); } }
@keyframes pulse-glow-verte    { 0% { box-shadow: 0 0 5px rgba(35, 134, 54, 0.1); border-color: rgba(35, 134, 54, 0.3); } 100% { box-shadow: 0 0 20px rgba(35, 134, 54, 0.5); border-color: rgba(35, 134, 54, 0.9); } }
@keyframes pulse-glow-bleue    { 0% { box-shadow: 0 0 5px rgba(31, 111, 235, 0.1); border-color: rgba(31, 111, 235, 0.3); } 100% { box-shadow: 0 0 20px rgba(31, 111, 235, 0.5); border-color: rgba(31, 111, 235, 0.9); } }
/* Le Keyframe Indigo Électrique parfaitement aligné */
@keyframes pulse-glow-violette { 0% { box-shadow: 0 0 5px rgba(188, 19, 254, 0.1); border-color: rgba(188, 19, 254, 0.3); } 100% { box-shadow: 0 0 20px rgba(188, 19, 254, 0.5); border-color: rgba(188, 19, 254, 0.9); } }
@keyframes pulse-glow-marron   { 0% { box-shadow: 0 0 5px rgba(139, 69, 19, 0.1); border-color: rgba(139, 69, 19, 0.3); } 100% { box-shadow: 0 0 20px rgba(139, 69, 19, 0.5); border-color: rgba(139, 69, 19, 0.9); } }
@keyframes pulse-glow-noire    { 0% { box-shadow: 0 0 5px rgba(255, 123, 114, 0.1); border-color: rgba(255, 123, 114, 0.3); } 100% { box-shadow: 0 0 20px rgba(255, 123, 114, 0.6); border-color: rgba(255, 123, 114, 1); } }

/* --- 3. LE MODE : UNTREATED (LES ARÈNES) --- */
/* Règles communes à tous les blocs non traités pour éviter de répéter le code */
.dojo-bloc.untreated {
    background-color: #161b22; /* Force le fond sombre de base */
    color: #c9d1d9;            /* Force le texte à rester lisible */
}

/* Application des halos et des dégradés lumineux (42%) pour l'immersion */
.dojo-bloc.untreated.ceinture-blanche  { animation: pulse-glow-blanche 2s infinite alternate ease-in-out;  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(22, 27, 34, 0) 50%); }
.dojo-bloc.untreated.ceinture-jaune    { animation: pulse-glow-jaune 2s infinite alternate ease-in-out;    background: linear-gradient(135deg, rgba(210, 153, 34, 0.42) 0%, rgba(22, 27, 34, 0) 50%); }
.dojo-bloc.untreated.ceinture-orange   { animation: pulse-glow-orange 2s infinite alternate ease-in-out;   background: linear-gradient(135deg, rgba(240, 136, 62, 0.42) 0%, rgba(22, 27, 34, 0) 50%); }
.dojo-bloc.untreated.ceinture-verte    { animation: pulse-glow-verte 2s infinite alternate ease-in-out;    background: linear-gradient(135deg, rgba(35, 134, 54, 0.42) 0%, rgba(22, 27, 34, 0) 50%); }
.dojo-bloc.untreated.ceinture-bleue    { animation: pulse-glow-bleue 2s infinite alternate ease-in-out;    background: linear-gradient(135deg, rgba(31, 111, 235, 0.42) 0%, rgba(22, 27, 34, 0) 50%); }
.dojo-bloc.untreated.ceinture-violette { animation: pulse-glow-violette 2s infinite alternate ease-in-out; background: linear-gradient(135deg, rgba(188, 19, 254, 0.42) 0%, rgba(22, 27, 34, 0) 50%); }
.dojo-bloc.untreated.ceinture-marron   { animation: pulse-glow-marron 2s infinite alternate ease-in-out;   background: linear-gradient(135deg, rgba(139, 69, 19, 0.42) 0%, rgba(22, 27, 34, 0) 50%); }
.dojo-bloc.untreated.ceinture-noire    { animation: pulse-glow-noire 2s infinite alternate ease-in-out;    background: linear-gradient(135deg, rgba(255, 123, 114, 0.42) 0%, rgba(22, 27, 34, 0) 50%); }

/* --- DESIGN DES BADGES (Filières et Niveaux) --- */

/* Les pilules des filières (BCPST, MP, ECG...) */
.tag-academic {
    background-color: rgba(255, 255, 255, 0.05);
    color: #a8b2d1;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.80em;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Base du badge Ceinture */
.tag-belt {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.80em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Couleurs spécifiques par Ceinture */
.ceinture-blanche { background-color: #f8f9fa; color: #1e1e24; border: 1px solid #d1d5db; }
.ceinture-jaune   { background-color: #fbbf24; color: #1e1e24; }
.ceinture-orange  { background-color: #f97316; color: #ffffff; }
.ceinture-verte   { background-color: #22c55e; color: #ffffff; }
.ceinture-bleue   { background-color: #3b82f6; color: #ffffff; }
.ceinture-marron  { background-color: #78350f; color: #ffffff; }
.ceinture-noire   { background-color: #111827; color: #ffffff; border: 1px solid #374151; }
.Boss_5_2         { 
    background: linear-gradient(135deg, #8e44ad, #c0392b); 
    color: #ffffff; 
    box-shadow: 0 0 10px rgba(142, 68, 173, 0.4);
}



/* --- 4. LE CONTRASTE DES CORRECTIONS (PANELS) --- */
/* Bloque la lumière du dégradé pour que les solutions restent bien distinctes */
.dojo-bloc .panel {
    background-color: rgba(0, 0, 0, 0.4); 
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* --- 4. LE MODE : TREATED (VALIDÉ) --- */
/* Base commune pour un exercice validé */
.dojo-bloc.treated {
    animation: none;
    opacity: 0.7;
    background: #161b22;
    border-color: #30363d;
    box-shadow: none;
}

/* Le sceau latéral gauche qui fige la couleur d'origine */
.dojo-bloc.treated.ceinture-blanche  { border-left: 6px solid #f0f6fc; }
.dojo-bloc.treated.ceinture-jaune    { border-left: 6px solid #d29922; }
.dojo-bloc.treated.ceinture-orange   { border-left: 6px solid #f0883e; }
.dojo-bloc.treated.ceinture-verte    { border-left: 6px solid #238636; }
.dojo-bloc.treated.ceinture-bleue    { border-left: 6px solid #1f6feb; }
.dojo-bloc.treated.ceinture-violette { border-left: 6px solid #8957e5; }
.dojo-bloc.treated.ceinture-marron   { border-left: 6px solid #8b4513; }
.dojo-bloc.treated.ceinture-noire    { border-left: 6px solid #ff7b72; }

/* ==========================================================================
   MODE MOBILE (RESPONSIVE DESIGN)
   ========================================================================== */
@media (max-width: 768px) {
    /* On passe le layout en colonne */
    .f2m-layout {
        flex-direction: column;
    }

    /* Sur mobile, on évite le bloc géant de 85vh pour que l'accueil s'adapte à la hauteur réelle */
    header {
        min-height: auto;
        padding: 40px 20px;
    }
}

    /* La barre latérale devient un menu supérieur horizontal */
    .sidebar {
        width: 100%;
        height: auto;
        position: relative; /* Elle ne reste plus bloquée à l'écran pour laisser place au cours */
        border-right: none;
        border-bottom: 1px solid #30363d;
        padding: 15px;
        z-index: 20;
    }

    /* Le titre de la barre prend moins de place */
    .sidebar-title {
        margin-bottom: 15px;
        font-size: 1rem;
        text-align: center;
    }

    /* La liste de progression devient alignée horizontalement et scrollable avec le doigt */
    .progression-list {
        display: flex;
        overflow-x: auto;
        white-space: nowrap; /* Empêche le texte de passer à la ligne */
        gap: 10px;
        padding-bottom: 10px; /* Espace pour la barre de défilement */
        -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
    }

    /* On annule la marge du bas des items puisqu'ils sont côte à côte */
    .progression-item {
        margin-bottom: 0;
    }

/* Animation de pulsation lumineuse DeepTech */
@keyframes pulse-hologram {
    0% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.1); border-color: rgba(255, 193, 7, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.5); border-color: rgba(255, 193, 7, 0.6); }
    100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.1); border-color: rgba(255, 193, 7, 0.2); }
}

/* Le Bandeau style JT (Fixé en bas de l'écran) */
.teaser-hologram {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(13, 17, 23, 0.95);
    border-top: 1px solid rgba(255, 193, 7, 0.3);
    padding: 12px 20px;
    z-index: 9999; /* Pour passer par-dessus tout le reste */
    animation: pulse-hologram 4s infinite ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espace entre le titre et le texte */
}

.teaser-hologram h3 {
    color: #ffc107;
    margin: 0;
    font-size: 1rem;
    white-space: nowrap; /* Empêche le titre de passer à la ligne */
}

.teaser-hologram p {
    color: #8b949e;
    font-size: 0.85rem;
    margin: 0;
}

/* ==========================================================================
   LE RAIL COULISSANT (SPLIT-SCREEN) */

.zone-entrainement {
    margin-top: 30px;
    width: 100%;
}

.control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: #8b949e;
}

.btn-icon {
    background: transparent;
    border: none;
    color: #8b949e;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-icon:hover { color: #fff; }

.split-screen-rail {
    display: flex;
    flex-direction: row;        
    flex-wrap: nowrap;         
    align-items: stretch;      
    width: 100%;
    gap: 20px;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}



 .panel {
    padding: 0 18px;
    background-color: rgba(0, 0, 0, 0.2);
    
    /* LES 3 LIGNES CRUCIALES POUR L'ANIMATION JS */
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    
    border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
}

.panel p, .panel ul { padding: 15px 0; }
.panel ul { padding-left: 20px; }





.panel-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #c9d1d9;
}

.panel-content {
    padding: 20px;
    flex-grow: 1;
}


/* Bordures d'alerte pour les champs vides */
.input-error {
    border-color: #ff3333 !important;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.4) !important;
    transition: all 0.3s ease;
}

  

.carte-acte {
    background: rgba(13, 17, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 30px;
    transition: border-color 0.3s;
}

.carte-acte:hover {
    border-color: rgba(255, 193, 7, 0.4); /* Légère lueur dorée au survol */
}


.logo-f2m {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: #ffffff;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(0, 195, 255, 0.6), 0 0 15px rgba(0, 195, 255, 0.4);
    margin-bottom: 30px;
}

.logo-f2m span {
    color: var(--theme-color) !important;
    text-shadow: 0 0 10px var(--theme-color) !important;
}

/*  2. Le header gère l'espace de la première vue sans couper la suite */
header {
    width: 100%;
    min-height: 100vh;         
    display: flex;
    flex-direction: column;
    justify-content: center;   
    align-items: center;       
    text-align: center;
}

.ecran-accueil {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
    


/* Colonne très fine à gauche, sombre, pour le global */
.sidebar-globale {
    width: 60px;
    background: #090c10;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    gap: 20px;
}

/* Le conteneur global des deux barres : FIXE */
.sidebar-double {
    height: 100dvh;
    overflow: hidden; /* Interdit le scroll global de ce bloc */
    display: flex; /* Maintient les deux colonnes côte à côte */
}


.sidebar-locale {
    height: 100%; /* Prend toute la place disponible dans la sidebar-double */
    overflow-y: auto; 
    padding-bottom: 120px; /* Marge massive en bas pour pouvoir tout remonter confortablement */
    /* ... le reste de votre design de scrollbar ... */
}


/* Colonne 1 (Icônes) : FIXE ET SANS SCROLL */
.sidebar-globale {
    height: 100vh;
    overflow-y: hidden;
}

/* Colonne 2 (Table E) : SCROLL INDÉPENDANT ACTIVÉ */
.sidebar-locale {  
    /* Design de la barre de défilement (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #e11d48 transparent;
}


/* Design de la barre de défilement pour Table E (Chrome, Safari, Edge, Mobile Webkit) */
.sidebar-locale::-webkit-scrollbar {
    width: 4px;
}
.sidebar-locale::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-locale::-webkit-scrollbar-thumb {
    background-color: #e11d48; /* Le rose flash F2M */
    border-radius: 4px;
}


.theme-icone {
    color: #484f58;
    font-size: 1.2rem;
    cursor: pointer;
}
/* L'icône de la matière dans la barre latérale */
.theme-icone.active {
    color: var(--theme-color);
    text-shadow: 0 0 10px var(--theme-color);
}

/* Colonne classique pour les Actes */


/* =========================================================
   DESIGN DU MENU LATÉRAL (ARBORESCENCE & ÉTATS)
   ========================================================= */

/* 1. Nettoyage des listes (Éradication des puces par défaut) */
.menu-chapitres, .menu-actes, .menu-actes-imbrique {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* 2. Style de base des liens (Éradication du violet classique) */
.lien-chapitre, .lien-radar {
    text-decoration: none !important;
    display: block;
    transition: all 0.3s ease;
}

.lien-chapitre {
    color: #8b949e;
    padding: 10px 0;
    font-size: 0.95rem;
}

.lien-radar {
    color: #8b949e;
    padding: 8px 15px;
    font-size: 0.82rem;
    letter-spacing: 1px;
    line-height: 1.4;
    border-left: 3px solid transparent;
}

/* Forcer la couleur même si le lien a déjà été cliqué */
.lien-chapitre:visited, .lien-radar:visited {
    color: #8b949e;
}

/* Effet au survol */
.lien-chapitre:hover, .lien-radar:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
}

/* 3. L'état Verrouillé (Grisé et Cadenassé) */
.locked {
    opacity: 0.4;
    filter: grayscale(100%);
}

.locked .lien-chapitre, 
.locked .lien-radar {
    color: #484f58 !important; /* Gris sombre type GitHub */
    pointer-events: none; /* Désactive totalement le clic */
    cursor: not-allowed;
    background-color: transparent !important;
}

.locked i.fa-lock {
    color: #484f58 !important;
}

/* Le titre du chapitre actif dans le menu */
.chapitre-item.actif > .lien-chapitre {
    color: var(--theme-color);
    font-weight: bold;
    border-bottom: 1px solid var(--theme-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* L'icône du cadenas/règle du chapitre actif */
.chapitre-item.actif > .lien-chapitre i {
    color: var(--theme-color);
}

/* 5. Indentation et ligne de suivi pour les Actes imbriqués */
.menu-actes-imbrique {
    padding-left: 15px;
    margin-left: 6px;
    border-left: 1px solid #30363d;
    margin-bottom: 15px;
}

.menu-actes-imbrique li {
    margin-bottom: 5px;
}

/* 6. L'ÉTAT ACTIF DE L'ACTE EN COURS (Le repère visuel) */
.menu-actes-imbrique a.lien-radar.active {
    color: #ffffff;
    font-weight: bold;
    border-left: 3px solid #e11d48; /* Ligne fine rose flash */
    background-color: rgba(225, 29, 72, 0.05); 
}

/* 7. L'ÉTAT VITRINE (Avant d'entrer dans la Matrice) */
.menu-actes-imbrique a.lien-radar.active-vitrine {
    color: #ffffff;
    font-weight: bold;
    border-left: 3px solid #cbd5e1; /* Gris clair brillant */
    background-color: rgba(203, 213, 225, 0.05); 
}

/* 1. LE GRAND CONTENEUR GLOBAL */
.f2m-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
}

/* 2. LE PARENT BARRE LATÉRALE DOUBLE (LE RECALAGE UNIQUE)
   ========================================================= */
.sidebar-double {
    display: flex;       /* Met globale et locale côte à côte */
    height: 100vh;       /* Toute la hauteur */
    position: fixed;     /* Verrouillé à gauche */
    top: 0;
    left: 0;
    z-index: 100;        /* Au-dessus du fond étoilé */

    max-height: 100vh; /* Limite la taille à la hauteur de l'écran */
    overflow-y: auto;  /* Autorise le scroll vertical à l'intérieur */
    
    /* Optionnel : Styliser un peu la barre de défilement pour rester "DeepTech" */
    scrollbar-width: thin;
    scrollbar-color: #e11d48 transparent;
}


/* 3. LE CONTENU PRINCIPAL */

/* =========================================================
   BARRE LATÉRALE LOCALE (MENU DU CHAPITRE)
   ========================================================= */
.sidebar-locale {
    width: 220px;
    height: 100vh;
    background: #0d1117;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Le verrouillage mathématique de la boîte */
    padding: 20px;
    box-sizing: border-box; 
    
    /* Le vernis typographique Premium */
    line-height: 1.1; 
    letter-spacing: 2px; 
    font-weight: 600; 
    text-transform: uppercase;
}

/* =========================================================
   BARRE LATÉRALE GLOBALE (MENU DES MATIÈRES/THÈMES)
   ========================================================= */
.sidebar-globale {
    width: 60px;
    height: 100vh; /* La fameuse hauteur intégrée ici */
    background: #090c10;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    gap: 20px;
}


/* =========================================================
   ZONE PRINCIPALE & CONTENEUR DES ACTES (CONSOLIDÉ)
   ========================================================= */

/* L'espace global (Garde sa place pour la barre latérale) */
.main-content {
    flex: 1;
    margin-left: 280px !important; 
    width: calc(100% - 280px) !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    align-items: center !important;
    
    padding: 40px 20px 100px 20px !important; 
    margin-top: 0 !important;
}

/* La vitrine / Les actes (Le bouclier !important sur le display est retiré) */
.conteneur-actes {
    display: flex; /* 🔓 C'EST ICI LA CLÉ : Pas de !important */
    flex-direction: column;
    gap: 40px; 
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    z-index: 5;
    position: relative;
}

/* =========================================================
   L'OUVERTURE DES VANNES DU SCROLL (Correctif HTML/BODY)
   ========================================================= */
html, body {
    height: auto !important; 
    min-height: 100vh !important; /* La page fait au moins l'écran, mais peut grandir à l'infini */
    overflow-y: auto !important;  /* FORCE l'apparition de l'ascenseur vertical */
    overflow-x: hidden !important; /* Maintient la sécurité contre le scroll horizontal */
}

.f2m-layout {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}



/* Vos styles d'origine pour le texte et le glitch restent 100% actifs ici */

/* --- LA GRILLE RESPONSIVE --- */
.masterclass-grid {
    display: grid;
    /* Crée automatiquement 1 colonne sur mobile, 2 colonnes sur grand écran */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    width: 100%;
    max-width: 1000px;
    margin: 40px auto 0 auto; /* Espacement sous le titre F2M-TECH */
}

/* --- LISTE VERTICALE --- */
.masterclass-list {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les blocs à l'intérieur */
    width: 100%;
    max-width: 900px; /* Optionnel : empêche le rail de devenir trop large sur grand écran */
    margin: 0 auto; /* Centre le rail lui-même par rapport à la page */
    padding: 0; /* Élimine tout décalage invisible */
}

/* --- BLOC CLIQUABLE (Remplace le bouton) --- */
.masterclass-block {
    display: block; 
    text-decoration: none;
    text-align: center;
    background: transparent; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 30px;
    transition: all 0.3s ease;
}

/* L'effet d'immersion au survol */
.masterclass-block:hover {
    transform: translateY(-5px);
    background: rgba(15, 23, 42, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.masterclass-block h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.masterclass-block p {
    line-height: 1.6;
    margin: 0;
}
.masterclass-block, 
.masterclass-block h2, 
.masterclass-block p {
    text-decoration: none !important;
}

/* Suppression de la couleur or par défaut sur les titres */
.masterclass-block h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

/* --- THEME ALGÈBRE (BLEU CYAN) --- */
.theme-algebre h2 { color: #00f0ff; }
.theme-algebre:hover {
    border-color: #00f0ff;
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
}

/* --- THEME ANALYSE (VERT NÉON) --- */
.theme-analyse h2 { color: #39ff14; }
.theme-analyse:hover {
    border-color: #39ff14;
    box-shadow: 0 10px 30px  rgba(15, 70, 5, 0.2);
}
/* AJOUTEZ CECI POUR LE TEXTE DE LA BARRE LATÉRALE : */
.theme-analyse .logo-f2m span {
    color: #39ff14;
    text-shadow: 0 0 10px  rgba(15, 70, 5, 0.2);
}

.theme-probabilites h2 { color: #ff1495; }
.theme-probabilites:hover {
    border-color: #ff1495;
    box-shadow: 0 10px 30px rgba(225, 29, 72, 0.1);
}

.theme-probabilites .logo-f2m span {
    color: #ff1495;
    text-shadow: 0 0 10px rgba(225, 29, 72, 0.1);
}



/* --- THEME SYNTHÈSE (ROUGE NÉON) --- */
.theme-synthese h2 { color: #ff073a; }
.theme-synthese:hover {
    border-color: #ff073a;
    box-shadow: 0 10px 30px rgba(255, 7, 58, 0.2);
}

/* 1. Le flou appliqué fiche par fiche par le moteur JS */
.brouillard-actif {
    filter: blur(6px) grayscale(50%);
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
    transition: all 0.5s ease;
}

/* 2. Le sas de sécurité automatique (Bouton d'interception) */
.interception-paywall-auto {
    text-align: center;
    margin: 40px 0;
    padding: 40px 20px;
    background: linear-gradient(to bottom, rgba(13, 17, 23, 0), rgba(212, 175, 55, 0.08) 50%, rgba(13, 17, 23, 0));
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    position: relative;
    z-index: 20;
}



/* --- LA MODALE DE DÉVERROUILLAGE --- */
.modale-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(10, 14, 23, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex; /* Utilisé via JS pour l'afficher */
    justify-content: center;
    align-items: center;
}

.modale-content {
    position: relative;
    width: 90%;
    max-width: 450px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: apparitionModale 0.3s ease-out;
}

@keyframes apparitionModale {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.btn-fermer {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #a8b2d1;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s;
}

.btn-fermer:hover { color: #ff4d6d; }

.input-f2m {
    width: 100%;
    padding: 12px;
    background-color: rgba(13, 17, 23, 0.8);
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #58a6ff;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 2px;
    transition: box-shadow 0.3s;
    box-sizing: border-box;
}

.input-f2m:focus {
    outline: none;
    border-color: #58a6ff;
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.2);
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25D366;
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s;
}

.btn-whatsapp:hover { background-color: #1ebe5d; }

/* ==========================================================================
   MODALE WHATSAPP
   ========================================================================== */
.modale-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 14, 23, 0.85); /* Assombrit le fond */
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modale-content {
    position: relative;
    width: 90%;
    max-width: 450px;
    padding: 40px 30px;
    border: 1px solid rgba(212, 175, 55, 0.3); /* Liseré or discret */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    animation: apparitionModale 0.3s ease-out;
}

@keyframes apparitionModale {
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modale-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    color: #a8b2d1;
    cursor: pointer;
    transition: color 0.3s;
}

.modale-close:hover {
    color: #e11d48;
}

.btn-whatsapp {
    display: inline-block;
    background-color: #25D366;
    color: white;
    padding: 12px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
}

.btn-whatsapp:hover {
    background-color: #1ebe57;
    transform: scale(1.05);
}

/* =========================================================
   FORCAGE ABSOLU DU THÈME SUR LA ZONE CENTRALE
   ========================================================= */
.main-content h2,
.main-content h3,
.conteneur-actes h2,
.conteneur-actes h3,
.section-header,
.f2m-acte-container h3 {
    color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

/* On s'assure également que la petite icône à côté du titre prend la couleur */
.main-content h2 i,
.main-content h3 i,
.section-header i {
    color: var(--theme-color) !important;
}

@media (max-width: 950px), (max-height: 500px) {
    header {
        justify-content: flex-start !important;
        padding-top: 60px !important;
        height: auto !important;
        min-height: 100dvh !important;
    }
}