421 lines
9.1 KiB
CSS
421 lines
9.1 KiB
CSS
/* ============================================================
|
||
style-portail.css – INTER SANTE · Portail Gestionnaire
|
||
v3 – nouvelles variables brand, fit parfait à 100 % zoom,
|
||
form-select Bootstrap, textes carrousel animés
|
||
============================================================ */
|
||
|
||
/* ---------- Variables (mises à jour client) ---------- */
|
||
:root {
|
||
--brand: #212E53;
|
||
--brand-dark: #1a1d24;
|
||
--brand-light: #4c566a;
|
||
--brand-focus: #0c4b65;
|
||
--brand-btn-hover-txt: #212E53;
|
||
--white: #ffffff;
|
||
--input-border: #c5d4e0;
|
||
--text-dark: #1a2e3b;
|
||
--text-muted: #6b8a9a;
|
||
--text-label: #3a5060;
|
||
--danger: #dc3545;
|
||
--border-r: 10px;
|
||
--input-h: 44px;
|
||
--transition: 0.22s ease;
|
||
--shadow-btn: 0 4px 16px rgba(33,46,83,.35);
|
||
}
|
||
|
||
/* ---------- Reset / Base ---------- */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
font-family: 'Poppins', 'Segoe UI', sans-serif;
|
||
background: var(--white);
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
a { text-decoration: none; }
|
||
|
||
/* =============================================
|
||
LAYOUT PRINCIPAL
|
||
============================================= */
|
||
.portail-wrapper {
|
||
display: flex;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* =============================================
|
||
PANNEAU GAUCHE — Carrousel 42 %
|
||
============================================= */
|
||
.slide-container {
|
||
position: relative;
|
||
width: 42%;
|
||
flex: 0 0 42%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.slides {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.slides .slide {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
left: -100%;
|
||
}
|
||
|
||
.slides .slide.active { left: 0; }
|
||
|
||
/* Overlay dégradé */
|
||
.slide-container::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
160deg,
|
||
rgba(33, 46, 83, .30) 0%,
|
||
rgba(10, 15, 30, .65) 100%
|
||
);
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* ---------- Badge marque + caption par slide ---------- */
|
||
.slide-brand {
|
||
position: absolute;
|
||
bottom: 52px;
|
||
left: 36px;
|
||
z-index: 5;
|
||
color: var(--white);
|
||
max-width: calc(100% - 80px);
|
||
}
|
||
|
||
.slide-brand h2 {
|
||
font-size: 1.45rem;
|
||
font-weight: 700;
|
||
letter-spacing: .6px;
|
||
line-height: 1.2;
|
||
text-shadow: 0 2px 8px rgba(0,0,0,.45);
|
||
}
|
||
|
||
.slide-brand .slide-subtitle {
|
||
font-size: .80rem;
|
||
opacity: .85;
|
||
margin-top: 3px;
|
||
text-shadow: 0 1px 4px rgba(0,0,0,.35);
|
||
}
|
||
|
||
/* Texte par slide — animation synchronisée */
|
||
.slide-caption {
|
||
margin-top: 10px;
|
||
font-size: .95rem;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
text-shadow: 0 2px 6px rgba(0,0,0,.5);
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
transition: opacity .35s ease, transform .35s ease;
|
||
}
|
||
|
||
.slide-caption.animating {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
/* Boutons prev / next */
|
||
.slide-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 5;
|
||
background: rgba(255,255,255,.20);
|
||
border: none;
|
||
color: var(--white);
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
font-size: .85rem;
|
||
cursor: pointer;
|
||
backdrop-filter: blur(4px);
|
||
transition: background var(--transition);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.slide-btn:hover { background: rgba(255,255,255,.42); }
|
||
.slide-btn.prev { left: 14px; }
|
||
.slide-btn.next { right: 14px; }
|
||
|
||
/* Dots indicateurs */
|
||
.dotsContainer {
|
||
position: absolute;
|
||
bottom: 16px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 5;
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dotsContainer .dot {
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,.40);
|
||
cursor: pointer;
|
||
transition: background var(--transition), transform var(--transition);
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.dotsContainer .dot.active {
|
||
background: var(--white);
|
||
transform: scale(1.35);
|
||
}
|
||
|
||
/* =============================================
|
||
PANNEAU DROIT — Formulaire 58 %
|
||
Fit parfait à 100 % zoom (≈ 900 px hauteur)
|
||
============================================= */
|
||
.form-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* padding bottom = espace pour le footer absolu */
|
||
padding: 10px 48px 50px;
|
||
background: var(--white);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* Logo */
|
||
.form-logo {
|
||
width: 70px;
|
||
height: 70px;
|
||
object-fit: contain;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* Titre */
|
||
.portail-title {
|
||
font-size: 1.38rem;
|
||
font-weight: 800;
|
||
color: var(--brand);
|
||
letter-spacing: 1.8px;
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
margin-bottom: 6px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* Séparateur */
|
||
.portail-divider {
|
||
width: 40px;
|
||
height: 3px;
|
||
background: var(--brand);
|
||
border-radius: 2px;
|
||
margin: 0 auto 16px;
|
||
}
|
||
|
||
/* Formulaire */
|
||
.login100-form {
|
||
width: 100%;
|
||
max-width: 360px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Alerte maintenance / erreur */
|
||
.alert-portail {
|
||
border-radius: var(--border-r);
|
||
font-size: .82rem;
|
||
padding: 9px 12px;
|
||
margin-bottom: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.alert-portail.danger {
|
||
background: #fff0f0;
|
||
border: 1px solid #f5c6cb;
|
||
color: var(--danger);
|
||
}
|
||
|
||
/* Groupe champ */
|
||
.field-group {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.field-group label {
|
||
display: block;
|
||
font-size: .77rem;
|
||
font-weight: 600;
|
||
color: var(--text-label);
|
||
margin-bottom: 4px;
|
||
letter-spacing: .2px;
|
||
}
|
||
|
||
/* Wrapper input + icône */
|
||
.input-icon-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.input-icon-wrap .field-icon {
|
||
position: absolute;
|
||
left: 13px;
|
||
color: var(--brand);
|
||
font-size: .88rem;
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* Inputs text / password */
|
||
.input-icon-wrap .input100 {
|
||
width: 100%;
|
||
height: var(--input-h);
|
||
padding: 0 12px 0 38px;
|
||
border: 2px solid var(--input-border);
|
||
border-radius: var(--border-r);
|
||
font-size: .88rem;
|
||
color: var(--brand);
|
||
background: var(--white);
|
||
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
|
||
outline: none;
|
||
}
|
||
|
||
.input-icon-wrap .input100::placeholder { color: #a8bfcc; }
|
||
|
||
.input-icon-wrap .input100:focus {
|
||
border-color: var(--brand);
|
||
background: #eef3f8;
|
||
box-shadow: 0 0 0 3px rgba(33,46,83,.10);
|
||
}
|
||
|
||
/* ---------- form-select Bootstrap (remplace selectpicker) ---------- */
|
||
.input-icon-wrap .form-select {
|
||
width: 100%;
|
||
height: var(--input-h);
|
||
padding: 0 36px 0 38px;
|
||
border: 2px solid var(--input-border);
|
||
border-radius: var(--border-r) !important;
|
||
font-size: .88rem;
|
||
color: var(--brand);
|
||
background-color: var(--white);
|
||
background-image: none; /* on gère la flèche via FA */
|
||
cursor: pointer;
|
||
outline: none;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
|
||
}
|
||
|
||
.input-icon-wrap .form-select:focus {
|
||
border-color: var(--brand);
|
||
background-color: #eef3f8;
|
||
box-shadow: 0 0 0 3px rgba(33,46,83,.10);
|
||
}
|
||
|
||
/* Flèche custom (remplace la caret native et celle de bootstrap-select) */
|
||
.select-arrow {
|
||
position: absolute;
|
||
right: 13px;
|
||
color: var(--brand);
|
||
font-size: .78rem;
|
||
pointer-events: none;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* Bouton connexion */
|
||
.btn-login {
|
||
width: 100%;
|
||
height: 44px;
|
||
background: var(--brand);
|
||
color: var(--white);
|
||
border: 2px solid var(--brand);
|
||
border-radius: var(--border-r);
|
||
font-size: .95rem;
|
||
font-weight: 700;
|
||
letter-spacing: .5px;
|
||
cursor: pointer;
|
||
transition: background var(--transition), color var(--transition), box-shadow var(--transition);
|
||
box-shadow: var(--shadow-btn);
|
||
margin-top: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn-login:hover {
|
||
background: var(--white);
|
||
color: var(--brand-btn-hover-txt);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Lien mot de passe oublié */
|
||
.link-forgot {
|
||
text-align: center;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.link-forgot a {
|
||
font-size: .80rem;
|
||
color: var(--text-muted);
|
||
transition: color var(--transition);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.link-forgot a:hover { color: var(--brand); }
|
||
|
||
/* Footer ancré en bas absolu */
|
||
.portail-footer {
|
||
position: absolute;
|
||
bottom: 5px;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
font-size: .60rem;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.portail-footer a {
|
||
color: var(--brand);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.portail-footer a:hover { text-decoration: underline; }
|
||
|
||
/* =============================================
|
||
ANIMATIONS CARROUSEL
|
||
============================================= */
|
||
@keyframes next1 { from { left: 0% } to { left: -100%; } }
|
||
@keyframes next2 { from { left: 100% } to { left: 0%; } }
|
||
@keyframes prev1 { from { left: 0% } to { left: 100%; } }
|
||
@keyframes prev2 { from { left: -100% } to { left: 0%; } }
|
||
|
||
/* =============================================
|
||
RESPONSIVE MOBILE
|
||
============================================= */
|
||
@media screen and (max-width: 768px) {
|
||
.slide-container { display: none; }
|
||
.portail-wrapper { justify-content: center; }
|
||
.form-panel { padding: 30px 20px 60px; justify-content: flex-start; }
|
||
.login100-form { max-width: 100%; }
|
||
.portail-footer { bottom: 10px; }
|
||
}
|