/* cmsms stylesheet: Main modified: Tuesday, December 2, 2025 9:40:59 AM */
 /* turquoise */
 /* brun */
 /* vert */
 /* vert clair */



* {
   margin:0;
   padding:0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
.video { margin:1em 0; height:450px }

html { height:100% }
body { display:grid; grid-template-rows:1fr 1fr; margin: 0; font-size: 1.2em; line-height: 100%; height:100% }
body, button, input, select, textarea, nav li a { font-family: 'Nunito', sans-serif; color: #4d4c4c; font-weight:300 }


/* Liens */
a { 
   color:#785116; 
   text-decoration: none;
   transition-delay: 0s;
   transition-duration: 0.8s;
   transition-property: all;
   transition-timing-function: ease;
   line-height:120%;
}

a:hover { color:#00949e; }
a:focus { outline: none; }
a:hover, a:active { outline: 0; }



/* Couleurs */

.blanc, .blanc * { color:#fff }
.noir { color:#000 }
.fdblanc { background-color:#fff }
.fdblanc80 { background-color:rgba(255,255,255,0.6) }
.fdnoir { background-color:#000 }
.fdnoir30 { background-color:rgba(0,0,0,0.6) }
.rouge { color:#ff0000 }

.turquoise { color:#00949e }
.fdturquoise { background-color:#00949e }
#vitiaccueil .turquoise h2 { color:#00949e }
#vitiaccueil .turquoise .button { color:#00949e; box-shadow: inset 0 0 0 2px #00949e }
.turquoise .hovereffect p { background-color:#00949e }
.ImgCover { object-fit:cover; width:100%; height:100% }

.brun { color:#785116 }
.fdbrun { background-color:#785116 }
#vitiaccueil .brun h2 { color:#785116 }
#vitiaccueil .brun .button { color:#785116; box-shadow: inset 0 0 0 2px #785116 }
.brun .hovereffect p { background-color:#785116 }

.vert { color:#969e27 }
.fdvert { background-color:#969e27 }
.vert .hovereffect p { background-color:#969e27 }

.vertclair { color:#e0d52e }
.fdvertclair { background-color:#e0d52e }
.vertclair .hovereffect p { background-color:#e0d52e }

/*
.bleu { color:#785116 }
.fdbleu { background-color:#785116 }
.bleuclair { color:#e0d52e }
.fdbleuclair { background-color:#e0d52e }
*/

.gris { color:#555 }
.fdgris { background-color:#555 }


.lienSite { color:#fff; border:1px solid #fff; padding:0.5em }
.lienSite:hover { color:#00949e; background-color:#fff }


#menu_lang { 
   position: absolute; 
   top:0.7em; 
   left:20%; 
   z-index:10000;
   background-color: rgba(255,255,255,0.5);
   padding: 1em; 
}

/* Typos */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 0px; border: 0;  margin: 0; padding: 0.5em 0; clear: both }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }



/* Listes */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
li { margin: 0 0 0.5em 0 }
#main li { line-height: 135% }

figure { margin: 0; }

/* Formulaires */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; line-height:100% }

legend { border: 0; *margin-left: -7px; padding: 0; }

button, input, select, textarea { font-size: 100%; margin: 0; padding: 0.5em; vertical-align: baseline; *vertical-align: middle; }

button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; border-radius: 0; border:0 }

.formulaire input[type="checkbox"], .formulaire input[type="radio"] { position:relative; box-sizing: border-box; height:1em; width:auto; margin-right: 0.5em }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* Remove inner padding and border in FF3/4: h5bp.com/l */

textarea { overflow: auto; vertical-align: top; resize: vertical; }


/* Tables */
table { width:100%; border-collapse: collapse; border-spacing: 0; border:0; margin: 1em 0 }
td input { margin-bottom:0 }
table td { border:0; padding:0.4em }
table td p { padding:0 }
tr:nth-child(even) {
  background-color: #eee;
}

img {
   /*width: 100%;*/
   max-width: 100%;
   height: auto
}

.largeur_defaut { width: auto; height:auto }

.icone { max-width: 180px }

.cercle {
   border-radius: 50%;
}

body {
   background: #fff;
   color: #555;
}

div#container {
   position:relative;
   width: 100%;
   margin: 0 auto;
   background-color: transparent;
}

.table { position:relative; display: table; margin: 0 auto }
.table { vertical-align: middle }



/* Header */

header {
   position: absolute;
   width: 20%;
   left:0;
   right:0;
   top:0;
   height: auto;
   margin: 0;
   padding: 0;
   z-index:8000;
}


#slogan { position: absolute; right:0; top: 50%; display: table; height:50% }
#slogan div { display: table-cell; vertical-align: top; font-size: 1em; text-align: right }

#logo {
   position: relative;
   left:15%;
   width: 100%;
   height:360px;
   max-height:360px;
   margin:0;
   padding:0;
   z-index: 1500;
}

#logo img {
   width: auto;
   height: 100%;
}

#menu { 
  position:fixed; 
  width:40%; 
  top: 0;
  right: 0; 
  z-index: 9000;
   transition-delay: 0s;
   transition-duration: 0.8s;
   transition-property: all;
   transition-timing-function: ease;
}


#main { 
   margin:-4em auto 0 auto; 
   padding: 0;
   width: 100%;
   max-width: 1400px;
   z-index:6000;
   text-align:center
}

.fr-home #main, .en-homepage #main { max-width: none; background-color:transparent; }

#imgTitre { position:absolute; width:100%; height:600px; min-height:600px; z-index: 40; background-size: cover }
#imgTitre img { position:relative; display:block; z-index:50; }

.degrade { position:absolute; z-index:100; background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 40%); height:100%; width:100%; } 

#bas {
   width: 100%;
   height: auto;
   margin: 0;
   padding: 1em;
   font-size: 0.8em;
}

.contBas {
   width: 100%;
   margin: 0;
   padding: 0
}


#partenaires { width:auto; margin:4em auto; text-align:center }
#partenaires p { color:#00949e; font-size:1.4em }
#partenaires div { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; width:100%; justify-items: center; align-items: center; margin-top:1.5em }
#partenaires div img { max-width:7em; margin:0 2em }

#liensBas {
   max-width:1400px;
   margin:4em auto;
   grid-gap:4em
}

#liensBas div { font-size:1.2em; text-align:center; display:grid }
#liensBas .txt { padding:2em }
#liensBas .txt a { color:#fff }
#liensBas .txt a:hover { color:#e0d52e }
#liensBas div:first-child div.txt { background-color:#785116 }
#liensBas div:nth-of-type(2) div.txt { background-color:#00949e }
#liensBas div:nth-of-type(3) div.txt { background-color:#969e27 }
#liensBas div:first-child h3 a { color:#785116 }
#liensBas div:nth-of-type(2) h3 a { color:#00949e }
#liensBas div:nth-of-type(3) h3 a { color:#969e27 }
#liensBas .info p { font-size:0.5em; padding:0.5em }


#ficheDom { padding:2em; color:#fff; text-align:left }



/* Footer */

.tablo { display:table; width:auto; height:3em; margin:2em auto; }
.tablo div { display:table-cell; vertical-align:middle; text-align: center; padding:0 2em }
.tablo img { width:auto; height:100% }

.contBas { padding:1em; background: #00949e }

footer {
   width: 100%;
   height: auto;
   margin: 0 auto;
   padding: 0;
   color:#fff;
   text-align: center;
}

footer a { color:#fff }
footer a:hover { color:#e0d52e }

footer p.turquoise { padding: 1em }




#haut { float: right; font-size: 2em }
a#haut { color: ### }
a#haut:hover { color: #777 }

.logos { display:table; width:100%; margin:2em 0  }
.logos img { display: table-cell; vertical-align:middle; width:auto; height:80px; margin:0 1em; text-align:center }

/* Grille */

.droite { float: right }
.gauche, .actuAcc .NewsSummary { float: left  }

.flex { display: flex }
.flex45 { flex-basis: 45%;  width: 45%; max-width: 45% }
.flex47 { flex-basis: 47%;  width: 47%; max-width: 47% }
.flex49 { flex-basis: 49%;  width: 49%; max-width: 49% }
.demi, .flex50 { flex-basis: 50%;  width: 50%; max-width: 50% }
.quart, .flex25 { flex-basis: 25%;  width: 25%; max-width: 25% }
.tiers, .flex30 { flex-basis: 30%;  width: 30%; max-width: 30% }
.flex33 { flex-basis: 33.33%;  width: 33.33%; max-width: 33.33% }
.deuxtiers, .flex66 { flex-basis: 66.66%;  width: 66.66%; max-width: 66.66% }
.huitieme, .flex12 {flex-basis: 12.5%;  width: 12.5%; max-width: 12.5% }

.flexDirC { flex-direction: column }
.flexDirR { flex-direction: row }




.grille4c-25pc {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap:2em;
  grid-auto-flow:dense
}

.grille3c-33pc {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:2em;
  grid-auto-flow:dense
}

.grille2c-50pc {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:2em;
  grid-auto-flow:dense
}

.grille2c-1t2t {
  display:grid;
  grid-template-columns: 1fr 2fr;
  grid-gap:2em;
  grid-column-start:1;
  grid-column-end:-1;
  margin-bottom: 2em
}

.grille2c-2t1t {
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-gap:2em;
  grid-column-start:1;
  grid-column-end:-1;
  margin-bottom: 2em
}

.grille2c {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-column-start:1;
  grid-column-end:3;
  margin-bottom: 2em
}

.grille2c:nth-of-type(odd) {
  grid-column-start:3;
  grid-column-end:5;
}

.grille2c:nth-of-type(even) {
  grid-column-start:1;
  grid-column-end:3;
}

.colUnique { grid-template-columns: 1fr }


#selectVins { margin-top: 3em }
#selectVins .card, #selectVins .card__inner { height: 800px }



#vitiaccueil { margin-top: 3em }

#vitiaccueil .grille2c {
  display:grid;
  grid-template-rows: 1fr 1fr;
}

#vitiaccueil .gauche { display:grid; justify-self: right; max-width:40vw }

#vitiaccueil div.txt { display:grid; align-content:center; text-align:left }

#vitiaccueil h2 { font-size:1.5em; color:#00949e }

#presentation {
   position:relative;
   height:500px; 
   overflow:hidden;  
}
.centre .grille2c-2t1t {
   background: rgb(255,255,255);
   background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 44%);
}


#afficher, #reduire { text-align: left; padding:0.5em; border:1px solid #00949e }

.colonne_1 { grid-column: auto / span 1 }
.colonnes_2 { grid-column: auto / span 2; grid-template-columns: 1fr 2fr }
.colonnes_3 { grid-column: auto / span 3; grid-template-columns: 1fr 2fr }
.colonnes_4 { grid-column: auto / span 4; grid-template-columns: 1fr 3fr }
.colonnes_4 .hovereffect img { top:-50% }

.goutt0 { grid-gap:0 }
.goutt1 { grid-gap:1em }
.goutt2 { grid-gap:2em }

.verti { width:auto; height:100% }

/* .hovereffect a img { object-fit: cover } */ 

.col { position: relative; padding: 0; flex-grow: 1; flex-shrink: 1; flex-wrap: nowrap; }
.contBas .col { padding:0 }
.ligne { display: flex; flex-wrap: wrap; justify-content:space-between }
/* .ligne::after, .ligne::before { content: " "; display: table; clear:both }  */
.pleine { width:100% }
section, .actuAcc .NewsSummary { width: 100% }

.centre { margin:0 auto; max-width: 1400px; width: 100% }
.centree { margin:0 auto }
.milieu, .bouton.milieu { display: block; margin:0 auto; text-align:center; left:0; right:0 }
.bas { position:absolute; bottom:0; }

.margeD { padding-right: 1em }
.margeG { padding-left: 1em }
.margeH { padding-top: 1em }
.margeB { padding-bottom: 1em }
.marge { padding: 1em }
.marge0 { padding:0; margin:0}
.margeInt2 { padding:2em }

.margeH4 { margin-top:4em }
.margeB4 { margin-bottom:4em }
.margeB1 { margin-bottom:1em }

.centreLH { display: flex; justify-content: center; align-items:center; width:100%; height:100% }



/* iframe */

iframe { width: 100% }


/* Formulaire */

.cms_form legend, .formulaire legend { display: none }
.cms_form input:not([type="submit"]), .cms_form textarea, .formulaire input:not([type="submit"]), .formulaire textarea, .formulaire select { border:0; background-color: #eee; margin-bottom:1em; font-size:0.95em }
/* .cms_form label, .cms_form input, .formulaire label, .formulaire input { float: left } */
.cms_form div, .formulaire div { clear: both }
.cms_form label, .cms_form textarea, .cms_form input, .formulaire label, .formulaire textarea, .formulaire input, .formulaire select { width: 100% }
.cms_form .cms_submit, .formulaire .cms_submit, .formulaire input[type="submit"] { float:none; border:0; margin:0; color:#fff; margin-bottom:0; background-color:#00949e }
.formulaire select { background-color:#fff; border:1px solid #eee }
.formulaire option:checked { background-color:#eeeeee; }
.error { color: red }


/* Boutons */

.bouton, .formulaire .bouton, .cms_form .bouton { 
   display: inline-block;
   font-size:1em;
   padding:1em; 
   transition-delay: 0s;
   transition-duration: 0.8s;
   transition-property: all;
   transition-timing-function: ease;
   margin-bottom:0
}

.bouton:hover {
   background-color:#785116;
}

.fdbleu .bouton:hover {
   background-color:#00949e;
}

.bouton a { color: #fff }

.large { /* display:flex; */ width:100% }
.large h1 { padding:0.3em 0 }
.fdrose h1 { padding:0 }

.hovereffect img.icone { display:inline; width: 3em; height: 3em }
.hovereffect a { display:block; width:100%; height:100% }
.hovereffect a img { width:100%; height:100%; object-fit:cover }

/* Carte Vignoble */

#carte { display:block; position:relative; margin-bottom: 2em; width:100%; height:100% }
#carte .parent, #panzoom-element { width:100%; height:100% }
#panzoom-element { max-height:70vh }
#panzoom-element img { width:auto; height:100% }
 
.mapButtons { position:absolute; top:0; right:1em }
.mapButtons button { font-size:1.3em; padding:0.2em; background:none; color:#00949e }

/* Effets images */

/* Card */

.card
{
    perspective: 1000px;
    cursor: pointer;
}
.card--flipped .card__inner,
.card--flipped .card__inner,
.card--flipped .card__inner
{
    transform: rotateY(180deg);
}

.card,
.card__inner
{
    position: relative;
    width: 100%;
    height: 300px;
}

.card__inner
{
    transition: transform .25s ease-in-out;
    transform-origin: 50% 50%;

    transform-style: preserve-3d;
}

.card__back
{
    transform: rotateY(180deg);
}

.card__front,
.card__back
{
    position: absolute;
    top: 0;
    left: 0;

    display: flex;

    width: 100%;
    height: 100%;

    color: #888;
    background-color: #fff;

    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

.card__back { background-color:#00949e; padding:1em }
.card__back .txt { position:relative }
.card__back * { color:#fff }
.card__back h2 { padding-bottom:2em }
.card__back a { padding:0.5em }

.card__front img { object-fit:cover; width:100%; height:100% }

.trame { position: absolute; width:100%; height:100% }
.trame img { width:100%; height:100%; object-fit:cover; opacity:0.3 }


/* fin Card */

/* Draw Border */

.button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #fff;
  color: #fff;
  font-size: inherit;
  position: relative;
  vertical-align: middle;
}
.button::before, .button::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.fr-home .button, .en-homepage .button { box-shadow: inset 0 0 0 2px #e0d52e; color:#e0d52e; margin:0 }


.draw {
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #e0d52e;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #e0d52e;
  border-right-color: #e0d52e;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #e0d52e;
  border-left-color: #e0d52e;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.fr-home .draw:hover, .en-homepage .draw:hover {
  color: #00949e;
}
.fr-home .draw:hover::before, .en-homepage .draw:hover::before {
  border-top-color: #00949e;
  border-right-color: #00949e;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.fr-home .draw:hover::after, .en-homepage .draw:hover::after  {
  border-bottom-color: #00949e;
  border-left-color: #00949e;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}




/* fin Draw Border */



/* rollover zoom */

.fx-zoom {
   display:block;
   overflow: hidden;
   max-height:250px;
}

.fx-zoom img, .icone {
   transition-delay: 0s;
   transition-duration: 1s;
   transition-property: all;
   transition-timing-function: ease;
   overflow: hidden;
}

.fx-zoom img:hover, .icone:hover {
  width: 110%;
  height: 110%;
  max-width:200px
}

/* rollover - zoom, fondu et symbole + */

.hovereffect {
width:100%;
height:auto;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
   display:block;
   position:relative;
   -webkit-transition:all .4s linear;
   transition:all .4s linear;
}

.hovereffect p {
   display:inline;
   width: auto;
   color:#fff;
   text-align:center;
   position:relative;
   font-size:0.5em;
   line-height:1.5em;
   background:rgba(245,156,0,0.9);
   -webkit-transform:translatey(-100px);
   -ms-transform:translatey(-100px);
   transform:translatey(-100px);
   -webkit-transition:all .2s ease-in-out;
   transition:all .2s ease-in-out;
   padding:10px;
}

.hovereffect a.info {
   text-decoration:none;
   display:table;
   width:100%;
   height:100%;
   color:#fff;
   background-color:transparent;
   opacity:0;
   filter:alpha(opacity=0);
   -webkit-transition:all .2s ease-in-out;
   transition:all .2s ease-in-out;
   margin:0;
   padding:0;
}

.hovereffect a.info span {
   display:table-cell;
   vertical-align:middle;
   text-align: center;
   font-size:2em;
   }

.hovereffect a.info:hover {
   /*box-shadow:0 0 5px #fff;*/
}

.hovereffect:hover img {
   -ms-transform:scale(1.2);
   -webkit-transform:scale(1.2);
   transform:scale(1.2);
}

.hovereffect:hover .overlay {
   opacity:1;
   filter:alpha(opacity=100);
}

.hovereffect:hover p,.hovereffect:hover a.info {
   opacity:1;
   filter:alpha(opacity=100);
   -ms-transform:translatey(0);
   -webkit-transform:translatey(0);
   transform:translatey(0);
}

.hovereffect:hover a.info {
   -webkit-transition-delay:.2s;
   transition-delay:.2s;
}

/*
.hovereffect::after {
  content: " "; 
  display: table; 
  clear:both
}
*/

/* Petites Actus */

#news { display:grid }
#news article { display:inline-grid; box-shadow: 0 0 8px #eee }
#news article .sommaire { padding: 1em; height:100% }

#news article.demi { grid-template-columns: 1fr 2fr }
#news article.quart { grid-template-rows: 1fr 1fr }

#news article.colonne_1 .hovereffect { align-self: end }


#news article.colonnes_2 .hovereffect,
#news article.colonnes_3 .hovereffect,
#news article.colonnes_4 .hovereffect { clip-path: polygon(10% 0,100% 0,100% 100%,0 100%) }

#news article.fdorange .sommaire h2,
#news article.fdbleu .sommaire h2,
#news article.fdbleuclair .sommaire h2,
#news article.fdvert .sommaire h2,
#news article h2 a  { color:#fff }

#news article h2 a:hover  { color:#eee }

#news article.fdvert .sommaire p, #news article.fdbleu .sommaire p, #news article.fdbleuclair .sommaire p   { color:#fff }
#news article.blanc .sommaire h2 { color:#00949e } 
#news article .sommaire p { color:#555 }

#news article .bouton { color:#fff; border:1px solid #fff }
#news article.fdblanc .bouton { color:#555; border:1px solid #555 }
#news article.fdblanc .bouton a { color:#555 }

#petites_actus { 
   margin: 0 auto; 
   padding: 6em 1em; 
   width: 100%; 
   background-size: auto 100%;
}

#petites_actus h3 {
   font-size:1.3em;
}

.actuAcc {
   margin: 0 0 2em 0;
}

.actuAcc h2 { padding-top: 0 }

.sommaire .hovereffect { margin-bottom: 1em }

/*** Reseaux ***/

#reseaux { position: absolute; right:0; top: 0; display: table; height:50% }
#reseaux div { display: table-cell; vertical-align: bottom }
#reseaux div a { font-size: 2em; padding-left:0.5em }

/* Articles */

#canvas { position: relative }
#canvas #slider { height: 8px }
#canvas .bottom { display:none }

/* Slider */

#slider { 
   position: relative;
   height:700px;
   width: 100%;
   margin: 0;
   overflow: hidden;
   background-color:#fff;
   z-index: 900;
}

.cycle-slideshow { width: 100%; height:100%; overflow: hidden; margin: 0 auto }
.cycle-slideshow > div { width:100%; height:100% }

.NewsSummaryMorelink { font-weight: bold }

#slider .sommaire {
   position: relative;
   /*width: 100%;*/
   height:100%;
   min-height:100%;
   background-size:cover;
   background-position:center;
   font-size:1.2em;
   padding: 0
}

#slider a {
  position: absolute;
  display:block;
  width:100%;
  height: 100%;
  left:0;
  right:0;
  z-index:1000
}

#slider .sommaire .cont {
   display: flex;
   flex-direction:column;
   height:100%;
   width:100%;
}

#slider .sommaire .cont2 {
   display:table;
   height:auto;
   width:auto;
   padding:1em
}

#slider .sommaire .cont2 p {
   display:table-cell;
   vertical-align:middle;
   padding:0.5em;
   font-size:1.4em
}

/* pour template 3photos - gouttiere 10px */
#slider .ligne {
   display:flex; 
   height:100%; 
   padding:0;
   justify-content:space-between;
}
#slider .ligne .flex33 {
  flex-basis: 33.33%;  width: 33.33%; max-width: 33.33%
}
#slider .flex66 {
  flex-basis: calc(66.66% - 10px);  width: calc(66.66% - 10px); max-width: calc(66.66% - 10px)
}

#slider .zone1, #slider .zone2, #slider .zone3 { display: block; background-size: cover; background-repeat: no-repeat; background-position:center; width:100%; height:100% }
#slider span { width:100%; height: calc(50% - 5px) }

.fadeIn1s {
   -webkit-animation:fadeIn1s 1s;
   -moz-animation:fadeIn1s 1s;
   -o-animation:fadeIn1s 1s;
   animation:fadeIn1s 1s;
   -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

.fadeIn2s {
   -webkit-animation:fadeIn2s 2s;
   -moz-animation:fadeIn2s 2s;
   -o-animation:fadeIn2s 2s;
   animation:fadeIn2s 2s;
   -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@-webkit-keyframes fadeIn1s { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadeIn2s { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn1s { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn2s { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn1s { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn2s { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn1s { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn2s { from { opacity:0; } to { opacity:1; } }

.LtoR {
   animation: MLtoR 2s;
}

@keyframes MLtoR {
   0%   { margin-left:+100px }
   100% { margin-left:0px }
}

.RtoL {
   animation: MRtoL 2s;
}

@keyframes MLtoR {
   0%   { margin-left:-100px }
   100% { margin-left:0px }
}

#slider .NewsSummary h2 {
   font-size: 1.7em;
   color: #fff;
   padding: 0 0 0.6em 0;
}

#slider .NewsSummary p {
   font-size: 1.1em;
   color: #fff;
}

#pager {
  width: 100%;
  margin: 0;
  left: 1em;
  bottom: 2em;
}

#pager span {
   font-size: 2em;
   padding: 0 0.2em 0 0;
   cursor: pointer;
}

#pager .cycle-pager-active {
   color: #fff
}

/* Typos */

h1, h2, h3 { font-weight: 500; color:#00949e; line-height:115%; direction:ltr }

h1 {
   display: inline-block;
   padding: 0 3em;
   margin: 0 0 2em 0;
   height: 2em;
   line-height: 2em;
   background-image: url(../../design/fdh1.png);
   background-position: 0 0;
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
   min-width:50%
}

/* h1:after {
   content: "";
   display:block;
   position:absolute;
   height: 2em;
   width: 3em;
   background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(255,255,255,0) 100%);
} */

.fr-home #main > h1, .en-homepage #main > h1 { font-size:2.5em; margin:2em 0; line-height:120%; height:auto }

.fr-home #main > h2, .en-homepage #main > h2 {
   padding:1em;
   background-image: url(../../design/fdh2.svg);
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: cover;
   text-align:center 
}

.chapo { font-size:1.2em; color: #00949e; margin:0 0 2em 0 }
.chiffre { font-size:3em }
.chiffre img { max-width:60% }


h2 { padding: 0 0 0.5em 0; font-size: 1.5em; font-weight: 200; color: #555 }
h2 a { color: #969e27 }
h2 a:hover { color: #785116 }
h3 { color:#00949e; padding: 0 0 0.5em 0; line-height:130%; font-weight: 300; }
h3 strong { font-weight: 400 }
p { padding: 0 0 0.5em 0; line-height:130%; direction:ltr }
.petit { font-size:0.8em }
.petit.bouton { font-size:1em; cursor:pointer }




/* Plan */
#plan { width:100%; height:700px }


/* Editeur */
.mce-content-body * { opacity:1 }
.mce-content-body .cell,
.mce-content-body .demi,
.mce-content-body .tiers,
.mce-content-body .col,
.mce-content-body .quart,
.mce-content-body .grille2c-50pc div, .mce-content-body .grille4c-25pc div, .mce-content-body .grille3c-33pc div, .mce-content-body .grille2c-1t2t div { border:2px dotted #ddd }
.mce-content-body .bouton * { color:#888; border:1px solid #888 }

.mce-content-body .accordeon { border:2px dotted #ddd }
.mce-content-body .accordeon p { border:2px dotted green }


.mce-content-body .degrade { display:none } 
.mce-content-body #presentation { height:auto } 

/* Sort List */
.sort {
  padding:8px 30px;
  border-radius: 6px;
  border:none;
  display:inline-block;
  color:#fff;
  text-decoration: none;
  background-color: #28a8e0;
  height:2.5em
}
.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}
.sort:after {
  display:inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:4px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-4px;
  right:-5px;
}

/* Popup */

#popup {
   display: none;
   position: fixed;
   z-index: 10000;
   width: 100%;
   max-width: 100%;
   height:100%;
   padding: 2em;
   background-color:rgba(0, 0, 0, 0.8);
   text-align:center;
   color:#fff
}

#popup div {
  display:grid;
  height:100%;
  width:100%;
  align-content:center
}

#popup p { margin: 0 auto }

.closePopup {
   line-height: 1;
   font-size: 1.5em;
   /* position: absolute; */
   top: 0;
   right: 0;
   text-decoration: none;
   color: #000;
   padding: 0.5em;
   background-color:#fff;
   z-index:11000;
   cursor:pointer;
}


/* Mobiles */

@media only screen and (min-width: 1024px) and (max-width: 1400px) {
   body { font-size:1em }
}

@media only screen and (min-width: 1000px) and (max-width: 2000px) {
  #menu { width:50% }
}

@media only screen and (max-width: 1199px) {
   #main, .actuAcc { padding: 1em }
   #reseaux, #slogan { right:1em }
   #slider { height:400px }

   #liens ul { 
     position:fixed; 
     width:100%; 
     padding:1em; 
     max-width:100%; 
     padding-left:25%; 
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
     font-size:0.7em; 
     top: 4em; 
     left:0;
     z-index: 500;
     grid-template-columns: repeat(5,1fr);
   }

  #liens img { width:25% }

}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
   #slider { height:430px }
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
   #liens ul { width:8em; font-size:0.8em; padding:0.5em }
}

@media only screen and (max-width: 1400px) {
  #news article .sommaire { font-size:0.8em }
  #logo img { height:70% }
}

@media only screen and (min-width: 2000px) { /* 3 cols devient 2 cols */ 
  .colonnes_3 { grid-column : auto / span 2}
}

@media only screen and (max-width: 567px) {

  .largeur_defaut { width:100% }
  #vitiaccueil .gauche { max-width:100% }
  #menu { top:0; position:absolute }
  body { font-size: 1em }
  .col { flex-basis: 100%; width: 100%; max-width: 100%; margin-right: 0; padding-bottom:1em }
  .grille3c-33pc, .grille2c-50pc, .grille4c-25pc, .grille2c-2t1t { grid-template-columns: 1fr; }
  #lightgallery .col { flex-basis:100%; margin:0; padding-bottom:1em }
  #slider { height:200px }
  img { width: 100%; height: auto }
  #imgTitre { height:100px; min-height:100px; top:3em }
  #imgTitre img { width: 100%; height: auto }
  header { width:90px; z-index:7000 }
  #reseaux { position:relative; width:50%; left:25%; height:2em }
  #reseaux div { text-align: center }
  #logo { height:130px }
  #logo div { padding:10px }
  #logo img {
     display: block;
     position: relative;
     margin:0 auto;
     width: auto
  }
  #partenaires div { grid-template-columns: 1fr 1fr; } 
  #partenaires div img { max-width:80%; margin:0 }
  h1 { height:auto; line-height:120%; padding:1em; margin:0 }
 .fr-home #main > h2, .en-homepage #main > h2 { background-image: none; background-color:#e0d52e; font-size:1.2em }
  #main { width:100%; margin:0; padding:1em }

  #partenaires { margin:2em auto }
  .fr-home #main > h1, .en-homepage #main > h1, #liensBas { margin: 0 } 
  footer .tablo div { padding:0.5em }
  footer .tablo { margin:0 }

  #presentation { height:250px } 
  .centre { padding:0 1em }
  #menu_lang { left:25%  }

  .contBas { padding: 1em }


  .formulaire label, .formulaire textarea { width: 100% }
  #haut { float:none; margin:0 }
  /* .ligne { margin:0 } */ 
  #plan { height:300px }
  .bas { position:relative; margin-top:1em }
   #slider .sommaire .cont2 p, .bouton { font-size: 1em }
   #slider .sommaire .cont2 { padding:0 }

  #liens ul { 
    position:fixed;
    z-index:6000;
    width:100%;
    height:100px;
    padding:0; 
    max-width:100%; 
    clip-path: none;
    font-size:0.7em;
    top: unset;
    bottom: 0; 
    left:0;
    grid-auto-flow: column;
    grid-template-columns:none;
  }

  #liens img { width:3em } 
  #news, #news article { grid-template-columns: 1fr }
  .colonne_1, .colonnes_2, .colonnes_3, .colonnes_4 { grid-column:unset }
  #news article.colonne_1 .hovereffect, #news article.colonnes_2 .hovereffect, #news article.colonnes_4 .hovereffect, #news article.colonnes_3 .hovereffect { clip-path:unset }
  .colonnes_2 .hovereffect a img { width: 100%; height: auto }
  /* .hovereffect a img { width:auto; height:100% } */
}


@media only screen and (min-width: 481px) and (max-width: 1024px)  {
  #menu { top:0 }
  #logo { height:190px; max-height:190px }
  /* #logo img { width: 75% } */
  #slider { height:300px }
}


/* Impression */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* ResponsiveSliders */

/*! http://responsiveslides.com v1.55 by @viljamis */

/*.rslides_container p { padding: 1em 0 0 0; text-align: center }

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  width: 100%;
  border: 0;
  }

.rslides {
  margin: 0 auto;
  }

.rslides_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }

.rslides_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0;
  z-index: 99;
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("../../design/themes.gif") no-repeat left top;
  margin-top: -45px;
  }

.rslides_nav:active {
  opacity: 1.0;
  }

.rslides_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }


.rslides_nav:focus {
  outline: none;
  }

.rslides_tabs {
  margin-top: 10px;
  text-align: center;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.rslides_tabs a {
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.rslides_tabs .rslides_here a {
  background: #222;
  background: rgba(0,0,0, .8);
  }

.caption {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  text-align: center;
  background: #000;
  background: rgba(0,0,0, .8);
  color: #fff;
}

@media screen and (max-width: 600px) {
  .github {
    display: none;
  }
}*/

/* Leaflet */

.leaflet-tile {
    /* filter: hue-rotate(20deg) !important; */
    filter: saturate(.2) !important;
}



.mce-content-body {
   padding: 30px !important;
}