/* Champagne Viard Laroque — réplique du site Wix.
   Deux mises en page, comme sur Wix : ordinateur (grille de 980 px centrée) et mobile (320 px, mise à l'échelle de l'écran). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 10px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
img { display: block; border: 0; max-width: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid rgb(201, 165, 86); outline-offset: 2px; }

@media (max-width: 767px) { .d { display: none !important; } }
@media (min-width: 768px) { .m { display: none !important; } body { min-width: 980px; } }

.L { position: relative; overflow-x: clip; }
.c, .rt, .im, .btn, .gal, .ss, .vec, .dmenu, .pg { position: absolute; }
.pg img { position: absolute; object-fit: cover; }
.c.flow { position: relative; width: 100%; }
.d > header.flow { position: sticky; top: 0; z-index: 50; background: #fff; }
.m > header.flow { background: #fff; }

/* texte */
.rt { overflow-wrap: break-word; letter-spacing: normal; font-style: normal; text-transform: none; text-decoration: none; }
.rt p, .rt h1, .rt h2, .rt h3, .rt h4, .rt h5, .rt h6, .rt ul, .rt ol, .rt blockquote { margin: 0; padding: 0; }
.rt ul, .rt ol { padding-left: 1.3em; }
.rt a { cursor: pointer; }

/* images et arrière-plans */
.im { display: block; overflow: hidden; }
.im img { position: absolute; }
.bgm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bgm img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bgfix { clip-path: inset(0); }
.bgfix > .bgm { overflow: visible; }
.bgfix > .bgm img { position: fixed; top: 0; left: 0; width: 100%; }
.ov { position: absolute; inset: 0; pointer-events: none; }
.vec svg { width: 100%; height: 100%; display: block; }

/* boutons */
.btn { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn span { transition: color .2s ease; }
.btn .bi { display: inline-flex; margin-left: 8px; } .btn .bi svg { width: 100%; height: auto; fill: currentColor; }

/* diaporama d'accueil et galeries : fondu enchaîné d'une seconde */
.ss { overflow: hidden; }
.ss > .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s cubic-bezier(.37, 0, .63, 1); }
.ss > .slide.on { opacity: 1; z-index: 1; }
.gal { overflow: hidden; }
.gal .gi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s cubic-bezier(.37, 0, .63, 1); }
.gal .gi.on { opacity: 1; }
.gal .gc { position: absolute; z-index: 2; font: 12px arial, helvetica, sans-serif; color: rgb(47, 46, 46); }

/* menu ordinateur */
.dmenu { z-index: 10; }
.dmenu > ul { list-style: none; margin: 0; padding: 0; display: flex; height: 28px; }
.dmenu > ul > li { position: relative; height: 28px; text-align: center; flex: none; }
.dmenu > ul > li + li { border-left: 1px solid rgb(96, 94, 94); }
.dmenu > ul > li > a { display: inline-block; line-height: 28px; padding: 0 10px; font: 12px "Avenir 35", sans-serif; color: #000; transition: color .4s; white-space: nowrap; }
.dmenu > ul > li > a:hover { color: rgb(44, 36, 19); }
.dmenu > ul > li.cur > a { color: rgb(201, 165, 86); }
.dmenu .sub { position: absolute; top: 35px; left: 0; width: 100%; margin: 0; padding: 0; list-style: none; background: #fff;
  visibility: hidden; opacity: 0; transition: visibility 0s .2s, opacity .2s; }
.dmenu .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.dmenu li:hover > .sub, .dmenu li:focus-within > .sub { visibility: visible; opacity: 1; transition-delay: 0s; }
.dmenu .sub li { height: 28px; }
.dmenu .sub li:first-child { height: 27px; }
.dmenu .sub li + li { border-top: 1px solid rgb(96, 94, 94); }
.dmenu .sub a { display: block; line-height: 27px; padding: 0 6px; font: 12px "Avenir 35", sans-serif; color: #000; transition: color .4s; white-space: nowrap; }
.dmenu .sub a:hover { color: rgb(44, 36, 19); }
.dmenu .sub a[aria-current] { color: rgb(201, 165, 86); }

/* menu mobile */
.mtoggle { position: absolute; width: 50px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 100001; }
.mtoggle span { position: absolute; left: 14px; width: 22px; height: 2px; background: rgb(47, 46, 46); transition: transform .25s ease-in-out, opacity .25s ease-in-out; }
.mtoggle span:nth-child(1) { top: 17px; }
.mtoggle span:nth-child(2) { top: 24px; }
.mtoggle span:nth-child(3) { top: 31px; }
.mtoggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mtoggle.open span:nth-child(2) { opacity: 0; }
.mtoggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
html.mopen { overflow: hidden; }
html.mopen .mtoggle { position: fixed; }
.mmenu { position: fixed; inset: 0; z-index: 100000; background: rgba(255, 255, 255, .77); overflow-y: auto; }
.mmenu nav { position: absolute; top: 67px; left: calc(50% - 129px); width: 257px; padding-bottom: 40px; }
.mmenu ul { list-style: none; margin: 0; padding: 0; }
.mmenu nav > ul > li { background: #fff; border-bottom: 1px solid #000; }
.mmenu .row { display: flex; align-items: center; height: 48px; }
.mmenu .row a { flex: 1; padding-left: 21px; font: 12px "Avenir 85", sans-serif; line-height: 48px; color: #000; }
.mmenu li.cur > .row a { color: rgb(201, 165, 86); }
.mmenu .chev { flex: none; width: 50px; height: 48px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.mmenu .chev svg { width: 12px; height: 7px; transition: transform .2s; }
.mmenu li.open .chev svg { transform: rotate(180deg); }
.mmenu .msub { display: none; }
.mmenu li.open .msub { display: block; }
.mmenu .msub a { display: block; height: 48px; line-height: 48px; padding-left: 21px; font: 10px "Libre Baskerville", serif; color: #000; }

/* bouton haut de page (mobile) */
.totop { position: fixed; right: 20px; top: 60%; width: 43px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 90;
  opacity: 0; transition: opacity .3s; }
.totop.on { opacity: 1; }
.totop svg { width: 100%; height: 100%; display: block; border: 1px solid rgb(218, 218, 218); }
@media (min-width: 768px) { .totop { display: none; } }

/* porte d'âge */
#gate { position: fixed; inset: 0; z-index: 200000; background: rgb(47, 46, 46); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s ease; }
#gate[hidden] { display: none; }
#gate.in { opacity: 1; }
#gate .gbox { position: relative; flex: none; overflow: hidden; }
html.gated { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ss > .slide, .gal .gi, #gate, .totop { transition: none; }
}