@import "fonts.css";

/* =========================================
||                                         ||
||              common.css                 ||
||                                         ||
||            PURE CSS RULES               ||
||                                         ||
|| Keep (most) rules in alphabetical order ||
||                                         ||
========================================== */

.__devnote { /* Dev only */
  color: red;
  border: red solid 4px;
  font-size: large;
}

:root {
  --width-bootstrap-sm: 576px;
  --width-bootstrap-md: 768px;
  --width-bootstrap-lg: 992px;
  --width-bootstrap-xl: 1200px;

  --app-zone-padding-x: 10%;
  --app-zone-padding-y: 4%;
  --card-max-width: 250px;
  --main-max-width: 1600px;

  --app-bgcolor-default: white;
  --app-color-default: #494f57;
  --app-color-black: black;
  --app-color-darkgray: #333333;
  --app-color-mediumgray: #909090;
  --app-color-red: red;
  --app-color-white: white;
  --app-color-violet: #583f99;

  /* Agency logo colors*/
  --app-color-gray: #494f57; /* Agency logo color GRIS */
  --app-color-green: #7ca180; /* Agency logo color VERT */
  --app-color-lightgray: #d7d2d1; /* Agency logo color MATIERE GRISE */
  --app-color-orange: #fcb72d; /* Agency logo color ORANGE */
  --app-color-mauve: #ab879c; /* Agency logo color MAUVE */
  --app-color-nightsky: #574098; /* Agency logo color CIEL DE NUIT */
  --app-color-pastel-gray: rgba(239,236,234,1);
  --app-color-pastel-green: #d1dbcc;
  --app-color-pastel-orange: #ffe4b9;
  --app-color-pastel-mauve: #dcd1d8;

  /* Emphasis vavmenu selected item by changing its color
   (--app-color-green: #7ca180) */
  --app-color-navmenu-item-selected: #7ca180;
  /* Fonts */
  --app-font-default: 'Marianne Regular';

  /* Form */
  --app-form-input-not-valid-bgcolor: red;
}

* {
  margin: 0 ;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Marianne Regular';
}
a, a:visited, a:hover {
    text-decoration: none;
    color: inherit;
}
body {
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.app-color-default {
  color: var(--app-color-default);
}
.app-color-gray {
  color: var(--app-color-gray);
}
.app-color-green {
  color: var(--app-color-green);
}
.app-color-inherit {
  color: inherit!important;
}
.app-color-lightgray {
  color: var(--app-color-lightgray);
}
.app-color-orange {
  color:var(--app-color-orange);
}
.app-color-pastel-gray {
  color: var(--app-color-pastel-gray);
}
.app-color-pastel-green {
  color: var(--app-color-pastel-green);
}
.app-color-pastel-orange {
  color: var(--app-color-pastel-orange);
}
.app-color-red {
  color: var(--app-color-red);
}
.app-color-night-sky {
  color: var(--app-color-nightsky);
}
.app-color-violet {
  color: var(--app-color-violet);
}
.app-color-white {
  color:var(--app-color-white);
}
.app-bgcolor-darkgray {
  background-color: var(--app-color-darkgray);
}
.app-bgcolor-default {
  background-color: var(--app-bgcolor-default);
}
.app-bgcolor-gray {
  background-color: var(--app-color-gray);
}
.app-bgcolor-green {
  background-color: var(--app-color-green);
}
.app-bgcolor-inherit {
  background-color: inherit!important;
}
.app-bgcolor-lightgray {
  background-color: var(--app-color-lightgray);
}
.app-bgcolor-night-sky {
    background-color: var(--app-color-nightsky);
}
.app-bgcolor-orange {
  background-color:var(--app-color-orange);
}
.app-bgcolor-pastel-gray {
  background-color: var(--app-color-pastel-gray);
}
.app-bgcolor-pastel-green {
  background-color: var(--app-color-pastel-green);
}
.app-bgcolor-pastel-orange {
  background-color: var(--app-color-pastel-orange);
}
.app-bgcolor-red {
  background-color: var(--app-color-red);
}
.app-bgcolor-violet {
  background-color: var(--app-color-violet);
}
.app-bgcolor-mauve {
  background-color: var(--app-color-mauve);
}
.app-bgcolor-white {
  background-color: var(--app-color-white);
}
.app-bgcolor-pastel-mauve {
  background-color: var(--app-color-pastel-mauve);
}
.app-font-bold {
  font-family: 'Marianne Bold'!important;
}
.app-font-bold2 {
  font-family: 'Marianne Bold2'!important;
}
.app-font-default {
  font-family: var(--app-font-default)!important;
}
.app-font-extrabold {
  font-family: 'Marianne ExtraBold'!important;
}
.app-font-light-italic {
  font-family: 'Marianne Light Italic'!important;
}
.app-font-medium-italic {
  font-family: 'Marianne Medium Italic'!important;
}
.app-font-regular-italic {
  font-family: 'Marianne Regular Italic'!important
}

.app-navmenu li {
    padding-bottom: 2.5em;
    padding-top: 2.5em;
    border-bottom: rgb(0,0,0,0) 2px solid; /* Transparent bottom border */
    margin-left: 1vw;
    margin-bottom: 2px;
}
.app-navmenu li.nav-item:hover::after {
  content: "\25b4";
  color: var(--app-color-green);
  text-align: center;
  bottom: -8px;
  left: calc(100% / 2.25);
  position: absolute;
}
.app-navmenu .nav-item {
  position: relative;
}
.navbar-dark .navbar-nav.app-color-gray .nav-link {
    color: var(--app-color-gray);
}
.app-navmenu li:hover, .app-navmenu li:active {
    border-bottom-color: var(--app-color-green);
}
.app-padding-x {
  /* Pages horizontal margin and width limits. */
  padding-left: 10%!important;
  padding-right: 10%!important;
  max-width: var(--main-max-width);
  margin: 0 auto;
}
.bg-entete {
  /* Full width strip for background-image and large title.
  (Bande pleine largeur avec titre sur image de fond)  */
    text-align: center;
    height: 300px;
    position: relative;
    overflow: hidden;
    box-sizing: content-box;
}
.bg-entete-img {
    position: absolute;
    width: 100%;
    /*top: -380px;*/
    filter: brightness(25%);
}
.bg-entete h1 {
    color: white;
    display: block;
    width: 100%;
    font-size: 3.8rem;
    /*padding-top: 115px; */
    align-self: center;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
}
#burger-navbar-list li.nav-item:hover {
  color: var(--app-color-green);
  text-decoration: overline;
}
#burger-navbar-list ul.nav {
  width: 35%;
  float: right;
}
.cursor-pointer {
  cursor: pointer;
}
footer {
    font-size: 80%!important;
  }
footer * {
  font-size: inherit!important;
}
footer .confidentiality-policy {
  font-style: italic;
  font-size: 80%!important;
  text-align: right;
}
footer #useful-links a:hover {
  color:var(--app-color-green)!important;
}
footer h6 {
  color: var(--app-color-mediumgray);
}
footer form#newsletter {
  font-size: inherit!important;
}
footer form#newsletter button#subscribe {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: inherit!important;
}
footer #institutional-sites a:hover {
  text-decoration: underline;
}
footer .code-by-container {  
  top: 1rem;
  right: 0rem;
  position: absolute;
}
footer .code-by {
  padding: .6em 2em;
  padding-right: 1.2em;
  background-image: 
    linear-gradient(to right, #333333, white 20%),
    linear-gradient(to bottom, #333333, white 20%, white 80%, #333333); 
  background-color: transparent;
  color: #333333;
  font-family: inherit;
  font-weight: 700; 
}
@media only screen and (max-width: 962px) {
  footer .code-by-container {
    position: relative;
    display: inline-block;
    height: 2em
  }
}
#rgpd {
  position: fixed;
  bottom: 0;
  left: 0;
 /* height: 150px;*/
  width: 100%;
  z-index: 1000;
  background-color: white; 
}
#rgpd .made-codephenix {
  text-align: center;
  padding: 1.2em 50px;
}
#rgpd .cookies {
  padding: 1em 50px;
}
#rgpd button {
  border: 2px solid var(--app-color-white);
  border-radius: 15px;
  color: var(--app-color-gray);
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  padding: 10px;
  text-align: center;
  text-decoration: none; 
  min-width: 150px;
  max-width: 180px;
  font-size: 0.8em;
}
@media (max-width: 991px) {
  #rgpd .made-codephenix {
    text-align: left;
  }
  #rgpd .cookies > div {
    margin-left: 0;
    margin-right: 0;
  }
  #rgpd button {
    max-width: unset
  }
}
.h-250px {
  height: 250px;
}
.image-box { /* Semantic class to be used by any tag wrapping an image */
  /* NOTHING (JUST SEMANTIC) */
}
.input-not-valid {
  background-color: var(--app-form-input-not-valid-bgcolor);
  opacity: 0.7;
}
.no-display {
  display: none;
}
.monochrome-filter { /** Special effect **/
  filter: brightness(0) saturate(100%) invert(10%) sepia(29%) saturate(2315%)
      hue-rotate(208deg) brightness(101%) contrast(98%);
}
.nav-up {
    position: relative;
    /*background-color: var(--app-color-gray);*/
    text-align: right;
}
.nav-up a:hover {
  text-decoration: underline;
}
.see-more {
  color: var(--app-color-default);
  border: dotted 1px;
}
.title {
  font-family: 'Marianne Bold'!important;
}
.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.title-container .underline-style {
    color: inherit;
    margin-bottom: 1.5em;
    margin-top: 1.8em;
    position: relative;
}
.title-container .underline-style::after {
    content: '';
    position: absolute;
    top: 120%;
    left: calc(50% - 65px);
    width: 130px;
    height: 6px;
    background-color: var(--app-color-orange);
}
h2.title {
  font-size: 1.5em!important;
}
h3.title {
  font-size: 1.2em!important;
}
h6.title {
  font-family: 'Marianne Bold';
}
.transparent {
  opacity: 0.5;
}
.w-100px {
  width:100px!important;
}
.title-hover:hover {
  text-decoration: underline
}


/*|==============================================|
  |                                              |
  |             RESPONSIVE BREAKPOINTS           |
  |                                              |
  |                                              |
  | USING BOOTSTRAP VALUES : 576, 768, 992, 1200 |
  |                                              |
  |==============================================| */



/*________________________________________________
  ________________________________________________ */




/*||==============================================||
  ||==============================================||
  ||                                              ||
  ||   HIDE / DISPLAY RULES UPON SCREEN SIZE      ||
  ||                                              ||
  ||                                              ||
  ||   PLEASE, NO CHANGES OR INSERTIONS HERE !!!  ||
  ||                                              ||
  ||==============================================||
  ||==============================================|| */


/*|==============================================|
  |                                              |
  |          HIDE ONLY OVER BREAKPOINTS          |
  |                                              |
  |==============================================| */

@media (min-width: 321px) {
  /* Extra-small hiding */
  .hide-xs {
    display: none!important;
  }
}
@media (min-width: 577px) {
  .hide-sm {
    display: none!important;
  }
}
@media (min-width: 769px) {
  .hide-md {
    display: none!important;
  }
}
@media (min-width: 993px) {
  .hide-lg {
    display: none!important;
  }
}
@media (min-width: 1201px) {
  .hide-xl {
    display: none!important;
  }
}

/*|==============================================|
  |                                              |
  |      DISPLAY ONLY BEYOND BREAKPOINTS         |
  |                                              |
  |==============================================| */

@media (max-width: 320px) {
  .display-xs { /* Display on extra-small and superior */
    display: none!important;
  }
}
@media (max-width: 575px) {
  .display-sm { /* Display on sm and superior */
    display: none!important;
  }
}
@media (max-width: 767px) {
  .display-md { /* Display only on md and superior */
    display: none!important;
  }
}
@media (max-width: 991px) {
  .display-lg { /* Display only on lg and superior */
    display: none!important;
  }
}
@media (max-width: 1199px) {
  .display-xl { /* Display only on xl and superior */
    display: none!important;
  }
}
/*|==============================================|
  |                                              |
  |            DISPLAY INTERVALS ONLY            |
  |                                              |
  |==============================================| */

@media  (max-width: 575px), (min-width: 1200px) {
  .display-sm-to-xl { /* Display interval */
    display: none!important;
  }
}
@media  (max-width: 767px), (min-width: 992px) {
  .display-sm-to-xl { /* Display interval */
    display: none!important;
  }
}

/*|==============================================|
  |                                              |
  |             FLEX DISPLAY ORDER               |
  |                                              |
  |==============================================| */

@media (min-width: 576px) {
  .sm-order-last {
    order: 1000;
  }
}

/* ==== END OF DO NOT MODIFY ==== */



/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
----------------- OVER 576 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 576px) {
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
----------------- OVER 768 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 768px) {
  footer {
    /*font-size: 80%!important;*/
  }
  #footer-container {
    padding-left: 0!important;
    padding-right: 0!important;
  }
  /* Footer's first and third columns must be kind of centered */
  footer .row #useful-links {
    padding-left: calc(0.9em + 7vw);
    padding-right: 0;
  }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
----------------- OVER 992 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 992px) {
  /* Footer's first and third columns must be kind of centered */
  footer .row #useful-links {
    padding-left: calc(0.5em + 4vw);;
    padding-right: 0;
  }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- OVER 1200 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 1200px) {
    /* Footer's first and third columns must be kind of centered */
  footer .row #useful-links {
    /*padding-left: 6%;*/
  }
}


/*-------------------------------------------------
-------------- SPECIAL BREAKPOINT --------------
---------------- OVER 3000 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 3000px) {
  .app-padding-x {
    padding-left: 5%!important;
    padding-right: 5%!important;
  }
}






/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- UNDER 1600 pixels -----------------
--------------------------------------------------- */
@media (max-width: 1600px) {
 /* footer {
    font-size: 80%!important;
  }*/
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- UNDER 992 pixels -----------------
--------------------------------------------------- */
@media (max-width: 992px) {
  /*footer {
    font-size: 80%!important;
  }*/
  /* No round corners when input is separated from submit button */
  footer form#newsletter #email {
    width: 100%;
    border-radius: 0;
  }
  footer form#newsletter button#subscribe {
    border-radius: 4px;
    margin-top: 0.5em;
    margin-left: 0!important;
    margin-right:0!important;
  }
  footer form#newsletter .input-group-append {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-top: .3em;
  }
}



/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- UNDER 768 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 767px) {
  footer .confidentiality-policy {
    text-align: center;
  }
  /* Also, center and shorten button */
  footer form#newsletter button#subscribe {
    /*width: 50%;*/
    width: auto;
    /*border-radius: 0px;*/
    margin: 0 auto;
  }
  .nav-up {
    padding-right: 1em!important;
  }
  .title-container {
        text-align: center;
  }
  .title-container .underline-style {
        margin-top: 1.6rem;
        margin-bottom: 1.6rem;
    }
}

@media only screen and (max-width: 1300px) {
  .bg-entete {
      height: 230px;
  }
}
/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------------ UNDER 700 px -------------------
--------------------------------------------------- */
@media only screen and (max-width: 699px) {
  .title-container h2 {
      font-size: 1.5em;
  }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------------ UNDER 576 px -------------------
--------------------------------------------------- */
@media only screen and (max-width: 575px) {
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------------ UNDER 450 px -------------------
--------------------------------------------------- */
@media only screen and (max-width: 450px) {
  .bg-entete h1 {
    font-size: 2.5rem;
  }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- UNDER 394 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 393px) {
  #footer-container {
    padding-left: 2em!important;
    padding-right: 2em!important;
  }
  header #burger-button {
    margin-left: auto;
    margin-right: 0;
  }
  .nav-up {
    font-size: small;
    padding-right: 1em !important;
  }
}





/* ----------------------------------------------------
------------------ RESPONSIVE BREAKPOINT --------------
---------------- BETWEEN 394 px AND 626 px  -----------
------------------------------------------------------- */
@media only screen and (min-width: 394px) and (max-width: 626px) {
}



/* ----------------------------------------------------
------------------ RESPONSIVE BREAKPOINT --------------
---------------  BETWEEN 576 px AND 767 px ------------
------------------------------------------------------- */
@media only screen and (min-width: 576px) and (max-width: 767px) {
}


/* ----------------------------------------------------
------------------ RESPONSIVE BREAKPOINT --------------
---------------  BETWEEN 768 px AND 991 px ------------
------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}


/* ----------------------------------------------------
------------------ RESPONSIVE BREAKPOINT --------------
--------------  BETWEEN 992 px AND 1199 px ------------
------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}