(plutôt qu'un ) redevient un vrai lien : pas
besoin de répéter un style inline à chaque fois qu'une carte doit être cliquable. */
a.card, button.card { display: block; text-decoration: none; color: inherit; cursor: pointer; width: 100%; text-align: left; border: 1px solid var(--border-light); font: inherit; }
.card-dark {
background: var(--surface-dark-3);
border-color: var(--border-dark);
color: var(--text-on-dark-primary);
}
.card-title { font-size: var(--text-title-md); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.card-subtitle { font-size: var(--text-body-sm); color: var(--text-on-light-secondary); }
/* ---------------------------------- Alerts / banners ---------------------------------- */
.alert {
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
font-size: var(--text-body-sm);
line-height: var(--leading-normal);
border: 1px solid transparent;
}
.alert-title { font-weight: var(--weight-semibold); margin-bottom: 2px; display: block; }
.alert ul { margin: 0; padding-left: 18px; }
.alert-info { background: var(--status-info-bg); color: var(--status-info-fg); }
.alert-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.alert-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.alert-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
/* ---------------------------------- Modal (générique, réutilisable) ---------------------------------- */
.modal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(11, 10, 8, .6);
display: flex; align-items: center; justify-content: center;
padding: var(--space-4);
}
.modal-overlay[hidden] { display: none; }
/* Un élément portant l'attribut `hidden` est masqué, point — y compris quand
une règle d'auteur lui donne un display (flex, grid...). Sans ce !important,
la feuille de style du navigateur perd contre n'importe quelle classe de
mise en page : le bloc "rémunération" d'une course confiée restait
entièrement visible alors que le JS l'avait bien masqué (trouvé par Hubert
le 06/09/2026, sur deux appareils). C'est un piège général, pas propre à
cet écran — d'où la règle globale plutôt qu'un correctif local. */
[hidden] { display: none !important; }
.modal-box {
background: var(--surface-light-1, #fff); color: var(--text-on-light-primary);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
max-width: 480px; width: 100%; padding: var(--space-6);
}
.modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-5); }
/* Contenu courant d'une modale : un titre, une ligne d'explication, une liste
d'options empilees. Ecrit ici le 13/09/2026 en remplacement des style="..."
qui etaient recopies a l'identique dans les deux widgets d'estimation
(trajet et mise a disposition) — memes valeurs, une seule definition. */
.modal-titre { font-weight: 700; font-size: var(--text-body-lg, 1.1rem); margin: 0 0 4px; }
.modal-sous-titre { color: var(--text-on-light-secondary); font-size: var(--text-body-sm); margin: 0 0 18px; }
.modal-liste { display: flex; flex-direction: column; gap: 10px; }
/* ---------------------------------- Forms ---------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
font-size: var(--text-body-sm);
font-weight: var(--weight-medium);
color: var(--text-on-light-secondary);
}
.field-hint { font-size: var(--text-caption); color: var(--text-on-light-muted); overflow-wrap: anywhere; }
.field-static { font-size: var(--text-body-md); color: var(--text-on-light-primary); margin: 0; }
.field-error { font-size: var(--text-caption); color: var(--status-danger-fg); }
.text-success { color: var(--status-success-fg); }
.text-danger { color: var(--status-danger-fg); }
.input, .select, .textarea {
font-family: var(--font-sans);
font-size: var(--text-body-md);
color: var(--text-on-light-primary);
background: var(--surface-light-2);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 12px 14px;
width: 100%;
transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 3px var(--accent-gold-tint);
}
.input:disabled, .select:disabled, .textarea:disabled,
.input:read-only, .textarea:read-only { background: var(--surface-light-3); color: var(--text-on-light-muted); }
.textarea { resize: vertical; min-height: 96px; }
.checkbox, .radio { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); cursor: pointer; }
.checkbox input, .radio input { accent-color: var(--accent-gold-press); width: 18px; height: 18px; }
/* ---------------------------------- Tables ---------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.table th {
text-align: left;
font-weight: var(--weight-semibold);
color: var(--text-on-light-secondary);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-light);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-light); }
.table tr:last-child td { border-bottom: none; }
/* Tableau à libellés en colonne (
en tête de LIGNE, ex. page de suivi
d'une réservation) : la dernière ligne perdait son trait côté valeur mais
le gardait sous le libellé — un bout de trait isolé sous « PRIX » (capture
d'Hubert, 23/09/2026). `tbody` seulement : le trait sous l'en-tête d'un
tableau classique () reste. */
.table tbody tr:last-child th { border-bottom: none; }
.table tr:hover td { background: var(--surface-light-3); }
/* Réservation en ligne pas encore confirmée par Hubert — teinte pour qu'elle
saute aux yeux dans la liste au lieu de se fondre parmi les autres lignes
(demande du 10/08 : une réservation site était passée inaperçue). */
.table tr.tr-en-attente td { background: var(--status-warning-bg); }
.table tr.tr-en-attente:hover td { background: var(--status-warning-bg); }
.table-row-link { cursor: pointer; }
.th-tri { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.th-tri:hover, .th-tri:hover:hover { color: var(--text-on-light-primary); text-decoration: none; }
.th-tri.is-active { color: var(--accent-gold-press); }
.th-tri-icon { width: 12px; height: 12px; flex: none; }
/* ---------------------------------- Accessibilité ---------------------------------- */
/* Texte lu par les lecteurs d'écran, invisible à l'écran — pour les labels de
formulaire qui n'ont pas besoin d'être affichés (le placeholder suffit
visuellement, mais un placeholder seul n'est pas fiable pour un lecteur
d'écran, ni une fois le champ rempli). */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ---------------------------------- Print (bon de commande) ---------------------------------- */
@media print {
body { background: #fff !important; color: #000 !important; }
.no-print { display: none !important; }
.card-dark, .card { background: #fff !important; color: #000 !important; border-color: #999 !important; box-shadow: none !important; }
}
|