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

body {
  box-sizing: border-box;
}

/*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: Ubuntu-Regular;
  src: url("../fonts/Lato-Black.ttf");
}

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

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

@font-face {
  font-family: Ubuntu-Regular;
  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*/

header {
  position: fixed;
  top: 0px;
  vertical-align: middle;
  background-color: rgba(0, 0, 0, 0.56);
  width: 100%;
  /*border-bottom: 1px solid rgb(225, 223, 223);*/
}

/** a terminer CSS Footer 100%   **/
/*classeur relatif au Pied de page fixe */
footer {
  position: fixed;
  box-sizing: content-box;
  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 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  /*groupé pour un meilleur visu**/

}

footer a {
  padding: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*fin a terminer*/

/*ATTENTION mettre de l'ordre dans mes feuille de style des COM svp */
p img {
  vertical-align: middle;
  /*pour centrer verticalement l'image Newsletter*/
}

img {
  vertical-align: middle;
}

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

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

}

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

img {
  border-radius: 10px;
}

.span {
  display: inline-block;
}

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

.underline {
  text-decoration: underline;
}

.logo {
  /* par rapport au logo dans le menu du haut NAV **/
  padding: 0px;
  margin: 8px;
  width: 85px;
  height: 40px;
}

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

.right-nav {
  float: left;
  margin-top: 27px;
  display: inline-flex;
  background-color: transparent;

  /*margin-top: 2px;   non a ne pas faire cool T.L. 2023*/
}

/*css du menu design */
header::after {
  content: "";
  display: table;
  clear: both;
}

nav {
  float: left;
}

nav ul {
  margin-left: auto;
  list-style: none;
}

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

nav a {
  color: whitesmoke;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
}

nav a:hover {
  color: rgb(122, 127, 140);
}

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

nav a:hover::before {
  width: 100%;
}


li a {
  /* en rapport avec le texte du menu générale */
  /*T.L. car  default */
  /* en rapport avec le menu de droite*/
  list-style: none;
  font-size: medium;
  font-family: "arial black", georgian, verdana, sans-serif;
  font-weight: bolder;
  color: whitesmoke;
}

ul li img {
  /*pport avec le menu de droite */
  display: block;
  list-style: none;
  position: inherit;
}

/*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;
  margin: 0;
  padding: 0;
}

p .liensno a {
  text-decoration: none;
  font-weight: normal;
  color: whitesmoke;
  margin-left: 0px;
}

/*photo moyenne de présentation à gauche left photo */
.imagette-img {
  width: 180px;
  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.8);
  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;
    padding: auto;
  }
}

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

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

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

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