/* =========================================
   1. DÉCLARATION DES POLICES
   ========================================= */

@font-face {
    font-family: 'PubliFluor';
    src: url('PubliFluorNormale.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chaloupee';
    src: url('Chaloupee-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Garabosse';
    src: url('Garabosse-Perle.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. VARIABLES
   ========================================= */
:root {
    --rose-fluo: #FF00FF;
    --noir-intense: #000000;
    --blanc: #FFFFFF;
}

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

html {
    scroll-behavior: smooth;
}

/* =========================================
   3. STYLE GLOBAL (FOND DÉGRADÉ VERTICAL)
   ========================================= */
body {
    /* DÉGRADÉ VERTICAL : Du Rose (Haut) vers le Bleu Nuit (Bas) */
    background: linear-gradient(180deg, 
        #FF00FF 0%,   
        #D500FF 25%,  
        #AA00FF 50%,  
        #5500FF 75%,  
        #1a0b2e 100%  
    );
    
    min-height: 100vh;
    color: var(--blanc);
    
    font-family: 'Garabosse', sans-serif;
    line-height: 1.6;
    font-size: clamp(18px, 2.2vw, 24px);
    
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
}

/* =========================================
   4. TYPOGRAPHIE
   ========================================= */

.titre-n1 {
    font-family: 'PubliFluor', sans-serif;
    color: var(--blanc);
    font-size: clamp(80px, 15vw, 250px);
    line-height: 0.9;
    text-transform: uppercase;
    font-weight: normal;
    font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
}

.titre-n2 {
    font-family: 'PubliFluor', sans-serif;
    color: var(--blanc);
    font-size: clamp(2.5rem, 4vw, 5rem);
    text-transform: uppercase;
    margin-bottom: 2rem;
    
    border-bottom: 4px solid var(--blanc);
    display: inline-block;
    width: fit-content;
    
    font-weight: normal;
    font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
}

.emphase {
    font-family: 'Chaloupee', sans-serif;
    color: var(--blanc);
    font-size: 1.4em;
    font-weight: normal;
    font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* =========================================
   5. HEADER & MENU (TRANSPARENT + DYNAMIQUE)
   ========================================= */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    background-color: transparent; 
    border-bottom: 1px solid rgba(255,255,255,0.3); /* Ligne blanche semi-transparente */
    
    padding: 1rem 2rem;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    
    /* Transition douce pour le changement de couleur */
    transition: color 0.3s ease, border-color 0.3s ease;
}

.logo {
    font-family: 'PubliFluor', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF; /* Couleur par défaut (changée par JS si besoin) */
    font-weight: normal;
    transition: color 0.3s ease;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

nav a {
    font-family: 'Garabosse', sans-serif !important;
    text-decoration: none;
    color: #FFFFFF; /* Couleur par défaut */
    text-transform: lowercase;
    font-weight: bold;
    font-size: 1.1rem;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    padding: 0.2rem 0.5rem;
    letter-spacing: 0.5px;
}

nav a:hover {
    text-decoration: underline;
}

/* Classe utilitaire ajoutée par le JS quand on est dans la zone sombre */
header.menu-sombre .logo,
header.menu-sombre nav a {
    color: #FFFFFF; /* Reste blanc si on veut, ou mettre une autre couleur si besoin */
}

/* Classe utilitaire ajoutée par le JS quand on est dans la zone claire (Haut) */
/* Ici, sur le rose fluo, le blanc est déjà lisible. 
   Si vous vouliez du NOIR en haut, ce serait ici : 
   header.menu-clair .logo { color: #000; } 
   Mais comme demandé, on reste en blanc pour la cohérence, 
   le JS sert surtout si vous voulez changer la ligne de séparation.
*/

/* =========================================
   6. HERO & SECTIONS
   ========================================= */
.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 80px;
}

section {
    min-height: 80vh;
    padding: 6rem 2rem 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: transparent;
}

/* =========================================
   7. SECTION MANIFESTE (DÉGRADÉ VERTICAL IDENTIQUE)
   ========================================= */

#manifeste {
    align-items: flex-start; 
}

#manifeste .titre-n2 {
    align-self: flex-start;
    margin-left: 0;
    text-align: left;
}

.cadre-manifeste {
    /* MODIFICATION : Dégradé VERTICAL (Rose en haut -> Noir en bas) */
    background: linear-gradient(180deg, 
        #FF00FF 0%,   
        #D500FF 25%,  
        #AA00FF 50%,  
        #5500FF 75%,  
        #1a0b2e 100%  
    );
    
    border: none; 
    color: var(--blanc); 
    padding: 3rem;
    max-width: 900px;
    width: 100%;
    margin: 2rem auto;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border-radius: 8px;
}

.cadre-manifeste p {
    font-family: 'Garabosse', sans-serif;
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    max-width: 100%;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cadre-manifeste p:last-child {
    margin-bottom: 0;
}

/* =========================================
   8. TEXTE DES SECTIONS
   ========================================= */
.texte-normal, 
#cestquoi p, #cestqui p, #projets-editoriaux p, #projet-politique p, #contact p {
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* =========================================
   9. GESTION DES SVG
   ========================================= */
img.svg-lune-hero, 
img.svg-lune-cycle-manifeste, 
img.svg-lune-manifeste {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.svg-lune-hero {
    width: 80px !important;
    max-width: 80px !important;
    margin: 0 auto;
    filter: invert(1); 
}

.svg-lune-cycle-manifeste,
.svg-lune-manifeste {
    filter: brightness(0) invert(1); /* Force le blanc */
}
.svg-lune-cycle-manifeste {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto 2rem auto;
}
.svg-lune-manifeste {
    width: 80px !important;
    max-width: 80px !important;
    margin: 2rem auto 0 auto;
}