/******************************************************************************/
/* VARIABLES PRINCIPALES
/******************************************************************************/
/*
  Règle globale de box-sizing.
  Permet de calculer les dimensions plus simplement en incluant padding et border.
*/
*, 
*::before,
*::after {
  box-sizing: border-box;
}

/*
  Hauteur de référence du document.
  Sert de base aux layouts pleine hauteur.
*/
html {
  height: 100%;
  scrollbar-gutter: stable;
}

/*
  Réinitialisation minimale du body.
  On supprime la marge native et on laisse le document occuper toute la hauteur.
*/
body {
  min-height: 100%;
  margin: 0;
}

/*
  Sécurise les médias pour qu'ils ne débordent pas de leur conteneur.
*/
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/******************************************************************************/
/* CONTENEURS INVISIBLES
/******************************************************************************/
/* CONTENEUR DES MODALES / POPUPS / ... */
#aktone-page-extra {
	height: 0px;
}
#aktone-page-extra>.modal-dialog {
	visibility: hidden;
	position: fixed;
	left: -100vw;
	top: -100vh;
}
/* CONTENEUR POUR LE PASSAGE EN PLEIN ECRAN D'UN DIV */
#aktone-page-full {
	width: 100vw;
	height: 100vh;
	position: absolute;
	background: var(--ak-div-bg);
	top: 0;
	left: -100vw;
	z-index: var(--ak-zindex-over);
}
/* CONTENEUR POUR L'AFFICHAGE DES AIDES */
#aktone-page-aide {
	background: var(--ak-div-bg);
	border: 2px solid #000;
	color: #000;
	top: 50px;
	right: 50px;
	position: fixed;
	width: var(--aide-width);
	z-index: var(--ak-zindex-top);
}
/******************************************************************************/
/* STRUCTURE DE PAGE NORMALE
/******************************************************************************/
/*
  ak-page-verticale
  Mode de page où la hauteur est contrainte par la fenêtre.
  Les zones ou blocs du principal peuvent se développer vers la droite.
  Ce mode ne signifie pas qu'il y a une barre latérale.
*/
body.ak-page-verticale {
	min-height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	background: var(--ak-body-bg);
}
body.ak-page-verticale #aktone-page-conteneur { 
	width: 100vw;
	min-height: 100vh;
}
/*
  ak-page-horizontale
  Mode de page “normal”.
  Le contenu s'organise et se développe dans le sens habituel.
  Ce mode ne signifie pas non plus qu'il y a une barre latérale.
*/
body.ak-page-horizontale {
	min-width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	background: var(--ak-body-bg);
}
body.ak-page-horizontale #aktone-page-conteneur { 
	height: 100vh;
	min-width: 100vw;
}
/*
  aktone-page-nav
  Zone haute de la page principale.
  Garde sa hauteur naturelle et ne s'étire pas.

*/
#aktone-page-nav {
  flex: 0 0 auto;
}
/*
  aktone-page-conteneur
  Conteneur structurel principal.
  Sert à contenir la structure tête / corps / pied de la page principale.
*/
#aktone-page-conteneur {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
/*
  aktone-page-tete
  Zone d'affichage de titre et navigation de la page.
*/
#aktone-page-tete {
	flex: 0 0 auto;
	min-width: 0;
	min-height: 0;
}
/*
  aktone-page-corps
  Zone centrale de la page principale.
  Prend l'espace restant entre la tête et le pied.
*/
#aktone-page-corps {
	flex: 1 0 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	padding: var(--ak-page-pad);
	gap: 0 var(--ak-page-pad);
}
/*
  aktone-page-lateral
  Zone latérale optionnelle.
  Sert pour une navbar latérale, un menu ou des outils secondaires.
  Elle peut coexister avec n'importe quel mode de body.
*/
#aktone-page-lateral {
  flex: 3 1 0%;
  min-width: 0;
  min-height: 0;
}
/*
  aktone-page-principal
  Zone principale de la page quand on veut distinguer explicitement
  le principal d'un éventuel latéral.
*/
#aktone-page-principal {
	flex: 7 1 0%;
	min-width: 0;
	min-height: 0;
}
/*
  aktone-page-pied
  Zone basse de la page principale.
  Garde aussi sa hauteur naturelle.
*/
#aktone-page-pied {
	flex: 0 0 auto;
	min-width: 0;
	min-height: 0;
}
/* PADDING DE PAGE */
#aktone-page-nav nav.navbar,
#aktone-page-pied > * {
	padding: 0 var(--ak-page-pad);
}
/******************************************************************************/
/* VARIANTE DE STRUCTURE DE PAGE AVEC NAV VERTICALE (ak-nav-verticale)
/******************************************************************************/
/*
  La nav (aktone-page-nav) est en dehors du conteneur dans le HTML.
  Pour la placer à gauche en colonne : le body passe en flex-direction: row,
  nav prend 30% et le conteneur prend le reste (70%).
*/
body.ak-nav-verticale {
  flex-direction: row;
}
body.ak-nav-verticale #aktone-page-nav {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--nav-verticale-width);
  width: var(--nav-verticale-width);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: var(--zindex-nav);
}
body.ak-nav-verticale #aktone-page-conteneur {
  flex: 1 1 auto;   /* prend les 70% restants */
  flex-direction: column;
  margin-left: var(--nav-verticale-width);
  min-width: 0;
  max-width: calc(100vw - var(--nav-verticale-width));
  width: calc(100vw - var(--nav-verticale-width));
}

/* Tous les blocs remplissent l'espace par défaut */
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-gutter: stable;
	width: 100%;
}
/* Seuls les blocs suivis d'un autre bloc reprennent leur hauteur naturelle.
   :has(~ .aktone-div-nul) = "a un frère .aktone-div-nul qui suit" */
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul:has(~ .aktone-div-nul) {
	flex: 0 0 auto;
	overflow-y: visible;
}
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul > .aktone-div-nul,
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul > .aktone-div-nul > nav.navbar {
	min-height: 0;
	width: 100%;
}
/* container-fluid supprimé — propriétés déplacées sur nav.navbar */
body.ak-nav-verticale #aktone-page-nav nav.navbar {
	align-items: stretch;
	flex-wrap: nowrap;
	min-height: 0;
}
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul + .aktone-div-nul,
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul + .aktone-div-nul > .aktone-div-nul,
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul + .aktone-div-nul nav.navbar,
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul + .aktone-div-nul .navbar-collapse,
body.ak-nav-verticale #aktone-page-nav > .aktone-div-nul + .aktone-div-nul .navbar-collapse > .w-100 {
	height: 100%;
	min-height: 0;
}
body.ak-nav-verticale #aktone-page-nav .navbar-brand {
	display: block;
	flex: 0 0 auto;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	padding-left: var(--bs-navbar-nav-link-padding-x);
	padding-right: var(--bs-navbar-nav-link-padding-x);
	width: 100%;
}
body.ak-nav-verticale #aktone-page-nav .navbar-collapse {
	flex-basis: auto;
	max-width: 100%;
	width: 100%;
}
body.ak-nav-verticale #aktone-page-nav .navbar-toggler {
	align-self: flex-start;
	margin-left: var(--bs-navbar-nav-link-padding-x);
}

@media (min-width: 768px) {
	body.ak-nav-verticale #aktone-page-nav .navbar-collapse {
		display: block !important;
		flex-basis: auto !important;
		flex-grow: 0;
		width: 100%;
	}
	body.ak-nav-verticale #aktone-page-nav .navbar-nav {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}
	body.ak-nav-verticale #aktone-page-nav .nav-item,
	body.ak-nav-verticale #aktone-page-nav .dropdown {
		width: 100%;
	}
	body.ak-nav-verticale #aktone-page-nav .nav-link,
	body.ak-nav-verticale #aktone-page-nav .dropdown-toggle {
		text-align: left;
		width: 100%;
	}
	body.ak-nav-verticale #aktone-page-nav .dropdown-menu {
		position: static;
		width: 100%;
	}
	body.ak-nav-verticale #aktone-page-nav .float-end,
	body.ak-nav-verticale #aktone-page-nav .ms-auto {
		float: none !important;
		margin-left: 0 !important;
	}
}


/******************************************************************************/
/* STRUCTURE DE BLOC
/******************************************************************************/
/*
  aktone-bloc
  Composant structurel générique.
  Reproduit la logique tête / corps / pied à l'échelle d'un sous-ensemble de page.
*/
.aktone-bloc {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: 0;
	position: relative;
}
/*
  aktone-bloc-composant
  Conteneur d'un bloc.
  Permet d'intégrer un composant bootstrap en le produisant comme un bloc
  Le composant bootstrap héritera du dimensionnement du bloc aktone.
*/
.aktone-bloc-composant {
	flex-grow: 4;
	flex-shrink: 4;
	flex-basis: auto;
	min-height: 1px;
	max-width: 100%;
	/* height: 100%; */ /* ne pas réactiver, çà bloque les cartos */
}
/*
  aktone-bloc-tete
  Partie haute du bloc.
  Hauteur naturelle.

  aktone-bloc-pied
  Partie basse du bloc.
  Hauteur naturelle.
*/
.aktone-bloc-tete,
.aktone-bloc-pied {
	flex: 0 0 auto;
	padding: var(--ak-ecart-unite);
}
/*
  aktone-bloc-corps
  Partie centrale du bloc.
  Prend l'espace restant à l'intérieur du bloc.
  Peut recevoir en plus des classes de layout comme aktone-stack ou aktone-row.
*/
.aktone-bloc-corps {
	flex: 1 1 auto;
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	align-content: flex-start;
	min-width: 0;
	min-height: 0;
	padding: var(--ak-ecart-unite);
}

/*
  loader-layer / loader-wrap
  Overlay de chargement centré sur le bloc parent.
  La taille de l'icône est ajustée dynamiquement en JS (font-size).
*/
.loader-layer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.75);
	z-index: var(--zindex-loader, 10);
}

/*
  aktone-bloc--scroll
  Variante d'un bloc dont le corps devient scrollable.
  À utiliser quand l'en-tête et le pied doivent rester visibles.
*/
.aktone-bloc--scroll > .aktone-bloc-corps {
  overflow: auto;
  scrollbar-gutter: stable;
}
/******************************************************************************/
/* HELPERS DE BLOC
/******************************************************************************/
/* Blocs neutres à dimension min */
.aktone-div-nul,
.aktone-div-dim {
	position :relative;
	flex-grow: 4;
	flex-shrink: 4;
	flex-basis: auto;
}

/*
  aktone-row
  Conteneur de disposition horizontale.
  Sert à placer plusieurs blocs ou zones côte à côte.
  Sur mobile, passe automatiquement en vertical.
*/
.aktone-row {
  display: flex;
  flex-direction: row;
  gap: var(--ak-ecart-unite);
  min-width: 0;
}
/*
  aktone-stack
  Conteneur de disposition verticale.
  Sert à empiler plusieurs blocs ou zones les uns sous les autres.
*/
.aktone-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ak-ecart-unite);
  min-width: 0;
  min-height: 0;
}
/*
  Sécurise les enfants des conteneurs flex Aktone.
  Évite certains débordements liés aux contenus larges ou scrollables.
*/
.aktone-row > *,
.aktone-stack > * {
  min-width: 0;
  min-height: 0;
}

/*
  aktone-fill
  Élément flexible qui prend une part de l'espace disponible.
  Si plusieurs enfants d'un même conteneur ont aktone-fill,
  ils se partagent l'espace de manière égale.
*/
.aktone-fill {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
/*
  aktone-fixed
  Élément à taille non extensible.
  Sert pour une zone dont la largeur ou la hauteur est pilotée
  par son contenu ou par une dimension explicitement donnée.
*/
.aktone-fixed {
  flex: 0 0 auto;
}
/*
  aktone-main
  Élément flexible prioritaire dans un partage de type 70/30.
  Sert en général pour la zone principale d'un layout horizontal.
*/
.aktone-main {
  flex: 7 1 0;
  min-width: 0;
}
/*
  aktone-side
  Élément flexible secondaire dans un partage de type 70/30.
  Sert en général pour une colonne latérale.
*/
.aktone-side {
  flex: 3 1 0;
  min-width: 0;
}
/*
  aktone-hauteur-page
  Utilitaire de hauteur disponible.
  Sert quand un conteneur doit remplir la hauteur de son parent.
*/
.aktone-hauteur-page {
  height: 100%;
  min-height: 0;
}

@media (max-width: 767.98px) {

  /* Sur mobile : réduction de la taille de base, des espacements et des rayons
     Cible body (comme cssvars.php) pour que l'override fonctionne */
  body {
    --ak-font-base: 0.875rem; /* légèrement réduit sur mobile */
    font-size:          0.875rem;
    --ak-ecart-unite:      7.5px;    /* = ecart-unite-demi */
    --ak-radius:    10px;
  }

  /* Layout horizontal → vertical */
  .aktone-row {
    flex-direction: column;
  }

  /* Structure de page : lateral passe au-dessus du principal */
  #aktone-page-corps {
    flex-direction: column;
  }
  #aktone-page-lateral {
    flex: 0 0 auto;
    width: 100%;
    order: 1;
  }
  #aktone-page-principal {
    flex: 1 1 auto;
    width: 100%;
    order: 2;
  }

  /* nav verticale → repasse en haut sur mobile */
  body.ak-nav-verticale {
    flex-direction: column;
  }
  body.ak-nav-verticale #aktone-page-nav {
    display: block;
    flex: 0 0 auto;
    margin-left: 0;
    width: 100%;
    height: auto;
    position: relative;
    overflow-y: visible;
  }
  body.ak-nav-verticale #aktone-page-conteneur {
    margin-left: 0;
    width: 100%;
  }

  /* Variantes de taille : grand revient aux valeurs Bootstrap standard */
  .aktone-grand {
    --ak-ecart-unite:        15px;
    font-size:            1rem;
    --bs-btn-padding-y:   0.375rem;
    --bs-btn-padding-x:   0.75rem;
    --bs-btn-font-size:   1rem;
  }
  .aktone-grand .btn                 { padding: 0.375rem 0.75rem; font-size: 1rem; }
  .aktone-grand .form-control,
  .aktone-grand .form-select         { padding: 0.375rem 0.75rem; font-size: 1rem; }
  .aktone-grand .table td,
  .aktone-grand .table th            { padding: 0.5rem 0.75rem;   font-size: 1rem; }

}
/******************************************************************************/
/* COMPORTEMENT FLEX DES BLOCS
/******************************************************************************/
/*
  aktone-flex (défaut)
  Le corps s'étire pour occuper tout l'espace vertical disponible.
  Usage : cartes, dataviz, tableaux avec scroll interne, vues pleine hauteur.
*/
.aktone-bloc.aktone-flex > .aktone-bloc-composant {
  flex: 1 1 auto;
}
.aktone-bloc.aktone-flex > .aktone-bloc-composant > .aktone-bloc-corps {
  flex: 1 1 auto;
}
/*
  aktone-noflex
  Le corps s'adapte à son contenu, sans contrainte de hauteur.
  Usage : formulaires, listes, contenus de hauteur variable.
*/
.aktone-bloc.aktone-noflex {
  flex: 0 0 auto;
}
.aktone-bloc.aktone-noflex > .aktone-bloc-composant {
  flex: 0 0 auto;
}
.aktone-bloc.aktone-noflex > .aktone-bloc-composant > .aktone-bloc-corps {
  flex: 0 0 auto;
}
/******************************************************************************/
/* PAGE FLUX / NOFLUX
/******************************************************************************/
body.ak-page-noflux {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
/*
  Chaîne de hauteur noflux
  Chaque étage doit avoir flex-shrink != 0 et min-height: 0 pour que
  la contrainte 100vh descende jusqu'aux aktone-bloc-corps scrollables.
  On surcharge les valeurs flux (flex: 1 0 auto) qui ne shrinkent pas.
*/
body.ak-page-noflux #aktone-page-conteneur {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
body.ak-page-noflux #aktone-page-corps {
  flex: 1 1 0%;
  min-height: 0;
}
body.ak-page-noflux #aktone-page-principal,
body.ak-page-noflux #aktone-page-lateral {
  overflow: hidden;
}
/* La row doit remplir la hauteur du principal pour que les cols s'étirent */
body.ak-page-noflux #aktone-page-principal > .row,
body.ak-page-noflux #aktone-page-lateral > .row {
  height: 100%;
  align-items: stretch;
}
/* Les cols (aktone-bloc) deviennent flex-col pour propager la hauteur */
body.ak-page-noflux .row > .aktone-bloc {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.ak-page-horizontale.ak-page-flux {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
body.ak-page-verticale.ak-page-flux {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
/******************************************************************************/
/* COMPORTEMENT SCROLL DES BLOCS (flux / noflux)
/******************************************************************************/
/*
  En mode noflux (page à hauteur fixe), le corps devient scrollable
  pour que tête et pied restent visibles.
  min-height: 1px évite l'effondrement du flex item à zéro.
*/
body.ak-page-noflux .aktone-bloc-corps {
  overflow: hidden;
  overflow-y: auto;
  min-height: 1px;
  scrollbar-gutter: stable;
}
/*
  En mode flux (page normale), le contenu déborde naturellement.
*/
body.ak-page-flux .aktone-bloc-corps {
  overflow: visible;
}
/*
  Variante : forcer le scroll sur un bloc spécifique même en mode flux.
  S'applique avec la classe aktone-flux sur le bloc lui-même.
*/
body.ak-page-flux .aktone-bloc.aktone-flux > .aktone-bloc-composant > .aktone-bloc-corps {
  overflow-x: auto;
}
/******************************************************************************/
/* ESPACEMENT DES BLOCS ET COMPOSANTS
/******************************************************************************/
.aktone-bloc.aktone-pad,
.aktone-div-dim.aktone-pad {
	padding-left: var(--ak-ecart-unite);
	padding-right: var(--ak-ecart-unite);
	padding-bottom: var(--ak-ecart-unite);
	padding-top: var(--ak-ecart-unite);
}
.panel>.panel-body {
	padding: var(--ak-ecart-unite);
}
.multipan-vertical .multipan-nav {
	padding: var(--ak-ecart-unite) 0;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
	padding: calc(var(--ak-ecart-unite) / 2);
}


/* GESTION DU PADDING DES BLOCS PAR SURCHARGE DES ELEMENTS BOOTSTRAP */
.aktone-bloc.aktone-noconteneur {
	padding:0;
}
/* CONTENEUR VERTICAL (on annule le padding horizontal) */
.aktone-bloc.aktone-cnt-v  {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* CONTENEUR HORIZONTAL (on annule le padding vertical) */
.aktone-bloc.aktone-cnt-h  {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* GESTION DU PADDING DES COMPOSANTS PAR SURCHARGE DES ELEMENTS BOOTSTRAP */
.aktone-nopad>.card>.card-title,
.aktone-nopad>.card>.card-body,
.aktone-nopad>.multipan>.multipan-contenu,
.aktone-nopad>.multipan>.multipan-nav,
.aktone-nopad>.aktone-bloc-composant>.table>thead>tr>th,
.aktone-nopad>.aktone-bloc-composant>.table>tbody>tr>th,
.aktone-nopad>.aktone-bloc-composant>.table>tfoot>tr>th,
.aktone-nopad>.aktone-bloc-composant>.table>thead>tr>td,
.aktone-nopad>.aktone-bloc-composant>.table>tbody>tr>td,
.aktone-nopad>.aktone-bloc-composant>.table>tfoot>tr>td {
	padding: 0;
}

/* PAD VERTICAL (on annule le padding horizontal) */
.aktone-pad-v>.card>.card-body,/* @bs5 */
.aktone-pad-v>.card>.card-title,/* @bs5 */
.aktone-pad-v>.multipan>.multipan-contenu,
.aktone-pad-v>.card>.aktone-bloc-corps /* @bs5 */ {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* PAD HORIZONTAL (on annule le padding vertical) */
.aktone-pad-h>.card>.card-body, /* @bs5 */
.aktone-pad-h>.card>.card-title, /* @bs5 */
.aktone-pad-h>.multipan>.multipan-contenu,
.aktone-pad-h>.card>.aktone-bloc-corps  /* @bs5 */ {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* PAD GOUTTIÈRE — corps se comporte comme un .row Bootstrap
   Bootstrap applique les gutters via .row > *, pas via col-*.
   Il faut répliquer ce comportement pour les enfants directs du corps. */
.aktone-pad-g > .aktone-bloc-composant > .aktone-bloc-corps {
	padding-left: 0;
	padding-right: 0;
	margin-left:  calc(-1 * var(--ak-ecart-unite));
	margin-right: calc(-1 * var(--ak-ecart-unite));
}
/* Reproduit le .row > * de Bootstrap — padding = même valeur que la marge négative */
.aktone-pad-g > .aktone-bloc-composant > .aktone-bloc-corps > * {
	padding-right: var(--ak-ecart-unite);
	padding-left:  var(--ak-ecart-unite);
}




/* Les rows au premier niveau — pas de width:100% : la largeur auto compense
   symétriquement les margin-left/right négatifs de Bootstrap */
#aktone-page-principal>.row,
#aktone-page-lateral>.row,
.tab-pane>.row {
	min-width: 0;
}

#aktone-page-tete .page-header {
	padding-bottom: 0;
}
#aktone-page-tete .page-header h2 {
	padding-bottom: 0;
}

/* BLOCS AD HOC */
/* dans les multipans, le tab-content n'est pas le vrai conteneur */
.tab-pane {
	padding:0; margin:0;
}

/******************************************************************************/
/* ! BLOC BORDURE / NOBORDURE */
/******************************************************************************/
.panel-heading,
.panel-body,
.panel-body-inside,
.panel-footer,
.panel-body .jumbotron,
.panel-body-inside .jumbotron,
.card,
.multipan {
	border-color: transparent;
}
.aktone-bordure>.multipan {
	border: 1px solid var(--ak-filet-color);
	overflow:hidden;
}
.aktone-bordure>.card>.panel-heading,
.aktone-bordure>.multipan-horizontal>.multipan-nav,
.aktone-bordure>.multipan>.multipan-tete {
	border-bottom: 1px solid var(--ak-filet-color);
}
.aktone-bordure>.multipan-vertical>.multipan-nav {
	border-right: 1px solid var(--ak-filet-color);
}
.aktone-bordure>.multipan>.multipan-pied {
	border-top: 1px solid var(--ak-filet-color);
}
.aktone-nobordure>.card,
.aktone-nobordure>.multipan {
	border: 0px solid var(--ak-filet-color);
}
.panel-default,
.multipan {
	border-radius: var(--ak-radius);
}
.aktone-no-radius>.multipan {
	border-radius: 0px;
}
/******************************************************************************/
/* FOOTER EN MODE NOFLUX
/******************************************************************************/
body.ak-page-noflux #aktone-page-pied {
	min-height: 2em;
	height: 2em;
	line-height: 2em;
	background: rgba(255,255,255,0.2);
	z-index: var(--zindex-nav);
}
/******************************************************************************/
/* SURVOL DE LA BARRE DE NAVIGATION
/******************************************************************************/
body.ak-page-survol #aktone-page-tete {
	position: absolute;
	z-index: var(--ak-zindex-nav-sub);
}
body.ak-page-survol #aktone-page-tete nav {
	transform: translateY(-300%);
	transition: transform 0.3s ease-in-out;
}
body.ak-page-survol #aktone-page-tete:hover nav {
	transform: translateY(0);
}
/******************************************************************************/
/* BOX-SHADOW ET OMBRES
/******************************************************************************/
.thumbnail,
.panel-default,
.panel,
.card,
.multipan {
	box-shadow: 0 0 #0000, 0 0 #0000, 0 0.2rem 0.4rem rgba(0,0,0,0.05);
}
.thumbnail {
	border-radius: var(--ak-radius);
}
.thumbnail > img {
	border-radius: calc(var(--ak-radius) - 2px) calc(var(--ak-radius) - 2px) 0 0;
}
.thumbnail:hover {
	border-color: var(--primary-base);
}
.aktone-no-ombre .thumbnail,
.aktone-no-ombre .panel-default,
.aktone-no-ombre .panel,
.aktone-no-ombre .card,
.aktone-no-ombre .multipan {
	box-shadow: none;
}
/******************************************************************************/
/* DROPDOWN MENU
/******************************************************************************/
.dropdown-menu {
	scrollbar-width: thin;
	overflow-y: auto;
	max-height: var(--dropdown-max-height);
}
.dropdown-menu::-webkit-scrollbar       { width: 5px; }
.dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.dropdown-menu::-webkit-scrollbar-thumb { background: darkgray; }
.dropdown-menu::-webkit-scrollbar-thumb:hover { background: darkgray; }
/******************************************************************************/
/* TIROIRS
/******************************************************************************/
.aktone-tiroir {
	position: fixed;
	height: var(--tiroir-hauteur);
	top: calc((100vh - var(--tiroir-hauteur)) / 2);
	z-index: var(--ak-zindex-over);
	background: var(--ak-div-bg);
	width: 33.3333vw;
	min-width: 600px;
	max-width: 100vw;
	padding: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--ak-filet-color);
}
.aktone-tiroir .close {
	position: absolute;
	top: var(--ak-ecart-unite);
	right: var(--ak-ecart-unite);
	z-index: var(--ak-zindex-top);
}
.aktone-tiroir-conteneur {
	height: var(--tiroir-hauteur);
	width: 100%;
	display: flex;
	flex-direction: column;
}
.aktone-tiroir-conteneur > .aktone-bloc {
	height: var(--tiroir-hauteur);
	width: 100%;
	padding: 0;
	margin: 0;
}
.aktone-tiroir-conteneur > .aktone-bloc > .aktone-bloc-tete {
	padding: var(--ak-ecart-unite);
	width: 100%;
	border-bottom: 1px solid var(--ak-filet-color);
}
.aktone-tiroir-conteneur > .aktone-bloc > .aktone-bloc-corps {
	overflow: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	height: 1px; /* important : permet à flex de gérer la hauteur restante */
}
.aktone-tiroir-conteneur > .aktone-bloc.aktone-defilable {
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	height: 100%;
}
.aktone-tiroir-conteneur > .aktone-bloc > .aktone-bloc-pied {
	padding: var(--ak-ecart-unite);
	width: 100%;
	border-top: 1px solid var(--ak-filet-color);
}
.aktone-tiroir-conteneur iframe { border: none; }

#aktone-tiroir-droite {
	border-left: 1px solid var(--ak-filet-color);
	box-shadow: -3px 0px 5px 0px rgba(221,221,221,.50);
	border-top-left-radius: var(--ak-ecart-unite);
	border-bottom-left-radius: var(--ak-ecart-unite);
	right: -100vw;
	opacity: 0.8;
	transition: right 0.5s ease-in;
}
#aktone-tiroir-droite.ouvert {
	right: 0;
	opacity: 1;
}
#aktone-tiroir-gauche {
	border-right: 1px solid var(--ak-filet-color);
	box-shadow: 5px 0px 5px 0px rgba(221,221,221,.50);
	border-top-right-radius: var(--ak-ecart-unite);
	border-bottom-right-radius: var(--ak-ecart-unite);
	left: -100vw;
	opacity: 0.8;
	transition: left 0.5s ease-in;
}
#aktone-tiroir-gauche.ouvert {
	left: 0;
	opacity: 1;
}
/******************************************************************************/
/* BOUTONS FLOTTANTS DE NAVIGATION
/******************************************************************************/
#aktone-tiroir-droite-btn i,
#aktone-tiroir-gauche-btn i,
#corePageRetourBtn i,
#corePageArriereBtn i,
#corePageAvantBtn i,
#corePageHomeBtn i,
.corePageBtn i {
	color: #fff;
	box-shadow: 0px 0px 0px 1px #fff;
	background: var(--primary-base);
	border: solid 1px #fff;
	text-align: center;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	width: 2em;
	height: 2em;
	font-size: 1.2em;
	line-height: 1.8em;
	transform: scale(1);
	transition: transform .3s ease-in-out;
}
.couleur_normal  { background: var(--primary-base); }
.couleur_moins   { background: var(--warning-base) !important; }
.couleur_plus    { background: var(--info-base)    !important; }
.couleur_ko      { background: var(--danger-base)  !important; }
.couleur_ok      { background: var(--success-base) !important; }
.couleur_defaut  { background: var(--default-base) !important; }
.corePageBtnAdmin i { background: var(--danger-base); }

#aktone-tiroir-droite-btn {
	position: fixed;
	bottom: var(--ak-ecart-unite);
	right: var(--ak-ecart-unite);
	z-index: var(--zindex-nav);
}
#aktone-tiroir-gauche-btn {
	position: fixed;
	bottom: var(--ak-ecart-unite);
	left: var(--ak-ecart-unite);
	z-index: var(--zindex-nav);
}
#corePageRetourBtn {
	position: fixed;
	top: var(--ak-ecart-unite);
	left: var(--ak-ecart-unite);
	z-index: var(--zindex-nav);
}
#corePageArriereBtn {
	position: fixed;
	bottom: var(--ak-ecart-unite);
	left: 25%;
	z-index: var(--zindex-nav);
}
#corePageAvantBtn {
	position: fixed;
	bottom: var(--ak-ecart-unite);
	right: 25%;
	z-index: var(--zindex-nav);
}
#corePageHomeBtn {
	position: fixed;
	bottom: var(--ak-ecart-unite);
	right: 50vw;
	margin-left: 2em;
	z-index: var(--zindex-nav);
}
#aktone-tiroir-gauche-btn:hover i,
#aktone-tiroir-droite-btn:hover i,
#corePageRetourBtn:hover i,
.corePageBtn:hover i {
	transform: scale(1.3);
}
/******************************************************************************/
/* CONSOLE, MESSAGES ET DEBUG
/******************************************************************************/
#aktone-page-console,
#aktone-page-debug,
#aktone-page-message,
#aktone-page-message-perm {
	font-size: 0.85em;
	flex: none;
	position: absolute;
	padding: var(--ak-ecart-unite);
	line-height: 22.5px;
}
#aktone-page-message-perm {
	position: relative;
	display: block;
	width: 100%;
}
#aktone-page-console > .alert,
#aktone-page-message > .alert {
	border-radius: 0;
	min-height: var(--ak-navbar-unite);
	overflow: hidden;
	width: 100vw;
	margin: 0;
	padding: 10px;
	display: flex;
	align-items: center;
	z-index: var(--ak-zindex-alert);
	position: fixed;
	left: 0;
}
#aktone-page-message > .alert { top: 0; }
#aktone-page-console > .alert { bottom: 0; }
#aktone-page-console .close { font-size: 1.5em; }
.alert-disap { display: none; }
#aktone-page-message .valider {
	margin-left: auto;
	font-weight: bold;
	line-height: 1;
	color: #FFF;
	background: transparent;
}
/* Console de debug */
#aktone-page-debug {
	--color: yellow;
	--bg: rgba(0,0,0,0.9);
	--bg-titre: #AAA;
	--bg-inter: #EEE;
	position: fixed;
	top: 1vh;
	left: 1vw;
	background: var(--bg);
	color: var(--color);
	width: var(--debug-width);
	height: var(--debug-hauteur);
	resize: both;
	z-index: var(--ak-zindex-alert);
	font-family: monospace;
	font-size: 0.75em;
	overflow: hidden;
}
#aktone-page-debug-titre,
#aktone-page-debug .debug-titre {
	width: 100%;
	height: 24px;
	line-height: 14px;
	background: var(--bg-titre);
	color: #000;
	font-size: 0.875em;
	text-transform: uppercase;
	font-family: monospace;
	padding: 5px;
	overflow: hidden;
}
#aktone-page-debug-titre {
	position: absolute;
	top: 0;
	left: 0;
}
#aktone-page-debug-contenu {
	padding-top: 24px;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	padding: 5px;
}
#aktone-page-debug .debug-titre {
	background: var(--bg-inter);
	color: var(--bg);
	margin-top: 30px;
	margin-bottom: 10px;
}
#aktone-page-debug table,
#aktone-page-debug p {
	color: var(--color);
	background: transparent;
	font-size: inherit;
}
#aktone-page-debug p,
#aktone-page-debug pre { margin: 0; border: none; font-size: 1em; }
#aktone-page-debug pre { background: white; }
#aktone-page-debug td {
	border-left: 1px solid var(--color);
	padding: 5px;
}
#aktone-page-debug th {
	border-left: 1px solid var(--color);
	border-bottom: 1px solid var(--color);
	text-transform: uppercase;
	font-weight: bold;
	padding: 5px;
}
#aktone-page-debug th.first,
#aktone-page-debug td.first { border-left: 1px solid transparent; }