/* LES POLICES POUR TOUT LE SITE MEME LA PAGE JARDIN ET LE PORTAIL */
@font-face { font-family: 'Oswald'; src: url('fonts/Oswald-Bold.woff2') format('woff2'), url('fonts/Oswald-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Martin-Luther-King'; src: url('fonts/Martin Luther King.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter18pt-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter-Bold'; src: url('fonts/Inter18pt-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* LES BASES */
:root {
    --bg-color: #080808;      
    --text-color: #ececec;    
    --white-pure: #ececec;   
    --meta-color: #999999;    
    --accent-color: #FFE600; 
    
    --font-title: 'Oswald', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --font-body: 'Inter', sans-serif;
    --font-deco: 'Martin-Luther-King', fantasy;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    cursor: url('img/cursor-default.svg') 15 15, auto;
}

/* CURSEURS */
a, button, .title-wrapper-centered {
    cursor: url('img/cursor-pointer.svg') 15 15, pointer;
}
p, span, h1, h2, h3, div {
    cursor: url('img/cursor-text.svg') 15 15, text;
}
::selection { background-color: var(--accent-color); color: var(--bg-color); }

/* HEADER */
header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 2rem; position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
    background: linear-gradient(to bottom, #080808 80%, rgba(8,8,8,0));
}

/* LAYOUT ET MES TITRES */
main { padding-top: 180px; padding-bottom: 100px; display: flex; justify-content: center; }
.editorial-layout { width: 100%; max-width: 800px; padding: 0 1.5rem; }

.article-header { text-align: center; margin-bottom: 5rem; }

.category { 
    display: block; 
    font-family: var(--font-mono);
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 2rem; 
    color: var(--text-color); 
}

.title-wrapper-centered { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-bottom: 2rem; 
    position: relative; 
}

.main-title {
    font-family: var(--font-title);
    font-size: clamp(3.5rem, 10vw, 6.5rem);
    text-transform: uppercase;
    line-height: 0.9;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    letter-spacing: -1px;
    z-index: 1;
}

.meta-info { font-family: var(--font-mono); font-size: 0.85rem; color: var(--meta-color); margin-top: 2rem; }
.separator { margin: 0 0.5rem; }

/* LE TEXTES GLOBAL */
.article-body p {
    font-size: 1.2rem;       
    line-height: 1.8;        
    margin-bottom: 2.5rem;  
    text-align: left;
    color: var(--white-pure);
    text-wrap: pretty;       
}

.section-question {
    font-family: var(--font-deco);
    color: var(--accent-color);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem); 
    margin: 3rem 0 1.5rem 0;
    line-height: 3;
    text-align: left;
}

.article-body strong, .article-body b {
    font-weight: normal;
    color: var(--white-pure);
    border-bottom: 3px solid var(--accent-color);
    display: inline-block;
    line-height: 1.2;
}

.article-body em, .article-body i {
    font-style: italic;
    border-bottom: 3px solid var(--accent-color);
}

/* MA BIBLIO */
.bibliography {
    margin-top: 8rem;
    padding-top: 2rem;
    color: var(--meta-color);
    text-align: left;
    font-size: 1.2rem; 
    line-height: 1.8;
}

.biblio-section { margin-bottom: 3rem; }
.biblio-section h4 {
    font-size: 1.2rem; 
    margin-bottom: 1.5rem;
    color: var(--accent-color);
    font-weight: bold; 
}

.biblio-content { display: flex; flex-direction: column; gap: 1.5rem;  }
.biblio-item { color: #999; }
.biblio-item .author { font-variant: small-caps; color: #ccc; font-weight: bold; }
.biblio-item a {
    color: var(--meta-color);
    text-decoration: none;
    border-bottom: 1px solid #444;
    transition: color 0.3s;
}
.biblio-item a:hover { color: var(--accent-color); border-color: var(--accent-color); }

/* LES DIAPORAMAS */
.asterisk-btn {
    background: none; border: none;
    color: var(--accent-color);
    font-size: 1.5rem;
    cursor: pointer;
    vertical-align: super;
    transition: transform 0.3s;
}
.asterisk-btn:hover { transform: rotate(90deg); }

.gallery-overlay {
    display: none;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(8, 8, 8, 0.95);
    z-index: 2000;
    justify-content: center; align-items: center;
}

.gallery-content {
    position: relative; width: 90%; max-width: 600px;
    background: #111; padding: 10px; border: 1px solid #333;
}

.nts-slide { display: none; width: 100%; height: auto; border: 1px solid var(--accent-color); }
.nts-slide:first-child { display: block; }

.gallery-nav {
    margin-top: 15px; display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono); color: var(--white-pure);
}

.gallery-nav button {
    background: transparent; border: 1px solid var(--accent-color);
    color: var(--accent-color); padding: 5px 10px; cursor: pointer;
}

.close-btn {
    position: absolute; top: -40px; right: 0;
    background: none; border: none; color: white; font-size: 2rem; cursor: pointer;
}

/* MON FOOTER ET LE PRINT */
footer {
    text-align: center; padding: 4rem 2rem; font-size: 0.75rem;
    color: #cccccc; font-family: var(--font-mono);
}

.print-button {
    margin-top: 2rem; background: transparent;
    border: 1px solid #cccccc; color: #cccccc;
    padding: 1rem 2rem; font-family: var(--font-mono);
    text-transform: uppercase; cursor: pointer;
    transition: all 0.3s;
}
.print-button:hover {
    border-color: var(--accent-color); color: var(--accent-color);
    background: rgba(255, 230, 0, 0.1);
}

/* LE RESPONSIVE */
@media (min-width: 1024px) {
    .category {
        letter-spacing: 0.2rem;
        margin-bottom: 1.5rem;
        opacity: 0.8;
    }

    .main-title {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 700;
        font-size: 6.5rem !important;
        letter-spacing: -0.02em;
        line-height: 0.9;
        margin-bottom: 1.5rem !important; 
    }

    .article-header {
        margin-bottom: 7rem;
    }
}

/* BOUTON POUR LE PORTAIL */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 2rem;
    z-index: 1000;
    pointer-events: none;
}

.back-home-btn {
    pointer-events: auto; 
    text-decoration: none;
    color: var(--meta-color);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    border: 1px solid #333;
    padding: 0.5rem 1rem;
    background-color: var(--bg-color); 
    transition: all 0.3s ease;
}

.back-home-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}


@media (max-width: 768px) {
    .back-home-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.6rem;
    }
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    header { position: absolute; padding: 1.5rem; background: transparent; }
    main { padding-top: 100px; }
    .article-body p { font-size: 1.1rem; line-height: 1.6; }
    .main-title { font-size: 15vw; }
    * { cursor: auto !important; }
}

/* IMPRIMER ESSAIE, POUR LE SUITE DU PROJET , JE VAIS FAIRE DU WEB TO PRINT PERSONNALISABLE EN MODE TOOLS ONLINE */
@media print {
    :root {
        --bg-color: #ffffff; --text-color: #000000;
        --white-pure: #000000; --accent-color: #000000; 
    }
    body { background-color: white; color: black; font-size: 11pt; }
    .print-button, .gallery-overlay, .asterisk-btn { display: none !important; }
    header { position: static; border-bottom: 0.5pt solid #000; margin-bottom: 1cm; }
    .main-title { font-size: 3.5rem !important; margin-bottom: 2cm !important; }
    @page { margin: 1.5cm; size: A4 portrait; }
}