@charset "UTF-8";
/* ============================================================================
reservations-global-propre.css
============================================================================
FICHIER CSS UNIQUE POUR LE SYSTÈME DE RÉSERVATIONS / ÉVÉNEMENTS
----------------------------------------------------------------------------
Cette version remplace les anciens fichiers séparés et les patchs ajoutés
à la fin du fichier pendant les tests.
Objectifs de cette version :
- garder un seul fichier CSS pour toutes les pages ;
- supprimer les doublons devenus inutiles ;
- conserver le mode clair par défaut ;
- conserver le mode sombre avec ;
- éviter le bloc de variables globales CSS ;
- éviter les variables CSS personnalisées ;
- garder des commentaires détaillés pour modifier facilement le design.
Fichiers remplacés :
- style-reservations.css
- admin-reservations-stats.css
- presentation-reservations.css
- reservations-common.css
- reservations-dark.css
Utilisation :
--------------------------------------------------------------------------
Page située à la racine du dossier réservations :
Page située dans le dossier assets/ :
Important :
--------------------------------------------------------------------------
Le mode sombre dépend uniquement de cette classe :
Le bouton clair / sombre peut continuer à utiliser ton JavaScript actuel.
============================================================================ */
/* ============================================================================
01 - REPÈRES RAPIDES POUR PERSONNALISER LE DESIGN
============================================================================
Comme cette version n'utilise pas de bloc de variables globales CSS, les couleurs sont écrites
directement dans les règles CSS.
Couleurs principales du mode clair :
- Fond général clair : #f3f4f6
- Fond cartes / panneaux : #ffffff
- Texte principal : #111827
- Texte secondaire : #6b7280
- Bleu action standard : #2563eb
- Bleu action standard au survol : #1d4ed8
- Couleur marque / boutons sobres : #395359
- Couleur marque au survol : #56828c
Couleurs principales du mode sombre :
- Fond général graphite : #070707
- Fond panneaux : #101010
- Fond champs : #121212
- Bordures sombres : #242424 / #303030
- Texte clair : #f1f1f1
- Texte secondaire clair : #d6d6d6
Arrondis courants :
- Blocs / cartes : 12px
- Boutons ronds : 999px
============================================================================ */
/* ============================================================================
02 - RESET SIMPLE / BASE GÉNÉRALE
============================================================================
Base volontairement légère.
Elle évite les surprises sans imposer un framework CSS.
============================================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
background: #f3f4f6;
color: #111827;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
img,
picture,
svg {
max-width: 100%;
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
}
h1,
h2,
h3,
h4 {
margin-top: 0;
color: #111827;
}
h1 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.4rem;
margin-top: 2rem;
}
h3 {
font-size: 1.2rem;
}
/* ============================================================================
03 - CONTENEURS GÉNÉRAUX
============================================================================
.res-container : conteneur principal du système.
.wrap : conteneur utilisé par les pages vitrine / présentation.
.help-wrap : conteneur utilisé par les pages d'aide.
.section : espacement vertical entre les sections.
============================================================================ */
.res-container {
max-width: 1100px;
margin: 0 auto 70px;
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.wrap {
max-width: 1120px;
margin: 0 auto 70px;
}
.help-wrap {
max-width: 1100px;
margin: 0 auto;
}
.section {
margin-top: 14px;
}
/* ============================================================================
04 - HEADER GLOBAL : MENU + BANNIÈRE + BANDEAU
============================================================================
Structure prévue :
--------------------------------------------------------------------------
Remarque :
--------------------------------------------------------------------------
Cette version n'utilise plus les réglages par variables CSS dans le HTML.
Pour modifier la largeur / hauteur du menu, de la bannière ou du bandeau,
modifie directement les règles ci-dessous.
============================================================================ */
.res-top {
width: 100%;
}
/* ----------------------------------------------------------------------------
04.1 - Menu principal
---------------------------------------------------------------------------- */
.res-nav {
position: sticky;
top: 0;
z-index: 1000;
max-width: 1100px;
margin: 20px auto;
padding: 20px 0;
background:
radial-gradient(1200px 400px at 20% 0%, rgba(57, 83, 89, .10), transparent 60%),
radial-gradient(900px 380px at 80% 10%, rgba(86, 130, 140, .12), transparent 55%),
#ffffff;
box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
border-bottom: 1px solid #d1d5db;
border-radius: 12px;
backdrop-filter: blur(10px);
}
.res-nav-inner {
min-height: 64px;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-radius: 12px;
}
/* Marque / logo texte */
.res-brand,
.res-brand-link {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #111827;
font-weight: 800;
}
.res-brand-mark {
width: 65px;
height: 65px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .06);
/*border: 1px solid rgba(0, 0, 0, .08);*/
color: #111827;
font-weight: 900;
}
.res-brand-mark img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
}
.res-brand-text {
display: inline-flex;
flex-direction: column;
line-height: 1.1;
}
/* Liste des liens */
.res-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 8px;
}
.res-nav-link-logo,
.res-nav-link {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 999px;
text-decoration: none;
color: #111827;
font-size: .95rem;
font-weight: 600;
}
.res-nav-link {
position: relative;
}
.res-nav-link:hover,
.res-nav-link:focus-visible,
.res-nav-link-logo:hover,
.res-nav-link-logo:focus-visible {
background: rgba(0, 0, 0, .06);
}
/* ----------------------------------------------------------------------------
04.2 - Infobulle du menu
----------------------------------------------------------------------------
Fonctionne avec l'attribut HTML data-tooltip="..."
Exemple :
Admin
---------------------------------------------------------------------------- */
.res-nav-link::after {
content: attr(data-tooltip);
position: absolute;
top: 125%;
left: 50%;
transform: translateX(-50%);
padding: 8px 12px;
border-radius: 6px;
background: #333333;
color: #ffffff;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.1s ease, visibility 0.1s ease;
}
.res-nav-link:hover::after,
.res-nav-link:focus-visible::after {
opacity: 1;
visibility: visible;
}
/* Évite une petite bulle vide si data-tooltip n'est pas présent. */
.res-nav-link:not([data-tooltip])::after,
.res-nav-link[data-tooltip=""]::after {
display: none;
}
/* ----------------------------------------------------------------------------
04.3 - Sous-menu
----------------------------------------------------------------------------
Le sous-menu s'ouvre au survol et au clavier grâce à focus-within.
---------------------------------------------------------------------------- */
.has-submenu {
position: relative;
}
.has-submenu > .submenu {
position: absolute;
top: 100%;
right: 0;
z-index: 100;
display: none;
min-width: 200px;
margin-top: 0;
padding: 8px;
list-style: none;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
display: block;
}
.res-sub-link {
display: block;
padding: 8px 12px;
border-radius: 12px;
text-decoration: none;
color: #111827;
font-size: .9rem;
}
.res-sub-link:hover,
.res-sub-link:focus-visible {
background: rgba(0, 0, 0, .06);
}
/* ----------------------------------------------------------------------------
04.4 - Bannière / hero du haut
----------------------------------------------------------------------------
Ce bloc peut contenir :
- une image ;
- ou du texte selon la page.
Pour changer la hauteur par défaut, modifie min-height.
---------------------------------------------------------------------------- */
.res-hero {
max-width: 1100px;
/*min-height: 280px;*/
margin: 0 auto;
padding: 20px;
overflow: hidden;
border-bottom: 1px solid #d1d5db;
border-radius: 12px;
background:
radial-gradient(1200px 400px at 20% 0%, rgba(57, 83, 89, .10), transparent 60%),
radial-gradient(900px 380px at 80% 10%, rgba(86, 130, 140, .12), transparent 55%),
#ffffff;
box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}
.res-hero img {
display: block;
width: 100%;
height: 100%;
min-height: 240px;
object-fit: cover;
border-radius: 12px;
}
/* ----------------------------------------------------------------------------
04.5 - Bandeau titre / sous-titre
----------------------------------------------------------------------------
Souvent utilisé pour :
- un texte de présentation ;
- un lien "Rafraîchir la page" ;
- le bouton mode clair / mode sombre.
---------------------------------------------------------------------------- */
.res-band {
max-width: 1100px;
margin: 20px auto;
background:
radial-gradient(1200px 400px at 20% 0%, rgba(57, 83, 89, .10), transparent 60%),
radial-gradient(900px 380px at 80% 10%, rgba(86, 130, 140, .12), transparent 55%),
#ffffff;
box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
border-bottom: 1px solid #d1d5db;
border-radius: 12px;
backdrop-filter: blur(10px);
}
.res-band-inner {
min-height: 64px;
padding: 10px 1.5rem;
margin: 0 auto;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
.res-band-title {
margin: 0;
color: #111827;
font-size: 1.35rem;
line-height: 1.15;
}
.res-band-sub {
margin: 0;
color: #6b7280;
text-align: right;
font-size: .95rem;
}
/* ============================================================================
05 - MESSAGES : ERREUR / SUCCÈS / AVERTISSEMENT
============================================================================
Classes utilisées :
- .res-message
- .res-error
- .res-success
- .res-warning
Exemple :
⚠️ Conseil...
============================================================================ */
.res-message {
margin: 1rem 0;
padding: 0.75rem 1rem;
border-radius: 12px;
font-size: 0.95rem;
}
.res-message ul {
margin: 0.25rem 0 0.25rem 1.25rem;
padding: 0;
}
.res-error {
background: #fee2e2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.res-success {
background: #dcfce7;
color: #058e3f;
border: 1px solid #bbf7d0;
}
.res-warning {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}
/* ============================================================================
06 - BOUTONS / LIENS-BOUTONS / BADGES
============================================================================ */
/* ----------------------------------------------------------------------------
06.1 - Boutons du système de réservation
---------------------------------------------------------------------------- */
.res-actions {
margin-top: 1rem;
}
.res-actions button,
.res-inline-form button,
.res-pagination a,
.res-admin-link {
display: inline-block;
padding: 0.5rem 0.9rem;
border: none;
border-radius: 999px;
background: #2563eb;
color: #ffffff;
font-size: 0.8rem;
text-decoration: none;
cursor: pointer;
transition:
background 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}
.res-actions button:hover,
.res-inline-form button:hover,
.res-pagination a:hover,
.res-admin-link:hover {
background: #1d4ed8;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.res-actions button:active,
.res-inline-form button:active,
.res-admin-link:active,
.btn:active,
.submit:active {
transform: translateY(1px);
}
.res-inline-form {
display: inline-block;
margin: 0.1rem;
}
.res-admin-link {
margin-bottom: 1rem;
}
/* Bouton rouge pour les actions destructives. */
.purger-link {
display: inline-block;
padding: 0.4rem 0.8rem;
border: none;
border-radius: 12px;
background: #dc2626;
color: #ffffff;
font-size: 0.9rem;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.purger-link:hover {
background: #b91c1c;
box-shadow: 0 2px 6px rgba(185, 28, 28, 0.35);
}
/* ----------------------------------------------------------------------------
06.2 - Boutons des pages vitrine / présentation
---------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #395359;
color: #ffffff;
text-decoration: none;
font-weight: 900;
box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}
.btn.secondary {
background: #ffffff;
color: #395359;
}
.btn.small {
padding: 8px 12px;
border-radius: 12px;
font-weight: 800;
}
/* Bouton d'envoi des formulaires vitrine. */
.submit {
padding: 10px 14px;
border: 0;
border-radius: 12px;
background: #395359;
color: #ffffff;
font-weight: 900;
cursor: pointer;
}
/* Bouton clair / sombre. Le texte est généralement modifié par JavaScript. */
.btn-theme {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border: 1px solid #111827;
border-radius: 999px;
background: #111827;
color: #f9fafb;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-theme:hover {
box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}
/* ----------------------------------------------------------------------------
06.3 - Badges / pastilles
---------------------------------------------------------------------------- */
.badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-size: .8rem;
font-weight: 700;
white-space: nowrap;
}
.badge-green {
background: #dcfce7;
color: #166534;
}
.badge-orange {
background: #ffedd5;
color: #9a3412;
}
.badge-red {
background: #fee2e2;
color: #991b1b;
}
.badge-gray {
background: #e5e7eb;
color: #374151;
}
.badge-archived {
background: #6b7280;
color: #ffffff;
}
/* Pastilles cliquables dans les pages de présentation / aide. */
.pill,
.pilllink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 999px;
background: #f9fafb;
color: #374151;
text-decoration: none;
font-weight: 900;
}
.pill {
padding: 6px 10px;
font-size: .85rem;
font-weight: 700;
}
/* ============================================================================
07 - MISE EN PAGE PUBLIQUE : CALENDRIER + FORMULAIRE
============================================================================ */
.res-layout {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 1.5rem;
}
.res-calendar-wrapper,
.res-form-wrapper {
flex: 1 1 280px;
}
.res-form-note {
color: #6b7280;
font-size: 0.8rem;
}
/* Sélecteur d'événement en haut de la page publique. */
.res-event-select-form {
margin-bottom: 1rem;
}
.res-event-select-form label {
margin-right: 0.5rem;
font-size: 0.9rem;
}
.res-event-select-form select {
padding: 0.4rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 12px;
font-size: 0.9rem;
}
/* Informations de l'événement sélectionné. */
.res-event-info {
color: #6b7280;
font-size: 0.9rem;
}
.res-event-description {
margin-bottom: 0.4rem;
font-size: 0.95rem;
}
/* ============================================================================
08 - FORMULAIRES PUBLICS / ADMIN / VITRINE
============================================================================
Deux familles de classes cohabitent :
- .res-field : système de réservation public + admin ;
- .field : pages vitrine / aide.
============================================================================ */
.res-field,
.res-field-inline > div {
margin-bottom: 0.8rem;
}
.res-field label {
display: block;
margin-bottom: 0.25rem;
color: #6b7280;
font-size: 0.9rem;
}
.res-field input[type="text"],
.res-field input[type="email"],
.res-field input[type="number"],
.res-field input[type="date"],
.res-field input[type="time"],
.res-field input[type="tel"],
.res-field input[type="password"],
.res-field select,
.res-field textarea {
width: 100%;
padding: 0.5rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 12px;
background: #ffffff;
color: #111827;
font-size: 0.95rem;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.res-field input:focus,
.res-field textarea:focus,
.res-field select:focus {
border-color: #2563eb;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
}
/* Champs admin affichés sur une même ligne. */
.res-field-inline {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.res-field-inline > div {
flex: 1 1 180px;
}
.res-form-admin textarea {
min-height: 80px;
}
/* ----------------------------------------------------------------------------
08.1 - Formulaires des pages vitrine
---------------------------------------------------------------------------- */
.form-grid,
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.field {
margin-bottom: 10px;
}
.field label {
display: block;
margin-bottom: 6px;
color: #111827;
font-weight: 900;
}
.field input,
.field textarea,
.field select {
width: 100%;
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
color: #111827;
font: inherit;
}
.field textarea {
min-height: 120px;
resize: vertical;
}
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.form-card {
padding: 16px;
border: 1px solid #e5e7eb;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
/* ============================================================================
09 - CALENDRIER PUBLIC
============================================================================ */
.res-calendar {
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 12px;
background: #f9fafb;
font-size: 0.85rem;
}
.res-calendar-header {
margin-bottom: 0.5rem;
text-align: center;
font-weight: 600;
}
.res-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.25rem;
}
.res-calendar-weekday {
color: #6b7280;
text-align: center;
font-size: 0.75rem;
font-weight: 600;
}
.res-calendar-day {
padding: 0.35rem 0;
border: 1px solid transparent;
border-radius: 999px;
text-align: center;
cursor: default;
}
.res-calendar-day-disabled {
background: transparent;
color: #9ca3af;
}
.res-calendar-day-enabled {
border: 1px solid #00b328;
background: #1bf545;
color: #111827;
cursor: pointer;
}
.res-calendar-day-enabled:hover {
background: #d1d5db;
}
.res-calendar-day-selected {
border-color: #2563eb;
background: #2563eb;
color: #ffffff;
}
.res-calendar-legend {
margin-top: 0.4rem;
color: #6b7280;
font-size: 0.8rem;
}
.res-calendar-legend span {
display: inline-block;
margin-right: 0.8rem;
}
.res-date-enabled::before,
.res-date-disabled::before {
content: "";
display: inline-block;
width: 0.75rem;
height: 0.75rem;
margin-right: 0.25rem;
border-radius: 999px;
}
.res-date-enabled::before {
background: #e5e7eb;
}
.res-date-disabled::before {
background: #9ca3af;
}
/* Image affichée sous le calendrier. */
.res-calendar-image {
margin-top: 14px;
}
.res-calendar-image img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
/* ============================================================================
10 - ADMIN : SECTIONS / BLOCS
============================================================================ */
.res-admin-section {
margin-top: 2rem;
}
/* ============================================================================
11 - TABLEAUX / PAGINATION
============================================================================ */
.res-table-wrapper {
overflow-x: auto;
}
.res-table {
width: 100%;
margin-top: 0.5rem;
border-collapse: collapse;
font-size: 0.9rem;
}
.res-table th,
.res-table td {
padding: 0.4rem 0.5rem;
border: 1px solid #d1d5db;
text-align: left;
vertical-align: top;
}
.res-table th {
background: #e5e7eb;
font-weight: 600;
}
.res-table tr:nth-child(even) {
background: #f9fafb;
}
.res-table-small td {
font-size: 0.85rem;
}
.res-row-archived {
opacity: 0.6;
}
.msg-cell {
max-width: 380px;
white-space: pre-wrap;
word-break: break-word;
}
/* Pagination simple + pagination numérotée. */
.res-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
}
.res-page {
min-width: 32px;
height: 32px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(0, 0, 0, .05);
color: #111827;
text-decoration: none;
font-size: .85rem;
font-weight: 600;
line-height: 1;
}
.res-page:hover {
background: rgba(0, 0, 0, .12);
}
.res-page-active {
background: #2563eb;
color: #ffffff;
font-weight: 700;
}
/* ============================================================================
12 - CARTES / KPI / STATISTIQUES ADMIN
============================================================================ */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.card {
padding: 14px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
.card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.card-title {
font-weight: 700;
line-height: 1.2;
}
.card-sub {
margin-top: 6px;
color: #6b7280;
font-size: .85rem;
}
/* Événement archivé dans les cartes statistiques. */
.card.is-archived {
opacity: 0.35;
filter: grayscale(100%);
}
.card.is-archived .card-title {
text-decoration: line-through;
}
/* ----------------------------------------------------------------------------
12.1 - KPI : petites cases chiffres
---------------------------------------------------------------------------- */
.kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
.kpi {
padding: 10px;
border: 1px solid #eef2f7;
border-radius: 12px;
background: #f9fafb;
}
.kpi-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.kpi-label {
display: flex;
align-items: center;
gap: 6px;
color: #6b7280;
font-size: .78rem;
}
.kpi-val {
margin-top: 4px;
font-size: 1.25rem;
font-weight: 700;
}
/* Couleurs pastel des KPI en mode clair. */
.kpi-bookings {
background: #e8f1fa;
border-color: #d7e7f7;
}
.kpi-people {
background: #eaf6ee;
border-color: #d6eedf;
}
.kpi-capacity {
background: #f1edfa;
border-color: #e4ddf7;
}
.kpi-remaining {
background: #fff3e6;
border-color: #ffe3c9;
}
.kpi-appointments {
background: #fff9db;
border-color: #fff0a8;
}
.kpi-danger {
background: #fceaea;
border-color: #f8cfcf;
}
/* ----------------------------------------------------------------------------
12.2 - Carrousel de cartes statistiques
---------------------------------------------------------------------------- */
.cards-carousel {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.cards-nav {
flex: 0 0 auto;
width: 40px;
height: 40px;
border: 1px solid #d1d5db;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #111827;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
font-size: 18px;
line-height: 1;
user-select: none;
cursor: pointer;
}
.cards-nav:disabled {
opacity: .45;
cursor: default;
box-shadow: none;
}
.cards-track {
flex: 1 1 auto;
display: flex;
gap: 12px;
overflow-x: auto;
padding: 2px 4px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.cards-track::-webkit-scrollbar {
height: 10px;
}
.cards-track::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .15);
border-radius: 999px;
}
.cards-track .card {
flex: 0 0 auto;
width: min(420px, 86vw);
scroll-snap-align: start;
}
/* ============================================================================
13 - PAGE VITRINE / PRÉSENTATION
============================================================================ */
.hero {
margin-top: 20px;
margin-bottom: 14px;
padding: 18px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background:
radial-gradient(1200px 400px at 20% 0%, rgba(57, 83, 89, .10), transparent 60%),
radial-gradient(900px 380px at 80% 10%, rgba(86, 130, 140, .12), transparent 55%),
#ffffff;
box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}
.hero-top {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.hero h1 {
margin: 0;
color: #111827;
line-height: 1.1;
font-size: 1.8rem;
}
.hero p {
max-width: 70ch;
margin: 10px 0 0 0;
color: #6b7280;
font-size: 1rem;
}
.hero-actions,
.actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.grid-2 {
grid-template-columns: 1fr 1fr;
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.two {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
.kicker {
margin: 0 0 6px 0;
color: #395359;
letter-spacing: .02em;
text-transform: uppercase;
font-size: .9rem;
font-weight: 900;
}
.title {
margin: 0 0 8px 0;
font-size: 1.2rem;
}
.section-title {
margin: 16px 0 10px 0;
font-size: 1.1rem;
}
.list {
margin: 10px 0 0 18px;
color: #6b7280;
}
.list li {
margin: 6px 0;
}
.feature {
display: flex;
align-items: flex-start;
gap: 12px;
}
.icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
border: 1px solid #e5e7eb;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #f9fafb;
color: #395359;
font-weight: 900;
}
.feature h3 {
margin: 0 0 6px 0;
}
.feature p {
margin: 0;
color: #6b7280;
}
.preview {
padding: 14px;
border: 1px dashed #e5e7eb;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff, #fafafa);
color: #6b7280;
}
.preview strong {
color: #111827;
}
details {
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
}
details + details {
margin-top: 10px;
}
summary {
color: #111827;
font-weight: 900;
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
.faq p {
margin: 10px 0 0 0;
color: #6b7280;
}
.footer {
margin: 12px 0 0 0;
opacity: .75;
font-size: .85rem;
}
/* ============================================================================
14 - PAGES D'AIDE
============================================================================
Les classes help-* limitent les effets aux pages d'aide.
============================================================================ */
.help-card {
margin-bottom: 14px;
padding: 16px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
.help-card h2 {
margin-top: 0;
}
.help-table {
width: 100%;
border-collapse: collapse;
}
.help-table th,
.help-table td {
padding: 10px;
border: 1px solid #e5e7eb;
text-align: left;
vertical-align: top;
font-size: 0.95rem;
}
.help-table th {
background: #f9fafb;
}
.help-wrap code {
padding: 2px 6px;
border-radius: 12px;
background: #f3f4f6;
}
.help-wrap ul {
margin: 8px 0 0 20px;
}
/* ============================================================================
15 - UTILITAIRES TEXTE / ESPACEMENTS
============================================================================ */
.note {
margin-top: 8px;
color: #6b7280;
font-size: .85rem;
}
.muted,
.text-muted {
color: #6b7280;
}
.muted {
font-size: .92rem;
}
.small,
.mini,
.hint {
color: #6b7280;
font-size: .85rem;
}
/* ============================================================================
16 - MODE SOMBRE : GRAPHITE / NOIR PREMIUM
============================================================================
Activation :
Cette section remplace tous les anciens patchs du mode sombre.
Elle a été consolidée pour éviter les doublons et les contradictions.
Choix graphique :
- fond général presque noir ;
- panneaux graphite ;
- bordures discrètes ;
- textes plus contrastés ;
- conservation des touches #395359 et #56828c pour les actions.
============================================================================ */
/* ----------------------------------------------------------------------------
16.1 - Fond général et texte de base
---------------------------------------------------------------------------- */
body.theme-dark {
background: #070707 !important;
color: #eeeeee !important;
}
body.theme-dark .res-container {
background: transparent !important;
color: #eeeeee !important;
}
/* ----------------------------------------------------------------------------
16.2 - Textes et titres
----------------------------------------------------------------------------
Plusieurs pages ont des styles inline ou des classes différentes.
Les sélecteurs sont donc volontairement larges pour garantir la lisibilité.
---------------------------------------------------------------------------- */
body.theme-dark,
body.theme-dark p,
body.theme-dark li,
body.theme-dark label,
body.theme-dark small,
body.theme-dark .muted,
body.theme-dark .text-muted,
body.theme-dark .small,
body.theme-dark .note,
body.theme-dark .mini,
body.theme-dark .hint,
body.theme-dark .res-form-note,
body.theme-dark .res-event-info,
body.theme-dark .res-calendar-legend,
body.theme-dark .preview,
body.theme-dark .feature p,
body.theme-dark .help-card p,
body.theme-dark .help-card li,
body.theme-dark .help-wrap p,
body.theme-dark .help-wrap li,
body.theme-dark details p,
body.theme-dark .card-sub,
body.theme-dark .list,
body.theme-dark .faq p,
body.theme-dark .hero p {
color: #d6d6d6 !important;
}
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark .title,
body.theme-dark .card-title,
body.theme-dark .section-title,
body.theme-dark summary,
body.theme-dark .hero h1,
body.theme-dark .res-hero h1,
body.theme-dark .res-hero h2,
body.theme-dark .res-hero h3 {
color: #f1f1f1 !important;
}
body.theme-dark .kicker {
color: #cfcfcf !important;
}
body.theme-dark a {
color: #dfe8eb;
}
body.theme-dark a:hover {
color: #ffffff;
}
/* ----------------------------------------------------------------------------
16.3 - Header global : menu, sous-menu, bannière, bandeau
---------------------------------------------------------------------------- */
body.theme-dark .res-nav {
background: #101010 !important;
border: 1px solid #242424 !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}
body.theme-dark .res-nav-inner {
background: transparent !important;
}
body.theme-dark .res-brand,
body.theme-dark .res-brand-link,
body.theme-dark .res-nav-link,
body.theme-dark .res-nav-link-logo,
body.theme-dark .res-sub-link {
color: #eeeeee !important;
}
body.theme-dark .res-brand-mark {
background: #1a1a1a !important;
border-color: #2a2a2a !important;
color: #ffffff !important;
}
body.theme-dark .res-nav-link:hover,
body.theme-dark .res-nav-link:focus-visible,
body.theme-dark .res-nav-link-logo:hover,
body.theme-dark .res-nav-link-logo:focus-visible,
body.theme-dark .res-sub-link:hover,
body.theme-dark .res-sub-link:focus-visible {
background: #1c1c1c !important;
}
body.theme-dark .submenu,
body.theme-dark .has-submenu > .submenu {
background: #101010 !important;
border: 1px solid #2a2a2a !important;
box-shadow: 0 18px 45px rgba(0, 0, 0, .65) !important;
}
/* Bannière du haut */
body.theme-dark .res-hero {
background: #101010 !important;
border: 1px solid #242424 !important;
color: #eeeeee !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}
body.theme-dark .res-hero p {
color: #d6d6d6 !important;
}
/* Bandeau titre / sous-titre */
body.theme-dark .res-band {
background: #101010 !important;
border: 1px solid #242424 !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .35) !important;
}
body.theme-dark .res-band,
body.theme-dark .res-band-title,
body.theme-dark .res-band-sub,
body.theme-dark .res-band p,
body.theme-dark .res-band span,
body.theme-dark .res-band a {
color: #eeeeee !important;
}
/* ----------------------------------------------------------------------------
16.4 - Panneaux, cartes, détails, vitrine et aide
---------------------------------------------------------------------------- */
body.theme-dark .hero,
body.theme-dark .card,
body.theme-dark .help-card,
body.theme-dark .form-card,
body.theme-dark .res-admin-section,
body.theme-dark details,
body.theme-dark .preview {
background: #101010 !important;
border-color: #242424 !important;
color: #eeeeee !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .35) !important;
}
body.theme-dark .card:hover,
body.theme-dark .help-card:hover {
border-color: #333333 !important;
}
body.theme-dark .preview strong {
color: #f1f1f1 !important;
}
body.theme-dark .icon {
background: #181818 !important;
border-color: #303030 !important;
color: #dfe8eb !important;
}
/* ----------------------------------------------------------------------------
16.5 - Formulaires en mode sombre
----------------------------------------------------------------------------
Cette partie corrige les anciens fonds bleu nuit des champs.
Les sélecteurs précis sont conservés pour passer au-dessus des styles inline
ou des anciennes règles plus spécifiques.
---------------------------------------------------------------------------- */
body.theme-dark .res-field input[type="text"],
body.theme-dark .res-field input[type="email"],
body.theme-dark .res-field input[type="number"],
body.theme-dark .res-field input[type="date"],
body.theme-dark .res-field input[type="time"],
body.theme-dark .res-field input[type="tel"],
body.theme-dark .res-field input[type="password"],
body.theme-dark .res-field select,
body.theme-dark .res-field textarea,
body.theme-dark .field input[type="text"],
body.theme-dark .field input[type="email"],
body.theme-dark .field input[type="tel"],
body.theme-dark .field select,
body.theme-dark .field textarea,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="number"],
body.theme-dark input[type="date"],
body.theme-dark input[type="time"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="password"],
body.theme-dark select,
body.theme-dark textarea {
background-color: #121212 !important;
background-image: none !important;
color: #f2f2f2 !important;
border: 1px solid #303030 !important;
box-shadow: none !important;
}
body.theme-dark .res-field input:focus,
body.theme-dark .res-field select:focus,
body.theme-dark .res-field textarea:focus,
body.theme-dark .field input:focus,
body.theme-dark .field select:focus,
body.theme-dark .field textarea:focus,
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
outline: none !important;
background-color: #141414 !important;
color: #ffffff !important;
border-color: #56828c !important;
box-shadow: 0 0 0 2px rgba(86, 130, 140, .35) !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder,
body.theme-dark .res-field input::placeholder,
body.theme-dark .res-field textarea::placeholder,
body.theme-dark .field input::placeholder,
body.theme-dark .field textarea::placeholder {
color: #9a9a9a !important;
opacity: 1;
}
body.theme-dark select option,
body.theme-dark .res-field select option,
body.theme-dark .field select option {
background-color: #121212 !important;
color: #f2f2f2 !important;
}
/* Flèche de select personnalisée pour éviter l'ancien rendu bleuté. */
body.theme-dark select {
-webkit-appearance: none;
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #d0d0d0 50%),
linear-gradient(135deg, #d0d0d0 50%, transparent 50%) !important;
background-position:
calc(100% - 18px) calc(50% - 3px),
calc(100% - 12px) calc(50% - 3px) !important;
background-repeat: no-repeat !important;
background-size: 6px 6px, 6px 6px !important;
padding-right: 2.3rem !important;
}
/* États inactifs / lecture seule */
body.theme-dark input[readonly],
body.theme-dark textarea[readonly],
body.theme-dark input:disabled,
body.theme-dark textarea:disabled,
body.theme-dark select:disabled {
background-color: #1a1a1a !important;
color: #a8a8a8 !important;
border-color: #2d2d2d !important;
}
/* Autofill Chrome / Safari : évite le fond jaune ou bleu automatique. */
body.theme-dark input:-webkit-autofill,
body.theme-dark textarea:-webkit-autofill,
body.theme-dark select:-webkit-autofill {
-webkit-text-fill-color: #f2f2f2 !important;
box-shadow: 0 0 0 1000px #121212 inset !important;
transition: background-color 9999s ease-in-out 0s;
}
/* ----------------------------------------------------------------------------
16.6 - Input file en mode sombre
---------------------------------------------------------------------------- */
body.theme-dark input[type="file"],
body.theme-dark .res-field input[type="file"] {
padding-left: 0 !important;
border: 0 !important;
background: transparent !important;
color: #d8d8d8 !important;
box-shadow: none !important;
}
body.theme-dark input[type="file"]::file-selector-button,
body.theme-dark .res-field input[type="file"]::file-selector-button {
margin-right: 10px;
padding: 7px 12px;
border: 1px solid #333333 !important;
border-radius: 10px !important;
background: #1c1c1c !important;
color: #f2f2f2 !important;
cursor: pointer;
}
body.theme-dark input[type="file"]::file-selector-button:hover,
body.theme-dark .res-field input[type="file"]::file-selector-button:hover {
background: #262626 !important;
}
/* ----------------------------------------------------------------------------
16.7 - Boutons et actions en mode sombre
---------------------------------------------------------------------------- */
body.theme-dark .btn-theme {
background: #f4f4f4 !important;
color: #111111 !important;
border: 1px solid #f4f4f4 !important;
box-shadow: none !important;
}
body.theme-dark .btn-theme:hover,
body.theme-dark .btn-theme:focus-visible {
background: #ffffff !important;
color: #000000 !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, .35) !important;
}
body.theme-dark .btn,
body.theme-dark .submit,
body.theme-dark .res-actions button,
body.theme-dark .res-inline-form button,
body.theme-dark .res-pagination a,
body.theme-dark .res-admin-link {
background: #395359 !important;
color: #ffffff !important;
border: 1px solid #56828c !important;
}
body.theme-dark .btn:hover,
body.theme-dark .submit:hover,
body.theme-dark .res-actions button:hover,
body.theme-dark .res-inline-form button:hover,
body.theme-dark .res-pagination a:hover,
body.theme-dark .res-admin-link:hover {
background: #56828c !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, .45) !important;
}
body.theme-dark .btn.secondary {
background: #181818 !important;
color: #eeeeee !important;
border-color: #303030 !important;
}
body.theme-dark .btn.secondary:hover {
background: #222222 !important;
}
/* ----------------------------------------------------------------------------
16.8 - Messages en mode sombre
----------------------------------------------------------------------------
Choix volontaire :
- les messages restent sur fonds clairs colorés ;
- le texte est forcé en foncé pour une lisibilité parfaite.
---------------------------------------------------------------------------- */
body.theme-dark .res-message.res-warning {
background: #fff3c4 !important;
border: 1px solid #e0c45c !important;
color: #4a3500 !important;
}
body.theme-dark .res-message.res-warning *,
body.theme-dark .res-message.res-warning strong {
color: #4a3500 !important;
}
body.theme-dark .res-message.res-success {
background: #dff5e5 !important;
border: 1px solid #8fd1a0 !important;
color: #12351c !important;
}
body.theme-dark .res-message.res-success *,
body.theme-dark .res-message.res-success strong {
color: #12351c !important;
}
body.theme-dark .res-message.res-error {
background: #ffe1e1 !important;
border: 1px solid #ef9a9a !important;
color: #5f1111 !important;
}
body.theme-dark .res-message.res-error *,
body.theme-dark .res-message.res-error strong {
color: #5f1111 !important;
}
body.theme-dark .res-message code {
background: rgba(0, 0, 0, .08) !important;
color: inherit !important;
border: 1px solid rgba(0, 0, 0, .12) !important;
}
/* ----------------------------------------------------------------------------
16.9 - Badges, pastilles et code en mode sombre
---------------------------------------------------------------------------- */
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .pilllink {
background: #181818 !important;
border-color: #303030 !important;
color: #eeeeee !important;
}
body.theme-dark .badge-gray {
background: rgba(255, 255, 255, .10) !important;
color: #e5e7eb !important;
}
body.theme-dark .badge-green {
background: rgba(34, 197, 94, .18) !important;
color: #bbf7d0 !important;
}
body.theme-dark .badge-orange {
background: rgba(249, 115, 22, .18) !important;
color: #fed7aa !important;
}
body.theme-dark .badge-red {
background: rgba(239, 68, 68, .18) !important;
color: #fecaca !important;
}
body.theme-dark code,
body.theme-dark .help-wrap code {
background: #181818 !important;
color: #eeeeee !important;
border: 1px solid #303030 !important;
}
/* Si un code est placé dans un message clair, il doit hériter de la couleur. */
body.theme-dark .res-message code {
background: rgba(0, 0, 0, .08) !important;
color: inherit !important;
border-color: rgba(0, 0, 0, .12) !important;
}
/* ----------------------------------------------------------------------------
16.10 - Calendrier en mode sombre
---------------------------------------------------------------------------- */
body.theme-dark .res-calendar {
background: #101010 !important;
border-color: #2a2a2a !important;
}
body.theme-dark .res-calendar-weekday {
color: #b8b8b8 !important;
}
body.theme-dark .res-calendar-day-disabled {
color: #666666 !important;
}
body.theme-dark .res-calendar-day-enabled {
background: rgba(34, 197, 94, .18) !important;
color: #e9ffe9 !important;
border-color: rgba(34, 197, 94, .45) !important;
}
body.theme-dark .res-calendar-day-enabled:hover {
background: rgba(34, 197, 94, .28) !important;
}
body.theme-dark .res-calendar-day-selected {
background: #395359 !important;
color: #ffffff !important;
border-color: #56828c !important;
}
/* ----------------------------------------------------------------------------
16.11 - Tableaux et pagination en mode sombre
---------------------------------------------------------------------------- */
body.theme-dark .res-table-wrapper {
background: #101010 !important;
border: 1px solid #242424 !important;
border-radius: 14px;
}
body.theme-dark .res-table {
background: transparent !important;
color: #eeeeee !important;
}
body.theme-dark .res-table th {
background: #181818 !important;
color: #eeeeee !important;
border-color: #303030 !important;
}
body.theme-dark .res-table td {
color: #d8d8d8 !important;
border-color: #303030 !important;
}
body.theme-dark .res-table tbody tr {
background: #101010 !important;
}
body.theme-dark .res-table tbody tr:nth-child(even) {
background: #151515 !important;
}
body.theme-dark .res-table tbody tr:hover {
background: #1d1d1d !important;
}
body.theme-dark .res-pagination a,
body.theme-dark .res-page {
background: #181818 !important;
border: 1px solid #303030 !important;
color: #eeeeee !important;
}
body.theme-dark .res-pagination a:hover,
body.theme-dark .res-page:hover {
background: #222222 !important;
}
body.theme-dark .res-page-active {
background: #395359 !important;
color: #ffffff !important;
}
/* ----------------------------------------------------------------------------
16.12 - KPI et statistiques en mode sombre
---------------------------------------------------------------------------- */
body.theme-dark .kpi {
background: #151515 !important;
border-color: #292929 !important;
}
body.theme-dark .kpi-label {
color: #b8b8b8 !important;
}
body.theme-dark .kpi-val {
color: #eeeeee !important;
}
/* Couleurs KPI adaptées au fond noir. */
body.theme-dark .kpi-bookings {
background: rgba(86, 130, 140, .18) !important;
border-color: rgba(86, 130, 140, .35) !important;
}
body.theme-dark .kpi-people {
background: rgba(34, 197, 94, .14) !important;
border-color: rgba(34, 197, 94, .30) !important;
}
body.theme-dark .kpi-capacity {
background: rgba(168, 85, 247, .13) !important;
border-color: rgba(168, 85, 247, .28) !important;
}
body.theme-dark .kpi-remaining {
background: rgba(249, 115, 22, .14) !important;
border-color: rgba(249, 115, 22, .30) !important;
}
body.theme-dark .kpi-appointments {
background: rgba(234, 179, 8, .13) !important;
border-color: rgba(234, 179, 8, .28) !important;
}
body.theme-dark .kpi-danger {
background: rgba(239, 68, 68, .15) !important;
border-color: rgba(239, 68, 68, .32) !important;
}
body.theme-dark .cards-nav {
background: #181818 !important;
color: #eeeeee !important;
border-color: #303030 !important;
}
body.theme-dark .cards-track::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .16);
}
/* ----------------------------------------------------------------------------
16.13 - Tables d'aide en mode sombre
---------------------------------------------------------------------------- */
body.theme-dark .help-table th {
background: #181818 !important;
color: #eeeeee !important;
}
body.theme-dark .help-table th,
body.theme-dark .help-table td {
border-color: #303030 !important;
}
/* ============================================================================
17 - RESPONSIVE
============================================================================ */
@media (min-width: 1200px) {
.cards-track .card {
width: 420px;
}
}
@media (max-width: 980px) {
.grid-2,
.grid-3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.two {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.form-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.res-container {
margin: 1rem;
padding: 1rem;
}
.res-layout {
flex-direction: column;
}
.res-table th,
.res-table td {
font-size: 0.8rem;
}
.res-nav-inner {
height: auto;
padding: 10px 1.5rem;
flex-wrap: wrap;
}
.res-nav-list {
width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
}
.res-band-inner {
flex-direction: column;
align-items: flex-start;
}
.res-band-sub {
text-align: left;
}
}
@media (max-width: 720px) {
.row {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.res-nav {
margin: 12px;
padding: 10px 0;
}
.res-hero,
.res-band {
margin-left: 12px;
margin-right: 12px;
}
.res-nav-link,
.res-nav-link-logo {
padding: 7px 10px;
font-size: .88rem;
}
.cards-carousel {
gap: 6px;
}
.cards-nav {
width: 34px;
height: 34px;
}
.kpis {
grid-template-columns: 1fr;
}
}