386 lines
8.1 KiB
CSS
386 lines
8.1 KiB
CSS
/* ============================================================
|
||
style-portail.css – INTER SANTE · Portail Gestionnaire
|
||
============================================================ */
|
||
|
||
/* ---------- Variables ---------- */
|
||
:root {
|
||
/* Brand Colors — Charcoal / Gris neutre (zéro vert) */
|
||
--color-primary: #212E53; /*#2e3440;*/ /* charcoal foncé */
|
||
--color-primary-light: #4c566a; /* slate moyen */
|
||
--color-primary-dark: #1a1d24; /* quasi-noir */
|
||
--color-primary-ghost: rgba(33, 46, 83, 0.05); /* Ajusté sur le Charcoal */
|
||
|
||
--brand: #0088cf;
|
||
--brand-dark: #006ba3;
|
||
--brand-light: #e6f4fb;
|
||
--white: #ffffff;
|
||
--text-dark: #1a2e3b;
|
||
--text-muted: #6b8a9a;
|
||
--danger: #dc3545;
|
||
--border-r: 10px;
|
||
--input-h: 46px;
|
||
--transition: 0.25s ease;
|
||
--shadow-card: 0 8px 32px rgba(0,136,207,.13);
|
||
--shadow-btn: 0 4px 14px rgba(0,136,207,.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(--brand-light);
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
a { text-decoration: none; }
|
||
|
||
/* ---------- Layout principal ---------- */
|
||
.portail-wrapper {
|
||
display: flex;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ---------- Panneau carrousel (gauche) ---------- */
|
||
.slide-container {
|
||
position: relative;
|
||
width: 55%;
|
||
flex: 0 0 55%;
|
||
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%;
|
||
transition: none;
|
||
}
|
||
|
||
.slides .slide.active { left: 0; }
|
||
|
||
/* overlay gradient pour lisibilité */
|
||
.slide-container::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(0,136,207,.35) 0%,
|
||
rgba(0,40,80,.55) 100%
|
||
);
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* badge marque sur le carrousel */
|
||
.slide-brand {
|
||
position: absolute;
|
||
bottom: 48px;
|
||
left: 40px;
|
||
z-index: 5;
|
||
color: var(--white);
|
||
}
|
||
|
||
.slide-brand h2 {
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
letter-spacing: .5px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.slide-brand p {
|
||
font-size: .85rem;
|
||
opacity: .8;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* boutons prev / next */
|
||
.slide-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 5;
|
||
background: rgba(255,255,255,.18);
|
||
border: none;
|
||
color: var(--white);
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
font-size: 1rem;
|
||
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,.38); }
|
||
.slide-btn.prev { left: 18px; }
|
||
.slide-btn.next { right: 18px; }
|
||
|
||
/* points indicateurs */
|
||
.dotsContainer {
|
||
position: absolute;
|
||
bottom: 18px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 5;
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dotsContainer .dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,.45);
|
||
cursor: pointer;
|
||
transition: background var(--transition), transform var(--transition);
|
||
}
|
||
|
||
.dotsContainer .dot.active {
|
||
background: var(--white);
|
||
transform: scale(1.3);
|
||
}
|
||
|
||
/* ---------- Panneau formulaire (droite) ---------- */
|
||
.form-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 28px 36px;
|
||
background: var(--white);
|
||
overflow-y: auto;
|
||
position: relative;
|
||
}
|
||
|
||
/* Logo */
|
||
.form-logo {
|
||
width: 90px;
|
||
height: 90px;
|
||
object-fit: contain;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* Titre portail */
|
||
.portail-title {
|
||
font-size: 1.35rem;
|
||
font-weight: 700;
|
||
color: var(--color-primary);
|
||
letter-spacing: .4px;
|
||
margin-bottom: 6px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Séparateur */
|
||
.portail-divider {
|
||
width: 48px;
|
||
height: 3px;
|
||
background: var(--color-primary);
|
||
border-radius: 2px;
|
||
margin: 0 auto 18px;
|
||
}
|
||
|
||
/* Formulaire */
|
||
.login100-form {
|
||
width: 100%;
|
||
max-width: 340px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
/* Alerte erreur / maintenance */
|
||
.alert-portail {
|
||
border-radius: var(--border-r);
|
||
font-size: .85rem;
|
||
padding: 10px 14px;
|
||
margin-bottom: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.alert-portail.danger {
|
||
background: #fff0f0;
|
||
border: 1px solid #f5c6cb;
|
||
color: var(--danger);
|
||
}
|
||
|
||
/* Groupe champ */
|
||
.field-group {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.field-group label {
|
||
display: block;
|
||
font-size: .78rem;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
margin-bottom: 4px;
|
||
letter-spacing: .3px;
|
||
}
|
||
|
||
/* Input wrapper avec 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: .95rem;
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
.input-icon-wrap .input100,
|
||
.input-icon-wrap select {
|
||
width: 100%;
|
||
height: var(--input-h);
|
||
padding: 0 14px 0 38px;
|
||
border: 2px solid var(--color-primary);
|
||
border-radius: var(--border-r);
|
||
font-size: .9rem;
|
||
color: var(--text-dark);
|
||
background: var(--white);
|
||
transition: border-color var(--transition), box-shadow var(--transition);
|
||
outline: none;
|
||
appearance: none;
|
||
}
|
||
|
||
.input-icon-wrap .input100::placeholder { color: #b0c8d8; }
|
||
|
||
.input-icon-wrap .input100:focus,
|
||
.input-icon-wrap select:focus {
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 0 3px rgba(0,136,207,.12);
|
||
}
|
||
|
||
/* Sélecteur langue / bootstrap-select */
|
||
.bootstrap-select.field-select {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.bootstrap-select.field-select > .dropdown-toggle {
|
||
height: var(--input-h);
|
||
padding: 0 14px 0 38px;
|
||
border: 2px solid #d0e8f5 !important;
|
||
border-radius: var(--border-r) !important;
|
||
background: var(--white) !important;
|
||
color: var(--text-dark);
|
||
font-size: .9rem;
|
||
box-shadow: none !important;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.bootstrap-select.field-select > .dropdown-toggle:focus,
|
||
.bootstrap-select.field-select.show > .dropdown-toggle {
|
||
border-color: var(--brand) !important;
|
||
box-shadow: 0 0 0 3px rgba(0,136,207,.12) !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
.bootstrap-select.field-select .filter-option-inner-inner {
|
||
color: var(--text-dark) !important;
|
||
background: transparent !important;
|
||
text-align: left;
|
||
font-size: .9rem;
|
||
height: auto;
|
||
}
|
||
|
||
.bootstrap-select.field-select .caret { display: none !important; }
|
||
|
||
/* Bouton connexion */
|
||
.btn-login {
|
||
width: 100%;
|
||
height: 46px;
|
||
background: var(--color-primary);
|
||
color: var(--white);
|
||
border: 2px solid var(--color-primary);
|
||
border-radius: var(--border-r);
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
letter-spacing: .4px;
|
||
cursor: pointer;
|
||
transition: background var(--transition), color var(--transition), box-shadow var(--transition);
|
||
box-shadow: var(--shadow-btn);
|
||
margin-top: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn-login:hover {
|
||
background: var(--white);
|
||
color: var(--color-primary);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Lien mot de passe oublié */
|
||
.link-forgot {
|
||
text-align: center;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.link-forgot a {
|
||
font-size: .82rem;
|
||
color: var(--text-muted);
|
||
transition: color var(--transition);
|
||
}
|
||
|
||
.link-forgot a:hover { color: var(--brand); }
|
||
|
||
/* Footer droits réservés */
|
||
.portail-footer {
|
||
position: absolute;
|
||
bottom: 12px;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
font-size: .72rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.portail-footer a { color: var(--brand); }
|
||
.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: 24px 20px; }
|
||
|
||
.login100-form { max-width: 100%; }
|
||
|
||
.portail-footer { position: static; margin-top: 16px; }
|
||
}
|