898 lines
19 KiB
CSS
898 lines
19 KiB
CSS
/* ============================================================
|
|
PARCOURSUP EXPLORER — Charte Parcoursup officielle
|
|
============================================================ */
|
|
|
|
:root {
|
|
--vert: #1a936f;
|
|
--vert-fonce: #147a5c;
|
|
--vert-clair: #e8f5ef;
|
|
--bleu: #2a5298;
|
|
--bleu-clair: #eaf0fa;
|
|
--orange: #e67e22;
|
|
--rouge: #c0392b;
|
|
--gris-50: #f9fafb;
|
|
--gris-100: #f3f4f6;
|
|
--gris-200: #e5e7eb;
|
|
--gris-300: #d1d5db;
|
|
--gris-500: #6b7280;
|
|
--gris-700: #374151;
|
|
--gris-900: #111827;
|
|
--rayon: 6px;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Marianne', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
margin: 0;
|
|
background: var(--gris-50);
|
|
color: var(--gris-900);
|
|
line-height: 1.6;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ===========================================================
|
|
HEADER
|
|
=========================================================== */
|
|
|
|
.site-header {
|
|
background: white;
|
|
border-bottom: 3px solid var(--vert);
|
|
padding: 0 24px;
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
.header-inner {
|
|
max-width: 1100px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.logo-icon { font-size: 22px; }
|
|
|
|
.logo-text {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--vert);
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
.logo-light {
|
|
font-weight: 400;
|
|
color: var(--gris-700);
|
|
}
|
|
|
|
.header-badge {
|
|
background: var(--vert-clair);
|
|
color: var(--vert-fonce);
|
|
padding: 4px 14px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
border: 1px solid #b8e0cd;
|
|
}
|
|
|
|
/* ===========================================================
|
|
PAGE
|
|
=========================================================== */
|
|
|
|
.page {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 24px 20px 40px;
|
|
}
|
|
|
|
/* ===========================================================
|
|
BOUTONS
|
|
=========================================================== */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: var(--rayon);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
|
|
.btn-primary { background: var(--vert); color: white; }
|
|
.btn-primary:hover:not(:disabled) { background: var(--vert-fonce); }
|
|
|
|
.btn-outline { background: white; color: var(--vert); border: 1.5px solid var(--vert); }
|
|
.btn-outline:hover:not(:disabled) { background: var(--vert-clair); }
|
|
|
|
.btn-danger { background: #fef2f2; color: var(--rouge); border: 1px solid #f5c6cb; }
|
|
.btn-danger:hover { background: #fde8e8; }
|
|
|
|
.btn-small { padding: 5px 12px; font-size: 13px; }
|
|
|
|
/* ===========================================================
|
|
SEARCH BAR
|
|
=========================================================== */
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.search-bar input {
|
|
flex: 1;
|
|
padding: 10px 14px;
|
|
font-size: 15px;
|
|
border: 1.5px solid var(--gris-300);
|
|
border-radius: var(--rayon);
|
|
background: white;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.search-bar input:focus {
|
|
border-color: var(--vert);
|
|
box-shadow: 0 0 0 2px rgba(26, 147, 111, 0.12);
|
|
}
|
|
|
|
.search-bar button {
|
|
padding: 10px 22px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
background: var(--vert);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--rayon);
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.search-bar button:hover { background: var(--vert-fonce); }
|
|
|
|
.result-count {
|
|
font-size: 14px;
|
|
color: var(--gris-500);
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
/* ===========================================================
|
|
CARDS
|
|
=========================================================== */
|
|
|
|
.card {
|
|
background: white;
|
|
padding: 18px 20px;
|
|
border-radius: var(--rayon);
|
|
border: 1px solid var(--gris-200);
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.card:hover { border-color: var(--vert); }
|
|
|
|
.card h3, .card h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 6px;
|
|
color: var(--bleu);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.card p {
|
|
margin: 4px 0;
|
|
font-size: 14px;
|
|
color: var(--gris-700);
|
|
}
|
|
|
|
.card button {
|
|
margin-top: 10px;
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-radius: var(--rayon);
|
|
border: 1.5px solid var(--vert);
|
|
background: white;
|
|
color: var(--vert);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.card button:hover { background: var(--vert-clair); }
|
|
.card button + button { margin-left: 8px; }
|
|
|
|
/* --- Cards colorées du comparateur --- */
|
|
.card-tres-favorable {
|
|
background: #e8f5ef;
|
|
border-color: #6ec89b;
|
|
border-left: 4px solid #147a5c;
|
|
}
|
|
|
|
.card-favorable {
|
|
background: #eaf7ed;
|
|
border-color: #a3d9b8;
|
|
border-left: 4px solid #1a936f;
|
|
}
|
|
|
|
.card-possible {
|
|
background: #fef9e7;
|
|
border-color: #f6e05e;
|
|
border-left: 4px solid #d69e2e;
|
|
}
|
|
|
|
.card-difficile {
|
|
background: #fef2f2;
|
|
border-color: #f5c6cb;
|
|
border-left: 4px solid #e67e22;
|
|
}
|
|
|
|
.card-tres-difficile {
|
|
background: #fde8e8;
|
|
border-color: #f5a3a3;
|
|
border-left: 4px solid #c0392b;
|
|
}
|
|
|
|
/* ===========================================================
|
|
BADGES ESTIMATION — 5 niveaux
|
|
=========================================================== */
|
|
|
|
.estimate {
|
|
display: inline-block;
|
|
padding: 4px 14px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tres-favorable {
|
|
background: #147a5c;
|
|
color: white;
|
|
}
|
|
|
|
.favorable {
|
|
background: var(--vert-clair);
|
|
color: var(--vert-fonce);
|
|
border: 1px solid #a3d9c0;
|
|
}
|
|
|
|
.possible {
|
|
background: #fef9e7;
|
|
color: #b7791f;
|
|
border: 1px solid #f6e05e;
|
|
}
|
|
|
|
.difficile {
|
|
background: #fef2f2;
|
|
color: #c05621;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
.tres-difficile {
|
|
background: var(--rouge);
|
|
color: white;
|
|
}
|
|
|
|
.estimation-result {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.estimation-detail {
|
|
font-size: 12px;
|
|
color: var(--gris-500);
|
|
}
|
|
|
|
/* ===========================================================
|
|
DETAIL CARD — Comparateur
|
|
=========================================================== */
|
|
|
|
.detail-card {
|
|
background: white;
|
|
padding: 22px 24px;
|
|
border-radius: var(--rayon);
|
|
border: 1px solid var(--gris-200);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.detail-card hr {
|
|
margin: 18px 0;
|
|
border: none;
|
|
border-top: 1px solid var(--gris-200);
|
|
}
|
|
|
|
.detail-card h2, .detail-card h3 {
|
|
margin-top: 0;
|
|
color: var(--gris-900);
|
|
}
|
|
|
|
.detail-card p {
|
|
margin: 6px 0;
|
|
color: var(--gris-700);
|
|
}
|
|
|
|
.comparateur-card {
|
|
border-left: 4px solid var(--vert);
|
|
}
|
|
|
|
/* ===========================================================
|
|
COMPARE CONTROLS
|
|
=========================================================== */
|
|
|
|
.compare-controls {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.compare-controls label {
|
|
font-size: 13px;
|
|
color: var(--gris-500);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.compare-controls input,
|
|
.compare-controls select {
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
min-width: 130px;
|
|
border: 1.5px solid var(--gris-300);
|
|
border-radius: var(--rayon);
|
|
background: white;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.compare-controls input:focus,
|
|
.compare-controls select:focus {
|
|
border-color: var(--vert);
|
|
}
|
|
|
|
/* ===========================================================
|
|
PAGINATION
|
|
=========================================================== */
|
|
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.page-info {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--gris-500);
|
|
}
|
|
|
|
/* ===========================================================
|
|
LAYOUT
|
|
=========================================================== */
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.results {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.message {
|
|
padding: 16px;
|
|
background: white;
|
|
border: 1px solid var(--gris-200);
|
|
border-radius: var(--rayon);
|
|
text-align: center;
|
|
color: var(--gris-500);
|
|
}
|
|
|
|
/* ===========================================================
|
|
MAP
|
|
=========================================================== */
|
|
|
|
.map-box {
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.map-box h3 {
|
|
margin: 0 0 8px;
|
|
font-size: 0.95rem;
|
|
color: var(--gris-700);
|
|
}
|
|
|
|
.map {
|
|
height: 400px;
|
|
width: 100%;
|
|
border-radius: var(--rayon);
|
|
border: 1px solid var(--gris-200);
|
|
}
|
|
|
|
/* ===========================================================
|
|
DETAIL VIEW
|
|
=========================================================== */
|
|
|
|
.detail-page { background: transparent; }
|
|
|
|
.formation-title {
|
|
color: var(--bleu);
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.formation-meta {
|
|
background: white;
|
|
padding: 18px 22px;
|
|
border-radius: var(--rayon);
|
|
border: 1px solid var(--gris-200);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.formation-meta p {
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
color: var(--gris-700);
|
|
}
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 24px;
|
|
align-items: start;
|
|
margin-top: 8px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.detail-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
border-radius: var(--rayon);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.detail-table th,
|
|
.detail-table td {
|
|
border: 1px solid var(--gris-200);
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.detail-table thead th {
|
|
background: var(--gris-100);
|
|
font-weight: 700;
|
|
color: var(--gris-700);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.total-row td {
|
|
font-weight: 700;
|
|
background: var(--gris-100);
|
|
}
|
|
|
|
.timeline-box {
|
|
background: white;
|
|
padding: 18px 22px;
|
|
border-radius: var(--rayon);
|
|
border: 1px solid var(--gris-200);
|
|
}
|
|
|
|
.timeline-box h3 { margin-top: 0; color: var(--gris-900); }
|
|
|
|
.timeline {
|
|
position: relative;
|
|
margin-top: 20px;
|
|
padding-left: 26px;
|
|
border-left: 3px solid #b8e0cd;
|
|
}
|
|
|
|
.timeline-item { position: relative; margin-bottom: 32px; }
|
|
|
|
.timeline-dot {
|
|
position: absolute;
|
|
left: -35px;
|
|
top: 5px;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--vert);
|
|
border-radius: 50%;
|
|
border: 3px solid var(--vert-clair);
|
|
}
|
|
|
|
/* ===========================================================
|
|
CHARTS CSS
|
|
=========================================================== */
|
|
|
|
.charts-heading {
|
|
margin-top: 32px;
|
|
margin-bottom: 4px;
|
|
color: var(--gris-900);
|
|
}
|
|
|
|
.charts-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin: 16px 0 28px;
|
|
}
|
|
|
|
.chart-wrapper {
|
|
background: white;
|
|
border: 1px solid var(--gris-200);
|
|
border-radius: var(--rayon);
|
|
padding: 18px 20px 14px;
|
|
}
|
|
|
|
.chart-wrapper h3 {
|
|
margin: 0 0 14px;
|
|
font-size: 0.9rem;
|
|
color: var(--gris-700);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.chart-full { grid-column: 1 / -1; }
|
|
|
|
#chart-bac .column,
|
|
#chart-mentions .column {
|
|
height: 240px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#chart-profil .bar {
|
|
height: 170px;
|
|
max-width: 560px;
|
|
margin: 0;
|
|
}
|
|
|
|
#chart-profil .bar th {
|
|
width: 85px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
#chart-evolution-taux .column {
|
|
height: 220px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#chart-evolution-candidats .column {
|
|
height: 220px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.chart-wrapper .data {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.btn-retour {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 12px 0 28px;
|
|
padding: 9px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
background: var(--vert);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--rayon);
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.btn-retour:hover { background: var(--vert-fonce); }
|
|
|
|
/* ===========================================================
|
|
RESPONSIVE
|
|
=========================================================== */
|
|
|
|
/* --- Badge cliquable --- */
|
|
.badge-clickable {
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.badge-clickable:hover {
|
|
background: #c6f0dc;
|
|
border-color: #6ec89b;
|
|
}
|
|
|
|
/* --- Filtres avancés --- */
|
|
.filters-toggle {
|
|
margin: -10px 0 16px;
|
|
}
|
|
|
|
.filters-panel {
|
|
background: white;
|
|
border: 1px solid var(--gris-200);
|
|
border-radius: var(--rayon);
|
|
padding: 16px 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.filter-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 160px;
|
|
flex: 1;
|
|
}
|
|
|
|
.filter-item label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--gris-500);
|
|
}
|
|
|
|
.filter-item select,
|
|
.filter-item input {
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
border: 1.5px solid var(--gris-300);
|
|
border-radius: var(--rayon);
|
|
background: white;
|
|
outline: none;
|
|
}
|
|
|
|
.filter-item select:focus,
|
|
.filter-item input:focus {
|
|
border-color: var(--vert);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.detail-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.charts-section { grid-template-columns: 1fr; }
|
|
.site-header { padding: 0 14px; }
|
|
.logo-text { font-size: 16px; }
|
|
.page { padding: 16px 12px 30px; }
|
|
.search-bar { flex-direction: column; }
|
|
.search-bar button { width: 100%; }
|
|
}
|
|
|
|
/* ===========================================================
|
|
HEADER RIGHT (badge + auth)
|
|
=========================================================== */
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* ===========================================================
|
|
AUTH PANEL
|
|
=========================================================== */
|
|
|
|
.btn-auth {
|
|
background: var(--vert);
|
|
color: white;
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: var(--rayon);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.btn-auth:hover { background: var(--vert-fonce); }
|
|
|
|
.auth-icon { font-size: 15px; }
|
|
|
|
.auth-user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.auth-email {
|
|
font-size: 13px;
|
|
color: var(--gris-700);
|
|
font-weight: 500;
|
|
max-width: 160px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-auth-logout {
|
|
background: white;
|
|
color: var(--rouge);
|
|
border: 1.5px solid #f5c6cb;
|
|
padding: 5px 12px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
border-radius: var(--rayon);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.btn-auth-logout:hover {
|
|
background: #fef2f2;
|
|
}
|
|
|
|
/* --- Modale --- */
|
|
.auth-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(17, 24, 39, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
backdrop-filter: blur(2px);
|
|
animation: fadeIn 0.15s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.auth-modal {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 32px 36px;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
position: relative;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
|
|
animation: slideUp 0.2s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(16px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.auth-modal-close {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 16px;
|
|
background: none;
|
|
border: none;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
color: var(--gris-500);
|
|
line-height: 1;
|
|
padding: 4px 6px;
|
|
border-radius: 4px;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.auth-modal-close:hover { background: var(--gris-100); }
|
|
|
|
.auth-modal-title {
|
|
margin: 0 0 20px;
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: var(--gris-900);
|
|
}
|
|
|
|
/* --- Onglets --- */
|
|
.auth-tabs {
|
|
display: flex;
|
|
margin-bottom: 24px;
|
|
border-bottom: 2px solid var(--gris-200);
|
|
}
|
|
|
|
.auth-tab {
|
|
flex: 1;
|
|
background: none;
|
|
border: none;
|
|
padding: 8px 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
color: var(--gris-500);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.auth-tab.active {
|
|
color: var(--vert);
|
|
border-bottom-color: var(--vert);
|
|
}
|
|
|
|
.auth-tab:hover:not(.active) { color: var(--gris-700); }
|
|
|
|
/* --- Formulaire --- */
|
|
.auth-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.auth-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.auth-field label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--gris-700);
|
|
}
|
|
|
|
.auth-field input {
|
|
padding: 10px 12px;
|
|
font-size: 14px;
|
|
border: 1.5px solid var(--gris-300);
|
|
border-radius: var(--rayon);
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
background: white;
|
|
}
|
|
|
|
.auth-field input:focus {
|
|
border-color: var(--vert);
|
|
box-shadow: 0 0 0 3px rgba(26, 147, 111, 0.12);
|
|
}
|
|
|
|
.auth-error {
|
|
background: #fef2f2;
|
|
border: 1px solid #f5c6cb;
|
|
color: var(--rouge);
|
|
padding: 10px 14px;
|
|
border-radius: var(--rayon);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.auth-submit {
|
|
width: 100%;
|
|
justify-content: center;
|
|
padding: 11px;
|
|
font-size: 15px;
|
|
}
|