/* ==========================================================
   SÉCURITOUS FILTRAGE — styles.css COMPLET PROPRE
   Version propre unifiée : desktop + mobile
   Remplacer entièrement public/styles.css par ce fichier.
   ========================================================== */

/* ==========================================================
   1. VARIABLES / BASE
   ========================================================== */

:root {
  --bg: #060607;
  --bg-soft: #0d0d0f;
  --panel: #17171a;
  --panel-2: #202126;
  --panel-3: #272830;

  --border: #33343a;
  --border-strong: #1a1a1c;

  --text: #f5f5f5;
  --muted: #b8c7df;

  --gold: #e2bf56;
  --gold-light: #f4df8b;
  --gold-dark: #b99128;
  --gold-gradient: linear-gradient(135deg, #d6b451, #f2de83);

  --danger: #ef4444;
  --success: #16a34a;
  --green-day: #70b454;

  --shadow: 0 18px 60px rgba(0, 0, 0, .45);
  --radius: 18px;
  --radius-lg: 24px;

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

html,
body {
  min-height: 100%;
  max-width: 100%;
  margin: 0;
  background: radial-gradient(circle at top center, #121214 0, #060607 42%, #020203 100%);
  color: var(--text);
  font-family: var(--font);
  overflow-x: hidden;
}

body {
  font-size: 16px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 950;
}

h1,
h2,
h3 {
  color: var(--gold);
}

p {
  line-height: 1.45;
}

.muted {
  color: var(--muted) !important;
}

.hidden {
  display: none !important;
}

.small {
  font-size: 13px;
}

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

/* ==========================================================
   2. BOUTONS
   ========================================================== */

button,
.btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 13px;
  background: var(--gold-gradient);
  color: #050505;
  font-weight: 950;
  border: 1px solid rgba(255, 230, 140, .65);
  box-shadow: none;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

button:hover,
.btn:hover {
  filter: brightness(1.05);
}

button:active,
.btn:active {
  transform: translateY(1px);
}

button.ghost,
.btn.ghost,
.ghost {
  background: #24252b !important;
  color: #ffffff !important;
  border: 1px solid #343640 !important;
}

button.danger,
.btn.danger,
.danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
}

button.mini,
.btn.mini,
.mini {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* ==========================================================
   3. LOGIN
   ========================================================== */

.login-screen,
#login,
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  width: min(560px, calc(100vw - 32px));
  background: rgba(23, 23, 25, .96);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 34px;
  box-shadow: var(--shadow);
  text-align: center;
}

.login-card img,
.login-logo {
  display: block;
  width: min(310px, 78%);
  max-height: 210px;
  object-fit: contain;
  margin: 0 auto 22px;
}

.login-card h1 {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.login-card p {
  margin: 0 0 22px;
  color: var(--muted);
}

#loginForm,
.login-card form {
  display: grid;
  gap: 14px;
}

#loginForm input,
.login-card input {
  min-height: 56px;
  border-radius: 14px;
}

#loginForm button,
.login-card button {
  min-height: 56px;
  font-size: 18px;
}

/* ==========================================================
   4. LAYOUT APPLICATION
   ========================================================== */

#app {
  min-height: 100vh;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 112px;
  padding: 14px 28px 16px;
  background: linear-gradient(90deg, rgba(8, 8, 9, .98), rgba(11, 11, 13, .96));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand,
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.logo,
.topbar .logo,
.brand img {
  width: 140px;
  max-height: 92px;
  object-fit: contain;
  flex: 0 0 auto;
}

.topbar h1,
.brand h1 {
  margin: 0;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(23px, 2.2vw, 34px);
  line-height: 1.08;
}

.topbar p,
.brand p {
  margin: 6px 0 0;
  color: rgba(226, 232, 240, .72);
}

.topbar > button {
  min-width: 150px;
}

/* Onglets */
.tabs,
nav.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 28px;
  background: #09090a;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 112px;
  z-index: 45;
}

.tabs button {
  min-height: 52px;
  padding: 0 18px;
  background: #222329;
  color: #ffffff;
  border: 1px solid #31333b;
  border-radius: 14px;
  font-weight: 950;
  text-transform: none;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}

.tabs button.active,
.tabs button[aria-selected="true"] {
  background: var(--gold-gradient);
  color: #050505;
  text-shadow: none;
  border-color: rgba(255, 230, 140, .75);
}

/* Pages */
main,
.main {
  padding: 24px 28px 50px;
}

/*
  IMPORTANT :
  Ne jamais cacher tous les section[id].
  La page de connexion peut être une section avec un id.
  On ne masque que les vrais onglets applicatifs.
*/
.page,
.tab-page {
  display: none;
}

.page.active,
.tab-page.active {
  display: block;
}

/* Compatibilité avec les onglets principaux de l'application */
#accueil:not(.active),
#expedition:not(.active),
#savnf:not(.active),
#recyclage:not(.active),
#tie:not(.active),
#visiteurs:not(.active),
#prestataires:not(.active),
#colis:not(.active),
#refs:not(.active),
#referentiels:not(.active),
#formation:not(.active),
#admin:not(.active) {
  display: none;
}

#accueil.active,
#expedition.active,
#savnf.active,
#recyclage.active,
#tie.active,
#visiteurs.active,
#prestataires.active,
#colis.active,
#refs.active,
#referentiels.active,
#formation.active,
#admin.active {
  display: block;
}

/* La connexion doit toujours pouvoir s'afficher */
#login,
.login-screen,
.login-page {
  display: grid;
}

#login.hidden,
.login-screen.hidden,
.login-page.hidden {
  display: none !important;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
}

.section-head h2 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(26px, 3vw, 38px);
  text-transform: uppercase;
}

/* ==========================================================
   5. CARTES / DASHBOARD
   ========================================================== */

.hero,
.card,
.calendar-block,
.admin-enhanced-card,
.panel {
  background: rgba(23, 23, 25, .96);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: none;
}

.hero {
  margin-bottom: 22px;
}

.hero h2 {
  margin: 0 0 16px;
  font-size: 32px;
}

.hero p {
  margin: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 22px 0;
}

.cards.two {
  grid-template-columns: repeat(2, 1fr);
}

.card h3 {
  margin: 0 0 22px;
  color: var(--gold-light);
}

.stat,
.big-number,
#openCount,
#rdvTodayCount,
#driverCheckCount {
  color: var(--gold);
  font-size: 50px;
  font-weight: 950;
  line-height: 1;
}

.dashboard-clickable-counter {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 56px !important;
  border-radius: 14px !important;
  transition: transform .15s ease, filter .15s ease;
}

.dashboard-clickable-counter:hover {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.dashboard-clickable-card {
  cursor: pointer !important;
}

.dashboard-clickable-card:hover {
  border-color: rgba(241, 206, 99, .75) !important;
}

.dashboard-detail-modal {
  width: min(1180px, calc(100vw - 28px)) !important;
  max-width: min(1180px, calc(100vw - 28px)) !important;
}

#dashboardDetailContent {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.dashboard-empty-detail,
.empty {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #111114;
  color: var(--muted);
  font-weight: 800;
}

/* ==========================================================
   6. FORMULAIRES / INPUTS
   ========================================================== */

input,
select,
textarea {
  width: 100%;
  min-height: 58px;
  border-radius: 14px;
  border: 1px solid #3b3d46;
  background: #101114;
  color: #ffffff;
  padding: 0 16px;
  outline: none;
}

textarea {
  min-height: 104px;
  padding: 14px 16px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(226, 191, 86, .18);
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, .42);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

.inline-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

/* Titres de champs harmonisés */
.recycling-field-title,
.savnf-field-title,
.tie-field-title,
.formation-field-title,
.field-title {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.recycling-field-title label,
.savnf-field-title label,
.tie-field-title label,
.formation-field-title label,
.field-title label {
  color: var(--gold-light);
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .02em;
}

/* ==========================================================
   7. MODALES
   ========================================================== */

dialog {
  border: none;
  padding: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--text);
  max-width: min(1240px, calc(100vw - 32px));
}

dialog::backdrop {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(2px);
}

.modal-form {
  width: min(1240px, calc(100vw - 32px));
  max-height: calc(100vh - 34px);
  overflow-y: auto;
  background: rgba(23, 23, 25, .98);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.modal-form h2 {
  margin: 0 0 22px;
  color: var(--gold);
  font-size: 32px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* ==========================================================
   8. TABLEAUX
   ========================================================== */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #111114;
  color: var(--text);
  min-width: 900px;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  background: #0e0e11;
  color: var(--gold-light);
  font-weight: 950;
  white-space: nowrap;
}

td {
  color: #f4f4f5;
}

tr:hover td {
  background: rgba(255, 255, 255, .025);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 170px;
}

/* ==========================================================
   9. BADGES / STATUTS
   ========================================================== */

.pill,
.badge-status,
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
}

.pill.green {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  background: rgba(22, 163, 74, .18) !important;
  color: #b8ffd2 !important;
  border: 1px solid rgba(22, 163, 74, .7) !important;
}

td .pill.green,
.actions .pill.green {
  margin: 0 auto !important;
}

/* ==========================================================
   10. CALENDRIERS — SOCLE COMMUN
   VISITEURS / RECYCLAGE / SAV NF
   ========================================================== */

#visitorCalendar,
#recyclingCalendar,
#savnfCalendar {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

/* Barre haut calendrier */
.visitor-month-tools,
.recycling-month-tools,
.savnf-month-tools {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) auto !important;
  align-items: start !important;
  column-gap: 24px !important;
  row-gap: 12px !important;
  width: 100% !important;
  margin-bottom: 22px !important;
}

.visitor-month-left,
.recycling-month-left,
.savnf-month-left {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.visitor-month-left h3,
.recycling-month-left h3,
.savnf-month-left h3,
.visitor-month-left .muted,
.recycling-month-left .muted,
.savnf-month-left .muted {
  margin: 0 !important;
}

.visitor-month-actions,
.recycling-month-actions,
.recycling-month-actions-unified,
.savnf-month-actions {
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: start !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  margin-left: auto !important;
}

.visitor-month-title,
.recycling-month-title,
#recyclingCalendarMonthLabel,
.savnf-month-title,
#savnfCalendarMonthLabel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 150px !important;
  white-space: nowrap !important;
  color: var(--gold-light) !important;
  font-weight: 950 !important;
  font-size: 28px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-align: center !important;
}

.visitor-month-actions button,
.recycling-month-actions button,
.recycling-month-actions-unified button,
.savnf-month-actions button {
  min-height: 58px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Aujourd’hui / Ajouter RDV dorés */
button[onclick="recyclingGoToday()"],
button[onclick="openRecyclingAppointment(recyclingToday())"],
button[onclick="savnfGoToday()"],
button[onclick="openSavnfAppointment(savnfToday())"],
button[onclick*="visitorGoToday"],
button[onclick*="openVisitor"],
button[onclick*="visitors"] {
  border-color: rgba(255, 230, 140, .75);
}

/* Grilles CSS */
.visitor-month-grid,
.recycling-month-grid,
.savnf-month-grid {
  display: grid !important;
  grid-template-columns: 92px repeat(7, minmax(58px, 1fr)) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  background: #111114 !important;
}

/* Tables calendrier visiteurs */
#visiteurs table,
#visitors table,
.visiteurs-table-like-recyclage {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #111114 !important;
}

/* En-têtes */
.visitor-month-head,
.recycling-month-head,
.savnf-month-head,
.visitor-week-head,
#visiteurs table th,
#visitors table th {
  background: linear-gradient(180deg, #edd77a 0%, #d5b45b 100%) !important;
  color: #050505 !important;
  font-weight: 950 !important;
  text-align: center !important;
  padding: 10px 6px !important;
  border: 1px solid var(--border-strong) !important;
  font-size: 15px !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Cellules */
.visitor-week-cell,
.recycling-week-cell,
.savnf-week-cell,
.visitor-month-cell,
.recycling-month-cell,
.savnf-month-cell,
#visiteurs table td,
#visitors table td {
  min-height: 76px !important;
  height: 76px !important;
  background: #f4f4f4 !important;
  color: #030303 !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 0 !important;
  padding: 6px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  font-weight: 950 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  outline: none !important;
}

.visitor-week-cell,
.recycling-week-cell,
.savnf-week-cell,
#visiteurs table td:first-child,
#visitors table td:first-child {
  background: #eeeeee !important;
  color: #030303 !important;
  font-size: 27px !important;
  display: table-cell;
  font-weight: 950 !important;
}

.visitor-month-cell:hover,
.recycling-month-cell:hover,
.savnf-month-cell:hover,
.visitor-week-cell:hover,
.recycling-week-cell:hover,
.savnf-week-cell:hover,
#visiteurs table td:hover,
#visitors table td:hover {
  outline: 3px solid var(--border-strong) !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}

.visitor-month-cell.outside-month,
.recycling-month-cell.outside-month,
.savnf-month-cell.outside-month,
#visiteurs table td.outside-month,
#visitors table td.outside-month {
  background: #d3d3d3 !important;
  cursor: default !important;
}

.visitor-month-cell.today,
.recycling-month-cell.today,
.savnf-month-cell.today,
.visitor-month-cell.is-today,
.recycling-month-cell.is-today,
.savnf-month-cell.is-today,
.visitor-month-cell.current-day,
.recycling-month-cell.current-day,
.savnf-month-cell.current-day,
#visiteurs table td.today,
#visitors table td.today,
#visiteurs table td.is-today,
#visitors table td.is-today,
#visiteurs table td.current-day,
#visitors table td.current-day {
  background: var(--green-day) !important;
  color: #ffffff !important;
}

.visitor-date-number,
.recycling-date-number,
.savnf-date-number {
  display: block !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: inherit !important;
  text-align: center !important;
  margin-top: 2px !important;
}

/* Repères RDV : triangle haut droite + bulle bas droite */
.recycling-rdv-marker,
.savnf-rdv-marker,
.visitor-final-rdv-corner,
#visiteurs .visitor-final-rdv-corner,
#visitors .visitor-final-rdv-corner {
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 16px solid #e8a900 !important;
  border-left: 16px solid transparent !important;
  background: transparent !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

.recycling-rdv-count,
.savnf-rdv-count,
.visitor-final-rdv-count,
#visiteurs .visitor-final-rdv-count,
#visitors .visitor-final-rdv-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 7px !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: #111111 !important;
  color: var(--gold-light) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  z-index: 21 !important;
  pointer-events: none !important;
}

/* Nettoyage ancien visuel visiteurs */
#visiteurs .visiteurs-rdv-clean-indicator,
#visitors .visiteurs-rdv-clean-indicator,
#visiteurs .visiteurs-rdv-corner,
#visitors .visiteurs-rdv-corner,
#visiteurs .visiteurs-rdv-count,
#visitors .visiteurs-rdv-count,
#visiteurs .rdv-marker,
#visitors .rdv-marker,
#visiteurs .event-marker,
#visitors .event-marker,
#visiteurs .calendar-dot,
#visitors .calendar-dot,
#visiteurs .event-dot,
#visitors .event-dot,
#visiteurs .rdv-dot,
#visitors .rdv-dot,
#visiteurs .day-indicator,
#visitors .day-indicator,
#visiteurs .status-dot,
#visitors .status-dot,
#visiteurs .visitor-rdv-dot,
#visitors .visitor-rdv-dot {
  display: none !important;
}

#visiteurs .visitor-month-cell.has-rdv::after,
#visitors .visitor-month-cell.has-rdv::after,
#visiteurs .visiteurs-day-has-rdv-clean::after,
#visitors .visiteurs-day-has-rdv-clean::after,
#visiteurs .visiteurs-like-recyclage-has-rdv::after,
#visitors .visiteurs-like-recyclage-has-rdv::after {
  content: none !important;
  display: none !important;
}

#visiteurs .visiteurs-day-has-rdv-clean,
#visitors .visiteurs-day-has-rdv-clean,
#visiteurs .visiteurs-like-recyclage-has-rdv,
#visitors .visiteurs-like-recyclage-has-rdv,
#visiteurs .visitor-final-has-rdv,
#visitors .visitor-final-has-rdv {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Cartes RDV */
.recycling-rdv-card,
.savnf-rdv-card,
.visitor-detail-card {
  border: 1px solid #3a3b41;
  border-radius: 14px;
  padding: 12px;
  background: #202024;
  margin-bottom: 10px;
}

.recycling-rdv-card-head,
.savnf-rdv-card-head,
.visitor-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--gold-light);
  font-weight: 950;
  margin-bottom: 8px;
}

.recycling-rdv-details,
.savnf-rdv-details,
.visitor-detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  margin-bottom: 10px;
  color: #f1f1f1;
  font-size: 14px;
}

.recycling-rdv-actions,
.savnf-rdv-actions,
.visitor-rdv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.checkline,
.visitor-check-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #2b2c31;
  color: #ffffff;
  font-weight: 850;
}

.checkline input,
.visitor-check-line input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
}

/* ==========================================================
   11. MODULE FORMATION
   ========================================================== */

.formation-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: radial-gradient(circle at top left, rgba(214, 180, 81, .12), rgba(18, 18, 20, .96) 45%);
  margin-bottom: 18px;
}

.formation-hero h2 {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 30px;
}

.formation-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 980px;
}

.formation-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.formation-sidebar,
.formation-main,
.formation-chatbot,
.formation-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(23, 23, 25, .96);
  padding: 18px;
}

.formation-module-list {
  display: grid;
  gap: 8px;
}

.formation-module-list button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  text-align: left;
  min-height: 62px !important;
  padding: 10px 14px !important;
  border-radius: 13px;
  background: #23242a;
  color: white;
}

.formation-module-list button.active {
  background: var(--gold-gradient);
  color: #050505;
}

.formation-module-list button span {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.formation-module-list button strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  line-height: 1.15 !important;
}

.formation-agent-zone {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: center;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, #111114, #1c1d22);
  margin-bottom: 14px;
  overflow: hidden;
}

.formation-agent {
  position: relative;
  width: 130px;
  height: 170px;
  margin: auto;
}

.agent-head {
  position: absolute;
  left: 33px;
  top: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--gold-light);
  border: 4px solid #111;
}

.agent-cap {
  position: absolute;
  left: -4px;
  top: -8px;
  width: 78px;
  height: 30px;
  border-radius: 30px 30px 8px 8px;
  background: #111114;
  border: 3px solid var(--gold);
}

.agent-face {
  position: absolute;
  top: 34px;
  left: 16px;
  display: flex;
  gap: 18px;
}

.agent-face span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #111;
}

.agent-body {
  position: absolute;
  left: 24px;
  top: 72px;
  width: 88px;
  height: 90px;
  border-radius: 18px 18px 26px 26px;
  background: linear-gradient(135deg, #25262d, #111114);
  border: 3px solid var(--gold);
}

.agent-badge {
  position: absolute;
  top: 22px;
  left: 27px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #050505;
  font-weight: 950;
  font-size: 12px;
}

.agent-arm {
  position: absolute;
  right: 0;
  top: 86px;
  width: 54px;
  height: 14px;
  border-radius: 999px;
  background: var(--gold);
  transform-origin: left center;
  transform: rotate(-18deg);
}

.agent-pointer {
  position: absolute;
  right: -10px;
  top: 72px;
  width: 0;
  height: 0;
  border-left: 18px solid var(--gold);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.formation-agent.speaking .agent-arm {
  animation: agentWave .85s ease-in-out 3;
}

.formation-agent.speaking .agent-head {
  animation: agentNod .85s ease-in-out 2;
}

@keyframes agentWave {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(-42deg); }
}

@keyframes agentNod {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.formation-bubble {
  position: relative;
  padding: 20px;
  border-radius: 18px;
  background: #f7f7f7;
  color: #050505;
  min-height: 138px;
}

.formation-bubble::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 54px;
  width: 0;
  height: 0;
  border-right: 18px solid #f7f7f7;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.formation-bubble-title {
  color: #a27b00;
  font-size: 22px;
  font-weight: 950;
  margin-bottom: 8px;
}

.formation-bubble-text {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
}

.formation-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.formation-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.formation-progress span {
  height: 8px;
  flex: 1;
  border-radius: 999px;
  background: var(--border);
}

.formation-progress span.active {
  background: var(--gold-gradient);
}

.formation-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.formation-step-item {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #24252b;
  color: white;
}

.formation-step-item.active {
  background: var(--gold-gradient);
  color: #050505;
}

.formation-chatbot {
  position: sticky;
  top: 150px;
}

.formation-chat-messages {
  display: grid;
  gap: 10px;
  height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: #111114;
  margin-bottom: 12px;
}

.formation-chat-message {
  padding: 10px;
  border-radius: 12px;
}

.formation-chat-message.bot {
  background: rgba(214, 180, 81, .14);
  border: 1px solid rgba(214, 180, 81, .35);
}

.formation-chat-message.user {
  background: rgba(80, 110, 160, .18);
  border: 1px solid rgba(120, 160, 220, .3);
}

.formation-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}

.formation-quick-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================
   12. TOAST
   ========================================================== */

.toast,
#toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 36px));
  padding: 14px 16px;
  background: #202126;
  color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* ==========================================================
   13. RESPONSIVE
   ========================================================== */

@media (max-width: 1250px) {
  .visitor-month-tools,
  .recycling-month-tools,
  .savnf-month-tools {
    grid-template-columns: 1fr !important;
  }

  .visitor-month-actions,
  .recycling-month-actions,
  .recycling-month-actions-unified,
  .savnf-month-actions {
    grid-column: 1 !important;
    justify-self: start !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
  }

  .formation-layout {
    grid-template-columns: 240px 1fr;
  }

  .formation-chatbot {
    grid-column: 1 / -1;
    position: static;
  }

  .formation-chat-messages {
    height: 260px;
  }
}

@media (max-width: 900px) {
  .topbar {
    position: static;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .topbar .brand {
    width: 100% !important;
  }

  .topbar .logo,
  .brand img {
    width: 86px !important;
    max-height: 70px !important;
  }

  .topbar h1 {
    font-size: 22px !important;
  }

  .topbar > button {
    align-self: flex-end !important;
    min-height: 44px !important;
  }

  .tabs,
  nav.tabs {
    position: static;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    padding: 10px 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tabs button {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  main,
  .main {
    padding: 12px !important;
  }

  .hero,
  .card,
  .calendar-block,
  .admin-enhanced-card {
    border-radius: 16px !important;
    padding: 16px !important;
  }

  .cards,
  .cards.two {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .section-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .section-head button {
    width: 100% !important;
  }

  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .visitor-month-actions,
  .recycling-month-actions,
  .recycling-month-actions-unified,
  .savnf-month-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    justify-content: stretch !important;
    justify-self: stretch !important;
  }

  .visitor-month-title,
  .recycling-month-title,
  #recyclingCalendarMonthLabel,
  .savnf-month-title,
  #savnfCalendarMonthLabel {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    font-size: 24px !important;
  }

  .visitor-month-actions button,
  .recycling-month-actions button,
  .recycling-month-actions-unified button,
  .savnf-month-actions button {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }

  .visitor-month-grid,
  .recycling-month-grid,
  .savnf-month-grid {
    min-width: 760px !important;
    grid-template-columns: 82px repeat(7, 96px) !important;
  }

  #visiteurs table,
  #visitors table {
    min-width: 760px !important;
  }

  .visitor-month-head,
  .recycling-month-head,
  .savnf-month-head,
  .visitor-week-head,
  #visiteurs table th,
  #visitors table th {
    font-size: 12px !important;
    padding: 8px 4px !important;
  }

  .visitor-week-cell,
  .recycling-week-cell,
  .savnf-week-cell,
  .visitor-month-cell,
  .recycling-month-cell,
  .savnf-month-cell,
  #visiteurs table td,
  #visitors table td {
    min-height: 62px !important;
    height: 62px !important;
    padding: 5px !important;
    font-size: 22px !important;
  }

  #visitorCalendar::after,
  #recyclingCalendar::after,
  #savnfCalendar::after {
    content: "Glisser horizontalement pour voir tout le mois";
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 6px;
    text-align: center;
  }

  .formation-layout {
    grid-template-columns: 1fr;
  }

  .formation-agent-zone {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .formation-bubble::before {
    display: none;
  }

  .formation-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  dialog {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100vh - 18px) !important;
    margin: auto !important;
  }

  .modal-form {
    width: 100% !important;
    max-height: calc(100vh - 18px) !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .modal-form h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  input,
  select,
  textarea {
    min-height: 46px !important;
    font-size: 16px !important;
  }

  .inline-field {
    grid-template-columns: 1fr auto !important;
  }

  .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modal-actions button {
    width: 100% !important;
  }

  table {
    min-width: 760px !important;
  }

  th,
  td {
    font-size: 12px !important;
    padding: 8px 7px !important;
  }

  .formation-chat-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  #visiteurs .calendar-block,
  #recyclage .calendar-block,
  #savnf .calendar-block {
    padding: 12px !important;
    border-radius: 15px !important;
  }

  .visitor-month-grid,
  .recycling-month-grid,
  .savnf-month-grid {
    min-width: 650px !important;
    grid-template-columns: 64px repeat(7, 82px) !important;
  }

  #visiteurs table,
  #visitors table {
    min-width: 650px !important;
  }

  .visitor-week-cell,
  .recycling-week-cell,
  .savnf-week-cell,
  .visitor-month-cell,
  .recycling-month-cell,
  .savnf-month-cell,
  #visiteurs table td,
  #visitors table td {
    min-height: 54px !important;
    height: 54px !important;
    font-size: 19px !important;
  }

  .recycling-rdv-marker,
  .savnf-rdv-marker,
  .visitor-final-rdv-corner {
    top: 6px !important;
    right: 6px !important;
    border-top-width: 13px !important;
    border-left-width: 13px !important;
  }

  .recycling-rdv-count,
  .savnf-rdv-count,
  .visitor-final-rdv-count {
    right: 6px !important;
    bottom: 5px !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
    padding: 0 6px !important;
  }
}

@media (max-width: 390px) {
  .visitor-month-grid,
  .recycling-month-grid,
  .savnf-month-grid,
  #visiteurs table,
  #visitors table {
    min-width: 595px !important;
  }
}

/* ==========================================================
   CORRECTIF ÉCRAN NOIR — SÉCURITÉ AFFICHAGE LOGIN / APP
   ========================================================== */

/* Si app.js retire/ajoute hidden, ces règles évitent l'écran noir */
#login:not(.hidden),
.login-screen:not(.hidden),
.login-page:not(.hidden) {
  display: grid !important;
  place-items: center !important;
}

#app:not(.hidden) {
  display: block !important;
}

#app.hidden {
  display: none !important;
}

/* Les sections applicatives non actives restent cachées, sans toucher au login */
main > section:not(.active):not(#login) {
  display: none;
}

main > section.active {
  display: block;
}

/* ==========================================================
   CORRECTIF FINAL — FORMAT CONNEXION INITIAL
   ========================================================== */

/*
  Objectif :
  - la page de connexion ne doit pas prendre toute la page avec un logo géant ;
  - retour à une carte centrée, compacte, propre ;
  - logo contenu dans la carte ;
  - champs et bouton à largeur normale.
*/

/* Conteneur de connexion */
#login,
.login-screen,
.login-page,
.auth-screen,
.login-wrapper {
  min-height: 100vh !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: radial-gradient(circle at top center, #141416 0%, #060607 55%, #020203 100%) !important;
  overflow: hidden !important;
}

/* Carte de connexion : format initial */
#login .login-card,
.login-screen .login-card,
.login-page .login-card,
.auth-card,
#login form,
.login-screen form,
.login-page form {
  width: min(560px, calc(100vw - 36px)) !important;
  max-width: 560px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 34px 36px !important;
  border-radius: 28px !important;
  background: rgba(23, 23, 25, .96) !important;
  border: 1px solid #33343a !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45) !important;
  text-align: center !important;
}

/* Si le formulaire est déjà dans une carte, il ne doit pas recréer une 2e carte */
#login .login-card form,
.login-screen .login-card form,
.login-page .login-card form {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Logo de connexion : contenu et propre */
#login img,
.login-screen img,
.login-page img,
.auth-screen img,
.login-wrapper img,
#login .login-logo,
.login-screen .login-logo,
.login-page .login-logo {
  display: block !important;
  width: min(260px, 72%) !important;
  max-width: 260px !important;
  height: auto !important;
  max-height: 170px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto 22px !important;
}

/* Sécurité : jamais de logo en pleine largeur sur l'écran de connexion */
#login > img,
.login-screen > img,
.login-page > img {
  width: min(260px, 72%) !important;
  max-width: 260px !important;
  max-height: 170px !important;
}

/* Titre */
#login h1,
.login-screen h1,
.login-page h1,
.auth-screen h1,
.login-wrapper h1 {
  margin: 0 0 12px !important;
  color: #e2bf56 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.08 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Sous-titre */
#login p,
.login-screen p,
.login-page p,
.auth-screen p,
.login-wrapper p {
  margin: 0 0 22px !important;
  color: #b8c7df !important;
  text-align: center !important;
}

/* Champs */
#login input,
.login-screen input,
.login-page input,
.auth-screen input,
.login-wrapper input {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  margin: 0 0 14px !important;
  padding: 0 16px !important;
  background: #e8f0fe !important;
  color: #050505 !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
}

/* Bouton connexion */
#login button,
.login-screen button,
.login-page button,
.auth-screen button,
.login-wrapper button {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  margin-top: 2px !important;
  background: linear-gradient(135deg, #d6b451, #f2de83) !important;
  color: #050505 !important;
  font-weight: 950 !important;
  font-size: 18px !important;
  border: 1px solid rgba(255, 230, 140, .75) !important;
}

/* Empêche tout scroll vertical inutile sur la connexion */
body:has(#login:not(.hidden)),
body:has(.login-screen:not(.hidden)),
body:has(.login-page:not(.hidden)) {
  overflow: hidden !important;
}

/* Mobile */
@media (max-width: 600px) {
  #login,
  .login-screen,
  .login-page,
  .auth-screen,
  .login-wrapper {
    padding: 16px !important;
  }

  #login .login-card,
  .login-screen .login-card,
  .login-page .login-card,
  .auth-card,
  #login form,
  .login-screen form,
  .login-page form {
    width: calc(100vw - 32px) !important;
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }

  #login img,
  .login-screen img,
  .login-page img,
  .auth-screen img,
  .login-wrapper img,
  #login .login-logo,
  .login-screen .login-logo,
  .login-page .login-logo {
    width: min(220px, 72%) !important;
    max-width: 220px !important;
    max-height: 145px !important;
  }

  #login h1,
  .login-screen h1,
  .login-page h1 {
    font-size: 28px !important;
  }
}

/* ==========================================================
   PATCH FINAL PROPRE — CONNEXION + VISITEURS
   ========================================================== */

/* ---------- Base sécurité ---------- */

.hidden,
#loginForm.hidden,
#setupForm.hidden,
#setupBox.hidden,
#loginView.hidden,
#appView.hidden,
.auth-shell .hidden,
.auth-card .hidden,
.auth-shell form.hidden,
.auth-card form.hidden {
  display: none !important;
}

/* ---------- Connexion propre : 1 seul bloc, carte centrée ---------- */

#loginView.auth-shell,
.auth-shell {
  min-height: 100vh !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  overflow: hidden !important;
  background: radial-gradient(circle at top center, #141416 0%, #060607 55%, #020203 100%) !important;
}

#loginView.hidden {
  display: none !important;
}

#loginView .auth-card,
.auth-shell .auth-card {
  width: min(560px, calc(100vw - 40px)) !important;
  max-width: 560px !important;
  min-height: auto !important;
  max-height: calc(100vh - 48px) !important;
  margin: 0 auto !important;
  padding: 34px 36px !important;
  border-radius: 28px !important;
  background: rgba(23, 23, 25, .96) !important;
  border: 1px solid #33343a !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
  text-align: center !important;
  overflow: auto !important;
}

#loginView .auth-logo,
.auth-shell .auth-logo,
#loginView .auth-card img,
.auth-shell .auth-card img {
  display: block !important;
  width: 240px !important;
  max-width: 72% !important;
  height: auto !important;
  max-height: 155px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto 22px auto !important;
  transform: none !important;
}

#loginView h1,
.auth-shell h1 {
  margin: 0 0 12px !important;
  color: #e2bf56 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.08 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

#loginView p,
.auth-shell p {
  margin: 0 0 22px !important;
  color: #b8c7df !important;
  text-align: center !important;
}

#loginView form,
.auth-shell form,
#loginForm,
#setupForm {
  width: 100% !important;
  max-width: 100% !important;
  display: grid;
  gap: 14px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#loginView input,
.auth-shell input {
  width: 100% !important;
  max-width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  background: #e8f0fe !important;
  color: #050505 !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
}

#loginView button,
.auth-shell button {
  width: 100% !important;
  max-width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #d6b451, #f2de83) !important;
  color: #050505 !important;
  font-weight: 950 !important;
  font-size: 18px !important;
  border: 1px solid rgba(255, 230, 140, .75) !important;
}

#setupBox.notice {
  margin-bottom: 16px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(214, 180, 81, .13) !important;
  border: 1px solid rgba(214, 180, 81, .36) !important;
  color: #f4df8b !important;
  text-align: left !important;
}

/* ---------- Calendrier visiteurs : pas d'indicateur fantôme ---------- */

#visiteurs .visitor-month-cell,
#visitorCalendar .visitor-month-cell {
  border: 1px solid #1a1a1c !important;
  box-shadow: none !important;
  outline: none !important;
  position: relative !important;
  overflow: hidden !important;
}

#visiteurs .visitor-month-cell.has-rdv::after,
#visiteurs .visitor-month-cell.visiteurs-day-has-rdv-clean::after,
#visiteurs .visitor-month-cell.visiteurs-like-recyclage-has-rdv::after,
#visiteurs .visitor-rdv-dot,
#visiteurs .visiteurs-rdv-clean-indicator,
#visiteurs .visiteurs-rdv-corner,
#visiteurs .visiteurs-rdv-count,
#visiteurs .rdv-marker,
#visiteurs .event-marker,
#visiteurs .calendar-dot,
#visiteurs .event-dot,
#visiteurs .rdv-dot,
#visiteurs .day-indicator,
#visiteurs .status-dot {
  content: none !important;
  display: none !important;
}

#visiteurs .visitor-month-cell.final-has-rdv {
  border-color: #1a1a1c !important;
  box-shadow: none !important;
  outline: none !important;
}

#visiteurs .visitor-final-rdv-corner {
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 16px solid #e8a900 !important;
  border-left: 16px solid transparent !important;
  background: transparent !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

#visiteurs .visitor-final-rdv-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 7px !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: #111111 !important;
  color: #f4df8b !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  z-index: 21 !important;
  pointer-events: none !important;
}

/* ---------- Fenêtre jour visiteurs alignée ---------- */

#visitorDayModal {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: min(760px, calc(100vw - 32px)) !important;
  overflow: visible !important;
}

#visitorDayModal .modal-form {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 24px !important;
}

#visitorDayTitle {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  margin-bottom: 18px !important;
}

#visitorDayDetails {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.final-visitor-search-zone,
.visitor-search-zone {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}

.final-visitor-search-zone input,
.visitor-search-zone input {
  width: 100% !important;
}

.final-visitor-search-zone button,
.visitor-search-zone button {
  width: fit-content !important;
  min-width: 120px !important;
}

.final-visitor-rdv-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#visitorDayModal .visitor-detail-card {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#visitorDayModal .visitor-detail-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  width: 100% !important;
}

#visitorDayModal .visitor-detail-head span {
  text-align: right !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#visitorDayModal .visitor-detail-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 10px !important;
}

#visitorDayModal .visitor-check-line {
  width: 100% !important;
}

#visitorDayModal .modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 600px) {
  #loginView.auth-shell,
  .auth-shell {
    padding: 16px !important;
  }

  #loginView .auth-card,
  .auth-shell .auth-card {
    width: calc(100vw - 32px) !important;
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }

  #loginView .auth-logo,
  .auth-shell .auth-logo,
  #loginView .auth-card img,
  .auth-shell .auth-card img {
    width: 210px !important;
    max-width: 72% !important;
    max-height: 135px !important;
  }

  #loginView h1,
  .auth-shell h1 {
    font-size: 28px !important;
  }

  #visitorDayModal .modal-form {
    padding: 16px !important;
  }

  #visitorDayModal .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #visitorDayModal .modal-actions button,
  .final-visitor-search-zone button,
  .visitor-search-zone button {
    width: 100% !important;
  }
}

/* ==========================================================
   ADMIN — HISTORIQUE CONNEXIONS PAGINÉ 25 / PAGE
   ========================================================== */

.admin-connection-history-card {
  overflow: hidden !important;
}

.admin-history-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 14px !important;
}

.admin-history-header h3 {
  margin: 0 0 6px !important;
  color: #f1ce63 !important;
}

.admin-history-header p {
  margin: 0 !important;
}

.admin-history-page-info {
  flex: 0 0 auto !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(241, 206, 99, .12) !important;
  border: 1px solid rgba(241, 206, 99, .35) !important;
  color: #f4df8b !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.admin-history-table-wrap {
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  border-radius: 16px !important;
}

.admin-history-table {
  min-width: 980px !important;
  table-layout: fixed !important;
}

.admin-history-table th,
.admin-history-table td {
  padding: 11px 10px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.admin-history-table th:nth-child(1),
.admin-history-table td:nth-child(1) {
  width: 120px !important;
}

.admin-history-table th:nth-child(2),
.admin-history-table td:nth-child(2),
.admin-history-table th:nth-child(3),
.admin-history-table td:nth-child(3) {
  width: 180px !important;
}

.admin-history-table th:nth-child(4),
.admin-history-table td:nth-child(4) {
  width: 130px !important;
}

.admin-history-table th:nth-child(5),
.admin-history-table td:nth-child(5) {
  width: 110px !important;
}

.admin-history-table th:nth-child(6),
.admin-history-table td:nth-child(6) {
  width: 130px !important;
}

.admin-history-table th:nth-child(7),
.admin-history-table td:nth-child(7) {
  width: 240px !important;
}

.admin-browser-cell {
  max-width: 240px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-history-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.admin-history-current-page {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #111114 !important;
  border: 1px solid #33343a !important;
  color: #f4df8b !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .admin-history-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .admin-history-page-info {
    width: fit-content !important;
  }

  .admin-history-pagination {
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .admin-history-current-page {
    grid-column: 1 / -1 !important;
    order: -1 !important;
  }

  .admin-history-pagination button {
    width: 100% !important;
  }
}

/* ==========================================================
   VISITEURS — CORRECTIF DÉFINITIF VISUEL COMPTEUR RDV
   ========================================================== */

#visitorCalendar .visitor-month-cell {
  border: 1px solid #1a1a1c !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
  outline: none !important;
}

#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .visitor-final-rdv-corner,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .visitor-final-rdv-count,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .visiteurs-rdv-corner,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .visiteurs-rdv-count,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .visiteurs-rdv-clean-indicator,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .rdv-marker,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .event-marker,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .calendar-dot,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .event-dot,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .rdv-dot,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .day-indicator,
#visitorCalendar .visitor-month-cell:not(.final-has-rdv) .status-dot {
  display: none !important;
}

#visitorCalendar .visitor-month-cell.has-rdv:not(.final-has-rdv)::after,
#visitorCalendar .visitor-month-cell.visiteurs-day-has-rdv-clean:not(.final-has-rdv)::after,
#visitorCalendar .visitor-month-cell.visiteurs-like-recyclage-has-rdv:not(.final-has-rdv)::after,
#visitorCalendar .visitor-month-cell.visitor-final-has-rdv:not(.final-has-rdv)::after {
  content: none !important;
  display: none !important;
}

#visitorCalendar .visitor-month-cell.final-has-rdv .visitor-final-rdv-corner {
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 16px solid #e8a900 !important;
  border-left: 16px solid transparent !important;
  background: transparent !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

#visitorCalendar .visitor-month-cell.final-has-rdv .visitor-final-rdv-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 7px !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: #111111 !important;
  color: #f4df8b !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  z-index: 21 !important;
  pointer-events: none !important;
}

/* Fenêtre RDV visiteurs : recherche au-dessus, sans slider horizontal */
#visitorDayModal {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: min(760px, calc(100vw - 32px)) !important;
  overflow: visible !important;
}

#visitorDayModal .modal-form {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#visitorDayDetails,
.final-visitor-rdv-list,
#visitorDayModal .visitor-detail-card,
#visitorDayModal .visitor-detail-list {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.final-visitor-search-zone,
.visitor-search-zone {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.final-visitor-search-zone button,
.visitor-search-zone button {
  width: fit-content !important;
}

/* ==========================================================
   VISITEURS — ALIGNEMENT BARRE CALENDRIER COMME RECYCLAGE
   ========================================================== */

/*
  Objectif :
  - Dans VISITEURS, placer les boutons Mois précédent / Mois année /
    Mois suivant / Aujourd'hui à droite du texte.
  - Même logique visuelle que RECYCLAGE.
*/

.visitor-month-toolbar {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) auto !important;
  align-items: start !important;
  column-gap: 24px !important;
  row-gap: 12px !important;
  width: 100% !important;
  margin-bottom: 22px !important;
}

.visitor-month-toolbar > div:first-child {
  grid-column: 1 !important;
  min-width: 0 !important;
}

.visitor-month-toolbar > div:first-child h3,
.visitor-month-toolbar > div:first-child p {
  margin-top: 0 !important;
}

.visitor-month-nav {
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: start !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  margin-left: auto !important;
}

.visitor-month-nav button {
  min-height: 58px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.visitor-month-nav .visitor-month-title,
#visitorCalendarMonthLabel.visitor-month-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 150px !important;
  white-space: nowrap !important;
  color: #f4df8b !important;
  font-weight: 950 !important;
  font-size: 28px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-align: center !important;
}

/* Tablette / petit écran : les boutons repassent dessous proprement */
@media (max-width: 1250px) {
  .visitor-month-toolbar {
    grid-template-columns: 1fr !important;
  }

  .visitor-month-nav {
    grid-column: 1 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
  }
}

/* Mobile : grille compacte */
@media (max-width: 900px) {
  .visitor-month-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  .visitor-month-nav .visitor-month-title,
  #visitorCalendarMonthLabel.visitor-month-title {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 24px !important;
  }

  .visitor-month-nav button {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
}

/* ==========================================================
   RÉFÉRENTIELS — CROIX DE SUPPRESSION COMPACTES
   ========================================================== */

/*
  Objectif :
  - Réduire les boutons de suppression "×" dans l'onglet RÉFÉRENTIELS.
  - Garder les boutons "Ajouter" inchangés.
  - Rendre les listes lisibles et propres.
*/

/* Conteneurs de listes de référentiels */
#refs .ref-list,
#referentiels .ref-list,
#refs .chips,
#referentiels .chips,
#refs .tag-list,
#referentiels .tag-list,
#refs .reference-list,
#referentiels .reference-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
}

/* Élément référentiel : nom + bouton suppression */
#refs .ref-item,
#referentiels .ref-item,
#refs .chip,
#referentiels .chip,
#refs .tag,
#referentiels .tag,
#refs .reference-item,
#referentiels .reference-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 34px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Boutons de suppression uniquement dans les listes de référentiels */
#refs .ref-item button,
#referentiels .ref-item button,
#refs .chip button,
#referentiels .chip button,
#refs .tag button,
#referentiels .tag button,
#refs .reference-item button,
#referentiels .reference-item button,
#refs button.ref-delete,
#referentiels button.ref-delete,
#refs button.delete-ref,
#referentiels button.delete-ref,
#refs button.remove-ref,
#referentiels button.remove-ref {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #d6b451, #f2de83) !important;
  color: #050505 !important;
  border: 1px solid rgba(255, 230, 140, .65) !important;
  vertical-align: middle !important;
  flex: 0 0 28px !important;
}

/* Sécurité : les boutons Ajouter restent grands et propres */
#refs button:not(.ref-delete):not(.delete-ref):not(.remove-ref),
#referentiels button:not(.ref-delete):not(.delete-ref):not(.remove-ref) {
  max-width: none;
}

/* Si l'ancien rendu met directement des boutons "×" à côté du texte dans une carte */
#refs .card > div button,
#referentiels .card > div button,
#refs .panel > div button,
#referentiels .panel > div button {
  vertical-align: middle !important;
}

/* Mobile */
@media (max-width: 760px) {
  #refs .ref-list,
  #referentiels .ref-list,
  #refs .chips,
  #referentiels .chips,
  #refs .tag-list,
  #referentiels .tag-list,
  #refs .reference-list,
  #referentiels .reference-list {
    gap: 8px 10px !important;
  }

  #refs .ref-item button,
  #referentiels .ref-item button,
  #refs .chip button,
  #referentiels .chip button,
  #refs .tag button,
  #referentiels .tag button,
  #refs .reference-item button,
  #referentiels .reference-item button,
  #refs button.ref-delete,
  #referentiels button.ref-delete,
  #refs button.delete-ref,
  #referentiels button.delete-ref,
  #refs button.remove-ref,
  #referentiels button.remove-ref {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    flex-basis: 26px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }
}

/* ==========================================================
   RÉFÉRENTIELS — ACTIONS CHAUFFEURS
   ========================================================== */

.ref-driver-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.ref-driver-actions button {
  width: auto !important;
  min-width: 86px !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  flex: 0 0 auto !important;
}

.driver-edit-modal {
  width: min(980px, calc(100vw - 32px)) !important;
  max-width: min(980px, calc(100vw - 32px)) !important;
}

.driver-edit-modal .modal-form {
  width: 100% !important;
  max-width: 100% !important;
}

.driver-edit-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
}

@media (max-width: 900px) {
  .driver-edit-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 620px) {
  .driver-edit-grid {
    grid-template-columns: 1fr !important;
  }

  .ref-driver-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ref-driver-actions button {
    width: 100% !important;
  }
}

/* ==========================================================
   VISITEURS — REGISTRE RÉEL UNIFORMISÉ AVEC LES AUTRES REGISTRES
   Corrige le tableau du registre visiteurs pour qu'il adopte
   le même rendu que les registres SAV NF / RECYCLAGE / T.I.E.
   ========================================================== */

#visiteursList,
#visitorsList {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#visiteursList table,
#visitorsList table {
  width: 100% !important;
  min-width: 1100px !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  background: #111114 !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}

#visiteursList thead th,
#visitorsList thead th {
  background: #0e0e11 !important;
  color: var(--gold-light) !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  text-align: left !important;
  vertical-align: middle !important;
  padding: 12px 10px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#visiteursList tbody td,
#visitorsList tbody td {
  min-height: auto !important;
  height: auto !important;
  background: #111114 !important;
  color: #f4f4f5 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 14px 10px !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  text-align: left !important;
  vertical-align: top !important;
  cursor: default !important;
  position: static !important;
  overflow: visible !important;
  box-shadow: none !important;
  outline: none !important;
  white-space: normal !important;
  word-break: break-word !important;
}

#visiteursList tbody tr:hover td,
#visitorsList tbody tr:hover td {
  background: rgba(255, 255, 255, .025) !important;
  outline: none !important;
}

#visiteursList tbody td:first-child,
#visitorsList tbody td:first-child {
  width: 92px !important;
  min-width: 92px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  background: #111114 !important;
  color: #f4f4f5 !important;
  display: table-cell !important;
}

#visiteursList td.actions,
#visitorsList td.actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 230px !important;
}

#visiteursList td.actions button,
#visitorsList td.actions button,
#visiteursList td.actions .pill,
#visitorsList td.actions .pill {
  min-width: 118px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  flex: 0 0 auto !important;
}

#visiteursList .pill,
#visitorsList .pill {
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#visiteursList .pill.green,
#visitorsList .pill.green {
  min-width: 118px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#visiteursList tbody td:nth-child(2),
#visitorsList tbody td:nth-child(2) { min-width: 130px !important; }
#visiteursList tbody td:nth-child(3),
#visitorsList tbody td:nth-child(3) { min-width: 170px !important; }
#visiteursList tbody td:nth-child(4),
#visitorsList tbody td:nth-child(4) { min-width: 90px !important; }
#visiteursList tbody td:nth-child(5),
#visitorsList tbody td:nth-child(5),
#visiteursList tbody td:nth-child(6),
#visitorsList tbody td:nth-child(6) { min-width: 100px !important; }
#visiteursList tbody td:nth-child(7),
#visitorsList tbody td:nth-child(7) { min-width: 120px !important; }
#visiteursList tbody td:nth-child(8),
#visitorsList tbody td:nth-child(8) { min-width: 110px !important; }

@media (max-width: 900px) {
  #visiteursList table,
  #visitorsList table {
    min-width: 980px !important;
  }

  #visiteursList thead th,
  #visitorsList thead th,
  #visiteursList tbody td,
  #visitorsList tbody td {
    font-size: 14px !important;
    padding: 10px 8px !important;
  }

  #visiteursList td.actions button,
  #visitorsList td.actions button,
  #visiteursList td.actions .pill,
  #visitorsList td.actions .pill,
  #visiteursList .pill.green,
  #visitorsList .pill.green {
    min-width: 104px !important;
    min-height: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================
   SAV NF — ONGLET EN 3 ZONES : CALENDRIER / CONTACTS / BADGES
   ========================================================== */

#savnf .savnf-page-head {
  margin-bottom: 18px !important;
}

.savnf-three-zone {
  display: grid !important;
  grid-template-columns: minmax(380px, 1.05fr) minmax(300px, .85fr) minmax(360px, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
}

.savnf-zone,
.savnf-register-block {
  background: #171719 !important;
  border: 1px solid #33343a !important;
  border-radius: 22px !important;
  padding: 20px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .16) !important;
}

.savnf-zone-head {
  margin-bottom: 14px !important;
}

.savnf-zone-head h3,
.savnf-register-block h3 {
  margin: 0 0 8px !important;
  color: var(--gold-light) !important;
  font-weight: 950 !important;
}

.savnf-zone-head p {
  margin: 0 !important;
  line-height: 1.35 !important;
}

.savnf-panel-month-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 6px 0 12px !important;
  color: #f4df8b !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

#savnfCalendar.savnf-calendar-compact {
  width: 100% !important;
  overflow-x: hidden !important;
  padding-bottom: 0 !important;
}

#savnf .savnf-month-grid-compact,
#savnf .savnf-month-grid {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 52px repeat(7, minmax(34px, 1fr)) !important;
  border-radius: 14px !important;
}

#savnf .savnf-month-grid-compact .savnf-month-head,
#savnf .savnf-month-grid .savnf-month-head {
  min-height: 34px !important;
  padding: 8px 3px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#savnf .savnf-month-grid-compact .savnf-week-cell,
#savnf .savnf-month-grid-compact .savnf-month-cell,
#savnf .savnf-month-grid .savnf-week-cell,
#savnf .savnf-month-grid .savnf-month-cell {
  min-height: 48px !important;
  height: 48px !important;
  padding: 3px !important;
  font-size: 17px !important;
}

#savnf .savnf-month-grid-compact .savnf-date-number,
#savnf .savnf-month-grid .savnf-date-number {
  font-size: 19px !important;
  margin-top: 0 !important;
}

#savnf .savnf-month-grid-compact .savnf-rdv-marker,
#savnf .savnf-month-grid .savnf-rdv-marker {
  top: 4px !important;
  right: 4px !important;
  border-top-width: 12px !important;
  border-left-width: 12px !important;
}

#savnf .savnf-month-grid-compact .savnf-rdv-count,
#savnf .savnf-month-grid .savnf-rdv-count {
  right: 4px !important;
  bottom: 4px !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  font-size: 12px !important;
}

.savnf-calendar-bottom-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.savnf-calendar-bottom-actions button {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.savnf-contact-admin label {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--gold-light) !important;
  font-weight: 950 !important;
}

#savnfContactsTextarea {
  width: 100% !important;
  min-height: 245px !important;
  resize: vertical !important;
  line-height: 1.45 !important;
}

.savnf-contact-actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 12px !important;
}

.savnf-contact-readonly {
  min-height: 285px !important;
  padding: 16px !important;
  border: 1px solid #33343a !important;
  border-radius: 16px !important;
  background: #101012 !important;
  color: #f4f4f5 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.savnf-contact-readonly.empty,
.savnf-badge-empty {
  color: var(--muted) !important;
}

.savnf-badge-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 365px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.savnf-badge-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 13px !important;
  border: 1px solid #33343a !important;
  border-radius: 16px !important;
  background: #101012 !important;
}

.savnf-badge-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.savnf-badge-number {
  color: var(--gold-light) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.savnf-badge-date {
  color: var(--muted) !important;
  font-size: 12px !important;
  text-align: right !important;
}

.savnf-badge-info {
  display: grid !important;
  gap: 4px !important;
  color: #f4f4f5 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.savnf-badge-return-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;
  padding: 9px 12px !important;
  border-radius: 13px !important;
  background: rgba(22, 163, 74, .14) !important;
  border: 1px solid rgba(22, 163, 74, .55) !important;
  color: #b8ffd2 !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.savnf-badge-return-check input {
  width: 18px !important;
  height: 18px !important;
  accent-color: #16a34a !important;
}

.savnf-new-entry-row {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 18px 0 14px !important;
}

.savnf-new-entry-row button {
  min-width: 210px !important;
}

.savnf-register-block {
  margin-top: 0 !important;
}

#savnfList table {
  min-width: 1050px !important;
}

@media (max-width: 1500px) {
  .savnf-three-zone {
    grid-template-columns: 1fr 1fr !important;
  }

  .savnf-zone-badges {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  .savnf-three-zone {
    grid-template-columns: 1fr !important;
  }

  #savnf .savnf-month-grid-compact,
  #savnf .savnf-month-grid {
    min-width: 650px !important;
  }

  #savnfCalendar.savnf-calendar-compact {
    overflow-x: auto !important;
  }
}

@media (max-width: 560px) {
  .savnf-zone,
  .savnf-register-block {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .savnf-calendar-bottom-actions {
    grid-template-columns: 1fr !important;
  }

  .savnf-new-entry-row button {
    width: 100% !important;
  }
}

/* ==========================================================
   SAV NF — FINALISATION VISUELLE 3 ZONES
   1) Les 4 boutons sous calendrier restent sur une seule ligne.
   2) Les badges non rendus sont présentés sur une seule ligne.
   ========================================================== */

/* --- Boutons calendrier SAV NF : 1 seule ligne desktop --- */
#savnf .savnf-calendar-bottom-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
  width: 100% !important;
}

#savnf .savnf-calendar-bottom-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- Badges non rendus SAV NF : 1 ligne lisible --- */
#savnf .savnf-badge-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 365px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

#savnf .savnf-badge-card {
  display: grid !important;
  grid-template-columns: minmax(90px, .65fr) minmax(150px, 1fr) minmax(150px, 1.25fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 13px !important;
  border: 1px solid #33343a !important;
  border-radius: 16px !important;
  background: #101012 !important;
  min-height: 74px !important;
}

#savnf .savnf-badge-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#savnf .savnf-badge-number {
  color: var(--gold-light) !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#savnf .savnf-badge-date {
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
}

#savnf .savnf-badge-info {
  display: contents !important;
}

#savnf .savnf-badge-info strong {
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

#savnf .savnf-badge-info span {
  color: #f4f4f5 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
}

#savnf .savnf-badge-return-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: auto !important;
  min-width: 134px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  background: rgba(22, 163, 74, .14) !important;
  border: 1px solid rgba(22, 163, 74, .55) !important;
  color: #b8ffd2 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

#savnf .savnf-badge-return-check input {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  accent-color: #16a34a !important;
}

/* --- Ajustements selon largeur de la colonne droite --- */
@media (max-width: 1600px) {
  #savnf .savnf-badge-card {
    grid-template-columns: minmax(82px, .6fr) minmax(120px, .9fr) minmax(140px, 1fr) auto !important;
    gap: 8px !important;
  }

  #savnf .savnf-badge-return-check {
    min-width: 122px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 1500px) {
  #savnf .savnf-zone-badges {
    grid-column: 1 / -1 !important;
  }

  #savnf .savnf-badge-card {
    grid-template-columns: minmax(120px, .7fr) minmax(160px, 1fr) minmax(260px, 1.4fr) auto !important;
  }
}

@media (max-width: 980px) {
  #savnf .savnf-calendar-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #savnf .savnf-badge-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 9px !important;
  }

  #savnf .savnf-badge-info {
    display: grid !important;
    gap: 4px !important;
  }

  #savnf .savnf-badge-return-check {
    width: fit-content !important;
  }
}

@media (max-width: 560px) {
  #savnf .savnf-calendar-bottom-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  #savnf .savnf-calendar-bottom-actions button {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }

  #savnf .savnf-badge-return-check {
    width: 100% !important;
  }
}

/* ==========================================================
   SAV NF — AJUSTEMENT 3 ZONES : CONTACTS RÉDUITS / BADGES ÉLARGIS
   ========================================================== */

/*
  Objectif :
  - réduire la colonne centrale CONTACTS SAV NF ;
  - élargir la colonne droite BADGES SAV NF non rendus ;
  - empêcher les informations badge / transporteur / chauffeur / téléphone
    d'être tronquées ;
  - garder le calendrier à gauche lisible.
*/

/* Grille principale SAV NF : gauche / contacts / badges */
.savnf-top-grid,
.savnf-three-zones,
.savnf-dashboard-grid,
#savnf .savnf-top-grid,
#savnf .savnf-three-zones,
#savnf .savnf-dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(520px, 0.95fr) minmax(240px, 0.42fr) minmax(680px, 1.18fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Colonne contacts : plus compacte */
.savnf-contacts-card,
#savnfContactsCard,
#savnf .savnf-contacts-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

.savnf-contacts-card textarea,
.savnf-contacts-card .savnf-contacts-text,
#savnfContactsText,
#savnfContactsTextarea {
  min-height: 180px !important;
  max-height: 280px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Colonne badges : priorité à la largeur */
.savnf-badges-card,
#savnfBadgesCard,
#savnf .savnf-badges-card {
  min-width: 0 !important;
  overflow: visible !important;
}

/* Liste badges : cartes plus larges et lisibles */
.savnf-badges-list,
#savnfBadgesList,
#savnf .savnf-badges-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Carte badge : une ligne lisible avec colonnes adaptées */
.savnf-badge-card,
#savnf .savnf-badge-card {
  display: grid !important;
  grid-template-columns:
    minmax(88px, 0.42fr)
    minmax(150px, 0.70fr)
    minmax(260px, 1fr)
    minmax(150px, auto) !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  overflow: visible !important;
}

/* Bloc principal s'il existe dans le HTML */
.savnf-badge-main,
#savnf .savnf-badge-main {
  display: contents !important;
}

/* Textes badge : ne plus tronquer */
.savnf-badge-title,
.savnf-badge-transporteur,
.savnf-badge-chauffeur,
.savnf-badge-remise,
#savnf .savnf-badge-title,
#savnf .savnf-badge-transporteur,
#savnf .savnf-badge-chauffeur,
#savnf .savnf-badge-remise {
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.savnf-badge-title,
#savnf .savnf-badge-title {
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  color: var(--gold-light) !important;
}

.savnf-badge-remise,
#savnf .savnf-badge-remise {
  font-size: 12px !important;
  line-height: 1.15 !important;
  color: #cfe1ff !important;
}

.savnf-badge-transporteur,
#savnf .savnf-badge-transporteur {
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.savnf-badge-chauffeur,
#savnf .savnf-badge-chauffeur {
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}

/* Case badge rendu : compacte, entièrement visible */
.savnf-badge-check,
#savnf .savnf-badge-check {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 148px !important;
  max-width: 170px !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.savnf-badge-check input[type="checkbox"],
#savnf .savnf-badge-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

.savnf-badge-check label,
#savnf .savnf-badge-check label,
.savnf-badge-check span,
#savnf .savnf-badge-check span {
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Sécurité si certains textes sont dans des div génériques */
#savnfBadgesList * {
  text-overflow: unset !important;
}

/* Écrans moyens : conserver 3 zones mais donner priorité aux badges */
@media (max-width: 1500px) {
  .savnf-top-grid,
  .savnf-three-zones,
  .savnf-dashboard-grid,
  #savnf .savnf-top-grid,
  #savnf .savnf-three-zones,
  #savnf .savnf-dashboard-grid {
    grid-template-columns: minmax(480px, 0.95fr) minmax(220px, 0.38fr) minmax(620px, 1.22fr) !important;
    gap: 14px !important;
  }

  .savnf-badge-card,
  #savnf .savnf-badge-card {
    grid-template-columns:
      minmax(82px, 0.38fr)
      minmax(135px, 0.62fr)
      minmax(230px, 1fr)
      minmax(140px, auto) !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .savnf-badge-check,
  #savnf .savnf-badge-check {
    min-width: 138px !important;
    max-width: 150px !important;
  }
}

/* Tablette : les 3 zones passent en 1 colonne proprement */
@media (max-width: 1180px) {
  .savnf-top-grid,
  .savnf-three-zones,
  .savnf-dashboard-grid,
  #savnf .savnf-top-grid,
  #savnf .savnf-three-zones,
  #savnf .savnf-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .savnf-badge-card,
  #savnf .savnf-badge-card {
    grid-template-columns: minmax(90px, .45fr) minmax(160px, .75fr) minmax(260px, 1fr) minmax(150px, auto) !important;
  }
}

/* Mobile : retour multi-ligne lisible */
@media (max-width: 760px) {
  .savnf-badge-card,
  #savnf .savnf-badge-card {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .savnf-badge-main,
  #savnf .savnf-badge-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .savnf-badge-check,
  #savnf .savnf-badge-check {
    justify-self: start !important;
    max-width: none !important;
    width: fit-content !important;
  }
}

/* ==========================================================
   SAV NF — CONTACTS RÉDUITS / BADGES ÉLARGIS / CARTES COMPACTES
   ========================================================== */

/*
  Objectif :
  - réduire nettement la colonne CONTACTS SAV NF ;
  - augmenter la colonne BADGES SAV NF non rendus ;
  - afficher chaque carte badge sur 1 à 2 lignes maximum ;
  - permettre une lecture d'environ 20 badges/jour d'un seul coup d'œil.
*/

/* Grille 3 zones réelle utilisée dans l'onglet SAV NF */
#savnf .savnf-three-zone,
.savnf-three-zone {
  display: grid !important;
  grid-template-columns: minmax(520px, 0.92fr) minmax(220px, 0.34fr) minmax(720px, 1.44fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* La zone contacts doit être plus étroite et plus compacte */
#savnf .savnf-zone-contacts,
.savnf-zone-contacts {
  min-width: 0 !important;
  padding: 18px !important;
}

#savnf .savnf-zone-contacts .savnf-zone-head p,
.savnf-zone-contacts .savnf-zone-head p {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

#savnfContactsTextarea,
#savnf .savnf-contact-readonly {
  min-height: 170px !important;
  max-height: 240px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#savnf .savnf-contact-actions button,
.savnf-contact-actions button {
  min-height: 42px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
}

/* La zone badges doit absorber la largeur gagnée */
#savnf .savnf-zone-badges,
.savnf-zone-badges {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 18px !important;
}

/* Liste compacte : hauteur utile pour une vingtaine de lignes */
#savnf .savnf-badge-list,
#savnf .savnf-badge-list-compact,
.savnf-badge-list,
.savnf-badge-list-compact {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  max-height: 440px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

/* Carte badge compacte : 2 lignes structurées */
#savnf .savnf-badge-card,
#savnf .savnf-badge-card-compact,
.savnf-badge-card,
.savnf-badge-card-compact {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid #33343a !important;
  background: #101012 !important;
  overflow: hidden !important;
}

/* Ligne 1 : badge / remise / transporteur */
#savnf .savnf-badge-compact-main,
.savnf-badge-compact-main {
  display: grid !important;
  grid-template-columns: minmax(80px, .42fr) minmax(125px, .58fr) minmax(170px, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* Ligne 2 : chauffeur / téléphone / rendu */
#savnf .savnf-badge-compact-details,
.savnf-badge-compact-details {
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) minmax(105px, .42fr) minmax(130px, auto) !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* Textes lisibles mais petits */
#savnf .savnf-badge-number,
.savnf-badge-number {
  color: var(--gold-light) !important;
  font-size: 17px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#savnf .savnf-badge-date,
.savnf-badge-date {
  color: #cfe1ff !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

#savnf .savnf-badge-transporteur,
#savnf .savnf-badge-chauffeur,
#savnf .savnf-badge-phone,
.savnf-badge-transporteur,
.savnf-badge-chauffeur,
.savnf-badge-phone {
  min-width: 0 !important;
  max-width: 100% !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.14 !important;
  font-weight: 850 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#savnf .savnf-badge-transporteur,
.savnf-badge-transporteur {
  font-weight: 950 !important;
}

#savnf .savnf-badge-phone,
.savnf-badge-phone {
  font-weight: 750 !important;
  color: #dbeafe !important;
  white-space: nowrap !important;
}

/* Case rendu compacte et entièrement visible */
#savnf .savnf-badge-return-check,
.savnf-badge-return-check {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 128px !important;
  max-width: 138px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  background: rgba(22, 163, 74, .14) !important;
  border: 1px solid rgba(22, 163, 74, .55) !important;
  color: #b8ffd2 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

#savnf .savnf-badge-return-check input,
.savnf-badge-return-check input {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  accent-color: #16a34a !important;
}

#savnf .savnf-badge-return-check span,
.savnf-badge-return-check span {
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

/* Sécurité : neutralise les anciens blocs si encore présents dans le DOM */
#savnf .savnf-badge-main,
#savnf .savnf-badge-info {
  min-width: 0 !important;
}

/* Écrans intermédiaires : priorité à badges, puis bascule propre */
@media (max-width: 1550px) {
  #savnf .savnf-three-zone,
  .savnf-three-zone {
    grid-template-columns: minmax(500px, 0.9fr) minmax(200px, 0.3fr) minmax(660px, 1.5fr) !important;
    gap: 14px !important;
  }

  #savnf .savnf-badge-compact-main,
  .savnf-badge-compact-main {
    grid-template-columns: minmax(78px, .4fr) minmax(118px, .55fr) minmax(150px, .9fr) !important;
  }

  #savnf .savnf-badge-compact-details,
  .savnf-badge-compact-details {
    grid-template-columns: minmax(165px, 1fr) minmax(95px, .36fr) minmax(122px, auto) !important;
    gap: 8px !important;
  }
}

/* En dessous, les zones passent l'une sous l'autre pour garder la lisibilité */
@media (max-width: 1240px) {
  #savnf .savnf-three-zone,
  .savnf-three-zone {
    grid-template-columns: 1fr !important;
  }

  #savnf .savnf-badge-list,
  #savnf .savnf-badge-list-compact,
  .savnf-badge-list,
  .savnf-badge-list-compact {
    max-height: none !important;
  }
}

/* Mobile : 2 à 4 lignes acceptées pour éviter tout écrasement */
@media (max-width: 720px) {
  #savnf .savnf-badge-compact-main,
  #savnf .savnf-badge-compact-details,
  .savnf-badge-compact-main,
  .savnf-badge-compact-details {
    grid-template-columns: 1fr !important;
  }

  #savnf .savnf-badge-return-check,
  .savnf-badge-return-check {
    justify-self: start !important;
  }
}

/* ==========================================================
   SAV NF — 2 ZONES PROPORTIONNELLES : CALENDRIER 1/3 / BADGES 2/3
   ========================================================== */

/*
  Objectif :
  - supprimer CONTACTS SAV NF de l'affichage ;
  - diviser l'écran SAV NF en 2 zones :
    1/3 planning calendrier, 2/3 badges non rendus ;
  - conserver les cartes badges compactes pour lecture rapide.
*/

#savnf .savnf-two-zone,
.savnf-two-zone {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(760px, 2fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Sécurité : ancienne colonne CONTACTS masquée si ancien DOM encore présent */
#savnf .savnf-zone-contacts,
.savnf-zone-contacts,
#savnfContactsBox {
  display: none !important;
}

/* Si une ancienne grille 3 zones survit, on la force en 2 zones utiles */
#savnf .savnf-three-zone,
.savnf-three-zone {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(760px, 2fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#savnf .savnf-three-zone > .savnf-zone-calendar,
.savnf-three-zone > .savnf-zone-calendar {
  grid-column: 1 !important;
}

#savnf .savnf-three-zone > .savnf-zone-badges,
.savnf-three-zone > .savnf-zone-badges {
  grid-column: 2 !important;
}

/* Zone calendrier : 1/3, compacte mais lisible */
#savnf .savnf-zone-calendar,
.savnf-zone-calendar {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Zone badges : 2/3, priorité visibilité */
#savnf .savnf-zone-badges,
#savnf .savnf-zone-badges-wide,
.savnf-zone-badges,
.savnf-zone-badges-wide {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Les cartes badges restent compactes : 2 lignes maximum sur écran large */
#savnf .savnf-badge-list,
#savnf .savnf-badge-list-compact,
.savnf-badge-list,
.savnf-badge-list-compact {
  max-height: 460px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  gap: 8px !important;
}

#savnf .savnf-badge-card,
#savnf .savnf-badge-card-compact,
.savnf-badge-card,
.savnf-badge-card-compact {
  padding: 9px 12px !important;
  gap: 4px !important;
  min-height: 64px !important;
}

#savnf .savnf-badge-compact-main,
.savnf-badge-compact-main {
  display: grid !important;
  grid-template-columns: minmax(82px, .32fr) minmax(130px, .42fr) minmax(220px, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#savnf .savnf-badge-compact-details,
.savnf-badge-compact-details {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(120px, .35fr) minmax(130px, auto) !important;
  gap: 12px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#savnf .savnf-badge-number,
.savnf-badge-number {
  font-size: 16px !important;
  line-height: 1.05 !important;
}

#savnf .savnf-badge-date,
.savnf-badge-date {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

#savnf .savnf-badge-transporteur,
#savnf .savnf-badge-chauffeur,
#savnf .savnf-badge-phone,
.savnf-badge-transporteur,
.savnf-badge-chauffeur,
.savnf-badge-phone {
  font-size: 13px !important;
  line-height: 1.14 !important;
}

/* Boutons sous calendrier : toujours une ligne si la largeur le permet */
#savnf .savnf-calendar-bottom-actions,
.savnf-calendar-bottom-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

#savnf .savnf-calendar-bottom-actions button,
.savnf-calendar-bottom-actions button {
  min-height: 46px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* Bouton Nouvelle entrée sous les 2 zones, à gauche */
#savnf .savnf-new-entry-row,
.savnf-new-entry-row {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 18px 0 16px !important;
}

#savnf .savnf-new-entry-row button,
.savnf-new-entry-row button {
  min-width: 220px !important;
}

/* Responsive : en dessous, empilement propre */
@media (max-width: 1280px) {
  #savnf .savnf-two-zone,
  .savnf-two-zone,
  #savnf .savnf-three-zone,
  .savnf-three-zone {
    grid-template-columns: 1fr !important;
  }

  #savnf .savnf-three-zone > .savnf-zone-calendar,
  .savnf-three-zone > .savnf-zone-calendar,
  #savnf .savnf-three-zone > .savnf-zone-badges,
  .savnf-three-zone > .savnf-zone-badges {
    grid-column: auto !important;
  }

  #savnf .savnf-badge-list,
  #savnf .savnf-badge-list-compact,
  .savnf-badge-list,
  .savnf-badge-list-compact {
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  #savnf .savnf-calendar-bottom-actions,
  .savnf-calendar-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #savnf .savnf-badge-compact-main,
  #savnf .savnf-badge-compact-details,
  .savnf-badge-compact-main,
  .savnf-badge-compact-details {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   SAV NF — REGISTRE : ACTIONS SUR UNE SEULE LIGNE
   ========================================================== */

/*
  Objectif :
  - réduire les boutons RENDU / Modifier / Supprimer dans le registre réel SAV NF ;
  - les faire tenir sur une seule ligne ;
  - conserver une lecture claire sans casser les autres registres.
*/

#savnfList table {
  table-layout: auto !important;
}

#savnfList th:last-child,
#savnfList td.actions {
  min-width: 290px !important;
  width: 290px !important;
}

#savnfList td.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

#savnfList td.actions button,
#savnfList td.actions .pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#savnfList td.actions button:first-child,
#savnfList td.actions .pill:first-child {
  min-width: 76px !important;
}

#savnfList td.actions button:nth-child(2),
#savnfList td.actions .pill:nth-child(2) {
  min-width: 82px !important;
}

#savnfList td.actions button:nth-child(3),
#savnfList td.actions .pill:nth-child(3) {
  min-width: 90px !important;
}

#savnfList td.actions .pill.green {
  min-width: 76px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

#savnfList td.actions .danger,
#savnfList td.actions button.danger {
  min-width: 92px !important;
}

#savnfList td.actions .ghost,
#savnfList td.actions button.ghost {
  min-width: 82px !important;
}

/* Évite que la colonne actions force les boutons sur plusieurs lignes */
#savnfList td.actions br {
  display: none !important;
}

/* Écran réduit : on garde une ligne avec scroll horizontal du tableau */
@media (max-width: 900px) {
  #savnfList table {
    min-width: 1160px !important;
  }

  #savnfList th:last-child,
  #savnfList td.actions {
    min-width: 270px !important;
    width: 270px !important;
  }

  #savnfList td.actions button,
  #savnfList td.actions .pill {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 11px !important;
  }

  #savnfList td.actions button:first-child,
  #savnfList td.actions .pill:first-child {
    min-width: 70px !important;
  }

  #savnfList td.actions button:nth-child(2),
  #savnfList td.actions .pill:nth-child(2) {
    min-width: 76px !important;
  }

  #savnfList td.actions button:nth-child(3),
  #savnfList td.actions .pill:nth-child(3) {
    min-width: 84px !important;
  }
}

/* ==========================================================
   TOUS REGISTRES — ACTIONS SUR UNE SEULE LIGNE
   Onglets concernés :
   EXPÉDITION / RECYCLAGE / VISITEURS / T.I.E / PRESTATAIRES
   ========================================================== */

/*
  Objectif :
  - appliquer la même correction que SAV NF ;
  - réduire RENDU / Modifier / Supprimer ;
  - forcer les 3 boutons sur une seule ligne ;
  - cibler uniquement les registres demandés.
*/

#expeditionList table,
#recyclingList table,
#visiteursList table,
#visitorsList table,
#tieList table,
#prestatairesList table,
#providersList table {
  table-layout: auto !important;
}

/* Largeur de la colonne Actions */
#expeditionList th:last-child,
#expeditionList td.actions,
#recyclingList th:last-child,
#recyclingList td.actions,
#visiteursList th:last-child,
#visiteursList td.actions,
#visitorsList th:last-child,
#visitorsList td.actions,
#tieList th:last-child,
#tieList td.actions,
#prestatairesList th:last-child,
#prestatairesList td.actions,
#providersList th:last-child,
#providersList td.actions {
  min-width: 290px !important;
  width: 290px !important;
}

/* Cellule Actions en ligne unique */
#expeditionList td.actions,
#recyclingList td.actions,
#visiteursList td.actions,
#visitorsList td.actions,
#tieList td.actions,
#prestatairesList td.actions,
#providersList td.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Boutons compactés */
#expeditionList td.actions button,
#expeditionList td.actions .pill,
#recyclingList td.actions button,
#recyclingList td.actions .pill,
#visiteursList td.actions button,
#visiteursList td.actions .pill,
#visitorsList td.actions button,
#visitorsList td.actions .pill,
#tieList td.actions button,
#tieList td.actions .pill,
#prestatairesList td.actions button,
#prestatairesList td.actions .pill,
#providersList td.actions button,
#providersList td.actions .pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* RENDU */
#expeditionList td.actions button:first-child,
#expeditionList td.actions .pill:first-child,
#recyclingList td.actions button:first-child,
#recyclingList td.actions .pill:first-child,
#visiteursList td.actions button:first-child,
#visiteursList td.actions .pill:first-child,
#visitorsList td.actions button:first-child,
#visitorsList td.actions .pill:first-child,
#tieList td.actions button:first-child,
#tieList td.actions .pill:first-child,
#prestatairesList td.actions button:first-child,
#prestatairesList td.actions .pill:first-child,
#providersList td.actions button:first-child,
#providersList td.actions .pill:first-child {
  min-width: 76px !important;
}

/* MODIFIER */
#expeditionList td.actions button:nth-child(2),
#expeditionList td.actions .pill:nth-child(2),
#recyclingList td.actions button:nth-child(2),
#recyclingList td.actions .pill:nth-child(2),
#visiteursList td.actions button:nth-child(2),
#visiteursList td.actions .pill:nth-child(2),
#visitorsList td.actions button:nth-child(2),
#visitorsList td.actions .pill:nth-child(2),
#tieList td.actions button:nth-child(2),
#tieList td.actions .pill:nth-child(2),
#prestatairesList td.actions button:nth-child(2),
#prestatairesList td.actions .pill:nth-child(2),
#providersList td.actions button:nth-child(2),
#providersList td.actions .pill:nth-child(2) {
  min-width: 82px !important;
}

/* SUPPRIMER */
#expeditionList td.actions button:nth-child(3),
#expeditionList td.actions .pill:nth-child(3),
#recyclingList td.actions button:nth-child(3),
#recyclingList td.actions .pill:nth-child(3),
#visiteursList td.actions button:nth-child(3),
#visiteursList td.actions .pill:nth-child(3),
#visitorsList td.actions button:nth-child(3),
#visitorsList td.actions .pill:nth-child(3),
#tieList td.actions button:nth-child(3),
#tieList td.actions .pill:nth-child(3),
#prestatairesList td.actions button:nth-child(3),
#prestatairesList td.actions .pill:nth-child(3),
#providersList td.actions button:nth-child(3),
#providersList td.actions .pill:nth-child(3) {
  min-width: 90px !important;
}

/* Pastille RENDU verte */
#expeditionList td.actions .pill.green,
#recyclingList td.actions .pill.green,
#visiteursList td.actions .pill.green,
#visitorsList td.actions .pill.green,
#tieList td.actions .pill.green,
#prestatairesList td.actions .pill.green,
#providersList td.actions .pill.green {
  min-width: 76px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

/* Rouge Supprimer */
#expeditionList td.actions .danger,
#expeditionList td.actions button.danger,
#recyclingList td.actions .danger,
#recyclingList td.actions button.danger,
#visiteursList td.actions .danger,
#visiteursList td.actions button.danger,
#visitorsList td.actions .danger,
#visitorsList td.actions button.danger,
#tieList td.actions .danger,
#tieList td.actions button.danger,
#prestatairesList td.actions .danger,
#prestatairesList td.actions button.danger,
#providersList td.actions .danger,
#providersList td.actions button.danger {
  min-width: 92px !important;
}

/* Gris Modifier */
#expeditionList td.actions .ghost,
#expeditionList td.actions button.ghost,
#recyclingList td.actions .ghost,
#recyclingList td.actions button.ghost,
#visiteursList td.actions .ghost,
#visiteursList td.actions button.ghost,
#visitorsList td.actions .ghost,
#visitorsList td.actions button.ghost,
#tieList td.actions .ghost,
#tieList td.actions button.ghost,
#prestatairesList td.actions .ghost,
#prestatairesList td.actions button.ghost,
#providersList td.actions .ghost,
#providersList td.actions button.ghost {
  min-width: 82px !important;
}

/* Sécurité : aucun saut forcé dans Actions */
#expeditionList td.actions br,
#recyclingList td.actions br,
#visiteursList td.actions br,
#visitorsList td.actions br,
#tieList td.actions br,
#prestatairesList td.actions br,
#providersList td.actions br {
  display: none !important;
}

/* Écran réduit : on garde une ligne avec scroll horizontal du tableau */
@media (max-width: 900px) {
  #expeditionList table,
  #recyclingList table,
  #visiteursList table,
  #visitorsList table,
  #tieList table,
  #prestatairesList table,
  #providersList table {
    min-width: 1160px !important;
  }

  #expeditionList th:last-child,
  #expeditionList td.actions,
  #recyclingList th:last-child,
  #recyclingList td.actions,
  #visiteursList th:last-child,
  #visiteursList td.actions,
  #visitorsList th:last-child,
  #visitorsList td.actions,
  #tieList th:last-child,
  #tieList td.actions,
  #prestatairesList th:last-child,
  #prestatairesList td.actions,
  #providersList th:last-child,
  #providersList td.actions {
    min-width: 270px !important;
    width: 270px !important;
  }

  #expeditionList td.actions button,
  #expeditionList td.actions .pill,
  #recyclingList td.actions button,
  #recyclingList td.actions .pill,
  #visiteursList td.actions button,
  #visiteursList td.actions .pill,
  #visitorsList td.actions button,
  #visitorsList td.actions .pill,
  #tieList td.actions button,
  #tieList td.actions .pill,
  #prestatairesList td.actions button,
  #prestatairesList td.actions .pill,
  #providersList td.actions button,
  #providersList td.actions .pill {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 11px !important;
  }

  #expeditionList td.actions button:first-child,
  #expeditionList td.actions .pill:first-child,
  #recyclingList td.actions button:first-child,
  #recyclingList td.actions .pill:first-child,
  #visiteursList td.actions button:first-child,
  #visiteursList td.actions .pill:first-child,
  #visitorsList td.actions button:first-child,
  #visitorsList td.actions .pill:first-child,
  #tieList td.actions button:first-child,
  #tieList td.actions .pill:first-child,
  #prestatairesList td.actions button:first-child,
  #prestatairesList td.actions .pill:first-child,
  #providersList td.actions button:first-child,
  #providersList td.actions .pill:first-child {
    min-width: 70px !important;
  }

  #expeditionList td.actions button:nth-child(2),
  #expeditionList td.actions .pill:nth-child(2),
  #recyclingList td.actions button:nth-child(2),
  #recyclingList td.actions .pill:nth-child(2),
  #visiteursList td.actions button:nth-child(2),
  #visiteursList td.actions .pill:nth-child(2),
  #visitorsList td.actions button:nth-child(2),
  #visitorsList td.actions .pill:nth-child(2),
  #tieList td.actions button:nth-child(2),
  #tieList td.actions .pill:nth-child(2),
  #prestatairesList td.actions button:nth-child(2),
  #prestatairesList td.actions .pill:nth-child(2),
  #providersList td.actions button:nth-child(2),
  #providersList td.actions .pill:nth-child(2) {
    min-width: 76px !important;
  }

  #expeditionList td.actions button:nth-child(3),
  #expeditionList td.actions .pill:nth-child(3),
  #recyclingList td.actions button:nth-child(3),
  #recyclingList td.actions .pill:nth-child(3),
  #visiteursList td.actions button:nth-child(3),
  #visiteursList td.actions .pill:nth-child(3),
  #visitorsList td.actions button:nth-child(3),
  #visitorsList td.actions .pill:nth-child(3),
  #tieList td.actions button:nth-child(3),
  #tieList td.actions .pill:nth-child(3),
  #prestatairesList td.actions button:nth-child(3),
  #prestatairesList td.actions .pill:nth-child(3),
  #providersList td.actions button:nth-child(3),
  #providersList td.actions .pill:nth-child(3) {
    min-width: 84px !important;
  }
}

/* ==========================================================
   PRESTATAIRES — CASE À COCHER PRÉSENT COMPACTE
   ========================================================== */

/*
  Objectif :
  - corriger la case à cocher énorme dans le calendrier RDV PRESTATAIRES ;
  - la rendre proportionnelle, centrée et propre ;
  - ne pas modifier les champs texte ni les autres formulaires.
*/

#prestatairesAppointments td:nth-child(4),
#prestatairesAppointments th:nth-child(4) {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

#prestatairesAppointments td:nth-child(4) {
  padding: 10px !important;
}

#prestatairesAppointments td:nth-child(4) input[type="checkbox"],
#prestatairesAppointments input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  display: inline-block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  accent-color: #e6c75f !important;
  box-shadow: none !important;
}

#prestatairesAppointments td:nth-child(4) input[type="checkbox"]:focus,
#prestatairesAppointments input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(226, 191, 86, .18) !important;
  outline: none !important;
}

/* Sécurité si le navigateur applique les styles input globaux */
#prestatairesAppointments input[type="checkbox"]::before,
#prestatairesAppointments input[type="checkbox"]::after {
  display: none !important;
}

/* Mobile : case légèrement plus grande pour rester utilisable au doigt */
@media (max-width: 760px) {
  #prestatairesAppointments td:nth-child(4) input[type="checkbox"],
  #prestatairesAppointments input[type="checkbox"] {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
}

/* ==========================================================
   SAV NF — STRUCTURE ENTRÉES / SORTIES / REGISTRE
   ========================================================== */

/* Titre SAV NF centré, sans sous-titre */
#savnf .savnf-main-title-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 6px 0 24px !important;
  text-align: center !important;
}

#savnf .savnf-main-title {
  margin: 0 !important;
  color: var(--gold-light) !important;
  font-size: clamp(36px, 4vw, 58px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Cartes principales */
#savnf .savnf-card {
  background: #151518 !important;
  border: 1px solid #34363d !important;
  border-radius: 22px !important;
  padding: 22px 24px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22) !important;
  overflow: hidden !important;
}

#savnf .savnf-card-title {
  margin: 0 0 18px !important;
  color: var(--gold-light) !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

#savnf .savnf-subsection-title {
  margin: 0 0 14px !important;
  color: var(--gold-light) !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}

/* Séparateurs horizontaux demandés */
#savnf .savnf-horizontal-separator {
  width: 100% !important;
  height: 1px !important;
  margin: 22px 0 !important;
  background: linear-gradient(90deg, transparent, rgba(237, 215, 122, .55), transparent) !important;
}

/* Carte ENTRÉES : 3/4 RDV + 1/4 SANS RDV */
#savnf .savnf-entrees-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) 1px minmax(210px, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#savnf .savnf-entrees-rdv,
#savnf .savnf-entrees-sans-rdv {
  min-width: 0 !important;
}

#savnf .savnf-entrees-separator {
  width: 1px !important;
  min-height: 100% !important;
  background: linear-gradient(180deg, transparent, rgba(237, 215, 122, .55), transparent) !important;
}

/* Partie SANS RDV */
#savnf .savnf-entrees-sans-rdv {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 14px !important;
}

#savnf .savnf-sans-rdv-note {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#savnf .savnf-new-entry-button {
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Calendrier dans la zone 3/4 */
#savnf #savnfCalendar {
  width: 100% !important;
  overflow-x: auto !important;
}

#savnf .savnf-panel-month-title {
  text-align: center !important;
  margin: 0 0 12px !important;
  color: var(--gold-light) !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

#savnf .savnf-calendar-bottom-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

#savnf .savnf-calendar-bottom-actions button {
  min-height: 48px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* Carte SORTIES pleine largeur */
#savnf .savnf-card-sorties {
  width: 100% !important;
}

#savnf .savnf-sorties-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

#savnf .savnf-sorties-head .savnf-subsection-title,
#savnf .savnf-sorties-head p {
  margin: 0 !important;
}

/* Badges non rendus : pleine largeur, lecture rapide */
#savnf #savnfOpenBadgesBox {
  width: 100% !important;
}

#savnf .savnf-badge-list,
#savnf .savnf-badge-list-compact {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

#savnf .savnf-badge-card,
#savnf .savnf-badge-card-compact {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 60px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
}

#savnf .savnf-badge-compact-main {
  display: grid !important;
  grid-template-columns: minmax(86px, .28fr) minmax(135px, .38fr) minmax(260px, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
}

#savnf .savnf-badge-compact-details {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(130px, .34fr) minmax(135px, auto) !important;
  gap: 12px !important;
  align-items: center !important;
}

#savnf .savnf-badge-number {
  font-size: 16px !important;
  font-weight: 950 !important;
  color: var(--gold-light) !important;
  white-space: nowrap !important;
}

#savnf .savnf-badge-date {
  font-size: 12px !important;
  color: #cfe1ff !important;
  white-space: nowrap !important;
}

#savnf .savnf-badge-transporteur,
#savnf .savnf-badge-chauffeur,
#savnf .savnf-badge-phone {
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#savnf .savnf-badge-return-check {
  justify-self: end !important;
  min-width: 128px !important;
  max-width: 140px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
}

/* Registre */
#savnf .savnf-register-block {
  width: 100% !important;
}

/* Anciennes structures masquées si elles restent dans le DOM */
#savnf .savnf-two-zone,
#savnf .savnf-three-zone,
#savnf .savnf-zone-contacts,
#savnfContactsBox {
  display: none !important;
}

/* Responsive */
@media (max-width: 1280px) {
  #savnf .savnf-entrees-grid {
    grid-template-columns: 1fr !important;
  }

  #savnf .savnf-entrees-separator {
    width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(237, 215, 122, .55), transparent) !important;
  }

  #savnf .savnf-entrees-sans-rdv {
    justify-content: flex-start !important;
  }

  #savnf .savnf-new-entry-button {
    max-width: 280px !important;
  }
}

@media (max-width: 760px) {
  #savnf .savnf-card {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }

  #savnf .savnf-calendar-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #savnf .savnf-sorties-head {
    display: block !important;
  }

  #savnf .savnf-badge-compact-main,
  #savnf .savnf-badge-compact-details {
    grid-template-columns: 1fr !important;
  }

  #savnf .savnf-badge-return-check {
    justify-self: start !important;
  }
}

/* ==========================================================
   SAV NF — CARTES BADGES NON RENDUS SUR UNE SEULE LIGNE
   ========================================================== */

/*
  Objectif :
  - chaque badge non rendu = une seule ligne ;
  - les éléments ne se placent plus sur deux rangées ;
  - carte compacte pour lecture rapide.
*/

#savnf #savnfOpenBadgesBox {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

#savnf .savnf-badge-list-one-line {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 1040px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

#savnf .savnf-badge-card-one-line {
  display: grid !important;
  grid-template-columns:
    minmax(86px, .42fr)
    minmax(150px, .62fr)
    minmax(180px, .75fr)
    minmax(260px, 1.05fr)
    minmax(130px, .50fr)
    minmax(138px, auto) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  height: auto !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  border: 1px solid #34363d !important;
  background: #101012 !important;
  overflow: hidden !important;
}

/* Neutralise les anciennes règles 2 lignes sur ces cartes */
#savnf .savnf-badge-card-one-line .savnf-badge-compact-main,
#savnf .savnf-badge-card-one-line .savnf-badge-compact-details {
  display: contents !important;
}

#savnf .savnf-one-line-badge,
#savnf .savnf-one-line-remise,
#savnf .savnf-one-line-transporteur,
#savnf .savnf-one-line-chauffeur,
#savnf .savnf-one-line-phone {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
}

#savnf .savnf-one-line-badge {
  color: var(--gold-light) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

#savnf .savnf-one-line-remise {
  color: #cfe1ff !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

#savnf .savnf-one-line-transporteur,
#savnf .savnf-one-line-chauffeur,
#savnf .savnf-one-line-phone {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#savnf .savnf-one-line-phone {
  color: #dbeafe !important;
}

#savnf .savnf-one-line-return {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#savnf .savnf-one-line-return input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}

#savnf .savnf-one-line-return span {
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Mobile / écrans étroits : la carte garde une seule ligne, le conteneur scrolle */
@media (max-width: 900px) {
  #savnf .savnf-badge-list-one-line {
    min-width: 980px !important;
  }

  #savnf .savnf-badge-card-one-line {
    grid-template-columns:
      minmax(78px, .38fr)
      minmax(135px, .55fr)
      minmax(160px, .68fr)
      minmax(220px, 1fr)
      minmax(118px, .45fr)
      minmax(126px, auto) !important;
    gap: 9px !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
  }

  #savnf .savnf-one-line-badge {
    font-size: 15px !important;
  }

  #savnf .savnf-one-line-remise {
    font-size: 11px !important;
  }

  #savnf .savnf-one-line-transporteur,
  #savnf .savnf-one-line-chauffeur,
  #savnf .savnf-one-line-phone {
    font-size: 12px !important;
  }

  #savnf .savnf-one-line-return {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================
   SAV NF — TITRES / COULEUR / REGISTRE DÉROULANT PAGINÉ
   ========================================================== */

/* Couleur demandée pour le titre principal SAV NF */
#savnf .savnf-main-title,
#savnf h2.savnf-main-title {
  color: #f6b26b !important;
}

/* Couleur demandée pour le titre de l'onglet SAV NF dans la barre d'onglets */
.tabs button.savnf-tab-button,
.tabs button[data-tab-name="savnf"],
.tabs button:nth-child(3) {
  color: #f6b26b !important;
}

.tabs button.savnf-tab-button.active-tab,
.tabs button[data-tab-name="savnf"].active-tab,
.tabs button:nth-child(3).active-tab {
  color: #f6b26b !important;
  text-shadow: 1px 1px 0 #000 !important;
}

/* Titres des cartes demandés centrés */
#savnf .savnf-centered-card-title,
#savnf .savnf-card-entrees > .savnf-card-title,
#savnf .savnf-card-sorties > .savnf-card-title,
#savnf .savnf-register-title {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}

/* En-tête registre avec flèche à droite et titre centré */
#savnf .savnf-register-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  margin-bottom: 0 !important;
}

#savnf .savnf-register-header .savnf-card-title {
  margin: 0 !important;
  padding: 0 70px !important;
}

/* Bouton flèche déroulant */
#savnf .savnf-register-toggle {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Registre masqué par défaut */
#savnf .savnf-register-content.is-closed,
#savnf .savnf-register-content[hidden] {
  display: none !important;
}

#savnf .savnf-register-content.is-open {
  display: block !important;
  margin-top: 18px !important;
}

/* Pagination registre SAV NF */
#savnf .savnf-register-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 16px 0 4px !important;
  color: #dbeafe !important;
  font-weight: 850 !important;
}

#savnf .savnf-register-pagination button {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#savnf .savnf-register-pagination button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* La carte registre reste compacte quand elle est fermée */
#savnf .savnf-register-block {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

#savnf .savnf-register-block:has(.savnf-register-content.is-open) {
  padding-bottom: 22px !important;
}

/* Mobile */
@media (max-width: 760px) {
  #savnf .savnf-register-header .savnf-card-title {
    padding: 0 58px !important;
    font-size: 20px !important;
  }

  #savnf .savnf-register-toggle {
    width: 46px !important;
    min-width: 46px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 26px !important;
  }

  #savnf .savnf-register-pagination {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ==========================================================
   SAV NF — TITRES ENCADRÉS PLEINE LARGEUR + BOUTON DÉROULÉ PREMIUM
   ========================================================== */

/*
  Titres demandés :
  - ENTRÉES
  - SORTIES
  - REGISTRE SAV NF

  Objectif :
  - titre centré ;
  - encadré sur toute la largeur de la carte ;
  - rendu premium cohérent avec le thème noir/or/cuivre.
*/

#savnf .savnf-card > .savnf-centered-card-title,
#savnf .savnf-card-entrees > .savnf-card-title,
#savnf .savnf-card-sorties > .savnf-card-title,
#savnf .savnf-register-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 0 22px !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  color: #f6b26b !important;
  background:
    linear-gradient(180deg, rgba(246, 178, 107, .15) 0%, rgba(246, 178, 107, .045) 100%),
    #111114 !important;
  border: 1px solid rgba(246, 178, 107, .55) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 10px 26px rgba(0, 0, 0, .22) !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
}

/* Variante registre : place pour le bouton flèche à droite sans casser le centrage */
#savnf .savnf-register-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 0 0 !important;
}

#savnf .savnf-register-header .savnf-register-title,
#savnf .savnf-register-header .savnf-card-title {
  margin: 0 !important;
  padding-right: 78px !important;
  padding-left: 78px !important;
}

/* Bouton de déroulé : harmonisé, discret, premium */
#savnf .savnf-register-toggle,
#savnf .savnf-register-toggle-pretty {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(246, 178, 107, .60) !important;
  background:
    linear-gradient(180deg, rgba(246, 178, 107, .25) 0%, rgba(246, 178, 107, .10) 100%),
    #202127 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 8px 20px rgba(0, 0, 0, .25) !important;
  cursor: pointer !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}

#savnf .savnf-register-toggle:hover,
#savnf .savnf-register-toggle-pretty:hover {
  border-color: rgba(246, 178, 107, .95) !important;
  background:
    linear-gradient(180deg, rgba(246, 178, 107, .34) 0%, rgba(246, 178, 107, .14) 100%),
    #24262d !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 10px 24px rgba(0, 0, 0, .30),
    0 0 0 3px rgba(246, 178, 107, .10) !important;
}

#savnf .savnf-register-toggle:active,
#savnf .savnf-register-toggle-pretty:active {
  transform: translateY(-50%) scale(.97) !important;
}

/* Chevron CSS propre, pas de caractère texte moche */
#savnf .savnf-toggle-chevron,
#savnf .savnf-register-toggle::before {
  content: "" !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-right: 3px solid #f6b26b !important;
  border-bottom: 3px solid #f6b26b !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transform-origin: center !important;
  transition: transform .18s ease !important;
}

/* Quand le registre est ouvert : chevron vers le haut */
#savnf .savnf-register-toggle[aria-expanded="true"] .savnf-toggle-chevron,
#savnf .savnf-register-toggle[aria-expanded="true"]::before {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

/* Ancien caractère éventuel neutralisé */
#savnf .savnf-register-toggle {
  text-indent: 0 !important;
  overflow: hidden !important;
}

/* Registre fermé : carte compacte et propre */
#savnf .savnf-register-content.is-closed,
#savnf .savnf-register-content[hidden] {
  display: none !important;
}

#savnf .savnf-register-block {
  padding-top: 18px !important;
}

#savnf .savnf-register-block .savnf-register-header + .savnf-register-content.is-open {
  margin-top: 18px !important;
}

/* Mobile */
@media (max-width: 760px) {
  #savnf .savnf-card > .savnf-centered-card-title,
  #savnf .savnf-card-entrees > .savnf-card-title,
  #savnf .savnf-card-sorties > .savnf-card-title,
  #savnf .savnf-register-title {
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 18px !important;
    border-radius: 14px !important;
  }

  #savnf .savnf-register-header .savnf-register-title,
  #savnf .savnf-register-header .savnf-card-title {
    padding-right: 60px !important;
    padding-left: 14px !important;
  }

  #savnf .savnf-register-toggle,
  #savnf .savnf-register-toggle-pretty {
    right: 8px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 12px !important;
  }

  #savnf .savnf-toggle-chevron,
  #savnf .savnf-register-toggle::before {
    width: 9px !important;
    height: 9px !important;
    border-right-width: 2px !important;
    border-bottom-width: 2px !important;
  }
}

/* ==========================================================
   SAV NF — RDV / SANS RDV ALIGNÉS + SÉPARATEURS RENFORCÉS
   ========================================================== */

/*
  Objectifs :
  - RDV et SANS RDV sur la même ligne visuelle ;
  - titres mieux mis en valeur ;
  - séparateurs verticaux et horizontaux plus prononcés.
*/

/* La partie SANS RDV ne doit plus être centrée verticalement :
   son titre doit s'aligner avec RDV. */
#savnf .savnf-entrees-rdv,
#savnf .savnf-entrees-sans-rdv {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

/* Titres RDV / SANS RDV : même hauteur, même ligne, mise en valeur */
#savnf .savnf-entrees-rdv > .savnf-subsection-title,
#savnf .savnf-entrees-sans-rdv > .savnf-subsection-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  color: #f6b26b !important;
  background:
    linear-gradient(180deg, rgba(246, 178, 107, .18) 0%, rgba(246, 178, 107, .055) 100%),
    #111114 !important;
  border: 1px solid rgba(246, 178, 107, .64) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    0 8px 18px rgba(0, 0, 0, .20) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* Grille Entrées : alignement haut strict pour que les titres soient à niveau */
#savnf .savnf-entrees-grid {
  align-items: stretch !important;
}

#savnf .savnf-entrees-grid > * {
  align-self: stretch !important;
}

/* Séparateur vertical RDV / SANS RDV plus visible */
#savnf .savnf-entrees-separator {
  width: 3px !important;
  min-width: 3px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(246, 178, 107, .28) 10%,
      rgba(246, 178, 107, .92) 50%,
      rgba(246, 178, 107, .28) 90%,
      transparent 100%
    ) !important;
  box-shadow:
    0 0 0 1px rgba(246, 178, 107, .22),
    0 0 18px rgba(246, 178, 107, .28) !important;
}

/* Séparateurs horizontaux Entrées / Sorties / Registre plus prononcés */
#savnf .savnf-horizontal-separator {
  height: 3px !important;
  margin: 26px 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(246, 178, 107, .22) 12%,
      rgba(246, 178, 107, .95) 50%,
      rgba(246, 178, 107, .22) 88%,
      transparent 100%
    ) !important;
  box-shadow:
    0 0 0 1px rgba(246, 178, 107, .14),
    0 0 20px rgba(246, 178, 107, .20) !important;
}

/* La carte ENTRÉES garde une lecture propre avec les titres en haut */
#savnf .savnf-card-entrees {
  overflow: hidden !important;
}

/* Partie SANS RDV : bouton mieux intégré sous son titre */
#savnf .savnf-entrees-sans-rdv .savnf-sans-rdv-note {
  margin: 0 0 14px !important;
}

#savnf .savnf-entrees-sans-rdv .savnf-new-entry-button {
  margin-top: 4px !important;
}

/* Responsive : quand les blocs passent l'un sous l'autre,
   le séparateur vertical devient horizontal, plus visible aussi. */
@media (max-width: 1280px) {
  #savnf .savnf-entrees-separator {
    width: 100% !important;
    min-width: 100% !important;
    height: 3px !important;
    min-height: 3px !important;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(246, 178, 107, .28) 10%,
        rgba(246, 178, 107, .92) 50%,
        rgba(246, 178, 107, .28) 90%,
        transparent 100%
      ) !important;
  }
}

@media (max-width: 760px) {
  #savnf .savnf-entrees-rdv > .savnf-subsection-title,
  #savnf .savnf-entrees-sans-rdv > .savnf-subsection-title {
    min-height: 42px !important;
    font-size: 15px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
  }

  #savnf .savnf-horizontal-separator {
    margin: 20px 0 !important;
  }
}

/* ==========================================================
   SAV NF — HARMONISATION TITRES ET ENCADRÉS
   ========================================================== */

/*
  Objectifs :
  - harmoniser la palette visuelle des titres et encadrés SAV NF ;
  - différencier clairement ENTRÉES / SORTIES / REGISTRE SAV NF
    des sous-titres RDV / SANS RDV ;
  - conserver une lecture premium, plus agréable à l’œil.
*/

/* Titre principal SAV NF : teinte cuivre douce, moins agressive */
#savnf .savnf-main-title,
#savnf h2.savnf-main-title,
#savnf > h2,
#savnf .tab-title {
  color: #f6b26b !important;
  text-shadow: 0 2px 14px rgba(246, 178, 107, .10) !important;
}

/* Cartes SAV NF : encadrés harmonisés, sobres et cohérents */
#savnf .savnf-card,
#savnf .savnf-card-entrees,
#savnf .savnf-card-sorties,
#savnf .savnf-register-block {
  border: 1px solid rgba(246, 178, 107, .16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 18px 36px rgba(0, 0, 0, .22) !important;
}

/* Titres de niveau 1 : ENTRÉES / SORTIES / REGISTRE SAV NF
   -> plus structurants, plus encadrés, plus marqués */
#savnf .savnf-card > .savnf-centered-card-title,
#savnf .savnf-card-entrees > .savnf-card-title,
#savnf .savnf-card-sorties > .savnf-card-title,
#savnf .savnf-register-title,
#savnf .savnf-register-header .savnf-register-title,
#savnf .savnf-register-header .savnf-card-title {
  color: #f6b26b !important;
  background:
    linear-gradient(180deg, rgba(246, 178, 107, .20) 0%, rgba(246, 178, 107, .07) 100%),
    #17181d !important;
  border: 1px solid rgba(246, 178, 107, .52) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(246, 178, 107, .12),
    0 10px 28px rgba(0,0,0,.22) !important;
  text-transform: uppercase !important;
  letter-spacing: .085em !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

/* Sous-titres de niveau 2 : RDV / SANS RDV
   -> volontairement différents, plus fins, plus discrets */
#savnf .savnf-entrees-rdv > .savnf-subsection-title,
#savnf .savnf-entrees-sans-rdv > .savnf-subsection-title {
  color: #ffe7c4 !important;
  background:
    linear-gradient(180deg, rgba(255, 227, 184, .06) 0%, rgba(246, 178, 107, .025) 100%),
    #121318 !important;
  border: 1px solid rgba(246, 178, 107, .34) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 6px 16px rgba(0,0,0,.16) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

/* Légère différenciation supplémentaire par un liseré haut subtil */
#savnf .savnf-entrees-rdv > .savnf-subsection-title::before,
#savnf .savnf-entrees-sans-rdv > .savnf-subsection-title::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(246,178,107,.55) 50%, transparent 100%);
  pointer-events: none;
}
#savnf .savnf-entrees-rdv > .savnf-subsection-title,
#savnf .savnf-entrees-sans-rdv > .savnf-subsection-title {
  position: relative !important;
}

/* Séparateurs plus lisibles mais plus élégants */
#savnf .savnf-entrees-separator {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(246, 178, 107, .18) 8%,
      rgba(246, 178, 107, .72) 50%,
      rgba(246, 178, 107, .18) 92%,
      transparent 100%) !important;
  box-shadow:
    0 0 0 1px rgba(246, 178, 107, .14),
    0 0 14px rgba(246, 178, 107, .12) !important;
}

#savnf .savnf-horizontal-separator {
  height: 4px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(246, 178, 107, .18) 10%,
      rgba(246, 178, 107, .82) 50%,
      rgba(246, 178, 107, .18) 90%,
      transparent 100%) !important;
  box-shadow:
    0 0 0 1px rgba(246, 178, 107, .10),
    0 0 16px rgba(246, 178, 107, .10) !important;
}

/* Mobile */
@media (max-width: 760px) {
  #savnf .savnf-card > .savnf-centered-card-title,
  #savnf .savnf-card-entrees > .savnf-card-title,
  #savnf .savnf-card-sorties > .savnf-card-title,
  #savnf .savnf-register-title,
  #savnf .savnf-register-header .savnf-register-title,
  #savnf .savnf-register-header .savnf-card-title {
    font-size: 18px !important;
    letter-spacing: .06em !important;
  }

  #savnf .savnf-entrees-rdv > .savnf-subsection-title,
  #savnf .savnf-entrees-sans-rdv > .savnf-subsection-title {
    font-size: 14px !important;
    letter-spacing: .10em !important;
  }
}

/* ==========================================================
   CALENDRIER RECYCLAGE — STRICTEMENT MÊME TAILLE QUE SAV NF
   ========================================================== */

#recyclage #recyclingCalendar {
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
}

/* Mois : même taille/position que SAV NF, accent vert */
#recyclage .recycling-month-title,
#recyclage #recyclingCalendarMonthLabel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 6px 0 12px !important;
  color: #93c47d !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Grille : dimensions SAV NF */
#recyclage .recycling-month-grid {
  display: grid !important;
  grid-template-columns: 52px repeat(7, minmax(34px, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid #1a1a1c !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #111114 !important;
}

/* En-têtes : mêmes couleurs que SAV NF */
#recyclage .recycling-month-head {
  min-height: 34px !important;
  padding: 8px 3px !important;
  background: linear-gradient(180deg, #edd77a 0%, #d5b45b 100%) !important;
  color: #050505 !important;
  border: 1px solid #1a1a1c !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* Jours et semaines : mêmes fonds et hauteurs que SAV NF */
#recyclage .recycling-week-cell,
#recyclage .recycling-month-cell {
  min-height: 48px !important;
  height: 48px !important;
  background: #f4f4f4 !important;
  color: #030303 !important;
  border: 1px solid #1a1a1c !important;
  border-radius: 0 !important;
  padding: 3px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  font-weight: 950 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  outline: none !important;
}

#recyclage .recycling-week-cell {
  background: #eeeeee !important;
  display: grid !important;
  place-items: center !important;
}

/* Jours hors mois : même gris que SAV NF */
#recyclage .recycling-month-cell.outside-month {
  background: #d3d3d3 !important;
  color: #030303 !important;
  cursor: default !important;
}

/* Aujourd'hui : couleur Recyclage mais taille SAV NF */
#recyclage .recycling-month-cell.today,
#recyclage .recycling-month-cell.is-today,
#recyclage .recycling-month-cell.current-day {
  background: #6caf51 !important;
  color: #ffffff !important;
}

#recyclage .recycling-date-number {
  display: block !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: inherit !important;
  text-align: center !important;
  margin-top: 0 !important;
}

/* Hover discret noir comme SAV NF */
#recyclage .recycling-month-cell:hover,
#recyclage .recycling-week-cell:hover {
  outline: 3px solid #1a1a1c !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}

/* Repères RDV : mêmes dimensions que SAV NF */
#recyclage .recycling-rdv-marker {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 12px solid #d5a100 !important;
  border-left: 12px solid transparent !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

#recyclage .recycling-rdv-count {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  background: #111114 !important;
  color: #f4df8b !important;
  border-radius: 999px !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* Boutons sous calendrier : identiques à SAV NF */
#recyclage .recycling-calendar-bottom-actions,
#recyclage .recycling-month-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

#recyclage .recycling-calendar-bottom-actions button,
#recyclage .recycling-month-actions button {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Couleurs boutons sous calendrier exactement type SAV NF */
#recyclage .recycling-calendar-bottom-actions button.ghost,
#recyclage .recycling-month-actions button.ghost {
  background: #24252b !important;
  color: #ffffff !important;
  border-color: #34363d !important;
}

#recyclage .recycling-calendar-bottom-actions button:not(.ghost),
#recyclage .recycling-month-actions button:not(.ghost) {
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
}

/* Bouton Nouvelle entrée : même couleur que SAV NF */
#recyclage .recycling-new-entry-button {
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
}

/* Note Sans RDV */
#recyclage .recycling-sans-rdv-note {
  margin: 0 0 16px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* ==========================================================
   SORTIES — TITRE BADGES SANS ENCADRÉ, À GAUCHE
   ========================================================== */

#recyclage .recycling-sorties-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

#recyclage .recycling-sorties-head .recycling-subsection-title {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #93c47d !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

#recyclage .recycling-sorties-head .recycling-subsection-title::before {
  display: none !important;
}

#recyclage .recycling-sorties-head p {
  margin: 0 !important;
  text-align: right !important;
}

/* Badges non rendus */
#recyclage #recyclingOpenBadgesBox {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

#recyclage .recycling-badge-list-one-line {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 1040px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

#recyclage .recycling-badge-card-one-line {
  display: grid !important;
  grid-template-columns:
    minmax(86px, .38fr)
    minmax(150px, .58fr)
    minmax(170px, .66fr)
    minmax(210px, .82fr)
    minmax(220px, 1fr)
    minmax(130px, .46fr)
    minmax(138px, auto) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  border: 1px solid #34363d !important;
  background: #101012 !important;
  overflow: hidden !important;
}

#recyclage .recycling-one-line-badge,
#recyclage .recycling-one-line-remise,
#recyclage .recycling-one-line-transporteur,
#recyclage .recycling-one-line-motif,
#recyclage .recycling-one-line-chauffeur,
#recyclage .recycling-one-line-phone {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}

#recyclage .recycling-one-line-badge {
  color: #93c47d !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

#recyclage .recycling-one-line-remise,
#recyclage .recycling-one-line-phone {
  color: #dbeafe !important;
  font-size: 12px !important;
}

#recyclage .recycling-one-line-return {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  background: rgba(22, 163, 74, .14) !important;
  border: 1px solid rgba(147, 196, 125, .65) !important;
  color: #dff2d6 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#recyclage .recycling-one-line-return input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  margin: 0 !important;
  accent-color: #93c47d !important;
}

/* ==========================================================
   REGISTRE RECYCLAGE — DÉROULÉ + ACTIONS SUR UNE LIGNE
   ========================================================== */

#recyclage .recycling-register-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 58px !important;
}

#recyclage .recycling-register-header .recycling-card-title {
  margin: 0 !important;
  padding-right: 78px !important;
  padding-left: 78px !important;
}

#recyclage .recycling-register-content.is-closed,
#recyclage .recycling-register-content[hidden] {
  display: none !important;
}

#recyclage .recycling-register-content.is-open {
  display: block !important;
  margin-top: 18px !important;
}

#recyclage .recycling-register-toggle,
#recyclage .recycling-register-toggle-pretty {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(147, 196, 125, .65) !important;
  background:
    linear-gradient(180deg, rgba(147, 196, 125, .25) 0%, rgba(147, 196, 125, .10) 100%),
    #202127 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

#recyclage .recycling-toggle-chevron,
#recyclage .recycling-register-toggle::before {
  content: "" !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-right: 3px solid #93c47d !important;
  border-bottom: 3px solid #93c47d !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transform-origin: center !important;
  transition: transform .18s ease !important;
}

#recyclage .recycling-register-toggle[aria-expanded="true"] .recycling-toggle-chevron,
#recyclage .recycling-register-toggle[aria-expanded="true"]::before {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

/* Pagination registre */
#recyclage .recycling-register-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 16px 0 4px !important;
  color: #dff2d6 !important;
  font-weight: 850 !important;
}

#recyclage .recycling-register-pagination button {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#recyclage .recycling-register-pagination button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* Actions du registre Recyclage sur une seule ligne */
#recyclage #recyclageList table,
#recyclage #recyclingList table,
#recyclageList table,
#recyclingList table {
  table-layout: auto !important;
}

#recyclage #recyclageList th:last-child,
#recyclage #recyclageList td.actions,
#recyclage #recyclingList th:last-child,
#recyclage #recyclingList td.actions,
#recyclageList th:last-child,
#recyclageList td.actions,
#recyclingList th:last-child,
#recyclingList td.actions {
  min-width: 290px !important;
  width: 290px !important;
}

#recyclage #recyclageList td.actions,
#recyclage #recyclingList td.actions,
#recyclageList td.actions,
#recyclingList td.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

#recyclage #recyclageList td.actions button,
#recyclage #recyclageList td.actions .pill,
#recyclage #recyclingList td.actions button,
#recyclage #recyclingList td.actions .pill,
#recyclageList td.actions button,
#recyclageList td.actions .pill,
#recyclingList td.actions button,
#recyclingList td.actions .pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#recyclage #recyclageList td.actions .danger,
#recyclage #recyclageList td.actions button.danger,
#recyclage #recyclingList td.actions .danger,
#recyclage #recyclingList td.actions button.danger,
#recyclageList td.actions .danger,
#recyclageList td.actions button.danger,
#recyclingList td.actions .danger,
#recyclingList td.actions button.danger {
  min-width: 92px !important;
}

#recyclage #recyclageList td.actions .ghost,
#recyclage #recyclageList td.actions button.ghost,
#recyclage #recyclingList td.actions .ghost,
#recyclage #recyclingList td.actions button.ghost,
#recyclageList td.actions .ghost,
#recyclageList td.actions button.ghost,
#recyclingList td.actions .ghost,
#recyclingList td.actions button.ghost {
  min-width: 82px !important;
}

#recyclage #recyclageList td.actions .pill.green,
#recyclage #recyclingList td.actions .pill.green,
#recyclageList td.actions .pill.green,
#recyclingList td.actions .pill.green {
  min-width: 76px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

#recyclage #recyclageList td.actions br,
#recyclage #recyclingList td.actions br,
#recyclageList td.actions br,
#recyclingList td.actions br {
  display: none !important;
}

/* Responsive */
@media (max-width: 1280px) {
  #recyclage .recycling-entrees-grid {
    grid-template-columns: 1fr !important;
  }

  #recyclage .recycling-entrees-separator {
    width: 100% !important;
    min-width: 100% !important;
    height: 3px !important;
    min-height: 3px !important;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(147, 196, 125, .18) 8%,
        rgba(147, 196, 125, .70) 50%,
        rgba(147, 196, 125, .18) 92%,
        transparent 100%) !important;
  }
}

@media (max-width: 760px) {
  #recyclage .recycling-card {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }

  #recyclage .recycling-card-title,
  #recyclage .recycling-centered-card-title,
  #recyclage .recycling-register-title {
    min-height: 48px !important;
    font-size: 18px !important;
    letter-spacing: .06em !important;
    border-radius: 14px !important;
  }

  #recyclage .recycling-entrees-rdv > .recycling-subsection-title,
  #recyclage .recycling-entrees-sans-rdv > .recycling-subsection-title {
    min-height: 42px !important;
    font-size: 14px !important;
    letter-spacing: .10em !important;
  }

  #recyclage .recycling-month-grid {
    grid-template-columns: 52px repeat(7, minmax(34px, 1fr)) !important;
  }

  #recyclage .recycling-calendar-bottom-actions,
  #recyclage .recycling-month-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  #recyclage .recycling-sorties-head {
    display: block !important;
  }

  #recyclage .recycling-sorties-head p {
    text-align: left !important;
    margin-top: 6px !important;
  }

  #recyclage .recycling-register-header .recycling-card-title {
    padding-right: 60px !important;
    padding-left: 14px !important;
  }

  #recyclage .recycling-register-toggle,
  #recyclage .recycling-register-toggle-pretty {
    right: 8px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  #recyclage .recycling-register-pagination {
    flex-direction: column !important;
    gap: 8px !important;
  }

  #recyclage #recyclageList table,
  #recyclage #recyclingList table,
  #recyclageList table,
  #recyclingList table {
    min-width: 1160px !important;
  }
}

/* ==========================================================
   RECYCLAGE — ALIGNEMENT FINAL SUR SAV NF
   Couleur module : #93c47d
   ========================================================== */

/*
  Version propre :
  - titre RECYCLAGE centré ;
  - calendrier même hauteur et mêmes fonds que SAV NF ;
  - boutons sous calendrier sur une seule ligne, pleine largeur ;
  - bouton Nouvelle entrée doré comme SAV NF ;
  - titre BADGES RECYCLAGE NON RENDUS sans encadré et à gauche ;
  - bouton de déroulé du registre identique à SAV NF, accent vert ;
  - actions du registre Recyclage sur une seule ligne.
*/

#recyclage,
#recycling {
  --recycling-accent: #93c47d;
  --recycling-accent-light: #dff2d6;
  --recycling-accent-dark: #6aa84f;
}

/* Titre principal RECYCLAGE parfaitement centré */
#recyclage .recycling-main-title-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin: 8px auto 26px !important;
}

#recyclage .recycling-main-title,
#recyclage h2.recycling-main-title {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  color: #93c47d !important;
  font-size: clamp(48px, 4vw, 72px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 14px rgba(147, 196, 125, .12) !important;
}

/* Carte principale : même ambiance que SAV NF */
#recyclage .recycling-card {
  background: #151518 !important;
  border: 1px solid #34363d !important;
  border-radius: 22px !important;
  padding: 22px 24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 42px rgba(0,0,0,.22) !important;
  overflow: hidden !important;
}

/* Titres ENTRÉES / SORTIES / REGISTRE */
#recyclage .recycling-card-title,
#recyclage .recycling-centered-card-title,
#recyclage .recycling-register-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 0 22px !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  color: #93c47d !important;
  background:
    linear-gradient(180deg, rgba(147, 196, 125, .16) 0%, rgba(147, 196, 125, .045) 100%),
    #111114 !important;
  border: 1px solid rgba(147, 196, 125, .50) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(147, 196, 125, .10),
    0 10px 28px rgba(0,0,0,.22) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .085em !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

/* Grille Entrées : RDV 3/4 + séparateur + SANS RDV 1/4 */
#recyclage .recycling-entrees-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) 3px minmax(210px, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#recyclage .recycling-entrees-rdv,
#recyclage .recycling-entrees-sans-rdv {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

/* Titres RDV / SANS RDV */
#recyclage .recycling-entrees-rdv > .recycling-subsection-title,
#recyclage .recycling-entrees-sans-rdv > .recycling-subsection-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  color: #dff2d6 !important;
  background:
    linear-gradient(180deg, rgba(147, 196, 125, .08) 0%, rgba(147, 196, 125, .025) 100%),
    #121318 !important;
  border: 1px solid rgba(147, 196, 125, .34) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 6px 16px rgba(0,0,0,.16) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#recyclage .recycling-entrees-rdv > .recycling-subsection-title::before,
#recyclage .recycling-entrees-sans-rdv > .recycling-subsection-title::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  top: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(147,196,125,.55) 50%, transparent 100%) !important;
  pointer-events: none !important;
}

/* Séparateurs */
#recyclage .recycling-entrees-separator {
  width: 3px !important;
  min-width: 3px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(147, 196, 125, .18) 8%,
      rgba(147, 196, 125, .70) 50%,
      rgba(147, 196, 125, .18) 92%,
      transparent 100%) !important;
  box-shadow:
    0 0 0 1px rgba(147, 196, 125, .12),
    0 0 14px rgba(147, 196, 125, .10) !important;
}

#recyclage .recycling-horizontal-separator {
  height: 4px !important;
  margin: 26px 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(147, 196, 125, .18) 10%,
      rgba(147, 196, 125, .78) 50%,
      rgba(147, 196, 125, .18) 90%,
      transparent 100%) !important;
  box-shadow:
    0 0 0 1px rgba(147, 196, 125, .10),
    0 0 16px rgba(147, 196, 125, .10) !important;
}

/* ==========================================================
   CALENDRIER RECYCLAGE — MÊMES DIMENSIONS QUE SAV NF
   ========================================================== */

#recyclage #recyclingCalendar {
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
}

#recyclage .recycling-month-title,
#recyclage #recyclingCalendarMonthLabel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 6px 0 12px !important;
  color: #93c47d !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

#recyclage .recycling-month-grid {
  display: grid !important;
  grid-template-columns: 52px repeat(7, minmax(34px, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid #1a1a1c !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #111114 !important;
}

#recyclage .recycling-month-head {
  min-height: 34px !important;
  padding: 8px 3px !important;
  background: linear-gradient(180deg, #edd77a 0%, #d5b45b 100%) !important;
  color: #050505 !important;
  border: 1px solid #1a1a1c !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* Fond et hauteur des jours strictement comme SAV NF */
#recyclage .recycling-week-cell,
#recyclage .recycling-month-cell {
  min-height: 48px !important;
  height: 48px !important;
  background: #f4f4f4 !important;
  color: #030303 !important;
  border: 1px solid #1a1a1c !important;
  border-radius: 0 !important;
  padding: 3px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  font-weight: 950 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  outline: none !important;
}

#recyclage .recycling-week-cell {
  background: #eeeeee !important;
  display: grid !important;
  place-items: center !important;
}

#recyclage .recycling-month-cell.outside-month {
  background: #d3d3d3 !important;
  color: #030303 !important;
  cursor: default !important;
}

#recyclage .recycling-month-cell.today,
#recyclage .recycling-month-cell.is-today,
#recyclage .recycling-month-cell.current-day {
  background: #6caf51 !important;
  color: #ffffff !important;
}

#recyclage .recycling-date-number {
  display: block !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: inherit !important;
  text-align: center !important;
  margin-top: 0 !important;
}

#recyclage .recycling-month-cell:hover,
#recyclage .recycling-week-cell:hover {
  outline: 3px solid #1a1a1c !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}

#recyclage .recycling-rdv-marker {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 12px solid #d5a100 !important;
  border-left: 12px solid transparent !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

#recyclage .recycling-rdv-count {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  background: #111114 !important;
  color: #f4df8b !important;
  border-radius: 999px !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* Boutons sous calendrier : pleine largeur du calendrier, une seule ligne */
#recyclage .recycling-calendar-bottom-actions,
#recyclage .recycling-month-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

#recyclage .recycling-calendar-bottom-actions button,
#recyclage .recycling-month-actions button {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Couleurs identiques à SAV NF : navigation sombre / actions dorées */
#recyclage .recycling-calendar-bottom-actions button.ghost,
#recyclage .recycling-month-actions button.ghost {
  background: #24252b !important;
  color: #ffffff !important;
  border-color: #34363d !important;
}

#recyclage .recycling-calendar-bottom-actions button:not(.ghost),
#recyclage .recycling-month-actions button:not(.ghost) {
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
}

/* Bouton Nouvelle entrée : même couleur que SAV NF */
#recyclage .recycling-new-entry-button {
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
}

#recyclage .recycling-sans-rdv-note {
  margin: 0 0 16px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* ==========================================================
   SORTIES — BADGES RECYCLAGE NON RENDUS SANS ENCADRÉ
   ========================================================== */

#recyclage .recycling-sorties-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

#recyclage .recycling-sorties-head .recycling-subsection-title {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #93c47d !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

#recyclage .recycling-sorties-head .recycling-subsection-title::before {
  display: none !important;
}

#recyclage .recycling-sorties-head p {
  margin: 0 !important;
  text-align: right !important;
}

/* Badges non rendus */
#recyclage #recyclingOpenBadgesBox {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

#recyclage .recycling-badge-list-one-line {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 1040px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

#recyclage .recycling-badge-card-one-line {
  display: grid !important;
  grid-template-columns:
    minmax(86px, .38fr)
    minmax(150px, .58fr)
    minmax(170px, .66fr)
    minmax(210px, .82fr)
    minmax(220px, 1fr)
    minmax(130px, .46fr)
    minmax(138px, auto) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  border: 1px solid #34363d !important;
  background: #101012 !important;
  overflow: hidden !important;
}

#recyclage .recycling-one-line-badge,
#recyclage .recycling-one-line-remise,
#recyclage .recycling-one-line-transporteur,
#recyclage .recycling-one-line-motif,
#recyclage .recycling-one-line-chauffeur,
#recyclage .recycling-one-line-phone {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}

#recyclage .recycling-one-line-badge {
  color: #93c47d !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

#recyclage .recycling-one-line-remise,
#recyclage .recycling-one-line-phone {
  color: #dbeafe !important;
  font-size: 12px !important;
}

#recyclage .recycling-one-line-return {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  background: rgba(22, 163, 74, .14) !important;
  border: 1px solid rgba(147, 196, 125, .65) !important;
  color: #dff2d6 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#recyclage .recycling-one-line-return input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  margin: 0 !important;
  accent-color: #93c47d !important;
}

/* ==========================================================
   REGISTRE — BOUTON DÉROULÉ IDENTIQUE À SAV NF, EN VERT
   ========================================================== */

#recyclage .recycling-register-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 58px !important;
}

#recyclage .recycling-register-header .recycling-card-title {
  margin: 0 !important;
  padding-right: 78px !important;
  padding-left: 78px !important;
}

#recyclage .recycling-register-content.is-closed,
#recyclage .recycling-register-content[hidden] {
  display: none !important;
}

#recyclage .recycling-register-content.is-open {
  display: block !important;
  margin-top: 18px !important;
}

/* Même géométrie que SAV NF */
#recyclage .recycling-register-toggle,
#recyclage .recycling-register-toggle-pretty {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(147, 196, 125, .60) !important;
  background:
    linear-gradient(180deg, rgba(147, 196, 125, .25) 0%, rgba(147, 196, 125, .10) 100%),
    #202127 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 8px 20px rgba(0, 0, 0, .25) !important;
  cursor: pointer !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}

#recyclage .recycling-register-toggle:hover,
#recyclage .recycling-register-toggle-pretty:hover {
  border-color: rgba(147, 196, 125, .95) !important;
  background:
    linear-gradient(180deg, rgba(147, 196, 125, .34) 0%, rgba(147, 196, 125, .14) 100%),
    #24262d !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 10px 24px rgba(0, 0, 0, .30),
    0 0 0 3px rgba(147, 196, 125, .10) !important;
}

#recyclage .recycling-register-toggle:active,
#recyclage .recycling-register-toggle-pretty:active {
  transform: translateY(-50%) scale(.97) !important;
}

#recyclage .recycling-toggle-chevron,
#recyclage .recycling-register-toggle::before {
  content: "" !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-right: 3px solid #93c47d !important;
  border-bottom: 3px solid #93c47d !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transform-origin: center !important;
  transition: transform .18s ease !important;
}

#recyclage .recycling-register-toggle[aria-expanded="true"] .recycling-toggle-chevron,
#recyclage .recycling-register-toggle[aria-expanded="true"]::before {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

/* Pagination registre */
#recyclage .recycling-register-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 16px 0 4px !important;
  color: #dff2d6 !important;
  font-weight: 850 !important;
}

#recyclage .recycling-register-pagination button {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#recyclage .recycling-register-pagination button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* Actions du registre Recyclage sur une seule ligne */
#recyclage #recyclageList table,
#recyclage #recyclingList table,
#recyclageList table,
#recyclingList table {
  table-layout: auto !important;
}

#recyclage #recyclageList th:last-child,
#recyclage #recyclageList td.actions,
#recyclage #recyclingList th:last-child,
#recyclage #recyclingList td.actions,
#recyclageList th:last-child,
#recyclageList td.actions,
#recyclingList th:last-child,
#recyclingList td.actions {
  min-width: 290px !important;
  width: 290px !important;
}

#recyclage #recyclageList td.actions,
#recyclage #recyclingList td.actions,
#recyclageList td.actions,
#recyclingList td.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

#recyclage #recyclageList td.actions button,
#recyclage #recyclageList td.actions .pill,
#recyclage #recyclingList td.actions button,
#recyclage #recyclingList td.actions .pill,
#recyclageList td.actions button,
#recyclageList td.actions .pill,
#recyclingList td.actions button,
#recyclingList td.actions .pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#recyclage #recyclageList td.actions br,
#recyclage #recyclingList td.actions br,
#recyclageList td.actions br,
#recyclingList td.actions br {
  display: none !important;
}

/* Responsive */
@media (max-width: 1280px) {
  #recyclage .recycling-entrees-grid {
    grid-template-columns: 1fr !important;
  }

  #recyclage .recycling-entrees-separator {
    width: 100% !important;
    min-width: 100% !important;
    height: 3px !important;
    min-height: 3px !important;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(147, 196, 125, .18) 8%,
        rgba(147, 196, 125, .70) 50%,
        rgba(147, 196, 125, .18) 92%,
        transparent 100%) !important;
  }
}

@media (max-width: 900px) {
  #recyclage .recycling-calendar-bottom-actions,
  #recyclage .recycling-month-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #recyclage .recycling-card {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }

  #recyclage .recycling-main-title {
    font-size: 38px !important;
  }

  #recyclage .recycling-card-title,
  #recyclage .recycling-centered-card-title,
  #recyclage .recycling-register-title {
    min-height: 48px !important;
    font-size: 18px !important;
    letter-spacing: .06em !important;
    border-radius: 14px !important;
  }

  #recyclage .recycling-entrees-rdv > .recycling-subsection-title,
  #recyclage .recycling-entrees-sans-rdv > .recycling-subsection-title {
    min-height: 42px !important;
    font-size: 14px !important;
    letter-spacing: .10em !important;
  }

  #recyclage .recycling-month-grid {
    grid-template-columns: 52px repeat(7, minmax(34px, 1fr)) !important;
  }

  #recyclage .recycling-sorties-head {
    display: block !important;
  }

  #recyclage .recycling-sorties-head p {
    text-align: left !important;
    margin-top: 6px !important;
  }

  #recyclage .recycling-register-header .recycling-card-title {
    padding-right: 60px !important;
    padding-left: 14px !important;
  }

  #recyclage .recycling-register-toggle,
  #recyclage .recycling-register-toggle-pretty {
    right: 8px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 12px !important;
  }

  #recyclage .recycling-register-pagination {
    flex-direction: column !important;
    gap: 8px !important;
  }

  #recyclage #recyclageList table,
  #recyclage #recyclingList table,
  #recyclageList table,
  #recyclingList table {
    min-width: 1160px !important;
  }
}

/* ==========================================================
   CORRECTIF FINAL — RECYCLAGE ALIGNÉ SUR SAV NF
   Mois/année + boutons calendrier
   ========================================================== */

/* Mois / année RECYCLAGE : identique SAV NF */
#recyclage .recycling-month-title,
#recyclage #recyclingCalendarMonthLabel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;

  margin: 0 0 12px !important;

  color: #93c47d !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Boutons sous calendrier RECYCLAGE : pleine largeur, une seule ligne */
#recyclage .recycling-calendar-bottom-actions,
#recyclage .recycling-month-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

/* Boutons sous calendrier : taille identique SAV NF */
#recyclage .recycling-calendar-bottom-actions button,
#recyclage .recycling-month-actions button {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Boutons navigation : sombre comme SAV NF */
#recyclage .recycling-calendar-bottom-actions button.ghost,
#recyclage .recycling-month-actions button.ghost {
  background: #24252b !important;
  color: #ffffff !important;
  border-color: #34363d !important;
}

/* Boutons Aujourd’hui / Ajouter RDV : dorés comme SAV NF */
#recyclage .recycling-calendar-bottom-actions button:not(.ghost),
#recyclage .recycling-month-actions button:not(.ghost) {
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
}

/* Bouton Nouvelle entrée : doré comme SAV NF */
#recyclage .recycling-new-entry-button {
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
}

/* Mobile : les boutons passent en 2 colonnes uniquement sur petit écran */
@media (max-width: 900px) {
  #recyclage .recycling-calendar-bottom-actions,
  #recyclage .recycling-month-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================
   CORRECTIF — RECYCLAGE : CENTRAGE DOUBLE FLÈCHE DU REGISTRE
   ========================================================== */

#recyclage .recycling-register-toggle,
#recyclage .recycling-register-toggle-pretty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* On masque l'ancien span qui créait un mauvais décalage */
#recyclage .recycling-register-toggle .recycling-toggle-chevron,
#recyclage .recycling-register-toggle-pretty .recycling-toggle-chevron {
  display: none !important;
}

/* Création propre des 2 chevrons centrés */
#recyclage .recycling-register-toggle::before,
#recyclage .recycling-register-toggle::after,
#recyclage .recycling-register-toggle-pretty::before,
#recyclage .recycling-register-toggle-pretty::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;

  width: 10px !important;
  height: 10px !important;

  border-right: 3px solid #93c47d !important;
  border-bottom: 3px solid #93c47d !important;

  transform: translateX(-50%) rotate(45deg) !important;
  transform-origin: center !important;
  background: transparent !important;
}

/* Flèche du haut */
#recyclage .recycling-register-toggle::before,
#recyclage .recycling-register-toggle-pretty::before {
  top: 10px !important;
}

/* Flèche du bas */
#recyclage .recycling-register-toggle::after,
#recyclage .recycling-register-toggle-pretty::after {
  top: 18px !important;
}

/* Quand le registre est ouvert : double flèche vers le haut */
#recyclage .recycling-register-toggle[aria-expanded="true"]::before,
#recyclage .recycling-register-toggle-pretty[aria-expanded="true"]::before {
  top: 16px !important;
  transform: translateX(-50%) rotate(225deg) !important;
}

#recyclage .recycling-register-toggle[aria-expanded="true"]::after,
#recyclage .recycling-register-toggle-pretty[aria-expanded="true"]::after {
  top: 8px !important;
  transform: translateX(-50%) rotate(225deg) !important;
}

/* ==========================================================
   ONGLETS — COULEURS FINALES PAR MODULE
   ========================================================== */

/* EXPÉDITION */
.tabs button:nth-child(2),
#tabs button:nth-child(2),
.tabs button[data-tab="expedition"],
#tabs button[data-tab="expedition"] {
  color: #6d9eeb !important;
}

/* SAV NF */
.tabs button:nth-child(3),
#tabs button:nth-child(3),
.tabs button[data-tab="savnf"],
#tabs button[data-tab="savnf"] {
  color: #f6b26b !important;
}

/* RECYCLAGE */
.tabs button:nth-child(4),
#tabs button:nth-child(4),
.tabs button[data-tab="recyclage"],
#tabs button[data-tab="recyclage"],
.tabs button[data-tab="recycling"],
#tabs button[data-tab="recycling"] {
  color: #93c47d !important;
}

/* VISITEURS */
.tabs button:nth-child(6),
#tabs button:nth-child(6),
.tabs button[data-tab="visitors"],
#tabs button[data-tab="visitors"],
.tabs button[data-tab="visiteurs"],
#tabs button[data-tab="visiteurs"] {
  color: #c27ba0 !important;
}

/* PRESTATAIRES */
.tabs button:nth-child(7),
#tabs button:nth-child(7),
.tabs button[data-tab="prestataires"],
#tabs button[data-tab="prestataires"] {
  color: #d9d9d9 !important;
}

/* COLIS */
.tabs button:nth-child(8),
#tabs button:nth-child(8),
.tabs button[data-tab="colis"],
#tabs button[data-tab="colis"] {
  color: #ffd966 !important;
}

/* Lisibilité uniforme des textes colorés */
.tabs button,
#tabs button {
  text-shadow: 1px 1px 0 #000 !important;
}

/* Accent lumineux léger au survol */
.tabs button:nth-child(2):hover,
#tabs button:nth-child(2):hover {
  box-shadow: 0 0 0 2px rgba(109, 158, 235, .25) !important;
}

.tabs button:nth-child(3):hover,
#tabs button:nth-child(3):hover {
  box-shadow: 0 0 0 2px rgba(246, 178, 107, .25) !important;
}

.tabs button:nth-child(4):hover,
#tabs button:nth-child(4):hover {
  box-shadow: 0 0 0 2px rgba(147, 196, 125, .25) !important;
}

.tabs button:nth-child(6):hover,
#tabs button:nth-child(6):hover {
  box-shadow: 0 0 0 2px rgba(194, 123, 160, .25) !important;
}

.tabs button:nth-child(7):hover,
#tabs button:nth-child(7):hover {
  box-shadow: 0 0 0 2px rgba(217, 217, 217, .22) !important;
}

.tabs button:nth-child(8):hover,
#tabs button:nth-child(8):hover {
  box-shadow: 0 0 0 2px rgba(255, 217, 102, .25) !important;
}

/* ==========================================================
   COLIS — ACTIONS REGISTRE SUR UNE SEULE LIGNE
   ========================================================== */

/*
  Objectif :
  - aligner les boutons d'action de l'onglet COLIS sur une seule ligne ;
  - réduire leur format sans perdre la lisibilité ;
  - éviter les retours à la ligne dans la colonne Actions.
*/

#colis #colisList table,
#colisList table {
  table-layout: auto !important;
}

/* Colonne Actions assez large pour garder les boutons côte à côte */
#colis #colisList th:last-child,
#colis #colisList td.actions,
#colisList th:last-child,
#colisList td.actions {
  min-width: 370px !important;
  width: 370px !important;
  max-width: 370px !important;
}

/* Alignement horizontal strict */
#colis #colisList td.actions,
#colisList td.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

/* Boutons plus compacts */
#colis #colisList td.actions button,
#colisList td.actions button,
#colis #colisList td.actions .pill,
#colisList td.actions .pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 9px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Largeurs adaptées aux libellés actuels */
#colis #colisList td.actions button:nth-of-type(1),
#colisList td.actions button:nth-of-type(1) {
  min-width: 112px !important;
}

#colis #colisList td.actions button:nth-of-type(2),
#colisList td.actions button:nth-of-type(2) {
  min-width: 126px !important;
}

#colis #colisList td.actions button:nth-of-type(3),
#colisList td.actions button:nth-of-type(3),
#colis #colisList td.actions button.danger,
#colisList td.actions button.danger {
  min-width: 86px !important;
}

/* Interdit tout saut de ligne résiduel dans la zone actions */
#colis #colisList td.actions br,
#colisList td.actions br {
  display: none !important;
}

/* Si l'écran est étroit, le tableau peut défiler horizontalement proprement */
#colis #colisList,
#colisList {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Responsive : on garde la ligne unique en élargissant le tableau si besoin */
@media (max-width: 900px) {
  #colis #colisList table,
  #colisList table {
    min-width: 1280px !important;
  }

  #colis #colisList th:last-child,
  #colis #colisList td.actions,
  #colisList th:last-child,
  #colisList td.actions {
    min-width: 370px !important;
    width: 370px !important;
    max-width: 370px !important;
  }
}

/* ==========================================================
   VISITEURS — HABILLAGE ENTRÉES / REGISTRE SANS SORTIES
   Couleur module : #c27ba0
   ========================================================== */

/*
  Structure demandée :
  - onglet VISITEURS calqué sur SAV NF / RECYCLAGE ;
  - couleur dominante #c27ba0 ;
  - carte ENTRÉES uniquement ;
  - pas de carte SORTIES ;
  - registre masqué/déroulant et paginé à 25 lignes.
*/

#visiteurs {
  --visitor-accent: #c27ba0;
  --visitor-accent-light: #f0d5e4;
  --visitor-accent-dark: #a64d79;
}

/* Titre principal VISITEURS */
#visiteurs .visitor-main-title-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin: 8px auto 26px !important;
}

#visiteurs .visitor-main-title,
#visiteurs h2.visitor-main-title {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  color: #c27ba0 !important;
  font-size: clamp(48px, 4vw, 72px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 14px rgba(194, 123, 160, .12) !important;
}

/* Cartes */
#visiteurs .visitor-card {
  background: #151518 !important;
  border: 1px solid #34363d !important;
  border-radius: 22px !important;
  padding: 22px 24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 42px rgba(0,0,0,.22) !important;
  overflow: hidden !important;
}

/* Titres ENTRÉES / REGISTRE VISITEURS */
#visiteurs .visitor-card-title,
#visiteurs .visitor-centered-card-title,
#visiteurs .visitor-register-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 0 22px !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  color: #c27ba0 !important;
  background:
    linear-gradient(180deg, rgba(194, 123, 160, .16) 0%, rgba(194, 123, 160, .045) 100%),
    #111114 !important;
  border: 1px solid rgba(194, 123, 160, .50) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(194, 123, 160, .10),
    0 10px 28px rgba(0,0,0,.22) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .085em !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

/* Entrées : RDV 3/4 + SANS RDV 1/4 */
#visiteurs .visitor-entrees-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) 3px minmax(210px, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#visiteurs .visitor-entrees-rdv,
#visiteurs .visitor-entrees-sans-rdv {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

/* RDV / SANS RDV */
#visiteurs .visitor-entrees-rdv > .visitor-subsection-title,
#visiteurs .visitor-entrees-sans-rdv > .visitor-subsection-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  color: #f0d5e4 !important;
  background:
    linear-gradient(180deg, rgba(194, 123, 160, .08) 0%, rgba(194, 123, 160, .025) 100%),
    #121318 !important;
  border: 1px solid rgba(194, 123, 160, .34) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 6px 16px rgba(0,0,0,.16) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#visiteurs .visitor-entrees-rdv > .visitor-subsection-title::before,
#visiteurs .visitor-entrees-sans-rdv > .visitor-subsection-title::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  top: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(194,123,160,.55) 50%, transparent 100%) !important;
  pointer-events: none !important;
}

/* Séparateurs */
#visiteurs .visitor-entrees-separator {
  width: 3px !important;
  min-width: 3px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(194, 123, 160, .18) 8%,
      rgba(194, 123, 160, .70) 50%,
      rgba(194, 123, 160, .18) 92%,
      transparent 100%) !important;
  box-shadow:
    0 0 0 1px rgba(194, 123, 160, .12),
    0 0 14px rgba(194, 123, 160, .10) !important;
}

#visiteurs .visitor-horizontal-separator {
  height: 4px !important;
  margin: 26px 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(194, 123, 160, .18) 10%,
      rgba(194, 123, 160, .78) 50%,
      rgba(194, 123, 160, .18) 90%,
      transparent 100%) !important;
  box-shadow:
    0 0 0 1px rgba(194, 123, 160, .10),
    0 0 16px rgba(194, 123, 160, .10) !important;
}

/* ==========================================================
   CALENDRIER VISITEURS — CALÉ SUR SAV NF
   ========================================================== */

#visiteurs #visitorCalendar {
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
}

#visiteurs .visitor-month-title,
#visiteurs #visitorCalendarMonthLabel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  color: #c27ba0 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

#visiteurs .visitor-month-grid,
#visiteurs .final-visitor-month-grid {
  display: grid !important;
  grid-template-columns: 52px repeat(7, minmax(34px, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid #1a1a1c !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #111114 !important;
}

#visiteurs .visitor-month-head {
  min-height: 34px !important;
  padding: 8px 3px !important;
  background: linear-gradient(180deg, #edd77a 0%, #d5b45b 100%) !important;
  color: #050505 !important;
  border: 1px solid #1a1a1c !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  box-shadow: none !important;
}

#visiteurs .visitor-week-cell,
#visiteurs .visitor-month-cell {
  min-height: 48px !important;
  height: 48px !important;
  background: #f4f4f4 !important;
  color: #030303 !important;
  border: 1px solid #1a1a1c !important;
  border-radius: 0 !important;
  padding: 3px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  font-weight: 950 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  outline: none !important;
}

#visiteurs .visitor-week-cell {
  background: #eeeeee !important;
  display: grid !important;
  place-items: center !important;
}

#visiteurs .visitor-month-cell.outside-month {
  background: #d3d3d3 !important;
  color: #030303 !important;
  cursor: default !important;
}

#visiteurs .visitor-month-cell.today,
#visiteurs .visitor-month-cell.is-today,
#visiteurs .visitor-month-cell.current-day {
  background: #6caf51 !important;
  color: #ffffff !important;
}

#visiteurs .visitor-date-number {
  display: block !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: inherit !important;
  text-align: center !important;
  margin-top: 0 !important;
}

#visiteurs .visitor-month-cell:hover,
#visiteurs .visitor-week-cell:hover {
  outline: 3px solid #1a1a1c !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}

#visiteurs .visitor-final-rdv-corner,
#visiteurs .visiteurs-rdv-corner,
#visiteurs .rdv-marker {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 12px solid #d5a100 !important;
  border-left: 12px solid transparent !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

#visiteurs .visitor-final-rdv-count,
#visiteurs .visiteurs-rdv-count {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  background: #111114 !important;
  color: #f4df8b !important;
  border-radius: 999px !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* Boutons sous calendrier */
#visiteurs .visitor-calendar-bottom-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

#visiteurs .visitor-calendar-bottom-actions button {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#visiteurs .visitor-calendar-bottom-actions button.ghost {
  background: #24252b !important;
  color: #ffffff !important;
  border-color: #34363d !important;
}

#visiteurs .visitor-calendar-bottom-actions button:not(.ghost) {
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
}

/* SANS RDV */
#visiteurs .visitor-sans-rdv-note {
  margin: 0 0 16px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#visiteurs .visitor-new-entry-button {
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
}

/* ==========================================================
   REGISTRE VISITEURS — DÉROULANT + PAGINATION
   ========================================================== */

#visiteurs .visitor-register-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 58px !important;
}

#visiteurs .visitor-register-header .visitor-card-title {
  margin: 0 !important;
  padding-right: 78px !important;
  padding-left: 78px !important;
}

#visiteurs .visitor-register-content.is-closed,
#visiteurs .visitor-register-content[hidden] {
  display: none !important;
}

#visiteurs .visitor-register-content.is-open {
  display: block !important;
  margin-top: 18px !important;
}

/* Bouton déroulé : même géométrie que SAV NF, accent VISITEURS */
#visiteurs .visitor-register-toggle,
#visiteurs .visitor-register-toggle-pretty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(194, 123, 160, .60) !important;
  background:
    linear-gradient(180deg, rgba(194, 123, 160, .25) 0%, rgba(194, 123, 160, .10) 100%),
    #202127 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 8px 20px rgba(0, 0, 0, .25) !important;
  cursor: pointer !important;
}

#visiteurs .visitor-register-toggle .visitor-toggle-chevron,
#visiteurs .visitor-register-toggle-pretty .visitor-toggle-chevron {
  display: none !important;
}

#visiteurs .visitor-register-toggle::before,
#visiteurs .visitor-register-toggle::after,
#visiteurs .visitor-register-toggle-pretty::before,
#visiteurs .visitor-register-toggle-pretty::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 3px solid #c27ba0 !important;
  border-bottom: 3px solid #c27ba0 !important;
  transform: translateX(-50%) rotate(45deg) !important;
  transform-origin: center !important;
  background: transparent !important;
}

#visiteurs .visitor-register-toggle::before,
#visiteurs .visitor-register-toggle-pretty::before {
  top: 10px !important;
}

#visiteurs .visitor-register-toggle::after,
#visiteurs .visitor-register-toggle-pretty::after {
  top: 18px !important;
}

#visiteurs .visitor-register-toggle[aria-expanded="true"]::before,
#visiteurs .visitor-register-toggle-pretty[aria-expanded="true"]::before {
  top: 16px !important;
  transform: translateX(-50%) rotate(225deg) !important;
}

#visiteurs .visitor-register-toggle[aria-expanded="true"]::after,
#visiteurs .visitor-register-toggle-pretty[aria-expanded="true"]::after {
  top: 8px !important;
  transform: translateX(-50%) rotate(225deg) !important;
}

/* Pagination */
#visiteurs .visitor-register-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 16px 0 4px !important;
  color: #f0d5e4 !important;
  font-weight: 850 !important;
}

#visiteurs .visitor-register-pagination button {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#visiteurs .visitor-register-pagination button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* Actions registre visiteurs sur une seule ligne */
#visiteurs #visiteursList table,
#visiteursList table,
#visitorsList table {
  table-layout: auto !important;
}

#visiteurs #visiteursList th:last-child,
#visiteurs #visiteursList td.actions,
#visiteursList th:last-child,
#visiteursList td.actions,
#visitorsList th:last-child,
#visitorsList td.actions {
  min-width: 290px !important;
  width: 290px !important;
}

#visiteurs #visiteursList td.actions,
#visiteursList td.actions,
#visitorsList td.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#visiteurs #visiteursList td.actions button,
#visiteurs #visiteursList td.actions .pill,
#visiteursList td.actions button,
#visiteursList td.actions .pill,
#visitorsList td.actions button,
#visitorsList td.actions .pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#visiteurs #visiteursList td.actions br,
#visiteursList td.actions br,
#visitorsList td.actions br {
  display: none !important;
}

/* Responsive */
@media (max-width: 1280px) {
  #visiteurs .visitor-entrees-grid {
    grid-template-columns: 1fr !important;
  }

  #visiteurs .visitor-entrees-separator {
    width: 100% !important;
    min-width: 100% !important;
    height: 3px !important;
    min-height: 3px !important;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(194, 123, 160, .18) 8%,
        rgba(194, 123, 160, .70) 50%,
        rgba(194, 123, 160, .18) 92%,
        transparent 100%) !important;
  }
}

@media (max-width: 900px) {
  #visiteurs .visitor-calendar-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #visiteurs .visitor-card {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }

  #visiteurs .visitor-main-title {
    font-size: 38px !important;
  }

  #visiteurs .visitor-card-title,
  #visiteurs .visitor-centered-card-title,
  #visiteurs .visitor-register-title {
    min-height: 48px !important;
    font-size: 18px !important;
    letter-spacing: .06em !important;
    border-radius: 14px !important;
  }

  #visiteurs .visitor-entrees-rdv > .visitor-subsection-title,
  #visiteurs .visitor-entrees-sans-rdv > .visitor-subsection-title {
    min-height: 42px !important;
    font-size: 14px !important;
    letter-spacing: .10em !important;
  }

  #visiteurs .visitor-register-header .visitor-card-title {
    padding-right: 60px !important;
    padding-left: 14px !important;
  }

  #visiteurs .visitor-register-toggle,
  #visiteurs .visitor-register-toggle-pretty {
    right: 8px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 12px !important;
  }

  #visiteurs .visitor-register-pagination {
    flex-direction: column !important;
    gap: 8px !important;
  }

  #visiteurs #visiteursList table,
  #visiteursList table,
  #visitorsList table {
    min-width: 1100px !important;
  }
}

/* ==========================================================
   SAV NF + VISITEURS — BOUTON AUJOURD'HUI EN COULEUR NAVIGATION
   ========================================================== */

/*
  Objectif :
  - Sous les calendriers SAV NF et VISITEURS, le bouton AUJOURD'HUI
    doit avoir la même couleur que Mois précédent / Mois suivant.
  - On ne modifie pas les actions JS.
  - On cible uniquement les zones de boutons sous calendrier.
*/

/* SAV NF : Aujourd'hui sombre comme Mois précédent / Mois suivant */
#savnf .savnf-calendar-bottom-actions button[onclick*="Today"],
#savnf .savnf-calendar-bottom-actions button[onclick*="today"],
#savnf .savnf-calendar-bottom-actions button[onclick*="goTo"],
#savnf .savnf-month-actions button[onclick*="Today"],
#savnf .savnf-month-actions button[onclick*="today"],
#savnf .savnf-month-actions button[onclick*="goTo"],
#savnf button[onclick*="savnfGoToday"],
#savnf button[onclick*="goSavnfToday"],
#savnf button[onclick*="goToCurrentSavnfMonth"] {
  background: #24252b !important;
  color: #ffffff !important;
  border-color: #34363d !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 8px 18px rgba(0, 0, 0, .18) !important;
}

/* VISITEURS : Aujourd'hui sombre comme Mois précédent / Mois suivant */
#visiteurs .visitor-calendar-bottom-actions button[onclick*="goToCurrentVisitorMonth"],
#visiteurs .visitor-calendar-bottom-actions button[onclick*="VisitorMonth"],
#visiteurs .visitor-month-actions button[onclick*="goToCurrentVisitorMonth"],
#visiteurs .visitor-month-nav button[onclick*="goToCurrentVisitorMonth"],
#visiteurs button[onclick*="goToCurrentVisitorMonth"] {
  background: #24252b !important;
  color: #ffffff !important;
  border-color: #34363d !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 8px 18px rgba(0, 0, 0, .18) !important;
}

/* Hover cohérent avec les boutons navigation */
#savnf .savnf-calendar-bottom-actions button[onclick*="Today"]:hover,
#savnf .savnf-calendar-bottom-actions button[onclick*="today"]:hover,
#savnf .savnf-calendar-bottom-actions button[onclick*="goTo"]:hover,
#savnf .savnf-month-actions button[onclick*="Today"]:hover,
#savnf .savnf-month-actions button[onclick*="today"]:hover,
#savnf .savnf-month-actions button[onclick*="goTo"]:hover,
#savnf button[onclick*="savnfGoToday"]:hover,
#savnf button[onclick*="goSavnfToday"]:hover,
#savnf button[onclick*="goToCurrentSavnfMonth"]:hover,
#visiteurs .visitor-calendar-bottom-actions button[onclick*="goToCurrentVisitorMonth"]:hover,
#visiteurs .visitor-calendar-bottom-actions button[onclick*="VisitorMonth"]:hover,
#visiteurs .visitor-month-actions button[onclick*="goToCurrentVisitorMonth"]:hover,
#visiteurs .visitor-month-nav button[onclick*="goToCurrentVisitorMonth"]:hover,
#visiteurs button[onclick*="goToCurrentVisitorMonth"]:hover {
  background: #2b2c33 !important;
  color: #ffffff !important;
  border-color: #4a4c55 !important;
}

/* ==========================================================
   VISITEURS — REGISTRE RDV PRÉVU SANS RENDU / BADGE / SORTIE
   ========================================================== */

/*
  Objectif :
  - ajouter la colonne RDV prévu entre Motif et Entrée réelle ;
  - reprendre la date et l'heure du RDV calendrier quand le visiteur est intégré ;
  - conserver la suppression du bouton Rendu, de la colonne Badge et de la colonne Sortie.
*/

#visiteurs #visiteursList table.visitor-register-table-rdv-prevu-no-badge-sortie,
#visiteursList table.visitor-register-table-rdv-prevu-no-badge-sortie {
  min-width: 1080px !important;
  table-layout: auto !important;
}

/* Colonne RDV prévu lisible */
#visiteurs #visiteursList table.visitor-register-table-rdv-prevu-no-badge-sortie th:nth-child(4),
#visiteurs #visiteursList table.visitor-register-table-rdv-prevu-no-badge-sortie td:nth-child(4),
#visiteursList table.visitor-register-table-rdv-prevu-no-badge-sortie th:nth-child(4),
#visiteursList table.visitor-register-table-rdv-prevu-no-badge-sortie td:nth-child(4) {
  min-width: 128px !important;
  white-space: nowrap !important;
}

/* Actions visiteurs : uniquement Modifier / Supprimer sur une ligne */
#visiteurs #visiteursList td.visitor-actions-no-rendu,
#visiteursList td.visitor-actions-no-rendu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  white-space: nowrap !important;
  min-width: 190px !important;
  width: 190px !important;
}

#visiteurs #visiteursList td.visitor-actions-no-rendu button,
#visiteursList td.visitor-actions-no-rendu button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#visiteurs #visiteursList td.visitor-actions-no-rendu button.ghost,
#visiteursList td.visitor-actions-no-rendu button.ghost {
  min-width: 82px !important;
}

#visiteurs #visiteursList td.visitor-actions-no-rendu button.danger,
#visiteursList td.visitor-actions-no-rendu button.danger {
  min-width: 92px !important;
}

/* Sécurité : neutralisation de tout rendu résiduel dans la cellule Actions */
#visiteurs #visiteursList td.visitor-actions-no-rendu .pill.green,
#visiteursList td.visitor-actions-no-rendu .pill.green,
#visiteurs #visiteursList td.visitor-actions-no-rendu button[onclick*="markReturned"],
#visiteursList td.visitor-actions-no-rendu button[onclick*="markReturned"] {
  display: none !important;
}

/* ==========================================================
   ACCUEIL — ARCHIVES MENSUELLES AUTOMATIQUES
   ========================================================== */

#archivesDashboardButton.dashboard-archives-button {
  margin-left: 10px !important;
  border-color: rgba(255, 217, 102, .34) !important;
  color: #ffd966 !important;
}

#archivesDashboardButton.dashboard-archives-button:hover {
  border-color: rgba(255, 217, 102, .70) !important;
  box-shadow: 0 0 0 3px rgba(255, 217, 102, .12) !important;
}

.archives-modal {
  width: min(1100px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 48px) !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 217, 102, .30) !important;
  border-radius: 22px !important;
  background: #111114 !important;
  color: #ffffff !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55) !important;
  overflow: hidden !important;
}

.archives-modal::backdrop {
  background: rgba(0, 0, 0, .72) !important;
}

.archive-modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 22px 24px !important;
  background:
    linear-gradient(180deg, rgba(255, 217, 102, .12), rgba(255, 217, 102, .035)),
    #151518 !important;
  border-bottom: 1px solid rgba(255, 217, 102, .18) !important;
}

.archive-modal-head h2 {
  margin: 0 0 6px !important;
  color: #ffd966 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
}

.archive-modal-head p {
  margin: 0 !important;
  color: #dbeafe !important;
  font-size: 13px !important;
}

.archive-modal-toolbar {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 24px !important;
  background: #101012 !important;
  border-bottom: 1px solid #24252b !important;
}

.archive-modal-body {
  max-height: calc(100vh - 235px) !important;
  overflow: auto !important;
  padding: 22px 24px 26px !important;
}

.archive-month-card {
  border: 1px solid #34363d !important;
  border-radius: 18px !important;
  background: #151518 !important;
  padding: 18px !important;
  margin-bottom: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 14px 28px rgba(0, 0, 0, .20) !important;
}

.archive-month-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 16px !important;
}

.archive-month-head h3 {
  margin: 0 0 5px !important;
  color: #ffd966 !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

.archive-month-head p {
  margin: 0 !important;
  color: #dbeafe !important;
  font-size: 13px !important;
}

.archive-month-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: nowrap !important;
}

.archive-month-actions button,
.archive-modal-toolbar button {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.archive-module-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.archive-module-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  background: #202127 !important;
  border: 1px solid #34363d !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.archive-module-pill strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #111114 !important;
  color: #ffd966 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.archive-module-pill.disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
}

.archive-empty {
  padding: 26px !important;
  border: 1px dashed #34363d !important;
  border-radius: 16px !important;
  color: #dbeafe !important;
}

@media (max-width: 980px) {
  .archive-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .archive-month-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .archive-month-actions {
    width: 100% !important;
  }

  .archive-month-actions button {
    flex: 1 !important;
  }
}

@media (max-width: 640px) {
  .archive-modal-head,
  .archive-modal-toolbar,
  .archive-modal-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .archive-modal-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .archive-modal-toolbar {
    flex-direction: column !important;
  }

  .archive-module-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   ADMIN — TRAÇABILITÉ NOMINATIVE DES ACTIONS AVEC RECHERCHE
   ========================================================== */

.admin-action-trace-card {
  border-color: rgba(255, 217, 102, .22) !important;
}

.admin-action-trace-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}

.admin-action-trace-head h3 {
  margin-bottom: 6px !important;
}

.admin-action-trace-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.admin-action-search-panel {
  display: grid !important;
  gap: 12px !important;
  margin: 16px 0 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 217, 102, .18) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 217, 102, .07), rgba(255, 217, 102, .025)),
    #101012 !important;
}

.admin-action-search-row {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.5fr) minmax(170px, .55fr) minmax(150px, .45fr) !important;
  gap: 10px !important;
  align-items: end !important;
}

.admin-action-search-row-secondary {
  grid-template-columns: minmax(150px, .35fr) minmax(150px, .35fr) auto 1fr !important;
}

.admin-action-search-panel label {
  display: grid !important;
  gap: 6px !important;
}

.admin-action-search-panel label span {
  color: #ffd966 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.admin-action-search-panel input,
.admin-action-search-panel select {
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid #34363d !important;
  background: #151518 !important;
  color: #ffffff !important;
  padding: 0 11px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  outline: none !important;
}

.admin-action-search-panel input:focus,
.admin-action-search-panel select:focus {
  border-color: rgba(255, 217, 102, .55) !important;
  box-shadow: 0 0 0 3px rgba(255, 217, 102, .10) !important;
}

.admin-action-search-row-secondary button {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.admin-action-search-count {
  align-self: center !important;
  justify-self: end !important;
  color: #dbeafe !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.admin-action-log-table-wrap {
  max-height: 560px !important;
  overflow: auto !important;
}

.admin-action-log-table {
  min-width: 1180px !important;
}

.admin-action-log-table th,
.admin-action-log-table td {
  font-size: 12px !important;
}

.admin-action-log-table th:nth-child(1),
.admin-action-log-table td:nth-child(1) {
  min-width: 145px !important;
}

.admin-action-log-table th:nth-child(2),
.admin-action-log-table td:nth-child(2) {
  min-width: 165px !important;
}

.admin-action-log-table th:nth-child(4),
.admin-action-log-table td:nth-child(4) {
  min-width: 150px !important;
}

.admin-action-log-table th:nth-child(6),
.admin-action-log-table td:nth-child(6) {
  min-width: 180px !important;
}

.admin-action-detail-cell {
  max-width: 260px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.action-log-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 68px !important;
  height: 26px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

.action-log-status.success {
  background: rgba(44, 190, 120, .16) !important;
  border: 1px solid rgba(44, 190, 120, .38) !important;
  color: #8ff0ba !important;
}

.action-log-status.error {
  background: rgba(239, 68, 68, .16) !important;
  border: 1px solid rgba(239, 68, 68, .38) !important;
  color: #fecaca !important;
}

.admin-action-log-pagination {
  margin-top: 14px !important;
}

@media (max-width: 980px) {
  .admin-action-search-row,
  .admin-action-search-row-secondary {
    grid-template-columns: 1fr 1fr !important;
  }

  .admin-action-search-count {
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  .admin-action-trace-head {
    flex-direction: column !important;
  }

  .admin-action-trace-actions {
    width: 100% !important;
  }

  .admin-action-trace-actions button {
    flex: 1 !important;
  }

  .admin-action-search-row,
  .admin-action-search-row-secondary {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   SAV NF — CORRECTIF MOBILE CALENDRIER VISIBLE
   ========================================================== */

/*
  Objectif :
  - Sur mobile, le calendrier SAV NF doit être visible entièrement,
    comme le calendrier RECYCLAGE.
  - On neutralise l'ancien min-width mobile qui forçait un scroll horizontal.
  - Le bouton Ajouter RDV / Nouveau RDV SAV NF reste doré en version mobile.
*/

@media (max-width: 760px) {
  /* Carte SAV NF plus exploitable sur écran étroit */
  #savnf .savnf-card,
  #savnf .savnf-card-entrees,
  #savnf .savnf-card-sorties,
  #savnf .savnf-register-block {
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: hidden !important;
  }

  /* Le bloc RDV ne doit pas créer de largeur interne forcée */
  #savnf .savnf-entrees-rdv,
  #savnf .savnf-entrees-rdv > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Calendrier SAV NF : visible entier, sans scroll horizontal */
  #savnf #savnfCalendar,
  #savnf #savnfCalendar.savnf-calendar-compact {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
  }

  /* Suppression du message de scroll uniquement sur SAV NF */
  #savnf #savnfCalendar::after {
    content: none !important;
    display: none !important;
  }

  /* Grille SAV NF : aucune largeur minimale résiduelle */
  #savnf .savnf-month-grid,
  #savnf .savnf-month-grid-compact {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 42px repeat(7, minmax(0, 1fr)) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* En-têtes compactes pour afficher tout le mois */
  #savnf .savnf-month-grid .savnf-month-head,
  #savnf .savnf-month-grid-compact .savnf-month-head {
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 7px 1px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* Cellules compactes mais lisibles */
  #savnf .savnf-month-grid .savnf-week-cell,
  #savnf .savnf-month-grid .savnf-month-cell,
  #savnf .savnf-month-grid-compact .savnf-week-cell,
  #savnf .savnf-month-grid-compact .savnf-month-cell {
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 2px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  #savnf .savnf-month-grid .savnf-date-number,
  #savnf .savnf-month-grid-compact .savnf-date-number {
    font-size: 17px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Semaine à gauche : lisible sans manger la largeur du mois */
  #savnf .savnf-month-grid .savnf-week-cell,
  #savnf .savnf-month-grid-compact .savnf-week-cell {
    font-size: 14px !important;
  }

  /* Marqueurs RDV adaptés à la grille mobile */
  #savnf .savnf-month-grid .savnf-rdv-marker,
  #savnf .savnf-month-grid-compact .savnf-rdv-marker {
    top: 3px !important;
    right: 3px !important;
    border-top-width: 10px !important;
    border-left-width: 10px !important;
  }

  #savnf .savnf-month-grid .savnf-rdv-count,
  #savnf .savnf-month-grid-compact .savnf-rdv-count {
    right: 3px !important;
    bottom: 3px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
  }

  /* Boutons sous calendrier : même logique que RECYCLAGE mobile, en 2 colonnes */
  #savnf .savnf-calendar-bottom-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  #savnf .savnf-calendar-bottom-actions button {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }

  /* Navigation sombre : Mois précédent / Aujourd’hui / Mois suivant */
  #savnf .savnf-calendar-bottom-actions button.ghost,
  #savnf .savnf-calendar-bottom-actions button[onclick*="savnfGoToday"],
  #savnf .savnf-calendar-bottom-actions button[onclick*="goSavnfToday"],
  #savnf .savnf-calendar-bottom-actions button[onclick*="goToCurrentSavnfMonth"] {
    background: #24252b !important;
    color: #ffffff !important;
    border-color: #34363d !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .04),
      0 8px 18px rgba(0, 0, 0, .18) !important;
  }

  /* Ajouter RDV / Nouveau RDV : doré, comme RECYCLAGE */
  #savnf .savnf-calendar-bottom-actions button[onclick*="openSavnfAppointment"],
  #savnf .savnf-calendar-bottom-actions button[onclick*="openSavnf"],
  #savnf .savnf-new-entry-button {
    background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
    color: #050505 !important;
    border-color: rgba(255, 230, 140, .75) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22),
      0 10px 22px rgba(0, 0, 0, .22) !important;
  }
}

/* Très petits écrans : on gagne encore quelques pixels sans perdre la lecture */
@media (max-width: 420px) {
  #savnf .savnf-month-grid,
  #savnf .savnf-month-grid-compact {
    grid-template-columns: 39px repeat(7, minmax(0, 1fr)) !important;
  }

  #savnf .savnf-month-grid .savnf-month-head,
  #savnf .savnf-month-grid-compact .savnf-month-head {
    font-size: 9px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #savnf .savnf-month-grid .savnf-date-number,
  #savnf .savnf-month-grid-compact .savnf-date-number {
    font-size: 16px !important;
  }

  #savnf .savnf-month-grid .savnf-week-cell,
  #savnf .savnf-month-grid-compact .savnf-week-cell {
    font-size: 13px !important;
  }
}

/* ==========================================================
   SAV NF — BOUTON NOUVELLE ENTRÉE DORÉ SUR ORDINATEUR
   ========================================================== */

/*
  Objectif :
  - Sur ordinateur aussi, le bouton NOUVELLE ENTRÉE / Nouvelle entrée
    de l'onglet SAV NF doit être doré.
  - Même rendu que celui forcé en version mobile.
  - Ne modifie aucune action JavaScript.
*/

#savnf .savnf-new-entry-button,
#savnf button.savnf-new-entry-button,
#savnf .savnf-entrees-sans-rdv button[onclick*="openSavnf"],
#savnf .savnf-entrees-sans-rdv button[onclick*="openSavNF"],
#savnf .savnf-entrees-sans-rdv button[onclick*="openSavnfManual"],
#savnf .savnf-entrees-sans-rdv button[onclick*="openSavnfEntry"],
#savnf .savnf-entrees-sans-rdv button[onclick*="newSavnf"],
#savnf .savnf-entrees-sans-rdv button:not(.ghost) {
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 10px 22px rgba(0, 0, 0, .22) !important;
}

#savnf .savnf-new-entry-button:hover,
#savnf button.savnf-new-entry-button:hover,
#savnf .savnf-entrees-sans-rdv button[onclick*="openSavnf"]:hover,
#savnf .savnf-entrees-sans-rdv button[onclick*="openSavNF"]:hover,
#savnf .savnf-entrees-sans-rdv button[onclick*="openSavnfManual"]:hover,
#savnf .savnf-entrees-sans-rdv button[onclick*="openSavnfEntry"]:hover,
#savnf .savnf-entrees-sans-rdv button[onclick*="newSavnf"]:hover,
#savnf .savnf-entrees-sans-rdv button:not(.ghost):hover {
  background: linear-gradient(135deg, #e8c85f, #fff0a4) !important;
  color: #050505 !important;
  border-color: rgba(255, 238, 160, .95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 12px 26px rgba(0, 0, 0, .28),
    0 0 0 3px rgba(246, 178, 107, .12) !important;
}

/* ==========================================================
   SAV NF — BOUTON AJOUTER RDV DORÉ PRIORITAIRE
   ========================================================== */

/*
  Cause trouvée :
  - Le bouton "Ajouter RDV" contient onclick="openSavnfAppointment(savnfToday())".
  - Les anciens sélecteurs qui ciblaient Today / today attrapaient aussi savnfToday().
  - Résultat : le bouton Ajouter RDV était forcé en sombre comme Aujourd'hui.

  Correction :
  - On surcharge APRÈS tous les anciens blocs.
  - "Ajouter RDV" SAV NF redevient doré sur ordinateur et mobile.
  - "Aujourd'hui" reste sombre.
  - Aucune action JavaScript n'est modifiée.
*/

/* Bouton AJOUTER RDV du calendrier SAV NF : priorité maximale en doré */
#savnf .savnf-calendar-bottom-actions button[onclick^="openSavnfAppointment"],
#savnf .savnf-calendar-bottom-actions button[onclick*="openSavnfAppointment"],
#savnf .savnf-calendar-bottom-actions button[onclick*="openSavnfAppointment(savnfToday"],
#savnf .savnf-calendar-bottom-actions button[onclick*="openSavnfAppointment(savnfToday())"] {
  background: linear-gradient(135deg, #e2bf56, #f7e58d) !important;
  color: #050505 !important;
  border-color: rgba(255, 230, 140, .75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 10px 22px rgba(0, 0, 0, .22) !important;
}

/* Hover du bouton AJOUTER RDV SAV NF : doré lumineux, pas sombre */
#savnf .savnf-calendar-bottom-actions button[onclick^="openSavnfAppointment"]:hover,
#savnf .savnf-calendar-bottom-actions button[onclick*="openSavnfAppointment"]:hover,
#savnf .savnf-calendar-bottom-actions button[onclick*="openSavnfAppointment(savnfToday"]:hover,
#savnf .savnf-calendar-bottom-actions button[onclick*="openSavnfAppointment(savnfToday())"]:hover {
  background: linear-gradient(135deg, #e8c85f, #fff0a4) !important;
  color: #050505 !important;
  border-color: rgba(255, 238, 160, .95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 12px 26px rgba(0, 0, 0, .28),
    0 0 0 3px rgba(246, 178, 107, .12) !important;
}

/* Sécurité : AUJOURD'HUI reste sombre, sans toucher à Ajouter RDV */
#savnf .savnf-calendar-bottom-actions button[onclick*="goToCurrentSavnfMonth"],
#savnf .savnf-calendar-bottom-actions button[onclick*="savnfGoToday"],
#savnf .savnf-calendar-bottom-actions button[onclick*="goSavnfToday"] {
  background: #24252b !important;
  color: #ffffff !important;
  border-color: #34363d !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 8px 18px rgba(0, 0, 0, .18) !important;
}

/* ==========================================================
   SAV NF — CONCORDANCE MISE EN PAGE AVEC RECYCLAGE ET VISITEURS
   ========================================================== */

/*
  Objectif :
  - aligner SAV NF sur la mise en page RECYCLAGE / VISITEURS ;
  - ne pas changer la programmation ;
  - conserver la couleur SAV NF : #f6b26b ;
  - harmoniser titres, interlignes, espacements, grilles, calendriers,
    boutons, séparateurs, zones RDV / SANS RDV et registre.
*/

#savnf {
  --savnf-accent-final: #f6b26b;
  --savnf-accent-soft-final: #ffe7c4;
}

/* Titre principal : même structure que RECYCLAGE / VISITEURS */
#savnf .savnf-main-title-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin: 8px auto 26px !important;
}

#savnf .savnf-main-title,
#savnf h2.savnf-main-title {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  color: var(--savnf-accent-final) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(48px, 4vw, 72px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 14px rgba(246, 178, 107, .12) !important;
}

/* Cartes : même respiration que RECYCLAGE / VISITEURS */
#savnf .savnf-card,
#savnf .savnf-card-entrees,
#savnf .savnf-card-sorties,
#savnf .savnf-register-block {
  background: #151518 !important;
  border: 1px solid #34363d !important;
  border-radius: 22px !important;
  padding: 22px 24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 42px rgba(0,0,0,.22) !important;
  overflow: hidden !important;
}

/* Titres ENTRÉES / SORTIES / REGISTRE : même hauteur, interligne et marge */
#savnf .savnf-card-title,
#savnf .savnf-centered-card-title,
#savnf .savnf-register-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 0 22px !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  color: var(--savnf-accent-final) !important;
  background:
    linear-gradient(180deg, rgba(246, 178, 107, .16) 0%, rgba(246, 178, 107, .045) 100%),
    #111114 !important;
  border: 1px solid rgba(246, 178, 107, .50) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(246, 178, 107, .10),
    0 10px 28px rgba(0,0,0,.22) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .085em !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

/* Grille ENTRÉES : même proportion 3/4 RDV + 1/4 SANS RDV */
#savnf .savnf-entrees-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) 3px minmax(210px, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#savnf .savnf-entrees-rdv,
#savnf .savnf-entrees-sans-rdv {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-width: 0 !important;
  gap: 0 !important;
}

/* Titres RDV / SANS RDV : même position, marge et interligne */
#savnf .savnf-entrees-rdv > .savnf-subsection-title,
#savnf .savnf-entrees-sans-rdv > .savnf-subsection-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  color: var(--savnf-accent-soft-final) !important;
  background:
    linear-gradient(180deg, rgba(246, 178, 107, .08) 0%, rgba(246, 178, 107, .025) 100%),
    #121318 !important;
  border: 1px solid rgba(246, 178, 107, .34) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 6px 16px rgba(0,0,0,.16) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#savnf .savnf-entrees-rdv > .savnf-subsection-title::before,
#savnf .savnf-entrees-sans-rdv > .savnf-subsection-title::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  top: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(246,178,107,.55) 50%, transparent 100%) !important;
  pointer-events: none !important;
}

/* Séparateurs : mêmes dimensions que les deux autres onglets */
#savnf .savnf-entrees-separator {
  width: 3px !important;
  min-width: 3px !important;
  min-height: 100% !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(246, 178, 107, .18) 8%,
      rgba(246, 178, 107, .70) 50%,
      rgba(246, 178, 107, .18) 92%,
      transparent 100%) !important;
  box-shadow:
    0 0 0 1px rgba(246, 178, 107, .12),
    0 0 14px rgba(246, 178, 107, .10) !important;
}

#savnf .savnf-horizontal-separator {
  height: 4px !important;
  width: 100% !important;
  margin: 26px 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(246, 178, 107, .18) 10%,
      rgba(246, 178, 107, .78) 50%,
      rgba(246, 178, 107, .18) 90%,
      transparent 100%) !important;
  box-shadow:
    0 0 0 1px rgba(246, 178, 107, .10),
    0 0 16px rgba(246, 178, 107, .10) !important;
}

/* Mois / année : même alignement et interligne que les calendriers harmonisés */
#savnf .savnf-panel-month-title,
#savnf #savnfCalendarMonthLabel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 6px 0 12px !important;
  color: #ffe88d !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Calendrier SAV NF : mêmes dimensions que RECYCLAGE / VISITEURS en version ordinateur */
@media (min-width: 761px) {
  #savnf #savnfCalendar,
  #savnf #savnfCalendar.savnf-calendar-compact {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
  }

  #savnf .savnf-month-grid,
  #savnf .savnf-month-grid-compact {
    display: grid !important;
    grid-template-columns: 52px repeat(7, minmax(34px, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid #1a1a1c !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #111114 !important;
  }

  #savnf .savnf-month-grid .savnf-month-head,
  #savnf .savnf-month-grid-compact .savnf-month-head {
    min-height: 34px !important;
    height: auto !important;
    padding: 8px 3px !important;
    background: linear-gradient(180deg, #edd77a 0%, #d5b45b 100%) !important;
    color: #050505 !important;
    border: 1px solid #1a1a1c !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    text-align: center !important;
    box-shadow: none !important;
  }

  #savnf .savnf-month-grid .savnf-week-cell,
  #savnf .savnf-month-grid .savnf-month-cell,
  #savnf .savnf-month-grid-compact .savnf-week-cell,
  #savnf .savnf-month-grid-compact .savnf-month-cell {
    min-height: 48px !important;
    height: 48px !important;
    background: #f4f4f4 !important;
    color: #030303 !important;
    border: 1px solid #1a1a1c !important;
    border-radius: 0 !important;
    padding: 3px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 950 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #savnf .savnf-month-grid .savnf-week-cell,
  #savnf .savnf-month-grid-compact .savnf-week-cell {
    background: #eeeeee !important;
    display: grid !important;
    place-items: center !important;
  }

  #savnf .savnf-month-grid .savnf-month-cell.outside-month,
  #savnf .savnf-month-grid-compact .savnf-month-cell.outside-month {
    background: #d3d3d3 !important;
    color: #030303 !important;
    cursor: default !important;
  }

  #savnf .savnf-month-grid .savnf-month-cell.today,
  #savnf .savnf-month-grid .savnf-month-cell.is-today,
  #savnf .savnf-month-grid .savnf-month-cell.current-day,
  #savnf .savnf-month-grid-compact .savnf-month-cell.today,
  #savnf .savnf-month-grid-compact .savnf-month-cell.is-today,
  #savnf .savnf-month-grid-compact .savnf-month-cell.current-day {
    background: #6caf51 !important;
    color: #ffffff !important;
  }

  #savnf .savnf-month-grid .savnf-date-number,
  #savnf .savnf-month-grid-compact .savnf-date-number {
    display: block !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: inherit !important;
    text-align: center !important;
    margin-top: 0 !important;
  }
}

/* Boutons sous calendrier : mêmes espacements et dimensions */
#savnf .savnf-calendar-bottom-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

#savnf .savnf-calendar-bottom-actions button {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Zone SANS RDV : même interligne texte et respiration */
#savnf .savnf-sans-rdv-note {
  margin: 0 0 16px !important;
  color: #dbeafe !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#savnf .savnf-new-entry-button {
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Titre de la zone badges : sans encadré, aligné comme RECYCLAGE */
#savnf .savnf-sorties-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

#savnf .savnf-sorties-head .savnf-subsection-title {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--savnf-accent-final) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

#savnf .savnf-sorties-head .savnf-subsection-title::before {
  display: none !important;
}

#savnf .savnf-sorties-head p {
  margin: 0 !important;
  text-align: right !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Header registre : même structure que RECYCLAGE / VISITEURS */
#savnf .savnf-register-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 0 18px !important;
}

#savnf .savnf-register-header .savnf-card-title,
#savnf .savnf-register-header .savnf-register-title {
  margin: 0 !important;
}

#savnf .savnf-register-toggle-pretty,
#savnf #savnfRegisterToggle {
  width: 64px !important;
  height: 52px !important;
  min-width: 64px !important;
  min-height: 52px !important;
  border-radius: 18px !important;
}

/* Mobile : conserve le calendrier visible, mais harmonise les espacements généraux */
@media (max-width: 760px) {
  #savnf .savnf-main-title-wrap {
    margin: 8px auto 22px !important;
  }

  #savnf .savnf-main-title,
  #savnf h2.savnf-main-title {
    font-size: clamp(44px, 13vw, 64px) !important;
    letter-spacing: .045em !important;
  }

  #savnf .savnf-card,
  #savnf .savnf-card-entrees,
  #savnf .savnf-card-sorties,
  #savnf .savnf-register-block {
    padding: 18px 16px !important;
    border-radius: 20px !important;
  }

  #savnf .savnf-card-title,
  #savnf .savnf-centered-card-title,
  #savnf .savnf-register-title {
    min-height: 48px !important;
    margin: 0 0 18px !important;
    padding: 10px 14px !important;
    font-size: 18px !important;
    letter-spacing: .06em !important;
  }

  #savnf .savnf-entrees-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #savnf .savnf-entrees-separator {
    width: 100% !important;
    height: 4px !important;
    min-height: 4px !important;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(246, 178, 107, .18) 10%,
        rgba(246, 178, 107, .78) 50%,
        rgba(246, 178, 107, .18) 90%,
        transparent 100%) !important;
  }

  #savnf .savnf-entrees-rdv > .savnf-subsection-title,
  #savnf .savnf-entrees-sans-rdv > .savnf-subsection-title {
    min-height: 44px !important;
    margin: 0 0 14px !important;
    font-size: 14px !important;
    letter-spacing: .10em !important;
  }

  #savnf .savnf-horizontal-separator {
    margin: 22px 0 !important;
  }

  #savnf .savnf-sorties-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #savnf .savnf-sorties-head p {
    text-align: left !important;
  }
}

/* ==========================================================
   ADMIN — ENVOI AUTOMATIQUE RAPPORT JOURNALIER
   ========================================================== */

.admin-report-mail-card {
  border-color: rgba(255, 217, 102, .24) !important;
}

.admin-report-mail-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 16px !important;
}

.admin-report-mail-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 110px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

.admin-report-mail-status.enabled {
  background: rgba(44, 190, 120, .16) !important;
  border: 1px solid rgba(44, 190, 120, .40) !important;
  color: #8ff0ba !important;
}

.admin-report-mail-status.disabled {
  background: rgba(239, 68, 68, .12) !important;
  border: 1px solid rgba(239, 68, 68, .32) !important;
  color: #fecaca !important;
}

.admin-report-mail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.admin-report-mail-grid label,
.admin-report-mail-fixed {
  display: grid !important;
  gap: 8px !important;
}

.admin-report-mail-grid label span,
.admin-report-mail-fixed strong,
.admin-report-mail-toggle span {
  color: #ffd966 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.admin-report-mail-toggle {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border: 1px solid #34363d !important;
  border-radius: 14px !important;
  background: #111114 !important;
}

.admin-report-mail-toggle input {
  width: 20px !important;
  height: 20px !important;
}

.admin-report-mail-fixed {
  min-height: 72px !important;
  padding: 14px !important;
  border: 1px solid #34363d !important;
  border-radius: 14px !important;
  background: #111114 !important;
}

.admin-report-mail-fixed span {
  color: #fff !important;
  font-weight: 850 !important;
}

.admin-report-mail-grid textarea {
  width: 100% !important;
  min-height: 92px !important;
  border-radius: 14px !important;
  border: 1px solid #34363d !important;
  background: #111114 !important;
  color: #fff !important;
  padding: 12px !important;
  font-weight: 750 !important;
  resize: vertical !important;
}

.admin-report-mail-body-preview {
  margin-top: 16px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 217, 102, .18) !important;
  background: rgba(255, 217, 102, .045) !important;
}

.admin-report-mail-body-preview strong {
  display: block !important;
  color: #ffd966 !important;
  margin-bottom: 10px !important;
  font-weight: 950 !important;
}

.admin-report-mail-body-preview p {
  margin: 0 !important;
  color: #dbeafe !important;
  line-height: 1.45 !important;
}

.admin-report-mail-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
  color: #dbeafe !important;
  font-size: 13px !important;
}

.admin-report-mail-error {
  grid-column: 1 / -1 !important;
  color: #fecaca !important;
}

.admin-report-mail-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
}

.admin-report-mail-actions button {
  min-width: 180px !important;
}

@media (max-width: 760px) {
  .admin-report-mail-head,
  .admin-report-mail-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .admin-report-mail-grid,
  .admin-report-mail-meta {
    grid-template-columns: 1fr !important;
  }

  .admin-report-mail-actions button {
    width: 100% !important;
  }
}

/* ==========================================================
   SAV NF — MOBILE BOUTONS CALENDRIER 2X2
   ========================================================== */

/*
  Correction demandée :
  Sur mobile, les 4 boutons sous le calendrier SAV NF doivent être en 2 colonnes x 2 lignes,
  comme les autres onglets, et non sur une seule ligne.
*/

@media (max-width: 760px) {
  #savnf .savnf-calendar-bottom-actions,
  #savnf .savnf-month-actions,
  #savnf .savnf-calendar-actions,
  #savnf .month-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #savnf .savnf-calendar-bottom-actions button,
  #savnf .savnf-month-actions button,
  #savnf .savnf-calendar-actions button,
  #savnf .month-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  #savnf .savnf-calendar-bottom-actions > *,
  #savnf .savnf-month-actions > *,
  #savnf .savnf-calendar-actions > *,
  #savnf .month-actions > * {
    min-width: 0 !important;
  }
}

@media (max-width: 430px) {
  #savnf .savnf-calendar-bottom-actions,
  #savnf .savnf-month-actions,
  #savnf .savnf-calendar-actions,
  #savnf .month-actions {
    gap: 10px !important;
  }

  #savnf .savnf-calendar-bottom-actions button,
  #savnf .savnf-month-actions button,
  #savnf .savnf-calendar-actions button,
  #savnf .month-actions button {
    height: 56px !important;
    padding: 0 10px !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
  }
}

/* ==========================================================
   MOTS DE PASSE — BOUTON VISUALISATION
   ========================================================== */

.password-visibility-field {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

.password-visibility-field > input {
  width: 100% !important;
  padding-right: 92px !important;
  box-sizing: border-box !important;
}

.password-visibility-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 34px !important;
  min-width: 66px !important;
  width: auto !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(246, 211, 112, .35) !important;
  background: rgba(246, 211, 112, .14) !important;
  color: #f6d370 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.password-visibility-toggle:hover {
  background: rgba(246, 211, 112, .24) !important;
  border-color: rgba(246, 211, 112, .58) !important;
}

.password-visibility-toggle[data-visible="1"] {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #ffffff !important;
}

.login-card .password-visibility-field,
#setupForm .password-visibility-field,
#loginForm .password-visibility-field {
  margin: 0 !important;
}

.admin-grid-compact .password-visibility-field,
.card form .password-visibility-field {
  min-width: 0 !important;
}

@media (max-width: 760px) {
  .password-visibility-field > input {
    padding-right: 84px !important;
  }

  .password-visibility-toggle {
    right: 9px !important;
    height: 32px !important;
    min-width: 60px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 11px !important;
  }
}

/* ==========================================================
   ANTI-SUGGESTIONS NAVIGATEUR
   ========================================================== */

/*
  Masque le bouton natif "révéler mot de passe" de certains navigateurs Edge/IE
  pour garder uniquement notre bouton Voir / Masquer.
*/

input::-ms-reveal,
input::-ms-clear {
  display: none !important;
}

input,
textarea {
  -webkit-text-security: none;
}

/* ==========================================================
   NOMS ET PRÉNOMS — MAJUSCULES AUTOMATIQUES
   ========================================================== */

.person-name-uppercase-field {
  text-transform: uppercase !important;
}

/* ==========================================================
   MOTS DE PASSE — BOUTON ŒIL DISCRET
   ========================================================== */

.password-visibility-field > input {
  padding-right: 48px !important;
}

.password-visibility-toggle,
.password-eye-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(246, 211, 112, .24) !important;
  background: rgba(0, 0, 0, .18) !important;
  color: #f6d370 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 4 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.password-visibility-toggle:hover,
.password-eye-toggle:hover {
  background: rgba(246, 211, 112, .12) !important;
  border-color: rgba(246, 211, 112, .48) !important;
}

.password-visibility-toggle[data-visible="1"],
.password-eye-toggle[data-visible="1"] {
  background: rgba(246, 211, 112, .16) !important;
  border-color: rgba(246, 211, 112, .55) !important;
  color: #ffffff !important;
}

.password-eye-icon {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.password-eye-icon circle {
  fill: currentColor !important;
  stroke: none !important;
}

.login-card .password-visibility-toggle,
.login-card .password-eye-toggle,
#loginForm .password-visibility-toggle,
#loginForm .password-eye-toggle,
#setupForm .password-visibility-toggle,
#setupForm .password-eye-toggle {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  right: 12px !important;
}

.login-card .password-eye-icon,
#loginForm .password-eye-icon,
#setupForm .password-eye-icon {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 760px) {
  .password-visibility-field > input {
    padding-right: 46px !important;
  }

  .password-visibility-toggle,
  .password-eye-toggle {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    right: 10px !important;
  }

  .password-eye-icon {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ==========================================================
   EXPÉDITION — HORODATAGE CACHÉ + CHAUFFEUR PRÉDICTIF
   ========================================================== */

.expedition-hidden-timestamp {
  display: none !important;
}

.predictive-driver-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.predictive-driver-field input[list] {
  width: 100% !important;
  min-width: 0 !important;
  text-transform: uppercase !important;
}

.predictive-driver-field input[type="hidden"] {
  display: none !important;
}

@media (max-width: 760px) {
  .predictive-driver-field {
    grid-template-columns: 1fr !important;
  }

  .predictive-driver-field .mini {
    width: 100% !important;
  }
}

/* ==========================================================
   EXPÉDITION — MODALE PROPRE HORODATAGE CACHÉ
   ========================================================== */

#recordFields.expedition-clean-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: end !important;
}

.expedition-clean-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.expedition-clean-field label {
  color: var(--gold-light) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .03em !important;
}

#recordFields.expedition-clean-grid .span-12 {
  grid-column: span 12 !important;
}

#recordFields.expedition-clean-grid .span-6 {
  grid-column: span 6 !important;
}

#recordFields.expedition-clean-grid .span-4 {
  grid-column: span 4 !important;
}

#recordFields.expedition-clean-grid .span-3 {
  grid-column: span 3 !important;
}

.expedition-auto-time-note {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226, 191, 86, .22) !important;
  background: rgba(226, 191, 86, .07) !important;
  color: rgba(255, 255, 255, .74) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.expedition-inline-create,
.expedition-driver-predictive {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.expedition-inline-create > select,
.expedition-driver-predictive > input[list] {
  min-width: 0 !important;
  width: 100% !important;
}

.expedition-driver-predictive > input[list] {
  text-transform: uppercase !important;
}

.expedition-driver-predictive input[type="hidden"] {
  display: none !important;
}

.expedition-inline-create > .mini,
.expedition-driver-predictive > .mini {
  height: 58px !important;
  white-space: nowrap !important;
  align-self: stretch !important;
}

@media (max-width: 900px) {
  #recordFields.expedition-clean-grid .span-6,
  #recordFields.expedition-clean-grid .span-4,
  #recordFields.expedition-clean-grid .span-3 {
    grid-column: span 12 !important;
  }

  .expedition-inline-create,
  .expedition-driver-predictive {
    grid-template-columns: 1fr !important;
  }

  .expedition-inline-create > .mini,
  .expedition-driver-predictive > .mini {
    width: 100% !important;
  }
}

/* ==========================================================
   BADGES — MENUS DÉROULANTS AVEC SAISIE PRÉDICTIVE
   ========================================================== */

.badge-dropdown-input {
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.badge-dropdown-input::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
  opacity: .8 !important;
}

.badge-dropdown-input:focus {
  border-color: var(--gold) !important;
}

/* ==========================================================
   EXPÉDITION — CHAUFFEUR PRÉDICTIF STYLE SELECT TRANSPORTEUR
   ========================================================== */

/*
  Demande traitée :
  - Le champ chauffeur prédictif doit reprendre l’apparence visuelle du champ transporteur.
  - Fond noir.
  - Encadrement identique.
  - Largeur pleine.
  - Flèche visuelle type select.
  - Aucun changement de programmation.

  Note importante :
  - Le panneau interne des suggestions du <datalist> reste piloté par le navigateur.
  - Son rendu natif peut varier selon Chrome / Edge / mobile.
  - En revanche, le champ visible est harmonisé au style du select transporteur.
*/

.expedition-driver-predictive,
.predictive-driver-field {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.expedition-driver-predictive > input[list],
.predictive-driver-field > input[list],
.predictive-driver-field input[list],
#r_chauffeurSearch {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 0 56px 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid #3b3d46 !important;
  background-color: #101114 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 18px 18px !important;
}

.expedition-driver-predictive > input[list]::placeholder,
.predictive-driver-field > input[list]::placeholder,
.predictive-driver-field input[list]::placeholder,
#r_chauffeurSearch::placeholder {
  color: rgba(255,255,255,.42) !important;
  text-transform: uppercase !important;
}

.expedition-driver-predictive > input[list]:focus,
.predictive-driver-field > input[list]:focus,
.predictive-driver-field input[list]:focus,
#r_chauffeurSearch:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(226, 191, 86, .18) !important;
}

.expedition-driver-predictive > .mini,
.predictive-driver-field > .mini {
  min-width: 92px !important;
  height: 58px !important;
  border-radius: 14px !important;
  align-self: stretch !important;
}

@media (max-width: 900px) {
  .expedition-driver-predictive,
  .predictive-driver-field {
    grid-template-columns: 1fr !important;
  }

  .expedition-driver-predictive > .mini,
  .predictive-driver-field > .mini {
    width: 100% !important;
  }
}

/* ==========================================================
   MOBILE — COMMANDES VOCALES DIRECTES
   ========================================================== */

.mobile-voice-button,
.mobile-voice-status {
  display: none !important;
}

@media (max-width: 760px) {
  .mobile-voice-button {
    position: fixed !important;
    right: 16px !important;
    bottom: 18px !important;
    z-index: 99990 !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(246, 211, 112, .68) !important;
    background: linear-gradient(135deg, rgba(246, 211, 112, .96), rgba(201, 161, 55, .96)) !important;
    color: #050505 !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .48) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  .mobile-voice-icon {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .mobile-voice-dot {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #1f2937 !important;
    border: 1px solid rgba(255,255,255,.55) !important;
  }

  .mobile-voice-button.listening .mobile-voice-dot {
    background: #ef4444 !important;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, .18) !important;
  }

  .mobile-voice-button.listening {
    animation: mobileVoicePulse 1.05s infinite ease-in-out !important;
  }

  .mobile-voice-status {
    position: fixed !important;
    left: 14px !important;
    right: 84px !important;
    bottom: 20px !important;
    z-index: 99989 !important;
    min-height: 48px !important;
    padding: 10px 13px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(246, 211, 112, .28) !important;
    background: rgba(15, 16, 20, .96) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .44) !important;
    backdrop-filter: blur(8px) !important;
    align-items: center !important;
  }

  .mobile-voice-status.show {
    display: flex !important;
  }

  .mobile-voice-status[data-tone="success"] {
    border-color: rgba(34, 197, 94, .55) !important;
  }

  .mobile-voice-status[data-tone="warn"] {
    border-color: rgba(239, 68, 68, .55) !important;
  }

  .mobile-voice-status[data-tone="confirm"] {
    border-color: rgba(246, 211, 112, .75) !important;
  }
}

@keyframes mobileVoicePulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.06);
    filter: brightness(1.12);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* ==========================================================
   FORMATION — COMMANDES VOCALES MOBILES
   ========================================================== */

.formation-mobile-voice-commands {
  margin-top: 18px !important;
  padding: 20px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(246, 211, 112, .28) !important;
  background: rgba(10, 10, 12, .52) !important;
}

.formation-mobile-voice-commands h3 {
  margin: 0 0 8px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.formation-mobile-voice-commands p {
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.78) !important;
  font-weight: 750 !important;
}

.formation-voice-command-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 10px !important;
}

.formation-voice-command {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: #101114 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

.formation-voice-note {
  margin-top: 14px !important;
  color: var(--gold-light) !important;
}

/* ==========================================================
   VISITEURS / PRESTATAIRES — DÉCLARATION VÉHICULE
   ========================================================== */

.vehicle-checkbox-line {
  width: 100% !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid #3b3d46 !important;
  background: #101114 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

.vehicle-checkbox-line input[type="checkbox"] {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  accent-color: var(--gold) !important;
}

.vehicle-plate-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 100% !important;
}

.vehicle-plate-field.hidden {
  display: none !important;
}

.vehicle-plate-field label {
  color: var(--gold-light) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}

.vehicle-plate-field input {
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
}

.vehicle-declaration-box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

.vehicle-checkbox-line-modal {
  min-height: 64px !important;
}

@media (max-width: 760px) {
  .vehicle-checkbox-line {
    min-height: 50px !important;
  }
}