:root {
  --violet: #6a11cb;
  --bleu: #2575fc;
  --jaune: #ffc107;
  --sombre: #16123a;
  --degrade: linear-gradient(120deg, #6a11cb, #2575fc);
  --ombre: 0 6px 20px rgba(22, 18, 58, .10);
}

body {
  background: #f6f7fb;
  color: #23213d;
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; }

.fond-degrade,
.barre-navigation,
.banniere { background: var(--degrade); color: #fff; }

.barre-navigation .nav-link.active { font-weight: 600; border-bottom: 2px solid var(--jaune); }

.logo,
.stat-icone {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .2);
  color: var(--jaune);
}

.logo-image { background: none; object-fit: contain; }

.avatar { border-radius: 50%; object-fit: cover; }

.recherche { position: relative; flex: 0 1 240px; }

.suggestions {
  position: absolute;
  z-index: 1080;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--ombre);
  max-height: 60vh;
  overflow-y: auto;
  padding: .25rem;
}

.suggestions { color: #23213d; }
.suggestions a { display: block; padding: .5rem .7rem; border-radius: 6px; color: #23213d; }
.suggestions a:hover { background: #eef2ff; text-decoration: none; }
.groupe { font-size: .7rem; text-transform: uppercase; color: #8b90a8; padding: .5rem .7rem .25rem; }
.suggestion-titre { font-weight: 600; font-size: .9rem; }
.suggestion-extrait,
.vide,
.restant,
.chat-meta,
.stat-libelle { font-size: .8rem; color: #6c757d; }

.banniere { padding: 4rem 0; position: relative; overflow: hidden; }
.banniere-bulle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.banniere-bulle.b1 { width: 240px; height: 240px; top: -60px; right: -40px; }
.banniere-bulle.b2 { width: 150px; height: 150px; bottom: -30px; left: -50px; }
.banniere-bulle.b3 { width: 90px; height: 90px; top: 50px; left: 25%; }

.section-page { padding-block: 3rem; }
.titre-section { font-weight: 700; border-bottom: 3px solid var(--jaune); display: inline-block; padding-bottom: .3rem; }

.encart,
.carte,
.stat,
.message,
.tableau-admin { background: #fff; border-radius: 12px; box-shadow: var(--ombre); }

.encart, .stat { padding: 1.25rem; }
.carte, .tableau-admin { overflow: hidden; height: 100%; border: 0; }
.carte:hover { box-shadow: 0 10px 28px rgba(22, 18, 58, .16); }

.carte-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dfe3f3; }
.carte-image img { width: 100%; height: 100%; object-fit: cover; }
.etiquettes { position: absolute; top: .5rem; left: .5rem; display: flex; gap: .3rem; }
.prix { position: absolute; bottom: .5rem; right: .5rem; background: rgba(22, 18, 58, .88); color: #fff; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; }

.visuel { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #dfe3f3; }

.etoiles { color: var(--jaune); }
.stat-valeur { font-size: 1.8rem; font-weight: 700; }
.stat-icone { background: var(--degrade); color: #fff; }

.statut-ouverte { background: #198754 !important; }
.statut-maintenance { background: #fd7e14 !important; }
.statut-fermee { background: #6c757d !important; }

.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; }
.creneau input { position: absolute; opacity: 0; }
.creneau label { display: block; text-align: center; cursor: pointer; border: 2px solid #dde1f0; border-radius: 10px; padding: .6rem .3rem; background: #fff; }
.creneau input:checked + label { border-color: var(--violet); background: #f2ebff; }
.creneau input:disabled + label { opacity: .45; cursor: not-allowed; }
.heure { font-weight: 700; display: block; }

.zone-signature { border: 2px dashed #b9c0da; border-radius: 12px; background: #fff; position: relative; touch-action: none; }
.zone-signature canvas { width: 100%; height: 190px; display: block; touch-action: none; }
.ligne-signature { position: absolute; left: 8%; right: 8%; bottom: 34px; border-bottom: 1px solid #d5daea; }
.consigne { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: .78rem; color: #9aa0bb; }
.signee .consigne, .signee .ligne-signature { display: none; }

.sujet-ligne:hover { background: #f3f5ff; }
.message-auteur { background: #f6f7fb; }

.chat { height: 420px; overflow-y: auto; background: #f6f7fb; border-radius: 10px; padding: 1rem; }
.chat-message { max-width: 78%; margin-bottom: .7rem; }
.bulle { background: #fff; border-radius: 12px; padding: .5rem .85rem; box-shadow: var(--ombre); font-size: .92rem; }
.moi { margin-left: auto; }
.moi .bulle { background: var(--degrade); color: #fff; }

.barre-vote { height: 10px; border-radius: 6px; background: #e6e9f5; overflow: hidden; }
.barre-vote span { display: block; height: 100%; background: var(--degrade); }

.galerie { columns: 3 260px; column-gap: 1rem; }
.galerie figure { break-inside: avoid; margin: 0 0 1rem; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--ombre); }
.galerie img { width: 100%; display: block; }
.galerie figcaption { padding: .7rem .85rem; }

.medaille { font-size: 1.4rem; }
.medaille.or { color: #f4c430; }
.medaille.argent { color: #b6bcc8; }
.medaille.bronze { color: #cd7f32; }

.corps-admin { background: #eef0f7; }
.menu-lateral { background: var(--sombre); color: #cfd3e6; padding: 1rem .8rem; }

@media (min-width: 992px) {
  nav.menu-lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16.6666667%;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1030;
  }
  .corps-admin main { margin-left: 16.6666667%; }
}
.menu-lateral .nav-link { color: #b7bcd6; border-radius: 8px; padding: .55rem .8rem; display: flex; align-items: center; gap: .65rem; font-size: .93rem; }
.menu-lateral .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.menu-lateral .nav-link.active { background: var(--degrade); color: #fff; border: 0; }
.groupe-titre { margin: 1rem 0 .25rem; }

.tableau-admin table { margin-bottom: 0; }
.tableau-admin thead th { background: #f6f7fb; font-size: .78rem; text-transform: uppercase; color: #6c757d; }

.graphique { width: 100%; }
.barre { cursor: pointer; }
.barre:hover { opacity: .78; }
.legende { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .82rem; }
.legende span { display: inline-flex; align-items: center; gap: .35rem; }
.legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.pied-page { background: var(--sombre); color: #e8eaf6; }
.pied-page a { color: #b7bcd6; }
.pied-page a:hover { color: #fff; }

.retour-haut { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; width: 46px; height: 46px; }

.page-erreur { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.code-erreur { font-size: 6rem; font-weight: 900; line-height: 1; color: var(--violet); }

@media (min-width: 768px) and (max-width: 1199.98px) {
  .creneau label { min-height: 74px; }
  .form-control, .form-select, .btn { min-height: 46px; }
  .zone-signature canvas { height: 240px; }
}

@media (max-width: 575.98px) {
  .banniere { padding: 2.5rem 0; }
  .galerie { columns: 1; }
  .recherche { flex: 1 1 100%; }
}