@charset "UTF-8";
/* ============================================================
   Aadprox — Espace Franchisé
   Feuille de style commune à toutes les pages.
   Le CSS propre à une page vit dans assets/pages/<page>/<page>.scss
   ============================================================ */
/* ============================================================
   Charte Aadprox — jetons de design
   ============================================================ */
:root {
  --ink: #1A1114; /* noir nuancé pourpre */
  --cream: #F8F5F7; /* fond principal, teinté aubergine */
  --paper: #FFFFFF; /* cartes et surfaces */
  --forest: #371538; /* aubergine — couleur primaire */
  --moss: #5A2B5D; /* aubergine clair — variante */
  --gold: #E01C5C; /* magenta — accent principal */
  --gold-lt: #F04780; /* magenta clair — hover/accents */
  --bordeaux: #A01443; /* magenta sombre — alertes/danger */
  --stone: #7A6F76; /* texte secondaire */
  --line: #EAE2E7; /* bordures et séparateurs */
  --muted: #A89FA4; /* texte tertiaire */
}

/* Équivalents Sass, pratiques pour les calculs (mix, rgba…). */
/* Points de rupture */
/* ============================================================
   Aadprox — Espace Franchisé
   Feuille de style commune à toutes les pages.
   Le CSS propre à une page vit dans assets/pages/<page>/<page>.scss
   ============================================================ */
/* ============================================================
   Base — reset, typographie, utilitaires d'animation
   ============================================================ */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
}

.font-mono {
  font-family: "JetBrains Mono", monospace;
}

/* Grain léger posé sur les grands aplats sombres (colonne de login). */
.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  animation: fadeUp 0.5s ease-out both;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

input:focus,
button:focus {
  outline: none;
}

input::placeholder {
  color: var(--muted);
}

/* Les icônes Lucide s'alignent sur le texte qui les entoure. */
.icon {
  flex: none;
  display: block;
}

.is-hidden {
  display: none !important;
}

/* L'attribut `hidden` doit primer sur les `display` des composants
   (.btn est en inline-flex et masquerait sinon la règle de l'UA). */
[hidden] {
  display: none !important;
}

/* Réservé aux lecteurs d'écran. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .pulse-dot {
    animation: none;
  }
}
.d-flex {
  display: flex;
}

.mb-3 {
  margin-bottom: 20px;
}

.mt-3 {
  margin-top: 30px;
}

.z-index-5 {
  z-index: 1000 !important;
}

.h-100 {
  height: 100% !important;
}

.align-center {
  align-items: center;
}

/* ============================================================
   Aadprox — Espace Franchisé
   Feuille de style commune à toutes les pages.
   Le CSS propre à une page vit dans assets/pages/<page>/<page>.scss
   ============================================================ */
/* ============================================================
   Layout applicatif — coquille + barre latérale
   ============================================================ */
.app {
  display: flex;
  min-height: 100vh;
  background: var(--cream);
}
@media (max-width: 900px) {
  .app {
    display: block;
  }
}

.app__main {
  flex: 1;
  min-width: 0;
  padding: 36px 48px;
  overflow-x: hidden;
}
@media (max-width: 900px) {
  .app__main {
    padding: 24px 20px;
  }
}

/* ----- Barre latérale ----- */
.sidebar {
  width: 260px;
  flex: none;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}
@media (max-width: 900px) {
  .sidebar {
    position: sticky;
    height: auto;
    width: 100%;
    z-index: 99;
  }
}

.sidebar-admin {
  height: 100% !important;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  padding-left: 4px;
}
@media (max-width: 900px) {
  .sidebar__brand {
    justify-content: space-between;
    margin-bottom: 0;
  }
}

.sidebar__logo {
  height: 38px;
  width: auto;
  border-radius: 4px;
  display: block;
}

.sidebar__brand-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.55;
  font-weight: 500;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-infos {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
@media (max-width: 900px) {
  .sidebar-infos {
    display: none;
  }
}

/* Entrée de premier niveau cliquable (Tableau de bord, Événements). */
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  color: rgba(245, 240, 230, 0.7);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition: all 0.2s;
}
.sidebar__link:hover {
  color: var(--paper);
}
.sidebar__link.is-active {
  background: rgba(184, 130, 58, 0.12);
  border-left-color: var(--gold-lt);
  color: var(--gold-lt);
  font-weight: 500;
}

.sidebar__link-label {
  flex: 1;
}

/* Intitulé de groupe : non cliquable, par choix de conception. */
.sidebar__group {
  margin-top: 2px;
}

.sidebar__group-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  color: rgba(245, 240, 230, 0.5);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  user-select: none;
}
.sidebar__group-label.is-active {
  color: var(--paper);
}

.sidebar__sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 16px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar__sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  color: rgba(245, 240, 230, 0.7);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  transition: all 0.2s;
}
.sidebar__sublink:hover {
  color: var(--paper);
}
.sidebar__sublink.is-active {
  background: rgba(184, 130, 58, 0.12);
  color: var(--gold-lt);
  font-weight: 500;
}

.sidebar__sublink-label {
  flex: 1;
}

.sidebar__notif {
  background: var(--bordeaux);
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__spacer {
  flex: 1;
}

.sidebar__user {
  padding: 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}

.sidebar__user-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  background: var(--gold-lt);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
}

.sidebar__user-meta {
  flex: 1;
  min-width: 0;
}

.sidebar__user-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-email {
  font-size: 11px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  color: rgba(245, 240, 230, 0.6);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  transition: color 0.2s;
}
.sidebar__logout:hover {
  color: var(--paper);
}

.menu-burger {
  color: #7A6F76;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
}
@media (max-width: 900px) {
  .menu-burger {
    display: inline-flex;
    align-items: center;
  }
}

.menu-burger__icone--fermer {
  display: none !important;
}

.sidebar--ouverte .menu-burger__icone--ouvrir {
  display: none;
}

.sidebar--ouverte .menu-burger__icone--fermer {
  display: inline-block !important;
}

@media (max-width: 900px) {
  .app {
    position: relative;
  }
  .sidebar--ouverte {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    max-height: 100vh;
    overflow-y: auto;
  }
  .sidebar--ouverte .sidebar-infos {
    display: flex;
    margin-top: 24px;
  }
}
/* Tableau en grille trop large pour un petit écran : il défile horizontalement
   plutôt que d'être tronqué.
 *
 * Deux points sont contre-intuitifs ici.
 *
 * 1. La largeur minimale ne va pas sur ce conteneur mais sur ses enfants
 *    directs. Posée ici, elle élargit le conteneur lui-même, qui déborde alors
 *    de .panel — lequel est en « overflow: hidden » et le coupe net, sans
 *    barre de défilement. C'est ce conteneur qui doit rester à la largeur
 *    disponible et défiler, son contenu qui doit être large.
 *
 * 2. L'en-tête (.contacts__cols) et les lignes (dans .panel__scroll) sont deux
 *    enfants distincts : ils doivent porter la même largeur minimale, sinon ils
 *    défilent chacun de leur côté et les colonnes se désalignent. .panel__scroll
 *    est d'ailleurs déjà un conteneur de défilement — son « overflow-y: auto »
 *    fait calculer « overflow-x » à « auto » — et c'est lui qui récupérait le
 *    défilement horizontal des lignes, l'en-tête restant immobile.
 *
 * 760px : la grille des contacts mesure 742px en min-content (six colonnes,
 * gouttières et rembourrage compris), arrondi avec un peu de marge. */
.table-layout {
  overflow-x: auto;
}
.table-layout > * {
  min-width: 760px;
}

/* ============================================================
   Aadprox — Espace Franchisé
   Feuille de style commune à toutes les pages.
   Le CSS propre à une page vit dans assets/pages/<page>/<page>.scss
   ============================================================ */
/* ============================================================
   Composants partagés — cartes, KPI, formulaires, modales
   ============================================================ */
/* ----- Carte ----- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px;
  /* La largeur plancher se règle sur la piste de la grille qui l'accueille
     (.dashboard__charts : minmax(440px, 1fr)), jamais ici : une valeur posée
     sur la carte entre en conflit avec la piste dès que celle-ci devient plus
     étroite, et la carte déborde.
     « 0 » est nécessaire, et non superflu : un élément de grille vaut
     « min-width: auto » par défaut, ce qui l'empêche de descendre sous sa
     largeur min-content — un graphique ou un tableau le fait alors déborder. */
  min-width: 0;
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
@media (max-width: 900px) {
  .card__head {
    flex-direction: column;
  }
}

.card__title {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.card__subtitle {
  font-size: 12px;
  color: var(--stone);
  margin-top: 4px;
}

.card__action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Élément flex de .card__head : sans ça, sa largeur min-content fait plancher
     et la barre déborde de la carte une fois celle-ci rétrécie. */
  min-width: 0;
}
@media (max-width: 900px) {
  .card__action {
    justify-content: flex-start;
  }
}

/* ----- KPI ----- */
.kpi {
  --kpi-accent: var(--forest);
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--kpi-accent);
}
.kpi--moss {
  --kpi-accent: var(--moss);
}
.kpi--gold {
  --kpi-accent: var(--gold);
}

.kpi__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
}

.kpi__value {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.kpi__meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--stone);
}

.kpi__evolution {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--moss);
}
.kpi__evolution--down {
  color: var(--bordeaux);
}

.kpi__bar {
  margin-top: 12px;
  height: 4px;
  background: var(--cream);
  border-radius: 2px;
  overflow: hidden;
}

.kpi__bar-fill {
  height: 100%;
  background: var(--kpi-accent);
  transition: width 0.6s;
}

/* ----- Légende de graphique ----- */
.legend {
  display: flex;
  gap: 24px;
  font-size: 12px;
  flex-wrap: wrap;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--stone);
}

.legend__swatch {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--legend-color, var(--ink));
}
.legend__swatch--dashed {
  background: transparent;
  border-top: 2px dashed var(--legend-color, var(--ink));
}

.legend__note {
  color: var(--muted);
  font-style: italic;
  margin-left: auto;
}

/* ----- Bandeau récapitulatif (4 blocs séparés d'un filet) ----- */
.recap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
@media (max-width: 640px) {
  .recap {
    grid-template-columns: repeat(2, 1fr);
  }
}

.recap__item {
  padding: 14px 18px;
  background: var(--paper);
}

.recap__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 6px;
  font-weight: 500;
}

.recap__value {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--recap-color, var(--ink));
}

/* ----- Info-bulle (survol + focus clavier, sans JS) ----- */
.infobulle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  background: none;
  border: none;
  padding: 0;
  color: var(--stone);
}

.infobulle__text {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 260px;
  padding: 12px 14px;
  background: var(--ink);
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
}

.infobulle:hover .infobulle__text,
.infobulle:focus-visible .infobulle__text,
.infobulle:focus-within .infobulle__text {
  opacity: 1;
  visibility: visible;
}

/* ----- Formulaires ----- */
.field + .field {
  margin-top: 20px;
}

.field__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
  font-weight: 500;
}

.field__control {
  position: relative;
}

/* Précision discrète sous un champ : contrainte de saisie, format attendu. */
.field__help {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--stone);
}

.input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(55, 21, 56, 0.1);
}
.input--with-affix {
  padding-right: 46px;
}
.input--sm {
  padding: 12px 14px;
  font-size: 14px;
}

/* Bouton logé dans un champ (œil du mot de passe). */
.input-affix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--stone);
  display: flex;
  padding: 6px;
}

.select {
  padding: 8px 12px;
  font-size: 13px;
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
}

.input-month {
  padding: 7px 10px;
  font-size: 13px;
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  /* Un <input> porte une largeur intrinsèque que « min-width: auto » rend
     incompressible. Le neutraliser lui permet de se réduire dans la barre
     d'outils au lieu de la faire déborder. */
  min-width: 0;
}

/* ----- Boutons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  transition: background 0.2s, transform 0.1s, opacity 0.2s;
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn--block {
  width: 100%;
}
.btn--sm {
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.btn--ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--quiet {
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--stone);
}

/* Lien discret souligné (« Mot de passe oublié ? »). */
.link-quiet {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ----- Message d'erreur de formulaire ----- */
.alert-error {
  margin-top: 18px;
  padding: 10px 14px;
  background: #FCEEF3;
  color: var(--bordeaux);
  font-size: 13px;
  border-left: 3px solid var(--bordeaux);
}

/* ----- Modale ----- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 17, 20, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: var(--paper);
  border-radius: 3px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal__head {
  padding: 24px 28px 6px;
}

.modal__title {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.modal__text {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--stone);
}

.modal__body {
  padding: 16px 28px 4px;
}

.modal__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
  font-weight: 600;
}

.modal__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 18px 28px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  background: var(--cream);
}

/* ----- Messages flash (bandeau en tête de la zone de contenu) ----- */
.flash {
  margin-bottom: 20px;
  padding: 12px 16px;
  font-size: 13px;
  border-left: 3px solid var(--stone);
  background: var(--cream);
  color: var(--ink);
  /* Action réussie, mais un effet de bord a échoué — commande enregistrée
     dont le courriel de confirmation n'est pas parti, par exemple. */
}
.flash--success {
  border-left-color: var(--forest);
}
.flash--error {
  border-left-color: var(--bordeaux);
  background: #FCEEF3;
  color: var(--bordeaux);
}
.flash--warning {
  border-left-color: #E01C5C;
  background: #FFF6E9;
}

.evenement__participer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.evenement__participer:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Boutons « Ajouter à l'agenda » (page Événements et tableau de bord). */
.evenement__agenda {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.evenement__agenda:hover {
  background: var(--cream);
}

/*# sourceMappingURL=app-7d1043473d.output.css.map */