/*
 ========================================================================
 NOM DU FICHIER : style.css (Nom de développement : style_v5_s1.css)
 EMPLACEMENT    : site_a / assets / css
 VERSION        : v5
 SESSION        : 1
 DESCRIPTIF     : Feuille de style globale de site_a. Gère le positionnement
                  des trois couches (#home, #api, #modals), le verrouillage
                  du scroll et le rideau d'isolation opaque.
 MODIFICATION   : Correction de l'emplacement dans l'en-tête (assets/css).
 ======================================================================== 
*/

/* ------------------------------------------------------------------------
   1. BASES DU SYSTÈME & RESPONSIVE
   ------------------------------------------------------------------------ */
html, body {
    font-family: sans-serif;
    background:#f8f9fa; /* Couleur de fond officielle du body */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* Classe technique globale pour figer le défilement d'une couche */
.no-scroll {
    overflow: hidden !important;
    touch-action: none; /* Bloque aussi le défilement tactile sur mobile */
}

/* ------------------------------------------------------------------------
   2. ARCHITECTURE EN COUCHES SUPERPOSÉES (SPA/PWA)
   ------------------------------------------------------------------------ */

/* Couche de base bloquée en arrière-plan (Flux des blogs/posts) */
#home {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    z-index: 1;
}

/* Le Rideau Opaque : Se place dynamiquement en z-index 5 pour cacher #home */
.rideau-intermediaire {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f8f9fa; /* Même couleur que le body pour masquer #home */
    z-index: 5;
    pointer-events: none; /* N'intercepte pas les clics, simple masque visuel */
}

/* Couche intermédiaire dynamique (Affichage de contenu Profil/Articles via fetch) */
#api {
    position: relative;
    width: 100%;
    z-index: 10; /* Toujours au-dessus du rideau (5) et de #home (1) */
    background: #ffffff;
    /* Hauteur non définie : 0 si vide, s'étire selon le contenu injecté */
}

/* Couche suprême (Verrouillage et alertes bloquantes) */
#modals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    pointer-events: none; /* Laisse passer les clics vers le bas si vide */
}

/* Fond sombre translucide pour les modales actives */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto; /* Active l'interception des clics */
}

/* ------------------------------------------------------------------------
   3. GABARITS & COMMONS (Gabarit erreur hors-JS)
   ------------------------------------------------------------------------ */
.container-erreur-critique {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.error-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #dc3545;
    max-width: 400px;
    margin: 20px;
}

.error-box h1 {
    color: #dc3545;
    font-size: 20px;
    margin-top: 0;
}

.error-box p {
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.5;
}

.error-box code {
    background: #f1f3f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #343a40;
}