/* cmsms stylesheet: Main modified: vendredi 12 décembre 2025 15:15:13 */
 /* turquoise */
 /* brun */
 /* vert */
 /* vert clair */
 /* vert fonce */




* {
   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: 400
}


.m-0 {
   margin: 0 !important;
}
.mb-0 {
   margin-bottom: 0 !important;
}
.p-0 {
   padding: 0 !important;
}

@media (min-width: 600px) {
   .hide-for-medium {
      display: none;
   }
}
@media (min-width: 1024px) {
   .hide-for-large {
      display: none;
   }
}

/* 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%
}
img.medium-image-decroche-left {
   @media (min-width: 900px) {
      position: relative;
      width: 120%;
      top: -70px;
      margin-left: -70px;
      margin-bottom: -70px;
   }
}
img.medium-image-decroche-right {
   @media (min-width: 900px) {
      position: relative;
      width: 120%;
      top: -70px;
      margin-right: -70px;
      margin-bottom: -70px;
   }
}



.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 !important
}
.vertclair {
   color: #e0d52e !important
}
.vertfonce {
   color: #61720A !important
}

.fdvert {
   background-color: #969e27
}

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

.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;
}




/*IMGS*/
.img-shadow-turquoise {
   box-shadow: #00949e 18px 18px 0;
}
.img-shadow-left-turquoise {
   box-shadow: #00949e -18px 18px 0;
}
.img-shadow-brun {
   box-shadow: #785116 18px 18px 0;
}
.img-shadow-left-brun {
   box-shadow: #785116 -18px 18px 0;
}
.img-shadow-vertclair {
   box-shadow: #e0d52e 18px 18px 0;
}
.img-shadow-left-vertclair {
   box-shadow: #e0d52e -18px 18px 0;
}
.img-shadow-vert {
   box-shadow: #969e27 18px 18px 0;
}
.img-shadow-left-vert {
   box-shadow: #969e27 -18px 18px 0;
}
.img-shadow-vertfonce {
   box-shadow: #61720A 18px 18px 0;
}
.img-shadow-left-vertfonce {
   box-shadow: #61720A -18px 18px 0;
}








/* 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;
   border-bottom: 1px solid #ddd;
   max-width: 50%;
   margin: 1em auto;
   padding: 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: 125%
}

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
}

.text-left {
   text-align: left;
}
.text-center {
   text-align: center;
}
.text-right {
   text-align: right;
}
@media (min-width: 600px) {
   .medium-text-left {
      text-align: left;
   }
   .medium-text-center {
      text-align: center;
   }
   .medium-text-right {
      text-align: right;
   }
}

/* 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: 65%;
   top: 0;
   right: 0;
   z-index: 9000;
   transition-delay: 0s;
   transition-duration: 0.8s;
   transition-property: all;
   transition-timing-function: ease;
}

#main {
   margin: 0em 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;
   width: 100%;
   justify-items: center;
   align-items: center;
   margin-top: 1.5em;

   @media (min-width: 900px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
   }
}

#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: 3em;
   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-3q1q {
   display: grid;
   grid-template-columns: 3fr 1fr;
   grid-gap: 2em;
   grid-column-start: 1;
   grid-column-end: -1;
   margin-bottom: 2em;

   &.medium-grille-order-revert {
      @media (min-width: 768px) {
         grid-template-columns: 1fr 3fr;
      }
   }
}
.grille2c-1q3q {
   display: grid;
   grid-template-columns: 1fr 3fr;
   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
}

.grille-align-center {
   align-items: center;
}

@media (min-width: 768px) {
   .medium-grille-order-revert {

      > div:nth-child(1) {
         order: 1;
      }
   }
}




#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 */







/********************************************************/
/*BLOCKS*/
/********************************************************/
.block {
   padding: 30px;
   margin: 0 0 40px;
   text-align: left;

   @media (min-width: 1024px) {
      padding: 40px;
   }

   h1 {
      display: block;
      top: 0;
      margin-bottom: 30px;
      padding: 0;
      font-size: calc(24px + .5dvw);
      background: none;
      line-height: 1.1;
   }

   &.bg-dark {
      h1, h2, h3, h4, p, li {
         text-align: left;
         color: white;
      }
   }

   &.bg-turquoise {
      background-color: #00949e;
   }

   &.bg-vertfonce {
      background-color: #61720A;
   }

   &.bordered-vertclair {
      margin-left: auto;
      margin-right: auto;
      border: 5px solid #e0d52e;
      max-width: 100%;

      @media (min-width: 900px) {
         max-width: 90%;
      }
   }
}













/*BOUTONS CONTENUS*/
.btn {
   text-align: center;
   display: inline-block;
   color: white;
   padding: 12px 20px;
   text-transform: uppercase;
   background-color: #00949e;
   font-weight: bold;
   font-size: 16px;

   @media (min-width: 600px) {
      padding: 12px 30px;
   }

   &:hover {
      color: white;
      opacity: .8;
   }

   &.bg-brun {
      background-color: #785116;
   }
   &.bg-vert {
      background-color: #969e27;
   }
   &.bg-vertclair {
      background-color: #e0d52e;
      color: black;
   }
   &.bg-vertfonce {
      background-color: #61720A;
   }
}










/* 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%
}

#cyclePrev,
#cycleNext {
   position: absolute;
   top: calc(50% - 32px);
   cursor: pointer;
   font-size: 32px;
   color: white;

   &:hover {
      color: #e0d52e;
   }

   @media (min-width: 600px) {
      top: calc(50% - 50px);
      font-size: 50px;
   }
}
#cyclePrev {
   left: 0;
}
#cycleNext {
   right: 0;
}

.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;

   .cont {
      &:before {
         content: '';
         display: block;
         position: absolute;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
         background: rgba(0,0,0,.3);
      }

      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      padding-left: 105px;

      @media (min-width: 1025px) {
         padding-left: 200px;
      }
      @media (min-width: 1401px) {
         padding-left: 400px;
      }
   }

   .cont2 {
      display: table;
      height: auto;
      width: auto;
      padding: 1em;

      > :last-child {
         padding-bottom: 0;
         margin-bottom: 0;
      }

      h1, h2, h3, h4, p {
         text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
      }

      h2 {
         @media (min-width: 1100px) {
            font-size: calc(30px + 1.2dvw);
         }
      }
      h3 {
         @media (min-width: 1100px) {
            font-size: calc(18px + 1dvw);
         }
      }

      p {
         display: table-cell;
         vertical-align: middle;
         padding: 0.5em;
         font-size: 1.4em
      }
   }
}

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



/* 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;

   &:hover {
      color: #00949e;
   }
}

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






/****************************************************/
/*CAROUSEL NEWS VITICULTEURS*/
/****************************************************/
.cycle-slideshow-carousel {
   div {
      vertical-align: top;
      padding: 7px;
      text-align: center;

      @media (min-width: 600px) {
         padding: 30px;
      }

      img {
         border-radius: 300px;
         margin-bottom: 12px;
      }

      h3 {
         text-align: center !important;
         white-space: wrap;

         @media (max-width: 599px) {
            font-size: 13px;
         }
      }
   }

}














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

h1 {
   position: relative;
   top: -2em;
   display: inline-block;
   padding: 0 3em;
   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%;
}

h3 {
   margin-bottom: 1em;

   @media (min-width: 1024px) {
      font-size: 24px
   }
}

h4 {
   margin-bottom: 1em;
}

/* 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;

   @media (min-width: 1024px) {
      font-size: 32px;
   }
}

h2 a {
   color: #969e27
}

h2 a:hover {
   color: #785116
}

h3 {
   color: #00949e;
   padding: 0 0 0.5em 0;
   line-height: 130%;
   font-weight: 300;
}

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 .block,
.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:1599px) {
   #menu {
      width: 65%
   }

}
@media only screen and (min-width:1600px) {
   #menu {
      width: 55%
   }

}


@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;
   }

   .grille2c-3q1q {
      grid-template-columns: 1fr;
   }
   .grille2c-1q3q {
      grid-template-columns: 1fr;
   }

   #lightgallery .col {
      flex-basis: 100%;
      margin: 0;
      padding-bottom: 1em
   }

   #slider {
      height: 350px
   }

   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 (max-width: 900px) {
   .grille3c-33pc {
      grid-template-columns: 1fr;
   }
}

@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: 400px
   }

}

/* 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;
   }

}


/* Leaflet */

.leaflet-tile {

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

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