/******************************************************************************************/
/***** Polices ***************************************************************************/
/****************************************************************************************/
@font-face {
   font-family: 'Forte';
   /* IE9 Compat Modes */
   src: url('../assets/font/Forte.eot');
   /* IE6-IE8 */
   src: url('../assets/font/Forte.eot?#iefix') format('embedded-opentype'),
      /* Super Modern Browsers */
      url('../assets/font/Forte.woff2') format('woff2'),
      /* Pretty Modern Browsers */
      url('../assets/font/Forte.woff') format('woff'),
      /* Safari, Android, iOS */
      url('../assets/font/Forte.ttf') format('truetype'),
      /* Legacy iOS */
      url('../assets/font/Forte.svg#svgFontName') format('svg');
}



/******************************************************************************************/
/***** Variables *************************************************************************/
/****************************************************************************************/
:root {
   /***** hauteur header ****************************************************************/
   --big-header-height: 198px;
   --small-header-height: 72px;
   --header-height: var(--big-header-height);

   /***** largeur max *******************************************************************/
   --outer-width: 100vw;

   /*background normal*/
   --theme-background-color: #fff;
   /*background inversé*/
   --theme-background-color-r: #232327;
   /*texte normal*/
   --theme-text-color: #232327;
   /*texte inversé*/
   --theme-text-color-r: #fff;
   /* Couleur d'accentuation */
   --theme-main-color: #f49b03;
   /* Couleur autour des sections */
   --around-section-color: #044c7b80;
   --around-section-color-transp: #044c7b00;
   /* Couleur des sections */
   --section-color: #fff9eef2;
   /* Couleur des sous-sections */
   --sub-section-color: #fff9ee;

   --gray-color: #232327;
   --white-color: #fff;
   --transparent-black-color: #0006;
   --red-color: #ff6f6f;
   --light-black-color: #131313;
   --success-color: #59e976;
   --success-color-border: #49bc60;
   --warning-color: #dc3545;
   --warning-color-border: #ae2b37;
}



/******************************************************************************************/
/***** Propriétés générales **************************************************************/
/****************************************************************************************/
html {
   overflow: scroll;
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--small-header-height) + 1.5rem);
}

body {
   margin: 0;
   font-family: "Segoe UI", "sans-serif";
}

#background {
   background: url('../assets/img/background.webp') top center no-repeat;
   background-size: cover;
   position: fixed;
   width: 100vw;
   height: 100vh;
}

#page-content {
   position: relative;
}

p {
   word-wrap: anywhere;
}

a {
   text-decoration: none;
}



/******************************************************************************************/
/***** Classes générales *****************************************************************/
/****************************************************************************************/

/* Boites */
.display-none {
   display: none !important;
}

.flex {
   display: flex;
}

.flex-centerV {
   display: flex;
   justify-content: center;
}

.flex-centerH {
   display: flex;
   align-items: center;
}

.width {
   width: var(--inner-width);
}

/* Actions */
.pause-animation {
   animation-play-state: paused !important;
}

/* Curseur */
.cursor-default {
   cursor: default;
}



/******************************************************************************************/
/***** Scroll bar ************************************************************************/
/****************************************************************************************/
/* Firefox */
* {
   scrollbar-width: thin;
   scrollbar-color: var(--theme-main-color) #f5f5f5;
}

/* Chrome */
*::-webkit-scrollbar {
   height: 0.3rem;
   width: 0.5rem;
}

*::-webkit-scrollbar-thumb {
   background-color: var(--theme-main-color);
   border-radius: 0.2rem;
   border: 0px solid #f5f5f5;
}



/******************************************************************************************/
/***** Diaporama de fond *****************************************************************/
/****************************************************************************************/
/* .diapo {
   position: fixed;
   background-position: top center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   height: 100vh;
   width: 100vw;
}

.diapo-1 {
   background-image: url('../assets/pics/diapo/diapo1.webp');
}

.diapo-2 {
   background-image: url('../assets/pics/diapo/diapo1.webp');
}

.diapo-3 {
   background-image: url('../assets/pics/diapo/diapo1.webp');
}

.fade-out {
   animation: fadeOut 2s;
   animation-delay: 13s;
   animation-fill-mode: forwards;
}

@keyframes fadeOut {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@-ms-keyframes fadeOut {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@-o-keyframes fadeOut {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@-webkit-keyframes fadeOut {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@-moz-keyframes fadeOut {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
} */



/******************************************************************************************/
/***** Boutons de contrôle ***************************************************************/
/****************************************************************************************/
/* Bouton "pause" animation du header */
#pause-header-anim {
   position: fixed;
   top: 0;
   right: 0;
   z-index: 4;
}

#pause-header-anim svg {
   height: 1.5rem;
   width: 1.5rem;
   color: var(--white-color);
}

#pause-header-anim:hover svg {
   color: var(--theme-main-color);
}

/* Bouton "remonter tout en haut" */
#scrollUp a {
   position: fixed;
   height: 2rem;
   width: 2rem;
   bottom: 1rem;
   right: 1rem;
   z-index: 1;
   border-radius: 2rem;
}

#scrollUp svg {
   height: 2.2rem;
   width: 2.2em;
   color: var(--theme-main-color);
}

#scrollUp:hover svg {
   color: var(--theme-background-color-r);
}

/* Croix de fermeture fenêtre */
/* .close-button {
   position: absolute;
   top: 0.7rem;
   right: 0.7rem;
   color: var(--theme-text-color);
}

.close-button:hover {
   color: var(--theme-main-color);
} */



/******************************************************************************************/
/***** Header ****************************************************************************/
/****************************************************************************************/
header {
   position: fixed;
   top: 0;
   left: 0;
}

/* Ombres header */
.header-shadow-1 {
   -webkit-box-shadow: 0px 3px 10px var(--theme-background-color-r);
   -moz-box-shadow: 0px 3px 10px var(--theme-background-color-r);
   box-shadow: 0px 3px 10px var(--theme-background-color-r);
}

.header-shadow-2 {
   position: fixed;
   top: var(--small-header-height);
   height: 2px;
   background-image: linear-gradient(to right, #a9a9a9, #fff, #a9a9a9);
   width: 100%;
   -webkit-box-shadow: 0px 10px 15px var(--theme-background-color-r);
   -moz-box-shadow: 0px 10px 15px var(--theme-background-color-r);
   box-shadow: 0px 10px 15px var(--theme-background-color-r);
}

/* Compensation de la hauteur du header positionné en absolute (permet l'effet de transparence avec Mask) */
#header {
   display: flex;
   height: var(--big-header-height);
}

/***** Image header (animation ou statique) *********************************************/
#nav-animation {
   width: 100vw;
   height: var(--header-height);
   overflow: hidden;
}

#nav-animation .header-img {
   position: absolute;
   top: 0;
   right: 0;
   height: var(--header-height);
   width: 100%;
   overflow: hidden;
}

#nav-animation #img-animation {
   width: 200%;
   -webkit-animation: moveSlideshow var(--hearder-img-anim-duration) linear infinite alternate;
   animation: moveSlideshow var(--hearder-img-anim-duration) linear infinite alternate;
}

@-webkit-keyframes moveSlideshow {
   100% {
      -webkit-transform: translateX(50%);
      transform: translateX(50%);
   }
}

@keyframes moveSlideshow {
   100% {
      -webkit-transform: translateX(50%);
      transform: translateX(50%);
   }
}

.headerAnimationMask {
   mask-image: linear-gradient(to bottom, rgb(0, 0, 0), #0000);
   -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0), #0000);
}

/***** Logo + sous-titre ****************************************************************/
#navigation #nav-logo {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
   color: var(--theme-main-color);
   font-family: consolas;
   font-weight: bolder;
   font-size: 1.3rem;
}

#navigation #nav-logo #subtitle {
   cursor: default;
}

/***** Menu navvigation *****************************************************************/
#navigation {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
}

/* Ensemble des liens du menu */
#navigation #nav-link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: var(--inner-width);
   margin: 0 1rem;
}

/***** Lien menu navigation *************************************************************/
/* Liens + marqueur positionnement */
#navigation .nav-item {
   display: flex;
   flex-direction: column;
   min-width: max-content;
   text-align: center;
   padding: 0 1.5vw 0 1.5vw;
}

/* Liens */
#navigation .nav-item span a {
   display: flex;
   font-weight: 600;
   color: var(--theme-text-color-r);
   text-shadow: 1px 1px 2px var(--theme-text-color);
}

#navigation .nav-item span a:hover {
   color: var(--theme-main-color);
   text-shadow: 1px 1px 2px var(--theme-text-color);
}

/* Marqueur positionnement */
#navigation .nav-item #item-selected svg {
   color: var(--theme-text-color-r);
}

/***** Animation du marqueur de positionnement dans le menu *****************************/
.anim-unset-marker-down {
   -webkit-animation: marker-down 0.5s ease-in both;
   animation: marker-down 0.5s ease-in both;
}

@-webkit-keyframes marker-down {
   0% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   100% {
      -webkit-transform: scale(0);
      transform: scale(0);
   }
}

@keyframes marker-down {
   0% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   100% {
      -webkit-transform: scale(0);
      transform: scale(0);
   }
}

.anim-unset-marker-up {
   -webkit-animation: marker-up 0.5s ease-out both;
   animation: marker-up 0.5s ease-out both;
}

@-webkit-keyframes marker-up {
   0% {
      -webkit-transform: scale(0) translateY(0);
      transform: scale(0) translateY(0);
   }

   25% {
      -webkit-transform: scale(1.5) translateY(-0.8rem);
      transform: scale(1.5) translateY(-0.8rem);
   }

   50% {
      -webkit-transform: scale(1) translateY(0);
      transform: scale(1) translateY(0);
   }

   66% {
      -webkit-transform: scale(1.2) translateY(-0.35rem);
      transform: scale(1.2) translateY(-0.35rem);
   }

   100% {
      -webkit-transform: scale(1) translateY(0);
      transform: scale(1) translateY(0);
   }
}

@keyframes marker-up {
   0% {
      -webkit-transform: scale(0) translateY(0);
      transform: scale(0) translateY(0);
   }

   25% {
      -webkit-transform: scale(1.5) translateY(-0.8rem);
      transform: scale(1.5) translateY(-0.8rem);
   }

   50% {
      -webkit-transform: scale(1) translateY(0);
      transform: scale(1) translateY(0);
   }

   66% {
      -webkit-transform: scale(1.2) translateY(-0.35rem);
      transform: scale(1.2) translateY(-0.35rem);
   }

   100% {
      -webkit-transform: scale(1) translateY(0);
      transform: scale(1) translateY(0);
   }
}



/******************************************************************************************/
/***** Label RGE Quali PV ****************************************************************/
/****************************************************************************************/
#rgeQualiPv {
   display: flex;
   justify-content: center;
   margin: 2rem auto 7rem auto;
   width: 100%;
}



/******************************************************************************************/
/***** Sections **************************************************************************/
/****************************************************************************************/
.sections h1 {
   margin: 0;
   color: var(--theme-text-color-r);
   text-align: center;
   text-shadow: 3px 3px 4px var(--theme-text-color);
}

.sections>h1,
.sections>p {
   color: var(--theme-text-color);
}

/* .anim-section-title {
   animation-name: zoomSection;
   animation-duration: 0.5s;
   animation-delay: 0.4s;
}

@-webkit-keyframes zoomSection {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.025);
   }

   100% {
      transform: scale(1);
   }
}

@keyframes zoomSection {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.025);
   }

   100% {
      transform: scale(1);
   }
} */



/******************************************************************************************/
/***** Article ***************************************************************************/
/****************************************************************************************/
.article {
   background-color: var(--around-section-color);
   color: var(--theme-text-color);
   text-align: justify;
   border-radius: 0.5rem;
   padding: 2.5rem 2rem 6rem 2rem;
}

.firstArticle {
   padding-top: 0 !important;
   background: linear-gradient(var(--around-section-color-transp), var(--around-section-color));
}

.lastArticle {
   background: linear-gradient(var(--around-section-color), var(--around-section-color-transp));
}

.section-content {
   margin-top: 2.5rem;
   padding: 1rem 2rem 3rem 2rem;
   background-color: var(--section-color);
   border-radius: 0.3rem;
}

.section-content h2 {
   color: var(--theme-text-color);
   text-shadow: 1px 1px 2px var(--theme-text-color-r);
}

.sub-section {
   padding: 2rem;
   margin: 0.2rem;
   border-radius: 0.3rem;
   font-size: 1.1rem;
}

.sub-section,
.section-group-unit {
   background-color: var(--sub-section-color);
}

.section-main-title {
   margin: 1.6rem 0 1.6rem 1rem;
   font-weight: 600;
}

.section-group {
   display: flex;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
}

.section-group .section-group-unit {
   margin: 0.2rem;
   min-width: 33%;
   max-width: 100%;
   flex-grow: 1;
   word-break: break-word;
   padding: 1% 3%;
   border-radius: 0.3rem;
   font-size: 1.1rem;
}

.section-group .section-group-unit p {
   margin: 0.6rem;
}

.section-group .section-group-unit svg {
   min-height: 1.2rem;
   min-width: 1.2rem;
   color: var(--theme-main-color);
   margin-right: 0.5rem;
}


/******************************************************************************************/
/***** Prestation ************************************************************************/
/****************************************************************************************/
#questionIntro {
   margin: 0.5rem 0 2rem 0;
}

.cursiveStyle {
   font-family: "Forte", "Segoe UI", "sans-serif";
   font-size: 1.6rem;
}



/******************************************************************************************/
/***** A propos **************************************************************************/
/****************************************************************************************/
#about-us h1 {
   margin-bottom: 0.9rem;
}

.article .sub-section .plusInfosTitre {
   text-decoration: underline;
   margin: 0 0 2rem 0;
}

.article .sub-section .plusInfosLiens {
   margin-left: 1rem;
}

.article .sub-section .plusInfosLogo {
   width: 10rem;
}



/******************************************************************************************/
/***** Contact ***************************************************************************/
/****************************************************************************************/

/***** Formulaire de contact ************************************************************/
#contact .form-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   border-radius: 0.3rem;
}

#contact .form-item,
#contact button {
   margin: 0.7%;
}

#contact .form-item span {
   background-color: var(--gray-color);
   margin: 0;
}

#contact .form-item .form-icon {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 1.5rem;
}

#contact .form-item svg {
   height: 1.2rem;
   width: 1.2rem;
   color: var(--theme-main-color);
}

#contact .form-item .form-input,
#contact button {
   height: 2rem;
   padding: 0.3rem 0.5rem;
}

#contact .form-item .form-textarea {
   height: 10rem;
   padding: 0.3rem 0.5rem;
}

#contact .form-item input,
#contact .form-item textarea {
   width: 100%;
   border: 0;
}

#contact .form-item input {
   font-size: 1rem;
}

#contact .form-item textarea {
   margin: 0;
   font-size: 1rem;
}

#contact button {
   border-radius: 0.2rem;
   font-size: 1rem;
   margin-bottom: 1rem;
}

#contact .buttonBlocked,
#contact .buttonBlocked:hover {
   background-color: lightgray;
   color: gray;
}

#contact .buttonReady {
   background-color: var(--theme-main-color);
   color: var(--gray-color);
   opacity: 1;
   cursor: pointer;
}

#contact .buttonReady:hover {
   background-color: var(--success-color);
   color: var(--theme-text-color);
}

#contact .star {
   color: var(--red-color);
   margin: 0.2rem !important;
}

#contact .star-color {
   color: var(--red-color);
   font-weight: bold;
}

#contact-form #formRequiredFields {
   display: flex;
   justify-content: flex-end;
   margin: 0 0.7%;
   height: 0.9rem;
   font-size: 0.8rem;
}

#contact-form #formRequiredFields span {
   margin: 0;
}

.zoomColorText {
   animation-name: zoomColorText;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}

@-webkit-keyframes zoomColorText {
   0% {
      color: var(--theme-text-color);
      font-size : 0.8rem;
   }

   100% {
      color: red;
      font-size : 0.9rem;
   }
}

@keyframes zoomColorText {
   0% {
      color: var(--theme-text-color);
      font-size : 0.8rem;
   }

   100% {
      color: red;
      font-size : 0.9rem;
   }
}

#contact .star-color {
   color: var(--red-color);
}

#contact-form #checkForm {
   margin: 0 0.7% 1rem 0.7%;
   max-width: 50%;
}

#contact-form #checkFormBackground {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   background-color: var(--sub-section-color);
   border-radius: 0.3rem;
   padding: 0.5rem 0.75rem 0.6rem 0.5rem;
}

#contact-form #checkForm .checkbox {
   margin-right: 0.8rem;
}

#contact-form #checkFormText {
   font-size: 0.9rem;
   margin: 0;
}

#contact-form .warning {
   padding: 0.3rem 0;
   color: var(--warning-color);
   font-size: 1.2rem;
}

#contact-form .success {
   padding: 0.3rem 0;
   color: var(--success-color);
   font-size: 1.2rem;
}





/******************************************************************************************/
/***** Message validation ****************************************************************/
/****************************************************************************************/
#onScreenContent {
   position: fixed;
   top: 0;
   z-index: 1;
   width: 100vw;
   height: 100vh;
   display: none;
   justify-content: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.7);
}

#onScreenContent .messageBox {
   width: fit-content;
   height: fit-content;
   background-color: var(--sub-section-color);
   border-radius: 0.5rem;
}

#onScreenContent .message {
   width: fit-content;
   height: fit-content;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 4vw;
}

#onScreenContent #messageSent,
#onScreenContent #messageNotSent {
   display: none;
}

#onScreenContent .sendArrowUp {
   width: 15%;
   height: 15%;
   color: #59e976;
}

#onScreenContent p {
   margin: 2rem;
}

#onScreenContent button {
   padding: 0.3rem 1rem;
   background-color: #dddcd9;
   border: 0.15rem solid #b3b2af;
   border-radius: 0.2rem;
   font-size: 0.9rem;
}

#onScreenContent #messageSent button:hover {
   background-color: var(--success-color);
   border: 0.15rem solid var(--success-color-border);
}

#onScreenContent button {
   cursor: pointer;
}

#onScreenContent .sendArrowCross {
   width: 15%;
   height: 15%;
   color: var(--warning-color);
}

#onScreenContent #messageNotSent button:hover {
   background-color: var(--warning-color);
   border: 0.15rem solid var(--warning-color-border);
}



/******************************************************************************************/
/***** Footer ****************************************************************************/
/****************************************************************************************/
footer {
   position: relative;
   margin-top: 12rem;
}

footer div {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 3rem;
   background-color: var(--light-black-color);
}

footer span {
   display: flex;
   width: 100%;
   height: 1px;
   background-image: var(--theme-gradient-color);
}

footer p {
   margin: 0;
   font-size: 0.9rem;
   color: var(--white-color)
}



/******************************************************************************************/
/***** Bandeau d'alerte utilisation cookies **********************************************/
/****************************************************************************************/
#cookie-alert {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   position: fixed;
   z-index: 4;
   min-height: 5rem;
   background: var(--theme-gradient-color);
   color: var(--white-color);
   font-size: 0.8rem;
   font-weight: 600;
   border-radius: 3rem;
   padding: 0rem 2rem;
   -webkit-animation: slideCookieAlert 0.75s linear both;
   animation: slideCookieAlert 0.75s linear both;
}

@-webkit-keyframes slideCookieAlert {
   0% {
      bottom: -10%;
   }

   100% {
      bottom: 0;
   }
}

@keyframes slideCookieAlert {
   0% {
      bottom: -10%;
   }

   100% {
      bottom: 0;
   }
}

#cookie-alert>div {
   display: flex;
   justify-content: center;
   flex-direction: row;
}

#cookie-alert p {
   display: flex;
   align-items: center;
}

#cookie-alert svg {
   height: 2.2rem;
   width: 2.2rem;
   padding: 0.4rem;
   border: 0;
   border-radius: 0.2rem;
   color: var(--white-color);
}

#cookie-alert .button-green svg:hover {
   color: #51ff9a;
}

#cookie-alert .button-red svg:hover {
   color: #ff5151;
}

@media only screen and (max-width: 936px) {
   #cookie-alert p {
      margin: 1rem 1rem 0 1rem;
   }
}

@media only screen and (min-width: 937px) {
   #cookie-alert p {
      margin-right: 1rem;
   }
}



/******************************************************************************************/
/***** @Media query HEIGHT ***************************************************************/
/****************************************************************************************/

/***** Petit header *********************************************************************/
@media only screen and (min-height: 100px) and (max-height: 1280px) {
   :root {
      /* hauteur header */
      --big-header-height: 90px;
      --small-header-height: 40px;
   }

   /* Image header (animation ou statique) */
   .headerBackground {
      background: url('../assets/img/nav_s.webp') top center repeat;
   }

   /* Navigation header */
   #navigation {
      padding-top: 1.1rem;
   }

   #navigation #nav-logo .logo-small {
      width: 4rem !important;
      margin-top: 0.3rem;
   }

   #navigation #nav-logo .logo-big {
      width: 5rem;
   }

   #navigation #nav-logo #subtitle {
      font-size: 0.8rem;
   }

   /* Icône "Home" */
   #navigation .nav-item svg {
      height: 0.9rem;
      width: 0.9rem;
   }

   /* Liens */
   #navigation .nav-item span a {
      padding: 0.6rem 0 0 0;
      font-size: 1rem;
   }

   .navigation-small {
      height: var(--header-height);
      padding-top: 0 !important;
   }

   .links-small {
      font-size: 1rem !important;
      font-weight: 500 !important;
      padding: 1.3rem 0 0 0 !important;
   }

   #navigation .nav-item .links-small>svg {
      height: 1.2rem;
      width: 1.2rem;
   }

   #navigation #item-selected {
      position: relative;
      top: -0.25rem;
   }

   .anim-unset-marker-up {
      -webkit-animation: marker-up-small 0.4s ease-out both;
      animation: marker-up-small 0.4s ease-out both;
   }

   @-webkit-keyframes marker-up-small {
      0% {
         -webkit-transform: scale(0) translateY(0);
         transform: scale(0) translateY(0);
      }

      25% {
         -webkit-transform: scale(1.5) translateY(-0.4rem);
         transform: scale(1.5) translateY(-0.4rem);
      }

      50% {
         -webkit-transform: scale(1) translateY(0);
         transform: scale(1) translateY(0);
      }

      66% {
         -webkit-transform: scale(1.2) translateY(-0.175rem);
         transform: scale(1.2) translateY(-0.175rem);
      }

      100% {
         -webkit-transform: scale(1) translateY(0);
         transform: scale(1) translateY(0);
      }
   }

   @keyframes marker-up-small {
      0% {
         -webkit-transform: scale(0) translateY(0);
         transform: scale(0) translateY(0);
      }

      25% {
         -webkit-transform: scale(1.5) translateY(-0.4rem);
         transform: scale(1.5) translateY(-0.4rem);
      }

      50% {
         -webkit-transform: scale(1) translateY(0);
         transform: scale(1) translateY(0);
      }

      66% {
         -webkit-transform: scale(1.2) translateY(-0.175rem);
         transform: scale(1.2) translateY(-0.175rem);
      }

      100% {
         -webkit-transform: scale(1) translateY(0);
         transform: scale(1) translateY(0);
      }
   }
}

/***** Grand header *********************************************************************/
@media only screen and (min-height: 1281px) {
   :root {
      /* hauteur header */
      --big-header-height: 198px;
      --small-header-height: 72px;
   }

   /* Image header (animation ou statique) */
   .headerBackground {
      background: url('../assets/img/nav_l.webp') top center repeat;
   }

   /* Navigation header */
   #navigation {
      padding-top: 2.3rem;
   }

   #navigation #nav-logo .logo-big {
      width: 10rem;
   }

   #navigation #nav-logo .logo-small {
      width: 7rem !important;
      margin-top: 0.5rem;
   }

   /* Icône "Home" */
   #navigation .nav-item svg {
      height: 1.4rem;
      width: 1.4rem;
   }

   /* Liens */
   #navigation .nav-item span a {
      padding: 2rem 0 0.5rem 0;
      font-size: 1.4rem;
   }

   .navigation-small {
      height: var(--header-height);
      padding-top: 0 !important;
   }


   .links-small {
      font-size: 1.3rem !important;
      font-weight: 500 !important;
      padding: 2.1rem 0 0.4rem 0 !important;
   }

   #navigation .nav-item .links-small>svg {
      height: 1.3rem;
      width: 1.3rem;
   }
}



/******************************************************************************************/
/***** @Media query WIDTH ****************************************************************/
/****************************************************************************************/

/***** Largeur contenu + h1 *************************************************************/
@media only screen and (min-width: 1px) and (max-width: 496px) {
   :root {
      --inner-width: 100vw;
      --hearder-img-anim-duration: 43s;
   }

   .sections {
      margin: 0rem auto 4rem auto;
   }

   .article h1 {
      font-size: 1.4rem;
   }
}

@media only screen and (min-width: 497px) and (max-width: 720px) {
   :root {
      --inner-width: 100vw;
      --hearder-img-anim-duration: 48s;
   }

   .sections {
      margin: 0rem auto 4rem auto;
   }

   .article h1 {
      font-size: 1.5rem;
   }
}

@media only screen and (min-width: 721px) and (max-width: 1023px) {
   :root {
      --inner-width: 95vw;
      --hearder-img-anim-duration: 53s;
   }

   .sections {
      margin: 0rem auto 5rem auto;
   }

   .article h1 {
      font-size: 1.65rem;
   }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
   :root {
      --inner-width: 90vw;
      --hearder-img-anim-duration: 59s;
   }

   .sections {
      margin: 0rem auto 6rem auto;
   }

   .article h1 {
      font-size: 1.8rem;
   }
}

@media only screen and (min-width: 1280px) and (max-width: 1599px) {
   :root {
      --inner-width: 80vw;
      --hearder-img-anim-duration: 66s;
   }

   .sections {
      margin: 0rem auto 7rem auto;
   }

   .article h1 {
      font-size: 1.9rem;
   }

}

@media only screen and (min-width: 1600px) and (max-width: 1919px) {
   :root {
      --inner-width: 75vw;
      --hearder-img-anim-duration: 73s;
   }

   .sections {
      margin: 0rem auto 8rem auto;
   }

   .article h1 {
      font-size: 2rem;
   }
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
   :root {
      --inner-width: 65vw;
      --hearder-img-anim-duration: 81s;
   }

   .sections {
      margin: 0rem auto 9rem auto;
   }

   .article h1 {
      font-size: 2.1rem;
   }
}

@media only screen and (min-width: 2560px) and (max-width: 3839px) {
   :root {
      --inner-width: 60vw;
      --hearder-img-anim-duration: 90s;
   }

   .sections {
      margin: 0rem auto 10rem auto;
   }

   .article h1 {
      font-size: 2.1rem;
   }
}

@media only screen and (min-width: 3840px) {
   :root {
      --inner-width: 55vw;
      --hearder-img-anim-duration: 99s;
   }

   .sections {
      margin: 0rem auto 11rem auto;
   }

   .article h1 {
      font-size: 2.1rem;
   }
}

/***** Menu compact *********************************************************************/
@media only screen and (max-width: 600px) {

   #nav-items {
      display: none;
   }

   #nav-compact {
      display: flex;
   }

   #nav-compact svg {
      color: var(--theme-text-color-r);
   }

   .navigation-big #nav-compact svg {
      height: 2.5rem;
      width: 2.5rem;
   }

   .navigation-small #nav-compact svg {
      height: 2.2rem;
      width: 2.2rem;
   }

   #menu-compact {
      position: fixed;
      left: 0;
      height: max-content;
      width: 100vw;
      justify-content: space-evenly;
      padding: 0.1rem 0 0.15rem 0;
      background-color: var(--theme-background-color);
      box-shadow: 0px 0px 10px var(--theme-text-color);
      border-top: 1px solid var(--theme-text-color);
      border-bottom: 1px solid var(--theme-text-color);
   }

   #menu-compact span {
      color: var(--theme-text-color);
   }

   #menu-compact a {
      color: var(--theme-text-color);
      font-size: 1rem;
      font-weight: 600;
   }

   #menu-compact a:hover {
      color: var(--theme-main-color);
   }

   /* Si petit menu (smartphone) */
   #pause-header-anim {
      display: none;
   }

   #contact-form .form-item span {
      width: 1rem !important;
   }

   #contact .form-item input,
   #contact .form-item textarea,
   #contact button {
      font-size: 0.8rem;
   }

   #contact-form #checkForm {
      max-width: 100%;
      margin: 1rem 0.7%;
   }

   #contact-form #checkFormBackground {
      padding-right: 1rem;
   }

   #contact-form #checkFormText {
      font-size: 0.8rem;
   }

   footer {
      margin-top: 7rem;
   }
}

@media only screen and (min-width: 601px) {
   #nav-items {
      display: flex;
   }

   #nav-compact {
      display: none;
   }
}



/******************************************************************************************/
/***** @Media query orientation **********************************************************/
/****************************************************************************************/

/***** Règles globales ******************************************************************/
@media only screen and (orientation:portrait) and (max-width: 1079px),
(orientation:landscape) and (max-height: 1079px) {

   #pause-header-anim svg {
      height: 1.1rem;
      width: 1.1rem;
   }

   .article {
      padding: 1rem 1rem 2rem 1rem;
   }

   .article p,
   .article span {
      font-size: 0.9rem;
      margin: 0.5rem 0;
   }

   .article .section-content {
      margin-top: 1.1rem;
      padding: 0.5rem 0.15rem 0.75rem 0.15rem;
   }

   .article .sub-section {
      padding: 1rem 1.2rem 1.5rem 1.2rem;
   }

   .article .section-main-title,
   .article .about-title {
      margin: 0.66rem 0 0.8rem 1rem;
      font-size: 1.1rem;
   }

   .article .sub-section #questionIntro {
      margin: 0.5rem 0 0.8rem 0;
   }

   .article .cursiveStyle {
      font-size: 1.2rem;
   }

   .article .sub-section .plusInfosTitre {
      margin-bottom: 1rem;
   }

   .article .sub-section .plusInfosLogo {
      width: 8rem;
   }

   footer div {
      height: 1.6rem;
   }

   footer p {
      font-size: 0.7rem;
   }
}

/***** Eléments centrés en portrait *****************************************************/
@media only screen and (orientation:portrait) and (max-width: 1079px) {

   /* centrage des h2 des articles */
   .article .section-main-title,
   .article .about-title {
      text-align: center;
      margin-left: 0 !important;
   }

   /* centrage des images des liens */
   .article .sub-section .plusInfosLiens {
      display: flex;
      justify-content: center;
      margin-left: 0 !important;
   }
}

/***** Tablette en portrait *************************************************************/
@media only screen and (orientation:portrait) and (min-width: 601px) {

   /* Augmentation de la marge du footer pour déclencher le marqueur de sélection du dernier onglet du menu de navigation (pas compact) */
   footer {
      margin-top: 30rem;
   }
}

/***** Taille logo RGE Quali'PV *********************************************************/
@media only screen and (orientation:portrait) and (max-height: 1079px) {

   #rgeQualiPv {
      margin: 1.4rem auto 2.6rem auto;
   }

   #rgeQualiPv img {
      height: 12vh;
   }
}

@media only screen and (orientation:portrait) and (min-height: 1080px) {

   #rgeQualiPv {
      margin: 1.4rem auto 2.6rem auto;
   }

   #rgeQualiPv img {
      height: 11vh;
   }
}

@media only screen and (orientation:landscape) and (max-width: 1079px) {

   #rgeQualiPv {
      margin: 1.4rem auto 2.6rem auto;
   }

   #rgeQualiPv img {
      height: 25vh;
   }
}

@media only screen and (orientation:landscape) and (min-width: 1080px) {

   #rgeQualiPv {
      margin: 1.4rem auto 2.6rem auto;
   }

   #rgeQualiPv img {
      height: 15vh;
   }
}