/**
 * CLTO-Admin - Styles personnalisés Version 2.1
 * Date: 7 mars 2026
 * 
 * Ce fichier centralise tous les styles personnalisés au-delà du template de base.
 * Utilisé pour maintenir la cohérence visuelle à travers l'application.
 */

/* Palette officielle CLTO Badminton : à conserver pour tout nouvel écran. */
:root {
  --clto-official-blue: #0153b6;
  --clto-official-orange: #da9619;
}

/* Couleur de texte par defaut : bleu officiel CLTO. */
body,
body .white,
body .light,
body .light-gray,
body .wp-section,
body .slice,
body .table > tbody > tr > td,
body .table > tbody > tr > th,
body label,
body .form-control {
  color: var(--clto-official-blue) !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .title,
body .heading,
body a:not(.btn):not(.navbar-brand) {
  color: var(--clto-official-blue) !important;
}

/* Champs de saisie : composant commun de l'application. */
.form-control {
  border-radius: 12px !important;
}

/* Modale Minibus : sélection unique dans la liste Contacts / adhérents. */
#modalMinibus #minibus_utilisateur {
  display: none;
}

#modalMinibus .chosen-container {
  width: 100% !important;
}

#modalMinibus .chosen-drop {
  z-index: 1060;
}

/* Édition de séance : la liste des responsables doit passer au-dessus du pied de modale. */
#modalModificationSeance .modal-content,
#modalModificationSeance .modal-body {
  overflow: visible;
}

#modalModificationSeance .chosen-container .chosen-drop {
  z-index: 1070;
}

/* Créneau : la liste complète des responsables doit rester accessible dans la modale. */
#modalCreneau .modal-content,
#modalCreneau .modal-body {
  overflow: visible;
}

#modalCreneau .chosen-container {
  width: 100% !important;
  z-index: 1070;
}

#modalCreneau .chosen-container .chosen-drop {
  z-index: 1080;
}

/* Affectation des rôles : sélection d'un contact ou d'un adhérent courant. */
.clto-role-personne-field {
  min-width: 340px;
}

.clto-role-personne-field .chosen-container {
  width: 100% !important;
}

.clto-role-personne-help {
  margin-top: 10px;
}

@media (max-width: 767px) {
  .clto-role-personne-field {
    display: block;
    min-width: 0;
    width: 100%;
  }
}

@media (min-width: 768px) {
  #modalMinibus .minibus-km-field {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 9px);
  }

  #modalMinibus .minibus-km-field--before {
    margin-right: 14px;
  }
}

.form-control:focus {
  border-color: var(--clto-official-blue) !important;
  box-shadow: 0 0 0 2px rgba(1, 83, 182, 0.14) !important;
}

/* Focus commun : un halo discret, sans le double contour Bootstrap/navigateur. */
.btn:focus,
.btn.focus,
.btn:active:focus,
.btn.active:focus {
  box-shadow: 0 0 0 2px rgba(1, 83, 182, 0.28) !important;
  outline: 0 !important;
}

/* Modales : une seule bordure lisible et une hierarchie de contenu commune. */
.modal-content {
  border: 4px solid var(--clto-official-blue);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.modal-header {
  border-bottom: 4px solid var(--clto-official-orange);
  padding: 16px 20px;
}

.modal-header .modal-title {
  color: var(--clto-official-blue) !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

.modal-header .modal-title .fa {
  color: var(--clto-official-orange) !important;
  margin-right: 9px;
}

.modal-header .close {
  display: none;
  background: var(--clto-official-orange);
  border-radius: 50%;
  color: #ffffff;
  height: 26px;
  line-height: 23px;
  opacity: 1;
  padding: 0;
  text-align: center;
  text-shadow: none;
  width: 26px;
}

.modal-header .close:hover,
.modal-header .close:focus {
  background: var(--clto-official-blue);
  color: #ffffff;
  opacity: 1;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  border-top: 0;
  padding: 0 20px 20px;
}

/* Les cases a cocher des formulaires sont plus faciles a utiliser. */
.modal input[type="checkbox"] {
  height: 19px;
  margin: 0 6px 0 0;
  vertical-align: -3px;
  width: 19px;
}

/* Alignement commun : une case ne doit jamais masquer le texte qui la suit. */
.modal .checkbox-inline,
.modal .checkbox > label {
  align-items: center;
  display: inline-flex;
  margin: 0 18px 10px 0;
  padding-left: 0;
}

.modal .checkbox-inline input[type="checkbox"],
.modal .checkbox > label input[type="checkbox"] {
  flex: 0 0 19px;
  margin: 0 9px 0 0 !important;
  position: static;
  vertical-align: middle;
}

/* Types de contacts : suffisamment de place pour les rôles associés. */
#modalType .modal-dialog {
  max-width: calc(100vw - 30px);
  width: 760px;
}

#modalType #type_roles_autorises {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

#modalType #type_roles_autorises .checkbox-inline {
  margin: 0 !important;
}

/* Ajout d'un planning : la sélection de créneaux doit rester confortable. */
#modalPlanning .modal-dialog {
  max-width: calc(100vw - 30px);
  width: 1100px;
}

#modalPlanning .clto-planning-dates {
  margin-bottom: 12px;
}

#modalPlanning .clto-planning-dates label {
  display: block;
}

#modalPlanning .clto-planning-creneaux-zone > p {
  margin-bottom: 7px;
  font-weight: 700;
}

#modalPlanning .ms-container {
  background: none;
  display: flex;
  align-items: stretch;
  width: 100%;
}

#modalPlanning .ms-container .ms-selectable,
#modalPlanning .ms-container .ms-selection {
  float: none;
  width: 43%;
}

#modalPlanning .ms-container .ms-list {
  height: 430px;
}

#modalPlanning .clto-planning-list-title {
  color: #0153b6;
  font-weight: 700;
  margin-bottom: 6px;
}

#modalPlanning .clto-planning-transfer-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px 12px 0;
  width: 14%;
}

#modalPlanning .clto-planning-transfer-buttons .btn {
  margin: 4px 0;
}

#modalPlanning .ms-elem-selectable.clto-planning-pending,
#modalPlanning .ms-elem-selection.clto-planning-pending {
  background: #dcecff;
  color: #0153b6;
  font-weight: 700;
}

@media (max-width: 767px) {
  #modalType .modal-dialog {
    width: auto;
  }

  #modalPlanning .modal-dialog {
    width: auto;
  }

  #modalPlanning .clto-planning-creneaux {
    height: auto;
  }

  #modalPlanning .ms-container {
    display: block;
  }

  #modalPlanning .ms-container .ms-selectable,
  #modalPlanning .ms-container .ms-selection,
  #modalPlanning .clto-planning-transfer-buttons {
    float: none;
    width: 100%;
  }

  #modalPlanning .ms-container .ms-list {
    height: 30vh;
  }

  #modalPlanning .clto-planning-transfer-buttons {
    align-items: center;
    flex-direction: row;
    padding: 6px 0;
  }

  #modalPlanning .clto-planning-transfer-buttons .btn {
    margin: 0 3px;
  }
}

/* Correctif cible : le theme masquait le contenu de l'en-tete Gymnases. */
#modalGymnase .modal-header {
  display: block !important;
  min-height: 66px;
}

#modalGymnase .modal-title {
  display: block !important;
  line-height: 28px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.capacity-group-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin: 2px 0 8px;
}

/* DataTables : espace constant entre le libelle de recherche et son champ. */
.clto-board-progress-value {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  white-space: nowrap;
}

.clto-board-progress {
  background: #f3f4f6;
  border-radius: 999px;
  display: block;
  flex: 0 0 70px;
  height: 8px;
  overflow: hidden;
  width: 70px;
}

.clto-board-progress-bar {
  background: var(--clto-official-blue);
  border-radius: inherit;
  display: block;
  height: 100%;
}

/* Tableau de bord CA : donnée attendue mais non encore renseignée. */
.clto-board-missing-label {
  background-color: #ffffff;
  border: 1px solid #da9619;
  border-radius: 12px;
  color: #da9619 !important;
  display: inline-block;
  font-weight: 700;
  padding: 4px 9px;
  white-space: nowrap;
}

.clto-board-missing-label .fa {
  color: inherit !important;
  margin-right: 3px;
}

.dataTables_wrapper .dataTables_filter label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 0 !important;
}

.dataTables_wrapper .dataTables_length label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.dataTables_wrapper .dataTables_length select {
  box-sizing: border-box;
  height: 38px;
  margin: 0 !important;
  min-width: 82px;
  padding-left: 13px;
  padding-right: 32px;
  width: auto !important;
}

/* DataTables : pagination conforme a la charte CLTO. */
.dataTables_wrapper .dataTables_paginate .pagination > li {
  display: inline-block;
  margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
  background-color: #ffffff;
  border: 1px solid var(--clto-official-blue);
  border-radius: 12px !important;
  color: var(--clto-official-blue) !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li > a:focus {
  background-color: var(--clto-official-orange);
  border-color: var(--clto-official-orange);
  box-shadow: none !important;
  color: #ffffff !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > .active > a,
.dataTables_wrapper .dataTables_paginate .pagination > .active > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > .active > a:focus,
.dataTables_wrapper .dataTables_paginate .pagination > .active > span {
  background-color: var(--clto-official-blue) !important;
  border-color: var(--clto-official-orange) !important;
  color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > .disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > .disabled > span {
  background-color: #ffffff;
  border-color: var(--clto-official-blue);
  color: var(--clto-official-blue) !important;
  opacity: 0.55;
}

/* Charte commune : bandeau de titre des pages. */
.pg-opt {
  background-color: var(--clto-official-orange) !important;
  border-bottom-color: var(--clto-official-orange) !important;
  color: #ffffff !important;
  margin-top: 0;
}

.pg-opt h2,
.pg-opt .breadcrumb,
.pg-opt .breadcrumb li,
.pg-opt .breadcrumb li.active,
.pg-opt .breadcrumb a,
.pg-opt .breadcrumb a:hover {
  color: #ffffff !important;
}

.pg-opt h2 {
  font-size: 22px;
  font-weight: 700;
}

.pg-opt .breadcrumb a {
  font-weight: 700;
}

.pg-opt .linkReference a {
  color: #ffffff !important;
}

/* Bandeau : titre et fil d'Ariane sur une ligne sur les ecrans larges. */
.pg-opt .breadcrumb {
  display: block;
}

@media (min-width: 990px) {
  .pg-opt .row {
    align-items: center;
    display: flex;
  }

  .pg-opt .row > .col-md-6:first-child {
    flex: 1 1 50%;
    width: auto;
  }

  .pg-opt .row > .col-md-6:last-child {
    flex: 1 1 50%;
    width: auto;
  }

  .pg-opt .row > .col-md-6:last-child .breadcrumb {
    float: right;
    text-align: right;
  }
}

@media (max-width: 989px) {
  .pg-opt {
    margin-top: 0;
  }

  .pg-opt h2 {
    margin-bottom: 5px;
  }

  .pg-opt .breadcrumb {
    float: none;
    font-size: 12px;
    margin: 0 0 4px;
    padding: 0;
    text-align: right;
  }
}

/* Charte commune : tableaux. */
.wp-section table.table,
.slice table.table {
  border: 1px solid var(--clto-official-blue);
  border-collapse: separate;
  border-radius: 12px;
  border-spacing: 0;
  overflow: hidden;
}

.wp-section table.table > thead > tr > th,
.slice table.table > thead > tr > th {
  background-color: var(--clto-official-blue) !important;
  border-color: var(--clto-official-blue) !important;
  color: #ffffff !important;
  font-weight: 700;
}

.wp-section table.table > thead > tr > th:first-child,
.slice table.table > thead > tr > th:first-child {
  border-top-left-radius: 11px;
}

.wp-section table.table > thead > tr > th:last-child,
.slice table.table > thead > tr > th:last-child {
  border-top-right-radius: 11px;
}

/* Charte commune : boutons d'action, y compris leurs icones. */
.wp-section .btn:not(.btn-link):not(.close),
.slice .btn:not(.btn-link):not(.close),
.modal-body .btn:not(.btn-link):not(.close),
.modal-footer .btn:not(.btn-link):not(.close) {
  align-items: center !important;
  background-color: var(--clto-official-blue) !important;
  border-color: var(--clto-official-blue) !important;
  border-radius: 22px !important;
  color: #ffffff !important;
  display: inline-flex !important;
  font-weight: 700 !important;
  height: auto !important;
  justify-content: center !important;
  min-height: 34px;
  padding: 6px 12px !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  width: auto !important;
}

.wp-section .btn:not(.btn-link):not(.close):hover,
.slice .btn:not(.btn-link):not(.close):hover,
.modal-body .btn:not(.btn-link):not(.close):hover,
.modal-footer .btn:not(.btn-link):not(.close):hover {
  background-color: #da9619 !important;
  border-color: #da9619 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.wp-section .btn:not(.btn-link):not(.close) .fa,
.slice .btn:not(.btn-link):not(.close) .fa,
.modal-body .btn:not(.btn-link):not(.close) .fa,
.modal-footer .btn:not(.btn-link):not(.close) .fa {
  color: #ffffff !important;
}

/* Suppression : rouge au repos, orange au survol, sans modifier l'arrondi ni les icônes. */
.wp-section .btn.clto-delete-action:not(.btn-link):not(.close),
.slice .btn.clto-delete-action:not(.btn-link):not(.close),
.modal-body .btn.clto-delete-action:not(.btn-link):not(.close),
.modal-footer .btn.clto-delete-action:not(.btn-link):not(.close) {
  background-color: #c62828 !important;
  border-color: #c62828 !important;
  color: #ffffff !important;
}

.wp-section .btn.clto-delete-action:not(.btn-link):not(.close):hover,
.slice .btn.clto-delete-action:not(.btn-link):not(.close):hover,
.modal-body .btn.clto-delete-action:not(.btn-link):not(.close):hover,
.modal-footer .btn.clto-delete-action:not(.btn-link):not(.close):hover {
  background-color: #da9619 !important;
  border-color: #da9619 !important;
  color: #ffffff !important;
}

.wp-section .btn.clto-delete-action .fa,
.slice .btn.clto-delete-action .fa,
.modal-body .btn.clto-delete-action .fa,
.modal-footer .btn.clto-delete-action .fa {
  color: #ffffff !important;
}

/* Les icones historiques btn-icon font partie du meme bouton, sans cartouche distinct. */
.wp-section .btn.btn-icon:before,
.slice .btn.btn-icon:before,
.modal-body .btn.btn-icon:before,
.modal-footer .btn.btn-icon:before {
  align-items: center;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 22px 0 0 22px !important;
  color: #ffffff !important;
  display: flex;
  justify-content: center;
  line-height: 1 !important;
}

.wp-section .btn.btn-icon.btn-icon-right:before,
.slice .btn.btn-icon.btn-icon-right:before,
.modal-body .btn.btn-icon.btn-icon-right:before,
.modal-footer .btn.btn-icon.btn-icon-right:before {
  border-radius: 0 22px 22px 0 !important;
}

/* Actions : l'icone et le libelle constituent un seul bouton, sans retrait historique vide. */
.btn:not(.btn-link):not(.close) {
  align-items: center !important;
  display: inline-flex !important;
  gap: 7px;
  justify-content: center;
}

.btn:not(.btn-link):not(.close) > .fa {
  margin: 0 !important;
}

.btn.btn-icon:before {
  flex: 0 0 auto;
  margin: 0 !important;
  position: static !important;
  width: auto !important;
}

.btn.btn-icon span,
.btn.btn-icon input {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tableaux : les actions d'une meme ligne restent regroupees. */
table.table td.clto-actions-cell {
  width: 1%;
  white-space: nowrap;
}

table.table th.actions-column {
  width: 1%;
  white-space: nowrap;
}

table.table td.clto-actions-cell .btn {
  margin: 2px 1px;
  vertical-align: middle;
}

/* Navigation : texte et survol au bleu officiel. */
#divHeaderWrapper .navbar-wp .navbar-nav > li > a {
  color: var(--clto-official-blue) !important;
  font-size: 15px;
  font-weight: 700;
}

.site-link .application-link {
  color: var(--clto-official-blue) !important;
  font-size: 20px;
}
application
  #divHeaderWrapper
  .navbar-wp
  .navbar-nav
  > li
  > a:not(.site-link):not(.application-link):focus,
#divHeaderWrapper
  .navbar-wp
  .navbar-nav
  > li
  > a:not(.site-link):not(.application-link):hover {
  background-color: #da9619 !important;
  border-top-color: #da9619 !important;
  color: #ffffff !important;
}

/* Le parent reste actif tant que son sous-menu est survole. */
#divHeaderWrapper
  .navbar-wp
  .navbar-nav
  > li.dropdown:hover
  > a:not(.site-link):not(.application-link),
#divHeaderWrapper
  .navbar-wp
  .navbar-nav
  > li.dropdown.open
  > a:not(.site-link):not(.application-link),
#divHeaderWrapper .navbar-wp .dropdown-menu > li.dropdown-submenu:hover > a {
  background-color: #da9619 !important;
  border-top-color: #da9619 !important;
  color: #ffffff !important;
}

#divHeaderWrapper .navbar-wp .dropdown-menu > li > a {
  color: var(--clto-official-blue) !important;
  font-size: 14px;
  font-weight: 600;
}

#divHeaderWrapper .navbar-wp .dropdown-menu > li > a:focus,
#divHeaderWrapper .navbar-wp .dropdown-menu > li > a:hover {
  background-color: #da9619 !important;
  color: #ffffff !important;
}

#divHeaderWrapper .navbar-wp .dropdown-menu,
#divHeaderWrapper .navbar-wp .dropdown-submenu > .dropdown-menu {
  border-radius: 12px;
  overflow: visible;
}

/* Le thème ajoutait une bordure entre chaque lien de sous-menu : elle nuit à la lecture. */
#divHeaderWrapper .navbar-wp .dropdown-menu > li:not(.divider) {
  border-bottom: 0 !important;
}

#divHeaderWrapper .navbar-wp .dropdown-menu > li:first-child > a {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

#divHeaderWrapper .navbar-wp .dropdown-menu > li:last-child > a {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Navigation compacte : les sous-menus sont ouverts au clic, jamais au survol. */
@media (max-width: 989px) {
  #divHeaderWrapper .navbar-wp .navbar-toggle {
    color: var(--clto-official-blue) !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-toggle .icon-custom {
    color: var(--clto-official-blue) !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-toggle:hover,
  #divHeaderWrapper .navbar-wp .navbar-toggle:focus {
    background-color: var(--clto-official-orange) !important;
    border-color: var(--clto-official-orange) !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-toggle:hover .icon-custom,
  #divHeaderWrapper .navbar-wp .navbar-toggle:focus .icon-custom {
    color: #ffffff !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-collapse.in .dropdown-aux {
    display: block !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown-aux {
    margin: 5px 8px;
  }

  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown-aux > a {
    color: var(--clto-official-blue) !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown-aux > a .fa {
    color: inherit !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown:hover > .dropdown-menu,
  #divHeaderWrapper
    .navbar-wp
    .dropdown-menu
    > li.dropdown-submenu:hover
    > .dropdown-menu {
    display: none !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown.open > .dropdown-menu,
  #divHeaderWrapper
    .navbar-wp
    .dropdown-menu
    > li.dropdown-submenu.open
    > .dropdown-menu {
    display: block !important;
  }

  #divHeaderWrapper .navbar-wp .navbar-nav > li > a:after,
  #divHeaderWrapper .navbar-wp .navbar-nav .open .dropdown-submenu > a:after,
  #divHeaderWrapper .navbar-wp .dropdown-menu > li.dropdown-submenu > a:after {
    content: none !important;
    display: none !important;
  }

  #divHeaderWrapper .navbar-wp .nav-submenu-chevron {
    color: inherit !important;
    float: right;
    font-size: 12px;
    line-height: inherit;
    margin-top: 4px;
  }

  #divHeaderWrapper
    .navbar-wp
    .dropdown-menu
    > li:not(.dropdown-submenu):not(.divider)
    > a:before {
    color: inherit !important;
    content: "\f111";
    font-family: FontAwesome;
    font-size: 7px;
    margin-right: 9px;
    vertical-align: 1px;
  }

  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown:not(.dropdown-aux) {
    border-radius: 12px;
    margin: 5px 8px;
    overflow: hidden;
  }

  #divHeaderWrapper
    .navbar-wp
    .navbar-nav
    > li.dropdown:not(.dropdown-aux)
    > a {
    border-radius: 12px !important;
  }

  #divHeaderWrapper
    .navbar-wp
    .navbar-nav
    > li.dropdown:not(.dropdown-aux).open
    > a {
    border-radius: 12px 12px 0 0 !important;
  }

  #divHeaderWrapper
    .navbar-wp
    .navbar-nav
    > li.dropdown:not(.dropdown-aux).open
    > .dropdown-menu {
    border-radius: 0 0 12px 12px !important;
    overflow: hidden;
  }

  #divHeaderWrapper .admin-role-indicators {
    top: 9px;
  }

  #divHeaderWrapper .admin-external-links {
    align-items: flex-start;
    margin-left: 9px;
  }

  #divHeaderWrapper .admin-external-links a,
  #divHeaderWrapper .admin-external-links a:hover,
  #divHeaderWrapper .admin-external-links a:focus,
  #divHeaderWrapper .admin-external-links a:active {
    flex-direction: column;
    font-size: 23px;
    height: 44px;
    justify-content: flex-start;
    margin: 0 7px;
    width: 30px;
  }

  #divHeaderWrapper .admin-external-links a:after {
    color: inherit;
    content: attr(data-label);
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 11px;
    margin-top: 2px;
  }
}

/* Tableaux : presentation lisible sur mobile, sans faire deborder les controles DataTables. */
@media (max-width: 989px) {
  .dataTables_wrapper {
    overflow: hidden;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    margin: 8px 0;
    text-align: left !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    max-width: 180px;
  }

  .wp-section .table-responsive,
  .slice .table-responsive,
  .dataTables_wrapper .dataTables_scroll {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  .wp-section table.table,
  .slice table.table {
    font-size: 12px;
    max-width: 100%;
  }

  .wp-section table.table > tbody > tr > td,
  .wp-section table.table > thead > tr > th,
  .slice table.table > tbody > tr > td,
  .slice table.table > thead > tr > th {
    padding: 7px 8px;
    white-space: normal;
  }
}

/* Bloc d'informations de la page Mes tournois et infos. */
.tournois-informations {
  background-color: var(--clto-official-orange) !important;
  border-radius: 12px;
  overflow: hidden;
}

.tournois-informations .wp-block-body,
.tournois-informations .wp-block-body .title,
.tournois-informations .wp-block-body .table,
.tournois-informations .wp-block-body .table td {
  color: #ffffff !important;
  font-weight: 700;
}

.tournois-informations .wp-block-body .table {
  border-color: rgba(255, 255, 255, 0.55);
}

.tournois-informations .wp-block-body .table td {
  border-color: rgba(255, 255, 255, 0.35);
}

/* ============================================
   1. ACCORDIONS DE STATISTIQUES
   ============================================ */

/* Container accordion */
.stats-accordion {
  margin-bottom: 5px;
}

/* Header de l'accordion */
.stats-accordion .panel-heading {
  background-color: #f5f5f5;
  cursor: pointer;
}

.stats-accordion .panel-heading a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.stats-accordion .panel-title {
  margin: 0;
}

/* Tous les accordéons : en-tête compact, 5 px en haut et en bas. */
.panel-group .panel-heading {
  box-sizing: border-box;
  display: table;
  width: 100%;
  min-height: 50px;
  padding: 7px 15px;
}

.panel-group .panel-heading > .panel-title {
  display: table-cell;
  vertical-align: middle;
}

.panel-group .panel-heading {
  background-color: var(--clto-official-blue) !important;
  border-color: var(--clto-official-blue) !important;
}

.panel-group .panel-heading .panel-title,
.panel-group .panel-heading .panel-title a,
.panel-group .panel-heading .panel-title > i,
.panel-group .panel-heading .panel-title a > i {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Le panneau ouvert est immédiatement identifiable, sans contour de focus noir. */
.panel-group .panel.accordion-is-open > .panel-heading {
  background-color: var(--clto-official-orange) !important;
  border-color: var(--clto-official-orange) !important;
}

.panel-group .panel-heading a[data-toggle="collapse"],
.panel-group .panel-heading a[data-toggle="collapse"]:focus,
.panel-group .panel-heading a[data-toggle="collapse"]:active {
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none;
}

.panel-group {
  margin: 5px 0;
}

.panel-group .panel {
  overflow: hidden;
  border-radius: 12px;
}

.panel-group .panel-heading {
  border-radius: 12px;
}

.panel-group .panel + .panel {
  margin-top: 5px;
  border-top: 1px solid #e0eded;
}

.panel-group .panel-heading .fa-chevron-down {
  float: right;
  margin-top: 3px;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.panel-group .panel.accordion-is-open > .panel-heading .fa-chevron-down {
  transform: rotate(0deg);
}

/* Page adhérent : Mes avantages */
.avantages-partenaires {
  margin-bottom: 10px;
}

.avantages-partenaires h3 {
  margin: 0 0 8px;
}

.avantages-logos-partenaires {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
}

.avantages-logo-partenaire {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  max-width: 130px;
}

.avantages-logo-partenaire img {
  display: block;
  max-width: 130px;
  max-height: 58px;
  object-fit: contain;
}

.avantages-accordeon .panel-heading {
  padding: 7px 15px;
  cursor: pointer;
}

#accordionAvantages .panel-heading > .panel-title {
  display: flex;
  align-items: center;
  min-height: 36px;
}

#accordionAvantages .panel-heading:after {
  display: none;
}

.avantage-partenaire-nom {
  flex: 1 1 auto;
}

#accordionAvantages .panel-title > .fa-chevron-down {
  float: none;
  margin-top: 0;
  margin-left: auto;
}

.avantage-partenaire-detail {
  padding: 8px 0;
  border-bottom: 1px solid #e0eded;
}

.avantage-partenaire-detail:first-child {
  padding-top: 0;
}

.avantage-partenaire-detail:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.avantage-logo-detail {
  display: flex;
  float: right;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 110px;
  height: 110px;
  margin: 0 0 10px 15px;
  border: 1px solid #e0eded;
  border-radius: 12px;
  background: #fff;
}

.avantage-logo-detail img {
  display: block;
  max-width: 94px;
  max-height: 94px;
  object-fit: contain;
}

.avantage-partenaire-detail h4 {
  margin: 0 0 5px;
}

.avantage-partenaire-detail p,
.avantage-lieu,
.avantage-site-web {
  margin: 0 0 5px;
}

.avantage-lieu i,
.avantage-site-web > i {
  width: 14px;
  color: var(--clto-official-blue);
}

.avantage-site-web a:first-of-type {
  word-break: break-all;
}

.avantage-site-web .btn {
  margin-left: 6px;
}

@media (max-width: 767px) {
  .avantages-logo-partenaire {
    height: 46px;
    max-width: 100px;
  }

  .avantages-logo-partenaire img {
    max-width: 100px;
    max-height: 46px;
  }

  .avantage-logo-detail {
    width: 80px;
    height: 80px;
    margin-left: 10px;
  }

  .avantage-logo-detail img {
    max-width: 68px;
    max-height: 68px;
  }
}

/* Icônes chevron */
.stats-accordion .fa-chevron-down {
  margin-top: 3px;
}

/* Cartes de statistiques */
.stat-card {
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.stat-card h2 {
  margin: 0;
  color: var(--clto-official-orange);
  font-weight: bold;
}

.milestone-counter .milestone-count.c-base {
  color: var(--clto-official-orange) !important;
}

.stat-card p {
  margin: 5px 0 0 0;
  color: #666;
  font-size: 14px;
}

/* Container graphiques */
.chart-container {
  height: 300px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container canvas {
  max-height: 280px;
  max-width: 100%;
}

/* Graphique catégorie (plus petit) */
.chart-container-small {
  height: 300px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chart-container-small canvas {
  max-height: 140px;
  max-width: 100%;
}

.chart-container-small .chart-legend {
  margin-top: 15px;
  text-align: center;
}

/* ============================================
   2. PAGE HEADERS & TITLES
   ============================================ */

.section-title-wr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-title-wr h3 {
  margin: 0;
}

/* Correction: seule la première lettre du premier mot en majuscule */
.section-title,
h2,
h3,
h4 {
  text-transform: none !important;
}

/* Espacement après titre */
.title-spacer {
  margin-top: 20px;
}

/* ============================================
   3. ALERTS & MESSAGES
   ============================================ */

.alert-custom {
  margin-bottom: 20px;
}

.alert-info-accordion {
  margin: 0;
}

/* ============================================
   4. TABLEAUX (DataTables)
   ============================================ */

/* Colonne Actions standard */
.actions-column {
  width: 200px;
}

/* Etiquettes CLTO : même composant pour les versions et les types affichés dans les listes. */
.clto-label {
  border-radius: 12px !important;
  color: #ffffff !important;
  display: inline-block;
  font-weight: 700;
  padding: 4px 9px;
}

.clto-label-orange {
  background-color: #da9619 !important;
}

.clto-label-blue {
  background-color: #0153b6 !important;
}

.clto-label-pink {
  background-color: #db2777 !important;
}

.clto-label-cyan {
  background-color: #0891b2 !important;
}

.clto-label-green {
  background-color: #00a63e !important;
}

.clto-label-purple {
  background-color: #7c3aed !important;
}

/* Détail adhérent : le pavé Informations suit la charte bleue et reste lisible. */
.adherent-information-block,
.adherent-information-block .wp-block-body {
  background-color: #0153b6 !important;
  color: #ffffff !important;
}

.adherent-information-block {
  border-radius: 12px;
  overflow: hidden;
}

.adherent-information-block .wp-block-body {
  border-radius: 12px;
}

.adherent-information-block .title,
.adherent-information-block .table,
.adherent-information-block .table td,
.adherent-information-block .table th {
  color: #ffffff !important;
}

/* Background pour tableaux */
.table-white-bg {
  background-color: white;
}

/* Espacement row */
.row-spacer {
  margin-bottom: 15px;
}

/* Réduction police pour colonnes avantages */
#tabAvantages tbody td:nth-child(3),
#tabAvantages tbody td:nth-child(4),
#tabAvantages tbody td:nth-child(5) {
  font-size: 12px;
}

/* ============================================
   5. ICÔNES & BADGES
   ============================================ */

/* Icônes checkbox (vert/rouge) */
.icon-check-green {
  font-size: 18px !important;
  color: #28a745 !important;
}

.icon-check-red {
  font-size: 18px !important;
  color: #dc3545 !important;
}

/* Icônes catégories minibus */
.icon-category-adult {
  color: #2a54b3;
  margin-left: 5px;
}

.icon-category-young {
  color: #5cb85c;
  margin-left: 5px;
}

/* Icônes fonctionnelles minibus */
.icon-fuel {
  color: #2a54b3;
  font-size: 16px;
}

.icon-clean {
  color: #17a2b8;
  font-size: 16px;
}

/* Icône trophée */
.icon-trophy {
  color: #f39c12;
}

/* ============================================
   6. LIENS PERSONNALISÉS
   ============================================ */

/* Liens bleus soulignés (accordions accueil) */
.link-blue-underline {
  color: #2091cf;
  text-decoration: underline;
  float: right;
}

.link-blue-underline:hover {
  color: #1a76a8;
  text-decoration: underline;
}

/* ============================================
   7. TOP 3 / TABLEAUX DE SCORES
   ============================================ */

.top3-table {
  background-color: white;
  margin-bottom: 0;
}

.top3-header {
  margin-bottom: 10px;
}

.top3-item {
  /* Border-left sera défini inline avec couleur dynamique */
}

.top3-rank {
  width: 35px;
  text-align: center;
  font-size: 18px;
  padding: 4px;
}

.top3-name {
  padding: 4px;
}

.top3-score {
  width: 70px;
  text-align: right;
  padding: 4px;
}

/* Badge dans top3 - couleur définie inline */
.top3-badge {
  /* background-color défini inline */
}

/* ============================================
   8. FORMULAIRES & MODALS
   ============================================ */

/* Alertes de validation (formulaire minibus). */
.clto-minibus-validation-alert {
  display: none;
  margin-top: -10px;
  margin-bottom: 10px;
}

/* Radio buttons formulaire */
.radio-category {
  margin-top: 10px;
}

.radio-category label {
  font-weight: bold;
  font-size: 15px;
}

.radio-category-spacing {
  margin-left: 20px;
}

/* Help text */
.category-help {
  display: none;
}

/* ============================================
   9. ACCORDIONS PAGE ACCUEIL
   ============================================ */

.accordion-home {
  margin-bottom: 30px;
}

.accordion-home-v2 {
  margin-bottom: 30px;
  margin-top: 10px; /* Espacement entre V2.1 et V2.0 */
}

.accordion-home .panel-heading {
  cursor: pointer;
}

.accordion-home .fa-chevron-down {
  margin-top: 3px;
}

.accordion-home .label {
  margin-right: 10px;
}

.accordion-home ul {
  font-size: 15px;
  line-height: 2.2;
}

.accordion-home-v20 ul {
  font-size: 15px;
  line-height: 2;
}

.accordion-info {
  margin-top: 20px;
}

/* ============================================
   10. FILTRES (Joueurs, Créneaux)
   ============================================ */

.filter-row {
  margin-bottom: 0;
}

.filter-label {
  font-size: 12px;
  margin-bottom: 5px;
}

.filter-dropdown {
  width: 100%;
}

.filter-dropdown-button {
  width: 100%;
  text-align: left;
  height: 34px;
}

.filter-dropdown-caret {
  margin-top: 6px;
}

.filter-dropdown-menu {
  padding: 10px;
  min-width: 100%;
}

.filter-dropdown-item {
  padding: 3px 10px;
}

.filter-dropdown-label {
  margin: 0;
  cursor: pointer;
}

/* Joueurs : filtres aérés et alignés avec l'action d'ajout. */
.clto-joueurs-filter-row {
  margin-bottom: 8px;
}

.clto-joueurs-filter-control,
.clto-joueurs-filter-actions {
  margin-bottom: 10px;
}

.clto-joueurs-filter-control .form-control {
  width: 100%;
}

/* Aide contextuelle : icône seule pour préserver l'espace des actions. */
.btn.clto-help-button {
  align-items: center;
  background-color: #ffffff !important;
  border: 2px solid var(--clto-official-blue) !important;
  border-radius: 50% !important;
  color: var(--clto-official-blue) !important;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0 !important;
  width: 34px;
}

.btn.clto-help-button .fa {
  color: inherit !important;
  font-size: 17px;
  line-height: 1;
}

.btn.clto-help-button:hover,
.btn.clto-help-button:focus {
  background-color: #ffffff !important;
  color: var(--clto-official-blue) !important;
}

/* Comparaison Joueurs / Adhérents. */
.clto-comparison-empty {
  margin-bottom: 18px;
}

/* DataTables génère des .row à marges négatives dans le conteneur responsive. */
.clto-comparison-table-responsive > .dataTables_wrapper > .row {
  margin-left: 0;
  margin-right: 0;
}

.clto-comparison-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.clto-comparison-count {
  color: var(--clto-official-blue);
  font-weight: 700;
}

.clto-comparison-count .fa {
  color: inherit !important;
  margin-right: 4px;
}

.clto-comparison-actions {
  align-items: center;
  display: inline-flex;
  gap: 9px;
}

.clto-comparison-score {
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
}

.clto-comparison-score-content {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 145px;
}

.clto-comparison-progress {
  background: #f3f4f6;
  border-radius: 999px;
  display: block;
  flex: 1 1 auto;
  height: 8px;
  min-width: 60px;
  overflow: hidden;
}

.clto-comparison-progress-bar {
  background: var(--clto-official-blue);
  border-radius: inherit;
  display: block;
  height: 100%;
}

@media (max-width: 767px) {
  .clto-comparison-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

.clto-joueurs-filter-actions {
  padding-top: 21px;
}

@media (min-width: 992px) {
  .clto-joueurs-filter-row {
    align-items: flex-end;
    display: flex;
  }

  .clto-joueurs-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
}

/* ============================================
   11. RESPONSIVE UTILITIES
   ============================================ */

/* Assure que les canvas de graphiques sont responsives */
@media (max-width: 768px) {
  .chart-container {
    height: auto;
    min-height: 250px;
  }

  .stat-card h2 {
    font-size: 24px;
  }

  .section-title-wr {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   12. UTILITAIRES GÉNÉRAUX
   ============================================ */

/* Texte en gras */
.text-bold {
  font-weight: bold;
}

/* Centrage */
.text-center-custom {
  text-align: center;
}

/* Padding personnalisé */
.padding-standard {
  padding: 20px;
}

.padding-bottom {
  padding-bottom: 15px;
}

/* ============================================
   13. ACCORDÉONS — COMPOSANT COMMUN
   ============================================ */

/* Une seule présentation pour les accordéons de toutes les pages. */
.panel-group .panel {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  width: 100%;
}

.panel-group .panel + .panel {
  border-top: 1px solid var(--clto-official-blue);
  margin-top: 10px;
}

.panel-group .panel-heading {
  border: 0 !important;
  border-radius: 11px !important;
  position: relative;
}

/* Aucun "+" ajouté par CSS : seul le chevron présent dans le markup est utilisé. */
.panel-group .panel-heading:after,
.panel-group .panel-heading .panel-title > a:after {
  content: none !important;
  display: none !important;
}

/* Le chevron est ancré à droite ; aucune roue de chargement n'est injectée dans le titre. */
.panel-group .panel-heading .panel-title > a {
  align-items: center;
  display: flex;
  min-height: 36px;
  width: 100%;
}

.panel-group .panel-heading .fa-chevron-down,
.panel-group .panel-heading .fa-chevron-up {
  float: none !important;
  margin: 0 !important;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg) !important;
  transition: transform 0.3s ease;
}

/* Ouvert : pas de trait horizontal entre l'en-tête et le contenu ; les bords latéraux restent continus. */
.panel-group .panel.accordion-is-open > .panel-heading {
  border-radius: 11px 11px 0 0;
}

.panel-group .panel.accordion-is-open > .panel-heading .panel-title > a {
  border-radius: 11px 11px 0 0 !important;
}

.panel-group .panel.accordion-is-open > .panel-collapse {
  border: 1px solid var(--clto-official-blue) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
}

.panel-group .panel-collapse > .panel-body,
.panel-group .panel.accordion-is-open > .panel-collapse > .panel-body {
  border: 0 !important;
  border-radius: 0 0 12px 12px !important;
}

/* Chevron unique : fermé vers le bas, ouvert vers le haut. */
.panel-group .panel-heading .panel-title {
  align-items: center;
  display: flex !important;
  padding-right: 38px;
  width: 100%;
}

.panel-group .panel-heading .accordion-chevron {
  margin: 0 !important;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg) !important;
  transition: transform 0.28s ease-in-out !important;
}

.panel-group .panel.accordion-is-open > .panel-heading .accordion-chevron {
  transform: translateY(-50%) rotate(180deg) !important;
}

.panel-group .panel-heading .panel-title > .label {
  margin-left: auto;
  order: 1;
}

.panel-group .panel-heading .panel-title > .accordion-chevron {
  order: 2;
}

/* Chargement exclusivement dans le contenu de l'accordéon. */
.panel-group .panel-collapse {
  position: relative;
}

.accordion-content-loader {
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  bottom: 0;
  color: #da9619;
  display: flex;
  justify-content: center;
  left: 0;
  min-height: 58px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.accordion-content-loader .fa {
  color: #da9619 !important;
  font-size: 38px;
}

/* Correctif d'une ancienne règle locale du planning : aucune roue dans son titre. */
.filtre-spinner {
  display: none !important;
}

/* Gestion des créneaux : libellés compacts et actions uniquement en icônes. */
#tabCreneaux .creneau-types-cell {
  line-height: 2;
  min-width: 115px;
}

#tabCreneaux th:nth-child(5),
#tabCreneaux td:nth-child(5) {
  min-width: 110px;
  white-space: nowrap;
}

#tabCreneaux th:nth-child(8),
#tabCreneaux td:nth-child(8) {
  min-width: 85px;
}

#tabCreneaux .actions-column,
#tabCreneaux td.clto-actions-cell {
  min-width: 0;
  width: 1%;
}

#tabCreneaux .creneau-name-column,
#tabCreneaux td.creneau-name-cell {
  min-width: 190px;
}

#tabCreneaux .creneau-type-label {
  display: inline-block;
  margin: 1px 2px 1px 0;
}

#tabBoard .board-creneau-type-label {
  display: inline-block;
  margin: 1px 2px 1px 0;
}

.wp-section .btn.btn-icon-only,
.modal-body .btn.btn-icon-only,
.modal-footer .btn.btn-icon-only {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-width: 34px;
  padding: 7px 9px !important;
}

.wp-section .btn.btn-icon-only .fa,
.modal-body .btn.btn-icon-only .fa,
.modal-footer .btn.btn-icon-only .fa {
  margin: 0 !important;
}

#modalCreneau .creneau-hours-row .form-group {
  max-width: 150px;
}

#modalCreneau .creneau-types-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

#modalCreneau .creneau-types-selection .checkbox-inline {
  align-items: center;
  display: inline-flex;
  margin: 0 !important;
  padding-left: 0;
}

#modalCreneau .form-group > .checkbox-inline {
  align-items: center;
  display: inline-flex;
  margin-left: 0 !important;
  padding-left: 0;
}

#modalCreneau .creneau-types-selection .checkbox-inline input[type="checkbox"],
#modalCreneau .form-group > .checkbox-inline input[type="checkbox"] {
  flex: 0 0 19px;
  margin: 0 8px 0 0 !important;
  position: static;
  vertical-align: middle;
}

/* Barre et accordéon de filtres des créneaux : mêmes puces que le planning des séances. */
.creneaux-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.creneaux-heading .section-title {
  margin: 0 !important;
}

#creneauxAddControl {
  display: none;
}

.creneaux-add-control #creneauxAddControl {
  display: block;
}

.creneaux-basic-filters {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  margin: 12px 8px 4px;
}

/* Ligne principale des filtres créneaux : recherche prioritaire, réinitialisation à droite. */
#accordionFiltresCreneaux .creneaux-filter-search-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(250px, 1fr) 135px 175px auto;
  width: 100%;
}

#accordionFiltresCreneaux .creneaux-filter-name {
  min-width: 0;
  width: 100%;
}

#accordionFiltresCreneaux #filterJour,
#accordionFiltresCreneaux #filterGymnase {
  width: 100%;
}

#accordionFiltresCreneaux #resetFiltresCreneaux {
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

/* Prévisualisation : les trois critères et la réinitialisation tiennent sur une ligne. */
#accordionPreviewFiltres .clto-filter-fields-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(250px, 1fr) 135px 175px auto;
  width: 100%;
}

#accordionPreviewFiltres .clto-filter-fields-row .form-control {
  min-width: 0;
  width: 100%;
}

#accordionPreviewFiltres #reinitialiserFiltresPreview {
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

/* Même présentation que la légende du planning pour les informations de gestion. */
.clto-information-legend,
.alert.alert-info,
.alert.alert-success,
.alert.alert-danger,
.alert.alert-warning {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 12px;
  padding: 8px 12px;
  padding-right: 44px;
  position: relative;
}

.alert.alert-info {
  border-color: #0153b6;
  color: #0153b6;
}

.alert.alert-success {
  background-color: #f1fbf5;
  border-color: #00a63e;
  color: #008b34;
}

.alert.alert-danger {
  background-color: #fff4f4;
  border-color: #c62828;
  color: #c62828;
}

.alert.alert-warning {
  background-color: #fffaf0;
  border-color: #da9619;
  color: #b87900;
}

.alert.alert-info:before,
.alert.alert-success:before,
.alert.alert-danger:before,
.alert.alert-warning:before {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 14px;
  margin-right: 6px;
}

.alert.alert-info:before {
  content: "\f05a";
}

.alert.alert-success:before {
  content: "\f058";
}

.alert.alert-danger:before {
  content: "\f071";
}

.alert.alert-warning:before {
  content: "\f06a";
}

.alert.alert-info p:last-child,
.alert.alert-success p:last-child,
.alert.alert-danger p:last-child,
.alert.alert-warning p:last-child {
  display: inline;
  margin-bottom: 0;
}

.clto-information-legend span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.clto-information-legend .close {
  color: inherit;
  float: none;
  font-size: 18px;
  line-height: 1;
  margin-left: auto;
  opacity: 0.75;
}

.alert.alert-info .close,
.alert.alert-success .close,
.alert.alert-danger .close,
.alert.alert-warning .close {
  color: inherit;
  float: none !important;
  font-size: 18px;
  line-height: 1;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0.75;
}

.alert.alert-info .close:hover,
.alert.alert-info .close:focus,
.alert.alert-success .close:hover,
.alert.alert-success .close:focus,
.alert.alert-danger .close:hover,
.alert.alert-danger .close:focus,
.alert.alert-warning .close:hover,
.alert.alert-warning .close:focus {
  color: inherit;
  opacity: 1;
}

.clto-information-legend .close:hover,
.clto-information-legend .close:focus {
  color: inherit;
  opacity: 1;
}

.clto-information-legend .fa,
.alert.alert-info .fa {
  color: #0153b6;
}

#tabPreview .clto-preview-status,
#tabPreview .clto-overwrite-cell {
  white-space: nowrap;
}

#tabPreview .clto-preview-comment {
  color: #c62828;
  font-weight: 700;
  min-width: 150px;
}

#tabPreview .clto-overwrite-cell {
  vertical-align: middle;
}

#tabPreview .clto-overwrite-switch {
  margin: 0 5px 0 0;
  vertical-align: middle;
}

#tabPreview .clto-overwrite-text {
  color: #c62828;
  font-weight: 700;
}

.clto-preview-overwrite-help {
  color: #0153b6;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 12px;
}

.clto-preview-overwrite-help .fa {
  color: #0153b6;
}

@media (max-width: 700px) {
  #accordionFiltresCreneaux .creneaux-filter-search-row {
    grid-template-columns: 1fr;
  }

  #accordionFiltresCreneaux #resetFiltresCreneaux {
    justify-self: start;
  }

  #accordionPreviewFiltres .clto-filter-fields-row {
    grid-template-columns: 1fr;
  }

  #accordionPreviewFiltres #reinitialiserFiltresPreview {
    justify-self: start;
  }
}

/* Ancienne vue de modification de séance : styles limités à son formulaire. */
.clto-seance-modifier .form-group {
  margin-bottom: 16px;
}

.clto-seance-modifier .form-control {
  width: 100%;
}

.clto-seance-modifier-section {
  margin: 18px 0 8px;
  color: #0153b6;
  font-weight: 700;
}

.clto-seance-modifier .type-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.clto-seance-modifier .type-choices label,
.clto-seance-modifier-status label {
  margin: 0;
  font-weight: 400;
}

.clto-seance-modifier-status {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

.clto-seance-modifier-actions {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .clto-seance-modifier-status {
    display: block;
  }

  .clto-seance-modifier-status label {
    display: block;
    margin: 8px 0;
  }
}

/* Navigation d’administration : en-tête, menus et comportement responsive. */
#divHeaderWrapper {
  position: relative;
  z-index: 1000;
}
#divHeaderWrapper .navbar-header {
  align-items: center;
  display: flex;
  min-height: 82px;
}
#divHeaderWrapper .admin-left-cluster {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}
#divHeaderWrapper .navbar-brand {
  display: block;
  float: none;
  height: auto;
  margin: 0 12px 0 0;
  padding: 0;
}
#divHeaderWrapper .navbar-brand img {
  display: block;
  height: 62px;
  width: auto;
}
#divHeaderWrapper .admin-role-icons {
  display: inline-grid;
  grid-auto-rows: 18px;
  grid-template-columns: repeat(2, 18px);
  column-gap: 3px;
  margin-right: 12px;
  row-gap: 1px;
  width: 39px;
}
#divHeaderWrapper .admin-role-icons span {
  display: block;
  text-align: center;
}
#divHeaderWrapper .admin-role-icons i {
  color: var(--clto-official-orange) !important;
  font-size: 16px;
}
#divHeaderWrapper .header-utility-link {
  align-items: center;
  color: var(--clto-official-orange) !important;
  display: inline-flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 700;
  justify-content: center;
  line-height: 13px;
  margin: 0 8px;
  min-width: 32px;
  text-align: center;
  text-decoration: none;
}
#divHeaderWrapper .header-utility-link i {
  color: inherit !important;
  font-size: 19px;
  line-height: 20px;
}
#divHeaderWrapper .header-utility-link:hover,
#divHeaderWrapper .header-utility-link:focus {
  color: var(--clto-official-blue) !important;
  outline: 0;
  text-decoration: none;
}
#divHeaderWrapper .navbar-toggle {
  margin-left: auto;
}
#divHeaderWrapper .compact-header-actions {
  display: none;
}
#divHeaderWrapper .navbar-collapse {
  clear: none;
}
#divHeaderWrapper .navigation-icon {
  padding: 28px 11px !important;
  text-align: center;
}
#divHeaderWrapper .navigation-icon i {
  font-size: 20px;
}
#divHeaderWrapper .dropdown-search .dropdown-menu-user {
  left: auto;
  min-width: 330px;
  right: 0;
}
#divHeaderWrapper .dropdown-search .dropdown-form {
  min-width: 0;
}
#divHeaderWrapper .dropdown-search .input-group {
  width: 100%;
}
#divHeaderWrapper .dropdown-search .input-group-btn {
  padding-left: 8px;
}
#divHeaderWrapper .dropdown-search .navbar-search-submit {
  background: var(--clto-official-blue) !important;
  border-color: var(--clto-official-blue) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  min-width: 46px;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
#divHeaderWrapper .dropdown-search .navbar-search-submit:hover,
#divHeaderWrapper .dropdown-search .navbar-search-submit:focus {
  background: #da9619 !important;
  border-color: #da9619 !important;
  color: #ffffff !important;
}
#divHeaderWrapper .dropdown-search .navbar-search-submit .fa {
  margin: 0 !important;
}
#divHeaderWrapper .management-menu > a,
#divHeaderWrapper .settings-menu > a {
  text-align: left;
}
#divHeaderWrapper .navbar-wp .navbar-nav > li > a:focus,
#divHeaderWrapper .navbar-wp .navbar-toggle:focus {
  box-shadow: none;
  outline: 0;
}
#divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown:hover > a,
#divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown.open > a {
  background-color: #da9619 !important;
  color: #ffffff !important;
}
@media (min-width: 990px) {
  #divHeaderWrapper .navbar-header {
    float: left;
  }
  #divHeaderWrapper .navbar-collapse {
    border-top: 0;
    display: block !important;
    float: right;
    padding: 0;
  }
  #divHeaderWrapper .navbar-nav.navbar-right {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    margin-right: 0;
  }
  #divHeaderWrapper .navbar-nav.navbar-right > li {
    float: none;
  }
  #divHeaderWrapper .navbar-nav.navbar-right > li > a {
    padding-left: 10px;
    padding-right: 10px;
  }
  #divHeaderWrapper .navbar-toggle {
    display: none;
  }
  #divHeaderWrapper .nav-submenu-chevron {
    display: none !important;
  }
  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown:hover > .dropdown-menu,
  #divHeaderWrapper
    .navbar-wp
    .dropdown-menu
    > li.dropdown-submenu:hover
    > .dropdown-menu {
    display: block;
  }
}
@media (max-width: 989px) {
  #divHeaderWrapper .navbar-header {
    float: none;
    min-height: 78px;
  }
  #divHeaderWrapper .compact-header-actions {
    align-items: center;
    display: flex;
    margin-left: auto;
  }
  #divHeaderWrapper .compact-header-actions > li {
    display: block;
    list-style: none;
    position: relative;
  }
  #divHeaderWrapper .compact-header-actions > li > a {
    align-items: center;
    border: 1px solid var(--clto-official-blue);
    border-radius: 12px;
    color: var(--clto-official-blue) !important;
    display: flex;
    height: 42px;
    justify-content: center;
    margin-left: 7px;
    padding: 0 !important;
    width: 42px;
  }
  #divHeaderWrapper .compact-header-actions > li > a:hover,
  #divHeaderWrapper .compact-header-actions > li > a:focus {
    background-color: #da9619 !important;
    border-color: #da9619;
    color: #ffffff !important;
  }
  #divHeaderWrapper .compact-header-actions > li > a i {
    font-size: 18px;
  }
  #divHeaderWrapper .compact-header-actions .dropdown-menu {
    left: auto;
    margin-top: 6px;
    right: 0;
  }
  #divHeaderWrapper .navbar-toggle {
    border-color: var(--clto-official-blue);
    border-radius: 12px;
    color: var(--clto-official-blue);
    height: 42px;
    margin: 0 0 0 7px;
    padding: 10px 13px 6px;
    width: 42px;
  }
  #divHeaderWrapper .navbar-collapse {
    border-top: 1px solid #e0eded;
    clear: both;
    max-height: none !important;
    overflow: visible !important;
  }
  #divHeaderWrapper .navbar-collapse.collapse {
    display: none !important;
  }
  #divHeaderWrapper .navbar-collapse.collapse.in {
    display: block !important;
  }
  #divHeaderWrapper .navbar-nav {
    float: none !important;
    margin: 8px 0 12px;
  }
  #divHeaderWrapper .navbar-nav.navbar-right {
    display: block;
  }
  #divHeaderWrapper .navbar-nav > li {
    float: none;
  }
  #divHeaderWrapper .navbar-wp .navbar-nav > li > a {
    border-radius: 12px;
    margin: 4px 8px;
    padding: 12px 14px;
  }
  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown:hover > .dropdown-menu,
  #divHeaderWrapper
    .navbar-wp
    .dropdown-menu
    > li.dropdown-submenu:hover
    > .dropdown-menu {
    display: none !important;
  }
  #divHeaderWrapper .navbar-wp .navbar-nav > li.dropdown.open > .dropdown-menu,
  #divHeaderWrapper
    .navbar-wp
    .dropdown-menu
    > li.dropdown-submenu.open
    > .dropdown-menu {
    display: block !important;
  }
  #divHeaderWrapper .navbar-wp .dropdown-menu {
    border-radius: 12px;
    margin: 0 8px 4px;
    position: static;
    width: auto;
  }
  #divHeaderWrapper .navbar-wp .dropdown-submenu > .dropdown-menu {
    margin: 0;
  }
  #divHeaderWrapper .navbar-wp .dropdown-menu > li > a {
    padding: 10px 16px;
  }
  #divHeaderWrapper
    .navbar-wp
    .dropdown-menu
    > li:not(.dropdown-submenu):not(.divider)
    > a:before {
    content: "\f111";
    font-family: FontAwesome;
    font-size: 7px;
    margin-right: 9px;
    vertical-align: 1px;
  }
  #divHeaderWrapper .navbar-wp .nav-submenu-chevron {
    float: right;
    font-size: 12px;
    line-height: inherit;
    margin-top: 4px;
  }
  #divHeaderWrapper .navbar-wp .navbar-nav > li > a:after,
  #divHeaderWrapper .navbar-wp .dropdown-submenu > a:after {
    content: none !important;
    display: none !important;
  }
  #divHeaderWrapper .navbar-collapse .dropdown-search,
  #divHeaderWrapper .navbar-collapse .logout-link {
    display: none;
  }
}
@media (max-width: 480px) {
  #divHeaderWrapper .navbar-brand {
    margin-right: 7px;
  }
  #divHeaderWrapper .navbar-brand img {
    height: 54px;
  }
  #divHeaderWrapper .admin-role-icons {
    margin-right: 4px;
    transform: scale(0.9);
    transform-origin: left center;
  }
  #divHeaderWrapper .header-utility-link {
    margin: 0 4px;
  }
}

/* Filtre Responsables : autocomplétion directe, comme dans les modales de saisie. */
.clto-responsables-filter-source + .chosen-container {
  display: block !important;
  width: 100% !important;
}

.clto-responsables-choices {
  max-height: 240px;
  overflow-y: auto;
}

.clto-responsables-group {
  margin-bottom: 12px;
}

.clto-responsables-choice {
  display: block;
  margin: 4px 0;
}

.clto-responsables-filter-selected {
  min-height: 0;
}

.clto-responsable-filter-label {
  align-items: center;
  display: inline-flex;
  margin: 3px 4px 0 0;
}

.clto-responsable-filter-label button {
  background: transparent;
  border: 0;
  color: inherit;
  margin-left: 6px;
  padding: 0;
}

/* Filtres de créneaux, séances et prévisualisation : composant partagé. */
.clto-filter-types-row {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(230px, 1fr);
  margin-top: 14px;
}

.clto-filter-types-row .filter-group {
  align-self: start;
  min-width: 0;
}

.clto-filter-types-row .filter-group > b {
  color: #0153b6;
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 7px;
}

.filter-chip {
  align-items: center;
  background: #da9619;
  border: 1px solid #da9619;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
  line-height: 1.2;
  margin: 4px 5px 4px 0;
  padding: 8px 12px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.filter-chip .fa {
  color: inherit !important;
  font-size: 15px;
  line-height: 1;
}

.filter-chip .clto-filter-dumbbell {
  fill: currentColor;
  flex: 0 0 auto;
  height: 15px;
  width: 15px;
}

.filter-chip:hover,
.filter-chip:focus {
  background: #0153b6;
  border-color: #0153b6;
  color: #ffffff;
  outline: 0;
}

.filter-chip:not(.active) {
  background: #f3f4f6;
  border-color: #f3f4f6;
  color: #1f2937;
  font-weight: 400;
}

.clto-filter-encadrements {
  margin-top: 7px;
}

.clto-filter-state-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-chip.clto-filter-state-red.active {
  background: #ffffff;
  border-color: #c62828;
  color: #c62828;
}

.filter-chip.clto-filter-state-green.active {
  background: #ffffff;
  border-color: #00a63e;
  color: #00a63e;
}

.filter-chip.clto-filter-state-orange.active {
  background: #ffffff;
  color: #0153b6;
  border-color: #0153b6;
}

.filter-chip.clto-filter-state-red:not(.active) {
  border-color: #f3f4f6;
  color: #1f2937;
}

.filter-chip.clto-filter-state-green:not(.active) {
  border-color: #f3f4f6;
  color: #1f2937;
}

.filter-chip.clto-filter-state-orange:not(.active) {
  border-color: #f3f4f6;
  color: #1f2937;
}

.filter-chip.clto-filter-public.active {
  background: #0153b6;
  border-color: #0153b6;
  color: #ffffff;
}

.filter-chip[data-filter="public"].active {
  background: #0153b6;
  border-color: #0153b6;
  color: #ffffff;
}

.filter-chip[data-filter="encadrement"][data-value="ELITE"].active {
  background: #0153b6;
  border-color: #0153b6;
}

.filter-chip[data-filter="encadrement"][data-value="PERFECTIONNEMENT"].active {
  background: #da9619;
  border-color: #da9619;
}

.filter-chip[data-filter="encadrement"][data-value="STAGE"].active {
  background: #7c3aed;
  border-color: #7c3aed;
}

.filter-chip[data-filter="encadrement"][data-value="INTERMEDIAIRE"].active {
  background: #db2777;
  border-color: #db2777;
}

.filter-chip[data-filter="encadrement"][data-value="INITIATION"].active {
  background: #0891b2;
  border-color: #0891b2;
}

.clto-mode-switch {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 30px;
}

.clto-mode-switch > span {
  color: #0153b6;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.clto-switch {
  display: inline-block;
  height: 24px;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: 44px;
}

.clto-switch input {
  height: 0;
  opacity: 0;
  width: 0;
}

.clto-switch-slider {
  background-color: #b5d8ef;
  border-radius: 24px;
  cursor: pointer;
  inset: 0;
  position: absolute;
  transition: 0.2s;
}

.clto-switch-slider:before {
  background-color: #ffffff;
  border-radius: 50%;
  bottom: 3px;
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  transition: 0.2s;
  width: 18px;
}

.clto-switch input:checked + .clto-switch-slider {
  background-color: #0153b6;
}

.clto-switch-danger input:checked + .clto-switch-slider {
  background-color: #c62828;
}

.clto-switch input:checked + .clto-switch-slider:before {
  transform: translateX(20px);
}

/* Interrupteurs de statut des formulaires : le libellé reste visible et la zone du curseur est cliquable. */
.clto-session-mode-switch .clto-mode-label {
  color: #6b7280;
  font-weight: 600;
}

.clto-session-mode-switch:not(.is-training) .clto-mode-label-free {
  color: #00a63e;
  font-weight: 700;
}

.clto-session-mode-switch.is-training .clto-mode-label-training {
  color: #0153b6;
  font-weight: 700;
}

.clto-session-mode-switch:not(.is-training)
  .clto-switch
  input:not(:checked)
  + .clto-switch-slider {
  background-color: #00a63e;
}

/* Minibus : bascule Jeune / Adulte, avec verrouillage pour les Interclubs. */
.clto-minibus-category-switch {
  align-items: center;
  display: inline-flex;
  gap: 9px;
  margin-top: 5px;
}

.clto-minibus-category-switch .clto-mode-label {
  color: #6b7280 !important;
  font-size: 14px;
  font-weight: 600;
}

.clto-minibus-category-switch:not(.is-adulte)
  .clto-minibus-category-label-young {
  color: #00a63e !important;
  font-weight: 700;
}

.clto-minibus-category-switch.is-adulte .clto-minibus-category-label-adult {
  color: #0153b6 !important;
  font-weight: 700;
}

.clto-minibus-category-switch:not(.is-adulte)
  .clto-switch
  input:not(:checked)
  + .clto-switch-slider {
  background-color: #00a63e;
}

.clto-minibus-category-switch.is-adulte
  .clto-switch
  input:checked
  + .clto-switch-slider {
  background-color: #0153b6;
}

.clto-minibus-category-switch.is-locked {
  opacity: 0.7;
}

.clto-minibus-category-switch.is-locked .clto-switch-slider {
  cursor: not-allowed;
}

.clto-minibus-status-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}

.clto-minibus-status-switch {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.clto-minibus-status-switch > span {
  color: #0153b6;
  font-weight: 600;
}

.clto-minibus-status-switch > span .fa {
  color: inherit;
  margin-right: 3px;
}

/* Tableau Minibus : les informations longues restent prioritaires. */
#tabMinibus {
  table-layout: fixed;
  width: 100% !important;
}

#tabMinibus .minibus-col-user {
  width: 12%;
}

#tabMinibus .minibus-col-date,
#tabMinibus .minibus-col-reason,
#tabMinibus .minibus-col-category,
#tabMinibus .minibus-col-km,
#tabMinibus .minibus-col-distance,
#tabMinibus .minibus-col-status,
#tabMinibus .minibus-col-actions {
  white-space: nowrap;
}

#tabMinibus .minibus-col-date {
  width: 6%;
}

#tabMinibus .minibus-col-km {
  width: 5%;
}

#tabMinibus .minibus-col-distance,
#tabMinibus .minibus-col-reason {
  width: 6%;
}

#tabMinibus .minibus-col-category {
  width: 7%;
}

#tabMinibus .minibus-col-status {
  text-align: center;
  width: 3%;
}

#tabMinibus .minibus-col-note {
  width: 27%;
  word-wrap: break-word;
}

#tabMinibus .minibus-col-actions {
  width: 10%;
}

@media (max-width: 767px) {
  #tabMinibus {
    table-layout: auto;
  }
}

.clto-filter-people .clto-open-responsables-filter {
  border-radius: 8px !important;
  margin: 0;
  white-space: nowrap;
}

.clto-responsables-filter-selected {
  margin-top: 6px;
}

.clto-responsable-filter-label {
  background: #0153b6;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 10px;
}

.clto-responsable-filter-label button {
  color: #ffffff !important;
  font-size: 13px;
  line-height: 1;
}

@media (max-width: 900px) {
  .clto-filter-types-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clto-filter-types-row .clto-filter-people {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .clto-filter-types-row {
    display: block;
  }

  .clto-filter-types-row .filter-group {
    margin-bottom: 14px;
  }
}

/* Planning des séances : pied de tuile dédié aux responsables. */
#planningGrid .seance-tile {
  left: 3px;
  padding-bottom: calc(var(--tile-footer-height, 30px) + 4px) !important;
  right: 3px;
}

#planningGrid .seance-tile .tile-footer {
  align-items: center;
  background: #f5f9ff;
  border-top: 1px solid #0153b6;
  bottom: 0;
  display: flex;
  gap: 4px;
  left: 0;
  margin: 0 !important;
  min-height: var(--tile-footer-height, 30px);
  padding: 4px 6px;
  position: absolute;
  right: 0;
}

#planningGrid .seance-tile.seance-encadree .tile-footer {
  background: #da9619;
  border-top-color: #da9619;
}

#planningGrid .seance-tile.seance-jeu-libre .tile-footer {
  background: #00a63e;
  border-top-color: #00a63e;
}

#planningGrid .seance-tile.seance-sans-encadrant .tile-footer {
  background: #c62828;
  border-top-color: #c62828;
}

#planningGrid .seance-tile .tile-footer > .fa {
  color: #ffffff;
  flex: 0 0 auto;
  font-size: 10px;
}

#planningGrid .seance-tile .tile-footer .tile-responsables {
  bottom: auto;
  display: block;
  flex: 1 1 auto;
  left: auto;
  margin: 0 !important;
  position: static;
  right: auto;
}

#planningGrid .seance-tile .tile-footer .clto-label {
  margin: 0;
}

#planningGrid .seance-tile .tile-footer-responsable {
  color: #ffffff;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

#planningGrid .seance-tile .tile-header-main {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

#planningGrid .seance-tile .tile-header {
  align-items: center;
  flex-direction: row;
  font-size: 10px !important;
  justify-content: space-between;
  min-height: 22px;
}

#planningGrid .seance-tile .tile-header-main > .fa {
  color: #ffffff;
  font-size: 12px;
}

#planningGrid .seance-tile .tile-header .tile-actions {
  background: transparent;
  bottom: auto;
  left: auto;
  margin: 0 0 0 3px;
  padding: 0;
  position: static;
  transform: none;
}

#planningGrid .seance-tile .tile-header .tile-actions .btn-edit,
#planningGrid .seance-tile .tile-header .tile-actions .btn-delete {
  height: 18px !important;
  min-height: 18px !important;
  min-width: 18px !important;
  width: 18px !important;
}

#planningGrid .seance-tile .tile-content-link {
  color: #0153b6;
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  margin-top: 3px;
}

#planningGrid .seance-tile .tile-content-link .fa {
  color: inherit;
  margin-right: 2px;
}

#planningGrid .seance-tile .tile-footer-empty {
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

#planningGrid .seance-tile .tile-header-time {
  font-weight: 700;
  white-space: nowrap;
}

/* Même composant, y compris dans la page Séances qui charge des styles historiques. */
#accordionFiltres .clto-filter-types-row,
#accordionFiltresCreneaux .clto-filter-types-row,
#accordionPreviewFiltres .clto-filter-types-row {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr) minmax(210px, 1fr);
  margin-top: 14px;
}

#accordionFiltres .clto-filter-types-row .filter-group,
#accordionFiltresCreneaux .clto-filter-types-row .filter-group,
#accordionPreviewFiltres .clto-filter-types-row .filter-group {
  display: block;
  min-width: 0;
  padding: 0;
  width: auto;
}

#accordionFiltres .clto-filter-types-row .filter-chip,
#accordionFiltresCreneaux .clto-filter-types-row .filter-chip,
#accordionPreviewFiltres .clto-filter-types-row .filter-chip {
  border-radius: 8px;
  font-size: 13px;
  margin: 4px 5px 4px 0;
  padding: 8px 12px;
}

#accordionFiltres .clto-filter-types-row .filter-chip.active,
#accordionFiltresCreneaux .clto-filter-types-row .filter-chip.active,
#accordionPreviewFiltres .clto-filter-types-row .filter-chip.active {
  background: #da9619;
  border-color: #da9619;
  color: #ffffff;
  font-weight: 700;
}

#accordionFiltres .clto-filter-types-row .filter-chip:not(.active),
#accordionFiltresCreneaux .clto-filter-types-row .filter-chip:not(.active),
#accordionPreviewFiltres .clto-filter-types-row .filter-chip:not(.active) {
  background: #f3f4f6;
  border-color: #f3f4f6;
  color: #1f2937;
  font-weight: 400;
}

/* États actifs des filtres Planning : les couleurs restent visibles malgré les styles historiques. */
#accordionFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="public"].active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip[data-filter="public"].active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="public"].active {
  background: #0153b6;
  border-color: #0153b6;
  color: #ffffff;
}

#accordionFiltres
  .clto-filter-types-row
  .filter-chip.clto-filter-state-red.active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip.clto-filter-state-red.active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip.clto-filter-state-red.active {
  background: #ffffff;
  border-color: #c62828;
  color: #c62828;
}

#accordionFiltres
  .clto-filter-types-row
  .filter-chip.clto-filter-state-green.active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip.clto-filter-state-green.active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip.clto-filter-state-green.active {
  background: #ffffff;
  border-color: #00a63e;
  color: #00a63e;
}

#accordionFiltres
  .clto-filter-types-row
  .filter-chip.clto-filter-state-orange.active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip.clto-filter-state-orange.active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip.clto-filter-state-orange.active {
  background: #ffffff;
  border-color: #0153b6;
  color: #0153b6;
}

#accordionFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="ELITE"].active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="ELITE"].active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="ELITE"].active {
  background: #0153b6;
  border-color: #0153b6;
  color: #ffffff;
}

#accordionFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="PERFECTIONNEMENT"].active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="PERFECTIONNEMENT"].active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="PERFECTIONNEMENT"].active {
  background: #da9619;
  border-color: #da9619;
  color: #ffffff;
}

#accordionFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="STAGE"].active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="STAGE"].active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="STAGE"].active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}

#accordionFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="INTERMEDIAIRE"].active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="INTERMEDIAIRE"].active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="INTERMEDIAIRE"].active {
  background: #db2777;
  border-color: #db2777;
  color: #ffffff;
}

#accordionFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="INITIATION"].active,
#accordionFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="DEBUTANT"].active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="INITIATION"].active,
#accordionFiltresCreneaux
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="DEBUTANT"].active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="INITIATION"].active,
#accordionPreviewFiltres
  .clto-filter-types-row
  .filter-chip[data-filter="encadrement"][data-value="DEBUTANT"].active {
  background: #0891b2;
  border-color: #0891b2;
  color: #ffffff;
}

/* Les trois états restent groupés sur une ligne sur ordinateur. */
#accordionFiltres .clto-filter-state-buttons,
#accordionFiltresCreneaux .clto-filter-state-buttons,
#accordionPreviewFiltres .clto-filter-state-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-start;
}

#accordionFiltres .clto-filter-state-priority,
#accordionFiltresCreneaux .clto-filter-state-priority,
#accordionPreviewFiltres .clto-filter-state-priority {
  margin-bottom: 2px;
}

#accordionFiltres .clto-filter-state-buttons .filter-chip,
#accordionFiltresCreneaux .clto-filter-state-buttons .filter-chip,
#accordionPreviewFiltres .clto-filter-state-buttons .filter-chip,
#accordionFiltres .clto-filter-state-priority .filter-chip,
#accordionFiltresCreneaux .clto-filter-state-priority .filter-chip,
#accordionPreviewFiltres .clto-filter-state-priority .filter-chip {
  border-width: 3px;
  margin: 2px 0;
  padding: 7px 9px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #accordionFiltres .clto-filter-types-row,
  #accordionFiltresCreneaux .clto-filter-types-row,
  #accordionPreviewFiltres .clto-filter-types-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accordionFiltres .clto-filter-types-row .clto-filter-people,
  #accordionFiltresCreneaux .clto-filter-types-row .clto-filter-people,
  #accordionPreviewFiltres .clto-filter-types-row .clto-filter-people {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  #accordionFiltres .clto-filter-types-row,
  #accordionFiltresCreneaux .clto-filter-types-row,
  #accordionPreviewFiltres .clto-filter-types-row {
    display: block;
  }

  #accordionFiltres .clto-filter-types-row .filter-group,
  #accordionFiltresCreneaux .clto-filter-types-row .filter-group,
  #accordionPreviewFiltres .clto-filter-types-row .filter-group {
    margin-bottom: 14px;
  }

  #accordionFiltres .clto-filter-state-buttons,
  #accordionFiltresCreneaux .clto-filter-state-buttons,
  #accordionPreviewFiltres .clto-filter-state-buttons {
    flex-wrap: wrap;
  }
}

/* Les résultats Chosen des responsables doivent rester visibles au-dessus de l’accordéon. */
#accordionFiltres,
#accordionFiltresCreneaux,
#accordionPreviewFiltres,
#accordionFiltres .panel,
#accordionFiltresCreneaux .panel,
#accordionPreviewFiltres .panel,
#accordionFiltres .panel-body,
#accordionFiltresCreneaux .panel-body,
#accordionPreviewFiltres .panel-body {
  overflow: visible;
  position: relative;
}

#accordionFiltres .chosen-container,
#accordionFiltresCreneaux .chosen-container,
#accordionPreviewFiltres .chosen-container {
  position: relative;
  z-index: 30;
}

#accordionFiltres .chosen-container-multi .chosen-choices,
#accordionFiltresCreneaux .chosen-container-multi .chosen-choices,
#accordionPreviewFiltres .chosen-container-multi .chosen-choices {
  background-image: none;
  border: 1px solid #0153b6;
  border-radius: 8px;
  min-height: 40px;
  padding: 4px 8px;
}

#accordionFiltres .chosen-container-multi .chosen-choices li.search-choice,
#accordionFiltresCreneaux
  .chosen-container-multi
  .chosen-choices
  li.search-choice,
#accordionPreviewFiltres
  .chosen-container-multi
  .chosen-choices
  li.search-choice {
  background: #0153b6;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: #ffffff;
  margin: 3px 4px 3px 0;
  padding: 4px 22px 4px 7px;
}

#accordionFiltres .chosen-container .chosen-drop,
#accordionFiltresCreneaux .chosen-container .chosen-drop,
#accordionPreviewFiltres .chosen-container .chosen-drop {
  z-index: 1070;
}

/* Planning des séances — styles déplacés depuis seances_js.php. */
.planning-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, minmax(130px, 1fr));
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  overflow: hidden;
  background: #d8e0ea;
  gap: 1px;
}

.planning-grid > div {
  background: #fff;
}

.planning-corner,
.planning-day {
  background: #075dbc !important;
  color: #fff;
  text-align: center;
  padding: 12px;
}

.planning-day strong,
.planning-day small {
  display: block;
}

.planning-day strong {
  text-transform: uppercase;
  font-size: 17px;
}

.planning-day small {
  margin-top: 5px;
}

.planning-hours {
  display: flex;
  flex-direction: column;
  background: #075dbc !important;
  color: #fff;
  text-align: center;
}

.planning-hours span {
  height: 60px;
  padding-top: 8px;
  border-bottom: 1px solid #ffffff55;
  font-weight: 600;
}

.planning-column {
  position: relative;
  min-height: 600px;
  background: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff 59px,
    #d8e0ea 60px
  ) !important;
}

.seance-tile {
  position: absolute;
  left: 5px;
  right: 5px;
  background: #da9619;
  color: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 5px #0003;
  z-index: 2;
  overflow: hidden;
}

.seance-tile > b,
.seance-tile > strong,
.seance-tile > span,
.seance-tile > small {
  display: block;
}

.seance-tile > b {
  font-size: 14px;
}

.seance-tile > strong {
  margin-top: 3px;
}

.seance-tile > small {
  margin-top: 4px;
}

.seance-tile > div {
  margin-top: 6px;
  display: flex;
  gap: 5px;
}

.seance-tile .btn-edit,
.seance-tile .btn-delete {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #fff;
}

.btn-edit {
  background: #075dbc;
}

.btn-delete {
  background: #c62828;
}

.planning-grid a {
  color: #fff;
}

@media (max-width: 700px) {
  .planning-grid {
    grid-template-columns: 65px repeat(7, 120px);
    overflow-x: auto;
  }
}

.planning-grid {
  grid-template-columns: 60px repeat(7, minmax(130px, 1fr));
}

.seance-tile {
  font-size: 12px;
  font-weight: 400;
  padding: 6px;
}

.seance-tile strong {
  font-weight: 500;
}

.seance-tile small {
  font-size: 11px;
  font-weight: 400;
}

.tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tile-top b {
  font-size: 12px;
}

.tile-top span {
  display: flex;
  gap: 3px;
}

.tile-top .btn-edit,
.tile-top .btn-delete {
  width: 21px;
  height: 21px;
  font-size: 11px;
}

.planning-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  color: #0153b6;
}

.planning-tools select {
  margin-left: 8px;
  border: 2px solid #0153b6;
  border-radius: 8px;
  padding: 6px;
}

@media (max-width: 600px) {
  .planning-tools {
    flex-wrap: wrap;
    gap: 8px;
  }
}

.planning-tools {
  width: 100%;
  margin: 14px 0;
}

.planning-tools > label {
  order: 1;
  color: #0153b6;
  font-weight: 700;
}

.planning-tools > .planning-nav {
  order: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.planning-tools > .planning-actions {
  order: 3;
  display: flex;
  gap: 6px;
}

.planning-tools select {
  margin-left: 6px;
  min-width: 170px;
  border: 2px solid #0153b6;
  border-radius: 8px;
  padding: 6px;
}

@media (max-width: 700px) {
  .planning-tools > label,
  .planning-tools > .planning-nav,
  .planning-tools > .planning-actions {
    width: 100%;
    justify-content: center;
  }

  .planning-tools > .planning-nav {
    order: 2;
  }
}

.planning-legend {
  align-items: center;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 12px;
  padding: 8px 12px;
  color: #0153b6;
  font-size: 12px;
  font-weight: 600;
}

.planning-legend span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.planning-legend-total {
  border-right: 1px solid #d8e0ea;
  padding-right: 18px;
}

.planning-legend-total .fa {
  color: #0153b6;
}

.planning-legend-color {
  border-radius: 50%;
  display: inline-block;
  height: 11px;
  width: 11px;
}

.planning-legend-orange {
  background: #da9619;
}

.planning-legend-green {
  background: #00a63e;
}

.planning-legend-red {
  background: #c62828;
}

@media (max-width: 700px) {
  .planning-legend {
    gap: 8px 12px;
    font-size: 11px;
  }

  .planning-legend-total {
    border-right: 0;
    padding-right: 0;
    width: 100%;
  }
}

.planning-grid {
  grid-template-columns: 64px repeat(7, minmax(130px, 1fr));
}

.planning-hours span {
  height: 44px;
  font-size: 12px;
}

.planning-column {
  min-height: 0;
  background: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff 43px,
    #d8e0ea 44px
  ) !important;
}

.seance-tile {
  color: #0153b6 !important;
  font-size: 10px !important;
  padding: 4px 6px 28px !important;
}

.seance-tile strong {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

.seance-tile small {
  font-size: 9px;
}

.seance-tile .tile-comment {
  font-size: 12px;
}

.seance-tile .tile-header {
  align-items: center;
  background: #00a63e;
  color: #fff;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  line-height: 1.2;
  margin: -4px -6px 5px;
  min-height: 25px;
  padding: 4px 5px 4px 7px;
}

.seance-tile.seance-encadree {
  border-color: #da9619;
}

.seance-tile.seance-encadree .tile-header {
  background: #da9619;
}

.seance-tile.seance-jeu-libre {
  border-color: #00a63e;
}

.seance-tile.seance-jeu-libre .tile-header {
  background: #00a63e;
}

.seance-tile.seance-sans-encadrant {
  border-color: #c62828;
}

.seance-tile.seance-sans-encadrant .tile-header {
  background: #c62828;
}

.seance-tile .tile-header .tile-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  gap: 2px;
  margin-left: 3px;
  position: static;
}

.seance-tile .tile-header .tile-actions .btn-edit,
.seance-tile .tile-header .tile-actions .btn-delete,
.seance-tile .tile-header .tile-actions .btn-link {
  height: 18px !important;
  min-height: 18px !important;
  min-width: 18px !important;
  width: 18px !important;
}

.seance-tile .tile-types {
  margin-top: 3px;
}

.seance-tile .tile-responsables {
  bottom: 4px;
  left: 6px;
  right: 6px;
}

.seance-tile .clto-label {
  font-size: 9px;
  padding: 2px 6px;
}

.planning-grid {
  grid-template-columns: 64px repeat(7, minmax(130px, 1fr));
}

.planning-hours span {
  height: 44px;
  font-size: 12px;
}

.planning-column {
  min-height: 0;
  background: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff 43px,
    #d8e0ea 44px
  ) !important;
}

.seance-tile {
  color: #0153b6 !important;
  font-size: 10px !important;
  padding: 4px 6px 28px !important;
}

.seance-tile strong {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

.seance-tile small {
  font-size: 9px;
}

.seance-tile .tile-comment {
  font-size: 12px;
}

.seance-tile .tile-header {
  align-items: center;
  background: #00a63e;
  color: #fff;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  line-height: 1.2;
  margin: -4px -6px 5px;
  min-height: 25px;
  padding: 4px 5px 4px 7px;
}

.seance-tile.seance-encadree {
  border-color: #da9619;
}

.seance-tile.seance-encadree .tile-header {
  background: #da9619;
}

.seance-tile.seance-jeu-libre {
  border-color: #00a63e;
}

.seance-tile.seance-jeu-libre .tile-header {
  background: #00a63e;
}

.seance-tile.seance-sans-encadrant {
  border-color: #c62828;
}

.seance-tile.seance-sans-encadrant .tile-header {
  background: #c62828;
}

.seance-tile .tile-header .tile-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  gap: 2px;
  margin-left: 3px;
  position: static;
}

.seance-tile .tile-header .tile-actions .btn-edit,
.seance-tile .tile-header .tile-actions .btn-delete,
.seance-tile .tile-header .tile-actions .btn-link {
  height: 18px !important;
  min-height: 18px !important;
  min-width: 18px !important;
  width: 18px !important;
}

.seance-tile .tile-types {
  margin-top: 3px;
}

.seance-tile .tile-responsables {
  bottom: 4px;
  left: 6px;
  right: 6px;
}

.seance-tile .clto-label {
  font-size: 9px;
  padding: 2px 6px;
}

.planning-grid {
  grid-template-columns: 54px repeat(7, minmax(130px, 1fr));
}

.planning-hours span {
  display: block;
  box-sizing: border-box;
  height: 60px;
  line-height: 20px;
  padding-top: 0;
  font-size: 13px;
  white-space: nowrap;
}

.seance-tile {
  box-sizing: border-box;
}

.seance-tile .btn-edit,
.seance-tile .btn-delete {
  color: #fff;
}

.slice .seance-tile .btn-delete.clto-delete-action {
  background-color: #c62828 !important;
  border-color: #c62828 !important;
  color: #fff !important;
}

.slice .seance-tile .btn-delete.clto-delete-action:hover,
.slice .seance-tile .btn-delete.clto-delete-action:focus {
  background-color: #da9619 !important;
  border-color: #da9619 !important;
  color: #fff !important;
}

.seance-tile {
  background: #ffffff !important;
  color: #0153b6 !important;
  padding: 7px 30px 34px 8px;
  border: 3px solid #0153b6;
}

.seance-tile.seance-encadree {
  border-color: #da9619;
}

.seance-tile.seance-jeu-libre {
  border-color: #0153b6;
}

.seance-tile.seance-sans-encadrant {
  border-color: #c62828;
}

.seance-tile .tile-actions {
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: absolute;
  right: 4px;
  top: 4px;
}

.seance-tile.seance-non-publique {
  opacity: 0.55;
}

.slice .seance-tile .tile-actions .btn-edit,
.slice .seance-tile .tile-actions .btn-delete,
.slice .seance-tile .tile-actions .btn-link {
  align-items: center !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  font-size: 10px !important;
  height: 20px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  width: 20px !important;
}

.slice .seance-tile .tile-actions .btn-link {
  background-color: #075dbc !important;
  border-color: #075dbc !important;
  color: #ffffff !important;
}

.slice .seance-tile .tile-header .tile-actions .btn-link,
.slice .seance-tile .tile-header .tile-actions .btn-link .fa {
  color: #ffffff !important;
}

.slice .seance-tile .tile-header .tile-actions .btn-link {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
}

.slice .seance-tile .tile-header .tile-actions .btn-link .fa {
  display: block !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(0) !important;
  width: auto !important;
}

.seance-tile .tile-top {
  padding-right: 0;
}

.seance-tile .tile-gymnase {
  font-weight: 700;
}

.seance-tile .tile-comment {
  display: block;
  color: #c62828;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 4px;
}

.seance-tile .tile-types {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}

.seance-tile .tile-responsables {
  bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  left: 8px;
  position: absolute;
  right: 8px;
}

#accordionFiltres .clto-filter-types-row {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 1fr);
}

#accordionFiltres .clto-filter-types-row .filter-group {
  display: block;
  min-width: 0;
  padding: 0;
  width: auto;
}

#accordionFiltres .clto-filter-types-row .filter-group > b {
  color: #0153b6;
  display: block;
  margin-bottom: 6px;
}

#accordionFiltres .clto-filter-types-row .filter-chip {
  font-size: 13px;
  margin: 4px 5px 4px 0;
  padding: 8px 12px;
}

#accordionFiltres #filtreResponsablesSeance + .chosen-container {
  width: 100% !important;
}

#accordionFiltres
  #filtreResponsablesSeance
  + .chosen-container
  .chosen-choices {
  border-color: #0153b6;
  border-radius: 8px;
  min-height: 34px;
}

@media (max-width: 767px) {
  #accordionFiltres .clto-filter-types-row {
    grid-template-columns: 1fr;
  }
}

.seance-tile .tile-types .clto-label {
  margin: 0;
}

.seance-tile .tile-responsables .clto-label {
  margin: 0;
}

@media (max-width: 700px) {
  .planning-grid {
    grid-template-columns: 54px repeat(7, 120px);
  }
}

#accordionFiltres .filter-search-row {
  align-items: flex-end;
  display: flex;
  gap: 10px;
  width: 100%;
}

#accordionFiltres .filter-search-row .btn {
  margin-left: auto;
}

.filter-search-row label {
  display: block;
  width: 33.333%;
}

.filter-search-row > input {
  display: block;
  width: 33.333%;
}

.filter-search-row .btn {
  white-space: nowrap;
}

@media (max-width: 700px) {
  #accordionFiltres .filter-search-row {
    display: block;
  }

  #accordionFiltres .filter-search-row label,
  #accordionFiltres .filter-search-row > input {
    width: 100%;
  }

  #accordionFiltres .filter-search-row .btn {
    margin: 8px 0 0;
  }
}

.planning-tools .planning-nav button {
  font-size: 0;
}

.planning-tools .planning-nav button i {
  font-size: 16px;
}

#accordionFiltres .filter-search-row.clto-filter-types-row {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 1fr);
}

#accordionFiltres .filter-search-row.clto-filter-types-row .filter-group {
  align-self: start;
  display: block;
  min-width: 0;
  padding: 0;
  width: auto;
}

#accordionFiltres .filter-search-row.clto-filter-types-row .clto-filter-people {
  grid-column: auto;
  justify-self: stretch;
}

#accordionFiltres #filtreResponsablesSeance + .chosen-container {
  box-sizing: border-box;
  display: block;
  margin: 0;
  width: 100% !important;
}

#accordionFiltres
  #filtreResponsablesSeance
  + .chosen-container
  .chosen-choices {
  box-sizing: border-box;
  min-height: 38px;
  padding: 4px 8px;
  width: 100%;
}

#accordionFiltres
  #filtreResponsablesSeance
  + .chosen-container
  .search-field
  input[type="text"] {
  box-sizing: border-box;
  height: 26px;
  margin: 0;
  width: 100% !important;
}

#accordionFiltres #filtreResponsablesSeance + .chosen-container .chosen-drop {
  box-sizing: border-box;
  left: 0;
  right: 0;
  width: 100% !important;
  z-index: 1060;
}

@media (max-width: 767px) {
  #accordionFiltres .filter-search-row.clto-filter-types-row {
    grid-template-columns: 1fr;
  }
}

.planning-empty-message {
  align-items: center;
  color: #0153b6;
  display: flex !important;
  font-size: 16px;
  font-weight: 700;
  gap: 8px;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 80px;
  padding: 16px;
  text-align: center;
}

.planning-empty-message .fa {
  color: #da9619;
}

.pg-opt .seances-page-title {
  white-space: nowrap;
}

#planningGrid {
  position: relative;
}

#planningGrid .planning-loading {
  display: none;
  position: absolute;
  z-index: 20;
  inset: 0;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #0153b6;
  font-weight: 700;
}

#planningGrid .planning-loading i {
  color: #da9619;
  font-size: 38px;
}

#filtreGymnasePlanning:disabled {
  background: #eeeeee;
  border-color: #cfcfcf;
  color: #999999;
  cursor: not-allowed;
  opacity: 1;
}

#planningGrid.planning-grid-empty
  > div:not(.planning-empty-message):not(#planningGridMeta) {
  display: none !important;
}

.resume-seances-semaine {
  margin: 0 0 12px;
  color: #0153b6;
  background: #eaf4fc;
  border-color: #b8d9ef;
}

.pg-opt + .slice {
  padding-top: 18px !important;
}

.type-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}

.type-choices label {
  font-weight: 400;
  margin: 0;
}

/* Règles finales du planning : mêmes états pour bordure, en-tête, pied et légende. */
#planningGrid .planning-hours {
  align-self: start;
}

#planningGrid .planning-hours span {
  box-sizing: border-box !important;
  flex: 0 0 50px !important;
  height: 50px !important;
  line-height: normal !important;
  padding-top: 4px !important;
}

#planningGrid .planning-column {
  align-self: start;
  background: repeating-linear-gradient(
    to bottom,
    #ffffff 0,
    #ffffff 49px,
    #d8e0ea 49px,
    #d8e0ea 50px
  ) !important;
}

#planningGrid .seance-tile.seance-encadree {
  border-color: #0153b6 !important;
}

#planningGrid .seance-tile.seance-encadree .tile-header,
#planningGrid .seance-tile.seance-encadree .tile-footer {
  background-color: #0153b6 !important;
  border-top-color: #0153b6 !important;
}

#planningGrid .seance-tile.seance-jeu-libre {
  border-color: #00a63e !important;
}

#planningGrid .seance-tile.seance-jeu-libre .tile-header,
#planningGrid .seance-tile.seance-jeu-libre .tile-footer {
  background-color: #00a63e !important;
  border-top-color: #00a63e !important;
}

#planningGrid .seance-tile.seance-sans-encadrant {
  border-color: #c62828 !important;
}

#planningGrid .seance-tile.seance-sans-encadrant .tile-header,
#planningGrid .seance-tile.seance-sans-encadrant .tile-footer {
  background-color: #c62828 !important;
  border-top-color: #c62828 !important;
}

.planning-legend-blue {
  background-color: #0153b6 !important;
}

.contact-photo-miniature,
.contact-photo-apercu {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.contact-photo-miniature {
  width: 40px;
  height: 40px;
}

.contact-photo-apercu,
.contact-supprimer-photo {
  display: none;
}

/* Listes déroulantes : hauteur commune et libellés entièrement lisibles. */
select.form-control {
  height: 40px;
  line-height: 20px;
  padding-bottom: 9px;
  padding-top: 9px;
}

.chosen-container-single .chosen-single {
  height: 40px;
  line-height: 38px;
}

.chosen-container-single .chosen-single div b {
  background-position-y: 9px;
}

.chosen-container-multi .chosen-choices {
  box-sizing: border-box;
  min-height: 40px;
  padding: 5px 8px;
}

/* Bandeau global : visible uniquement pour les URL listées dans config.php. */
.environment-banner {
  background-color: #da9619;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
  padding: 12px 15px;
  text-align: center;
}

.environment-banner--local {
  background-color: #4d6479;
}

.environment-banner--preprod {
  background-color: #ff6900;
}

.clto-etat-switch {
  display: flex;
  align-items: center;
  margin: 6px 0;
  position: relative;
  white-space: nowrap;
}
.clto-etat-switch b {
  flex: 0 0 82px;
  font-size: 12px;
}
.clto-etat-switch button {
  background: #fff;
  border: 2px solid currentColor;
  flex: 0 0 70px;
  font: 700 12px/1.2 inherit;
  padding: 6px 8px;
  position: relative;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  z-index: 1;
}
.clto-etat-mode button {
  flex-basis: 78px;
}
.clto-etat-mode button[data-value="jeu-libre"] {
  flex-basis: 92px;
}
.clto-etat-mode button[data-value="entrainement"] {
  flex-basis: 108px;
}
.clto-etat-switch button:first-of-type {
  border-radius: 12px 0 0 12px;
}
.clto-etat-switch button:last-of-type {
  border-radius: 0 12px 12px 0;
}
.clto-etat-switch button + button {
  margin-left: -2px;
}
.clto-etat-switch button.clto-etat-actif {
  background-color: currentColor !important;
  background-image: none !important;
  color: #fff !important;
  z-index: 2;
}
.clto-etat-switch button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
}
.clto-etat-switch button:focus {
  outline: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px rgba(1, 83, 182, 0.18);
}
.clto-etat-responsable {
  color: #c62828;
}
.clto-etat-jeu-libre {
  color: #159947;
}
.clto-etat-entrainement {
  color: #0153b6;
}
.clto-etat-mode {
  color: #0153b6;
}
.clto-etat-mode[data-active="jeu-libre"] {
  color: #159947;
}
.clto-etat-responsable button.clto-etat-actif {
  background-color: #c62828 !important;
}
.clto-etat-mode button.clto-etat-actif {
  background-color: #0153b6 !important;
}
.clto-etat-mode[data-active="jeu-libre"] button.clto-etat-actif {
  background-color: #159947 !important;
}
.clto-label-jeu-libre {
  background: #159947 !important;
}
.clto-label-sans-responsable {
  background: #c62828 !important;
}

@media (max-width: 575px) {
  .clto-etat-switch {
    flex-wrap: wrap;
    margin: 10px 0;
  }
  .clto-etat-switch b {
    flex: 0 0 100%;
    margin-bottom: 5px;
  }
  .clto-etat-switch button,
  .clto-etat-mode button {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
  }
}