@charset "UTF-8";
:root {
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --green-50: #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --purple-50: #FAF5FF;
  --purple-200: #E9D5FF;
  --purple-600: #9333EA;
  --purple-700: #7E22CE;
  --orange-50: #FFF7ED;
  --orange-600: #EA580C;
  --slate-900: #0F172A;
  --sidebar-bg: #1D2D5C;
  --sidebar-width: 236px;
  --sidebar-text: #C7CEE3;
  --sidebar-text-active: #ffffff;
  --sidebar-accent: #6CC04A;
  --sidebar-hover: #27376A;
  --sidebar-active: rgba(108,192,74,.16);
  --sidebar-border: #2C3C6B;
  --sidebar-label: #6E7BA8;
  --sidebar-icon: #8E9AC2;
  --content-bg: #EEF1F6;
  --content-padding: 2rem;
  --card-bg: #ffffff;
  --card-border: #E2E8F0;
  --card-radius: 12px;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base:1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-5xl: 3rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--neutral-800);
  background: var(--neutral-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--neutral-800);
  line-height: 1.2;
  margin: 0;
}

.h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--neutral-800);
  line-height: 1.3;
  margin: 0;
}

.h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--neutral-800);
  line-height: 1.4;
  margin: 0;
}

.text-body {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--neutral-700);
}

.text-meta {
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

.text-micro {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
  font-weight: 500;
}

.text-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.text-kpi-value {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--neutral-800);
  line-height: 1.1;
}

.text-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
  font-weight: 500;
}

/* Utilitaire global : chiffres tabulaires (alignement des colonnes de chiffres). */
.tnum {
  font-variant-numeric: tabular-nums;
}

.text-muted {
  color: var(--neutral-500);
}

.text-success {
  color: var(--green-600);
}

.text-warning {
  color: var(--amber-700);
}

.text-danger {
  color: var(--red-600);
}

.text-info {
  color: var(--blue-600);
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.animate-fade-in {
  animation: fade-in 300ms ease-out;
}

.animate-slide-right {
  animation: slide-in-right 300ms ease-out;
}

.animate-slide-left {
  animation: slide-in-left 300ms ease-out;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled, .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--blue-600);
  color: white;
}
.btn-primary:hover:not(:disabled) {
  background: var(--blue-700);
  color: white;
}

.btn-outline, .btn-secondary {
  background: white;
  color: var(--neutral-700);
  border-color: var(--neutral-300);
}
.btn-outline:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  background: var(--neutral-50);
  color: var(--neutral-800);
}

.btn-ghost {
  background: transparent;
  color: var(--neutral-600);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--neutral-100);
  color: var(--neutral-800);
}

.btn-destructive, .btn-danger {
  background: var(--red-600);
  color: white;
}
.btn-destructive:hover:not(:disabled), .btn-danger:hover:not(:disabled) {
  background: var(--red-700);
  color: white;
}

.btn-success {
  background: var(--green-600);
  color: white;
}
.btn-success:hover:not(:disabled) {
  background: var(--green-700);
  color: white;
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--text-xs);
}

.btn-lg {
  padding: 12px 24px;
  font-size: var(--text-base);
}

.card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
  padding: var(--space-5);
}

.card-hover {
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.card-hover:hover {
  box-shadow: var(--shadow);
}

.card-elevated {
  box-shadow: var(--shadow-md);
}

.card-accent-left {
  border-left: 4px solid var(--accent-color, var(--blue-600));
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.badge-success {
  background: var(--green-50);
  color: var(--green-700);
}

.badge-warning {
  background: var(--amber-50);
  color: var(--amber-700);
}

.badge-danger {
  background: var(--red-50);
  color: var(--red-700);
}

.badge-info {
  background: var(--blue-50);
  color: var(--blue-700);
}

.badge-neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}

.badge-muted {
  background: var(--neutral-100);
  color: var(--neutral-600);
}

.badge-purple {
  background: var(--purple-50);
  color: var(--purple-700);
}

.badge-primary {
  background: var(--blue-50);
  color: var(--blue-700);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--neutral-700);
  margin-bottom: 4px;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--neutral-800);
  background: white;
  transition: border-color 150ms, box-shadow 150ms;
  font-family: inherit;
}
.form-control:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-control:disabled {
  background: var(--neutral-100);
  color: var(--neutral-500);
  cursor: not-allowed;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--red-600);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   Input date/time/datetime-local + select — wrappers visuels.
   Appliqués par le Stimulus controller `form-enhance` qui injecte
   .date-input-wrapper autour des inputs date/time/datetime-local
   et .select-wrapper autour des <select> natifs.
   On NE touche PAS le style de base de .form-control (il est
   surchargé dans les scopes .fiche / .logistique-view / .resa-list).
   ═══════════════════════════════════════════════════════════════ */
/*
 * Wrapper en `display: block` (pas flex) : l'icône est position:absolute donc
 * hors flow, pas de risque qu'elle pousse l'input.
 * Sélecteur via .enhanced (classe persistante) plutôt que [type="date"] :
 * flatpickr convertit type="date" → type="text" à l'init, ce qui invalide
 * les sélecteurs attribut. La classe .enhanced survit à la conversion.
 */
.date-input-wrapper {
  position: relative !important;
  display: block !important;
}
.date-input-wrapper > input.enhanced,
.date-input-wrapper > input[type=date],
.date-input-wrapper > input[type=time],
.date-input-wrapper > input[type=datetime-local] {
  /* Padding vertical aligné avec les selects (0.5rem = 8px) pour hauteur
   * identique côte à côte dans un form-grid. */
  padding: 0.5rem 2rem 0.5rem 2.75rem !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-family: var(--font-family) !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  transition: border-color 150ms, box-shadow 150ms;
  /* Cache l'icône native webkit (Chrome/Edge/Safari). */
}
.date-input-wrapper > input.enhanced:focus,
.date-input-wrapper > input[type=date]:focus,
.date-input-wrapper > input[type=time]:focus,
.date-input-wrapper > input[type=datetime-local]:focus {
  outline: none !important;
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
.date-input-wrapper > input.enhanced::-webkit-calendar-picker-indicator,
.date-input-wrapper > input[type=date]::-webkit-calendar-picker-indicator,
.date-input-wrapper > input[type=time]::-webkit-calendar-picker-indicator,
.date-input-wrapper > input[type=datetime-local]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.date-input-icon {
  position: absolute !important;
  left: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--blue-600) !important;
  font-size: 13px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.date-input-chevron {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--neutral-400) !important;
  font-size: 10px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/*
 * Selects : override visuel complet avec !important pour garantir un look
 * uniforme à travers toute l'app, quel que soit le scope parent.
 *
 * Trade-off assumé : dans .fiche où les inputs text sont en 12.5px + border 1px,
 * les selects apparaîtront en 14px + border 1.5px (légère dissonance côte à
 * côte). Choix fait pour que les selects soient visuellement identifiés
 * comme éléments interactifs distincts, peu importe la page.
 */
.select-wrapper {
  position: relative !important;
  display: block !important;
}
.select-wrapper > select,
.select-wrapper > select.form-control,
.select-wrapper > select.enhanced {
  width: 100% !important;
  padding: 0.625rem 2.75rem 0.625rem 1rem !important;
  border: 1.5px solid var(--neutral-200) !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-family: var(--font-family) !important;
  color: var(--neutral-900) !important;
  background-color: #fff !important;
  background-image: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
  transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}
.select-wrapper > select:focus,
.select-wrapper > select.form-control:focus,
.select-wrapper > select.enhanced:focus {
  outline: none !important;
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
.select-wrapper > select:hover:not(:disabled):not(:focus),
.select-wrapper > select.form-control:hover:not(:disabled):not(:focus),
.select-wrapper > select.enhanced:hover:not(:disabled):not(:focus) {
  border-color: var(--neutral-300) !important;
  background-color: var(--neutral-50) !important;
}
.select-wrapper > select:disabled,
.select-wrapper > select.form-control:disabled,
.select-wrapper > select.enhanced:disabled {
  background-color: var(--neutral-50) !important;
  color: var(--neutral-400) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}
.select-wrapper > select::-ms-expand,
.select-wrapper > select.form-control::-ms-expand,
.select-wrapper > select.enhanced::-ms-expand {
  display: none !important;
}

.select-chevron {
  position: absolute !important;
  right: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--neutral-400) !important;
  font-size: 10px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: transform 200ms;
}

/* Chevron rotate au focus (proxy pour "select ouvert"). */
.select-wrapper.is-open .select-chevron {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Tom Select — theme aligné sur le design system Enedis.
   Charge via CDN dans base.html.twig, init dans form_enhance_controller.
   Si Tom Select n'est pas chargé (CDN bloqué), le select tombe en
   fallback sur .select-wrapper (styles ci-dessus).
   ═══════════════════════════════════════════════════════════════ */
.ts-wrapper {
  /* Conteneur neutre : reprend exactement la place du <select> natif.
   * display:block + margin:0 + padding:0 + box-sizing:border-box pour
   * neutraliser tout layout ajouté par Tom Select qui pouvait décaler le
   * .ts-control à l'intérieur de la form-field. */
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  /* Chevron custom via FontAwesome sur le wrapper (Tom Select n'en livre pas par défaut). */
  /* Dropdown */
  /* Multi-select : items en pills */
  /* Disabled */
}
.ts-wrapper .ts-control {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Même look que les inputs date : border 1px, fond blanc, hauteur compacte. */
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.5rem 2.75rem 0.5rem 1rem !important;
  font-size: 14px !important;
  font-family: var(--font-family) !important;
  color: var(--neutral-900) !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  min-height: 38px;
  display: flex;
  align-items: center;
  transition: border-color 150ms, box-shadow 150ms;
}
.ts-wrapper .ts-control:hover {
  border-color: var(--neutral-300) !important;
}
.ts-wrapper .ts-control input {
  font-size: 14px !important;
  font-family: var(--font-family) !important;
  color: var(--neutral-900) !important;
}
.ts-wrapper .ts-control .placeholder {
  color: var(--neutral-400) !important;
  font-size: 14px !important;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  outline: none !important;
}
.ts-wrapper:not(.multi)::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 11px;
  pointer-events: none;
  transition: transform 200ms;
  z-index: 1;
}
.ts-wrapper.dropdown-active::after {
  transform: translateY(-50%) rotate(180deg);
}
.ts-wrapper .ts-dropdown {
  border: 1px solid var(--neutral-200) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  font-size: 14px !important;
  font-family: var(--font-family) !important;
  /* Au-dessus des éléments sticky (form-footer z-index:5). */
  z-index: 100 !important;
}
.ts-wrapper .ts-dropdown .ts-dropdown-content {
  padding: 4px !important;
  max-height: 260px !important;
}
.ts-wrapper .ts-dropdown .option {
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: var(--neutral-700) !important;
  cursor: pointer;
  transition: background 100ms;
}
.ts-wrapper .ts-dropdown .option:hover, .ts-wrapper .ts-dropdown .option.active {
  background: var(--blue-50) !important;
  color: var(--neutral-900) !important;
}
.ts-wrapper .ts-dropdown .option.selected {
  background: var(--blue-600) !important;
  color: #fff !important;
}
.ts-wrapper .ts-dropdown .option.selected.active {
  background: var(--blue-700) !important;
  color: #fff !important;
}
.ts-wrapper .ts-dropdown .optgroup-header {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--neutral-500) !important;
  padding: 8px 12px 4px !important;
  background: transparent !important;
}
.ts-wrapper .ts-dropdown .no-results {
  padding: 12px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--neutral-500) !important;
}
.ts-wrapper.multi .ts-control .item {
  background: var(--blue-100) !important;
  color: var(--blue-700) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid var(--blue-200) !important;
}
.ts-wrapper.multi .ts-control .item .remove {
  color: var(--blue-500) !important;
  margin-left: 4px !important;
  border-left: 1px solid var(--blue-200) !important;
  padding-left: 6px !important;
}
.ts-wrapper.multi .ts-control .item .remove:hover {
  color: var(--blue-700) !important;
  background: transparent !important;
}
.ts-wrapper.disabled .ts-control {
  background: var(--neutral-50) !important;
  color: var(--neutral-400) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Flatpickr — override du thème pour matcher le design system.
   Chargé via CDN depuis base.html.twig. !important nécessaire partout
   car flatpickr livre ses styles avec une forte spécificité.
   ═══════════════════════════════════════════════════════════════ */
.flatpickr-calendar {
  border-radius: 12px !important;
  border: 1px solid var(--neutral-200) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
  font-family: var(--font-family) !important;
  overflow: hidden;
}

.flatpickr-months,
.flatpickr-weekdays {
  background: var(--blue-600) !important;
}

.flatpickr-months {
  padding: 8px 0 !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-current-month,
.flatpickr-months .flatpickr-monthDropdown-months,
.flatpickr-months .numInput {
  color: #fff !important;
  fill: #fff !important;
}
.flatpickr-months .flatpickr-current-month {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #fff !important;
  fill: #fff !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #fff !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
}

.flatpickr-weekday {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.flatpickr-day {
  border-radius: 8px !important;
  font-size: 13px !important;
  color: var(--neutral-800);
}
.flatpickr-day:hover {
  background: var(--blue-50) !important;
  border-color: var(--blue-100) !important;
}
.flatpickr-day.today {
  border-color: var(--blue-300) !important;
  color: var(--blue-700) !important;
  font-weight: 700 !important;
}
.flatpickr-day.today:hover {
  background: var(--blue-50) !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
  background: var(--blue-600) !important;
  border-color: var(--blue-600) !important;
  color: #fff !important;
}
.flatpickr-day.inRange {
  background: var(--blue-50) !important;
  border-color: var(--blue-100) !important;
  box-shadow: none !important;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--neutral-300) !important;
}

.flatpickr-time {
  border-top: 1px solid var(--neutral-100) !important;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--neutral-900) !important;
}
.flatpickr-time .flatpickr-am-pm {
  color: var(--blue-600) !important;
  font-weight: 600 !important;
}
.flatpickr-time .arrowUp::after {
  border-bottom-color: var(--blue-600) !important;
}
.flatpickr-time .arrowDown::after {
  border-top-color: var(--blue-600) !important;
}

.form-help {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: 4px;
}

.kpi-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
  font-weight: 500;
}

.kpi-value {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--neutral-800);
  line-height: 1.1;
}

.kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.kpi-icon.kpi-icon-success {
  background: var(--green-50);
  color: var(--green-600);
}
.kpi-icon.kpi-icon-warning {
  background: var(--amber-50);
  color: var(--amber-500);
}
.kpi-icon.kpi-icon-danger {
  background: var(--red-50);
  color: var(--red-600);
}
.kpi-icon.kpi-icon-info {
  background: var(--blue-50);
  color: var(--blue-600);
}
.kpi-icon.kpi-icon-neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.kpi-icon.kpi-icon-purple {
  background: var(--purple-50);
  color: var(--purple-600);
}

.skeleton {
  background: var(--neutral-200);
  border-radius: var(--radius-md);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton.h-4 {
  height: 16px;
}

.skeleton.h-6 {
  height: 24px;
}

.skeleton.h-8 {
  height: 32px;
}

.skeleton.w-24 {
  width: 96px;
}

.skeleton.w-32 {
  width: 128px;
}

.skeleton.w-full {
  width: 100%;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-state-icon {
  font-size: 48px;
  color: var(--neutral-300);
}

.empty-state-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--neutral-700);
}

.empty-state-description {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  max-width: 480px;
}

.alert, .flash {
  display: flex;
  gap: 12px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  align-items: center;
  font-size: var(--text-sm);
}

.alert-success, .flash-success {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
}

.alert-warning, .flash-warning {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-700);
}

.alert-danger, .flash-error, .alert-error {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-700);
}

.alert-info, .flash-info {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

.flash {
  margin-bottom: var(--space-4);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--neutral-200);
}
.table th, .table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  font-size: var(--text-sm);
}
.table th {
  background: var(--neutral-50);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--neutral-600);
  letter-spacing: 0.05em;
}
.table tr:last-child td {
  border-bottom: 0;
}
.table tbody tr:hover {
  background: var(--neutral-50);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}
.page-header .page-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--neutral-800);
  margin: 0;
}
.page-header .page-subtitle {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin-top: var(--space-1);
}
.page-header .page-actions {
  display: flex;
  gap: var(--space-2);
}

.trajet-preconise-card {
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.trajet-preconise-card .trajet-preconise-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  color: var(--blue-700);
}
.trajet-preconise-card .trajet-preconise-header h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}
.trajet-preconise-card .trajet-preconise-header i {
  font-size: 16px;
}

.trajet-preconise-subtitle {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin: 0 0 var(--space-3);
}

.trajet-preconise-item {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--neutral-300);
  background: var(--neutral-50);
  margin-bottom: var(--space-2);
}
.trajet-preconise-item:last-child {
  margin-bottom: 0;
}
.trajet-preconise-item.trajet-blue {
  border-left-color: var(--blue-600);
  background: var(--blue-50);
}
.trajet-preconise-item.trajet-purple {
  border-left-color: var(--purple-600);
  background: var(--purple-50);
}
.trajet-preconise-item.trajet-amber {
  border-left-color: var(--amber-500);
  background: var(--amber-50);
}

.trajet-preconise-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.trajet-preconise-item-head i {
  font-size: 14px;
  color: var(--neutral-700);
}
.trajet-preconise-item-head .trajet-preconise-mode {
  font-weight: 600;
  font-size: var(--text-sm);
}

.trajet-preconise-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--blue-600);
  color: white;
}

.trajet-preconise-route {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--neutral-800);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.trajet-preconise-route i {
  color: var(--neutral-400);
  font-size: 11px;
}

.trajet-preconise-meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--neutral-600);
}
.trajet-preconise-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.trajet-preconise-meta i {
  font-size: 11px;
}

.trajet-preconise-comment {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--neutral-600);
  font-style: italic;
}

.trajet-preconise-alt-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin: var(--space-3) 0 var(--space-2);
}

.trajet-preconise-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--red-50);
  color: var(--red-700);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  margin: var(--space-2) 0;
}
.trajet-preconise-warning i {
  font-size: 12px;
}

.trajet-preconise-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--neutral-50);
  color: var(--neutral-600);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-style: italic;
}
.trajet-preconise-empty i {
  color: var(--neutral-400);
}

.navette-card {
  padding: var(--space-4);
}

.navette-suggestion-card {
  padding: var(--space-3);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}

.taxi-card {
  border-left: 4px solid var(--amber-500);
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.taxi-card.confirme {
  border-left-color: var(--green-500);
}

.taxi-card.annule {
  border-left-color: var(--neutral-300);
  opacity: 0.6;
}

.taxi-passager-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--neutral-100);
}

.taxi-cost-badge {
  background: var(--amber-50);
  color: var(--amber-700);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.taxi-warning {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: var(--amber-700);
  font-size: var(--text-sm);
}

.taxi-sans-transfert {
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nuitees-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-200);
}

.nuitee-card {
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nuitee-card.nuitee-suggere {
  border-left: 4px solid var(--amber-400);
  background: var(--amber-50);
}

.nuitee-card.nuitee-confirme {
  border-left: 4px solid var(--green-500);
  background: var(--green-50);
}

.nuitee-card.nuitee-refuse {
  border-left: 4px solid var(--neutral-300);
  opacity: 0.6;
}

.cal-container {
  background: white;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--neutral-50);
}

.cal-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--neutral-600);
}

.cal-nav-btn:hover {
  background: var(--neutral-50);
}

.cal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-900);
}

.cal-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-day {
  min-height: 80px;
  padding: 6px 8px;
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  cursor: pointer;
  transition: background 150ms;
  position: relative;
}

.cal-day:hover {
  background: var(--neutral-50);
}

.cal-day.selected {
  background: var(--blue-50);
  outline: 2px solid var(--blue-600);
  outline-offset: -2px;
}

.cal-day-number {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 4px;
}

.cal-day-other-month {
  background: var(--neutral-50);
}

.cal-day-other-month .cal-day-number {
  color: var(--neutral-300);
}

.cal-day-today .cal-day-number {
  background: var(--blue-600);
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-contingent-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.cal-chip-green {
  background: var(--green-50);
  color: var(--green-700);
}

.cal-chip-amber {
  background: var(--amber-50);
  color: var(--amber-700);
}

.cal-chip-red {
  background: var(--red-50);
  color: var(--red-700);
}

.cal-chip-empty {
  background: var(--neutral-100);
  color: var(--neutral-500);
}

.cal-price {
  font-size: 10px;
  color: var(--neutral-500);
  margin-top: 2px;
}

.cal-panel-massif {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  background: white;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  z-index: 200;
  padding: 1.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 300ms ease-out;
}

.cal-panel-massif.is-open {
  transform: translateX(0);
}

.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-modal-box {
  background: white;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--card-border);
}

.cal-modal-header h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.cal-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--neutral-500);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-modal-close:hover {
  background: var(--neutral-100);
}

.cal-modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cal-modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cal-day-weekend {
  background: var(--neutral-50);
}

.cal-day-weekend .cal-day-number {
  color: var(--neutral-500);
}

.facturation-total-row {
  font-weight: 700;
  background: var(--neutral-100) !important;
  border-top: 2px solid var(--neutral-300);
}

.facturation-nuitee-veille {
  background: var(--amber-50) !important;
}

.facturation-kpi-total {
  grid-column: span 2;
  background: var(--blue-600);
  color: white;
}

.facturation-kpi-total .kpi-value,
.facturation-kpi-total .kpi-label {
  color: white;
}

.facturation-kpi-total .kpi-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.pagination-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.pagination-btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-600);
  text-decoration: none;
  border: 1px solid var(--card-border);
  background: white;
  padding: 0 10px;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.pagination-btn:hover {
  background: var(--neutral-50);
  color: var(--neutral-900);
  border-color: var(--neutral-300);
}

.pagination-btn.active {
  background: var(--blue-600);
  color: white;
  border-color: var(--blue-600);
  font-weight: 600;
}

.pagination-ellipsis {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-400);
  font-size: 13px;
}

/* ==================== ANNULATION / REMPLACEMENT ==================== */
.annulation-card {
  background: white;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

.annulation-penalite {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.annulation-penalite.gratuite {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-800);
}
.annulation-penalite.partielle {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-800);
}
.annulation-penalite.totale {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-800);
}

.optimisation-card {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--card-radius);
  padding: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.optimisation-suggestion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: white;
  border-radius: var(--radius-md);
  margin-top: 0.75rem;
  border: 1px solid var(--blue-100);
}

.optimisation-suggestion-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.optimisation-chiffres {
  background: var(--neutral-50);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  margin: 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.optimisation-ligne {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--neutral-600);
}
.optimisation-ligne.total {
  padding-top: 6px;
  border-top: 1px solid var(--neutral-200);
  margin-top: 4px;
}

.optimisation-hotels {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--blue-50);
  border-radius: var(--radius-md);
  font-size: 12px;
}
.optimisation-hotels > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.optimisation-hotels small {
  font-size: 11px;
  color: var(--neutral-500);
}

.text-green {
  color: var(--green-600);
}

.text-amber {
  color: var(--amber-700);
}

.text-red {
  color: var(--red-600);
}

/* ==================== COMMISSIONS ==================== */
.commission-preview {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--blue-700);
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.commission-detail {
  background: var(--neutral-50);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  font-size: 13px;
}

.commission-ligne {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: var(--neutral-600);
}
.commission-ligne.total {
  padding-top: 6px;
  border-top: 1px solid var(--neutral-200);
  margin-top: 4px;
  color: var(--neutral-900);
  font-weight: 600;
}

.input-with-suffix {
  display: flex;
  align-items: stretch;
}
.input-with-suffix .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.input-with-suffix .input-suffix {
  padding: 0.5rem 0.75rem;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-300);
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  font-size: 13px;
  color: var(--neutral-600);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* ==================== FORM SECTIONS (inline edit) ==================== */
.form-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-section {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--card-border);
}
.form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.form-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.form-section h4 i {
  color: var(--neutral-400);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.form-sticky-footer {
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid var(--card-border);
  padding: 1rem 0;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  z-index: 10;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.toggle-label input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ==================== PHOTO UPLOAD (MULTI) ==================== */
.photo-upload-zone {
  border: 2px dashed var(--neutral-200);
  border-radius: var(--card-radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 150ms ease;
  background: var(--neutral-50);
}
.photo-upload-zone:hover {
  border-color: var(--blue-600);
  background: var(--blue-50);
}

.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.photo-preview-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--neutral-50);
}
.photo-preview-item img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}
.photo-preview-item .photo-preview-name {
  font-size: 10px;
  color: var(--neutral-600);
  padding: 4px 6px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-preview-item .photo-preview-size {
  font-size: 10px;
  color: var(--neutral-400);
  padding: 0 6px 4px;
  display: block;
}

.reservation-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.bulk-toolbar {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--neutral-900);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full, 999px);
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  font-size: 13px;
  display: none;
}
.bulk-toolbar.is-visible {
  display: flex;
}
.bulk-toolbar .form-control {
  background: white;
  color: var(--neutral-900);
}
.bulk-toolbar .btn-danger {
  background: var(--red-600);
  color: white;
  border: 0;
}
.bulk-toolbar .btn-danger:hover {
  background: var(--red-700);
}

/* ==================== WEEK PICKER (shared) ==================== */
.week-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--neutral-200);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.week-picker:hover {
  border-color: var(--blue-200);
  background: var(--blue-50);
}
.week-picker:focus-within {
  border-color: var(--blue-600);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.week-picker > i {
  color: var(--blue-600);
  font-size: 12px;
}
.week-picker > input[type=week] {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-800);
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  padding: 0;
  min-width: 96px;
}
.week-picker > input[type=week]::-webkit-calendar-picker-indicator {
  color: transparent;
  opacity: 0;
  cursor: pointer;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.layout-dashboard {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  background: var(--content-bg);
  transition: grid-template-columns 200ms ease;
}
.layout-dashboard[data-sidebar=icons] {
  --sidebar-width: 60px;
}

.layout-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--neutral-200);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.layout-sidebar::-webkit-scrollbar {
  width: 6px;
}
.layout-sidebar::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}

.sidebar-logo {
  padding: 18px 30px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  display: block;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}
.sidebar-logo .sidebar-logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.sidebar-logo .sidebar-logo-mark {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.sidebar-logo .sidebar-logo-text {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
}
.sidebar-logo .sidebar-logo-text span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--sidebar-label);
  letter-spacing: 0.04em;
  text-transform: none;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
}

.sidebar-section {
  padding: 0;
  margin-bottom: 4px;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sidebar-label);
  padding: 14px 10px 6px;
  display: block;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 120ms, color 120ms;
  margin-bottom: 1px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.sidebar-link .sidebar-link-icon {
  width: 18px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--sidebar-icon);
}
.sidebar-link .sidebar-link-badge {
  margin-left: auto;
  background: var(--sidebar-accent);
  color: #0E2A12;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}
.sidebar-link:hover .sidebar-link-icon {
  color: var(--sidebar-text-active);
}
.sidebar-link.active {
  position: relative;
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
  font-weight: 700;
}
.sidebar-link.active .sidebar-link-icon {
  color: var(--sidebar-accent);
}
.sidebar-link.active .sidebar-link-badge {
  background: var(--sidebar-accent);
  color: #0E2A12;
}
.sidebar-link.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-accent);
}

.sidebar-divider {
  height: 1px;
  background: var(--neutral-100);
  margin: 8px 10px;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 9px;
  background: var(--sidebar-hover);
  transition: background 120ms;
  text-decoration: none;
}
.sidebar-user:hover {
  background: #2F3F73;
}
.sidebar-user.is-active {
  background: #2F3F73;
}
.sidebar-user .sidebar-cog {
  color: var(--sidebar-label);
  font-size: 13px;
  margin-left: auto;
  transition: color 120ms;
}
.sidebar-user:hover .sidebar-cog {
  color: #fff;
}

.sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sidebar-accent);
  color: #0E2A12;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.sidebar-avatar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: none;
}

.sidebar-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-top: 4px;
  border-radius: 7px;
  color: var(--neutral-500);
  font-size: 12px;
  text-decoration: none;
  transition: color 120ms, background 120ms;
}
.sidebar-logout-btn:hover {
  color: var(--red-700);
  background: var(--red-50);
}

.sidebar-logo-mark {
  display: none;
}

[data-sidebar=icons] .sidebar-logo {
  padding: 14px 0;
  justify-content: center;
}
[data-sidebar=icons] .sidebar-logo .sidebar-logo-img {
  display: none;
}
[data-sidebar=icons] .sidebar-logo .sidebar-logo-mark {
  display: block;
  margin: 0 auto;
}
[data-sidebar=icons] .sidebar-section {
  padding: 0 6px;
}
[data-sidebar=icons] .sidebar-section-label {
  display: none;
}
[data-sidebar=icons] .sidebar-link {
  justify-content: center;
  gap: 0;
  padding: 8px 0;
  font-size: 0;
  white-space: nowrap;
}
[data-sidebar=icons] .sidebar-link > span:not(.sidebar-link-icon) {
  display: none;
}
[data-sidebar=icons] .sidebar-link .sidebar-link-icon {
  width: auto;
  font-size: 14px;
}
[data-sidebar=icons] .sidebar-divider {
  margin: 6px 10px;
}
[data-sidebar=icons] .sidebar-footer {
  padding: 6px 4px;
}
[data-sidebar=icons] .sidebar-user {
  justify-content: center;
  padding: 6px 0;
}
[data-sidebar=icons] .sidebar-user .sidebar-user-info,
[data-sidebar=icons] .sidebar-user .sidebar-cog {
  display: none;
}
[data-sidebar=icons] .sidebar-logout-btn {
  justify-content: center;
  padding: 7px 0;
  gap: 0;
  font-size: 0;
}
[data-sidebar=icons] .sidebar-logout-btn > i {
  font-size: 13px;
}
[data-sidebar=icons] .sidebar-logout-btn > span {
  display: none;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.sidebar-user-info .sidebar-user-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-info .sidebar-user-role {
  font-size: 11px;
  color: var(--sidebar-label);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.layout-topbar {
  height: 52px;
  background: white;
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.layout-topbar .topbar-menu-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.layout-topbar .topbar-menu-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.layout-topbar .topbar-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 540px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 8px;
  cursor: pointer;
  color: var(--neutral-500);
  font-size: 13px;
  font-family: inherit;
  transition: all 150ms;
}
.layout-topbar .topbar-search:hover {
  border-color: var(--neutral-200);
  background: white;
}
.layout-topbar .topbar-search i.glass {
  color: var(--neutral-400);
  font-size: 13px;
  flex-shrink: 0;
}
.layout-topbar .topbar-search .text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.layout-topbar .topbar-search .kbd {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--neutral-500);
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: 5px;
  padding: 2px 6px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 0 var(--neutral-200);
  flex-shrink: 0;
  font-family: inherit;
}
.layout-topbar .topbar-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.layout-topbar .topbar-ico {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid var(--neutral-200);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-600);
  position: relative;
  flex-shrink: 0;
  text-decoration: none;
  font-size: 13px;
  transition: all 120ms;
}
.layout-topbar .topbar-ico:hover {
  border-color: var(--neutral-300);
  color: var(--neutral-900);
}
.layout-topbar .topbar-ico .dot {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-600);
  border: 1.5px solid white;
}
.layout-topbar .topbar-cta {
  --enedis-blue: #1432FA;
  --enedis-blue-deep: #0F22B8;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 16px 0 6px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 10px -2px rgba(20, 50, 250, 0.4), 0 0 0 1px rgba(20, 50, 250, 0.18);
  transition: transform 140ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.layout-topbar .topbar-cta .topbar-cta-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.layout-topbar .topbar-cta .topbar-cta-label {
  line-height: 1;
}
.layout-topbar .topbar-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 18px -4px rgba(20, 50, 250, 0.45), 0 0 0 1px rgba(20, 50, 250, 0.28);
  transform: translateY(-1px);
}
.layout-topbar .topbar-cta:active {
  transform: translateY(0);
  filter: brightness(0.97);
}
.layout-topbar .topbar-cta.is-active {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--enedis-blue), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
@media (max-width: 880px) {
  .layout-topbar .topbar-cta {
    padding: 0 6px;
  }
  .layout-topbar .topbar-cta .topbar-cta-label {
    display: none;
  }
}
.layout-topbar .topbar-role {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 7px;
  border: 1px solid var(--neutral-200);
  background: white;
  cursor: default;
  font-size: 12px;
  color: var(--neutral-700);
  flex-shrink: 0;
  white-space: nowrap;
}
.layout-topbar .topbar-role .topbar-role-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.layout-topbar .topbar-role .topbar-role-label {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .layout-topbar .topbar-role .topbar-role-label {
    display: none;
  }
  .layout-topbar .topbar-search .text {
    font-size: 12px;
  }
}

.layout-content {
  flex: 1;
  padding: var(--content-padding);
  width: 100%;
}

.settings-back {
  position: fixed;
  inset: 0;
  background: rgba(13, 16, 27, 0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  padding: 40px;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}
.settings-back.is-open {
  display: flex;
}

.settings-modal {
  width: min(900px, 100%);
  max-height: calc(100vh - 80px);
  background: white;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.settings-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.settings-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  flex: 1;
}
.settings-head button.settings-close {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 14px;
}
.settings-head button.settings-close:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.settings-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.settings-section {
  margin-bottom: 24px;
}
.settings-section:last-child {
  margin-bottom: 0;
}
.settings-section h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 760px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.settings-card {
  padding: 14px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-card:hover {
  border-color: var(--neutral-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.settings-card .settings-card-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.settings-card .settings-card-ic.ic-blue {
  background: var(--blue-50);
  color: var(--blue-700);
}
.settings-card .settings-card-ic.ic-amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.settings-card .settings-card-ic.ic-green {
  background: var(--green-50);
  color: var(--green-700);
}
.settings-card .settings-card-ic.ic-red {
  background: var(--red-50);
  color: var(--red-700);
}
.settings-card .settings-card-ic.ic-purple {
  background: var(--purple-50);
  color: var(--purple-700);
}
.settings-card .settings-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}
.settings-card .settings-card-desc {
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}

.cmdk-back {
  position: fixed;
  inset: 0;
  background: rgba(13, 16, 27, 0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
.cmdk-back.is-open {
  display: flex;
}

.cmdk {
  width: min(620px, 100vw - 40px);
  background: white;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cmdk-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-100);
}
.cmdk-input i {
  color: var(--neutral-400);
  font-size: 14px;
}
.cmdk-input input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  color: var(--neutral-900);
  background: transparent;
}
.cmdk-input .cmdk-esc {
  font-size: 10.5px;
  color: var(--neutral-400);
  padding: 2px 6px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 4px;
  font-family: inherit;
}

.cmdk-list {
  max-height: 55vh;
  overflow-y: auto;
  padding: 6px 0;
}

.cmdk-group-label {
  padding: 8px 18px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--neutral-400);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
  color: var(--neutral-700);
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.cmdk-item:hover, .cmdk-item.is-selected {
  background: var(--neutral-50);
  color: var(--neutral-900);
}
.cmdk-item i.ic {
  width: 16px;
  color: var(--neutral-400);
  font-size: 13px;
  flex-shrink: 0;
}
.cmdk-item .meta {
  color: var(--neutral-400);
  font-size: 11.5px;
  margin-left: auto;
}

.cmdk-empty {
  padding: 30px 18px;
  text-align: center;
  color: var(--neutral-500);
  font-size: 13px;
}

.cmdk-foot {
  padding: 8px 18px;
  border-top: 1px solid var(--neutral-100);
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--neutral-500);
}
.cmdk-foot kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
}

@media (max-width: 1024px) {
  .layout-dashboard {
    grid-template-columns: 1fr;
  }
  .layout-sidebar {
    display: none;
  }
  .layout-sidebar.is-open {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: var(--sidebar-width);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  }
  .layout-topbar .topbar-menu-btn {
    display: flex;
  }
}
.layout-public {
  min-height: 100vh;
  background: white;
  display: grid;
  grid-template-rows: 64px auto 1fr;
}

.public-header {
  height: 64px;
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
}
.public-header .public-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  color: var(--blue-600);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}
.public-header .public-brand .public-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--blue-600);
}
.public-header .public-brand .public-brand-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.public-header .public-user {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--neutral-600);
}
.public-header .public-user strong {
  color: var(--neutral-800);
  font-weight: 600;
  margin-right: var(--space-1);
}

/* ==================== PUBLIC HEADER — USER DROPDOWN ==================== */
.public-user-menu {
  position: relative;
}

.public-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  background: white;
  cursor: pointer;
  transition: all 150ms ease;
  font-family: inherit;
}
.public-user-trigger:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-300);
}
.public-user-trigger.is-open {
  background: var(--neutral-50);
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.public-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-600);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.public-user-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.public-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.public-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
  line-height: 1;
}

.public-user-role {
  font-size: 11px;
  color: var(--neutral-500);
  line-height: 1;
}

.public-user-chevron {
  font-size: 10px;
  color: var(--neutral-400);
  transition: transform 200ms ease;
  margin-left: 2px;
}

.public-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
}

.dropdown-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}

.dropdown-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--blue-600);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.dropdown-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.dropdown-user-details {
  flex: 1;
  min-width: 0;
}

.dropdown-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-user-role {
  margin-bottom: 4px;
}

.dropdown-user-email {
  font-size: 11px;
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-user-phone {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dropdown-divider {
  height: 1px;
  background: var(--neutral-100);
  margin: 0;
}

.dropdown-links,
.dropdown-footer {
  padding: 6px;
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
  text-decoration: none;
  transition: background 100ms ease, color 100ms ease;
}
.dropdown-link i {
  width: 16px;
  text-align: center;
  color: var(--neutral-400);
  font-size: 13px;
}
.dropdown-link:hover {
  background: var(--neutral-50);
  color: var(--neutral-900);
}
.dropdown-link:hover i {
  color: var(--neutral-600);
}

.dropdown-link-danger {
  color: var(--red-600);
}
.dropdown-link-danger i {
  color: var(--red-200);
}
.dropdown-link-danger:hover {
  background: var(--red-50);
  color: var(--red-700);
}
.dropdown-link-danger:hover i {
  color: var(--red-600);
}

.badge-sm {
  font-size: 10px;
  padding: 2px 6px;
}

.public-stepper-bar {
  border-bottom: 1px solid var(--neutral-200);
  padding: var(--space-4) var(--space-6);
  background: white;
}

.public-content {
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
  padding: var(--space-8) var(--space-6) 96px;
  overflow-y: auto;
  min-height: 0;
}

.public-content-full {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: none;
  overflow: hidden;
}

.public-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--neutral-200);
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  gap: var(--space-3);
}
.public-sticky-bar .public-sticky-left {
  color: var(--neutral-500);
  font-size: var(--text-sm);
}
.public-sticky-bar .public-sticky-right {
  display: flex;
  gap: var(--space-2);
}

.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.25rem;
  box-shadow: var(--card-shadow);
  transition: box-shadow 200ms, transform 200ms;
}
.kpi-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  margin-bottom: 0.5rem;
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.kpi-sub {
  font-size: 12px;
  color: var(--neutral-500);
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 0.75rem;
}

.kpi-icon-blue {
  background: #EFF6FF;
  color: #2563EB;
}

.kpi-icon-green {
  background: #F0FDF4;
  color: #16A34A;
}

.kpi-icon-amber {
  background: #FFFBEB;
  color: #D97706;
}

.kpi-icon-red {
  background: #FEF2F2;
  color: #DC2626;
}

.kpi-icon-purple {
  background: #FAF5FF;
  color: #7C3AED;
}

.kpi-trend-up {
  color: #16A34A;
  font-size: 11px;
  font-weight: 600;
}

.kpi-trend-down {
  color: #DC2626;
  font-size: 11px;
  font-weight: 600;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.content-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.content-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content-card-header .content-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
}

.content-card-body {
  padding: 1.25rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  padding: 0.625rem 1rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--card-border);
}
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--neutral-100);
  color: var(--neutral-700);
  vertical-align: middle;
}
.data-table tr:last-child td {
  border-bottom: none;
}
.data-table tr:hover td {
  background: var(--neutral-50);
}

.page-header {
  margin-bottom: 1.5rem;
}
.page-header .page-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.3px;
  margin: 0;
}
.page-header .page-header-sub {
  font-size: 13px;
  color: var(--neutral-500);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ==================== PROFIL UTILISATEUR ==================== */
.profil-header-card {
  background: white;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--card-shadow);
  flex-wrap: wrap;
}

.profil-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.profil-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

.profil-avatar-initiales {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--blue-600);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
}

.profil-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms;
  cursor: pointer;
  margin: 0;
}
.profil-avatar-overlay:hover {
  opacity: 1;
}

.profil-avatar-upload {
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.profil-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.3px;
  margin: 0 0 6px;
}

/* ═══════════════════════════════════════════════════════════════
   QUICK ACTIONS — Dashboard Handicall (création rapide navette/taxi)
   ═══════════════════════════════════════════════════════════════ */
.quick-actions-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) {
  .quick-actions-strip {
    grid-template-columns: 1fr;
  }
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  cursor: pointer;
  transition: all 150ms;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.quick-action-btn:hover {
  border-color: var(--blue-200);
  box-shadow: var(--card-shadow);
  transform: translateY(-1px);
}

.quick-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.quick-action-icon.blue {
  background: var(--blue-100);
  color: var(--blue-600);
}
.quick-action-icon.amber {
  background: var(--amber-100);
  color: #D97706;
}

.quick-action-text {
  flex: 1;
}
.quick-action-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
}
.quick-action-text span {
  font-size: 12px;
  color: var(--neutral-500);
}

.quick-action-plus {
  color: var(--neutral-300);
  font-size: 16px;
}

/* ─── Modals ───────────────────────────────────────────────────── */
.quick-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
  animation: quick-modal-fade 150ms ease-out;
}

@keyframes quick-modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.quick-modal-box {
  background: #fff;
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: quick-modal-slide 200ms ease-out;
}

@keyframes quick-modal-slide {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.quick-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border);
}
.quick-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--neutral-900);
}
.quick-modal-header p {
  font-size: 12px;
  color: var(--neutral-500);
  margin: 0;
}

.quick-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.quick-modal-icon.blue {
  background: var(--blue-100);
  color: var(--blue-600);
}
.quick-modal-icon.amber {
  background: var(--amber-100);
  color: #D97706;
}

.quick-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--neutral-100);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-500);
  flex-shrink: 0;
  transition: all 120ms;
}
.quick-modal-close:hover {
  background: var(--neutral-200);
  color: var(--neutral-700);
}

.quick-modal-form {
  padding: 1.5rem;
}

.quick-modal-form .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .quick-modal-form .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.quick-modal-form .form-group {
  margin: 0;
}
.quick-modal-form .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 4px;
}
.quick-modal-form .form-group .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--neutral-900);
  background: #fff;
  transition: all 150ms;
}
.quick-modal-form .form-group .form-control:focus {
  outline: none;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.quick-modal-form .form-group textarea.form-control {
  resize: vertical;
  min-height: 60px;
}
.quick-modal-form .form-group .form-help {
  display: block;
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 4px;
}

.quick-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--card-border);
}

.dash-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #F4F6FA;
  border: 1px solid #DEE3EC;
  border-radius: 9px;
  padding: 6px 11px;
  height: 38px;
  color: #1D2D5C;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
.dash-filter > i {
  color: #6CC04A;
  font-size: 14px;
}
.dash-filter .dash-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #8A92A3;
  text-transform: uppercase;
}
.dash-filter .dash-filter-select {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  color: #1D2D5C;
  cursor: pointer;
  outline: none;
  max-width: 220px;
  font-family: inherit;
}
.dash-filter--date > i {
  color: #6E7790;
}

.dash {
  width: 100%;
}

.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 26px 16px;
  color: #9AA1B2;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.dash-empty i {
  font-size: 22px;
  color: #C4CAD6;
}
.dash-empty--sm {
  padding: 16px 12px;
  font-size: 12.5px;
  flex-direction: row;
  gap: 8px;
}
.dash-empty--sm i {
  font-size: 15px;
}

.layout-topbar {
  height: 60px;
  gap: 12px;
  padding: 0 24px;
}
.layout-topbar .tb-burger {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #E2E6EE;
  background: #fff;
  color: #5A6273;
  cursor: pointer;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-topbar .tb-burger:hover {
  background: #F4F6FA;
}
.layout-topbar .tb-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  flex: 0 1 auto;
  min-width: 0;
  background: #F4F6FA;
  border: 1px solid #DEE3EC;
  border-radius: 9px;
  padding: 0 8px 0 11px;
  overflow: hidden;
}
.layout-topbar .tb-filter > i {
  color: #6CC04A;
  font-size: 15px;
  flex: 0 0 auto;
}
.layout-topbar .tb-filter .tb-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #8A92A3;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.layout-topbar .tb-filter .tb-filter-select {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  color: #1D2D5C;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-topbar .tb-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: #F7F8FB;
  border: 1px solid #E2E6EE;
  border-radius: 9px;
  color: #A7AEBD;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.layout-topbar .tb-search i {
  color: #A7AEBD;
  font-size: 14px;
  flex: 0 0 auto;
}
.layout-topbar .tb-search span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-topbar .tb-search:hover {
  border-color: #6CC04A;
  background: #fff;
}
.layout-topbar .tb-date {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  flex: 0 0 auto;
  background: #F4F6FA;
  border: 1px solid #E2E6EE;
  border-radius: 9px;
  color: #1D2D5C;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
.layout-topbar .tb-date i {
  color: #6E7790;
  font-size: 14px;
}
.layout-topbar .tb-bell {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  flex: 0 0 auto;
  border: 1px solid #E2E6EE;
  background: #fff;
  color: #5A6273;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-topbar .tb-bell:hover {
  background: #F4F6FA;
}
.layout-topbar .tb-bell .tb-bell-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6CC04A;
  border: 2px solid #fff;
}
.layout-topbar .tb-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  flex: 0 0 auto;
  background: #6CC04A;
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(108, 192, 74, 0.4);
}
.layout-topbar .tb-cta:hover {
  background: #7BCD59;
}

.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 14px 10px 7px;
}

.sidebar-link {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 11px;
  border-radius: 8px;
}

.sidebar-nav {
  padding: 6px 12px 12px;
}

@media (max-width: 720px) {
  .layout-topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 14px;
    gap: 8px;
  }
  .layout-topbar .tb-search {
    order: 5;
    max-width: none;
    flex-basis: 100%;
  }
}
.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dash-h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #1D2D5C;
  letter-spacing: -0.02em;
}

.dash-sub {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: #7A8298;
  font-weight: 600;
}

.dash-headstats {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
}

.dash-headstat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #E2E6EE;
  border-radius: 9px;
  padding: 8px 13px;
}
.dash-headstat .n {
  font-size: 20px;
  font-weight: 800;
  color: #1D2D5C;
  line-height: 1;
}
.dash-headstat .l {
  font-size: 12px;
  color: #7A8298;
  font-weight: 600;
  line-height: 1.1;
}

.dash-export {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #1D2D5C;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 9px;
  padding: 9px 14px;
  text-decoration: none;
}
.dash-export:hover {
  background: #27396E;
}

.dash-band {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 2px 13px;
}

.dash-band-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dash-band-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1D2D5C;
}

.dash-band-rule {
  flex: 1;
  height: 1px;
  background: #E0E4EC;
}

.dash-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-bottom: 28px;
}

.dash-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

@media (max-width: 1100px) {
  .dash-grid-3 {
    grid-template-columns: 1fr;
  }
  .dash-grid-2 {
    grid-template-columns: 1fr;
  }
}
.dash-card {
  background: #fff;
  border: 1px solid #E4E8F0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dash-card-head {
  padding: 17px 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #1D2D5C;
}

.dash-card-body {
  padding: 14px 18px 4px;
}

.dash-card-foot {
  margin-top: auto;
  border-top: 1px solid #EDF0F5;
  display: flex;
}

.dash-foot-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #1D2D5C;
  text-decoration: none;
}
.dash-foot-link i {
  color: #6CC04A;
  font-size: 12px;
}
.dash-foot-link:hover {
  background: #F6F8FB;
}

.dash-chip {
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.dash-chip--neutral {
  color: #7A8298;
  background: #F2F4F8;
}
.dash-chip--amber {
  color: #A85D00;
  background: #FCEFDC;
  font-weight: 800;
}

.dash-donut {
  position: relative;
  width: 120px;
  height: 120px;
  flex: 0 0 auto;
}

.dash-donut-c {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dash-donut-c .big {
  font-size: 32px;
  font-weight: 800;
  color: #1D2D5C;
  line-height: 1;
}
.dash-donut-c .sm {
  font-size: 11px;
  font-weight: 700;
  color: #7A8298;
  margin-top: 2px;
}

.dash-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
}
.dash-pill i {
  font-size: 14px;
}
.dash-pill b {
  font-weight: 800;
}
.dash-pill--green {
  background: #F2FAEF;
  border: 1px solid #DCEFD2;
  color: #2E5320;
}
.dash-pill--green i {
  color: #4FA235;
}
.dash-pill--grey {
  background: #F5F7FB;
  border: 1px solid #E4E8F0;
  color: #324063;
}
.dash-pill--grey i {
  color: #1D2D5C;
}

.dash-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}
.dash-kv span {
  color: #5A6273;
  font-weight: 600;
}
.dash-kv b {
  font-weight: 800;
  color: #1D2D5C;
}

.dash-kv-rule {
  height: 1px;
  background: #F0F2F6;
}

.dash-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7A8298;
}
.dash-mini-head > span:last-child {
  font-size: 11.5px;
  font-weight: 700;
}

.dash-trow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
}
.dash-trow .t {
  font-size: 13px;
  font-weight: 800;
  color: #1D2D5C;
  width: 42px;
  flex: 0 0 auto;
}
.dash-trow .d {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: #444C60;
  min-width: 0;
}
.dash-trow--grey {
  background: #F7F8FB;
  border: 1px solid #E9ECF3;
}
.dash-trow--amber {
  background: #FFFBF4;
  border: 1px solid #F4E4C7;
}

.dash-tag {
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}
.dash-tag--green {
  color: #2E5320;
  background: #E7F5E0;
}
.dash-tag--amber {
  color: #A85D00;
  background: #FBE9CC;
}
.dash-tag--blue {
  color: #34508C;
  background: #E3EAF6;
}
.dash-tag--grey {
  color: #5A6273;
  background: #EDF0F5;
}

.dash-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #5A6273;
}
.dash-legend .sq {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.dash-legend .ln {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.dash-table th {
  font-weight: 700;
  padding: 5px 6px;
  color: #7A8298;
  text-align: center;
}
.dash-table th span {
  display: block;
  font-weight: 600;
  color: #9AA1B2;
}
.dash-table th.hl {
  color: #1D2D5C;
  font-weight: 800;
}
.dash-table td {
  text-align: center;
  font-weight: 600;
  color: #5A6273;
  padding: 6px;
  border-top: 1px solid #F0F2F6;
}
.dash-table td.hl {
  font-weight: 800;
  color: #1D2D5C;
}
.dash-table td.s {
  font-weight: 700;
  color: #324063;
}
.dash-table td.z {
  color: #C4CAD6;
}
.dash-table td.rl {
  text-align: left;
  font-weight: 700;
  color: #5A6273;
}
.dash-table td.rl--strong {
  font-weight: 800;
  color: #1D2D5C;
}
.dash-table tr:first-child td {
  border-top: none;
}

.dash-formule {
  display: flex;
  align-items: center;
  gap: 9px;
}
.dash-formule .sq {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.dash-formule .t {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #324063;
}
.dash-formule b {
  font-size: 15px;
  font-weight: 800;
  color: #1D2D5C;
}

.dash-alert {
  margin: 12px 18px 0;
  padding: 11px 13px;
  background: #FFFBF4;
  border: 1px solid #F4E4C7;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.dash-alert > i {
  color: #A85D00;
  font-size: 17px;
}
.dash-alert .t {
  font-size: 13px;
  font-weight: 800;
  color: #7A4A00;
}
.dash-alert .s {
  font-size: 11.5px;
  font-weight: 600;
  color: #A87C3A;
}

.dash-btn-dark {
  background: #1D2D5C;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.dash-btn-dark:hover {
  background: #27396E;
}

.dash-tasks {
  padding: 14px 20px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 700px) {
  .dash-tasks {
    grid-template-columns: 1fr;
  }
}
.dash-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #F7F8FB;
  border: 1px solid #E9ECF3;
}
.dash-task .cb {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #C4CAD6;
  flex: 0 0 auto;
}
.dash-task .cb--amber {
  border-color: #D9A441;
}
.dash-task .t {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #324063;
}
.dash-task--amber {
  background: #FFFBF4;
  border-color: #F4E4C7;
}

.occ-view {
  --occ-navy: #1D2D5C;
  --occ-green: #6CC04A;
  --occ-card-border: #E4E8F0;
  --occ-ink: #2A3140;
}
.occ-view .occ-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.occ-view .occ-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: #9AA1B2;
  margin-bottom: 4px;
}
.occ-view .occ-h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--occ-navy);
  letter-spacing: -0.02em;
}
.occ-view .occ-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.occ-view .occ-daterange {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #E2E6EE;
  border-radius: 9px;
  height: 38px;
  padding: 0 14px;
  color: var(--occ-navy);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
.occ-view .occ-daterange i {
  color: #6E7790;
}
.occ-view .occ-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #DEE3EC;
  border-radius: 9px;
  background: #fff;
  color: #324063;
  text-decoration: none;
  transition: background 0.12s ease;
}
.occ-view .occ-navbtn:hover {
  background: #F4F6FA;
}
.occ-view .occ-card {
  background: #fff;
  border: 1px solid var(--occ-card-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05);
  padding: 18px 22px;
}
.occ-view .occ-card-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--occ-navy);
}
.occ-view .occ-muted {
  color: #9AA1B2;
  font-size: 13px;
}
.occ-view .occ-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.occ-view .occ-kpi {
  background: #fff;
  border: 1px solid var(--occ-card-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05);
  padding: 16px 18px;
}
.occ-view .occ-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.occ-view .occ-kpi-label {
  font-size: 12px;
  font-weight: 700;
  color: #7A8298;
}
.occ-view .occ-kpi-delta {
  font-size: 11px;
  font-weight: 800;
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
}
.occ-view .occ-kpi-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--occ-navy);
  margin-top: 8px;
  line-height: 1;
}
.occ-view .occ-kpi-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #9AA1B2;
  margin-top: 5px;
}
.occ-view .occ-chart-card {
  margin-bottom: 18px;
}
.occ-view .occ-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.occ-view .occ-legend {
  display: flex;
  gap: 16px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.occ-view .occ-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #5A6273;
}
.occ-view .occ-legend-bar {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--occ-navy);
}
.occ-view .occ-legend-line {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--occ-green);
}
.occ-view .occ-chart-today {
  text-align: right;
}
.occ-view .occ-chart-today-pct {
  font-size: 26px;
  font-weight: 800;
  color: var(--occ-green);
  line-height: 1;
}
.occ-view .occ-chart-today-sub {
  font-size: 11.5px;
  font-weight: 700;
  color: #7A8298;
  margin-top: 3px;
}
.occ-view .occ-chart {
  width: 100%;
  height: auto;
  margin-top: 6px;
}
.occ-view .occ-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: 18px;
}
.occ-view .occ-hotels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.occ-view .occ-hotel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.occ-view .occ-hotel-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #324063;
}
.occ-view .occ-hotel-fig {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--occ-navy);
}
.occ-view .occ-bar {
  height: 12px;
  border-radius: 7px;
  background: #EEF1F6;
  overflow: hidden;
}
.occ-view .occ-bar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.3s ease;
}
.occ-view .occ-table-card {
  overflow-x: auto;
}
.occ-view .occ-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 420px;
}
.occ-view .occ-table th {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #8A92A3;
  padding: 6px 8px;
  text-align: right;
}
.occ-view .occ-table th.occ-th-left {
  text-align: left;
}
.occ-view .occ-table td {
  padding: 8px;
  text-align: right;
  font-weight: 600;
  color: #5A6273;
}
.occ-view .occ-table td.occ-td-left {
  text-align: left;
  font-weight: 700;
  color: #5A6273;
}
.occ-view .occ-table td.occ-td-clients {
  font-weight: 800;
  color: var(--occ-navy);
}
.occ-view .occ-table td.occ-td-rate {
  font-weight: 800;
}
.occ-view .occ-table tbody tr {
  border-top: 1px solid #F0F2F6;
}
.occ-view .occ-table tbody tr.is-today {
  background: #F2FAEF;
}
.occ-view .occ-table tbody tr.is-today td.occ-td-left {
  color: var(--occ-navy);
  font-weight: 800;
}
.occ-view .occ-empty {
  background: #fff;
  border: 1px dashed #D7DDEA;
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  color: #7A8298;
}
.occ-view .occ-empty i {
  font-size: 2rem;
  color: #C3CAD8;
  margin-bottom: 10px;
}
.occ-view .occ-empty p {
  margin: 0 auto;
  max-width: 460px;
  font-size: 13.5px;
  font-weight: 600;
}
@media (max-width: 1100px) {
  .occ-view .occ-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .occ-view .occ-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .occ-view .occ-kpis {
    grid-template-columns: 1fr;
  }
}

.trsp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  background: #6CC04A;
  color: #0E2A12;
  font-weight: 800;
  font-size: 13.5px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(108, 192, 74, 0.4);
  transition: background 0.12s ease;
}
.trsp-cta:hover {
  background: #7BCD59;
}

.trsp-view {
  --trsp-navy: #1D2D5C;
  --trsp-green: #6CC04A;
  --trsp-border: #E4E8F0;
}
.trsp-view .trsp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.trsp-view .trsp-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: #9AA1B2;
  margin-bottom: 4px;
}
.trsp-view .trsp-h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--trsp-navy);
  letter-spacing: -0.02em;
}
.trsp-view .trsp-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trsp-view .trsp-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #E2E6EE;
  border-radius: 9px;
  height: 38px;
  padding: 0 14px;
  color: var(--trsp-navy);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
.trsp-view .trsp-date i {
  color: #6E7790;
}
.trsp-view .trsp-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #DEE3EC;
  border-radius: 9px;
  background: #fff;
  color: #324063;
  text-decoration: none;
}
.trsp-view .trsp-navbtn:hover {
  background: #F4F6FA;
}
.trsp-view .trsp-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.trsp-view .trsp-kpi {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--trsp-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05);
  padding: 15px 18px;
}
.trsp-view .trsp-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 17px;
}
.trsp-view .trsp-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--trsp-navy);
  line-height: 1;
}
.trsp-view .trsp-kpi-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #7A8298;
  margin-top: 4px;
}
.trsp-view .trsp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: 18px;
}
.trsp-view .trsp-card {
  background: #fff;
  border: 1px solid var(--trsp-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05);
  padding: 18px 22px;
}
.trsp-view .trsp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.trsp-view .trsp-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--trsp-navy);
}
.trsp-view .trsp-pill {
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 20px;
  padding: 3px 9px;
}
.trsp-view .trsp-pill-green {
  color: #2E5320;
  background: #E7F5E0;
}
.trsp-view .trsp-pill-amber {
  color: #A85D00;
  background: #FCEFDC;
}
.trsp-view .trsp-muted {
  color: #9AA1B2;
  font-size: 13px;
}
.trsp-view .trsp-timeline {
  display: flex;
  flex-direction: column;
}
.trsp-view .trsp-tl-row {
  display: flex;
  gap: 14px;
}
.trsp-view .trsp-tl-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}
.trsp-view .trsp-tl-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 3px solid;
}
.trsp-view .trsp-tl-line {
  flex: 1;
  width: 2px;
  background: #EAEDF3;
  margin: 2px 0;
  min-height: 14px;
}
.trsp-view .trsp-tl-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 18px;
}
.trsp-view .trsp-tl-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trsp-view .trsp-tl-time {
  font-size: 15px;
  font-weight: 800;
  color: var(--trsp-navy);
  font-variant-numeric: tabular-nums;
}
.trsp-view .trsp-tl-dir {
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 8px;
}
.trsp-view .trsp-tl-route {
  font-size: 13px;
  font-weight: 600;
  color: #444C60;
  margin-top: 4px;
}
.trsp-view .trsp-tl-detail {
  font-size: 11.5px;
  font-weight: 600;
  color: #8A92A3;
  margin-top: 3px;
}
.trsp-view .trsp-tl-detail i {
  margin-right: 3px;
}
.trsp-view .trsp-taxis {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trsp-view .trsp-taxi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid;
  border-radius: 11px;
  text-decoration: none;
  transition: box-shadow 0.12s ease;
}
.trsp-view .trsp-taxi:hover {
  box-shadow: 0 2px 8px rgba(20, 30, 60, 0.08);
}
.trsp-view .trsp-taxi-time {
  width: 46px;
  text-align: center;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--trsp-navy);
  font-variant-numeric: tabular-nums;
}
.trsp-view .trsp-taxi-sep {
  width: 1px;
  align-self: stretch;
  background: var(--trsp-border);
}
.trsp-view .trsp-taxi-main {
  flex: 1;
  min-width: 0;
}
.trsp-view .trsp-taxi-route {
  font-size: 13.5px;
  font-weight: 700;
  color: #324063;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trsp-view .trsp-taxi-who {
  font-size: 11.5px;
  font-weight: 600;
  color: #7A8298;
  margin-top: 2px;
}
.trsp-view .trsp-taxi-btn {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  border: 1px solid;
  border-radius: 7px;
  padding: 5px 10px;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .trsp-view .trsp-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trsp-view .trsp-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .trsp-view .trsp-kpis {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FICHE — Dossier stagiaire + Réservation groupe
   Scope : .fiche. Réutilise tokens et patterns de _reservations /
   _nestor / _logistique (badges, filter-chip, etc.).
   ═══════════════════════════════════════════════════════════════ */
.fiche {
  font-size: 13px;
  /* ── Retour + breadcrumb ──────────────────────────────────── */
  /* ── Identity strip (Fiche Dossier) ───────────────────────── */
  /* ── Grid sidebar 300px + main ────────────────────────────── */
  /* ── Cards internes (sidebar + main blocks) ───────────────── */
  /* Manager block (sidebar contexte) */
  /* ── Trajet préconisé (sidebar) ───────────────────────────── */
  /* ── Quick actions (sidebar) ──────────────────────────────── */
  /* ── Main card (tabs + panels) ────────────────────────────── */
  /* Section headings dans les panels */
  /* ── Status flow (cycle de vie) ───────────────────────────── */
  /* ── Alertes (inline) ─────────────────────────────────────── */
  /* ── Form grid / fields ───────────────────────────────────── */
  /* ── Commission / détail financier ────────────────────────── */
  /* ── Transport cards (navettes disponibles) ───────────────── */
  /* ── Nuitée cards ─────────────────────────────────────────── */
  /* ── Trajet pair (aller / retour) ─────────────────────────── */
  /* ── PAGE HEADER (Fiche Réservation) ──────────────────────── */
  /* ── KPI row (Fiche Reservation) ──────────────────────────── */
  /* ── Grid main / side (Fiche Reservation) ─────────────────── */
  /* ── Hébergement card (heb-grid) ──────────────────────────── */
  /* Policy timeline annulation */
  /* ── Stagiaires table (Fiche Reservation) ─────────────────── */
  /* ── Transport mini (Fiche Reservation side) ──────────────── */
  /* ── Timeline (historique) ────────────────────────────────── */
  /* ── Badge variantes (Fiche) ──────────────────────────────── */
  /* Charge pill (aligné avec _nestor.scss mais local au scope) */
  /* ═════════════════════════════════════════════════════════════
     PROFIL STAGIAIRE (360°) — spécifiques
     ═════════════════════════════════════════════════════════════ */
  /* ── Hero (avatar + identité + KPIs intégrés) ─────────────── */
  /* Hero KPIs row */
  /* ── Grid profil (main / side 340px) ──────────────────────── */
  /* ── Timeline groupée par jour ────────────────────────────── */
  /* ── Historique formations (cards horizontales) ───────────── */
  /* ── Access card (Mon Séjour) ─────────────────────────────── */
  /* ── Contexte rows (sidebar stagiaire) ────────────────────── */
  /* ── Spécificités ─────────────────────────────────────────── */
  /* ── Import PDF billet SNCF (onglet Trajets) ───────────────── */
  /* ── Modal preview billet ──────────────────────────────────── */
  /* ── Modal preview multi-billets (timeline) ──────────────── */
  /* Indicateur visuel sur les champs pré-remplis depuis le PDF */
  /* ── Empty state trajets (2 CTA : PDF vs manuel) ──────────── */
  /* ── Bandeau chaîne (correspondances) ─────────────────────── */
  /* ── Sections aller / retour avec liste de segments ───────── */
  /* Carte de segment */
  /* ── Détail financier repas (panel Statut) ────────────────── */
  /* ── Récap coût repas compact (panel Repas) ───────────────── */
  /* ── Bandeau "Dossier annulé" en tête de fiche ────────────── */
  /* ── Bannière "Taxi requis" (navette indisponible) ──────────── */
  /* ── Danger zone Super Admin (suppression dossier annulé) ──── */
  /* ── Onglet Navettes : récap compteurs en tête ────────────── */
  /* Ligne prestataire / chauffeur sous le trajet d'une navette */
  /* ── Onglet Repas (liste des dîners par soir) ─────────────── */
  /* ── Bandeau capacité du restaurant sélectionné ──────────── */
  /* ── Gestionnaire en charge (onglet contact) ──────────────── */
  /* ── Suggestion transport (navette / taxi / nuitée) ───────── */
  /* ── Renvoyer email "Mon Séjour" ──────────────────────────── */
  /* ── Récap coûts transport (tarif aller + retour) ─────────── */
}
.fiche .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 12px;
  padding-left: 0;
}
.fiche .page-back:hover {
  color: var(--blue-600);
}
.fiche .page-back i {
  font-size: 10px;
}
.fiche .identity {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.fiche .identity-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.fiche .identity-info {
  flex: 1;
  min-width: 0;
}
.fiche .identity-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.3px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fiche .identity-name .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: 0.2px;
}
.fiche .identity-meta {
  margin-top: 6px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-600);
}
.fiche .identity-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fiche .identity-meta i {
  font-size: 11px;
  color: var(--neutral-400);
}
.fiche .identity-meta .nni {
  font-family: var(--font-mono);
  background: var(--neutral-100);
  color: var(--neutral-700);
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
}
.fiche .identity-badges {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fiche .identity-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.fiche .fiche-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1200px) {
  .fiche .fiche-grid {
    grid-template-columns: 1fr;
  }
}
.fiche .fiche-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 72px;
}
@media (max-width: 1200px) {
  .fiche .fiche-side {
    position: static;
  }
}
.fiche .side-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.fiche .card-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--neutral-50);
}
.fiche .card-head i {
  color: var(--neutral-500);
  font-size: 12px;
}
.fiche .card-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-800);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fiche .card-head .head-sub {
  margin-left: auto;
  font-size: 11px;
  color: var(--neutral-500);
  font-weight: 500;
}
.fiche .card-body {
  padding: 14px 16px;
}
.fiche .card-body dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fiche .card-body dl > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fiche .card-body dl > div.row {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}
.fiche .card-body dt {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--neutral-500);
  margin: 0;
}
.fiche .card-body dd {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-800);
  font-weight: 500;
}
.fiche .card-body dd .sub {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
  font-weight: 400;
}
.fiche .card-body dd .sub.mono {
  font-family: var(--font-mono);
}
.fiche .manager {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fiche .manager-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--purple-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.fiche .manager-info {
  flex: 1;
  min-width: 0;
}
.fiche .manager-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-900);
}
.fiche .manager-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.fiche .manager-actions {
  display: flex;
  gap: 4px;
}
.fiche .icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: all 120ms;
}
.fiche .icon-btn:hover {
  border-color: var(--blue-200);
  background: var(--blue-50);
  color: var(--blue-600);
}
.fiche .tp {
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}
.fiche .tp.is-reco {
  border-color: var(--blue-200);
  background: var(--blue-50);
}
.fiche .tp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.fiche .tp-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.fiche .tp-mode {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.fiche .tp-reco-badge {
  margin-left: auto;
  background: var(--blue-600);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.fiche .tp-route {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-700);
  margin-bottom: 6px;
}
.fiche .tp-route i {
  color: var(--neutral-400);
  font-size: 10px;
}
.fiche .tp-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--neutral-600);
  font-variant-numeric: tabular-nums;
}
.fiche .tp-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fiche .tp-meta i {
  color: var(--neutral-400);
  font-size: 10px;
}
.fiche .tp-warning {
  background: var(--amber-50);
  color: var(--amber-700);
  border-left: 3px solid var(--amber-500);
  padding: 7px 10px;
  font-size: 11px;
  border-radius: 6px;
  margin: 8px 0;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.fiche .tp-warning i {
  margin-top: 2px;
}
.fiche .tp-alt-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin: 14px 0 6px;
}
.fiche .quick-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fiche .quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  transition: all 120ms;
  width: 100%;
}
.fiche .quick-action i {
  color: var(--neutral-500);
  font-size: 12px;
  width: 16px;
}
.fiche .quick-action .ka {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--neutral-400);
  background: var(--neutral-100);
  padding: 1px 6px;
  border-radius: 3px;
}
.fiche .quick-action:hover {
  background: var(--blue-50);
  color: var(--blue-700);
}
.fiche .quick-action:hover i {
  color: var(--blue-600);
}
.fiche .main-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.fiche .tabs {
  display: flex;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  padding: 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fiche .tabs::-webkit-scrollbar {
  display: none;
}
.fiche .tab {
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-500);
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid transparent;
  transition: all 120ms;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
}
.fiche .tab:hover {
  color: var(--neutral-800);
}
.fiche .tab.is-active {
  color: var(--blue-700);
  border-bottom-color: var(--blue-600);
  background: #fff;
}
.fiche .tab i {
  font-size: 11px;
}
.fiche .tab .tab-alert {
  background: var(--red-600);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}
.fiche .tab .tab-badge {
  background: var(--neutral-200);
  color: var(--neutral-700);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}
.fiche .tab.is-active .tab-badge {
  background: var(--blue-100);
  color: var(--blue-700);
}
.fiche .tab-panels {
  padding: 20px;
}
.fiche .panel {
  display: none;
}
.fiche .panel.is-active {
  display: block;
}
.fiche .section-h {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-700);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fiche .section-h i {
  color: var(--neutral-500);
  font-size: 12px;
}
.fiche .section-h .count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-500);
  text-transform: none;
  letter-spacing: 0;
}
.fiche .status-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 18px;
  position: relative;
}
@media (max-width: 900px) {
  .fiche .status-flow {
    grid-template-columns: 1fr 1fr;
  }
}
.fiche .status-step {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 10px 12px;
  position: relative;
}
.fiche .status-step.is-done {
  background: var(--green-50);
  border-color: var(--green-200);
}
.fiche .status-step.is-active {
  background: #fff;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.fiche .status-step.is-pending {
  background: #fff;
  border-color: var(--neutral-200);
  opacity: 0.75;
}
.fiche .status-step-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--neutral-500);
}
.fiche .status-step-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.fiche .status-step-value i {
  color: var(--green-600);
  font-size: 11px;
}
.fiche .status-step.is-active .status-step-value i {
  color: var(--blue-600);
}
.fiche .status-step-date {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.fiche .alert {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 14px;
  border-left: 3px solid transparent;
}
.fiche .alert i {
  margin-top: 2px;
  font-size: 13px;
  flex-shrink: 0;
}
.fiche .alert strong {
  font-weight: 700;
}
.fiche .alert.alert-info {
  background: var(--blue-50);
  color: var(--blue-700);
  border-left-color: var(--blue-600);
}
.fiche .alert.alert-warning {
  background: var(--amber-50);
  color: var(--amber-700);
  border-left-color: var(--amber-500);
}
.fiche .alert.alert-danger {
  background: var(--red-50);
  color: var(--red-700);
  border-left-color: var(--red-600);
}
.fiche .alert.alert-success {
  background: var(--green-50);
  color: var(--green-700);
  border-left-color: var(--green-600);
}
.fiche .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 700px) {
  .fiche .form-grid {
    grid-template-columns: 1fr;
  }
}
.fiche .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fiche .form-field.full {
  grid-column: 1/-1;
}
.fiche .form-field label.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
}
.fiche .form-field .form-control {
  padding: 7px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--neutral-900);
  background: #fff;
  transition: all 120ms;
}
.fiche .form-field .form-control:focus {
  outline: none;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.fiche .form-field .form-control:disabled {
  background: var(--neutral-50);
  color: var(--neutral-500);
  cursor: not-allowed;
}
.fiche .form-field .form-control.mono {
  font-family: var(--font-mono);
}
.fiche .form-field textarea.form-control {
  resize: vertical;
  min-height: 68px;
}
.fiche .form-field .form-hint {
  font-size: 10.5px;
  color: var(--neutral-500);
  font-style: italic;
}
.fiche .form-toggle {
  display: flex;
  gap: 4px;
}
.fiche .form-toggle label {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  transition: all 120ms;
}
.fiche .form-toggle label input {
  display: none;
}
.fiche .form-toggle label span {
  font-weight: 500;
  color: var(--neutral-700);
}
.fiche .form-toggle label:has(input:checked) {
  border-color: var(--blue-600);
  background: var(--blue-50);
}
.fiche .form-toggle label:has(input:checked) span {
  color: var(--blue-700);
  font-weight: 600;
}
.fiche .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--neutral-100);
}
.fiche .btn-link {
  background: none;
  border: none;
  color: var(--blue-700);
  text-decoration: underline;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.fiche .commission {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
}
.fiche .commission .commission-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--neutral-700);
  font-variant-numeric: tabular-nums;
}
.fiche .commission .commission-row .highlight {
  color: var(--green-700);
  font-weight: 600;
}
.fiche .commission .commission-row.total {
  border-top: 1px solid var(--neutral-200);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
  color: var(--neutral-900);
}
.fiche .transport-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fiche .transport-card {
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
  transition: all 120ms;
}
.fiche .transport-card:hover {
  border-color: var(--neutral-300);
}
.fiche .transport-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.fiche .transport-sens {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 4px;
}
.fiche .transport-sens.aller {
  background: var(--blue-50);
  color: var(--blue-700);
}
.fiche .transport-sens.retour {
  background: var(--amber-50);
  color: var(--amber-700);
}
.fiche .transport-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
}
.fiche .transport-date {
  font-size: 11.5px;
  color: var(--neutral-500);
}
.fiche .transport-places {
  margin-left: auto;
  font-size: 11px;
  color: var(--green-700);
  font-weight: 600;
}
.fiche .transport-places.low {
  color: var(--amber-700);
}
.fiche .transport-route {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-700);
  margin-bottom: 8px;
}
.fiche .transport-route i {
  color: var(--neutral-400);
  font-size: 10px;
}
.fiche .transport-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--neutral-200);
  flex-wrap: wrap;
}
.fiche .transport-footer .info {
  font-size: 11px;
  color: var(--neutral-500);
}
.fiche .nuitee-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  background: #fff;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.fiche .nuitee-card strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.fiche .nuitee-card .sub {
  color: var(--neutral-600);
}
.fiche .nuitee-card .actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.fiche .nuitee-card.confirme {
  background: var(--green-50);
  border-color: var(--green-200);
}
.fiche .nuitee-card.suggere {
  background: var(--amber-50);
  border-color: var(--amber-200);
}
.fiche .trajet-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .fiche .trajet-pair {
    grid-template-columns: 1fr;
  }
}
.fiche .trajet-col {
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 14px;
  background: var(--neutral-50);
}
.fiche .trajet-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--neutral-700);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .trajet-col h4 i {
  color: var(--blue-600);
}
.fiche .page-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.fiche .page-header-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-600), var(--purple-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.fiche .page-header-info {
  flex: 1;
  min-width: 0;
}
.fiche .page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fiche .page-title .num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 3px 9px;
  border-radius: 5px;
}
.fiche .page-sub {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-500);
}
.fiche .page-sub i {
  font-size: 10px;
  margin-right: 4px;
}
.fiche .page-header-badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fiche .page-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.fiche .kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1200px) {
  .fiche .kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .fiche .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.fiche .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fiche .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.fiche .kpi .kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.fiche .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.fiche .fiche-reserv-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1200px) {
  .fiche .fiche-reserv-grid {
    grid-template-columns: 1fr;
  }
}
.fiche .fiche-reserv-main > section + section {
  margin-top: 18px;
}
.fiche .heb-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
@media (max-width: 900px) {
  .fiche .heb-grid {
    grid-template-columns: 1fr;
  }
}
.fiche .heb-hotel {
  display: flex;
  gap: 14px;
}
.fiche .heb-hotel-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.fiche .heb-hotel-info {
  min-width: 0;
}
.fiche .heb-hotel-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
}
.fiche .heb-hotel-addr {
  font-size: 12px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.fiche .heb-hotel-meta {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--neutral-600);
}
.fiche .heb-hotel-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fiche .heb-hotel-meta i {
  color: var(--amber-500);
  font-size: 10px;
}
.fiche .heb-dates {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fiche .heb-date-col {
  text-align: center;
}
.fiche .heb-date-col .label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--neutral-500);
  margin-bottom: 2px;
}
.fiche .heb-date-col .day {
  font-size: 28px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fiche .heb-date-col .month {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.fiche .heb-date-col .time {
  font-size: 11px;
  color: var(--neutral-700);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.fiche .heb-date-nights .pill {
  background: var(--blue-50);
  color: var(--blue-700);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.fiche .policy {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: 10px;
  color: var(--amber-800);
}
.fiche .policy i {
  color: var(--amber-500);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.fiche .policy-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--amber-800);
}
.fiche .policy-body {
  font-size: 12px;
  color: var(--amber-700);
  margin-top: 2px;
}
.fiche .policy-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.fiche .policy-step {
  background: #fff;
  border: 1px solid var(--amber-200);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--neutral-700);
  opacity: 0.7;
}
.fiche .policy-step .range {
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--amber-700);
}
.fiche .policy-step .fee {
  font-weight: 700;
  color: var(--neutral-900);
  margin-top: 2px;
}
.fiche .policy-step.is-current {
  opacity: 1;
  background: var(--amber-100);
  border-color: var(--amber-500);
  border-width: 2px;
  padding: 5px 9px;
}
.fiche table.stagiaires {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.fiche table.stagiaires thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--card-border);
}
.fiche table.stagiaires tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--neutral-100);
  color: var(--neutral-700);
  vertical-align: middle;
}
.fiche table.stagiaires tbody tr {
  transition: background 100ms;
}
.fiche table.stagiaires tbody tr:hover td {
  background: #FAFBFC;
}
.fiche .person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}
.fiche .person-cell .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fiche .person-info .person-name {
  font-weight: 600;
  color: var(--neutral-900);
}
.fiche .person-info .person-sub {
  font-size: 11px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
}
.fiche .dr-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 4px;
  letter-spacing: 0.3px;
}
.fiche .icon-btns {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.fiche .transport-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: #fff;
}
.fiche .transport-mini > i:first-child {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.fiche .transport-mini > div {
  flex: 1;
  min-width: 0;
}
.fiche .transport-mini .ti {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-900);
}
.fiche .transport-mini .tt {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.fiche .transport-mini .tr {
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-700);
  background: var(--neutral-100);
  padding: 3px 8px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.fiche .timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.fiche .timeline-item {
  display: flex;
  gap: 10px;
  position: relative;
}
.fiche .timeline-item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: -18px;
  width: 2px;
  background: var(--neutral-200);
}
.fiche .timeline-item:last-child::before {
  display: none;
}
.fiche .timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.fiche .timeline-dot.blue {
  background: var(--blue-50);
  color: var(--blue-600);
}
.fiche .timeline-dot.green {
  background: var(--green-50);
  color: var(--green-700);
}
.fiche .timeline-dot.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.fiche .timeline-dot.red {
  background: var(--red-50);
  color: var(--red-600);
}
.fiche .timeline-dot.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.fiche .timeline-dot.neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.fiche .timeline-content {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}
.fiche .timeline-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-900);
}
.fiche .timeline-sub {
  font-size: 11.5px;
  color: var(--neutral-600);
  margin-top: 2px;
  line-height: 1.4;
}
.fiche .timeline-date {
  font-size: 10.5px;
  color: var(--neutral-500);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.fiche .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.fiche .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fiche .badge.no-dot::before {
  display: none;
}
.fiche .badge.b-blue {
  background: var(--blue-50);
  color: var(--blue-700);
}
.fiche .badge.b-green {
  background: var(--green-50);
  color: var(--green-700);
}
.fiche .badge.b-amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.fiche .badge.b-red {
  background: var(--red-50);
  color: var(--red-700);
}
.fiche .badge.b-purple {
  background: var(--purple-50);
  color: var(--purple-700);
}
.fiche .badge.b-neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.fiche .charge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.fiche .charge-pill.c-totale {
  background: var(--green-50);
  color: var(--green-700);
}
.fiche .charge-pill.c-encours {
  background: var(--amber-50);
  color: var(--amber-700);
}
.fiche .charge-pill.c-horsscope {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.fiche .charge-pill.c-na {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.fiche .text-mono {
  font-family: var(--font-mono);
}
.fiche .hero {
  background: linear-gradient(135deg, #fff 0%, var(--blue-50) 100%);
  border: 1px solid var(--blue-100);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.fiche .hero-main {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  flex-wrap: wrap;
}
.fiche .hero-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.fiche .hero-info {
  flex: 1;
  min-width: 0;
}
.fiche .hero-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  letter-spacing: -0.4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fiche .hero-name .nni-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--blue-700);
  background: #fff;
  border: 1px solid var(--blue-100);
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: 0.3px;
}
.fiche .hero-meta {
  margin-top: 8px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-600);
}
.fiche .hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fiche .hero-meta i {
  font-size: 11px;
  color: var(--neutral-400);
}
.fiche .hero-meta a {
  color: var(--neutral-600);
  text-decoration: none;
}
.fiche .hero-meta a:hover {
  color: var(--blue-600);
}
.fiche .hero-badges {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fiche .hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.fiche .hero .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}
@media (max-width: 1100px) {
  .fiche .hero .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.fiche .hero .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fiche .kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.fiche .kpi-icon.blue {
  background: var(--blue-50);
  color: var(--blue-600);
}
.fiche .kpi-icon.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.fiche .kpi-icon.green {
  background: var(--green-50);
  color: var(--green-700);
}
.fiche .kpi-icon.teal {
  background: #CCFBF1;
  color: #0F766E;
}
.fiche .kpi-icon.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.fiche .kpi-info {
  min-width: 0;
  flex: 1;
}
.fiche .hero .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
}
.fiche .hero .kpi .kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.3px;
  line-height: 1.1;
  margin-top: 2px;
}
.fiche .hero .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.fiche .profil-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1200px) {
  .fiche .profil-grid {
    grid-template-columns: 1fr;
  }
}
.fiche .profil-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.fiche .profil-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 72px;
}
@media (max-width: 1200px) {
  .fiche .profil-side {
    position: static;
  }
}
.fiche .tl {
  position: relative;
  padding-left: 8px;
}
.fiche .tl-day {
  position: relative;
  padding: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fiche .tl-day:first-child {
  padding-top: 0;
}
.fiche .tl-day .tl-day-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  background: #fff;
  padding-right: 10px;
}
.fiche .tl-day::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--neutral-200);
}
.fiche .tl-event {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  position: relative;
}
.fiche .tl-event::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: -8px;
  width: 2px;
  background: var(--neutral-200);
}
.fiche .tl-event:last-child::before {
  display: none;
}
.fiche .tl-event:has(+ .tl-day)::before {
  display: none;
}
.fiche .tl-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: var(--blue-50);
  color: var(--blue-600);
}
.fiche .tl-dot.green {
  background: var(--green-50);
  color: var(--green-700);
}
.fiche .tl-dot.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.fiche .tl-dot.red {
  background: var(--red-50);
  color: var(--red-600);
}
.fiche .tl-dot.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.fiche .tl-dot.neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.fiche .tl-content {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.fiche .tl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fiche .tl-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}
.fiche .tl-date {
  font-size: 11px;
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fiche .tl-detail {
  font-size: 12px;
  color: var(--neutral-600);
  margin-top: 3px;
  line-height: 1.5;
}
.fiche .tl-detail .mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--neutral-100);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--neutral-700);
}
.fiche .hist-grid {
  display: grid;
  gap: 10px;
}
.fiche .hist-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: all 150ms;
}
.fiche .hist-card:hover {
  border-color: var(--blue-200);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.fiche .hist-card.current {
  border-color: var(--blue-600);
  background: linear-gradient(90deg, var(--blue-50) 0%, #fff 40%);
}
.fiche .hist-status {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.fiche .hist-status.active {
  background: var(--blue-100);
  color: var(--blue-700);
  animation: hist-pulse 2s ease-in-out infinite;
}
.fiche .hist-status.done {
  background: var(--green-100);
  color: var(--green-700);
}
.fiche .hist-status.cancel {
  background: var(--red-100);
  color: var(--red-700);
}
@keyframes hist-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0);
  }
}
.fiche .hist-info {
  flex: 1;
  min-width: 0;
}
.fiche .hist-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
}
.fiche .hist-meta {
  margin-top: 4px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--neutral-500);
}
.fiche .hist-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fiche .hist-meta i {
  font-size: 10px;
  color: var(--neutral-400);
}
.fiche .hist-meta .code {
  font-family: var(--font-mono);
  background: var(--neutral-100);
  padding: 1px 7px;
  border-radius: 4px;
  color: var(--neutral-700);
}
.fiche .hist-badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fiche .hist-arrow {
  color: var(--neutral-300);
  font-size: 12px;
  flex-shrink: 0;
  transition: color 120ms;
}
.fiche .hist-card:hover .hist-arrow {
  color: var(--blue-600);
}
.fiche .access-card {
  background: linear-gradient(135deg, var(--purple-600), var(--blue-600));
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.15);
}
.fiche .access-head {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.fiche .access-head i {
  font-size: 13px;
}
.fiche .access-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fiche .access-head .pill {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.fiche .access-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fiche .access-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fiche .access-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
.fiche .access-stat-value {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fiche .access-stat-value .sub {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}
.fiche .access-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: #fff;
  color: var(--purple-700);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
  margin-top: 4px;
}
.fiche .access-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.fiche .ctx-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--neutral-100);
}
.fiche .ctx-row:last-child {
  border-bottom: none;
}
.fiche .ctx-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.fiche .ctx-content {
  flex: 1;
  min-width: 0;
}
.fiche .ctx-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--neutral-500);
}
.fiche .ctx-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  margin-top: 2px;
  word-break: break-word;
}
.fiche .ctx-value a {
  color: var(--blue-600);
  text-decoration: none;
}
.fiche .ctx-value a:hover {
  text-decoration: underline;
}
.fiche .ctx-sub {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 1px;
}
.fiche .spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.fiche .spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid;
}
.fiche .spec-item.positive {
  background: var(--green-50);
  border-color: var(--green-200);
}
.fiche .spec-item.warning {
  background: var(--amber-50);
  border-color: var(--amber-200);
}
.fiche .spec-item.negative {
  background: var(--red-50);
  border-color: var(--red-200);
}
.fiche .spec-item.neutral {
  background: var(--neutral-50);
  border-color: var(--neutral-200);
}
.fiche .spec-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.spec-item.positive .fiche .spec-icon {
  color: var(--green-700);
}
.spec-item.warning .fiche .spec-icon {
  color: var(--amber-700);
}
.spec-item.negative .fiche .spec-icon {
  color: var(--red-600);
}
.spec-item.neutral .fiche .spec-icon {
  color: var(--neutral-600);
}
.fiche .spec-content .spec-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--neutral-600);
}
.fiche .spec-content .spec-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  margin-top: 1px;
}
.fiche .cas-particulier {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: 8px;
  color: var(--amber-800);
}
.fiche .cas-particulier i {
  color: var(--amber-600);
  margin-top: 3px;
  flex-shrink: 0;
}
.fiche .cas-particulier strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--amber-800);
}
.fiche .cas-particulier p {
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0;
  color: var(--amber-700);
}
.fiche .billet-import {
  margin-bottom: 18px;
}
.fiche .billet-drop {
  border: 2px dashed var(--blue-200);
  background: linear-gradient(135deg, var(--blue-50), #EEF2FF);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fiche .billet-drop:hover, .fiche .billet-drop.is-drag {
  border-color: var(--blue-600);
  background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
  transform: translateY(-1px);
}
.fiche .billet-drop .billet-drop-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.fiche .billet-drop .billet-drop-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fiche .billet-drop .billet-drop-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
}
.fiche .billet-drop .billet-drop-text span {
  font-size: 12px;
  color: var(--neutral-500);
}
.fiche .billet-drop .billet-drop-cta {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--blue-200);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-700);
  white-space: nowrap;
}
.fiche .billet-drop .billet-drop-cta i {
  margin-right: 5px;
}
.fiche .billet-status {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fiche .billet-status.is-loading {
  background: var(--blue-50);
  color: var(--blue-700);
  border: 1px solid var(--blue-200);
}
.fiche .billet-status.is-success {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
}
.fiche .billet-status.is-error {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid var(--red-200);
}
.fiche .billet-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fiche .billet-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}
.fiche .billet-modal-box {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
}
.fiche .billet-modal-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, var(--blue-50), #EEF2FF);
}
.fiche .billet-modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
}
.fiche .billet-modal-head h3 i {
  color: var(--blue-600);
  margin-right: 6px;
}
.fiche .billet-modal-head span {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fiche .billet-modal-close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--neutral-500);
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.fiche .billet-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--neutral-900);
}
.fiche .billet-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.fiche .billet-modal-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--neutral-100);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--neutral-50);
}
.fiche .bp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.fiche .bp-meta span {
  background: var(--neutral-100);
  color: var(--neutral-800);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.fiche .bp-meta span em {
  font-style: normal;
  color: var(--neutral-500);
  font-weight: 500;
  margin-right: 5px;
  font-family: var(--font-family);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.fiche .bp-errors {
  background: var(--red-50);
  border: 1px solid var(--red-200);
  color: var(--red-700);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 12px;
}
.fiche .bp-errors strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--red-700);
  margin-bottom: 4px;
}
.fiche .bp-errors ul {
  margin: 0;
  padding-left: 20px;
}
.fiche .bp-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.fiche .bp-billet-row {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.fiche .bp-billet-row:hover {
  border-color: var(--blue-200);
}
.fiche .bp-billet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.fiche .bp-billet-info {
  flex: 1;
  min-width: 200px;
}
.fiche .bp-billet-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.fiche .bp-billet-title i {
  color: var(--blue-600);
  font-size: 12px;
}
.fiche .bp-billet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: var(--neutral-500);
}
.fiche .bp-billet-meta .bp-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--neutral-600);
  background: var(--neutral-100);
  padding: 2px 7px;
  border-radius: 5px;
}
.fiche .bp-billet-meta .bp-file i {
  color: var(--red-600);
}
.fiche .bp-billet-meta .mono {
  font-family: var(--font-mono);
  font-size: 11px;
}
.fiche .bp-billet-action {
  flex-shrink: 0;
}
.fiche .bp-radios {
  display: flex;
  gap: 6px;
}
.fiche .bp-radios label {
  cursor: pointer;
}
.fiche .bp-radios label input {
  display: none;
}
.fiche .bp-radios label span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-600);
  background: var(--neutral-50);
  transition: all 0.12s ease;
}
.fiche .bp-radios label span i {
  font-size: 10px;
}
.fiche .bp-radios label input:checked + span {
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  border-color: var(--blue-600);
  color: #fff;
}
.fiche .bp-radios label input:checked + span i {
  color: #fff;
}
.fiche .bp-badge-both {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: linear-gradient(135deg, var(--green-50), var(--blue-50));
  border: 1px solid var(--green-200);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green-700);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fiche .bp-badge-both i {
  color: var(--green-600);
}
.fiche .bp-detection {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--neutral-200);
  font-size: 11px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .bp-detection i {
  color: var(--blue-600);
}
.fiche .bp-summary {
  background: var(--neutral-50);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.fiche .bp-summary-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.fiche .bp-summary-stats .bp-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--neutral-700);
}
.fiche .bp-summary-stats .bp-stat i {
  color: var(--blue-600);
  font-size: 13px;
}
.fiche .bp-summary-stats .bp-stat strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
}
.fiche .bp-summary-stats .bp-stat.muted {
  color: var(--neutral-500);
}
.fiche .bp-summary-stats .bp-stat.muted i {
  color: var(--neutral-400);
}
.fiche .bp-summary-stats .bp-stat.muted strong {
  color: var(--neutral-600);
}
.fiche .bp-warnings {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--amber-200);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fiche .bp-warnings > div {
  font-size: 11.5px;
  color: var(--amber-800);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .bp-warnings > div i {
  color: var(--amber-700);
}
.fiche .bp-sens-choice {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.fiche .bp-sens-choice .bp-sens-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blue-700);
  margin-bottom: 8px;
}
.fiche .bp-sens-choice .bp-sens-options {
  display: flex;
  gap: 8px;
}
.fiche .bp-sens-choice .bp-sens-radio {
  flex: 1;
  cursor: pointer;
}
.fiche .bp-sens-choice .bp-sens-radio input {
  display: none;
}
.fiche .bp-sens-choice .bp-sens-radio span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--blue-200);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-600);
  background: #fff;
  transition: all 0.15s ease;
}
.fiche .bp-sens-choice .bp-sens-radio span i {
  color: var(--blue-600);
}
.fiche .bp-sens-choice .bp-sens-radio input:checked + span {
  border-color: var(--blue-600);
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.4);
}
.fiche .bp-sens-choice .bp-sens-radio input:checked + span i {
  color: #fff;
}
.fiche .bp-sens-choice .bp-sens-hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--blue-700);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .bp-sens-choice .bp-sens-hint i {
  color: var(--blue-600);
}
.fiche .bp-sens-choice .bp-sens-hint strong {
  font-weight: 600;
}
.fiche .bp-sens-choice.bp-sens-both {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--green-50), var(--blue-50));
  border-color: var(--green-200);
}
.fiche .bp-sens-choice.bp-sens-both i {
  color: var(--green-700);
  font-size: 16px;
}
.fiche .bp-sens-choice.bp-sens-both span {
  font-size: 12.5px;
  color: var(--green-800);
}
.fiche .bp-sens-choice.bp-sens-both strong {
  color: var(--green-700);
}
.fiche .bp-legs-single {
  grid-template-columns: 1fr !important;
}
.fiche .bp-warn {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  color: var(--amber-800);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fiche .bp-warn i {
  color: var(--amber-700);
}
.fiche .bp-legs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) {
  .fiche .bp-legs {
    grid-template-columns: 1fr;
  }
}
.fiche .bp-leg {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.fiche .bp-leg h4 {
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--blue-700);
}
.fiche .bp-leg table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fiche .bp-leg table td {
  padding: 4px 0;
  border-bottom: 1px solid var(--neutral-100);
}
.fiche .bp-leg table td:first-child {
  color: var(--neutral-500);
  font-size: 11px;
  padding-right: 10px;
  width: 45%;
}
.fiche .bp-leg table td:last-child {
  color: var(--neutral-900);
}
.fiche .bp-leg table tr:last-child td {
  border-bottom: none;
}
.fiche .bp-leg.bp-leg-empty {
  background: var(--neutral-50);
  border-style: dashed;
}
.fiche .bp-leg.bp-leg-empty h4 {
  color: var(--neutral-400);
}
.fiche .bp-leg.bp-leg-empty p {
  margin: 0;
  font-size: 12px;
  color: var(--neutral-500);
}
.fiche .form-control.is-prefilled {
  background: linear-gradient(135deg, var(--green-50), #fff);
  border-color: var(--green-200) !important;
}
.fiche .trajet-empty {
  background: linear-gradient(135deg, var(--blue-50), #EEF2FF);
  border: 1px solid var(--blue-200);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 18px;
}
.fiche .trajet-empty .te-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.fiche .trajet-empty .te-header .te-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.fiche .trajet-empty .te-header h3 {
  margin: 0 0 3px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
}
.fiche .trajet-empty .te-header p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-600);
}
.fiche .trajet-empty .te-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) {
  .fiche .trajet-empty .te-choices {
    grid-template-columns: 1fr;
  }
}
.fiche .trajet-empty .te-choice {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: var(--font-family);
}
.fiche .trajet-empty .te-choice:hover {
  border-color: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.2);
}
.fiche .trajet-empty .te-choice .te-choice-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.fiche .trajet-empty .te-choice .te-choice-body {
  flex: 1;
  min-width: 0;
}
.fiche .trajet-empty .te-choice .te-choice-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 2px;
}
.fiche .trajet-empty .te-choice .te-choice-sub {
  font-size: 12px;
  color: var(--neutral-500);
}
.fiche .trajet-empty .te-choice .te-choice-badge {
  position: absolute;
  top: -7px;
  right: 12px;
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
}
.fiche .trajet-empty .te-choice.te-choice-pdf .te-choice-icon {
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
}
.fiche .trajet-empty .te-choice.te-choice-manual .te-choice-icon {
  background: var(--neutral-100);
  color: var(--neutral-700);
}
.fiche .trajet-chain {
  background: linear-gradient(135deg, var(--purple-50), #FAF5FF);
  border: 1px solid var(--purple-200);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
}
.fiche .trajet-chain .chain-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--purple-700);
  display: flex;
  align-items: center;
  gap: 5px;
}
.fiche .trajet-chain .chain-label i {
  font-size: 10px;
}
.fiche .trajet-chain .chain-path {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.fiche .trajet-chain .chain-station {
  font-weight: 700;
  color: var(--neutral-900);
  background: #fff;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--purple-200);
}
.fiche .trajet-chain .chain-station.chain-end {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
}
.fiche .trajet-chain .chain-arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--purple-600);
}
.fiche .trajet-chain .chain-arrow small {
  font-size: 9px;
  font-weight: 600;
  color: var(--purple-700);
  font-family: var(--font-mono);
}
.fiche .trajet-chain .chain-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--purple-700);
  background: rgba(147, 51, 234, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: auto;
}
.fiche .trajet-sens {
  margin-bottom: 18px;
}
.fiche .trajet-sens .trajet-sens-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fiche .trajet-sens .trajet-sens-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-800);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fiche .trajet-sens .trajet-sens-head h4 i {
  color: var(--blue-600);
  margin-right: 4px;
}
.fiche .trajet-segments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fiche .trajet-segment {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
}
.fiche .trajet-segment .trajet-segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--neutral-200);
}
.fiche .trajet-segment .trajet-segment-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blue-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fiche .trajet-segment .trajet-segment-label i {
  font-size: 10px;
}
.fiche .trajet-segment .trajet-segment-remove {
  border: none;
  background: transparent;
  color: var(--neutral-400);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s ease;
}
.fiche .trajet-segment .trajet-segment-remove:hover {
  background: var(--red-50);
  color: var(--red-600);
}
.fiche .repas-commission .commission-subtitle {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin: 10px 0 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--neutral-200);
}
.fiche .repas-commission .commission-warn {
  font-size: 11.5px;
  color: var(--amber-800);
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  padding: 7px 10px;
  border-radius: 6px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .repas-commission .commission-warn i {
  color: var(--amber-700);
}
.fiche .commission-grand-total {
  margin-top: 14px;
  background: linear-gradient(135deg, var(--blue-50), #EEF2FF);
  border: 1px solid var(--blue-200);
  padding: 12px 16px;
  border-radius: 10px;
}
.fiche .commission-grand-total .commission-row.total {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-700);
}
.fiche .commission-grand-total .commission-row.total i {
  margin-right: 6px;
}
.fiche .commission-grand-total .commission-row.total > span:last-child {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.fiche .repas-cost-summary {
  margin-top: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--orange-50), #FFF7ED);
  border: 1px solid #FED7AA;
  border-radius: 10px;
  max-width: 380px;
  margin-left: auto;
}
.fiche .repas-cost-summary .rcs-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--orange-600);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .repas-cost-summary .rcs-title i {
  color: var(--orange-600);
}
.fiche .repas-cost-summary .rcs-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--neutral-700);
}
.fiche .repas-cost-summary .rcs-row.rcs-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #FED7AA;
  font-weight: 700;
  color: var(--orange-600);
}
.fiche .repas-cost-summary .rcs-row.rcs-total strong {
  font-size: 16px;
  font-family: var(--font-mono);
  color: var(--orange-600);
  font-variant-numeric: tabular-nums;
}
.fiche .repas-cost-summary .rcs-warn {
  margin-top: 8px;
  font-size: 11px;
  color: var(--amber-800);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .repas-cost-summary .rcs-warn i {
  color: var(--amber-700);
}
.fiche .dossier-cancelled-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--red-50), #FEF2F2);
  border: 1px solid var(--red-200);
  border-left: 4px solid var(--red-600);
  border-radius: 10px;
}
.fiche .dossier-cancelled-banner .dcb-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--red-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.fiche .dossier-cancelled-banner .dcb-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fiche .dossier-cancelled-banner .dcb-body strong {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--red-700);
}
.fiche .dossier-cancelled-banner .dcb-body span {
  font-size: 12.5px;
  color: var(--red-800);
}
.fiche .dossier-taxi-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
  border: 1px solid #FCD34D;
  border-left: 4px solid #F59E0B;
  border-radius: 10px;
}
.fiche .dossier-taxi-banner .dtb-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #F59E0B;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.fiche .dossier-taxi-banner .dtb-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fiche .dossier-taxi-banner .dtb-body strong {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #92400E;
}
.fiche .dossier-taxi-banner .dtb-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fiche .dossier-taxi-banner .dtb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #FCD34D;
  border-radius: 8px;
  font-size: 12.5px;
  color: #78350F;
}
.fiche .dossier-taxi-banner .dtb-tag {
  display: inline-block;
  padding: 3px 10px;
  background: #F59E0B;
  color: #fff;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  min-width: 56px;
  text-align: center;
}
.fiche .dossier-taxi-banner .dtb-reason {
  flex: 1;
  min-width: 200px;
}
.fiche .dossier-taxi-banner .dtb-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #6B7280;
}
.fiche .dossier-taxi-banner .dtb-row-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.fiche .dossier-taxi-banner .dtb-history {
  margin-top: 4px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed #FCD34D;
  border-radius: 6px;
}
.fiche .dossier-taxi-banner .dtb-history-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #92400E;
  margin-bottom: 4px;
}
.fiche .dossier-taxi-banner .dtb-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #78350F;
  padding: 2px 0;
}
.fiche .dossier-taxi-banner .dtb-history-society {
  font-weight: 600;
}
.fiche .dossier-taxi-banner .dtb-history-motif {
  color: #92400E;
  font-style: italic;
}
.fiche .dossier-taxi-banner .dtb-history-date {
  color: #9CA3AF;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.fiche .dossier-danger-zone {
  margin-top: 18px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--red-50), #FEF2F2);
  border: 2px solid var(--red-200);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.fiche .dossier-danger-zone .ddz-content {
  flex: 1;
  min-width: 260px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.fiche .dossier-danger-zone .ddz-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--red-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.35);
}
.fiche .dossier-danger-zone .ddz-body h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--red-700);
}
.fiche .dossier-danger-zone .ddz-body p {
  margin: 0;
  font-size: 12px;
  color: var(--red-800);
  line-height: 1.5;
}
.fiche .dossier-danger-zone .ddz-body p strong {
  color: var(--red-700);
  font-weight: 700;
}
.fiche .dossier-danger-zone .btn-danger-hard {
  background: var(--red-600);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.15s ease;
  font-family: var(--font-family);
}
.fiche .dossier-danger-zone .btn-danger-hard:hover {
  background: var(--red-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(220, 38, 38, 0.4);
}
.fiche .dossier-danger-zone .btn-danger-hard:active {
  transform: translateY(0);
}
.fiche .navettes-recap {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--amber-50), #FFFBEB);
  border: 1px solid var(--amber-200);
  border-radius: 10px;
}
.fiche .navettes-recap .nav-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--amber-800);
}
.fiche .navettes-recap .nav-stat i {
  font-size: 11px;
  color: var(--amber-700);
}
.fiche .navettes-recap .nav-stat strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
}
.fiche .navettes-recap .nav-stat span {
  color: var(--neutral-600);
}
.fiche .navettes-recap .nav-stat.affected {
  color: var(--green-700);
}
.fiche .navettes-recap .nav-stat.affected i {
  color: var(--green-600);
}
.fiche .navettes-recap .nav-stat.affected strong {
  color: var(--green-700);
}
.fiche .transport-extras {
  padding: 6px 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--neutral-600);
}
.fiche .transport-extras span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fiche .transport-extras i {
  color: var(--blue-600);
  font-size: 10px;
}
.fiche .repas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fiche .repas-row {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.fiche .repas-row:hover {
  border-color: var(--orange-600);
}
.fiche .repas-row.has-choice {
  border-left: 3px solid var(--orange-600);
}
.fiche .repas-row.pending {
  border-left: 3px solid var(--amber-400);
  background: var(--amber-50);
}
.fiche .repas-date {
  flex-shrink: 0;
  text-align: center;
  width: 70px;
  padding: 6px 0;
  background: linear-gradient(135deg, var(--orange-50), #FFF7ED);
  border-radius: 9px;
}
.fiche .repas-date .repas-day-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--orange-600);
  line-height: 1;
}
.fiche .repas-date .repas-day-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--orange-600);
  margin-top: 3px;
}
.fiche .repas-date .repas-day-month {
  font-size: 10px;
  color: var(--neutral-500);
  text-transform: capitalize;
}
.fiche .repas-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fiche .repas-body .form-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin-bottom: 3px;
}
.fiche .repas-body .form-label-sm {
  font-size: 10px;
  font-weight: 600;
  color: var(--neutral-500);
  margin-bottom: 3px;
  display: block;
}
.fiche .repas-body .form-control {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font-size: 12.5px;
  font-family: var(--font-family);
  background: #fff;
}
.fiche .repas-body .form-control:focus {
  outline: none;
  border-color: var(--orange-600);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
.fiche .repas-body .form-control[disabled] option:disabled {
  color: var(--neutral-400);
}
.fiche .repas-extra {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.fiche .repas-extra .form-field {
  display: flex;
  flex-direction: column;
}
.fiche .repas-extra .form-field:first-child {
  width: 90px;
  flex-shrink: 0;
}
.fiche .repas-extra .form-field:last-child {
  flex: 1;
}
.fiche .restaurant-capacite {
  --c-color: var(--neutral-700);
  --c-bg: var(--neutral-50);
  --c-border: var(--neutral-200);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin-top: 6px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  font-size: 12px;
  color: var(--c-color);
}
.fiche .restaurant-capacite .capacite-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-color);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-color) 18%, transparent);
}
.fiche .restaurant-capacite .capacite-dispo {
  font-weight: 700;
  color: var(--c-color);
}
.fiche .restaurant-capacite .capacite-total {
  color: var(--neutral-500);
  font-size: 11.5px;
}
.fiche .restaurant-capacite.is-ok {
  --c-color: var(--green-700);
  --c-bg: var(--green-50);
  --c-border: var(--green-200);
}
.fiche .restaurant-capacite.is-low {
  --c-color: var(--amber-800);
  --c-bg: var(--amber-50);
  --c-border: var(--amber-200);
}
.fiche .restaurant-capacite.is-full {
  --c-color: var(--red-700);
  --c-bg: var(--red-50);
  --c-border: var(--red-200);
}
.fiche .restaurant-capacite.is-illimite {
  --c-color: var(--blue-700);
  --c-bg: var(--blue-50);
  --c-border: var(--blue-200);
}
.fiche .restaurant-capacite.is-illimite i {
  color: var(--blue-600);
}
.fiche .restaurant-capacite.is-illimite .capacite-bullet {
  display: none;
}
.fiche .gestionnaire-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
  border: 1px solid var(--card-border, var(--neutral-200));
  border-radius: 10px;
}
.fiche .gestionnaire-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  overflow: hidden;
}
.fiche .gestionnaire-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fiche .gestionnaire-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.fiche .gestionnaire-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--neutral-900);
  line-height: 1.2;
}
.fiche .gestionnaire-role {
  font-size: 11.5px;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.fiche .gestionnaire-phone,
.fiche .gestionnaire-email {
  font-size: 12px;
  color: var(--neutral-700);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  transition: color 120ms;
}
.fiche .gestionnaire-phone i,
.fiche .gestionnaire-email i {
  color: var(--neutral-400);
  font-size: 10.5px;
}
.fiche .gestionnaire-phone:hover,
.fiche .gestionnaire-email:hover {
  color: var(--blue-700);
}
.fiche .gestionnaire-phone:hover i,
.fiche .gestionnaire-email:hover i {
  color: var(--blue-600);
}
.fiche .gestionnaire-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  font-style: italic;
}
.fiche .gestionnaire-empty i {
  color: var(--neutral-400);
  font-size: 14px;
}
.fiche .suggestion-transport {
  --st-color: var(--neutral-700);
  --st-bg: var(--neutral-50);
  --st-border: var(--neutral-200);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-left: 3px solid var(--st-color);
  border-radius: var(--radius-md, 8px);
}
.fiche .suggestion-transport > i {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  color: var(--st-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.fiche .suggestion-transport > div {
  flex: 1;
  min-width: 0;
}
.fiche .suggestion-transport strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-color);
  margin-bottom: 4px;
  letter-spacing: 0.1px;
}
.fiche .suggestion-transport p {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.45;
}
.fiche .suggestion-transport form {
  display: inline;
}
.fiche .suggestion-transport.suggestion-navette {
  --st-color: var(--green-700);
  --st-bg: var(--green-50);
  --st-border: var(--green-200);
}
.fiche .suggestion-transport.suggestion-taxi {
  --st-color: var(--amber-800);
  --st-bg: var(--amber-50);
  --st-border: var(--amber-200);
}
.fiche .suggestion-transport.suggestion-aucun {
  --st-color: var(--neutral-600, #475569);
  --st-bg: var(--neutral-50, #f8fafc);
  --st-border: var(--neutral-200, #e2e8f0);
}
.fiche .suggestion-transport.suggestion-nuitee_veille, .fiche .suggestion-transport.suggestion-nuitee_lendemain {
  --st-color: var(--purple-700);
  --st-bg: var(--purple-50);
  --st-border: var(--purple-200);
}
.fiche .suggestion-transport.suggestion-empty {
  --st-color: var(--neutral-700);
  --st-bg: var(--neutral-50);
  --st-border: var(--neutral-200);
}
.fiche .renvoyer-email-block {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.fiche .renvoyer-email-block .reb-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 220px;
}
.fiche .renvoyer-email-block .reb-info > i {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.fiche .renvoyer-email-block .reb-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.fiche .renvoyer-email-block .reb-sub {
  font-size: 12px;
  color: var(--neutral-700);
  margin-top: 2px;
  line-height: 1.4;
}
.fiche .renvoyer-email-block .reb-sub strong {
  color: var(--blue-700);
  font-weight: 600;
}
.fiche .trajet-costs {
  margin-top: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--blue-50), #EEF2FF);
  border: 1px solid var(--blue-200);
  border-radius: 10px;
  max-width: 380px;
  margin-left: auto;
}
.fiche .trajet-costs .tc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--blue-700);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fiche .trajet-costs .tc-title i {
  color: var(--blue-600);
}
.fiche .trajet-costs .tc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--neutral-700);
}
.fiche .trajet-costs .tc-row strong {
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.fiche .trajet-costs .tc-row.tc-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--blue-200);
  font-weight: 700;
  color: var(--blue-700);
}
.fiche .trajet-costs .tc-row.tc-total strong {
  font-size: 15px;
  color: var(--blue-700);
}

/* ════════════ TRANSFERTS (onglet dossier) ════════════ */
.fiche .transfert-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 16px 18px;
}
.fiche .transfert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--neutral-100);
  margin-bottom: 14px;
}
.fiche .transfert-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
}
.fiche .transfert-header .text-muted {
  margin-left: auto;
  font-size: 12px;
  color: var(--neutral-500);
  font-family: var(--font-mono, monospace);
}
.fiche .transfert-destination {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--neutral-50);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.fiche .transfert-destination > i {
  color: var(--blue-600);
}
.fiche .transfert-destination strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.fiche .transfert-destination .badge {
  margin-left: 6px;
}
.fiche .transfert-confirme {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.fiche .transfert-confirme > i {
  color: var(--green-700);
  font-size: 16px;
}
.fiche .transfert-confirme strong {
  color: var(--green-800);
  font-weight: 700;
}
.fiche .transfert-confirme > div {
  flex: 1;
  min-width: 0;
  color: var(--neutral-700);
}

/* ─────────────────────────────────────────────────────────────────────
 * Onglet Navettes du dossier — résumé transferts + affectations navette
 * formation (NavetteFormationAffectation, nouveau système).
 * ───────────────────────────────────────────────────────────────────── */
.nav-section {
  margin-bottom: 2rem;
}
.nav-section .nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--card-border);
}
.nav-section .nav-section-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.transfert-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 720px) {
  .transfert-summary-row {
    grid-template-columns: 1fr;
  }
}

.transfert-summary-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}
.transfert-summary-card .tsc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.transfert-summary-card .tsc-icon.tsc-arrivee {
  background: var(--blue-100);
  color: var(--blue-600);
}
.transfert-summary-card .tsc-icon.tsc-depart {
  background: var(--purple-100);
  color: var(--purple-600);
}
.transfert-summary-card .tsc-content {
  flex: 1;
  min-width: 0;
}
.transfert-summary-card .tsc-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin-bottom: 4px;
}
.transfert-summary-card .tsc-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.transfert-summary-card .tsc-empty {
  color: var(--neutral-500);
  font-weight: 500;
}
.transfert-summary-card .tsc-detail {
  font-size: 12px;
  color: var(--neutral-600);
  margin-top: 4px;
}
.transfert-summary-card .tsc-cta {
  margin-top: 6px;
}

.nav-empty-state {
  text-align: center;
  padding: 2rem;
  background: var(--neutral-50);
  border: 2px dashed var(--card-border);
  border-radius: var(--radius-md);
}
.nav-empty-state p {
  color: var(--neutral-500);
  font-size: 14px;
  margin: 0.5rem 0;
}

.nav-affecter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}
.nav-affecter-options button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.nav-affectations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-affectation-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--white, #fff);
}
.nav-affectation-card .nac-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 110px;
}
.nav-affectation-card .nac-header .nac-sens {
  font-weight: 600;
  font-size: 13px;
  color: var(--neutral-800);
}
.nav-affectation-card .nac-header .nac-sens i {
  margin-right: 4px;
}
.nav-affectation-card .nac-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--neutral-700);
}
.nav-affectation-card .nac-horaires {
  font-size: 13px;
}
.nav-affectation-card .nac-vehicule,
.nav-affectation-card .nac-arrets {
  font-size: 12px;
  color: var(--neutral-500);
}
.nav-affectation-card .nac-vehicule i,
.nav-affectation-card .nac-arrets i {
  margin-right: 4px;
}
.nav-affectation-card .nac-actions {
  margin-left: auto;
}
@media (max-width: 720px) {
  .nav-affectation-card {
    flex-direction: column;
  }
  .nav-affectation-card .nac-actions {
    margin-left: 0;
    align-self: flex-end;
  }
}

/* Carte info "Résumé navettes quotidiennes" affichée dans l'onglet
 * Transferts : juste un rappel + lien vers l'onglet Navettes,
 * pour bien séparer Transfert ponctuel et Navette quotidienne. */
.transfert-card-info {
  background: var(--neutral-50);
  border: 1px dashed var(--card-border);
}

/* ─────────────────────────────────────────────────────────────────────
 * Card de suggestion "Navette de transfert" dans l'onglet Transferts :
 * meta de la navette support + lien éditer + dépliant des inscrits.
 * La NavetteFormation est ici le SUPPORT du Transfert (pas l'entité
 * métier affichée), c'est de l'aide à la décision avant confirmation.
 * ───────────────────────────────────────────────────────────────────── */
.sugnav-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 10px;
  font-size: 12px;
  color: var(--neutral-600);
}
.sugnav-meta .sugnav-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sugnav-meta .sugnav-meta-item i {
  color: var(--neutral-500);
}

.sugnav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sugnav-inscrits {
  margin-top: 10px;
  font-size: 13px;
  border-top: 1px dashed var(--card-border);
  padding-top: 8px;
}
.sugnav-inscrits > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--neutral-700);
  padding: 4px 0;
  user-select: none;
}
.sugnav-inscrits > summary::-webkit-details-marker {
  display: none;
}
.sugnav-inscrits > summary:hover {
  color: var(--blue-700, var(--neutral-900));
}
.sugnav-inscrits > summary .sugnav-chevron {
  font-size: 11px;
  color: var(--neutral-500);
  transition: transform 0.15s ease;
}
.sugnav-inscrits[open] > summary .sugnav-chevron {
  transform: rotate(90deg);
}
.sugnav-inscrits .sugnav-empty {
  margin: 8px 0 0;
  color: var(--neutral-500);
  font-style: italic;
  font-size: 12px;
}

.sugnav-inscrits-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sugnav-inscrits-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: var(--neutral-50);
  border-radius: 6px;
  font-size: 12px;
}
.sugnav-inscrits-list > li .sugnav-inscrit-nom {
  font-weight: 600;
  color: var(--neutral-800);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sugnav-inscrits-list > li .sugnav-inscrit-meta {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESERVATION WIZARD — design handoff (indigo accent)
   Toutes les classes sont scopées sous .resa-wizard pour éviter
   les conflits avec le design system Enedis global.
   ═══════════════════════════════════════════════════════════════ */
.resa-wizard {
  /* Accent VERT — pilote stepper, boutons primaires, focus et sélections du wizard. */
  --r-accent: #067647; /* vert profond (aligné sur --r-ok) */
  --r-accent-600: #059669; /* survol : légèrement plus clair, comme l'ancien accent */
  --r-accent-50: #ecfdf3; /* vert très clair (= chip « nuits couvertes » / pied de carte) */
  --r-accent-100: #d1fae5;
  --r-ink: #0b1020;
  --r-ink-2: #1e2638;
  --r-muted: #5b6478;
  --r-muted-2: #8b93a7;
  --r-line: #e6e8ee;
  --r-line-2: #eef0f4;
  --r-bg: #f6f7f9;
  --r-card: #ffffff;
  --r-danger: #b42318;
  --r-warn: #b54708;
  --r-ok: #067647;
  --r-chip-bg: #f2f4f7;
  --r-radius-sm: 6px;
  --r-radius-md: 10px;
  --r-radius-lg: 14px;
  --r-pad-card: 28px;
  --r-pad-row: 14px;
  --r-fz-h1: 22px;
  display: block;
  width: 100%;
  background: var(--r-bg);
  color: var(--r-ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  /* ── Main grid (centré à 1500px, contenu des steps) ───────── */
  /* ── Step head ─────────────────────────────────────────────── */
  /* ── Card ──────────────────────────────────────────────────── */
  /* ── Summary sidebar ───────────────────────────────────────── */
  /* Total estimé (récapitulatif de droite) : fond vert clair + bordure verte.
     Les textes, autrefois blancs sur fond sombre, passent en vert/encre pour rester lisibles. */
  /* ── Résumé latéral : badge « Type de séjour » (visible si long/multi) ─── */
  /* ── Encart « Type de séjour » (étape Dates) ──────────────── */
  /* ── Séjour long libre : hébergement + THRIPS par semaine ── */
  /* ── Étape 4 THRIPS : trajets multiples + type déduit ────── */
  /* ── Stepper (wrapper full-width, contenu 1500px) ─────────── */
  /* ── Buttons ───────────────────────────────────────────────── */
  /* ── Forms ─────────────────────────────────────────────────── */
  /* ── Chips ─────────────────────────────────────────────────── */
  /* ── Split & search ────────────────────────────────────────── */
  /* Step 1 : split campus-list gauche + map droite, full-width */
  /* ── Campus list (step 1) ──────────────────────────────────── */
  /* ── Formation cards (step 2) ──────────────────────────────── */
  /* Désactivé : on garde uniquement le label "Sélectionné" en bas à droite. */
  /* ── Step 3 specific : header + card plus compacts ─────────── */
  /* ── Calendar (step 3) — version compacte ──────────────────── */
  /* ── Step 4 : autocomplete dropdown ───────────────────────── */
  /* ── Step 4 : card stagiaire sélectionné ──────────────────── */
  /* ── Trajet préconisé (matrice DR × campus) ────────────────── */
  /* ── Stagiaire profile (step 4) ────────────────────────────── */
  /* ── Hébergement cards (step 5) ────────────────────────────── */
  /* ══════════════════════════════════════════════════════════════
     STEP 5 v2 — Liste hébergements + Panneau configuration
     ══════════════════════════════════════════════════════════════ */
  /* Respect du HTML attribute `hidden` malgré les display: flex/grid */
  /* ── Grille de cards v2 ───────────────────────────────────── */
  /* ── Empty state (avant sélection) ─────────────────────────── */
  /* ── Section configuration (panneau dépliable) ─────────────── */
  /* ── Formules (3 cartes radio) ─────────────────────────────── */
  /* Détail nuits couvertes/non couvertes (couverture partielle) */
  /* ── Sélecteur restaurant (sous les formules) ──────────────── */
  /* ── Hint warn (bandeau hôtels en attente BP) ──────────────── */
  /* ══════════════════════════════════════════════════════════════
     Legacy classes (step 5 v1) — conservées pour compatibilité
     avec d'éventuels rendus partiels et le controller disponibilite.
     ══════════════════════════════════════════════════════════════ */
  /* ── Confirmation (step 6) ─────────────────────────────────── */
  /* ── Hint (info banner) ────────────────────────────────────── */
  /* ── Footbar (wrapper full-width, contenu 1500px) ─────────── */
  /* ── Modal détail hôtel (step 5) ──────────────────────────── */
  /* ── Carousel (modal détail hôtel) ─────────────────────────── */
  /* ── Leaflet : protection contre l'override CSS global ───── */
}
.resa-wizard h1, .resa-wizard h2, .resa-wizard h3, .resa-wizard h4 {
  font-family: "Inter Tight", "Inter", sans-serif;
  margin: 0;
  letter-spacing: -0.01em;
}
.resa-wizard .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.resa-wizard .resa-main {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 2rem 120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 1100px) {
  .resa-wizard .resa-main {
    grid-template-columns: 1fr;
  }
  .resa-wizard .summary {
    position: static !important;
  }
  .resa-wizard .hebe-cards {
    grid-template-columns: 1fr 1fr;
  }
  .resa-wizard .split-h {
    grid-template-columns: 1fr !important;
  }
}
.resa-wizard .step-head {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.resa-wizard .step-head .eyebrow {
  color: var(--r-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 6px;
}
.resa-wizard .step-head h1 {
  font-size: var(--r-fz-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--r-ink);
}
.resa-wizard .step-head .sub {
  color: var(--r-muted);
  margin-top: 6px;
  max-width: 560px;
  line-height: 1.45;
  font-size: 13.5px;
}
.resa-wizard .step-head .meta {
  color: var(--r-muted);
  font-size: 12.5px;
  text-align: right;
  line-height: 1.5;
}
.resa-wizard .card {
  background: var(--r-card);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.resa-wizard .card-pad {
  padding: var(--r-pad-card);
}
.resa-wizard .card-section {
  border-top: 1px solid var(--r-line-2);
  padding: var(--r-pad-card);
}
.resa-wizard .card-section:first-child {
  border-top: 0;
}
.resa-wizard .summary {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.resa-wizard .summary .card-pad {
  padding: 20px;
}
.resa-wizard .sum-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.resa-wizard .sum-title {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-muted);
  font-weight: 600;
}
.resa-wizard .sum-progress {
  font-size: 11.5px;
  color: var(--r-muted);
}
.resa-wizard .sum-progress b {
  color: var(--r-ink);
  font-weight: 600;
}
.resa-wizard .sum-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.resa-wizard .sum-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.resa-wizard .sum-row .ico {
  width: 18px;
  height: 18px;
  color: var(--r-muted-2);
  flex-shrink: 0;
  text-align: center;
}
.resa-wizard .sum-row.set .ico {
  color: var(--r-accent);
}
.resa-wizard .sum-row .lbl {
  font-size: 11.5px;
  color: var(--r-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.resa-wizard .sum-row .val {
  color: var(--r-ink);
  font-weight: 500;
  margin-top: 1px;
  line-height: 1.35;
}
.resa-wizard .sum-row .val.empty {
  color: var(--r-muted-2);
  font-style: italic;
  font-weight: 400;
}
.resa-wizard .sum-row .sub {
  color: var(--r-muted);
  font-size: 12.5px;
  margin-top: 2px;
}
.resa-wizard .sum-total-card {
  background: #ecfdf3;
  border: 1.5px solid #a7f3d0;
  color: var(--r-ink);
  border-radius: var(--r-radius-lg);
  padding: 18px 20px;
}
.resa-wizard .sum-total-card .label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-ok);
  font-weight: 600;
}
.resa-wizard .sum-total-card .amount {
  font-family: "Inter Tight";
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
  color: var(--r-ok);
}
.resa-wizard .sum-total-card .breakdown {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #a7f3d0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.resa-wizard .sum-total-card .breakdown .r {
  display: flex;
  justify-content: space-between;
  color: var(--r-muted);
}
.resa-wizard .sum-total-card .breakdown .r b {
  color: var(--r-ink);
  font-weight: 600;
}
.resa-wizard .sum-sejour {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--r-line);
}
.resa-wizard .sum-sejour i {
  width: 18px;
  text-align: center;
  color: var(--r-accent);
  margin-top: 2px;
}
.resa-wizard .sum-sejour .lbl {
  font-size: 11.5px;
  color: var(--r-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.resa-wizard .sum-sejour .val {
  color: var(--r-ink);
  font-weight: 600;
  margin-top: 1px;
  line-height: 1.35;
}
.resa-wizard .tsej-card {
  margin-bottom: 20px;
}
.resa-wizard .tsej-card.tsej-multi {
  border-color: var(--r-accent);
  box-shadow: 0 0 0 1px var(--r-accent) inset;
}
.resa-wizard .tsej-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.resa-wizard .tsej-title {
  font-weight: 700;
  font-size: 15px;
}
.resa-wizard .tsej-title i {
  color: var(--r-accent);
  margin-right: 6px;
}
.resa-wizard .tsej-note {
  color: var(--r-muted);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.45;
}
.resa-wizard .tsej-note-ok {
  color: var(--r-ok);
  font-weight: 500;
}
.resa-wizard .tsej-note-ok i {
  margin-right: 4px;
}
.resa-wizard .tsej-note-ok b {
  font-weight: 700;
}
.resa-wizard .tsej-weeks {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--r-accent-50);
  border: 1px solid var(--r-accent-100);
  border-radius: var(--r-radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resa-wizard .tsej-weeks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.resa-wizard .tsej-weeks .tsej-wk-idx {
  flex-shrink: 0;
  width: 30px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--r-accent);
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.resa-wizard .tsej-weeks .tsej-wk-code {
  font-weight: 600;
  color: var(--r-ink);
}
.resa-wizard .tsej-weeks .tsej-wk-dates {
  color: var(--r-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.resa-wizard .tsej-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .resa-wizard .tsej-grid {
    grid-template-columns: 1fr;
  }
}
.resa-wizard .tsej-opt {
  position: relative;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1.5px solid var(--r-line);
  background: #fff;
  border-radius: var(--r-radius-md);
  padding: 14px 14px;
  transition: border-color 0.12s, background 0.12s;
}
.resa-wizard .tsej-opt:hover {
  border-color: var(--r-muted-2);
}
.resa-wizard .tsej-opt.active {
  border-color: var(--r-accent);
  background: var(--r-accent-50);
}
.resa-wizard .tsej-opt .tsej-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--r-chip-bg);
  color: var(--r-muted);
  font-size: 15px;
}
.resa-wizard .tsej-opt.active .tsej-ic {
  background: var(--r-accent);
  color: #fff;
}
.resa-wizard .tsej-opt .tsej-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.resa-wizard .tsej-opt .tsej-lbl {
  font-weight: 600;
  color: var(--r-ink);
  font-size: 13.5px;
}
.resa-wizard .tsej-opt .tsej-desc {
  color: var(--r-muted);
  font-size: 12px;
  line-height: 1.4;
}
.resa-wizard .tsej-opt .tsej-chk {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--r-accent);
  font-size: 14px;
}
.resa-wizard .lw-card {
  margin-bottom: 16px;
}
.resa-wizard .lw-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.resa-wizard .lw-idx {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--r-accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
}
.resa-wizard .lw-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--r-ink);
}
.resa-wizard .lw-dates {
  font-size: 12.5px;
  color: var(--r-muted);
  font-family: "JetBrains Mono", monospace;
  margin-top: 1px;
}
.resa-wizard .lw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .resa-wizard .lw-grid {
    grid-template-columns: 1fr;
  }
}
.resa-wizard .lw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resa-wizard .lw-lbl {
  font-size: 12px;
  color: var(--r-muted);
  font-weight: 600;
}
.resa-wizard .lw-opt {
  font-weight: 400;
  color: var(--r-muted-2);
}
.resa-wizard .lw-field .form-control {
  height: 40px;
  border: 1px solid var(--r-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  background: #fff;
  color: var(--r-ink);
  width: 100%;
}
.resa-wizard .lw-empty {
  padding: 14px;
  background: #FEF3F2;
  border: 1px solid #FDA29B;
  border-radius: var(--r-radius-md);
  color: var(--r-danger);
  font-size: 13px;
  font-weight: 500;
}
.resa-wizard .lw-empty i {
  margin-right: 6px;
}
.resa-wizard .thr-type {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: var(--r-radius-md);
  border: 1px solid var(--r-accent-100);
  background: var(--r-accent-50);
}
.resa-wizard .thr-type i {
  font-size: 18px;
  color: var(--r-accent);
}
.resa-wizard .thr-type .thr-type-lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--r-muted);
  font-weight: 600;
}
.resa-wizard .thr-type .thr-type-val {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--r-ink);
  margin-top: 1px;
}
.resa-wizard .thr-type .thr-type-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--r-muted);
}
.resa-wizard .thr-type.thr-type-court {
  border-color: var(--r-line);
  background: var(--r-chip-bg);
}
.resa-wizard .thr-type.thr-type-court i {
  color: var(--r-muted);
}
.resa-wizard .trj-card {
  margin-bottom: 14px;
}
.resa-wizard .trj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.resa-wizard .trj-idx {
  font-weight: 700;
  font-size: 14px;
  color: var(--r-ink);
}
.resa-wizard .trj-remove {
  border: 0;
  background: none;
  color: var(--r-danger);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.resa-wizard .trj-remove:hover {
  background: #FEF3F2;
}
.resa-wizard .trj-remove i {
  margin-right: 4px;
}
.resa-wizard .trj-modes {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.resa-wizard .trj-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  cursor: pointer;
  border: 1.5px solid var(--r-line);
  border-radius: var(--r-radius-md);
  font-size: 13px;
  font-weight: 500;
}
.resa-wizard .trj-mode input {
  accent-color: var(--r-accent);
}
.resa-wizard .trj-mode:has(input:checked) {
  border-color: var(--r-accent);
  background: var(--r-accent-50);
  font-weight: 600;
}
.resa-wizard .trj-mode i {
  color: var(--r-muted);
}
.resa-wizard .trj-pnrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .resa-wizard .trj-pnrs {
    grid-template-columns: 1fr;
  }
}
.resa-wizard .trj-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resa-wizard .trj-lbl {
  font-size: 12px;
  color: var(--r-muted);
  font-weight: 600;
}
.resa-wizard .trj-field .form-control {
  height: 40px;
  border: 1px solid var(--r-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  background: #fff;
  color: var(--r-ink);
  width: 100%;
}
.resa-wizard .trj-err {
  font-size: 12px;
  color: var(--r-warn);
  font-weight: 500;
}
.resa-wizard .trj-err i {
  margin-right: 4px;
}
.resa-wizard .trj-result {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--r-radius-md);
  background: var(--r-accent-50);
  border: 1px solid var(--r-accent-100);
}
.resa-wizard .trj-result.trj-result-warn {
  background: #FFFAEB;
  border-color: #FEDF89;
}
.resa-wizard .trj-res-dates {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.resa-wizard .trj-res-dates > div {
  display: flex;
  flex-direction: column;
}
.resa-wizard .trj-res-dates .k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--r-muted);
  font-weight: 600;
}
.resa-wizard .trj-res-dates .v {
  font-size: 15px;
  font-weight: 700;
  color: var(--r-ink);
}
.resa-wizard .trj-res-dates .g {
  font-size: 12px;
  color: var(--r-muted);
}
.resa-wizard .trj-res-arrow {
  color: var(--r-accent);
}
.resa-wizard .trj-res-pax {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--r-accent-100);
  font-size: 13px;
  font-weight: 600;
}
.resa-wizard .trj-res-pax i {
  margin-right: 5px;
}
.resa-wizard .trj-res-pax.is-ok {
  color: var(--r-ok);
}
.resa-wizard .trj-res-pax.is-warn {
  color: var(--r-warn);
  border-top-color: #FEDF89;
}
.resa-wizard .trj-add {
  margin-bottom: 6px;
}
.resa-wizard .trj-add i {
  margin-right: 6px;
}
.resa-wizard .stepper-wrap {
  background: #fff;
  border-bottom: 1px solid var(--r-line);
  width: 100%;
}
.resa-wizard .stepper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 2rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.resa-wizard .step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--r-muted);
  font-weight: 500;
  font-size: 13px;
  transition: background 0.15s;
  text-decoration: none;
}
.resa-wizard .step:hover {
  background: var(--r-line-2);
}
.resa-wizard .step .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--r-line);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--r-muted);
  transition: all 0.2s;
}
.resa-wizard .step.done {
  color: var(--r-ink-2);
}
.resa-wizard .step.done .dot {
  background: var(--r-accent);
  border-color: var(--r-accent);
  color: #fff;
}
.resa-wizard .step.active {
  color: var(--r-ink);
  font-weight: 600;
}
.resa-wizard .step.active .dot {
  border-color: var(--r-accent);
  color: var(--r-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--r-accent) 15%, transparent);
}
.resa-wizard .step .check {
  width: 10px;
  height: 10px;
}
.resa-wizard .step-sep {
  width: 28px;
  height: 1px;
  background: var(--r-line);
}
.resa-wizard .step-sep.filled {
  background: var(--r-accent);
}
.resa-wizard .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.resa-wizard .btn-primary {
  background: var(--r-accent);
  color: #fff;
  border-color: var(--r-accent);
}
.resa-wizard .btn-primary:hover {
  background: var(--r-accent-600);
}
.resa-wizard .btn-primary:disabled {
  background: #c4c7cf;
  border-color: #c4c7cf;
  cursor: not-allowed;
}
.resa-wizard .btn-ghost {
  background: #fff;
  color: var(--r-ink);
  border-color: var(--r-line);
}
.resa-wizard .btn-ghost:hover {
  background: var(--r-line-2);
}
.resa-wizard .btn-link {
  color: var(--r-accent);
  font-weight: 500;
  padding: 4px 6px;
  background: none;
  border: none;
}
.resa-wizard .btn-link:hover {
  background: var(--r-accent-50);
  border-radius: 5px;
}
.resa-wizard .btn-lg {
  padding: 11px 18px;
  font-size: 14px;
}
.resa-wizard .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resa-wizard .field label {
  font-size: 12px;
  color: var(--r-muted);
  font-weight: 500;
}
.resa-wizard .input, .resa-wizard .select, .resa-wizard input[type=text].input, .resa-wizard input[type=email].input, .resa-wizard input[type=tel].input {
  height: 40px;
  border: 1px solid var(--r-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  background: #fff;
  color: var(--r-ink);
  outline: none;
  transition: all 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.resa-wizard .input:focus, .resa-wizard .select:focus, .resa-wizard input[type=text].input:focus, .resa-wizard input[type=email].input:focus, .resa-wizard input[type=tel].input:focus {
  border-color: var(--r-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r-accent) 18%, transparent);
}
.resa-wizard .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--r-chip-bg);
  font-size: 11.5px;
  color: var(--r-muted);
  font-weight: 500;
  /* V3 PMS — Sprint 1 Tâche A : variantes badge CDC */
}
.resa-wizard .chip.ok {
  background: #ecfdf3;
  color: var(--r-ok);
}
.resa-wizard .chip.warn {
  background: #fef6ee;
  color: var(--r-warn);
}
.resa-wizard .chip.accent {
  background: var(--r-accent-50);
  color: var(--r-accent);
}
.resa-wizard .chip.dark {
  background: var(--r-ink);
  color: #fff;
}
.resa-wizard .chip.chip-cdc {
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.resa-wizard .chip.chip-cdc-full {
  background: #ecfdf3;
  color: var(--r-ok);
  border-color: #a7f3d0;
}
.resa-wizard .chip.chip-cdc-partial {
  background: #fef6ee;
  color: var(--r-warn);
  border-color: #fed7aa;
}
.resa-wizard .chip.chip-cdc-non_conforme {
  background: #fef2f2;
  color: var(--r-danger);
  border-color: #fecaca;
}
.resa-wizard .split-h {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 16px;
  align-items: stretch;
}
.resa-wizard .step1-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  min-height: 620px;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-lg);
  overflow: hidden;
  background: #fff;
}
.resa-wizard .step1-left {
  background: #f8f9fb;
  padding: 1.25rem;
  border-right: 1px solid var(--r-line);
  overflow-y: auto;
  max-height: 720px;
}
.resa-wizard .step1-right {
  position: relative;
  overflow: hidden;
  min-height: 620px;
}
.resa-wizard .step1-right .wizard-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .resa-wizard .step1-split {
    grid-template-columns: 1fr;
  }
  .resa-wizard .step1-left {
    max-height: 360px;
    border-right: 0;
    border-bottom: 1px solid var(--r-line);
  }
  .resa-wizard .step1-right {
    min-height: 420px;
  }
}
.resa-wizard .search-box {
  position: relative;
}
.resa-wizard .search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--r-muted-2);
  pointer-events: none;
  font-size: 14px;
  z-index: 1;
}
.resa-wizard .search-box input,
.resa-wizard .search-box input.input,
.resa-wizard .search-box input[type=text],
.resa-wizard .search-box input[type=search] {
  padding-left: 40px !important;
}
.resa-wizard .campus-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.resa-wizard .campus-item {
  border: 1px solid var(--r-line);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.resa-wizard .campus-item:hover {
  border-color: var(--r-muted-2);
}
.resa-wizard .campus-item.sel {
  border-color: var(--r-accent);
  background: var(--r-accent-50);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r-accent) 10%, transparent);
}
.resa-wizard .campus-item .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.resa-wizard .campus-item h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--r-ink);
}
.resa-wizard .campus-item .reg {
  font-size: 11.5px;
  color: var(--r-muted);
  margin-top: 2px;
}
.resa-wizard .campus-item .feat {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.resa-wizard .form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.resa-wizard .form-card {
  position: relative;
  border: 2px solid var(--r-line);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  background: #fff;
  transition: all 0.15s;
}
.resa-wizard .form-card:hover {
  border-color: var(--r-accent);
  background: var(--r-accent-50);
}
.resa-wizard .form-card.is-selected, .resa-wizard .form-card.sel {
  border-color: var(--r-accent);
  background: var(--r-accent-50);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r-accent) 15%, transparent);
}
.resa-wizard .form-card .row1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.resa-wizard .form-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--r-ink);
}
.resa-wizard .form-card .ref {
  font-family: "JetBrains Mono";
  font-size: 11px;
  color: var(--r-muted);
  margin-top: 2px;
}
.resa-wizard .form-card .facts {
  display: flex;
  gap: 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--r-line-2);
  flex-wrap: wrap;
}
.resa-wizard .form-card .fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.resa-wizard .form-card .fact .k {
  font-size: 11px;
  color: var(--r-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.resa-wizard .form-card .fact .v {
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--r-ink);
}
.resa-wizard .form-card-check {
  display: none !important;
}
.resa-wizard .form-card-selected-label {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--r-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.resa-wizard .form-card.is-selected .form-card-selected-label,
.resa-wizard .form-card.sel .form-card-selected-label {
  opacity: 1;
  transform: translateY(0);
}
.resa-wizard .capacity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.resa-wizard .capacity .bar {
  width: 80px;
  height: 5px;
  background: var(--r-line);
  border-radius: 99px;
  overflow: hidden;
}
.resa-wizard .capacity .bar-fill {
  height: 100%;
  background: var(--r-accent);
}
.resa-wizard .step3-compact .step-head {
  margin-bottom: 10px;
}
.resa-wizard .step3-compact .card-pad {
  padding: 16px 20px;
}
.resa-wizard .cal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.resa-wizard .cal .month {
  border: 1px solid var(--r-line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.resa-wizard .cal .month-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding: 2px 0;
}
.resa-wizard .cal .month-h h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--r-ink);
}
.resa-wizard .cal .wk {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 10px;
  color: var(--r-muted);
  margin-bottom: 4px;
  text-align: center;
  font-weight: 500;
  padding: 2px 0;
}
.resa-wizard .cal .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.resa-wizard .cal .d {
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--r-ink);
  border-radius: 5px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.1s ease;
}
.resa-wizard .cal .d.out {
  color: var(--r-muted-2);
  opacity: 0.4;
  cursor: default;
}
.resa-wizard .cal .d:hover:not(.out) {
  background: var(--r-line-2);
}
.resa-wizard .cal .d.range {
  background: var(--r-accent-50);
  color: var(--r-accent);
  border-radius: 0;
}
.resa-wizard .cal .d.start, .resa-wizard .cal .d.end {
  background: var(--r-accent);
  color: #fff;
  font-weight: 600;
  border-radius: 5px;
}
.resa-wizard .cal .d.start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.resa-wizard .cal .d.end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.resa-wizard .cal .d.single {
  background: var(--r-accent);
  color: #fff;
  border-radius: 5px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .resa-wizard .cal {
    grid-template-columns: 1fr;
  }
}
.resa-wizard .date-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 12px;
  border: 1px solid var(--r-line);
  border-radius: 10px;
  overflow: hidden;
}
.resa-wizard .date-strip .blk {
  flex: 1;
  padding: 10px 14px;
}
.resa-wizard .date-strip .blk + .blk {
  border-left: 1px solid var(--r-line);
}
.resa-wizard .date-strip .k {
  font-size: 10px;
  color: var(--r-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.resa-wizard .date-strip .v {
  font-family: "Inter Tight";
  font-size: 17px;
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: -0.01em;
  color: var(--r-ink);
}
.resa-wizard .date-strip .sub {
  color: var(--r-muted);
  font-size: 11.5px;
  margin-top: 1px;
}
.resa-wizard .search-box-wrapper {
  position: relative;
}
.resa-wizard .search-results-dropdown,
.resa-wizard .search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--r-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.resa-wizard .search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 100ms;
  border-bottom: 1px solid var(--r-line-2);
}
.resa-wizard .search-result-item:last-child {
  border-bottom: none;
}
.resa-wizard .search-result-item:hover, .resa-wizard .search-result-item.highlighted {
  background: var(--r-accent-50);
}
.resa-wizard .search-result-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--r-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.resa-wizard .search-result-info {
  flex: 1;
  min-width: 0;
}
.resa-wizard .search-result-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--r-ink);
}
.resa-wizard .search-result-meta {
  font-size: 12px;
  color: var(--r-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
  flex-wrap: wrap;
}
.resa-wizard .search-no-result {
  padding: 1.5rem;
  text-align: center;
  color: var(--r-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.resa-wizard .stagiaire-selected-card {
  background: #fff;
  border: 2px solid var(--r-accent);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 1rem;
  box-shadow: 0 4px 12px rgba(6, 118, 71, 0.1);
}
.resa-wizard .stagiaire-selected-header {
  background: linear-gradient(135deg, var(--r-accent) 0%, #6366f1 100%);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.resa-wizard .stagiaire-selected-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.resa-wizard .stagiaire-selected-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.resa-wizard .stagiaire-selected-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}
.resa-wizard .stagiaire-selected-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.resa-wizard .stagiaire-selected-change {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.resa-wizard .stagiaire-selected-change:hover {
  background: rgba(255, 255, 255, 0.25);
}
.resa-wizard .stagiaire-selected-body {
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .resa-wizard .stagiaire-selected-body {
    grid-template-columns: 1fr;
  }
}
.resa-wizard .stagiaire-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.resa-wizard .stagiaire-info-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--r-muted);
  font-weight: 600;
}
.resa-wizard .stagiaire-info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--r-ink);
  word-break: break-word;
}
.resa-wizard .stagiaire-info-value.mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--r-accent);
}
.resa-wizard .stagiaire-trajet-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--r-line-2, var(--neutral-200));
}
.resa-wizard .stagiaire-trajet-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--r-muted, var(--neutral-500));
  font-weight: 700;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.resa-wizard .stagiaire-trajet-title i {
  font-size: 10px;
}
.resa-wizard .stagiaire-trajet-badge {
  --t-accent: var(--neutral-600);
  --t-bg: var(--neutral-50);
  --t-border: var(--neutral-200);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: var(--t-bg);
  border: 1px solid var(--t-border);
  border-left: 3px solid var(--t-accent);
  border-radius: 8px;
  font-size: 13px;
  color: var(--neutral-800);
}
.resa-wizard .stagiaire-trajet-badge.mode-train {
  --t-accent: var(--blue-600);
  --t-bg: var(--blue-50);
  --t-border: var(--blue-200);
}
.resa-wizard .stagiaire-trajet-badge.mode-avion {
  --t-accent: var(--purple-600);
  --t-bg: var(--purple-50);
  --t-border: var(--purple-200);
}
.resa-wizard .stagiaire-trajet-badge.mode-voiture {
  --t-accent: var(--amber-700);
  --t-bg: var(--amber-50);
  --t-border: var(--amber-200);
}
.resa-wizard .stagiaire-trajet-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--t-accent);
}
.resa-wizard .stagiaire-trajet-mode i {
  font-size: 13px;
}
.resa-wizard .stagiaire-trajet-itineraire {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--neutral-800);
}
.resa-wizard .stagiaire-trajet-duree {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--neutral-600);
  font-variant-numeric: tabular-nums;
}
.resa-wizard .stagiaire-trajet-duree i {
  font-size: 10px;
  opacity: 0.7;
}
.resa-wizard .stagiaire-trajet-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--red-700);
  background: var(--red-50);
  border: 1px solid var(--red-200);
  padding: 3px 8px;
  border-radius: 6px;
}
.resa-wizard .stagiaire-trajet-warning i {
  font-size: 10px;
}
.resa-wizard .stagiaire-trajet-empty {
  color: var(--neutral-500);
  font-style: italic;
  font-weight: 500;
}
.resa-wizard .profile {
  border: 1px solid var(--r-line);
  border-radius: 12px;
  overflow: hidden;
}
.resa-wizard .profile-h {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
  border-bottom: 1px solid var(--r-line-2);
  flex-wrap: wrap;
}
.resa-wizard .profile-av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--r-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 16px;
  font-family: "Inter Tight";
  flex-shrink: 0;
}
.resa-wizard .profile-name {
  flex: 1;
  min-width: 160px;
}
.resa-wizard .profile-name h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--r-ink);
}
.resa-wizard .profile-name .sub {
  font-size: 12.5px;
  color: var(--r-muted);
  margin-top: 2px;
}
.resa-wizard .profile-body {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}
.resa-wizard .profile-body .f {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.resa-wizard .profile-body .f .k {
  font-size: 11px;
  color: var(--r-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.resa-wizard .profile-body .f .v {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--r-ink);
}
.resa-wizard .profile-body .f .v a {
  color: var(--r-accent);
  text-decoration: none;
}
.resa-wizard .profile-banner {
  padding: 12px 20px;
  background: var(--r-accent-50);
  border-top: 1px solid var(--r-accent-100);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--r-accent);
}
.resa-wizard .profile-banner i {
  flex-shrink: 0;
}
.resa-wizard .hebe-tabs {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--r-line);
  border-radius: 8px;
  padding: 3px;
  background: #fff;
}
.resa-wizard .hebe-tabs button, .resa-wizard .hebe-tabs a {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 6px;
  color: var(--r-muted);
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.resa-wizard .hebe-tabs button.on, .resa-wizard .hebe-tabs a.on {
  background: var(--r-ink);
  color: #fff;
}
.resa-wizard [hidden] {
  display: none !important;
}
.resa-wizard .hebe-section,
.resa-wizard .hebe-config-section {
  margin-top: 18px;
}
.resa-wizard .hebe-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.resa-wizard .hebe-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--r-accent);
  margin-bottom: 4px;
}
.resa-wizard .hebe-section-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--r-ink);
  margin: 0;
}
.resa-wizard .hebe-section-hint {
  font-size: 12.5px;
  color: var(--r-muted);
  line-height: 1.5;
}
.resa-wizard .hebe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .resa-wizard .hebe-grid {
    grid-template-columns: 1fr;
  }
}
.resa-wizard .hebe-card-v2 {
  position: relative;
  display: grid;
  grid-template-columns: 168px 1fr;
  background: #fff;
  border: 1.5px solid var(--r-line);
  border-radius: var(--r-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.resa-wizard .hebe-card-v2:hover:not(.is-unavailable) {
  border-color: var(--r-muted-2);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06);
}
.resa-wizard .hebe-card-v2.is-selected {
  border-color: var(--r-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r-accent) 18%, transparent), 0 4px 14px rgba(6, 118, 71, 0.12);
}
.resa-wizard .hebe-card-v2.is-unavailable {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
@media (max-width: 640px) {
  .resa-wizard .hebe-card-v2 {
    grid-template-columns: 1fr;
  }
  .resa-wizard .hebe-card-v2-visual {
    height: 160px;
  }
}
.resa-wizard .hebe-card-v2-visual {
  position: relative;
  background: var(--r-line-2);
  overflow: hidden;
  border-right: 1px solid var(--r-line-2);
}
.resa-wizard .hebe-card-v2-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.resa-wizard .hebe-card-v2-visual-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px);
  color: var(--r-muted);
  font-size: 2.4rem;
}
.resa-wizard .hebe-card-v2-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.resa-wizard .hebe-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.resa-wizard .hebe-badge.hebe-badge-accent {
  background: var(--r-accent);
  color: #fff;
}
.resa-wizard .hebe-badge.hebe-badge-warn {
  background: #fef6ee;
  color: var(--r-warn);
  border: 1px solid #fdd9b3;
}
.resa-wizard .hebe-card-v2-details {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.94);
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--r-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(4px);
  z-index: 3;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.resa-wizard .hebe-card-v2-details:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.resa-wizard .hebe-card-v2-body {
  padding: 14px 16px 14px; /* padding-bas : les infos ne sont pas collées au vert (l'image, elle, le touche) */
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.resa-wizard .hebe-card-v2-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.resa-wizard .hebe-kicker-type {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--r-muted);
}
.resa-wizard .hebe-kicker-stars {
  color: #f59e0b;
  font-size: 10.5px;
  display: inline-flex;
  gap: 1px;
}
.resa-wizard .hebe-card-v2-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--r-ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.resa-wizard .hebe-card-v2-desc {
  font-size: 12.5px;
  color: var(--r-muted);
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.resa-wizard .hebe-card-v2-feats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}
.resa-wizard .hebe-card-v2-foot {
  grid-column: 1/-1; /* pleine largeur : le vert Enedis passe aussi sous l'image */
  margin-top: 0; /* pas de blanc : l'image (et le corps) touchent le bloc vert */
  padding: 12px 16px 12px 184px; /* contenu aligné sous le corps, vert sous l'image */
  border-top: 1px solid #a7f3d0;
  background: #ecfdf3; /* vert clair — même teinte que le chip « nuits couvertes » */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.resa-wizard .hebe-card-v2-price .amount {
  font-family: "Inter Tight", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--r-ok); /* vert profond : le montant ressort sur le vert clair */
  line-height: 1.1;
}
.resa-wizard .hebe-card-v2-price .amount-free {
  color: var(--r-ok);
}
.resa-wizard .hebe-card-v2-price .unit {
  font-size: 11px;
  color: var(--r-muted);
  margin-top: 2px;
}
.resa-wizard .hebe-card-v2-state {
  /* « Choisir » : pilule blanche à texte/bordure verts — CTA lisible sur le vert clair. */
  /* « Sélectionné » : vert plein = choix confirmé. */
}
.resa-wizard .hebe-card-v2-state .hebe-state-off {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--r-ok);
  padding: 6px 12px;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  background: #fff;
  transition: all 0.15s;
}
.resa-wizard .hebe-card-v2-state .hebe-state-on {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  padding: 6px 12px;
  background: var(--r-ok);
  border-radius: 8px;
  letter-spacing: 0.02em;
}
.resa-wizard .hebe-card-v2:hover:not(.is-unavailable):not(.is-selected) .hebe-state-off {
  border-color: var(--r-ok);
  color: var(--r-ok);
  background: #d1fae5; /* teinte distincte du pied (#ecfdf3) pour que le survol se voie */
}
@media (max-width: 640px) {
  .resa-wizard .hebe-card-v2-foot {
    grid-column: 1;
    padding-left: 16px;
  }
}
.resa-wizard .hebe-empty-state {
  margin-top: 24px;
  padding: 40px 24px;
  text-align: center;
  background: #fff;
  border: 1.5px dashed var(--r-line);
  border-radius: var(--r-radius-lg);
  color: var(--r-muted);
}
.resa-wizard .hebe-empty-state i {
  font-size: 28px;
  color: var(--r-accent);
  opacity: 0.6;
  margin-bottom: 12px;
  display: block;
}
.resa-wizard .hebe-empty-state h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--r-ink);
  margin: 0 0 4px;
}
.resa-wizard .hebe-empty-state p {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}
.resa-wizard .hebe-config-section {
  margin-top: 28px;
  animation: hebe-config-in 0.25s ease-out;
}
@keyframes hebe-config-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.resa-wizard .hebe-config-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--r-accent-50);
  border: 1px solid var(--r-accent-100);
  border-radius: var(--r-radius-lg);
}
.resa-wizard .hebe-config-empty > i {
  font-size: 28px;
  color: var(--r-accent);
  flex-shrink: 0;
}
.resa-wizard .hebe-config-empty strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--r-ink);
  margin-bottom: 2px;
}
.resa-wizard .hebe-config-empty p {
  font-size: 12.5px;
  color: var(--r-muted);
  margin: 0;
  line-height: 1.5;
}
.resa-wizard .hebe-config-panel {
  background: #fff;
  border: 1.5px solid var(--r-line);
  border-radius: var(--r-radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.resa-wizard .hebe-formules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.resa-wizard .hebe-formules-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--r-muted);
}
.resa-wizard .hebe-formules-head i {
  color: var(--r-accent);
}
.resa-wizard .hebe-formules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .resa-wizard .hebe-formules-grid {
    grid-template-columns: 1fr;
  }
}
.resa-wizard .hebe-formule {
  position: relative;
  display: block;
  padding: 14px;
  border: 1.5px solid var(--r-line);
  border-radius: var(--r-radius-md);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.resa-wizard .hebe-formule input[type=radio] {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.resa-wizard .hebe-formule:hover {
  border-color: var(--r-muted-2);
}
.resa-wizard .hebe-formule:has(input:checked), .resa-wizard .hebe-formule.is-on {
  border-color: var(--r-accent);
  background: var(--r-accent-50);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r-accent) 12%, transparent);
}
.resa-wizard .hebe-formule.hebe-formule-derogatoire {
  border-style: dashed;
}
.resa-wizard .hebe-formule.hebe-formule-derogatoire:has(input:checked) {
  border-style: solid;
}
.resa-wizard .hebe-formule-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resa-wizard .hebe-formule-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.resa-wizard .hebe-formule-head i {
  color: var(--r-accent);
  font-size: 13px;
}
.resa-wizard .hebe-formule-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--r-ink);
  flex: 1;
}
.resa-wizard .hebe-formule-desc {
  font-size: 12px;
  color: var(--r-muted);
  line-height: 1.45;
}
.resa-wizard .hebe-formule-price {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--r-ink);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.resa-wizard .hebe-formule-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--r-warn);
  background: #fef6ee;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
}
.resa-wizard .hebe-formule-note i {
  font-size: 10px;
  color: var(--r-warn);
}
.resa-wizard .hebe-formule-detail {
  list-style: none;
  padding: 8px 0 0;
  margin: 6px 0 0;
  border-top: 1px dashed var(--r-line-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--r-muted);
  font-variant-numeric: tabular-nums;
}
.resa-wizard .hebe-formule-detail li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
  text-transform: capitalize;
}
.resa-wizard .hebe-formule-detail li i {
  font-size: 10px;
}
.resa-wizard .hebe-resto {
  padding-top: 16px;
  border-top: 1px solid var(--r-line-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resa-wizard .hebe-resto-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--r-muted);
}
.resa-wizard .hebe-resto-label i {
  color: var(--r-accent);
}
.resa-wizard .hebe-resto-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fafbfc;
  border: 1px solid var(--r-line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--r-muted);
}
.resa-wizard .hebe-resto-empty i {
  color: var(--r-accent);
}
.resa-wizard .hint.hint-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: var(--r-ink);
  border-left: 3px solid #f59e0b;
}
.resa-wizard .hint.hint-warn i {
  color: #d97706;
  font-size: 16px;
}
.resa-wizard .hint.hint-warn strong {
  color: var(--r-ink);
  font-weight: 600;
}
.resa-wizard .hint.hint-warn .sub {
  color: var(--r-muted);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5;
}
.resa-wizard .hebe-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.resa-wizard .hebe-card {
  border: 1px solid var(--r-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
}
.resa-wizard .hebe-card:hover {
  border-color: var(--r-muted-2);
}
.resa-wizard .hebe-card.sel, .resa-wizard .hebe-card.is-selected {
  border-color: var(--r-accent) !important;
  box-shadow: 0 0 0 3px rgba(6, 118, 71, 0.15) !important;
}
.resa-wizard .hebe-card.disabled, .resa-wizard .hebe-card.is-unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}
.resa-wizard .hebe-card .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.resa-wizard .hebe-card h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--r-ink);
  margin: 0;
}
.resa-wizard .hebe-card .tag {
  font-size: 11px;
  color: var(--r-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.resa-wizard .hebe-card .desc {
  font-size: 12.5px;
  color: var(--r-muted);
  line-height: 1.5;
  flex: 1;
}
.resa-wizard .hebe-card .feats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.resa-wizard .hebe-card .price {
  font-family: "Inter Tight";
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--r-ink);
}
.resa-wizard .hebe-card .price-sub {
  font-size: 11px;
  color: var(--r-muted);
}
.resa-wizard .hebe-card-img {
  width: 100%;
  height: 140px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: var(--r-line-2);
  border-bottom: 1px solid var(--r-line-2);
}
.resa-wizard .hebe-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.resa-wizard .hebe-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.resa-wizard .hebe-card-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--r-line-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: #fafbfc;
  gap: 8px;
}
.resa-wizard .hebe-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px);
  color: var(--r-muted);
  font-size: 2.5rem;
}
.resa-wizard .hebe-card-details-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--r-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(4px);
  z-index: 5;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.resa-wizard .hebe-card-details-btn:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.resa-wizard .conf-rows {
  display: flex;
  flex-direction: column;
}
.resa-wizard .conf-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--r-line-2);
  align-items: center;
}
.resa-wizard .conf-row:last-child {
  border-bottom: 0;
}
.resa-wizard .conf-k {
  font-size: 11.5px;
  color: var(--r-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.resa-wizard .conf-v {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--r-ink);
}
.resa-wizard .conf-v .sub {
  color: var(--r-muted);
  font-weight: 400;
  margin-top: 2px;
  font-size: 12.5px;
}
.resa-wizard .conf-edit {
  font-size: 12.5px;
  color: var(--r-accent);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.resa-wizard .conf-edit:hover {
  text-decoration: underline;
}
.resa-wizard .conf-total {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--r-ink);
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.resa-wizard .conf-total .l {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
.resa-wizard .conf-total .a {
  font-family: "Inter Tight";
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.resa-wizard .consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--r-line);
  border-radius: 10px;
  margin-top: 16px;
  cursor: pointer;
  user-select: none;
}
.resa-wizard .consent.on {
  background: var(--r-accent-50);
  border-color: var(--r-accent-100);
}
.resa-wizard .consent .cb {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--r-line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  background: #fff;
}
.resa-wizard .consent.on .cb {
  background: var(--r-accent);
  border-color: var(--r-accent);
  color: #fff;
}
.resa-wizard .consent p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.resa-wizard .consent p b {
  font-weight: 600;
}
.resa-wizard .consent .sub {
  color: var(--r-muted);
  font-size: 12px;
  margin-top: 3px;
}
.resa-wizard .hint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fafbfc;
  border: 1px solid var(--r-line-2);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--r-muted);
  line-height: 1.5;
}
.resa-wizard .hint i {
  color: var(--r-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.resa-wizard .footbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--r-line);
  z-index: 1000;
  width: 100%;
}
.resa-wizard .footbar-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px 2rem;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.resa-wizard .progress {
  flex: 0 0 200px;
}
.resa-wizard .progress .track {
  height: 4px;
  background: var(--r-line);
  border-radius: 99px;
  overflow: hidden;
}
.resa-wizard .progress .fill {
  height: 100%;
  background: var(--r-accent);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.resa-wizard .progress .txt {
  font-size: 11.5px;
  color: var(--r-muted);
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
}
.resa-wizard .foot-total {
  font-size: 12px;
  color: var(--r-muted);
}
.resa-wizard .foot-total b {
  color: var(--r-ink);
  font-family: "Inter Tight";
  font-size: 18px;
  font-weight: 600;
  margin-left: 8px;
  letter-spacing: -0.01em;
}
.resa-wizard .foot-spacer {
  flex: 1;
}
.resa-wizard .foot-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.resa-wizard .divider {
  height: 1px;
  background: var(--r-line-2);
  margin: 16px 0;
}
.resa-wizard .hotel-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}
.resa-wizard .hotel-modal-box {
  background: #fff;
  border-radius: 20px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.resa-wizard .hotel-modal-gallery {
  height: 260px;
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--r-line-2);
}
.resa-wizard .hotel-modal-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.resa-wizard .hotel-modal-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--r-line-2);
  color: var(--r-muted);
  font-size: 3rem;
}
.resa-wizard .carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
.resa-wizard .carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.resa-wizard .carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.resa-wizard .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.resa-wizard .carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.resa-wizard .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--r-ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 150ms, box-shadow 150ms, transform 150ms;
  z-index: 10;
}
.resa-wizard .carousel-btn:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) scale(1.05);
}
.resa-wizard .carousel-prev {
  left: 10px;
}
.resa-wizard .carousel-next {
  right: 10px;
}
.resa-wizard .carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}
.resa-wizard .carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
  padding: 0;
}
.resa-wizard .carousel-dot.is-active {
  background: #fff;
  width: 20px;
  border-radius: 99px;
}
.resa-wizard .carousel-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  z-index: 10;
  backdrop-filter: blur(4px);
}
.resa-wizard .carousel-counter .carousel-current {
  font-weight: 700;
}
.resa-wizard .hotel-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 10;
  transition: background 150ms ease;
}
.resa-wizard .hotel-modal-close:hover {
  background: rgba(0, 0, 0, 0.65);
}
.resa-wizard .hotel-modal-body {
  padding: 1.5rem;
}
.resa-wizard .hotel-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
.resa-wizard .hotel-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--r-ink);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}
.resa-wizard .hotel-modal-stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 2px;
}
.resa-wizard .hotel-modal-infos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--r-line);
}
.resa-wizard .hotel-modal-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--r-muted);
}
.resa-wizard .hotel-modal-info-item i {
  color: var(--r-accent);
  font-size: 12px;
  width: 14px;
  text-align: center;
}
.resa-wizard .hotel-modal-info-item a {
  color: var(--r-accent);
  text-decoration: none;
}
.resa-wizard .hotel-modal-info-item a:hover {
  text-decoration: underline;
}
.resa-wizard .hotel-modal-section {
  margin-bottom: 1.25rem;
}
.resa-wizard .hotel-modal-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--r-muted);
  margin-bottom: 8px;
}
.resa-wizard .hotel-modal-desc {
  font-size: 13px;
  color: var(--r-muted);
  line-height: 1.6;
  margin: 0;
}
.resa-wizard .hotel-modal-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.resa-wizard .hotel-modal-cat {
  background: var(--r-line-2);
  border: 1px solid var(--r-line);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--r-ink);
}
.resa-wizard .hotel-modal-loading {
  text-align: center;
  padding: 3rem;
  color: var(--r-muted);
  font-size: 14px;
}
.resa-wizard .hotel-modal-loading i {
  margin-right: 8px;
}
.resa-wizard .leaflet-container {
  font-family: "Inter", system-ui, sans-serif !important;
  background: #f0f2f6;
  z-index: 1 !important;
}
.resa-wizard .leaflet-div-icon {
  background: transparent !important;
  border: none !important;
}
.resa-wizard .leaflet-marker-pane,
.resa-wizard .leaflet-marker-pane > * {
  z-index: 600;
}
.resa-wizard .map-marker-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: auto;
}
.resa-wizard .map-marker-label {
  background: #fff;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--r-ink);
  white-space: nowrap;
  margin-bottom: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.resa-wizard .map-marker-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--marker-color, var(--r-accent));
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  position: relative;
}
.resa-wizard .map-marker-wrapper.is-selected .map-marker-dot {
  transform: scale(1.25);
}

.direction-nav {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: var(--space-4);
}

.direction-nav-link {
  color: var(--neutral-500);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background 150ms, color 150ms;
}
.direction-nav-link:hover, .direction-nav-link.active {
  background: var(--blue-50);
  color: var(--blue-700);
}

.direction-kpi-grid-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 1100px) {
  .direction-kpi-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.direction-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 1100px) {
  .direction-charts-grid {
    grid-template-columns: 1fr;
  }
}

.direction-chart-full {
  grid-column: 1/-1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  box-shadow: var(--card-shadow);
}

.direction-chart-half {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  box-shadow: var(--card-shadow);
}

.direction-section-title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-500);
  margin-bottom: var(--space-4);
  font-weight: 600;
}

.direction-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.direction-alert-card {
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: var(--card-radius);
  padding: var(--space-4);
  color: var(--red-700);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.direction-alert-card.warning {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-700);
}
.direction-alert-card.success {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
}

.direction-alert-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.direction-alert-text {
  font-size: var(--text-sm);
}

.direction-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  color: var(--neutral-700);
}
.direction-table th, .direction-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--neutral-100);
  font-size: var(--text-sm);
}
.direction-table th {
  background: var(--neutral-50);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--neutral-500);
  letter-spacing: 0.05em;
}
.direction-table tr:last-child td {
  border-bottom: 0;
}
.direction-table tbody tr:hover {
  background: var(--neutral-50);
}

/* ==================== COCKPIT DIRECTION ==================== */
.cockpit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cockpit-subtitle {
  margin: 0;
  color: var(--neutral-600);
  font-size: var(--text-sm);
}

.cockpit-updated {
  color: var(--neutral-500);
  font-size: var(--text-xs);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cockpit-filters {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  position: sticky;
  top: 0;
  z-index: 20;
}

.cockpit-period-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--neutral-100);
  border-radius: 10px;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.cockpit-period-tab {
  flex: 1;
  min-width: 140px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cockpit-period-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.cockpit-period-tab.active {
  background: var(--card-bg);
  color: var(--blue-600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cockpit-filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.cockpit-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cockpit-filter-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
  font-weight: 600;
}

.cockpit-alertes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-5);
}

.cockpit-alerte {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-left: 4px solid;
}
.cockpit-alerte.cockpit-alerte-danger {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}
.cockpit-alerte.cockpit-alerte-warning {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
.cockpit-alerte.cockpit-alerte-info {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

.cockpit-section-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-700);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cockpit-section-title i {
  color: var(--blue-600);
}

.cockpit-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
@media (max-width: 1100px) {
  .cockpit-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .cockpit-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.cockpit-kpi {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cockpit-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.cockpit-kpi.cockpit-kpi-primary {
  border-left: 4px solid var(--blue-600);
}
.cockpit-kpi.cockpit-kpi-success {
  border-left: 4px solid #10b981;
}
.cockpit-kpi.cockpit-kpi-success .cockpit-kpi-icon {
  background: #d1fae5;
  color: #047857;
}
.cockpit-kpi.cockpit-kpi-danger {
  border-left: 4px solid #ef4444;
}
.cockpit-kpi.cockpit-kpi-danger .cockpit-kpi-icon {
  background: #fee2e2;
  color: #b91c1c;
}

.cockpit-kpi-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--blue-50, #eff6ff);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.cockpit-kpi-body {
  flex: 1;
  min-width: 0;
}

.cockpit-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
  font-weight: 600;
  margin-bottom: 4px;
}

.cockpit-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.2;
}

.cockpit-kpi-value-text {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cockpit-kpi-sub {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: 2px;
}

.cockpit-kpi-evolution {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 6px;
}
.cockpit-kpi-evolution.up {
  color: #059669;
}
.cockpit-kpi-evolution.down {
  color: #dc2626;
}
.cockpit-kpi-evolution.neutral {
  color: var(--neutral-500);
}

.cockpit-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (max-width: 1100px) {
  .cockpit-charts-grid {
    grid-template-columns: 1fr;
  }
}

.cockpit-chart-full {
  grid-column: 1/-1;
}

.cockpit-chart-container {
  padding: var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
}

.cockpit-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.cockpit-chart-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--neutral-800);
}
.cockpit-chart-title i {
  color: var(--blue-600);
  margin-right: 6px;
}

/* ═══════════════════════════════════════════
   MONDE STAGIAIRE — Mon Séjour
   Style : Premium boarding pass / Travel app
   Mobile-first
═══════════════════════════════════════════ */
:root {
  --s-green: #16A34A;
  --s-green-light: #F0FDF4;
  --s-green-dark: #15803D;
  --s-green-faint: #DCFCE7;
  --s-amber: #F59E0B;
  --s-amber-light: #FFFBEB;
  --s-red: #DC2626;
  --s-red-light: #FEF2F2;
  --s-blue: #2563EB;
  --s-blue-light: #EFF6FF;
  --s-text: #111827;
  --s-text-2: #6B7280;
  --s-text-3: #9CA3AF;
  --s-border: #E5E7EB;
  --s-bg: #F9FAFB;
  --s-white: #FFFFFF;
  --s-shadow: 0 1px 3px rgba(0,0,0,0.08),
              0 1px 2px rgba(0,0,0,0.04);
  --s-shadow-md: 0 4px 12px rgba(0,0,0,0.08),
                 0 2px 4px rgba(0,0,0,0.04);
  --s-shadow-lg: 0 8px 24px rgba(0,0,0,0.10),
                 0 4px 8px rgba(0,0,0,0.06);
  --s-radius: 16px;
  --s-radius-sm: 10px;
  --s-radius-full: 9999px;
}

/* ── Layout général ── */
.layout-stagiaire {
  min-height: 100vh;
  background: var(--s-bg);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.s-header {
  background: var(--s-white);
  border-bottom: 1px solid var(--s-border);
  padding: 0 1.25rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 var(--s-border);
}

.s-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--s-green);
  letter-spacing: -0.3px;
}

.s-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--s-green);
}

.s-brand-img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.s-header-secure {
  font-size: 11px;
  color: var(--s-text-3);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Contenu principal ── */
.s-content {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  padding: 1.25rem 1rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Hero ── */
.s-hero {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.s-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--s-radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 14px;
}

.s-status-pill.confirmed {
  background: var(--s-green-faint);
  color: var(--s-green-dark);
}

.s-status-pill.pending {
  background: var(--s-amber-light);
  color: #92400E;
}

.s-status-pill.cancelled {
  background: var(--s-red-light);
  color: var(--s-red);
}

.s-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.s-hero-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--s-text);
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}

.s-hero-sub {
  font-size: 14px;
  color: var(--s-text-2);
  margin: 0;
}

/* ── Cards génériques ── */
.s-card {
  background: var(--s-white);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  overflow: hidden;
}

.s-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--s-border);
}

.s-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--s-green-light);
  color: var(--s-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.s-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--s-text-2);
}

.s-card-body {
  padding: 16px;
}

/* ── Boarding Pass Card ── */
.s-boarding {
  background: var(--s-white);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow-md);
  overflow: hidden;
  position: relative;
}

.s-boarding-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 20px 20px 24px;
  color: white;
  position: relative;
}

.s-boarding-header.avion {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1b69 50%, #11998e 100%);
}

.s-boarding-header.voiture {
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

.s-boarding-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.s-boarding-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.s-boarding-city {
  flex: 1;
}

.s-boarding-city-code {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: white;
  line-height: 1;
  margin-bottom: 4px;
}

.s-boarding-city-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.s-boarding-city.right {
  text-align: right;
}

.s-boarding-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.s-boarding-arrow-line {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
}

.s-boarding-arrow-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
}

.s-boarding-transport-icon {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
}

.s-boarding-train-number {
  text-align: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.s-boarding-train-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}

.s-boarding-train-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #4ade80;
  font-family: var(--font-mono);
}

/* ── Découpe billet ── */
.s-boarding-tear {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 -1px;
}

.s-boarding-tear::before {
  content: "";
  position: absolute;
  left: -12px;
  width: 24px;
  height: 24px;
  background: var(--s-bg);
  border-radius: 50%;
  z-index: 1;
}

.s-boarding-tear::after {
  content: "";
  position: absolute;
  right: -12px;
  width: 24px;
  height: 24px;
  background: var(--s-bg);
  border-radius: 50%;
  z-index: 1;
}

.s-boarding-tear-line {
  width: 100%;
  border: none;
  border-top: 2px dashed var(--s-border);
  margin: 0 8px;
}

/* ── Infos billet ── */
.s-boarding-body {
  padding: 16px 20px;
}

.s-boarding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.s-boarding-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px 8px;
}

.s-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s-info-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--s-text-3);
  font-weight: 600;
}

.s-info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--s-text);
}

.s-info-value.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--s-text-2);
}

/* ── Statut billet ── */
.s-boarding-footer {
  padding: 12px 20px;
  background: var(--s-bg);
  border-top: 1px solid var(--s-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s-billet-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--s-radius-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.s-billet-status.emis {
  background: var(--s-green-faint);
  color: var(--s-green-dark);
}

.s-billet-status.reserve {
  background: var(--s-amber-light);
  color: #92400E;
}

.s-billet-status.non_reserve {
  background: var(--s-red-light);
  color: var(--s-red);
}

.s-billet-message {
  font-size: 11px;
  color: var(--s-text-2);
}

/* ── Carte Navette ── */
.s-navette-route {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.s-navette-point {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.s-navette-point-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--s-text-3);
  font-weight: 600;
}

.s-navette-point-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--s-text);
}

.s-navette-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--s-green-light);
  color: var(--s-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Carte Hébergement ── */
.s-hotel-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--s-text);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.s-hotel-address {
  font-size: 13px;
  color: var(--s-text-2);
  margin: 0 0 14px;
}

.s-checkin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.s-checkin-item {
  background: var(--s-bg);
  border-radius: var(--s-radius-sm);
  padding: 10px 12px;
}

.s-checkin-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--s-text-3);
  font-weight: 600;
  margin-bottom: 3px;
}

.s-checkin-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--s-text);
}

.s-maps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  background: var(--s-green-light);
  color: var(--s-green-dark);
  border-radius: var(--s-radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms;
}

.s-maps-btn:hover {
  background: var(--s-green-faint);
}

/* ── Section Contact ── */
.s-contact-card {
  background: linear-gradient(135deg, var(--s-green) 0%, var(--s-green-dark) 100%);
  border-radius: var(--s-radius);
  padding: 24px 20px;
  text-align: center;
  color: white;
}

.s-contact-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 14px;
}

.s-contact-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.8;
  margin-bottom: 8px;
}

.s-contact-phone {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.s-contact-hours {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 4px;
}

.s-contact-email {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 18px;
}

.s-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: white;
  color: var(--s-green-dark);
  border-radius: var(--s-radius-full);
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 150ms, box-shadow 150ms;
  text-decoration: none;
}

.s-contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Formulaire contact inline ── */
.s-contact-form {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--s-radius-sm);
  padding: 14px;
  text-align: left;
}

.s-contact-form textarea {
  width: 100%;
  background: white;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--s-text);
  resize: none;
  height: 80px;
  margin-bottom: 10px;
  font-family: var(--font-family);
}

.s-contact-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.s-contact-form-send {
  padding: 8px 16px;
  background: white;
  color: var(--s-green-dark);
  border: none;
  border-radius: var(--s-radius-full);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.s-contact-form-cancel {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: var(--s-radius-full);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.s-contact-confirmation {
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ── Footer ── */
.s-footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 11px;
  color: var(--s-text-3);
  line-height: 1.7;
}

/* ── Animations ── */
@keyframes s-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.s-card,
.s-boarding,
.s-contact-card {
  animation: s-fade-up 400ms ease-out both;
}

.s-card:nth-child(1) {
  animation-delay: 0ms;
}

.s-card:nth-child(2) {
  animation-delay: 60ms;
}

.s-card:nth-child(3) {
  animation-delay: 120ms;
}

.s-card:nth-child(4) {
  animation-delay: 180ms;
}

.s-card:nth-child(5) {
  animation-delay: 240ms;
}

.s-card:nth-child(6) {
  animation-delay: 300ms;
}

.s-boarding {
  animation-delay: 80ms;
}

/* ── Page expirée ── */
.s-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 2rem;
  gap: 12px;
}

.s-expired-icon {
  font-size: 56px;
  color: var(--s-text-3);
  margin-bottom: 8px;
}

.s-expired-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--s-text);
  letter-spacing: -0.3px;
}

.s-expired-sub {
  font-size: 14px;
  color: var(--s-text-2);
}

.s-expired-phone {
  font-size: 18px;
  font-weight: 700;
  color: var(--s-green);
  margin-top: 8px;
}

/* ── Carte Chauffeur ─── */
.s-chauffeur-card {
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
  border: 1px solid #DDD6FE;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.s-chauffeur-card img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.s-chauffeur-initials {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4F46E5, #9333EA);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.s-chauffeur-initials.amber {
  background: linear-gradient(135deg, #D97706, #F59E0B);
}

.s-chauffeur-body {
  flex: 1;
  min-width: 0;
}
.s-chauffeur-body .s-chauffeur-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #7C3AED;
  margin-bottom: 1px;
}
.s-chauffeur-body .s-chauffeur-name {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 3px;
}
.s-chauffeur-body .s-chauffeur-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: #4B5563;
}
.s-chauffeur-body .s-chauffeur-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.s-chauffeur-body .s-chauffeur-meta i {
  color: #6B7280;
  font-size: 10px;
}
.s-chauffeur-body .s-chauffeur-meta .s-plaque {
  background: #1F2937;
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* ── Carte Repas (dîners par soir) ─── */
.s-repas-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
}

.s-repas-sep {
  border-bottom: 1px solid var(--s-border, #E2E8F0);
  margin-bottom: 4px;
}

.s-repas-date {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  padding: 6px 0;
  background: linear-gradient(135deg, #FED7AA, #FEF3C7);
  border-radius: 8px;
}
.s-repas-date .s-repas-day {
  font-size: 20px;
  font-weight: 700;
  color: #C2410C;
  line-height: 1;
}
.s-repas-date .s-repas-dow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #C2410C;
  margin-top: 2px;
}

.s-repas-info {
  flex: 1;
  min-width: 0;
}
.s-repas-info .s-repas-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--s-text, #0F172A);
}
.s-repas-info .s-repas-name.muted {
  color: var(--s-text-2, #64748B);
  font-weight: 500;
  font-style: italic;
}
.s-repas-info .s-repas-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: var(--s-text-2, #64748B);
  margin-top: 3px;
}
.s-repas-info .s-repas-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.s-repas-info .s-repas-meta i {
  color: #C2410C;
  font-size: 10px;
}
.s-repas-info .s-repas-heure {
  font-size: 11px;
  color: var(--s-text-2, #64748B);
  margin-top: 4px;
}
.s-repas-info .s-repas-heure i {
  color: #C2410C;
  font-size: 10px;
  margin-right: 4px;
}
.s-repas-info .s-repas-commentaire {
  font-size: 11.5px;
  color: var(--s-text-2, #64748B);
  margin-top: 6px;
  padding: 6px 9px;
  background: var(--s-bg-alt, #F8FAFC);
  border-radius: 6px;
  font-style: italic;
}
.s-repas-info .s-repas-commentaire i {
  color: #C2410C;
  margin-right: 4px;
  font-size: 10px;
}

/* ── Bandeau récap chaîne (correspondances) ─── */
.s-chain-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #F5F3FF, #EEF2FF);
  border: 1px solid #DDD6FE;
  border-radius: 10px;
  font-size: 12.5px;
  color: #4C1D95;
}
.s-chain-summary i {
  color: #7C3AED;
  font-size: 14px;
  flex-shrink: 0;
}
.s-chain-summary strong {
  color: #4C1D95;
  font-weight: 700;
}

/* ── Transition correspondance entre 2 boarding passes ─── */
.s-correspondance {
  display: flex;
  align-items: stretch;
  margin: -4px 24px;
  position: relative;
}

.s-correspondance-dot {
  width: 3px;
  background: #E5E7EB;
  margin: 0 auto;
  flex-shrink: 0;
  min-height: 14px;
}
.s-correspondance-dot:first-child {
  width: 3px;
}

.s-correspondance-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 6px 10px;
  background: #FEF9E7;
  border: 1px dashed #F59E0B;
  border-radius: 8px;
  font-size: 12px;
}
.s-correspondance-content i {
  color: #B45309;
  font-size: 16px;
  flex-shrink: 0;
}
.s-correspondance-content strong {
  display: block;
  color: #92400E;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 1px;
}

.s-correspondance-meta {
  color: #78350F;
  font-size: 11.5px;
}
.s-correspondance-meta strong {
  display: inline;
  font-size: 11.5px;
}

/* ── Réf. THRIPS en pied de trajet aller ─── */
.s-thrips-ref {
  margin: -4px 0 12px;
  padding: 8px 14px;
  background: var(--s-bg-alt, #F8FAFC);
  border: 1px solid var(--s-border, #E2E8F0);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--s-text-2);
}
.s-thrips-ref i {
  color: var(--s-text-3);
  font-size: 11px;
}
.s-thrips-ref .mono {
  font-family: monospace;
  color: var(--s-text);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .s-content {
    padding: 1rem 0.75rem 5rem;
  }
  .s-hero-name {
    font-size: 22px;
  }
  .s-boarding-city-code {
    font-size: 26px;
  }
  .s-boarding-train-value {
    font-size: 18px;
  }
  .s-boarding-grid {
    grid-template-columns: 1fr 1fr;
  }
  .s-contact-phone {
    font-size: 20px;
  }
  .s-correspondance {
    margin: -4px 8px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   RESERVATIONS — page "Mes réservations"
   Toutes les classes scopées sous .resa-list pour éviter les
   conflits avec le reste du design system.
   ═══════════════════════════════════════════════════════════════ */
.resa-list {
  /* Vues interchangeables — une seule visible à la fois selon data-view. */
  /* ── Breadcrumb ────────────────────────────────────────────── */
  /* ── Page header ───────────────────────────────────────────── */
  /* ── Alertes hero ──────────────────────────────────────────── */
  /* ── KPI strip (unifié, calmer) ────────────────────────────── */
  /* ── Draft banner ──────────────────────────────────────────── */
  /* ── Toolbar (tabs + search + filtres + view switch) ───────── */
  /* ── Dropdown campus ───────────────────────────────────────── */
  /* ── Table ─────────────────────────────────────────────────── */
  /* ── Status badge ──────────────────────────────────────────── */
  /* ── Cards view ────────────────────────────────────────────── */
  /* ── Timeline view ─────────────────────────────────────────── */
  /* ── Bulk toolbar (reskin de l'existant) ───────────────────── */
  /* ── Empty state (global, pas de résultats) ────────────────── */
}
.resa-list[data-view=table] .view-cards, .resa-list[data-view=table] .view-timeline, .resa-list[data-view=cards] .view-table, .resa-list[data-view=cards] .view-timeline, .resa-list[data-view=timeline] .view-table, .resa-list[data-view=timeline] .view-cards {
  display: none;
}
.resa-list .resa-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-500);
  margin-bottom: 8px;
}
.resa-list .resa-breadcrumb a {
  color: var(--neutral-500);
  text-decoration: none;
  transition: color 120ms;
}
.resa-list .resa-breadcrumb a:hover {
  color: var(--neutral-900);
}
.resa-list .resa-breadcrumb i.sep {
  font-size: 8px;
  color: var(--neutral-300);
}
.resa-list .resa-breadcrumb strong {
  color: var(--neutral-800);
  font-weight: 600;
}
.resa-list .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.resa-list .page-header .page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  letter-spacing: -0.3px;
}
.resa-list .page-header .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 4px;
}
.resa-list .page-header .page-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.resa-list .alerts-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 1.25rem;
}
.resa-list .alert-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.resa-list .alert-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--neutral-300);
}
.resa-list .alert-card.warn::before {
  background: var(--amber-500);
}
.resa-list .alert-card.danger::before {
  background: var(--red-600);
}
.resa-list .alert-card.info::before {
  background: var(--blue-600);
}
.resa-list .alert-card:hover {
  border-color: var(--neutral-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.resa-list .alert-card:hover .alert-arrow {
  transform: translateX(2px);
  color: var(--neutral-700);
}
.resa-list .alert-card .alert-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.resa-list .alert-card.warn .alert-ic {
  background: var(--amber-50);
  color: var(--amber-700);
}
.resa-list .alert-card.danger .alert-ic {
  background: var(--red-50);
  color: var(--red-600);
}
.resa-list .alert-card.info .alert-ic {
  background: var(--blue-50);
  color: var(--blue-700);
}
.resa-list .alert-card .alert-body {
  flex: 1;
  min-width: 0;
}
.resa-list .alert-card .alert-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.resa-list .alert-card .alert-count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-700);
}
.resa-list .alert-card.warn .alert-count {
  background: var(--amber-100);
  color: var(--amber-700);
}
.resa-list .alert-card.danger .alert-count {
  background: var(--red-100);
  color: var(--red-700);
}
.resa-list .alert-card.info .alert-count {
  background: var(--blue-100);
  color: var(--blue-700);
}
.resa-list .alert-card .alert-desc {
  font-size: 12px;
  color: var(--neutral-500);
  margin-top: 3px;
  line-height: 1.4;
}
.resa-list .alert-card .alert-arrow {
  color: var(--neutral-300);
  font-size: 12px;
  align-self: center;
  transition: transform 150ms, color 150ms;
}
.resa-list .kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
  .resa-list .kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
.resa-list .kpi-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 18px;
  border-right: 1px solid var(--neutral-100);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease;
  min-width: 0;
}
.resa-list .kpi-card:last-child {
  border-right: none;
}
.resa-list .kpi-card:hover {
  background: var(--neutral-50);
}
.resa-list .kpi-card.is-selected {
  background: var(--blue-50);
  box-shadow: inset 3px 0 0 var(--blue-600);
}
@media (max-width: 1100px) {
  .resa-list .kpi-card:nth-child(2) {
    border-right: none;
  }
  .resa-list .kpi-card:nth-child(1), .resa-list .kpi-card:nth-child(2) {
    border-bottom: 1px solid var(--neutral-100);
  }
}
.resa-list .kpi-card .kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.resa-list .kpi-card .kpi-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.resa-list .kpi-card .kpi-icon.kpi-icon-blue {
  background: var(--blue-50);
  color: var(--blue-600);
}
.resa-list .kpi-card .kpi-icon.kpi-icon-green {
  background: var(--green-50);
  color: var(--green-600);
}
.resa-list .kpi-card .kpi-icon.kpi-icon-amber {
  background: var(--amber-50);
  color: #D97706;
}
.resa-list .kpi-card .kpi-icon.kpi-icon-red {
  background: var(--red-50);
  color: var(--red-600);
}
.resa-list .kpi-card .kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.resa-list .kpi-card .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.resa-list .kpi-card .kpi-sub {
  font-size: 11.5px;
  color: var(--neutral-500);
}
.resa-list .draft-banner {
  background: linear-gradient(135deg, var(--amber-50), #FFFCF0);
  border: 1px solid var(--amber-200);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}
.resa-list .draft-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--amber-500);
}
.resa-list .draft-banner .draft-banner-body {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.resa-list .draft-banner .draft-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--amber-100);
  color: var(--amber-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.resa-list .draft-banner .draft-banner-text strong {
  color: #92400E;
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.resa-list .draft-banner .draft-banner-text .draft-meta {
  font-size: 12px;
  color: var(--amber-700);
  margin-top: 2px;
}
.resa-list .draft-banner .draft-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.resa-list .resa-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
}
@media (max-width: 900px) {
  .resa-list .resa-toolbar {
    flex-wrap: wrap;
  }
}
.resa-list .tab-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 7px;
  flex-shrink: 0;
}
.resa-list .tab {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-600);
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 120ms;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  font-family: inherit;
  white-space: nowrap;
}
.resa-list .tab:hover {
  color: var(--neutral-900);
}
.resa-list .tab.is-active {
  background: #fff;
  color: var(--neutral-900);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.resa-list .tab .tab-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--neutral-400);
  padding: 0;
  margin-left: 3px;
}
.resa-list .tab.is-active .tab-count {
  color: var(--blue-600);
}
.resa-list .toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--neutral-200);
  flex-shrink: 0;
}
.resa-list .toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 240px;
  flex: 1;
}
.resa-list .toolbar-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 6px;
  font-size: 13px;
  color: var(--neutral-900);
  font-family: inherit;
  transition: all 150ms;
}
.resa-list .toolbar-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.resa-list .toolbar-search i.search-icon {
  position: absolute;
  left: 11px;
  font-size: 12px;
  color: var(--neutral-500);
  pointer-events: none;
}
.resa-list .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  transition: all 150ms;
  font-family: inherit;
  white-space: nowrap;
}
.resa-list .filter-chip:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
}
.resa-list .filter-chip.is-active {
  border-color: var(--blue-600);
  background: var(--blue-50);
  color: var(--blue-700);
}
.resa-list .filter-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.resa-list .filter-chip i {
  font-size: 10px;
  opacity: 0.7;
}
.resa-list .filter-chip .chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--blue-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  margin-left: 2px;
}
.resa-list .view-switch {
  display: inline-flex;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.resa-list .view-switch button {
  padding: 6px 10px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--neutral-600);
  font-family: inherit;
  transition: all 150ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.resa-list .view-switch button + button {
  border-left: 1px solid var(--neutral-200);
}
.resa-list .view-switch button.is-active {
  background: var(--neutral-900);
  color: #fff;
}
.resa-list .dropdown {
  position: relative;
}
.resa-list .dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  z-index: 150;
  display: none;
  overflow: hidden;
  animation: dd-fade-in 120ms ease-out;
}
.resa-list .dropdown.is-open .dropdown-menu {
  display: block;
}
@keyframes dd-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.resa-list .dropdown-search {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--neutral-100);
  position: relative;
}
.resa-list .dropdown-search input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  color: var(--neutral-900);
}
.resa-list .dropdown-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.resa-list .dropdown-search i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--neutral-500);
}
.resa-list .dropdown-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}
.resa-list .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--neutral-800);
  cursor: pointer;
  transition: background 100ms;
  user-select: none;
}
.resa-list .dropdown-item:hover {
  background: var(--neutral-50);
}
.resa-list .dropdown-item.is-selected {
  background: var(--blue-50);
  color: var(--blue-700);
}
.resa-list .dropdown-item.is-hidden {
  display: none;
}
.resa-list .dropdown-item .dd-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--neutral-300);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  transition: all 150ms;
}
.resa-list .dropdown-item.is-selected .dd-check {
  background: var(--blue-600);
  border-color: var(--blue-600);
}
.resa-list .dropdown-item .dd-label {
  flex: 1;
  line-height: 1.2;
}
.resa-list .dropdown-item .dd-sub {
  font-size: 11px;
  color: var(--neutral-500);
  display: block;
  margin-top: 2px;
}
.resa-list .dropdown-item .dd-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 1px 7px;
  border-radius: 10px;
}
.resa-list .dropdown-item.is-selected .dd-count {
  background: var(--blue-100);
  color: var(--blue-700);
}
.resa-list .dropdown-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--neutral-500);
}
.resa-list .dropdown-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
}
.resa-list .content-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.resa-list .table-scroll {
  overflow-x: auto;
}
.resa-list .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* Indicateur d'alerte (1ʳᵉ colonne) */
}
.resa-list .data-table th {
  text-align: left;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  background: #FCFCFD;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.resa-list .data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--neutral-100);
  color: var(--neutral-700);
  vertical-align: middle;
}
.resa-list .data-table tr:last-child td {
  border-bottom: none;
}
.resa-list .data-table tbody tr {
  transition: background 100ms;
  cursor: pointer;
}
.resa-list .data-table tbody tr:hover td {
  background: #FCFCFD;
}
.resa-list .data-table tbody tr.is-selected td {
  background: var(--blue-50);
  border-color: var(--blue-100);
}
.resa-list .data-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--blue-600);
}
.resa-list .data-table tbody tr.is-hidden {
  display: none;
}
.resa-list .data-table .alert-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-300);
}
.resa-list .data-table .alert-dot.warn {
  background: var(--amber-500);
}
.resa-list .data-table .alert-dot.danger {
  background: var(--red-600);
}
.resa-list .stagiaire-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.resa-list .stagiaire-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  background: var(--blue-600);
}
.resa-list .stagiaire-name {
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.2;
}
.resa-list .stagiaire-nni {
  font-size: 10px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.resa-list .formation-nom {
  font-weight: 500;
  color: var(--neutral-800);
  line-height: 1.3;
}
.resa-list .formation-code {
  font-size: 11px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.resa-list .dates-cell {
  white-space: nowrap;
}
.resa-list .dates-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--neutral-800);
}
.resa-list .dates-arrow {
  color: var(--neutral-400);
  font-size: 10px;
}
.resa-list .dates-nights {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.resa-list .heb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}
.resa-list .heb-chip.heb-hotel {
  background: var(--blue-50);
  color: var(--blue-700);
  border-color: var(--blue-100);
}
.resa-list .heb-chip.heb-campus {
  background: var(--purple-50);
  color: var(--purple-700);
  border-color: var(--purple-200);
}
.resa-list .heb-chip.heb-none {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.resa-list .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.resa-list .status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.resa-list .status-badge.status-confirmee {
  background: var(--green-50);
  color: var(--green-700);
}
.resa-list .status-badge.status-attente {
  background: var(--amber-50);
  color: var(--amber-700);
}
.resa-list .status-badge.status-annulee {
  background: var(--red-50);
  color: var(--red-700);
  opacity: 0.9;
}
.resa-list .status-badge.status-modifiee {
  background: var(--blue-50);
  color: var(--blue-700);
}
.resa-list .row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  opacity: 0;
  transition: opacity 150ms;
}
.resa-list tr:hover .row-actions, .resa-list tr.is-selected .row-actions {
  opacity: 1;
}
.resa-list .row-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 12px;
  transition: all 150ms;
  text-decoration: none;
}
.resa-list .row-action-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
}
.resa-list .row-action-btn.danger:hover {
  background: var(--red-50);
  color: var(--red-600);
}
.resa-list .row-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--blue-600);
}
.resa-list .num-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neutral-700);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.resa-list .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 1.5rem;
}
.resa-list .resa-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: all 200ms;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.resa-list .resa-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  border-color: var(--neutral-300);
}
.resa-list .resa-card.is-hidden {
  display: none;
}
.resa-list .resa-card .resa-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.resa-list .resa-card .resa-card-num {
  font-size: 11px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.resa-list .resa-card .resa-card-person {
  display: flex;
  align-items: center;
  gap: 10px;
}
.resa-list .resa-card .resa-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--neutral-200);
}
.resa-list .resa-card .resa-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-700);
}
.resa-list .resa-card .resa-card-row i {
  width: 16px;
  color: var(--neutral-400);
  font-size: 12px;
}
.resa-list .resa-card .resa-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--neutral-100);
}
.resa-list .timeline {
  position: relative;
  margin-bottom: 1.5rem;
}
.resa-list .timeline-month {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neutral-500);
  padding: 8px 0;
  margin: 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.resa-list .timeline-month::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--neutral-200);
}
.resa-list .timeline-month:first-child {
  margin-top: 0;
}
.resa-list .timeline-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--neutral-100);
}
.resa-list .timeline-row:last-child {
  border-bottom: none;
}
.resa-list .timeline-row.is-hidden {
  display: none;
}
.resa-list .timeline-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
}
.resa-list .timeline-date-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.5px;
}
.resa-list .timeline-date-month {
  font-size: 11px;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}
.resa-list .timeline-date-nights {
  font-size: 10px;
  color: var(--neutral-500);
  margin-top: 6px;
  background: var(--neutral-100);
  padding: 2px 8px;
  border-radius: 999px;
}
.resa-list .timeline-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--blue-600);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 150ms;
  text-decoration: none;
  color: inherit;
}
.resa-list .timeline-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.resa-list .timeline-card.is-confirmee {
  border-left-color: var(--green-600);
}
.resa-list .timeline-card.is-attente {
  border-left-color: var(--amber-500);
}
.resa-list .timeline-card.is-annulee {
  border-left-color: var(--neutral-400);
  opacity: 0.7;
}
.resa-list .timeline-card.is-modifiee {
  border-left-color: var(--blue-600);
}
.resa-list .timeline-card .timeline-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.resa-list .timeline-card .timeline-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.resa-list .timeline-card .timeline-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--neutral-600);
  flex-wrap: wrap;
}
.resa-list .timeline-card .timeline-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.resa-list .timeline-card .timeline-card-meta i {
  color: var(--neutral-400);
  font-size: 11px;
}
.resa-list .bulk-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--neutral-900);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
  z-index: 200;
  font-size: 13px;
  display: flex;
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.4, 0.8, 0.2, 1), opacity 300ms;
}
.resa-list .bulk-toolbar.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.resa-list .bulk-toolbar .bulk-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.resa-list .bulk-toolbar input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  width: 180px;
  font-family: inherit;
}
.resa-list .bulk-toolbar input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.resa-list .bulk-toolbar .bulk-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
}
.resa-list .empty-state {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.resa-list .empty-state .empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--neutral-400);
  margin-bottom: 8px;
}
.resa-list .empty-state .empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-800);
}
.resa-list .empty-state .empty-state-desc {
  font-size: 13px;
  color: var(--neutral-500);
  max-width: 360px;
}
.resa-list .text-mono {
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════
   RESA EMPTY STATE HERO (aucune réservation + pas de brouillon)
   ═══════════════════════════════════════════════════════════════ */
.resa-empty .empty-hero {
  background: linear-gradient(135deg, var(--blue-50) 0%, #fafbff 60%, #fff 100%);
  border: 1px solid var(--blue-100);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) {
  .resa-empty .empty-hero {
    grid-template-columns: 1fr;
  }
}
.resa-empty .empty-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}
.resa-empty .empty-hero-eyebrow i {
  font-size: 10px;
  color: var(--amber-500);
}
.resa-empty .empty-hero h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  margin: 0 0 10px;
  line-height: 1.2;
}
.resa-empty .empty-hero p {
  font-size: 14px;
  color: var(--neutral-600);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 0 20px;
}
.resa-empty .empty-hero-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.resa-empty .empty-hero-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 12px;
  color: var(--neutral-600);
  flex-wrap: wrap;
}
.resa-empty .empty-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.resa-empty .empty-hero-meta i {
  color: var(--green-600);
  font-size: 11px;
}
.resa-empty .empty-hero-visual {
  position: relative;
  height: 280px;
}
@media (max-width: 900px) {
  .resa-empty .empty-hero-visual {
    order: -1;
    height: 220px;
  }
}
.resa-empty .illus-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  width: 200px;
}
.resa-empty .illus-card .illus-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.resa-empty .illus-card .illus-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.resa-empty .illus-card .illus-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-900);
}
.resa-empty .illus-card .illus-sub {
  font-size: 10px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
}
.resa-empty .illus-card .illus-line {
  height: 6px;
  background: var(--neutral-100);
  border-radius: 3px;
  margin-bottom: 6px;
}
.resa-empty .illus-card .illus-line.short {
  width: 60%;
}
.resa-empty .illus-card .illus-line.accent {
  background: var(--blue-200);
}
.resa-empty .illus-card .illus-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--neutral-200);
  font-size: 10px;
}
.resa-empty .illus-card .illus-chip {
  color: var(--green-700);
  font-weight: 600;
}
.resa-empty .illus-card .illus-dates {
  color: var(--neutral-500);
  font-family: var(--font-mono);
}
.resa-empty .illus-card-1 {
  top: 0;
  right: 60px;
  transform: rotate(-4deg);
  opacity: 0.7;
}
.resa-empty .illus-card-2 {
  top: 40px;
  right: 20px;
  transform: rotate(3deg);
  opacity: 0.85;
}
.resa-empty .illus-card-main {
  top: 80px;
  right: 80px;
  transform: none;
  z-index: 2;
  width: 220px;
}
.resa-empty .illus-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--amber-500);
  color: #fff;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  z-index: 3;
}
.resa-empty .illus-badge i {
  margin-right: 4px;
}
.resa-empty .steps-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 28px 0 1rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.resa-empty .steps-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--neutral-200);
}
.resa-empty .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .resa-empty .steps-grid {
    grid-template-columns: 1fr;
  }
}
.resa-empty .step-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  transition: all 200ms;
}
.resa-empty .step-card:hover {
  border-color: var(--blue-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.resa-empty .step-card:hover .step-number {
  color: var(--blue-600);
}
.resa-empty .step-card .step-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-200);
  font-family: var(--font-mono);
  letter-spacing: -1px;
  transition: color 200ms;
}
.resa-empty .step-card .step-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin: 8px 0 12px;
}
.resa-empty .step-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 6px;
}
.resa-empty .step-card p {
  font-size: 13px;
  color: var(--neutral-500);
  line-height: 1.5;
  margin: 0;
}
.resa-empty .resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}
.resa-empty .resource-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 150ms;
}
.resa-empty .resource-card:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
}
.resa-empty .resource-card .resource-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.resa-empty .resource-card.video .resource-icon {
  background: var(--red-50);
  color: var(--red-600);
}
.resa-empty .resource-card.doc .resource-icon {
  background: var(--blue-50);
  color: var(--blue-600);
}
.resa-empty .resource-card .resource-body {
  flex: 1;
  min-width: 0;
}
.resa-empty .resource-card .resource-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}
.resa-empty .resource-card .resource-meta {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.resa-empty .resource-card .resource-arrow {
  color: var(--neutral-400);
  font-size: 12px;
}
.resa-empty .resource-card:hover .resource-arrow {
  color: var(--blue-600);
}
.resa-empty .help-footer {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.resa-empty .help-footer h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0;
}
.resa-empty .help-footer p {
  font-size: 12px;
  color: var(--neutral-500);
  margin: 4px 0 0;
}
.resa-empty .help-footer .help-footer-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   NESTOR — Vue dossiers
   Scope : .nestor-view. Réutilise les composants de _reservations.scss
   (dropdown, bulk-toolbar, status-badge) autant que possible.
   ═══════════════════════════════════════════════════════════════ */
.nestor-view {
  font-size: 13px;
  /* ── Page header enrichi ───────────────────────────────────── */
  /* ── KPI row (5 cartes) ────────────────────────────────────── */
  /* ── Filter bar 2 rows ─────────────────────────────────────── */
  /* ── Chip filter (réutilise le pattern Mes réservations) ──── */
  /* ── Dropdown (hérite du pattern .dropdown de _reservations.scss) */
  /* ── Table head strip ──────────────────────────────────────── */
  /* ── Dossiers table (dense) ────────────────────────────────── */
  /* Badges inscription (dot coloré) */
  /* Pill Prise en charge */
  /* Badge appel (niveau gradué) */
  /* Actions ligne */
  /* ── Pagination footer ─────────────────────────────────────── */
  /* ── Bulk toolbar (hérite de _reservations.scss en partie) ── */
  /* ── Empty state ───────────────────────────────────────────── */
}
.nestor-view .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.nestor-view .page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nestor-view .page-title-mark {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #1D2D5C;
  color: #6CC04A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.nestor-view .page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.nestor-view .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nestor-view .page-subtitle .pill-neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nestor-view .page-subtitle .pill-neutral i {
  font-size: 9px;
  color: var(--neutral-500);
}
.nestor-view .page-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.nestor-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1400px) {
  .nestor-view .kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .nestor-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nestor-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 14px 17px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 150ms;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.nestor-view .kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--neutral-300);
}
.nestor-view .kpi.is-selected {
  border-color: #6CC04A;
  box-shadow: 0 0 0 3px rgba(108, 192, 74, 0.18);
}
.nestor-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nestor-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.nestor-view .kpi .kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.1;
}
.nestor-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.nestor-view .filter-bar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 15px 18px;
  margin-bottom: 1rem;
}
.nestor-view .filter-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.nestor-view .filter-search {
  flex: 1;
  position: relative;
  min-width: 240px;
  display: flex;
  align-items: center;
}
.nestor-view .filter-search input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 150ms;
}
.nestor-view .filter-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.nestor-view .filter-search i {
  position: absolute;
  left: 13px;
  font-size: 13px;
  color: var(--neutral-500);
}
.nestor-view .quick-chips {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.nestor-view .quick-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.nestor-view .quick-chip:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
  color: var(--neutral-900);
}
.nestor-view .quick-chip.is-active {
  background: #1D2D5C;
  color: #fff;
  border-color: #1D2D5C;
}
.nestor-view .quick-chip[disabled], .nestor-view .quick-chip.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.nestor-view .quick-chip i {
  font-size: 10px;
}
.nestor-view .filter-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr) auto;
  gap: 10px;
  align-items: end;
}
@media (max-width: 1400px) {
  .nestor-view .filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .nestor-view .filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nestor-view .filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* permet au dropdown de rétrécir */
}
.nestor-view .filter-field label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
}
.nestor-view .filter-field select, .nestor-view .filter-field input[type=number] {
  padding: 7px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  color: var(--neutral-800);
  cursor: pointer;
}
.nestor-view .filter-field select:focus, .nestor-view .filter-field input[type=number]:focus {
  outline: none;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.nestor-view .filter-actions {
  display: flex;
  gap: 6px;
}
.nestor-view .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  width: 100%;
  justify-content: space-between;
  transition: all 150ms;
}
.nestor-view .filter-chip:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
}
.nestor-view .filter-chip.is-active {
  border-color: var(--blue-600);
  background: var(--blue-50);
  color: var(--blue-700);
}
.nestor-view .filter-chip .chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}
.nestor-view .filter-chip .chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--blue-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
}
.nestor-view .dropdown {
  position: relative;
}
.nestor-view .dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 150;
  display: none;
  overflow: hidden;
  animation: nestor-dd-fade 120ms ease-out;
}
.nestor-view .dropdown.is-open .dropdown-menu {
  display: block;
}
@keyframes nestor-dd-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nestor-view .dropdown-search {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--neutral-100);
  position: relative;
}
.nestor-view .dropdown-search input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  color: var(--neutral-900);
}
.nestor-view .dropdown-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.nestor-view .dropdown-search i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--neutral-500);
}
.nestor-view .dropdown-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}
.nestor-view .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--neutral-800);
  cursor: pointer;
  user-select: none;
}
.nestor-view .dropdown-item:hover {
  background: var(--neutral-50);
}
.nestor-view .dropdown-item.is-selected {
  background: var(--green-50);
  color: var(--green-700);
}
.nestor-view .dropdown-item.is-hidden {
  display: none;
}
.nestor-view .dropdown-item .dd-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--neutral-300);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  transition: all 150ms;
}
.nestor-view .dropdown-item.is-selected .dd-check {
  background: #6CC04A;
  border-color: #6CC04A;
}
.nestor-view .dropdown-item .dd-label {
  flex: 1;
  line-height: 1.2;
}
.nestor-view .dropdown-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--neutral-500);
}
.nestor-view .dropdown-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
}
.nestor-view .table-head-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
  flex-wrap: wrap;
  gap: 8px;
}
.nestor-view .table-count {
  font-size: 12px;
  color: var(--neutral-500);
}
.nestor-view .table-count strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.nestor-view .table-head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nestor-view .column-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
  font-family: inherit;
}
.nestor-view .column-btn:hover {
  background: var(--neutral-50);
  color: var(--neutral-800);
}
.nestor-view .column-btn[disabled], .nestor-view .column-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.nestor-view .table-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.nestor-view .table-scroll {
  overflow-x: auto;
}
.nestor-view table.dossiers {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.nestor-view table.dossiers thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.nestor-view table.dossiers td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--neutral-100);
  color: var(--neutral-700);
  vertical-align: middle;
  white-space: nowrap;
}
.nestor-view table.dossiers tbody tr {
  transition: background 100ms;
  cursor: pointer;
}
.nestor-view table.dossiers tbody tr:hover td {
  background: #FAFBFC;
}
.nestor-view table.dossiers tbody tr.is-selected td {
  background: var(--blue-50);
}
.nestor-view table.dossiers tbody tr.is-hidden {
  display: none;
}
.nestor-view .num-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-600);
}
.nestor-view .person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}
.nestor-view .person-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  background: var(--blue-600);
}
.nestor-view .person-name {
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.2;
  font-size: 13px;
}
.nestor-view .person-sub {
  font-size: 10.5px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.nestor-view .agency-cell {
  font-weight: 500;
  color: var(--neutral-800);
  max-width: 260px;
  white-space: normal;
  line-height: 1.35;
}
.nestor-view .agency-cell .dr-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 1px 7px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.2px;
}
.nestor-view .agency-cell .agency-name {
  color: var(--neutral-700);
}
.nestor-view .date-cell {
  font-size: 12.5px;
  color: var(--neutral-700);
  font-variant-numeric: tabular-nums;
}
.nestor-view .date-cell .day {
  font-weight: 600;
  color: var(--neutral-900);
}
.nestor-view .date-cell .month {
  color: var(--neutral-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nestor-view .range-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nestor-view .range-bar .range-days {
  font-size: 10px;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 1px 6px;
  border-radius: 10px;
}
.nestor-view .campus-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-700);
}
.nestor-view .campus-cell i {
  color: var(--neutral-400);
  font-size: 10px;
}
.nestor-view .formation-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--neutral-700);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.nestor-view .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.nestor-view .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.nestor-view .badge.b-info {
  background: var(--blue-50);
  color: var(--blue-700);
}
.nestor-view .badge.b-success {
  background: var(--green-50);
  color: var(--green-700);
}
.nestor-view .badge.b-warning {
  background: var(--amber-50);
  color: var(--amber-700);
}
.nestor-view .badge.b-danger {
  background: var(--red-50);
  color: var(--red-700);
}
.nestor-view .badge.b-neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.nestor-view .badge.b-purple {
  background: var(--purple-50);
  color: var(--purple-700);
}
.nestor-view .charge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.nestor-view .charge-pill.c-totale {
  background: var(--green-50);
  color: var(--green-700);
}
.nestor-view .charge-pill.c-encours {
  background: var(--amber-50);
  color: var(--amber-700);
}
.nestor-view .charge-pill.c-horsscope {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.nestor-view .charge-pill.c-na {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.nestor-view .appel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: var(--blue-50);
  color: var(--blue-700);
}
.nestor-view .appel-badge.niveau-1 {
  background: var(--blue-50);
  color: var(--blue-700);
}
.nestor-view .appel-badge.niveau-2 {
  background: var(--amber-50);
  color: var(--amber-700);
}
.nestor-view .appel-badge.niveau-3 {
  background: var(--red-50);
  color: var(--red-700);
}
.nestor-view .appel-badge .appel-num {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.6);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 9px;
}
.nestor-view .row-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  opacity: 0.4;
  transition: opacity 150ms;
}
.nestor-view tr:hover .row-actions, .nestor-view tr.is-selected .row-actions {
  opacity: 1;
}
.nestor-view .row-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
}
.nestor-view .row-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
}
.nestor-view .row-check {
  width: 16px;
  height: 16px;
  accent-color: #1D2D5C;
  cursor: pointer;
  vertical-align: middle;
}
.nestor-view .pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--card-border);
  background: var(--neutral-50);
  flex-wrap: wrap;
  gap: 12px;
}
.nestor-view .pg-info {
  font-size: 12px;
  color: var(--neutral-600);
}
.nestor-view .pg-info strong {
  color: var(--neutral-900);
}
.nestor-view .pg-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neutral-600);
}
.nestor-view .pg-size select {
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}
.nestor-view .pg-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nestor-view .pg-btn {
  min-width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0 10px;
  text-decoration: none;
}
.nestor-view .pg-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.nestor-view .pg-btn.is-active {
  background: #1D2D5C;
  color: #fff;
  border-color: #1D2D5C;
}
.nestor-view .pg-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.nestor-view .pg-ellipsis {
  padding: 0 6px;
  color: var(--neutral-500);
  font-size: 12px;
}
.nestor-view .bulk-toolbar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  background: var(--neutral-900);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
  z-index: 200;
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.4, 0.8, 0.2, 1), opacity 300ms;
}
.nestor-view .bulk-toolbar.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.nestor-view .bulk-toolbar .bulk-count {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nestor-view .bulk-toolbar .bulk-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
}
.nestor-view .bulk-toolbar .bulk-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nestor-view .bulk-toolbar .bulk-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nestor-view .bulk-toolbar .bulk-btn.danger {
  background: var(--red-600);
  color: #fff;
}
.nestor-view .bulk-toolbar .bulk-btn.danger:hover {
  background: var(--red-700);
}
.nestor-view .empty-state {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.nestor-view .empty-state .empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--neutral-400);
  margin-bottom: 8px;
}
.nestor-view .empty-state .empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-800);
}
.nestor-view .empty-state .empty-state-desc {
  font-size: 13px;
  color: var(--neutral-500);
  max-width: 360px;
}
.nestor-view .text-mono {
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════
   LOGISTIQUE — Navettes & Taxis (index + planning)
   Scope : .logistique-view. Réutilise .kpi, .badge, .filter-chip,
   .pagination, .dropdown-* de _reservations.scss / _nestor.scss.
   ═══════════════════════════════════════════════════════════════ */
.logistique-view {
  font-size: 13px;
  /* ── Page header (variant Logistique) ─────────────────────── */
  /* ── Breadcrumb (sous le titre, optionnel) ────────────────── */
  /* ── KPI row ──────────────────────────────────────────────── */
  /* ── Week pager ───────────────────────────────────────────── */
  /* ── Campus cards grid ────────────────────────────────────── */
  /* Status tag (OK / Partiel / À traiter) */
  /* Prestataire block (campus card footer navette) */
  /* Price-tag (taxi) */
  /* ── Planning layout (2 cols) ─────────────────────────────── */
  /* ── Quick chips (filtre sens/statut) ─────────────────────── */
  /* ── Day group (timeline par jour) ────────────────────────── */
  /* ── Trip card (navette/taxi) ─────────────────────────────── */
  /* ── Page liste /taxis/courses ─────────────────────── */
  /* ── Banner regroupement (suggestions automatiques) ──────── */
  /* ── Week pager wrapper (taxis) ──────────────────────────── */
  /* ── Page détail course taxi ─────────────────────── */
  /* ── Sociétés taxi : grille de cartes ─────────────── */
  /* Capacity ring SVG */
  /* Passager table (dans trip-card) */
  /* Badge inscription pill (réutilise les classes b-info/success/warning/danger de _nestor.scss via même naming) */
  /* Trip empty inline */
  /* Add-pax details */
  /* Trip action row (taxi : Confirmer / Annuler + suggestion) */
  /* ── Side panel cards ─────────────────────────────────────── */
  /* Week summary list */
  /* Unassigned pax pills (side card navette) */
  /* Cost summary table (taxi) */
  /* Stacked bar (état courses taxi) */
  /* ── Empty state container ────────────────────────────────── */
}
.logistique-view .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.logistique-view .page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logistique-view .page-title-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.logistique-view .page-title-mark.mark-navette {
  background: linear-gradient(135deg, #16A34A, #0D9488);
}
.logistique-view .page-title-mark.mark-taxi {
  background: linear-gradient(135deg, #F59E0B, #EA580C);
}
.logistique-view .page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.logistique-view .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.logistique-view .page-subtitle .pill {
  background: var(--blue-50);
  color: var(--blue-700);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.logistique-view .page-subtitle .pill i {
  font-size: 9px;
}
.logistique-view .page-subtitle .pill.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.logistique-view .page-subtitle .pill.neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.logistique-view .page-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.logistique-view .page-back {
  font-size: 12px;
  color: var(--neutral-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.logistique-view .page-back:hover {
  color: var(--blue-600);
}
.logistique-view .page-back i {
  font-size: 10px;
}
.logistique-view .breadcrumb {
  font-size: 12px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.logistique-view .breadcrumb a {
  color: var(--neutral-500);
  text-decoration: none;
}
.logistique-view .breadcrumb a:hover {
  color: var(--blue-600);
}
.logistique-view .breadcrumb strong {
  color: var(--neutral-800);
  font-weight: 600;
}
.logistique-view .breadcrumb .sep {
  font-size: 9px;
  color: var(--neutral-300);
}
.logistique-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .logistique-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logistique-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 150ms;
}
.logistique-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.logistique-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.logistique-view .kpi .kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.1;
}
.logistique-view .kpi .kpi-value.money {
  font-variant-numeric: tabular-nums;
}
.logistique-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.logistique-view .week-pager-wrap {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.logistique-view .week-pager {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  padding: 3px;
}
.logistique-view .week-pager .pager-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--neutral-600);
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.logistique-view .week-pager .pager-btn:hover {
  background: #fff;
  color: var(--neutral-900);
}
.logistique-view .week-pager .current {
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-900);
  min-width: 140px;
  text-align: center;
  letter-spacing: 0.2px;
}
.logistique-view .week-pager .current small {
  display: block;
  font-size: 10px;
  color: var(--neutral-500);
  font-weight: 500;
  margin-top: -1px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.logistique-view .year-pill {
  background: var(--blue-50);
  color: var(--blue-700);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.logistique-view .quick-weeks {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.logistique-view .quick-week {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--neutral-700);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms;
}
.logistique-view .quick-week:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
  color: var(--neutral-900);
}
.logistique-view .quick-week.is-active {
  background: var(--neutral-900);
  color: #fff;
  border-color: var(--neutral-900);
}
.logistique-view .today-btn {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
}
.logistique-view .today-btn:hover {
  border-color: var(--blue-200);
  background: var(--blue-50);
  color: var(--blue-700);
}
.logistique-view .campus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 1.5rem;
}
.logistique-view .campus-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 150ms;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.logistique-view .campus-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--neutral-300);
}
.logistique-view .campus-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  gap: 12px;
}
.logistique-view .campus-card-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.logistique-view .campus-card-mark.icon-green {
  background: linear-gradient(135deg, #16A34A, #0D9488);
}
.logistique-view .campus-card-mark.icon-amber {
  background: linear-gradient(135deg, #F59E0B, #EA580C);
}
.logistique-view .campus-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  letter-spacing: -0.2px;
}
.logistique-view .campus-card-sub {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.logistique-view .campus-card-sub i {
  font-size: 9px;
}
.logistique-view .campus-card-body {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 10px;
}
.logistique-view .stat-block .stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin-bottom: 4px;
}
.logistique-view .stat-block .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.3px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.logistique-view .stat-block .stat-sub {
  font-size: 12px;
  color: var(--neutral-400);
  font-weight: 500;
  margin-left: 2px;
}
.logistique-view .progress-bar {
  margin-top: 6px;
  height: 5px;
  background: var(--neutral-100);
  border-radius: 999px;
  overflow: hidden;
}
.logistique-view .progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 300ms;
}
.logistique-view .progress-fill.bar-green {
  background: var(--green-600);
}
.logistique-view .progress-fill.bar-amber {
  background: var(--amber-500);
}
.logistique-view .progress-fill.bar-red {
  background: var(--red-600);
}
.logistique-view .campus-card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.logistique-view .campus-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-600);
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 150ms;
}
.logistique-view .campus-card-cta i {
  font-size: 9px;
}
.logistique-view .campus-card:hover .campus-card-cta {
  background: var(--blue-50);
}
.logistique-view .status-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.logistique-view .status-tag.status-ok {
  background: var(--green-50);
  color: var(--green-700);
}
.logistique-view .status-tag.status-partiel {
  background: var(--amber-50);
  color: var(--amber-700);
}
.logistique-view .status-tag.status-a-traiter {
  background: var(--red-50);
  color: var(--red-700);
}
.logistique-view .presta-block {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.logistique-view .presta-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--neutral-800);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.logistique-view .presta-info {
  min-width: 0;
}
.logistique-view .presta-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logistique-view .presta-email {
  font-size: 10.5px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logistique-view .presta-warning {
  font-size: 11.5px;
  color: var(--amber-700);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.logistique-view .price-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.logistique-view .price-tag i {
  font-size: 9px;
}
.logistique-view .price-tag.big {
  padding: 6px 14px;
  font-size: 13.5px;
}
.logistique-view .price-tag.neutral {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.logistique-view .planning-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) {
  .logistique-view .planning-layout {
    grid-template-columns: 1fr;
  }
}
.logistique-view .planning-main {
  min-width: 0;
}
.logistique-view .planning-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 72px;
}
.logistique-view .chip-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.logistique-view .chip-filter {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms;
}
.logistique-view .chip-filter:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
  color: var(--neutral-900);
}
.logistique-view .chip-filter.is-active {
  background: var(--neutral-900);
  color: #fff;
  border-color: var(--neutral-900);
}
.logistique-view .chip-filter i {
  font-size: 10px;
}
.logistique-view .chip-filter .count {
  background: var(--neutral-100);
  color: var(--neutral-700);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.logistique-view .chip-filter.is-active .count {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.logistique-view .day-group {
  margin-bottom: 20px;
}
.logistique-view .day-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
  padding: 6px 0;
}
.logistique-view .day-header .date-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.logistique-view .day-header .day-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.logistique-view .day-header .day-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.logistique-view .day-header hr {
  flex: 1;
  border: none;
  border-top: 1px dashed var(--neutral-200);
  margin: 0;
}
.logistique-view .day-header .day-count {
  font-size: 11px;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.logistique-view .trip-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  transition: all 150ms;
}
.logistique-view .trip-card:hover {
  box-shadow: var(--shadow);
}
.logistique-view .trip-card.is-empty {
  border-style: dashed;
  background: repeating-linear-gradient(45deg, #fff, #fff 10px, #FDFDFD 10px, #FDFDFD 20px);
}
.logistique-view .trip-card.aller {
  border-left: 3px solid var(--blue-600);
}
.logistique-view .trip-card.retour {
  border-left: 3px solid var(--amber-500);
}
.logistique-view .trip-card.propose {
  border-left: 3px solid var(--amber-500);
}
.logistique-view .trip-card.confirme {
  border-left: 3px solid var(--green-600);
}
.logistique-view .trip-card.annule {
  border-left: 3px solid var(--neutral-300);
  opacity: 0.7;
}
.logistique-view .trip-card.is-hidden {
  display: none;
}
.logistique-view .trip-card-main {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.logistique-view .trip-time {
  font-size: 22px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 60px;
}
.logistique-view .trip-route {
  flex: 1;
  min-width: 0;
}
.logistique-view .trip-route .route-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--neutral-800);
  font-weight: 500;
}
.logistique-view .trip-route .route-inner .route-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral-400);
  flex-shrink: 0;
}
.logistique-view .trip-route .route-inner .route-dot.start {
  background: var(--blue-600);
}
.logistique-view .trip-route .route-inner .route-dot.end {
  background: var(--green-600);
}
.logistique-view .trip-route .route-inner .route-line {
  flex: 1;
  height: 1px;
  border-top: 1.5px dashed var(--neutral-300);
  min-width: 12px;
}
.logistique-view .trip-route .route-inner .route-point {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.logistique-view .trip-route .route-meta {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.logistique-view .trip-route .route-meta i {
  color: var(--neutral-400);
  font-size: 10px;
  margin-right: 3px;
}
.logistique-view .trip-route .route-meta .sens-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}
.logistique-view .trip-route .route-meta .sens-chip.aller {
  background: var(--blue-50);
  color: var(--blue-700);
}
.logistique-view .trip-route .route-meta .sens-chip.retour {
  background: var(--amber-50);
  color: var(--amber-700);
}
.logistique-view .taxi-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.logistique-view .taxi-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s;
}
.logistique-view .taxi-kpi:hover {
  border-color: #93C5FD;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.logistique-view .taxi-kpi.is-active {
  border-color: #1E3A8A;
  background: #EFF6FF;
}
.logistique-view .taxi-kpi .tk-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.logistique-view .taxi-kpi .tk-body {
  min-width: 0;
  flex: 1;
}
.logistique-view .taxi-kpi .tk-value {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}
.logistique-view .taxi-kpi .tk-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--neutral-500);
  margin-top: 4px;
}
.logistique-view .regroupement-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--amber-50), #FFFBEB);
  border: 1px solid var(--amber-200);
  border-left: 4px solid var(--amber-500);
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.logistique-view .regroupement-banner .rb-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--amber-100);
  color: var(--amber-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.logistique-view .regroupement-banner .rb-body {
  flex: 1;
  min-width: 220px;
}
.logistique-view .regroupement-banner .rb-body strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--amber-800);
  margin-bottom: 2px;
}
.logistique-view .regroupement-banner .rb-body span {
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.45;
}
.logistique-view .regroupement-banner .rb-details {
  width: 100%;
  margin-top: 4px;
}
.logistique-view .regroupement-banner .rb-details > summary {
  cursor: pointer;
  list-style: none;
  width: max-content;
}
.logistique-view .regroupement-banner .rb-details > summary::-webkit-details-marker {
  display: none;
}
.logistique-view .regroupement-banner .rb-details[open] > summary i.fa-list {
  transform: rotate(0);
}
.logistique-view .regroupement-banner .rb-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.logistique-view .regroupement-banner .rb-item {
  background: #fff;
  border: 1px solid var(--amber-200);
  border-radius: 8px;
  padding: 10px 12px;
}
.logistique-view .regroupement-banner .rb-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.logistique-view .regroupement-banner .rb-item-head .rb-item-campus {
  font-weight: 700;
  color: var(--neutral-900);
}
.logistique-view .regroupement-banner .rb-item-head .rb-item-campus i {
  color: var(--amber-700);
  font-size: 11px;
  margin-right: 4px;
}
.logistique-view .regroupement-banner .rb-item-head .rb-item-sens {
  padding: 2px 8px;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.logistique-view .regroupement-banner .rb-item-head .rb-item-economie {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-700);
}
.logistique-view .regroupement-banner .rb-item-courses {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.logistique-view .regroupement-banner .rb-course-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  color: var(--amber-800);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-mono, monospace);
  transition: all 120ms;
}
.logistique-view .regroupement-banner .rb-course-pill small {
  font-family: inherit;
  opacity: 0.8;
  font-weight: 500;
}
.logistique-view .regroupement-banner .rb-course-pill:hover {
  background: var(--amber-100);
  border-color: var(--amber-500);
}
.logistique-view .taxi-week-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.logistique-view .taxi-week-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--red-200);
  background: var(--red-50);
  color: var(--red-700);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 120ms;
}
.logistique-view .taxi-week-clear i {
  font-size: 10px;
}
.logistique-view .taxi-week-clear:hover {
  background: var(--red-100);
  border-color: var(--red-600);
}
.logistique-view .taxi-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.logistique-view .taxi-filters .tf-spacer {
  flex: 1;
}
.logistique-view .taxi-filters .tf-segment {
  display: inline-flex;
  background: #F3F4F6;
  border-radius: 8px;
  padding: 3px;
  gap: 0;
}
.logistique-view .taxi-filters .tf-segment a {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--neutral-500);
  text-decoration: none;
  transition: all 0.15s;
}
.logistique-view .taxi-filters .tf-segment a.is-active {
  background: #fff;
  color: #1E3A8A;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}
.logistique-view .taxi-filters .tf-segment a:hover:not(.is-active) {
  color: #111827;
}
.logistique-view .taxi-filters .tf-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.logistique-view .taxi-filters .tf-field label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--neutral-600);
  font-weight: 500;
  white-space: nowrap;
}
.logistique-view .taxi-filters .tf-field label i {
  color: var(--neutral-400);
  font-size: 11px;
}
.logistique-view .taxi-filters .tf-field select {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 12.5px;
  background: #fff;
  min-width: 120px;
  cursor: pointer;
  font-family: inherit;
  color: var(--neutral-800);
}
.logistique-view .taxi-filters .tf-field select:focus {
  outline: none;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.logistique-view .taxi-day-group {
  margin-bottom: 24px;
}
.logistique-view .tdg-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--neutral-500);
  margin: 0 0 10px;
}
.logistique-view .tdg-count {
  background: #F3F4F6;
  color: #6B7280;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.logistique-view .taxi-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.logistique-view .taxi-card {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-left: 4px solid #F59E0B;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.logistique-view .taxi-card:hover {
  border-color: #93C5FD;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.logistique-view .taxi-card.retour {
  border-left-color: #3B82F6;
}
.logistique-view .taxi-card .tc-date {
  text-align: center;
  line-height: 1.1;
}
.logistique-view .taxi-card .tc-date .tc-day {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
}
.logistique-view .taxi-card .tc-date .tc-month {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.logistique-view .taxi-card .tc-date .tc-time {
  font-size: 14px;
  font-weight: 600;
  color: #1E3A8A;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.logistique-view .taxi-card .tc-route {
  min-width: 0;
}
.logistique-view .taxi-card .tc-sens-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.logistique-view .taxi-card .tc-campus {
  font-size: 11px;
  color: var(--neutral-500);
}
.logistique-view .taxi-card .tc-points {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.logistique-view .taxi-card .tc-point {
  font-weight: 600;
  color: #111827;
}
.logistique-view .taxi-card .tc-point.start {
  color: #4B5563;
}
.logistique-view .taxi-card .tc-point.end {
  color: #111827;
}
.logistique-view .taxi-card .tc-arrow {
  font-size: 11px;
  color: #9CA3AF;
}
.logistique-view .taxi-card .tc-meta-line {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.logistique-view .taxi-card .tc-meta-line i {
  color: #9CA3AF;
}
.logistique-view .taxi-card .dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #D1D5DB;
}
.logistique-view .taxi-card .tc-pax {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 100px;
}
.logistique-view .taxi-card .tc-pax-avatars {
  display: flex;
}
.logistique-view .taxi-card .tc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border: 2px solid #fff;
  margin-left: -8px;
}
.logistique-view .taxi-card .tc-avatar:first-child {
  margin-left: 0;
}
.logistique-view .taxi-card .tc-avatar.tc-more {
  background: #6B7280;
  font-size: 10px;
}
.logistique-view .taxi-card .tc-pax-count {
  font-size: 11px;
  color: var(--neutral-500);
}
.logistique-view .taxi-card .tc-pax-count strong {
  color: #111827;
  font-size: 13px;
}
.logistique-view .taxi-card .tc-pax-count span {
  display: block;
  font-size: 10px;
}
.logistique-view .taxi-card .tc-status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logistique-view .taxi-card .tc-chevron {
  color: #9CA3AF;
  font-size: 12px;
}
.logistique-view .course-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
  border: 1px solid #FCD34D;
  border-left: 4px solid #F59E0B;
  border-radius: 12px;
  margin-bottom: 20px;
}
.logistique-view .course-hero.retour {
  background: linear-gradient(135deg, #DBEAFE, #EFF6FF);
  border-color: #93C5FD;
  border-left-color: #3B82F6;
}
.logistique-view .course-hero .hero-eyebrow {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6B7280;
}
.logistique-view .course-hero .hero-title {
  font-size: 22px;
  margin: 6px 0 8px;
  color: #111827;
}
.logistique-view .course-hero .hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #374151;
  flex-wrap: wrap;
}
.logistique-view .course-hero .hero-meta .sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #D1D5DB;
}
.logistique-view .course-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .logistique-view .course-grid {
    grid-template-columns: 1fr;
  }
}
.logistique-view .meta-list {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px 14px;
  margin: 0;
  font-size: 13px;
}
.logistique-view .meta-list dt {
  color: #6B7280;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  align-self: center;
}
.logistique-view .meta-list dd {
  margin: 0;
  font-weight: 600;
  color: #111827;
}
.logistique-view .pax-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.logistique-view .pax-candidate {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.logistique-view .pax-candidate:hover {
  background: #F9FAFB;
  border-color: #93C5FD;
}
.logistique-view .pax-candidate:has(input:checked) {
  background: #EFF6FF;
  border-color: #3B82F6;
}
.logistique-view .pax-candidate input {
  margin-top: 2px;
}
.logistique-view .pax-candidate .pax-cand-name {
  font-size: 13.5px;
}
.logistique-view .pax-candidate .pax-cand-meta {
  font-size: 11.5px;
  color: #6B7280;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.logistique-view .pax-candidate .pax-cand-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #D1D5DB;
}
.logistique-view .societe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.logistique-view .societe-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.15s;
}
.logistique-view .societe-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  border-color: #C7D2FE;
}
.logistique-view .societe-card.is-inactive {
  opacity: 0.6;
}
.logistique-view .societe-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-200);
}
.logistique-view .societe-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1E3A8A;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.logistique-view .societe-id {
  flex: 1;
  min-width: 0;
}
.logistique-view .societe-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logistique-view .societe-campus {
  font-size: 11.5px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.logistique-view .societe-status {
  flex-shrink: 0;
}
.logistique-view .societe-card-meta {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #4B5563;
}
.logistique-view .societe-card-meta span i {
  width: 14px;
  color: #9CA3AF;
}
.logistique-view .societe-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--neutral-200);
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
}
.logistique-view .ss-item {
  background: #fff;
  padding: 12px 8px;
  text-align: center;
}
.logistique-view .ss-item .ss-value {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}
.logistique-view .ss-item .ss-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--neutral-500);
  margin-top: 4px;
}
.logistique-view .societe-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #FAFAFA;
}
.logistique-view .ts-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.logistique-view .ts-pill.ok {
  background: #DCFCE7;
  color: #15803D;
}
.logistique-view .ts-pill.warn {
  background: #FEF3C7;
  color: #92400E;
}
.logistique-view .trip-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logistique-view .trip-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.logistique-view .trip-action-btn:hover {
  background: var(--neutral-50);
  color: var(--neutral-800);
}
.logistique-view .trip-action-danger:hover {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.logistique-view .capacity-ring {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.logistique-view .capacity-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.logistique-view .capacity-ring circle {
  fill: none;
  stroke-width: 5;
}
.logistique-view .capacity-ring .bg {
  stroke: var(--neutral-100);
}
.logistique-view .capacity-ring .fg {
  stroke: var(--blue-600);
  stroke-linecap: round;
  transition: stroke-dashoffset 400ms;
}
.logistique-view .capacity-ring.near .fg {
  stroke: var(--amber-500);
}
.logistique-view .capacity-ring.full .fg {
  stroke: var(--red-600);
}
.logistique-view .capacity-ring .label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-800);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.logistique-view .capacity-ring .label small {
  font-size: 8.5px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-top: 1px;
}
.logistique-view .trip-card-body {
  border-top: 1px solid var(--neutral-100);
  padding: 10px 16px;
}
.logistique-view .passenger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.logistique-view .passenger-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
}
.logistique-view .passenger-table td.row-actions-cell {
  text-align: right;
  width: 40px;
}
.logistique-view .passenger-table tr:last-child td {
  border-bottom: none;
}
.logistique-view .pax-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logistique-view .pax-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.logistique-view .pax-info .pax-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.2;
}
.logistique-view .pax-info .pax-sub {
  font-size: 10px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.logistique-view .dr-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 1px 7px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.2px;
}
.logistique-view .dr-name {
  color: var(--neutral-700);
  font-size: 12px;
}
.logistique-view .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.logistique-view .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.logistique-view .badge.b-info {
  background: var(--blue-50);
  color: var(--blue-700);
}
.logistique-view .badge.b-success {
  background: var(--green-50);
  color: var(--green-700);
}
.logistique-view .badge.b-warning {
  background: var(--amber-50);
  color: var(--amber-700);
}
.logistique-view .badge.b-danger {
  background: var(--red-50);
  color: var(--red-700);
}
.logistique-view .badge.b-neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.logistique-view .row-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms;
}
.logistique-view .row-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
}
.logistique-view .row-btn.danger:hover {
  background: var(--red-50);
  color: var(--red-600);
}
.logistique-view .trip-empty-inline {
  padding: 12px 16px;
  color: var(--neutral-500);
  font-size: 12px;
  font-style: italic;
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-100);
}
.logistique-view .add-pax {
  border-top: 1px solid var(--neutral-100);
}
.logistique-view .add-pax summary {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  color: var(--blue-700);
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.logistique-view .add-pax summary::-webkit-details-marker {
  display: none;
}
.logistique-view .add-pax summary i {
  font-size: 10px;
}
.logistique-view .add-pax summary:hover {
  background: var(--blue-50);
}
.logistique-view .add-pax[open] summary {
  border-bottom: 1px solid var(--neutral-100);
  background: var(--blue-50);
}
.logistique-view .add-pax .add-pax-list {
  padding: 10px 16px;
  display: grid;
  gap: 6px;
}
.logistique-view .add-pax .add-pax-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: #fff;
}
.logistique-view .add-pax .add-pax-item .add-pax-name {
  flex: 1;
  font-size: 12px;
  color: var(--neutral-800);
  font-weight: 500;
}
.logistique-view .add-pax .add-pax-item .add-pax-dr {
  font-size: 11px;
  color: var(--neutral-500);
}
.logistique-view .trip-actions-row {
  border-top: 1px solid var(--neutral-100);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--neutral-50);
}
.logistique-view .trip-actions-row .suggestion-inline {
  font-size: 11.5px;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 4px 10px;
  border-radius: 6px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.logistique-view .side-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.logistique-view .side-card h3 {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.logistique-view .side-card h3 i {
  color: var(--neutral-400);
  font-size: 12px;
}
.logistique-view .side-card .btn-block {
  width: 100%;
  margin-top: 10px;
}
.logistique-view .presta-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}
.logistique-view .presta-card-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--neutral-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.logistique-view .presta-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.logistique-view .presta-card-email {
  font-size: 11px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  word-break: break-all;
}
.logistique-view .presta-card-actions {
  display: flex;
  gap: 6px;
}
.logistique-view .presta-card-actions .btn {
  flex: 1;
}
.logistique-view .summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.logistique-view .summary-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-100);
}
.logistique-view .summary-list li:last-child {
  border-bottom: none;
}
.logistique-view .summary-list li strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.logistique-view .unassigned-list {
  background: var(--amber-50);
  border-radius: 6px;
  padding: 6px;
  margin: -6px;
  display: grid;
  gap: 4px;
}
.logistique-view .unassigned-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #fff;
  border-radius: 6px;
  font-size: 11.5px;
}
.logistique-view .unassigned-pill .pax-avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
}
.logistique-view .unassigned-pill .pax-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-900);
}
.logistique-view .unassigned-pill .pax-dr {
  font-size: 10px;
  color: var(--neutral-500);
  margin-left: auto;
}
.logistique-view .cost-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.logistique-view .cost-summary th, .logistique-view .cost-summary td {
  padding: 6px 0;
  border-bottom: 1px solid var(--neutral-100);
  text-align: left;
}
.logistique-view .cost-summary th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--neutral-500);
  font-weight: 600;
}
.logistique-view .cost-summary td {
  color: var(--neutral-800);
}
.logistique-view .cost-summary td.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.logistique-view .cost-summary tr.total td {
  border-top: 2px solid var(--neutral-300);
  font-weight: 700;
  color: var(--neutral-900);
  padding-top: 8px;
}
.logistique-view .stacked-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--neutral-100);
  margin-bottom: 8px;
}
.logistique-view .stacked-bar .seg {
  height: 100%;
}
.logistique-view .stacked-bar .seg.propose {
  background: var(--amber-500);
}
.logistique-view .stacked-bar .seg.confirme {
  background: var(--green-600);
}
.logistique-view .stacked-bar .seg.annule {
  background: var(--neutral-400);
}
.logistique-view .stacked-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--neutral-600);
  flex-wrap: wrap;
}
.logistique-view .stacked-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.logistique-view .stacked-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.logistique-view .empty-state {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border: 1px dashed var(--neutral-200);
  border-radius: 12px;
  color: var(--neutral-500);
}
.logistique-view .empty-state .empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--neutral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--neutral-400);
  margin-bottom: 10px;
}
.logistique-view .empty-state .empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-800);
  margin-bottom: 4px;
}
.logistique-view .empty-state .empty-state-desc {
  font-size: 13px;
  color: var(--neutral-500);
}

/* ═══════════════════════════════════════════════════════════════
   FORMATIONS — page /gestion/formations
   Scope : .formations-view. Réutilise les tokens + patterns existants
   (kpi, filter-chip, status-pill) mais avec un accent indigo/purple
   pour distinguer la gestion référentiel des pages opérationnelles.
   ═══════════════════════════════════════════════════════════════ */
.formations-view {
  font-size: 13px;
  /* ── Page header ─────────────────────────────────────────── */
  /* ── KPI row 4 cartes ─────────────────────────────────────── */
  /* ── Upcoming strip ───────────────────────────────────────── */
  /* ── Toolbar ──────────────────────────────────────────────── */
  /* ── Table ────────────────────────────────────────────────── */
  /* Formation cell avec mark colorée + code */
  /* Status pill (ongoing/upcoming/past) */
  /* ── Pagination (simple) ──────────────────────────────────── */
  /* ── Empty state ──────────────────────────────────────────── */
  /* ═════════════════════════════════════════════════════════════
     FORM PAGE (create/edit formation)
     ═════════════════════════════════════════════════════════════ */
  /* Hero card (mode édition) — gradient indigo/purple cohérent avec .page-title-mark */
  /* Form card */
  /* Sticky form footer */
  /* Toggle "Actif" spécifique — mis en avant visuellement */
  /* ── Section Rooming list (page édition formation) ────────── */
}
.formations-view .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.formations-view .page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.formations-view .page-title-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4F46E5, #9333EA);
}
.formations-view .page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.formations-view .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.formations-view .page-subtitle .pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.formations-view .page-subtitle .pill.green {
  background: var(--green-50);
  color: var(--green-700);
}
.formations-view .page-subtitle .pill.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.formations-view .page-subtitle .pill.blue {
  background: var(--blue-50);
  color: var(--blue-700);
}
.formations-view .page-subtitle .pill.purple {
  background: var(--purple-50);
  color: var(--purple-700);
}
.formations-view .page-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.formations-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .formations-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.formations-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.formations-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.formations-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.formations-view .kpi .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.formations-view .kpi .kpi-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-left: 3px;
}
.formations-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.formations-view .kpi .kpi-trend {
  font-size: 11px;
  font-weight: 600;
}
.formations-view .kpi .kpi-trend.up {
  color: var(--green-700);
}
.formations-view .kpi .kpi-trend.down {
  color: var(--red-600);
}
.formations-view .upcoming-strip {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.formations-view .upcoming-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.formations-view .upcoming-strip-head h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.formations-view .upcoming-strip-head h3 i {
  color: #4F46E5;
  font-size: 12px;
}
.formations-view .upcoming-strip-head .meta {
  font-size: 11px;
  color: var(--neutral-500);
}
.formations-view .upcoming-strip-head .meta strong {
  color: var(--neutral-800);
}
.formations-view .upcoming-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  margin: 0 -2px;
}
.formations-view .upcoming-scroll::-webkit-scrollbar {
  display: none;
}
.formations-view .up-card {
  flex: 0 0 240px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 150ms;
}
.formations-view .up-card:hover {
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: var(--shadow);
}
.formations-view .up-card .up-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.formations-view .up-card .up-card-date {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
}
.formations-view .up-card .up-card-date .month {
  color: var(--neutral-500);
  font-weight: 500;
}
.formations-view .up-card .up-card-nom {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.formations-view .up-card .up-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--neutral-500);
}
.formations-view .up-card .up-card-foot .pax {
  color: var(--blue-700);
  font-weight: 700;
}
.formations-view .up-card .up-card-foot .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--neutral-300);
}
.formations-view .toolbar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.formations-view .toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
  max-width: 360px;
}
.formations-view .toolbar-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  transition: all 150ms;
}
.formations-view .toolbar-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.formations-view .toolbar-search > i {
  position: absolute;
  left: 11px;
  color: var(--neutral-500);
  font-size: 12px;
  pointer-events: none;
}
.formations-view .segmented {
  display: inline-flex;
  background: var(--neutral-100);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.formations-view .segmented a, .formations-view .segmented button {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.formations-view .segmented a i, .formations-view .segmented button i {
  font-size: 11px;
}
.formations-view .segmented a small, .formations-view .segmented button small {
  color: var(--neutral-400);
  font-weight: 500;
}
.formations-view .segmented a.is-active, .formations-view .segmented button.is-active {
  background: #fff;
  color: var(--neutral-900);
  box-shadow: var(--shadow-sm);
}
.formations-view .segmented a:hover:not(.is-active), .formations-view .segmented button:hover:not(.is-active) {
  color: var(--neutral-800);
}
.formations-view .content-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.formations-view .content-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.formations-view .content-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.formations-view .content-card-title .count {
  color: var(--neutral-500);
  font-weight: 500;
  font-size: 12px;
}
.formations-view .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.formations-view .data-table thead th {
  background: var(--neutral-50);
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  padding: 10px 14px;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.formations-view .data-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
  color: var(--neutral-800);
}
.formations-view .data-table tbody tr {
  transition: background 120ms;
  cursor: pointer;
}
.formations-view .data-table tbody tr:hover td {
  background: #FAFBFC;
}
.formations-view .data-table tbody tr:last-child td {
  border-bottom: none;
}
.formations-view .f-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}
.formations-view .f-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1463D9, #4F46E5);
  /* 6 variantes déterministes par hash du nom de campus */
}
.formations-view .f-mark.c-0 {
  background: linear-gradient(135deg, #1463D9, #4F46E5);
}
.formations-view .f-mark.c-1 {
  background: linear-gradient(135deg, #0D9488, #16A34A);
}
.formations-view .f-mark.c-2 {
  background: linear-gradient(135deg, #EA580C, #F59E0B);
}
.formations-view .f-mark.c-3 {
  background: linear-gradient(135deg, #9333EA, #EC4899);
}
.formations-view .f-mark.c-4 {
  background: linear-gradient(135deg, #DC2626, #F59E0B);
}
.formations-view .f-mark.c-5 {
  background: linear-gradient(135deg, #0891B2, #1463D9);
}
.formations-view .f-name-text {
  min-width: 0;
}
.formations-view .f-name-text .title {
  font-weight: 600;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 1.3;
}
.formations-view .f-name-text .code {
  font-size: 10.5px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.formations-view .campus-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-700);
  font-weight: 500;
}
.formations-view .campus-cell i {
  color: var(--neutral-400);
  font-size: 10px;
}
.formations-view .campus-sub {
  font-size: 10.5px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.formations-view .dates-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
}
.formations-view .dates-cell .range {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-800);
  font-variant-numeric: tabular-nums;
}
.formations-view .dates-cell .dur {
  font-size: 10.5px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.formations-view .dates-cell .dur i {
  font-size: 9px;
}
.formations-view .progress-cell {
  min-width: 140px;
}
.formations-view .progress-cell .top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.formations-view .progress-cell .top .ratio {
  color: var(--neutral-500);
  font-weight: 500;
}
.formations-view .progress-bar {
  height: 6px;
  background: var(--neutral-100);
  border-radius: 3px;
  overflow: hidden;
}
.formations-view .progress-bar > div {
  height: 100%;
  border-radius: 3px;
  transition: width 300ms;
}
.formations-view .progress-bar .fill-green {
  background: #22C55E;
}
.formations-view .progress-bar .fill-amber {
  background: #F59E0B;
}
.formations-view .progress-bar .fill-red {
  background: #EF4444;
}
.formations-view .formateur-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.formations-view .formateur-cell .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--neutral-200);
  color: var(--neutral-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.formations-view .formateur-cell .name {
  font-size: 12px;
  color: var(--neutral-800);
  font-weight: 500;
}
.formations-view .formateur-cell .name.none {
  color: var(--neutral-400);
  font-style: italic;
  font-size: 11.5px;
}
.formations-view .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.formations-view .status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.formations-view .status-pill.ongoing {
  background: var(--green-50);
  color: var(--green-700);
}
.formations-view .status-pill.ongoing::before {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  animation: form-pulse 2s infinite;
}
.formations-view .status-pill.upcoming {
  background: var(--blue-50);
  color: var(--blue-700);
}
.formations-view .status-pill.past {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.formations-view .status-pill.draft {
  background: var(--amber-50);
  color: var(--amber-700);
}
@keyframes form-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.05);
  }
}
.formations-view .row-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-600);
  cursor: pointer;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.formations-view .row-icon-btn:hover {
  background: var(--neutral-50);
  color: var(--neutral-900);
  border-color: var(--neutral-300);
}
.formations-view .row-icon-btn.danger:hover {
  background: var(--red-50);
  color: var(--red-600);
  border-color: var(--red-100);
}
.formations-view .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  font-size: 12px;
  color: var(--neutral-600);
}
.formations-view .pagination strong {
  color: var(--neutral-800);
  font-weight: 700;
}
.formations-view .empty-state {
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--neutral-500);
}
.formations-view .empty-state i {
  font-size: 34px;
  color: var(--neutral-300);
  margin-bottom: 12px;
}
.formations-view .empty-state h3 {
  margin: 0 0 4px;
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 700;
}
.formations-view .empty-state p {
  margin: 0;
  font-size: 12px;
}
.formations-view .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 12px;
}
.formations-view .page-back:hover {
  color: var(--blue-600);
}
.formations-view .page-back i {
  font-size: 10px;
}
.formations-view .formation-hero {
  background: linear-gradient(135deg, #EEF2FF 0%, var(--purple-50) 100%);
  border: 1px solid #E0E7FF;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.formations-view .formation-hero-mark {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4F46E5, #9333EA);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.formations-view .formation-hero-info {
  flex: 1;
  min-width: 0;
}
.formations-view .formation-hero-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.formations-view .formation-hero-name .code-tag {
  font-size: 11px;
  font-weight: 600;
  color: #4338CA;
  background: #fff;
  border: 1px solid #E0E7FF;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.formations-view .formation-hero-meta {
  margin-top: 6px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-600);
}
.formations-view .formation-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.formations-view .formation-hero-meta i {
  font-size: 10px;
  color: var(--neutral-400);
}
.formations-view .formation-hero-stats {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.formations-view .formation-hero-stats .hstat {
  text-align: center;
  padding: 0 6px;
}
.formations-view .formation-hero-stats .hstat .hstat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.formations-view .formation-hero-stats .hstat .hstat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin-top: 4px;
}
.formations-view .form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  /* overflow visible : sinon le .ts-dropdown de Tom Select est tronqué
   * quand il dépasse du card (ex. select Campus en bas du form). */
  overflow: visible;
  margin-bottom: 20px;
}
.formations-view .form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutral-100);
}
.formations-view .form-section:last-child {
  border-bottom: none;
}
.formations-view .form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.formations-view .form-section-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #EEF2FF;
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.formations-view .form-section-head .icon.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.formations-view .form-section-head .icon.teal {
  background: #CCFBF1;
  color: #0F766E;
}
.formations-view .form-section-head .icon.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.formations-view .form-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.formations-view .form-section-head .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
}
.formations-view .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .formations-view .form-grid {
    grid-template-columns: 1fr;
  }
}
.formations-view .form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.formations-view .form-grid .form-group.full {
  grid-column: 1/-1;
}
.formations-view .form-grid .form-group label.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
}
.formations-view .form-grid .form-group label.form-label .required {
  color: var(--red-600);
  margin-left: 2px;
}
.formations-view .form-grid .form-group .form-hint {
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
  margin-top: 2px;
}
.formations-view .form-footer {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: sticky;
  bottom: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 5;
  flex-wrap: wrap;
}
.formations-view .form-footer .footer-hint {
  font-size: 12px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.formations-view .form-footer .footer-hint i {
  font-size: 11px;
  color: var(--neutral-400);
}
.formations-view .form-footer .footer-actions {
  display: flex;
  gap: 8px;
}
.formations-view .form-toggle-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  grid-column: 1/-1;
}
.formations-view .form-toggle-card .toggle-info {
  flex: 1;
}
.formations-view .form-toggle-card .toggle-info .toggle-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}
.formations-view .form-toggle-card .toggle-info .toggle-desc {
  font-size: 11.5px;
  color: var(--neutral-600);
  margin-top: 2px;
}
.formations-view .form-toggle-card .toggle-control {
  display: flex;
  gap: 6px;
}
.formations-view .form-toggle-card .toggle-control label {
  padding: 6px 14px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 120ms;
}
.formations-view .form-toggle-card .toggle-control label input {
  display: none;
}
.formations-view .form-toggle-card .toggle-control label:has(input:checked) {
  border-color: var(--green-600);
  background: var(--green-50);
  color: var(--green-700);
}
.formations-view .rooming-card {
  margin-top: 16px;
}
.formations-view .rooming-card .form-section-head .icon.blue {
  background: var(--blue-50);
  color: var(--blue-700);
}
.formations-view .rooming-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.formations-view .rooming-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: all 0.15s ease;
}
.formations-view .rooming-btn:hover {
  border-color: var(--blue-600);
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}
.formations-view .rooming-btn:hover .rooming-btn-arrow {
  color: var(--blue-600);
  transform: translateX(2px);
}
.formations-view .rooming-btn.rooming-btn-all {
  background: linear-gradient(135deg, var(--blue-50), #EEF2FF);
  border-color: var(--blue-200);
}
.formations-view .rooming-btn.rooming-btn-all .rooming-btn-icon {
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
}
.formations-view .rooming-btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.formations-view .rooming-btn-icon.sm {
  width: 36px;
  height: 36px;
  font-size: 14px;
  background: var(--blue-50);
  color: var(--blue-700);
}
.formations-view .rooming-btn-body {
  flex: 1;
  min-width: 0;
}
.formations-view .rooming-btn-body .rooming-btn-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 2px;
}
.formations-view .rooming-btn-body .rooming-btn-sub {
  font-size: 12px;
  color: var(--neutral-500);
}
.formations-view .rooming-btn-arrow {
  color: var(--neutral-400);
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.formations-view .rooming-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0 0;
}
.formations-view .rooming-separator::before, .formations-view .rooming-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--neutral-200);
}
.formations-view .rooming-separator span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
}
.formations-view .rooming-hotel-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.formations-view .rooming-empty {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  color: var(--amber-800);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.formations-view .rooming-empty i {
  color: var(--amber-700);
  font-size: 14px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   STAGIAIRES — page /gestion/stagiaires
   Scope : .stagiaires-view. Pattern identique à .formations-view
   (header + KPI + toolbar + table) mais accent bleu/teal pour
   distinguer annuaire personnes vs catalogue sessions.
   ═══════════════════════════════════════════════════════════════ */
.stagiaires-view {
  font-size: 13px;
  /* ── Page header ──────────────────────────────────────────── */
  /* ── KPI row 4 cartes ─────────────────────────────────────── */
  /* ── Toolbar ──────────────────────────────────────────────── */
  /* ── Table ────────────────────────────────────────────────── */
  /* Cell : avatar + nom/prénom + NNI */
  /* DR + lieu */
  /* Status pill pour complétude/activité */
  /* Pagination */
  /* ═════════════════════════════════════════════════════════════
     FORM PAGE (create/edit stagiaire)
     ═════════════════════════════════════════════════════════════ */
  /* Hero card (mode édition seulement) */
  /* Form card */
  /* Sticky form footer */
  /* Empty state */
}
.stagiaires-view .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.stagiaires-view .page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stagiaires-view .page-title-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-600), #0D9488);
}
.stagiaires-view .page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.stagiaires-view .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stagiaires-view .page-subtitle .pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stagiaires-view .page-subtitle .pill.blue {
  background: var(--blue-50);
  color: var(--blue-700);
}
.stagiaires-view .page-subtitle .pill.teal {
  background: #CCFBF1;
  color: #0F766E;
}
.stagiaires-view .page-subtitle .pill.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.stagiaires-view .page-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.stagiaires-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .stagiaires-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.stagiaires-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stagiaires-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.stagiaires-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.stagiaires-view .kpi .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stagiaires-view .kpi .kpi-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-left: 3px;
}
.stagiaires-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.stagiaires-view .kpi .kpi-trend {
  font-size: 11px;
  font-weight: 600;
}
.stagiaires-view .kpi .kpi-trend.up {
  color: var(--green-700);
}
.stagiaires-view .kpi .kpi-trend.down {
  color: var(--red-600);
}
.stagiaires-view .kpi .kpi-trend.warn {
  color: var(--amber-700);
}
.stagiaires-view .toolbar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stagiaires-view .toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
  max-width: 360px;
}
.stagiaires-view .toolbar-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  transition: all 150ms;
}
.stagiaires-view .toolbar-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.stagiaires-view .toolbar-search > i {
  position: absolute;
  left: 11px;
  color: var(--neutral-500);
  font-size: 12px;
  pointer-events: none;
}
.stagiaires-view .segmented {
  display: inline-flex;
  background: var(--neutral-100);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.stagiaires-view .segmented a, .stagiaires-view .segmented button {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stagiaires-view .segmented a i, .stagiaires-view .segmented button i {
  font-size: 11px;
}
.stagiaires-view .segmented a small, .stagiaires-view .segmented button small {
  color: var(--neutral-400);
  font-weight: 500;
}
.stagiaires-view .segmented a.is-active, .stagiaires-view .segmented button.is-active {
  background: #fff;
  color: var(--neutral-900);
  box-shadow: var(--shadow-sm);
}
.stagiaires-view .segmented a:hover:not(.is-active), .stagiaires-view .segmented button:hover:not(.is-active) {
  color: var(--neutral-800);
}
.stagiaires-view .content-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.stagiaires-view .content-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.stagiaires-view .content-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.stagiaires-view .content-card-title .count {
  color: var(--neutral-500);
  font-weight: 500;
  font-size: 12px;
}
.stagiaires-view .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.stagiaires-view .data-table thead th {
  background: var(--neutral-50);
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  padding: 10px 14px;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.stagiaires-view .data-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
  color: var(--neutral-800);
}
.stagiaires-view .data-table tbody tr {
  transition: background 120ms;
  cursor: pointer;
}
.stagiaires-view .data-table tbody tr:hover td {
  background: #FAFBFC;
}
.stagiaires-view .data-table tbody tr:last-child td {
  border-bottom: none;
}
.stagiaires-view .person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}
.stagiaires-view .person-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.stagiaires-view .person-info {
  min-width: 0;
}
.stagiaires-view .person-name {
  font-weight: 600;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 1.3;
}
.stagiaires-view .person-nni {
  font-size: 10.5px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.stagiaires-view .person-nni.missing {
  color: var(--amber-700);
  font-family: inherit;
  font-style: italic;
}
.stagiaires-view .dr-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}
.stagiaires-view .dr-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}
.stagiaires-view .lieu-sub {
  font-size: 10.5px;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stagiaires-view .lieu-sub i {
  font-size: 9px;
  color: var(--neutral-400);
}
.stagiaires-view .contact-cell {
  font-size: 12px;
  color: var(--neutral-700);
}
.stagiaires-view .contact-cell .line {
  display: block;
}
.stagiaires-view .contact-cell .line + .line {
  color: var(--neutral-500);
  font-size: 10.5px;
  margin-top: 2px;
}
.stagiaires-view .contact-cell .missing {
  color: var(--neutral-300);
  font-style: italic;
}
.stagiaires-view .contact-cell i {
  color: var(--neutral-400);
  font-size: 10px;
  margin-right: 5px;
}
.stagiaires-view .manager-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
}
.stagiaires-view .manager-cell .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--neutral-200);
  color: var(--neutral-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.stagiaires-view .manager-cell .name {
  font-size: 12px;
  color: var(--neutral-800);
  font-weight: 500;
}
.stagiaires-view .manager-cell .name.none {
  color: var(--neutral-400);
  font-style: italic;
  font-size: 11.5px;
}
.stagiaires-view .activity-cell {
  min-width: 140px;
}
.stagiaires-view .activity-cell .count-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.stagiaires-view .activity-cell .count-bubble i {
  font-size: 9px;
}
.stagiaires-view .activity-cell .count-bubble.active {
  background: var(--green-50);
  color: var(--green-700);
}
.stagiaires-view .activity-cell .count-bubble.inactive {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.stagiaires-view .activity-cell .count-bubble.none {
  background: var(--neutral-100);
  color: var(--neutral-400);
  font-style: italic;
}
.stagiaires-view .activity-cell .last-date {
  font-size: 10.5px;
  color: var(--neutral-500);
  margin-top: 3px;
  display: block;
  font-variant-numeric: tabular-nums;
}
.stagiaires-view .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.stagiaires-view .status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.stagiaires-view .status-pill.active {
  background: var(--green-50);
  color: var(--green-700);
}
.stagiaires-view .status-pill.inactive {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.stagiaires-view .status-pill.incomplete {
  background: var(--amber-50);
  color: var(--amber-700);
}
.stagiaires-view .row-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-600);
  cursor: pointer;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.stagiaires-view .row-icon-btn:hover {
  background: var(--neutral-50);
  color: var(--neutral-900);
  border-color: var(--neutral-300);
}
.stagiaires-view .row-icon-btn.danger:hover {
  background: var(--red-50);
  color: var(--red-600);
  border-color: var(--red-100);
}
.stagiaires-view .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  font-size: 12px;
  color: var(--neutral-600);
}
.stagiaires-view .pagination strong {
  color: var(--neutral-800);
  font-weight: 700;
}
.stagiaires-view .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 12px;
}
.stagiaires-view .page-back:hover {
  color: var(--blue-600);
}
.stagiaires-view .page-back i {
  font-size: 10px;
}
.stagiaires-view .stagiaire-hero {
  background: linear-gradient(135deg, var(--blue-50) 0%, #CCFBF1 100%);
  border: 1px solid var(--blue-100);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.stagiaires-view .stagiaire-hero-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(20, 99, 217, 0.2);
}
.stagiaires-view .stagiaire-hero-info {
  flex: 1;
  min-width: 0;
}
.stagiaires-view .stagiaire-hero-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.stagiaires-view .stagiaire-hero-name .nni-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-700);
  background: #fff;
  border: 1px solid var(--blue-100);
  padding: 3px 9px;
  border-radius: 5px;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.stagiaires-view .stagiaire-hero-meta {
  margin-top: 6px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-600);
}
.stagiaires-view .stagiaire-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.stagiaires-view .stagiaire-hero-meta i {
  font-size: 10px;
  color: var(--neutral-400);
}
.stagiaires-view .stagiaire-hero-stats {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.stagiaires-view .stagiaire-hero-stats .hstat {
  text-align: center;
  padding: 0 6px;
}
.stagiaires-view .stagiaire-hero-stats .hstat .hstat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.stagiaires-view .stagiaire-hero-stats .hstat .hstat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin-top: 4px;
}
.stagiaires-view .form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  /* overflow visible : sinon le .ts-dropdown de Tom Select est tronqué
   * quand il dépasse du card (ex. dernier select du form). */
  overflow: visible;
  margin-bottom: 20px;
}
.stagiaires-view .form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutral-100);
}
.stagiaires-view .form-section:last-child {
  border-bottom: none;
}
.stagiaires-view .form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.stagiaires-view .form-section-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.stagiaires-view .form-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stagiaires-view .form-section-head .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
}
.stagiaires-view .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .stagiaires-view .form-grid {
    grid-template-columns: 1fr;
  }
}
.stagiaires-view .form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.stagiaires-view .form-grid .form-group.full {
  grid-column: 1/-1;
}
.stagiaires-view .form-grid .form-group label.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
}
.stagiaires-view .form-grid .form-group label.form-label .required {
  color: var(--red-600);
  margin-left: 2px;
}
.stagiaires-view .form-grid .form-group .form-hint {
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
  margin-top: 2px;
}
.stagiaires-view .form-footer {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: sticky;
  bottom: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 5;
  flex-wrap: wrap;
}
.stagiaires-view .form-footer .footer-hint {
  font-size: 12px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.stagiaires-view .form-footer .footer-hint i {
  font-size: 11px;
  color: var(--neutral-400);
}
.stagiaires-view .form-footer .footer-actions {
  display: flex;
  gap: 8px;
}
.stagiaires-view .empty-state {
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--neutral-500);
}
.stagiaires-view .empty-state i {
  font-size: 34px;
  color: var(--neutral-300);
  margin-bottom: 12px;
}
.stagiaires-view .empty-state h3 {
  margin: 0 0 4px;
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 700;
}
.stagiaires-view .empty-state p {
  margin: 0;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   PROFIL — page /profil (Mon profil)
   Scope : .profil-view. Accent bleu → cyan pour une identité
   personnelle distincte des pages de gestion référentiel.
   ═══════════════════════════════════════════════════════════════ */
.profil-view {
  font-size: 13px;
  /* ── Hero card ────────────────────────────────────────────── */
  /* ── KPI row ──────────────────────────────────────────────── */
  /* ── Grid 2 cols ──────────────────────────────────────────── */
  /* ── Form card (identique formations/stagiaires) ──────────── */
  /* ── Security tips ───────────────────────────────────────── */
  /* ── Hotelier card (si applicable) ────────────────────────── */
  /* ── Déconnexion ──────────────────────────────────────────── */
}
.profil-view .profil-hero {
  background: linear-gradient(135deg, var(--blue-600) 0%, #0EA5E9 100%);
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin-bottom: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.3);
  /* Pattern décoratif subtil */
}
.profil-view .profil-hero::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.profil-view .profil-hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.profil-view .profil-hero-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.5px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.25);
}
.profil-view .profil-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profil-view .profil-hero-upload {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 150ms;
}
.profil-view .profil-hero-upload:hover {
  transform: scale(1.08);
  color: var(--blue-700);
}
.profil-view .profil-hero-upload input {
  display: none;
}
.profil-view .profil-hero-info {
  flex: 1;
  min-width: 0;
  z-index: 1;
}
.profil-view .profil-hero-name {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.4px;
  color: #fff;
}
.profil-view .profil-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.profil-view .profil-hero-meta .role-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.profil-view .profil-hero-meta .role-badge i {
  font-size: 9px;
}
.profil-view .profil-hero-meta .role-badge.super-admin {
  background: rgba(220, 38, 38, 0.85);
}
.profil-view .profil-hero-meta .role-badge.direction {
  background: rgba(234, 88, 12, 0.85);
}
.profil-view .profil-hero-meta .role-badge.enedis, .profil-view .profil-hero-meta .role-badge.handicall {
  background: rgba(255, 255, 255, 0.18);
}
.profil-view .profil-hero-meta .role-badge.hotelier {
  background: rgba(147, 51, 234, 0.85);
}
.profil-view .profil-hero-meta .poste {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
.profil-view .profil-hero-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profil-view .profil-hero-sub i {
  font-size: 10px;
}
.profil-view .profil-hero-actions {
  display: flex;
  gap: 8px;
  z-index: 1;
}
.profil-view .profil-hero-actions .btn-on-hero {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: all 150ms;
}
.profil-view .profil-hero-actions .btn-on-hero:hover {
  background: rgba(255, 255, 255, 0.22);
}
.profil-view .profil-hero-actions .btn-on-hero i {
  font-size: 11px;
}
.profil-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
  .profil-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.profil-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.profil-view .kpi .kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.profil-view .kpi .kpi-icon.blue {
  background: var(--blue-50);
  color: var(--blue-600);
}
.profil-view .kpi .kpi-icon.green {
  background: var(--green-50);
  color: var(--green-700);
}
.profil-view .kpi .kpi-icon.amber {
  background: var(--amber-50);
  color: #D97706;
}
.profil-view .kpi .kpi-icon.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.profil-view .kpi .kpi-icon.teal {
  background: #CCFBF1;
  color: #0F766E;
}
.profil-view .kpi .kpi-info {
  min-width: 0;
  flex: 1;
}
.profil-view .kpi .kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.3px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.profil-view .kpi .kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-top: 2px;
}
.profil-view .profil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .profil-view .profil-grid {
    grid-template-columns: 1fr;
  }
}
.profil-view .form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: visible;
}
.profil-view .form-section {
  padding: 20px 22px;
}
.profil-view .form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.profil-view .form-section-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.profil-view .form-section-head .icon.red {
  background: var(--red-50);
  color: var(--red-600);
}
.profil-view .form-section-head .icon.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.profil-view .form-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.profil-view .form-section-head .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
}
.profil-view .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .profil-view .form-grid {
    grid-template-columns: 1fr;
  }
}
.profil-view .form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.profil-view .form-grid .form-group.full {
  grid-column: 1/-1;
}
.profil-view .form-grid .form-group label.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
}
.profil-view .form-grid .form-group label.form-label .required {
  color: var(--red-600);
  margin-left: 2px;
}
.profil-view .form-grid .form-group .form-help {
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
  margin-top: 2px;
}
.profil-view .form-grid .form-group .form-help a {
  color: var(--blue-600);
  text-decoration: none;
}
.profil-view .form-grid .form-group .form-help a:hover {
  text-decoration: underline;
}
.profil-view .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-100);
}
.profil-view .security-tips {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--amber-800);
}
.profil-view .security-tips i {
  color: var(--amber-600);
  font-size: 13px;
  margin-top: 2px;
}
.profil-view .security-tips strong {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.profil-view .security-tips ul {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 11.5px;
  color: var(--amber-700);
}
.profil-view .security-tips li {
  margin-bottom: 2px;
}
.profil-view .hotelier-card {
  background: linear-gradient(135deg, var(--purple-50), #fff);
  border: 1px solid var(--purple-200);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.profil-view .hotelier-card .hotel-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--purple-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.profil-view .hotelier-card .hotel-info {
  flex: 1;
}
.profil-view .hotelier-card .hotel-info .hotel-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
}
.profil-view .hotelier-card .hotel-info .hotel-loc {
  font-size: 12px;
  color: var(--neutral-600);
  margin-top: 3px;
}
.profil-view .profil-logout-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.profil-view .profil-logout-card .profil-logout-info {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.profil-view .profil-logout-card .profil-logout-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--red-50);
  color: var(--red-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.profil-view .profil-logout-card .profil-logout-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
}
.profil-view .profil-logout-card .profil-logout-sub {
  font-size: 12px;
  color: var(--neutral-600);
  margin-top: 2px;
  line-height: 1.45;
  max-width: 520px;
}
.profil-view .profil-logout-card .profil-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  background: #fff;
  color: var(--red-700);
  border: 1px solid var(--red-200);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
  flex-shrink: 0;
}
.profil-view .profil-logout-card .profil-logout-btn i {
  font-size: 12px;
}
.profil-view .profil-logout-card .profil-logout-btn:hover {
  background: var(--red-600);
  border-color: var(--red-600);
  color: #fff;
  transform: translateY(-1px);
}
.profil-view .profil-logout-card .profil-logout-btn:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN — page /login (split layout)
   Scope : .login-view. Layout 2 colonnes : brand panel gradient
   à gauche (logo + pitch + features), form propre à droite.
   ═══════════════════════════════════════════════════════════════ */
.login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  font-family: var(--font-family);
  /* ── Brand panel (gauche) ──────────────────────────────────── */
  /* ── Form panel (droite) ───────────────────────────────────── */
  /* Alerte erreur */
  /* Form groups custom pour login (padding plus grand que standard) */
}
@media (max-width: 900px) {
  .login-view {
    grid-template-columns: 1fr;
  }
}
.login-view .login-brand-panel {
  background: linear-gradient(135deg, var(--blue-600) 0%, #0EA5E9 100%);
  color: #fff;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  /* Cercles décoratifs subtils */
}
@media (max-width: 900px) {
  .login-view .login-brand-panel {
    padding: 32px 28px;
    min-height: 200px;
  }
}
.login-view .login-brand-panel::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.login-view .login-brand-panel::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.login-view .login-brand-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}
.login-view .login-brand-logo img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
}
.login-view .login-brand-logo .brand-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.login-view .login-brand-logo .brand-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
  letter-spacing: 0.3px;
}
.login-view .login-brand-pitch {
  z-index: 1;
  max-width: 460px;
}
.login-view .login-brand-pitch h2 {
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.8px;
  line-height: 1.15;
}
@media (max-width: 900px) {
  .login-view .login-brand-pitch h2 {
    font-size: 22px;
  }
}
.login-view .login-brand-pitch p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 0 30px;
}
@media (max-width: 900px) {
  .login-view .login-brand-pitch p {
    font-size: 13px;
    margin-bottom: 18px;
  }
}
.login-view .login-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 900px) {
  .login-view .login-features {
    display: none;
  }
}
.login-view .login-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.92);
}
.login-view .login-features li .feat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.login-view .login-features li strong {
  font-weight: 600;
}
.login-view .login-features li span.sub {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 1px;
}
.login-view .login-brand-foot {
  z-index: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
@media (max-width: 900px) {
  .login-view .login-brand-foot {
    display: none;
  }
}
.login-view .login-brand-foot a {
  color: inherit;
  text-decoration: none;
}
.login-view .login-brand-foot a:hover {
  color: #fff;
}
.login-view .login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
@media (max-width: 900px) {
  .login-view .login-form-panel {
    padding: 32px 24px;
  }
}
.login-view .login-form-wrap {
  width: 100%;
  max-width: 400px;
}
.login-view .login-form-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0 0 6px;
  letter-spacing: -0.4px;
}
.login-view .login-form-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin: 0 0 28px;
}
.login-view .login-error {
  background: var(--red-50);
  border: 1px solid #FECACA;
  color: var(--red-700);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.login-view .login-error i {
  color: var(--red-600);
  margin-top: 2px;
  font-size: 13px;
}
.login-view .form-group {
  margin-bottom: 16px;
}
.login-view .form-group label.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 6px;
}
.login-view .login-input-wrap {
  position: relative;
  /* Bouton "toggle password visibility" */
}
.login-view .login-input-wrap i.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.login-view .login-input-wrap input.form-control {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  background: #fff;
  transition: border-color 150ms, box-shadow 150ms;
}
.login-view .login-input-wrap input.form-control:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.login-view .login-input-wrap input.form-control:focus ~ .input-icon {
  color: var(--blue-600);
}
.login-view .login-input-wrap .toggle-pwd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--neutral-400);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-view .login-input-wrap .toggle-pwd:hover {
  color: var(--blue-600);
  background: var(--neutral-50);
}
.login-view .login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  font-size: 12.5px;
}
.login-view .login-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--neutral-700);
}
.login-view .login-checkbox input {
  accent-color: var(--blue-600);
  width: 15px;
  height: 15px;
}
.login-view .login-forgot {
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
}
.login-view .login-forgot:hover {
  text-decoration: underline;
}
.login-view .login-submit {
  width: 100%;
  padding: 12px 18px;
  background: var(--blue-600);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 150ms;
  box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.35);
}
.login-view .login-submit:hover {
  background: var(--blue-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -2px rgba(37, 99, 235, 0.4);
}
.login-view .login-submit:active {
  transform: translateY(0);
}
.login-view .login-submit i {
  font-size: 12px;
}
.login-view .login-foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--neutral-100);
  text-align: center;
  font-size: 11.5px;
  color: var(--neutral-500);
}
.login-view .login-foot i {
  margin-right: 5px;
  color: var(--green-600);
}

/* ═══════════════════════════════════════════════════════════════
   GESTION — page /gestion (Centre d'administration)
   Scope : .gestion-view. Accent slate/indigo pour différencier
   l'espace d'administration des pages opérationnelles.
   ═══════════════════════════════════════════════════════════════ */
.gestion-view {
  font-size: 13px;
  /* ── Hero ─────────────────────────────────────────────────── */
  /* ── Section title ────────────────────────────────────────── */
  /* ── Tiles de navigation ──────────────────────────────────── */
  /* ── Activity grid (2 cols) ───────────────────────────────── */
}
.gestion-view .gestion-hero {
  background: linear-gradient(135deg, #0F172A 0%, #4F46E5 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.3);
}
.gestion-view .gestion-hero::before {
  content: "";
  position: absolute;
  right: -100px;
  top: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.gestion-view .gestion-hero::after {
  content: "";
  position: absolute;
  left: 40%;
  bottom: -100px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.25);
  pointer-events: none;
  filter: blur(60px);
}
.gestion-view .gestion-hero-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.gestion-view .gestion-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.gestion-view .gestion-hero-title {
  flex: 1;
}
.gestion-view .gestion-hero-title h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
}
.gestion-view .gestion-hero-title p {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.gestion-view .gestion-hero-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1200px) {
  .gestion-view .gestion-hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .gestion-view .gestion-hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gestion-view .gestion-hero-stat {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
}
.gestion-view .gestion-hero-stat .hs-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 6px;
}
.gestion-view .gestion-hero-stat .hs-label i {
  font-size: 11px;
}
.gestion-view .gestion-hero-stat .hs-value {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
  letter-spacing: -0.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gestion-view .gestion-hero-stat .hs-value .unit {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 3px;
}
.gestion-view .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gestion-view .section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--neutral-200);
}
.gestion-view .section-title i {
  color: var(--neutral-400);
  font-size: 12px;
}
.gestion-view .nav-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .gestion-view .nav-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .gestion-view .nav-tiles {
    grid-template-columns: 1fr;
  }
}
.gestion-view .nav-tile {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: all 200ms;
  /* Variantes couleur (gradient sur l'icône + border-left) */
}
.gestion-view .nav-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue-600);
  transition: width 200ms;
}
.gestion-view .nav-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}
.gestion-view .nav-tile:hover::before {
  width: 5px;
}
.gestion-view .nav-tile:hover .tile-arrow {
  transform: translateX(4px);
  color: var(--blue-600);
}
.gestion-view .nav-tile.blue::before {
  background: var(--blue-600);
}
.gestion-view .nav-tile.blue .tile-icon {
  background: linear-gradient(135deg, var(--blue-600), #0EA5E9);
}
.gestion-view .nav-tile.green::before {
  background: var(--green-600);
}
.gestion-view .nav-tile.green .tile-icon {
  background: linear-gradient(135deg, var(--green-600), #0D9488);
}
.gestion-view .nav-tile.purple::before {
  background: var(--purple-600);
}
.gestion-view .nav-tile.purple .tile-icon {
  background: linear-gradient(135deg, #4F46E5, var(--purple-600));
}
.gestion-view .nav-tile.amber::before {
  background: var(--amber-500);
}
.gestion-view .nav-tile.amber .tile-icon {
  background: linear-gradient(135deg, #EA580C, var(--amber-500));
}
.gestion-view .nav-tile.teal::before {
  background: #0D9488;
}
.gestion-view .nav-tile.teal .tile-icon {
  background: linear-gradient(135deg, #0D9488, var(--blue-600));
}
.gestion-view .nav-tile.red::before {
  background: var(--red-600);
}
.gestion-view .nav-tile.red .tile-icon {
  background: linear-gradient(135deg, var(--red-600), #EA580C);
}
.gestion-view .nav-tile.indigo::before {
  background: #4F46E5;
}
.gestion-view .nav-tile.indigo .tile-icon {
  background: linear-gradient(135deg, #4F46E5, var(--blue-600));
}
.gestion-view .tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.12);
}
.gestion-view .tile-body {
  flex: 1;
  min-width: 0;
}
.gestion-view .tile-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
}
.gestion-view .tile-desc {
  font-size: 11.5px;
  color: var(--neutral-500);
  margin-top: 3px;
}
.gestion-view .tile-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-600);
  background: var(--neutral-100);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.gestion-view .tile-meta i {
  font-size: 9px;
}
.gestion-view .tile-arrow {
  color: var(--neutral-300);
  font-size: 14px;
  transition: all 200ms;
  flex-shrink: 0;
}
.gestion-view .activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .gestion-view .activity-grid {
    grid-template-columns: 1fr;
  }
}
.gestion-view .activity-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.gestion-view .activity-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gestion-view .activity-head h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.gestion-view .activity-head h3 i {
  color: var(--neutral-400);
  font-size: 12px;
}
.gestion-view .activity-head a {
  font-size: 12px;
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
}
.gestion-view .activity-head a:hover {
  text-decoration: underline;
}
.gestion-view .activity-body {
  padding: 4px 0;
}
.gestion-view .activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--neutral-100);
}
.gestion-view .activity-item:last-child {
  border-bottom: none;
}
.gestion-view .activity-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.gestion-view .activity-avatar.circle {
  border-radius: 50%;
}
.gestion-view .activity-info {
  flex: 1;
  min-width: 0;
}
.gestion-view .activity-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gestion-view .activity-sub {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gestion-view .activity-sub i {
  font-size: 9px;
  color: var(--neutral-400);
}
.gestion-view .activity-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.gestion-view .activity-badge.active {
  background: var(--green-50);
  color: var(--green-700);
}
.gestion-view .activity-badge.inactive {
  background: var(--neutral-100);
  color: var(--neutral-500);
}

/* ════════════ MATRICE DR × CAMPUS ════════════ */
.matrice-completion {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
}

.matrice-completion-bar {
  flex: 1;
  height: 8px;
  background: var(--neutral-100);
  border-radius: 999px;
  overflow: hidden;
}

.matrice-completion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-700));
  border-radius: 999px;
  transition: width 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.matrice-completion-label {
  font-size: 13px;
  color: var(--neutral-700);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.matrice-completion-label strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.matrice-completion-label .matrice-completion-pct {
  color: var(--blue-600);
  font-weight: 700;
  margin-left: 4px;
}

.matrice-table .matrice-cell {
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  padding: 8px;
  transition: background 120ms;
}
.matrice-table .matrice-cell:hover {
  background: var(--blue-50);
  outline: 2px solid var(--blue-200);
  outline-offset: -2px;
}
.matrice-table .matrice-cell.is-vide .matrice-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--neutral-400);
  font-size: 11px;
  transition: all 120ms;
}
.matrice-table .matrice-cell.is-vide:hover .matrice-empty {
  background: var(--blue-100);
  color: var(--blue-600);
  transform: scale(1.05);
}

.matrice-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  margin: 1px;
}
.matrice-pill i {
  font-size: 10px;
}
.matrice-pill.mode-train {
  background: var(--blue-50);
  color: var(--blue-700);
}
.matrice-pill.mode-avion {
  background: var(--purple-50);
  color: var(--purple-700);
}
.matrice-pill.mode-voiture {
  background: var(--amber-50);
  color: var(--amber-700);
}

/* ════════════ HOTEL — Localisation GPS ════════════ */
.hotel-gps-section .geocode-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hotel-gps-section .geocode-status {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}
.hotel-gps-section .geocode-status:empty {
  display: none;
}
.hotel-gps-section .geocode-status.is-loading {
  color: var(--blue-700);
  background: var(--blue-50);
}
.hotel-gps-section .geocode-status.is-success {
  color: var(--green-700);
  background: var(--green-50);
}
.hotel-gps-section .geocode-status.is-error {
  color: var(--red-700);
  background: var(--red-50);
}
.hotel-gps-section .gps-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.hotel-gps-section .gps-status > i {
  font-size: 14px;
  flex-shrink: 0;
}
.hotel-gps-section .gps-status strong {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}
.hotel-gps-section .gps-status .gps-status-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: underline;
  font-size: 11.5px;
  opacity: 0.85;
}
.hotel-gps-section .gps-status .gps-status-link:hover {
  opacity: 1;
}
.hotel-gps-section .gps-status .gps-status-link i {
  font-size: 9px;
}
.hotel-gps-section .gps-status.gps-ok {
  background: var(--green-50);
  border: 1px solid var(--green-200);
  color: var(--green-800);
}
.hotel-gps-section .gps-status.gps-missing {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  color: var(--amber-800);
}
.hotel-gps-section .hotel-map-preview {
  height: 220px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  overflow: hidden;
  margin-top: 4px;
  background: var(--neutral-50);
}

/* Liste hôtels — badge GPS sur les cards */
.gh-gps-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-left: 6px;
}
.gh-gps-tag i {
  font-size: 9px;
}
.gh-gps-tag.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
}
.gh-gps-tag.is-missing {
  background: var(--amber-50);
  color: var(--amber-800);
  border: 1px solid var(--amber-200);
}

/* V3 PMS — Sprint 1 Tâche A : badge conformité CDC dans grid hôtels */
.gh-cdc-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-left: 6px;
}
.gh-cdc-tag i {
  font-size: 9px;
}
.gh-cdc-tag.is-full {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
}
.gh-cdc-tag.is-partial {
  background: var(--amber-50);
  color: var(--amber-800);
  border: 1px solid var(--amber-200);
}
.gh-cdc-tag.is-non_conforme {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid var(--red-200);
}

/* ═══════════════════════════════════════════════════════════════
   HOTELS — pages /gestion/hotels (index + form)
   Scope : .hotels-view. Accent blue/indigo cohérent avec
   l'admin (hôtels = partenaires clés du référentiel).
   ═══════════════════════════════════════════════════════════════ */
.hotels-view {
  font-size: 13px;
  /* ── Page header ──────────────────────────────────────────── */
  /* ── KPI row ──────────────────────────────────────────────── */
  /* ── Toolbar ──────────────────────────────────────────────── */
  /* ── Grid hotel cards ─────────────────────────────────────── */
  /* Empty state */
  /* ═════════════════════════════════════════════════════════════
     FORM PAGE (create/edit hotel)
     ═════════════════════════════════════════════════════════════ */
  /* Hero (édition) */
  /* ── Onglets édition hôtel ────────────────────────────────── */
  /* ── Danger zone ──────────────────────────────────────────── */
  /* Form card (identique formations/stagiaires) */
  /* Toggle card (active / inactive) */
  /* ─── Photos section ──────────────────────────────────────── */
  /* Sticky form footer */
  /* Les styles du partial _restaurant_form.html.twig ont été déplacés
     dans _restaurant_form.scss (partagés entre .hotels-view et .restaurants-view). */
  /* ── Section Conditions d'annulation ──────────────────────── */
  /* ── Section Catégories de chambres ───────────────────────── */
  /* ── Section Contingents (calendrier embarqué) ────────────── */
}
.hotels-view .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.hotels-view .page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hotels-view .page-title-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
}
.hotels-view .page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.hotels-view .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hotels-view .page-subtitle .pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hotels-view .page-subtitle .pill.blue {
  background: var(--blue-50);
  color: var(--blue-700);
}
.hotels-view .page-subtitle .pill.green {
  background: var(--green-50);
  color: var(--green-700);
}
.hotels-view .page-subtitle .pill.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.hotels-view .page-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.hotels-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .hotels-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.hotels-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hotels-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hotels-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.hotels-view .kpi .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hotels-view .kpi .kpi-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-left: 3px;
}
.hotels-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.hotels-view .toolbar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hotels-view .toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
  max-width: 360px;
}
.hotels-view .toolbar-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  transition: all 150ms;
}
.hotels-view .toolbar-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.hotels-view .toolbar-search > i {
  position: absolute;
  left: 11px;
  color: var(--neutral-500);
  font-size: 12px;
  pointer-events: none;
}
.hotels-view .segmented {
  display: inline-flex;
  background: var(--neutral-100);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.hotels-view .segmented a, .hotels-view .segmented button {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hotels-view .segmented a i, .hotels-view .segmented button i {
  font-size: 11px;
}
.hotels-view .segmented a small, .hotels-view .segmented button small {
  color: var(--neutral-400);
  font-weight: 500;
}
.hotels-view .segmented a.is-active, .hotels-view .segmented button.is-active {
  background: #fff;
  color: var(--neutral-900);
  box-shadow: var(--shadow-sm);
}
.hotels-view .segmented a:hover:not(.is-active), .hotels-view .segmented button:hover:not(.is-active) {
  color: var(--neutral-800);
}
.hotels-view .hotels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.hotels-view .hotel-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 200ms;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.hotels-view .hotel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
  border-color: var(--blue-200);
}
.hotels-view .hotel-card-img {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, var(--neutral-100), var(--neutral-50));
  overflow: hidden;
}
.hotels-view .hotel-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotels-view .hotel-card-img .no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-300);
  font-size: 36px;
}
.hotels-view .hotel-card-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(8px);
}
.hotels-view .hotel-card-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hotels-view .hotel-card-status.actif {
  background: rgba(34, 197, 94, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.hotels-view .hotel-card-status.inactif {
  background: rgba(115, 115, 115, 0.25);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.hotels-view .hotel-card-rating {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #FBBF24;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 1px;
}
.hotels-view .hotel-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hotels-view .hotel-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
}
.hotels-view .hotel-card-location {
  font-size: 12px;
  color: var(--neutral-600);
  display: flex;
  align-items: center;
  gap: 5px;
}
.hotels-view .hotel-card-location i {
  font-size: 10px;
  color: var(--neutral-400);
}
.hotels-view .hotel-card-campus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  background: var(--blue-50);
  color: var(--blue-700);
  padding: 3px 9px;
  border-radius: 5px;
  width: fit-content;
}
.hotels-view .hotel-card-campus i {
  font-size: 9px;
}
.hotels-view .hotel-card-meta {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--neutral-200);
  font-size: 11px;
  color: var(--neutral-500);
}
.hotels-view .hotel-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hotels-view .hotel-card-meta i {
  font-size: 10px;
  color: var(--neutral-400);
}
.hotels-view .hotel-card-actions {
  display: flex;
  gap: 6px;
  padding: 0 16px 14px;
}
.hotels-view .hotel-card .btn {
  font-size: 12px;
  padding: 7px 12px;
}
.hotels-view .empty-state {
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--neutral-500);
  grid-column: 1/-1;
}
.hotels-view .empty-state i {
  font-size: 34px;
  color: var(--neutral-300);
  margin-bottom: 12px;
}
.hotels-view .empty-state h3 {
  margin: 0 0 4px;
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 700;
}
.hotels-view .empty-state p {
  margin: 0;
  font-size: 12px;
}
.hotels-view .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 12px;
}
.hotels-view .page-back:hover {
  color: var(--blue-600);
}
.hotels-view .page-back i {
  font-size: 10px;
}
.hotels-view .hotel-hero {
  background: linear-gradient(135deg, #EEF2FF 0%, var(--blue-50) 100%);
  border: 1px solid var(--blue-100);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hotels-view .hotel-hero-img {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 34px;
}
.hotels-view .hotel-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotels-view .hotel-hero-info {
  flex: 1;
  min-width: 0;
}
.hotels-view .hotel-hero-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hotels-view .hotel-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.hotels-view .hotel-hero-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hotels-view .hotel-hero-status.actif {
  background: var(--green-50);
  color: var(--green-700);
}
.hotels-view .hotel-hero-status.inactif {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.hotels-view .hotel-hero-meta {
  margin-top: 6px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-600);
}
.hotels-view .hotel-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hotels-view .hotel-hero-meta i {
  font-size: 10px;
  color: var(--neutral-400);
}
.hotels-view .hotel-hero-stats {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.hotels-view .hotel-hero-stats .hstat {
  text-align: center;
  padding: 0 6px;
}
.hotels-view .hotel-hero-stats .hstat .hstat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.hotels-view .hotel-hero-stats .hstat .hstat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin-top: 4px;
}
.hotels-view .hotel-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow-x: auto;
}
.hotels-view .hotel-tabs::-webkit-scrollbar {
  height: 0;
}
.hotels-view .hotel-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  position: relative;
}
.hotels-view .hotel-tab i {
  font-size: 12px;
  color: var(--neutral-400);
  transition: color 0.15s ease;
}
.hotels-view .hotel-tab .tab-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--neutral-100);
  color: var(--neutral-600);
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
  transition: all 0.15s ease;
}
.hotels-view .hotel-tab:hover:not(.is-active) {
  background: var(--neutral-50);
  color: var(--neutral-800);
}
.hotels-view .hotel-tab:hover:not(.is-active) i {
  color: var(--neutral-600);
}
.hotels-view .hotel-tab.is-active {
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(37, 99, 235, 0.35);
}
.hotels-view .hotel-tab.is-active i {
  color: #fff;
}
.hotels-view .hotel-tab.is-active .tab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.hotels-view .danger-zone {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hotels-view .danger-zone strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--red-700);
  margin-bottom: 2px;
}
.hotels-view .danger-zone p {
  margin: 0;
  font-size: 12px;
  color: var(--red-800);
  opacity: 0.85;
}
.hotels-view .danger-zone .btn-danger-outline {
  background: #fff;
  color: var(--red-700);
  border: 1px solid var(--red-200);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  text-decoration: none;
}
.hotels-view .danger-zone .btn-danger-outline:hover {
  background: var(--red-600);
  color: #fff;
  border-color: var(--red-600);
}
.hotels-view .form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: visible;
  margin-bottom: 20px;
}
.hotels-view .form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutral-100);
}
.hotels-view .form-section:last-child {
  border-bottom: none;
}
.hotels-view .form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.hotels-view .form-section-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.hotels-view .form-section-head .icon.green {
  background: var(--green-50);
  color: var(--green-700);
}
.hotels-view .form-section-head .icon.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.hotels-view .form-section-head .icon.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.hotels-view .form-section-head .icon.teal {
  background: #CCFBF1;
  color: #0F766E;
}
.hotels-view .form-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hotels-view .form-section-head .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
}
.hotels-view .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .hotels-view .form-grid {
    grid-template-columns: 1fr;
  }
}
.hotels-view .form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.hotels-view .form-grid .form-group.full {
  grid-column: 1/-1;
}
.hotels-view .form-grid .form-group label.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
}
.hotels-view .form-grid .form-group label.form-label .required {
  color: var(--red-600);
  margin-left: 2px;
}
.hotels-view .form-grid .form-group .form-hint {
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
  margin-top: 2px;
}
.hotels-view .form-toggle-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  grid-column: 1/-1;
}
.hotels-view .form-toggle-card .toggle-info {
  flex: 1;
}
.hotels-view .form-toggle-card .toggle-info .toggle-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}
.hotels-view .form-toggle-card .toggle-info .toggle-desc {
  font-size: 11.5px;
  color: var(--neutral-600);
  margin-top: 2px;
}
.hotels-view .form-toggle-card .toggle-control {
  display: flex;
  gap: 6px;
}
.hotels-view .form-toggle-card .toggle-control label {
  padding: 6px 14px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 120ms;
}
.hotels-view .form-toggle-card .toggle-control label input {
  display: none;
}
.hotels-view .form-toggle-card .toggle-control label:has(input:checked) {
  border-color: var(--green-600);
  background: var(--green-50);
  color: var(--green-700);
}
.hotels-view .photo-upload-zone {
  border: 2px dashed var(--neutral-300);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 150ms;
  background: var(--neutral-50);
}
.hotels-view .photo-upload-zone:hover, .hotels-view .photo-upload-zone.is-dragover {
  border-color: var(--blue-600);
  background: var(--blue-50);
}
.hotels-view .photo-upload-zone:hover .upload-icon, .hotels-view .photo-upload-zone.is-dragover .upload-icon {
  color: var(--blue-600);
}
.hotels-view .photo-upload-zone .upload-icon {
  font-size: 32px;
  color: var(--neutral-400);
  margin-bottom: 8px;
  display: block;
}
.hotels-view .photo-upload-zone .upload-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
  margin: 0;
}
.hotels-view .photo-upload-zone .upload-sub {
  font-size: 11.5px;
  color: var(--neutral-500);
  margin: 4px 0 0;
}
.hotels-view .photo-upload-zone .upload-counter {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--blue-600);
  font-weight: 600;
}
.hotels-view .photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.hotels-view .photo-preview-grid:empty {
  display: none;
}
.hotels-view .photos-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.hotels-view .photo-tile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  aspect-ratio: 4/3;
  background: var(--neutral-100);
  transition: all 150ms;
}
.hotels-view .photo-tile:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow);
}
.hotels-view .photo-tile:hover .photo-tile-actions {
  opacity: 1;
}
.hotels-view .photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hotels-view .photo-tile .photo-tile-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--green-600);
  color: #fff;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hotels-view .photo-tile .photo-tile-badge i {
  font-size: 9px;
}
.hotels-view .photo-tile .photo-tile-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 150ms;
}
.hotels-view .photo-tile .photo-tile-actions button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  backdrop-filter: blur(4px);
  transition: background 120ms;
}
.hotels-view .photo-tile .photo-tile-actions button:hover {
  background: var(--blue-600);
}
.hotels-view .photo-tile .photo-tile-actions button.danger:hover {
  background: var(--red-600);
}
.hotels-view .photo-tile .photo-tile-actions form {
  display: inline;
}
.hotels-view .photos-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--neutral-400);
  padding: 32px;
  font-size: 12px;
  font-style: italic;
}
.hotels-view .form-footer {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: sticky;
  bottom: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 5;
  flex-wrap: wrap;
}
.hotels-view .form-footer .footer-hint {
  font-size: 12px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hotels-view .form-footer .footer-hint i {
  font-size: 11px;
  color: var(--neutral-400);
}
.hotels-view .form-footer .footer-actions {
  display: flex;
  gap: 8px;
}
.hotels-view .conditions-card .conditions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.hotels-view .conditions-card .cond-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease;
}
.hotels-view .conditions-card .cond-card:hover {
  border-color: var(--amber-200);
}
.hotels-view .conditions-card .cond-card.is-inactive {
  opacity: 0.55;
  background: var(--neutral-50);
}
.hotels-view .conditions-card .cond-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.hotels-view .conditions-card .cond-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.hotels-view .conditions-card .cond-title strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
}
.hotels-view .conditions-card .cond-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hotels-view .conditions-card .cond-pill.standard {
  background: var(--blue-50);
  color: var(--blue-700);
}
.hotels-view .conditions-card .cond-pill.exception {
  background: var(--amber-50);
  color: var(--amber-800);
}
.hotels-view .conditions-card .cond-pill.inactif {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.hotels-view .conditions-card .cond-dates {
  font-size: 11px;
  color: var(--amber-800);
  font-variant-numeric: tabular-nums;
}
.hotels-view .conditions-card .cond-rule {
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.5;
}
.hotels-view .conditions-card .cond-rule strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.hotels-view .conditions-card .cond-comment {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 5px;
}
.hotels-view .conditions-card .cond-comment i {
  color: var(--blue-600);
  font-size: 10px;
}
.hotels-view .conditions-card .cond-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.hotels-view .conditions-card .cond-actions .btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--neutral-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.15s ease;
}
.hotels-view .conditions-card .cond-actions .btn-icon:hover {
  background: var(--blue-50);
  color: var(--blue-700);
  border-color: var(--blue-200);
  transform: translateY(-1px);
}
.hotels-view .conditions-card .cond-actions .btn-icon.danger {
  color: var(--red-600);
}
.hotels-view .conditions-card .cond-actions .btn-icon.danger:hover {
  background: var(--red-50);
  border-color: var(--red-200);
}
.hotels-view .conditions-card .cond-edit-form, .hotels-view .conditions-card .cond-add-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--neutral-200);
}
.hotels-view .conditions-card .conditions-empty {
  text-align: center;
  padding: 32px 16px;
  background: var(--neutral-50);
  border: 1px dashed var(--card-border);
  border-radius: 10px;
  color: var(--neutral-500);
  margin-bottom: 14px;
}
.hotels-view .conditions-card .conditions-empty i {
  font-size: 32px;
  color: var(--neutral-300);
  margin-bottom: 8px;
}
.hotels-view .conditions-card .conditions-empty h4 {
  margin: 0 0 3px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-700);
}
.hotels-view .conditions-card .conditions-empty p {
  margin: 0;
  font-size: 12px;
}
.hotels-view .conditions-card .cond-add-details {
  margin-top: 10px;
}
.hotels-view .conditions-card .cond-add-details summary {
  cursor: pointer;
  padding: 10px 14px;
  background: var(--amber-50);
  border: 1px dashed var(--amber-200);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--amber-800);
  list-style: none;
}
.hotels-view .conditions-card .cond-add-details summary i {
  margin-right: 6px;
  color: var(--amber-700);
}
.hotels-view .conditions-card .cond-add-details summary::-webkit-details-marker {
  display: none;
}
.hotels-view .conditions-card .cond-add-details summary:hover {
  background: var(--amber-100);
}
.hotels-view .conditions-card .cond-add-details[open] summary {
  border-radius: 8px 8px 0 0;
  border-style: solid;
  background: var(--amber-100);
}
.hotels-view .conditions-card .cond-add-details .cond-add-form {
  border: 1px solid var(--amber-200);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px;
  margin-top: 0;
  background: #fff;
}
.hotels-view .categories-card .categories-table-wrap {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.hotels-view .categories-card .categories-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.hotels-view .categories-card .categories-table thead {
  background: var(--neutral-50);
}
.hotels-view .categories-card .categories-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--neutral-500);
  padding: 10px 14px;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.hotels-view .categories-card .categories-table tbody tr {
  transition: background 0.12s ease;
}
.hotels-view .categories-card .categories-table tbody tr:hover {
  background: var(--purple-50);
}
.hotels-view .categories-card .categories-table tbody tr + tr {
  border-top: 1px solid var(--neutral-100);
}
.hotels-view .categories-card .categories-table tbody tr.is-inactive {
  opacity: 0.55;
  background: var(--neutral-50);
}
.hotels-view .categories-card .categories-table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  color: var(--neutral-800);
}
.hotels-view .categories-card .categories-table tbody td strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.hotels-view .categories-card .categories-table tbody .desc-cell {
  color: var(--neutral-500);
  font-size: 12px;
}
.hotels-view .categories-card .categories-table tbody .cap-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  color: var(--neutral-700);
  font-weight: 600;
}
.hotels-view .categories-card .categories-table tbody .cap-cell i {
  color: var(--purple-600);
  font-size: 11px;
}
.hotels-view .categories-card .cat-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hotels-view .categories-card .cat-status.actif {
  background: var(--green-50);
  color: var(--green-700);
}
.hotels-view .categories-card .cat-status.inactif {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.hotels-view .categories-card .actions-cell {
  text-align: right;
  white-space: nowrap;
}
.hotels-view .categories-card .actions-cell form {
  display: inline-block;
}
.hotels-view .categories-card .btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--neutral-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-left: 4px;
  transition: all 0.15s ease;
}
.hotels-view .categories-card .btn-icon:hover {
  transform: translateY(-1px);
}
.hotels-view .categories-card .btn-icon.ok {
  color: var(--green-700);
}
.hotels-view .categories-card .btn-icon.ok:hover {
  background: var(--green-50);
  border-color: var(--green-200);
}
.hotels-view .categories-card .btn-icon.warn {
  color: var(--amber-700);
}
.hotels-view .categories-card .btn-icon.warn:hover {
  background: var(--amber-50);
  border-color: var(--amber-200);
}
.hotels-view .categories-card .btn-icon.danger {
  color: var(--red-600);
}
.hotels-view .categories-card .btn-icon.danger:hover {
  background: var(--red-50);
  border-color: var(--red-200);
}
.hotels-view .categories-card .categories-empty {
  text-align: center;
  padding: 32px 16px;
  background: var(--neutral-50);
  border: 1px dashed var(--card-border);
  border-radius: 10px;
  color: var(--neutral-500);
  margin-bottom: 14px;
}
.hotels-view .categories-card .categories-empty i {
  font-size: 32px;
  color: var(--neutral-300);
  margin-bottom: 8px;
}
.hotels-view .categories-card .categories-empty h4 {
  margin: 0 0 3px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-700);
}
.hotels-view .categories-card .categories-empty p {
  margin: 0;
  font-size: 12px;
}
.hotels-view .categories-card .cat-add-form {
  background: var(--neutral-50);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.hotels-view .categories-card .cat-add-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr 0.8fr auto;
  gap: 10px;
  align-items: end;
}
@media (max-width: 900px) {
  .hotels-view .categories-card .cat-add-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.hotels-view .categories-card .cat-add-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.hotels-view .categories-card .cat-add-grid .form-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
}
.hotels-view .categories-card .cat-add-grid .form-label .required {
  color: var(--red-600);
  margin-left: 2px;
}
.hotels-view .categories-card .cat-add-grid .form-control {
  padding: 7px 10px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font-size: 12.5px;
  font-family: var(--font-family);
  background: #fff;
}
.hotels-view .categories-card .cat-add-grid .form-control:focus {
  outline: none;
  border-color: var(--purple-600);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.12);
}
@media (max-width: 900px) {
  .hotels-view .categories-card .cat-add-grid .cat-add-submit {
    grid-column: 1/-1;
  }
}
.hotels-view .categories-card .cat-add-grid .cat-add-submit .btn {
  width: 100%;
  padding: 8px 14px;
  font-size: 12.5px;
}
.hotels-view .contingents-section {
  /* Override calendrier pour une meilleure intégration dans la fiche */
}
.hotels-view .contingents-section .contingents-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.hotels-view .contingents-section .contingents-toolbar .legend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--neutral-600);
  flex-wrap: wrap;
}
.hotels-view .contingents-section .contingents-toolbar .legend .lg {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 2px;
  vertical-align: middle;
}
.hotels-view .contingents-section .contingents-toolbar .legend .lg.lg-green {
  background: var(--green-600);
}
.hotels-view .contingents-section .contingents-toolbar .legend .lg.lg-amber {
  background: var(--amber-500);
}
.hotels-view .contingents-section .contingents-toolbar .legend .lg.lg-red {
  background: var(--red-600);
}
.hotels-view .contingents-section .contingents-toolbar .legend .lg.lg-empty {
  background: var(--neutral-300);
}
.hotels-view .contingents-section .cal-container {
  border-radius: 10px;
  border-color: var(--card-border);
}
.hotels-view .contingents-section .cal-header {
  padding: 10px 14px;
  background: #fff;
}
.hotels-view .contingents-section .cal-header .cal-title {
  font-weight: 700;
  text-transform: capitalize;
  color: var(--neutral-900);
}
.hotels-view .contingents-section .cal-nav-btn {
  border-radius: 8px;
}
.hotels-view .contingents-section .cal-nav-btn:hover {
  background: var(--blue-50);
  color: var(--blue-700);
  border-color: var(--blue-200);
}
.hotels-view .contingents-section .cal-day {
  min-height: 74px;
  transition: background 0.12s ease;
}
.hotels-view .contingents-section .cal-day.selected {
  background: var(--blue-50);
  outline-color: var(--blue-600);
}

/* ═══════════════════════════════════════════════════════════════
   CAMPUS — pages /gestion/campus (index + show/edit)
   Scope : .campus-view. Accent green/teal pour signifier
   "centres de formation" (vie, écosystème formateur).
   ═══════════════════════════════════════════════════════════════ */
.campus-view {
  font-size: 13px;
  /* ── Page header ──────────────────────────────────────────── */
  /* ── KPI row ──────────────────────────────────────────────── */
  /* ── Toolbar ──────────────────────────────────────────────── */
  /* ── Campus grid cards ────────────────────────────────────── */
  /* ── Empty state ──────────────────────────────────────────── */
  /* ═════════════════════════════════════════════════════════════
     SHOW/EDIT PAGE
     ═════════════════════════════════════════════════════════════ */
  /* Hero édition */
  /* Form card (mêmes tokens que hotels/formations) */
  /* Toggle card */
  /* Sticky footer */
}
.campus-view .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.campus-view .page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.campus-view .page-title-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #16A34A, #0D9488);
}
.campus-view .page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.campus-view .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.campus-view .page-subtitle .pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.campus-view .page-subtitle .pill.green {
  background: var(--green-50);
  color: var(--green-700);
}
.campus-view .page-subtitle .pill.teal {
  background: #CCFBF1;
  color: #0F766E;
}
.campus-view .page-subtitle .pill.blue {
  background: var(--blue-50);
  color: var(--blue-700);
}
.campus-view .page-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.campus-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .campus-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.campus-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.campus-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.campus-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.campus-view .kpi .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.campus-view .kpi .kpi-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-left: 3px;
}
.campus-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.campus-view .toolbar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.campus-view .toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
  max-width: 360px;
}
.campus-view .toolbar-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  transition: all 150ms;
}
.campus-view .toolbar-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}
.campus-view .toolbar-search > i {
  position: absolute;
  left: 11px;
  color: var(--neutral-500);
  font-size: 12px;
  pointer-events: none;
}
.campus-view .segmented {
  display: inline-flex;
  background: var(--neutral-100);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.campus-view .segmented a {
  background: transparent;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.campus-view .segmented a i {
  font-size: 11px;
}
.campus-view .segmented a small {
  color: var(--neutral-400);
  font-weight: 500;
}
.campus-view .segmented a.is-active {
  background: #fff;
  color: var(--neutral-900);
  box-shadow: var(--shadow-sm);
}
.campus-view .segmented a:hover:not(.is-active) {
  color: var(--neutral-800);
}
.campus-view .campus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.campus-view .campus-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 200ms;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  /* Inactif : opacité réduite */
}
.campus-view .campus-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}
.campus-view .campus-card:hover .campus-card-banner::after {
  opacity: 1;
}
.campus-view .campus-card.is-inactive {
  opacity: 0.65;
}
.campus-view .campus-card.is-inactive .campus-card-banner {
  filter: grayscale(0.4);
}
.campus-view .campus-card-banner {
  height: 100px;
  background: linear-gradient(135deg, #16A34A 0%, #0D9488 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Variantes de gradient — déterministe via classe .c-N */
  /* Pattern décoratif subtil */
}
.campus-view .campus-card-banner.c-0 {
  background: linear-gradient(135deg, #16A34A, #0D9488);
}
.campus-view .campus-card-banner.c-1 {
  background: linear-gradient(135deg, #1463D9, #0EA5E9);
}
.campus-view .campus-card-banner.c-2 {
  background: linear-gradient(135deg, #EA580C, #F59E0B);
}
.campus-view .campus-card-banner.c-3 {
  background: linear-gradient(135deg, #9333EA, #EC4899);
}
.campus-view .campus-card-banner.c-4 {
  background: linear-gradient(135deg, #DC2626, #F59E0B);
}
.campus-view .campus-card-banner.c-5 {
  background: linear-gradient(135deg, #4F46E5, #9333EA);
}
.campus-view .campus-card-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.campus-view .campus-card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 150ms;
}
.campus-view .campus-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  z-index: 1;
}
.campus-view .campus-card-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.campus-view .campus-card-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}
.campus-view .campus-card-status.actif {
  background: rgba(34, 197, 94, 0.3);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.campus-view .campus-card-status.inactif {
  background: rgba(115, 115, 115, 0.4);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.campus-view .campus-card-body {
  padding: 16px;
  flex: 1;
}
.campus-view .campus-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.campus-view .campus-card-loc {
  font-size: 12px;
  color: var(--neutral-500);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.campus-view .campus-card-loc i {
  font-size: 10px;
  color: var(--neutral-400);
}
.campus-view .campus-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--neutral-200);
}
.campus-view .campus-card-stats .cstat {
  text-align: center;
}
.campus-view .campus-card-stats .cstat .val {
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.campus-view .campus-card-stats .cstat .lbl {
  font-size: 9.5px;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.campus-view .campus-card-stats .cstat .lbl i {
  font-size: 9px;
  color: var(--neutral-400);
}
.campus-view .campus-card-cta {
  padding: 12px 16px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
.campus-view .campus-card-cta .edit-hint {
  font-size: 11.5px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 5px;
}
.campus-view .campus-card-cta .edit-hint i {
  font-size: 10px;
}
.campus-view .campus-card-cta .arrow {
  color: var(--green-600);
  font-size: 12px;
  transition: transform 150ms;
}
.campus-view .campus-card:hover .campus-card-cta .arrow {
  transform: translateX(3px);
}
.campus-view .empty-state {
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--neutral-500);
  grid-column: 1/-1;
}
.campus-view .empty-state i {
  font-size: 34px;
  color: var(--neutral-300);
  margin-bottom: 12px;
}
.campus-view .empty-state h3 {
  margin: 0 0 4px;
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 700;
}
.campus-view .empty-state p {
  margin: 0;
  font-size: 12px;
}
.campus-view .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 12px;
}
.campus-view .page-back:hover {
  color: var(--green-700);
}
.campus-view .page-back i {
  font-size: 10px;
}
.campus-view .campus-hero {
  background: linear-gradient(135deg, #DCFCE7 0%, #CCFBF1 100%);
  border: 1px solid #BBF7D0;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.campus-view .campus-hero-mark {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #16A34A, #0D9488);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.campus-view .campus-hero-info {
  flex: 1;
  min-width: 0;
}
.campus-view .campus-hero-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.campus-view .campus-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.campus-view .campus-hero-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.campus-view .campus-hero-status.actif {
  background: var(--green-50);
  color: var(--green-700);
}
.campus-view .campus-hero-status.inactif {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.campus-view .campus-hero-meta {
  margin-top: 6px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-600);
}
.campus-view .campus-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.campus-view .campus-hero-meta i {
  font-size: 10px;
  color: var(--neutral-400);
}
.campus-view .campus-hero-stats {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.campus-view .campus-hero-stats .hstat {
  text-align: center;
  padding: 0 6px;
}
.campus-view .campus-hero-stats .hstat .hstat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.campus-view .campus-hero-stats .hstat .hstat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin-top: 4px;
}
.campus-view .form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: visible;
  margin-bottom: 20px;
}
.campus-view .form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutral-100);
}
.campus-view .form-section:last-child {
  border-bottom: none;
}
.campus-view .form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.campus-view .form-section-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--green-50);
  color: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.campus-view .form-section-head .icon.blue {
  background: var(--blue-50);
  color: var(--blue-600);
}
.campus-view .form-section-head .icon.teal {
  background: #CCFBF1;
  color: #0F766E;
}
.campus-view .form-section-head .icon.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.campus-view .form-section-head .icon.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.campus-view .form-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.campus-view .form-section-head .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
}
.campus-view .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .campus-view .form-grid {
    grid-template-columns: 1fr;
  }
}
.campus-view .form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.campus-view .form-grid .form-group.full {
  grid-column: 1/-1;
}
.campus-view .form-grid .form-group label.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
}
.campus-view .form-grid .form-group label.form-label .required {
  color: var(--red-600);
  margin-left: 2px;
}
.campus-view .form-grid .form-group .form-hint {
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
  margin-top: 2px;
}
.campus-view .form-toggle-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  grid-column: 1/-1;
}
.campus-view .form-toggle-card .toggle-info {
  flex: 1;
}
.campus-view .form-toggle-card .toggle-info .toggle-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}
.campus-view .form-toggle-card .toggle-info .toggle-desc {
  font-size: 11.5px;
  color: var(--neutral-600);
  margin-top: 2px;
}
.campus-view .form-toggle-card .toggle-control {
  display: flex;
  gap: 6px;
}
.campus-view .form-toggle-card .toggle-control label {
  padding: 6px 14px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 120ms;
}
.campus-view .form-toggle-card .toggle-control label input {
  display: none;
}
.campus-view .form-toggle-card .toggle-control label:has(input:checked) {
  border-color: var(--green-600);
  background: var(--green-50);
  color: var(--green-700);
}
.campus-view .form-footer {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: sticky;
  bottom: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 5;
  flex-wrap: wrap;
}
.campus-view .form-footer .footer-hint {
  font-size: 12px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.campus-view .form-footer .footer-hint i {
  font-size: 11px;
  color: var(--neutral-400);
}
.campus-view .form-footer .footer-actions {
  display: flex;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   CALENDRIER D'OCCUPATION (campus show)
   Scope : .resa-list .occupation-section, etc.
   ═══════════════════════════════════════════════════════════════ */
.resa-list {
  /* Légende calendrier */
  /* Grille du calendrier */
  /* Section paramètres : reset des bordures du form-card existant */
}
.resa-list .occupation-section,
.resa-list .override-section,
.resa-list .params-section {
  padding: 20px 22px;
  margin-bottom: 1.25rem;
}
.resa-list .occupation-head,
.resa-list .override-head,
.resa-list .params-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.resa-list .occupation-head h2.occupation-title,
.resa-list .occupation-head h2.override-title,
.resa-list .occupation-head h2.params-title,
.resa-list .override-head h2.occupation-title,
.resa-list .override-head h2.override-title,
.resa-list .override-head h2.params-title,
.resa-list .params-head h2.occupation-title,
.resa-list .params-head h2.override-title,
.resa-list .params-head h2.params-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
}
.resa-list .occupation-head p.occupation-sub,
.resa-list .occupation-head p.override-sub,
.resa-list .occupation-head p.params-sub,
.resa-list .override-head p.occupation-sub,
.resa-list .override-head p.override-sub,
.resa-list .override-head p.params-sub,
.resa-list .params-head p.occupation-sub,
.resa-list .params-head p.override-sub,
.resa-list .params-head p.params-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--neutral-500);
}
.resa-list .occupation-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.resa-list .occupation-nav .occupation-month {
  min-width: 140px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
}
.resa-list .occupation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 11.5px;
  color: var(--neutral-600);
}
.resa-list .occupation-legend .leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.resa-list .occupation-legend .leg-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}
.resa-list .occupation-legend .leg-dot.leg-open {
  background: var(--green-50);
  border: 1px solid var(--green-200);
}
.resa-list .occupation-legend .leg-dot.leg-partial {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
}
.resa-list .occupation-legend .leg-dot.leg-saturating {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
}
.resa-list .occupation-legend .leg-dot.leg-full {
  background: var(--red-50);
  border: 1px solid var(--red-200);
}
.resa-list .occupation-legend .leg-dot.leg-closed {
  background: repeating-linear-gradient(45deg, var(--neutral-100), var(--neutral-100) 4px, var(--neutral-200) 4px, var(--neutral-200) 8px);
  border: 1px solid var(--neutral-200);
}
.resa-list .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.resa-list .cal-dow {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 0 4px;
}
.resa-list .cal-dow.weekend {
  color: var(--neutral-400);
}
.resa-list .cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 6px;
  min-height: 86px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 120ms;
  color: var(--neutral-900);
  /* États */
}
.resa-list .cal-day:hover {
  border-color: var(--neutral-400);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.resa-list .cal-day .cal-day-num {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.resa-list .cal-day .cal-day-flag {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--amber-700);
  font-size: 10px;
}
.resa-list .cal-day .cal-day-fill {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-700);
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.resa-list .cal-day .cal-day-fill .cal-day-cap {
  color: var(--neutral-400);
  font-weight: 500;
}
.resa-list .cal-day .cal-day-bar {
  height: 4px;
  background: var(--neutral-100);
  border-radius: 2px;
  overflow: hidden;
  display: block;
}
.resa-list .cal-day .cal-day-bar-fill {
  display: block;
  height: 100%;
  background: var(--neutral-400);
  border-radius: 2px;
  transition: width 200ms;
}
.resa-list .cal-day.cal-day-open {
  background: var(--green-50);
  border-color: var(--green-200);
}
.resa-list .cal-day.cal-day-open .cal-day-bar-fill {
  background: var(--green-600);
}
.resa-list .cal-day.cal-day-partial {
  background: var(--blue-50);
  border-color: var(--blue-200);
}
.resa-list .cal-day.cal-day-partial .cal-day-bar-fill {
  background: var(--blue-600);
}
.resa-list .cal-day.cal-day-saturating {
  background: var(--amber-50);
  border-color: var(--amber-200);
}
.resa-list .cal-day.cal-day-saturating .cal-day-bar-fill {
  background: var(--amber-500);
}
.resa-list .cal-day.cal-day-full {
  background: var(--red-50);
  border-color: var(--red-200);
}
.resa-list .cal-day.cal-day-full .cal-day-bar-fill {
  background: var(--red-600);
}
.resa-list .cal-day.cal-day-closed {
  background: repeating-linear-gradient(45deg, var(--neutral-100), var(--neutral-100) 5px, var(--neutral-200) 5px, var(--neutral-200) 10px);
  border-color: var(--neutral-300);
  color: var(--neutral-500);
}
.resa-list .cal-day.cal-day-closed .cal-day-num {
  text-decoration: line-through;
}
.resa-list .cal-day.cal-day-closed .cal-day-bar {
  display: none;
}
.resa-list .cal-day.cal-day-closed .cal-day-fill {
  color: var(--neutral-500);
  font-style: italic;
}
.resa-list .cal-day.cal-out {
  opacity: 0.35;
}
.resa-list .cal-day.cal-past {
  opacity: 0.7;
}
.resa-list .cal-day.cal-today {
  box-shadow: 0 0 0 2px var(--blue-600);
}
.resa-list .cal-day.cal-today .cal-day-num {
  color: var(--blue-700);
}
.resa-list .cal-day.cal-has-override {
  outline: 1px dashed var(--amber-500);
  outline-offset: -2px;
}
.resa-list .params-section .params-form > .form-section {
  margin-bottom: 18px;
}
.resa-list .params-section .params-form > .form-section:last-of-type {
  margin-bottom: 8px;
}
.resa-list .params-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--neutral-100);
  flex-wrap: wrap;
}
.resa-list .params-foot .footer-hint {
  font-size: 11.5px;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.resa-list .params-foot .footer-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 760px) {
  .resa-list .cal-grid {
    gap: 3px;
  }
  .resa-list .cal-day {
    min-height: 70px;
    padding: 6px;
  }
  .resa-list .cal-day-fill {
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ROOMING LIST — page /hotelier/rooming-list
   Scope : .rooming-view. Accent indigo/blue côté hôtelier.
   ═══════════════════════════════════════════════════════════════ */
.rooming-view {
  font-size: 13px;
  /* ── Back link ────────────────────────────────────────────── */
  /* ── Hero ─────────────────────────────────────────────────── */
  /* ── KPI row ──────────────────────────────────────────────── */
  /* ── Toolbar filtres ──────────────────────────────────────── */
  /* ── Liste / tableau ──────────────────────────────────────── */
  /* ── Empty state ──────────────────────────────────────────── */
}
.rooming-view .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 0.15s ease;
}
.rooming-view .page-back:hover {
  color: var(--blue-600);
}
.rooming-view .rooming-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 55%, #4F46E5 100%);
  color: #fff;
  padding: 22px 26px;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 30px -12px rgba(37, 99, 235, 0.45);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
}
.rooming-view .rooming-hero::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .rooming-view .rooming-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.rooming-view .rooming-hero-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .rooming-view .rooming-hero-mark {
    margin: 0 auto;
  }
}
.rooming-view .rooming-hero-info .eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
}
.rooming-view .rooming-hero-info .rooming-hero-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 6px 0;
  color: #fff;
}
.rooming-view .rooming-hero-info .rooming-hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
}
.rooming-view .rooming-hero-info .rooming-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rooming-view .rooming-hero-info .rooming-hero-meta i {
  opacity: 0.9;
}
.rooming-view .rooming-hero-info .rooming-hero-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.rooming-view .rooming-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.rooming-view .rooming-hero-actions .btn {
  border: none;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.rooming-view .rooming-hero-actions .btn-excel {
  background: #fff;
  color: #1E3A8A;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2);
}
.rooming-view .rooming-hero-actions .btn-excel:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.25);
}
.rooming-view .rooming-hero-actions .btn-mail {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.rooming-view .rooming-hero-actions .btn-mail:hover {
  background: rgba(255, 255, 255, 0.22);
}
.rooming-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
  .rooming-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .rooming-view .kpi-row {
    grid-template-columns: 1fr;
  }
}
.rooming-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rooming-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rooming-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.rooming-view .kpi .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rooming-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.rooming-view .rooming-toolbar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.rooming-view .rooming-toolbar .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}
.rooming-view .rooming-toolbar .field label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 5px;
}
.rooming-view .rooming-toolbar .field input[type=date], .rooming-view .rooming-toolbar .field input[type=search] {
  padding: 8px 11px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-family);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rooming-view .rooming-toolbar .field input[type=date]:focus, .rooming-view .rooming-toolbar .field input[type=search]:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.rooming-view .rooming-toolbar .field input[type=search] {
  min-width: 240px;
}
.rooming-view .rooming-toolbar .shortcuts {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.rooming-view .rooming-toolbar .shortcuts button {
  border: 1px solid var(--card-border);
  background: var(--neutral-50);
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rooming-view .rooming-toolbar .shortcuts button:hover {
  background: var(--blue-50);
  color: var(--blue-700);
  border-color: var(--blue-200);
}
.rooming-view .rooming-toolbar .btn-filter {
  background: var(--blue-600);
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
}
.rooming-view .rooming-toolbar .btn-filter:hover {
  background: var(--blue-700);
}
.rooming-view .rooming-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.rooming-view .rooming-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-100);
  gap: 10px;
  flex-wrap: wrap;
}
.rooming-view .rooming-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-800);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rooming-view .rooming-card-head h3 i {
  color: var(--blue-600);
}
.rooming-view .rooming-card-head .count {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 3px 9px;
  border-radius: 999px;
}
.rooming-view .table-wrap {
  overflow-x: auto;
}
.rooming-view .rooming-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.rooming-view .rooming-table thead {
  background: var(--neutral-50);
}
.rooming-view .rooming-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--neutral-500);
  padding: 11px 14px;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.rooming-view .rooming-table tbody tr {
  transition: background 0.12s ease;
}
.rooming-view .rooming-table tbody tr:hover {
  background: var(--blue-50);
}
.rooming-view .rooming-table tbody tr + tr {
  border-top: 1px solid var(--neutral-100);
}
.rooming-view .rooming-table tbody td {
  padding: 11px 14px;
  vertical-align: middle;
  color: var(--neutral-800);
}
.rooming-view .rooming-table .ref-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-500);
}
.rooming-view .rooming-table .name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rooming-view .rooming-table .name-cell .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
.rooming-view .rooming-table .name-cell .name-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rooming-view .rooming-table .name-cell .name-block strong {
  color: var(--neutral-900);
  font-weight: 600;
  font-size: 13px;
}
.rooming-view .rooming-table .name-cell .name-block small {
  color: var(--neutral-500);
  font-size: 11px;
}
.rooming-view .rooming-table .contact-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
}
.rooming-view .rooming-table .contact-cell a {
  color: var(--neutral-700);
  text-decoration: none;
}
.rooming-view .rooming-table .contact-cell a:hover {
  color: var(--blue-600);
}
.rooming-view .rooming-table .contact-cell .muted {
  color: var(--neutral-400);
}
.rooming-view .rooming-table .nni-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--neutral-100);
  color: var(--neutral-700);
  padding: 2px 7px;
  border-radius: 5px;
  display: inline-block;
}
.rooming-view .rooming-table .date-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rooming-view .rooming-table .date-cell .d {
  color: var(--neutral-900);
  font-weight: 600;
}
.rooming-view .rooming-table .date-cell .dow {
  color: var(--neutral-500);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 4px;
}
.rooming-view .rooming-table .nuits-cell {
  font-weight: 700;
  color: var(--blue-700);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rooming-view .rooming-table .loc-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11.5px;
}
.rooming-view .rooming-table .loc-cell strong {
  color: var(--neutral-900);
  font-weight: 600;
  font-size: 12px;
}
.rooming-view .rooming-table .loc-cell small {
  color: var(--neutral-500);
}
.rooming-view .rooming-table .type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rooming-view .rooming-table .type-pill.sejour {
  background: var(--blue-50);
  color: var(--blue-700);
}
.rooming-view .rooming-table .type-pill.veille {
  background: var(--amber-50);
  color: var(--amber-800);
}
.rooming-view .rooming-table .type-pill.lendemain {
  background: var(--purple-50);
  color: var(--purple-700);
}
.rooming-view .rooming-table .type-pill.week {
  background: #ECFEFF;
  color: #0E7490;
}
.rooming-view .rooming-empty {
  background: #fff;
  border: 1px dashed var(--card-border);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--neutral-500);
}
.rooming-view .rooming-empty i {
  font-size: 40px;
  color: var(--neutral-300);
  margin-bottom: 12px;
}
.rooming-view .rooming-empty h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-700);
  margin: 0 0 4px 0;
}
.rooming-view .rooming-empty p {
  margin: 0;
  font-size: 12.5px;
}

/* ═══════════════════════════════════════════════════════════════
   HOTELIER DASHBOARD — page /hotelier/dashboard
   Scope : .hotelier-view. Accent indigo/blue (univers hôtelier).
   ═══════════════════════════════════════════════════════════════ */
.hotelier-view {
  font-size: 13px;
  /* ── Hero ─────────────────────────────────────────────────── */
  /* ── Alert not linked ────────────────────────────────────── */
  /* ── KPIs ─────────────────────────────────────────────────── */
  /* ── Grid 2 colonnes (arrivées / départs) ─────────────────── */
  /* ── Panels ───────────────────────────────────────────────── */
  /* ── Flight-list (arrivées/départs) ───────────────────────── */
  /* ── Table actuellement hébergés ──────────────────────────── */
  /* ── Empty state ──────────────────────────────────────────── */
  /* ── Calendar 8 weeks ─────────────────────────────────────── */
}
.hotelier-view .ht-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #4F46E5 100%);
  color: #fff;
  padding: 26px 28px;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 30px -12px rgba(30, 58, 138, 0.5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
}
.hotelier-view .ht-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  pointer-events: none;
}
.hotelier-view .ht-hero::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: 20%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hotelier-view .ht-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.hotelier-view .ht-hero-info {
  position: relative;
  z-index: 1;
}
.hotelier-view .ht-hero-info .eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hotelier-view .ht-hero-info .eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
  animation: htPulse 2s infinite;
}
.hotelier-view .ht-hero-info .ht-hero-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 6px 0;
  color: #fff;
}
.hotelier-view .ht-hero-info .ht-hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.hotelier-view .ht-hero-info .ht-hero-meta .hotel-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.hotelier-view .ht-hero-info .ht-hero-meta .hotel-badge i {
  color: #93C5FD;
}
.hotelier-view .ht-hero-info .ht-hero-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.hotelier-view .ht-hero-info .ht-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@keyframes htPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}
.hotelier-view .ht-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.hotelier-view .ht-hero-actions .btn {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.hotelier-view .ht-hero-actions .btn-white {
  background: #fff;
  color: #1E3A8A;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}
.hotelier-view .ht-hero-actions .btn-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.3);
}
.hotelier-view .ht-hero-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.hotelier-view .ht-hero-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.22);
}
.hotelier-view .ht-alert {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  color: #92400E;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.hotelier-view .ht-alert i {
  font-size: 18px;
  color: #B45309;
  flex-shrink: 0;
}
.hotelier-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
  .hotelier-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .hotelier-view .kpi-row {
    grid-template-columns: 1fr;
  }
}
.hotelier-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.hotelier-view .kpi .kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.hotelier-view .kpi .kpi-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.hotelier-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--neutral-500);
}
.hotelier-view .kpi .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hotelier-view .kpi .kpi-value small {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-left: 3px;
}
.hotelier-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.hotelier-view .kpi.arrive .kpi-icon {
  background: var(--blue-50);
  color: var(--blue-700);
}
.hotelier-view .kpi.depart .kpi-icon {
  background: var(--amber-50);
  color: var(--amber-800);
}
.hotelier-view .kpi.stay .kpi-icon {
  background: var(--green-50);
  color: var(--green-700);
}
.hotelier-view .kpi.occup .kpi-icon {
  background: var(--purple-50);
  color: var(--purple-700);
}
.hotelier-view .ht-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
  .hotelier-view .ht-grid-2 {
    grid-template-columns: 1fr;
  }
}
.hotelier-view .ht-panel {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.hotelier-view .ht-panel.accent-arrive {
  border-top: 3px solid var(--blue-600);
}
.hotelier-view .ht-panel.accent-depart {
  border-top: 3px solid var(--amber-500);
}
.hotelier-view .ht-panel.accent-stay {
  border-top: 3px solid var(--green-600);
}
.hotelier-view .ht-panel.accent-cal {
  border-top: 3px solid var(--purple-600);
}
.hotelier-view .ht-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-100);
  gap: 10px;
  flex-wrap: wrap;
}
.hotelier-view .ht-panel-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-800);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hotelier-view .ht-panel-head h3 .ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.hotelier-view .ht-panel-head .count {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 3px 9px;
  border-radius: 999px;
}
.hotelier-view .ht-panel-head.head-arrive h3 .ico {
  background: var(--blue-50);
  color: var(--blue-700);
}
.hotelier-view .ht-panel-head.head-depart h3 .ico {
  background: var(--amber-50);
  color: var(--amber-800);
}
.hotelier-view .ht-panel-head.head-stay h3 .ico {
  background: var(--green-50);
  color: var(--green-700);
}
.hotelier-view .ht-panel-head.head-cal h3 .ico {
  background: var(--purple-50);
  color: var(--purple-700);
}
.hotelier-view .ht-panel-body {
  padding: 14px 18px;
}
.hotelier-view .ht-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hotelier-view .ht-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-100);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hotelier-view .ht-row:hover {
  border-color: var(--blue-200);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.15);
}
.hotelier-view .ht-row .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
}
.hotelier-view .ht-row .info {
  flex: 1;
  min-width: 0;
}
.hotelier-view .ht-row .info strong {
  display: block;
  color: var(--neutral-900);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hotelier-view .ht-row .info small {
  color: var(--neutral-500);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.hotelier-view .ht-row .meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
}
.hotelier-view .ht-row .meta .when {
  font-size: 11px;
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
}
.hotelier-view .ht-row .pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hotelier-view .ht-row .pill.pill-arrive {
  background: var(--blue-50);
  color: var(--blue-700);
}
.hotelier-view .ht-row .pill.pill-depart {
  background: var(--amber-50);
  color: var(--amber-800);
}
.hotelier-view .ht-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.hotelier-view .ht-table thead {
  background: var(--neutral-50);
}
.hotelier-view .ht-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--neutral-500);
  padding: 11px 14px;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.hotelier-view .ht-table tbody tr {
  transition: background 0.12s ease;
}
.hotelier-view .ht-table tbody tr:hover {
  background: var(--green-50);
}
.hotelier-view .ht-table tbody tr + tr {
  border-top: 1px solid var(--neutral-100);
}
.hotelier-view .ht-table tbody td {
  padding: 11px 14px;
  vertical-align: middle;
  color: var(--neutral-800);
}
.hotelier-view .ht-table .name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hotelier-view .ht-table .name-cell .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-600), #0D9488);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
.hotelier-view .ht-table .name-cell strong {
  color: var(--neutral-900);
  font-weight: 600;
  font-size: 13px;
}
.hotelier-view .ht-table .pill-j {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hotelier-view .ht-table .pill-j.ok {
  background: var(--green-50);
  color: var(--green-700);
}
.hotelier-view .ht-table .pill-j.soon {
  background: var(--amber-50);
  color: var(--amber-800);
}
.hotelier-view .ht-table .pill-j.today {
  background: var(--red-50);
  color: var(--red-700);
}
.hotelier-view .ht-empty {
  text-align: center;
  padding: 34px 16px;
  color: var(--neutral-500);
}
.hotelier-view .ht-empty i {
  font-size: 34px;
  color: var(--neutral-300);
  margin-bottom: 10px;
}
.hotelier-view .ht-empty h4 {
  margin: 0 0 3px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-700);
}
.hotelier-view .ht-empty p {
  margin: 0;
  font-size: 12px;
}
.hotelier-view .ht-cal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) {
  .hotelier-view .ht-cal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .hotelier-view .ht-cal-grid {
    grid-template-columns: 1fr;
  }
}
.hotelier-view .ht-week {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.hotelier-view .ht-week:hover {
  border-color: var(--blue-200);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.15);
}
.hotelier-view .ht-week.current {
  border-color: var(--blue-600);
  background: linear-gradient(180deg, #fff, var(--blue-50));
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.25);
}
.hotelier-view .ht-week .week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.hotelier-view .ht-week .week-num {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
}
.hotelier-view .ht-week .week-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--blue-600);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hotelier-view .ht-week .week-range {
  font-size: 12px;
  color: var(--neutral-800);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.hotelier-view .ht-week .week-stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.hotelier-view .ht-week .week-stats .big {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hotelier-view .ht-week .week-stats .lbl {
  font-size: 10.5px;
  color: var(--neutral-500);
}
.hotelier-view .ht-week .week-bar {
  height: 6px;
  background: var(--neutral-100);
  border-radius: 3px;
  overflow: hidden;
}
.hotelier-view .ht-week .week-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 350ms ease;
}
.hotelier-view .ht-week .week-bar.ok > span {
  background: linear-gradient(90deg, #22C55E, #16A34A);
}
.hotelier-view .ht-week .week-bar.warn > span {
  background: linear-gradient(90deg, #FBBF24, #F59E0B);
}
.hotelier-view .ht-week .week-bar.high > span {
  background: linear-gradient(90deg, #F87171, #DC2626);
}
.hotelier-view .ht-week .week-pct {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   ROOMING HUB — page /rooming-lists (centre de téléchargement)
   Scope : .rooming-hub.
   ═══════════════════════════════════════════════════════════════ */
.rooming-hub {
  font-size: 13px;
  /* ── Hero ─────────────────────────────────────────────────── */
  /* ── Plage de dates commune ──────────────────────────────── */
  /* ── Grid des périmètres ─────────────────────────────────── */
}
.rooming-hub .hub-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #4F46E5 100%);
  color: #fff;
  padding: 24px 28px;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  box-shadow: 0 10px 30px -12px rgba(30, 58, 138, 0.45);
}
.rooming-hub .hub-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  pointer-events: none;
}
@media (max-width: 700px) {
  .rooming-hub .hub-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.rooming-hub .hub-hero-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .rooming-hub .hub-hero-mark {
    margin: 0 auto;
  }
}
.rooming-hub .hub-hero-info {
  position: relative;
  z-index: 1;
}
.rooming-hub .hub-hero-info .eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
}
.rooming-hub .hub-hero-info .hub-hero-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 6px 0;
  color: #fff;
}
.rooming-hub .hub-hero-info .hub-hero-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 720px;
  line-height: 1.5;
}
.rooming-hub .hub-daterange {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.rooming-hub .hub-daterange .dr-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.rooming-hub .hub-daterange .dr-fields {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
}
.rooming-hub .hub-daterange .dr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}
.rooming-hub .hub-daterange .dr-field label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
}
.rooming-hub .hub-daterange .dr-field input[type=date] {
  padding: 8px 11px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-family);
  background: #fff;
}
.rooming-hub .hub-daterange .dr-field input[type=date]:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.rooming-hub .hub-daterange .dr-shortcuts {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.rooming-hub .hub-daterange .dr-shortcuts button {
  border: 1px solid var(--card-border);
  background: var(--neutral-50);
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rooming-hub .hub-daterange .dr-shortcuts button:hover {
  background: var(--blue-50);
  color: var(--blue-700);
  border-color: var(--blue-200);
}
.rooming-hub .hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.rooming-hub .hub-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  z-index: 1;
  /* La carte avec un dropdown Tom Select ouvert passe au-dessus de ses voisines.
     Tom Select applique .dropdown-active sur .ts-wrapper quand le dropdown est ouvert. */
}
.rooming-hub .hub-card:has(.ts-wrapper.dropdown-active), .rooming-hub .hub-card:has(.ts-wrapper.focus) {
  z-index: 50;
}
.rooming-hub .hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.1);
}
.rooming-hub .hub-card.accent-indigo {
  border-top: 3px solid #4F46E5;
}
.rooming-hub .hub-card.accent-blue {
  border-top: 3px solid var(--blue-600);
}
.rooming-hub .hub-card.accent-green {
  border-top: 3px solid var(--green-600);
}
.rooming-hub .hub-card.accent-purple {
  border-top: 3px solid var(--purple-600);
}
.rooming-hub .hub-card.accent-amber {
  border-top: 3px solid var(--amber-500);
}
.rooming-hub .hub-card.accent-red {
  border-top: 3px solid var(--red-600);
}
.rooming-hub .hub-card-head {
  padding: 16px 18px 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rooming-hub .hub-card-head h3 {
  margin: 0 0 2px 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--neutral-900);
}
.rooming-hub .hub-card-head p {
  margin: 0;
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.rooming-hub .hub-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.accent-indigo .rooming-hub .hub-card-icon {
  background: #EEF2FF;
  color: #4338CA;
}
.accent-blue .rooming-hub .hub-card-icon {
  background: var(--blue-50);
  color: var(--blue-700);
}
.accent-green .rooming-hub .hub-card-icon {
  background: var(--green-50);
  color: var(--green-700);
}
.accent-purple .rooming-hub .hub-card-icon {
  background: var(--purple-50);
  color: var(--purple-700);
}
.accent-amber .rooming-hub .hub-card-icon {
  background: var(--amber-50);
  color: var(--amber-800);
}
.accent-red .rooming-hub .hub-card-icon {
  background: var(--red-50);
  color: var(--red-700);
}
.rooming-hub .hub-card-body {
  padding: 0 18px 14px;
  flex: 1;
}
.rooming-hub .hub-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-family);
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23737373'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 011.08 1.04l-4.25 4.38a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}
.rooming-hub .hub-select:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.rooming-hub .hub-toggle {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rooming-hub .hub-toggle label {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rooming-hub .hub-toggle label input {
  display: none;
}
.rooming-hub .hub-toggle label:has(input:checked) {
  background: var(--blue-50);
  border-color: var(--blue-600);
  color: var(--blue-700);
}
.rooming-hub .hub-info, .rooming-hub .hub-note {
  background: var(--neutral-50);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--neutral-600);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.rooming-hub .hub-info i, .rooming-hub .hub-note i {
  color: var(--blue-600);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.rooming-hub .hub-note {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-800);
}
.rooming-hub .hub-note i {
  color: var(--amber-700);
}
.rooming-hub .hub-card-actions {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  border-radius: 0 0 11px 11px;
}
.rooming-hub .hub-dl {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-600), #4F46E5);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-family);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.rooming-hub .hub-dl:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.4);
}
.rooming-hub .hub-dl:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   CHAUFFEURS — pages /gestion/chauffeurs (index + form)
   Scope : .chauffeurs-view. Accent indigo/purple (personnes).
   ═══════════════════════════════════════════════════════════════ */
.chauffeurs-view {
  font-size: 13px;
  /* KPI row (réutilise le style global campus/formations) */
  /* Toolbar */
  /* Grid de chauffeurs */
  /* Empty state */
  /* Form */
}
.chauffeurs-view .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.chauffeurs-view .page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.chauffeurs-view .page-title-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4F46E5, #9333EA);
}
.chauffeurs-view .page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.chauffeurs-view .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.chauffeurs-view .page-subtitle .pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.chauffeurs-view .page-subtitle .pill.green {
  background: var(--green-50);
  color: var(--green-700);
}
.chauffeurs-view .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 14px;
}
.chauffeurs-view .page-back:hover {
  color: #4F46E5;
}
.chauffeurs-view .page-actions {
  display: flex;
  gap: 8px;
}
.chauffeurs-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
  .chauffeurs-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.chauffeurs-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chauffeurs-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chauffeurs-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.chauffeurs-view .kpi .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.chauffeurs-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.chauffeurs-view .toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.chauffeurs-view .toolbar-search {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.chauffeurs-view .toolbar-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 12px;
}
.chauffeurs-view .toolbar-search input {
  width: 100%;
  padding: 8px 11px 8px 34px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13px;
}
.chauffeurs-view .segmented {
  display: inline-flex;
  background: var(--neutral-100);
  border-radius: 8px;
  padding: 3px;
}
.chauffeurs-view .segmented a {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chauffeurs-view .segmented a i {
  font-size: 10px;
}
.chauffeurs-view .segmented a.is-active {
  background: #fff;
  color: #4F46E5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.chauffeurs-view .segmented a small {
  color: var(--neutral-400);
  font-weight: 500;
  margin-left: 2px;
}
.chauffeurs-view .chauffeurs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.chauffeurs-view .ch-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}
.chauffeurs-view .ch-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.2);
  border-color: #4F46E5;
}
.chauffeurs-view .ch-card.is-inactive {
  opacity: 0.55;
}
.chauffeurs-view .ch-photo {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
}
.chauffeurs-view .ch-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chauffeurs-view .ch-photo-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4F46E5, #9333EA);
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
}
.chauffeurs-view .ch-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.chauffeurs-view .ch-status.actif {
  background: var(--green-600);
  color: #fff;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}
.chauffeurs-view .ch-status.inactif {
  background: var(--neutral-400);
  color: #fff;
}
.chauffeurs-view .ch-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chauffeurs-view .ch-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
}
.chauffeurs-view .ch-presta {
  font-size: 11.5px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chauffeurs-view .ch-presta i {
  font-size: 10px;
  color: #4F46E5;
}
.chauffeurs-view .ch-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  color: var(--neutral-600);
}
.chauffeurs-view .ch-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chauffeurs-view .ch-meta i {
  color: var(--neutral-400);
  font-size: 10px;
  width: 12px;
}
.chauffeurs-view .ch-meta .ch-plaque {
  display: inline-block;
  background: var(--neutral-100);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--neutral-700);
  width: fit-content;
  text-transform: uppercase;
}
.chauffeurs-view .mono {
  font-family: var(--font-mono);
}
.chauffeurs-view .empty-state {
  background: #fff;
  border: 1px dashed var(--card-border);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--neutral-500);
}
.chauffeurs-view .empty-state i {
  font-size: 40px;
  color: var(--neutral-300);
  margin-bottom: 12px;
}
.chauffeurs-view .empty-state h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-700);
  margin: 0 0 6px 0;
}
.chauffeurs-view .empty-state p {
  margin: 0;
  font-size: 13px;
}
.chauffeurs-view .form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: visible;
  margin-bottom: 20px;
}
.chauffeurs-view .form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutral-100);
}
.chauffeurs-view .form-section:last-child {
  border-bottom: none;
}
.chauffeurs-view .form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.chauffeurs-view .form-section-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #EEF2FF;
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.chauffeurs-view .form-section-head .icon.amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.chauffeurs-view .form-section-head .icon.purple {
  background: var(--purple-50);
  color: var(--purple-600);
}
.chauffeurs-view .form-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chauffeurs-view .form-section-head .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
}
.chauffeurs-view .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .chauffeurs-view .form-grid {
    grid-template-columns: 1fr;
  }
}
.chauffeurs-view .form-grid .form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.chauffeurs-view .form-grid .form-field.full {
  grid-column: 1/-1;
}
.chauffeurs-view .form-grid .form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
}
.chauffeurs-view .form-grid .required {
  color: var(--red-600);
  margin-left: 2px;
}
.chauffeurs-view .form-grid .form-control {
  padding: 9px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-family);
  background: #fff;
  box-sizing: border-box;
}
.chauffeurs-view .form-grid .form-control:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.chauffeurs-view .form-grid textarea.form-control {
  resize: vertical;
  min-height: 70px;
}
.chauffeurs-view .form-grid-identite {
  grid-template-columns: 180px 1fr !important;
}
@media (max-width: 700px) {
  .chauffeurs-view .form-grid-identite {
    grid-template-columns: 1fr !important;
  }
}
.chauffeurs-view .form-field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .chauffeurs-view .form-field-group {
    grid-template-columns: 1fr;
  }
}
.chauffeurs-view .ch-photo-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.chauffeurs-view .ch-photo-upload .ch-photo-preview, .chauffeurs-view .ch-photo-upload .ch-photo-placeholder {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  border: 2px solid var(--neutral-100);
  object-fit: cover;
}
.chauffeurs-view .ch-photo-upload .ch-photo-placeholder {
  background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #C7D2FE;
}
.chauffeurs-view .ch-photo-upload input[type=file] {
  font-size: 11px;
}
.chauffeurs-view .form-hint {
  font-size: 11px;
  color: var(--neutral-500);
}
.chauffeurs-view .form-toggle-card {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.chauffeurs-view .form-toggle-card .toggle-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.chauffeurs-view .form-toggle-card .toggle-desc {
  font-size: 11.5px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.chauffeurs-view .form-toggle-card .toggle-control {
  display: flex;
  gap: 6px;
}
.chauffeurs-view .form-toggle-card .toggle-control label {
  cursor: pointer;
}
.chauffeurs-view .form-toggle-card .toggle-control label input {
  display: none;
}
.chauffeurs-view .form-toggle-card .toggle-control label span {
  padding: 7px 14px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: var(--neutral-600);
}
.chauffeurs-view .form-toggle-card .toggle-control label input:checked + span {
  background: linear-gradient(135deg, #4F46E5, #9333EA);
  border-color: #4F46E5;
  color: #fff;
}
.chauffeurs-view .form-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--card-border);
  border-radius: 0 0 12px 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
  z-index: 5;
}
.chauffeurs-view .form-footer .footer-hint {
  font-size: 12px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chauffeurs-view .form-footer .footer-actions {
  display: flex;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   RESTAURANTS — pages /gestion/restaurants (index + form)
   Scope : .restaurants-view. Accent orange (food).
   ═══════════════════════════════════════════════════════════════ */
.restaurants-view {
  font-size: 13px;
  /* ── Page header ──────────────────────────────────────────── */
  /* ── KPI ─── */
  /* ── Toolbar ── */
  /* ── Grid de restaurants ── */
  /* ── Empty state ── */
  /* ── Form ── */
  /* ── Choix de rattachement ── */
  /* Toggle actif (shared) */
}
.restaurants-view .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.restaurants-view .page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.restaurants-view .page-title-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #EA580C, #F59E0B);
}
.restaurants-view .page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.restaurants-view .page-subtitle {
  font-size: 13px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.restaurants-view .page-subtitle .pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.restaurants-view .page-subtitle .pill.orange {
  background: var(--orange-50);
  color: var(--orange-600);
}
.restaurants-view .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 14px;
}
.restaurants-view .page-back:hover {
  color: var(--orange-600);
}
.restaurants-view .page-actions {
  display: flex;
  gap: 8px;
}
.restaurants-view .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) {
  .restaurants-view .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.restaurants-view .kpi {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.restaurants-view .kpi .kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.restaurants-view .kpi .kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.restaurants-view .kpi .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.restaurants-view .kpi .kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
}
.restaurants-view .toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.restaurants-view .toolbar-search {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.restaurants-view .toolbar-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 12px;
}
.restaurants-view .toolbar-search input {
  width: 100%;
  padding: 8px 11px 8px 34px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13px;
}
.restaurants-view .segmented {
  display: inline-flex;
  background: var(--neutral-100);
  border-radius: 8px;
  padding: 3px;
}
.restaurants-view .segmented a {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.restaurants-view .segmented a i {
  font-size: 10px;
}
.restaurants-view .segmented a.is-active {
  background: #fff;
  color: var(--orange-600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.restaurants-view .restaurants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.restaurants-view .rest-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}
.restaurants-view .rest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(234, 88, 12, 0.2);
  border-color: var(--orange-600);
}
.restaurants-view .rest-card.is-inactive {
  opacity: 0.55;
}
.restaurants-view .rest-banner {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.restaurants-view .rest-banner.hotel {
  background: linear-gradient(135deg, #2563EB, #4F46E5);
}
.restaurants-view .rest-banner.campus {
  background: linear-gradient(135deg, #16A34A, #0D9488);
}
.restaurants-view .rest-banner.partenaire {
  background: linear-gradient(135deg, #9333EA, #EA580C);
}
.restaurants-view .rest-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.restaurants-view .rest-type-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(4px);
}
.restaurants-view .rest-type-pill i {
  font-size: 9px;
  margin-right: 3px;
}
.restaurants-view .rest-inactive-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.restaurants-view .rest-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.restaurants-view .rest-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.3;
}
.restaurants-view .rest-rattachement {
  font-size: 11.5px;
  color: var(--neutral-500);
  font-style: italic;
}
.restaurants-view .rest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: var(--neutral-600);
  margin-top: 4px;
}
.restaurants-view .rest-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.restaurants-view .rest-meta i {
  color: var(--neutral-400);
  font-size: 10px;
}
.restaurants-view .rest-cuisines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.restaurants-view .cuisine-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--orange-50);
  color: var(--orange-600);
  border-radius: 4px;
}
.restaurants-view .cuisine-chip.more {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.restaurants-view .empty-state {
  background: #fff;
  border: 1px dashed var(--card-border);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--neutral-500);
}
.restaurants-view .empty-state i {
  font-size: 40px;
  color: var(--neutral-300);
  margin-bottom: 12px;
}
.restaurants-view .empty-state h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-700);
  margin: 0 0 6px 0;
}
.restaurants-view .empty-state p {
  margin: 0;
  font-size: 13px;
}
.restaurants-view .form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: visible;
  margin-bottom: 20px;
}
.restaurants-view .form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutral-100);
}
.restaurants-view .form-section:last-child {
  border-bottom: none;
}
.restaurants-view .form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.restaurants-view .form-section-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--orange-50);
  color: var(--orange-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.restaurants-view .form-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.restaurants-view .form-section-head .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
}
.restaurants-view .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .restaurants-view .form-grid {
    grid-template-columns: 1fr;
  }
}
.restaurants-view .form-grid .form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.restaurants-view .form-grid .form-field.full {
  grid-column: 1/-1;
}
.restaurants-view .form-grid .form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
}
.restaurants-view .form-grid .required {
  color: var(--red-600);
  margin-left: 2px;
}
.restaurants-view .form-grid .form-control {
  padding: 9px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-family);
  background: #fff;
  box-sizing: border-box;
}
.restaurants-view .form-grid .form-control:focus {
  outline: none;
  border-color: var(--orange-600);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.restaurants-view .form-grid textarea.form-control {
  resize: vertical;
  min-height: 70px;
}
.restaurants-view .form-grid .form-hint {
  font-size: 10.5px;
  color: var(--neutral-500);
  font-style: italic;
}
.restaurants-view .rattachement-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .restaurants-view .rattachement-choice {
    grid-template-columns: 1fr;
  }
}
.restaurants-view .ratt-option {
  cursor: pointer;
}
.restaurants-view .ratt-option input {
  display: none;
}
.restaurants-view .ratt-option span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 2px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  transition: all 0.15s ease;
}
.restaurants-view .ratt-option span i {
  font-size: 22px;
  color: var(--neutral-400);
}
.restaurants-view .ratt-option span strong {
  font-size: 12.5px;
  color: var(--neutral-700);
}
.restaurants-view .ratt-option:hover input:not(:checked) + span {
  border-color: var(--neutral-400);
}
.restaurants-view .ratt-option input:checked + span {
  background: linear-gradient(135deg, var(--orange-50), #FFF7ED);
  border-color: var(--orange-600);
  box-shadow: 0 4px 12px -4px rgba(234, 88, 12, 0.3);
}
.restaurants-view .ratt-option input:checked + span i {
  color: var(--orange-600);
}
.restaurants-view .ratt-option input:checked + span strong {
  color: var(--orange-600);
}
.restaurants-view .form-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.restaurants-view .form-toggle-card .toggle-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.restaurants-view .form-toggle-card .toggle-desc {
  font-size: 11.5px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.restaurants-view .form-toggle-card .toggle-control {
  display: flex;
  gap: 6px;
}
.restaurants-view .form-toggle-card .toggle-control label {
  cursor: pointer;
}
.restaurants-view .form-toggle-card .toggle-control label input {
  display: none;
}
.restaurants-view .form-toggle-card .toggle-control label span {
  padding: 7px 14px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: var(--neutral-600);
}
.restaurants-view .form-toggle-card .toggle-control label input:checked + span {
  background: linear-gradient(135deg, var(--orange-600), #F59E0B);
  border-color: var(--orange-600);
  color: #fff;
}
.restaurants-view .form-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--card-border);
  border-radius: 0 0 12px 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
  z-index: 5;
}
.restaurants-view .form-footer .footer-hint {
  font-size: 12px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.restaurants-view .form-footer .footer-actions {
  display: flex;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   RESTAURANT FORM — partial gestion/hotels/_restaurant_form.html.twig
   Inclus dans l'onglet "Restauration" de la fiche hôtel (scope .ghe-page).
   Palette Enedis monochromatique (bleu électrique + neutres). Aucun accent
   secondaire — la cohérence visuelle prime sur la signalisation thématique.
   ═══════════════════════════════════════════════════════════════ */
.ghr-restaurant {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* ── Bloc générique (sous-groupement à l'intérieur d'une ghe-section) ── */
  /* ── Capacités d'accueil (fieldset 2x2) ── */
  /* ── Chips (typologie, cuisine, services…) ── */
  /* ── Jours d'ouverture (chips Lun → Dim) ── */
  /* ── Services midi / soir avec créneaux ── */
  /* ── Aperçu hebdomadaire (live, lecture seule) ── */
  /* ── Équipement (groupes Confort / Animation / Accessibilité) ── */
}
.ghr-restaurant .ghr-block + .ghr-restaurant .ghr-block {
  margin-top: 18px;
}
.ghr-restaurant .ghr-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding-bottom: 6px;
}
.ghr-restaurant .ghr-block-k {
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-800);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ghr-restaurant .ghr-block-k i {
  margin-right: 6px;
  color: var(--enedis-blue);
  font-size: 11px;
}
.ghr-restaurant .ghr-block-meta {
  font-size: 11.5px;
  color: var(--neutral-500);
  font-weight: 500;
}
.ghr-restaurant .ghr-counter {
  font-family: var(--font-mono);
  color: var(--enedis-blue);
  font-weight: 700;
}
.ghr-restaurant .ghr-capacity {
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  background: var(--neutral-50);
}
.ghr-restaurant .ghr-capacity legend {
  padding: 0 8px;
  margin-left: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--neutral-700);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ghr-restaurant .ghr-capacity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .ghr-restaurant .ghr-capacity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .ghr-restaurant .ghr-capacity-grid {
    grid-template-columns: 1fr;
  }
}
.ghr-restaurant .ghr-cap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: text;
}
.ghr-restaurant .ghr-cap .ghr-cap-k {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ghr-restaurant .ghr-cap .ghr-cap-k i {
  font-size: 10px;
  color: var(--enedis-blue);
  width: 12px;
  text-align: center;
}
.ghr-restaurant .ghr-cap .ghr-cap-input {
  position: relative;
  display: block;
}
.ghr-restaurant .ghr-cap .ghr-cap-input input {
  padding-right: 52px;
  text-align: left;
}
.ghr-restaurant .ghr-cap .ghr-cap-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-400);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.ghr-restaurant .ghr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ghr-restaurant .ghr-chip {
  cursor: pointer;
}
.ghr-restaurant .ghr-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ghr-restaurant .ghr-chip input:focus-visible + span {
  outline: 2px solid var(--enedis-blue);
  outline-offset: 2px;
}
.ghr-restaurant .ghr-chip span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--neutral-700);
  transition: background 140ms, color 140ms, border-color 140ms;
}
.ghr-restaurant .ghr-chip:hover input:not(:checked) + span {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
  color: var(--enedis-blue);
}
.ghr-restaurant .ghr-chip input:checked + span {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  font-weight: 600;
}
.ghr-restaurant .ghr-jours {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ghr-restaurant .ghr-jour {
  cursor: pointer;
}
.ghr-restaurant .ghr-jour input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ghr-restaurant .ghr-jour input:focus-visible + .ghr-jour-pill {
  outline: 2px solid var(--enedis-blue);
  outline-offset: 2px;
}
.ghr-restaurant .ghr-jour .ghr-jour-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-600);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.ghr-restaurant .ghr-jour:hover input:not(:checked) + .ghr-jour-pill {
  border-color: var(--enedis-blue-border);
  color: var(--enedis-blue);
}
.ghr-restaurant .ghr-jour input:checked + .ghr-jour-pill {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
}
.ghr-restaurant .ghr-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ghr-restaurant .ghr-service {
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 12px;
  transition: background 160ms, border-color 160ms;
}
@media (max-width: 720px) {
  .ghr-restaurant .ghr-service {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.ghr-restaurant .ghr-service:has(input[data-restaurant-horaires-target=serviceCheckbox]:checked) {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.ghr-restaurant .ghr-service:not(:has(input[data-restaurant-horaires-target=serviceCheckbox]:checked)) .ghr-service-range {
  opacity: 0.4;
  pointer-events: none;
}
.ghr-restaurant .ghr-service:not(:has(input[data-restaurant-horaires-target=serviceCheckbox]:checked)) .ghr-service-mark {
  background: var(--neutral-200);
  color: var(--neutral-500);
}
.ghr-restaurant .ghr-service-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.ghr-restaurant .ghr-service-toggle input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--neutral-300);
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 140ms;
}
.ghr-restaurant .ghr-service-toggle input[type=checkbox]:checked {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
}
.ghr-restaurant .ghr-service-toggle input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ghr-restaurant .ghr-service-toggle input[type=checkbox]:focus-visible {
  outline: 2px solid var(--enedis-blue);
  outline-offset: 2px;
}
.ghr-restaurant .ghr-service-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--enedis-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 160ms, color 160ms;
  flex-shrink: 0;
}
.ghr-restaurant .ghr-service-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--neutral-900);
}
.ghr-restaurant .ghr-service-range {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 160ms;
}
.ghr-restaurant .ghr-time {
  max-width: 130px;
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.ghr-restaurant .ghr-time::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}
.ghr-restaurant .ghr-arrow {
  color: var(--neutral-400);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.ghr-restaurant .ghr-preview {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  overflow: hidden;
}
.ghr-restaurant .ghr-preview-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: center;
  padding: 10px 16px;
  font-size: 13px;
  border-top: 1px solid var(--neutral-100);
}
.ghr-restaurant .ghr-preview-row:first-child {
  border-top: 0;
}
.ghr-restaurant .ghr-preview-row.is-closed {
  background: var(--neutral-50);
  color: var(--neutral-400);
}
.ghr-restaurant .ghr-preview-row.is-closed .ghr-preview-slots {
  font-style: italic;
}
.ghr-restaurant .ghr-preview-day {
  font-weight: 600;
  color: var(--neutral-700);
  font-size: 12.5px;
}
.ghr-restaurant .ghr-preview-slots {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--neutral-800);
  letter-spacing: 0.02em;
}
.ghr-restaurant .ghr-preview-slots .ghr-slot {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  font-weight: 600;
  margin-right: 6px;
}
.ghr-restaurant .ghr-preview-slots .ghr-slot i {
  font-size: 9px;
  margin-right: 4px;
  opacity: 0.8;
}
.ghr-restaurant .ghr-equip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.ghr-restaurant .ghr-equip-item {
  cursor: pointer;
}
.ghr-restaurant .ghr-equip-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ghr-restaurant .ghr-equip-item input:focus-visible + .ghr-equip-card {
  outline: 2px solid var(--enedis-blue);
  outline-offset: 2px;
}
.ghr-restaurant .ghr-equip-item .ghr-equip-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
  transition: background 140ms, border-color 140ms, color 140ms;
}
.ghr-restaurant .ghr-equip-item .ghr-equip-card i {
  font-size: 14px;
  color: var(--neutral-400);
  width: 18px;
  text-align: center;
  transition: color 140ms;
}
.ghr-restaurant .ghr-equip-item:hover input:not(:checked) + .ghr-equip-card {
  border-color: var(--enedis-blue-border);
  color: var(--enedis-blue);
}
.ghr-restaurant .ghr-equip-item:hover input:not(:checked) + .ghr-equip-card i {
  color: var(--enedis-blue);
}
.ghr-restaurant .ghr-equip-item input:checked + .ghr-equip-card {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
  color: var(--enedis-blue);
  font-weight: 600;
}
.ghr-restaurant .ghr-equip-item input:checked + .ghr-equip-card i {
  color: var(--enedis-blue);
}

/* ═══════════════════════════════════════════════════════════════
   SOCIETE TAXI — portail prestataire (dashboard + chauffeurs)
   Réutilise le design system de Mes Réservations via .resa-list.
   Cette feuille n'ajoute QUE la modal d'ajout chauffeur (non couverte
   par les autres partials).
   ═══════════════════════════════════════════════════════════════ */
.taxi-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(13, 16, 27, 0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 20px;
  overflow-y: auto;
}
.taxi-modal-back.is-open {
  display: flex;
}

.taxi-modal {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.taxi-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  gap: 12px;
}
.taxi-modal-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  flex: 1;
}
.taxi-modal-head .taxi-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 13px;
}
.taxi-modal-head .taxi-modal-close:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.taxi-modal-body {
  padding: 18px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.taxi-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .taxi-form-grid {
    grid-template-columns: 1fr;
  }
}

.taxi-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.taxi-form-group label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
}
.taxi-form-group input {
  padding: 7px 11px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 150ms;
}
.taxi-form-group input::placeholder {
  color: var(--neutral-400);
}
.taxi-form-group input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.taxi-modal-foot {
  padding: 14px 20px;
  margin-top: 4px;
  border-top: 1px solid var(--neutral-100);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   SOCIETE TAXI — page d'édition (form refondue)
   Scope : .taxi-form-page. Layout 2 colonnes, hero avec avatar
   live, sections numérotées, aside sticky avec complétude.
   ═══════════════════════════════════════════════════════════════ */
.taxi-form-page {
  --tfp-radius: 14px;
  --tfp-section-pad: 28px;
  --tfp-aside-w: 340px;
  /* ── Palette Enedis (scoped) ───────────────────────────────
     Bleu électrique signature post-rebrand 2020. Toutes les
     accents de cette page dérivent UNIQUEMENT de cette couleur
     et des neutres. Les sémantiques (vert/rouge) restent
     réservées aux statuts (Active/Inactive). */
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --tfp-accent: var(--enedis-blue);
  padding-bottom: 96px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── Layout 2 colonnes ─────────────────────────────────── */
  /* ── Form principale ────────────────────────────────────── */
  /* ── Champs ─────────────────────────────────────────────── */
  /* ── Toggle Active/Inactive (radios stylés) ─────────────── */
  /* ── Sticky action bar ──────────────────────────────────── */
  /* ── Aside sticky ───────────────────────────────────────── */
  /* — Portail bloc — */
  /* ── Complétude ─────────────────────────────────────────── */
}
.taxi-form-page .tfp-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
}
.taxi-form-page .tfp-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.taxi-form-page .tfp-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.taxi-form-page .tfp-crumb-link i {
  font-size: 11px;
}
.taxi-form-page .tfp-crumb-sep {
  color: var(--neutral-300);
}
.taxi-form-page .tfp-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.taxi-form-page .tfp-hero {
  position: relative;
  border-radius: var(--tfp-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  opacity: 0;
  animation: tfpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.taxi-form-page .tfp-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.taxi-form-page .tfp-hero-inner {
  position: relative;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 720px) {
  .taxi-form-page .tfp-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    padding: 22px 22px;
  }
  .taxi-form-page .tfp-hero-inner .tfp-hero-cta {
    grid-column: 1/-1;
  }
}
.taxi-form-page .tfp-avatar {
  --avatar-color: var(--enedis-blue);
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--avatar-color) 0%, color-mix(in srgb, var(--avatar-color) 75%, #000) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 1px;
  font-family: var(--font-mono);
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--avatar-color) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background 300ms ease;
}
.taxi-form-page .tfp-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.taxi-form-page .tfp-avatar span {
  position: relative;
  z-index: 1;
}
.taxi-form-page .tfp-hero-meta {
  min-width: 0;
}
.taxi-form-page .tfp-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.taxi-form-page .tfp-eyebrow i {
  font-size: 10px;
}
.taxi-form-page .tfp-title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
  word-break: break-word;
}
.taxi-form-page .tfp-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.taxi-form-page .tfp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid transparent;
}
.taxi-form-page .tfp-pill i {
  font-size: 10px;
}
.taxi-form-page .tfp-pill.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.taxi-form-page .tfp-pill.is-ok .tfp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: tfpPulse 2s ease-in-out infinite;
}
.taxi-form-page .tfp-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.taxi-form-page .tfp-pill.is-off .tfp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.taxi-form-page .tfp-pill.is-draft {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.taxi-form-page .tfp-pill.is-key {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.taxi-form-page .tfp-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 180ms;
}
.taxi-form-page .tfp-hero-cta i {
  color: var(--enedis-blue);
}
.taxi-form-page .tfp-hero-cta:hover {
  background: #fff;
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
}
.taxi-form-page .tfp-grid {
  display: grid;
  grid-template-columns: 1fr var(--tfp-aside-w);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .taxi-form-page .tfp-grid {
    grid-template-columns: 1fr;
  }
}
.taxi-form-page .tfp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.taxi-form-page .tfp-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--tfp-radius);
  padding: var(--tfp-section-pad);
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: tfpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--section-delay, 0ms);
  transition: border-color 200ms, box-shadow 200ms;
}
.taxi-form-page .tfp-section:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.taxi-form-page .tfp-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--tfp-radius) 0 0 var(--tfp-radius);
  opacity: 0.85;
}
.taxi-form-page .tfp-section-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--neutral-200);
}
.taxi-form-page .tfp-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 2px;
}
.taxi-form-page .tfp-section-titles {
  flex: 1;
  min-width: 0;
}
.taxi-form-page .tfp-section-titles h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.taxi-form-page .tfp-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.taxi-form-page .tfp-section-titles p {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.taxi-form-page .tfp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .taxi-form-page .tfp-fields {
    grid-template-columns: 1fr;
  }
}
.taxi-form-page .tfp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.taxi-form-page .tfp-field.full {
  grid-column: 1/-1;
}
.taxi-form-page .tfp-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.taxi-form-page .tfp-field label .req {
  color: var(--red-600);
  margin-left: 2px;
}
.taxi-form-page .tfp-field .tfp-hint {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--neutral-400);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.taxi-form-page .tfp-field .tfp-hint i {
  font-size: 9px;
}
.taxi-form-page .tfp-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.taxi-form-page .tfp-input::placeholder {
  color: var(--neutral-400);
}
.taxi-form-page .tfp-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.taxi-form-page .tfp-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.taxi-form-page select.tfp-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
}
.taxi-form-page .tfp-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  font-family: inherit;
}
.taxi-form-page .tfp-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--neutral-50);
  padding: 4px;
  border-radius: 10px;
  border: 1.5px solid var(--neutral-200);
}
.taxi-form-page .tfp-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-500);
  cursor: pointer;
  transition: all 160ms;
  position: relative;
  user-select: none;
}
.taxi-form-page .tfp-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.taxi-form-page .tfp-radio .tfp-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-300);
  transition: all 160ms;
}
.taxi-form-page .tfp-radio.is-checked {
  background: #fff;
  color: var(--neutral-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--neutral-200);
}
.taxi-form-page .tfp-radio.is-checked .tfp-radio-dot {
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 25%, transparent);
}
.taxi-form-page .tfp-toggle-group .tfp-radio:has(input[value="0"]:checked) .tfp-radio-dot {
  background: var(--neutral-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral-500) 25%, transparent);
}
.taxi-form-page .tfp-actionbar {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--neutral-200);
  border-radius: var(--tfp-radius);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 600px) {
  .taxi-form-page .tfp-actionbar {
    grid-template-columns: 1fr 1fr;
  }
  .taxi-form-page .tfp-actionbar .tfp-actionbar-state {
    grid-column: 1/-1;
    order: -1;
    justify-content: center;
  }
}
.taxi-form-page .tfp-actionbar-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--neutral-500);
  justify-content: center;
}
.taxi-form-page .tfp-actionbar-state i {
  color: var(--green-600);
}
.taxi-form-page .tfp-save-btn {
  white-space: nowrap;
}
.taxi-form-page .tfp-aside {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  animation: tfpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 250ms;
}
@media (max-width: 1024px) {
  .taxi-form-page .tfp-aside {
    position: static;
  }
}
.taxi-form-page .tfp-aside-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--tfp-radius);
  padding: 20px;
}
.taxi-form-page .tfp-aside-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.taxi-form-page .tfp-aside-head h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
}
.taxi-form-page .tfp-aside-head p {
  margin: 0;
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 1.45;
}
.taxi-form-page .tfp-aside-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.taxi-form-page .tfp-aside-btn {
  width: 100%;
  justify-content: center;
}
.taxi-form-page .tfp-aside-empty {
  font-size: 12.5px;
  color: var(--neutral-600);
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--neutral-50);
  border-left: 3px solid var(--enedis-blue);
  border-radius: 0 8px 8px 0;
}
.taxi-form-page .tfp-portal-info {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.taxi-form-page .tfp-portal-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.taxi-form-page .tfp-portal-info-row strong {
  color: var(--neutral-900);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 12px;
}
.taxi-form-page .tfp-portal-info-row span:last-child {
  color: var(--neutral-700);
}
.taxi-form-page .tfp-portal-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
  font-weight: 600;
}
.taxi-form-page .tfp-portal.is-active .tfp-aside-icon {
  background: var(--green-50);
  color: var(--green-600);
}
.taxi-form-page .tfp-completion {
  background: radial-gradient(circle at 100% 0%, rgba(20, 50, 250, 0.06), transparent 50%), #fff;
}
.taxi-form-page .tfp-completion-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.taxi-form-page .tfp-completion-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
  font-weight: 700;
  margin-bottom: 4px;
}
.taxi-form-page .tfp-completion-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--neutral-900);
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: -1px;
}
.taxi-form-page .tfp-completion-value small {
  font-size: 16px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-left: 2px;
}
.taxi-form-page .tfp-completion-ring {
  width: 56px;
  height: 56px;
  position: relative;
  flex-shrink: 0;
}
.taxi-form-page .tfp-completion-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.taxi-form-page .tfp-completion-ring .tfp-ring-track {
  fill: none;
  stroke: var(--neutral-200);
  stroke-width: 2.4;
}
.taxi-form-page .tfp-completion-ring .tfp-ring-bar {
  fill: none;
  stroke: var(--enedis-blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 400ms cubic-bezier(0.25, 1, 0.5, 1), stroke 200ms;
}
.taxi-form-page .tfp-completion-ring .tfp-ring-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: var(--enedis-blue);
  font-size: 18px;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.taxi-form-page .tfp-completion-ring[style*="--pct: 100"] .tfp-ring-bar {
  stroke: var(--enedis-blue-deep);
}
.taxi-form-page .tfp-completion-ring[style*="--pct: 100"] .tfp-ring-check {
  transform: translate(-50%, -50%) scale(1);
}
.taxi-form-page .tfp-completion-bar {
  height: 6px;
  background: var(--neutral-100);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.taxi-form-page .tfp-completion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  width: 0%;
  border-radius: 999px;
  transition: width 400ms cubic-bezier(0.25, 1, 0.5, 1);
}
.taxi-form-page .tfp-completion-hint {
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 1.5;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes tfpRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tfpPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   SOCIETE TAXI — page d'index (annuaire des sociétés)
   Scope : .taxi-index-page. Palette Enedis monochromatique
   (bleu électrique + neutres + sémantiques pour statuts).
   ═══════════════════════════════════════════════════════════════ */
.taxi-index-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --tip-radius: 14px;
  --tip-card-pad: 20px;
  padding-bottom: 64px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── Stat strip (KPIs sobres) ────────────────────────────── */
  /* ── Filter bar ──────────────────────────────────────────── */
  /* ── Grid de cartes ──────────────────────────────────────── */
  /* — Card head — */
  /* — Pills statut (vert/neutre — sémantique uniquement) — */
  /* — Contact list — */
  /* — Stats grid (4 mini-stats) — */
  /* — Card foot : portail + edit CTA — */
  /* ── Empty state ─────────────────────────────────────────── */
}
.taxi-index-page .tip-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
}
.taxi-index-page .tip-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.taxi-index-page .tip-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.taxi-index-page .tip-crumb-link i {
  font-size: 11px;
}
.taxi-index-page .tip-crumb-sep {
  color: var(--neutral-300);
}
.taxi-index-page .tip-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.taxi-index-page .tip-hero {
  position: relative;
  border-radius: var(--tip-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: tipRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.taxi-index-page .tip-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.taxi-index-page .tip-hero-inner {
  position: relative;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 720px) {
  .taxi-index-page .tip-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 22px;
  }
  .taxi-index-page .tip-hero-inner .tip-hero-actions {
    grid-column: 1/-1;
  }
}
.taxi-index-page .tip-hero-mark {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.taxi-index-page .tip-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.taxi-index-page .tip-hero-meta {
  min-width: 0;
}
.taxi-index-page .tip-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.taxi-index-page .tip-eyebrow i {
  font-size: 10px;
}
.taxi-index-page .tip-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.taxi-index-page .tip-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 64ch;
}
.taxi-index-page .tip-cta {
  white-space: nowrap;
  background: var(--enedis-blue);
}
.taxi-index-page .tip-cta:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.taxi-index-page .tip-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  opacity: 0;
  animation: tipRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 900px) {
  .taxi-index-page .tip-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .taxi-index-page .tip-stats {
    grid-template-columns: 1fr;
  }
}
.taxi-index-page .tip-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--tip-radius);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.taxi-index-page .tip-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  transform: translateY(-1px);
}
.taxi-index-page .tip-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.taxi-index-page .tip-stat-body {
  min-width: 0;
}
.taxi-index-page .tip-stat-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -1px;
  line-height: 1;
}
.taxi-index-page .tip-stat-value small {
  font-size: 14px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-left: 2px;
  letter-spacing: 0;
}
.taxi-index-page .tip-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 6px;
}
.taxi-index-page .tip-filters {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  opacity: 0;
  animation: tipRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
@media (max-width: 720px) {
  .taxi-index-page .tip-filters {
    grid-template-columns: 1fr;
  }
}
.taxi-index-page .tip-search {
  position: relative;
}
.taxi-index-page .tip-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.taxi-index-page .tip-search input[type=search] {
  width: 100%;
  padding: 11px 40px 11px 38px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.taxi-index-page .tip-search input[type=search]::placeholder {
  color: var(--neutral-400);
}
.taxi-index-page .tip-search input[type=search]::-webkit-search-cancel-button {
  display: none;
}
.taxi-index-page .tip-search input[type=search]:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.taxi-index-page .tip-search input[type=search]:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.taxi-index-page .tip-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: var(--neutral-100);
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms;
}
.taxi-index-page .tip-search-clear:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}
.taxi-index-page .tip-toggle {
  display: inline-flex;
  background: var(--neutral-100);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}
.taxi-index-page .tip-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: var(--neutral-600);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 7px;
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}
.taxi-index-page .tip-toggle-btn i {
  font-size: 11px;
}
.taxi-index-page .tip-toggle-btn:hover {
  color: var(--neutral-900);
}
.taxi-index-page .tip-toggle-btn.is-active {
  background: #fff;
  color: var(--enedis-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--neutral-200);
}
.taxi-index-page .tip-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 8px;
  white-space: nowrap;
}
.taxi-index-page .tip-count > span:first-child {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
}
.taxi-index-page .tip-count-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
  font-weight: 600;
}
.taxi-index-page .tip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.taxi-index-page .tip-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--tip-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
  opacity: 0;
  animation: tipRise 400ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 180ms;
}
.taxi-index-page .tip-card[hidden] {
  display: none;
}
.taxi-index-page .tip-card:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
  transform: translateY(-2px);
}
.taxi-index-page .tip-card.is-inactive {
  opacity: 0.7;
  background: var(--neutral-50);
}
.taxi-index-page .tip-card.is-inactive .tip-card-avatar {
  background: linear-gradient(135deg, var(--neutral-500), var(--neutral-700));
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.taxi-index-page .tip-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--tip-card-pad);
  border-bottom: 1px solid var(--neutral-100);
}
.taxi-index-page .tip-card-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 6px 12px -4px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1.5px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.taxi-index-page .tip-card-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.taxi-index-page .tip-card-avatar span {
  position: relative;
  z-index: 1;
}
.taxi-index-page .tip-card-id {
  flex: 1;
  min-width: 0;
}
.taxi-index-page .tip-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taxi-index-page .tip-card-campus {
  margin-top: 3px;
  font-size: 12px;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.taxi-index-page .tip-card-campus i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.taxi-index-page .tip-card-status {
  flex-shrink: 0;
}
.taxi-index-page .tip-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.taxi-index-page .tip-pill.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.taxi-index-page .tip-pill.is-ok .tip-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: tipPulse 2s ease-in-out infinite;
}
.taxi-index-page .tip-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.taxi-index-page .tip-pill.is-off .tip-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.taxi-index-page .tip-card-contact {
  list-style: none;
  margin: 0;
  padding: 14px var(--tip-card-pad);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.taxi-index-page .tip-card-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--neutral-700);
  min-width: 0;
}
.taxi-index-page .tip-card-contact li i {
  width: 14px;
  color: var(--neutral-400);
  font-size: 11px;
  flex-shrink: 0;
}
.taxi-index-page .tip-card-contact li > span,
.taxi-index-page .tip-card-contact li > a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.taxi-index-page .tip-card-contact li a {
  color: var(--neutral-700);
  text-decoration: none;
  transition: color 150ms;
}
.taxi-index-page .tip-card-contact li a:hover {
  color: var(--enedis-blue);
  text-decoration: underline;
}
.taxi-index-page .tip-card-contact-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--neutral-400);
  font-style: italic;
}
.taxi-index-page .tip-card-contact-empty i {
  color: var(--neutral-300);
}
.taxi-index-page .tip-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--neutral-100);
  border-top: 1px solid var(--neutral-100);
  border-bottom: 1px solid var(--neutral-100);
}
.taxi-index-page .tip-stat-mini {
  background: #fff;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 6px;
}
.taxi-index-page .tip-stat-mini > i {
  font-size: 13px;
  color: var(--neutral-400);
  line-height: 1;
}
.taxi-index-page .tip-stat-mini > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.taxi-index-page .tip-stat-mini.is-warning > i {
  color: var(--red-600);
}
.taxi-index-page .tip-stat-mini.is-warning .tip-stat-mini-value {
  color: var(--red-700);
}
.taxi-index-page .tip-stat-mini-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.5px;
}
.taxi-index-page .tip-stat-mini-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
  font-weight: 600;
  line-height: 1.2;
}
.taxi-index-page .tip-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--tip-card-pad);
  background: var(--neutral-50);
  gap: 12px;
}
.taxi-index-page .tip-portal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 7px;
}
.taxi-index-page .tip-portal-tag i {
  font-size: 10px;
}
.taxi-index-page .tip-portal-tag.is-ok {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
}
.taxi-index-page .tip-portal-tag.is-muted {
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.taxi-index-page .tip-card-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  transition: all 180ms;
}
.taxi-index-page .tip-card-edit i {
  font-size: 11px;
}
.taxi-index-page .tip-card-edit .tip-card-edit-arrow {
  font-size: 9px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms, transform 180ms;
}
.taxi-index-page .tip-card-edit:hover {
  color: #fff;
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--enedis-blue) 50%, transparent);
}
.taxi-index-page .tip-card-edit:hover .tip-card-edit-arrow {
  opacity: 1;
  transform: translateX(0);
}
.taxi-index-page .tip-empty {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: var(--tip-radius);
  margin-top: 16px;
}
.taxi-index-page .tip-empty h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
}
.taxi-index-page .tip-empty p {
  margin: 0 0 20px;
  color: var(--neutral-500);
  font-size: 13.5px;
}
.taxi-index-page .tip-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.taxi-index-page .tip-empty-filter {
  margin-top: 24px;
  padding: 40px 24px;
}
.taxi-index-page .tip-empty-filter .tip-empty-icon {
  width: 52px;
  height: 52px;
  font-size: 20px;
  margin-bottom: 14px;
}
.taxi-index-page .tip-empty-filter h2 {
  font-size: 16px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes tipRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tipPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   RÉSERVATION — page d'annulation
   Scope : .ar-page. Hero adaptatif (couleur sémantique selon
   niveau de pénalité), récap, bandeau pénalité, 3 options
   d'action numérotées. Palette Enedis + sémantiques.
   ═══════════════════════════════════════════════════════════════ */
.ar-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --ar-radius: 14px;
  padding-bottom: 96px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero (couleur dépend du niveau de pénalité) ────────── */
  /* ── Récap ──────────────────────────────────────────────── */
  /* ── Bandeau Pénalité ───────────────────────────────────── */
  /* ── Section "Choisir une action" ───────────────────────── */
  /* ── Action card (générique) ────────────────────────────── */
  /* ── Tags (utilisés dans les heads) ─────────────────────── */
  /* ── Suggestions d'optimisation ─────────────────────────── */
  /* — Flux entre hôtels — */
  /* — Détail des chiffres — */
  /* ── Champs (formulaires) ──────────────────────────────── */
  /* ── Recherche stagiaire (réutilise la search globale) ── */
  /* ── Dropdown de résultats (injecté par stagiaire-search) ── */
  /* ── Stagiaire sélectionné (carte de prévisualisation) ──── */
  /* ── Boutons ──────────────────────────────────────────── */
}
.ar-page .ar-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ar-page .ar-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.ar-page .ar-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.ar-page .ar-crumb-link i {
  font-size: 11px;
}
.ar-page .ar-crumb-sep {
  color: var(--neutral-300);
}
.ar-page .ar-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ar-page .ar-crumb-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.ar-page .ar-hero {
  --hero-accent: var(--neutral-700);
  --hero-soft: var(--neutral-100);
  position: relative;
  border-radius: var(--ar-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: arRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.ar-page .ar-hero.ar-hero-gratuite {
  --hero-accent: var(--green-600);
  --hero-soft: var(--green-50);
}
.ar-page .ar-hero.ar-hero-partielle {
  --hero-accent: var(--amber-600, #D97706);
  --hero-soft: var(--amber-50);
}
.ar-page .ar-hero.ar-hero-totale {
  --hero-accent: var(--red-600);
  --hero-soft: var(--red-50);
}
.ar-page .ar-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, color-mix(in srgb, var(--hero-accent) 12%, transparent), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, color-mix(in srgb, var(--hero-accent) 6%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--hero-soft) 60%, #fff) 0%, #FFFFFF 100%);
  pointer-events: none;
}
.ar-page .ar-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
.ar-page .ar-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--hero-accent) 0%, color-mix(in srgb, var(--hero-accent) 75%, #000) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--hero-accent) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ar-page .ar-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.ar-page .ar-hero-meta {
  min-width: 0;
}
.ar-page .ar-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--hero-accent);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ar-page .ar-eyebrow i {
  font-size: 10px;
}
.ar-page .ar-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
  word-break: break-word;
}
.ar-page .ar-subline {
  margin: 0;
  color: var(--neutral-600);
  font-size: 13px;
  line-height: 1.5;
}
.ar-page .ar-recap {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ar-radius);
  margin-bottom: 16px;
  opacity: 0;
  animation: arRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
.ar-page .ar-recap-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--neutral-100);
}
.ar-page .ar-recap-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ar-page .ar-recap-head h2 i {
  color: var(--enedis-blue);
  font-size: 13px;
}
.ar-page .ar-recap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 1100px) {
  .ar-page .ar-recap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .ar-page .ar-recap-grid {
    grid-template-columns: 1fr;
  }
}
.ar-page .ar-recap-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-right: 1px solid var(--neutral-100);
}
.ar-page .ar-recap-cell:last-child {
  border-right: none;
}
@media (max-width: 1100px) {
  .ar-page .ar-recap-cell:nth-child(2n) {
    border-right: none;
  }
  .ar-page .ar-recap-cell:nth-child(-n+2) {
    border-bottom: 1px solid var(--neutral-100);
  }
}
@media (max-width: 540px) {
  .ar-page .ar-recap-cell {
    border-right: none;
    border-bottom: 1px solid var(--neutral-100);
  }
  .ar-page .ar-recap-cell:last-child {
    border-bottom: none;
  }
}
.ar-page .ar-recap-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.ar-page .ar-recap-body {
  min-width: 0;
  flex: 1;
}
.ar-page .ar-recap-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-bottom: 4px;
}
.ar-page .ar-recap-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.3;
  word-break: break-word;
}
.ar-page .ar-recap-sub {
  font-size: 12px;
  color: var(--neutral-500);
  margin-top: 3px;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ar-page .ar-recap-sub i {
  font-size: 9px;
  opacity: 0.6;
}
.ar-page .ar-recap-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.ar-page .ar-penalty {
  --p-color: var(--neutral-700);
  --p-bg: var(--neutral-50);
  --p-border: var(--neutral-200);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-left: 4px solid var(--p-color);
  border-radius: var(--ar-radius);
  margin-bottom: 24px;
  opacity: 0;
  animation: arRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
.ar-page .ar-penalty.ar-penalty-gratuite {
  --p-color: var(--green-700);
  --p-bg: var(--green-50);
  --p-border: var(--green-200);
}
.ar-page .ar-penalty.ar-penalty-partielle {
  --p-color: var(--amber-800);
  --p-bg: var(--amber-50);
  --p-border: var(--amber-200);
}
.ar-page .ar-penalty.ar-penalty-totale {
  --p-color: var(--red-700);
  --p-bg: var(--red-50);
  --p-border: var(--red-200);
}
.ar-page .ar-penalty.ar-penalty-warning {
  --p-color: var(--amber-800);
  --p-bg: #FFFBEB;
  --p-border: var(--amber-200);
}
@media (max-width: 720px) {
  .ar-page .ar-penalty {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .ar-page .ar-penalty .ar-penalty-amount {
    grid-column: 1/-1;
    text-align: left;
    border-top: 1px dashed var(--p-border);
    padding-top: 14px;
  }
}
.ar-page .ar-penalty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--p-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.ar-page .ar-penalty-body {
  min-width: 0;
}
.ar-page .ar-penalty-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--p-color);
  opacity: 0.85;
  margin-bottom: 4px;
}
.ar-page .ar-penalty-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--p-color);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.ar-page .ar-penalty-msg {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.5;
}
.ar-page .ar-penalty-amount {
  text-align: right;
  flex-shrink: 0;
}
.ar-page .ar-penalty-amount-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-bottom: 4px;
}
.ar-page .ar-penalty-amount-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--p-color);
  letter-spacing: -0.5px;
  line-height: 1;
}
.ar-page .ar-penalty-amount-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--neutral-500);
}
.ar-page .ar-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ar-page .ar-actions-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ar-page .ar-actions-head h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.ar-page .ar-actions-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.ar-page .ar-action {
  --action-accent: var(--enedis-blue);
  --action-soft: var(--enedis-blue-soft);
  position: relative;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ar-radius);
  opacity: 0;
  animation: arRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 220ms;
  transition: border-color 200ms, box-shadow 200ms;
}
.ar-page .ar-action:hover:not(.is-disabled) {
  border-color: var(--action-accent);
  box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--action-accent) 25%, transparent);
}
.ar-page .ar-action.ar-action-info {
  --action-accent: var(--neutral-400);
  --action-soft: var(--neutral-100);
}
.ar-page .ar-action.ar-action-optim {
  --action-accent: var(--green-600);
  --action-soft: var(--green-50);
}
.ar-page .ar-action.ar-action-replace {
  --action-accent: var(--enedis-blue);
  --action-soft: var(--enedis-blue-soft);
  /* z-index plus élevé pour que le dropdown passe au-dessus
     de la carte 03 "Annuler sans remplaçant". */
  z-index: 5;
}
.ar-page .ar-action.ar-action-cancel {
  --action-accent: var(--red-600);
  --action-soft: var(--red-50);
}
.ar-page .ar-action.is-disabled {
  background: var(--neutral-50);
  opacity: 0.85;
}
.ar-page .ar-action-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--neutral-100);
}
.ar-page .ar-action-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--action-accent);
  background: var(--action-soft);
  border: 1px solid color-mix(in srgb, var(--action-accent) 25%, var(--neutral-200));
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.ar-page .ar-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--action-soft);
  color: var(--action-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ar-page .ar-action-titles {
  flex: 1;
  min-width: 0;
}
.ar-page .ar-action-titles h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
}
.ar-page .ar-action-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.ar-page .ar-action-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Les <form> à l'intérieur deviennent eux-mêmes flex column,
     pour garantir un placement propre du bouton submit (sinon
     certains UA appliquent un léger margin par défaut sur form
     qui décale le bouton vers la gauche). */
}
.ar-page .ar-action-body > form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.ar-page .ar-action-lead {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-700);
  line-height: 1.6;
}
.ar-page .ar-action-lead strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.ar-page .ar-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.ar-page .ar-tag i {
  font-size: 10px;
}
.ar-page .ar-tag.ar-tag-success {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.ar-page .ar-tag.ar-tag-warning {
  background: var(--amber-50);
  color: var(--amber-800);
  border-color: var(--amber-200);
}
.ar-page .ar-tag.ar-tag-danger {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.ar-page .ar-tag.ar-tag-muted {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.ar-page .ar-empty-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--neutral-50);
  border-left: 3px solid var(--neutral-300);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--neutral-600);
  line-height: 1.5;
}
.ar-page .ar-empty-inline i {
  color: var(--neutral-400);
  margin-top: 2px;
  flex-shrink: 0;
}
.ar-page .ar-suggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ar-page .ar-sugg {
  --sugg-accent: var(--green-600);
  --sugg-soft: var(--green-50);
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition: border-color 200ms, box-shadow 200ms;
}
.ar-page .ar-sugg.ar-sugg-acceptable {
  --sugg-accent: var(--amber-500);
  --sugg-soft: var(--amber-50);
}
.ar-page .ar-sugg:hover {
  border-color: var(--sugg-accent);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--sugg-accent) 30%, transparent);
}
.ar-page .ar-sugg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ar-page .ar-sugg-name {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  color: var(--neutral-700);
}
.ar-page .ar-sugg-name strong {
  display: block;
  color: var(--neutral-900);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.ar-page .ar-sugg-name-sub {
  font-size: 11.5px;
  color: var(--neutral-500);
}
.ar-page .ar-sugg-saving {
  text-align: right;
}
.ar-page .ar-sugg-saving-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
  font-weight: 600;
  margin-bottom: 2px;
}
.ar-page .ar-sugg-saving-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--sugg-accent);
  letter-spacing: -0.5px;
}
.ar-page .ar-sugg-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--neutral-50);
  border-radius: 10px;
  margin-bottom: 12px;
}
@media (max-width: 540px) {
  .ar-page .ar-sugg-flow {
    grid-template-columns: 1fr;
  }
  .ar-page .ar-sugg-flow .ar-sugg-flow-arrow {
    transform: rotate(90deg);
    margin: 4px auto;
  }
}
.ar-page .ar-sugg-flow-side {
  min-width: 0;
}
.ar-page .ar-sugg-flow-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
  font-weight: 600;
  margin-bottom: 4px;
}
.ar-page .ar-sugg-flow-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 3px;
  word-break: break-word;
}
.ar-page .ar-sugg-flow-cost {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neutral-600);
  font-weight: 600;
}
.ar-page .ar-sugg-flow-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--sugg-accent);
  color: var(--sugg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.ar-page .ar-sugg-breakdown {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  overflow: hidden;
}
.ar-page .ar-sugg-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--neutral-700);
  border-bottom: 1px dashed var(--neutral-100);
}
.ar-page .ar-sugg-breakdown li:last-child {
  border-bottom: none;
}
.ar-page .ar-sugg-breakdown li strong {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
}
.ar-page .ar-sugg-breakdown-total {
  background: var(--sugg-soft);
  font-weight: 600;
}
.ar-page .ar-sugg-breakdown-total span {
  color: var(--neutral-900);
  font-weight: 700;
}
.ar-page .ar-sugg-breakdown-total strong {
  font-size: 15px !important;
}
.ar-page .ar-pos {
  color: var(--green-700);
}
.ar-page .ar-neg {
  color: var(--red-700);
}
.ar-page .ar-emph-danger {
  color: var(--red-700);
  font-weight: 700;
}
.ar-page .ar-sugg-form {
  margin: 0;
}
.ar-page .ar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ar-page .ar-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ar-page .ar-field label i {
  font-size: 10px;
  color: var(--enedis-blue);
  width: 12px;
  text-align: center;
}
.ar-page .ar-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.ar-page .ar-input::placeholder {
  color: var(--neutral-400);
}
.ar-page .ar-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.ar-page .ar-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.ar-page .ar-search {
  position: relative;
  max-width: 720px;
}
.ar-page .ar-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ar-page .ar-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.ar-page .ar-search-input {
  width: 100%;
  padding: 11px 40px 11px 38px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.ar-page .ar-search-input::placeholder {
  color: var(--neutral-400);
}
.ar-page .ar-search-input:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.ar-page .ar-search-input:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.ar-page .ar-search-spinner {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--enedis-blue);
  font-size: 13px;
}
.ar-page .search-results-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.02);
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  /* Scrollbar discrète */
}
.ar-page .search-results-dropdown::-webkit-scrollbar {
  width: 8px;
}
.ar-page .search-results-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.ar-page .search-results-dropdown::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 4px;
  border: 2px solid #fff;
}
.ar-page .search-results-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
.ar-page .search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 120ms;
}
.ar-page .search-result-item:hover, .ar-page .search-result-item.highlighted {
  background: var(--enedis-blue-soft);
}
.ar-page .search-result-item + .search-result-item {
  margin-top: 2px;
}
.ar-page .search-result-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 8px -3px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ar-page .search-result-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.ar-page .search-result-info {
  flex: 1;
  min-width: 0;
}
.ar-page .search-result-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.2;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-page .search-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.3;
}
.ar-page .search-result-meta > span {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.ar-page .badge-mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1px solid var(--enedis-blue-border);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.4px;
}
.ar-page .search-no-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  text-align: center;
}
.ar-page .search-no-result > i {
  color: var(--neutral-300) !important;
  font-size: 26px !important;
}
.ar-page .search-no-result > span {
  color: var(--neutral-700);
  font-size: 13px;
  font-weight: 600;
}
.ar-page .search-no-result .btn {
  margin-top: 4px;
}
.ar-page .stagiaire-selected-card {
  margin-top: 12px;
  background: #fff;
  border: 1.5px solid var(--enedis-blue-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
}
.ar-page .stagiaire-selected-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--enedis-blue-soft) 50%, #fff) 0%, #fff 100%);
  border-bottom: 1px solid var(--enedis-blue-border);
  flex-wrap: wrap;
}
.ar-page .stagiaire-selected-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}
.ar-page .stagiaire-selected-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.ar-page .stagiaire-selected-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.ar-page .stagiaire-selected-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ar-page .stagiaire-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.ar-page .stagiaire-selected-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms;
  flex-shrink: 0;
}
.ar-page .stagiaire-selected-change i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.ar-page .stagiaire-selected-change:hover {
  border-color: var(--enedis-blue-border);
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
}
.ar-page .stagiaire-selected-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  padding: 16px 18px;
}
@media (max-width: 600px) {
  .ar-page .stagiaire-selected-body {
    grid-template-columns: 1fr;
  }
}
.ar-page .stagiaire-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ar-page .stagiaire-info-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--neutral-500);
}
.ar-page .stagiaire-info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-900);
  word-break: break-word;
}
.ar-page .ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 160ms;
  white-space: nowrap;
}
.ar-page .ar-btn i {
  font-size: 12px;
}
.ar-page .ar-btn:active {
  transform: translateY(1px);
}
.ar-page .ar-btn-primary {
  background: var(--enedis-blue);
  color: #fff;
  align-self: flex-start;
}
.ar-page .ar-btn-primary:hover {
  background: var(--enedis-blue-deep);
}
.ar-page .ar-btn-success {
  background: var(--green-600);
  color: #fff;
  align-self: flex-start;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--green-600) 40%, transparent);
}
.ar-page .ar-btn-success:hover {
  background: var(--green-700);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--green-600) 50%, transparent);
}
.ar-page .ar-btn-danger {
  background: var(--red-600);
  color: #fff;
  align-self: flex-start;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--red-600) 40%, transparent);
}
.ar-page .ar-btn-danger:hover {
  background: var(--red-700);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--red-600) 50%, transparent);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes arRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page liste des stagiaires (annuaire)
   Scope : .gs-page. Hero + KPIs + toolbar (search/DR/segments) +
   table propre cliquable. Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gs-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --gs-radius: 14px;
  padding-bottom: 64px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── KPI strip ───────────────────────────────────────────── */
  /* ── Toolbar ─────────────────────────────────────────────── */
  /* ── Segmented filter ────────────────────────────────────── */
  /* ── Table card ──────────────────────────────────────────── */
  /* ── Table ───────────────────────────────────────────────── */
  /* ── Cell : person ──────────────────────────────────────── */
  /* ── Cell : DR ──────────────────────────────────────────── */
  /* ── Cell : contact ─────────────────────────────────────── */
  /* ── Cell : manager ─────────────────────────────────────── */
  /* ── Cell : activity ─────────────────────────────────────── */
  /* ── Cell : empty placeholder ─────────────────────────── */
  /* ── Cell : actions ──────────────────────────────────────── */
  /* ── Empty state (table vide) ─────────────────────────── */
}
.gs-page .gs-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gs-page .gs-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.gs-page .gs-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.gs-page .gs-crumb-link i {
  font-size: 11px;
}
.gs-page .gs-crumb-sep {
  color: var(--neutral-300);
}
.gs-page .gs-crumb-step {
  color: var(--neutral-600);
}
.gs-page .gs-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.gs-page .gs-hero {
  position: relative;
  border-radius: var(--gs-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: gsRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gs-page .gs-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gs-page .gs-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 900px) {
  .gs-page .gs-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 22px;
  }
  .gs-page .gs-hero-inner .gs-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
}
.gs-page .gs-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gs-page .gs-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gs-page .gs-hero-meta {
  min-width: 0;
}
.gs-page .gs-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gs-page .gs-eyebrow i {
  font-size: 10px;
}
.gs-page .gs-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.gs-page .gs-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 64ch;
}
.gs-page .gs-cta {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gs-page .gs-cta:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.gs-page .gs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  opacity: 0;
  animation: gsRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 900px) {
  .gs-page .gs-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gs-page .gs-stats {
    grid-template-columns: 1fr;
  }
}
.gs-page .gs-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gs-radius);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gs-page .gs-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  transform: translateY(-1px);
}
.gs-page .gs-stat.is-warning {
  background: #FFFBF5;
  border-color: #FED7AA;
}
.gs-page .gs-stat.is-warning .gs-stat-icon {
  background: var(--amber-50);
  color: var(--amber-700);
}
.gs-page .gs-stat.is-warning .gs-stat-value {
  color: var(--amber-800);
}
.gs-page .gs-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gs-page .gs-stat-body {
  min-width: 0;
}
.gs-page .gs-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.8px;
  line-height: 1;
}
.gs-page .gs-stat-value small {
  font-size: 12px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-left: 4px;
  letter-spacing: 0;
}
.gs-page .gs-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 5px;
}
.gs-page .gs-toolbar {
  display: grid;
  grid-template-columns: 1fr 280px auto;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  animation: gsRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
@media (max-width: 900px) {
  .gs-page .gs-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .gs-page .gs-toolbar .gs-search {
    grid-column: 1/-1;
  }
}
@media (max-width: 540px) {
  .gs-page .gs-toolbar {
    grid-template-columns: 1fr;
  }
}
.gs-page .gs-search {
  position: relative;
}
.gs-page .gs-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.gs-page .gs-search-input {
  width: 100%;
  padding: 11px 38px 11px 38px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gs-page .gs-search-input::placeholder {
  color: var(--neutral-400);
}
.gs-page .gs-search-input:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gs-page .gs-search-input:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gs-page .gs-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.gs-page .gs-search-clear:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}
.gs-page .gs-filter-dr {
  min-width: 0;
}
.gs-page .gs-select {
  width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--neutral-900);
  cursor: pointer;
  transition: all 160ms;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  appearance: none;
  -webkit-appearance: none;
}
.gs-page .gs-select:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gs-page .gs-select:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gs-page .gs-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1.5px solid var(--enedis-blue-border);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.gs-page .gs-btn-filter i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gs-page .gs-btn-filter:hover {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
}
.gs-page .gs-btn-filter:hover i {
  color: #fff;
}
.gs-page .gs-segments {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  opacity: 0;
  animation: gsRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 180ms;
}
.gs-page .gs-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  transition: all 160ms;
  /* Variante "warning" pour le segment "À compléter" non actif */
}
.gs-page .gs-segment i {
  font-size: 11px;
  color: var(--neutral-400);
}
.gs-page .gs-segment:hover {
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
}
.gs-page .gs-segment:hover i {
  color: var(--enedis-blue);
}
.gs-page .gs-segment.is-active {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.gs-page .gs-segment.is-active i {
  color: #fff;
}
.gs-page .gs-segment.is-active .gs-segment-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.gs-page .gs-segment.gs-segment-warning:not(.is-active) i {
  color: var(--amber-700);
}
.gs-page .gs-segment.gs-segment-warning:not(.is-active) .gs-segment-count {
  background: var(--amber-50);
  color: var(--amber-800);
}
.gs-page .gs-segment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: all 160ms;
}
.gs-page .gs-table-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gs-radius);
  overflow: hidden;
  opacity: 0;
  animation: gsRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 240ms;
}
.gs-page .gs-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-100);
  flex-wrap: wrap;
}
.gs-page .gs-table-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gs-page .gs-table-head h2 i {
  color: var(--enedis-blue);
  font-size: 13px;
}
.gs-page .gs-table-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 8px;
}
.gs-page .gs-table-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--amber-50);
  color: var(--amber-800);
  border: 1px solid var(--amber-200);
  font-size: 11.5px;
  font-weight: 600;
}
.gs-page .gs-table-warn i {
  font-size: 10px;
}
.gs-page .gs-table-wrap {
  overflow-x: auto;
}
.gs-page .gs-table {
  width: 100%;
  border-collapse: collapse;
}
.gs-page .gs-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.gs-page .gs-table .gs-th-actions {
  text-align: right;
  width: 130px;
}
.gs-page .gs-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
  font-size: 13px;
}
.gs-page .gs-table tbody tr:last-child td {
  border-bottom: none;
}
.gs-page .gs-row {
  cursor: pointer;
  transition: background 120ms;
}
.gs-page .gs-row:hover {
  background: var(--enedis-blue-soft);
}
.gs-page .gs-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gs-page .gs-person-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.gs-page .gs-person-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 50%);
  pointer-events: none;
}
.gs-page .gs-person-info {
  min-width: 0;
  flex: 1;
}
.gs-page .gs-person-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.2;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-page .gs-person-nni {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.gs-page .gs-person-nni i {
  font-size: 9px;
  opacity: 0.7;
}
.gs-page .gs-person-nni.is-missing {
  color: var(--amber-700);
  font-family: inherit;
  font-style: italic;
  letter-spacing: 0;
}
.gs-page .gs-person-nni.is-missing i {
  color: var(--amber-600, #D97706);
  opacity: 1;
}
.gs-page .gs-dr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.gs-page .gs-dr-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1px solid var(--enedis-blue-border);
  font-size: 11.5px;
  font-weight: 600;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-page .gs-dr-tag i {
  font-size: 9px;
  color: var(--enedis-blue);
  flex-shrink: 0;
}
.gs-page .gs-dr-lieu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
}
.gs-page .gs-dr-lieu i {
  font-size: 9px;
  color: var(--neutral-400);
}
.gs-page .gs-contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gs-page .gs-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neutral-700);
  min-width: 0;
}
.gs-page .gs-contact-line i {
  font-size: 10px;
  color: var(--neutral-400);
  width: 12px;
  flex-shrink: 0;
}
.gs-page .gs-contact-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.gs-page .gs-manager {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.gs-page .gs-manager-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gs-page .gs-manager-avatar.is-empty {
  background: var(--neutral-100);
  color: var(--neutral-400);
  font-size: 11px;
  font-family: inherit;
}
.gs-page .gs-manager-name {
  font-size: 12.5px;
  color: var(--neutral-700);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gs-page .gs-manager-name.is-empty {
  color: var(--neutral-400);
  font-style: italic;
}
.gs-page .gs-activity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.gs-page .gs-activity-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  align-self: flex-start;
  border: 1px solid transparent;
  font-family: inherit;
}
.gs-page .gs-activity-bubble i {
  font-size: 10px;
}
.gs-page .gs-activity-bubble.is-active {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.gs-page .gs-activity-bubble.is-inactive {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.gs-page .gs-activity-bubble.is-none {
  background: var(--neutral-50);
  color: var(--neutral-400);
  border-color: var(--neutral-200);
}
.gs-page .gs-activity-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--neutral-500);
}
.gs-page .gs-activity-date i {
  font-size: 9px;
  opacity: 0.6;
}
.gs-page .gs-empty {
  font-size: 11.5px;
  color: var(--neutral-400);
  font-style: italic;
}
.gs-page .gs-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.gs-page .gs-cell-actions form {
  display: inline;
  margin: 0;
}
.gs-page .gs-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 11.5px;
  text-decoration: none;
  margin-left: 4px;
  transition: all 150ms;
}
.gs-page .gs-act:hover {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-color: var(--enedis-blue-border);
}
.gs-page .gs-act.gs-act-danger:hover {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.gs-page .gs-empty-cell {
  padding: 0 !important;
}
.gs-page .gs-empty-state {
  text-align: center;
  padding: 56px 24px;
}
.gs-page .gs-empty-state h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gs-page .gs-empty-state p {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13px;
}
.gs-page .gs-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes gsRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   FACTURATION — page d'export
   Scope : .fac-page. Hero, 2 sections de filtres numérotées,
   3 cartes d'action d'export. Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.fac-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --fac-radius: 14px;
  padding-bottom: 64px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── Form (sections numérotées) ─────────────────────────── */
  /* ── Fields ──────────────────────────────────────────────── */
  /* ── Actions (3 cards d'export) ─────────────────────────── */
}
.fac-page .fac-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fac-page .fac-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.fac-page .fac-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.fac-page .fac-crumb-link i {
  font-size: 11px;
}
.fac-page .fac-crumb-sep {
  color: var(--neutral-300);
}
.fac-page .fac-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.fac-page .fac-hero {
  position: relative;
  border-radius: var(--fac-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: facRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.fac-page .fac-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.fac-page .fac-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
@media (max-width: 720px) {
  .fac-page .fac-hero-inner {
    padding: 22px;
  }
}
.fac-page .fac-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fac-page .fac-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.fac-page .fac-hero-meta {
  min-width: 0;
}
.fac-page .fac-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fac-page .fac-eyebrow i {
  font-size: 10px;
}
.fac-page .fac-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.fac-page .fac-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 72ch;
}
.fac-page .fac-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.fac-page .fac-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--fac-radius);
  padding: 22px 24px;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: facRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--section-delay, 0ms);
  transition: border-color 200ms, box-shadow 200ms;
}
.fac-page .fac-section:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.fac-page .fac-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--fac-radius) 0 0 var(--fac-radius);
  opacity: 0.85;
}
.fac-page .fac-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--neutral-200);
}
.fac-page .fac-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 2px;
}
.fac-page .fac-section-titles {
  flex: 1;
  min-width: 0;
}
.fac-page .fac-section-titles h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fac-page .fac-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.fac-page .fac-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.fac-page .fac-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .fac-page .fac-fields {
    grid-template-columns: 1fr;
  }
}
.fac-page .fac-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fac-page .fac-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fac-page .fac-field label i {
  font-size: 11px;
  color: var(--enedis-blue);
  width: 14px;
  text-align: center;
}
.fac-page .fac-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.fac-page .fac-input::placeholder {
  color: var(--neutral-400);
}
.fac-page .fac-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.fac-page .fac-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.fac-page select.fac-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
}
.fac-page .fac-actions {
  opacity: 0;
  animation: facRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 200ms;
}
.fac-page .fac-actions-head {
  margin-bottom: 14px;
}
.fac-page .fac-actions-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fac-page .fac-actions-head h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.fac-page .fac-actions-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.fac-page .fac-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .fac-page .fac-actions-grid {
    grid-template-columns: 1fr;
  }
}
.fac-page .fac-action-btn {
  --action-color: var(--enedis-blue);
  --action-soft: var(--enedis-blue-soft);
  --action-border: var(--enedis-blue-border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--fac-radius);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 200ms;
  position: relative;
}
.fac-page .fac-action-btn:hover {
  border-color: var(--action-color);
  background: var(--action-soft);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--action-color) 35%, transparent);
  transform: translateY(-2px);
}
.fac-page .fac-action-btn:hover .fac-action-icon {
  background: var(--action-color);
  color: #fff;
}
.fac-page .fac-action-btn:hover .fac-action-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--action-color);
}
.fac-page .fac-action-btn:active {
  transform: translateY(0);
}
.fac-page .fac-action-btn.fac-action-preview {
  --action-color: var(--enedis-blue);
  --action-soft: var(--enedis-blue-soft);
  --action-border: var(--enedis-blue-border);
}
.fac-page .fac-action-btn.fac-action-excel {
  --action-color: #16A34A;
  --action-soft: #F0FDF4;
  --action-border: #BBF7D0;
}
.fac-page .fac-action-btn.fac-action-csv {
  --action-color: var(--neutral-700);
  --action-soft: var(--neutral-100);
  --action-border: var(--neutral-300);
}
.fac-page .fac-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--action-soft);
  color: var(--action-color);
  border: 1px solid var(--action-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 200ms;
}
.fac-page .fac-action-body {
  flex: 1;
  min-width: 0;
}
.fac-page .fac-action-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  margin-bottom: 3px;
}
.fac-page .fac-action-desc {
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 1.45;
}
.fac-page .fac-action-arrow {
  font-size: 12px;
  color: var(--neutral-300);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 200ms;
  flex-shrink: 0;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes facRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page liste des campus Enedis
   Scope : .gc-page. Hero + KPIs + toolbar + grille de cartes.
   Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gc-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --gc-radius: 14px;
  padding-bottom: 64px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── KPI strip ───────────────────────────────────────────── */
  /* ── Toolbar ─────────────────────────────────────────────── */
  /* ── Segmented filter ────────────────────────────────────── */
  /* ── Grid ────────────────────────────────────────────────── */
  /* — Card header — */
  /* — Status pill (vert/neutre sémantique) — */
  /* — Card body — */
  /* — Mini-stats — */
  /* — Card footer — */
  /* ── Empty state ─────────────────────────────────────────── */
}
.gc-page .gc-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gc-page .gc-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.gc-page .gc-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.gc-page .gc-crumb-link i {
  font-size: 11px;
}
.gc-page .gc-crumb-sep {
  color: var(--neutral-300);
}
.gc-page .gc-crumb-step {
  color: var(--neutral-600);
}
.gc-page .gc-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.gc-page .gc-hero {
  position: relative;
  border-radius: var(--gc-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: gcRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gc-page .gc-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gc-page .gc-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
@media (max-width: 720px) {
  .gc-page .gc-hero-inner {
    padding: 22px;
  }
}
.gc-page .gc-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gc-page .gc-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gc-page .gc-hero-meta {
  min-width: 0;
}
.gc-page .gc-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gc-page .gc-eyebrow i {
  font-size: 10px;
}
.gc-page .gc-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.gc-page .gc-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 72ch;
}
.gc-page .gc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  opacity: 0;
  animation: gcRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 900px) {
  .gc-page .gc-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gc-page .gc-stats {
    grid-template-columns: 1fr;
  }
}
.gc-page .gc-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gc-radius);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gc-page .gc-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  transform: translateY(-1px);
}
.gc-page .gc-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gc-page .gc-stat-body {
  min-width: 0;
}
.gc-page .gc-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.8px;
  line-height: 1;
}
.gc-page .gc-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 5px;
}
.gc-page .gc-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  animation: gcRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
@media (max-width: 540px) {
  .gc-page .gc-toolbar {
    grid-template-columns: 1fr;
  }
}
.gc-page .gc-search {
  position: relative;
}
.gc-page .gc-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.gc-page .gc-search-input {
  width: 100%;
  padding: 11px 38px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gc-page .gc-search-input::placeholder {
  color: var(--neutral-400);
}
.gc-page .gc-search-input:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gc-page .gc-search-input:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gc-page .gc-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.gc-page .gc-search-clear:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}
.gc-page .gc-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1.5px solid var(--enedis-blue-border);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.gc-page .gc-btn-filter i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gc-page .gc-btn-filter:hover {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
}
.gc-page .gc-btn-filter:hover i {
  color: #fff;
}
.gc-page .gc-segments {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  opacity: 0;
  animation: gcRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 180ms;
}
.gc-page .gc-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  transition: all 160ms;
}
.gc-page .gc-segment i {
  font-size: 11px;
  color: var(--neutral-400);
}
.gc-page .gc-segment:hover {
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
}
.gc-page .gc-segment:hover i {
  color: var(--enedis-blue);
}
.gc-page .gc-segment.is-active {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.gc-page .gc-segment.is-active i {
  color: #fff;
}
.gc-page .gc-segment.is-active .gc-segment-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.gc-page .gc-segment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: all 160ms;
}
.gc-page .gc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  opacity: 0;
  animation: gcRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 240ms;
}
.gc-page .gc-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gc-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gc-page .gc-card:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
  transform: translateY(-2px);
}
.gc-page .gc-card:hover .gc-card-mark {
  transform: scale(1.05) rotate(-3deg);
}
.gc-page .gc-card:hover .gc-card-cta {
  color: var(--enedis-blue-deep);
  background: var(--enedis-blue-soft);
}
.gc-page .gc-card:hover .gc-card-arrow {
  color: var(--enedis-blue);
  transform: translateX(2px);
}
.gc-page .gc-card.is-inactive {
  opacity: 0.7;
  background: var(--neutral-50);
}
.gc-page .gc-card.is-inactive .gc-card-mark {
  background: linear-gradient(135deg, var(--neutral-500), var(--neutral-700));
}
.gc-page .gc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 0;
}
.gc-page .gc-card-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  position: relative;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1.5px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gc-page .gc-card-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gc-page .gc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.gc-page .gc-pill.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.gc-page .gc-pill.is-ok .gc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: gcPulse 2s ease-in-out infinite;
}
.gc-page .gc-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.gc-page .gc-pill.is-off .gc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.gc-page .gc-card-body {
  padding: 14px 18px 0;
}
.gc-page .gc-card-name {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.gc-page .gc-card-loc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.gc-page .gc-card-loc i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.gc-page .gc-empty-text {
  font-style: italic;
}
.gc-page .gc-empty-text i {
  color: var(--neutral-300);
}
.gc-page .gc-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 16px 0 0;
  background: var(--neutral-100);
  border-top: 1px solid var(--neutral-100);
  border-bottom: 1px solid var(--neutral-100);
}
.gc-page .gc-stat-mini {
  background: #fff;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.gc-page .gc-stat-mini > i {
  font-size: 13px;
  color: var(--neutral-400);
}
.gc-page .gc-stat-mini > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.gc-page .gc-stat-mini-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1;
}
.gc-page .gc-stat-mini-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
  line-height: 1.2;
}
.gc-page .gc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--neutral-50);
}
.gc-page .gc-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  padding: 5px 10px;
  border-radius: 7px;
  transition: all 200ms;
}
.gc-page .gc-card-cta i {
  font-size: 11px;
}
.gc-page .gc-card-arrow {
  font-size: 11px;
  color: var(--neutral-400);
  transition: all 200ms;
}
.gc-page .gc-empty {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: var(--gc-radius);
}
.gc-page .gc-empty h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gc-page .gc-empty p {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
}
.gc-page .gc-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes gcRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gcPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page détail d'un campus (vue + paramètres)
   Scope : .cs-page. Hero + KPIs + calendrier + overrides + form
   paramètres (5 sections numérotées) + modal override.
   Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.cs-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --cs-radius: 14px;
  padding-bottom: 96px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── KPI strip ───────────────────────────────────────────── */
  /* ── Section générique ──────────────────────────────────── */
  /* ── Calendrier — navigation mois ───────────────────────── */
  /* ── Légende calendrier ──────────────────────────────────── */
  /* ── Calendrier grid ────────────────────────────────────── */
  /* ── Empty state ─────────────────────────────────────────── */
  /* ── Table overrides ─────────────────────────────────────── */
  /* ── Section Paramètres ──────────────────────────────────── */
  /* ── Champs (form + modale) ──────────────────────────────── */
  /* ── Toggle radio (Actif/Inactif) ───────────────────────── */
  /* ── Form actions footer ─────────────────────────────────── */
  /* ═══════════════════════════════════════════════════════════
     MODAL OVERRIDE
     Visibilité contrôlée par .is-open ajoutée par Stimulus
     OU style="display:none". On supporte les 2 patterns.
     ═══════════════════════════════════════════════════════════ */
}
.cs-page .cs-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cs-page .cs-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.cs-page .cs-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.cs-page .cs-crumb-link i {
  font-size: 11px;
}
.cs-page .cs-crumb-sep {
  color: var(--neutral-300);
}
.cs-page .cs-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.cs-page .cs-hero {
  position: relative;
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: csRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.cs-page .cs-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.cs-page .cs-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 1100px) {
  .cs-page .cs-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 22px;
  }
  .cs-page .cs-hero-inner .cs-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
.cs-page .cs-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cs-page .cs-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.cs-page .cs-hero-meta {
  min-width: 0;
}
.cs-page .cs-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cs-page .cs-eyebrow i {
  font-size: 10px;
}
.cs-page .cs-title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-page .cs-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
  border: 1px solid transparent;
}
.cs-page .cs-status-pill.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.cs-page .cs-status-pill.is-ok .cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: csPulse 2s ease-in-out infinite;
}
.cs-page .cs-status-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.cs-page .cs-status-pill.is-off .cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.cs-page .cs-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cs-page .cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.cs-page .cs-pill i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.cs-page .cs-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cs-page .cs-btn-override {
  white-space: nowrap;
}
.cs-page .cs-btn-override:hover {
  border-color: var(--enedis-blue-border);
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
}
.cs-page .cs-btn-params {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.cs-page .cs-btn-params:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.cs-page .cs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  opacity: 0;
  animation: csRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 900px) {
  .cs-page .cs-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .cs-page .cs-stats {
    grid-template-columns: 1fr;
  }
}
.cs-page .cs-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--cs-radius);
  transition: border-color 200ms, box-shadow 200ms;
}
.cs-page .cs-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.cs-page .cs-stat.is-warning {
  background: #FFFBF5;
  border-color: var(--amber-200);
}
.cs-page .cs-stat.is-warning .cs-stat-icon {
  background: var(--amber-50);
  color: var(--amber-700);
}
.cs-page .cs-stat.cs-stat-occup.is-success .cs-stat-icon {
  background: var(--green-50);
  color: var(--green-700);
}
.cs-page .cs-stat.cs-stat-occup.is-success .cs-stat-value {
  color: var(--green-700);
}
.cs-page .cs-stat.cs-stat-occup.is-warning {
  background: #fff;
  border-color: var(--neutral-200);
}
.cs-page .cs-stat.cs-stat-occup.is-warning .cs-stat-icon {
  background: var(--amber-50);
  color: var(--amber-700);
}
.cs-page .cs-stat.cs-stat-occup.is-warning .cs-stat-value {
  color: var(--amber-800);
}
.cs-page .cs-stat.cs-stat-occup.is-danger .cs-stat-icon {
  background: var(--red-50);
  color: var(--red-700);
}
.cs-page .cs-stat.cs-stat-occup.is-danger .cs-stat-value {
  color: var(--red-700);
}
.cs-page .cs-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cs-page .cs-stat-body {
  min-width: 0;
}
.cs-page .cs-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.8px;
  line-height: 1;
}
.cs-page .cs-stat-value small {
  font-size: 13px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-left: 2px;
  letter-spacing: 0;
}
.cs-page .cs-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 5px;
}
.cs-page .cs-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--cs-radius);
  padding: 22px 24px;
  margin-bottom: 16px;
  opacity: 0;
  animation: csRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
.cs-page .cs-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--neutral-200);
  flex-wrap: wrap;
}
.cs-page .cs-section-titles h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cs-page .cs-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.cs-page .cs-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.cs-page .cs-section-counter {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cs-page .cs-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 4px;
}
.cs-page .cs-month-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: transparent;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none;
  transition: all 150ms;
}
.cs-page .cs-month-btn:hover {
  background: #fff;
  color: var(--enedis-blue);
}
.cs-page .cs-month-today {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 150ms;
}
.cs-page .cs-month-today i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.cs-page .cs-month-today:hover {
  border-color: var(--enedis-blue-border);
  color: var(--enedis-blue-deep);
}
.cs-page .cs-month-label {
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: 0.2px;
  font-family: var(--font-mono);
}
.cs-page .cs-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--neutral-600);
}
.cs-page .cs-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.cs-page .cs-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cs-page .cs-leg-dot.is-open {
  background: #fff;
  border: 1px solid var(--neutral-300);
}
.cs-page .cs-leg-dot.is-partial {
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
}
.cs-page .cs-leg-dot.is-saturating {
  background: var(--amber-100);
  border: 1px solid var(--amber-200);
}
.cs-page .cs-leg-dot.is-full {
  background: var(--red-100);
  border: 1px solid var(--red-200);
}
.cs-page .cs-leg-dot.is-closed {
  background: var(--neutral-300);
  border: 1px solid var(--neutral-400);
}
.cs-page .cs-leg-flag {
  color: var(--amber-700);
  font-size: 10px;
}
.cs-page .cs-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cs-page .cs-cal-dow {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-500);
  padding: 6px 0 4px;
}
.cs-page .cs-cal-dow.is-weekend {
  color: var(--neutral-400);
}
.cs-page .cs-cal-day {
  position: relative;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 9px;
  padding: 8px 8px 22px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
  /* Statuts */
}
.cs-page .cs-cal-day:hover {
  border-color: var(--enedis-blue);
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--enedis-blue) 35%, transparent);
  transform: translateY(-1px);
  z-index: 2;
}
.cs-page .cs-cal-day.is-out {
  background: var(--neutral-50);
  opacity: 0.5;
  cursor: default;
}
.cs-page .cs-cal-day.is-out:hover {
  border-color: var(--neutral-200);
  box-shadow: none;
  transform: none;
}
.cs-page .cs-cal-day.is-past:not(.is-today) {
  opacity: 0.7;
}
.cs-page .cs-cal-day.is-today {
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--enedis-blue) 18%, transparent);
}
.cs-page .cs-cal-day.is-today .cs-cal-day-num {
  background: var(--enedis-blue);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.cs-page .cs-cal-day.cs-cal-open {
  background: #fff;
}
.cs-page .cs-cal-day.cs-cal-partial {
  background: linear-gradient(180deg, color-mix(in srgb, var(--enedis-blue-soft) 90%, #fff) 0%, #fff 100%);
}
.cs-page .cs-cal-day.cs-cal-saturating {
  background: linear-gradient(180deg, var(--amber-50) 0%, #fff 100%);
  border-color: var(--amber-200);
}
.cs-page .cs-cal-day.cs-cal-full {
  background: linear-gradient(180deg, var(--red-50) 0%, #fff 100%);
  border-color: var(--red-200);
}
.cs-page .cs-cal-day.cs-cal-closed {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
  color: var(--neutral-500);
}
.cs-page .cs-cal-day.cs-cal-closed .cs-cal-day-fill {
  color: var(--neutral-500);
  text-decoration: line-through;
}
.cs-page .cs-cal-day-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  font-family: var(--font-mono);
  line-height: 1;
}
.cs-page .cs-cal-day-flag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  color: var(--amber-700);
}
.cs-page .cs-cal-day-fill {
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-700);
  font-family: var(--font-mono);
}
.cs-page .cs-cal-day-fill .cs-cal-day-cap {
  color: var(--neutral-400);
  font-weight: 500;
}
.cs-page .cs-cal-day-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cs-page .cs-cal-day-bar-fill {
  display: block;
  height: 100%;
  background: var(--enedis-blue);
  border-radius: 999px;
  transition: width 200ms;
}
.cs-cal-saturating .cs-page .cs-cal-day-bar-fill {
  background: var(--amber-500);
}
.cs-cal-full .cs-page .cs-cal-day-bar-fill {
  background: var(--red-600);
}
.cs-cal-closed .cs-page .cs-cal-day-bar-fill {
  background: var(--neutral-400);
}
.cs-page .cs-empty {
  text-align: center;
  padding: 48px 24px;
}
.cs-page .cs-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
}
.cs-page .cs-empty p {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13px;
}
.cs-page .cs-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.cs-page .cs-table-wrap {
  overflow-x: auto;
}
.cs-page .cs-table {
  width: 100%;
  border-collapse: collapse;
}
.cs-page .cs-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  border-top: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.cs-page .cs-table .cs-th-actions {
  text-align: right;
  width: 100px;
}
.cs-page .cs-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
  font-size: 13px;
}
.cs-page .cs-table tbody tr:last-child td {
  border-bottom: none;
}
.cs-page .cs-table tbody tr:hover {
  background: rgba(20, 50, 250, 0.02);
}
.cs-page .cs-date-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cs-page .cs-date-day {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1;
}
.cs-page .cs-date-meta {
  font-size: 11px;
  color: var(--neutral-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.cs-page .cs-date-meta small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--neutral-400);
  margin-top: 1px;
}
.cs-page .cs-cap-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}
.cs-page .cs-cap-pill i {
  font-size: 10px;
}
.cs-page .cs-cap-pill.is-closed {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid var(--red-200);
}
.cs-page .cs-cap-pill.is-modified {
  background: var(--amber-50);
  color: var(--amber-800);
  border: 1px solid var(--amber-200);
}
.cs-page .cs-cap-val {
  font-family: var(--font-mono);
  font-size: 13px;
}
.cs-page .cs-cap-base {
  color: var(--neutral-500);
  font-weight: 500;
  font-size: 11px;
}
.cs-page .cs-cell-text {
  color: var(--neutral-700);
}
.cs-page .cs-cell-muted {
  color: var(--neutral-500);
  font-size: 12px;
}
.cs-page .cs-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.cs-page .cs-cell-actions form {
  display: inline;
  margin: 0;
}
.cs-page .cs-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 11.5px;
  margin-left: 4px;
  transition: all 150ms;
}
.cs-page .cs-act:hover {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-color: var(--enedis-blue-border);
}
.cs-page .cs-act.cs-act-danger:hover {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.cs-page .cs-params {
  scroll-margin-top: 80px;
  margin-top: 24px;
}
.cs-page .cs-params-head {
  margin-bottom: 16px;
}
.cs-page .cs-params-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cs-page .cs-params-head h2 i {
  color: var(--enedis-blue);
  font-size: 16px;
}
.cs-page .cs-params-head p {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-500);
}
.cs-page .cs-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-page .cs-form-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--cs-radius);
  padding: 22px 24px;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: csRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--section-delay, 0ms);
  transition: border-color 200ms, box-shadow 200ms;
}
.cs-page .cs-form-section:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.cs-page .cs-form-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);
  opacity: 0.85;
}
.cs-page .cs-form-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--neutral-200);
}
.cs-page .cs-form-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 2px;
}
.cs-page .cs-form-section-titles {
  flex: 1;
  min-width: 0;
}
.cs-page .cs-form-section-titles h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cs-page .cs-form-section-titles h3 i {
  color: var(--enedis-blue);
  font-size: 13px;
}
.cs-page .cs-form-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.cs-page .cs-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .cs-page .cs-fields {
    grid-template-columns: 1fr;
  }
}
.cs-page .cs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-page .cs-field.full {
  grid-column: 1/-1;
}
.cs-page .cs-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cs-page .cs-field label i {
  font-size: 11px;
  color: var(--enedis-blue);
  width: 14px;
  text-align: center;
}
.cs-page .cs-req {
  color: var(--red-600);
  margin-left: 2px;
}
.cs-page .cs-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.cs-page .cs-input::placeholder {
  color: var(--neutral-400);
}
.cs-page .cs-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.cs-page .cs-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.cs-page .cs-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.cs-page .cs-hint i {
  font-size: 10px;
  color: var(--neutral-400);
  margin-top: 2px;
  flex-shrink: 0;
}
.cs-page .cs-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--neutral-50);
  padding: 4px;
  border-radius: 10px;
  border: 1.5px solid var(--neutral-200);
  max-width: 360px;
}
.cs-page .cs-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-500);
  cursor: pointer;
  transition: all 160ms;
  position: relative;
  user-select: none;
}
.cs-page .cs-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cs-page .cs-radio .cs-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-300);
  transition: all 160ms;
}
.cs-page .cs-radio:has(input:checked) {
  background: #fff;
  color: var(--neutral-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--neutral-200);
}
.cs-page .cs-radio:has(input[value="1"]:checked) .cs-radio-dot {
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 25%, transparent);
}
.cs-page .cs-radio:has(input[value="0"]:checked) .cs-radio-dot {
  background: var(--neutral-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral-500) 25%, transparent);
}
.cs-page .cs-form-actions {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--neutral-200);
  border-radius: var(--cs-radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
}
.cs-page .cs-form-modified {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neutral-500);
}
.cs-page .cs-form-modified i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.cs-page .cs-form-modified strong {
  color: var(--neutral-700);
  font-weight: 600;
}
.cs-page .cs-form-buttons {
  display: inline-flex;
  gap: 8px;
}
.cs-page .cs-btn-save {
  background: var(--enedis-blue);
}
.cs-page .cs-btn-save:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.cs-page .cs-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 40px;
  overflow-y: auto;
}
.cs-page .cs-modal.is-open {
  display: flex;
}
.cs-page .cs-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(13, 16, 27, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: csFadeIn 200ms ease-out;
}
.cs-page .cs-modal-box {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: csRise 280ms cubic-bezier(0.25, 1, 0.5, 1);
}
.cs-page .cs-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--neutral-100);
  background: linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
}
.cs-page .cs-modal-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cs-page .cs-modal-titles {
  flex: 1;
  min-width: 0;
}
.cs-page .cs-modal-titles h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
}
.cs-page .cs-modal-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.cs-page .cs-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 150ms;
}
.cs-page .cs-modal-close:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.cs-page .cs-modal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.cs-page .cs-modal-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--enedis-blue-deep);
  line-height: 1.5;
}
.cs-page .cs-modal-info i {
  color: var(--enedis-blue);
  margin-top: 2px;
  flex-shrink: 0;
}
.cs-page .cs-modal-info strong {
  font-weight: 700;
}
.cs-page .cs-modal-foot {
  padding-top: 4px;
  margin-top: 4px;
  border-top: 1px solid var(--neutral-100);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Compat ascendante : si Stimulus utilise style="display:flex" pour ouvrir,
   on fournit aussi la règle qui matche cet état. */
.cs-page .cs-modal[style*="display: flex"],
.cs-page .cs-modal[style*="display:flex"] {
  display: flex !important;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes csRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes csFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes csPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — dashboard d'administration
   Scope : .gd-page. Hero + KPI strip + tuiles de référentiels +
   activité récente (4 cards). Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gd-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --gd-radius: 14px;
  padding-bottom: 64px;
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── KPI strip (5 colonnes) ──────────────────────────────── */
  /* ── Section ─────────────────────────────────────────────── */
  /* ── Navigation tiles ────────────────────────────────────── */
  /* ── Activity grid ───────────────────────────────────────── */
}
.gd-page .gd-hero {
  position: relative;
  border-radius: var(--gd-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: gdRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gd-page .gd-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gd-page .gd-hero-inner {
  position: relative;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
@media (max-width: 720px) {
  .gd-page .gd-hero-inner {
    padding: 22px;
  }
}
.gd-page .gd-hero-mark {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gd-page .gd-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gd-page .gd-hero-meta {
  min-width: 0;
}
.gd-page .gd-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gd-page .gd-eyebrow i {
  font-size: 10px;
}
.gd-page .gd-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.gd-page .gd-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 72ch;
}
.gd-page .gd-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 28px;
  opacity: 0;
  animation: gdRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 1100px) {
  .gd-page .gd-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .gd-page .gd-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gd-page .gd-stats {
    grid-template-columns: 1fr;
  }
}
.gd-page .gd-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gd-radius);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gd-page .gd-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  transform: translateY(-1px);
}
.gd-page .gd-stat.gd-stat-highlight {
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, #fff 70%);
  border-color: var(--enedis-blue-border);
}
.gd-page .gd-stat.gd-stat-highlight .gd-stat-icon {
  background: var(--enedis-blue);
  color: #fff;
}
.gd-page .gd-stat.gd-stat-highlight .gd-stat-value {
  color: var(--enedis-blue-deep);
}
.gd-page .gd-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 200ms;
}
.gd-page .gd-stat-body {
  min-width: 0;
}
.gd-page .gd-stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.6px;
  line-height: 1;
}
.gd-page .gd-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 5px;
  line-height: 1.3;
}
.gd-page .gd-section {
  margin-bottom: 32px;
  opacity: 0;
  animation: gdRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
.gd-page .gd-section-head {
  margin-bottom: 14px;
}
.gd-page .gd-section-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gd-page .gd-section-head h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.gd-page .gd-section-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.gd-page .gd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.gd-page .gd-tile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gd-radius);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gd-page .gd-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  opacity: 0;
  transition: opacity 200ms;
}
.gd-page .gd-tile:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
  transform: translateY(-2px);
}
.gd-page .gd-tile:hover::before {
  opacity: 0.85;
}
.gd-page .gd-tile:hover .gd-tile-icon {
  background: var(--enedis-blue);
  color: #fff;
  transform: scale(1.05) rotate(-3deg);
}
.gd-page .gd-tile:hover .gd-tile-arrow {
  color: var(--enedis-blue);
  transform: translateX(2px);
}
.gd-page .gd-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gd-page .gd-tile-body {
  min-width: 0;
  flex: 1;
}
.gd-page .gd-tile-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  margin-bottom: 3px;
}
.gd-page .gd-tile-desc {
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 1.45;
  margin-bottom: 6px;
}
.gd-page .gd-tile-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gd-page .gd-tile-meta i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.gd-page .gd-tile-count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--enedis-blue-deep);
  background: var(--enedis-blue-soft);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
}
.gd-page .gd-tile-arrow {
  font-size: 11px;
  color: var(--neutral-300);
  flex-shrink: 0;
  transition: all 200ms;
}
.gd-page .gd-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .gd-page .gd-activity-grid {
    grid-template-columns: 1fr;
  }
}
.gd-page .gd-act-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gd-radius);
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms;
}
.gd-page .gd-act-card:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.gd-page .gd-act-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-100);
}
.gd-page .gd-act-head h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.gd-page .gd-act-head h3 i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.gd-page .gd-act-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--enedis-blue-deep);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 7px;
  transition: all 150ms;
}
.gd-page .gd-act-link i {
  font-size: 9px;
}
.gd-page .gd-act-link:hover {
  background: var(--enedis-blue-soft);
}
.gd-page .gd-act-link:hover i {
  transform: translateX(2px);
}
.gd-page .gd-act-body {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gd-page .gd-act-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms;
}
.gd-page .gd-act-item:hover {
  background: var(--enedis-blue-soft);
}
.gd-page .gd-act-avatar {
  width: 36px;
  height: 36px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.gd-page .gd-act-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gd-page .gd-act-avatar > span,
.gd-page .gd-act-avatar > i {
  position: relative;
  z-index: 1;
}
.gd-page .gd-act-avatar.gd-act-avatar-square {
  border-radius: 9px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  box-shadow: 0 4px 8px -3px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gd-page .gd-act-avatar.gd-act-avatar-square::after {
  border-radius: 9px;
}
.gd-page .gd-act-avatar.gd-act-avatar-square > i {
  font-size: 14px;
}
.gd-page .gd-act-avatar.gd-act-avatar-circle {
  border-radius: 50%;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.gd-page .gd-act-avatar.gd-act-avatar-circle::after {
  border-radius: 50%;
}
.gd-page .gd-act-info {
  min-width: 0;
  flex: 1;
}
.gd-page .gd-act-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.2;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gd-page .gd-act-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.3;
}
.gd-page .gd-act-sub > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gd-page .gd-act-sub > span i {
  font-size: 9px;
  color: var(--neutral-400);
}
.gd-page .gd-act-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.gd-page .gd-act-pill.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.gd-page .gd-act-pill.is-ok .gd-act-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: gdPulse 2s ease-in-out infinite;
}
.gd-page .gd-act-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.gd-page .gd-act-pill.is-off .gd-act-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.gd-page .gd-act-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 28px 12px;
  color: var(--neutral-400);
  font-size: 12.5px;
  font-style: italic;
}
.gd-page .gd-act-empty i {
  font-size: 16px;
  color: var(--neutral-300);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes gdRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gdPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page liste des prestataires (navettes + taxis)
   Scope : .gp-page. Hero + KPIs + toolbar (search/type/campus) +
   segments par type + table propre. Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gp-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --gp-radius: 14px;
  padding-bottom: 64px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── KPI strip ───────────────────────────────────────────── */
  /* ── Toolbar (search + 2 selects + boutons) ─────────────── */
  /* ── Segments par type ───────────────────────────────────── */
  /* ── Table card ──────────────────────────────────────────── */
  /* ── Table ───────────────────────────────────────────────── */
  /* ── Cell : société (avatar + nom + adresse) ────────────── */
  /* ── Pill type (Navette / Taxi) ──────────────────────────── */
  /* ── Tag campus ──────────────────────────────────────────── */
  /* ── Cellules génériques ─────────────────────────────────── */
  /* ── Status pill (Actif / Inactif) ───────────────────────── */
  /* ── Cell actions ────────────────────────────────────────── */
  /* ── Empty state ─────────────────────────────────────────── */
}
.gp-page .gp-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gp-page .gp-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.gp-page .gp-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.gp-page .gp-crumb-link i {
  font-size: 11px;
}
.gp-page .gp-crumb-sep {
  color: var(--neutral-300);
}
.gp-page .gp-crumb-step {
  color: var(--neutral-600);
}
.gp-page .gp-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.gp-page .gp-hero {
  position: relative;
  border-radius: var(--gp-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: gpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gp-page .gp-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gp-page .gp-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 900px) {
  .gp-page .gp-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 22px;
  }
  .gp-page .gp-hero-inner .gp-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
}
.gp-page .gp-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gp-page .gp-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gp-page .gp-hero-meta {
  min-width: 0;
}
.gp-page .gp-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gp-page .gp-eyebrow i {
  font-size: 10px;
}
.gp-page .gp-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.gp-page .gp-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 64ch;
}
.gp-page .gp-cta {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gp-page .gp-cta:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.gp-page .gp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  opacity: 0;
  animation: gpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 900px) {
  .gp-page .gp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gp-page .gp-stats {
    grid-template-columns: 1fr;
  }
}
.gp-page .gp-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gp-radius);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gp-page .gp-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  transform: translateY(-1px);
}
.gp-page .gp-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gp-page .gp-stat-body {
  min-width: 0;
}
.gp-page .gp-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.8px;
  line-height: 1;
}
.gp-page .gp-stat-value small {
  font-size: 12px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-left: 2px;
}
.gp-page .gp-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 5px;
}
.gp-page .gp-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px 220px auto auto;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  animation: gpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
@media (max-width: 1024px) {
  .gp-page .gp-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .gp-page .gp-toolbar .gp-search {
    grid-column: 1/-1;
  }
  .gp-page .gp-toolbar .gp-btn-filter {
    grid-column: 1;
  }
  .gp-page .gp-toolbar .gp-btn-reset {
    grid-column: 2;
    justify-self: end;
  }
}
@media (max-width: 540px) {
  .gp-page .gp-toolbar {
    grid-template-columns: 1fr;
  }
  .gp-page .gp-toolbar .gp-btn-filter, .gp-page .gp-toolbar .gp-btn-reset {
    grid-column: 1;
    justify-self: stretch;
  }
}
.gp-page .gp-search {
  position: relative;
}
.gp-page .gp-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.gp-page .gp-search-input {
  width: 100%;
  padding: 11px 38px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gp-page .gp-search-input::placeholder {
  color: var(--neutral-400);
}
.gp-page .gp-search-input::-webkit-search-cancel-button {
  display: none;
}
.gp-page .gp-search-input:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gp-page .gp-search-input:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gp-page .gp-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.gp-page .gp-search-clear:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}
.gp-page .gp-filter-cell {
  min-width: 0;
}
.gp-page .gp-select {
  width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--neutral-900);
  cursor: pointer;
  transition: all 160ms;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  appearance: none;
  -webkit-appearance: none;
}
.gp-page .gp-select:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gp-page .gp-select:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gp-page .gp-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1.5px solid var(--enedis-blue-border);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.gp-page .gp-btn-filter i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gp-page .gp-btn-filter:hover {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
}
.gp-page .gp-btn-filter:hover i {
  color: #fff;
}
.gp-page .gp-btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  padding: 11px;
  border-radius: 10px;
  background: #fff;
  color: var(--neutral-500);
  border: 1.5px solid var(--neutral-200);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: all 160ms;
}
.gp-page .gp-btn-reset:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
  color: var(--neutral-900);
}
.gp-page .gp-segments {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  opacity: 0;
  animation: gpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 180ms;
}
.gp-page .gp-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  transition: all 160ms;
}
.gp-page .gp-segment i {
  font-size: 11px;
  color: var(--neutral-400);
}
.gp-page .gp-segment:hover {
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
}
.gp-page .gp-segment:hover i {
  color: var(--enedis-blue);
}
.gp-page .gp-segment.is-active {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.gp-page .gp-segment.is-active i {
  color: #fff;
}
.gp-page .gp-segment.is-active .gp-segment-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.gp-page .gp-segment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: all 160ms;
}
.gp-page .gp-table-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gp-radius);
  overflow: hidden;
  opacity: 0;
  animation: gpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 240ms;
}
.gp-page .gp-table-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-100);
}
.gp-page .gp-table-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gp-page .gp-table-head h2 i {
  color: var(--enedis-blue);
  font-size: 13px;
}
.gp-page .gp-table-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 8px;
}
.gp-page .gp-table-wrap {
  overflow-x: auto;
}
.gp-page .gp-table {
  width: 100%;
  border-collapse: collapse;
}
.gp-page .gp-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.gp-page .gp-table .gp-th-actions {
  text-align: right;
  width: 110px;
}
.gp-page .gp-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
  font-size: 13px;
}
.gp-page .gp-table tbody tr:last-child td {
  border-bottom: none;
}
.gp-page .gp-row {
  transition: background 120ms;
}
.gp-page .gp-row:hover {
  background: rgba(20, 50, 250, 0.02);
}
.gp-page .gp-row.is-inactive {
  opacity: 0.65;
}
.gp-page .gp-row.is-inactive .gp-presta-name {
  color: var(--neutral-600);
}
.gp-page .gp-presta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gp-page .gp-presta-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 -1.5px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  /* Différenciation discrète par type */
}
.gp-page .gp-presta-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gp-page .gp-presta-avatar > span {
  position: relative;
  z-index: 1;
}
.gp-page .gp-presta-avatar.gp-presta-avatar-navette {
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  box-shadow: 0 4px 8px -3px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1.5px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gp-page .gp-presta-avatar.gp-presta-avatar-taxi {
  background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-900) 100%);
  box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.25), inset 0 -1.5px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.gp-page .gp-presta-info {
  min-width: 0;
  flex: 1;
}
.gp-page .gp-presta-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.2;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-page .gp-presta-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--neutral-500);
}
.gp-page .gp-presta-sub i {
  font-size: 9px;
  color: var(--neutral-400);
  flex-shrink: 0;
}
.gp-page .gp-presta-sub span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.gp-page .gp-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.gp-page .gp-type-pill i {
  font-size: 10px;
}
.gp-page .gp-type-pill.is-navette {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.gp-page .gp-type-pill.is-taxi {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border-color: var(--neutral-300);
}
.gp-page .gp-campus-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--neutral-50);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  font-size: 11.5px;
  font-weight: 600;
}
.gp-page .gp-campus-tag i {
  font-size: 9px;
  color: var(--enedis-blue);
}
.gp-page .gp-cell-text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--neutral-700);
}
.gp-page .gp-cell-text i {
  font-size: 10px;
  color: var(--neutral-400);
  flex-shrink: 0;
}
.gp-page .gp-cell-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--neutral-700);
  text-decoration: none;
  transition: color 150ms;
  max-width: 220px;
}
.gp-page .gp-cell-link i {
  font-size: 10px;
  color: var(--neutral-400);
  flex-shrink: 0;
}
.gp-page .gp-cell-link:hover {
  color: var(--enedis-blue);
  text-decoration: underline;
}
.gp-page .gp-cell-link:hover i {
  color: var(--enedis-blue);
}
.gp-page .gp-cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gp-page .gp-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.gp-page .gp-empty-text {
  font-size: 11.5px;
  color: var(--neutral-400);
  font-style: italic;
}
.gp-page .gp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.gp-page .gp-status-pill.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.gp-page .gp-status-pill.is-ok .gp-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: gpPulse 2s ease-in-out infinite;
}
.gp-page .gp-status-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.gp-page .gp-status-pill.is-off .gp-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.gp-page .gp-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.gp-page .gp-cell-actions form {
  display: inline;
  margin: 0;
}
.gp-page .gp-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 11.5px;
  margin-left: 4px;
  transition: all 150ms;
}
.gp-page .gp-act:hover {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-color: var(--enedis-blue-border);
}
.gp-page .gp-act.gp-act-off:hover {
  background: var(--amber-50);
  color: var(--amber-700);
  border-color: var(--amber-200);
}
.gp-page .gp-act.gp-act-on:hover {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.gp-page .gp-empty {
  text-align: center;
  padding: 56px 24px;
}
.gp-page .gp-empty h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gp-page .gp-empty p {
  margin: 0 0 18px;
  color: var(--neutral-500);
  font-size: 13px;
  line-height: 1.5;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.gp-page .gp-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes gpRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gpPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page formulaire prestataire (création / édition)
   Étend le scope .gp-page avec des classes form-spécifiques.
   La section taxi se masque/s'affiche selon le type sélectionné
   (piloté par le JS inline du template).
   ═══════════════════════════════════════════════════════════════ */
.gp-page {
  /* ── Hero : avatar avec initiales (rond initiales au lieu d'icon)
     Variante par type pour différencier visuellement Navette vs Taxi.
     Les classes index utilisaient une icône fixe ; on bascule ici sur
     un avatar carré avec initiales et fond qui change selon le type. */
  /* ── Form layout ────────────────────────────────────────── */
  /* ── Champs ──────────────────────────────────────────────── */
  /* ── Switch (Actif/Inactif) custom ──────────────────────── */
  /* ── Sticky action bar ──────────────────────────────────── */
}
.gp-page .gp-hero-mark {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: background 300ms ease;
}
.gp-page .gp-hero-mark > span {
  position: relative;
  z-index: 1;
}
.gp-page .gp-hero-mark-navette {
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gp-page .gp-hero-mark-taxi {
  background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-900) 100%);
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.gp-page .gp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gp-page .gp-form-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gp-radius);
  padding: 22px 24px;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: gpRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--section-delay, 0ms);
  transition: border-color 200ms, box-shadow 200ms;
  /* Section taxi (variante visuelle pour la distinguer) */
}
.gp-page .gp-form-section:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.gp-page .gp-form-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--gp-radius) 0 0 var(--gp-radius);
  opacity: 0.85;
}
.gp-page .gp-form-section.gp-form-section-taxi::before {
  background: var(--neutral-700);
}
.gp-page .gp-form-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--neutral-200);
}
.gp-page .gp-form-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 2px;
}
.gp-form-section-taxi .gp-page .gp-form-section-num {
  color: var(--neutral-700);
  background: var(--neutral-100);
  border-color: var(--neutral-300);
}
.gp-page .gp-form-section-titles {
  flex: 1;
  min-width: 0;
}
.gp-page .gp-form-section-titles h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gp-page .gp-form-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.gp-page .gp-form-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.gp-form-section-taxi .gp-page .gp-form-section-titles h2 i {
  color: var(--neutral-700);
}
.gp-page .gp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .gp-page .gp-fields {
    grid-template-columns: 1fr;
  }
}
.gp-page .gp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gp-page .gp-field.full {
  grid-column: 1/-1;
}
.gp-page .gp-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gp-page .gp-field label i {
  font-size: 11px;
  color: var(--enedis-blue);
  width: 14px;
  text-align: center;
}
.gp-page .gp-req {
  color: var(--red-600);
  margin-left: 2px;
}
.gp-page .gp-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gp-page .gp-input::placeholder {
  color: var(--neutral-400);
}
.gp-page .gp-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.gp-page .gp-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gp-page select.gp-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
}
.gp-page .gp-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  font-family: inherit;
}
.gp-page .gp-form-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gp-page .gp-form-hint i {
  font-size: 10px;
  color: var(--neutral-400);
  margin-top: 2px;
  flex-shrink: 0;
}
.gp-page .gp-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms;
  user-select: none;
}
.gp-page .gp-switch:hover {
  background: #fff;
  border-color: var(--neutral-300);
}
.gp-page .gp-switch > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gp-page .gp-switch .gp-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--neutral-300);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 200ms;
}
.gp-page .gp-switch .gp-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gp-page .gp-switch:has(input:checked) {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.gp-page .gp-switch:has(input:checked) .gp-switch-track {
  background: var(--enedis-blue);
}
.gp-page .gp-switch:has(input:checked) .gp-switch-thumb {
  transform: translateX(18px);
}
.gp-page .gp-switch .gp-switch-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gp-page .gp-switch .gp-switch-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gp-page .gp-switch .gp-switch-label small {
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gp-page .gp-form-actions {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--neutral-200);
  border-radius: var(--gp-radius);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 600px) {
  .gp-page .gp-form-actions {
    grid-template-columns: 1fr 1fr;
  }
  .gp-page .gp-form-actions .gp-form-state {
    grid-column: 1/-1;
    order: -1;
    justify-content: center;
  }
}
.gp-page .gp-form-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--neutral-500);
  justify-content: center;
}
.gp-page .gp-form-state i {
  color: var(--green-600);
  font-size: 13px;
}
.gp-page .gp-form-save {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gp-page .gp-form-save:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}

/* ═══════════════════════════════════════════════════════════════
   GESTION — page formulaire restaurant (création / édition)
   Scope : .gr-page. 6 sections numérotées + chips multi-select +
   custom radios pour rattachement + équipements grid.
   Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gr-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --gr-radius: 14px;
  padding-bottom: 96px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── Form ───────────────────────────────────────────────── */
  /* ── Champs ──────────────────────────────────────────────── */
  /* ── Input avec suffixe (couv. / pers. / €) ─────────────── */
  /* ── Rattachement (3 radio cards) ──────────────────────── */
  /* ── Switch (Actif/Inactif) ─────────────────────────────── */
  /* ── Checks (Privatisation totale / partielle) ──────────── */
  /* ── Multi-select (chips) ───────────────────────────────── */
  /* ── Days (jours d'ouverture, 7 cases) ──────────────────── */
  /* ── Équipements grid ───────────────────────────────────── */
  /* ── Sticky footer ──────────────────────────────────────── */
}
.gr-page .gr-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gr-page .gr-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.gr-page .gr-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.gr-page .gr-crumb-link i {
  font-size: 11px;
}
.gr-page .gr-crumb-sep {
  color: var(--neutral-300);
}
.gr-page .gr-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.gr-page .gr-hero {
  position: relative;
  border-radius: var(--gr-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: grRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gr-page .gr-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gr-page .gr-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
@media (max-width: 720px) {
  .gr-page .gr-hero-inner {
    padding: 22px;
  }
}
.gr-page .gr-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gr-page .gr-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gr-page .gr-hero-meta {
  min-width: 0;
}
.gr-page .gr-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gr-page .gr-eyebrow i {
  font-size: 10px;
}
.gr-page .gr-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
  word-break: break-word;
}
.gr-page .gr-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 72ch;
}
.gr-page .gr-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gr-page .gr-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gr-radius);
  padding: 22px 24px;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: grRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--section-delay, 0ms);
  transition: border-color 200ms, box-shadow 200ms;
}
.gr-page .gr-section:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.gr-page .gr-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--gr-radius) 0 0 var(--gr-radius);
  opacity: 0.85;
}
.gr-page .gr-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--neutral-200);
}
.gr-page .gr-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 2px;
}
.gr-page .gr-section-titles {
  flex: 1;
  min-width: 0;
}
.gr-page .gr-section-titles h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gr-page .gr-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.gr-page .gr-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.gr-page .gr-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .gr-page .gr-fields {
    grid-template-columns: 1fr;
  }
}
.gr-page .gr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gr-page .gr-field.full {
  grid-column: 1/-1;
}
.gr-page .gr-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gr-page .gr-field label i {
  font-size: 11px;
  color: var(--enedis-blue);
  width: 14px;
  text-align: center;
}
.gr-page .gr-req {
  color: var(--red-600);
  margin-left: 2px;
}
.gr-page .gr-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gr-page .gr-input::placeholder {
  color: var(--neutral-400);
}
.gr-page .gr-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.gr-page .gr-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gr-page select.gr-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
}
.gr-page .gr-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  font-family: inherit;
}
.gr-page .gr-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.gr-page .gr-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gr-page .gr-hint i {
  font-size: 10px;
  color: var(--neutral-400);
  margin-top: 2px;
  flex-shrink: 0;
}
.gr-page .gr-input-suffix {
  position: relative;
}
.gr-page .gr-input-suffix > input {
  padding-right: 56px;
}
.gr-page .gr-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-500);
  pointer-events: none;
  font-family: inherit;
  letter-spacing: 0;
}
.gr-page .gr-ratt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .gr-page .gr-ratt-grid {
    grid-template-columns: 1fr;
  }
}
.gr-page .gr-ratt-card {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.gr-page .gr-ratt-card > input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gr-page .gr-ratt-card-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 12px;
  transition: all 180ms;
}
.gr-page .gr-ratt-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #fff;
  color: var(--neutral-500);
  border: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 180ms;
}
.gr-page .gr-ratt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gr-page .gr-ratt-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gr-page .gr-ratt-text small {
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gr-page .gr-ratt-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--neutral-200);
  color: var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  transition: all 180ms;
}
.gr-page .gr-ratt-card:hover .gr-ratt-card-inner {
  border-color: var(--enedis-blue-border);
  background: #fff;
}
.gr-page .gr-ratt-card:has(input:checked) .gr-ratt-card-inner {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 12%, transparent);
}
.gr-page .gr-ratt-card:has(input:checked) .gr-ratt-icon {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 4px 8px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.gr-page .gr-ratt-card:has(input:checked) .gr-ratt-check {
  background: var(--enedis-blue);
  color: #fff;
}
.gr-page .gr-ratt-block {
  margin-top: 6px;
  padding: 16px;
  background: var(--enedis-blue-soft);
  border: 1px dashed var(--enedis-blue-border);
  border-radius: 10px;
}
.gr-page .gr-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms;
  user-select: none;
}
.gr-page .gr-switch:hover {
  background: #fff;
  border-color: var(--neutral-300);
}
.gr-page .gr-switch > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gr-page .gr-switch .gr-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--neutral-300);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 200ms;
}
.gr-page .gr-switch .gr-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gr-page .gr-switch:has(input:checked) {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.gr-page .gr-switch:has(input:checked) .gr-switch-track {
  background: var(--enedis-blue);
}
.gr-page .gr-switch:has(input:checked) .gr-switch-thumb {
  transform: translateX(18px);
}
.gr-page .gr-switch .gr-switch-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gr-page .gr-switch .gr-switch-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gr-page .gr-switch .gr-switch-label small {
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gr-page .gr-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gr-page .gr-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  border-radius: 9px;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 220px;
  transition: all 160ms;
}
.gr-page .gr-check > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gr-page .gr-check .gr-check-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #fff;
  border: 1.5px solid var(--neutral-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  flex-shrink: 0;
  transition: all 160ms;
}
.gr-page .gr-check .gr-check-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gr-page .gr-check .gr-check-label i {
  color: var(--neutral-500);
  font-size: 11px;
}
.gr-page .gr-check:hover {
  border-color: var(--enedis-blue-border);
  background: var(--enedis-blue-soft);
}
.gr-page .gr-check:has(input:checked) {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
}
.gr-page .gr-check:has(input:checked) .gr-check-box {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
}
.gr-page .gr-check:has(input:checked) .gr-check-label {
  color: var(--enedis-blue-deep);
}
.gr-page .gr-check:has(input:checked) .gr-check-label i {
  color: var(--enedis-blue);
}
.gr-page .gr-multi {
  margin-top: 18px;
}
.gr-page .gr-multi:first-child {
  margin-top: 0;
}
.gr-page .gr-multi-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gr-page .gr-multi-label i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gr-page .gr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gr-page .gr-chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.gr-page .gr-chip > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gr-page .gr-chip > span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-700);
  transition: all 150ms;
}
.gr-page .gr-chip:hover > span {
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
}
.gr-page .gr-chip:has(input:checked) > span {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--enedis-blue) 50%, transparent);
}
.gr-page .gr-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  padding: 6px;
}
@media (max-width: 540px) {
  .gr-page .gr-days {
    grid-template-columns: repeat(4, 1fr);
  }
}
.gr-page .gr-day-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 6px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-500);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 160ms;
  user-select: none;
  position: relative;
}
.gr-page .gr-day-box > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gr-page .gr-day-box:hover {
  color: var(--neutral-900);
  background: rgba(0, 0, 0, 0.03);
}
.gr-page .gr-day-box:has(input:checked) {
  background: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--enedis-blue) 50%, transparent);
}
.gr-page .gr-equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.gr-page .gr-equip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.gr-page .gr-equip > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gr-page .gr-equip-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  transition: all 160ms;
}
.gr-page .gr-equip-box i {
  font-size: 14px;
  color: var(--neutral-400);
  width: 18px;
  text-align: center;
  transition: color 160ms;
}
.gr-page .gr-equip-box > span:not(.gr-suffix) {
  min-width: 0;
}
.gr-page .gr-equip:hover .gr-equip-box {
  border-color: var(--enedis-blue-border);
  background: var(--enedis-blue-soft);
  color: var(--neutral-900);
}
.gr-page .gr-equip:hover .gr-equip-box i {
  color: var(--enedis-blue);
}
.gr-page .gr-equip:has(input:checked) .gr-equip-box {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
  color: var(--enedis-blue-deep);
}
.gr-page .gr-equip:has(input:checked) .gr-equip-box i {
  color: var(--enedis-blue);
}
.gr-page .gr-actions {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--neutral-200);
  border-radius: var(--gr-radius);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 720px) {
  .gr-page .gr-actions {
    grid-template-columns: 1fr;
  }
}
.gr-page .gr-actions-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neutral-500);
}
.gr-page .gr-actions-hint i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.gr-page .gr-actions-buttons {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.gr-page .gr-actions-buttons form {
  display: inline;
  margin: 0;
}
.gr-page .gr-btn-deactivate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--red-200);
  color: var(--red-700);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms;
}
.gr-page .gr-btn-deactivate i {
  font-size: 11px;
}
.gr-page .gr-btn-deactivate:hover {
  background: var(--red-50);
  border-color: var(--red-600);
  color: var(--red-700);
}
.gr-page .gr-btn-save {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gr-page .gr-btn-save:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes grRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page liste des restaurants
   Étend le scope .gr-page (partagé avec le formulaire) avec :
   hero 3 colonnes, KPIs, toolbar + segments, grille de cartes.
   ═══════════════════════════════════════════════════════════════ */
.gr-page {
  /* ── Hero 3 colonnes (variante avec actions à droite) ──── */
  /* ── KPI strip ───────────────────────────────────────────── */
  /* ── Toolbar ─────────────────────────────────────────────── */
  /* ── Segments par type ───────────────────────────────────── */
  /* ── Grille de cartes ────────────────────────────────────── */
  /* — Card head — */
  /* — Status pill — */
  /* — Type bar (full-width tag) — */
  /* — Card meta (ville / capacité / prix) — */
  /* — Cuisines chips — */
  /* — Card footer — */
  /* ── Empty state ─────────────────────────────────────────── */
}
.gr-page .gr-hero-inner-3col {
  grid-template-columns: auto 1fr auto;
}
@media (max-width: 900px) {
  .gr-page .gr-hero-inner-3col {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .gr-page .gr-hero-inner-3col .gr-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
}
.gr-page .gr-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.gr-page .gr-cta {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gr-page .gr-cta:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.gr-page .gr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  opacity: 0;
  animation: grRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 900px) {
  .gr-page .gr-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gr-page .gr-stats {
    grid-template-columns: 1fr;
  }
}
.gr-page .gr-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gr-radius);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gr-page .gr-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  transform: translateY(-1px);
}
.gr-page .gr-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gr-page .gr-stat-body {
  min-width: 0;
}
.gr-page .gr-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.8px;
  line-height: 1;
}
.gr-page .gr-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 5px;
}
.gr-page .gr-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  animation: grRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
@media (max-width: 540px) {
  .gr-page .gr-toolbar {
    grid-template-columns: 1fr;
  }
}
.gr-page .gr-search {
  position: relative;
}
.gr-page .gr-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.gr-page .gr-search-input {
  width: 100%;
  padding: 11px 38px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gr-page .gr-search-input::placeholder {
  color: var(--neutral-400);
}
.gr-page .gr-search-input:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gr-page .gr-search-input:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gr-page .gr-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.gr-page .gr-search-clear:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}
.gr-page .gr-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1.5px solid var(--enedis-blue-border);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.gr-page .gr-btn-filter i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gr-page .gr-btn-filter:hover {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
}
.gr-page .gr-btn-filter:hover i {
  color: #fff;
}
.gr-page .gr-segments {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  opacity: 0;
  animation: grRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 180ms;
}
.gr-page .gr-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  transition: all 160ms;
}
.gr-page .gr-segment i {
  font-size: 11px;
  color: var(--neutral-400);
}
.gr-page .gr-segment:hover {
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
}
.gr-page .gr-segment:hover i {
  color: var(--enedis-blue);
}
.gr-page .gr-segment.is-active {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.gr-page .gr-segment.is-active i {
  color: #fff;
}
.gr-page .gr-segment.is-active .gr-segment-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.gr-page .gr-segment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: all 160ms;
}
.gr-page .gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  opacity: 0;
  animation: grRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 240ms;
}
.gr-page .gr-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gr-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
  position: relative;
}
.gr-page .gr-card:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
  transform: translateY(-2px);
}
.gr-page .gr-card:hover .gr-card-mark {
  transform: scale(1.05) rotate(-3deg);
}
.gr-page .gr-card:hover .gr-card-cta {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
}
.gr-page .gr-card:hover .gr-card-arrow {
  color: var(--enedis-blue);
  transform: translateX(2px);
}
.gr-page .gr-card.is-inactive {
  opacity: 0.7;
  background: var(--neutral-50);
}
.gr-page .gr-card.is-inactive .gr-card-mark {
  background: linear-gradient(135deg, var(--neutral-500), var(--neutral-700));
}
.gr-page .gr-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 0;
}
.gr-page .gr-card-mark {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 12px -4px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1.5px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gr-page .gr-card-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gr-page .gr-card-mark > span {
  position: relative;
  z-index: 1;
}
.gr-page .gr-card-id {
  flex: 1;
  min-width: 0;
}
.gr-page .gr-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-page .gr-card-ratt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
}
.gr-page .gr-card-ratt i {
  font-size: 10px;
  color: var(--enedis-blue);
  flex-shrink: 0;
}
.gr-page .gr-card-ratt span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-page .gr-card-tags {
  flex-shrink: 0;
}
.gr-page .gr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.gr-page .gr-status-pill.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.gr-page .gr-status-pill.is-ok .gr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: grPulse 2s ease-in-out infinite;
}
.gr-page .gr-status-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.gr-page .gr-status-pill.is-off .gr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.gr-page .gr-card-typebar {
  padding: 12px 18px 0;
}
.gr-page .gr-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  /* 3 variantes — toutes en bleu Enedis avec nuances de fond */
}
.gr-page .gr-type-tag i {
  font-size: 10px;
}
.gr-page .gr-type-tag.is-hotel {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.gr-page .gr-type-tag.is-hotel i {
  color: var(--enedis-blue);
}
.gr-page .gr-type-tag.is-campus {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border-color: var(--neutral-300);
}
.gr-page .gr-type-tag.is-campus i {
  color: var(--neutral-600);
}
.gr-page .gr-type-tag.is-partenaire {
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, #fff 100%);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
  border-style: dashed;
}
.gr-page .gr-type-tag.is-partenaire i {
  color: var(--enedis-blue);
}
.gr-page .gr-card-meta {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gr-page .gr-card-meta li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--neutral-700);
}
.gr-page .gr-card-meta li i {
  width: 14px;
  font-size: 11px;
  color: var(--neutral-400);
  flex-shrink: 0;
}
.gr-page .gr-card-meta li strong {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
}
.gr-page .gr-card-meta li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-page .gr-card-cuisines {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 18px 0;
}
.gr-page .gr-cuisine-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--neutral-50);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  font-size: 11px;
  font-weight: 600;
}
.gr-page .gr-cuisine-chip.is-more {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
  font-family: var(--font-mono);
}
.gr-page .gr-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  margin-top: auto;
}
.gr-page .gr-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--neutral-50);
  transition: all 200ms;
}
.gr-page .gr-card-cta i {
  font-size: 11px;
}
.gr-page .gr-card-arrow {
  font-size: 11px;
  color: var(--neutral-400);
  transition: all 200ms;
}
.gr-page .gr-empty {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: var(--gr-radius);
}
.gr-page .gr-empty h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gr-page .gr-empty p {
  margin: 0 auto 20px;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 50ch;
}
.gr-page .gr-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes grPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page liste des hôtels partenaires
   Scope : .gh-page. Hero + KPIs + toolbar + segments +
   grille de cartes avec photo. Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gh-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --gh-radius: 14px;
  padding-bottom: 64px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── KPI strip ───────────────────────────────────────────── */
  /* ── Toolbar ─────────────────────────────────────────────── */
  /* ── Segments ────────────────────────────────────────────── */
  /* ── Grid ────────────────────────────────────────────────── */
  /* — Card image — */
  /* — Card body — */
  /* — Méta (commission, chambres, priorité) — */
  /* — Card footer — */
  /* ── Empty state ─────────────────────────────────────────── */
}
.gh-page .gh-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gh-page .gh-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.gh-page .gh-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.gh-page .gh-crumb-link i {
  font-size: 11px;
}
.gh-page .gh-crumb-sep {
  color: var(--neutral-300);
}
.gh-page .gh-crumb-step {
  color: var(--neutral-600);
}
.gh-page .gh-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.gh-page .gh-hero {
  position: relative;
  border-radius: var(--gh-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: ghRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gh-page .gh-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gh-page .gh-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 900px) {
  .gh-page .gh-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 22px;
  }
  .gh-page .gh-hero-inner .gh-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
}
.gh-page .gh-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gh-page .gh-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gh-page .gh-hero-meta {
  min-width: 0;
}
.gh-page .gh-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gh-page .gh-eyebrow i {
  font-size: 10px;
}
.gh-page .gh-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.gh-page .gh-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 64ch;
}
.gh-page .gh-cta {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gh-page .gh-cta:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.gh-page .gh-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  opacity: 0;
  animation: ghRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 900px) {
  .gh-page .gh-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gh-page .gh-stats {
    grid-template-columns: 1fr;
  }
}
.gh-page .gh-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gh-radius);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gh-page .gh-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  transform: translateY(-1px);
}
.gh-page .gh-stat.is-warning {
  background: #FFFBF5;
  border-color: var(--amber-200);
}
.gh-page .gh-stat.is-warning .gh-stat-icon {
  background: var(--amber-50);
  color: var(--amber-700);
}
.gh-page .gh-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gh-page .gh-stat-body {
  min-width: 0;
}
.gh-page .gh-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.8px;
  line-height: 1;
}
.gh-page .gh-stat-value small {
  font-size: 12px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-left: 2px;
}
.gh-page .gh-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 5px;
}
.gh-page .gh-toolbar {
  display: grid;
  grid-template-columns: 1fr 240px auto;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  animation: ghRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
@media (max-width: 900px) {
  .gh-page .gh-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .gh-page .gh-toolbar .gh-search {
    grid-column: 1/-1;
  }
}
@media (max-width: 540px) {
  .gh-page .gh-toolbar {
    grid-template-columns: 1fr;
  }
}
.gh-page .gh-search {
  position: relative;
}
.gh-page .gh-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.gh-page .gh-search-input {
  width: 100%;
  padding: 11px 38px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gh-page .gh-search-input::placeholder {
  color: var(--neutral-400);
}
.gh-page .gh-search-input:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gh-page .gh-search-input:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gh-page .gh-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.gh-page .gh-search-clear:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}
.gh-page .gh-filter-cell {
  min-width: 0;
}
.gh-page .gh-select {
  width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--neutral-900);
  cursor: pointer;
  transition: all 160ms;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  appearance: none;
  -webkit-appearance: none;
}
.gh-page .gh-select:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gh-page .gh-select:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gh-page .gh-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1.5px solid var(--enedis-blue-border);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.gh-page .gh-btn-filter i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gh-page .gh-btn-filter:hover {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
}
.gh-page .gh-btn-filter:hover i {
  color: #fff;
}
.gh-page .gh-segments {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  opacity: 0;
  animation: ghRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 180ms;
}
.gh-page .gh-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  transition: all 160ms;
}
.gh-page .gh-segment i {
  font-size: 11px;
  color: var(--neutral-400);
}
.gh-page .gh-segment:hover {
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
}
.gh-page .gh-segment:hover i {
  color: var(--enedis-blue);
}
.gh-page .gh-segment.is-active {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.gh-page .gh-segment.is-active i {
  color: #fff;
}
.gh-page .gh-segment.is-active .gh-segment-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.gh-page .gh-segment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: all 160ms;
}
.gh-page .gh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  opacity: 0;
  animation: ghRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 240ms;
}
.gh-page .gh-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gh-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gh-page .gh-card:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--enedis-blue) 30%, transparent);
  transform: translateY(-3px);
}
.gh-page .gh-card:hover .gh-card-img img {
  transform: scale(1.05);
}
.gh-page .gh-card:hover .gh-card-cta {
  background: var(--enedis-blue);
  color: #fff;
}
.gh-page .gh-card:hover .gh-card-arrow {
  color: var(--enedis-blue);
  transform: translateX(2px);
}
.gh-page .gh-card.is-inactive {
  opacity: 0.7;
}
.gh-page .gh-card.is-inactive .gh-card-img img {
  filter: grayscale(0.6);
}
.gh-page .gh-card-img {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, var(--neutral-100) 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--neutral-100);
}
.gh-page .gh-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
}
.gh-page .gh-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--enedis-blue);
  font-size: 56px;
  opacity: 0.35;
  background: radial-gradient(circle at 50% 50%, var(--enedis-blue-soft) 0%, transparent 70%);
}
.gh-page .gh-card-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.gh-page .gh-card-overlay > * {
  pointer-events: auto;
}
.gh-page .gh-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gh-page .gh-status-pill.is-ok {
  background: rgba(220, 252, 231, 0.92);
  color: var(--green-700);
  border: 1px solid color-mix(in srgb, var(--green-200) 80%, transparent);
}
.gh-page .gh-status-pill.is-ok .gh-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: ghPulse 2s ease-in-out infinite;
}
.gh-page .gh-status-pill.is-off {
  background: rgba(255, 255, 255, 0.92);
  color: var(--neutral-600);
  border: 1px solid var(--neutral-200);
}
.gh-page .gh-status-pill.is-off .gh-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.gh-page .gh-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #FBBF24;
  font-size: 10.5px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gh-page .gh-rating i {
  font-size: 9px;
}
.gh-page .gh-no-photo-tag {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--neutral-600);
  border: 1px solid var(--neutral-200);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gh-page .gh-no-photo-tag i {
  font-size: 10px;
  color: var(--neutral-400);
}
.gh-page .gh-card-body {
  padding: 16px 18px 0;
  flex: 1;
}
.gh-page .gh-card-name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.gh-page .gh-card-loc {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--neutral-500);
  margin-bottom: 10px;
  line-height: 1.45;
}
.gh-page .gh-card-loc i {
  font-size: 10px;
  color: var(--enedis-blue);
  margin-top: 4px;
  flex-shrink: 0;
}
.gh-page .gh-card-loc span {
  min-width: 0;
}
.gh-page .gh-campus-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1px solid var(--enedis-blue-border);
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 12px;
}
.gh-page .gh-campus-tag i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.gh-page .gh-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 1px;
  background: var(--neutral-100);
  border-top: 1px solid var(--neutral-100);
  border-bottom: 1px solid var(--neutral-100);
  margin: 12px -18px 0;
}
.gh-page .gh-card-meta li {
  background: #fff;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.gh-page .gh-card-meta li i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gh-page .gh-card-meta li strong {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.3px;
}
.gh-page .gh-card-meta li small {
  font-size: 10px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gh-page .gh-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--neutral-50);
}
.gh-page .gh-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  padding: 6px 12px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  transition: all 200ms;
}
.gh-page .gh-card-cta i {
  font-size: 11px;
}
.gh-page .gh-card-arrow {
  font-size: 11px;
  color: var(--neutral-400);
  transition: all 200ms;
}
.gh-page .gh-empty {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: var(--gh-radius);
}
.gh-page .gh-empty h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gh-page .gh-empty p {
  margin: 0 auto 20px;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 50ch;
}
.gh-page .gh-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes ghRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ghPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page formulaire hôtel (création uniquement)
   Scope : .gh-new-page. 4 sections numérotées + switch toggle +
   sticky footer. Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gh-new-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --ghn-radius: 14px;
  padding-bottom: 96px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── Form ────────────────────────────────────────────────── */
  /* ── Champs ──────────────────────────────────────────────── */
  /* ── Input avec suffixe ────────────────────────────────── */
  /* ── Switch (Actif) ─────────────────────────────────────── */
  /* ── Sticky footer ──────────────────────────────────────── */
}
.gh-new-page .ghn-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gh-new-page .ghn-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.gh-new-page .ghn-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.gh-new-page .ghn-crumb-link i {
  font-size: 11px;
}
.gh-new-page .ghn-crumb-sep {
  color: var(--neutral-300);
}
.gh-new-page .ghn-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.gh-new-page .ghn-hero {
  position: relative;
  border-radius: var(--ghn-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: ghnRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gh-new-page .ghn-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gh-new-page .ghn-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
@media (max-width: 720px) {
  .gh-new-page .ghn-hero-inner {
    padding: 22px;
  }
}
.gh-new-page .ghn-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gh-new-page .ghn-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gh-new-page .ghn-hero-meta {
  min-width: 0;
}
.gh-new-page .ghn-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gh-new-page .ghn-eyebrow i {
  font-size: 10px;
}
.gh-new-page .ghn-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
  word-break: break-word;
}
.gh-new-page .ghn-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 72ch;
}
.gh-new-page .ghn-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gh-new-page .ghn-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ghn-radius);
  padding: 22px 24px;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: ghnRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--section-delay, 0ms);
  transition: border-color 200ms, box-shadow 200ms;
}
.gh-new-page .ghn-section:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.gh-new-page .ghn-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--ghn-radius) 0 0 var(--ghn-radius);
  opacity: 0.85;
}
.gh-new-page .ghn-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--neutral-200);
}
.gh-new-page .ghn-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 2px;
}
.gh-new-page .ghn-section-titles {
  flex: 1;
  min-width: 0;
}
.gh-new-page .ghn-section-titles h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gh-new-page .ghn-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.gh-new-page .ghn-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.gh-new-page .ghn-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .gh-new-page .ghn-fields {
    grid-template-columns: 1fr;
  }
}
.gh-new-page .ghn-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gh-new-page .ghn-field.full {
  grid-column: 1/-1;
}
.gh-new-page .ghn-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gh-new-page .ghn-field label i {
  font-size: 11px;
  color: var(--enedis-blue);
  width: 14px;
  text-align: center;
}
.gh-new-page .ghn-req {
  color: var(--red-600);
  margin-left: 2px;
}
.gh-new-page .ghn-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gh-new-page .ghn-input::placeholder {
  color: var(--neutral-400);
}
.gh-new-page .ghn-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.gh-new-page .ghn-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gh-new-page select.ghn-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
}
.gh-new-page .ghn-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.gh-new-page .ghn-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gh-new-page .ghn-hint i {
  font-size: 10px;
  color: var(--neutral-400);
  margin-top: 2px;
  flex-shrink: 0;
}
.gh-new-page .ghn-input-suffix {
  position: relative;
}
.gh-new-page .ghn-input-suffix > input {
  padding-right: 44px;
}
.gh-new-page .ghn-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-500);
  pointer-events: none;
  font-family: var(--font-mono);
}
.gh-new-page .ghn-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms;
  user-select: none;
  max-width: 480px;
}
.gh-new-page .ghn-switch:hover {
  background: #fff;
  border-color: var(--neutral-300);
}
.gh-new-page .ghn-switch > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gh-new-page .ghn-switch .ghn-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--neutral-300);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 200ms;
}
.gh-new-page .ghn-switch .ghn-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gh-new-page .ghn-switch:has(input:checked) {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.gh-new-page .ghn-switch:has(input:checked) .ghn-switch-track {
  background: var(--enedis-blue);
}
.gh-new-page .ghn-switch:has(input:checked) .ghn-switch-thumb {
  transform: translateX(18px);
}
.gh-new-page .ghn-switch .ghn-switch-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gh-new-page .ghn-switch .ghn-switch-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gh-new-page .ghn-switch .ghn-switch-label small {
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gh-new-page .ghn-actions {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--neutral-200);
  border-radius: var(--ghn-radius);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 600px) {
  .gh-new-page .ghn-actions {
    grid-template-columns: 1fr;
  }
}
.gh-new-page .ghn-actions-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neutral-500);
}
.gh-new-page .ghn-actions-hint i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.gh-new-page .ghn-actions-buttons {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.gh-new-page .ghn-btn-save {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gh-new-page .ghn-btn-save:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes ghnRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page édition hôtel (multi-onglets)
   Scope : .ghe-page. Hero avec photo + tabs nav + 5-6 onglets
   (Infos, Photos, Conditions, Catégories, Contingents, Restau).
   Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.ghe-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --ghe-radius: 14px;
  padding-bottom: 96px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero (photo + meta + stats) ─────────────────────────── */
  /* ── Tabs nav ────────────────────────────────────────────── */
  /* ── Section générique ──────────────────────────────────── */
  /* ── Form ───────────────────────────────────────────────── */
  /* ── Switch ──────────────────────────────────────────────── */
  /* ── Sticky actions ─────────────────────────────────────── */
  /* ── Danger zone ─────────────────────────────────────────── */
  /* ═══ ONGLET PHOTOS ═══ */
  /* ═══ ONGLET CONDITIONS ═══ */
  /* — Add new rule (details/summary) — */
  /* Override pour les form-control utilisés dans le partial _condition_form */
  /* ═══ ONGLET CATÉGORIES (table) ═══ */
  /* — Add catégorie — */
  /* ═══ ONGLET CONTINGENTS (calendrier) ═══ */
  /* ── Filtre par catégorie ─────────────────────────────── */
  /* ══════════════════════════════════════════════════════════
     CELLULES JOUR — refonte multi-catégories
     Chaque cellule contient :
     - un header (numéro + jour court + total dispo en pill)
     - un body avec une ligne par catégorie (code, dispo, prix
       + barre de remplissage en fond)
     ══════════════════════════════════════════════════════════ */
  /* ── Ligne catégorie ─────────────────────────────────── */
  /* ── Modal : badges catégories ─────────────────────────── */
  /* ── Modal contingent (calendrier) ──────────────────────── */
  /* — Panel modification massive — */
  /* ── Days picker (massif) ───────────────────────────────── */
  /* ── Empty state ─────────────────────────────────────────── */
  /* ── Restauration panel (cascade onto existing partial) ── */
}
.ghe-page .ghe-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ghe-page .ghe-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.ghe-page .ghe-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.ghe-page .ghe-crumb-link i {
  font-size: 11px;
}
.ghe-page .ghe-crumb-sep {
  color: var(--neutral-300);
}
.ghe-page .ghe-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.ghe-page .ghe-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ghe-radius);
  overflow: hidden;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 280px 1fr;
  opacity: 0;
  animation: gheRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@media (max-width: 900px) {
  .ghe-page .ghe-hero {
    grid-template-columns: 1fr;
  }
}
.ghe-page .ghe-hero-img {
  position: relative;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, var(--neutral-100) 100%);
  overflow: hidden;
}
.ghe-page .ghe-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .ghe-page .ghe-hero-img {
    min-height: 160px;
  }
}
.ghe-page .ghe-hero-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--enedis-blue);
  font-size: 64px;
  opacity: 0.3;
  background: radial-gradient(circle at 50% 50%, var(--enedis-blue-soft) 0%, transparent 70%);
}
.ghe-page .ghe-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, 0.5) 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .ghe-page .ghe-hero-img-overlay {
    display: none;
  }
}
.ghe-page .ghe-hero-body {
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .ghe-page .ghe-hero-body {
    grid-template-columns: 1fr;
  }
}
.ghe-page .ghe-hero-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ghe-page .ghe-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin: 0;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
}
.ghe-page .ghe-eyebrow i {
  font-size: 10px;
}
.ghe-page .ghe-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ghe-page .ghe-pills {
  margin-top: 4px;
}
.ghe-page .ghe-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ghe-page .ghe-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.ghe-page .ghe-status-pill.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.ghe-page .ghe-status-pill.is-ok .ghe-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: ghePulse 2s ease-in-out infinite;
}
.ghe-page .ghe-status-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.ghe-page .ghe-status-pill.is-off .ghe-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral-400);
}
.ghe-page .ghe-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ghe-page .ghe-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.ghe-page .ghe-pill i {
  font-size: 10px;
  color: var(--neutral-500);
}
.ghe-page .ghe-pill.is-key {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.ghe-page .ghe-pill.is-key i {
  color: var(--enedis-blue);
}
.ghe-page .ghe-pill.is-rating {
  background: rgba(0, 0, 0, 0.7);
  color: #FBBF24;
  border-color: transparent;
}
.ghe-page .ghe-pill.is-rating i {
  color: #FBBF24;
  font-size: 9px;
}
.ghe-page .ghe-hero-stats {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .ghe-page .ghe-hero-stats {
    border-top: 1px solid var(--neutral-100);
    padding-top: 16px;
    justify-content: flex-start;
  }
}
.ghe-page .ghe-hstat {
  text-align: center;
  padding: 0 8px;
}
.ghe-page .ghe-hstat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.6px;
  line-height: 1;
}
.ghe-page .ghe-hstat-value small {
  font-size: 13px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-left: 1px;
}
.ghe-page .ghe-hstat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--neutral-500);
  margin-top: 5px;
}
.ghe-page .ghe-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ghe-radius);
  overflow-x: auto;
  opacity: 0;
  animation: gheRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
  scrollbar-width: thin;
}
.ghe-page .ghe-tabs::-webkit-scrollbar {
  height: 6px;
}
.ghe-page .ghe-tabs::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
.ghe-page .ghe-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--neutral-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 160ms;
}
.ghe-page .ghe-tab i {
  font-size: 12px;
  color: var(--neutral-400);
}
.ghe-page .ghe-tab:hover:not(.is-active) {
  background: var(--neutral-50);
  color: var(--neutral-900);
}
.ghe-page .ghe-tab:hover:not(.is-active) i {
  color: var(--enedis-blue);
}
.ghe-page .ghe-tab.is-active {
  background: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.ghe-page .ghe-tab.is-active i {
  color: #fff;
}
.ghe-page .ghe-tab.is-active .ghe-tab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ghe-page .ghe-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: all 160ms;
}
.ghe-page .ghe-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ghe-radius);
  padding: 22px 24px;
  position: relative;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
  animation: gheRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--section-delay, 0ms);
  transition: border-color 200ms, box-shadow 200ms;
}
.ghe-page .ghe-section:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.ghe-page .ghe-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--ghe-radius) 0 0 var(--ghe-radius);
  opacity: 0.85;
}
.ghe-page .ghe-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--neutral-200);
}
.ghe-page .ghe-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 2px;
  min-width: 32px;
  text-align: center;
}
.ghe-page .ghe-section-num i {
  font-size: 11px;
}
.ghe-page .ghe-section-titles {
  flex: 1;
  min-width: 0;
}
.ghe-page .ghe-section-titles h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ghe-page .ghe-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.ghe-page .ghe-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.ghe-page .ghe-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ghe-page .ghe-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .ghe-page .ghe-fields {
    grid-template-columns: 1fr;
  }
}
.ghe-page .ghe-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ghe-page .ghe-field.full {
  grid-column: 1/-1;
}
.ghe-page .ghe-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ghe-page .ghe-field label i {
  font-size: 11px;
  color: var(--enedis-blue);
  width: 14px;
  text-align: center;
}
.ghe-page .ghe-req {
  color: var(--red-600);
  margin-left: 2px;
}
.ghe-page .ghe-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.ghe-page .ghe-input::placeholder {
  color: var(--neutral-400);
}
.ghe-page .ghe-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.ghe-page .ghe-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.ghe-page select.ghe-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
}
.ghe-page .ghe-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.ghe-page .ghe-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.ghe-page .ghe-hint i {
  font-size: 10px;
  color: var(--neutral-400);
  margin-top: 2px;
  flex-shrink: 0;
}
.ghe-page .ghe-input-suffix {
  position: relative;
}
.ghe-page .ghe-input-suffix > input {
  padding-right: 44px;
}
.ghe-page .ghe-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  pointer-events: none;
}
.ghe-page .ghe-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms;
  user-select: none;
}
.ghe-page .ghe-switch:hover {
  background: #fff;
  border-color: var(--neutral-300);
}
.ghe-page .ghe-switch > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ghe-page .ghe-switch .ghe-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--neutral-300);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 200ms;
}
.ghe-page .ghe-switch .ghe-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ghe-page .ghe-switch:has(input:checked) {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.ghe-page .ghe-switch:has(input:checked) .ghe-switch-track {
  background: var(--enedis-blue);
}
.ghe-page .ghe-switch:has(input:checked) .ghe-switch-thumb {
  transform: translateX(18px);
}
.ghe-page .ghe-switch .ghe-switch-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ghe-page .ghe-switch .ghe-switch-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ghe-page .ghe-switch .ghe-switch-label strong i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.ghe-page .ghe-switch .ghe-switch-label small {
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.ghe-page .ghe-actions {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--neutral-200);
  border-radius: var(--ghe-radius);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
}
.ghe-page .ghe-actions-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neutral-500);
}
.ghe-page .ghe-actions-hint i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.ghe-page .ghe-actions-buttons {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ghe-page .ghe-btn-save {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.ghe-page .ghe-btn-save:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.ghe-page .ghe-danger {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: var(--ghe-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ghe-page .ghe-danger strong {
  display: block;
  font-size: 14px;
  color: var(--red-700);
  margin-bottom: 4px;
}
.ghe-page .ghe-danger p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.4;
}
.ghe-page .ghe-danger-info {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.ghe-page .ghe-danger-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  color: var(--red-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.ghe-page .ghe-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1.5px solid var(--red-300, #FCA5A5);
  background: #fff;
  color: var(--red-700);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms;
}
.ghe-page .ghe-btn-danger:hover {
  background: var(--red-600);
  color: #fff;
  border-color: var(--red-600);
}
.ghe-page .ghe-photo-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ghe-page .ghe-photo-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px;
  background: var(--enedis-blue-soft);
  border: 2px dashed var(--enedis-blue-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 200ms;
}
.ghe-page .ghe-photo-zone:hover:not(.is-full) {
  background: color-mix(in srgb, var(--enedis-blue-soft) 80%, var(--enedis-blue));
  border-color: var(--enedis-blue);
}
.ghe-page .ghe-photo-zone:hover:not(.is-full) .ghe-photo-zone-icon {
  transform: scale(1.05);
  color: var(--enedis-blue-deep);
}
.ghe-page .ghe-photo-zone.is-full {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--green-50);
  border-color: var(--green-200);
}
.ghe-page .ghe-photo-zone.is-full .ghe-photo-zone-icon {
  color: var(--green-600);
}
.ghe-page .ghe-photo-zone-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 4px;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
  transition: transform 200ms;
}
.ghe-page .ghe-photo-zone-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
}
.ghe-page .ghe-photo-zone-sub {
  font-size: 12px;
  color: var(--neutral-500);
  margin: 0;
}
.ghe-page .ghe-photo-zone-counter {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--enedis-blue-deep);
  font-family: var(--font-mono);
}
.ghe-page .ghe-photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.ghe-page .ghe-photo-form-actions {
  display: flex;
  justify-content: flex-end;
}
.ghe-page .ghe-photos-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.ghe-page .ghe-photo-tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
}
.ghe-page .ghe-photo-tile.is-principale {
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enedis-blue) 18%, transparent);
}
.ghe-page .ghe-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms;
}
.ghe-page .ghe-photo-tile:hover img {
  transform: scale(1.05);
}
.ghe-page .ghe-photo-tile:hover .ghe-photo-actions {
  opacity: 1;
}
.ghe-page .ghe-photo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--enedis-blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ghe-page .ghe-photo-badge i {
  font-size: 9px;
}
.ghe-page .ghe-photo-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 200ms;
}
.ghe-page .ghe-photo-actions form {
  margin: 0;
}
.ghe-page .ghe-photo-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--neutral-700);
  cursor: pointer;
  font-size: 11.5px;
  backdrop-filter: blur(6px);
  transition: all 150ms;
}
.ghe-page .ghe-photo-btn:hover {
  background: var(--enedis-blue);
  color: #fff;
}
.ghe-page .ghe-photo-btn.is-danger:hover {
  background: var(--red-600);
  color: #fff;
}
.ghe-page .ghe-cond-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ghe-page .ghe-cond {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 200ms;
}
.ghe-page .ghe-cond:hover {
  border-color: var(--enedis-blue-border);
}
.ghe-page .ghe-cond.is-inactive {
  opacity: 0.7;
}
.ghe-page .ghe-cond.is-exception {
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber-50) 60%, #fff) 0%, #fff 100%);
  border-color: var(--amber-200);
}
.ghe-page .ghe-cond-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}
.ghe-page .ghe-cond-info {
  flex: 1;
  min-width: 0;
}
.ghe-page .ghe-cond-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ghe-page .ghe-cond-title strong {
  font-size: 14px;
  color: var(--neutral-900);
  font-weight: 700;
}
.ghe-page .ghe-cond-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.ghe-page .ghe-cond-pill i {
  font-size: 9px;
}
.ghe-page .ghe-cond-pill.is-standard {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.ghe-page .ghe-cond-pill.is-exception {
  background: var(--amber-50);
  color: var(--amber-800);
  border-color: var(--amber-200);
}
.ghe-page .ghe-cond-pill.is-off {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.ghe-page .ghe-cond-dates {
  font-size: 11.5px;
  color: var(--neutral-700);
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ghe-page .ghe-cond-dates i {
  font-size: 9px;
  opacity: 0.6;
}
.ghe-page .ghe-cond-rule {
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ghe-page .ghe-cond-rule strong {
  font-family: var(--font-mono);
  color: var(--neutral-900);
  font-weight: 700;
}
.ghe-page .ghe-cond-rule-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ghe-page .ghe-cond-rule-step.is-partial strong {
  color: var(--amber-700);
}
.ghe-page .ghe-cond-rule-step.is-full strong {
  color: var(--red-700);
}
.ghe-page .ghe-cond-rule-sep {
  color: var(--neutral-300);
}
.ghe-page .ghe-cond-rule-sep i {
  font-size: 4px;
}
.ghe-page .ghe-cond-comment {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fff;
  border-left: 3px solid var(--enedis-blue);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--neutral-700);
  line-height: 1.5;
}
.ghe-page .ghe-cond-comment i {
  color: var(--enedis-blue);
  margin-right: 5px;
}
.ghe-page .ghe-cond-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ghe-page .ghe-cond-edit {
  padding: 16px 18px;
  background: #fff;
  border-top: 1px solid var(--neutral-100);
}
.ghe-page .ghe-cond-add {
  margin-top: 14px;
}
.ghe-page .ghe-cond-add > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--enedis-blue-soft);
  border: 1.5px dashed var(--enedis-blue-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--enedis-blue-deep);
  transition: all 150ms;
}
.ghe-page .ghe-cond-add > summary::-webkit-details-marker {
  display: none;
}
.ghe-page .ghe-cond-add > summary:hover {
  background: color-mix(in srgb, var(--enedis-blue-soft) 80%, var(--enedis-blue));
  border-style: solid;
}
.ghe-page .ghe-cond-add > summary > i:first-child {
  font-size: 12px;
  color: var(--enedis-blue);
}
.ghe-page .ghe-cond-add .ghe-cond-add-chevron {
  margin-left: auto;
  font-size: 10px;
  transition: transform 200ms;
}
.ghe-page .ghe-cond-add[open] > summary {
  background: var(--enedis-blue);
  color: #fff;
  border-style: solid;
}
.ghe-page .ghe-cond-add[open] > summary > i:first-child,
.ghe-page .ghe-cond-add[open] > summary > .ghe-cond-add-chevron {
  color: #fff;
}
.ghe-page .ghe-cond-add[open] > summary .ghe-cond-add-chevron {
  transform: rotate(180deg);
}
.ghe-page .ghe-cond-add-form {
  margin-top: 10px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--enedis-blue-border);
  border-radius: 10px;
}
.ghe-page .ghe-cond-edit .form-control, .ghe-page .ghe-cond-add-form .form-control {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.ghe-page .ghe-cond-edit .form-control:hover:not(:focus), .ghe-page .ghe-cond-add-form .form-control:hover:not(:focus) {
  border-color: var(--neutral-300);
  background: #fff;
}
.ghe-page .ghe-cond-edit .form-control:focus, .ghe-page .ghe-cond-add-form .form-control:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.ghe-page .ghe-cond-edit .form-label, .ghe-page .ghe-cond-add-form .form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: block;
  margin-bottom: 5px;
}
.ghe-page .ghe-cond-edit .btn, .ghe-page .ghe-cond-add-form .btn {
  padding: 9px 16px;
}
.ghe-page .ghe-cond-edit .btn-primary, .ghe-page .ghe-cond-add-form .btn-primary {
  background: var(--enedis-blue);
}
.ghe-page .ghe-cond-edit .btn-primary:hover, .ghe-page .ghe-cond-add-form .btn-primary:hover {
  background: var(--enedis-blue-deep);
}
.ghe-page .ghe-table-wrap {
  overflow-x: auto;
}
.ghe-page .ghe-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.ghe-page .ghe-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  border-top: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.ghe-page .ghe-table .ghe-th-actions {
  text-align: right;
  width: 110px;
}
.ghe-page .ghe-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
  font-size: 13px;
}
.ghe-page .ghe-table tbody tr:last-child td {
  border-bottom: none;
}
.ghe-page .ghe-table tbody tr:hover {
  background: rgba(20, 50, 250, 0.02);
}
.ghe-page .ghe-table tbody tr.is-inactive {
  opacity: 0.65;
}
.ghe-page .ghe-cell-strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.ghe-page .ghe-cell-muted {
  color: var(--neutral-500);
  font-size: 12.5px;
}
.ghe-page .ghe-cap-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1px solid var(--enedis-blue-border);
  font-size: 12px;
  font-weight: 600;
}
.ghe-page .ghe-cap-pill i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.ghe-page .ghe-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.ghe-page .ghe-cell-actions form {
  display: inline;
  margin: 0;
}
.ghe-page .ghe-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 11.5px;
  margin-left: 4px;
  transition: all 150ms;
}
.ghe-page .ghe-act:hover {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-color: var(--enedis-blue-border);
}
.ghe-page .ghe-act.ghe-act-danger:hover {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.ghe-page .ghe-act.ghe-act-warn:hover {
  background: var(--amber-50);
  color: var(--amber-700);
  border-color: var(--amber-200);
}
.ghe-page .ghe-act.ghe-act-ok:hover {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.ghe-page .ghe-cat-add {
  background: var(--enedis-blue-soft);
  border: 1.5px dashed var(--enedis-blue-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.ghe-page .ghe-cat-add-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--enedis-blue-deep);
  margin-bottom: 12px;
}
.ghe-page .ghe-cat-add-head i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.ghe-page .ghe-cat-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
@media (max-width: 720px) {
  .ghe-page .ghe-cat-add-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ghe-page .ghe-cat-add-grid .ghe-cat-add-submit {
    grid-column: 1/-1;
  }
}
@media (max-width: 480px) {
  .ghe-page .ghe-cat-add-grid {
    grid-template-columns: 1fr;
  }
}
.ghe-page .ghe-cat-add-submit {
  white-space: nowrap;
}
.ghe-page .ghe-cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ghe-page .ghe-btn-mass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1.5px solid var(--enedis-blue-border);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms;
}
.ghe-page .ghe-btn-mass i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.ghe-page .ghe-btn-mass:hover {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
}
.ghe-page .ghe-btn-mass:hover i {
  color: #fff;
}
.ghe-page .ghe-cal-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  color: var(--neutral-600);
  flex-wrap: wrap;
}
.ghe-page .ghe-lg {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
}
.ghe-page .ghe-lg.ghe-lg-green {
  background: var(--green-100);
  border: 1px solid var(--green-200);
}
.ghe-page .ghe-lg.ghe-lg-amber {
  background: var(--amber-100);
  border: 1px solid var(--amber-200);
}
.ghe-page .ghe-lg.ghe-lg-red {
  background: var(--red-100);
  border: 1px solid var(--red-200);
}
.ghe-page .ghe-lg.ghe-lg-empty {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
}
.ghe-page .ghe-cal {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  overflow: hidden;
}
.ghe-page .ghe-cal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-100);
}
.ghe-page .ghe-cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-600);
  cursor: pointer;
  font-size: 12px;
  transition: all 150ms;
}
.ghe-page .ghe-cal-nav:hover {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-color: var(--enedis-blue-border);
}
.ghe-page .ghe-cal-title {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  min-width: 180px;
  text-align: center;
  text-transform: capitalize;
}
.ghe-page .ghe-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 8px 8px 4px;
  background: var(--neutral-50);
}
.ghe-page .ghe-cal-dow > div {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neutral-500);
  padding: 4px 0;
}
.ghe-page .ghe-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  min-height: 240px;
}
.ghe-page .ghe-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
}
.ghe-page .ghe-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-700);
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms;
}
.ghe-page .ghe-cat-pill > i {
  font-size: 11px;
  color: var(--neutral-400);
}
.ghe-page .ghe-cat-pill:hover:not(.is-active) {
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
}
.ghe-page .ghe-cat-pill:hover:not(.is-active) > i {
  color: var(--enedis-blue);
}
.ghe-page .ghe-cat-pill:hover:not(.is-active) .ghe-cat-pill-dot {
  transform: scale(1.15);
}
.ghe-page .ghe-cat-pill.is-active {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.ghe-page .ghe-cat-pill.is-active > i {
  color: #fff;
}
.ghe-page .ghe-cat-pill.is-active .ghe-cat-pill-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ghe-page .ghe-cat-pill.is-active .ghe-cat-pill-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.ghe-page .ghe-cat-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat-color, var(--enedis-blue));
  flex-shrink: 0;
  transition: transform 200ms;
}
.ghe-page .ghe-cat-pill-code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  opacity: 0.75;
}
.ghe-page .ghe-cat-pill-name {
  font-size: 12px;
  font-weight: 600;
}
.ghe-page .ghe-cat-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-left: 2px;
}
.ghe-page .ghe-cal-cell {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 130px;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.ghe-page .ghe-cal-cell:hover:not(.is-out):not(.is-empty) {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
  transform: translateY(-1px);
  z-index: 2;
}
.ghe-page .ghe-cal-cell.is-out {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.ghe-page .ghe-cal-cell.is-weekend {
  background: var(--neutral-50);
}
.ghe-page .ghe-cal-cell.is-today {
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--enedis-blue) 18%, transparent);
}
.ghe-page .ghe-cal-cell.is-today .ghe-cal-cell-num {
  background: var(--enedis-blue);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.ghe-page .ghe-cal-cell.is-empty .ghe-cal-cell-head {
  opacity: 0.5;
}
.ghe-page .ghe-cal-cell-clickhead {
  cursor: pointer;
}
.ghe-page .ghe-cal-cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-100);
  flex-wrap: wrap;
}
.ghe-page .ghe-cal-cell-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.4px;
}
.ghe-page .ghe-cal-cell-dow {
  font-size: 10px;
  font-weight: 700;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ghe-page .ghe-cal-cell-tot {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.2px;
}
.ghe-page .ghe-cal-cell-tot.is-good {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
}
.ghe-page .ghe-cal-cell-tot.is-warn {
  background: var(--amber-50);
  color: var(--amber-800);
  border: 1px solid var(--amber-200);
}
.ghe-page .ghe-cal-cell-tot.is-low {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid var(--red-200);
}
.ghe-page .ghe-cal-cell-tot.is-empty {
  background: var(--neutral-100);
  color: var(--neutral-500);
  border: 1px solid var(--neutral-200);
}
.ghe-page .ghe-cal-cell-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
}
.ghe-page .ghe-cal-cell-flag.is-closed {
  background: var(--neutral-200);
  color: var(--neutral-700);
}
.ghe-page .ghe-cal-cell-flag.is-full {
  background: var(--red-100);
  color: var(--red-700);
}
.ghe-page .ghe-cal-cell-body {
  flex: 1;
  padding: 5px 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ghe-page .ghe-cal-cell-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--neutral-400);
  font-size: 11px;
  font-style: italic;
}
.ghe-page .ghe-cal-row {
  --cat-color: var(--enedis-blue);
  --ratio: 0;
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 5px;
  align-items: center;
  padding: 4px 7px;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
  overflow: hidden;
  min-height: 22px;
  font-size: 11px;
  line-height: 1;
  /* Barre de remplissage en fond (largeur = ratio dispo) */
  /* Variantes selon ratio (couleur de la barre + bord du dot) */
}
.ghe-page .ghe-cal-row .ghe-cal-row-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cat-color) 14%, transparent) 0%, color-mix(in srgb, var(--cat-color) 8%, transparent) calc(var(--ratio) * 100%), transparent calc(var(--ratio) * 100%));
  pointer-events: none;
  z-index: 0;
}
.ghe-page .ghe-cal-row > * {
  position: relative;
  z-index: 1;
}
.ghe-page .ghe-cal-row:hover {
  box-shadow: inset 0 0 0 1.5px var(--cat-color);
}
.ghe-page .ghe-cal-row.is-good {
  --cat-color: var(--green-600);
}
.ghe-page .ghe-cal-row.is-warn {
  --cat-color: var(--amber-500);
}
.ghe-page .ghe-cal-row.is-low {
  --cat-color: var(--red-600);
}
.ghe-page .ghe-cal-row.is-more {
  grid-template-columns: auto 1fr;
  color: var(--enedis-blue-deep);
  background: var(--enedis-blue-soft);
  font-weight: 600;
  justify-content: center;
}
.ghe-page .ghe-cal-row.is-more i {
  color: var(--enedis-blue);
  font-size: 9px;
}
.ghe-page .ghe-cal-row.is-more:hover {
  background: color-mix(in srgb, var(--enedis-blue-soft) 80%, var(--enedis-blue));
}
.ghe-page .ghe-cal-row-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cat-color);
  flex-shrink: 0;
}
.ghe-page .ghe-cal-row-code {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--neutral-700);
}
.ghe-page .ghe-cal-row-stat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--neutral-900);
  text-align: right;
  white-space: nowrap;
}
.ghe-page .ghe-cal-row-price {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--enedis-blue-deep);
  text-align: right;
  white-space: nowrap;
}
.ghe-page .ghe-cal-row-price.is-empty {
  color: var(--neutral-300);
}
.ghe-page .ghe-modal-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ghe-page .ghe-modal-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  font-size: 11.5px;
  font-weight: 600;
}
.ghe-page .ghe-modal-cat-badge strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.ghe-page .ghe-modal-cat-badge.is-active {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.ghe-page .ghe-modal-cat-badge.is-active strong {
  color: var(--enedis-blue-deep);
}
.ghe-page .ghe-modal-cat-hint {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 11.5px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.ghe-page .ghe-modal-cat-hint i {
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ghe-page .ghe-modal-cat-hint strong {
  font-weight: 700;
}
.ghe-page .ghe-modal-cat-hint.is-info {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
}
.ghe-page .ghe-modal-cat-hint.is-info i {
  color: var(--enedis-blue);
}
.ghe-page .ghe-modal-cat-hint.is-warning {
  background: var(--amber-50);
  color: var(--amber-800);
}
.ghe-page .ghe-modal-cat-hint.is-warning i {
  color: var(--amber-700);
}
.ghe-page .ghe-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 40px;
  overflow-y: auto;
}
.ghe-page .ghe-modal[style*="display: none"], .ghe-page .ghe-modal[style*="display:none"] {
  display: none !important;
}
.ghe-page .ghe-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(13, 16, 27, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ghe-page .ghe-modal-box {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ghe-page .ghe-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--neutral-100);
  background: linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
}
.ghe-page .ghe-modal-head h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
}
.ghe-page .ghe-modal-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.ghe-page .ghe-modal-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ghe-page .ghe-modal-titles {
  flex: 1;
  min-width: 0;
}
.ghe-page .ghe-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 150ms;
}
.ghe-page .ghe-modal-close:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.ghe-page .ghe-modal-body {
  padding: 18px 22px;
}
.ghe-page .ghe-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ghe-page .ghe-massif {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  width: min(440px, 100vw - 48px);
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 14px;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: none;
}
.ghe-page .ghe-massif.is-open {
  display: block;
}
.ghe-page .ghe-massif-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--neutral-100);
}
.ghe-page .ghe-massif-head i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.ghe-page .ghe-massif-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
}
.ghe-page .ghe-massif-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--neutral-100);
}
.ghe-page .ghe-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  padding: 4px;
}
.ghe-page .ghe-day-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-500);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 150ms;
  user-select: none;
  position: relative;
}
.ghe-page .ghe-day-box > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ghe-page .ghe-day-box:hover {
  color: var(--neutral-900);
  background: rgba(0, 0, 0, 0.03);
}
.ghe-page .ghe-day-box:has(input:checked) {
  background: var(--enedis-blue);
  color: #fff;
}
.ghe-page .ghe-empty {
  text-align: center;
  padding: 48px 24px;
}
.ghe-page .ghe-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
}
.ghe-page .ghe-empty p {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13px;
}
.ghe-page .ghe-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.ghe-page .ghe-restau-wrap .form-card,
.ghe-page .ghe-restau-wrap .restaurant-card {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.ghe-page .ghe-restau-wrap .form-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ghe-radius);
  padding: 22px 24px;
  margin-bottom: 16px;
  position: relative;
}
.ghe-page .ghe-restau-wrap .form-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--ghe-radius) 0 0 var(--ghe-radius);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes gheRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ghePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═════════════════════════════════════════════════════════════════
   V3 PMS — Sprint 1 Tâche A : Fiche hôtel show (5 onglets PMS)
   Scope : .ghe-page → réutilise les styles existants de _hotels_edit
   pour le hero/tabs/section. Ajoute uniquement :
     • .ghe-cdc-hero      : badge score CDC dans le hero
     • .ghe-hero-actions  : bouton Modifier
     • .ghs-*             : grille / cdc list / table read-only
   ═════════════════════════════════════════════════════════════════ */
.ghe-page {
  /* ── Badge score CDC dans le hero (gros) ───────────────────── */
  /* ── Show — Grille de fields read-only ─────────────────────── */
  /* ── Photos thumbnails ─────────────────────────────────────── */
  /* ── CDC — Synthèse en haut de l'onglet ────────────────────── */
  /* ── CDC — Catégorie + liste de critères ───────────────────── */
  /* ── Tables (contingents) ──────────────────────────────────── */
  /* ── Form CDC edit ─────────────────────────────────────────── */
}
.ghe-page .ghe-cdc-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--neutral-50);
  border: 2px solid var(--neutral-200);
  min-width: 150px;
  text-align: center;
}
.ghe-page .ghe-cdc-hero.ghe-cdc-hero-full {
  background: var(--green-50);
  border-color: #6ee7b7;
  color: var(--green-700, #15803D);
}
.ghe-page .ghe-cdc-hero.ghe-cdc-hero-partial {
  background: var(--amber-50);
  border-color: #fcd34d;
  color: var(--amber-800, #92400E);
}
.ghe-page .ghe-cdc-hero.ghe-cdc-hero-non_conforme {
  background: var(--red-50);
  border-color: #fca5a5;
  color: var(--red-700, #B91C1C);
}
.ghe-page .ghe-cdc-hero .ghe-cdc-score {
  font-family: "Inter Tight", sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ghe-page .ghe-cdc-hero .ghe-cdc-score small {
  font-size: 18px;
  opacity: 0.7;
}
.ghe-page .ghe-cdc-hero .ghe-cdc-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ghe-page .ghe-cdc-hero .ghe-cdc-sub {
  margin-top: 6px;
  font-size: 11.5px;
  opacity: 0.85;
}
.ghe-page .ghe-cdc-hero .ghe-cdc-sub strong {
  font-weight: 700;
}
.ghe-page .ghe-hero-actions {
  align-self: center;
  margin-left: 12px;
}
.ghe-page .ghs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
@media (max-width: 700px) {
  .ghe-page .ghs-grid {
    grid-template-columns: 1fr;
  }
}
.ghe-page .ghs-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ghe-page .ghs-k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
}
.ghe-page .ghs-v {
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-800);
}
.ghe-page .ghs-v a {
  color: var(--blue-600);
  text-decoration: none;
}
.ghe-page .ghs-v a:hover {
  text-decoration: underline;
}
.ghe-page .ghs-warn {
  font-style: italic;
  color: var(--neutral-500);
}
.ghe-page .ghs-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--neutral-700);
  margin: 0;
}
.ghe-page .ghs-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.ghe-page .ghs-photo-thumb {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
}
.ghe-page .ghs-cdc-summary {
  padding: 16px 18px;
  border-radius: 12px;
  margin-bottom: 22px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-full {
  background: var(--green-50);
  border-color: #86efac;
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-full .ghs-cdc-bar-fill {
  background: var(--green-600, #16A34A);
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-full .ghs-cdc-summary-meta {
  color: var(--green-700, #15803D);
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-partial {
  background: var(--amber-50);
  border-color: #fcd34d;
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-partial .ghs-cdc-bar-fill {
  background: #f59e0b;
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-partial .ghs-cdc-summary-meta {
  color: var(--amber-800, #92400E);
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-non_conforme {
  background: var(--red-50);
  border-color: #fca5a5;
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-non_conforme .ghs-cdc-bar-fill {
  background: var(--red-600, #DC2626);
}
.ghe-page .ghs-cdc-summary.ghs-cdc-summary-non_conforme .ghs-cdc-summary-meta {
  color: var(--red-700, #B91C1C);
}
.ghe-page .ghs-cdc-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.ghe-page .ghs-cdc-bar-fill {
  height: 100%;
  background: var(--neutral-500);
  border-radius: 4px;
  transition: width 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ghe-page .ghs-cdc-summary-meta {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ghe-page .ghs-cdc-cat {
  margin-bottom: 18px;
}
.ghe-page .ghs-cdc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--neutral-200);
}
.ghe-page .ghs-cdc-cat-head h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-700);
  margin: 0;
}
.ghe-page .ghs-cdc-cat-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
}
.ghe-page .ghs-cdc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 800px) {
  .ghe-page .ghs-cdc-list {
    grid-template-columns: 1fr;
  }
}
.ghe-page .ghs-cdc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
}
.ghe-page .ghs-cdc-item.ghs-cdc-ok {
  background: var(--green-50);
  border-color: #bbf7d0;
}
.ghe-page .ghs-cdc-item.ghs-cdc-ok .ghs-cdc-icon {
  color: var(--green-600, #16A34A);
}
.ghe-page .ghs-cdc-item.ghs-cdc-ko {
  background: var(--red-50);
  border-color: #fecaca;
}
.ghe-page .ghs-cdc-item.ghs-cdc-ko .ghs-cdc-icon {
  color: var(--red-600, #DC2626);
}
.ghe-page .ghs-cdc-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ghe-page .ghs-cdc-body {
  flex: 1;
  min-width: 0;
}
.ghe-page .ghs-cdc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
  line-height: 1.3;
}
.ghe-page .ghs-cdc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  font-size: 11.5px;
  flex-wrap: wrap;
}
.ghe-page .ghs-cdc-value {
  color: var(--neutral-700);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ghe-page .ghs-cdc-ref {
  color: var(--neutral-500);
  font-style: italic;
}
.ghe-page .ghs-cdc-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--neutral-200);
  text-align: right;
}
.ghe-page .ghs-cdc-note {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--blue-50, #EFF6FF);
  border: 1px solid var(--blue-200, #BFDBFE);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--blue-800, #1E40AF);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ghe-page .ghs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}
.ghe-page .ghs-table th, .ghe-page .ghs-table td {
  padding: 9px 12px;
  text-align: left;
}
.ghe-page .ghs-table th {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
}
.ghe-page .ghs-table td {
  border-bottom: 1px solid var(--neutral-100);
  font-variant-numeric: tabular-nums;
}
.ghe-page .ghs-table tr:hover td {
  background: var(--neutral-50);
}
.ghe-page .ghs-table-foot {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--neutral-500);
  text-align: center;
  font-style: italic;
}
.ghe-page .ghs-statut {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--green-50);
  color: var(--green-700, #15803D);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ghe-page .ghs-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  font-size: 13.5px;
  background: #fff;
  color: var(--neutral-900);
}
.ghe-page .ghs-input:focus {
  outline: none;
  border-color: var(--blue-500, #3B82F6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.ghe-page .ghs-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--neutral-800);
  cursor: pointer;
}
.ghe-page .ghs-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-600);
}
.ghe-page .ghs-cdc-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--neutral-200);
}
.ghe-page .ghs-empty {
  padding: 30px 20px;
  text-align: center;
  background: var(--neutral-50);
  border: 1px dashed var(--neutral-200);
  border-radius: 10px;
  color: var(--neutral-500);
  font-size: 13.5px;
}
.ghe-page .ghs-empty i {
  display: block;
  font-size: 24px;
  color: var(--neutral-400);
  margin-bottom: 8px;
}
.ghe-page .ghs-empty strong {
  display: block;
  color: var(--neutral-700);
  font-size: 14px;
  margin-bottom: 4px;
}
.ghe-page .ghs-empty p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   GESTION — page liste des formations
   Scope : .gf-page. Hero + KPIs + upcoming strip (J-7) +
   toolbar + segments + table avec progression.
   Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gf-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --gf-radius: 14px;
  padding-bottom: 64px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── KPI strip ───────────────────────────────────────────── */
  /* ── Upcoming strip (J-7) ────────────────────────────────── */
  /* ── Toolbar ─────────────────────────────────────────────── */
  /* ── Segments ────────────────────────────────────────────── */
  /* ── Table card ──────────────────────────────────────────── */
  /* ── Table ───────────────────────────────────────────────── */
  /* ── Cell : formation ─────────────────────────────────── */
  /* ── Cell : campus ─────────────────────────────────────── */
  /* ── Cell : dates ──────────────────────────────────────── */
  /* ── Cell : formateur ──────────────────────────────────── */
  /* ── Cell : progress (hébergement) ─────────────────────── */
  /* ── Cell : status pill ─────────────────────────────────── */
  /* ── Cell : actions ─────────────────────────────────────── */
  /* ── Empty placeholder ─────────────────────────────────── */
  /* ── Empty state ────────────────────────────────────────── */
}
.gf-page .gf-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gf-page .gf-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.gf-page .gf-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.gf-page .gf-crumb-link i {
  font-size: 11px;
}
.gf-page .gf-crumb-sep {
  color: var(--neutral-300);
}
.gf-page .gf-crumb-step {
  color: var(--neutral-600);
}
.gf-page .gf-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.gf-page .gf-hero {
  position: relative;
  border-radius: var(--gf-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: gfRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gf-page .gf-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gf-page .gf-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 900px) {
  .gf-page .gf-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 22px;
  }
  .gf-page .gf-hero-inner .gf-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
}
.gf-page .gf-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gf-page .gf-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gf-page .gf-hero-meta {
  min-width: 0;
}
.gf-page .gf-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gf-page .gf-eyebrow i {
  font-size: 10px;
}
.gf-page .gf-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.gf-page .gf-subline {
  margin: 0;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 64ch;
}
.gf-page .gf-cta {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gf-page .gf-cta:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.gf-page .gf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  opacity: 0;
  animation: gfRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
@media (max-width: 900px) {
  .gf-page .gf-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gf-page .gf-stats {
    grid-template-columns: 1fr;
  }
}
.gf-page .gf-stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gf-radius);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.gf-page .gf-stat:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  transform: translateY(-1px);
}
.gf-page .gf-stat.is-warning {
  background: #FFFBF5;
  border-color: var(--amber-200);
}
.gf-page .gf-stat.is-warning .gf-stat-icon {
  background: var(--amber-50);
  color: var(--amber-700);
}
.gf-page .gf-stat.is-warning .gf-stat-value {
  color: var(--amber-800);
}
.gf-page .gf-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gf-page .gf-stat-body {
  min-width: 0;
  flex: 1;
}
.gf-page .gf-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.8px;
  line-height: 1;
}
.gf-page .gf-stat-value small {
  font-size: 13px;
  color: var(--neutral-400);
  font-weight: 600;
  margin-left: 1px;
}
.gf-page .gf-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 5px;
}
.gf-page .gf-stat-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gf-page .gf-stat-bar {
  margin-top: 8px;
  height: 4px;
  background: var(--neutral-100);
  border-radius: 999px;
  overflow: hidden;
}
.gf-page .gf-stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.25, 1, 0.5, 1);
}
.gf-page .gf-upcoming {
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--enedis-blue-border);
  border-radius: var(--gf-radius);
  padding: 18px 20px;
  margin-bottom: 22px;
  opacity: 0;
  animation: gfRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 140ms;
}
.gf-page .gf-upcoming-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gf-page .gf-upcoming-titles h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gf-page .gf-upcoming-titles h2 i {
  color: var(--enedis-blue);
  font-size: 13px;
}
.gf-page .gf-upcoming-titles p {
  margin: 0;
  font-size: 12px;
  color: var(--neutral-600);
}
.gf-page .gf-upcoming-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--enedis-blue-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--enedis-blue-deep);
  font-weight: 600;
}
.gf-page .gf-upcoming-count strong {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
}
.gf-page .gf-upcoming-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.gf-page .gf-upcoming-scroll::-webkit-scrollbar {
  height: 6px;
}
.gf-page .gf-upcoming-scroll::-webkit-scrollbar-thumb {
  background: var(--enedis-blue-border);
  border-radius: 3px;
}
.gf-page .gf-up-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 280px;
  scroll-snap-align: start;
  transition: all 180ms;
}
.gf-page .gf-up-card:hover {
  border-color: var(--enedis-blue);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--enedis-blue) 30%, transparent);
  transform: translateY(-2px);
}
.gf-page .gf-up-card:hover .gf-up-card-arrow {
  color: var(--enedis-blue);
  transform: translateX(2px);
}
.gf-page .gf-up-card-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 8px -3px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}
.gf-page .gf-up-card-date .gf-up-card-day {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}
.gf-page .gf-up-card-date .gf-up-card-month {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 3px;
  opacity: 0.85;
}
.gf-page .gf-up-card-body {
  flex: 1;
  min-width: 0;
}
.gf-page .gf-up-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gf-page .gf-up-card-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--neutral-500);
  flex-wrap: wrap;
}
.gf-page .gf-up-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gf-page .gf-up-card-meta > span i {
  font-size: 9px;
  color: var(--enedis-blue);
}
.gf-page .gf-up-card-arrow {
  font-size: 11px;
  color: var(--neutral-300);
  transition: all 180ms;
  flex-shrink: 0;
}
.gf-page .gf-toolbar {
  display: grid;
  grid-template-columns: 1fr 240px auto;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  animation: gfRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 200ms;
}
@media (max-width: 900px) {
  .gf-page .gf-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .gf-page .gf-toolbar .gf-search {
    grid-column: 1/-1;
  }
}
@media (max-width: 540px) {
  .gf-page .gf-toolbar {
    grid-template-columns: 1fr;
  }
}
.gf-page .gf-search {
  position: relative;
}
.gf-page .gf-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-400);
  font-size: 13px;
  pointer-events: none;
}
.gf-page .gf-search-input {
  width: 100%;
  padding: 11px 38px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gf-page .gf-search-input::placeholder {
  color: var(--neutral-400);
}
.gf-page .gf-search-input:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gf-page .gf-search-input:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gf-page .gf-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.gf-page .gf-search-clear:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}
.gf-page .gf-filter-cell {
  min-width: 0;
}
.gf-page .gf-select {
  width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--neutral-900);
  cursor: pointer;
  transition: all 160ms;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  appearance: none;
  -webkit-appearance: none;
}
.gf-page .gf-select:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.gf-page .gf-select:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gf-page .gf-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1.5px solid var(--enedis-blue-border);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.gf-page .gf-btn-filter i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gf-page .gf-btn-filter:hover {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
}
.gf-page .gf-btn-filter:hover i {
  color: #fff;
}
.gf-page .gf-segments {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  opacity: 0;
  animation: gfRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 240ms;
}
.gf-page .gf-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  transition: all 160ms;
}
.gf-page .gf-segment i {
  font-size: 11px;
  color: var(--neutral-400);
}
.gf-page .gf-segment:hover {
  border-color: var(--enedis-blue-border);
  color: var(--neutral-900);
}
.gf-page .gf-segment:hover i {
  color: var(--enedis-blue);
}
.gf-page .gf-segment.is-active {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.gf-page .gf-segment.is-active i {
  color: #fff;
}
.gf-page .gf-segment.is-active .gf-segment-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.gf-page .gf-segment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: all 160ms;
}
.gf-page .gf-table-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gf-radius);
  overflow: hidden;
  opacity: 0;
  animation: gfRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 300ms;
}
.gf-page .gf-table-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-100);
}
.gf-page .gf-table-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gf-page .gf-table-head h2 i {
  color: var(--enedis-blue);
  font-size: 13px;
}
.gf-page .gf-table-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 8px;
}
.gf-page .gf-table-wrap {
  overflow-x: auto;
}
.gf-page .gf-table {
  width: 100%;
  border-collapse: collapse;
}
.gf-page .gf-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.gf-page .gf-table .gf-th-progress {
  min-width: 180px;
}
.gf-page .gf-table .gf-th-actions {
  text-align: right;
  width: 140px;
}
.gf-page .gf-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
  font-size: 13px;
}
.gf-page .gf-table tbody tr:last-child td {
  border-bottom: none;
}
.gf-page .gf-row {
  cursor: pointer;
  transition: background 120ms;
}
.gf-page .gf-row:hover {
  background: var(--enedis-blue-soft);
}
.gf-page .gf-form {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gf-page .gf-form-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 8px -3px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}
.gf-page .gf-form-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gf-page .gf-form-mark > span {
  position: relative;
  z-index: 1;
}
.gf-page .gf-form-info {
  min-width: 0;
  flex: 1;
}
.gf-page .gf-form-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.2;
  margin-bottom: 3px;
}
.gf-page .gf-form-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-500);
  letter-spacing: 0.3px;
}
.gf-page .gf-campus-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1px solid var(--enedis-blue-border);
  font-size: 11.5px;
  font-weight: 600;
}
.gf-page .gf-campus-tag i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.gf-page .gf-campus-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--neutral-500);
}
.gf-page .gf-dates {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gf-page .gf-dates-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gf-page .gf-dates-range i {
  font-size: 9px;
  opacity: 0.5;
  color: var(--enedis-blue);
}
.gf-page .gf-dates-nuits {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--neutral-500);
}
.gf-page .gf-dates-nuits i {
  font-size: 9px;
  color: var(--neutral-400);
}
.gf-page .gf-formateur {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.gf-page .gf-formateur-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gf-page .gf-formateur-avatar.is-empty {
  background: var(--neutral-100);
  color: var(--neutral-400);
  font-size: 11px;
  font-family: inherit;
}
.gf-page .gf-formateur-name {
  font-size: 12.5px;
  color: var(--neutral-700);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gf-page .gf-formateur-name.is-empty {
  color: var(--neutral-400);
  font-style: italic;
}
.gf-page .gf-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.gf-page .gf-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.gf-page .gf-progress-stat {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
}
.gf-page .gf-progress-pct {
  font-family: var(--font-mono);
  font-weight: 700;
}
.gf-page .gf-progress-pct.is-good {
  color: var(--green-700);
}
.gf-page .gf-progress-pct.is-warn {
  color: var(--amber-700);
}
.gf-page .gf-progress-pct.is-low {
  color: var(--red-700);
}
.gf-page .gf-progress-bar {
  height: 6px;
  background: var(--neutral-100);
  border-radius: 999px;
  overflow: hidden;
}
.gf-page .gf-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 400ms cubic-bezier(0.25, 1, 0.5, 1);
}
.gf-page .gf-progress-fill.is-good {
  background: linear-gradient(90deg, var(--green-600), var(--green-700));
}
.gf-page .gf-progress-fill.is-warn {
  background: linear-gradient(90deg, var(--amber-500), var(--amber-700, #B45309));
}
.gf-page .gf-progress-fill.is-low {
  background: linear-gradient(90deg, var(--red-600), var(--red-700));
}
.gf-page .gf-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.gf-page .gf-status-pill i {
  font-size: 9px;
}
.gf-page .gf-status-pill.is-ongoing {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.gf-page .gf-status-pill.is-ongoing .gf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: gfPulse 2s ease-in-out infinite;
}
.gf-page .gf-status-pill.is-upcoming {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.gf-page .gf-status-pill.is-upcoming i {
  color: var(--enedis-blue);
}
.gf-page .gf-status-pill.is-past {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.gf-page .gf-status-pill.is-past i {
  color: var(--neutral-500);
}
.gf-page .gf-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.gf-page .gf-cell-actions form {
  display: inline;
  margin: 0;
}
.gf-page .gf-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 11.5px;
  text-decoration: none;
  margin-left: 4px;
  transition: all 150ms;
}
.gf-page .gf-act:hover {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-color: var(--enedis-blue-border);
}
.gf-page .gf-act.gf-act-danger:hover {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.gf-page .gf-empty-text {
  font-size: 11.5px;
  color: var(--neutral-400);
  font-style: italic;
}
.gf-page .gf-empty {
  text-align: center;
  padding: 56px 24px;
}
.gf-page .gf-empty h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gf-page .gf-empty p {
  margin: 0 auto 18px;
  color: var(--neutral-500);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 50ch;
}
.gf-page .gf-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes gfRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gfPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   GESTION — page formulaire formation (création / édition)
   Scope : .gff-page. Hero adaptatif + 3 sections numérotées +
   indicateur de durée auto + section rooming list (édition).
   Palette Enedis monochromatique.
   ═══════════════════════════════════════════════════════════════ */
.gff-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --gff-radius: 14px;
  padding-bottom: 96px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Hero ────────────────────────────────────────────────── */
  /* ── Form ────────────────────────────────────────────────── */
  /* ── Champs ──────────────────────────────────────────────── */
  /* ── Indicateur de durée (calcul auto) ──────────────────── */
  /* ── Switch ──────────────────────────────────────────────── */
  /* ── Sticky actions ──────────────────────────────────────── */
  /* ── Section Rooming list ───────────────────────────────── */
}
.gff-page .gff-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gff-page .gff-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.gff-page .gff-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.gff-page .gff-crumb-link i {
  font-size: 11px;
}
.gff-page .gff-crumb-sep {
  color: var(--neutral-300);
}
.gff-page .gff-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.gff-page .gff-hero {
  position: relative;
  border-radius: var(--gff-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 24px;
  opacity: 0;
  animation: gffRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.gff-page .gff-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.gff-page .gff-hero-inner {
  position: relative;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 1024px) {
  .gff-page .gff-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 22px;
  }
  .gff-page .gff-hero-inner .gff-hero-stats {
    grid-column: 1/-1;
    border-top: 1px solid var(--neutral-100);
    padding-top: 14px;
    justify-content: flex-start;
  }
}
.gff-page .gff-hero-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--enedis-blue) 40%, transparent), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gff-page .gff-hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.gff-page .gff-hero-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.gff-page .gff-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin: 0;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
}
.gff-page .gff-eyebrow i {
  font-size: 10px;
}
.gff-page .gff-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.2;
  word-break: break-word;
}
.gff-page .gff-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.gff-page .gff-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.gff-page .gff-pill i {
  font-size: 10px;
  color: var(--neutral-500);
}
.gff-page .gff-pill.is-mono {
  font-family: var(--font-mono);
}
.gff-page .gff-pill.is-key {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.gff-page .gff-pill.is-key i {
  color: var(--enedis-blue);
}
.gff-page .gff-pill > i.fa-arrow-right {
  font-size: 9px;
  opacity: 0.5;
  margin: 0 1px;
}
.gff-page .gff-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.gff-page .gff-status i {
  font-size: 9px;
}
.gff-page .gff-status.is-ongoing {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.gff-page .gff-status.is-ongoing .gff-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: gffPulse 2s ease-in-out infinite;
}
.gff-page .gff-status.is-upcoming {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.gff-page .gff-status.is-upcoming i {
  color: var(--enedis-blue);
}
.gff-page .gff-status.is-past {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.gff-page .gff-status.is-past i {
  color: var(--neutral-500);
}
.gff-page .gff-hero-stats {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-shrink: 0;
}
.gff-page .gff-hstat {
  text-align: center;
}
.gff-page .gff-hstat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.6px;
  line-height: 1;
}
.gff-page .gff-hstat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--neutral-500);
  margin-top: 5px;
}
.gff-page .gff-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gff-page .gff-section {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--gff-radius);
  padding: 22px 24px;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: gffRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--section-delay, 0ms);
  transition: border-color 200ms, box-shadow 200ms;
}
.gff-page .gff-section:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.gff-page .gff-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: var(--gff-radius) 0 0 var(--gff-radius);
  opacity: 0.85;
}
.gff-page .gff-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--neutral-200);
}
.gff-page .gff-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 2px;
  min-width: 32px;
  text-align: center;
}
.gff-page .gff-section-num i {
  font-size: 11px;
}
.gff-page .gff-section-titles {
  flex: 1;
  min-width: 0;
}
.gff-page .gff-section-titles h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gff-page .gff-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 14px;
}
.gff-page .gff-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.gff-page .gff-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .gff-page .gff-fields {
    grid-template-columns: 1fr;
  }
}
.gff-page .gff-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gff-page .gff-field.full {
  grid-column: 1/-1;
}
.gff-page .gff-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gff-page .gff-field label i {
  font-size: 11px;
  color: var(--enedis-blue);
  width: 14px;
  text-align: center;
}
.gff-page .gff-req {
  color: var(--red-600);
  margin-left: 2px;
}
.gff-page .gff-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.gff-page .gff-input::placeholder {
  color: var(--neutral-400);
}
.gff-page .gff-input:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.gff-page .gff-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.gff-page select.gff-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
}
.gff-page .gff-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.gff-page .gff-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gff-page .gff-hint i {
  font-size: 10px;
  color: var(--neutral-400);
  margin-top: 2px;
  flex-shrink: 0;
}
.gff-page .gff-duree {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--neutral-50);
  border: 1.5px dashed var(--neutral-300);
  border-radius: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  font-weight: 500;
  transition: all 200ms;
}
.gff-page .gff-duree > i {
  font-size: 14px;
  color: var(--neutral-400);
  transition: color 200ms;
}
.gff-page .gff-duree.is-active {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
  border-style: solid;
  color: var(--enedis-blue-deep);
}
.gff-page .gff-duree.is-active > i {
  color: var(--enedis-blue);
}
.gff-page .gff-duree.is-active span {
  font-weight: 600;
}
.gff-page .gff-duree.is-error {
  background: var(--red-50);
  border-color: var(--red-200);
  border-style: solid;
  color: var(--red-700);
}
.gff-page .gff-duree.is-error > i {
  color: var(--red-600);
}
.gff-page .gff-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms;
  user-select: none;
}
.gff-page .gff-switch:hover {
  background: #fff;
  border-color: var(--neutral-300);
}
.gff-page .gff-switch > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gff-page .gff-switch .gff-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--neutral-300);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 200ms;
}
.gff-page .gff-switch .gff-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gff-page .gff-switch:has(input:checked) {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.gff-page .gff-switch:has(input:checked) .gff-switch-track {
  background: var(--enedis-blue);
}
.gff-page .gff-switch:has(input:checked) .gff-switch-thumb {
  transform: translateX(18px);
}
.gff-page .gff-switch .gff-switch-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gff-page .gff-switch .gff-switch-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gff-page .gff-switch .gff-switch-label small {
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.gff-page .gff-actions {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--neutral-200);
  border-radius: var(--gff-radius);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 600px) {
  .gff-page .gff-actions {
    grid-template-columns: 1fr;
  }
}
.gff-page .gff-actions-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neutral-500);
}
.gff-page .gff-actions-hint i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.gff-page .gff-actions-buttons {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.gff-page .gff-btn-save {
  background: var(--enedis-blue);
  white-space: nowrap;
}
.gff-page .gff-btn-save:hover:not(:disabled) {
  background: var(--enedis-blue-deep);
}
.gff-page .gff-btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--red-200);
  color: var(--red-700);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms;
}
.gff-page .gff-btn-delete:hover {
  background: var(--red-50);
  border-color: var(--red-600);
  color: var(--red-700);
}
.gff-page .gff-rooming {
  margin-top: 16px;
}
.gff-page .gff-rooming::before {
  background: var(--green-600);
}
.gff-page .gff-rooming .gff-section-num {
  color: var(--green-700);
  background: var(--green-50);
  border-color: var(--green-200);
}
.gff-page .gff-rooming .gff-section-titles h2 i {
  color: var(--green-600);
}
.gff-page .gff-rooming-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 200ms;
  margin-bottom: 8px;
}
.gff-page .gff-rooming-card:hover {
  border-color: var(--green-600);
  background: var(--green-50);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--green-600) 30%, transparent);
}
.gff-page .gff-rooming-card:hover .gff-rooming-icon {
  background: var(--green-600);
  color: #fff;
}
.gff-page .gff-rooming-card:hover .gff-rooming-arrow {
  transform: translateX(2px);
  color: var(--green-700);
}
.gff-page .gff-rooming-card:hover .gff-rooming-cta {
  background: var(--green-600);
  color: #fff;
}
.gff-page .gff-rooming-card.is-global {
  background: linear-gradient(135deg, var(--green-50) 0%, #fff 100%);
  border-color: var(--green-200);
}
.gff-page .gff-rooming-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 200ms;
}
.gff-page .gff-rooming-icon.is-sm {
  width: 38px;
  height: 38px;
  font-size: 14px;
  border-radius: 9px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-color: var(--enedis-blue-border);
}
.gff-page .gff-rooming-card:not(.is-global):hover .gff-rooming-icon.is-sm {
  background: var(--enedis-blue);
  color: #fff;
}
.gff-page .gff-rooming-body {
  flex: 1;
  min-width: 0;
}
.gff-page .gff-rooming-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.2px;
  margin-bottom: 3px;
}
.gff-page .gff-rooming-sub {
  font-size: 12px;
  color: var(--neutral-600);
}
.gff-page .gff-rooming-sub strong {
  color: var(--neutral-900);
  font-family: var(--font-mono);
  font-weight: 700;
}
.gff-page .gff-rooming-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--green-200);
  color: var(--green-700);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 200ms;
}
.gff-page .gff-rooming-cta i {
  font-size: 11px;
}
.gff-page .gff-rooming-arrow {
  font-size: 12px;
  color: var(--neutral-400);
  flex-shrink: 0;
  transition: all 200ms;
}
.gff-page .gff-rooming-separator {
  display: flex;
  align-items: center;
  margin: 14px 0 10px;
  font-size: 11.5px;
  color: var(--neutral-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gff-page .gff-rooming-separator > span {
  padding: 0 12px;
}
.gff-page .gff-rooming-separator::before, .gff-page .gff-rooming-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--neutral-200);
}
.gff-page .gff-rooming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.gff-page .gff-rooming-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--enedis-blue-deep);
  line-height: 1.5;
  margin-top: 10px;
}
.gff-page .gff-rooming-empty i {
  color: var(--enedis-blue);
  font-size: 13px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes gffRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gffPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
/* ═══════════════════════════════════════════════════════════════
   Navigation par onglets (édition formation uniquement)
   + panels Réponses hôtels / Navettes / Stagiaires
   ═══════════════════════════════════════════════════════════════ */
.gff-page {
  /* ─── Panel générique (hôtels, navettes, stagiaires) ─── */
  /* ─── KPI strip onglet hôtels ─── */
  /* ─── Table comparative onglet hôtels / stagiaires ─── */
  /* ─── Empty state ─── */
  /* ─── Bandeau info "Phase 2 à venir" ─── */
  /* ─── Compteur stagiaires (panel stagiaires) ─── */
}
.gff-page .gff-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 18px;
  padding: 6px;
  background: var(--neutral-100, #F3F4F6);
  border-radius: 12px;
}
.gff-page .gff-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-600, #4B5563);
  text-decoration: none;
  border-radius: 8px;
  transition: background 150ms, color 150ms;
}
.gff-page .gff-tab i {
  font-size: 12px;
  color: var(--neutral-500, #6B7280);
}
.gff-page .gff-tab:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--neutral-900, #111827);
}
.gff-page .gff-tab.is-active {
  background: #fff;
  color: var(--enedis-blue, #1432FA);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px -6px rgba(20, 50, 250, 0.15);
}
.gff-page .gff-tab.is-active i {
  color: var(--enedis-blue, #1432FA);
}
.gff-page .gff-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  background: var(--neutral-200, #E5E7EB);
  color: var(--neutral-700, #374151);
  border-radius: 999px;
}
.gff-page .gff-tab.is-active .gff-tab-count {
  background: var(--enedis-blue-soft, #EEF1FF);
  color: var(--enedis-blue, #1432FA);
}
.gff-page .gff-tab-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  background: var(--amber-500, #F59E0B);
  color: #fff;
  border-radius: 999px;
}
.gff-page .gff-panel {
  background: #fff;
  border: 1px solid var(--card-border, #E5E7EB);
  border-radius: 14px;
  padding: 24px;
  margin-top: 8px;
}
.gff-page .gff-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.gff-page .gff-stat {
  background: var(--neutral-50, #FAFBFC);
  border: 1px solid var(--card-border, #E5E7EB);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gff-page .gff-stat .gff-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  font-variant-numeric: tabular-nums;
}
.gff-page .gff-stat .gff-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500, #6B7280);
}
.gff-page .gff-stat.is-success {
  border-color: var(--green-200, #BBF7D0);
  background: var(--green-50, #F0FDF4);
}
.gff-page .gff-stat.is-success .gff-stat-value {
  color: var(--green-700, #15803D);
}
.gff-page .gff-stat.is-danger {
  border-color: var(--red-200, #FECACA);
  background: var(--red-50, #FEF2F2);
}
.gff-page .gff-stat.is-danger .gff-stat-value {
  color: var(--red-700, #B91C1C);
}
.gff-page .gff-stat.is-warning {
  border-color: var(--amber-200, #FDE68A);
  background: var(--amber-50, #FFFBEB);
}
.gff-page .gff-stat.is-warning .gff-stat-value {
  color: var(--amber-700, #B45309);
}
.gff-page .gff-stat.is-primary {
  border-color: var(--enedis-blue-border, #C7D0FF);
  background: var(--enedis-blue-soft, #EEF1FF);
}
.gff-page .gff-stat.is-primary .gff-stat-value {
  color: var(--enedis-blue, #1432FA);
}
.gff-page .gff-stat.is-neutral {
  border-color: var(--neutral-300, #D1D5DB);
}
.gff-page .gff-stat.is-neutral .gff-stat-value {
  color: var(--neutral-700, #374151);
}
.gff-page .gff-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.gff-page .gff-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--card-border, #E5E7EB);
  border-radius: 10px;
}
.gff-page .gff-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.gff-page .gff-table thead th {
  padding: 10px 12px;
  background: var(--neutral-50, #FAFBFC);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--neutral-500, #6B7280);
  border-bottom: 1px solid var(--card-border, #E5E7EB);
  white-space: nowrap;
}
.gff-page .gff-table tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--neutral-100, #F3F4F6);
  vertical-align: middle;
  color: var(--neutral-700, #374151);
}
.gff-page .gff-table tbody tr:hover {
  background: var(--neutral-50, #FAFBFC);
}
.gff-page .gff-table .ta-right {
  text-align: right;
}
.gff-page .gff-table .text-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
}
.gff-page .gff-empty-state {
  text-align: center;
  padding: 48px 24px;
}
.gff-page .gff-empty-state .gff-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--neutral-100, #F3F4F6);
  color: var(--neutral-400, #9CA3AF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.gff-page .gff-empty-state h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
}
.gff-page .gff-empty-state p {
  margin: 0 0 20px;
  color: var(--neutral-500, #6B7280);
  font-size: 13.5px;
}
.gff-page .gff-info-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  margin-top: 20px;
  background: var(--enedis-blue-soft, #EEF1FF);
  border: 1px solid var(--enedis-blue-border, #C7D0FF);
  border-left: 4px solid var(--enedis-blue, #1432FA);
  border-radius: 10px;
  font-size: 13px;
  color: var(--neutral-700, #374151);
}
.gff-page .gff-info-banner > i {
  color: var(--enedis-blue, #1432FA);
  font-size: 16px;
  margin-top: 1px;
}
.gff-page .gff-info-banner strong {
  color: var(--enedis-blue, #1432FA);
}
.gff-page .gff-stagiaires-summary {
  margin-bottom: 20px;
  padding: 18px 22px;
  background: var(--neutral-50, #FAFBFC);
  border: 1px solid var(--card-border, #E5E7EB);
  border-radius: 12px;
  text-align: center;
}
.gff-page .gff-stat-large {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.gff-page .gff-stat-large .gff-stat-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--neutral-900, #111827);
  font-variant-numeric: tabular-nums;
}
.gff-page .gff-stat-large .gff-stat-divider {
  font-size: 22px;
  color: var(--neutral-300, #D1D5DB);
}
.gff-page .gff-stat-large .gff-stat-max {
  font-size: 22px;
  font-weight: 600;
  color: var(--neutral-500, #6B7280);
  font-variant-numeric: tabular-nums;
}
.gff-page .gff-stat-large .gff-stat-label {
  margin-left: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500, #6B7280);
  align-self: center;
}

/* Section « Demande aux hôtels » du wizard création formation */
.gff-page .gff-hotels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.gff-page .gff-hotel-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 150ms, border-color 150ms;
}
.gff-page .gff-hotel-check:hover {
  background: #fff;
  border-color: var(--enedis-blue-border, #C7D0FF);
}
.gff-page .gff-hotel-check input[type=checkbox] {
  margin-top: 3px;
  flex-shrink: 0;
}
.gff-page .gff-hotel-check .gff-hotel-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.gff-page .gff-hotel-check .gff-hotel-body strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.gff-page .gff-hotel-check .gff-hotel-body small {
  color: var(--neutral-500);
  font-size: 11.5px;
  margin-top: 2px;
}
.gff-page .gff-hotel-check .gff-hotel-body small i {
  margin-right: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   RÉSERVATION — page détail dossier
   Scope : .dos-page (en plus de .fiche existant). Refonte
   complète : hero Enedis avec avatar, sidebar avec cards, tabs
   nav, panels avec stripes verticales et sections numérotées.

   Les styles existants de _fiche.scss sont overridden via
   `.dos-page .selector` (mêmes specificités, mais notre fichier
   est chargé après dans app.scss → cascade gagne).
   ═══════════════════════════════════════════════════════════════ */
.dos-page {
  --enedis-blue: #1432FA;
  --enedis-blue-soft: #EEF1FF;
  --enedis-blue-border: #C7D0FF;
  --enedis-blue-deep: #0F22B8;
  --dos-radius: 14px;
  padding-bottom: 96px;
  /* On annule le `.page-back` historique du _fiche.scss s'il existe */
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── Bandeau d'annulation ───────────────────────────────── */
  /* ── Bandeau Taxi requis ────────────────────────────────── */
  /* ══════════════════════════════════════════════════════════
     HERO Enedis (remplace l'identity-strip historique)
     ══════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════
     LAYOUT GRID
     ══════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════
     SIDEBAR
     ══════════════════════════════════════════════════════════ */
  /* ── Trajet préconisé ───────────────────────────────────── */
  /* ── Quick actions (sidebar) ────────────────────────────── */
  /* ══════════════════════════════════════════════════════════
     MAIN CARD + TABS + PANELS
     ══════════════════════════════════════════════════════════ */
  /* ── Tabs nav ────────────────────────────────────────────── */
  /* Alert numérique (notification rouge avec nombre) */
  /* ── Panels ──────────────────────────────────────────────── */
  /* ── Section headers (.section-h) → stripe + numbered look ── */
  /* ── Status flow (timeline du panel statut) ────────────── */
  /* ── Forms inside panels ────────────────────────────────── */
  /* ── Boutons ─────────────────────────────────────────────── */
  /* ── Badges sémantiques ──────────────────────────────────── */
  /* ── Charge pill (legacy class) ─────────────────────────── */
  /* ── Tables génériques dans panels ──────────────────────── */
  /* ══════════════════════════════════════════════════════════
     PANEL TRAJET — import billet, empty state, segments
     ══════════════════════════════════════════════════════════ */
  /* ── Drop zone import billet PDF ─────────────────────────── */
  /* ── Modal preview billet ────────────────────────────────── */
  /* ── Empty state trajet (choix import / manuel) ─────────── */
  /* ── Bandeau chaîne aller/retour (correspondances) ──────── */
  /* ── Sens (aller / retour) ──────────────────────────────── */
  /* ── Segment card ───────────────────────────────────────── */
  /* ── Form fields (.form-field au lieu de .form-group) ──── */
  /* ══════════════════════════════════════════════════════════
     Nuitées supplémentaires (panel statut)
     ══════════════════════════════════════════════════════════ */
  /* ── Commission / cost rows ─────────────────────────────── */
  /* ══════════════════════════════════════════════════════════
     PANEL NAVETTES — suggestions, recap, transport cards
     ══════════════════════════════════════════════════════════ */
  /* ── Suggestion transport (banner par sens) ─────────────── */
  /* ── Recap stats navettes ───────────────────────────────── */
  /* ── Transport cards (navettes / taxis disponibles) ─────── */
  /* ══════════════════════════════════════════════════════════
     PANEL REPAS — planning des dîners
     ══════════════════════════════════════════════════════════ */
  /* ── Restaurant capacité indicator ───────────────────────── */
  /* ── Récap coût dîners ──────────────────────────────────── */
  /* ── Section count badge ────────────────────────────────── */
  /* ── Alerts ──────────────────────────────────────────────── */
}
.dos-page .page-back {
  display: none;
}
.dos-page .dos-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dos-page .dos-crumb-link {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.dos-page .dos-crumb-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.dos-page .dos-crumb-link i {
  font-size: 11px;
}
.dos-page .dos-crumb-sep {
  color: var(--neutral-300);
}
.dos-page .dos-crumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.dos-page .dossier-cancelled-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: var(--dos-radius);
  margin-bottom: 18px;
  box-shadow: none !important;
}
.dos-page .dossier-cancelled-banner .dcb-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--red-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dos-page .dossier-cancelled-banner .dcb-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dos-page .dossier-cancelled-banner .dcb-body strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--red-700);
}
.dos-page .dossier-cancelled-banner .dcb-body span {
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.5;
}
.dos-page .dossier-taxi-banner {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: var(--dos-radius);
  margin-bottom: 18px;
  box-shadow: none !important;
}
.dos-page .dossier-taxi-banner .dtb-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--amber-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dos-page .dossier-taxi-banner .dtb-body {
  flex: 1;
  min-width: 0;
}
.dos-page .dossier-taxi-banner .dtb-body > strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--amber-900, #78350F);
  margin-bottom: 8px;
}
.dos-page .dossier-taxi-banner .dtb-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dos-page .dossier-taxi-banner .dtb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--amber-200);
  border-radius: 9px;
  flex-wrap: wrap;
}
.dos-page .dossier-taxi-banner .dtb-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--amber-100);
  color: var(--amber-800);
  letter-spacing: 0.05em;
}
.dos-page .dossier-taxi-banner .dtb-reason {
  font-size: 12.5px;
  color: var(--neutral-700);
  flex: 1;
  min-width: 200px;
}
.dos-page .dossier-taxi-banner .dtb-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--neutral-600);
}
.dos-page .dossier-taxi-banner .dtb-meta i {
  font-size: 10px;
  color: var(--neutral-400);
}
.dos-page .dossier-taxi-banner .dtb-row-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.dos-page .dossier-taxi-banner .dtb-history {
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  font-size: 11.5px;
}
.dos-page .dossier-taxi-banner .dtb-history-title {
  font-weight: 700;
  color: var(--neutral-700);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10.5px;
}
.dos-page .dossier-taxi-banner .dtb-history-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  color: var(--neutral-600);
  flex-wrap: wrap;
}
.dos-page .dossier-taxi-banner .dtb-history-society {
  font-weight: 700;
  color: var(--neutral-900);
}
.dos-page .dossier-taxi-banner .dtb-history-motif {
  color: var(--red-600);
  font-style: italic;
}
.dos-page .dossier-taxi-banner .dtb-history-date {
  font-family: var(--font-mono);
  color: var(--neutral-500);
  font-size: 11px;
  margin-left: auto;
}
.dos-page .dos-hero {
  position: relative;
  border-radius: var(--dos-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--neutral-200);
  margin-bottom: 22px;
  opacity: 0;
  animation: dosRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.dos-page .dos-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 240px at 100% 0%, rgba(20, 50, 250, 0.08), transparent 60%), radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20, 50, 250, 0.04), transparent 60%), linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
  pointer-events: none;
}
.dos-page .dos-hero-inner {
  position: relative;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}
@media (max-width: 1100px) {
  .dos-page .dos-hero-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 20px;
  }
  .dos-page .dos-hero-inner .dos-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
}
.dos-page .dos-hero-avatar {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.dos-page .dos-hero-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.dos-page .dos-hero-avatar > span {
  position: relative;
  z-index: 1;
}
.dos-page .dos-hero-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.dos-page .dos-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--enedis-blue);
  margin: 0;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
}
.dos-page .dos-eyebrow i {
  font-size: 10px;
}
.dos-page .dos-eyebrow .dos-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--enedis-blue-deep);
  background: var(--enedis-blue-soft);
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.4px;
}
.dos-page .dos-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
  line-height: 1.2;
  word-break: break-word;
}
.dos-page .dos-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.dos-page .dos-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.dos-page .dos-pill i {
  font-size: 10px;
  color: var(--neutral-500);
}
.dos-page .dos-pill.is-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.dos-page .dos-pill.is-key {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.dos-page .dos-pill.is-key i {
  color: var(--enedis-blue);
}
.dos-page .dos-charge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.dos-page .dos-charge i {
  font-size: 10px;
}
.dos-page .dos-charge.is-totale {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.dos-page .dos-charge.is-totale i {
  color: var(--green-600);
}
.dos-page .dos-charge.is-encours {
  background: var(--amber-50);
  color: var(--amber-800);
  border-color: var(--amber-200);
}
.dos-page .dos-charge.is-encours i {
  color: var(--amber-700);
}
.dos-page .dos-charge.is-horsscope {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.dos-page .dos-charge.is-horsscope i {
  color: var(--red-600);
}
.dos-page .dos-charge.is-na {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.dos-page .dos-charge.is-na i {
  color: var(--neutral-500);
}
.dos-page .dos-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.dos-page .dos-status i {
  font-size: 9px;
}
.dos-page .dos-status.is-success {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.dos-page .dos-status.is-success .dos-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green-600) 25%, transparent);
  animation: dosPulse 2s ease-in-out infinite;
}
.dos-page .dos-status.is-info {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.dos-page .dos-status.is-info .dos-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--enedis-blue);
}
.dos-page .dos-status.is-warning {
  background: var(--amber-50);
  color: var(--amber-800);
  border-color: var(--amber-200);
}
.dos-page .dos-status.is-warning .dos-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--amber-500);
}
.dos-page .dos-status.is-warning i {
  color: var(--amber-700);
}
.dos-page .dos-status.is-danger {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.dos-page .dos-status.is-danger .dos-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--red-600);
}
.dos-page .dos-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dos-page .dos-hero-actions form {
  display: inline;
  margin: 0;
}
.dos-page .dos-btn-primary,
.dos-page .dos-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
  border: 1.5px solid transparent;
}
.dos-page .dos-btn-primary i,
.dos-page .dos-btn-outline i {
  font-size: 12px;
}
.dos-page .dos-btn-primary {
  background: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 40%, transparent);
}
.dos-page .dos-btn-primary:hover {
  background: var(--enedis-blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px color-mix(in srgb, var(--enedis-blue) 50%, transparent);
}
.dos-page .dos-btn-outline {
  background: #fff;
  color: var(--neutral-700);
  border-color: var(--neutral-200);
}
.dos-page .dos-btn-outline:hover {
  border-color: var(--enedis-blue-border);
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
}
.dos-page .fiche-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .dos-page .fiche-grid {
    grid-template-columns: 1fr;
  }
}
.dos-page .fiche-side {
  order: 2; /* colonne latérale (contexte/actions/disclaimer) déplacée à droite ;
   le bloc principal .main-card (order 0) reste à gauche. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
}
@media (max-width: 1100px) {
  .dos-page .fiche-side {
    position: static;
  }
}
.dos-page .dos-qa:hover {
  background: #F4F6FA;
}
.dos-page .side-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--dos-radius);
  overflow: hidden;
  position: relative;
  transition: border-color 200ms, box-shadow 200ms;
}
.dos-page .side-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  opacity: 0;
  transition: opacity 200ms;
}
.dos-page .side-card:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
}
.dos-page .side-card:hover::before {
  opacity: 0.85;
}
.dos-page .side-card .card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-100);
}
.dos-page .side-card .card-head i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.dos-page .side-card .card-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.1px;
}
.dos-page .side-card .card-body {
  padding: 14px 16px;
  font-size: 12.5px;
}
.dos-page .side-card .card-body dl > div + div {
  margin-top: 10px;
}
.dos-page .side-card .card-body dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--neutral-500);
  margin-bottom: 3px;
}
.dos-page .side-card .card-body dd {
  margin: 0;
  color: var(--neutral-900);
  font-weight: 500;
  line-height: 1.45;
}
.dos-page .side-card .card-body .sub {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 1px;
  font-weight: 400;
}
.dos-page .side-card .card-body .mono {
  font-family: var(--font-mono);
}
.dos-page .side-card .manager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--neutral-50);
  border-radius: 9px;
  border: 1px solid var(--neutral-100);
}
.dos-page .side-card .manager .manager-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--enedis-blue), var(--enedis-blue-deep));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 8px -3px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}
.dos-page .side-card .manager .manager-info {
  flex: 1;
  min-width: 0;
}
.dos-page .side-card .manager .manager-name {
  font-weight: 700;
  color: var(--neutral-900);
  font-size: 13px;
}
.dos-page .side-card .manager .manager-sub {
  font-size: 11.5px;
  color: var(--neutral-500);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.dos-page .side-card .manager .manager-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.dos-page .side-card .manager .icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transition: all 150ms;
}
.dos-page .side-card .manager .icon-btn:hover {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-color: var(--enedis-blue-border);
}
.dos-page .tp {
  padding: 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
}
.dos-page .tp + .dos-page .tp {
  margin-top: 8px;
}
.dos-page .tp.is-reco {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.dos-page .tp .tp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.dos-page .tp .tp-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dos-page .tp .tp-mode {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  flex: 1;
}
.dos-page .tp .tp-reco-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--enedis-blue);
  color: #fff;
}
.dos-page .tp .tp-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.4;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.dos-page .tp .tp-route > i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.dos-page .tp .tp-meta {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: var(--neutral-500);
  flex-wrap: wrap;
}
.dos-page .tp .tp-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dos-page .tp .tp-meta i {
  font-size: 10px;
}
.dos-page .tp .tp-warning {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--amber-50);
  border-left: 3px solid var(--amber-500);
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  color: var(--amber-800);
}
.dos-page .tp .tp-warning i {
  color: var(--amber-700);
  margin-right: 6px;
}
.dos-page .tp .tp-alt-title {
  margin: 12px 0 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--neutral-500);
}
.dos-page .quick-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dos-page .quick-actions form {
  display: block;
  margin: 0;
}
.dos-page .quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 150ms;
}
.dos-page .quick-action i {
  font-size: 13px;
  color: var(--enedis-blue);
  width: 16px;
  text-align: center;
}
.dos-page .quick-action:hover {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
  color: var(--enedis-blue-deep);
}
.dos-page .main-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--dos-radius);
  overflow: hidden;
  opacity: 0;
  animation: dosRise 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 80ms;
}
.dos-page .tabs,
.dos-page .tabs-bar,
.dos-page nav.tabs,
.dos-page .tab-list {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 8px;
  background: #fff;
  border-bottom: 1px solid #E8EBF2;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.dos-page .tabs::-webkit-scrollbar,
.dos-page .tabs-bar::-webkit-scrollbar,
.dos-page nav.tabs::-webkit-scrollbar,
.dos-page .tab-list::-webkit-scrollbar {
  height: 6px;
}
.dos-page .tabs::-webkit-scrollbar-thumb,
.dos-page .tabs-bar::-webkit-scrollbar-thumb,
.dos-page nav.tabs::-webkit-scrollbar-thumb,
.dos-page .tab-list::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
.dos-page .tab,
.dos-page .tab-btn,
.dos-page a.tab-btn,
.dos-page button.tab-btn,
.dos-page .tab-link,
.dos-page a[role=tab] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 15px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: #7A8298;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  transition: color 150ms;
  position: relative;
  /* Couleur d'accent propre à chaque onglet (icône + soulignement),
     à la manière des tuiles de la page Mon Séjour. */
  /* cyan   */
  /* vert   */
  /* bleu   */
  /* orange */
  /* violet */
  /* ambre  */
}
.dos-page .tab > i,
.dos-page .tab-btn > i,
.dos-page a.tab-btn > i,
.dos-page button.tab-btn > i,
.dos-page .tab-link > i,
.dos-page a[role=tab] > i {
  font-size: 14px;
  color: var(--tab-color, #9AA1B2);
}
.dos-page .tab::after,
.dos-page .tab-btn::after,
.dos-page a.tab-btn::after,
.dos-page button.tab-btn::after,
.dos-page .tab-link::after,
.dos-page a[role=tab]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}
.dos-page .tab:hover:not(.is-active),
.dos-page .tab-btn:hover:not(.is-active),
.dos-page a.tab-btn:hover:not(.is-active),
.dos-page button.tab-btn:hover:not(.is-active),
.dos-page .tab-link:hover:not(.is-active),
.dos-page a[role=tab]:hover:not(.is-active) {
  color: #4E5A75;
}
.dos-page .tab[data-tab=synthese],
.dos-page .tab-btn[data-tab=synthese],
.dos-page a.tab-btn[data-tab=synthese],
.dos-page button.tab-btn[data-tab=synthese],
.dos-page .tab-link[data-tab=synthese],
.dos-page a[role=tab][data-tab=synthese] {
  --tab-color: #0891B2;
}
.dos-page .tab[data-tab=hebergement],
.dos-page .tab-btn[data-tab=hebergement],
.dos-page a.tab-btn[data-tab=hebergement],
.dos-page button.tab-btn[data-tab=hebergement],
.dos-page .tab-link[data-tab=hebergement],
.dos-page a[role=tab][data-tab=hebergement] {
  --tab-color: #6CC04A;
}
.dos-page .tab[data-tab=thrips],
.dos-page .tab-btn[data-tab=thrips],
.dos-page a.tab-btn[data-tab=thrips],
.dos-page button.tab-btn[data-tab=thrips],
.dos-page .tab-link[data-tab=thrips],
.dos-page a[role=tab][data-tab=thrips] {
  --tab-color: #2563EB;
}
.dos-page .tab[data-tab=transferts],
.dos-page .tab-btn[data-tab=transferts],
.dos-page a.tab-btn[data-tab=transferts],
.dos-page button.tab-btn[data-tab=transferts],
.dos-page .tab-link[data-tab=transferts],
.dos-page a[role=tab][data-tab=transferts] {
  --tab-color: #EA580C;
}
.dos-page .tab[data-tab=mon-sejour],
.dos-page .tab-btn[data-tab=mon-sejour],
.dos-page a.tab-btn[data-tab=mon-sejour],
.dos-page button.tab-btn[data-tab=mon-sejour],
.dos-page .tab-link[data-tab=mon-sejour],
.dos-page a[role=tab][data-tab=mon-sejour] {
  --tab-color: #7C3AED;
}
.dos-page .tab[data-tab=historique],
.dos-page .tab-btn[data-tab=historique],
.dos-page a.tab-btn[data-tab=historique],
.dos-page button.tab-btn[data-tab=historique],
.dos-page .tab-link[data-tab=historique],
.dos-page a[role=tab][data-tab=historique] {
  --tab-color: #D97706;
}
.dos-page .tab.is-active,
.dos-page .tab-btn.is-active,
.dos-page a.tab-btn.is-active,
.dos-page button.tab-btn.is-active,
.dos-page .tab-link.is-active,
.dos-page a[role=tab].is-active {
  color: #1D2D5C;
}
.dos-page .tab.is-active::after,
.dos-page .tab-btn.is-active::after,
.dos-page a.tab-btn.is-active::after,
.dos-page button.tab-btn.is-active::after,
.dos-page .tab-link.is-active::after,
.dos-page a[role=tab].is-active::after {
  background: var(--tab-color, #6CC04A);
}
.dos-page .tab-alert {
  position: static;
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 20px;
  background: #FBE4E3;
  color: #B23A36;
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  letter-spacing: 0;
}
.dos-page .tab-badge,
.dos-page .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 20px;
  background: #E3EAF6;
  color: #34508C;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.4;
  margin-left: 0;
}
.dos-page .tab-panels {
  padding: 18px 20px 22px;
}
.dos-page .panel {
  display: none;
  padding: 0;
}
.dos-page .panel.is-active {
  display: block;
  animation: dosFadeIn 280ms ease-out;
}
.dos-page .section-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.1px;
  border-bottom: 1px dashed var(--neutral-200);
  position: relative;
}
.dos-page .section-h::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  opacity: 0.7;
}
.dos-page .section-h > i {
  color: var(--enedis-blue);
  font-size: 13px;
  background: var(--enedis-blue-soft);
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--enedis-blue-border);
}
.dos-page .section-h + .section-h {
  margin-top: 28px;
}
.dos-page .status-flow,
.dos-page .status-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
  padding: 16px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 12px;
}
.dos-page .status-step,
.dos-page .step {
  position: relative;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  transition: all 200ms;
}
.dos-page .status-step.is-done, .dos-page .status-step.state-done,
.dos-page .step.is-done,
.dos-page .step.state-done {
  border-color: var(--green-200);
  background: var(--green-50);
}
.dos-page .status-step.is-done .step-icon, .dos-page .status-step.is-done .status-step-icon, .dos-page .status-step.state-done .step-icon, .dos-page .status-step.state-done .status-step-icon,
.dos-page .step.is-done .step-icon,
.dos-page .step.is-done .status-step-icon,
.dos-page .step.state-done .step-icon,
.dos-page .step.state-done .status-step-icon {
  background: var(--green-600);
  color: #fff;
}
.dos-page .status-step.is-done .step-label, .dos-page .status-step.is-done .status-step-label, .dos-page .status-step.state-done .step-label, .dos-page .status-step.state-done .status-step-label,
.dos-page .step.is-done .step-label,
.dos-page .step.is-done .status-step-label,
.dos-page .step.state-done .step-label,
.dos-page .step.state-done .status-step-label {
  color: var(--green-700);
}
.dos-page .status-step.is-pending, .dos-page .status-step.state-pending,
.dos-page .step.is-pending,
.dos-page .step.state-pending {
  border-color: var(--amber-200);
  background: var(--amber-50);
}
.dos-page .status-step.is-pending .step-icon, .dos-page .status-step.is-pending .status-step-icon, .dos-page .status-step.state-pending .step-icon, .dos-page .status-step.state-pending .status-step-icon,
.dos-page .step.is-pending .step-icon,
.dos-page .step.is-pending .status-step-icon,
.dos-page .step.state-pending .step-icon,
.dos-page .step.state-pending .status-step-icon {
  background: var(--amber-500);
  color: #fff;
}
.dos-page .status-step.is-pending .step-label, .dos-page .status-step.is-pending .status-step-label, .dos-page .status-step.state-pending .step-label, .dos-page .status-step.state-pending .status-step-label,
.dos-page .step.is-pending .step-label,
.dos-page .step.is-pending .status-step-label,
.dos-page .step.state-pending .step-label,
.dos-page .step.state-pending .status-step-label {
  color: var(--amber-800);
}
.dos-page .status-step.is-active, .dos-page .status-step.state-active,
.dos-page .step.is-active,
.dos-page .step.state-active {
  border-color: var(--enedis-blue-border);
  background: var(--enedis-blue-soft);
}
.dos-page .status-step.is-active .step-icon, .dos-page .status-step.is-active .status-step-icon, .dos-page .status-step.state-active .step-icon, .dos-page .status-step.state-active .status-step-icon,
.dos-page .step.is-active .step-icon,
.dos-page .step.is-active .status-step-icon,
.dos-page .step.state-active .step-icon,
.dos-page .step.state-active .status-step-icon {
  background: var(--enedis-blue);
  color: #fff;
}
.dos-page .status-step.is-active .step-label, .dos-page .status-step.is-active .status-step-label, .dos-page .status-step.state-active .step-label, .dos-page .status-step.state-active .status-step-label,
.dos-page .step.is-active .step-label,
.dos-page .step.is-active .status-step-label,
.dos-page .step.state-active .step-label,
.dos-page .step.state-active .status-step-label {
  color: var(--enedis-blue-deep);
}
.dos-page .status-step.is-todo, .dos-page .status-step.state-todo,
.dos-page .step.is-todo,
.dos-page .step.state-todo {
  opacity: 0.65;
}
.dos-page .status-step .step-icon, .dos-page .status-step .status-step-icon,
.dos-page .step .step-icon,
.dos-page .step .status-step-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--neutral-200);
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-bottom: 8px;
}
.dos-page .status-step .step-label, .dos-page .status-step .status-step-label,
.dos-page .step .step-label,
.dos-page .step .status-step-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}
.dos-page .status-step .step-value, .dos-page .status-step .status-step-value,
.dos-page .step .step-value,
.dos-page .step .status-step-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 4px;
}
.dos-page .status-step .step-date, .dos-page .status-step .status-step-date,
.dos-page .step .step-date,
.dos-page .step .status-step-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--neutral-500);
}
.dos-page .panel {
  /* Radios stylés en pill toggle */
}
.dos-page .panel .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.dos-page .panel .form-group label,
.dos-page .panel .form-group .form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
}
.dos-page .panel .form-group label .required,
.dos-page .panel .form-group .form-label .required {
  color: var(--red-600);
  margin-left: 2px;
}
.dos-page .panel .form-control {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-50);
  border-radius: 9px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--neutral-900);
  transition: all 160ms;
}
.dos-page .panel .form-control:hover:not(:focus):not(:disabled) {
  border-color: var(--neutral-300);
  background: #fff;
}
.dos-page .panel .form-control:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--enedis-blue) 14%, transparent);
}
.dos-page .panel textarea.form-control {
  min-height: 80px;
  line-height: 1.5;
  resize: vertical;
}
.dos-page .panel .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .dos-page .panel .form-grid {
    grid-template-columns: 1fr;
  }
}
.dos-page .panel .form-group.full,
.dos-page .panel .form-grid > .full {
  grid-column: 1/-1;
}
.dos-page .panel .form-actions,
.dos-page .panel .form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px dashed var(--neutral-200);
}
.dos-page .panel .form-actions > .footer-hint,
.dos-page .panel .form-footer > .footer-hint {
  margin-right: auto;
  font-size: 11.5px;
  color: var(--neutral-500);
  align-self: center;
}
.dos-page .panel .form-toggle-card,
.dos-page .panel .toggle-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--neutral-50);
  padding: 4px;
  border-radius: 10px;
  border: 1.5px solid var(--neutral-200);
  margin-bottom: 14px;
}
.dos-page .panel .form-toggle-card label,
.dos-page .panel .toggle-radios label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-500);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: all 150ms;
}
.dos-page .panel .form-toggle-card label input[type=radio],
.dos-page .panel .toggle-radios label input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dos-page .panel .form-toggle-card label:has(input:checked),
.dos-page .panel .toggle-radios label:has(input:checked) {
  background: #fff;
  color: var(--neutral-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--neutral-200);
}
.dos-page .btn-primary {
  background: var(--enedis-blue) !important;
  color: #fff !important;
}
.dos-page .btn-primary:hover:not(:disabled) {
  background: var(--enedis-blue-deep) !important;
}
.dos-page .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.dos-page .badge.b-green, .dos-page .badge.b-success {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.dos-page .badge.b-amber, .dos-page .badge.b-warning {
  background: var(--amber-50);
  color: var(--amber-800);
  border-color: var(--amber-200);
}
.dos-page .badge.b-red, .dos-page .badge.b-danger {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.dos-page .badge.b-blue, .dos-page .badge.b-info {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.dos-page .badge.b-grey, .dos-page .badge.b-gray, .dos-page .badge.b-muted {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.dos-page .charge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.dos-page .charge-pill.c-totale {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.dos-page .charge-pill.c-encours {
  background: var(--amber-50);
  color: var(--amber-800);
  border-color: var(--amber-200);
}
.dos-page .charge-pill.c-horsscope {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.dos-page .charge-pill.c-na {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
}
.dos-page .panel .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dos-page .panel .data-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  border-top: 1px solid var(--neutral-200);
}
.dos-page .panel .data-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
}
.dos-page .panel .data-table tbody tr:last-child td {
  border-bottom: none;
}
.dos-page .panel .data-table tbody tr:hover {
  background: rgba(20, 50, 250, 0.02);
}
.dos-page .billet-import {
  margin-bottom: 18px;
}
.dos-page .billet-drop {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: var(--enedis-blue-soft);
  border: 2px dashed var(--enedis-blue-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 200ms;
}
.dos-page .billet-drop:hover, .dos-page .billet-drop.is-dragover {
  background: color-mix(in srgb, var(--enedis-blue-soft) 80%, var(--enedis-blue));
  border-color: var(--enedis-blue);
  border-style: solid;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--enedis-blue) 35%, transparent);
}
.dos-page .billet-drop:hover .billet-drop-icon, .dos-page .billet-drop.is-dragover .billet-drop-icon {
  transform: scale(1.05);
}
.dos-page .billet-drop-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 25%, transparent);
  transition: transform 200ms;
}
.dos-page .billet-drop-text {
  flex: 1;
  min-width: 0;
}
.dos-page .billet-drop-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 3px;
}
.dos-page .billet-drop-text span {
  font-size: 12px;
  color: var(--neutral-600);
  line-height: 1.4;
}
.dos-page .billet-drop-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--enedis-blue);
  color: #fff;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.dos-page .billet-drop-cta i {
  font-size: 12px;
}
.dos-page .billet-status {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--neutral-700);
}
.dos-page .billet-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 40px;
  overflow-y: auto;
}
.dos-page .billet-modal[style*="display: none"], .dos-page .billet-modal[style*="display:none"] {
  display: none !important;
}
.dos-page .billet-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 16, 27, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dos-page .billet-modal-box {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dos-page .billet-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--neutral-100);
  background: linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 100%);
}
.dos-page .billet-modal-head h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dos-page .billet-modal-head h3 i {
  color: var(--enedis-blue);
  font-size: 13px;
}
.dos-page .billet-modal-head > div:first-child {
  flex: 1;
}
.dos-page .billet-modal-head span {
  font-size: 11.5px;
  color: var(--neutral-500);
}
.dos-page .billet-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: all 150ms;
}
.dos-page .billet-modal-close:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.dos-page .billet-modal-body {
  padding: 18px 22px;
  max-height: 60vh;
  overflow-y: auto;
  font-size: 13px;
}
.dos-page .billet-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.dos-page .trajet-empty {
  margin-top: 14px;
  padding: 22px;
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--enedis-blue-border);
  border-radius: var(--dos-radius);
}
.dos-page .te-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.dos-page .te-header h3 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
}
.dos-page .te-header p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-600);
}
.dos-page .te-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--enedis-blue) 0%, var(--enedis-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 12px -4px color-mix(in srgb, var(--enedis-blue) 35%, transparent), inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}
.dos-page .te-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .dos-page .te-choices {
    grid-template-columns: 1fr;
  }
}
.dos-page .te-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: all 200ms;
}
.dos-page .te-choice:hover {
  border-color: var(--enedis-blue);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--enedis-blue) 30%, transparent);
}
.dos-page .te-choice:hover .te-choice-icon {
  transform: scale(1.05) rotate(-3deg);
}
.dos-page .te-choice-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dos-page .te-choice-pdf .te-choice-icon {
  background: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--enedis-blue) 35%, transparent);
}
.dos-page .te-choice-body {
  flex: 1;
  min-width: 0;
}
.dos-page .te-choice-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 3px;
}
.dos-page .te-choice-sub {
  font-size: 11.5px;
  color: var(--neutral-500);
  line-height: 1.4;
}
.dos-page .te-choice-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  background: var(--enedis-blue);
  color: #fff;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dos-page .trajet-chain {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-border);
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dos-page .trajet-chain.chain-aller .chain-label > i {
  transform: none;
}
.dos-page .trajet-chain.chain-retour .chain-label > i {
  transform: none;
}
.dos-page .chain-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--enedis-blue);
  color: #fff;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dos-page .chain-label i {
  font-size: 10px;
}
.dos-page .chain-path {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-800);
}
.dos-page .chain-station {
  padding: 3px 9px;
  background: #fff;
  border: 1px solid var(--enedis-blue-border);
  border-radius: 6px;
  color: var(--enedis-blue-deep);
}
.dos-page .chain-station.chain-end {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
}
.dos-page .chain-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--enedis-blue);
  font-size: 11px;
}
.dos-page .chain-arrow small {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-500);
  font-weight: 600;
}
.dos-page .chain-count {
  font-size: 11px;
  color: var(--enedis-blue-deep);
  font-weight: 600;
  padding: 3px 9px;
  background: #fff;
  border-radius: 999px;
  flex-shrink: 0;
}
.dos-page .trajet-sens {
  margin-bottom: 16px;
}
.dos-page .trajet-sens-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 9px;
}
.dos-page .trajet-sens-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dos-page .trajet-sens-head h4 i {
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.dos-page .trajet-segments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dos-page .trajet-segment {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  transition: border-color 200ms, box-shadow 200ms;
}
.dos-page .trajet-segment:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.dos-page .trajet-segment::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: 12px 0 0 12px;
  opacity: 0.85;
}
.dos-page .trajet-segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--neutral-200);
}
.dos-page .trajet-segment-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1px solid var(--enedis-blue-border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.dos-page .trajet-segment-label i {
  font-size: 10px;
  color: var(--enedis-blue);
}
.dos-page .trajet-segment-remove {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 11px;
  transition: all 150ms;
}
.dos-page .trajet-segment-remove:hover {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.dos-page .panel .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.dos-page .panel .form-field.full {
  grid-column: 1/-1;
}
.dos-page .panel .form-field .form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dos-page .nuitee-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  transition: all 150ms;
}
.dos-page .nuitee-card:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.dos-page .nuitee-card.confirme {
  border-color: var(--green-200);
  background: var(--green-50);
}
.dos-page .nuitee-card.suggere {
  border-color: var(--amber-200);
  background: var(--amber-50);
}
.dos-page .nuitee-card strong {
  font-family: var(--font-mono);
  color: var(--neutral-900);
  font-size: 13px;
}
.dos-page .nuitee-card .sub {
  font-size: 12px;
  color: var(--neutral-600);
}
.dos-page .nuitee-card .actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.dos-page .transport-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dos-page .commission {
  margin-bottom: 14px;
}
.dos-page .commission .commission-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--neutral-700);
  border-bottom: 1px dashed var(--neutral-100);
}
.dos-page .commission .commission-row:last-child {
  border-bottom: none;
}
.dos-page .commission .commission-row > span:last-child {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
}
.dos-page .commission .commission-row.total {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-radius: 8px;
  margin-top: 6px;
  border-bottom: none;
  font-weight: 700;
}
.dos-page .commission .commission-row.total > span:last-child {
  color: var(--enedis-blue-deep);
  font-size: 14px;
}
.dos-page .commission.commission-grand-total {
  margin-top: 10px;
}
.dos-page .commission.commission-grand-total .commission-row.total {
  background: var(--enedis-blue);
  color: #fff;
  padding: 12px 14px;
  font-size: 14px;
}
.dos-page .commission.commission-grand-total .commission-row.total > span:last-child {
  color: #fff;
  font-size: 16px;
}
.dos-page .commission.commission-grand-total .commission-row.total i {
  margin-right: 6px;
  opacity: 0.85;
}
.dos-page .commission-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: 8px;
  font-size: 12px;
  color: var(--amber-800);
  margin: 6px 0;
}
.dos-page .commission-warn i {
  color: var(--amber-700);
  font-size: 11px;
}
.dos-page .suggestion-transport {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
  border: 1px solid transparent;
  /* — Variantes — */
}
.dos-page .suggestion-transport > i:first-child {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dos-page .suggestion-transport > div:last-child {
  flex: 1;
  min-width: 0;
}
.dos-page .suggestion-transport strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.dos-page .suggestion-transport p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.dos-page .suggestion-transport.suggestion-navette {
  background: var(--green-50);
  border-color: var(--green-200);
}
.dos-page .suggestion-transport.suggestion-navette > i:first-child {
  color: var(--green-700);
}
.dos-page .suggestion-transport.suggestion-navette strong {
  color: var(--green-800, #166534);
}
.dos-page .suggestion-transport.suggestion-navette p {
  color: var(--neutral-700);
}
.dos-page .suggestion-transport.suggestion-taxi {
  background: var(--amber-50);
  border-color: var(--amber-200);
}
.dos-page .suggestion-transport.suggestion-taxi > i:first-child {
  color: var(--amber-700);
}
.dos-page .suggestion-transport.suggestion-taxi strong {
  color: var(--amber-900, #78350F);
}
.dos-page .suggestion-transport.suggestion-taxi p {
  color: var(--amber-800);
}
.dos-page .suggestion-transport.suggestion-aucun {
  background: var(--neutral-50, #f8fafc);
  border-color: var(--neutral-200, #e2e8f0);
}
.dos-page .suggestion-transport.suggestion-aucun > i:first-child {
  color: var(--neutral-500, #64748b);
}
.dos-page .suggestion-transport.suggestion-aucun strong {
  color: var(--neutral-700, #334155);
}
.dos-page .suggestion-transport.suggestion-aucun p {
  color: var(--neutral-600, #475569);
}
.dos-page .suggestion-transport.suggestion-nuitee_veille, .dos-page .suggestion-transport.suggestion-nuitee_lendemain {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.dos-page .suggestion-transport.suggestion-nuitee_veille > i:first-child, .dos-page .suggestion-transport.suggestion-nuitee_lendemain > i:first-child {
  color: var(--enedis-blue);
}
.dos-page .suggestion-transport.suggestion-nuitee_veille strong, .dos-page .suggestion-transport.suggestion-nuitee_lendemain strong {
  color: var(--enedis-blue-deep);
}
.dos-page .suggestion-transport.suggestion-nuitee_veille p, .dos-page .suggestion-transport.suggestion-nuitee_lendemain p {
  color: var(--neutral-700);
}
.dos-page .suggestion-transport.suggestion-empty {
  background: var(--neutral-50);
  border-color: var(--neutral-200);
  border-style: dashed;
}
.dos-page .suggestion-transport.suggestion-empty > i:first-child {
  color: var(--neutral-500);
  background: #fff;
}
.dos-page .suggestion-transport.suggestion-empty strong {
  color: var(--neutral-900);
}
.dos-page .suggestion-transport.suggestion-empty p {
  color: var(--neutral-600);
}
.dos-page .navettes-recap {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.dos-page .nav-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--neutral-600);
}
.dos-page .nav-stat i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.dos-page .nav-stat strong {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
  font-size: 14px;
}
.dos-page .nav-stat span {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--neutral-500);
  font-size: 11px;
}
.dos-page .nav-stat.affected {
  background: var(--green-50);
  border-color: var(--green-200);
}
.dos-page .nav-stat.affected i {
  color: var(--green-600);
}
.dos-page .nav-stat.affected strong {
  color: var(--green-700);
}
.dos-page .nav-stat.affected span {
  color: var(--green-700);
}
.dos-page .transport-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dos-page .transport-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  transition: border-color 200ms, box-shadow 200ms;
}
.dos-page .transport-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: 12px 0 0 12px;
  opacity: 0;
  transition: opacity 200ms;
}
.dos-page .transport-card:hover {
  border-color: var(--enedis-blue-border);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
}
.dos-page .transport-card:hover::before {
  opacity: 0.85;
}
.dos-page .transport-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dos-page .transport-sens {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.dos-page .transport-sens.aller {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.dos-page .transport-sens.retour {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border-color: var(--neutral-200);
}
.dos-page .transport-time {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.4px;
}
.dos-page .transport-date {
  font-size: 12px;
  color: var(--neutral-600);
  font-weight: 600;
  text-transform: capitalize;
}
.dos-page .transport-places {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
  font-size: 11px;
  font-weight: 700;
}
.dos-page .transport-places.low {
  background: var(--amber-50);
  color: var(--amber-800);
  border-color: var(--amber-200);
}
.dos-page .transport-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--neutral-800);
  font-weight: 600;
  margin-bottom: 8px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.dos-page .transport-route > i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.dos-page .transport-extras {
  font-size: 11.5px;
  color: var(--neutral-500);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dos-page .transport-extras > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dos-page .transport-extras > span i {
  font-size: 10px;
  color: var(--neutral-400);
}
.dos-page .transport-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px dashed var(--neutral-200);
  flex-wrap: wrap;
}
.dos-page .transport-footer .info {
  font-size: 11.5px;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dos-page .transport-footer .info i {
  font-size: 10px;
}
.dos-page .repas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.dos-page .repas-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  position: relative;
  transition: border-color 200ms, box-shadow 200ms;
}
.dos-page .repas-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  opacity: 0.85;
}
.dos-page .repas-row.has-choice {
  background: #fff;
  border-color: var(--green-200);
}
.dos-page .repas-row.has-choice::before {
  background: var(--green-600);
}
.dos-page .repas-row.has-choice .repas-date {
  background: var(--green-50);
  border-color: var(--green-200);
}
.dos-page .repas-row.has-choice .repas-day-num {
  color: var(--green-700);
}
.dos-page .repas-row.pending {
  background: #fff;
}
.dos-page .repas-row.pending::before {
  background: var(--enedis-blue);
}
.dos-page .repas-row.pending .repas-date {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
}
.dos-page .repas-row.pending .repas-day-num {
  color: var(--enedis-blue);
}
.dos-page .repas-row:hover {
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--enedis-blue) 20%, transparent);
  border-color: var(--enedis-blue-border);
}
@media (max-width: 600px) {
  .dos-page .repas-row {
    grid-template-columns: 1fr;
  }
}
.dos-page .repas-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  min-width: 90px;
  background: var(--neutral-50);
}
@media (max-width: 600px) {
  .dos-page .repas-date {
    flex-direction: row;
    gap: 10px;
    min-width: 0;
  }
}
.dos-page .repas-day-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -1px;
  line-height: 1;
}
.dos-page .repas-day-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-700);
  margin-top: 6px;
}
.dos-page .repas-day-month {
  font-size: 10.5px;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.dos-page .repas-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dos-page .repas-body > .form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dos-page .restaurant-capacite {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid transparent;
  flex-wrap: wrap;
}
.dos-page .restaurant-capacite > i {
  font-size: 12px;
}
.dos-page .restaurant-capacite .capacite-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dos-page .restaurant-capacite .capacite-dispo {
  font-weight: 700;
}
.dos-page .restaurant-capacite .capacite-total {
  color: var(--neutral-500);
  font-size: 11px;
}
.dos-page .restaurant-capacite.is-illimite {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-border);
  color: var(--enedis-blue-deep);
}
.dos-page .restaurant-capacite.is-illimite > i {
  color: var(--enedis-blue);
}
.dos-page .restaurant-capacite.is-ok {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
}
.dos-page .restaurant-capacite.is-ok .capacite-bullet {
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 25%, transparent);
}
.dos-page .restaurant-capacite.is-ok .capacite-total {
  color: var(--green-700);
  opacity: 0.7;
}
.dos-page .restaurant-capacite.is-low {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-800);
}
.dos-page .restaurant-capacite.is-low .capacite-bullet {
  background: var(--amber-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber-500) 25%, transparent);
}
.dos-page .restaurant-capacite.is-low .capacite-total {
  color: var(--amber-700);
  opacity: 0.7;
}
.dos-page .restaurant-capacite.is-full {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-700);
}
.dos-page .restaurant-capacite.is-full .capacite-bullet {
  background: var(--red-600);
}
.dos-page .restaurant-capacite.is-full .capacite-total {
  color: var(--red-700);
  opacity: 0.7;
}
.dos-page .repas-extra {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.dos-page .form-label-sm {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.dos-page .repas-cost-summary {
  margin-top: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--enedis-blue-border);
  border-radius: 12px;
}
.dos-page .repas-cost-summary .rcs-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--enedis-blue-deep);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dos-page .repas-cost-summary .rcs-title i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.dos-page .repas-cost-summary .rcs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--neutral-700);
  border-bottom: 1px dashed var(--enedis-blue-border);
}
.dos-page .repas-cost-summary .rcs-row:last-child {
  border-bottom: none;
}
.dos-page .repas-cost-summary .rcs-row.rcs-total {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--enedis-blue);
  color: #fff;
  border-radius: 9px;
  border-bottom: none;
  font-weight: 700;
  font-size: 13px;
}
.dos-page .repas-cost-summary .rcs-row.rcs-total strong {
  font-family: var(--font-mono);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.dos-page .repas-cost-summary .rcs-warn {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--amber-800);
}
.dos-page .repas-cost-summary .rcs-warn i {
  color: var(--amber-700);
  font-size: 11px;
}
.dos-page .section-h .count {
  margin-left: auto;
  padding: 2px 9px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border: 1px solid var(--enedis-blue-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.dos-page .alert {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  align-items: flex-start;
  border: 1px solid transparent;
}
.dos-page .alert > i:first-child {
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.dos-page .alert > div {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
  font-size: 13px;
}
.dos-page .alert.alert-info {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-deep);
  border-color: var(--enedis-blue-border);
}
.dos-page .alert.alert-info > i {
  color: var(--enedis-blue);
}
.dos-page .alert.alert-warning {
  background: var(--amber-50);
  color: var(--amber-800);
  border-color: var(--amber-200);
}
.dos-page .alert.alert-warning > i {
  color: var(--amber-700);
}
.dos-page .alert.alert-success {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-200);
}
.dos-page .alert.alert-success > i {
  color: var(--green-600);
}
.dos-page .alert.alert-danger {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.dos-page .alert.alert-danger > i {
  color: var(--red-600);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes dosRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dosFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dosPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-600) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-600) 0%, transparent);
  }
}
.dos-page .hb-hotel-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 16px;
  border: 1px solid var(--neutral-100);
  border-radius: 11px;
}
.dos-page .hb-hotel-row .hb-hotel-ico {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #EDF1F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.dos-page .hb-hotel-row .hb-hotel-ico i {
  color: #1D2D5C;
  font-size: 19px;
}
.dos-page .hb-hotel-row .hb-hotel-main {
  flex: 1;
  min-width: 0;
}
.dos-page .hb-hotel-row .hb-hotel-name {
  font-size: 15px;
  font-weight: 800;
  color: #1D2D5C;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dos-page .hb-hotel-row .hb-stars i {
  color: #E0A93B;
  font-size: 10.5px;
  margin-right: 1px;
}
.dos-page .hb-hotel-row .hb-hotel-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: #7A8298;
  margin-top: 3px;
}
.dos-page .hb-hotel-row .hb-formule-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}
.dos-page .hb-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.dos-page .hb-stat-grid .hb-stat-k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9AA1B2;
}
.dos-page .hb-stat-grid .hb-stat-v {
  font-size: 13.5px;
  font-weight: 700;
  color: #1D2D5C;
  margin-top: 3px;
}
.dos-page .hb-stat-grid .hb-stat-v.is-green {
  color: var(--green-700);
}
.dos-page .hb-resto-intro {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #5A6273;
  line-height: 1.55;
}
.dos-page .hb-soirs-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A92A3;
  margin-bottom: 10px;
}
.dos-page .hb-soirs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.dos-page .hb-soir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dos-page .hb-soir input {
  display: none;
}
.dos-page .hb-soir .hb-soir-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #CBD3E1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.1s, border-color 0.1s;
}
.dos-page .hb-soir .hb-soir-box i {
  color: #fff;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.1s;
}
.dos-page .hb-soir .hb-soir-label {
  font-size: 13px;
  font-weight: 700;
  color: #5A6273;
}
.dos-page .hb-soir:has(input:checked) {
  background: var(--green-50);
  border-color: var(--green-200);
}
.dos-page .hb-soir:has(input:checked) .hb-soir-box {
  background: var(--green-600);
  border-color: var(--green-600);
}
.dos-page .hb-soir:has(input:checked) .hb-soir-box i {
  opacity: 1;
}
.dos-page .hb-soir:has(input:checked) .hb-soir-label {
  color: var(--green-800, #2E5320);
}
.dos-page .hb-soirs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--neutral-100);
}
.dos-page .hb-soirs-foot .hb-soirs-count {
  font-size: 12.5px;
  font-weight: 700;
  color: #7A8298;
}
.dos-page .hb-soirs-foot .hb-soirs-count b {
  color: #1D2D5C;
}
.dos-page .hb-btn-green {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border: none;
  border-radius: 9px;
  background: var(--green-600);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s;
}
.dos-page .hb-btn-green:hover {
  background: var(--green-500, #5BB33E);
}
.dos-page .hb-btn-green i {
  font-size: 13px;
}
.dos-page .tp-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: 16px;
  background: #EEF3FC;
  border: 1px solid #D3E0F5;
  border-radius: 11px;
}
.dos-page .tp-info > i {
  color: #34508C;
  font-size: 15px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.dos-page .tp-info .tp-info-title {
  font-size: 13px;
  font-weight: 800;
  color: #1D2D5C;
}
.dos-page .tp-info .tp-info-sub {
  font-size: 12px;
  font-weight: 600;
  color: #4E5A75;
  margin-top: 2px;
  line-height: 1.5;
}
.dos-page .tp-pnr {
  display: flex;
  align-items: stretch;
  gap: 11px;
  flex-wrap: wrap;
}
.dos-page .tp-pnr .tp-pnr-field {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 13px;
  border: 1px solid #DEE3EC;
  border-radius: 10px;
  background: #F7F8FB;
  transition: border-color 0.12s, background 0.12s;
}
.dos-page .tp-pnr .tp-pnr-field > i {
  color: #9AA1B2;
  font-size: 15px;
  flex: 0 0 auto;
}
.dos-page .tp-pnr .tp-pnr-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: #1D2D5C;
  letter-spacing: 0.03em;
}
.dos-page .tp-pnr .tp-pnr-field:focus-within {
  border-color: var(--enedis-blue);
  background: #fff;
}
.dos-page .tp-pnr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 17px;
  border: none;
  border-radius: 10px;
  background: #1D2D5C;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s;
}
.dos-page .tp-pnr-btn:hover {
  background: #27396E;
}
.dos-page .tp-empty {
  border: 1.5px dashed #D2D8E2;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
}
.dos-page .tp-empty-ico {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: #F2F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.dos-page .tp-empty-ico i {
  color: #9AA1B2;
  font-size: 22px;
}
.dos-page .tp-empty-title {
  font-size: 14px;
  font-weight: 800;
  color: #1D2D5C;
}
.dos-page .tp-empty-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: #7A8298;
  max-width: 360px;
  margin: 5px auto 0;
  line-height: 1.5;
}
.dos-page .tp-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid #DEE3EC;
  background: #fff;
  color: #324063;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.dos-page .tp-empty-btn:hover {
  background: #F4F6FA;
}
.dos-page .tp-empty-btn.is-ghost {
  color: #7A8298;
}
.dos-page .tp-transferts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .dos-page .tp-transferts {
    grid-template-columns: 1fr;
  }
}
.dos-page .tp-trf-locked {
  border: 1.5px dashed #D2D8E2;
  border-radius: 11px;
  padding: 22px 16px;
  text-align: center;
}
.dos-page .tp-trf-locked .tp-trf-locked-title {
  font-size: 13px;
  font-weight: 800;
  color: #9AA1B2;
}
.dos-page .tp-trf-locked .tp-trf-locked-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #A7AEBD;
  margin-top: 4px;
  line-height: 1.5;
}
.dos-page .tp-trf-when {
  font-size: 11.5px;
  font-weight: 600;
  color: #7A8298;
  margin-bottom: 11px;
}
.dos-page .tp-trf-when b {
  color: #1D2D5C;
}
.dos-page .ms-link {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #DEE3EC;
  border-radius: 10px;
  background: #F7F8FB;
}
.dos-page .ms-link input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #34508C;
  font-family: ui-monospace, monospace;
}
.dos-page .ms-copy {
  flex: 0 0 auto;
  border: none;
  background: #1D2D5C;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
}
.dos-page .ms-copy:hover {
  background: #27396E;
}
.dos-page .trajet-sens {
  margin-bottom: 18px;
}
.dos-page .trajet-sens-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.dos-page .trajet-sens-head h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.dos-page .trajet-sens-head .ts-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: #34508C;
  background: #E3EAF6;
  border-radius: 7px;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dos-page .trajet-sens-head .ts-chip i {
  font-size: 11px;
}
.dos-page .trajet-sens-head .ts-date {
  font-size: 12.5px;
  font-weight: 700;
  color: #7A8298;
}
.dos-page .trajet-sens-head .btn {
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid #DEE3EC;
  background: #fff;
  color: #324063;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}
.dos-page .trajet-sens-head .btn i {
  color: #6CC04A;
}
.dos-page .trajet-sens-head .btn:hover {
  background: #F4F6FA;
  border-color: #DEE3EC;
  color: #324063;
}
.dos-page .trajet-segment {
  position: relative;
  border: 1px solid #E4E8F0;
  border-left: 3px solid #6CC04A;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  box-shadow: none;
}
.dos-page .trajet-segment::before {
  display: none;
}
.dos-page .trajet-segment:hover {
  box-shadow: none;
  border-color: #E4E8F0;
  border-left-color: #6CC04A;
}
.dos-page .trajet-segment + .trajet-segment {
  margin-top: 12px;
}
.dos-page .trajet-sens[data-sens=retour] .trajet-segment {
  border-left-color: #34508C;
}
.dos-page .trajet-sens[data-sens=retour] .trajet-segment:hover {
  border-left-color: #34508C;
}
.dos-page .trajet-segment .trajet-segment-head {
  display: none;
}
.dos-page .trajet-segment .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.dos-page .trajet-segment .form-field {
  margin: 0;
}
.dos-page .trajet-segment .form-field.full {
  grid-column: 1/-1;
}
.dos-page .trajet-segment .form-label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8A92A3;
  margin-bottom: 6px;
}
.dos-page .trajet-segment .form-control {
  width: 100%;
  height: 40px;
  border: 1px solid #DEE3EC;
  border-radius: 9px;
  background: #F7F8FB;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1D2D5C;
  outline: none;
  box-shadow: none;
}
.dos-page .trajet-segment .form-control:focus {
  border-color: #6CC04A;
  background: #fff;
}
.dos-page .trajet-segment .form-control.mono {
  font-family: ui-monospace, monospace;
}
.dos-page .trajet-segment select.form-control {
  font-weight: 700;
  cursor: pointer;
}
.dos-page .trajet-segment .input-with-suffix {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid #DEE3EC;
  border-radius: 9px;
  background: #F7F8FB;
  padding: 0 4px 0 12px;
}
.dos-page .trajet-segment .input-with-suffix .form-control {
  border: none;
  background: transparent;
  height: 38px;
  padding: 0;
}
.dos-page .trajet-segment .input-with-suffix .input-suffix {
  width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #7A8298;
  border-left: 1px solid #DEE3EC;
  line-height: 40px;
}
.dos-page .trajet-costs {
  border: 1px solid #D3E0F5;
  background: #F5F8FD;
  border-radius: 12px;
  padding: 14px 16px;
}
.dos-page .trajet-costs .tc-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #34508C;
  margin-bottom: 8px;
}
.dos-page .trajet-costs .tc-title i {
  color: #34508C;
}
.dos-page .trajet-costs .tc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.dos-page .trajet-costs .tc-row span {
  color: #5A6273;
  font-weight: 700;
}
.dos-page .trajet-costs .tc-row strong {
  color: #1D2D5C;
  font-weight: 800;
}
.dos-page .trajet-costs .tc-total {
  padding-top: 9px;
  margin-top: 2px;
  font-size: 14px;
  border-top: 1px solid #DCE4F2;
}
.dos-page .trajet-costs .tc-total span {
  color: #34508C;
  font-weight: 800;
}
.dos-page .tp-trajet-foot {
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 18px;
  margin-bottom: 26px;
}
.dos-page .tp-trajet-foot .thrips-proof {
  position: relative;
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
}
.dos-page .tp-trajet-foot .trajet-costs {
  flex: 0 0 300px;
  margin-top: 0;
}
.dos-page .tp-cap-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8A92A3;
  margin-bottom: 8px;
}
.dos-page .tp-cap-thumb {
  display: block;
  border: 1px solid #E4E8F0;
  border-radius: 11px;
  overflow: hidden;
  max-height: 150px;
  cursor: pointer;
}
.dos-page .tp-cap-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: cover;
  object-position: top;
}
.dos-page .tp-cap-thumb:hover {
  border-color: #6CC04A;
}
.dos-page .tp-cap-cap {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #9AA1B2;
}

.dos-editcard [hidden] {
  display: none !important;
}
.dos-editcard .card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dos-editcard .dos-edit-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #DEE3EC;
  border-radius: 8px;
  background: #fff;
  color: #34508C;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.dos-editcard .dos-edit-toggle i {
  font-size: 11px;
}
.dos-editcard .dos-edit-toggle:hover {
  background: #F5F8FD;
  border-color: #C7D6EE;
}
.dos-editcard .dos-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #EEF1F6;
}
.dos-editcard .dos-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dos-editcard .dos-checks .dos-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #324063;
  cursor: pointer;
}
.dos-editcard .dos-checks .dos-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: #6CC04A;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   MON SÉJOUR — Landing page full-width (refonte-v2)
   Scope : .lp-stagiaire — page publique stagiaire (token).
   Le wrapper prend tout le viewport, header public Enedis +
   contenu en max-width 1600px centré.
   ═══════════════════════════════════════════════════════════════ */
.lp-stagiaire {
  --n-0: #FFFFFF;
  --n-25: #FCFCFD;
  --n-50: #F8F9FB;
  --n-100: #EFF1F4;
  --n-200: #DCDFE5;
  --n-300: #C2C7D1;
  --n-400: #8E96A4;
  --n-500: #646C7A;
  --n-600: #4A515E;
  --n-700: #363B45;
  --n-800: #23272F;
  --n-900: #13161B;
  --accent-50: #FFF1F2;
  --accent-100: #FFE4E6;
  --accent-300: #FDA4AF;
  --accent-500: #F43F5E;
  --accent-600: #E11D48;
  --accent-700: #BE123C;
  --green-50: #ECFDF5;
  --green-100: #D1FAE5;
  --green-500: #10B981;
  --green-600: #059669;
  --green-700: #047857;
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-500: #3B82F6;
  --blue-700: #1D4ED8;
  --violet-50: #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-500: #8B5CF6;
  --violet-700: #6D28D9;
  --shadow-sm: 0 1px 2px rgba(13, 16, 27, .05);
  --shadow: 0 1px 3px rgba(13, 16, 27, .06), 0 1px 2px rgba(13, 16, 27, .04);
  --shadow-md: 0 4px 8px -2px rgba(13, 16, 27, .08), 0 2px 4px -2px rgba(13, 16, 27, .06);
  --shadow-lg: 0 12px 24px -8px rgba(13, 16, 27, .12), 0 4px 8px -4px rgba(13, 16, 27, .06);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--n-50);
  color: var(--n-900);
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* ───────── PUBLIC HEADER ───────── */
  /* ───────── PAGE / FULL WIDTH ───────── */
  /* ───────── HERO ───────── */
  /* Hero right — countdown */
  /* ───────── SECTION HEADER ───────── */
  /* ───────── QUICK FACTS ───────── */
  /* ───────── CARDS ───────── */
  /* ───────── BADGES ───────── */
  /* ───────── PROMO ───────── */
  /* ── Carte formateur "premium" (validée via Impeccable live) ───── */
  /* ───────── 2-COL ROW ───────── */
  /* ───────── FORMATION ───────── */
  /* ───────── HÉBERGEMENT ───────── */
  /* ───────── BTN ───────── */
  /* ───────── TRAJET (web card, pas boarding pass) ───────── */
  /* ───────── ALERT STRIP (navette en attente) ───────── */
  /* ───────── REPAS ───────── */
  /* ───────── SUPPORT FOOTER ───────── */
  /* ───────── PROMO CHAT (Espace promo) ───────── */
  /* ───────── PHOTOS SOUVENIRS (galerie) ───────── */
  /* Lightbox plein écran */
  /* ───────── INLINE CONTACT FORM (déroule sous Support) ───────── */
  /* ───────── BREAKPOINTS ───────── */
  /* ───────── NAVIGATION DU MINI-SITE ───────── */
  /* ───────── TUILES D'ACCÈS (ACCUEIL) ───────── */
}
.lp-stagiaire .text-mono {
  font-family: var(--font-mono);
}
.lp-stagiaire .tnum {
  font-variant-numeric: tabular-nums;
}
.lp-stagiaire .lp-hd {
  background: var(--n-0);
  border-bottom: 1px solid var(--n-100);
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-stagiaire .lp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.lp-stagiaire .lp-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1E40AF, #0EA5E9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.lp-stagiaire .lp-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.lp-stagiaire .lp-logo-text {
  font-size: 14px;
  font-weight: 800;
  color: #1E40AF;
  letter-spacing: 0.3px;
  line-height: 1;
}
.lp-stagiaire .lp-logo-text small {
  display: block;
  font-size: 10.5px;
  color: var(--n-500);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-top: 3px;
  text-transform: uppercase;
}
.lp-stagiaire .lp-spacer {
  flex: 1;
}
.lp-stagiaire .lp-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--n-500);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--n-50);
  border: 1px solid var(--n-100);
}
.lp-stagiaire .lp-secure i {
  color: var(--green-600);
  font-size: 11px;
}
.lp-stagiaire .lp-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--n-700);
  cursor: pointer;
  font-weight: 500;
  border: 1px solid var(--n-200);
  background: var(--n-0);
  text-decoration: none;
  font-family: inherit;
}
.lp-stagiaire .lp-help:hover {
  border-color: var(--n-300);
}
.lp-stagiaire .lp-help i {
  color: var(--n-500);
}
.lp-stagiaire .page {
  padding: 32px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.lp-stagiaire .page-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lp-stagiaire .hero {
  background: linear-gradient(120deg, #1e3a8a 0%, #0d9488 55%, #06b6d4 110%);
  border-radius: 16px;
  padding: 32px 40px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.lp-stagiaire .hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.lp-stagiaire .hero::before {
  content: "";
  position: absolute;
  right: 80px;
  bottom: -100px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.lp-stagiaire .hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.lp-stagiaire .hero-eyebrows {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lp-stagiaire .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.lp-stagiaire .hero-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
}
.lp-stagiaire .hero h1 {
  margin: 0 0 12px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
}
.lp-stagiaire .hero h1 .wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: lp-wave 2.5s ease-in-out infinite;
}
@keyframes lp-wave {
  0%, 100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(14deg);
  }
  30% {
    transform: rotate(-8deg);
  }
  45% {
    transform: rotate(14deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(10deg);
  }
}
.lp-stagiaire .hero p {
  margin: 0 0 20px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  max-width: 480px;
}
.lp-stagiaire .hero p mark {
  background: rgba(255, 255, 255, 0.22);
  color: white;
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.lp-stagiaire .hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-stagiaire .hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms;
  border: none;
  font-family: inherit;
}
.lp-stagiaire .hero-btn-primary {
  background: white;
  color: var(--accent-700);
}
.lp-stagiaire .hero-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2);
}
.lp-stagiaire .hero-btn-ghost {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.lp-stagiaire .hero-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.25);
}
.lp-stagiaire .hero-right {
  align-self: stretch; /* s'étire sur la hauteur du contenu de gauche */
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 0; /* l'image du campus remplit la carte */
  overflow: hidden;
  min-height: 240px;
}
.lp-stagiaire .hero-campus-img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}
.lp-stagiaire .hero-campus-ph {
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}
.lp-stagiaire .hero-campus-ph i {
  font-size: 42px;
  opacity: 0.7;
}
.lp-stagiaire .hero-campus-ph span {
  font-size: 15.5px;
  font-weight: 700;
  text-wrap: balance;
}
.lp-stagiaire .hero-right-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}
.lp-stagiaire .hero-countdown {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.lp-stagiaire .hero-countdown .num {
  font-size: 64px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.lp-stagiaire .hero-countdown .lbl {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  padding-bottom: 8px;
  font-weight: 500;
}
.lp-stagiaire .hero-dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.lp-stagiaire .hero-date {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lp-stagiaire .hero-date-v {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lp-stagiaire .hero-date-d {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}
.lp-stagiaire .hero-arrow {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
}
.lp-stagiaire .sect-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  padding: 0 4px;
}
.lp-stagiaire .sect-h h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--n-900);
  letter-spacing: -0.2px;
}
.lp-stagiaire .sect-h .sect-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.lp-stagiaire .sect-h .badge {
  margin-left: 6px;
}
.lp-stagiaire .sect-h .sub {
  color: var(--n-500);
  font-size: 12.5px;
  font-weight: 500;
  margin-left: auto;
}
.lp-stagiaire .sect-h a.sub {
  color: var(--accent-600);
  text-decoration: none;
  cursor: pointer;
}
.lp-stagiaire .facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 12px;
  overflow: hidden;
}
.lp-stagiaire .fact {
  padding: 18px 20px;
  border-right: 1px solid var(--n-100);
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-stagiaire .fact:last-child {
  border-right: none;
}
.lp-stagiaire .fact-ic {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.lp-stagiaire .fact-l {
  font-size: 11px;
  color: var(--n-500);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.lp-stagiaire .fact-v {
  font-size: 18px;
  font-weight: 700;
  color: var(--n-900);
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.lp-stagiaire .fact-v small {
  font-size: 12px;
  font-weight: 500;
  color: var(--n-500);
  margin-left: 4px;
}
.lp-stagiaire .card {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 12px;
  overflow: hidden;
}
.lp-stagiaire .card-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--n-100);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-stagiaire .card-h h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--n-900);
}
.lp-stagiaire .card-h .sub {
  color: var(--n-500);
  font-size: 11.5px;
  margin-left: auto;
}
.lp-stagiaire .card-b {
  padding: 18px;
}
.lp-stagiaire .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.lp-stagiaire .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.lp-stagiaire .badge.badge-flat {
  padding: 2px 8px;
}
.lp-stagiaire .badge.badge-flat::before {
  display: none;
}
.lp-stagiaire .badge.b-success {
  background: var(--green-50);
  color: var(--green-700);
}
.lp-stagiaire .badge.b-warn {
  background: var(--amber-50);
  color: var(--amber-700);
}
.lp-stagiaire .badge.b-info {
  background: var(--blue-50);
  color: var(--blue-700);
}
.lp-stagiaire .badge.b-violet {
  background: var(--violet-50);
  color: var(--violet-700);
}
.lp-stagiaire .badge.b-neutral {
  background: var(--n-100);
  color: var(--n-700);
}
.lp-stagiaire .badge.b-danger {
  background: var(--red-50);
  color: var(--red-700);
}
.lp-stagiaire .promo-grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 16px;
}
.lp-stagiaire .pf-card {
  background: linear-gradient(135deg, #fdf2f8, #fff7ed);
  border: 1px solid var(--accent-100);
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lp-stagiaire .pf-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.08), transparent 65%);
  pointer-events: none;
}
.lp-stagiaire .pf-row {
  display: flex;
  gap: 18px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.lp-stagiaire .pf-av {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  color: white;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  box-shadow: 0 10px 24px -8px rgba(168, 85, 247, 0.5);
  flex-shrink: 0;
  border: 4px solid white;
}
.lp-stagiaire .pf-info {
  flex: 1;
  min-width: 0;
}
.lp-stagiaire .pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-700);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: white;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.lp-stagiaire .pf-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--n-900);
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin: 8px 0 4px;
}
.lp-stagiaire .pf-formation {
  font-size: 12.5px;
  color: var(--n-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-stagiaire .pf-formation i {
  color: var(--n-400);
}
.lp-stagiaire .pf-quote {
  font-size: 13px;
  color: var(--n-700);
  line-height: 1.55;
  padding: 14px 16px;
  background: white;
  border-left: 3px solid var(--accent-500);
  border-radius: 6px;
  font-style: italic;
  position: relative;
  z-index: 1;
}
.lp-stagiaire .pf-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--accent-600);
  color: white;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition: transform 0.12s, background 0.12s;
}
.lp-stagiaire .pf-cta:hover {
  transform: translateY(-1px);
  background: var(--accent-700);
}
.lp-stagiaire .promo-formateur {
  background: linear-gradient(135deg, #fdf2f8, #fff7ed);
  border: 1px solid var(--accent-100);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.lp-stagiaire .promo-formateur::after {
  content: "FORMATEUR";
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-600);
  letter-spacing: 1px;
}
.lp-stagiaire .promo-av-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  box-shadow: 0 6px 12px -4px rgba(168, 85, 247, 0.4);
  flex-shrink: 0;
}
.lp-stagiaire .promo-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--n-900);
  letter-spacing: -0.3px;
}
.lp-stagiaire .promo-meta {
  font-size: 12.5px;
  color: var(--n-600);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-stagiaire .promo-meta i {
  color: var(--n-400);
  width: 14px;
}
.lp-stagiaire .promo-mates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lp-stagiaire .promo-mate {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 150ms;
  cursor: pointer;
  position: relative;
}
.lp-stagiaire .promo-mate:hover {
  border-color: var(--n-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.lp-stagiaire .promo-mate.is-me {
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
  border-color: var(--green-100);
}
.lp-stagiaire .promo-mate.is-placeholder {
  background: var(--n-50);
  border-style: dashed;
  justify-content: center;
  cursor: default;
}
.lp-stagiaire .promo-mate.is-placeholder:hover {
  transform: none;
  box-shadow: none;
}
.lp-stagiaire .promo-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.lp-stagiaire .promo-mate-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--n-900);
}
.lp-stagiaire .promo-mate-meta {
  font-size: 11.5px;
  color: var(--n-500);
  margin-top: 2px;
}
.lp-stagiaire .promo-mate-meta .dr {
  font-weight: 600;
  color: var(--n-700);
}
.lp-stagiaire .promo-mate-tag-me {
  font-size: 9px;
  font-weight: 800;
  color: var(--green-700);
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}
.lp-stagiaire .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lp-stagiaire .form-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-stagiaire .form-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--n-900);
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.lp-stagiaire .form-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--n-100);
  color: var(--n-700);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  align-self: flex-start;
}
.lp-stagiaire .kv-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  font-size: 13px;
}
.lp-stagiaire .kv-grid .k {
  color: var(--n-500);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.lp-stagiaire .kv-grid .k i {
  color: var(--n-400);
  width: 14px;
  text-align: center;
  font-size: 12px;
}
.lp-stagiaire .kv-grid .v {
  color: var(--n-900);
  font-weight: 600;
}
.lp-stagiaire .kv-grid .v.tnum {
  font-variant-numeric: tabular-nums;
}
.lp-stagiaire .hot-img {
  height: 120px;
  background: linear-gradient(135deg, #a78bfa, #ec4899);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 36px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.lp-stagiaire .hot-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='white' stroke-opacity='.15' stroke-width='1'><rect x='10' y='30' width='100' height='80'/><line x1='10' y1='50' x2='110' y2='50'/><line x1='10' y1='70' x2='110' y2='70'/><line x1='10' y1='90' x2='110' y2='90'/><line x1='30' y1='30' x2='30' y2='110'/><line x1='60' y1='30' x2='60' y2='110'/><line x1='90' y1='30' x2='90' y2='110'/></g></svg>");
}
.lp-stagiaire .hot-img i {
  position: relative;
  z-index: 1;
}
.lp-stagiaire .hot-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--n-900);
  margin-bottom: 4px;
}
.lp-stagiaire .hot-addr {
  font-size: 12.5px;
  color: var(--n-600);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}
.lp-stagiaire .hot-addr i {
  color: var(--accent-500);
  margin-top: 2px;
}
.lp-stagiaire .hot-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  background: var(--n-50);
  border-radius: 10px;
  margin-bottom: 12px;
}
.lp-stagiaire .hot-check-l {
  font-size: 10px;
  font-weight: 700;
  color: var(--n-500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lp-stagiaire .hot-check-v {
  font-size: 14px;
  font-weight: 700;
  color: var(--n-900);
}
.lp-stagiaire .hot-check-d {
  font-size: 11.5px;
  color: var(--n-500);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.lp-stagiaire .hot-actions {
  display: flex;
  gap: 8px;
}
.lp-stagiaire .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 120ms;
  white-space: nowrap;
  font-family: inherit;
}
.lp-stagiaire .btn-primary {
  background: var(--n-900);
  color: white;
}
.lp-stagiaire .btn-primary:hover {
  background: var(--n-800);
}
.lp-stagiaire .btn-accent {
  background: var(--accent-600);
  color: white;
}
.lp-stagiaire .btn-accent:hover {
  background: var(--accent-700);
}
.lp-stagiaire .btn-outline {
  background: var(--n-0);
  color: var(--n-700);
  border-color: var(--n-200);
}
.lp-stagiaire .btn-outline:hover {
  background: var(--n-50);
  border-color: var(--n-300);
  color: var(--n-900);
}
.lp-stagiaire .btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}
.lp-stagiaire .btn-block {
  width: 100%;
}
.lp-stagiaire .trip {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-stagiaire .trip-mode {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue-500), var(--violet-500));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.lp-stagiaire .trip-mode.is-retour {
  background: linear-gradient(135deg, var(--violet-500), var(--blue-500));
}
.lp-stagiaire .trip-mode.is-avion {
  background: linear-gradient(135deg, #0EA5E9, var(--violet-500));
}
.lp-stagiaire .trip-mode.is-voiture {
  background: linear-gradient(135deg, var(--amber-500), #F97316);
}
.lp-stagiaire .trip-train {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--violet-700);
  background: var(--violet-50);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.lp-stagiaire .trip-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
}
.lp-stagiaire .trip-station {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-stagiaire .trip-station.right {
  text-align: right;
}
.lp-stagiaire .trip-time {
  font-size: 24px;
  font-weight: 700;
  color: var(--n-900);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lp-stagiaire .trip-code {
  font-size: 11px;
  font-weight: 700;
  color: var(--n-500);
  letter-spacing: 0.5px;
}
.lp-stagiaire .trip-station-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--n-800);
}
.lp-stagiaire .trip-station-meta {
  font-size: 11.5px;
  color: var(--n-500);
}
.lp-stagiaire .trip-line-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  min-width: 80px;
  gap: 6px;
}
.lp-stagiaire .trip-duration {
  font-size: 11px;
  font-weight: 600;
  color: var(--n-500);
}
.lp-stagiaire .trip-track {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--violet-500));
  position: relative;
  border-radius: 1px;
}
.lp-stagiaire .trip-track::before, .lp-stagiaire .trip-track::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.lp-stagiaire .trip-track::before {
  left: 0;
  background: var(--blue-500);
}
.lp-stagiaire .trip-track::after {
  right: 0;
  background: var(--violet-500);
}
.lp-stagiaire .trip-track.is-retour {
  background: linear-gradient(90deg, var(--violet-500), var(--blue-500));
}
.lp-stagiaire .trip-track.is-retour::before {
  background: var(--violet-500);
}
.lp-stagiaire .trip-track.is-retour::after {
  background: var(--blue-500);
}
.lp-stagiaire .trip-arrow-ic {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--n-600);
  font-size: 11px;
}
.lp-stagiaire .trip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--n-200);
  font-size: 12px;
  color: var(--n-600);
}
.lp-stagiaire .trip-foot-l {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-stagiaire .trip-foot-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-stagiaire .trip-foot-item i {
  color: var(--n-400);
}
.lp-stagiaire .trip-foot-item .v {
  font-weight: 600;
  color: var(--n-800);
}
.lp-stagiaire .alert-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--amber-50);
  border: 1px solid var(--amber-100);
  border-left: 3px solid var(--amber-500);
  border-radius: 10px;
}
.lp-stagiaire .alert-strip-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--amber-100);
  color: var(--amber-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.lp-stagiaire .alert-strip-body {
  flex: 1;
}
.lp-stagiaire .alert-strip-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--n-900);
}
.lp-stagiaire .alert-strip-d {
  font-size: 12px;
  color: var(--n-600);
  margin-top: 2px;
}
.lp-stagiaire .meals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.lp-stagiaire .meal {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-stagiaire .meal-day {
  font-size: 10px;
  font-weight: 700;
  color: var(--n-500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.lp-stagiaire .meal-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--n-900);
}
.lp-stagiaire .meal-name.is-pending {
  color: var(--n-500);
  font-style: italic;
}
.lp-stagiaire .meal-resto {
  font-size: 11.5px;
  color: var(--n-600);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-stagiaire .meal-resto i {
  color: var(--accent-500);
}
.lp-stagiaire .meal-horaire {
  font-size: 11.5px;
  color: var(--n-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.lp-stagiaire .meal-horaire i {
  color: var(--accent-500);
  font-size: 10.5px;
}
.lp-stagiaire .meal-horaire strong {
  font-weight: 700;
  color: var(--n-900);
  font-variant-numeric: tabular-nums;
}
.lp-stagiaire .support {
  background: linear-gradient(135deg, var(--n-900), #312E81);
  color: white;
  border-radius: 14px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 20px;
  align-items: center;
}
.lp-stagiaire .support-ic {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.lp-stagiaire .support-l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.lp-stagiaire .support-t {
  font-size: 18px;
  font-weight: 700;
  margin-top: 3px;
}
.lp-stagiaire .support-d {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 2px;
}
.lp-stagiaire .support-tel {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
}
.lp-stagiaire .support-actions {
  display: flex;
  gap: 8px;
}
.lp-stagiaire .support-actions .btn-outline {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}
.lp-stagiaire .support-actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lp-stagiaire .support-actions .btn-accent {
  background: white;
  color: var(--n-900);
}
.lp-stagiaire .support-actions .btn-accent:hover {
  background: var(--n-100);
}
.lp-stagiaire .lp-foot {
  text-align: center;
  color: var(--n-400);
  font-size: 11.5px;
  padding: 14px 0;
}
.lp-stagiaire .lp-foot i {
  font-size: 10px;
}
.lp-stagiaire .promo-mate.is-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.lp-stagiaire .promo-mate.is-link:hover {
  background: var(--accent-50);
  border-color: var(--accent-300);
}
.lp-stagiaire .promo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-stagiaire .promo-chat-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--n-500);
  font-size: 13px;
  font-style: italic;
}
.lp-stagiaire .msg-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}
.lp-stagiaire .msg-list::-webkit-scrollbar {
  width: 6px;
}
.lp-stagiaire .msg-list::-webkit-scrollbar-thumb {
  background: var(--n-200);
  border-radius: 3px;
}
.lp-stagiaire .msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.lp-stagiaire .msg-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--n-0);
  box-shadow: var(--shadow-sm);
}
.lp-stagiaire .msg-body {
  flex: 1;
  min-width: 0;
  background: var(--n-50);
  border: 1px solid var(--n-100);
  border-radius: 10px;
  padding: 10px 12px 12px;
}
.lp-stagiaire .msg.is-mine .msg-body {
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
  border-color: var(--green-100);
}
.lp-stagiaire .msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.lp-stagiaire .msg-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--n-900);
}
.lp-stagiaire .msg-tag {
  font-size: 9px;
  font-weight: 800;
  background: var(--green-700);
  color: white;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.lp-stagiaire .msg-dr {
  font-size: 11px;
  color: var(--n-500);
  font-weight: 500;
}
.lp-stagiaire .msg-time {
  font-size: 11px;
  color: var(--n-400);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.lp-stagiaire .msg-content {
  font-size: 13px;
  color: var(--n-800);
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.lp-stagiaire .msg-del {
  display: inline;
  margin: 0;
}
.lp-stagiaire .msg-del button {
  background: transparent;
  border: none;
  color: var(--n-300);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 120ms;
  font-family: inherit;
}
.lp-stagiaire .msg-del button:hover {
  color: var(--red-600);
  background: var(--red-50);
}
.lp-stagiaire .msg-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--n-100);
}
.lp-stagiaire .msg-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--n-200);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--n-900);
  resize: vertical;
}
.lp-stagiaire .msg-form textarea::placeholder {
  color: var(--n-400);
}
.lp-stagiaire .msg-form textarea:focus {
  outline: none;
  border-color: var(--accent-300);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.lp-stagiaire .msg-form .msg-form-actions {
  display: flex;
  justify-content: flex-end;
}
.lp-stagiaire .photo-upload {
  margin-bottom: 14px;
}
.lp-stagiaire .photo-drop {
  display: block;
  cursor: pointer;
  border: 2px dashed var(--violet-300, #c4b5fd);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  background: var(--violet-50);
  transition: all 150ms;
}
.lp-stagiaire .photo-drop:hover {
  border-color: var(--violet-500);
  background: rgba(139, 92, 246, 0.07);
}
.lp-stagiaire .photo-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lp-stagiaire .photo-drop-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--n-900);
}
.lp-stagiaire .photo-drop-d {
  font-size: 11.5px;
  color: var(--n-500);
}
.lp-stagiaire .photo-drop-progress {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--violet-700);
  font-weight: 600;
}
.lp-stagiaire .photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.lp-stagiaire .photo {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--n-100);
  border: 1px solid var(--n-200);
  transition: transform 150ms, box-shadow 150ms;
}
.lp-stagiaire .photo:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.lp-stagiaire .photo:hover .photo-meta {
  opacity: 1;
}
.lp-stagiaire .photo:hover .photo-del {
  opacity: 1;
}
.lp-stagiaire .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-stagiaire .photo.is-mine {
  border-color: var(--green-300, #6EE7B7);
}
.lp-stagiaire .photo-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  color: white;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  opacity: 0;
  transition: opacity 150ms;
}
.lp-stagiaire .photo-meta .photo-author {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-stagiaire .photo-meta .photo-date {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.lp-stagiaire .photo-del {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  opacity: 0;
  transition: opacity 150ms;
}
.lp-stagiaire .photo-del button {
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
  font-family: inherit;
}
.lp-stagiaire .photo-del button:hover {
  background: var(--red-600);
}
.lp-stagiaire .photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.lp-stagiaire .photo-lightbox figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: default;
}
.lp-stagiaire .photo-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
.lp-stagiaire .photo-lightbox figcaption {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
}
.lp-stagiaire .photo-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  z-index: 1;
}
.lp-stagiaire .photo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lp-stagiaire .contact-inline {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 12px;
  padding: 18px;
  margin-top: -8px;
}
.lp-stagiaire .contact-inline textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid var(--n-200);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--n-900);
  resize: vertical;
}
.lp-stagiaire .contact-inline textarea:focus {
  outline: none;
  border-color: var(--accent-300);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.lp-stagiaire .contact-inline .contact-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.lp-stagiaire .contact-inline .contact-confirm {
  padding: 10px 14px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: 8px;
  color: var(--green-700);
  font-size: 13px;
  font-weight: 600;
}
.lp-stagiaire .contact-error {
  padding: 10px 14px;
  background: var(--red-50);
  border: 1px solid var(--red-100);
  border-radius: 8px;
  color: var(--red-700);
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}
.lp-stagiaire .contact-error::before {
  content: "\f071"; /* fa-triangle-exclamation */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 8px;
}
@media (max-width: 1280px) {
  .lp-stagiaire .hero-inner {
    grid-template-columns: 1fr;
  }
  .lp-stagiaire .promo-grid {
    grid-template-columns: 1fr;
  }
  .lp-stagiaire .two-col {
    grid-template-columns: 1fr;
  }
  .lp-stagiaire .meals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-stagiaire .facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-stagiaire .fact:nth-child(2) {
    border-right: none;
  }
  .lp-stagiaire .fact:nth-child(1), .lp-stagiaire .fact:nth-child(2) {
    border-bottom: 1px solid var(--n-100);
  }
}
@media (max-width: 760px) {
  .lp-stagiaire .lp-hd {
    padding: 12px 16px;
    flex-wrap: wrap;
  }
  .lp-stagiaire .page {
    padding: 16px 16px 32px;
  }
  .lp-stagiaire .hero {
    padding: 22px 20px;
  }
  .lp-stagiaire .hero h1 {
    font-size: 28px;
  }
  .lp-stagiaire .hero-countdown .num {
    font-size: 48px;
  }
  .lp-stagiaire .promo-mates {
    grid-template-columns: 1fr;
  }
  .lp-stagiaire .meals-grid {
    grid-template-columns: 1fr;
  }
  .lp-stagiaire .support {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .lp-stagiaire .support-actions {
    justify-content: center;
  }
  .lp-stagiaire .ms-nav-inner {
    padding: 0 16px;
  }
}
.lp-stagiaire .ms-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--n-100);
}
.lp-stagiaire .ms-nav-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lp-stagiaire .ms-nav-inner::-webkit-scrollbar {
  display: none;
}
.lp-stagiaire .ms-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 15px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--n-500);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lp-stagiaire .ms-nav-link i {
  font-size: 14px;
}
.lp-stagiaire .ms-nav-link:hover {
  color: var(--n-900);
}
.lp-stagiaire .ms-nav-link.is-active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-600);
}
.lp-stagiaire .ms-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: start;
}
.lp-stagiaire .ms-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--n-0);
  border: 1px solid var(--n-100);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-stagiaire .ms-tile:hover {
  border-color: var(--n-200);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.lp-stagiaire .ms-tile-ic {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.lp-stagiaire .ms-tile-body {
  flex: 1;
  min-width: 0;
}
.lp-stagiaire .ms-tile-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--n-900);
}
.lp-stagiaire .ms-tile-d {
  font-size: 12.5px;
  color: var(--n-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-stagiaire .ms-tile-arw {
  color: var(--n-300);
  font-size: 13px;
  flex: none;
}

/* ═══════════════════════════════════════════════════════════════
   GESTION — Espace promo (page admin /gestion/formations/{id}/promo)
   Drop-zone d'upload + grille photos avec lightbox.
   ═══════════════════════════════════════════════════════════════ */
.gestion-photo-drop {
  display: block;
  cursor: pointer;
  border: 2px dashed var(--blue-200);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  background: var(--blue-50);
  margin-bottom: 18px;
  transition: all 150ms;
}
.gestion-photo-drop:hover {
  border-color: var(--blue-600);
  background: rgba(37, 99, 235, 0.07);
}

.gestion-photo-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gestion-photo-drop-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
}

.gestion-photo-drop-d {
  font-size: 12px;
  color: var(--neutral-500);
  max-width: 540px;
  line-height: 1.4;
}

.gestion-photo-drop-progress {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--blue-700);
  font-weight: 600;
}

.gestion-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.gestion-photo {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  transition: transform 150ms, box-shadow 150ms;
}
.gestion-photo:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.gestion-photo:hover .gestion-photo-meta {
  opacity: 1;
}
.gestion-photo:hover .gestion-photo-del {
  opacity: 1;
}
.gestion-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gestion-photo-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  color: white;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  opacity: 0;
  transition: opacity 150ms;
  font-variant-numeric: tabular-nums;
}

.gestion-photo-del {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  opacity: 0;
  transition: opacity 150ms;
}
.gestion-photo-del button {
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
  font-family: inherit;
}
.gestion-photo-del button:hover {
  background: var(--red-600);
}

/* Lightbox plein écran (utilisée aussi sur la page Mon Séjour, mais redéfinie
   ici sans scope .lp-stagiaire pour fonctionner dans le dashboard). */
.gestion-promo-page .photo-lightbox,
.resa-list .photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.gestion-promo-page .photo-lightbox figure,
.resa-list .photo-lightbox figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: default;
}
.gestion-promo-page .photo-lightbox img,
.resa-list .photo-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
.gestion-promo-page .photo-lightbox figcaption,
.resa-list .photo-lightbox figcaption {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
}

.resa-list .photo-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  z-index: 1;
}
.resa-list .photo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ═══════════════════════════════════════════════════════════════
   RÉSERVATIONS — page index "Mes réservations"
   Scope : .rsi-page. Refonte complète sur le système Enedis :
   bleu Enedis dominant, neutres, FontAwesome partout, hero avec
   mark, KPI strip, sections numérotées, sticky filter bar, vues
   table / cards / timeline.

   Les Stimulus controllers (reservations-filters, multiselect-dropdown)
   sont préservés, seules les classes visuelles changent.
   ═══════════════════════════════════════════════════════════════ */
.rsi-page {
  --enedis-blue: #1432FA;
  --enedis-blue-700: #0F26C4;
  --enedis-blue-50: #EEF1FF;
  --enedis-blue-soft: rgba(20, 50, 250, 0.08);
  --enedis-blue-line: rgba(20, 50, 250, 0.18);
  --rsi-radius: 14px;
  --rsi-radius-sm: 8px;
  padding-bottom: 120px;
  /* On masque les éventuels styles legacy du layout */
  /* Vues interchangeables — une seule visible à la fois selon data-view */
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── HERO ────────────────────────────────────────────────── */
  /* ── KPI strip (cliquable → filtre) — cartes navy dans le hero ── */
  /* ── Alerts ───────────────────────────────────────────────── */
  /* ── Draft banner ─────────────────────────────────────────── */
  /* ── Filters bar ─────────────────────────────────────────── */
  /* ── Multiselect dropdown override (pour matcher l'Enedis) ── */
  /* ── Content card wrappers ───────────────────────────────── */
  /* ── View: TABLE ─────────────────────────────────────────── */
  /* ── Statut badges ────────────────────────────────────────── */
  /* ── Row actions ─────────────────────────────────────────── */
  /* ── View: CARDS ─────────────────────────────────────────── */
  /* ── View: TIMELINE ──────────────────────────────────────── */
  /* ── Empty state ─────────────────────────────────────────── */
  /* ── Avatar override (inherited from global) ─────────────── */
  /* ── Buttons (locaux à la page) ──────────────────────────── */
  /* ── Bulk toolbar (sticky footer) ────────────────────────── */
  /* ── Row state classes (Stimulus) ────────────────────────── */
  /* ── Responsive ──────────────────────────────────────────── */
}
.rsi-page .page-back {
  display: none;
}
.rsi-page[data-view=table] .rsi-view-cards, .rsi-page[data-view=table] .rsi-view-timeline, .rsi-page[data-view=cards] .rsi-view-table, .rsi-page[data-view=cards] .rsi-view-timeline, .rsi-page[data-view=timeline] .rsi-view-table, .rsi-page[data-view=timeline] .rsi-view-cards {
  display: none;
}
.rsi-page .rsi-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rsi-page .rsi-crumb a {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.rsi-page .rsi-crumb a:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.rsi-page .rsi-crumb a i {
  font-size: 11px;
}
.rsi-page .rsi-crumb .sep {
  color: var(--neutral-300);
  font-size: 9px;
}
.rsi-page .rsi-crumb strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.rsi-page .rsi-hero {
  position: relative;
  background: #1D2D5C;
  border: none;
  border-radius: 16px;
  padding: 22px 24px 0;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 25, 55, 0.18);
}
.rsi-page .rsi-hero > * {
  position: relative;
  z-index: 1;
}
.rsi-page .rsi-hero-top {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.rsi-page .rsi-hero-id {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 280px;
}
.rsi-page .rsi-mark {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #fff;
  color: #6CC04A;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.rsi-page .rsi-mark i {
  font-size: 21px;
}
.rsi-page .rsi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8E9AC2;
  margin-bottom: 5px;
}
.rsi-page .rsi-eyebrow i {
  font-size: 6px;
  color: #6CC04A;
}
.rsi-page .rsi-title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
  margin: 0;
}
.rsi-page .rsi-subtitle {
  margin-top: 5px;
  font-size: 13px;
  color: #9FB0D8;
  font-weight: 600;
}
.rsi-page .rsi-hero-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.rsi-page .rsi-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 20px;
  background: #27376A;
  border: none;
  color: #C7CEE3;
  font-size: 11.5px;
  font-weight: 700;
}
.rsi-page .rsi-pill i {
  font-size: 10px;
  color: #9FB0D8;
}
.rsi-page .rsi-pill.is-blue {
  background: rgba(108, 192, 74, 0.18);
  color: #C7E8B8;
}
.rsi-page .rsi-pill.is-blue i {
  color: #6CC04A;
}
.rsi-page .rsi-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.rsi-page .rsi-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  background: #6CC04A;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease;
  box-shadow: 0 2px 6px rgba(108, 192, 74, 0.4);
}
.rsi-page .rsi-btn-primary:hover {
  background: #7BCD59;
}
.rsi-page .rsi-btn-primary i {
  font-size: 13px;
}
.rsi-page .rsi-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin: 22px 0 0;
  padding-bottom: 20px;
}
.rsi-page .rsi-kpi {
  padding: 13px 15px;
  background: #27376A;
  border: 1px solid #33447A;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms, background 150ms;
}
.rsi-page .rsi-kpi:hover {
  border-color: #4A5C90;
}
.rsi-page .rsi-kpi.is-selected {
  background: rgba(108, 192, 74, 0.14);
  border-color: #6CC04A;
}
.rsi-page .rsi-kpi.is-selected .rsi-kpi-label {
  color: #C7E8B8;
}
.rsi-page .rsi-kpi.is-selected .rsi-kpi-hint {
  color: #9FD186;
}
.rsi-page .rsi-kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.rsi-page .rsi-kpi-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #8E9AC2;
}
.rsi-page .rsi-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 3px;
}
.rsi-page .rsi-kpi-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #8E9AC2;
  flex-shrink: 0;
}
.rsi-page .rsi-kpi-ic.is-green {
  color: #6CC04A;
}
.rsi-page .rsi-kpi-ic.is-amber {
  color: #E0A93B;
}
.rsi-page .rsi-kpi-ic.is-red {
  color: #D98783;
}
.rsi-page .rsi-kpi-hint {
  font-size: 11px;
  color: #6E7BA8;
  font-weight: 600;
}
.rsi-page .rsi-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.rsi-page .rsi-alert {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--rsi-radius);
  padding: 14px 16px 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.rsi-page .rsi-alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--neutral-300);
}
.rsi-page .rsi-alert.is-warn::before {
  background: var(--amber-500);
}
.rsi-page .rsi-alert.is-danger::before {
  background: var(--red-600);
}
.rsi-page .rsi-alert.is-info::before {
  background: var(--enedis-blue);
}
.rsi-page .rsi-alert:hover {
  border-color: var(--enedis-blue-line);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.rsi-page .rsi-alert-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.is-warn .rsi-page .rsi-alert-ic {
  background: var(--amber-50);
  color: var(--amber-700);
}
.is-danger .rsi-page .rsi-alert-ic {
  background: var(--red-50);
  color: var(--red-700);
}
.is-info .rsi-page .rsi-alert-ic {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
}
.rsi-page .rsi-alert-body {
  flex: 1;
  min-width: 0;
}
.rsi-page .rsi-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 2px;
}
.rsi-page .rsi-alert-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--enedis-blue);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.is-warn .rsi-page .rsi-alert-count {
  background: var(--amber-600);
}
.is-danger .rsi-page .rsi-alert-count {
  background: var(--red-600);
}
.is-info .rsi-page .rsi-alert-count {
  background: var(--enedis-blue);
}
.rsi-page .rsi-alert-desc {
  font-size: 12.5px;
  color: var(--neutral-600);
  line-height: 1.5;
}
.rsi-page .rsi-alert-arrow {
  color: var(--neutral-400);
  font-size: 12px;
  align-self: center;
  transition: transform 150ms;
}
.rsi-alert:hover .rsi-page .rsi-alert-arrow {
  transform: translateX(3px);
  color: var(--enedis-blue);
}
.rsi-page .rsi-draft {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-left: 3px solid var(--enedis-blue);
  border-radius: var(--rsi-radius);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rsi-page .rsi-draft-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 240px;
}
.rsi-page .rsi-draft-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  color: var(--enedis-blue);
  display: grid;
  place-items: center;
  font-size: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.rsi-page .rsi-draft-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 2px;
}
.rsi-page .rsi-draft-meta {
  font-size: 12px;
  color: var(--neutral-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rsi-page .rsi-draft-meta .step-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  background: #fff;
  border: 1px solid var(--enedis-blue-line);
  color: var(--enedis-blue-700);
  border-radius: 999px;
}
.rsi-page .rsi-draft-actions {
  display: flex;
  gap: 8px;
}
.rsi-page .rsi-filters {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--rsi-radius);
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px -4px rgba(11, 16, 32, 0.06);
}
.rsi-page .rsi-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--neutral-100);
  border-radius: 10px;
}
.rsi-page .rsi-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-600);
  text-decoration: none;
  border-radius: 7px;
  transition: all 150ms ease;
  white-space: nowrap;
}
.rsi-page .rsi-tab:hover {
  color: var(--neutral-900);
  background: rgba(255, 255, 255, 0.6);
}
.rsi-page .rsi-tab.is-active {
  background: #fff;
  color: var(--enedis-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.rsi-page .rsi-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--neutral-200);
  color: var(--neutral-700);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  transition: all 150ms ease;
}
.is-active .rsi-page .rsi-tab-count {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
}
.rsi-page .rsi-divider {
  width: 1px;
  height: 22px;
  background: var(--card-border);
}
.rsi-page .rsi-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}
.rsi-page .rsi-search > i {
  position: absolute;
  left: 12px;
  color: var(--neutral-400);
  font-size: 12px;
  pointer-events: none;
}
.rsi-page .rsi-search input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  background: var(--neutral-100);
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--neutral-900);
  transition: all 150ms ease;
}
.rsi-page .rsi-search input::placeholder {
  color: var(--neutral-400);
}
.rsi-page .rsi-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 3px var(--enedis-blue-soft);
}
.rsi-page .rsi-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}
.rsi-page .rsi-chip:hover:not(:disabled) {
  border-color: var(--enedis-blue-line);
  color: var(--neutral-900);
}
.rsi-page .rsi-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rsi-page .rsi-chip.is-active {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
  color: var(--enedis-blue-700);
}
.rsi-page .rsi-chip i:first-child {
  color: var(--enedis-blue);
  font-size: 11px;
}
.rsi-page .rsi-chip i:last-child {
  font-size: 9px;
  color: var(--neutral-400);
}
.rsi-page .rsi-chip .chip-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--enedis-blue);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
.rsi-page .rsi-spacer {
  flex: 1;
}
.rsi-page .rsi-view-switch {
  display: flex;
  padding: 3px;
  background: var(--neutral-100);
  border-radius: 8px;
  gap: 2px;
}
.rsi-page .rsi-view-switch button {
  width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--neutral-500);
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease;
}
.rsi-page .rsi-view-switch button:hover {
  color: var(--neutral-900);
  background: rgba(255, 255, 255, 0.6);
}
.rsi-page .rsi-view-switch button.is-active {
  background: #fff;
  color: var(--enedis-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.rsi-page .dropdown {
  position: relative;
}
.rsi-page .dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--rsi-radius);
  box-shadow: 0 20px 60px -20px rgba(20, 50, 250, 0.18), 0 8px 20px -10px rgba(11, 16, 32, 0.08);
  z-index: 100;
  display: none;
}
.rsi-page .dropdown.is-open .dropdown-menu {
  display: block;
}
.rsi-page .dropdown .dropdown-empty {
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.rsi-page .dropdown .dropdown-search {
  padding: 10px;
  border-bottom: 1px solid var(--card-border);
  position: relative;
  display: flex;
  align-items: center;
}
.rsi-page .dropdown .dropdown-search > i {
  position: absolute;
  left: 20px;
  color: var(--neutral-400);
  font-size: 11px;
  pointer-events: none;
}
.rsi-page .dropdown .dropdown-search input {
  width: 100%;
  padding: 7px 10px 7px 28px;
  background: var(--neutral-100);
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12.5px;
}
.rsi-page .dropdown .dropdown-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 3px var(--enedis-blue-soft);
}
.rsi-page .dropdown .dropdown-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.rsi-page .dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms;
}
.rsi-page .dropdown .dropdown-item:hover {
  background: var(--neutral-100);
}
.rsi-page .dropdown .dropdown-item.is-selected {
  background: var(--enedis-blue-soft);
}
.rsi-page .dropdown .dropdown-item .dd-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--neutral-300);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
}
.rsi-page .dropdown .dropdown-item.is-selected .dd-check {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
}
.rsi-page .dropdown .dropdown-item .dd-label {
  flex: 1;
  font-size: 13px;
  color: var(--neutral-900);
  font-weight: 500;
}
.rsi-page .dropdown .dropdown-item .dd-label .dd-sub {
  display: block;
  font-size: 11px;
  color: var(--neutral-400);
  font-weight: 400;
  margin-top: 1px;
}
.rsi-page .dropdown .dropdown-item .dd-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-500);
  padding: 2px 7px;
  background: var(--neutral-100);
  border-radius: 999px;
}
.rsi-page .dropdown .dropdown-item.is-selected .dd-count {
  background: #fff;
  color: var(--enedis-blue-700);
}
.rsi-page .dropdown .dropdown-footer {
  padding: 10px;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.rsi-page .rsi-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--rsi-radius);
  overflow: hidden;
}
.rsi-page .rsi-view-table .rsi-card {
  padding: 0;
}
.rsi-page .rsi-table-scroll {
  overflow-x: auto;
}
.rsi-page .rsi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rsi-page .rsi-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.rsi-page .rsi-table tbody tr {
  transition: background 120ms;
  border-bottom: 1px solid var(--neutral-100);
}
.rsi-page .rsi-table tbody tr:last-child {
  border-bottom: none;
}
.rsi-page .rsi-table tbody tr:hover {
  background: var(--enedis-blue-soft);
}
.rsi-page .rsi-table tbody td {
  padding: 14px 16px;
  color: var(--neutral-700);
  vertical-align: middle;
}
.rsi-page .rsi-row-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  accent-color: var(--enedis-blue);
  cursor: pointer;
}
.rsi-page .rsi-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-900);
}
.rsi-page .rsi-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-400);
  flex-shrink: 0;
}
.rsi-page .rsi-alert-dot.is-warn {
  background: var(--amber-500);
  box-shadow: 0 0 0 3px var(--amber-50);
}
.rsi-page .rsi-alert-dot.is-danger {
  background: var(--red-600);
  box-shadow: 0 0 0 3px var(--red-50);
}
.rsi-page .rsi-stagiaire-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rsi-page .rsi-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
}
.rsi-page .rsi-nni {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-500);
}
.rsi-page .rsi-formation {
  font-weight: 600;
  font-size: 13px;
  color: var(--neutral-900);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsi-page .rsi-formation-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
}
.rsi-page .rsi-dates {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rsi-page .rsi-dates .arrow {
  color: var(--neutral-300);
  font-size: 10px;
}
.rsi-page .rsi-nights {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rsi-page .rsi-nights i {
  font-size: 9px;
}
.rsi-page .rsi-heb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  max-width: 200px;
}
.rsi-page .rsi-heb i {
  font-size: 10px;
  color: var(--neutral-500);
  flex-shrink: 0;
}
.rsi-page .rsi-heb > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsi-page .rsi-heb.is-hotel {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-line);
  color: var(--enedis-blue-700);
}
.rsi-page .rsi-heb.is-hotel i {
  color: var(--enedis-blue);
}
.rsi-page .rsi-heb.is-campus {
  background: var(--green-50);
  border-color: rgba(21, 128, 61, 0.22);
  color: var(--green-700);
}
.rsi-page .rsi-heb.is-campus i {
  color: var(--green-600);
}
.rsi-page .rsi-heb.is-none {
  color: var(--neutral-400);
  background: var(--neutral-50);
}
.rsi-page .rsi-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.rsi-page .rsi-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rsi-page .rsi-status.is-confirmee {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.rsi-page .rsi-status.is-attente {
  background: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
.rsi-page .rsi-status.is-annulee {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(185, 28, 28, 0.22);
}
.rsi-page .rsi-status.is-modifiee {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.rsi-page .rsi-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.rsi-page .rsi-row-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  color: var(--neutral-600);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
}
.rsi-page .rsi-row-btn:hover {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
  color: var(--enedis-blue-700);
  transform: translateY(-1px);
}
.rsi-page .rsi-row-btn.is-danger:hover {
  background: var(--red-50);
  border-color: var(--red-600);
  color: var(--red-700);
}
.rsi-page .rsi-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.rsi-page .rsi-resa-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--rsi-radius);
  overflow: hidden;
  transition: all 150ms ease;
  position: relative;
}
.rsi-page .rsi-resa-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
}
.rsi-page .rsi-resa-card:hover {
  border-color: var(--enedis-blue-line);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -16px rgba(20, 50, 250, 0.2);
}
.rsi-page .rsi-resa-card[data-statut=ANNULEE]::after {
  background: var(--red-500);
  opacity: 0.6;
}
.rsi-page .rsi-resa-card[data-statut=EN_ATTENTE]::after {
  background: var(--amber-500);
}
.rsi-page .rsi-resa-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.rsi-page .rsi-resa-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.rsi-page .rsi-resa-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-500);
  margin-top: 2px;
}
.rsi-page .rsi-resa-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rsi-page .rsi-resa-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.4;
}
.rsi-page .rsi-resa-row > i {
  width: 16px;
  text-align: center;
  color: var(--enedis-blue);
  font-size: 11.5px;
  flex-shrink: 0;
}
.rsi-page .rsi-resa-row .muted {
  color: var(--neutral-500);
}
.rsi-page .rsi-resa-foot {
  padding: 10px 16px;
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.rsi-page .rsi-resa-foot .meta {
  font-size: 11px;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rsi-page .rsi-resa-foot .meta i {
  font-size: 9px;
}
.rsi-page .rsi-timeline {
  position: relative;
  padding-left: 8px;
}
.rsi-page .rsi-timeline-month {
  position: sticky;
  top: 56px;
  z-index: 5;
  margin: 16px 0 12px;
  padding: 8px 14px;
  background: var(--neutral-900);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
}
.rsi-page .rsi-timeline-month::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--enedis-blue);
}
.rsi-page .rsi-timeline-row {
  display: flex;
  gap: 18px;
  padding: 4px 0;
  align-items: stretch;
  position: relative;
}
.rsi-page .rsi-timeline-row + .rsi-timeline-row {
  margin-top: 8px;
}
.rsi-page .rsi-timeline-date {
  flex-shrink: 0;
  width: 68px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  position: relative;
}
.rsi-page .rsi-timeline-date::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--enedis-blue-line);
}
.rsi-page .rsi-timeline-date .day {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
}
.rsi-page .rsi-timeline-date .month {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--enedis-blue);
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.rsi-page .rsi-timeline-date .nights {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-500);
  padding: 1px 6px;
  background: var(--neutral-100);
  border-radius: 999px;
  display: inline-block;
}
.rsi-page .rsi-timeline-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 16px;
  position: relative;
  transition: all 150ms ease;
}
.rsi-page .rsi-timeline-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--enedis-blue);
}
.rsi-page .rsi-timeline-card.is-confirmee::before {
  background: var(--green-600);
}
.rsi-page .rsi-timeline-card.is-attente::before {
  background: var(--amber-500);
}
.rsi-page .rsi-timeline-card.is-annulee::before {
  background: var(--red-500);
  opacity: 0.6;
}
.rsi-page .rsi-timeline-card:hover {
  border-color: var(--enedis-blue-line);
  box-shadow: var(--shadow-md);
}
.rsi-page .rsi-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.rsi-page .rsi-timeline-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.rsi-page .rsi-timeline-info .formation {
  font-size: 12px;
  color: var(--neutral-500);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsi-page .rsi-timeline-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: var(--neutral-600);
}
.rsi-page .rsi-timeline-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rsi-page .rsi-timeline-meta > span i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.rsi-page .rsi-timeline-meta .num {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-500);
}
.rsi-page .rsi-empty {
  padding: 60px 24px;
  text-align: center;
}
.rsi-page .rsi-empty .ic {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-radius: 16px;
  font-size: 22px;
}
.rsi-page .rsi-empty .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 6px;
}
.rsi-page .rsi-empty .desc {
  font-size: 13px;
  color: var(--neutral-500);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}
.rsi-page .stagiaire-avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-family);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.rsi-page .rsi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
}
.rsi-page .rsi-btn:hover {
  border-color: var(--enedis-blue);
  color: var(--enedis-blue);
}
.rsi-page .rsi-btn.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--neutral-600);
}
.rsi-page .rsi-btn.is-ghost:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.rsi-page .rsi-btn.is-primary {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
  color: #fff;
}
.rsi-page .rsi-btn.is-primary:hover {
  background: var(--enedis-blue-700);
  border-color: var(--enedis-blue-700);
}
.rsi-page .rsi-btn.is-danger {
  background: var(--red-600);
  border-color: var(--red-600);
  color: #fff;
}
.rsi-page .rsi-btn.is-danger:hover {
  background: var(--red-700);
  border-color: var(--red-700);
}
.rsi-page .rsi-btn i {
  font-size: 11px;
}
.rsi-page .rsi-bulk {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--neutral-900);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px -10px rgba(11, 16, 32, 0.4);
  z-index: 100;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 540px;
}
.rsi-page .rsi-bulk.is-visible {
  transform: translateX(-50%) translateY(0);
}
.rsi-page .rsi-bulk .bulk-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.rsi-page .rsi-bulk .bulk-count i {
  color: var(--enedis-blue);
}
.rsi-page .rsi-bulk .bulk-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
}
.rsi-page .rsi-bulk input[type=text] {
  flex: 1;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: #fff;
  font-family: var(--font-family);
  font-size: 12.5px;
}
.rsi-page .rsi-bulk input[type=text]::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.rsi-page .rsi-bulk input[type=text]:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--enedis-blue);
}
.rsi-page .rsi-bulk .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
}
.rsi-page .rsi-bulk .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}
.rsi-page .rsi-bulk .btn-danger {
  background: var(--red-600);
  border: 1px solid var(--red-600);
  color: #fff;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-family);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rsi-page .rsi-bulk .btn-danger:hover {
  background: var(--red-700);
  border-color: var(--red-700);
}
.rsi-page .is-hidden {
  display: none !important;
}
.rsi-page tbody tr.is-selected {
  background: var(--enedis-blue-soft) !important;
}
.rsi-page tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--enedis-blue);
}
@media (max-width: 960px) {
  .rsi-page .rsi-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .rsi-page .rsi-hero {
    padding: 20px 18px 0;
  }
  .rsi-page .rsi-mark {
    width: 50px;
    height: 50px;
  }
  .rsi-page .rsi-mark i {
    font-size: 18px;
  }
  .rsi-page .rsi-title {
    font-size: 21px;
  }
  .rsi-page .rsi-kpis {
    margin: 18px 0 0;
    grid-template-columns: 1fr 1fr;
  }
  .rsi-page .rsi-kpi {
    padding: 12px 14px;
  }
  .rsi-page .rsi-kpi-value {
    font-size: 22px;
  }
  .rsi-page .rsi-filters {
    padding: 10px;
    gap: 8px;
  }
  .rsi-page .rsi-tabs {
    width: 100%;
    overflow-x: auto;
  }
  .rsi-page .rsi-search {
    max-width: 100%;
  }
  .rsi-page .rsi-divider {
    display: none;
  }
  .rsi-page .rsi-bulk {
    min-width: 0;
    left: 12px;
    right: 12px;
    transform: translateY(150%);
  }
  .rsi-page .rsi-bulk.is-visible {
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   TAXIS / COURSES — page index "Courses taxi"
   Scope : .tcx-page. Refonte complète sur le système Enedis :
   bleu Enedis dominant, neutres, FontAwesome partout, hero avec
   mark, KPI strip, sticky filters, cards courses avec stripe
   verticale par statut.

   Stimulus (quick-modal) préservé.
   ═══════════════════════════════════════════════════════════════ */
.tcx-page {
  --enedis-blue: #1432FA;
  --enedis-blue-700: #0F26C4;
  --enedis-blue-soft: rgba(20, 50, 250, 0.08);
  --enedis-blue-line: rgba(20, 50, 250, 0.18);
  --tcx-radius: 14px;
  --tcx-radius-sm: 8px;
  padding-bottom: 80px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── HERO ────────────────────────────────────────────────── */
  /* ── KPI strip (cliquable) ───────────────────────────────── */
  /* ── Regroupement banner ─────────────────────────────────── */
  /* ── Week pager wrapper ──────────────────────────────────── */
  /* Styles du composant _week_pager (scope tcx-page) */
  /* ── Filters bar (sticky) ────────────────────────────────── */
  /* ── Day group ───────────────────────────────────────────── */
  /* ── COURSE CARD ─────────────────────────────────────────── */
  /* ── Status badge ────────────────────────────────────────── */
  /* ── Empty state ─────────────────────────────────────────── */
  /* ── Responsive ──────────────────────────────────────────── */
}
.tcx-page .page-back {
  display: none;
}
.tcx-page .tcx-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tcx-page .tcx-crumb a {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.tcx-page .tcx-crumb a:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.tcx-page .tcx-crumb a i {
  font-size: 11px;
}
.tcx-page .tcx-crumb .sep {
  color: var(--neutral-300);
  font-size: 9px;
}
.tcx-page .tcx-crumb strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.tcx-page .tcx-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--tcx-radius);
  padding: 26px 28px 0;
  margin-bottom: 22px;
  overflow: hidden;
}
.tcx-page .tcx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 320px at 100% -20%, var(--enedis-blue-soft), transparent 60%);
  pointer-events: none;
}
.tcx-page .tcx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(20, 50, 250, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 50, 250, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  pointer-events: none;
}
.tcx-page .tcx-hero > * {
  position: relative;
  z-index: 1;
}
.tcx-page .tcx-hero-top {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.tcx-page .tcx-hero-id {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 280px;
}
.tcx-page .tcx-mark {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px -10px rgba(20, 50, 250, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.tcx-page .tcx-mark i {
  font-size: 22px;
}
.tcx-page .tcx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--enedis-blue);
  padding: 4px 10px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 999px;
  margin-bottom: 8px;
}
.tcx-page .tcx-eyebrow i {
  font-size: 6px;
}
.tcx-page .tcx-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--neutral-900);
  line-height: 1.1;
  margin: 0;
}
.tcx-page .tcx-subtitle {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--neutral-500);
  font-weight: 500;
}
.tcx-page .tcx-hero-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.tcx-page .tcx-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 600;
}
.tcx-page .tcx-pill i {
  font-size: 10px;
  color: var(--neutral-500);
}
.tcx-page .tcx-pill.is-blue {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-line);
  color: var(--enedis-blue-700);
}
.tcx-page .tcx-pill.is-blue i {
  color: var(--enedis-blue);
}
.tcx-page .tcx-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tcx-page .tcx-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
  box-shadow: 0 6px 18px -6px rgba(20, 50, 250, 0.5);
}
.tcx-page .tcx-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(20, 50, 250, 0.6);
}
.tcx-page .tcx-btn-primary i {
  font-size: 12px;
}
.tcx-page .tcx-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 22px -28px 0;
  border-top: 1px solid var(--card-border);
}
.tcx-page .tcx-kpi {
  padding: 16px 18px;
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: background 150ms;
}
.tcx-page .tcx-kpi:last-child {
  border-right: none;
}
.tcx-page .tcx-kpi:hover {
  background: var(--neutral-50);
}
.tcx-page .tcx-kpi.is-active {
  background: var(--enedis-blue-soft);
}
.tcx-page .tcx-kpi.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--enedis-blue);
}
.tcx-page .tcx-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tcx-page .tcx-kpi-ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  flex-shrink: 0;
}
.tcx-page .tcx-kpi-ic.is-grey {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.tcx-page .tcx-kpi-ic.is-amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.tcx-page .tcx-kpi-ic.is-green {
  background: var(--green-50);
  color: var(--green-700);
}
.tcx-page .tcx-kpi-ic.is-red {
  background: var(--red-50);
  color: var(--red-700);
}
.tcx-page .tcx-kpi-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 4px;
}
.tcx-page .tcx-kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
}
.tcx-page .tcx-rb {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--tcx-radius);
  margin-bottom: 18px;
}
.tcx-page .tcx-rb-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tcx-page .tcx-rb-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  color: var(--amber-700);
  display: grid;
  place-items: center;
  font-size: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.tcx-page .tcx-rb-body {
  flex: 1;
  min-width: 200px;
}
.tcx-page .tcx-rb-body strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--amber-700);
  margin-bottom: 2px;
}
.tcx-page .tcx-rb-body span {
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.45;
}
.tcx-page .tcx-rb-body span strong {
  display: inline;
  font-family: var(--font-mono);
  color: var(--green-700);
  font-weight: 700;
}
.tcx-page .tcx-rb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--amber-200);
  border-radius: 7px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--amber-700);
  cursor: pointer;
  list-style: none;
}
.tcx-page .tcx-rb-toggle::-webkit-details-marker {
  display: none;
}
.tcx-page .tcx-rb-toggle:hover {
  background: var(--amber-50);
  border-color: var(--amber-400);
}
.tcx-page .tcx-rb-toggle i {
  font-size: 10px;
}
.tcx-page .tcx-rb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tcx-page .tcx-rb-item {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--amber-200);
  border-radius: 10px;
}
.tcx-page .tcx-rb-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.tcx-page .tcx-rb-item-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tcx-page .tcx-rb-item-head .campus {
  font-weight: 700;
  color: var(--neutral-900);
}
.tcx-page .tcx-rb-item-head .campus i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.tcx-page .tcx-rb-item-head .sens {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--neutral-100);
  border-radius: 999px;
  color: var(--neutral-700);
}
.tcx-page .tcx-rb-item-head .economie {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-700);
  padding: 2px 8px;
  background: var(--green-50);
  border: 1px solid rgba(21, 128, 61, 0.22);
  border-radius: 999px;
}
.tcx-page .tcx-rb-courses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tcx-page .tcx-rb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--enedis-blue-700);
  text-decoration: none;
  font-weight: 600;
  transition: all 150ms;
}
.tcx-page .tcx-rb-pill:hover {
  background: var(--enedis-blue);
  color: #fff;
  transform: translateY(-1px);
}
.tcx-page .tcx-rb-pill small {
  font-weight: 500;
  opacity: 0.8;
}
.tcx-page .tcx-week {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.tcx-page .tcx-week > .week-pager-wrap {
  flex: 1;
  margin-bottom: 0;
}
.tcx-page .week-pager-wrap {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--tcx-radius);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tcx-page .week-pager {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--neutral-50);
  border: 1px solid var(--card-border);
  border-radius: 9px;
  padding: 3px;
}
.tcx-page .week-pager .pager-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--neutral-600);
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 150ms ease;
}
.tcx-page .week-pager .pager-btn:hover {
  background: #fff;
  color: var(--enedis-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.tcx-page .week-pager .current {
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-900);
  min-width: 140px;
  text-align: center;
  letter-spacing: 0.5px;
}
.tcx-page .week-pager .current small {
  display: block;
  font-size: 10px;
  color: var(--neutral-500);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: uppercase;
  font-family: var(--font-family);
}
.tcx-page .week-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--enedis-blue-soft);
  cursor: pointer;
  transition: all 150ms ease;
  overflow: hidden;
}
.tcx-page .week-picker:hover {
  border-color: var(--enedis-blue);
}
.tcx-page .week-picker > i {
  color: var(--enedis-blue);
  font-size: 12px;
  flex-shrink: 0;
}
.tcx-page .week-picker input[type=week] {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--enedis-blue-700);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 0;
  cursor: pointer;
  min-width: 120px;
}
.tcx-page .week-picker input[type=week]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
  background: transparent;
}
.tcx-page .week-picker input[type=week]::-webkit-inner-spin-button, .tcx-page .week-picker input[type=week]::-webkit-clear-button {
  display: none;
}
.tcx-page .week-picker input[type=week]:focus {
  outline: none;
}
.tcx-page .year-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-500);
  letter-spacing: 0.3px;
}
.tcx-page .quick-weeks {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tcx-page .quick-week {
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--card-border);
  background: #fff;
  font-family: var(--font-family);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease;
}
.tcx-page .quick-week:hover {
  border-color: var(--enedis-blue-line);
  color: var(--enedis-blue-700);
  background: var(--enedis-blue-soft);
}
.tcx-page .quick-week.is-active {
  background: var(--enedis-blue);
  color: #fff;
  border-color: var(--enedis-blue);
  box-shadow: 0 4px 10px -2px rgba(20, 50, 250, 0.35);
}
.tcx-page .today-btn {
  margin-left: auto;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--neutral-700);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 150ms ease;
}
.tcx-page .today-btn i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.tcx-page .today-btn:hover {
  border-color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
}
.tcx-page .tcx-week-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--red-50);
  border: 1px solid rgba(185, 28, 28, 0.22);
  border-radius: var(--tcx-radius);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--red-700);
  text-decoration: none;
  transition: all 150ms;
  white-space: nowrap;
}
.tcx-page .tcx-week-clear:hover {
  background: var(--red-100);
  border-color: var(--red-600);
}
.tcx-page .tcx-week-clear i {
  font-size: 10px;
}
.tcx-page .tcx-filters {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--tcx-radius);
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px -4px rgba(11, 16, 32, 0.06);
}
.tcx-page .tcx-segment {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--neutral-100);
  border-radius: 10px;
}
.tcx-page .tcx-segment a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-600);
  text-decoration: none;
  border-radius: 7px;
  transition: all 150ms ease;
  white-space: nowrap;
}
.tcx-page .tcx-segment a:hover {
  color: var(--neutral-900);
  background: rgba(255, 255, 255, 0.6);
}
.tcx-page .tcx-segment a.is-active {
  background: #fff;
  color: var(--enedis-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tcx-page .tcx-divider {
  width: 1px;
  height: 22px;
  background: var(--card-border);
}
.tcx-page .tcx-spacer {
  flex: 1;
}
.tcx-page .tcx-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tcx-page .tcx-field label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.tcx-page .tcx-field label i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.tcx-page .tcx-field select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 32px 7px 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7390' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/10px 7px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-900);
  cursor: pointer;
  transition: all 150ms ease;
}
.tcx-page .tcx-field select:hover {
  border-color: var(--enedis-blue-line);
}
.tcx-page .tcx-field select:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 3px var(--enedis-blue-soft);
}
.tcx-page .tcx-group {
  margin-bottom: 22px;
}
.tcx-page .tcx-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding-left: 14px;
  position: relative;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--neutral-700);
}
.tcx-page .tcx-group-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--enedis-blue);
  border-radius: 2px;
}
.tcx-page .tcx-group-title.is-past::before {
  background: var(--neutral-400);
}
.tcx-page .tcx-group-title.is-today::before {
  background: var(--enedis-blue);
  box-shadow: 0 0 0 2px var(--enedis-blue-soft);
}
.tcx-page .tcx-group-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}
.tcx-page .tcx-group-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tcx-page .tcx-card {
  display: grid;
  grid-template-columns: 86px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--tcx-radius);
  text-decoration: none;
  color: inherit;
  transition: all 150ms ease;
  position: relative;
  overflow: hidden;
}
.tcx-page .tcx-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
}
.tcx-page .tcx-card:hover {
  border-color: var(--enedis-blue-line);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -16px rgba(20, 50, 250, 0.2);
}
.tcx-page .tcx-card.retour::before {
  background: var(--neutral-700);
}
.tcx-page .tcx-card.aller::before {
  background: var(--enedis-blue);
}
.tcx-page .tcx-card-date {
  text-align: center;
  padding: 8px 6px;
  background: var(--neutral-50);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.tcx-page .tcx-card-date .day {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
}
.tcx-page .tcx-card-date .month {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--enedis-blue);
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.tcx-page .tcx-card-date .time {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--neutral-700);
  padding: 2px 8px;
  background: #fff;
  border-radius: 999px;
  display: inline-block;
}
.tcx-page .tcx-card-route {
  min-width: 0;
}
.tcx-page .tcx-card-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.tcx-page .tcx-sens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tcx-page .tcx-sens i {
  font-size: 9px;
}
.tcx-page .tcx-sens.aller {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border: 1px solid var(--enedis-blue-line);
}
.tcx-page .tcx-sens.retour {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.tcx-page .tcx-sens.retour i {
  transform: rotate(180deg);
}
.tcx-page .tcx-campus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-600);
}
.tcx-page .tcx-campus i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.tcx-page .tcx-card-points {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.tcx-page .tcx-card-points .pt {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcx-page .tcx-card-points .arrow {
  color: var(--enedis-blue);
  font-size: 12px;
}
.tcx-page .tcx-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--neutral-600);
  flex-wrap: wrap;
}
.tcx-page .tcx-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tcx-page .tcx-card-meta > span i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.tcx-page .tcx-card-meta .empty {
  color: var(--neutral-400);
  font-style: italic;
}
.tcx-page .tcx-card-meta .empty i {
  color: var(--neutral-400);
}
.tcx-page .tcx-card-meta .plate {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-500);
  padding: 1px 7px;
  background: var(--neutral-100);
  border-radius: 5px;
}
.tcx-page .tcx-card-meta .dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--neutral-300);
}
.tcx-page .tcx-card-pax {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 80px;
}
.tcx-page .tcx-avatars {
  display: flex;
  align-items: center;
}
.tcx-page .tcx-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #fff;
  margin-left: -8px;
  font-family: var(--font-family);
}
.tcx-page .tcx-avatar:first-child {
  margin-left: 0;
}
.tcx-page .tcx-avatar.is-more {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.tcx-page .tcx-pax-count {
  font-size: 11px;
  color: var(--neutral-500);
  font-weight: 500;
}
.tcx-page .tcx-pax-count strong {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
  font-size: 13px;
}
.tcx-page .tcx-pax-count span {
  display: block;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--neutral-400);
  margin-top: 1px;
}
.tcx-page .tcx-card-status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tcx-page .tcx-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.tcx-page .tcx-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tcx-page .tcx-status.is-success {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.tcx-page .tcx-status.is-warning {
  background: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
.tcx-page .tcx-status.is-danger {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(185, 28, 28, 0.22);
}
.tcx-page .tcx-status.is-info {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border: 1px solid var(--enedis-blue-line);
}
.tcx-page .tcx-status.is-neutral {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.tcx-page .tcx-chevron {
  color: var(--neutral-300);
  font-size: 12px;
  transition: all 150ms ease;
}
.tcx-page .tcx-card:hover .tcx-chevron {
  color: var(--enedis-blue);
  transform: translateX(3px);
}
.tcx-page .tcx-empty {
  padding: 64px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--card-border);
  border-radius: var(--tcx-radius);
}
.tcx-page .tcx-empty .ic {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-radius: 18px;
  font-size: 24px;
}
.tcx-page .tcx-empty .title {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 6px;
}
.tcx-page .tcx-empty .desc {
  font-size: 13px;
  color: var(--neutral-500);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5;
}
@media (max-width: 1100px) {
  .tcx-page .tcx-kpis {
    grid-template-columns: repeat(5, 1fr);
  }
  .tcx-page .tcx-kpi-value {
    font-size: 20px;
  }
}
@media (max-width: 900px) {
  .tcx-page .tcx-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
  .tcx-page .tcx-kpi {
    border-right: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
  }
  .tcx-page .tcx-kpi:nth-child(3n) {
    border-right: none;
  }
  .tcx-page .tcx-kpi:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .tcx-page .tcx-card {
    grid-template-columns: 72px 1fr;
    gap: 12px;
  }
  .tcx-page .tcx-card .tcx-card-pax,
  .tcx-page .tcx-card .tcx-card-status {
    grid-column: 2;
    margin-top: 4px;
  }
  .tcx-page .tcx-card .tcx-card-status {
    justify-content: space-between;
  }
  .tcx-page .tcx-card .tcx-card-pax {
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .tcx-page .tcx-hero {
    padding: 20px 18px 0;
  }
  .tcx-page .tcx-mark {
    width: 50px;
    height: 50px;
  }
  .tcx-page .tcx-mark i {
    font-size: 18px;
  }
  .tcx-page .tcx-title {
    font-size: 21px;
  }
  .tcx-page .tcx-kpis {
    margin: 18px -18px 0;
    grid-template-columns: repeat(2, 1fr);
  }
  .tcx-page .tcx-kpi:nth-child(3n) {
    border-right: 1px solid var(--card-border);
  }
  .tcx-page .tcx-kpi:nth-child(2n) {
    border-right: none;
  }
  .tcx-page .tcx-kpi:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .tcx-page .tcx-filters {
    padding: 10px;
    gap: 10px;
  }
  .tcx-page .tcx-segment {
    width: 100%;
  }
  .tcx-page .tcx-segment a {
    flex: 1;
    justify-content: center;
  }
  .tcx-page .tcx-divider {
    display: none;
  }
  .tcx-page .tcx-spacer {
    display: none;
  }
  .tcx-page .tcx-card {
    grid-template-columns: 64px 1fr;
    padding: 12px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TAXI COURSE — page détail "/taxis/courses/{id}"
   Scope : .tcs-page. Système Enedis : bleu Enedis dominant,
   neutres, FontAwesome partout, hero avec mark + route, sidebar
   d'informations, section passagers + historique demandes.

   Stimulus (quick-modal) préservé.
   ═══════════════════════════════════════════════════════════════ */
.tcs-page {
  --enedis-blue: #1432FA;
  --enedis-blue-700: #0F26C4;
  --enedis-blue-soft: rgba(20, 50, 250, 0.08);
  --enedis-blue-line: rgba(20, 50, 250, 0.18);
  --tcs-radius: 14px;
  padding-bottom: 80px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── HERO ────────────────────────────────────────────────── */
  /* ── Status badge ────────────────────────────────────────── */
  /* ── Grid 2 colonnes (main + sidebar) ────────────────────── */
  /* ── Card section ────────────────────────────────────────── */
  /* ── Passagers table ─────────────────────────────────────── */
  /* ── Sidebar : Informations (dl compacte) ────────────────── */
  /* ── Bouton primary ──────────────────────────────────────── */
  /* ── Empty state ─────────────────────────────────────────── */
  /* ── Historique demandes ─────────────────────────────────── */
  /* ── Modal "Ajouter passagers" override ──────────────────── */
  /* ── Responsive ──────────────────────────────────────────── */
}
.tcs-page .page-back {
  display: none;
}
.tcs-page .tcs-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tcs-page .tcs-crumb a {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.tcs-page .tcs-crumb a:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.tcs-page .tcs-crumb a i {
  font-size: 11px;
}
.tcs-page .tcs-crumb .sep {
  color: var(--neutral-300);
  font-size: 9px;
}
.tcs-page .tcs-crumb strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.tcs-page .tcs-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--tcs-radius);
  padding: 18px 22px;
  margin-bottom: 16px;
  overflow: hidden;
}
.tcs-page .tcs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 320px at 100% -30%, var(--enedis-blue-soft), transparent 60%);
  pointer-events: none;
}
.tcs-page .tcs-hero::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
}
.tcs-page .tcs-hero.retour::after {
  background: var(--neutral-700);
}
.tcs-page .tcs-hero > * {
  position: relative;
  z-index: 1;
}
.tcs-page .tcs-hero-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tcs-page .tcs-hero-id {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex: 1;
  min-width: 280px;
}
.tcs-page .tcs-mark {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px -10px rgba(20, 50, 250, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.tcs-page .tcs-mark i {
  font-size: 19px;
}
.tcs-page .tcs-hero-body {
  flex: 1;
  min-width: 0;
}
.tcs-page .tcs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--enedis-blue);
  padding: 3px 9px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 999px;
  margin-bottom: 8px;
}
.tcs-page .tcs-eyebrow i {
  font-size: 5px;
}
.tcs-page .tcs-eyebrow .sens {
  font-weight: 800;
}
.tcs-page .tcs-eyebrow .dot {
  color: var(--neutral-400);
}
.tcs-page .tcs-eyebrow .id {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--enedis-blue-line);
  color: var(--neutral-500);
  font-weight: 600;
}
.tcs-page .tcs-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--neutral-900);
  line-height: 1.25;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tcs-page .tcs-title .pt {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcs-page .tcs-title .arrow {
  color: var(--enedis-blue);
  font-size: 14px;
}
.tcs-page .tcs-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tcs-page .tcs-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  font-size: 11.5px;
  font-weight: 600;
}
.tcs-page .tcs-meta-pill i {
  font-size: 10px;
  color: var(--neutral-500);
}
.tcs-page .tcs-meta-pill.is-blue {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-line);
  color: var(--enedis-blue-700);
}
.tcs-page .tcs-meta-pill.is-blue i {
  color: var(--enedis-blue);
}
.tcs-page .tcs-meta-pill .plate {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  background: #fff;
  border-radius: 4px;
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  margin-left: 4px;
}
.tcs-page .tcs-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.tcs-page .tcs-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.tcs-page .tcs-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}
.tcs-page .tcs-status.is-success {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.tcs-page .tcs-status.is-warning {
  background: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
.tcs-page .tcs-status.is-danger {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(185, 28, 28, 0.22);
}
.tcs-page .tcs-status.is-info {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border: 1px solid var(--enedis-blue-line);
}
.tcs-page .tcs-status.is-neutral {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.tcs-page .tcs-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px;
  margin-bottom: 16px;
  align-items: start;
}
.tcs-page .tcs-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--tcs-radius);
  overflow: hidden;
}
.tcs-page .tcs-card-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}
.tcs-page .tcs-card-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: 0 2px 2px 0;
}
.tcs-page .tcs-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-900);
  margin: 0;
}
.tcs-page .tcs-card-title i {
  color: var(--enedis-blue);
  font-size: 11px;
  width: 16px;
  text-align: center;
}
.tcs-page .tcs-card-title .count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}
.tcs-page .tcs-card-body {
  padding: 12px 18px;
}
.tcs-page .tcs-pax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tcs-page .tcs-pax-table thead th {
  padding: 9px 16px;
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.tcs-page .tcs-pax-table tbody tr {
  border-bottom: 1px solid var(--neutral-100);
  transition: background 120ms;
}
.tcs-page .tcs-pax-table tbody tr:last-child {
  border-bottom: none;
}
.tcs-page .tcs-pax-table tbody tr:hover {
  background: var(--enedis-blue-soft);
}
.tcs-page .tcs-pax-table tbody td {
  padding: 10px 16px;
  color: var(--neutral-700);
  vertical-align: middle;
}
.tcs-page .tcs-pax-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tcs-page .tcs-pax-name .stagiaire-avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-family);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.tcs-page .tcs-pax-name .meta {
  min-width: 0;
}
.tcs-page .tcs-pax-name .meta strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
}
.tcs-page .tcs-pax-name .meta .dr {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--neutral-500);
  margin-top: 1px;
}
.tcs-page .tcs-pax-name .meta .deleted {
  font-style: italic;
  color: var(--neutral-400);
  font-size: 12px;
}
.tcs-page .tcs-formation {
  font-size: 12.5px;
  color: var(--neutral-700);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.tcs-page .tcs-nni {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neutral-700);
  font-weight: 600;
  padding: 2px 8px;
  background: var(--neutral-100);
  border-radius: 6px;
  display: inline-block;
}
.tcs-page .tcs-pax-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.tcs-page .tcs-pax-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tcs-page .tcs-pax-status.is-confirme {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.tcs-page .tcs-pax-status.is-annule {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(185, 28, 28, 0.22);
}
.tcs-page .tcs-pax-status.is-attente {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border: 1px solid var(--enedis-blue-line);
}
.tcs-page .tcs-row-btn {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  color: var(--neutral-600);
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}
.tcs-page .tcs-row-btn:hover {
  background: var(--red-50);
  border-color: var(--red-600);
  color: var(--red-700);
}
.tcs-page .tcs-info {
  display: flex;
  flex-direction: column;
}
.tcs-page .tcs-info-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--neutral-100);
}
.tcs-page .tcs-info-row:last-child {
  border-bottom: none;
}
.tcs-page .tcs-info-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tcs-page .tcs-info-label i {
  color: var(--enedis-blue);
  font-size: 10px;
  width: 12px;
  text-align: center;
}
.tcs-page .tcs-info-value {
  font-size: 12.5px;
  color: var(--neutral-900);
  font-weight: 600;
  word-break: break-word;
  text-align: right;
}
.tcs-page .tcs-info-value.is-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.tcs-page .tcs-info-value.is-empty {
  color: var(--neutral-400);
  font-style: italic;
  font-weight: 500;
}
.tcs-page .tcs-info-value.is-cost {
  color: var(--green-700);
  font-family: var(--font-mono);
}
.tcs-page .tcs-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
  box-shadow: 0 4px 12px -4px rgba(20, 50, 250, 0.5);
}
.tcs-page .tcs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(20, 50, 250, 0.6);
}
.tcs-page .tcs-btn i {
  font-size: 11px;
}
.tcs-page .tcs-btn.is-ghost {
  background: #fff;
  color: var(--neutral-700);
  border: 1px solid var(--card-border);
  box-shadow: none;
}
.tcs-page .tcs-btn.is-ghost:hover {
  background: var(--neutral-50);
  border-color: var(--enedis-blue-line);
  color: var(--enedis-blue-700);
  transform: none;
}
.tcs-page .tcs-empty {
  padding: 24px 20px;
  text-align: center;
}
.tcs-page .tcs-empty .ic {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-radius: 12px;
  font-size: 16px;
}
.tcs-page .tcs-empty .title {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 3px;
}
.tcs-page .tcs-empty .desc {
  font-size: 12px;
  color: var(--neutral-500);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.45;
}
.tcs-page .tcs-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tcs-page .tcs-history-table thead th {
  padding: 10px 16px;
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.tcs-page .tcs-history-table tbody tr {
  border-bottom: 1px solid var(--neutral-100);
}
.tcs-page .tcs-history-table tbody tr:last-child {
  border-bottom: none;
}
.tcs-page .tcs-history-table tbody td {
  padding: 12px 16px;
  color: var(--neutral-700);
  vertical-align: middle;
}
.tcs-page .tcs-history-table tbody td.prest {
  font-weight: 700;
  color: var(--neutral-900);
}
.tcs-page .tcs-history-table tbody td.date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--neutral-500);
}
.tcs-page .tcs-history-table tbody td.empty {
  color: var(--neutral-400);
  font-style: italic;
}
.tcs-page .quick-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 16, 32, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tcs-page .quick-modal-box {
  background: #fff;
  border-radius: var(--tcs-radius);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px -20px rgba(11, 16, 32, 0.3);
  position: relative;
  animation: tcsModalIn 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tcsModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.tcs-page .quick-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--card-border);
}
.tcs-page .quick-modal-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
}
.tcs-page .quick-modal-header p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.tcs-page .quick-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%) !important;
  color: #fff !important;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(20, 50, 250, 0.45);
}
.tcs-page .quick-modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--neutral-500);
  cursor: pointer;
  font-size: 13px;
  transition: all 150ms;
}
.tcs-page .quick-modal-close:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.tcs-page .quick-modal-form {
  padding: 18px 22px 20px;
}
.tcs-page .quick-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}
.tcs-page .pax-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  padding: 2px;
}
.tcs-page .pax-candidate {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
}
.tcs-page .pax-candidate:hover {
  border-color: var(--enedis-blue-line);
  background: var(--neutral-50);
}
.tcs-page .pax-candidate:has(input:checked) {
  border-color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
}
.tcs-page .pax-candidate input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--enedis-blue);
  cursor: pointer;
  flex-shrink: 0;
}
.tcs-page .pax-cand-body {
  flex: 1;
  min-width: 0;
}
.tcs-page .pax-cand-name {
  font-size: 13px;
  margin-bottom: 4px;
}
.tcs-page .pax-cand-name strong {
  font-weight: 700;
  color: var(--neutral-900);
}
.tcs-page .pax-cand-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--neutral-600);
}
.tcs-page .pax-cand-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tcs-page .pax-cand-meta > span i {
  color: var(--enedis-blue);
  font-size: 10px;
}
.tcs-page .pax-cand-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--neutral-300);
}
.tcs-page .pax-cand-hint {
  display: block;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 7px;
  color: var(--enedis-blue-700);
  font-size: 11.5px;
  font-weight: 600;
}
.tcs-page .pax-cand-hint strong {
  font-family: var(--font-mono);
}
@media (max-width: 920px) {
  .tcs-page .tcs-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .tcs-page .tcs-hero {
    padding: 20px 18px;
  }
  .tcs-page .tcs-mark {
    width: 54px;
    height: 54px;
  }
  .tcs-page .tcs-mark i {
    font-size: 20px;
  }
  .tcs-page .tcs-title {
    font-size: 20px;
  }
  .tcs-page .tcs-title .pt {
    max-width: 100%;
  }
  .tcs-page .tcs-hero-side {
    width: 100%;
    align-items: flex-start;
  }
  .tcs-page .tcs-card-head, .tcs-page .tcs-card-body {
    padding: 14px 16px;
  }
  .tcs-page .tcs-pax-table thead {
    display: none;
  }
  .tcs-page .tcs-pax-table tbody tr {
    display: block;
    padding: 12px 0;
  }
  .tcs-page .tcs-pax-table tbody td {
    display: block;
    padding: 4px 16px;
  }
  .tcs-page .tcs-history-table thead {
    display: none;
  }
  .tcs-page .tcs-history-table tbody tr {
    display: block;
    padding: 12px 16px;
  }
  .tcs-page .tcs-history-table tbody td {
    display: block;
    padding: 3px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FORMATION — page "Réponses des hôtels" /formations/{id}/reponses-hotels
   Scope : .rhx-page. Système Enedis : bleu Enedis dominant,
   neutres, FontAwesome partout. Hero, suggestion banner, table
   comparative avec sélection multiple, footer de validation.
   ═══════════════════════════════════════════════════════════════ */
.rhx-page {
  --enedis-blue: #1432FA;
  --enedis-blue-700: #0F26C4;
  --enedis-blue-soft: rgba(20, 50, 250, 0.08);
  --enedis-blue-line: rgba(20, 50, 250, 0.18);
  --rhx-radius: 14px;
  padding-bottom: 80px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── HERO ────────────────────────────────────────────────── */
  /* ── Boutons ─────────────────────────────────────────────── */
  /* ── Suggestion banner (combinaison optimale) ────────────── */
  /* ── Card / table comparative ────────────────────────────── */
  /* ── Cells ───────────────────────────────────────────────── */
  /* ── Footer (validation) ─────────────────────────────────── */
  /* ── Empty state ─────────────────────────────────────────── */
  /* ── Responsive ──────────────────────────────────────────── */
}
.rhx-page .rhx-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rhx-page .rhx-crumb a {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.rhx-page .rhx-crumb a:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.rhx-page .rhx-crumb a i {
  font-size: 11px;
}
.rhx-page .rhx-crumb .sep {
  color: var(--neutral-300);
  font-size: 9px;
}
.rhx-page .rhx-crumb strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.rhx-page .rhx-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--rhx-radius);
  padding: 22px 26px;
  margin-bottom: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
}
.rhx-page .rhx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 280px at 100% -20%, var(--enedis-blue-soft), transparent 60%);
  pointer-events: none;
}
.rhx-page .rhx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(20, 50, 250, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 50, 250, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 90%);
  pointer-events: none;
}
.rhx-page .rhx-hero > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .rhx-page .rhx-hero {
    grid-template-columns: auto 1fr;
  }
  .rhx-page .rhx-hero .rhx-hero-actions {
    grid-column: 1/-1;
    margin-top: 4px;
  }
}
.rhx-page .rhx-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px -10px rgba(20, 50, 250, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.rhx-page .rhx-mark i {
  font-size: 20px;
}
.rhx-page .rhx-hero-body {
  min-width: 0;
}
.rhx-page .rhx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--enedis-blue);
  padding: 3px 9px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 999px;
  margin-bottom: 8px;
}
.rhx-page .rhx-eyebrow i {
  font-size: 5px;
}
.rhx-page .rhx-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  line-height: 1.15;
  margin: 0 0 8px;
}
.rhx-page .rhx-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rhx-page .rhx-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 600;
}
.rhx-page .rhx-meta-pill i {
  font-size: 10px;
  color: var(--neutral-500);
}
.rhx-page .rhx-meta-pill.is-blue {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-line);
  color: var(--enedis-blue-700);
}
.rhx-page .rhx-meta-pill.is-blue i {
  color: var(--enedis-blue);
}
.rhx-page .rhx-meta-pill strong {
  font-family: var(--font-mono);
  font-weight: 700;
}
.rhx-page .rhx-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  justify-self: end;
}
.rhx-page .rhx-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-700);
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
  white-space: nowrap;
}
.rhx-page .rhx-btn:hover {
  border-color: var(--enedis-blue);
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
}
.rhx-page .rhx-btn i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.rhx-page .rhx-btn.is-primary {
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(20, 50, 250, 0.5);
}
.rhx-page .rhx-btn.is-primary i {
  color: #fff;
}
.rhx-page .rhx-btn.is-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(20, 50, 250, 0.65);
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
}
.rhx-page .rhx-btn.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--neutral-600);
}
.rhx-page .rhx-btn.is-ghost:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.rhx-page .rhx-btn.is-ghost i {
  color: var(--neutral-500);
}
.rhx-page .rhx-suggest {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--enedis-blue-line);
  border-left: 3px solid var(--enedis-blue);
  border-radius: var(--rhx-radius);
  margin-bottom: 18px;
  align-items: flex-start;
}
.rhx-page .rhx-suggest-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(20, 50, 250, 0.45);
}
.rhx-page .rhx-suggest-body {
  min-width: 0;
}
.rhx-page .rhx-suggest-body strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rhx-page .rhx-suggest-body strong .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--enedis-blue);
  color: #fff;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rhx-page .rhx-suggest-body p {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.5;
}
.rhx-page .rhx-suggest-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rhx-page .rhx-suggest-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--enedis-blue-line);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--enedis-blue-700);
}
.rhx-page .rhx-suggest-pill i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.rhx-page .rhx-suggest-pill small {
  font-family: var(--font-mono);
  color: var(--neutral-500);
  font-weight: 700;
  font-size: 10.5px;
  margin-left: 2px;
}
.rhx-page .rhx-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--rhx-radius);
  overflow: hidden;
  margin: 0;
}
.rhx-page .rhx-card-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}
.rhx-page .rhx-card-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: 0 2px 2px 0;
}
.rhx-page .rhx-card-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-900);
  margin: 0;
}
.rhx-page .rhx-card-head h3 i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.rhx-page .rhx-card-head .hint {
  font-size: 12px;
  color: var(--neutral-500);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rhx-page .rhx-card-head .hint i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.rhx-page .rhx-table-wrap {
  overflow-x: auto;
}
.rhx-page .rhx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rhx-page .rhx-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.rhx-page .rhx-table thead th:first-child {
  padding-left: 18px;
}
.rhx-page .rhx-table thead th:last-child {
  padding-right: 18px;
  text-align: right;
}
.rhx-page .rhx-table tbody tr {
  border-bottom: 1px solid var(--neutral-100);
  transition: background 120ms;
}
.rhx-page .rhx-table tbody tr:last-child {
  border-bottom: none;
}
.rhx-page .rhx-table tbody tr:hover {
  background: var(--enedis-blue-soft);
}
.rhx-page .rhx-table tbody tr.is-checked {
  background: var(--enedis-blue-soft);
  box-shadow: inset 3px 0 0 var(--enedis-blue);
}
.rhx-page .rhx-table tbody td {
  padding: 13px 14px;
  color: var(--neutral-700);
  vertical-align: middle;
}
.rhx-page .rhx-table tbody td:first-child {
  padding-left: 18px;
}
.rhx-page .rhx-table tbody td:last-child {
  padding-right: 18px;
  text-align: right;
}
.rhx-page .rhx-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1.5px solid var(--neutral-300);
  border-radius: 5px;
  cursor: pointer;
  transition: all 120ms ease;
  vertical-align: middle;
}
.rhx-page .rhx-check:hover {
  border-color: var(--enedis-blue);
}
.rhx-page .rhx-check:checked {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
}
.rhx-page .rhx-check:checked::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.rhx-page .rhx-check:disabled {
  background: var(--neutral-100);
  border-color: var(--neutral-200);
  cursor: not-allowed;
}
.rhx-page .rhx-hotel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rhx-page .rhx-hotel strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
}
.rhx-page .rhx-hotel small {
  font-size: 11.5px;
  color: var(--neutral-500);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rhx-page .rhx-hotel small i {
  color: var(--enedis-blue);
  font-size: 9px;
}
.rhx-page .rhx-statut {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rhx-page .rhx-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  width: max-content;
}
.rhx-page .rhx-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rhx-page .rhx-status-pill.is-success {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.rhx-page .rhx-status-pill.is-warning {
  background: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
.rhx-page .rhx-status-pill.is-danger {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(185, 28, 28, 0.22);
}
.rhx-page .rhx-status-pill.is-info {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border: 1px solid var(--enedis-blue-line);
}
.rhx-page .rhx-status-pill.is-neutral {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.rhx-page .rhx-status-pill.is-primary {
  background: var(--enedis-blue);
  color: #fff;
  border: 1px solid var(--enedis-blue);
}
.rhx-page .rhx-status-pill.is-primary::before {
  background: #fff;
}
.rhx-page .rhx-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--neutral-500);
  font-weight: 600;
}
.rhx-page .rhx-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
}
.rhx-page .rhx-num small {
  font-family: var(--font-family);
  font-size: 11px;
  color: var(--neutral-500);
  font-weight: 500;
  margin-left: 3px;
}
.rhx-page .rhx-empty-cell {
  color: var(--neutral-300);
  font-style: italic;
  font-size: 12px;
}
.rhx-page .rhx-days {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rhx-page .rhx-day {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--neutral-100);
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-700);
}
.rhx-page .rhx-day i {
  font-size: 9px;
}
.rhx-page .rhx-day.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.rhx-page .rhx-day.is-ok i {
  color: var(--green-600);
}
.rhx-page .rhx-day.is-ko {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(185, 28, 28, 0.22);
}
.rhx-page .rhx-day.is-ko i {
  color: var(--red-600);
}
.rhx-page .rhx-delai {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-900);
}
.rhx-page .rhx-delai small {
  display: block;
  font-family: var(--font-family);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-top: 2px;
}
.rhx-page .rhx-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 200px;
}
.rhx-page .rhx-contact .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rhx-page .rhx-contact .email {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--neutral-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rhx-page .rhx-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}
.rhx-page .rhx-act {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  color: var(--neutral-600);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
}
.rhx-page .rhx-act:hover {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
  color: var(--enedis-blue-700);
  transform: translateY(-1px);
}
.rhx-page .rhx-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--card-border);
  background: var(--neutral-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.rhx-page .rhx-footer .hint {
  font-size: 12px;
  color: var(--neutral-600);
  line-height: 1.5;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 240px;
}
.rhx-page .rhx-footer .hint i {
  color: var(--enedis-blue);
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}
.rhx-page .rhx-footer .hint strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.rhx-page .rhx-empty {
  padding: 56px 24px;
  text-align: center;
}
.rhx-page .rhx-empty .ic {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  border-radius: 18px;
  font-size: 24px;
}
.rhx-page .rhx-empty .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 6px;
}
.rhx-page .rhx-empty .desc {
  font-size: 13px;
  color: var(--neutral-500);
  max-width: 420px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .rhx-page .rhx-hero {
    padding: 18px;
  }
  .rhx-page .rhx-mark {
    width: 48px;
    height: 48px;
  }
  .rhx-page .rhx-mark i {
    font-size: 18px;
  }
  .rhx-page .rhx-title {
    font-size: 18px;
  }
  .rhx-page .rhx-suggest {
    grid-template-columns: 1fr;
  }
  .rhx-page .rhx-table thead {
    display: none;
  }
  .rhx-page .rhx-table tbody tr {
    display: block;
    padding: 12px 16px;
  }
  .rhx-page .rhx-table tbody td {
    display: block;
    padding: 4px 0;
    text-align: left !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FORMATION EDIT — Onglet "Réponses hôtels"
   Scope : .gff-page .gffh-panel. Système Enedis : bleu dominant,
   workflow steps + KPIs + CTA banner + table comparative.

   Override les styles legacy (.gff-stats, .gff-table) pour les
   demandes hôtels uniquement.
   ═══════════════════════════════════════════════════════════════ */
.gff-page .gffh-panel {
  --enedis-blue: #1432FA;
  --enedis-blue-700: #0F26C4;
  --enedis-blue-soft: rgba(20, 50, 250, 0.08);
  --enedis-blue-line: rgba(20, 50, 250, 0.18);
  --gffh-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 24px;
  /* ── Empty state amélioré ────────────────────────────────── */
  /* ── Header de panel (eyebrow + title + meta) ────────────── */
  /* ── Workflow steps (4 étapes) ───────────────────────────── */
  /* ── KPI strip ───────────────────────────────────────────── */
  /* ── CTA banner (Comparer / Ajouter) ─────────────────────── */
  /* ── Workflow terminé (état "fin") ───────────────────────── */
  /* ── Card table comparatif ───────────────────────────────── */
  /* ── Responsive ──────────────────────────────────────────── */
}
.gff-page .gffh-panel .gffh-empty {
  padding: 56px 28px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--gffh-radius);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gff-page .gffh-panel .gffh-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 280px at 50% -20%, var(--enedis-blue-soft), transparent 60%);
  pointer-events: none;
}
.gff-page .gffh-panel .gffh-empty > * {
  position: relative;
  z-index: 1;
}
.gff-page .gffh-panel .gffh-empty .ic {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  border-radius: 20px;
  font-size: 28px;
  box-shadow: 0 12px 30px -10px rgba(20, 50, 250, 0.55);
}
.gff-page .gffh-panel .gffh-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.015em;
}
.gff-page .gffh-panel .gffh-empty p {
  margin: 0 auto 18px;
  max-width: 480px;
  font-size: 13.5px;
  color: var(--neutral-600);
  line-height: 1.55;
}
.gff-page .gffh-panel .gffh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.gff-page .gffh-panel .gffh-head-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}
.gff-page .gffh-panel .gffh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--enedis-blue);
  padding: 3px 9px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 999px;
}
.gff-page .gffh-panel .gffh-eyebrow i {
  font-size: 5px;
}
.gff-page .gffh-panel .gffh-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.015em;
  margin: 0;
}
.gff-page .gffh-panel .gffh-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--gffh-radius);
  overflow: hidden;
}
.gff-page .gffh-panel .gffh-step {
  position: relative;
  padding: 14px 18px;
  border-right: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
}
.gff-page .gffh-panel .gffh-step:last-child {
  border-right: none;
}
.gff-page .gffh-panel .gffh-step::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: var(--card-border);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  z-index: 2;
}
.gff-page .gffh-panel .gffh-step:last-child::after {
  display: none;
}
.gff-page .gffh-panel .gffh-step.is-done {
  background: var(--green-50);
}
.gff-page .gffh-panel .gffh-step.is-done .gffh-step-ic {
  background: var(--green-600);
  color: #fff;
}
.gff-page .gffh-panel .gffh-step.is-done .gffh-step-label {
  color: var(--green-700);
}
.gff-page .gffh-panel .gffh-step.is-done::after {
  background: var(--green-200, #BBF7D0);
}
.gff-page .gffh-panel .gffh-step.is-active {
  background: var(--enedis-blue-soft);
}
.gff-page .gffh-panel .gffh-step.is-active .gffh-step-ic {
  background: var(--enedis-blue);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(20, 50, 250, 0.5);
  animation: gffhPulse 2.4s ease-in-out infinite;
}
.gff-page .gffh-panel .gffh-step.is-active .gffh-step-label {
  color: var(--enedis-blue-700);
}
.gff-page .gffh-panel .gffh-step.is-active::after {
  background: var(--enedis-blue-line);
}
@keyframes gffhPulse {
  0%, 100% {
    box-shadow: 0 6px 14px -4px rgba(20, 50, 250, 0.5), 0 0 0 0 rgba(20, 50, 250, 0.35);
  }
  50% {
    box-shadow: 0 6px 14px -4px rgba(20, 50, 250, 0.5), 0 0 0 8px rgba(20, 50, 250, 0);
  }
}
.gff-page .gffh-panel .gffh-step-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  transition: all 200ms ease;
}
.gff-page .gffh-panel .gffh-step-body {
  min-width: 0;
  line-height: 1.2;
}
.gff-page .gffh-panel .gffh-step-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-700);
  letter-spacing: -0.005em;
}
.gff-page .gffh-panel .gffh-step-hint {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-400);
}
.gff-page .gffh-panel .gffh-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--gffh-radius);
  overflow: hidden;
}
.gff-page .gffh-panel .gffh-kpi {
  padding: 14px 16px;
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background 150ms;
}
.gff-page .gffh-panel .gffh-kpi:last-child {
  border-right: none;
}
.gff-page .gffh-panel .gffh-kpi:hover {
  background: var(--neutral-50);
}
.gff-page .gffh-panel .gffh-kpi.is-success .gffh-kpi-ic {
  background: var(--green-50);
  color: var(--green-700);
}
.gff-page .gffh-panel .gffh-kpi.is-success .gffh-kpi-value {
  color: var(--green-700);
}
.gff-page .gffh-panel .gffh-kpi.is-danger .gffh-kpi-ic {
  background: var(--red-50);
  color: var(--red-700);
}
.gff-page .gffh-panel .gffh-kpi.is-danger .gffh-kpi-value {
  color: var(--red-700);
}
.gff-page .gffh-panel .gffh-kpi.is-warning .gffh-kpi-ic {
  background: var(--amber-50);
  color: var(--amber-700);
}
.gff-page .gffh-panel .gffh-kpi.is-warning .gffh-kpi-value {
  color: var(--amber-700);
}
.gff-page .gffh-panel .gffh-kpi.is-info .gffh-kpi-ic {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
}
.gff-page .gffh-panel .gffh-kpi.is-info .gffh-kpi-value {
  color: var(--enedis-blue-700);
}
.gff-page .gffh-panel .gffh-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gff-page .gffh-panel .gffh-kpi-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
}
.gff-page .gffh-panel .gffh-kpi-ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 11.5px;
  flex-shrink: 0;
}
.gff-page .gffh-panel .gffh-kpi-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 2px;
}
.gff-page .gffh-panel .gffh-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--enedis-blue-line);
  border-left: 3px solid var(--enedis-blue);
  border-radius: var(--gffh-radius);
}
.gff-page .gffh-panel .gffh-cta-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 10px 24px -8px rgba(20, 50, 250, 0.5);
}
.gff-page .gffh-panel .gffh-cta-body {
  min-width: 0;
}
.gff-page .gffh-panel .gffh-cta-body strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.gff-page .gffh-panel .gffh-cta-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-600);
  line-height: 1.45;
}
.gff-page .gffh-panel .gffh-cta-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.gff-page .gffh-panel .gffh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-700);
  cursor: pointer;
  text-decoration: none;
  transition: all 180ms ease;
  white-space: nowrap;
}
.gff-page .gffh-panel .gffh-btn i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.gff-page .gffh-panel .gffh-btn:hover {
  border-color: var(--enedis-blue);
  color: var(--enedis-blue);
  transform: translateY(-1px);
}
.gff-page .gffh-panel .gffh-btn.is-primary {
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(20, 50, 250, 0.5);
}
.gff-page .gffh-panel .gffh-btn.is-primary i {
  color: #fff;
}
.gff-page .gffh-panel .gffh-btn.is-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(20, 50, 250, 0.65);
  color: #fff;
}
.gff-page .gffh-panel .gffh-success {
  position: relative;
  background: linear-gradient(135deg, var(--green-50) 0%, #fff 70%);
  border: 1px solid var(--green-200, #BBF7D0);
  border-radius: var(--gffh-radius);
  overflow: hidden;
}
.gff-page .gffh-panel .gffh-success::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green-600, #15803D);
}
.gff-page .gffh-panel .gffh-success::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 240px at 100% -20%, rgba(21, 128, 61, 0.08), transparent 60%);
  pointer-events: none;
}
.gff-page .gffh-panel .gffh-success > * {
  position: relative;
  z-index: 1;
}
.gff-page .gffh-panel .gffh-success-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--green-200, #BBF7D0);
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .gff-page .gffh-panel .gffh-success-head {
    grid-template-columns: auto 1fr;
  }
  .gff-page .gffh-panel .gffh-success-head .gffh-success-actions {
    grid-column: 1/-1;
    justify-content: flex-end;
  }
}
.gff-page .gffh-panel .gffh-success-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--green-500, #22C55E) 0%, var(--green-600, #15803D) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 10px 24px -8px rgba(21, 128, 61, 0.5);
}
.gff-page .gffh-panel .gffh-success-body {
  min-width: 0;
}
.gff-page .gffh-panel .gffh-success-body .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-700, #15803D);
  padding: 3px 8px;
  background: rgba(21, 128, 61, 0.08);
  border: 1px solid rgba(21, 128, 61, 0.22);
  border-radius: 999px;
  margin-bottom: 6px;
}
.gff-page .gffh-panel .gffh-success-body .eyebrow i {
  font-size: 5px;
}
.gff-page .gffh-panel .gffh-success-body strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.012em;
}
.gff-page .gffh-panel .gffh-success-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.gff-page .gffh-panel .gffh-success-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: rgba(255, 255, 255, 0.7);
}
@media (max-width: 540px) {
  .gff-page .gffh-panel .gffh-success-stats {
    grid-template-columns: 1fr;
  }
}
.gff-page .gffh-panel .gffh-success-stat {
  padding: 12px 18px;
  border-right: 1px solid var(--green-200, #BBF7D0);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gff-page .gffh-panel .gffh-success-stat:last-child {
  border-right: none;
}
@media (max-width: 540px) {
  .gff-page .gffh-panel .gffh-success-stat {
    border-right: none;
    border-bottom: 1px solid var(--green-200, #BBF7D0);
  }
  .gff-page .gffh-panel .gffh-success-stat:last-child {
    border-bottom: none;
  }
}
.gff-page .gffh-panel .gffh-success-stat .label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
}
.gff-page .gffh-panel .gffh-success-stat .value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--green-700, #15803D);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 2px;
}
.gff-page .gffh-panel .gffh-success-stat .value small {
  font-family: var(--font-family);
  font-size: 11.5px;
  color: var(--neutral-500);
  font-weight: 600;
  margin-left: 4px;
}
.gff-page .gffh-panel .gffh-success-list {
  padding: 14px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gff-page .gffh-panel .gffh-success-hotel {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--green-200, #BBF7D0);
  border-radius: 10px;
}
@media (max-width: 720px) {
  .gff-page .gffh-panel .gffh-success-hotel {
    grid-template-columns: auto 1fr;
  }
  .gff-page .gffh-panel .gffh-success-hotel .gffh-success-hotel-rooms,
  .gff-page .gffh-panel .gffh-success-hotel .gffh-success-hotel-price {
    grid-column: 2;
  }
}
.gff-page .gffh-panel .gffh-success-hotel-ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(21, 128, 61, 0.08);
  color: var(--green-700, #15803D);
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.gff-page .gffh-panel .gffh-success-hotel-body {
  min-width: 0;
}
.gff-page .gffh-panel .gffh-success-hotel-body strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
}
.gff-page .gffh-panel .gffh-success-hotel-body small {
  font-size: 11.5px;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gff-page .gffh-panel .gffh-success-hotel-body small i {
  color: var(--green-600);
  font-size: 10px;
}
.gff-page .gffh-panel .gffh-success-hotel-rooms {
  font-size: 12px;
  color: var(--neutral-700);
}
.gff-page .gffh-panel .gffh-success-hotel-rooms strong {
  font-family: var(--font-mono);
  color: var(--neutral-900);
  font-weight: 700;
}
.gff-page .gffh-panel .gffh-success-hotel-price {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-700, #15803D);
  white-space: nowrap;
  padding: 3px 9px;
  background: rgba(21, 128, 61, 0.08);
  border-radius: 6px;
}
.gff-page .gffh-panel .gffh-success-note {
  padding: 12px 22px 18px;
  font-size: 12px;
  color: var(--neutral-600);
  line-height: 1.55;
  border-top: 1px dashed var(--green-200, #BBF7D0);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.gff-page .gffh-panel .gffh-success-note > i {
  color: var(--green-600, #15803D);
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}
.gff-page .gffh-panel .gffh-success-note strong {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
}
.gff-page .gffh-panel .gffh-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--gffh-radius);
  overflow: hidden;
}
.gff-page .gffh-panel .gffh-card-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}
.gff-page .gffh-panel .gffh-card-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: 0 2px 2px 0;
}
.gff-page .gffh-panel .gffh-card-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-900);
  margin: 0;
}
.gff-page .gffh-panel .gffh-card-head h3 i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.gff-page .gffh-panel .gffh-table-wrap {
  overflow-x: auto;
}
.gff-page .gffh-panel .gffh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.gff-page .gffh-panel .gffh-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.gff-page .gffh-panel .gffh-table thead th:first-child {
  padding-left: 18px;
}
.gff-page .gffh-panel .gffh-table thead th:last-child {
  padding-right: 18px;
  text-align: right;
}
.gff-page .gffh-panel .gffh-table tbody tr {
  border-bottom: 1px solid var(--neutral-100);
  transition: background 120ms;
}
.gff-page .gffh-panel .gffh-table tbody tr:last-child {
  border-bottom: none;
}
.gff-page .gffh-panel .gffh-table tbody tr:hover {
  background: var(--enedis-blue-soft);
}
.gff-page .gffh-panel .gffh-table tbody td {
  padding: 12px 14px;
  color: var(--neutral-700);
  vertical-align: middle;
}
.gff-page .gffh-panel .gffh-table tbody td:first-child {
  padding-left: 18px;
}
.gff-page .gffh-panel .gffh-table tbody td:last-child {
  padding-right: 18px;
  text-align: right;
}
.gff-page .gffh-panel .gffh-hotel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gff-page .gffh-panel .gffh-hotel strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
}
.gff-page .gffh-panel .gffh-hotel small {
  font-size: 11.5px;
  color: var(--neutral-500);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gff-page .gffh-panel .gffh-hotel small i {
  color: var(--enedis-blue);
  font-size: 9px;
}
.gff-page .gffh-panel .gffh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  width: max-content;
}
.gff-page .gffh-panel .gffh-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.gff-page .gffh-panel .gffh-pill.is-success {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.gff-page .gffh-panel .gffh-pill.is-warning {
  background: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
.gff-page .gffh-panel .gffh-pill.is-danger {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(185, 28, 28, 0.22);
}
.gff-page .gffh-panel .gffh-pill.is-info {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border: 1px solid var(--enedis-blue-line);
}
.gff-page .gffh-panel .gffh-pill.is-neutral {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.gff-page .gffh-panel .gffh-pill.is-primary {
  background: var(--enedis-blue);
  color: #fff;
  border: 1px solid var(--enedis-blue);
}
.gff-page .gffh-panel .gffh-pill.is-primary::before {
  background: #fff;
}
.gff-page .gffh-panel .gffh-date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--neutral-600);
  font-weight: 600;
}
.gff-page .gffh-panel .gffh-resp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gff-page .gffh-panel .gffh-resp .ok {
  color: var(--green-600);
  font-size: 14px;
}
.gff-page .gffh-panel .gffh-resp .ko {
  color: var(--red-500);
  font-size: 14px;
}
.gff-page .gffh-panel .gffh-resp .nb {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
  font-size: 13px;
}
.gff-page .gffh-panel .gffh-resp .mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gff-page .gffh-panel .gffh-resp .indispo {
  color: var(--red-700);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gff-page .gffh-panel .gffh-cond {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
}
.gff-page .gffh-panel .gffh-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
}
.gff-page .gffh-panel .gffh-price small {
  font-family: var(--font-family);
  font-size: 11px;
  color: var(--neutral-500);
  font-weight: 600;
}
.gff-page .gffh-panel .gffh-validation {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 10px;
}
.gff-page .gffh-panel .gffh-validation.is-ok {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.gff-page .gffh-panel .gffh-validation.is-pending {
  background: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
.gff-page .gffh-panel .gffh-empty-cell {
  color: var(--neutral-300);
  font-style: italic;
  font-size: 12px;
}
.gff-page .gffh-panel .gffh-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}
.gff-page .gffh-panel .gffh-act {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  color: var(--neutral-600);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
}
.gff-page .gffh-panel .gffh-act:hover {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
  color: var(--enedis-blue-700);
  transform: translateY(-1px);
}
@media (max-width: 1100px) {
  .gff-page .gffh-panel .gffh-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
  .gff-page .gffh-panel .gffh-kpi {
    border-bottom: 1px solid var(--card-border);
  }
  .gff-page .gffh-panel .gffh-kpi:nth-child(3n) {
    border-right: none;
  }
  .gff-page .gffh-panel .gffh-kpi:nth-last-child(-n+3) {
    border-bottom: none;
  }
}
@media (max-width: 820px) {
  .gff-page .gffh-panel .gffh-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .gff-page .gffh-panel .gffh-step {
    border-bottom: 1px solid var(--card-border);
  }
  .gff-page .gffh-panel .gffh-step::after {
    display: none;
  }
  .gff-page .gffh-panel .gffh-step:nth-child(2n) {
    border-right: none;
  }
  .gff-page .gffh-panel .gffh-step:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .gff-page .gffh-panel .gffh-cta {
    grid-template-columns: auto 1fr;
  }
  .gff-page .gffh-panel .gffh-cta-actions {
    grid-column: 1/-1;
  }
}
@media (max-width: 540px) {
  .gff-page .gffh-panel .gffh-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .gff-page .gffh-panel .gffh-kpi:nth-child(3n) {
    border-right: 1px solid var(--card-border);
  }
  .gff-page .gffh-panel .gffh-kpi:nth-child(2n) {
    border-right: none;
  }
  .gff-page .gffh-panel .gffh-steps {
    grid-template-columns: 1fr;
  }
  .gff-page .gffh-panel .gffh-step {
    border-right: none;
  }
  .gff-page .gffh-panel .gffh-cta-actions {
    flex-direction: column;
  }
  .gff-page .gffh-panel .gffh-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FORMATION — page "Envoi de demandes de disponibilité"
   Scope : .dhx-page. Hero + récap demandes existantes + form
   2 sections (paramètres + sélection hôtels) + footer sticky.
   ═══════════════════════════════════════════════════════════════ */
.dhx-page {
  --enedis-blue: #1432FA;
  --enedis-blue-700: #0F26C4;
  --enedis-blue-soft: rgba(20, 50, 250, 0.08);
  --enedis-blue-line: rgba(20, 50, 250, 0.18);
  --dhx-radius: 14px;
  padding-bottom: 96px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── HERO ────────────────────────────────────────────────── */
  /* ── Banner demandes existantes ──────────────────────────── */
  /* ── Sections ────────────────────────────────────────────── */
  /* ── Form fields ─────────────────────────────────────────── */
  /* ── Hôtels grid (checkbox cards) ────────────────────────── */
  /* ── Hint count selected ─────────────────────────────────── */
  /* ── Alert (no hotels) ───────────────────────────────────── */
  /* ── Footer sticky ───────────────────────────────────────── */
}
.dhx-page .dhx-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dhx-page .dhx-crumb a {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.dhx-page .dhx-crumb a:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.dhx-page .dhx-crumb a i {
  font-size: 11px;
}
.dhx-page .dhx-crumb .sep {
  color: var(--neutral-300);
  font-size: 9px;
}
.dhx-page .dhx-crumb strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.dhx-page .dhx-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--dhx-radius);
  padding: 22px 26px;
  margin-bottom: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}
.dhx-page .dhx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 280px at 100% -20%, var(--enedis-blue-soft), transparent 60%);
  pointer-events: none;
}
.dhx-page .dhx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(20, 50, 250, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 50, 250, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 90%);
  pointer-events: none;
}
.dhx-page .dhx-hero > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .dhx-page .dhx-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}
.dhx-page .dhx-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px -10px rgba(20, 50, 250, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.dhx-page .dhx-mark i {
  font-size: 20px;
}
.dhx-page .dhx-hero-body {
  min-width: 0;
}
.dhx-page .dhx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--enedis-blue);
  padding: 3px 9px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 999px;
  margin-bottom: 8px;
}
.dhx-page .dhx-eyebrow i {
  font-size: 5px;
}
.dhx-page .dhx-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  line-height: 1.15;
  margin: 0 0 8px;
}
.dhx-page .dhx-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dhx-page .dhx-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 600;
}
.dhx-page .dhx-meta-pill i {
  font-size: 10px;
  color: var(--neutral-500);
}
.dhx-page .dhx-meta-pill.is-blue {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue-line);
  color: var(--enedis-blue-700);
}
.dhx-page .dhx-meta-pill.is-blue i {
  color: var(--enedis-blue);
}
.dhx-page .dhx-existing {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-left: 3px solid var(--enedis-blue);
  border-radius: var(--dhx-radius);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.dhx-page .dhx-existing .ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  color: var(--enedis-blue);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dhx-page .dhx-existing .body {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  color: var(--enedis-blue-700);
  line-height: 1.45;
}
.dhx-page .dhx-existing .body strong {
  display: block;
  font-weight: 700;
  color: var(--neutral-900);
  font-size: 13.5px;
  margin-bottom: 2px;
}
.dhx-page .dhx-existing a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: #fff;
  border: 1px solid var(--enedis-blue);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--enedis-blue);
  text-decoration: none;
  transition: all 150ms ease;
  white-space: nowrap;
}
.dhx-page .dhx-existing a:hover {
  background: var(--enedis-blue);
  color: #fff;
  transform: translateY(-1px);
}
.dhx-page .dhx-existing a i {
  font-size: 10px;
}
.dhx-page .dhx-section {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--dhx-radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  overflow: hidden;
}
.dhx-page .dhx-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
}
.dhx-page .dhx-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--neutral-100);
}
.dhx-page .dhx-section-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--enedis-blue);
  color: #fff;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.dhx-page .dhx-section-titles {
  min-width: 0;
  flex: 1;
}
.dhx-page .dhx-section-titles h2 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dhx-page .dhx-section-titles h2 i {
  color: var(--enedis-blue);
  font-size: 13px;
}
.dhx-page .dhx-section-titles p {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.dhx-page .dhx-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .dhx-page .dhx-fields {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .dhx-page .dhx-fields {
    grid-template-columns: 1fr;
  }
}
.dhx-page .dhx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dhx-page .dhx-field.is-full {
  grid-column: 1/-1;
}
.dhx-page .dhx-field > label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  color: var(--neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.dhx-page .dhx-field > label i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.dhx-page .dhx-field > label .req {
  color: var(--red-600);
}
.dhx-page .dhx-field > .hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--neutral-500);
  font-weight: 500;
}
.dhx-page .dhx-field > .hint i {
  color: var(--enedis-blue);
  font-size: 10px;
}
.dhx-page .dhx-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--neutral-200);
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 13.5px;
  color: var(--neutral-900);
  background: #fff;
  transition: all 160ms;
}
.dhx-page .dhx-input.is-mono {
  font-family: var(--font-mono);
  font-weight: 600;
}
.dhx-page .dhx-input::placeholder {
  color: var(--neutral-400);
}
.dhx-page .dhx-input:hover:not(:focus) {
  border-color: var(--neutral-300);
}
.dhx-page .dhx-input:focus {
  outline: none;
  border-color: var(--enedis-blue);
  box-shadow: 0 0 0 4px var(--enedis-blue-soft);
}
.dhx-page textarea.dhx-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.dhx-page .dhx-hotels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.dhx-page .dhx-hotel-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 180ms ease;
  position: relative;
  overflow: hidden;
}
.dhx-page .dhx-hotel-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 180ms;
}
.dhx-page .dhx-hotel-card:hover {
  border-color: var(--enedis-blue-line);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(20, 50, 250, 0.15);
}
.dhx-page .dhx-hotel-card:has(input:checked) {
  border-color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
  box-shadow: 0 10px 22px -8px rgba(20, 50, 250, 0.25);
}
.dhx-page .dhx-hotel-card:has(input:checked)::before {
  background: var(--enedis-blue);
}
.dhx-page .dhx-hotel-card:has(input:checked) .dhx-hotel-check {
  background: var(--enedis-blue);
  border-color: var(--enedis-blue);
}
.dhx-page .dhx-hotel-card:has(input:checked) .dhx-hotel-check::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  font-size: 10px;
}
.dhx-page .dhx-hotel-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--neutral-300);
  background: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 150ms ease;
}
.dhx-page .dhx-hotel-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dhx-page .dhx-hotel-card:hover .dhx-hotel-check {
  border-color: var(--enedis-blue);
}
.dhx-page .dhx-hotel-body {
  flex: 1;
  min-width: 0;
}
.dhx-page .dhx-hotel-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.dhx-page .dhx-hotel-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  color: var(--neutral-600);
}
.dhx-page .dhx-hotel-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dhx-page .dhx-hotel-meta > span i {
  color: var(--enedis-blue);
  font-size: 10px;
  width: 12px;
  text-align: center;
}
.dhx-page .dhx-hotel-meta .no-mail {
  color: var(--red-700);
  font-weight: 600;
}
.dhx-page .dhx-hotel-meta .no-mail i {
  color: var(--red-500);
}
.dhx-page .dhx-hotel-meta .nb {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-800);
}
.dhx-page .dhx-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--neutral-700);
  flex-wrap: wrap;
}
.dhx-page .dhx-select-bar .info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dhx-page .dhx-select-bar .info i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.dhx-page .dhx-select-bar .quick {
  display: inline-flex;
  gap: 6px;
}
.dhx-page .dhx-select-bar .quick button {
  padding: 5px 11px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 7px;
  font-family: var(--font-family);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-700);
  cursor: pointer;
  transition: all 150ms;
}
.dhx-page .dhx-select-bar .quick button:hover {
  border-color: var(--enedis-blue);
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
}
.dhx-page .dhx-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-left: 3px solid var(--amber-500);
  border-radius: 12px;
  font-size: 13px;
  color: var(--amber-800, #92400E);
  line-height: 1.5;
}
.dhx-page .dhx-alert > i {
  color: var(--amber-700);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.dhx-page .dhx-alert strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.dhx-page .dhx-actions {
  position: sticky;
  bottom: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--dhx-radius);
  box-shadow: 0 18px 38px -18px rgba(11, 16, 32, 0.18);
  margin-top: 18px;
  flex-wrap: wrap;
}
.dhx-page .dhx-actions-hint {
  font-size: 12.5px;
  color: var(--neutral-600);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dhx-page .dhx-actions-hint i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.dhx-page .dhx-actions-hint strong {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-900);
}
.dhx-page .dhx-actions-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dhx-page .dhx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-700);
  cursor: pointer;
  text-decoration: none;
  transition: all 180ms ease;
  white-space: nowrap;
}
.dhx-page .dhx-btn i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.dhx-page .dhx-btn:hover {
  border-color: var(--enedis-blue);
  color: var(--enedis-blue);
  transform: translateY(-1px);
}
.dhx-page .dhx-btn.is-primary {
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(20, 50, 250, 0.5);
}
.dhx-page .dhx-btn.is-primary i {
  color: #fff;
}
.dhx-page .dhx-btn.is-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(20, 50, 250, 0.65);
  color: #fff;
}
.dhx-page .dhx-btn.is-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.dhx-page .dhx-btn.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--neutral-600);
}
.dhx-page .dhx-btn.is-ghost:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.dhx-page .dhx-btn.is-ghost i {
  color: var(--neutral-500);
}

.cbpx {
  padding-bottom: 80px;
}
.cbpx * {
  box-sizing: border-box;
}
.cbpx-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #7A8298;
  margin-bottom: 14px;
}
.cbpx-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7A8298;
  text-decoration: none;
  transition: color 0.15s;
}
.cbpx-crumb a:hover {
  color: #1D2D5C;
}
.cbpx-crumb .sep {
  font-size: 9px;
  color: #C4CAD6;
}
.cbpx-crumb strong {
  color: #1D2D5C;
  font-weight: 800;
}
.cbpx-hero {
  background: #1D2D5C;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 25, 55, 0.18);
  overflow: hidden;
  margin-bottom: 16px;
}
.cbpx-hero-top {
  padding: 22px 24px 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.cbpx-mark {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #27376A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #6CC04A;
  font-size: 20px;
}
.cbpx-hero-body {
  flex: 1;
  min-width: 240px;
}
.cbpx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8E9AC2;
}
.cbpx-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6CC04A;
}
.cbpx-title {
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.cbpx-subtitle {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #9FB0D8;
}
.cbpx-subtitle b {
  color: #C7E8B8;
}
.cbpx-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  padding: 0 24px 20px;
}
.cbpx-kpi {
  text-align: left;
  background: #27376A;
  border: 1px solid #33447A;
  border-radius: 12px;
  padding: 13px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font: inherit;
}
.cbpx-kpi:hover {
  border-color: #4A5C93;
}
.cbpx-kpi:active {
  transform: translateY(1px);
}
.cbpx-kpi.is-active {
  background: rgba(108, 192, 74, 0.14);
  border-color: #6CC04A;
}
.cbpx-kpi-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 15px;
}
.cbpx-kpi.is-att .cbpx-kpi-ic {
  background: rgba(217, 164, 65, 0.2);
  color: #F0C36D;
}
.cbpx-kpi.is-val .cbpx-kpi-ic {
  background: rgba(108, 192, 74, 0.18);
  color: #6CC04A;
}
.cbpx-kpi.is-con .cbpx-kpi-ic {
  background: rgba(217, 135, 131, 0.2);
  color: #E8A19D;
}
.cbpx-kpi-body {
  line-height: 1;
}
.cbpx-kpi-value {
  display: block;
  font-size: 23px;
  font-weight: 800;
  color: #fff;
}
.cbpx-kpi-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #8E9AC2;
  margin-top: 3px;
}
.cbpx-card {
  background: #fff;
  border: 1px solid #E4E8F0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05);
  overflow: hidden;
}
.cbpx-card-head {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #EEF1F6;
  flex-wrap: wrap;
}
.cbpx-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #1D2D5C;
}
.cbpx-count {
  font-size: 11.5px;
  font-weight: 800;
  color: #34508C;
  background: #E3EAF6;
  border-radius: 20px;
  padding: 2px 9px;
}
.cbpx-spacer {
  flex: 1;
}
.cbpx-select {
  height: 36px;
  border: 1px solid #E2E6EE;
  border-radius: 9px;
  background: #F7F8FB;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #324063;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cbpx-select:focus {
  border-color: #6CC04A;
}
.cbpx-table-wrap {
  overflow-x: auto;
}
.cbpx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1020px;
}
.cbpx-table thead th {
  padding: 11px 12px;
  background: #FAFBFD;
  color: #8A92A3;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: left;
}
.cbpx-table thead th:first-child {
  padding-left: 20px;
}
.cbpx-table thead th:last-child {
  padding-right: 20px;
}
.cbpx-table thead th.ta-right {
  text-align: right;
}
.cbpx-table td {
  padding: 12px;
  border-top: 1px solid #EEF1F6;
  vertical-align: middle;
}
.cbpx-table td:first-child {
  padding-left: 20px;
}
.cbpx-table td:last-child {
  padding-right: 20px;
}
.cbpx-table td.ta-right {
  text-align: right;
}
.cbpx-row {
  background: #fff;
  transition: background 0.12s;
}
.cbpx-row.is-attente {
  background: #FFFDF8;
}
.cbpx-row:hover {
  background: #FAFCFE;
}
.cbpx-row.is-hidden {
  display: none;
}
.cbpx-formation strong {
  display: block;
  font-weight: 700;
  color: #1D2D5C;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbpx-formation small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #9AA1B2;
  margin-top: 2px;
}
.cbpx-formation small .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #C4CAD6;
}
.cbpx-hotel strong {
  display: block;
  font-weight: 700;
  color: #324063;
  white-space: nowrap;
}
.cbpx-hotel small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #9AA1B2;
  margin-top: 2px;
}
.cbpx-price {
  white-space: nowrap;
}
.cbpx-price .amount {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #1D2D5C;
  font-variant-numeric: tabular-nums;
}
.cbpx-price .amount small {
  font-size: 11px;
  color: #9AA1B2;
  font-weight: 700;
}
.cbpx-price .meta {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #9AA1B2;
}
.cbpx-cond {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  color: #34508C;
  background: #EEF3FC;
  border: 1px solid #D3E0F5;
  border-radius: 7px;
  padding: 3px 9px;
  white-space: nowrap;
}
.cbpx-dash {
  color: #9AA1B2;
}
.cbpx-recu {
  white-space: nowrap;
  font-weight: 700;
  color: #5A6273;
  font-size: 12px;
}
.cbpx-status {
  min-width: 0;
}
.cbpx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.cbpx-pill .pdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cbpx-pill.is-success {
  background: #E7F5E0;
  color: #2E5320;
}
.cbpx-pill.is-danger {
  background: #FBE4E3;
  color: #B23A36;
}
.cbpx-pill.is-warning {
  background: #FCEFDC;
  color: #A85D00;
}
.cbpx-validator {
  font-size: 10.5px;
  font-weight: 700;
  color: #9AA1B2;
  margin-top: 4px;
}
.cbpx-motif {
  font-size: 10.5px;
  font-weight: 600;
  color: #B23A36;
  margin-top: 3px;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbpx-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}
.cbpx-inline-form {
  display: inline;
  margin: 0;
}
.cbpx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 12px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.cbpx-btn.is-valider {
  background: #6CC04A;
  border: none;
  color: #fff;
  box-shadow: 0 1px 2px rgba(108, 192, 74, 0.4);
}
.cbpx-btn.is-valider:hover {
  background: #7BCD59;
}
.cbpx-btn.is-contester {
  background: #fff;
  border: 1px solid #F2C8C5;
  color: #B23A36;
}
.cbpx-btn.is-contester:hover {
  background: #FCF2F1;
}
.cbpx-empty {
  padding: 46px 20px;
  text-align: center;
}
.cbpx-empty .ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #F2F4F8;
  color: #9AA1B2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 22px;
}
.cbpx-empty .title {
  font-size: 15px;
  font-weight: 800;
  color: #1D2D5C;
}
.cbpx-empty .desc {
  font-size: 13px;
  font-weight: 600;
  color: #7A8298;
  margin-top: 4px;
}

.cbpx-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cbpx-modal:not([hidden]) {
  display: flex;
}
.cbpx-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 55, 0.5);
  backdrop-filter: blur(3px);
}
.cbpx-modal-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 25, 55, 0.35);
  animation: cbpx-modal-in 0.16s ease;
}
.cbpx-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 22px;
  border-bottom: 1px solid #EEF1F6;
}
.cbpx-modal-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #FBE4E3;
  color: #B23A36;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 17px;
}
.cbpx-modal-titles {
  flex: 1;
  min-width: 0;
}
.cbpx-modal-titles h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #1D2D5C;
}
.cbpx-modal-titles p {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #7A8298;
}
.cbpx-modal-titles p b {
  color: #1D2D5C;
}
.cbpx-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #E4E8F0;
  background: #fff;
  color: #7A8298;
  cursor: pointer;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cbpx-modal-close:hover {
  background: #F4F6FA;
}
.cbpx-modal-body {
  padding: 18px 22px;
}
.cbpx-modal-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8A92A3;
  margin-bottom: 7px;
}
.cbpx-modal-label .req {
  color: #B23A36;
}
.cbpx-modal-textarea {
  width: 100%;
  min-height: 104px;
  border: 1px solid #DEE3EC;
  border-radius: 10px;
  background: #fff;
  padding: 11px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1D2D5C;
  outline: none;
  resize: vertical;
  line-height: 1.55;
  font-family: inherit;
}
.cbpx-modal-textarea:focus {
  border-color: #D98783;
  box-shadow: 0 0 0 3px rgba(217, 135, 131, 0.13);
}
.cbpx-modal-err {
  font-size: 12px;
  font-weight: 700;
  color: #B23A36;
  margin-top: 6px;
}
.cbpx-modal-info {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 13px;
  background: #F5F8FD;
  border: 1px solid #D3E0F5;
  border-radius: 10px;
}
.cbpx-modal-info i {
  color: #34508C;
  flex: 0 0 auto;
}
.cbpx-modal-info span {
  font-size: 11.5px;
  font-weight: 600;
  color: #4E5A75;
}
.cbpx-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 22px;
  border-top: 1px solid #EEF1F6;
  background: #FAFBFD;
}
.cbpx-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.cbpx-modal-btn.is-ghost {
  padding: 0 15px;
  font-weight: 700;
  border: 1px solid #DEE3EC;
  background: #fff;
  color: #324063;
}
.cbpx-modal-btn.is-ghost:hover {
  background: #F4F6FA;
}
.cbpx-modal-btn.is-danger {
  border: none;
  background: #B23A36;
  color: #fff;
}
.cbpx-modal-btn.is-danger:hover {
  background: #C74540;
}

@keyframes cbpx-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ═══════════════════════════════════════════════════════════════
   PROFIL STAGIAIRE — page /reservations/stagiaire/{id}
   Scope : .psx-page. Hero avec avatar + KPIs intégrés + grid
   main (timeline + historique formations) / sidebar (Mon Séjour,
   contexte, spécificités).
   ═══════════════════════════════════════════════════════════════ */
.psx-page {
  --enedis-blue: #1432FA;
  --enedis-blue-700: #0F26C4;
  --enedis-blue-soft: rgba(20, 50, 250, 0.08);
  --enedis-blue-line: rgba(20, 50, 250, 0.18);
  --psx-radius: 14px;
  padding-bottom: 80px;
  /* ── Breadcrumb ──────────────────────────────────────────── */
  /* ── HERO ────────────────────────────────────────────────── */
  /* ── Boutons ─────────────────────────────────────────────── */
  /* ── KPI strip intégré au hero ───────────────────────────── */
  /* ── Grid main / side ────────────────────────────────────── */
  /* ── Card section ────────────────────────────────────────── */
  /* ── Empty inside card ───────────────────────────────────── */
  /* ── Timeline ────────────────────────────────────────────── */
  /* ── Historique formations ───────────────────────────────── */
  /* ── Access Mon Séjour card ──────────────────────────────── */
  /* ── Contexte (DR + lieu + email + tel + manager) ────────── */
  /* ── Manager block ───────────────────────────────────────── */
  /* ── Spécificités ────────────────────────────────────────── */
}
.psx-page .psx-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.psx-page .psx-crumb a {
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.psx-page .psx-crumb a:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
.psx-page .psx-crumb a i {
  font-size: 11px;
}
.psx-page .psx-crumb .sep {
  color: var(--neutral-300);
  font-size: 9px;
}
.psx-page .psx-crumb strong {
  color: var(--neutral-900);
  font-weight: 600;
}
.psx-page .psx-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--psx-radius);
  padding: 26px 28px 0;
  margin-bottom: 18px;
  overflow: hidden;
}
.psx-page .psx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 280px at 100% -20%, var(--enedis-blue-soft), transparent 60%);
  pointer-events: none;
}
.psx-page .psx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(20, 50, 250, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 50, 250, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 80%);
  pointer-events: none;
}
.psx-page .psx-hero > * {
  position: relative;
  z-index: 1;
}
.psx-page .psx-hero-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .psx-page .psx-hero-top {
    grid-template-columns: auto 1fr;
  }
  .psx-page .psx-hero-top .psx-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-end;
    margin-top: 4px;
  }
}
@media (max-width: 640px) {
  .psx-page .psx-hero-top {
    grid-template-columns: 1fr;
  }
  .psx-page .psx-hero-top .psx-avatar {
    margin: 0 auto;
  }
}
.psx-page .psx-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 12px 30px -10px rgba(11, 16, 32, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  position: relative;
}
.psx-page .psx-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 50%);
  pointer-events: none;
}
.psx-page .psx-hero-body {
  min-width: 0;
}
.psx-page .psx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--enedis-blue);
  padding: 3px 9px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-radius: 999px;
  margin-bottom: 8px;
}
.psx-page .psx-eyebrow i {
  font-size: 5px;
}
.psx-page .psx-name {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.025em;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.psx-page .psx-nni {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.psx-page .psx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--neutral-600);
}
.psx-page .psx-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.psx-page .psx-meta > span i {
  color: var(--enedis-blue);
  font-size: 11px;
}
.psx-page .psx-meta > span a {
  color: var(--neutral-700);
  text-decoration: none;
  font-weight: 500;
}
.psx-page .psx-meta > span a:hover {
  color: var(--enedis-blue);
  text-decoration: underline;
}
.psx-page .psx-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.psx-page .psx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.psx-page .psx-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.psx-page .psx-badge.is-blue {
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border: 1px solid var(--enedis-blue-line);
}
.psx-page .psx-badge.is-green {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(21, 128, 61, 0.22);
}
.psx-page .psx-badge.is-amber {
  background: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
.psx-page .psx-badge.is-red {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(185, 28, 28, 0.22);
}
.psx-page .psx-badge.is-purple {
  background: var(--purple-50);
  color: var(--purple-700);
  border: 1px solid var(--purple-200);
}
.psx-page .psx-badge.is-neutral {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.psx-page .psx-badge.has-icon::before {
  display: none;
}
.psx-page .psx-badge i {
  font-size: 9.5px;
}
.psx-page .psx-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.psx-page .psx-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-700);
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
  white-space: nowrap;
}
.psx-page .psx-btn:hover {
  border-color: var(--enedis-blue);
  color: var(--enedis-blue);
  background: var(--enedis-blue-soft);
}
.psx-page .psx-btn i {
  font-size: 11px;
  color: var(--enedis-blue);
}
.psx-page .psx-btn.is-primary {
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(20, 50, 250, 0.5);
}
.psx-page .psx-btn.is-primary i {
  color: #fff;
}
.psx-page .psx-btn.is-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(20, 50, 250, 0.65);
  color: #fff;
}
.psx-page .psx-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 22px -28px 0;
  border-top: 1px solid var(--card-border);
}
@media (max-width: 900px) {
  .psx-page .psx-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .psx-page .psx-kpis {
    grid-template-columns: 1fr;
  }
}
.psx-page .psx-kpi {
  padding: 16px 18px;
  border-right: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.psx-page .psx-kpi:last-child {
  border-right: none;
}
@media (max-width: 900px) {
  .psx-page .psx-kpi:nth-child(2n) {
    border-right: none;
  }
  .psx-page .psx-kpi:nth-child(-n+2) {
    border-bottom: 1px solid var(--card-border);
  }
}
@media (max-width: 540px) {
  .psx-page .psx-kpi {
    border-right: none !important;
    border-bottom: 1px solid var(--card-border);
  }
  .psx-page .psx-kpi:last-child {
    border-bottom: none;
  }
}
.psx-page .psx-kpi-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.psx-page .psx-kpi-ic.is-purple {
  background: var(--purple-50);
  color: var(--purple-700);
}
.psx-page .psx-kpi-ic.is-green {
  background: var(--green-50);
  color: var(--green-700);
}
.psx-page .psx-kpi-ic.is-teal {
  background: rgba(20, 184, 166, 0.1);
  color: #0F766E;
}
.psx-page .psx-kpi-info {
  min-width: 0;
  flex: 1;
}
.psx-page .psx-kpi-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
}
.psx-page .psx-kpi-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 2px 0 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psx-page .psx-kpi-sub {
  font-size: 11px;
  color: var(--neutral-500);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psx-page .psx-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) {
  .psx-page .psx-grid {
    grid-template-columns: 1fr;
  }
}
.psx-page .psx-main,
.psx-page .psx-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.psx-page .psx-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--psx-radius);
  overflow: hidden;
}
.psx-page .psx-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.psx-page .psx-card-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--enedis-blue);
  border-radius: 0 2px 2px 0;
}
.psx-page .psx-card-head h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.psx-page .psx-card-head h3 i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.psx-page .psx-card-head .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue-700);
  border-radius: 999px;
}
.psx-page .psx-card-body {
  padding: 16px 18px;
}
.psx-page .psx-card-empty {
  padding: 14px 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--neutral-500);
}
.psx-page .psx-card-empty i {
  display: block;
  font-size: 22px;
  color: var(--neutral-300);
  margin-bottom: 8px;
}
.psx-page .psx-tl {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.psx-page .psx-tl-day {
  margin: 6px 0 2px;
  padding-left: 4px;
}
.psx-page .psx-tl-day:first-child {
  margin-top: 0;
}
.psx-page .psx-tl-day span {
  display: inline-block;
  padding: 3px 10px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.psx-page .psx-tl-event {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  padding: 6px 0;
}
.psx-page .psx-tl-dot {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  font-size: 12px;
  position: relative;
  flex-shrink: 0;
}
.psx-page .psx-tl-dot.is-green {
  background: var(--green-50);
  color: var(--green-700);
}
.psx-page .psx-tl-dot.is-amber {
  background: var(--amber-50);
  color: var(--amber-700);
}
.psx-page .psx-tl-dot.is-red {
  background: var(--red-50);
  color: var(--red-700);
}
.psx-page .psx-tl-dot.is-purple {
  background: var(--purple-50);
  color: var(--purple-700);
}
.psx-page .psx-tl-dot.is-neutral {
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.psx-page .psx-tl-content {
  min-width: 0;
  padding: 4px 12px 8px 0;
}
.psx-page .psx-tl-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.psx-page .psx-tl-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
}
.psx-page .psx-tl-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-500);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.psx-page .psx-tl-detail {
  font-size: 12px;
  color: var(--neutral-600);
  margin-top: 2px;
  line-height: 1.5;
}
.psx-page .psx-hist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.psx-page .psx-hist-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
  transition: all 150ms ease;
  position: relative;
  overflow: hidden;
}
.psx-page .psx-hist-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--neutral-300);
  transition: background 150ms;
}
.psx-page .psx-hist-card:hover {
  border-color: var(--enedis-blue-line);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(20, 50, 250, 0.15);
}
.psx-page .psx-hist-card:hover::before {
  background: var(--enedis-blue);
}
.psx-page .psx-hist-card:hover .psx-hist-arrow {
  color: var(--enedis-blue);
  transform: translateX(3px);
}
.psx-page .psx-hist-card.is-current {
  border-color: var(--amber-400, #FBBF24);
  background: var(--amber-50);
}
.psx-page .psx-hist-card.is-current::before {
  background: var(--amber-500);
}
.psx-page .psx-hist-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.psx-page .psx-hist-ic.is-done {
  background: var(--green-50);
  color: var(--green-700);
}
.psx-page .psx-hist-ic.is-active {
  background: var(--amber-50);
  color: var(--amber-700);
}
.psx-page .psx-hist-ic.is-cancel {
  background: var(--red-50);
  color: var(--red-700);
}
.psx-page .psx-hist-info {
  min-width: 0;
}
.psx-page .psx-hist-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psx-page .psx-hist-meta {
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--neutral-500);
}
.psx-page .psx-hist-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.psx-page .psx-hist-meta > span i {
  color: var(--enedis-blue);
  font-size: 10px;
}
.psx-page .psx-hist-meta > span.code {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neutral-700);
  padding: 1px 6px;
  background: var(--neutral-100);
  border-radius: 5px;
}
.psx-page .psx-hist-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.psx-page .psx-hist-arrow {
  font-size: 12px;
  color: var(--neutral-300);
  transition: all 150ms ease;
  align-self: center;
}
.psx-page .psx-access {
  background: linear-gradient(135deg, var(--enedis-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--enedis-blue-line);
  border-radius: var(--psx-radius);
  overflow: hidden;
  position: relative;
}
.psx-page .psx-access::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--enedis-blue);
}
.psx-page .psx-access-head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--enedis-blue-line);
}
.psx-page .psx-access-head h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-900);
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.psx-page .psx-access-head h3 i {
  color: var(--enedis-blue);
  font-size: 12px;
}
.psx-page .psx-access-head .pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--green-600);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.psx-page .psx-access-head .pill.is-expired {
  background: var(--red-600);
}
.psx-page .psx-access-body {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.psx-page .psx-access-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--enedis-blue-line);
}
.psx-page .psx-access-stat:last-of-type {
  border-bottom: none;
}
.psx-page .psx-access-stat-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
}
.psx-page .psx-access-stat-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.psx-page .psx-access-stat-value .sub {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-500);
}
.psx-page .psx-access-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms ease;
  margin-top: 4px;
  box-shadow: 0 8px 20px -6px rgba(20, 50, 250, 0.5);
}
.psx-page .psx-access-cta i {
  font-size: 11px;
}
.psx-page .psx-access-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(20, 50, 250, 0.65);
}
.psx-page .psx-ctx-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--neutral-100);
}
.psx-page .psx-ctx-row:last-of-type {
  border-bottom: none;
}
.psx-page .psx-ctx-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--enedis-blue-soft);
  color: var(--enedis-blue);
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.psx-page .psx-ctx-content {
  min-width: 0;
}
.psx-page .psx-ctx-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
}
.psx-page .psx-ctx-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  margin-top: 2px;
  word-break: break-word;
}
.psx-page .psx-ctx-value a {
  color: var(--enedis-blue);
  text-decoration: none;
}
.psx-page .psx-ctx-value a:hover {
  text-decoration: underline;
}
.psx-page .psx-ctx-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--neutral-500);
  margin-top: 1px;
}
.psx-page .psx-mgr-title {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--neutral-100);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
  margin-bottom: 10px;
}
.psx-page .psx-mgr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 10px;
}
.psx-page .psx-mgr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--enedis-blue) 0%, var(--enedis-blue-700) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.psx-page .psx-mgr-info {
  flex: 1;
  min-width: 0;
}
.psx-page .psx-mgr-info .name {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.2;
}
.psx-page .psx-mgr-info .sub {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psx-page .psx-mgr-actions {
  display: flex;
  gap: 4px;
}
.psx-page .psx-mgr-actions a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--neutral-600);
  text-decoration: none;
  font-size: 12px;
  transition: all 150ms;
}
.psx-page .psx-mgr-actions a:hover {
  background: var(--enedis-blue-soft);
  border-color: var(--enedis-blue);
  color: var(--enedis-blue);
  transform: translateY(-1px);
}
.psx-page .psx-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 540px) {
  .psx-page .psx-spec-grid {
    grid-template-columns: 1fr;
  }
}
.psx-page .psx-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: 10px;
}
.psx-page .psx-spec.is-positive {
  background: var(--green-50);
  border-color: rgba(21, 128, 61, 0.22);
}
.psx-page .psx-spec.is-positive .psx-spec-ic {
  background: var(--green-100, #DCFCE7);
  color: var(--green-700);
}
.psx-page .psx-spec.is-positive .psx-spec-value {
  color: var(--green-700);
}
.psx-page .psx-spec.is-warning {
  background: var(--amber-50);
  border-color: rgba(180, 83, 9, 0.22);
}
.psx-page .psx-spec.is-warning .psx-spec-ic {
  background: var(--amber-100, #FEF3C7);
  color: var(--amber-700);
}
.psx-page .psx-spec.is-warning .psx-spec-value {
  color: var(--amber-700);
}
.psx-page .psx-spec-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.psx-page .psx-spec-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-500);
}
.psx-page .psx-spec-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-top: 2px;
}
.psx-page .psx-cas {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--enedis-blue-soft);
  border: 1px solid var(--enedis-blue-line);
  border-left: 3px solid var(--enedis-blue);
  border-radius: 10px;
  margin-top: 12px;
}
.psx-page .psx-cas.is-neutral {
  background: var(--neutral-50);
  border-color: var(--neutral-200);
  border-left-color: var(--neutral-400);
}
.psx-page .psx-cas > i {
  color: var(--enedis-blue);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.is-neutral .psx-page .psx-cas > i {
  color: var(--neutral-500);
}
.psx-page .psx-cas strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--neutral-900);
  margin-bottom: 3px;
}
.psx-page .psx-cas p {
  margin: 0;
  font-size: 12px;
  color: var(--neutral-700);
  line-height: 1.5;
}

/*# sourceMappingURL=app.output.css.map */