/********************************************************\
 *
 * Extension Html pour le framework AKTONE
 *
 * Gestion des entités Html
 * et composants principaux pour la mise en page
 *
 * © april 2011 - 2024	/ All rights reserved
 * NETLAB && Samuel Tronçon
 *
\********************************************************/
/* Par défaut : aktone-bloc-corps est en row (existant) */

/* Empile en dessous de sm (576px) */
@media (max-width: 575.98px) {
  .aktone-bloc-corps.aktone-pile-sm > * { flex: 0 0 100%; }
}
/* Empile en dessous de md (768px) — le plus courant */
@media (max-width: 767.98px) {
  .aktone-bloc-corps.aktone-pile-md > * { flex: 0 0 100%; }
}
/* Empile en dessous de lg (992px) */
@media (max-width: 991.98px) {
  .aktone-bloc-corps.aktone-pile-lg > * { flex: 0 0 100%; }
}
/******************************************************************************/
/* TYPOGRAPHIE
/******************************************************************************/
body {
  font-family: "ak-screen-texte", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--ak-font-base);
  font-weight: var(--ak-font-weight);
  line-height: var(--ak-line-height);
  color: var(--ak-body-color);
  background-color: var(--ak-body-bg);

  /* Bootstrap 5 — composants calés sur le font-size de body
     1em = relatif à body → ils scalent quand aktone-font-base change
     Surchargé par autopublic.css pour les pages publiques */
  --bs-body-font-size:           var(--ak-font-base);
  --bs-btn-font-size:            1em;
  --bs-btn-font-size-sm:         0.875em;
  --bs-btn-font-size-lg:         1.125em;
  --bs-form-control-font-size:   1em;
  --bs-nav-link-font-size:       1em;
  --bs-navbar-brand-font-size:   1.125em;
  --bs-dropdown-font-size:       1em;

  /* Gouttière Bootstrap disponible globalement — colonnes fonctionnent
     avec ou sans .row parent (notamment dans aktone-bloc-corps) */
  --bs-gutter-x:                 var(--ak-ecart-unite);
  --bs-gutter-y:                 0;
}
h1, .h1       { font-size: var(--ak-h1); }
h2, .h2       { font-size: var(--ak-h2); }
h3, .h3       { font-size: var(--ak-h3); }
h4, .h4       { font-size: var(--ak-h4); }
h5, .h5       { font-size: var(--ak-h5); }
h6, .h6       { font-size: var(--ak-h6); }

.display-1    { font-size: var(--ak-display-1); }
.display-2    { font-size: var(--ak-display-2); }
.display-3    { font-size: var(--ak-display-3); }
.display-4    { font-size: var(--ak-display-4); }
.display-5    { font-size: var(--ak-display-5); }
.display-6    { font-size: var(--ak-display-6); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "ak-screen-titraille", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.btn         { font-family: "ak-screen-actions", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--ak-font-base); }
.nav         { font-family: "ak-screen-actions", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.navbar      { font-family: "ak-screen-actions", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.panel-title { font-family: "ak-screen-actions", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; }

/******************************************************************************/
/* COULEURS BOOTSTRAP 5 — mappées depuis cssvars.php
/*
/* Niveau body : variables sémantiques BS5 (utilities bg-*, text-*, border-*)
/* Niveau composant : boutons, alertes, badges, nav-pills
/* default → secondary BS5 + classe .btn-default custom
/******************************************************************************/

/* --- Variables sémantiques BS5 sur body --- */
body {
  /* PRIMARY */
  --bs-primary:                    var(--primary-base);
  --bs-primary-rgb:                var(--primary-base-rgb);
  --bs-primary-bg-subtle:          var(--primary-subtle);
  --bs-primary-border-subtle:      var(--primary-hover);
  --bs-primary-text-emphasis:      var(--primary-hover);
  /* WARNING */
  --bs-warning:                    var(--warning-base);
  --bs-warning-rgb:                var(--warning-base-rgb);
  --bs-warning-bg-subtle:          var(--warning-subtle);
  --bs-warning-border-subtle:      var(--warning-hover);
  --bs-warning-text-emphasis:      var(--warning-hover);
  /* DANGER */
  --bs-danger:                     var(--danger-base);
  --bs-danger-rgb:                 var(--danger-base-rgb);
  --bs-danger-bg-subtle:           var(--danger-subtle);
  --bs-danger-border-subtle:       var(--danger-hover);
  --bs-danger-text-emphasis:       var(--danger-hover);
  /* SUCCESS */
  --bs-success:                    var(--success-base);
  --bs-success-rgb:                var(--success-base-rgb);
  --bs-success-bg-subtle:          var(--success-subtle);
  --bs-success-border-subtle:      var(--success-hover);
  --bs-success-text-emphasis:      var(--success-hover);
  /* INFO */
  --bs-info:                       var(--info-base);
  --bs-info-rgb:                   var(--info-base-rgb);
  --bs-info-bg-subtle:             var(--info-subtle);
  --bs-info-border-subtle:         var(--info-hover);
  --bs-info-text-emphasis:         var(--info-hover);
  /* SECONDARY (= default aktone) */
  --bs-secondary:                  var(--default-base);
  --bs-secondary-rgb:              var(--default-base-rgb);
  --bs-secondary-bg-subtle:        var(--default-subtle);
  --bs-secondary-border-subtle:    var(--default-hover);
  --bs-secondary-text-emphasis:    var(--default-texte);
  /* LINK */
  --bs-link-color:                 var(--primary-base);
  --bs-link-hover-color:           var(--primary-hover);
  
  /* BODY */
  --bs-body-color:                 var(--ak-body-color);
  --bs-body-bg:                    var(--ak-body-bg);

}

/* --- BOUTONS PLEINS --- */
.btn-primary {
  --bs-btn-color:              var(--primary-texte);
  --bs-btn-bg:                 var(--primary-base);
  --bs-btn-border-color:       var(--primary-base);
  --bs-btn-hover-color:        var(--primary-texte);
  --bs-btn-hover-bg:           var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-focus-shadow-rgb:   var(--primary-base-rgb);
  --bs-btn-active-color:       var(--primary-texte);
  --bs-btn-active-bg:          var(--primary-hover);
  --bs-btn-active-border-color:var(--primary-hover);
  --bs-btn-disabled-bg:        var(--primary-base);
  --bs-btn-disabled-border-color:var(--primary-base);
}
.btn-warning {
  --bs-btn-color:              var(--warning-texte);
  --bs-btn-bg:                 var(--warning-base);
  --bs-btn-border-color:       var(--warning-base);
  --bs-btn-hover-color:        var(--warning-texte);
  --bs-btn-hover-bg:           var(--warning-hover);
  --bs-btn-hover-border-color: var(--warning-hover);
  --bs-btn-focus-shadow-rgb:   var(--warning-base-rgb);
  --bs-btn-active-color:       var(--warning-texte);
  --bs-btn-active-bg:          var(--warning-hover);
  --bs-btn-active-border-color:var(--warning-hover);
}
.btn-danger {
  --bs-btn-color:              var(--danger-texte);
  --bs-btn-bg:                 var(--danger-base);
  --bs-btn-border-color:       var(--danger-base);
  --bs-btn-hover-color:        var(--danger-texte);
  --bs-btn-hover-bg:           var(--danger-hover);
  --bs-btn-hover-border-color: var(--danger-hover);
  --bs-btn-focus-shadow-rgb:   var(--danger-base-rgb);
  --bs-btn-active-color:       var(--danger-texte);
  --bs-btn-active-bg:          var(--danger-hover);
  --bs-btn-active-border-color:var(--danger-hover);
}
.btn-success {
  --bs-btn-color:              var(--success-texte);
  --bs-btn-bg:                 var(--success-base);
  --bs-btn-border-color:       var(--success-base);
  --bs-btn-hover-color:        var(--success-texte);
  --bs-btn-hover-bg:           var(--success-hover);
  --bs-btn-hover-border-color: var(--success-hover);
  --bs-btn-focus-shadow-rgb:   var(--success-base-rgb);
  --bs-btn-active-color:       var(--success-texte);
  --bs-btn-active-bg:          var(--success-hover);
  --bs-btn-active-border-color:var(--success-hover);
}
.btn-info {
  --bs-btn-color:              var(--info-texte);
  --bs-btn-bg:                 var(--info-base);
  --bs-btn-border-color:       var(--info-base);
  --bs-btn-hover-color:        var(--info-texte);
  --bs-btn-hover-bg:           var(--info-hover);
  --bs-btn-hover-border-color: var(--info-hover);
  --bs-btn-focus-shadow-rgb:   var(--info-base-rgb);
  --bs-btn-active-color:       var(--info-texte);
  --bs-btn-active-bg:          var(--info-hover);
  --bs-btn-active-border-color:var(--info-hover);
}
.btn-secondary {
  --bs-btn-color:              var(--default-texte);
  --bs-btn-bg:                 var(--default-base);
  --bs-btn-border-color:       var(--default-hover);
  --bs-btn-hover-color:        var(--default-texte);
  --bs-btn-hover-bg:           var(--default-hover);
  --bs-btn-hover-border-color: var(--default-hover);
  --bs-btn-focus-shadow-rgb:   var(--default-base-rgb);
  --bs-btn-active-color:       var(--default-texte);
  --bs-btn-active-bg:          var(--default-hover);
  --bs-btn-active-border-color:var(--default-hover);
}
/* Classe historique BS3 — alias de secondary */
.btn-default {
  --bs-btn-color:              var(--default-texte);
  --bs-btn-bg:                 var(--default-base);
  --bs-btn-border-color:       var(--default-hover);
  --bs-btn-hover-color:        var(--default-texte);
  --bs-btn-hover-bg:           var(--default-hover);
  --bs-btn-hover-border-color: var(--default-hover);
  --bs-btn-active-color:       var(--default-texte);
  --bs-btn-active-bg:          var(--default-hover);
  --bs-btn-active-border-color:var(--default-hover);
}
/* --- BOUTONS OUTLINE --- */
.btn-outline-primary {
  --bs-btn-color:              var(--primary-base);
  --bs-btn-border-color:       var(--primary-base);
  --bs-btn-hover-color:        var(--primary-texte);
  --bs-btn-hover-bg:           var(--primary-base);
  --bs-btn-hover-border-color: var(--primary-base);
  --bs-btn-active-color:       var(--primary-texte);
  --bs-btn-active-bg:          var(--primary-base);
  --bs-btn-active-border-color:var(--primary-base);
}
.btn-outline-warning {
  --bs-btn-color:              var(--warning-base);
  --bs-btn-border-color:       var(--warning-base);
  --bs-btn-hover-color:        var(--warning-texte);
  --bs-btn-hover-bg:           var(--warning-base);
  --bs-btn-hover-border-color: var(--warning-base);
  --bs-btn-active-color:       var(--warning-texte);
  --bs-btn-active-bg:          var(--warning-base);
  --bs-btn-active-border-color:var(--warning-base);
}
.btn-outline-danger {
  --bs-btn-color:              var(--danger-base);
  --bs-btn-border-color:       var(--danger-base);
  --bs-btn-hover-color:        var(--danger-texte);
  --bs-btn-hover-bg:           var(--danger-base);
  --bs-btn-hover-border-color: var(--danger-base);
  --bs-btn-active-color:       var(--danger-texte);
  --bs-btn-active-bg:          var(--danger-base);
  --bs-btn-active-border-color:var(--danger-base);
}
.btn-outline-success {
  --bs-btn-color:              var(--success-base);
  --bs-btn-border-color:       var(--success-base);
  --bs-btn-hover-color:        var(--success-texte);
  --bs-btn-hover-bg:           var(--success-base);
  --bs-btn-hover-border-color: var(--success-base);
  --bs-btn-active-color:       var(--success-texte);
  --bs-btn-active-bg:          var(--success-base);
  --bs-btn-active-border-color:var(--success-base);
}
.btn-outline-info {
  --bs-btn-color:              var(--info-base);
  --bs-btn-border-color:       var(--info-base);
  --bs-btn-hover-color:        var(--info-texte);
  --bs-btn-hover-bg:           var(--info-base);
  --bs-btn-hover-border-color: var(--info-base);
  --bs-btn-active-color:       var(--info-texte);
  --bs-btn-active-bg:          var(--info-base);
  --bs-btn-active-border-color:var(--info-base);
}

/* --- ALERTES --- */
.alert-primary  { --bs-alert-color: var(--primary-hover);      --bs-alert-bg: var(--primary-subtle);   --bs-alert-border-color: var(--primary-hover); }
.alert-warning  { --bs-alert-color: var(--warning-hover);   --bs-alert-bg: var(--warning-subtle);   --bs-alert-border-color: var(--warning-hover); }
.alert-danger   { --bs-alert-color: var(--danger-hover);    --bs-alert-bg: var(--danger-subtle);    --bs-alert-border-color: var(--danger-hover); }
.alert-success  { --bs-alert-color: var(--success-hover);   --bs-alert-bg: var(--success-subtle);   --bs-alert-border-color: var(--success-hover); }
.alert-info     { --bs-alert-color: var(--info-hover);      --bs-alert-bg: var(--info-subtle);      --bs-alert-border-color: var(--info-hover); }
.alert-secondary{ --bs-alert-color: var(--default-texte); --bs-alert-bg: var(--default-subtle);   --bs-alert-border-color: var(--default-hover); }

/* --- BADGES --- */
.text-bg-primary  { background-color: var(--primary-base)   !important; color: var(--primary-texte)        !important; }
.text-bg-warning  { background-color: var(--warning-base)   !important; color: var(--warning-texte)        !important; }
.text-bg-danger   { background-color: var(--danger-base)    !important; color: var(--danger-texte)         !important; }
.text-bg-success  { background-color: var(--success-base)   !important; color: var(--success-texte)        !important; }
.text-bg-info     { background-color: var(--info-base)      !important; color: var(--info-texte)           !important; }
.text-bg-secondary{ background-color: var(--default-base)   !important; color: var(--default-texte)   !important; }

/* --- NAV PILLS --- */
.nav-pills {
  --bs-nav-pills-link-active-color: var(--primary-texte);
  --bs-nav-pills-link-active-bg:    var(--primary-base);
}

/* --- NAVBAR --- */
.navbar.bg-primary {
  background-color: var(--nav-base) !important;
  --bs-navbar-color:        var(--nav-texte);
  --bs-navbar-hover-color:  var(--nav-texte);
  --bs-navbar-active-color: var(--nav-texte);
  --bs-navbar-brand-color:  var(--nav-texte);
}
.navbar.bg-dark {
  background-color: var(--nav-base-defaut) !important;
  --bs-navbar-color:        var(--nav-texte);
  --bs-navbar-hover-color:  var(--nav-texte);
  --bs-navbar-active-color: var(--nav-texte);
  --bs-navbar-brand-color:  var(--nav-texte);
}

/******************************************************************************/
/* COMPOSANT MATRIX (html-intra)
/* Grille interne flexible pour formulaires et tableaux imbriqués
/******************************************************************************/
.html-intra {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
}
.html-intra-t {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
}
.html-intra-l {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
}
.html-intra-c,
.html-intra-h {
  max-width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
  padding-right: 5px;
}
.html-intra-c:last-child,
.html-intra-h:last-child { padding-right: 0; }
.html-intra-c .bs_form_groupe { width: 100%; }
.html-intra-txt { flex-direction: column; }
.html-intra-noflex { display: block; }

/* Réserver en permanence l'espace de l'icône de validation Bootstrap :
   .is-valid/.is-invalid ajoutent un padding-right pour l'icône, ce qui
   décale la mise en page flex (pas de largeur fixe ici) entre une ligne
   tout juste validée et ses voisines. On fige ce padding pour que rien
   ne bouge quand la classe apparaît/disparaît. */
.html-intra-c .form-control,
.html-intra-h .form-control { padding-right: calc(1.5em + 0.75rem); }
.html-intra-c .form-select,
.html-intra-h .form-select  { padding-right: 4.125rem; }

/* Actions alignées à droite dans la matrice */
.html-intra-x { flex: 1 1 auto; }
.html-intra-x.html-intra-xd {
  display: flex;
  justify-content: flex-end;
}
.html-intra-x.html-intra-xd .btn,
.html-intra-x.html-intra-xd .bs_btngrp { flex-shrink: 0; }

/* Espacement identique table/matrice */
.html-intra-form .html-intra-c,
.html-intra-form .html-intra-h,
.html-intra-form .html-intra-x        { padding: calc(var(--ak-ecart-unite) / 2); }
.html-intra-form .html-intra-c:first-child,
.html-intra-form .html-intra-h:first-child { padding-left: 0; }
.html-intra-form .html-intra-c:last-child,
.html-intra-form .html-intra-h:last-child  { padding-right: 0; }

/* HAUTEUR DE CONTRÔLE DANS LA MATRICE                            (H10)
 *
 * La matrice est une grille flex, pas une table : ses lignes n'ont pas de
 * hauteur propre et `align-items: stretch` ÉTIRE ce qu'elles contiennent — un
 * bouton y prend donc la hauteur de la cellule la plus haute.
 *
 * On lui applique la même hauteur de contrôle qu'aux tables. Aucune classe
 * n'est nécessaire : `tr`/`td`/`th` n'ont pas de mapping `taille` dans
 * config/styles.php, et `--ak-ctrl-h` arrive par héritage — de la densité du
 * bloc, ou de `:root` qui vaut `md`. */
.html-intra-l {
  min-height: calc(var(--ak-ctrl-h) + var(--ak-ecart-unite));
}

/* Le bouton garde sa hauteur propre au lieu de s'étirer sur la ligne. */
.html-intra-c > .btn,
.html-intra-h > .btn,
.html-intra-x .btn { align-self: center; }

/* Le champ prend la hauteur de contrôle — sauf le textarea, dont la hauteur
   est le nombre de lignes qu'on veut voir. */
.html-intra-c .form-control:not(textarea),
.html-intra-h .form-control:not(textarea),
.html-intra-c .form-select,
.html-intra-h .form-select { height: var(--ak-ctrl-h); }

/* Pas de bordure dans les cellules table */
td.html-intra-mono {
  border-width: 0 !important;
  padding: var(--ak-ecart-unite) 0 !important;
}

/* Version compacte */
.aktone-compact .html-intra-form .html-intra-c,
.aktone-compact .html-intra-form .html-intra-h,
.aktone-compact .html-intra-form .html-intra-x { padding: 0; }

/******************************************************************************/
/* COMPOSANTS AKTONE
/******************************************************************************/
.aktone-link { cursor: pointer; }

/* Champ fichier */
.file_input                         { position: relative; display: flex; align-items: flex-start; width: 100%; gap: 8px; }
.file_input input                   { visibility: hidden; display: none; }
.file_input-actions                 { display: flex; flex-direction: column; flex-shrink: 0; gap: 2px; }

/* Illustration (img) — aperçu à gauche, boutons à droite */
.file_input--img .thumbnail         { flex: 1 1 auto; min-width: 0; }
.file_input--img .thumbnail img     { max-height: 160px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* Glisser-déposer un fichier sur l'aperçu */
.file_input--dragover .thumbnail    { outline: 2px dashed #008cba; outline-offset: 4px; border-radius: 4px; }

/* Document joint (file) — ligne compacte sans aperçu */
.file_input--doc                    { align-items: center; }
.file_input--doc .thumbnail         { flex: 1 1 auto; min-width: 0; }
.file_input--doc .file_input-actions { flex-direction: row; }
.file_input-placeholder             { font-size: .8em; font-style: italic; color: #999; }

/* Zone de contrôle */
.akControle .bs_drop_toggle_btn,
.akControle .bs_bouton,
.akControle .bs_form_groupe    { margin-bottom: 5px !important; }

/* Spinner sur input */
.inputspin { position: relative; }
.inputspin::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f110";
  color: lightgrey;
  position: absolute;
  left: 8px;
  top: 4px;
  animation: spin 2000ms linear infinite;
}
.inputspin input[type="text"] { padding-left: 28px; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/******************************************************************************/
/* NAVBAR — ADAPTATIONS BOOTSTRAP
/******************************************************************************/
/* Nav verticale — nouvelle structure */
body.ak-nav-verticale #aktone-page-nav .navbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}
body.ak-nav-verticale #aktone-page-nav .navbar-nav {
  flex-direction: column;
  width: 100%;
}
body.ak-nav-verticale #aktone-page-nav a.navbar-brand {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
body.ak-nav-verticale #aktone-page-nav .bs_navbaritem,
body.ak-nav-verticale #aktone-page-nav .bs_navbaritem_drop { width: 100%; }

/* Nav verticale — ancienne structure (rétrocompat) */
#aktone-page-conteneur-nav .navbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
#aktone-page-conteneur-nav .navbar-nav   { flex-direction: column; width: 100%; }
#aktone-page-conteneur-nav nav           { height: 100%; }
#aktone-page-conteneur-nav a.navbar-brand {
  margin-left: 0; margin-right: 0;
  width: 100%;
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
#aktone-page-conteneur-nav .bs_navbaritem,
#aktone-page-conteneur-nav .bs_navbaritem_drop { width: 100%; }

/* Alignement à gauche dans la nav verticale */
#aktone-page-conteneur-nav .float-end,
body.ak-nav-verticale #aktone-page-nav .float-end { float: none; margin-left: 0; }

/* Barre horizontale */
#aktone-page-conteneur .navbar-expand-md .navbar-nav.float-start .nav-link { padding-left: 0; }
#aktone-page-conteneur .navbar-expand-md .navbar-nav.float-end  .nav-link  { padding-right: 0; }
#aktone-page-navbar.bs_navbar,
#aktone-page-menu.bs_navbar {
  font-size: 0.8em;
  padding: 0 var(--ak-ecart-unite);
  min-height: var(--ak-navbar-height);
}
#aktone-page-conteneur a.navbar-brand {
  margin-left: var(--ak-ecart-unite);
  margin-right: var(--ak-ecart-unite);
}
a.navbar-brand {
  font-weight: bold;
  padding-top: 7px;
  padding-bottom: 7px;
}
a.navbar-brand img {
  height: var(--ak-navbrand-height);
  width: auto;
}
#aktone-page-navbar { flex-shrink: 0; }
#aktone-page-menu   { flex-shrink: 3; }

/* Icônes dans la navbar */
#aktone-page-tete .navbar {
  z-index: var(--zindex-nav);
  min-height: auto;
  width: 100%;
}
#aktone-page-tete nav {
  position: relative;
  z-index: var(--zindex-nav);
  width: 100%;
}
#aktone-page-tete nav.navbar-app      { z-index: var(--ak-zindex-nav-sub); }
#aktone-page-tete nav i.fas::after    { content: '\00a0 '; }
#aktone-page-tete .navbar i.fas       { padding-right: 0.3em; width: 22px; text-align: center; }
#aktone-page-tete .navbar i.fas.float-end { padding-right: 0; padding-left: 0.3em; }
#aktone-page-tete .navbar a,
.navbar li                            { text-align: left; }
#aktone-page-tete nav li a            { padding-top: 7px; padding-bottom: 7px; }

/******************************************************************************/
/* EXTENSIONS BOOTSTRAP — COMPOSANTS
/******************************************************************************/
/* Labels/badges custom Aktone
   .label-* : nommage historique conservé (utilisé dans le PHP)
   .badge-* : aliases BS5 — même rendu, nouveaux noms */
.label,
.badge {
  display: inline-block;
  padding: .25em .6em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .35em;
}
.label:empty, .badge:empty          { display: none; }
.btn .label, .btn .badge            { position: relative; top: -1px; }

.label-default,  .badge-default     { background-color: var(--default-base); }
.label-primary,  .badge-primary     { background-color: var(--primary-base); }
.label-success,  .badge-success     { background-color: var(--success-base); }
.label-info,     .badge-info        { background-color: var(--info-base); }
.label-warning,  .badge-warning     { background-color: var(--warning-base); }
.label-danger,   .badge-danger      { background-color: var(--danger-base); }

.label-default[href]:hover,  .badge-default[href]:hover  { background-color: var(--default-hover); }
.label-primary[href]:hover,  .badge-primary[href]:hover  { background-color: var(--primary-hover); }
.label-success[href]:hover,  .badge-success[href]:hover  { background-color: var(--success-hover); }
.label-info[href]:hover,     .badge-info[href]:hover     { background-color: var(--info-hover); }
.label-warning[href]:hover,  .badge-warning[href]:hover  { background-color: var(--warning-hover); }
.label-danger[href]:hover,   .badge-danger[href]:hover   { background-color: var(--danger-hover); }

/* Card */
.card-title { padding: var(--ak-ecart-unite); }

/* Tabs */
.tab-pane { display: block; width: 100%; background: var(--ak-div-bg); }

/* Gouttière Bootstrap alignée sur l'unité d'espacement Aktone */
.row { --bs-gutter-x: var(--ak-ecart-unite); }

/* Tables */
.table td                            { vertical-align: middle; }
.table, .table-responsive,
.list-group, .bs_form_label,
.bs_panneau                          { width: 100%; }

/* Tables dans un contexte flex — ne pas s'étirer en hauteur */
.aktone-bloc-corps > .table,
.aktone-bloc-corps > .table-responsive { align-self: flex-start; width: 100%; }

/* Colonnes 1/5 dans une .row Bootstrap */
.col-20, .col-sm-20, .col-md-20,
.col-lg-20, .col-xl-20, .col-xxl-20 { flex: 0 0 20%; max-width: 20%; min-height: 1px; }

/* Pagination */
.page-link                           { color: #000 !important; }
.active > .page-link                 { background-color: #000 !important; border-color: #000 !important; color: #FFF !important; }

/******************************************************************************/
/* EXTENSIONS BOOTSTRAP — FORMULAIRES
/******************************************************************************/
/* Boutons radio et checkbox */
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline  { margin-top: 0; margin-left: 0; }
label.radio-inline                   { margin-right: 10px; }
label.checkbox-inline                { margin-left: 0; margin-right: 10px; }
.radio-inline                        { margin-right: 10px; }
.checkbox-inline                     { margin-left: 0; margin-right: 10px; }
.checkbox-title                      { display: block; color: #CCC; }
label.checkbox:first-child           { margin-top: 0; }
.html-coche-sub                      { padding-left: 45px; }

/* Mises en page de formulaire */
form.form-inline                     { margin-bottom: 0; }
form.form-inline > .form-group       { width: auto; margin-bottom: 0; }
form.form-vertical > .btn-group      { padding-top: var(--ak-ecart-unite); }
form.form-vertical > .form-group:first-child { padding-top: 0; }
.list-group-media                    { padding-top: var(--ak-ecart-unite); }
.dropdown-menu-right                 { right: 0; left: auto; }

/******************************************************************************/
/* EXTENSIONS BOOTSTRAP — TAILLES DE BOUTONS ET INPUTS
/******************************************************************************/
/* @warn UNE HAUTEUR EN DUR EXIGE UN CENTRAGE EXPLICITE.
   `height` fige la boîte, mais un bouton reste `inline-block` : son contenu se
   cale en haut et le padding vertical ne le redescend qu'à moitié. Le texte
   paraissait donc décalé (constaté le 2026-08-19 sur les `.btn-sm` en cellule).
   `inline-flex` + `align-items:center` centrent quelle que soit la hauteur.
   Le `gap` rétablit l'espace glyphe/texte, que le passage en flex supprime —
   en inline-block c'était l'espace blanc du HTML qui le fournissait. */
.btn-sm,
.btn-group-sm > .btn {
  height: 30px;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}
.btn-xs,
.btn-group-xs > .btn {
  height: 22px;
  padding: 1px 5px;
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}
.btn-xs .badge                       { font-size: 0.75rem; padding: 2px 5px; }
.input-xs {
  height: 22px;
  padding: 1px 5px;
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0 0 1px;
}
select.input-xs                      { height: 22px; line-height: 22px; }
textarea.input-xs                    { height: auto; }
.btn-group-sm i.fas                  { height: 17px; line-height: 17px; }
.btn-group-xs i.fas                  { height: 22px; line-height: 22px; }

/******************************************************************************/
/* VARIANTES DE DENSITÉ
/* .aktone-moyen = Bootstrap normal (aucune règle nécessaire)
/* Les autres redéfinissent --ak-ecart-unite et font-size en cascade.
/******************************************************************************/
.aktone-mini {
  --ak-ecart-unite: 6px;
  font-size: 0.78rem;
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.35rem;
  --bs-btn-font-size: 0.75rem;
}
.aktone-mini .btn                    { padding: 0.1rem 0.35rem;  font-size: 0.75rem; }
.aktone-mini .form-control,
.aktone-mini .form-select            { padding: 0.1rem 0.35rem;  font-size: 0.75rem; }
.aktone-mini .form-label             { font-size: 0.75rem; margin-bottom: 0.1rem; }
.aktone-mini .table td,
.aktone-mini .table th               { padding: 0.15rem 0.35rem; font-size: 0.78rem; }
.aktone-mini .nav-link               { padding: 0.2rem 0.4rem;   font-size: 0.78rem; }
.aktone-mini .card-body              { padding: var(--ak-ecart-unite); }

.aktone-petit {
  --ak-ecart-unite: 10px;
  font-size: 0.875rem;
  --bs-btn-padding-y: 0.22rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.825rem;
}
.aktone-petit .btn                   { padding: 0.22rem 0.5rem;  font-size: 0.825rem; }
.aktone-petit .form-control,
.aktone-petit .form-select           { padding: 0.22rem 0.5rem;  font-size: 0.85rem; }
.aktone-petit .form-label            { font-size: 0.85rem; margin-bottom: 0.2rem; }
.aktone-petit .table td,
.aktone-petit .table th              { padding: 0.28rem 0.5rem;  font-size: 0.875rem; }
.aktone-petit .nav-link              { padding: 0.28rem 0.55rem; font-size: 0.875rem; }
.aktone-petit .card-body             { padding: var(--ak-ecart-unite); }

.aktone-grand {
  --ak-ecart-unite: 20px;
  font-size: 1.05rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.05rem;
}
.aktone-grand .btn                   { padding: 0.5rem 1rem;  font-size: 1.05rem; }
.aktone-grand .form-control,
.aktone-grand .form-select           { padding: 0.5rem 1rem;  font-size: 1.05rem; }
.aktone-grand .form-label            { font-size: 1rem; margin-bottom: 0.4rem; }
.aktone-grand .table td,
.aktone-grand .table th              { padding: 0.65rem 1rem; font-size: 1.05rem; }
.aktone-grand .nav-link              { padding: 0.5rem 1rem;  font-size: 1.05rem; }
.aktone-grand .card-body             { padding: var(--ak-ecart-unite); }

/******************************************************************************/
/* HAUTEUR DE CONTRÔLE — le tableau et ses boutons               (H10)
/*
/* Un bouton posé dans une cellule rendait la ligne plus haute que les autres :
/* un tableau changeait donc de dimensions selon qu'on y intégrait ou non des
/* actions, et deux tableaux voisins ne s'alignaient plus.
/*
/* Les trois variantes de densité accordaient DÉJÀ le padding du bouton et
/* celui de la cellule. La quatrième ne le faisait pas — « .aktone-moyen =
/* Bootstrap normal (aucune règle nécessaire) » — et rien ne l'accordait hors
/* d'un bloc htmlDiv*, où aucune classe de densité n'est posée.
/*
/* LE PRINCIPE : toutes les lignes prennent la hauteur qu'aurait une ligne
/* portant un bouton. C'est le choix « hausser la cellule », arbitré le
/* 2026-08-19 : les boutons gardent leur taille normale partout, au prix de
/* tableaux plus aérés — et d'un texte long qui passe sur deux lignes.
/*
/* --ak-ctrl-h est la hauteur d'un contrôle dans le contexte courant. Elle est
/* posée par la densité, et REDÉFINISSABLE PAR LE TABLEAU : .table-sm/md/lg
/* commandent la taille des boutons qu'ils contiennent, ce que Bootstrap ne
/* sait pas faire — il n'a ni .table-md, ni .btn-md.
/******************************************************************************/

/* Hauteur, padding et police d'un contrôle — valeurs reprises des densités
   existantes, pour que rien ne bouge là où c'était déjà accordé. */
:root,
.aktone-moyen  { --ak-ctrl-h: 2.375rem; --ak-ctrl-pad-y: 0.375rem; --ak-ctrl-pad-x: 0.75rem; --ak-ctrl-font: 1rem; }
.aktone-mini   { --ak-ctrl-h: 1.5rem;   --ak-ctrl-pad-y: 0.1rem;   --ak-ctrl-pad-x: 0.35rem; --ak-ctrl-font: 0.75rem; }
.aktone-petit  { --ak-ctrl-h: 1.85rem;  --ak-ctrl-pad-y: 0.22rem;  --ak-ctrl-pad-x: 0.5rem;  --ak-ctrl-font: 0.825rem; }
.aktone-grand  { --ak-ctrl-h: 2.75rem;  --ak-ctrl-pad-y: 0.5rem;   --ak-ctrl-pad-x: 1rem;    --ak-ctrl-font: 1.05rem; }

/* Le TABLEAU commande la taille de ses contrôles.
 *
 * Les quatre classes sont celles qu'émet DÉJÀ la config automatique —
 * `config/styles.php`, entrée `table` : mini→table-xs, petit→table-sm,
 * moyen→table-md, grand→table-lg, et `auto` → **table-md**. Rien à traduire
 * ici : on ne fait que donner un corps à des classes que le système pose seul.
 *
 * Les hauteurs sont celles des BOUTONS de même taille, relevées plus haut dans
 * ce fichier (btn-xs 22px, btn-sm 30px) ou calculées depuis Bootstrap (btn-md
 * 38px, btn-lg 48px). C'est ce qui rend un `table-sm` et son `btn-sm`
 * exactement synchrones — l'appariement que Bootstrap ne fait pas. */
.table-xs      { --ak-ctrl-h: 22px; --ak-ctrl-pad-y: 1px;       --ak-ctrl-pad-x: 5px;     --ak-ctrl-font: 0.75rem; }
.table-sm      { --ak-ctrl-h: 30px; --ak-ctrl-pad-y: 0.22rem;   --ak-ctrl-pad-x: 0.5rem;  --ak-ctrl-font: 0.875rem; }
.table-md      { --ak-ctrl-h: 38px; --ak-ctrl-pad-y: 0.375rem;  --ak-ctrl-pad-x: 0.75rem; --ak-ctrl-font: 1rem; }
.table-lg      { --ak-ctrl-h: 48px; --ak-ctrl-pad-y: 0.5rem;    --ak-ctrl-pad-x: 1rem;    --ak-ctrl-font: 1.25rem; }

/* Toutes les lignes prennent la hauteur d'une ligne à bouton.
   `height` sur un <tr> agit comme un MINIMUM : une cellule dont le contenu
   déborde s'écrit sur deux lignes et grandit, ce qui est le comportement
   voulu. */
.table > :not(caption) > tr,
.table tr {
  height: calc(var(--ak-ctrl-h) + 2 * var(--bs-table-cell-padding-y, 0.5rem));
}

/* Le bouton en cellule suit la taille du tableau.
   Déclaré APRÈS les blocs de densité : à spécificité égale (0,2,0), c'est
   l'ordre qui tranche, et le tableau doit l'emporter sur la densité du bloc.

   Le centrage est explicite pour la même raison que sur `.btn-sm` : dès qu'une
   hauteur est imposée, un `inline-block` cale son contenu en haut. */
.table .btn {
  padding:   var(--ak-ctrl-pad-y) var(--ak-ctrl-pad-x);
  font-size: var(--ak-ctrl-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}

/* LES CHAMPS À LA HAUTEUR EXACTE DES BOUTONS
 *
 * C'est la condition pour aligner un input et son bouton dans une même cellule.
 * Les hauteurs sont celles des `.btn-*` correspondants : xs 22px, sm 30px,
 * md 38px, lg 48px. Bootstrap n'a ni `form-control-xs` ni `form-control-md`,
 * et ne garantit pas l'égalité avec les boutons — on la pose.
 *
 * `height` plutôt que du padding : un champ n'a pas de contenu qui déborde,
 * la hauteur peut être ferme. */
.form-control-xs,
.form-select-xs      { height: 22px; padding: 1px 5px;          font-size: 0.75rem;  line-height: 1.5; }
.form-control-sm,
.form-select-sm      { height: 30px; padding: 0.22rem 0.5rem;   font-size: 0.875rem; line-height: 1.5; }
.form-control-md,
.form-select-md      { height: 38px; padding: 0.375rem 0.75rem; font-size: 1rem;     line-height: 1.5; }
.form-control-lg,
.form-select-lg      { height: 48px; padding: 0.5rem 1rem;      font-size: 1.25rem;  line-height: 1.5; }

/* Dans un tableau, le champ suit la taille de la table comme le bouton :
   même source, donc même hauteur. Déclaré après les densités, pour la même
   raison d'ordre que `.table .btn`. */
.table .form-control,
.table .form-select {
  height:    var(--ak-ctrl-h);
  padding:   var(--ak-ctrl-pad-y) var(--ak-ctrl-pad-x);
  font-size: var(--ak-ctrl-font);
}

/* `.btn-md` n'existe pas chez Bootstrap. On le définit pour que la taille
   moyenne puisse être NOMMÉE — mais il n'a pas à être posé sur les boutons
   d'un tableau : `--ak-ctrl-*` s'y transmet par héritage. */
.btn-md,
.btn-group-md > .btn {
  padding:   var(--ak-ctrl-pad-y, 0.375rem) var(--ak-ctrl-pad-x, 0.75rem);
  font-size: var(--ak-ctrl-font, 1rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}

/******************************************************************************/
/* LIBRAIRIE INSIGNA (composant de tags)
/******************************************************************************/
input.nsg-input {
  outline: none;
  border-color: transparent !important;
  padding: 0 !important;
  margin: 4px;
  width: auto !important;
  min-width: 30px !important;
  display: inline-block;
}
.nsg-editor                          { padding: 0; cursor: text; }
.nsg-tag {
  display: inline-block;
  background-color: var(--bs-secondary);
  color: var(--bs-white);
  padding: 2px 7px;
  margin: 4px;
  border-color: transparent;
}
.nsg-tag-remove::after {
  margin-left: 4px;
  padding: 0 4px;
  content: 'x';
  cursor: pointer;
  background-color: transparent !important;
}
.nsg-invalid                         { border-color: #c00; }
.nsg-input[placeholder]              { min-width: 100%; }

/******************************************************************************/
/* WYSIWYG QUILL
/******************************************************************************/
.ql-container                        { height: auto !important; }
.ql-editor                           { min-height: 150px; }

/******************************************************************************/
/* UTILITAIRES
/******************************************************************************/
.couleurgrisclair                    { background-color: #E9EBEC; color: #000; }
.goldorak                            { position: fixed; top: -1000px; left: -1000px; } /* antispam */
.sey-container, .sey-show            { z-index: 1055 !important; } /* compatibilité BS */
.invisible                           { position: absolute; top: -1000px; left: -1000px; }
.help-block                          { padding: 2px 0 0; margin: 0; height: auto; line-height: 1; }
tr.primary                           { color: #FFF; }