/*
Theme Name: Annet Portfolio
Author: Annet-Romain
Description: Thème custom 3D pour portfolio MMI.
Version: 1.0
*/

/* Variables globales - NOUVELLE DA */
:root {
    --bg-cream: #f2f2f0;
    /* Le fond clair de ton image */
    --lime-green: #ccff00;
    /* La bande verte acide */
    --blue-band: #4361ee;
    /* La bande bleue */
    --text-black: #1a1a1a;
    --pattern-color: rgba(0, 0, 0, 0.03);
}

/* Forcer le rendu style "Dézoom 90%" sur Ordinateur avec compensation de la largeur */
/* @media (min-width: 1024px) {
    body {
        zoom: 0.90;
        width: 111.111vw !important; /* 100 / 0.9 = 111.111% pour combler le bord droit ! */
/* max-width: 111.111vw !important;
    }
} */

#deck-container {
    overflow: hidden !important;
}

/* SCROLL GESTION */
body {
    background-color: var(--bg-cream);
    color: var(--text-black);
    background-image: radial-gradient(var(--pattern-color) 2px, transparent 0);
    background-size: 30px 30px;

    overflow-x: clip;
    /* 🔴 Remplacer 'hidden' par 'clip' */
    /* overflow-y: auto; 🔴 SUPPRIMER CETTE LIGNE COMPLETEMENT */
    perspective: none !important;
    transform: none !important;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   NOISE OVERLAY GLOBAL — Texture organique animée, style grain de film
   Div dédiée pour éviter les problèmes de stacking context du body::after
   ========================================================================== */

/* Animation "pellicule" : sauts aléatoires du tile via steps() — pas de fluidité, 
   c'est voulu ! Simule exactement le défilement frame-par-frame d'un grain argentique */
@keyframes noise-film {
    0% {
        background-position: 0% 0%;
    }

    10% {
        background-position: 30% 15%;
    }

    20% {
        background-position: -20% 40%;
    }

    30% {
        background-position: 50% -10%;
    }

    40% {
        background-position: -40% 30%;
    }

    50% {
        background-position: 25% 60%;
    }

    60% {
        background-position: -55% 20%;
    }

    70% {
        background-position: 10% -50%;
    }

    80% {
        background-position: 45% 80%;
    }

    90% {
        background-position: -30% 55%;
    }

    100% {
        background-position: 0% 0%;
    }
}

#site-noise {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.40' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
    /* multiply : fond × bruit — sur blanc = grain noir pur, partout ✅ */
    mix-blend-mode: multiply;
    opacity: 0.35;
    pointer-events: none;
    z-index: 2147483640;
    animation: noise-film 0.2s steps(1) infinite;
}

/* --- NOUVEAU : BANDEAUX DÉFILANTS (MARQUEE) --- */
.marquee-container {
    position: absolute;
    width: 200%;
    left: -50%;
    display: flex;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    min-width: 100%;
    gap: 0;
    animation: scroll 60s linear infinite;
}

.marquee-item {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    padding-right: 2rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2rem;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

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

.band-lime {
    background-color: var(--lime-green);
    color: var(--text-black);
}

.band-blue {
    background-color: var(--blue-band);
    color: white;
}

.band-white {
    background-color: white;
    color: var(--blue-band);
    border-color: var(--blue-band);
}

.band-black {
    background-color: black;
    color: var(--lime-green);
    border-color: var(--lime-green);
}

/* --- GESTION DES PLANS (Z-INDEX) --- */
.z-background-decor {
    z-index: 0 !important;
}

/* 🔴 REMPLACER 1 PAR 0 */
.z-scene-3d {
    position: relative;
    z-index: 50 !important;
}

.z-interactive {
    position: relative;
    z-index: 100 !important;
}

/* 🔴 AJOUTER position: relative; */

.scene {
    z-index: 10;
    pointer-events: none;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.shelf {
    pointer-events: auto;
    display: flex;
    gap: 15px;
    align-items: flex-end;
    transform-style: preserve-3d;
    transform: rotateX(20deg) rotateY(-30deg) translateY(50px);
    transition: transform 0.1s linear;
}

/* --- LIVRE 3D --- */
.book-3d {
    width: var(--w);
    height: var(--h);
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    margin-bottom: 20px;
}

.book-3d:hover {
    transform: translateZ(120px) translateY(-20px);
    z-index: 50;
}

.face {
    position: absolute;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

.spine {
    width: var(--w);
    height: var(--h);
    transform: translateZ(calc(var(--d) / 2));
    z-index: 10;
    background: #ffffff;
    box-shadow: inset 2px 0 10px rgba(0, 0, 0, 0.03), inset -2px 0 10px rgba(0, 0, 0, 0.03);
}

.cover-front {
    width: var(--d);
    height: var(--h);
    left: 50%;
    margin-left: calc(var(--d) / -2);
    transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
    background: #fafafa;
}

.top {
    width: var(--w);
    height: var(--d);
    top: 50%;
    margin-top: calc(var(--d) / -2);
    transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
    background: linear-gradient(to right, #eee 1px, #fff 1px);
    background-size: 3px 100%;
}

.back-pages {
    width: var(--w);
    height: var(--h);
    transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
    background: #f5f5f5;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.book-shadow {
    position: absolute;
    width: var(--w);
    height: var(--d);
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    filter: blur(15px);
    transform-origin: center center;
    transform: rotateX(90deg) translateZ(calc(var(--d) / 2 + 5px)) scale(1.1);
    opacity: 0.3;
    transition: all 0.5s ease;
    pointer-events: none;
}

.book-3d:hover .book-shadow {
    opacity: 0.15;
    transform: rotateX(90deg) translateZ(calc(var(--d) / 2 - 80px)) scale(0.8);
    filter: blur(25px);
}

/* --- READER VIEW --- */
#reader-view {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1500px;
}

.reader-book {
    width: 90vw;
    height: 90vh;
    max-width: 1000px;
    background: white;
    transform: rotateY(15deg) translateZ(-200px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    .reader-book {
        flex-direction: row;
    }
}

.is-reading .reader-book {
    opacity: 1;
    transform: rotateY(0) translateZ(0);
    pointer-events: auto;
}

.vertical-rl {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #002FA7;
    border-radius: 3px;
}

/* ==========================================================================
   DA ADDON : STREET, NOISE & CHAOS (V3 - CORRECTION FLUX & Z-INDEX)
   ========================================================================== */

/* 1. VRAI EFFET DE BRUIT ANIMÉ (GRAIN DE FILM) */
.da-global-noise {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200vw;
    height: 200vh;
    pointer-events: none;
    z-index: 2147483639;
    opacity: 0.12;
    mix-blend-mode: multiply;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    animation: noise-dance 0.3s steps(4) infinite;
}

@keyframes noise-dance {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2%, -2%);
    }

    50% {
        transform: translate(-2%, 2%);
    }

    75% {
        transform: translate(2%, 2%);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* 2. LE SCOTCH (TAPE) */
.da-tape {
    position: absolute;
    width: 140px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px) sepia(0.4);
    border-left: 2px dashed rgba(0, 0, 0, 0.3);
    border-right: 2px dashed rgba(0, 0, 0, 0.3);
    z-index: 80;
    pointer-events: none;
    mix-blend-mode: hard-light;
}

/* 3. CALQUE ARRIÈRE-PLAN DES DÉCORATIONS (SÉCURITÉ ABSOLUE) */
.da-bg-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* Z-INDEX NÉGATIF : C'est la seule façon d'être SÛR qu'il passe sous tout le contenu */
    z-index: -1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    /* S'assurer qu'il ne prend aucune place dans le flux normal */
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. GRIBOUILLIS VECTORIELS */
.da-scribble {
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0.6;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
}

/* --- CURSEUR INVERSÉ BRUTALISTE --- */
/* On cache le curseur natif uniquement sur ordinateur */
@media (pointer: fine) {

    body,
    a,
    button,
    .cursor-pointer {
        cursor: none !important;
    }
}

.da-inverted-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
    /* La magie opère ici */
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    transition: width 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: none;
    /* Caché par défaut pour les mobiles */
}

/* Effet d'agrandissement au survol d'un lien */
.da-inverted-cursor.hovering {
    width: 80px;
    height: 80px;
}

@media (pointer: fine) {
    .da-inverted-cursor {
        display: block;
    }
}

/* --- OVERRIDE : IMAGES BITMAP AU LIEU DE GRAYSCALE --- */
/* img.grayscale, .grayscale img, .toc-image-container img { filter: url(#da-bitmap) !important; } */

/* On remet l'image normale au survol */
.group:hover img.group-hover\:grayscale-0,
.toc-link:hover .toc-image-container img {
    filter: none !important;
}

/* --- PROTECTION DE LA LISIBILITÉ (CARTOUCHES BRUTALISTES) --- */

/* ==========================================================================
   MEDIA WRAPPERS GLOBAUX — Code couleur : Rouge YouTube / Lime PDF / Bleu Images
   ========================================================================== */
.da-video-wrapper,
.da-pdf-wrapper,
.da-img-wrapper {
    margin: 1.5rem 0;
    background: white;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* YouTube — rouge */
.da-video-wrapper {
    border: 2px solid #1a1a1a;
    box-shadow: 6px 6px 0px #ff0000;
}

.da-video-wrapper:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #ff0000;
}

.da-video-header {
    background: #1a1a1a;
    color: white;
    padding: 0.45rem 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ff0000;
}

.da-video-header i {
    color: #ff0000;
}

.da-video-content {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: black;
}

.da-video-content iframe,
.da-video-content video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    object-fit: cover;
    z-index: 5;
}

/* Sécurité contre les wrappers WordPress qui s'infiltreraient */
.da-video-content .wp-block-embed,
.da-video-content .wp-block-embed__wrapper {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   DA PROJECT LINK / CARD (Archive & Front-Page)
   ========================================================================== */
.da-project-link {
    display: block;
    border: 2px solid #1a1a1a;
    box-shadow: 8px 8px 0px #1a1a1a;
    max-width: 100%;
    background: #f2f2f0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none !important;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.da-project-link:hover {
    box-shadow: 12px 12px 0px #ccff00;
    transform: translate(-4px, -4px);
}

.da-project-header svg,
.da-project-footer svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.da-project-link:hover .da-project-header svg,
.da-project-link:hover .da-project-footer svg {
    color: #ccff00;
    transform: translateX(5px);
}

.da-project-header {
    background: #1a1a1a;
    color: white;
    padding: 0.5rem 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #1a1a1a;
}

.da-project-footer {
    background: #1a1a1a;
    color: white;
    padding: 0.5rem 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #1a1a1a;
}

.da-project-content {
    padding: 0;
    display: block;
    /* aspect-ratio contrôlé par Tailwind aspect-video */
    position: relative;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
}

.da-project-content img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    margin: 0 !important;
    transition: opacity 0.3s ease;
}

.da-project-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.da-project-link:hover .da-project-content img {
    opacity: 0.9;
}

.da-project-link:hover .da-project-overlay {
    opacity: 1;
}

/* PDF — lime */
.da-pdf-wrapper {
    border: 2px solid #1a1a1a;
    box-shadow: 6px 6px 0px #ccff00;
}

.da-pdf-wrapper:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #ccff00;
}

.da-pdf-header {
    background: #1a1a1a;
    color: #ccff00;
    padding: 0.45rem 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ccff00;
}

.da-pdf-content {
    background: #f2f2f0;
    height: 520px;
    width: 100%;
}

.da-pdf-content object,
.da-pdf-content embed,
.da-pdf-content iframe,
.da-pdf-content .wp-block-file__content,
.da-pdf-content .wp-block-file object {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px;
    border: none;
}

/* Images / autres — bleu */
.da-img-wrapper {
    border: 2px solid #1a1a1a;
    box-shadow: 6px 6px 0px #4361ee;
}

.da-img-wrapper:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #4361ee;
}

.da-img-header {
    background: #1a1a1a;
    color: #4361ee;
    padding: 0.45rem 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #4361ee;
}

.da-img-header i {
    color: #4361ee;
}

.da-img-content {
    width: 100%;
}

.da-img-content img {
    width: 100%;
    height: auto;
    display: block;
}

/* Titre de la carte expérience : sobre, lisible, sans fond noir opaque */
.experience-card h3 {
    color: #1a1a1a;
    line-height: 1.15;
    position: relative;
    z-index: 50;
}

/* Lien titre hôver : couleur bleue sans background */
.experience-card h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.experience-card h3 a:hover {
    color: #4361ee;
}

/* ==========================================================================
   SAUVETAGE LISIBILITÉ : BRUTALISME CLEAN ET NET
   ========================================================================== */

/* 1. ON TUE LES CONTOURS BAVEUX ET LES OMBRES MULTIPLES SUR TOUT LE SITE */
h1,
h2,
h3,
p,
a,
span,
div,
footer *,
.font-mono {
    -webkit-text-stroke: 0px transparent !important;
    text-shadow: none !important;
}

/* 2. ON RESTAURE LES TITRES AVEC UNE SEULE OMBRE DURE (Lisibilité 100%) */
/* Titres sur fonds clairs (ex: Bienvenue, Annet-Romain) */
h1.font-grotesk,
h2.font-grotesk {
    color: #1a1a1a !important;
    position: relative;
    z-index: 60;
}

/* Titres sur fonds sombres (ex: Discutons, Radar Créatif) */
#contact h2.font-grotesk,
#critique h2.font-grotesk,
.bg-black h2.font-grotesk,
.band-blue h2.font-grotesk {
    color: #f2f2f0 !important;
    text-shadow: 4px 4px 0px #1a1a1a !important;
}

/* 3. EXCEPTION : TES MOTS VOLONTAIREMENT TRANSPARENTS ("Professionnelle", "Créatif") */
.text-transparent {
    color: transparent !important;
    -webkit-text-stroke: 2px #1a1a1a !important;
    text-shadow: none !important;
}

/* 4. CARTOUCHES D'EXPÉRIENCES (H3) : Fond noir, texte blanc, très propre */
.experience-card h3.font-grotesk {
    color: white !important;
    background-color: #1a1a1a;
    padding: 0.5rem 1rem;
    display: inline-block;
    box-shadow: 4px 4px 0px #ccff00 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0px transparent !important;
}

/* 5. SÉCURITÉ MAXIMALE POUR LE FOOTER ET BOUTONS */
footer *,
button,
.ps-tool {
    text-shadow: none !important;
    -webkit-text-stroke: 0px transparent !important;
}

/* ==========================================================================
   CORRECTION SPÉCIFIQUE : LISIBILITÉ SUR FONDS SOMBRES (BLEU / NOIR)
   ========================================================================== */

/* 2. On protège ton effet de texte transparent ("Créatif" dans le Radar) */
body:not(.reading-mode) #critique h2.font-grotesk .text-transparent {
    color: transparent !important;
    -webkit-text-stroke: 3px #f2f2f0 !important;
    /* Contour blanc net */
    text-shadow: 5px 5px 0px #1a1a1a !important;
    /* Ombre noire en dessous */
}

/* 3. On fait ressortir les petits textes fluos de ces sections */
#contact .text-\[\#ccff00\],
#critique .text-\[\#ccff00\] {
    text-shadow: 2px 2px 0px #1a1a1a !important;
    /* Petite ombre noire sous le fluo pour qu'il pète */
}


/* ==========================================================================
   MODE LECTURE : NETTOYAGE SÉLECTIF (ON GARDE L'ADN)
   ========================================================================== */

/* 1. On cache uniquement les éléments de "désordre" */
body.reading-mode .da-bg-layer,
body.reading-mode .da-scribble,
body.reading-mode .da-noise-overlay,
body.reading-mode .da-noise-active,
body.reading-mode .da-inverted-cursor {
    display: none !important;
}

/* .da-tape est volontairement gardé visible — fait partie de l'identité visuelle */

/* Le canvas Photoshop est géré uniquement par le JS du toolbar — pas masqué par reading-mode */

/* On s'assure que l'outil reste visible en mode lecture */
body.reading-mode #cs-wrapper {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 3. On nettoie le fond mais on garde les sections structurées */
body.reading-mode {
    background-color: #f8f8f6 !important;
    background-image: none !important;
    /* On enlève les petits points du fond */
    cursor: default !important;
}

/* 4. On s'assure que les bandes de couleur ne deviennent pas transparentes */
body.reading-mode .band-lime,
body.reading-mode .band-blue,
body.reading-mode .band-black,
body.reading-mode .band-white {
    background-image: none !important;
    opacity: 1 !important;
}

/* 5. On garde les titres Brutalistes mais on calme les ombres trop fortes si besoin */
body.reading-mode h1.font-grotesk,
body.reading-mode h2.font-grotesk {
    text-shadow: 3px 3px 0px #ffffff !important;
    /* Ombre plus légère pour la lecture */
    transform: none !important;
    /* On remet les titres droits pour plus de confort */
}

/* --- UNIFICATION DES TITRES EN MODE LECTURE --- */
body.reading-mode h1,
body.reading-mode h2,
body.reading-mode h3 {
    color: #1a1a1a !important;
    /* Texte principal en noir plein */
    text-shadow: none !important;
    /* Supprime l'ombre jaune */
    -webkit-text-stroke: 0px transparent !important;
    /* Reset des contours par défaut */
    transform: none !important;
    box-shadow: none !important;
}

/* EXCEPTIONS — Titres des livres 3D : préserver les couleurs Tailwind (text-white sur bg-black) */
/* La règle h2/h3 ci-dessus forcerait du noir sur noir = invisible */
body.reading-mode .book-3d h2 {
    color: #1a1a1a !important;
    /* Texte sombre sur spine blanche — OK */
    text-shadow: none !important;
    transform: rotate(180deg) !important;
    /* Conserver la rotation verticale */
}

body.reading-mode .book-3d .cover-front h3 {
    color: #ffffff !important;
    /* Texte blanc sur bg-black du badge titre couverture */
    text-shadow: none !important;
    transform: rotate(2deg) !important;
    /* Conserver la légère rotation */
}

/* Exceptions pour la modale (sur fond bleu, les titres doivent rester blancs/clairs) */
body.reading-mode #modal-title {
    color: #ffffff !important;
}

body.reading-mode #modal-type {
    color: #ccff00 !important;
    background-color: #1a1a1a !important;
}

body.reading-mode #modal-subtitle {
    color: #1a1a1a !important;
}

/* Style spécifique pour la partie "vide" (Outline) */
body.reading-mode .text-transparent {
    color: transparent !important;
    -webkit-text-stroke: 1.5px #1a1a1a !important;
    /* Contour noir net */
    text-shadow: none !important;
}

/* Espacement du contenu de la modale "Radar créatif" pour l'aérer */
#modal-content p,
#modal-content ul,
#modal-content ol {
    margin-bottom: 2rem !important;
}

#modal-content h1,
#modal-content h2,
#modal-content h3,
#modal-content h4 {
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
}

/* On s'assure que même sur les sections sombres, le mode lecture reste en N&B clair */
body.reading-mode section {
    background-color: #f8f8f6 !important;
}

/* --- RESTAURATION DU CURSEUR EN MODE LECTURE --- */
body.reading-mode,
body.reading-mode a,
body.reading-mode button,
body.reading-mode .cursor-pointer {
    cursor: auto !important;
    /* Réactive le curseur système */
}

body.reading-mode a,
body.reading-mode button,
body.reading-mode .cursor-pointer {
    cursor: pointer !important;
    /* Force la "main" sur les éléments cliquables */
}


/* ==========================================================================
   MODE CRÉATIF : BACKGROUNDS SOMBRES POUR CONTRASTE MAXIMAL
   ========================================================================== */

/* On force le fond noir sur les sections habituellement claires */
body:not(.reading-mode) #about,
body:not(.reading-mode) #experience,
body:not(.reading-mode) .experience-card,
body:not(.reading-mode) .content-area,
body:not(.reading-mode) .sidebar {
    background-color: #1a1a1a !important;
    /* Noir Brutaliste */
    color: #f2f2f0 !important;
    background-image: radial-gradient(rgba(204, 255, 0, 0.1) 1px, transparent 0) !important;
    /* Points fluos subtils */
}

/* On s'assure que les conteneurs de texte restent lisibles sur le noir */
body:not(.reading-mode) .prose,
body:not(.reading-mode) .project-body p {
    background-color: white !important;
    color: black !important;
}

/* Le contact reste dans son bleu fluo iconique */
body:not(.reading-mode) #contact {
    background-color: #4361ee !important;
}

/* ==========================================================================
   MODE CRÉATIF : RÉPARATION DES CONTRASTES
   ========================================================================== */

/* 1. On ne force le blanc QUE sur les sections qui ont le fond noir */
body:not(.reading-mode) #about,
body:not(.reading-mode) #experience,
body:not(.reading-mode) .experience-card,
body:not(.reading-mode) #critique,
body:not(.reading-mode) .content-area,
body:not(.reading-mode) .sidebar {
    background-color: #1a1a1a !important;
}

/* 3. EXCEPTION CRUCIALE : On préserve le texte NOIR sur les éléments Vert Fluo */
/* Sans ça, tes tags et tes bandes défilantes deviennent illisibles (blanc sur vert) */
body:not(.reading-mode) .band-lime *,
body:not(.reading-mode) .bg-\[\#ccff00\] *,
body:not(.reading-mode) .skill-tag,
body:not(.reading-mode) .timeline-nav-item.active span {
    color: #1a1a1a !important;
}

/* 4. Réparation du titre "Expérience" (Ton Image 2) */
/* Le bandeau titre de l'expérience est en beige (#f2f2f0), il doit rester en texte noir */
body:not(.reading-mode) #experience span * {
    color: #ffffff !important;
}

body:not(.reading-mode) #experience h2 {
    color: #000000 !important;
}

body:not(.reading-mode) .text-transparent {
    -webkit-text-stroke: 2px #ffffff !important;
}


/* --- LOGIQUE DU BADGE 3D --- */
#mode-switcher {
    perspective: 1000px;
}

.preserve-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

/* Animation de rotation selon le mode actif */
body.reading-mode #mode-badge {
    transform: rotateY(180deg);
}

/* Effet "Tactile" au survol */
#mode-switcher:hover #mode-badge {
    transform: scale(1.1) rotate(5deg);
}

body.reading-mode #mode-switcher:hover #mode-badge {
    transform: rotateY(180deg) scale(1.1) rotate(-5deg);
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/* --- LE MODULE DE COMMANDE (ÉPURÉ) --- */
#mode-switcher {
    perspective: 1000px;
}

.preserve-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

/* Animation de rotation (On garde la 3D mais on enlève l'inclinaison de 5deg) */
body.reading-mode #mode-badge {
    transform: rotateY(180deg);
}

#mode-switcher:hover #mode-badge {
    transform: scale(1.05);
    /* Juste un léger zoom, plus de rotate */
}

body.reading-mode #mode-switcher:hover #mode-badge {
    transform: rotateY(180deg) scale(1.05);
    /* Juste un léger zoom */
}

/* Gestion de l'ombre "décalée" uniquement au hover */
.face-creative,
.face-reading {
    box-shadow: 0 0 0 transparent !important;
    /* Cachée par défaut */
    transition: transform 0.7s, box-shadow 0.2s ease !important;
}

/* Apparition de l'ombre au survol du parent */
#mode-switcher:hover .face-creative {
    box-shadow: -6px 6px 0px black !important;
    /* Ombre décalée noire */
}

#mode-switcher:hover .face-reading {
    box-shadow: -6px 6px 0px #4361ee !important;
    /* Ombre décalée bleue */
}


/**/

body:is(.reading-mode) .surTitre {
    color: #ffffff !important;
    background-color: black !important;
}


/*SECTIONS*/

/*about*/
body:not(.reading-mode) #about h3 {
    color: white;
}

body:not(.reading-mode) #about h2.font-grotesk {
    color: #ffffff !important;
}

/*radar*/
/*about*/
body:not(.reading-mode) #critique h3 {
    color: white;
}

body:not(.reading-mode) #critique h2.font-grotesk {
    color: #ffffff !important;
}

body:not(.reading-mode) #critique p {
    color: #4361ee;
    text-shadow: white;
}

/*PROJETS*/
/* Reset du background parasite sur les titres Gutenberg */
.project-body .wp-block-heading {
    background-color: transparent !important;
    background: transparent !important;
}

/* ==========================================================================
   FIGURES & LÉGENDES DANS LES PAGES PROJET ET COMPÉTENCE
   Contrainte : la légende n'apparaît JAMAIS sur l'image (toujours dessous),
   et on override totalement les styles des galeries Gutenberg (wp-block-gallery)
   ========================================================================== */

/* La figure devient l'unité visuelle complète, SAUF pour le wrapper galerie lui-même */
.project-body figure:not(.wp-block-gallery) {
    border: 2px solid #1a1a1a;
    box-shadow: 5px 5px 0px #1a1a1a;
    /* Plus adapté au mobile */
    margin: 2.5rem 0;
    background: #1a1a1a;
    display: flex;
    /* Force l'empilement vertical propre */
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    .project-body figure:not(.wp-block-gallery) {
        box-shadow: 8px 8px 0px #1a1a1a;
    }
}

/* L'image à l'intérieur */
.project-body figure img {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    /* Évite qu'elle ne soit écrasée dans une grid/flex */
    flex-grow: 1;
    /* Pousse la légende tout en bas s'il y a une hauteur fixe */
    background: white;
}

.margin-none {
    margin: 0;
}

.wp-block-columns {
    margin-bottom: 5rem;
}

/* La légende : OVERRIDE MAXIMAL contre les positionnements absolus de Gutenberg (surtout dans les galeries) */
.project-body figure figcaption,
.project-body figure .wp-element-caption,
.project-body .wp-caption-text,
.project-body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    position: relative !important;
    inset: auto !important;
    /* Annule le bottom:0 de WordPress */
    bottom: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    /* Annule le max-height de WordPress */
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    line-height: 1.5 !important;
    color: #ccff00 !important;
    background: #1a1a1a !important;
    /* Force le noir flat vs le linear-gradient natif */
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    border-top: 2px solid #ccff00 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    /* Évite les coupures de mots étranges du text-center sur mobile */
    z-index: 10 !important;
    overflow: visible !important;
}

/* Picto "↳" avant la légende */
.project-body figure figcaption::before,
.project-body figure .wp-element-caption::before,
.project-body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::before {
    content: '↳';
    color: #ccff00;
    margin-right: 0.5rem;
    opacity: 0.7;
    font-size: 0.9rem;
    display: inline-block;
}

/* Ajustements pour les galeries Gutenberg (wp-block-gallery) */
.project-body .wp-block-gallery {
    gap: 1.5rem !important;
    margin: 3rem 0 !important;
}



/* ==========================================================================
   SKETCH CARD — Rectangle technique avec carrés aux coins (style vectoriel)
   ========================================================================== */
.sketch-card {
    position: relative !important;
    border: 1.5px solid #1a1a1a;
    background-color: #f9f9f7;
    overflow: visible !important;
}

/* Les 4 coins : carrés creux (fond blanc, contour noir) — style sélection vectorielle */
.sketch-card .corner {
    position: absolute !important;
    width: 12px;
    height: 12px;
    background-color: white;
    border: 2px solid #1a1a1a;
    z-index: 9999;
    pointer-events: none;
}

.sketch-card .corner-tl {
    top: -6px;
    left: -6px;
}

.sketch-card .corner-tr {
    top: -6px;
    right: -6px;
}

.sketch-card .corner-bl {
    bottom: -6px;
    left: -6px;
}

.sketch-card .corner-br {
    bottom: -6px;
    right: -6px;
}


/* ==========================================================================
   MODE LECTURE : SECTION RADAR CRÉATIF (#critique) — CORRECTION CONTRASTES
   ========================================================================== */

/* Fond de la section : on force un fond sombre élégant pour que le contenu reste lisible */
body.reading-mode #critique {
    background-color: #111111 !important;
    background-image: radial-gradient(rgba(204, 255, 0, 0.06) 1px, transparent 0) !important;
    background-size: 24px 24px !important;
}

/* Titre principal "Radar Créatif" → blanc sur fond sombre */
body.reading-mode #critique h2.font-grotesk {
    color: #f2f2f0 !important;
    text-shadow: none !important;
}

/* Mot "Créatif" en outline : contour blanc bien visible */
body.reading-mode #critique h2.font-grotesk .text-transparent,
body.reading-mode #critique .text-transparent {
    color: transparent !important;
    -webkit-text-stroke: 2px #f2f2f0 !important;
    text-shadow: none !important;
}

/* Sous-titre descriptif */
body.reading-mode #critique p {
    color: #d0d0d0 !important;
    text-shadow: none !important;
}

/* Tags de filtres (Jeu Vidéo, Tech, Design…) */
body.reading-mode #critique .interest-item {
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #e0e0e0 !important;
    background: transparent !important;
}

body.reading-mode #critique .interest-item:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.reading-mode #critique .interest-item.active {
    background: #ccff00 !important;
    color: #111111 !important;
    border-color: #111111 !important;
    box-shadow: 4px 4px 0px #ffffff !important;
}

/* Texte d'invite "Cliquez sur une catégorie" */
body.reading-mode #critique #empty-state {
    color: #ffffff !important;
}

/* Titre surligné (badge "Curiosité • Analyse • Passion") */
body.reading-mode #critique .surTitre {
    background-color: #4361ee !important;
    color: #ffffff !important;
}

/* Bande défilante en mode lecture */
body.reading-mode #critique .band-blue {
    background-color: #4361ee !important;
    color: #ffffff !important;
    opacity: 0.7 !important;
}

/* ==========================================================================
   SECTION CONTACT : sketch-cards sur fond bleu — override des couleurs héritées
   Les sketch-cards ont un fond crème, le texte doit être sombre
   ========================================================================== */
#contact .sketch-card {
    color: #1a1a1a !important;
}

#contact .sketch-card h2 {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

#contact .sketch-card input,
#contact .sketch-card textarea,
#contact .sketch-card select {
    color: #1a1a1a !important;
    background: #ffffff !important;
    border-color: #1a1a1a !important;
}

#contact .sketch-card input::placeholder,
#contact .sketch-card textarea::placeholder {
    color: rgba(26, 26, 26, 0.45) !important;
}

#contact .sketch-card label {
    color: #1a1a1a !important;
}

/* ==========================================================================
   SMASH BALLOON INSTAGRAM FEED — Override complet (style brutalist)
   ========================================================================== */

/* Conteneur global */
#sb_instagram.sbi {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-family: 'Space Mono', monospace !important;
}

/* Conserver le h3 lisible en reading-mode (toujours actif) */
body.reading-mode .experience-card h3,
body.reading-mode .experience-card h3 a {
    color: #1a1a1a !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Cache le message d'erreur API pour les visiteurs (visible admin seulement) */
#sbi_mod_error {
    background: #1a1a1a !important;
    color: #ccff00 !important;
    border: 2px dashed #ccff00 !important;
    padding: 1rem !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
}

#sbi_mod_error a {
    color: #ccff00 !important;
}

/* ——— EN-TÊTE de profil ——— */
.sb_instagram_header.sbi_medium {
    background: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-bottom: 4px solid #ccff00 !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 0 !important;
    box-shadow: 6px 6px 0px #ccff00 !important;
}

.sbi_header_link {
    text-decoration: none !important;
}

.sbi_header_img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 0 !important;
    border: 3px solid #ccff00 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.sbi_header_img img {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.sbi_header_img_hover {
    background: rgba(204, 255, 0, 0.2) !important;
}

.sbi_header_img_hover svg {
    color: #ccff00 !important;
}

.sbi_header_text {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.sbi_feedtheme_header_text h3 {
    color: #ccff00 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    text-shadow: none !important;
}

.sbi_feedtheme_header_text .sbi_bio {
    color: rgba(255, 255, 255, 0.65) !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    line-height: 1.6 !important;
    margin: 0.35rem 0 0 !important;
}

/* ——— GRILLE DE POSTS ——— */
#sbi_images {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    background: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-top: none !important;
}

@media (max-width: 767px) {
    #sbi_images {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 479px) {
    #sbi_images {
        grid-template-columns: 1fr !important;
    }
}

/* Chaque post */
.sbi_item {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 3 / 4 !important;
    background: #111 !important;
}

/* Posts cachés initialement (au-delà de 8) — gérés par JS */
.sbi_item.sbi-hidden-more {
    display: none !important;
}

.sbi_photo_wrap {
    width: 100% !important;
    height: 100% !important;
}

.sbi_photo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.sbi_photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease, filter 0.4s ease !important;
    filter: grayscale(20%) !important;
}

/* Overlay hover */
.sbi_photo::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(204, 255, 0, 0.0) !important;
    transition: background 0.3s ease !important;
    pointer-events: none !important;
}

.sbi_photo:hover::after {
    background: rgba(204, 255, 0, 0.18) !important;
}

.sbi_photo:hover img {
    transform: scale(1.06) !important;
    filter: grayscale(0%) !important;
}

/* Icône carrousel */
.sbi_lightbox_carousel_icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 16px !important;
    height: 16px !important;
    color: white !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)) !important;
    z-index: 5 !important;
}

/* Screen reader text */
.sbi-screenreader {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* ——— SECTION LOAD MORE ——— */
#sbi_load {
    background: #1a1a1a !important;
    padding: 1.5rem !important;
    border: 2px solid #1a1a1a !important;
    border-top: 4px solid #ccff00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

/* Bouton "Suivre" du plugin → restyled */
.sbi_follow_btn a,
.sbi_follow_btn.sbi_custom a {
    background: #ccff00 !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.6rem 1.2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s !important;
    box-shadow: 3px 3px 0 #ccff00 !important;
}

.sbi_follow_btn a:hover,
.sbi_follow_btn.sbi_custom a:hover {
    background: #1a1a1a !important;
    color: #ccff00 !important;
    box-shadow: none !important;
    transform: translate(2px, 2px) !important;
}

.sbi_follow_btn a svg {
    color: inherit !important;
}

/* Bouton custom "Voir plus" injecté par JS */
#sbi-custom-loadmore {
    background: white !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.6rem 1.4rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#sbi-custom-loadmore:hover {
    background: #ccff00 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: none !important;
}

#sbi-custom-loadmore i {
    font-size: 0.65rem !important;
}

/* Compteur de posts restants */
#sbi-remaining-count {
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.65rem !important;
}