/* polisecu.css - style pour Politique de confidentialité Lumesys */

/* Reset très léger */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
   font-family: 'Roboto', Arial, sans-serif;
   background-color: #f7f7f8;
   color: #111;
   line-height: 1.6;
 padding: 0;
}

/* Layout */
.layout { display: flex; min-height: 100vh; }

/* Sidebar (gauche) */
.sidebar {
   width: 260px;
   background: #fff;
   border-right: 1px solid #e6e6e6;
   padding: 30px 20px;
   position: sticky;
   top: 0;
   align-self: flex-start;
   height: 100vh;
   overflow: auto;
}

.brand {
   font-weight: 700;
   font-size: 20px;
   margin-bottom: 18px;
   color: #0b0b0b;
}

.toc ul { list-style: none; }
.toc li { margin: 8px 0; }
.toc a {
   color: #0b0b0b;
   text-decoration: none;
   padding: 8px 10px;
   display: block;
   border-radius: 6px;
   transition: background .18s, color .18s;
   font-size: 15px;
}
.toc a:hover, .toc a:focus { background: #0b0b0b; color: #fff; }

/* Content */
.content {
   flex: 1;
   padding: 48px 60px;
   max-width: 980px;
   margin: 0 auto;
   background: transparent;
}

.content-header h1 {
   font-size: 44px;
   font-weight: 700;
   color: #111;
   margin-bottom: 6px;
}

.last-updated {
   color: #6b6b6b;
   margin-bottom: 22px;
}

/* Articles */
article { margin-bottom: 28px; background: #fff; padding: 26px; border-radius: 8px; box-shadow: 0 6px 18px rgba(10,10,10,0.03); }
article h2 { font-size: 20px; margin-bottom: 10px; color: #0b0b0b; }
article p, article ul { font-size: 15px; color: #222; }
article ul { margin-left: 18px; margin-top: 8px; }
article ul li { margin-bottom: 6px; }

/* Footer */
.page-footer { text-align: center; color: #666; padding: 18px 0; font-size: 14px; margin-top: 10px; }

/* .loi (spéciale) */
.loi {
   font-family: 'Roboto', Arial, sans-serif;
   font-size: 16px;
   color: #b30000; /* rouge mais lisible */
   background: #fff6f6;
   border-left: 4px solid #ffb3b3;
   padding: 12px;
   border-radius: 6px;
   margin-bottom: 12px;
}

/* Liens "site" / "stat" (boutons légers) */
.site, .stat {
   display: inline-block;
   padding: 6px 8px;
   font-size: 14px;
   text-decoration: none;
   border-radius: 6px;
   color: #111;
   background: #f0f0f0;
   border: 1px solid #e6e6e6;
}
.site:hover, .stat:hover { background: #111; color: #fff; }

/* Social icons container */
.social-icons { display:flex; justify-content:center; gap:8px; padding: 12px 0; }
.social-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.06); text-decoration:none; }
.social-button img { width:24px; height:24px; object-fit:cover; }

/* Responsive */
@media (max-width: 980px) {
   .layout { flex-direction: column; }
   .sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid #e6e6e6; }
   .content { padding: 22px; }
   .content-header h1 { font-size: 30px; }
}

/* ... Votre CSS initial (jusqu'à la media query) reste inchangé ... */

/* =============================
   AUTH / LOGIN / REGISTER / BLOCAGE
============================= */

/* Overlay (Fond gris plein écran) */
#auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2147483647;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

/* Boîte blanche au centre */
#auth-box {
    background-color: #fff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 420px;
    position: relative;
    border: 1px solid #e0e0e0;
    max-height: 90vh; 
    overflow-y: auto;
}

/* Bouton fermer (la croix) - Caché si bloqué */
#btn-close-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    transition: color 0.3s;
    z-index: 10;
}
#btn-close-overlay:hover { color: #d32f2f; }

/* Titres */
#auth-box h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    color: #222;
    font-weight: 700;
}

/* NOUVEAU CONTENEUR pour les champs de formulaire (Flexbox) */
.form-content {
    display: flex;
    flex-direction: column; 
    gap: 15px 4%; 
}

/* Styles des inputs et selects (pour tous les formulaires) */
#auth-box input:not([type="checkbox"]),
#auth-box select {
    width: 100%;
    padding: 14px;
    margin-bottom: 0; /* Géré par le gap dans .form-content, sauf pour le login */
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: border-color 0.3s;
}

/* Cas spécifiques: Inputs dans le formulaire de connexion (sans .form-content) */
#login-form input,
#login-form select {
    margin-bottom: 15px; /* Rétablit la marge pour le formulaire de login simple */
}

#auth-box input:focus, #auth-box select:focus {
    border-color: #007bff;
    outline: none;
    background-color: #fff;
}

/* Boutons d'action (Bleu) */
#auth-box button.action-btn, 
#btn-login, 
#btn-register,
#btn-reconnect,
#btn-reinitialiser { /* Ajout de #btn-reinitialiser */
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.3s;
}
#auth-box button:hover { background-color: #0056b3; }

/* Bouton Quitter (Rouge) */
#btn-quit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background-color: #dc3545;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}
#btn-quit:hover { background-color: #b02a37; }

/* Liens (basculer login/inscription/reset) */
#auth-box p {
    text-align: center;
    margin-top: 18px;
    font-size: 15px;
    color: #555;
    line-height: 1.8; /* Espace entre les liens s'il y en a deux */
}
.link-btn {
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
}

/* Message de blocage (Utilisé aussi pour les messages de succès/erreur de reset) */
#block-message p {
    color: #c62828;
    font-weight: 700;
    text-align: center;
    font-size: 19px;
    margin-bottom: 25px;
    background: #ffebee;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ef9a9a;
}

/* Utilitaire */
.hidden { display: none !important; }

/* Header Actions (Boutons en haut à droite) */
#header-actions button {
    font-size: 14px;
    transition: opacity 0.3s;
}
#header-actions button:hover { opacity: 0.8; }


/* =============================
    MEDIA QUERY - GRANDS ÉCRANS (Deux colonnes)
============================= */

@media (min-width: 768px) {
    /* Élargit la boîte de connexion pour accueillir deux colonnes */
    #auth-box {
        max-width: 700px; 
    }

    /* Transforme le conteneur du formulaire d'inscription ET de réinitialisation en deux colonnes */
    #register-form .form-content,
    #reset-password-box .form-content { /* Cible le nouveau formulaire */
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: space-between; 
    }

    /* Donne aux champs la moitié de la largeur */
    #register-form .form-content > *, /* Cible tous les enfants directs */
    #reset-password-box .form-content > * { /* Cible tous les enfants directs */
        width: 48%; 
        margin-bottom: 0;
    }
    
    /* Les boutons et le paragraphe de lien restent en pleine largeur */
    #register-form button, #register-form p,
    #reset-password-box button, #reset-password-box p {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}