/* 
=====================================================================
Pour customiser "uikit.min.css":
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
1. Ouvrir le customizer: https://getuikit.com/v2/docs/customizer.html
1. Cliquer "Import Less" en bas à gauche
2. Envoyer le fichier de thème personnalisé "uikit-theme.less"
3. Cocher "Advanced mode"
4. Personnaliser le thème
5. Importer: "Get Less" (fichier de thème modifié)
6. Importer: "Get CSS" (normal et minify)
7. Corriger les bugs dans 'uikit.min.css' :
   a) remplacer "../../fonts/fontawesome-webfont" par "fonts/fontawesome-webfont"
   b) corriger ".uk-notify-message-primary{background:#faf7f4;color:#492d16}"
   C) ajouter "padding-right:0.5em;" à "font-family:FontAwesome;display:inline-block;font-weight:normal;font-style:normal;line-height:1;"
   ... et autres très, très nombreuses corrections ...
=====================================================================
Composants :  https://getuikit.com/v2/docs/components.html
Core :        https://getuikit.com/v2/docs/core.html
Icones:       https://getuikit.com/v2/docs/icon.html#icon-mapping
===================================================================== */ 

/* https://cssgenerator.org */

/* ========================================================= */
/* Modificateurs de style "uikit.min.css"
    /!\ Attention, de nombreuses autres modifications ont été faites directement dans la feuille de style "uikit.min.css"
    /!\ NE PAS LA RECHARGER DIRECTEMENT À PARTIR DU CUSTOMIZER EN LIGNE */
.uk-navbar {
  box-shadow: var(--nav-shadow-strong);
  -webkit-box-shadow: var(--nav-shadow-strong);
  -moz-box-shadow: var(--nav-shadow-strong);  
  margin-bottom: 64px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.uk-nav {font-family: oxaniumsemibold}
.uk-subnav {
  font-family: oxaniumsemibold;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.uk-nav-divider{
  margin:9px 36px;
}
.uk-alert{
  box-shadow: var(--nav-shadow-light);
  -webkit-box-shadow: var(--nav-shadow-light);
  -moz-box-shadow: var(--nav-shadow-light);  
  margin-top: 24px;
  margin-bottom: 32px;
}
.uk-article-title,
.uk-article-lead,
.uk-article-meta{padding-left: var(--l-r-padding)}


/* ========================================================= */
/* Styles perso */
.uk-article{
  background-image: url(picts/ombre-article.png);
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-size: 100% 12px;
  padding-bottom: 27px;
}
h1{text-align: center}
.uk-accordion h3.uk-active{
  background-color: var(--select-bg);
  border-color: var(--link-color);
}
.uk-slidenav-previous:hover, 
.uk-slidenav-next:hover{background: none}
div.contenu, 
div.contenu-une-colonne {
  margin: 3em var(--l-r-padding) 0px var(--l-r-padding);
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto;
  column-width: 600px;
  -webkit-column-gap: 21px;
  -moz-column-gap: 21px;
  column-gap: 21px;
  -webkit-column-rule: 1px solid var(--main-border);
  -moz-column-rule: 1px solid var(--main-border);
  column-rule: 1px solid var(--main-border);
}
div.contenu-une-colonne{
  column-count: 1;
  column-width: auto;
}
div.contenu p:not(.uk-article-meta):last-of-type::after{ /* marque de dernier paragraphe, sauf pour Article Méta */
  content: "    ■";
  color: var(--btn-hover-bg);
  font-size: 1.45em;
}
aside {
  max-width: 33.33%;
  padding: 7px 0 7px 9px;
  margin: 11px 0 11px 11px;
  float: right;
  border-left: 6px solid var(--btn-hover-bg);
  font-family: sansationitalic;
  font-size: 0.95rem;
  color: var(--link-color);
  letter-spacing: 1px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
div.contenu aside p:last-of-type::after{content:none}
article.uk-article p:last-of-type::after{content:none}
blockquote{margin: 0 var(--l-r-padding) 0 var(--l-r-padding)}
cite{font-style: normal}
address{
  display: block;
  font-family: sansationlight_italic;
  font-size: 1.1em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--main-border);
}
figure{
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
figcaption{
  font-family: sansationregular;
  font-size: .9em;
  color: var(--link-color);
  padding-left: 15px;
  margin-left: var(--l-r-padding);
  border-left: 5px solid var(--btn-hover-bg);
}
figcaption.uk-overlay-panel {
  padding: 6px;  
  margin: 0;
  border: none;
}
figcaption.aPlayer {
  padding: 0;  
  margin: 0;
  border: none;
}
figcaption.titre-audio{margin-left: 1px}
blockquote figcaption{
  padding-left: 21px;
  margin: 0;
  border: none;
}
footer>div.uk-alert{margin-bottom: 72px}
p{
  padding: 0px;
  margin: 7px 0 0 0;
}
p i, 
dd i{
  font-style: normal;
  font-family: sansationlight_italic;
}
p b{
  font-weight:normal;
  font-family: sansationregular;
}
p strong{
  font-weight:normal;
  font-family: sansationbold;
}
/* q:before{content: open-quote + " "} */
/* q:after{content: " " + close-quote} */
q:before{content: "« "}
q:after{content: " »"}
a{white-space: nowrap}
ul{
	margin-top: 6px;
	list-style-image: url('picts/puce-ul.png');
}
.first-header {
  min-height: 200px;
  max-height: 200px;
  background-image: url(picts/WebP/bandeau-boucle.webp) ;
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position-y: top;
  -moz-animation: glissement-bandeau 95s cubic-bezier(.2,0,.8,1) 0s infinite;
  -webkit-animation: glissement-bandeau 95s cubic-bezier(.2,0,.8,1) 0s infinite;
  animation: glissement-bandeau 95s cubic-bezier(.2,0,.8,1) 0s infinite;
  cursor: pointer;
}
.first-header>h1 {
  width: 100%;
  padding-top: 60px;
  font-size: 3.5em;
  text-align: center;
  text-shadow: 0px 0px 12px var(--main-bg);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.XKTdra {         /* Ajouter cette classe à '.vNotification' pour le header des pages "XKTdra" */
  animation: none;
  min-height: 220px;
  max-height: 220px;
  /* background-image: url(picts/WebP/XKTdra-logo.webp) ; */
  background-image: url(../XKTdra/picts/XKTdra.svg) ;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
.titreZ-R, .titreZ-L {
  transform: rotate(-20deg);
  padding: 3px 6px 0 6px;
  min-width: 100px;
  border-top: 6px solid var(--btn-hover-bg);
  font-family: sansationbold_italic;
  font-size: 0.95rem;
  text-align: center;
  color: var(--link-color);
  letter-spacing: 1px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  margin: 19px 0 0 6px;
  float: right;
}
.titreZ-L {
  margin: 19px 6px 0 0;
  float: left;
}
.message-erreur h2{
  padding-top: 120px;
  padding-bottom: 40px;
}
.pied-de-page,
.pied-de-page-fixe {
  width: 100%;
  max-height: 50px;
  border-top: 1px solid var(--main-border);
  padding-top: 12px;
  margin-top: 14px;
  background-color: var(--main-bg);
}
.pied-de-page-fixe{
  position: fixed;
  bottom: 0px;
}
.chanp{
  border-bottom: 1px solid var(--main-border);
  padding-top: 12px;
  display: none; 
}
.audioconteneur {
  display: flex; 
  flex-direction: row;
  background-color: var(--main-bg);
  border-bottom: 4px solid var(--main-border);
  box-shadow: 0px 0px 10px 15px #ffffff;
  -moz-box-shadow: 0px 0px 10px 15px #ffffff;
  -webkit-box-shadow: 0px 0px 10px 15px #ffffff;
  position: -webkit-sticky;
  position: sticky;
  top: 44px;
}
.audiowraper {
  flex: content;
  padding-top: 69px;  
  margin-bottom: 50px;  
  background: linear-gradient(to right,var(--main-bg) 50%,rgba(255, 255, 255, 0)),
    url(picts/audio-line.jpg) repeat-x 2px 95px;
  border-top: 9px solid var(--main-border);
}
.v-small-caps{font-variant:small-caps;}

#lastModif {white-space: nowrap}
#top-doc{
  position: fixed;
  right: 9px;
  bottom: 64px;
  display: none;
  background-color: var(--btn-bg);
  border: 1px solid var(--main-border);
	transition: all cubic-bezier(.4,0,.4,1) .5s;
}
#top-doc:hover{
  transform: scale(1.02) translate(0, -2px);
  color: var(--link-color);
  background: none;
  background-color: var(--btn-hover-bg);
  border: 1px solid var(--link-color);
  -moz-box-shadow: var(--nav-shadow-light);  
  -webkit-box-shadow: var(--nav-shadow-light);
  box-shadow: var(--nav-shadow-light);
	transition: all cubic-bezier(.4,0,.4,1) .2s;
}
#sacem{
  margin: 0;
  font-size: 0.8em;
  cursor: default;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}



/* ________________________________________________________________________ */
/* @RULES                                                                   */
/* ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ */
/* Animation du bandeau de titre */
@-moz-keyframes glissement-bandeau {
  0% {background-position-x: 0px}
  100% {background-position-x: 2067px}
}
@-webkit-keyframes glissement-bandeau {
  0% {background-position-x: 0px}
  100% {background-position-x: 2067px}
}
@keyframes glissement-bandeau {
  0% {background-position-x: 0px}
  100% {background-position-x: 2067px}
}


/* MEDIA */
/* Jusqu’à 479px :     smartphone en portrait */
@media only screen and (max-width: 479px)
{
  .vNotification{animation-duration: 210s}
  .uk-article-title,
  .uk-article-lead,
  .uk-article-meta{padding-left: 0px}
}
/* De 480px à 959px :  smartphone en paysage, tablette en portrait et petite tablette en paysage */
@media only screen and (min-width: 480px) and (max-width: 959px)
{
  .vNotification{animation-duration: 190s}
  .uk-article-title,
  .uk-article-lead,
  .uk-article-meta{padding-left: 0px}
}
/* De 960px à 1280px : tablette en paysage, écran d’ordinateur de taille petite et moyenne */
@media only screen and (min-width: 960px) and (max-width: 1280px)
{
  .vNotification{animation-duration: 130s}
}
/* 1281px et + :       écran d’ordinateur (21″ et + en plein écran ) */
@media only screen and (min-width: 1281px)
{
  .vNotification{animation-duration: 70s}
}