421 lines
9.2 KiB
CSS
421 lines
9.2 KiB
CSS
/* ============================================================
|
||
style-portail.css – INTER SANTE · Portail Gestionnaire
|
||
v2 – Image1 (icônes FA, overlay gradient, badge carrousel,
|
||
bouton avec icône) + Image2 (logo grand, titre uppercase
|
||
imposant, aération, focus fond bleu, proportions 42/58)
|
||
============================================================ */
|
||
|
||
/* ---------- Variables ---------- */
|
||
:root {
|
||
--brand: #212E53;
|
||
--brand-dark: #1a1d24;
|
||
--brand-light: #4c566a;
|
||
--brand-focus: #0c4b65;
|
||
--white: #ffffff;
|
||
--text-dark: #1a2e3b;
|
||
--text-muted: #6b8a9a;
|
||
--text-label: #3a5060;
|
||
--danger: #dc3545;
|
||
--border-r: 10px;
|
||
--input-h: 48px;
|
||
--transition: 0.22s ease;
|
||
--shadow-btn: 0 4px 16px rgba(0,136,207,.38);
|
||
}
|
||
|
||
/* ---------- 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; }
|
||
|
||
/* ---------- Wrapper principal ---------- */
|
||
.portail-wrapper {
|
||
display: flex;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* =============================================
|
||
PANNEAU GAUCHE — Carrousel 42 % (Image 2)
|
||
============================================= */
|
||
.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é bleu profond (Image 1) */
|
||
.slide-container::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
160deg,
|
||
rgba(0, 100, 180, .28) 0%,
|
||
rgba(0, 28, 65, .58) 100%
|
||
);
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Badge marque bas-gauche (Image 1) */
|
||
.slide-brand {
|
||
position: absolute;
|
||
bottom: 52px;
|
||
left: 36px;
|
||
z-index: 5;
|
||
color: var(--white);
|
||
}
|
||
|
||
.slide-brand h2 {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
letter-spacing: .6px;
|
||
line-height: 1.2;
|
||
text-shadow: 0 2px 8px rgba(0,0,0,.4);
|
||
}
|
||
|
||
.slide-brand p {
|
||
font-size: .80rem;
|
||
opacity: .85;
|
||
margin-top: 5px;
|
||
text-shadow: 0 1px 4px rgba(0,0,0,.35);
|
||
}
|
||
|
||
/* Boutons prev / next (Image 1 style) */
|
||
.slide-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 5;
|
||
background: rgba(255,255,255,.20);
|
||
border: none;
|
||
color: var(--white);
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 50%;
|
||
font-size: .88rem;
|
||
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: 16px; }
|
||
.slide-btn.next { right: 16px; }
|
||
|
||
/* Indicateurs dots */
|
||
.dotsContainer {
|
||
position: absolute;
|
||
bottom: 18px;
|
||
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 % (Image 2)
|
||
============================================= */
|
||
.form-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 52px 56px; /* bottom padding = place pour le footer absolu */
|
||
background: var(--white);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* Logo grand et centré (Image 2) */
|
||
.form-logo {
|
||
width: 115px;
|
||
height: 115px;
|
||
object-fit: contain;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* Titre imposant uppercase (Image 2) */
|
||
.portail-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
color: var(--brand);
|
||
letter-spacing: 1.8px;
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* Séparateur */
|
||
.portail-divider {
|
||
width: 44px;
|
||
height: 3px;
|
||
background: var(--brand);
|
||
border-radius: 2px;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
/* Formulaire */
|
||
.login100-form {
|
||
width: 100%;
|
||
max-width: 355px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Alerte maintenance / erreur */
|
||
.alert-portail {
|
||
border-radius: var(--border-r);
|
||
font-size: .83rem;
|
||
padding: 10px 14px;
|
||
margin-bottom: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.alert-portail.danger {
|
||
background: #fff0f0;
|
||
border: 1px solid #f5c6cb;
|
||
color: var(--danger);
|
||
}
|
||
|
||
/* Groupe champ — aéré (Image 2) */
|
||
.field-group {
|
||
margin-bottom: 13px;
|
||
}
|
||
|
||
.field-group label {
|
||
display: block;
|
||
font-size: .79rem;
|
||
font-weight: 600;
|
||
color: var(--text-label);
|
||
margin-bottom: 5px;
|
||
letter-spacing: .2px;
|
||
}
|
||
|
||
/* Wrapper input + icône (Image 1) */
|
||
.input-icon-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.input-icon-wrap .field-icon {
|
||
position: absolute;
|
||
left: 14px;
|
||
color: var(--brand);
|
||
font-size: .90rem;
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* Inputs text / password */
|
||
.input-icon-wrap .input100 {
|
||
width: 100%;
|
||
height: var(--input-h);
|
||
padding: 0 14px 0 40px;
|
||
border: 2px solid #c5e1f3;
|
||
border-radius: var(--border-r);
|
||
font-size: .9rem;
|
||
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: #a8cce0; }
|
||
|
||
/* Focus : fond bleu clair + bordure pleine (Image 2) */
|
||
.input-icon-wrap .input100:focus {
|
||
border-color: var(--brand);
|
||
background: var(--brand-focus);
|
||
box-shadow: 0 0 0 3px rgba(0,136,207,.10);
|
||
}
|
||
|
||
/* Bootstrap-select langue */
|
||
.bootstrap-select.field-select {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.bootstrap-select.field-select > .dropdown-toggle {
|
||
height: var(--input-h);
|
||
padding: 0 14px 0 40px;
|
||
border: 2px solid #c5e1f3 !important;
|
||
border-radius: var(--border-r) !important;
|
||
background: var(--white) !important;
|
||
color: var(--brand);
|
||
font-size: .9rem;
|
||
box-shadow: none !important;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: border-color var(--transition), background var(--transition);
|
||
}
|
||
|
||
.bootstrap-select.field-select.show > .dropdown-toggle,
|
||
.bootstrap-select.field-select > .dropdown-toggle:active {
|
||
border-color: var(--brand) !important;
|
||
background: var(--brand-focus) !important;
|
||
box-shadow: 0 0 0 3px rgba(0,136,207,.10) !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
.bootstrap-select.field-select .filter-option-inner-inner {
|
||
color: var(--brand) !important;
|
||
background: transparent !important;
|
||
text-align: left;
|
||
font-size: .9rem;
|
||
height: auto;
|
||
line-height: normal;
|
||
}
|
||
|
||
/* Masque la caret native Bootstrap-select, on utilise notre icône FA */
|
||
.bootstrap-select.field-select .caret { display: none !important; }
|
||
|
||
/* Flèche custom positionnée à droite du select */
|
||
.select-arrow {
|
||
position: absolute;
|
||
right: 13px;
|
||
color: var(--brand);
|
||
font-size: .78rem;
|
||
pointer-events: none;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* Bouton connexion (Image 1 icône + Image 2 propreté) */
|
||
.btn-login {
|
||
width: 100%;
|
||
height: 48px;
|
||
background: var(--brand);
|
||
color: var(--white);
|
||
border: 2px solid var(--brand);
|
||
border-radius: var(--border-r);
|
||
font-size: 1rem;
|
||
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: 9px;
|
||
}
|
||
|
||
.btn-login:hover {
|
||
background: var(--white);
|
||
color: var(--brand);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Lien mot de passe oublié */
|
||
.link-forgot {
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.link-forgot a {
|
||
font-size: .82rem;
|
||
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 du panneau (Image 2) */
|
||
.portail-footer {
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
font-size: .72rem;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.portail-footer a {
|
||
color: var(--brand);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.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: 36px 24px 64px;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.login100-form { max-width: 100%; }
|
||
|
||
.portail-footer { bottom: 10px; }
|
||
}
|