/* ==========================================================================
   aeyo_friday — harmonisation UIkit 2 / DA gereso.com
   Les composants maison (com_gereso, com_swstagiaire, com_swconsultant) et le
   contenu en base produisent du HTML UIkit 2 (uk-*). Cette feuille, chargée
   après uikit-gereso.css (UIkit 2 + styles GERESO historiques), modernise les
   composants génériques sans toucher aux règles spécifiques des pages
   (sélecteurs « body .uk-container #tm-main … » plus forts, conservés tels quels).
   Les variables --gs-* sont définies dans template.css (chargée ensuite) ;
   chaque var() a une valeur de repli.
   ========================================================================== */

/* -------------------------------------------------------------- Typo & liens */
.uk-container,
.uk-panel,
.uk-modal-dialog,
.uk-offcanvas-bar {
  font-family: var(--gs-font, "Open Sans", system-ui, sans-serif);
}

.uk-link,
.uk-text-primary {
  color: var(--gs-primary, #D00C2D);
}

.uk-text-danger { color: var(--gs-error, #B5001E); }
.uk-text-success { color: var(--gs-success-strong, #028A62); }
.uk-text-warning { color: var(--gs-warning, #F0920A); }
.uk-text-muted { color: var(--gs-text-muted, #636463) !important; }

.uk-panel-title,
.uk-panel-box .uk-panel-title,
.uk-modal-header h2,
.uk-modal-header h3 {
  font-family: var(--gs-font, "Open Sans", sans-serif);
  font-weight: 800;
  color: var(--gs-text, #090909);
  text-transform: none;
  letter-spacing: normal;
}

/* Icônes FontAwesome 4 (uk-icon-*) : la police n'altère pas le libellé voisin. */
[class*="uk-icon-"] {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
}

/* -------------------------------------------------------------- Boutons : pilules */
.uk-button {
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--gs-primary, #D00C2D);
  border-radius: var(--gs-radius-pill, 9999px);
  background: #fff;
  color: var(--gs-primary, #D00C2D);
  font-family: var(--gs-font, "Open Sans", sans-serif);
  font-size: .875rem;
  font-weight: 700;
  line-height: 38px;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}

.uk-button:hover,
.uk-button:focus {
  background: var(--gs-primary-soft, #FCE8EB);
  color: var(--gs-primary-hover, #B5001E);
  border-color: var(--gs-primary-hover, #B5001E);
  box-shadow: none;
  outline: none;
}

.uk-button:focus-visible {
  box-shadow: 0 0 0 3px rgb(208 12 45 / .25);
}

.uk-button-primary,
.uk-button.uk-active,
.uk-button:active {
  background: var(--gs-primary, #D00C2D);
  border-color: var(--gs-primary, #D00C2D);
  color: #fff;
}

.uk-button-primary:hover,
.uk-button-primary:focus {
  background: var(--gs-primary-hover, #B5001E);
  border-color: var(--gs-primary-hover, #B5001E);
  color: #fff;
}

.uk-button-success {
  background: var(--gs-success-strong, #028A62);
  border-color: var(--gs-success-strong, #028A62);
  color: #fff;
}

.uk-button-success:hover,
.uk-button-success:focus {
  background: #026F4F;
  border-color: #026F4F;
  color: #fff;
}

.uk-button-danger {
  background: var(--gs-error, #B5001E);
  border-color: var(--gs-error, #B5001E);
  color: #fff;
}

.uk-button-danger:hover,
.uk-button-danger:focus {
  background: var(--gs-primary-dark, #7F0013);
  border-color: var(--gs-primary-dark, #7F0013);
  color: #fff;
}

.uk-button-link {
  border-color: transparent;
  background: transparent;
}

.uk-button-mini { min-height: 28px; padding: 0 12px; line-height: 26px; font-size: .75rem; }
.uk-button-small { min-height: 32px; padding: 0 14px; line-height: 30px; font-size: .8125rem; }
.uk-button-large { min-height: 52px; padding: 0 28px; line-height: 50px; font-size: 1rem; }

.uk-button:disabled,
.uk-button[disabled] {
  border-color: var(--gs-border-light, #E9E9E9);
  background: var(--gs-border-light, #E9E9E9);
  color: var(--gs-text-subtle, #6D6F71);
}

.uk-button-group > .uk-button:not(:first-child):not(:last-child),
.uk-button-group > :not(:first-child):not(:last-child) .uk-button { border-radius: 0; }
.uk-button-group > .uk-button:first-child:not(:last-child) { border-radius: var(--gs-radius-pill, 9999px) 0 0 var(--gs-radius-pill, 9999px); }
.uk-button-group > .uk-button:last-child:not(:first-child) { border-radius: 0 var(--gs-radius-pill, 9999px) var(--gs-radius-pill, 9999px) 0; }

/* -------------------------------------------------------------- Panneaux & cartes */
.uk-panel-box {
  padding: 24px;
  border: 1px solid var(--gs-border-light, #E9E9E9);
  border-radius: var(--gs-radius-lg, 1rem);
  background: #fff;
  color: var(--gs-text, #090909);
  box-shadow: var(--gs-shadow-card, 0 10px 15px -3px rgb(0 0 0 / .1));
}

.uk-panel-box-primary {
  border-color: transparent;
  background: var(--gs-bg-soft, #EDEFF8);
  box-shadow: none;
}

.uk-panel-box-secondary {
  border-color: transparent;
  background: var(--gs-footer-bg, #514D4D);
  color: #fff;
}

.uk-panel-box-secondary .uk-panel-title {
  color: #fff;
}

.uk-panel-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.uk-block-muted {
  background: var(--gs-bg-soft, #EDEFF8);
}

.uk-article-title {
  font-weight: 800;
  color: var(--gs-text, #090909);
}

/* -------------------------------------------------------------- Tableaux */
.uk-table {
  font-size: .875rem;
}

.uk-table th {
  font-family: var(--gs-font, "Open Sans", sans-serif);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.uk-table th,
.uk-table td {
  padding: 10px 12px;
}

.uk-table-striped tbody tr:nth-of-type(odd) {
  background: #F7F8FC;
}

.uk-table-hover tbody tr:hover {
  background: var(--gs-bg-soft, #EDEFF8);
}

.uk-overflow-container {
  border-radius: var(--gs-radius-md, .75rem);
}

/* -------------------------------------------------------------- Formulaires */
.uk-form input:not([type]),
.uk-form input[type="text"],
.uk-form input[type="password"],
.uk-form input[type="email"],
.uk-form input[type="url"],
.uk-form input[type="search"],
.uk-form input[type="tel"],
.uk-form input[type="number"],
.uk-form input[type="date"],
.uk-form input[type="datetime-local"],
.uk-form input[type="time"],
.uk-form select,
.uk-form textarea {
  border: 1px solid var(--gs-border, #C5C5C5);
  border-radius: var(--gs-radius-sm, .5rem);
  font-family: var(--gs-font, "Open Sans", sans-serif);
  color: var(--gs-text, #090909);
  transition: border-color .15s, box-shadow .15s;
}

.uk-form input:not([type]),
.uk-form input[type="text"],
.uk-form input[type="password"],
.uk-form input[type="email"],
.uk-form input[type="url"],
.uk-form input[type="search"],
.uk-form input[type="tel"],
.uk-form input[type="number"],
.uk-form input[type="date"],
.uk-form input[type="datetime-local"],
.uk-form input[type="time"],
.uk-form select {
  height: 40px;
  padding: 0 12px;
}

.uk-form textarea {
  padding: 8px 12px;
}

.uk-form input:focus,
.uk-form select:focus,
.uk-form textarea:focus {
  border-color: var(--gs-text-muted, #636463);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(99 100 99 / .15) !important;
  outline: none;
}

.uk-form-danger,
.uk-form .uk-form-danger {
  border-color: var(--gs-error, #B5001E) !important;
  color: var(--gs-error, #B5001E) !important;
}

.uk-form-success,
.uk-form .uk-form-success {
  border-color: var(--gs-success-strong, #028A62) !important;
}

.uk-form input[type="checkbox"],
.uk-form input[type="radio"] {
  accent-color: var(--gs-primary, #D00C2D);
}

.uk-form legend {
  font-weight: 800;
  color: var(--gs-text, #090909);
}

/* -------------------------------------------------------------- Alertes, badges */
.uk-alert {
  padding: 14px 18px;
  border: 0;
  border-left: 4px solid var(--gs-info, #296D78);
  border-radius: var(--gs-radius-md, .75rem);
  background: #E8F1F2;
  color: var(--gs-text, #090909);
  text-shadow: none;
}

.uk-alert-success { border-left-color: var(--gs-success-strong, #028A62); background: #E6F5EE; }
.uk-alert-warning { border-left-color: var(--gs-warning, #F0920A); background: #FEF3E2; }
.uk-alert-danger { border-left-color: var(--gs-error, #B5001E); background: var(--gs-primary-soft, #FCE8EB); }

.uk-badge {
  padding: 0 10px;
  border-radius: var(--gs-radius-pill, 9999px);
  background: var(--gs-primary, #D00C2D);
  font-weight: 700;
  text-shadow: none;
}

.uk-badge-success { background: var(--gs-success-strong, #028A62); }
.uk-badge-warning { background: var(--gs-warning, #F0920A); }
.uk-badge-danger { background: var(--gs-error, #B5001E); }

/* -------------------------------------------------------------- Modales UIkit 2 */
.uk-modal {
  background: rgb(9 9 9 / .5);
}

.uk-modal-dialog {
  padding: 24px;
  border-radius: var(--gs-radius-lg, 1rem);
  box-shadow: var(--gs-shadow-panel, 0 20px 25px -5px rgb(0 0 0 / .1));
}

.uk-modal-header {
  margin: -24px -24px 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gs-border-light, #E9E9E9);
  border-radius: var(--gs-radius-lg, 1rem) var(--gs-radius-lg, 1rem) 0 0;
  background: #fff;
}

.uk-modal-footer {
  margin: 20px -24px -24px;
  padding: 16px 24px;
  border-top: 1px solid var(--gs-border-light, #E9E9E9);
  border-radius: 0 0 var(--gs-radius-lg, 1rem) var(--gs-radius-lg, 1rem);
  background: #F7F8FC;
}

/* Modales rendues dans le contenu (évaluation stagiaire #pop-up-eval / #pop-up-eval-ap, modales consultant…) :
   l'ancien thème force « body .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog { padding: 0 0 17px;
   border: 1px solid #000 } ». Les marges négatives -24px ci-dessus faisaient alors déborder l'en-tête (et le pied)
   de 24px de chaque côté : on les recale sur ce padding (0 latéral / 17px bas). Bordure noire retirée pour que
   l'en-tête (rayon 1rem en haut) épouse exactement l'arrondi du dialogue. Spécificité (2,4,1) > (2,3,1). */
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog {
  border: 0;
}
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog > .uk-modal-header {
  margin: 0 0 20px;
}
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog > .uk-modal-footer {
  margin: 20px 0 -17px;
}

/* En-tête « pastille + titre + × » (évaluation avant/après #pop-up-eval / #pop-up-eval-ap, règlement intérieur) :
   l'ancien thème positionnait la pastille (.white-cercle) et le « × » (.uk-modal-close::after) en absolu dans
   l'en-tête, le titre passant dessous dès qu'il occupait deux lignes. Ici : trois zones en flex — pastille | titre
   (retour à la ligne libre dans sa colonne) | ×, pastille et × centrés verticalement. Le titre peut être un <span
   class="title_popin"> ou un nœud texte nu (évaluation « après ») : un nœud texte devient un élément flex anonyme
   qui se comporte de la même façon. Deux identifiants pour passer devant « body .uk-container #tm-main #tm-content
   .uk-modal .uk-modal-close { width: 35%; line-height: 33px } » et « #pop-up-eval .evaluation-popup … ». */
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog > .uk-modal-header:has(> .white-cercle) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 18px;
  box-sizing: border-box;
  font-size: 1.125rem;
  line-height: 1.35;
}
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog > .uk-modal-header:has(> .white-cercle) > .white-cercle {
  position: static;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  line-height: 44px;
  font-size: 22px;
}
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog > .uk-modal-header:has(> .white-cercle) > .title_popin {
  position: static;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog > .uk-modal-header:has(> .white-cercle) > .uk-modal-close {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 0 0 auto;
  line-height: 1;
  border-radius: var(--gs-radius-pill, 9999px);
  opacity: 1;
}
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog > .uk-modal-header:has(> .white-cercle) > .uk-modal-close:hover {
  background: rgb(255 255 255 / .18);
}
body.aeyo .uk-container #tm-main #tm-content .uk-modal .uk-modal-dialog > .uk-modal-header:has(> .white-cercle) > .uk-modal-close::after {
  position: static;
  margin: 0;
  line-height: 1;
}

/* Spinner GSO (#preloader, components/shared/js/dialogs.php) */
#preloader.uk-modal .uk-icon-spinner {
  color: #fff;
  font-size: 48px;
}

/* -------------------------------------------------------------- Onglets, sous-nav, pagination, accordéon */
.uk-tab > li > a {
  font-weight: 700;
  color: var(--gs-text-muted, #636463);
}

.uk-tab > li > a::after,
.uk-tab > li > a:after {
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gs-primary, #D00C2D);
}

.uk-tab > li.uk-active > a {
  color: var(--gs-primary, #D00C2D);
}

.uk-subnav-pill > * > * {
  border-radius: var(--gs-radius-pill, 9999px);
  font-weight: 700;
}

.uk-subnav-pill > .uk-active > * {
  background: var(--gs-primary, #D00C2D);
  color: #fff;
}

.uk-pagination > .uk-active > span {
  background: var(--gs-primary, #D00C2D);
  border-color: var(--gs-primary, #D00C2D);
  color: #fff;
}

.uk-accordion-title {
  padding: 12px 16px;
  border: 1px solid var(--gs-border-light, #E9E9E9);
  border-radius: var(--gs-radius-md, .75rem);
  background: #F7F8FC;
  font-family: var(--gs-font, "Open Sans", sans-serif);
  font-weight: 700;
}

.uk-accordion-title.uk-active {
  border-color: var(--gs-primary-soft, #FCE8EB);
  background: var(--gs-bg-soft, #EDEFF8);
  color: var(--gs-primary, #D00C2D);
}

.uk-tooltip {
  padding: 6px 10px;
  border-radius: var(--gs-radius-sm, .5rem);
  background: var(--gs-text, #090909);
  font-family: var(--gs-font, "Open Sans", sans-serif);
  font-size: .8125rem;
}

.uk-progress-bar {
  background: var(--gs-gradient-primary, #D00C2D);
}

/* -------------------------------------------------------------- jQuery UI datepicker */
.ui-datepicker {
  z-index: 1200 !important;
  padding: 8px;
  border: 0 !important;
  border-radius: var(--gs-radius-md, .75rem);
  background: #fff !important;
  box-shadow: var(--gs-shadow-panel, 0 20px 25px -5px rgb(0 0 0 / .1));
  font-family: var(--gs-font, "Open Sans", sans-serif);
  font-size: .875rem;
}

.ui-datepicker .ui-datepicker-header {
  border: 0;
  border-radius: var(--gs-radius-sm, .5rem);
  background: var(--gs-bg-soft, #EDEFF8);
  color: var(--gs-text, #090909);
  font-weight: 800;
}

.ui-datepicker td a.ui-state-default {
  border: 0;
  border-radius: var(--gs-radius-sm, .5rem);
  background: transparent;
  text-align: center;
}

.ui-datepicker td a.ui-state-default:hover {
  background: var(--gs-bg-soft, #EDEFF8);
}

.ui-datepicker td a.ui-state-highlight {
  background: var(--gs-primary-soft, #FCE8EB);
  color: var(--gs-primary, #D00C2D);
}

.ui-datepicker td a.ui-state-active {
  background: var(--gs-primary, #D00C2D);
  color: #fff;
}

/* -------------------------------------------------------------- DataTables (dataTables.uikit) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--gs-border, #C5C5C5);
  border-radius: var(--gs-radius-sm, .5rem);
}

.dataTables_wrapper .dataTables_info {
  color: var(--gs-text-muted, #636463);
  font-size: .8125rem;
}

/* -------------------------------------------------------------- Dropzone */
.dropzone {
  border: 2px dashed var(--gs-border, #C5C5C5);
  border-radius: var(--gs-radius-lg, 1rem);
  background: #F7F8FC;
}

.dropzone.dz-drag-hover {
  border-color: var(--gs-primary, #D00C2D);
  background: var(--gs-primary-soft, #FCE8EB);
}

/* -------------------------------------------------------------- Titres de section des composants maison
   yoo_monday : bandeau gris #757575 + pastille rouge (h2/h3 .uk-panel-title, .titre-head-second).
   Même structure (padding, pastille positionnée), couleurs de la charte. */
body.aeyo .uk-container h3.uk-panel-title,
body.aeyo .uk-container h2.uk-panel-title,
body.aeyo .uk-container h3.titre-head-second,
body.aeyo .uk-container h2.titre-head-second,
/* l'ancien thème forçait le texte en blanc avec des sélecteurs à identifiants (#tm-main #tm-content) */
body.aeyo .uk-container #tm-main #tm-content h3.uk-panel-title,
body.aeyo .uk-container #tm-main #tm-content h2.uk-panel-title,
body.aeyo .uk-container #tm-main #tm-content .page-session h3.uk-panel-title,
body.aeyo .uk-container #tm-main #tm-content h3.titre-head-second,
body.aeyo .uk-container #tm-main #tm-content h2.titre-head-second,
body.aeyo [id^="tm-"] h3.uk-panel-title,
body.aeyo [id^="tm-"] h2.uk-panel-title {
  border-radius: var(--gs-radius-md, .75rem);
  background-color: var(--gs-label-bg, #DCDFE6);
  color: var(--gs-text, #090909);
  font-weight: 800;
}

/* Espace entre un bandeau de titre et le contenu qui le suit. Porté par le frère suivant (margin-top) :
   les marges verticales fusionnent, on obtient donc max(marge du titre, 1rem) — les titres déjà espacés
   (26px de l'ancien thème) ne bougent pas, ceux à 0 (formulaire de profil, documents utiles…) gagnent 1rem.
   Specificité (2,3,2) > « body .uk-container #tm-main form#frm_monprofil .uk-block { margin: 0 auto 21px } » (2,2,2). */
body.aeyo .uk-container #tm-main :is(h2, h3):is(.uk-panel-title, .titre-head-second) + *,
body.aeyo .uk-container #tm-main #tm-content :is(h2, h3):is(.uk-panel-title, .titre-head-second) + * {
  margin-top: 1rem;
}

body.aeyo .uk-container h3.uk-panel-title i,
body.aeyo .uk-container h2.uk-panel-title i,
body.aeyo .uk-container h3.titre-head-second i,
body.aeyo .uk-container h2.titre-head-second i,
body.aeyo .uk-container #tm-main #tm-content .red-cercle,
body.aeyo .uk-container #tm-main #tm-content .red-cercle-d,
body.aeyo .uk-container #tm-main #tm-content .titre-head-seconde {
  background-color: var(--gs-primary, #D00C2D);
}

/* Pastille du bandeau : l'ancien thème la fixe en haut (position absolute ; top: -3px). Sur un titre qui passe
   sur 2 lignes (mobile), elle débordait en haut du bandeau : on la centre verticalement quelle que soit la hauteur. */
body.aeyo .uk-container :is(h2, h3):is(.uk-panel-title, .titre-head-second) > i[class*="cercle"],
body.aeyo .uk-container #tm-main #tm-content :is(h2, h3):is(.uk-panel-title, .titre-head-second) > i[class*="cercle"],
body.aeyo [id^="tm-"] :is(h2, h3):is(.uk-panel-title, .titre-head-second) > i[class*="cercle"] {
  top: 50%;
  transform: translateY(-50%);
}

/* Titre de module rendu en carte : pas de bandeau, la carte suffit. */
body.aeyo .uk-container .af-module--box > h3.uk-panel-title.af-module__title {
  margin: 0 0 1rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.25rem;
}

/* En-têtes de tableaux : noir -> granite de la charte. */
body.aeyo .uk-container .uk-table tr th {
  background-color: var(--gs-footer-bg, #514D4D);
  font-weight: 700;
}

/* -------------------------------------------------------------- Corrections issues de l'audit visuel (parcours complet)
   Tableaux DataTables : la librairie fige la largeur de chaque colonne au chargement (style="width:…") ; avec des
   intitulés / adresses longs la somme dépasse le conteneur (colonnes coupées, première colonne démesurée).
   On laisse le navigateur répartir la largeur disponible, avec retour à la ligne. */
body.aeyo #tm-content table.dataTable {
  width: 100% !important;
}
body.aeyo #tm-content table.dataTable thead th {
  width: auto !important;
}
body.aeyo #tm-content table.dataTable td {
  overflow-wrap: break-word;
}
/* Cellules tronquées du suivi d'activité (largeur fixe 420px / 260px prévue pour un conteneur plus large) */
body.aeyo .page-session .cell-truncate-tooltip {
  max-width: clamp(10rem, 19vw, 26rem) !important;
}
body.aeyo .page-session .cell-truncate-tooltip-small {
  max-width: clamp(8rem, 14vw, 16rem) !important;
}

/* Texte « succès » (dates de validité des documents…) : le vert clair historique est illisible sur fond clair. */
body.aeyo .uk-text-success {
  color: var(--gs-success-strong, #028A62) !important;
}

/* Zone de dépôt désactivée (en attente de la date du document) : l'opacité était appliquée deux fois (0,3 x 0,3). */
body.aeyo .disabled_upload_file {
  opacity: .55;
}
body.aeyo .disabled_upload_file .gereso-uploader-dropzone {
  opacity: 1;
}
body.aeyo .gereso-uploader-button {
  background-color: var(--gs-primary, #D00C2D);
  border-radius: var(--gs-radius-pill, 9999px);
}
body.aeyo #tm-content table.dataTable > thead > tr > th,
body.aeyo #tm-content table.dataTable > tbody > tr > td {
  padding: 8px 8px;
}

/* Formulaires de page (profil, coordonnées…) : blocs gris -> cartes, champs au style de la charte
   (sans style dans le nouveau template : rendu par défaut du navigateur). Limité aux formulaires de page. */
body.aeyo #tm-main #tm-content form .uk-block {
  background: var(--gs-bg, #fff);
  border: 1px solid var(--gs-border-light, #E9E9E9);
  border-radius: var(--gs-radius-lg, 1rem);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
body.aeyo #tm-main #tm-content form h2.titre-head-second {
  display: block;
  width: auto;
}
body.aeyo #tm-content :is(.tm-article-container, .style_page_form) :is(input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input:not([type]), select, textarea) {
  min-height: 2.5rem;
  padding: .45rem .75rem;
  border: 1px solid var(--gs-border, #C5C5C5);
  border-radius: var(--gs-radius-sm, .5rem);
  background: var(--gs-bg, #fff);
  color: var(--gs-text, #090909);
  font: inherit;
  font-size: .875rem;
  box-sizing: border-box;
  max-width: 100%;
}
body.aeyo #tm-content :is(.tm-article-container, .style_page_form) :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--gs-text-muted, #636463);
  box-shadow: 0 0 0 3px rgb(208 12 45 / .15);
}
body.aeyo #tm-content :is(.tm-article-container, .style_page_form) :is(input, textarea)::placeholder {
  color: var(--gs-placeholder, #9CA3AF);
}

/* Règles de mot de passe : caractères spéciaux en <code> gris sur gris */
body.aeyo .swpassword-rules code {
  color: var(--gs-text, #090909);
  background: var(--gs-bg-soft, #EDEFF8);
  padding: .1em .35em;
  border-radius: 4px;
}

/* -------------------------------------------------------------- Barre de filtres consultant (#filtre-session)
   Vos sessions / Suivi de mon activité. L'ancien thème empilait des flottants avec des marges ad hoc
   (labels 7px 13px 19px, champs margin-top 9px, boutons margin-top 7px) → rien n'était aligné verticalement.
   Ici : flex, tout centré sur une même ligne, espacements réguliers ; replie proprement en largeur réduite.
   (Le calendrier a sa propre variante compacte dans .uk-panel, non concernée.) */
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 20px;
  padding: 10px 16px;
  border-radius: var(--gs-radius-md, .75rem);
  background-color: var(--gs-label-bg, #DCDFE6);
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session::after { content: none; }
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session :is(form, .uk-float-left) {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session label {
  margin: 0;
  line-height: 1.2;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session .sep {
  float: none;
  width: 1px;
  height: 28px;
  margin: 0 4px;
  background-color: #A3A7B0;
}
/* Champs texte / dates */
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session input[type="text"] {
  box-sizing: border-box;
  width: 100px;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #B9BDC6;
  border-radius: 6px;
  font-size: 13px;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session label.date {
  position: relative;
  display: inline-flex;
  align-items: center;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session label.date::before {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--gs-text-muted, #636463);
  pointer-events: none;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session label.date input {
  width: 112px;
  padding-left: 30px;
}
/* Boutons icône (loupe / réinitialiser) : carrés 34px, icône centrée */
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session :is(label.search, label.reset) {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin: 0;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session :is(label.search, label.reset) input {
  width: 34px;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session :is(label.search, label.reset)::before {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  pointer-events: none;
}
/* Boutons texte (voir le calendrier, Exporter…) : même hauteur que les champs, poussés à droite */
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session > .uk-button {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin: 0 0 0 auto;
  padding: 0 14px;
}
/* Menu « Filtrer les sessions » : liste déroulante positionnée sous son bouton */
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session .multiselect {
  position: relative;
  float: none;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session .multiselect select {
  height: 34px;
  margin: 0;
  cursor: pointer;
}
body.aeyo .uk-container #tm-main #tm-content .page-session > #filtre-session .multiselect #checkboxes {
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
}

/* Barre de filtres stagiaire « Vos formations » (#frm_vosformations) : collée au tableau qui suit. */
body.aeyo .uk-container #tm-main #frm_vosformations {
  margin-bottom: 20px;
  border-radius: var(--gs-radius-md, .75rem);
}

/* -------------------------------------------------------------- Détail de session stagiaire, mobile
   Auto-évaluation des compétences : sur téléphone, le tableau à 3 colonnes (texte + 2 curseurs jRange de 210px)
   débordait de l'écran. Une carte par compétence : le texte, puis chaque curseur sous le libellé de sa colonne
   (data-label = en-tête traduit, cf. default_evaluation_competences.php). */
@media (max-width: 767px) {
  body.aeyo #tm-content table.table_eval_comp,
  body.aeyo #tm-content table.table_eval_comp tbody,
  body.aeyo #tm-content table.table_eval_comp tr,
  body.aeyo #tm-content table.table_eval_comp td {
    display: block;
    width: auto !important;
  }
  body.aeyo #tm-content table.table_eval_comp thead {
    display: none;
  }
  body.aeyo #tm-content table.table_eval_comp tr {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: var(--gs-radius-md, .75rem);
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / .08);
  }
  body.aeyo #tm-content table.table_eval_comp td {
    padding: 4px 0 !important;
    border: 0;
    background: transparent !important;
  }
  body.aeyo #tm-content table.table_eval_comp td:first-child {
    font-weight: 600;
  }
  body.aeyo #tm-content table.table_eval_comp td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin: 10px 0 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gs-text-muted, #636463);
  }
  /* Boutons de longs libellés (évaluation à chaud / à froid, valider votre présence) : retour à la ligne permis */
  body.aeyo #tm-content :is(.sw-button-detail, .uk-grid .uk-button[href*="LearnEval"], .uk-grid a.uk-button) {
    white-space: normal;
    height: auto;
    line-height: 1.3;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
/* Bouton « Évaluation à chaud » : collé à droite (vers « à froid ») seulement quand les deux sont côte à côte */
@media (max-width: 767px) {
  body.aeyo #tm-content .uk-grid > .uk-width-medium-1-2 > .uk-button.uk-float-right {
    float: none !important;
  }
}

/* -------------------------------------------------------------- Contenus éditoriaux (éditeur de texte)
   Tableaux/images saisis avec une largeur fixe en style inline (ex. message d'accueil consultant : table de 936px
   avec l'image Pearltrees) : plafonnés à la largeur de l'écran au lieu de faire défiler toute la page. */
body.aeyo #tm-content table[style*="width"] {
  max-width: 100%;
}
body.aeyo #tm-content img[style*="width"],
body.aeyo #tm-content img[width] {
  height: auto !important;
}
@media (max-width: 959px) {
  body.aeyo #tm-content table[style*="width"] {
    width: 100% !important;
    height: auto !important;
  }
  body.aeyo #tm-content table[style*="width"] td {
    padding: 8px !important;
  }
}

/* Tableaux des modules (ex. « Vos contacts » de l'accueil consultant) : en mobile les cellules sont empilées mais
   gardaient white-space: nowrap -> un long libellé (nom + service, e-mail) élargissait la carte au-delà de l'écran. */
@media (max-width: 767px) {
  body.aeyo .af-module table {
    max-width: 100%;
  }
  body.aeyo .af-module table td {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* -------------------------------------------------------------- Calendrier des sessions (consultant), mobile
   Flottants de l'ancien thème + barre d'outils FullCalendar : bouton « Vue en liste » au texte rogné, contrôles
   éparpillés, bouton « Exporter » débordant du cadre. Mise en page en lignes flex, pleine largeur. */
@media (max-width: 767px) {
  body.aeyo #tm-content .page-session.calendar > .uk-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  body.aeyo #tm-content .page-session.calendar > .uk-panel > * {
    flex: 0 0 100%;
    min-width: 0;
  }
  body.aeyo .uk-container #tm-main #tm-content .page-session.calendar .uk-panel #filtre-session {
    float: none;
    flex: 0 1 auto;
    width: auto;
    padding: 0;
    border: 0;
    height: 38px;
    margin: 0;
    display: flex;
    align-items: center;
  }
  body.aeyo #tm-content .page-session.calendar > .uk-panel > div:has(> a > .uk-button) {
    flex: 0 0 auto;
    margin-left: auto;
  }
  body.aeyo .uk-container #tm-main #tm-content .page-session.calendar > .uk-panel > div > a > .uk-button {
    width: auto;
    max-width: none; /* ancien thème : max-width 37% */
    float: none;
    height: 38px;
    margin: 0;
    padding: 0 12px;
    white-space: nowrap;
  }
  /* Filtre : libellé centré dans sa pastille (marges de l'ancien thème neutralisées) */
  body.aeyo .uk-container #tm-main #tm-content .page-session.calendar #filtre-session :is(.multiselect, .selectBox) {
    height: 38px;
  }
  body.aeyo .uk-container #tm-main #tm-content .page-session.calendar #filtre-session .selectBox label {
    display: flex;
    align-items: center;
    height: 38px;
    margin: 0;
    padding: 0 12px;
  }
  body.aeyo .uk-container #tm-main #tm-content .page-session.calendar #filtre-session select {
    height: auto;
    margin: 0;
  }
  body.aeyo .uk-container #tm-main #tm-content .page-session.calendar #filtre-session #checkboxes {
    top: calc(100% + 4px);
    left: 0;
    margin-left: 0;
    width: max-content;
    max-width: calc(100vw - 32px);
  }
  body.aeyo .uk-container #tm-main #tm-content .page-session.calendar .fc-toolbar {
    margin-top: 4px;
  }
  body.aeyo #tm-content .page-session.calendar .fc-toolbar .fc-left {
    margin-top: 0;
  }
  /* Barre FullCalendar : « Aujourd'hui ‹ › » sur une ligne, « Jour / Semaine / Mois » sur la suivante, puis le titre */
  body.aeyo #tm-content .page-session.calendar .fc-toolbar > :is(.fc-left, .fc-right) {
    float: none;
    display: flex;
    width: 100%;
    margin: 0 0 8px;
  }
  body.aeyo #tm-content .page-session.calendar .fc-toolbar :is(.fc-button-group, .fc-today-button) {
    float: none;
    display: flex;
    flex: 1 1 0;
    margin: 0;
  }
  body.aeyo #tm-content .page-session.calendar .fc-toolbar .fc-left { gap: 8px; }
  body.aeyo #tm-content .page-session.calendar .fc-toolbar .fc-button-group > .fc-button {
    flex: 1 1 0;
  }
  body.aeyo #tm-content .page-session.calendar .fc-toolbar .fc-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
  }
  body.aeyo #tm-content .page-session.calendar .fc-toolbar .fc-center {
    display: block;
    width: 100%;
    margin-top: 4px;
  }
  /* Bouton « Exporter le calendrier » contenu dans le cadre */
  body.aeyo #tm-content .page-session.calendar .uk-text-center > .uk-button {
    box-sizing: border-box;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    white-space: normal;
  }
}

/* Espace AVANT un bandeau de titre qui suit un autre élément (ex. « Mon CV et mes compétences » collé au bouton
   « Enregistrer les modifications »). Marges verticales fusionnées : max(marge existante, 1.5rem). */
body.aeyo .uk-container #tm-main * + :is(h2, h3):is(.uk-panel-title, .titre-head-second),
body.aeyo .uk-container #tm-main #tm-content * + :is(h2, h3):is(.uk-panel-title, .titre-head-second),
/* formulaire « Mes coordonnées » : l ancien thème impose margin: 0 avec 3 identifiants */
body.aeyo .uk-container #tm-main #tm-content .tm-article-container #frm_monprofil * + :is(h2, h3):is(.uk-panel-title, .titre-head-second) {
  margin-top: 1.5rem;
}

/* Champs date « libellé + saisie » sur une ligne insécable (uk-text-nowrap, ex. « Date de délivrance du document »
   des documents obligatoires consultant) : en mobile, le champ passe sous le libellé au lieu de déborder. */
@media (max-width: 767px) {
  body.aeyo #tm-content .uk-text-nowrap:has(> label.date) {
    white-space: normal;
    float: none;
  }
  body.aeyo #tm-content label.date:has(> input[type="date"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    white-space: normal;
  }
  body.aeyo #tm-content label.date > input[type="date"] {
    width: 100% !important;
    max-width: 240px;
    height: 36px !important;
    border: 1px solid #B9BDC6 !important;
    border-radius: 6px;
    padding: 0 8px;
  }
}

/* Tableaux simples de liens (ex. « Les outils du consultant », documents utiles) : un nom de fichier sans espace
   (02_Bibliothèque_Pictos_…) imposait 660px de large en mobile. Coupure autorisée dans les liens ; les listes
   DataTables (sessions…) gardent leur défilement horizontal. */
@media (max-width: 767px) {
  body.aeyo #tm-content .uk-overflow-container > table.uk-table:not(.dataTable) a {
    overflow-wrap: anywhere;
  }
}

/* -------------------------------------------------------------- Mobile : rangées « texte + bouton » et boutons
   (détail de session consultant : « Gérer vos documents », note d'évaluation, « Commencer l'évaluation »…) */
@media (max-width: 767px) {
  /* Boutons dont le libellé passe sur plusieurs lignes : interligne normal (et non la hauteur d'une ligne de bouton) */
  body.aeyo #tm-content .uk-button {
    height: auto;
    min-height: 38px;
    line-height: 1.3;
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: normal;
  }
  /* Rangées texte + bouton côte à côte : empilées, bouton pleine largeur */
  body.aeyo #tm-content .page-session .uk-flex.uk-flex-space-between,
  body.aeyo #tm-content .page-session .vr_inter > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  body.aeyo #tm-content .page-session .uk-flex.uk-flex-space-between > .uk-button,
  body.aeyo #tm-content .page-session .vr_inter > div[style*="display: flex"] .uk-button {
    margin-left: 0 !important;
    white-space: normal !important;
    width: 100% !important;
  }
}