/*!
* 100% = 1 em ~= 1.6rem ~= 14pt
*
* background color
*
* border color
*
* textes : 
* #c14420 : body, link
* #004d4e; : background, ligne footer...
*
* Syntaxes
*
* linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
* first value : default = top to bottom
* <color-stop> :  <color> [ <percentage> | <longueur> ]
*  example shows a linear gradient that starts from the left and goes to the right :
*  background-image: linear-gradient(to right, #xxxxxx, #yyyyyy);
*
* transition: <property> <duration> <timing-function> <delay>;
* transition-property: none|all|property|initial|inherit; default: all
* transition-duration: time|initial|inherit; Specifies how many seconds or milliseconds a transition effect takes to complete; default: 0s
* transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit; default: ease
* transition-delay: time|initial|inherit; Specifies a delay (in seconds) for the transition effect; default: 0s
*   transition: all 0.2s linear 0s;
*
* box-shadow:  none | <shadow> [,<shadow>]*
* value <shadow> : inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]
* inset : Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
* <offset-x> : Required. The position of the horizontal shadow. Negative values are allowed
* <offset-y> : Required. The position of the vertical shadow. Negative values are allowed
* <blur-radius> : Optional. The blur distance
* <spread-radius> : Optional. The size of shadow. Negative values are allowed
* <color> : Optional. The color of the shadow. The default value is black
*  box-shadow: 1px 1px 2px #aaa;
*
* text-shadow: none | [, ]* <shadow> | inherit ;
* value <shadow> : [ <color>? <h-shadow> <v-shadow> <blur-radius>? | <h-shadow> <v-shadow> <blur-radius>? <color>? ]
* <h-shadow> : Required. The position of the horizontal shadow. Negative values are allowed
* <v-shadow> : Required. The position of the vertical shadow. Negative values are allowed
* <blur-radius> : Optional. The blur radius. Default value is 0
*  text-shadow: 0 1px 6px #333333;
*
* border-radius:   <border-radius>{1,4} [ / <border-radius>{1,4}]?
* value <border-radius>{1,4} : The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left; length or %.
*                              If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
* first value / second value : The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first.
*  border-radius: .5rem .5rem .3rem .3rem;
*
* flexbox :
* parent element :  display: flex;
*                   flex-direction: defines in which direction the container wants to stack the items : column, column-reverse, row (default), row-reverse
*                   flex-wrap: defines if, and how, the container wants its children to wrap : nowrap (default), wrap, wrap-reverse
*                   flex-flow: shorthand property : flex-direction flex-wrap
*                   justify-content: aligns the items horizontally : center, flex-start (default), flex-end, space-around, space-between
*                   align-items: aligns the items vertically : baseline, center, flex-start, flex-end, stretch (default)
*                   align-content: aligns the item rows : center, flex-start, flex-end, space-around, space-between, stretch (default)
* child elements : order: sorts the items in the specified order : Integer, default 0
*                  flex-grow: specifies how much a flex item will grow relative to the rest of the flex items : Number, default 0
*                  flex-shrink: specifies how much a flex item will shrink relative to the rest of the flex items : Number, default 1
*                  flex-basis: specifies the width of a flex item : any legal width, or content, default auto
*                  flex: shorthand property : flex-grow flex-shrink flex-basis    // IE bug fix: all flex children need full flex:... ... ...  statement //
*                  align-self: overrides the align-items property, aligns the item vertically : auto (default), baseline, center, flex-start, flex-end, stretch
*
* grid :
* parent elements : display: grid; | display: inline-grid;
*                  justify-content: to align the whole grid inside the container : start (default), end, center, space-evenly, space-around, space-between
*                  align-content: used to vertically align the whole grid inside the container : start (default), end, center, space-evenly, space-around, space-between
*                  column-gap: specifies the gap between the columns : length|normal (default)|initial|inherit;
*                  row-gap: specifies the gap between the grid rows : length|normal (default)|initial|inherit;
*                  gap: a shorthand for the row-gap | column-gap properties : row-gap column-gap;
*                  grid-template-areas: specifies areas (with item-names) within the grid layout. Each area (row) is defined by apostrophes. Use a dot to refer to a grid item with no name : none (default)|itemnames;
*                  grid-template-columns: specifies the number (and the widths) of columns in a grid layout. The values are a space separated list : none (default)|auto|max-content|min-content|length|initial|inherit;
*                  grid-template-rows: specifies the number (and the heights) of the rows in a grid layout. The values are a space-separated list : none (default)|auto|max-content|min-content|length|initial|inherit;
*                  grid-template: a shorthand property for : grid-template-rows grid-template-columns grid-template-areas
*                  grid-auto-columns: sets a size for the columns in a grid container. Property affects only columns with the size not set : auto (default)|max-content|min-content|length value;
*                  grid-auto-rows: sets a size for the rows in a grid container. Property affects only rows with the size not set : auto (default)|max-content|min-content|length value;
*                  grid-auto-flow: controls how auto-placed items get inserted in the grid : row (default)|column|dense|row dense|column dense;
*                  grid: a shorthand property : grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow (default : none none none auto auto row)
* child elements : grid-column-start: defines on which column-line the item will start, or how many columns an item will span : auto (default)|span n|column-line;
*                  grid-column-end: defines how many columns an item will span, or on which column-line the item will end : auto (default)|span n|column-line;
*                  grid-row-start: defines on which row-line the item will start : auto (default)|row-line;
*                  grid-row-end: defines how many rows an item will span, or on which row-line the item will end : auto (default)|row-line|span n;
*                  grid-column: a shorthand property for : grid-column-start / grid-column-end;
*                  grid-row: a shorthand property for : grid-row-start / grid-row-end;
*                  grid-area: a shorthand property for : grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
*
* webp images :
* - using webp images in css : if webp is supported in browser, the html element has (one or several of) the following classes : webp webp-alpha webp-animation webp-lossles
*   the no-webp class is added when the browser doesn't support webp
*   these classes are inserted by a Modernizr feature detection library included in the jquery.js file
*   if javascript is disabled, the html element has the no-js class, otherwise it is removed (script line added in jquery.js file)
*         .no-js .elementWithBackgroundImage,
*         .no-webp .elementWithBackgroundImage { background-image: url("image.jpg"); }
*         .webp .elementWithBackgroundImage{ background-image: url("image.webp"); }
*/

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* == soft reset  id="soft_reset"                                                                                                                                                              */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

html {
  box-sizing: border-box;
  height: 100%;
  overflow-y: scroll;
  --scroll-behavior: smooth;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  vertical-align: middle;
  border: 0;
}

strong {
	text-decoration: none;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

[hidden] {
  display: none;
}

a:focus {
  outline-width: thin;
  outline-style: dotted;
}

a:active, a:hover {
  outline-style: none;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* == typography  id="typography_text_styles"                                                                                                                                                  */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: "responsiveFontIco";
  src: url("../images/font/responsive-font-ico.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Cambria";
  src: url("../images/font/Cambria-Font-For-Android.woff") format("woff");
  src: url("../images/font/Cambria-Font-For-Linux.woff") format("woff");
  src: url("../images/font/Cambria-Font-For-MAC.woff") format("woff");
  src: url("../images/font/Cambria-Font-For-Windows.woff") format("woff");
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Cambria-bold";
  src: url("../images/font/cambriab.woff") format("woff");
  font-style: normal;
  font-display: block;
}
/* other icons : you tube e000; t e001; star e002; book e003; google e005; points e006; facebook e007; small arrow right e008; small arrow left e009; circle zen e00c; plus e00f; bizarre arrow right e010; bizarre arrow left e011;  */
/*               unfolded map e012; unfolded map with pointer e013; map pointer e014; instagram e019  */
.myicon-arrow_right, .myicon-arrow_left, .myicon-list, .myicon-close, .myicon-arrow-up, .myicon-arrow-next, .myicon-arrow-prev, .myicon-arrow-down, .myicon-search {
  font-family: "responsiveFontIco";
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.myicon-arrow_right::before {
  content: "\e00a";
}

.myicon-arrow_left::before {
  content: "\e00b";
}

.myicon-list::before {
  content: "\e00d";
}

.myicon-close::before {
  content: "\e00e";
}

.myicon-arrow-up::before {
  content: "\e015";
}

.myicon-arrow-next::before {
  content: "\e016";
}

.myicon-arrow-prev::before {
  content: "\e017";
}

.myicon-arrow-down::before {
  content: "\e018";
}

.myicon-search::before {
  content: "\e004";
}

/* base font-size corresponds to 10px and is adapted to rem unit */
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  color: #000;
  font-family: 'Cambria';
  font-size: 1.6em;
  line-height: 1.8;
}

/* font-sizing for content */
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details, figure, hgroup {
  margin-top: 0;
  margin-bottom: 0;
}


/*h1 {
  margin-top: 0.5em;
  margin-bottom: 0;
  font-size: 3.2rem;
  line-height: 1.3125;
}

h2 {
  margin-top: 0.5em;
  margin-bottom: 0;
  font-size: 2.8rem;
  line-height: 1.5;
}

h3 {
  margin-top: 0.5em;
  margin-bottom: 0;
  font-size: 2.4rem;
  line-height: 1.75;
}

h4 {
  margin-top: 1.05em;
  margin-bottom: 0;
  font-size: 2rem;
  line-height: 1.05;
}

h5 {
  margin-top: 1.1666666667em;
  margin-bottom: 0;
  font-size: 1.8rem;
  line-height: 1.1666666667;
}

h6 {
  margin-top: 1.3125em;
  margin-bottom: 0;
  font-size: 1.6rem;
  line-height: 1.3125;
}
*/
.b {
  font-weight: 700;
}

/* text-align centered */
.textAlignCenter {
  text-align: center;
}

/* text-align right */
.textAlignRight {
  text-align: right;
}

/* text-align left */
.textAlignLeft {
  text-align: left;
}

/* pictures display*/
/* resizing image */
img {
  max-width: 100%;
  height: auto;
  width: auto;
  box-sizing: border-box;
}

/*center an image*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
li .listeOrange {
  color: #fff !important;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* == hiding content  id="hidden_content"                                                                                                                                                      */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* hiding content */
.visuallyHidden {
  /*
  position: absolute;
  left: -7000px;
  overflow: hidden;
  */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.desktopHidden {
  display: none;
}

.hide {
  visibility: hidden;
  clear: both;
  height: 0;
}

.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.stopFloat {
  clear: both;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* == browsers consistency  id="browser_consistency"                                                                                                                                           */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* avoid top margins on first content element */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

/* avoid margins on nested elements */
li p, li ul, li ol {
  margin-top: 0;
  margin-bottom: 0;
}

/* max values */
img, table, td, blockquote, code, pre, textarea, input, video {
  max-width: 100%;
}

/* margin-bottom on tables */
table {
  margin-bottom: 1.2em;
}

/* scripts */
body > script {
  display: none !important;
}

/*
  JQuery Scroll up (la flèche qui remonte en haut)
*/
#scrollUp {
  display: inline-block;
  text-align: center;
  color: #1b1b1f;
  background-color: #dbd6cf;
  border: 2px solid #1b1b1f;
  text-decoration: none;
  opacity: 0.7;
  border-radius: 1.5rem;
  transition: background 200ms linear 0s;
  /*background-image: url("../images/scrolltop.png");*/
  bottom: 2rem;
  right: 2rem;
  width: 3rem; /* Width of image */
  height: 3rem; /* Height of image */
}

#scrollUp:hover {
  opacity: 1;
}

#scrollUp i {
  font-size: 2rem;
  line-height: 2.6rem;
  padding-bottom: 0.4rem;
}

/*
  Pour insérer un bloc qui garde le même ration hauteut/largeur (utile pour les vidéos, par ex.) :
  A box with an intrinsic ratio width / height
  the ratio is given by : padding-bottom: 50%;
  wrapper :
  This declaration gives the box a specific format.  Using 50% for padding makes the height of the box equal to 50% of its width.
  Specifying a height of 0 gives this element "layout"
  child-element :
  position: absolute : This frees the element from the height boundary of its parent. This way, it can be positioned over the "padding area."
  change for other ratios : padding-bottom : x%;

//  <div class="wrapperBoxFixedRatio">
//  <div class="innerElementFixedRatio"></div>
//  </div>
*/
.wrapperBoxFixedRatio {
  position: relative;
  padding-bottom: 50%;
  height: 0;
}

.innerElementFixedRatio {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.dataVideoWrapper {
  clear: both;
  padding: 0;
  margin: 1rem auto 2rem auto;
}

.innerVideoFixedRatio {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-bottom: 66.67%;
  height: 0;
  border: 1px solid #7e7e7e;
}

.innerVideoFixedRatio object, .innerVideoFixedRatio embed, .innerVideoFixedRatio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* to force the containers height to the height of the floated children elements 
Si tu utilses un css qui s'appelle "float", si un élément a un css float left, */
.clearfix::after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: "";
  clear: both;
  height: 0;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ==global styles  id="global_styles"                                                                                                                                                         */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html {
  background-color: #fff;
}

/* ----------------------------------------------------------------------------------------- */
/* ==header styles  id="header_styles"                                                       */
/* ----------------------------------------------------------------------------------------- */

/*Gestion du menu déroulant de langues*/
.langue > div::after {
    content: " ▼";
    font-size: 1em;
}

.langue {
	list-style-type: none;
	margin-right: 1em;
	width: fit-content;
}

.langue li {
	transition : all 0.5s;
	text-decoration: underline;
}

.langue li { 
	display: none;
	transition: display 0.5s;
}

.langue:hover li {
	display: block;
}

.langues {
	display: flex; 
	justify-content: flex-end;
	max-width:95%;
}

/*small screen ~768px  */
@media all and (min-width: 48em) {
  .langues {
	display: flex; 
	justify-content: flex-end;
	max-width:90%;
  }
}

/*Image d'accueil*/
header .accueil {
  width: 300px;
  margin-left: 15em;
  position: absolute;
  top: -4px;
  background: white;
  border-radius: 14px;
}


@media all and (min-width: 48em) {
  .bandeau {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 9em;
    justify-content: center;
    width: 100%;
  }

  .ligne {
    flex-basis: 25%;
  }

  .titre {
    flex-basis: 50%;
  }
}

header img.accueil {
  padding: 1em;
}

/* ----------------------------------------------------------------------------------------- */
/* ==footer styles  id="footer_styles"                                                       */
/* ----------------------------------------------------------------------------------------- */

footer {
  padding: 2em;
}

footer h1 {
	text-align: center;
}
.flex-logo-footer{
  display: flex;
  justify-content: center;
}
footer p, footer p a{
	text-align: center;
  font-size: 1.7rem;
  color: #111;
} 

footer ul{
	text-align: center;
}

footer ul li {
	display: inline
}

.footerTitle {
  font-family: "Times New Roman", Times, serif;
  font-style: 400;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 4rem;
}

.footerSubtitle {
  font-size: 2.3rem;
  font-weight: 700;
	color: #eb7454;
  line-height: 2.3rem;
  margin-bottom: 2rem;
}

/* ----------------------------------------------------------------------------------------- */
/* ==Main styles  id="global_main_styles"                                                    */
/* ----------------------------------------------------------------------------------------- */

#page {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 100vh;
  flex-direction: column;
}

#headerNav {
  position: relative;
  height: auto;
  width: 100%;
  flex: 0 0 auto;
  z-index: 1000 !important;
}

#footer {
  background-color: #fff;
  position: relative;
  width: 100%;
  text-align: left;
  height: auto;
  flex: 0 0 auto;
  z-index: 550 !important;
}

#maincontent {
  width: 100%;
  max-width: 200rem;
  margin: 0 auto;
  padding: 0;
  z-index: 500 !important;
  flex: 1 0 auto;
  align-self: stretch;
}

/* ----------------------------------------------------------------------------------------- */
/* ==Content styles  id="global_content_styles"                                              */
/* ----------------------------------------------------------------------------------------- */

p , li{ font-size: 1.6rem; }

.lesPlus {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.social {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: center;
  padding: 0;
  text-align: center;
}

.social li {
	display: inline-block;
}

.socialHeader li {
  margin: 1em;
}

.socialFooter li {
  margin: 0 1em 1.5em 1em;
}

/*mise en page liste réseaux sociaux*/

#mail {
}

#fb {
  fill: #1778f2;
}

#insta {
  fill: #f00075;
}

.flexContainer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  flex-direction: row-reverse;
}
.noir {
  background-color: #fff;
  margin-top: 0;

}
.boxNoir{
  padding-bottom: 0 !important;
  color: #111 !important;
}
.orangeBox {
  background-color: #eb7454;
  margin-top: 0;
}
.orangeBox p {
  color: #fff;
}
.noir p, .noir ul li {
  color: #111;
}
.orangeBox ul li {
  color: #fff;
}
.flexText {
  position: relative;
  flex: 1 1 auto;
  align-self: center;
  width: 100%;
  height: auto;
  padding: 2rem;
}
.flexImg {
  position: relative;
  flex: 1 1 auto;
  align-self: auto;
  width: 100%;
  height: auto;
}
.flexFirst { order: 1; }
.flexLast { order: 2; }

/* ----------------------------------------------------------------------------------------- */
/* ==Modules styles  id="global_modules_styles"                                              */
/* ----------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ==Responsive tiny / medium / large  id="media_queries_min_width"                                                                                                                            */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* small screen ~768px  */
@media all and (min-width: 48em) {
  .flexContainer { justify-content: space-between; }
  .flexLeft { order: 2 !important; }
  .flexRight { order: 1 !important; }
  .flexText {
    width: 49%;
    padding: 2.5rem 4rem;
  }
  .flexImg {
    width: 49%;
  }
  p, li { 
    font-size: 2.0rem;
    line-height: 28px;
  }
  #scrollUp {
    bottom: 2rem;
  }
}

/* small screen ~1024px */
@media all and (min-width: 64em) {
  .flexText {
    padding: 4rem 5rem;
  }
  .flexImg {
    align-self: center;
  }

}

/* small screen ~1280px */
@media all and (min-width: 80em) {
  .flexText {
    padding: 5rem 4rem;
  }
}