body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #d8d8d8;
}

/* =================== PAGE CONNEXION (index) =================== */
/* Bandeau avec le bouton "Se connecter" */
.container {
  max-width: 1200px;
  margin: 2.5rem auto 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

/* Bloc qui s’ouvre (id="divacacher") */
.section_modif {
  max-width: 720px;
  margin: 0 auto 2rem;
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid #e1e4e8;
}

/* Le formulaire réutilise .formGeneral — il manquait le type=password */
.formGeneral input[type='password'] {
  width: 100%;
  max-width: 400px;
  padding: 0.6rem;
  margin-top: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.formGeneral input[type='password']:focus {
  border-color: #1e88e5;
  box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.25);
  outline: none;
}

/* Lien "Espace administrateurs" sous le formulaire */
.section_modif + div a {
  display: inline-block;
  margin: 0.75rem auto 0;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  color: #1e1e1e;
  background: #f5f7fb;
  border: 1px solid #e6e9ef;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.section_modif + div a:hover {
  background: #f0f4ff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
  .section_modif {
    margin: 0.75rem;
    padding: 1rem;
  }
  .container {
    margin: 1.5rem auto 0.75rem;
  }
}

/* ===== œil show/hide mot de passe ===== */
.pwd-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pwd-field input[type='password'],
.pwd-field input[type='text'] {
  /* espace pour le bouton œil */
  padding-right: 2.4rem;
}

.pwd-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%); /* <-- reste toujours actif */
  border: none;
  background: transparent;
  padding: 0.25rem;
  cursor: pointer;
  line-height: 0;
  border-radius: 6px;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease; /* pas de transition sur transform */
}
/* 3) À l’hover/focus/active : ne touche pas à transform */
.pwd-toggle:hover,
.pwd-toggle:focus,
.pwd-toggle:active {
  transform: translateY(-50%) !important; /* <-- on conserve le centrage */
  box-shadow: none;
  background: rgba(0, 0, 0, 0.04); /* optionnel */
}

.pwd-toggle .ico {
  display: block;
  fill: #777;
}
.pwd-toggle .eye-off {
  display: none;
}
.pwd-toggle[aria-pressed='true'] .eye-on {
  display: none;
}
.pwd-toggle[aria-pressed='true'] .eye-off {
  display: block;
}

.menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: #ffffffcc; /* blanc semi transparent */
  backdrop-filter: blur(6px); /* effet verre dépoli */
  border-radius: 12px;
  margin: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  flex-wrap: wrap;
}

.logo-badge {
  background: linear-gradient(155deg, #ffffff 0%, #cecccc 100%);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.logo-badge .logo {
  height: 60px;
  width: auto;
  display: block;
  filter: drop-shadow(
    0 0 1px rgba(0, 0, 0, 0.25)
  ); /* léger contour sombre pour mieux lire le texte */
}

/* Liens */
.nav-luxe {
  padding: 1.2rem 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.nav-luxe ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-luxe a {
  position: relative;
  color: #2c2c2c;
  text-decoration: none;
  padding: 0.3rem 0;
  transition: color 0.3s ease;
}

/* Barre animée fine */
.nav-luxe a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #5a7cff 0%, #1ec8ff 100%);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.35s ease;
}

.nav-luxe a:hover {
  color: #0f4cff;
}

.nav-luxe a:hover::after,
.nav-luxe a.active::after {
  width: 60%;
}

/* Effet focus subtil */
.nav-luxe a:focus {
  outline: none;
  color: #0f4cff;
}

/* Sous-menus top */
.nav-luxe li {
  position: relative;
}
.nav-luxe .has-submenu > a::after {
  content: '▾';
  font-size: 0.8em;
  margin-left: 0.35rem;
}
.nav-luxe .submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  min-width: 240px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}
.nav-luxe .submenu li {
  display: block;
}
.nav-luxe .submenu a {
  display: block;
  padding: 0.55rem 0.8rem;
  color: #2c2c2c;
  white-space: nowrap;
}
.nav-luxe .submenu a:hover {
  background: #f0f4ff;
}
.nav-luxe .submenu .sep {
  height: 1px;
  margin: 0.25rem 0.5rem;
  background: #ececec;
}
.nav-luxe .has-submenu:hover > .submenu {
  display: block;
}

/* Responsive: sous-entrées indentées */
#topnav_responsive_menu li.sub a {
  padding-left: 2rem;
  font-size: 0.95rem;
  opacity: 0.95;
}

.bloc-dispo-separator {
  /* 👉 occupe toute la ligne de la grille */
  grid-column: 1 / -1;

  margin: 2.5rem 0 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bloc-dispo-title {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  margin: 0;
  text-align: left; /* ou center si tu préfères */
}

/* Zone droite */
.right-zone {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.agence-selector-container {
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
}
.agence-selector-container select {
  border: none;
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Notifications */
.notification-container {
  position: relative;
}
.bell-icon {
  width: 22px;
  filter: invert(35%);
}
.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e63946;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  padding: 2px 6px;
  display: none;
}

/* Burger menu */
#topnav_hamburger_icon {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
#topnav_hamburger_icon span {
  height: 3px;
  width: 24px;
  background: #333;
  border-radius: 2px;
}

/* Responsive menu */
#topnav_responsive_menu {
  display: none;
  background: #fff;
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#topnav_responsive_menu.open {
  display: block;
}
#topnav_responsive_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#topnav_responsive_menu li a {
  display: block;
  padding: 0.8rem 1rem;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}
#topnav_responsive_menu li a:hover {
  background: #f0f4ff;
}

/* Responsive breakpoints */
@media (max-width: 900px) {
  .menu-bar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Centrer la bulle du logo */
  .logo-badge {
    margin-bottom: 0.5rem;
  }

  /* La nav principale se cache toujours */
  .nav-luxe {
    display: none;
  }

  /* Centrer la zone de droite (sélecteur + cloche + burger) */
  .right-zone {
    justify-content: center;
    gap: 0.8rem;
  }

  #topnav_hamburger_icon {
    display: flex;
  }
}

/* État compact quand on a scrollé */
.menu-bar.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0; /* enlève le margin du style initial */
  border-radius: 0; /* plein écran en haut */
  padding: 0.3rem 0.8rem; /* réduit la hauteur */
  z-index: 9999;
}

/* Cache le logo dans cet état */
.menu-bar.scrolled .logo-badge {
  display: none;
}

/* =============== TITRES GÉNÉRAUX =============== */
h3 {
  font-size: 2rem;
  font-weight: 600;
  color: #222;
  text-align: center;
  margin: 3rem 0 1.5rem;
  position: relative;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

/* =============== MESSAGES/ALERTES =============== */
p[style*='green'],
p[style*='red'],
p.access-warning {
  max-width: 880px;
  margin: 2rem auto;
  padding: 1.2rem 1.6rem;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 8px;
  background: #ffffff;
  border-left: 4px solid transparent;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
p[style*='green'] {
  border-left-color: #48b46a;
}
p[style*='red'] {
  border-left-color: #e74c3c;
}
p.access-warning {
  border-left-color: #f4c542;
  background: #fffcf0;
}

/* =============== BARRE DE TACHES =============== */
/* ===== Barre des tâches collée sous le menu ===== */
.taskbar {
  position: sticky;
  top: 0.75rem; /* sous le menu */
  z-index: 9998;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: min(1200px, calc(100% - 2rem));
  margin: 0.5rem auto 1rem;
  padding: 0.5rem;
  background: #ffffffcc; /* verre dépoli comme le menu */
  backdrop-filter: blur(6px);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.taskbar .tb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e1e1e;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.taskbar .tb-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  background: #f5f8ff;
}
.taskbar .tb-item:active {
  transform: translateY(0);
}
.taskbar .tb-ico {
  font-size: 1.1rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .taskbar {
    gap: 0.4rem;
  }
  .taskbar .tb-item {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
}

/* ===== Mode widget flottant (vertical) ===== */
.taskbar.collapsed {
  position: fixed;
  top: auto;
  right: 20px;
  bottom: 90px; /* au-dessus du footer */
  width: auto;
  padding: 0.35rem;
  gap: 0.4rem;
  display: flex;
  flex-direction: column; /* <-- empile verticalement */
  align-items: center;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  background: #ffffffcc;
  backdrop-filter: blur(6px);
}

.taskbar.collapsed .tb-label {
  display: none; /* icônes seules en widget */
}

.taskbar.collapsed .tb-item {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  position: relative; /* utile pour la bulle optionnelle ci-dessous */
}

/* (optionnel) À l'hover, on ré-affiche les libellés pour aider */
@media (hover: hover) {
  .taskbar.collapsed:hover .tb-label {
    display: inline;
  }
  .taskbar.collapsed:hover .tb-item {
    border-radius: 999px;
    width: auto;
    height: auto;
    padding: 0.45rem 0.9rem;
  }
}

/* =============== BOUTONS =============== */

button,
.email-button {
  font-family: inherit;
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #ccae04;
  border-radius: 4px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
button:not(.pwd-toggle):hover,
.email-button:hover {
  background: #f2a90c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* Bouton spécifique principal */
#showCalculatorBtn {
  margin: 3rem auto 1.5rem;
  background: #ccae04;
}

/* =============== CALCULATEUR / CARTES =============== */
#calculatorContainer {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  max-width: 880px;
  margin: 2.5rem auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
#calculatorForm {
  display: grid;
  gap: 1.2rem;
}
#calculatorForm label {
  font-weight: 500;
  font-size: 0.95rem;
  color: #333;
}
#calculatorForm select,
#calculatorForm input[type='number'] {
  padding: 0.7rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  background: #fafafa;
  transition: border-color 0.3s ease;
}
#calculatorForm select:focus,
#calculatorForm input[type='number']:focus {
  border-color: #40916c;
  outline: none;
}
#price {
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: #006ca6;
  margin-top: 1.4rem;
}

/* =============== CALENDRIER =============== */
.calendar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #40916c;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}
.calendar-link img {
  width: 22px;
  height: 22px;
}
.calendar-link:hover {
  background: #ccae04;
  transform: translateY(-1px);
}

/* =============== ALERTES LISTE =============== */
.alert-banner {
  background: linear-gradient(135deg, #fefefe 0%, #f1f7f3 100%);
  border-left: 6px solid #006ca6;
  border-radius: 10px;
  padding: 1.6rem 2rem;
  margin: 3rem auto;
  max-width: 900px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.alert-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.alert-message {
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #1b4332;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alert-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.alert-list li {
  padding: 0.8rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: #333;
  border-bottom: 1px dashed #bbb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.alert-list li:last-child {
  border-bottom: none;
}

/* Mettre en valeur les indicateurs ou icônes */
.alert-list li::before {
  content: '⚡';
  color: #006ca6;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.relance-indicator {
  color: #e63946;
  font-size: 1.3rem;
  font-weight: bold;
  margin-left: 0.6rem;
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.35rem;
  border: 1px solid #9aa1a7;
  border-radius: 50%;
  background: #f5f7fa;
  font-size: 0.85em;
  line-height: 1;
  cursor: help;
  color: #333;
}
.help-tip:focus {
  outline: 2px solid #7aa7ff;
  outline-offset: 2px;
}

/* ====== SECTION PRODUITS ====== */
.sectionProduits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.8rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  background: #d8d8d8;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  justify-items: center;
  align-items: start;
}

/* Par défaut, cartes masquées (le JS ajoute .show) */
.produits {
  display: none !important ;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.produits.show {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
}

/* === CARTE PRODUIT === */
.produits {
  background: #fff;
  border-radius: 14px;
  padding: 1.2rem;
  width: 100%;
  min-height: 470px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* au lieu de space-between */
  gap: 0.75rem; /* espace régulier entre blocs internes */
  align-self: start;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #006ca6;
  border-bottom: 4px solid #006ca6;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.produits:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* === TITRE === */
.produits h3 {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  text-transform: uppercase;
  margin: 0.6rem 0 1rem;
}
.more-details {
  margin: 0.4rem 0 0.6rem;
  border: 1px solid #e3e7ed;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.more-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  font-weight: 600;
  color: #106ebe;
  position: relative;
}
.more-details > summary::-webkit-details-marker {
  display: none;
}
.more-details > summary::after {
  content: '+';
  position: absolute;
  right: 0.8rem;
  top: 0.55rem;
  font-weight: 700;
}
.more-details[open] > summary::after {
  content: '−';
}

.more-details .prod-subtitle {
  padding: 0.2rem 0.95rem 0.6rem;
  font-size: 0.95rem;
  color: #424a53;
  font-style: italic; /* aspect “sous-titre” */
}

.more-details .prod-extra {
  margin: 0;
  padding: 0.3rem 1.1rem 0.8rem 1.3rem;
  color: #0b0d0f;
}
.more-details .prod-extra li {
  margin: 0.15rem 0;
}

/* === IMAGE PRODUIT === */
.produits img {
  display: block;
  margin: 0.5rem auto;
  max-width: 220px;
  max-height: 140px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}
.produits img:hover {
  transform: scale(1.03);
}

.due-over {
  color: #b42318;
  font-weight: 700;
} /* rouge + gras */

/* QR agrandi */
.large-qr {
  max-width: 300px !important;
  max-height: 300px !important;
  z-index: 999;
  position: relative;
  border: 2px solid #0077cc;
}

.puce_disp_div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 1rem;
  flex-wrap: wrap; /* nécessaire */
}
.bar-wrap {
  flex: 0 0 100%; /* force la ligne du dessous */
  display: flex; /* conteneur pour centrer la mini-barre */
  justify-content: center;
  margin-top: 0.6rem 0rem;
}
.mini-bar {
  display: block;
  width: 60px;
  height: 3px;
  background: #3a3a3a;
  border-radius: 2px;
  opacity: 0.3;
}

/* titre inchangé */
.bar-title {
  text-align: center;
}
.bar-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #3a3a3a;
  margin: 0.6rem auto 0;
  border-radius: 2px;
  opacity: 0.3;
}

#puce_disp img {
  width: 18px;
  height: 18px;
}
#disponible {
  color: #2ecc71;
  font-weight: 600;
  font-size: 0.9rem;
}
#reservee {
  color: #007bff;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
}
#indisponible {
  color: #dc3545;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
}

/* Symbole danger amélioré */
.puce_disp_div .resa_danger {
  font-size: 1.3rem;
  color: #ff0000;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.6);
  animation: pulseDanger 1.5s infinite;
  cursor: help;
  transition: transform 0.2s ease;
}
.puce_disp_div .resa_danger:hover {
  transform: scale(1.3) rotate(-5deg);
}
@keyframes pulseDanger {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* === ETAT SERVICE SWITCH === */

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}
.switch input {
  display: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #ff4d4f;
}
input:checked + .slider:before {
  transform: translateX(22px);
}
.etat-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #555;
  flex-shrink: 0;
}
.etat-switch p {
  margin: 0;
}

/* === STYLE HORS SERVICE === */
.produits.hors-service,
.produits[style*='f8fc7b'] {
  background: linear-gradient(135deg, #ffe6e6, #fff);
  border: 2px solid #ff4d4f;
}
.produits.hors-service h3 {
  color: #b71c1c;
}
.produits.hors-service::before {
  content: '🚧 HORS SERVICE';
  display: block;
  background: #ff4d4f;
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* === TEXTE CONTENU === */
.produits_contenu {
  background: #fafbfc;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  border: 1px solid #eee;
}
.produits_contenu h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}
.produits_contenu p {
  margin-bottom: 0.6rem;
  color: #444;
}

/* === TEXTE FACTURATION === */
.text_loc {
  background: #f7f8fa;
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid #eee;
  margin-top: 0.8rem;
  text-align: center;
  border-radius: 6px;
}

/* === BOUTONS === */
.button_produits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1rem;
}
.button_produits a button,
.button_produits button {
  border: none;
  border-radius: 50px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.button_produits a button:hover,
.button_produits button:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Couleurs boutons */
.button_modifier {
  background: linear-gradient(135deg, #00c853, #009624);
}
.button_modifier_R {
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
}
.button_modifier_i {
  background: linear-gradient(135deg, #ffa726, #fb8c00);
}
.button_imprimer {
  background: linear-gradient(135deg, #7e57c2, #5e35b1);
}
.button_fin_loc {
  background: linear-gradient(135deg, #26c6da, #00acc1);
}
.button_supprimer {
  background: linear-gradient(135deg, #ef5350, #e53935);
}
/* 🔧 Réduction de l'image pour la suppression des composants */
.produits .delete-icon {
  width: 18px; /* avant 24px */
  height: 18px; /* avant 24px */
  margin: 2px; /* réduit un peu la marge */
}
.produits .delete-icon:hover {
  transform: scale(1.1); /* garde un léger effet au survol */
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
  .sectionProduits {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .button_produits {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =============== FILTRES =============== */
#myBtnContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 2.5rem auto;
}
#myBtnContainer .btn {
  background: #f7f7f7;
  color: #333;
  border: 1px solid #ccc;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}
#myBtnContainer .btn:hover {
  background: #f2a90c;
  border-color: #40916c;
  color: #006ca6;
}
#myBtnContainer .btn.active {
  background: #ccae04;
  color: #fff;
  border: none;
}

/* ====== FORMULAIRE MANQUANT ====== */
form[name='formulaire_manquant'] {
  max-width: 900px;
  margin: 2rem auto;
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
  border: 1px solid #e1e4e8;
}

form[name='formulaire_manquant'] p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.4;
}

form[name='formulaire_manquant'] h3 {
  font-size: 1.3rem;
  color: #004f9e;
  margin-bottom: 1rem;
}

form[name='formulaire_manquant'] .categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
}

form[name='formulaire_manquant'] .categories div {
  text-align: left;
  flex: 1 1 200px;
}

form[name='formulaire_manquant'] input[type='radio'] {
  margin-right: 0.4rem;
  transform: scale(1.1);
  accent-color: #004f9e;
}

#comment_section {
  margin: 1rem auto;
  text-align: left;
}
#comment_section label {
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}
#comment_section textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
  font-size: 0.95rem;
}

form[name='formulaire_manquant'] input[type='submit'] {
  margin-top: 1.2rem;
  background: linear-gradient(135deg, #00b894, #00a884);
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
form[name='formulaire_manquant'] input[type='submit']:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ====== AJOUT PRODUIT ====== */
#new_product {
  max-width: 1000px;
  margin: 3rem auto;
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #e1e4e8;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeSlideIn 0.6s ease forwards;
}
@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#titre_ajout_produit {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #004f9e;
}

.formGeneral h3 {
  font-size: 1rem;
  margin: 1rem 0 0.5rem;
  color: #333;
}

/* Champs de saisie standards */
.formGeneral input[type='text'],
.formGeneral input[type='date'],
.formGeneral input[type='number'],
.formGeneral input[type='file'],
.formGeneral textarea,
.formGeneral input[type='tel'],
.formGeneral input[type='email'],
.formGeneral select {
  width: 100%;
  max-width: 400px;
  padding: 0.6rem;
  text-align: center;
  margin-top: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.formGeneral input:not([type='radio']):not([type='checkbox']),
.formGeneral select,
.formGeneral label,
.formGeneral textarea {
  /* passe en bloc */
  width: 100%; /* garde ton width/max-width actuels */
  max-width: 400px;
  margin: 0.35rem auto 1rem; /* auto = centré */
}

/* Effet focus pour tous les champs */
.formGeneral input[type='text']:focus,
.formGeneral input[type='date']:focus,
.formGeneral input[type='number']:focus,
.formGeneral input[type='file']:focus,
.formGeneral textarea:focus,
.formGeneral input[type='tel']:focus,
.formGeneral input[type='email']:focus,
.formGeneral select:focus {
  border-color: #1e88e5;
  box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.25);
  outline: none;
}

/* Etat d'erreur possible */
.formGeneral input[type='tel'].error,
.formGeneral input[type='email'].error,
.formGeneral select.error {
  border-color: #e53935;
  background: #fff5f5;
}
.formGeneral input[type='tel'].error:focus,
.formGeneral input[type='email'].error:focus,
.formGeneral select.error:focus {
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.25);
}

/* Textarea */
.formGeneral textarea {
  resize: vertical;
  min-height: 80px;
}

/* Select spécifique */
.formGeneral select {
  appearance: none;
  background: #fff
    url('data:image/svg+xml;utf8,<svg fill="%23004f9e" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>')
    no-repeat right 0.75rem center/1rem auto;
  cursor: pointer;
}

/* Radios */
.formGeneral input[type='radio'] {
  margin: 0.5rem 0.5rem 0.5rem 0;
  transform: scale(1.1);
  accent-color: #004f9e;
}

/* Boutons submit */
.formGeneral input[type='submit'] {
  margin-top: 1.5rem;
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.formGeneral input[type='submit']:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Zones catégorie et composants */
.formGeneral .categorie-zone,
.formGeneral .composant-zone {
  border: 1px dashed #bbb;
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem auto;
  background: #f9f9f9;
}

.formGeneral .categorie-zone h3,
.formGeneral .composant-zone h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #444;
}

.formGeneral .categorie-zone div,
.formGeneral .composant-zone div {
  text-align: left;
  flex: 1 1 200px;
}

/* Tables internes */
.formGeneral table {
  margin: 1rem auto;
  border-collapse: collapse;
  width: 100%;
  max-width: 500px;
}

.formGeneral table input[type='text'] {
  width: 95%;
}

/* Boutons secondaires */
.formGeneral input[type='button'] {
  background: #e0e0e0;
  color: #333;
  font-size: 0.85rem;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  margin: 0.3rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.formGeneral input[type='button']:hover {
  background: #d5d5d5;
}

/* Responsive */
@media (max-width: 768px) {
  form[name='formulaire_manquant'],
  #new_product {
    padding: 1rem;
    margin: 1rem;
  }

  .formGeneral input[type='text'],
  .formGeneral input[type='date'],
  .formGeneral input[type='number'],
  .formGeneral input[type='file'],
  .formGeneral textarea,
  .formGeneral input[type='tel'],
  .formGeneral input[type='email'],
  .formGeneral select {
    max-width: 100%;
  }
}

/* ===== FOOTER DANS LE STYLE DU MENU ===== */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1280px;
  width: calc(100% - 2rem);
  margin: 0.5rem;
  padding: 0.6rem 1rem;
  background: #ffffffcc;
  backdrop-filter: blur(6px);
  border-radius: 12px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  font-family: inherit;
  font-size: 1rem;
  color: #555;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.footer-left,
.footer-right {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.footer-bar a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.footer-bar a:hover {
  background: #f0f4ff;
  color: #222;
}

/* ===== Responsive : réduire la place sur mobile ===== */
@media (max-width: 768px) {
  .footer-bar {
    padding: 0.3rem 0.6rem; /* moins de padding vertical et horizontal */
    font-size: 0.8rem; /* réduire la taille de texte */
  }
  .footer-content {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.2rem; /* moins d'espace entre les blocs */
  }
  .footer-left,
  .footer-right {
    justify-content: center;
    gap: 8px; /* moins d'espace entre les liens */
  }
  .footer-bar a {
    font-size: 0.75rem; /* liens plus petits */
    padding: 0.2rem 0.4rem; /* moins de padding sur les liens */
  }
}
/* page de données */

/* ====== SECTION FORMULAIRES ====== */
#donnees_section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1rem;
}

.section_donnees {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 2rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.section_donnees:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.section_donnees h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #004f9e;
  margin-bottom: 1rem;
}

.section_donnees select,
.section_donnees input[type='date'],
.section_donnees input[type='submit'] {
  width: 100%;
  padding: 0.8rem 1rem;
  margin-top: 0.6rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 0.95rem;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.section_donnees select:focus,
.section_donnees input[type='date']:focus {
  border-color: #006ca6;
  box-shadow: 0 0 0 3px rgba(0, 108, 166, 0.15);
  outline: none;
}

.section_donnees input[type='submit'] {
  margin-top: 1.2rem;
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.2s;
}
.section_donnees input[type='submit']:hover {
  background: linear-gradient(135deg, #64b5f6, #2196f3);
  transform: translateY(-2px);
}

/* ====== TABLEAU ====== */
table.donnees {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Roboto', Arial, sans-serif;
  border: 2px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

/* EN-TÊTES */
table.donnees th {
  background-color: #007bff; /* Bleu moderne */
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 12px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.3s ease;
}
table.donnees th:hover {
  background-color: #0056b3;
}

/* LIGNES & CELLULES */
table.donnees td {
  padding: 12px 14px;
  border-bottom: 1px solid #e1e4e8;
  color: #333;
  font-size: 14px;
  vertical-align: middle;
}

/* Alternance de couleur */
table.donnees tr:nth-child(even) {
  background-color: #f0f0f0;
}

/* Survol des lignes */
table.donnees tbody tr:hover {
  background-color: #eaf3ff;
  transition: background 0.25s ease;
}

/* Statuts */
table.donnees td:last-child strong {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;

  color: #0a7a33;
  text-transform: uppercase;
}

/* Lignes supprimées */
table.donnees tbody tr[style*='red'] {
  background-color: #ffe9e9 !important;
  color: #c62828 !important;
}
table.donnees tbody tr[style*='red'] td {
  font-weight: 600;
}

/* ====== CONTENEUR GRAPHIQUE ====== */
.chart-container {
  max-width: 1200px;
  margin: 3rem auto;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.chart-div {
  min-height: 400px;
}

/* ====== RESPONSIVE ====== */

/* RESPONSIVE */
@media (max-width: 900px) {
  table.donnees thead {
    display: none;
  }
  table.donnees,
  table.donnees tbody,
  table.donnees tr,
  table.donnees td {
    display: block;
    width: 100%;
  }
  table.donnees tr {
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 10px;
  }
  table.donnees td {
    text-align: right;
    padding: 8px 6px;
    border: none;
    position: relative;
  }
  table.donnees td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: 600;
    color: #007bff;
    font-size: 13px;
    text-transform: uppercase;
  }
}
/* ===== BLOC RÉSUMÉ (total facturé, remise, etc.) ===== */
.resume-locations {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  font-family: 'Roboto', Arial, sans-serif;
  position: relative;
  overflow: hidden;
}

.resume-locations h3 {
  font-size: 1.2rem;
  color: #333;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  text-transform: none !important; /* Empêche la capitalisation automatique */
}

.resume-locations h3 span {
  font-weight: 700;
  color: #006ca6;
  text-decoration: none;
}

.resume-locations h3 span.total-net {
  color: #e53935; /* rouge moderne */
  font-size: 1.3rem;
}

.resume-locations a.calendar-link {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  background: #007bff;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  gap: 0.5rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition:
    background 0.3s,
    transform 0.2s;
}
.resume-locations a.calendar-link:hover {
  background: #0056b3;
  transform: translateY(-2px);
}
.resume-locations a.calendar-link img {
  width: 22px;
  height: 22px;
}

/* ===== TITRE TABLEAU ===== */
h2 {
  text-align: center;
  font-family: 'Roboto', Arial, sans-serif;
  color: #004f9e;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  position: relative;
}
h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #004f9e;
  margin: 0.5rem auto 0;
  border-radius: 3px;
}

/* ===== TABLEAU MODERNE ===== */
table.donnees {
  width: 95%;
  margin: 1rem auto 3rem;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Roboto', Arial, sans-serif;
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

table.donnees th {
  background: linear-gradient(135deg, #007bff, #00a2ff);
  color: #fff;
  padding: 14px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 3px solid #0056b3;
}

table.donnees td {
  padding: 12px 14px;
  color: #333;
  font-size: 0.9rem;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  vertical-align: middle;
}

/* Alternance des lignes */
table.donnees tbody tr:nth-child(even) {
  background-color: #f8f9fb;
}

/* Survol */
table.donnees tbody tr:hover {
  background-color: #eaf3ff;
  transition: background 0.25s ease;
}

/* Statuts */
table.donnees td:last-child strong {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  background: #e7f8ec;
  color: #0a7a33;
  text-transform: uppercase;
}

/* Statut supprimé */
table.donnees tbody tr[style*='red'] {
  background-color: #ffe9e9 !important;
  color: #c62828 !important;
}
table.donnees tbody tr[style*='red'] td {
  font-weight: 600;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .resume-locations {
    padding: 1rem;
    font-size: 0.9rem;
  }
  .resume-locations a.calendar-link {
    position: static;
    margin-top: 1rem;
    justify-content: center;
    width: 100%;
  }

  table.donnees thead {
    display: none;
  }
  table.donnees,
  table.donnees tbody,
  table.donnees tr,
  table.donnees td {
    display: block;
    width: 100%;
  }
  table.donnees tr {
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
  }
  table.donnees td {
    text-align: right;
    padding: 8px 6px;
    border: none;
    position: relative;
  }
  table.donnees td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: 600;
    color: #007bff;
    font-size: 13px;
    text-transform: uppercase;
  }
}

/* ================== FILTRES AGENCE / TYPE ================== */
#myBtnContainer_agence,
#myBtnContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem auto 2rem;
}
.btn_agence,
#myBtnContainer .btn {
  background: #f7f7f7;
  color: #333;
  border: 1px solid #ccc;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn_agence:hover,
#myBtnContainer .btn:hover {
  background: #f2a90c;
  color: #fff;
  border-color: transparent;
}
.btn_agence.active_agence,
#myBtnContainer .btn.active {
  background: #ccae04;
  color: white;
  border: none;
}

/* ================== STRUCTURE DES BLOCS AGENCES ================== */
.fond {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.2rem;
  margin: 2rem auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-width: 1200px;
}
.titre_section_index {
  font-size: 1.5rem;
  color: #006ca6;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

/* ================== STRUCTURE DES MACHINES ================== */
.section_index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.div_index {
  background: #fefefe;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1rem;
  width: 220px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.div_index:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.div_index img {
  margin: 0.5rem 0;
  border-radius: 6px;
  max-height: 100px;
  max-width: 120px;
}

/* ================== ÉTATS DES MACHINES ================== */
#disponible {
  color: #2ecc71;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
}
#reservee {
  color: #007bff;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
}
#indisponible {
  color: #dc3545;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
}
h3#disponible,
h3#reservee,
h3#indisponible {
  margin: 0.6rem 0;
}

/* ================== MACHINE HS ================== */
.div_index h3 {
  color: #b71c1c;
  font-size: 1rem;
}
.div_index:has(h3:contains('Machine HS')) {
  border: 2px dashed #ff4d4f;
  background: #ffe6e6;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
  .section_index {
    flex-direction: column;
    align-items: center;
  }
  .div_index {
    width: 90%;
  }
}
.div_index {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 0.6rem;
  width: 230px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  border: 1px solid #eee;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.div_index:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* TITRE */
.div_index div:first-child {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3rem;
  color: #222;
  margin: 0.5rem 0 0.6rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
}

/* IMAGE */
.div_index img {
  height: 100px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ETAT VISUEL */
#disponible,
#reservee,
#indisponible {
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#disponible {
  color: #27ae60;
}
#reservee {
  color: #2980b9;
}
#indisponible {
  color: #c0392b;
}
h3#disponible,
h3#reservee,
h3#indisponible {
  margin: 0.4rem 0;
}

/* PUCE */
#puce_disp img {
  width: 16px;
  height: 16px;
  margin-top: 0.5rem;
}

/* SEPARATEUR */
.div_index::after {
  content: '';
  display: block;
  width: 40%;
  margin: 0.5rem auto 0.4rem;
  border-bottom: 2px solid #ddd;
  opacity: 0.4;
}

/* MACHINE HS */
.div_index h3:contains('HS'),
.div_index h3#hs {
  color: #c0392b;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0.4rem 0;
}
.div_index:has(h3:contains('HS')) {
  border: 2px dashed #ff4d4f;
  background: linear-gradient(135deg, #ffecec, #fff);
}

/* CESSION DE... */
.div_index div:last-child {
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 0.5rem;
  font-style: italic;
}
a.link-machine {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  transition: transform 0.2s ease;
}
a.link-machine:hover {
  transform: scale(1.02);
}
a.link-machine .div_index {
  cursor: pointer;
}
.help-bubble {
  position: relative;
  display: inline-block;
  margin-left: 10px;
}

.help-icon {
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.95rem;
  user-select: none;
}

.help-text {
  display: none;
  position: absolute;
  top: 25px;
  left: 0;
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 14px;
  width: 320px;
  z-index: 100;
  font-size: 0.85rem;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.help-bubble:hover .help-text,
.help-bubble.active .help-text {
  display: block;
}
.div_index {
  display: none;
}

.div_index.show {
  display: block;
}

#imprim {
  font-family: inherit;
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #ccae04;
  border-radius: 4px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
#imprim:hover {
  background: #f2a90c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ===================== FORUM ===================== */
.main-content {
  max-width: 1200px;
  margin: 1.5rem auto 2.5rem;
  padding: 0 1rem;
}

/* Alerte (notif non lue) */
.alert {
  max-width: 1000px;
  margin: 1rem auto 1.5rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, #fff, #f5fafc);
  border-left: 6px solid #1e88e5;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  font-weight: 600;
  color: #0e2a3e;
}

/* Barre de recherche / filtre catégorie */
.search-container {
  max-width: 1000px;
  margin: 0 auto 1.3rem;
  background: #ffffffcc;
  backdrop-filter: blur(6px);
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.search-container form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.search-container label {
  font-weight: 600;
  color: #333;
}
.search-container select {
  padding: 0.5rem 0.8rem;
  border: 1px solid #d9dfe7;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
}
.search-container button {
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

/* Bloc catégorie + liste de sujets */
.section_modif_forum {
  max-width: 1000px;
  margin: 1rem auto 1.2rem;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 1.2rem 1.4rem;
}
.section_modif_forum h2 {
  margin: 0.2rem 0 1rem;
  text-align: left;
  font-size: 1.15rem;
  color: #006ca6;
  letter-spacing: 0.2px;
}
.section_modif_forum ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.section_modif_forum li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed #e9edf2;
}
.section_modif_forum li:last-child {
  border-bottom: none;
}

/* Badge épinglé (le markup utilise <strong>[Épinglé]</strong>) */
.section_modif_forum li strong {
  background: #fff8d8;
  color: #8a6d1a;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  letter-spacing: 0.2px;
}

/* Icône “verrouillé” */
.locked-icon {
  color: #e74c3c;
  font-size: 1rem;
  line-height: 1;
  margin-left: 0.15rem;
}

/* Lien sujet */
.topnav_link_forum {
  position: relative;
  color: #1f2937;
  text-decoration: none;
  font-weight: 700;
  padding-bottom: 2px;
}
.topnav_link_forum::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #5a7cff 0%, #1ec8ff 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.topnav_link_forum:hover {
  color: #0f4cff;
}
.topnav_link_forum:hover::after {
  width: 65%;
}

/* Métas (créateur + date + nb réponses) */
.section_modif_forum li small {
  color: #6b7280;
  margin-left: auto; /* pousse à droite quand la place le permet */
  font-size: 0.85rem;
}
.section_modif_forum li span {
  color: #0a7a33;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Bouton “Créer un nouveau sujet” (lien déjà en .button_modifier_R) */
a.button_modifier_R {
  display: inline-block;
  margin: 0.25rem 0 1rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  text-decoration: none;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  margin: 1.25rem 0 2rem;
}
.pagination a {
  display: inline-block;
  padding: 0.45rem 0.8rem;
  border: 1px solid #d9dfe7;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}
.pagination a:hover {
  background: #f5f8ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.pagination a.active {
  border-color: transparent;
  background: #ccae04;
  color: #fff;
}

/* Responsive forum */
@media (max-width: 720px) {
  .section_modif_forum {
    margin: 0.75rem;
    padding: 1rem;
  }
  .section_modif_forum li {
    align-items: flex-start;
  }
  .section_modif_forum li small {
    width: 100%;
    margin: 0.25rem 0 0 0;
  }
}

/* ===================== FORUM — PAGE SUJET ===================== */
/* Conteneur principal */
.main-content_forum {
  max-width: 1000px;
  margin: 1.5rem auto 2.5rem;
  padding: 0 1rem;
}

/* En-tête du sujet */
.presentation_intitule {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  margin-bottom: 1rem;
}
.presentation_intitule h1 {
  margin: 0 0 0.35rem 0;
  font-size: 1.35rem;
  color: #0f4f9e;
  letter-spacing: 0.2px;
}
.presentation_intitule p {
  margin: 0;
  color: #4a5568;
  line-height: 1.5;
  word-break: break-word;
}

/* Abonnement sujet */
.subscription-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 1rem;
}
.subscription-container button {
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.subscription-container button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Bouton Répondre global */
.reply-button-container {
  text-align: right;
  margin: 0.25rem 0 1rem;
}
.button_repondre_forum {
  display: inline-block;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #00b894, #00a884);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.button_repondre_forum:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* Carte message */
.post-container {
  position: relative;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 0.9rem 1rem 0.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin: 0.7rem 0;
}
.post-container p {
  margin: 0.2rem 0 0.6rem;
  color: #222;
  line-height: 1.55;
  word-break: break-word;
}
.post-container small {
  color: #6b7280;
}

/* Réponses (niveau > 0) */
.post-container.reply {
  border-left: 4px solid #ccae04;
  background:
    linear-gradient(0deg, #fff, #fff) padding-box,
    linear-gradient(135deg, #f8f6e6, #ffffff) border-box;
}

/* Zone votes */
.vote-section {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.4rem 0 0.2rem;
}
.vote-button {
  border: 1px solid #d9dfe7;
  background: #fff;
  border-radius: 6px;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
  line-height: 1;
  transition:
    background 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}
.vote-button:hover {
  background: #f5f8ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.vote-count {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 700;
  color: #0f4f9e;
}

/* Actions message */
.button_modifier_forum,
.button_supprimer_forum {
  display: inline-block;
  margin-left: 0.35rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  color: #fff;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.button_modifier_forum {
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
}
.button_supprimer_forum {
  background: linear-gradient(135deg, #ef5350, #e53935);
}
.button_modifier_forum:hover,
.button_supprimer_forum:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Bouton “Afficher les réponses (n)” */
.post-container > button {
  display: inline-block;
  margin-top: 0.4rem;
  border: 1px solid #d9dfe7;
  background: #fff;
  color: #1f2937;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.post-container > button:hover {
  background: #f5f8ff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* Sous-bloc des réponses (déplié par JS) */
.replies {
  margin-top: 0.5rem;
  border-top: 1px dashed #e6e9ef;
  padding-top: 0.6rem;
}

/* Pagination locale du sujet */
.pagination {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  margin: 1.2rem 0 0.2rem;
}
.pagination a {
  display: inline-block;
  padding: 0.45rem 0.8rem;
  border: 1px solid #d9dfe7;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}
.pagination a:hover {
  background: #f5f8ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.pagination a.active {
  border-color: transparent;
  background: #ccae04;
  color: #fff;
}

/* ====== Responsive ====== */
@media (max-width: 720px) {
  .subscription-container {
    justify-content: center;
  }
  .reply-button-container {
    text-align: center;
  }
  .post-container {
    padding: 0.85rem 0.9rem;
  }
}

/* ====== ACTUALITÉS — HERO + TIMELINE AMÉLIORÉE ====== */
/* ===== SURFACE ACTUS : fond sans toucher au <body> ===== */
.news-stage {
  position: relative;
  width: min(1240px, calc(100% - 2rem)); /* laisse une marge latérale = respiration */
  margin: 1rem auto 3rem; /* petite marge pour voir le body d'origine */
  padding: clamp(14px, 2.4vw, 24px);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); /* panneau doux */
  border: 1px solid #e6e9ef;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden; /* garde les effets dans le cadre */
  isolation: isolate;
}

/* halo subtil dans les coins */
.news-stage::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 60%;
  height: 80%;
  background: radial-gradient(
    60% 60% at 60% 40%,
    rgba(131, 182, 255, 0.18) 0%,
    rgba(131, 182, 255, 0) 70%
  );
  pointer-events: none;
  z-index: -1;
  transform: rotate(-8deg);
}
.news-stage::after {
  content: '';
  position: absolute;
  inset: auto auto -35% -15%;
  width: 70%;
  height: 80%;
  background: radial-gradient(
    55% 55% at 40% 50%,
    rgba(0, 180, 255, 0.15) 0%,
    rgba(0, 180, 255, 0) 70%
  );
  pointer-events: none;
  z-index: -1;
  transform: rotate(6deg);
}

/* micro-texture très légère pour éviter l'effet "bloc plat" */
.news-stage .news-veil {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.015) 0px,
    rgba(0, 0, 0, 0.015) 2px,
    rgba(255, 255, 255, 0) 2px,
    rgba(255, 255, 255, 0) 6px
  );
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 0;
}
/* assure que le contenu reste au-dessus de la texture */
.news-stage > * {
  position: relative;
  z-index: 1;
}

/* Ajuste légèrement les marges internes de tes blocs existants */
.news-stage .news-hero {
  margin: 0.5rem auto 1.5rem;
}
.news-stage .news-filter {
  margin: 0 auto 1rem;
}
.news-stage .news-timeline {
  margin: 0.5rem auto 0;
}

/* Harmonise les étiquettes mois avec la surface */
.news-stage .news-period {
  background: #ffffff;
  border-color: #e6e9ef;
}
/* --- HERO dernière actu --- */
.news-hero {
  max-width: 1200px;
  margin: 2rem auto 2.5rem;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #0f172a;
  min-height: 320px;
  display: grid;
  place-items: end start;
  isolation: isolate;
}
.news-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.75) saturate(1.1);
  z-index: -2;
}
.news-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 80%);
  z-index: -1;
}
.news-hero__content {
  color: #fff;
  padding: 1.6rem;
  max-width: 780px;
}
.news-hero h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-transform: none;
}
.news-hero .meta {
  opacity: 0.9;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.news-hero .excerpt {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.95;
}
.news-hero .actions {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.5rem 0.6rem;
  flex-wrap: wrap;
}
.news-hero .actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
.news-hero .actions a:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.18);
}

/* --- Barre de filtres --- */
.news-filter {
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.news-filter .btn {
  border: 1px solid #d8dee9;
  background: #f7f8fb;
  color: #1e293b;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.15s;
}
.news-filter .btn:hover {
  transform: translateY(-1px);
  background: #eef4ff;
}
.news-filter .btn.is-active {
  background: #0f4cff;
  color: #fff;
  border-color: transparent;
}

/* --- Timeline + puces mois collantes --- */
.news-timeline {
  max-width: 980px;
  margin: 1.2rem auto 4rem;
  padding: 0 1rem 0 2.2rem;
  position: relative;
}
.news-timeline::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #9bb8ff 0%, #00b4ff 100%);
  opacity: 0.35;
}
.news-period {
  position: sticky;
  top: 72px; /* ajuste si ton header est sticky */
  z-index: 2;
  margin: 1.2rem 0 0.6rem -1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  color: #0b1b2a;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  border: 1px solid #e6e9ef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.news-period::before {
  content: '🗓️';
}

/* --- Item --- */
.news-entry {
  position: relative;
  padding: 0 0 1.6rem 0;
  margin: 0 0 1.6rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
.news-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Puce type */
.news-dot {
  position: absolute;
  left: -1.6rem;
  top: 0.18rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(15, 76, 255, 0.12);
  background: #0f4cff;
}
.news-entry[data-type='video'] .news-dot {
  background: #e11d48;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.12);
}
.news-entry[data-type='pdf'] .news-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}
.news-entry[data-type='image'] .news-dot {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

/* Tête + meta */
.news-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}
.news-head h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #0e1a2b;
  letter-spacing: 0.1px;
}
.news-meta {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 700;
}

/* Corps (clamp) */
.news-body {
  color: #606e82;
  line-height: 1.6;
  font-size: 0.98rem;
  margin-top: 0.3rem;
}
.news-body.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-toggle {
  margin-top: 0.35rem;
  background: transparent;
  border: none;
  color: #0f4cff;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}

/* Média */
/* Taille naturelle, centrée.
   -> n’agrandit JAMAIS au-delà de la taille d’origine
   -> réduit SEULEMENT si l’espace dispo est plus petit (max-width:100%) */
.news-stage .news-media img,
.news-stage .news-media video {
  display: block;
  width: auto; /* taille réelle */
  height: auto; /* respecte le ratio */
  max-width: 100%; /* rétrécit si le container est plus étroit */
  max-height: none; /* pas de limite artificielle en hauteur */
  object-fit: contain; /* évite tout recadrage */
  margin: 0.8rem auto 0.4rem; /* centre le média horizontalement */
  border-radius: 10px; /* garde ta finition douce */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.news-stage .news-media {
  overflow: visible; /* pas de rognage, et pas de zoom forcé */
}

/* Actions */
.news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  margin-top: 0.4rem;
}
.news-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0f4cff;
  background: #f5f7fb;
  border: 1px solid #e6e9ef;
  transition:
    transform 0.15s,
    background 0.15s;
}
.news-actions a:hover {
  transform: translateY(-1px);
  background: #eef4ff;
}

/* Responsive */
@media (max-width: 640px) {
  .news-timeline {
    padding-left: 1.7rem;
  }
  .news-timeline::before {
    left: 12px;
  }
  .news-dot {
    left: -1.15rem;
  }
}

/* Accessibilité: réduire les animations si l’OS demande moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  html[data-theme='alt'] * {
    transition: none !important;
    animation: none !important;
  }
}
/* --- Corrige le chevauchement des sous-menus --- */
.menu-bar {
  position: relative; /* déjà présent, on garde */
  z-index: 11000; /* au-dessus de la taskbar et du contenu */
}
.menu-bar.scrolled {
  z-index: 11000; /* garde la même priorité quand il devient fixed */
}

/* le dropdown lui-même, au cas où */
.nav-luxe .submenu {
  z-index: 11001; /* juste au-dessus du header */
}

/* menu burger responsive (si nécessaire) */
#topnav_responsive_menu {
  position: relative;
  z-index: 11000;
}

/* facultatif : on s’assure que la taskbar reste sous le header */
.taskbar {
  z-index: 8000; /* < 11000 */
}

/* sécurité : éviter qu’un parent coupe l’affichage du dropdown */
header,
.menu-bar,
.nav-luxe {
  overflow: visible;
}