/**
 * CSS DOCUMENT 5.2024
**/

/* Fontello */
@font-face {
  font-family: 'pictos';
  src: url('Fonts/pictos.eot?11301158');
  src: url('Fonts/pictos.eot?11301158#iefix') format('embedded-opentype'),
       url('Fonts/pictos.woff2?11301158') format('woff2'),
       url('Fonts/pictos.woff?11301158') format('woff'),
       url('Fonts/pictos.ttf?11301158') format('truetype'),
       url('Fonts/pictos.svg?11301158#pictos') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'pictos';
    src: url('../font/pictos.svg?11301158#pictos') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "pictos";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-up-open:before { content: '\e800'; } /* '' */
.icon-up-small:before { content: '\e801'; } /* '' */
.icon-down-open:before { content: '\e802'; } /* '' */
.icon-down-small:before { content: '\e803'; } /* '' */
.icon-left-open:before { content: '\e804'; } /* '' */
.icon-left-small:before { content: '\e805'; } /* '' */
.icon-right-open:before { content: '\e806'; } /* '' */
.icon-right-small:before { content: '\e807'; } /* '' */
.icon-menu:before { content: '\e808'; } /* '' */
.icon-search:before { content: '\e809'; } /* '' */
.icon-right:before { content: '\e80a'; } /* '' */
.icon-left:before { content: '\e80b'; } /* '' */
.icon-down:before { content: '\e80c'; } /* '' */
.icon-up:before { content: '\e80d'; } /* '' */
.icon-plus:before { content: '\e80e'; } /* '' */
.icon-minus:before { content: '\e80f'; } /* '' */
.icon-globe:before { content: '\e812'; } /* '' */
.icon-facebook:before { content: '\f30e'; } /* '' */
.icon-instagram:before { content: '\f32d'; } /* '' */

/* ======================================================
   GLOBAL RESET
====================================================== */
*, html, body, iframe, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, table, th, td, audio, video { 
	margin:0; padding:0; outline:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img { display:block; }
table { border-collapse:collapse; border-spacing:0; }
table td { vertical-align:top; }
iframe, fieldset, img, a img { border:0 none; }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; text-align:left; } 
h1, h2, h3, h5, h5, h6 { font-size:100%; }
blockquote::before, blockquote::after, q::before, q::after { content:''; content:none; }
html>body * a { position:relative; }  /* Gets links displaying over a PNG background */
a { outline:none; } /* Gets rid of Firefox's dotted borders */
textarea, table, td, th, code, pre, samp { 
  word-wrap: break-word; /* passage à la ligne forcé */
  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* césure propre */
}
input, select { vertical-align:middle; }
ul li { margin:0.5em 1em; padding: 0 0.25em; list-style:disc; }
ol li { margin:0.5em 1em; padding: 0 0.25em; list-style:decimal; }
strong, b { font-weight:bold; }
em, i { font-style:italic; }
img { width: 100%; }
span { white-space: nowrap; }

/**------------------------------
 * GENERAL CLASSES and SETTINGS
--------------------------------**/
:root {
  --mainColor: #736357;
  --bkgColor: #EAE6E3;
  --hoverBkgMenu: #c7b299;
  --yellow: #FBB03B;
  --white: #FFFDFA;
}

html { width:100%; height:100%; }
body { width: 100%; height: 100%; font: normal 1.0em/1.5 Helvetica, Arial, sans-serif; color: var(--mainColor); text-align: left; background: var(--bkgColor); }
h1 { position:relative; margin: 1em 0 0.5em; font: 2em/1.2 Helvetica, Arial, sans-serif; color: var(--mainColor); text-transform: uppercase; }
h2 { position:relative; margin: 1.5em 0 0; font: 1.5em/1.2 Helvetica, Arial, sans-serif; color: var(--mainColor); }
h3 { position:relative; margin: 1.5em 0 0; font-size: 1.2em; line-height: 1.1; font-weight: bold; }
h4 { margin: 1.5em 0 .5em; font-size: 1.2em; line-height: 1.1; }
h5 { margin: 1.5em 0 .5em; font-size: 1em; font-weight: normal; line-height: 1.5; }
h6 { margin: 1.5em 0 .5em; font-size: 1em; font-weight: normal; line-height: 1.5; }
a { color: var(--mainColor); font-weight: 500; text-decoration: underline; }
a:hover, a:focus { color: var(--mainColor); text-decoration: underline; }
a[href ^= 'tel:'] { text-decoration: none; }
p { margin: 0 0 1.5em; }
ul, ol { margin:0; }

/* ======================================================
   TRANSITIONS
====================================================== */
a, button, .button, .toggle-menu { transition: all ease-in-out 0.2s; }

/* ======================================================
   CLASSES GLOBALES and *
====================================================== */
.ctn-msg { margin: .5em auto; }
form .ctn-msg p { margin:.5em 0 }
.success { margin: 1.5em 0; padding: 1px 1em; font-style: italic; color: #008a00; border: 1px solid #008a00; border-radius: 2em; background-color: #fff; }
.error { margin: 1.5em 0; padding: 1px 1em; font-style: italic; color: #e00; border: 1px solid #e00; border-radius: 2em; background-color: #fff; }
.responsive { position: relative; padding-top: 30px; padding-bottom:33%; height: 0; overflow: hidden; }
.responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.responsive img { margin:.5em auto; width: 100%; height: auto; max-height: none; max-width: none; }
.lozad { opacity: 0; transition: opacity 1.5s ease-in-out; }
.loaded { opacity: 1; }
.more { text-transform: uppercase; white-space:nowrap; }
.button, a.button, button { 
  display:inline-block; padding:.5em 1em; font-weight: 500; color: var(--blue); text-decoration:none; white-space:nowrap; background-color: var(--yellow); border: 0; border-radius: 0.5em; cursor:pointer; 
}
a.button:hover, a.button:focus, button:hover, button:focus { opacity: 0.8; }
.clear-fix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.center { text-align:center; }
#go2top { display:none; position:fixed; bottom:5%; right:2%; margin: .5em; padding: .5em 0; width: 40px; height: 40px; font-size: 1em; line-height: 1; color: var(--mainColor); text-align:center; background-color: rgba(255, 255, 255, .3); border: 1px solid var(--mainColor); border-radius:25px; opacity:.5; z-index:30; }
#go2top:hover { color: var(--white); background-color:var(--mainColor); opacity:1; }


/* ======================================================
   FORMULAIRES
====================================================== */
form { max-width: 540px; }
.fieldset { width: 100%; margin-bottom: 2em; }
form p, form .line { clear:both; margin:1.5em auto; text-align: left; }
form .form-blktxt .line { max-width: inherit; }
form label { display:block; font-family: Helvetica, Arial, sans-serif; font-size: 1em; color: var(--mainColor); text-align: left; cursor:pointer; }
label span { white-space: normal; }
form input[type="text"], form input[type="password"], form input[type="email"], form input[type="tel"], form input[type="number"], form input[type="time"], form textarea, form select { 
  padding:0.5em 1em; width: 100%; font-size: 1em; line-height: 1.5; font-family: Helvetica, Arial, sans-serif; border:2px solid var(--blue); 
}
form input[type="text"]:focus, form input[type="password"]:focus, form input[type="email"]:focus, form input[type="tel"]:focus, form input[type="number"]:focus, form input[type="time"]:focus, form textarea:focus { 
  border-color:var(--mainColor); 
}
form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 1.2em; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMTQuODMgMTYuNDJsOS4xNyA5LjE3IDkuMTctOS4xNyAyLjgzIDIuODMtMTIgMTItMTItMTJ6Ii8+PHBhdGggZD0iTTAtLjc1aDQ4djQ4aC00OHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4='); background-size: 1.2em; background-repeat: no-repeat; background-position: calc(100% - .1em) center; width:240px; margin:.25em 0; }
form input[type="checkbox"], form input[type="radio"] { cursor: pointer; }
form textarea { width: 100%; height:10rem; }
form .code-image { clear:both; text-align: left; }
form .code-image img { border:medium none; float:left; margin:0 0.5em 0 0; width:160px; border-radius:inherit; }
form .code-image input { height:50px; width:160px; text-align:center; letter-spacing:0.3em; text-transform:uppercase; }
a.btn-reloadimgcode { display: inline-block; margin: 0 .5em; padding: .1em .5em 0; font-size: .8em; line-height: 1.3; color: #fff; text-decoration: none; background-color: var(--blue); text-align: center; }
a.btn-reloadimgcode:hover, a.btn-reloadimgcode:focus { background-color: var(--mainColor); }
form input[type="submit"] { display: block; margin: 1.5em 0; padding: .5em 1em; width: 200px; font-size: .8em; line-height: 1; color: #fff; text-decoration: none; text-align: center; border: 0; background-color: var(--mainColor); cursor: pointer; }
form input[type="submit"]:hover, form input[type="submit"]:focus { background-color: var(--mainColor); }
button { display:block; margin: 1.5em 0; font-size:1em }

.checkbox input { margin-right: 0.5em; border-color:var(--blue); }
.form-search { margin-bottom:1em; max-width:inherit; }
.btn-reset { display:inline-block; padding:0.5em 1em; line-height: 1.5; background-color: #fff; }

/* ======================================================
   HEADER
====================================================== */
header { position: fixed; top: 0; left: 0; width: 100%; height: auto; background: var(--bkgColor); z-index: 10; }
header .inner { margin:0 auto; padding: 0; max-width:1600px; height: 100%; }
header .flex-grid { flex-flow: row nowrap; -webkit-box-pack: left; align-items: center; justify-content: center; align-content: center; gap: 0; }
header .flex-item { position: relative; display: inline-block; margin: auto; padding: 0; width: auto; flex-grow: 1; align-self:center; }
header div.flex-item:nth-child(2) { flex-grow:2; text-align:right; }
#logo { display: block; margin: 30px 0; width: 70%; }
#logo img { width: 100%; }

.blk-lang { position: absolute; right: 0; top: 10px; }
.blk-lang li { display: inline-block; list-style: none;  }

/* MENU */
#toggle-menu { position: absolute; top: 0; right: 0.5em; display:block; padding: 0 .25em; font-size: 25px; line-height: 1; color: var(--mainColor); vertical-align: middle; cursor:pointer; width: 30px; }
#toggle-menu::before { display:block; font-family: 'pictos'; content: '\e808'; font-size: 1em; line-height: 1; font-weight: normal; }
#toggle-menu:hover, #toggle-menu:focus, #toggle-menu:hover i, #toggle-menu:focus i { background-color: var(--hoverBkgMenu); }
#blk-menu { display: none; position:absolute; right: 0; top: 110%; padding: 0; width: 100%; background-color: var(--bkgColor); }
ul.menu { position: relative; margin:0; }
.menu.active { display: block; }
.menu a { font-size: 0.9em; line-height: 1; font-weight: 500; color:var(--mainColor); text-decoration:none; text-transform: uppercase; white-space: nowrap; }
.menu > li { position: relative; display: block; margin: .5em .25em; padding: 0; list-style: none; }
.menu > li > a { display:inline-block; margin: 0 auto; margin: .2em;padding:.3em;  color: var(--mainColor); text-align:center; }
.menu li > a:hover, .menu li > a:focus, .menu li:focus-within > a, .menu li.active > a { color:var(--mainColor); background-color: var(--hoverBkgMenu) }
a.link-menu { width: calc(100% - .4em); }
.menu li .btn-plus { position: absolute; left: 0; padding: .5em; }
.menu span.btnOpen { display: inline-block; position: absolute; top: 0; right: .5em; padding:.4em .5em; color: var(--mainColor); line-height: 1; border: 1px solid var(--mainColor); border-radius: 5px; }
.menu span.btnOpen::before { display: inline-block; padding: 0 .2em; font-family: 'pictos'; font-size: 1em; line-height: 1.1; content: '\e802'; }

ul.s-menu { display: none; margin: 0; padding:.5em 0; width: 100%; background-color: var(--white); }
.s-menu.active { display: block; }
.s-menu li { display: block; margin: .5em 0; padding: 0; }
.s-menu > li > a { display: block; margin: 0; padding: .5em 1.2em; color:var(--mainColor); }
.s-menu li > a:hover, .s-menu li > a:focus, .s-menu li.active > a { color:var(--mainColor); }
/* ======================================================
   MAIN, CONTENT
====================================================== */
main { position: relative; z-index:1; min-height: 25vh; padding-top: 90px; }
section { position: relative; }
.content-top { position: relative; padding: 1em 0; width: 100%; height: 600px; }
.content-top h1 { font-size: 2.7em; color: var(--yellow); max-width: 450px; text-transform: uppercase; }
.content-top img { object-fit: cover; object-position: center center; position: absolute; top: 0; width: 100%; height: 600px }
.parallax { height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
.wrapper { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 3%; }
.inner { position: relative; margin: 0 auto; max-width: 1024px; }
.content { position: relative; padding: 2.5em 0; z-index:5; }
.flex-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-flow: row wrap; -webkit-box-pack: start; justify-content: flex-start; align-items: flex-start; align-content:flex-start; gap:2em; }
.flex-item { position: relative; width: 100%; flex-grow: 0; border-radius: 1em; }
.text { margin: 0 auto; padding:0 0 2em; }
.text video { max-width: 100%; }

/* ======================================================
   FOOTER
====================================================== */
footer { border-top: 1px solid #ccc; background-color: var(--mainColor); color: var(--bkgColor); padding: 0.7em 0; position: relative; text-align: center; z-index: 2; }
footer a { color: var(--bkgColor); font-weight:normal; text-decoration:none; }
footer a:hover, footer a:focus { color: var(--bkgColor); text-decoration:underline; }
.copyright { margin: 1em 0 2em; font-size:.8em; }
.signature { font-weight:normal; }
#blk-cookies { position: fixed; clear: both; padding: 1em; bottom: 0; width: 100%; color: #fff; text-align: center; background-color: var(--blue); box-shadow: 0 -10px 15px 1px rgba(0,0,0,.2); z-index: 101; }
a.btn-cookies-accept { display: inline-block; margin-left: .5em; font-weight: 500; color: var(--mainColor); background-color: #fff; }
a.btn-cookies-accept:hover, a.btn-cookies-accept:focus { color:#fff; background-color:var(--blue); }

.debug { display: none; }
/**=====================================================
   ECRANS taille moyenne : tablettes, petits notebooks
====================================================== */
@media (min-width:768px) {
  section { padding: 2em 0; }
  #logo { max-width: 140px; }
  .top-banner div { font-size:1.2em; }
  .flex-grid { gap:1.5em 3%; }
  .flex-item { width: 48.5%; }
  .text .flex-grid { gap:0 6%; }
  .text .flex-item { width: 47%; flex-grow:0; }
  
  .debug { display: block; } 
}
@media (min-width:1024px) {
  main { padding-top: 150px; }
  #logo { margin: 10px auto 20px; width: 140px;}
  #toggle-menu { display: none; }
  #blk-menu { display: block; position: relative; top: auto; right:0; bottom: auto; left: auto; width: auto; background-color: transparent; box-shadow:none; text-align: center; }
  .menu > li { display:inline-block; position: relative; margin:0 .5em; }
  .menu li:hover .s-menu, .menu li:focus-within .s-menu { display: block; }
  .menu li .btn-plus { display: none; }
  a.with-ssmenu::after { display:inline-block; margin-left:.7em; font-family:'pictos'; content:'\e802'; }
  .menu span.btnOpen { display:none; }
  ul.s-menu { position: absolute; left: auto; top: auto; min-width: 180px; width: auto; border-radius: 5px; box-shadow:-4px 4px 3px 0 rgba(0, 0, 0, 0.3); text-align:left; }
  .s-menu > li > a { text-align:left; }
  .flex-item { width: calc(94% / 3); }
}

/**=====================================================
   ECRANS + grands
====================================================== */
@media (min-width:1280px) {
  
}

@media (min-width:1600px) {
  
}