/* style principal salaireplus */ * { box-sizing: border-box; } /* ——— Variables globales ——— */ :root { /* Hauteur du menu bas pour les utilisateurs connectés (nav) */ --bottom-nav-h: 65px; /* hauteur réelle par défaut */ /* Hauteur des barres fixes non connectées */ --guest-banner-h: 60px; /* bandeau invité */ --conn-footer-h: 60px; /* footer des pages non connectées */ /* Alias pratique pour l'app */ --app-bottom-h: var(--bottom-nav-h); } /* ====== Sélection du “mode” via la classe sur ====== On expose une variable unifiée --bottom-fixed-h valable pour TOUS les écrans : contenu, spacers, centrage, etc. */ body.mode-app { --bottom-fixed-h: var(--app-bottom-h); } body.mode-guest{ --bottom-fixed-h: var(--guest-banner-h); } body.mode-conn { --bottom-fixed-h: var(--conn-footer-h); } body { margin: 0; font-family: 'DM Sans', sans-serif; background-color: #f9f9f9; } /* Shell d'auth: centre le contenu et retranche la hauteur du bas en mode non connecté/invité */ .auth-shell { min-height: calc(100svh - var(--bottom-fixed-h, 0px)); display: grid; place-items: center; padding: 1rem; } /* Espace global pour que la barre du bas ne chevauche pas le contenu */ main { padding-bottom: calc(var(--bottom-fixed-h, 0px) + 10px); } /* style du menu.php */ .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: var(--bottom-nav-h); /* utilise la variable (connecté) */ background-color: #ffffff; box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05); display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #e0e0e0; z-index: 1000; } .bottom-nav a { flex: 1; text-align: center; text-decoration: none; color: #666; font-size: 12px; padding-top: 5px; } .bottom-nav a i { display: block; font-size: 20px; margin-bottom: 2px; } .bottom-nav a.active { color: #0d6efd; font-weight: 500; } .bottom-nav a.active i { color: #0d6efd; } /* style des modals pour index.php */ .btn-aide { background-color: #f0f0f0 !important; color: black !important; border-color: black !important; } .btn-aide:hover, .btn-aide:focus { background-color: #525252 !important; color: white !important; border-color: #525252 !important; } /* Moficiation pour le Modal de saisie des valeurs */ #modalAuto .modal-body { padding-top: 0rem !important; } /* Séparation légère entre les champs dans le modal */ #modalAutoBody .field-group { border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding-bottom: 0.5rem; margin-bottom: 0.5rem; } .form-control { border-color: #495057; box-shadow: none; } #modalAutoBody input.form-control:focus { border-color: #343a40; box-shadow: 0 0 0 0.1rem rgba(73, 80, 87, 0.25); } #modalAutoBody input.form-control.is-invalid { border-color: #dc3545 !important; } #modalAuto .modal-header { border-bottom: none !important; } .step-title { font-size: 1.05rem; font-weight: 600; color: #0a58ca; padding: 0.6rem 0.5rem; display: flex; align-items: center; gap: 0.6rem; background-color: #fdfdfd; border-bottom: 1px solid rgba(0,0,0,0.08); } .step-title:last-child { border-bottom: none; } .step-title::before { content: attr(data-step-num); display: inline-flex; align-items: center; justify-content: center; background-color: #e7f1ff; color: #0d6efd; font-weight: 700; font-size: 0.9rem; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #0d6efd; } .option-button { background-color: #F8FBFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 1rem 1.2rem; font-size: 1rem; color: #000; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .option-button:hover { background-color: #e6f0ff; border-color: rgba(0, 0, 0, 0.4); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } .option-button.selected { border: 2px solid #0d6efd; background-color: #e7f1ff; } .option-button i { min-width: 30px; } .text-custom-blue { color: #0057C9; font-size: 18px; } .btn-prev { background-color: #ffe5e5; border-color: #ffcccc; color: #b30000; } .btn-prev:hover { background-color: #ffcccc; border-color: #ff9999; color: #800000; } /* === Barres fixes en bas (invité + footer connexion) === */ .guest-banner, .app-footer { position: fixed; bottom: 0; left: 0; right: 0; min-height: 60px; padding: 8px 12px; background-color: #ffffff; border-top: 1px solid #e0e0e0; box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: space-between; /* invité = left/right ; footer = on recentre via règle dédiée */ gap: .75rem; z-index: 1000; } .guest-banner .left { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: #6FA0C6; } .guest-banner .right { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* Spacers dynamiques pilotés par CSS (plus de JS) */ .guest-banner-spacer, .app-footer-spacer { height: var(--bottom-fixed-h, 60px); } /* Footer connexion : centré (cohérent et propre) */ .app-footer { justify-content: center; } .app-footer a { color: inherit; text-decoration: none; } .app-footer a:hover { text-decoration: underline; } @media (max-width: 480px) { .guest-banner { padding: 10px 12px; } } /* Boutons existants (inchangés) */ .btn-inscription { background-color: #6FA0C6; border: none; color: #fff !important; font-weight: 500; } .btn-inscription:hover, .btn-inscription:active { background-color: #4b7391; } .btn-guest { background:#6c757d; color:#fff !important; border:1px solid #6c757d; } .btn-guest:hover, .btn-guest:active { background:#fff; color:#6c757d !important; border:1px solid #6c757d; } /* Compact (si tu l'utilises) */ .btn-compact { padding: .35rem .7rem; font-size: .9rem; line-height: 1.25; border-radius: .375rem; } @media (max-width: 480px) { /* sur petit écran, plus d’air encore et wrap fluide */ .guest-banner { padding: 10px 12px; } .guest-banner .right { gap: 1rem; justify-content: flex-end; width: 100%; flex-wrap: wrap; } } /* ——— FIN Bandeau "Mode invité" ——— */ /* ====== Règles globales utiles au simulateur (sans répétition locale) ====== */ body.mode-app .salaire-net-section { margin-bottom: calc(var(--bottom-nav-h) + 10px); } body.mode-app #salaire-details { margin-bottom: var(--bottom-nav-h); }