/* Styles de la modale d'authentification (overlay + panneau + onglets + formulaire).
 * Repris à l'identique du bloc injecté par public/js/auth.js, mais en CSS EXTERNE :
 * sur les pages sans feuille de style globale (ex. /diagnostic-gratuit/), le <style>
 * injecté en JS peut être neutralisé (shields Brave / CSP inline stricte) → la modale
 * s'affichait alors sans style. Chargé via <link>, ce CSS est autorisé par style-src 'self'.
 */
[hidden] { display: none !important; }
.modal-field[hidden] { display: none !important; }

/* Icône œil sur les champs mot de passe */
.pw-wrapper { position: relative; display: flex; align-items: center; }
.pw-wrapper input[type="password"], .pw-wrapper input[type="text"] { width: 100%; padding-right: 40px; box-sizing: border-box; }
.pw-eye-btn { position: absolute; right: 10px; background: none; border: none; cursor: pointer; padding: 4px; opacity: 0.5; transition: opacity 0.15s; color: #374151; display: flex; align-items: center; }
.pw-eye-btn:hover { opacity: 1; }

/* Modale Auth (overlay + panneau + onglets) */
.modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(19,33,26,0.55); z-index: 1000; }
.modal-overlay[hidden] { display: none !important; }
.modal-panel--auth { position: relative; width: min(100%, 30rem); background: #fff; border-radius: 20px; padding: 1.75rem; box-shadow: 0 24px 64px rgba(0,0,0,0.28); max-height: 90vh; overflow-y: auto; animation: modal-slide-up 320ms cubic-bezier(0.2,0.9,0.28,1); }
.modal-tabs { display: flex; gap: 6px; background: #f0f7f2; padding: 5px; border-radius: 12px; margin-bottom: 1.25rem; }
.modal-tab { flex: 1; padding: 10px 0; border: none; background: transparent; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 0.92rem; color: #5a7a6a; cursor: pointer; transition: all 0.18s; }
.modal-tab.is-active { background: #2d7a4f; color: #fff; box-shadow: 0 2px 8px rgba(45,122,79,0.3); }
.modal-panel--auth h2 { font-size: 1.4rem; color: #1a4a2e; margin: 0 0 0.5rem; font-weight: 800; }
.modal-copy p { color: #5a7a6a; font-size: 0.9rem; margin: 0 0 1.25rem; }
.modal-form { display: grid; gap: 0.9rem; }
.modal-form label { display: grid; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; color: #1a4a2e; }
.modal-form input { width: 100%; min-height: 3rem; padding: 0.8rem 1rem; box-sizing: border-box; border-radius: 12px; border: 1.5px solid rgba(45,106,79,0.18); background: #fff; color: #1a4a2e; font-family: inherit; font-size: 0.95rem; }
.modal-form input:focus { outline: none; border-color: #2d7a4f; box-shadow: 0 0 0 3px rgba(45,122,79,0.12); }
.modal-submit { width: 100%; padding: 13px 0; background: #2d7a4f; color: #fff; border: none; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.18s; margin-top: 0.25rem; }
.modal-submit:hover { background: #1a4a2e; }
.modal-submit:disabled { opacity: 0.6; cursor: default; }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem; border: none; border-radius: 12px; background: rgba(216,243,220,0.6); color: #2d7a4f; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-inline-error { color: #dc2626; font-size: 0.85rem; margin-top: 0.25rem; }
@keyframes modal-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }