/* =========================================
   DESIGN SYSTEM BRUTALISTE - SOFYANE
   ========================================= */

/* Configuration de base */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #FDFBF7;
    color: #000000;
    font-family: 'Space Grotesk', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Bordures et Ombres Brutalistes */
.brutal-border {
    border: 4px solid black;
    transition: border-color 0.3s ease;
}

.shadow-brutal {
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
}

.shadow-brutal-lg {
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
}

/* Effet Texte 3D (Ombre Violette Sofyane) */
/* Utilisé pour les titres principaux "REUSSIR SEUL ?" */
.text-3d-perfect {
    color: #FFFFFF;
    text-shadow: 
        4px 4px 0px #000, 
        -4px -4px 0px #000, 
        4px -4px 0px #000, 
        -4px 4px 0px #000,
        4px 0px 0px #000, 
        -4px 0px 0px #000, 
        0px 4px 0px #000, 
        0px -4px 0px #000,
        8px 8px 0px #6D28D9; /* Violet signature */
    font-weight: 900;
}

/* Surlignage type "Stabilo" */
.stabilo, .highlight-container {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.stabilo::after, .highlight-container::after {
    content: "";
    position: absolute;
    left: -2%;
    bottom: 5%; 
    width: 104%;
    height: 45%;
    background: linear-gradient(90deg, rgba(253, 224, 71, 0.8) 0%, rgba(253, 224, 71, 0.8) 75%, rgba(253, 224, 71, 0) 100%);
    z-index: -1;
    transform: rotate(-1.2deg);
    pointer-events: none;
}

/* --- NOUVEAUX STYLES : SECTION BOARD --- */

/* Effet Poster pour l'image board-min.png */
.poster-container div {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
}

/* Inclinaison par défaut style archive/poster */
.rotate-poster {
    transform: rotate(-3deg) scale(0.98);
}

.poster-container:hover div {
    transform: rotate(0deg) scale(1.02);
    border-color: #6D28D9; /* Passage au violet au survol */
}

/* --- FIN DES NOUVEAUX STYLES --- */

/* Inclinaison des photos standards */
.tilt-photo {
    transform: rotate(-1deg);
    transition: transform 0.3s ease;
}

.tilt-photo:hover {
    transform: rotate(0deg);
}

/* Menu Burger Overlay */
#menu-overlay {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

/* Utilitaires de transition pour les boutons et cartes */
.btn-brutal, .card-brutal {
    transition: all 0.2s ease;
}

.btn-brutal:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
}

/* Pour les cartes de règles qui deviennent violettes au survol */
.hover-purple-border:hover {
    border-color: #6D28D9 !important;
}