/*author : Thibaut L*/
/*commentaire réseaux sociaux envellope*/
/*padding est à 0px barre de droite mettre le HTML par <setion> <article>    et     */


/*CSS langues creer un text depuis javascript avec une class*/
#lang-flag-fr {
  /*le text est ajouter depuis HTML T.L. 2023*/
  vertical-align: middle;
}

#lang-flag-en {
  /*le text est ajouter depuis HTML T.L. 2023*/
  vertical-align: middle;
}

#lang-flag-es {
  /*le text est ajouter depuis HTML T.L. 2023*/

  vertical-align: middle;
}



/* CSS Polices de caracteres */
/*import des polices de caracteres*/
@font-face {
  font-family: Lato-Black;
  src: url("../fonts/Lato-Black.ttf");
}

@font-face {
  font-family: Lato-Regular;
  src: url("../fonts/Lato-Regular.ttf");
}

@font-face {
  font-family: Lato-Bold;
  src: url("../fonts/Lato-Bold.ttf");
}

@font-face {
  font-family: Lato-Thin;
  src: url("../fonts/Lato-Thin.ttf");
}

@font-face {
  font-family: Ubuntu-Regular;
  src: url("../fonts/Ubuntu-Regular.ttf");
}

@font-face {
  font-family: Ubuntu-Bold;
  src: url("../fonts/Ubuntu-Bold.ttf");
}

@font-face {
  font-family: Raleway-Regular;
  src: url("../fonts/Raleway-Regular.ttf");
}

@font-face {
  font-family: AmaticSC-Bold;
  src: url("../fonts/AmaticSC-Bold.ttf");
}

@font-face {
  font-family: AmaticSC-Regular;
  src: url("../fonts/AmaticSC-Regular.ttf");
}

@font-face {
  font-family: Source_Sans_Pro/SourceSansPro-Bold;
  src: url("../fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf");
}

@font-face {
  font-family: Source_Sans_Pro-BoldItalic;
  src: url("../fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.ttf");
}

@font-face {
  font-family: Source_Sans_Pro-Black;
  src: url("../fonts/Source_Sans_Pro/SourceSansPro-Black.ttf");
}

/*MENU HEADER HTML5*/


/*colum one colum two*/
/***Menu commun aux Navigation bar ***/
header {
  position: fixed;
  display: inline;
  top: 5px;
  vertical-align: middle;
  margin: 5px;
  background-color: rgba(0, 0, 0, 0.66);
  box-shadow: rgba(7, 8, 9, 0.45) 0px 12px 28px, rgba(0, 0, 0, 0.12) 0px 10px 10px;
  /*gros eefect CSS*/
  /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;/*legere effect CSS*/
  width: 100%;
  z-index: 2;
  /*border-bottom: 1px solid rgb(225, 223, 223);*/
}


/*liens tuto menu deroulant ok */
/*DEBUT menu déroulant ok*/
/*.blocphoto-not {
  display: grid;
  grid-template-columns: 1fr;
  width: auto; /*menu déroulant en css
  margin: 0px;
  padding: 5px 20px 10px 15;
}*/


ul li {
  /*police de char des titre généraux **/
  list-style: none;
  font-family: "arial black", georgian, verdana, sans-serif;
  color: whitesmoke;
  /*  font-stretch: expanded;  */
  /*largeur de la police de caracteres*/
  /* niveaux de graisses */
  font-size: 12px;
  /*css genrale le texte*/
  padding: 4px 5px 4px 5px;
  /* haut droite bas gauche*/
  /*margin: 5px;*/
  z-index: 19;
  border-radius: 4px;

  /*pour leffect round*/
}

ul li a:hover {
  color: whitesmoke;
}

.titre-nav {
  font-size: 16px;
  /*css juste le titre du texte*/
  text-transform: uppercase;
  /* padding du titre class*/
  font-weight: 900;
  padding: 22px 14px 16px 14px;
  /* top right buttom left*/
  background-color: rgb(0, 2, 0);
}

.logo-menu-nav {
  /** logo rythmike.com sur la gauche du menu **/
  margin: 12px;
  width: 115px;
  height: 45px;
  background-color: rgb(0, 0, 0);
}

.titre-nav-special {
  padding: 2px;
  background-color: rgb(0, 0, 0);
}

#wrap {
  padding: 2px;
  width: 100%;
  margin: 0;
  z-index: 99;
  /** position: relative;**/
}

.navbar {
  padding: 0;
  margin: 0;

  position: absolute;
  z-index: 19;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/**relatif au display du menu photo trop long **/
/*colum one colum two*/
.display-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4px;
}

/*relatif aux colums*/


li a {
  border-right: 3px solid #ccc9c9;
}

nav a {
  color: black;
}

nav a:hover {
  color: black;
  font-weight: 380;
  font-size: 15px;
}

.navbar li {
  height: auto;
  width: 155.8px;
  /*largeur*/
  float: left;
  padding: 0;
  margin: 0;
  background-color: #444444;
  z-index: 19;
}

.navbar a {
  /* padding de li du texte deroulant */
  text-decoration: none;
  color: white;
  display: block;
  z-index: 19;
}

.navbar li:hover,
a:hover {
  /*relatif au survole de la souris couleur*/
  color: rgb(112, 127, 140);
}

.navbar li ul {
  display: none;
  height: auto;
  margin: 0;
  padding: 0;
  z-index: 19;
}

.navbar li:hover ul {
  /*relatif à l'effect de barre */
  display: block;
  width: auto;
}


.navbar li ul li {
  padding: 2px 4px 2px 4px;
  margin: 0px;
  font-size: 11px;
  background-color: #444444;
  z-index: 19;
}

/*  corp des menus gris clair*/
.navbar li ul li .navolink {
  border-top: 2px solid #c9d4d8;
  border-right: 2px solid #444444;
  border-bottom: 2px solid #444444;
  border-left: 2px solid #444444;
}

.navbar li ul li .navolink-column-1 {
  border-top: 2px solid #c9d4d8;
  border-right: 2px solid #444444;
  border-bottom: 2px solid #444444;
  border-left: 2px solid #444444;
}

.navbar li ul li .navolink-column-2 {
  border-top: 2px solid #c9d4d8;
  border-right: 2px solid #444444;
  border-bottom: 2px solid #444444;
  border-left: 2px solid #444444;
}

.navbar li ul li a:hover {
  /*relatif au survole de la souris couleur*/
  background-color: #a3a1a1;

}

/*
.menubar .navolink:hover {
  font-weight: 1200;
  color: rgb(12, 27, 180);

}*/




/* id de mes titre de la barre bleu // menu de nav*/
.menubar {
  padding: 0;
  margin: 0;
  font-family: "Lato-Bold", sans-serif;
  font-weight: bolder;
  margin-left: 5px;
  margin-top: 10px;
  height: auto;
}



/* par rapport au logo dans le menu du haut NAV **/
/* pour corriger le flow des photographies IMG du header rapport au logo*/


.lang-nav {
  top: 1px;
  right: 52px;
  margin-top: 1px;
  display: block;
  position: fixed;
  background-color: transparent;
  z-index: 9;
  /*margin-top: 2px;   non a ne pas faire cool T.L. 2023*/
}

.lang-flag img {
  z-index: 9;
}

/**Fin Navigation Bar commune au page**/
/* fin menu NAV end */



/** a terminer CSS Footer 100%   **/
/*classeur relatif au Pied de page fixe */
footer {
  position: fixed;
  display: inline-block;
  width: 100%;
  bottom: 7px;
  background-color: rgba(0, 0, 0, 0.76);
  text-align: center;
  margin-left: auto;
  margin-right: auto;

  /*border-bottom: 1px solid rgb(225, 223, 223);*/
}

footer p,
footer a {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin: 10px;
  /*groupé pour un meilleur visu**/

}

/*fin a terminer*/

/*ATTENTION mettre de l'ordre dans mes feuille de style des COM svp */

/*class dans la div au dessus de la publicité de google */
.inlineblock {
  display: inline-block;
}

img {
  vertical-align: middle;
}

.center {
  text-align: center;
  margin-right: auto;
  margin-left: auto;

}

code {
  background-color: darkolivegreen;
  padding: 3px;
}

img {
  border-radius: 4px;
}

.span {
  display: inline-block;
}

/*.rotate {
    rotate: 5deg;
}*/

.underline {
  text-decoration: underline;
}



/*css en rapport avec les langues */
/*css commune aux pages web*/
.lang-flag {
  width: 49px;
  height: 23px;
  border: 3px solid #fff;
  box-shadow: inset;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 14%;
  /*padding: 3px;*/
  /*flag drapeau de la langue*/
}



/**style de tete de nav effect barre movement **/
/*css du menu design */
header::after {
  content: "";
  display: table;
  clear: both;
}

nav {
  float: top;
}

nav ul {
  margin-left: auto;
}

nav li {
  margin-left: 20px;
  display: inline-table;
  padding-right: 7px;
  padding-top: 12px;
  position: relative;
}

nav a::before {
  content: "";
  display: block;
  height: 5px;
  width: 0%;
  background-color: whitesmoke;
  position: absolute;
  top: 0;
  transition: all ease-in-out 390ms;
}

/*pour effect barre des menu**/
nav a:hover::before {
  width: 100%;
}



/*index généraux pub*/
.pubcenter {
  padding: 15px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.liensno a {
  /*atif au espacement du menu de navigation*/
  color: white;
  text-decoration: none;
  font-style: none;
  font-weight: normal;
}



p .liensno {
  text-decoration: none;
  font-weight: normal;
  color: whitesmoke;
}

/*photo moyenne de présentation à gauche left photo */
.imagette-img {
  width: 190px;
  height: 90px;
  left: 20px;
  margin-left: 15px;
  padding: 10px;
}

/*style animation*/
/*animation 1*/
.anim-load {
  /*pour test */
  /*background-color: rgb(0, 61, 92);
    color : white;*/
  animation: nav-load 1200ms ease-out;

  background-color: rgba(0, 61, 92, 0.97);
  color: white;
}

@keyframes nav-load {
  0% {
    transform: translate(-100%);
  }

  100% {
    transform: translate(0);
  }
}

/*Animation 3*/

.anim-div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: anim-name;
  animation-duration: 4s;
  animation-direction: reverse;
}

/*
@keyframes anim-name {
    0% {
        background-color: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background-color: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background-color: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background-color: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background-color: red;
        left: 0px;
        top: 0px;
    }
}*/

/*Animation 4*/
/*
.clickOn {
    width: 100%;
    height: 100%;
    background-color: red;
    position: relative;
    animation-name: anim-name;
    animation-duration: 15s;
    animation-direction: reverse;
}

@keyframes anim-name {
    0% {
        background-color: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background-color: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background-color: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background-color: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background-color: red;
        left: 0px;
        top: 0px;
    }
}*/

/*requete a media conception adapatative*/
/****** @@@@ media @@@ *****/
/*****autre requete table display *****/
/*
*/

/*MEdia LANG ES Et Lang EN display Logo */
/*en dessous de 200px */
/*media type -1 */
@media screen and (min-width: 90px) {
  .lang-flag {
    display: none;
  }
}

@media screen and (min-width: 380px) {
  .lang-flag {
    display: none;
  }
}

/*media type 1 */
@media screen and (min-width: 530px) {
  .lang-flag {
    display: none;
  }
}

/*media type 2 */
@media screen and (min-width: 730px) {
  .lang-flag {
    display: none;
    margin: auto;

  }
}

/*media type 3 */
@media screen and (min-width: 974px) {
  .lang-flag {
    display: none;
  }
}

/*media type 4 */
@media screen and (min-width: 1324px) {
  .lang-flag {
    display: inline-block;
  }
}

/*media type 5 */
@media screen and (min-width: 1450px) {
  .lang-flag {
    display: inline-block;
  }
}

/*  PAYSAGE MOBILE   */
/**** Pour le mode PAYSAGE CSS Orientation ***/
/*** Paysage Landscape ****/