:root { --mp-fond: #1A1714; --mp-texte: #F3EEE6; --mp-doux: rgba(243, 238, 230, .74); --mp-trait: rgba(243, 238, 230, .16);
--mp-cyan: #3CC4E6; }
:root .entete .tel { display: none !important; }
:root .entete { column-gap: 12px; }
:root .entete .bouton-menu {
display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 46px; padding: 0 18px 0 16px;
border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: transparent; color: #FFFFFF;
font: 600 15px/1 var(--titre); letter-spacing: 0; text-transform: none; cursor: pointer;
transition: background .25s, color .25s, border-color .25s;
}
@media (hover: hover) { :root .entete .bouton-menu:hover { background: #FFFFFF; color: var(--texte); border-color: #FFFFFF; } }
:root .entete .bouton-menu:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
:root .entete .bouton-menu .mot-menu { font: inherit; min-width: 3.4em; text-align: left; }
.mp-traits { position: relative; flex: none; width: 18px; height: 12px; }
.mp-traits i { position: absolute; left: 0; top: 0; width: 100%; height: 1.75px; border-radius: 2px; background: currentColor;
transition: transform .45s cubic-bezier(.76, 0, .24, 1), opacity .2s, width .3s; }
.mp-traits i:nth-child(2) { top: 5px; }
.mp-traits i:nth-child(3) { top: 10px; width: 62%; }
:root.mp-ouvert .mp-traits i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
:root.mp-ouvert .mp-traits i:nth-child(2) { opacity: 0; }
:root.mp-ouvert .mp-traits i:nth-child(3) { width: 100%; transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1023px), (hover: none) { :root.mp-ouvert { overflow: hidden; } }
:root.mp-ouvert .entete { z-index: 56; background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
:root.mp-ouvert .bande-info, :root.mp-ouvert .marius { visibility: hidden; opacity: 0; }
:root.mp-ouvert .entete { transition: background-color .12s .22s, box-shadow .12s .22s, border-color .12s .22s !important; }
:root.mp-ouvert .bande-info { transition: opacity .12s .22s, visibility 0s .34s !important; }
.mp {
position: fixed; z-index: 52; left: 0; right: 0; bottom: 0; top: calc(var(--sur) + var(--avis) + var(--barre-maquette));
overflow-y: auto; overscroll-behavior: contain; color: var(--mp-texte);
background:
radial-gradient(80% 70% at 92% 6%, rgba(92, 70, 50, .55) 0%, rgba(92, 70, 50, 0) 62%),
radial-gradient(60% 60% at 0% 100%, rgba(64, 48, 36, .5) 0%, rgba(64, 48, 36, 0) 70%),
var(--mp-fond);
visibility: hidden; clip-path: ellipse(150% 0% at 50% 0%);
transition: clip-path .5s cubic-bezier(.76, 0, .24, 1), visibility 0s .5s;
}
:root.mp-ouvert .mp { visibility: visible; clip-path: ellipse(150% 160% at 50% 0%); transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility 0s; }
.mp-cadre {
box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center;
gap: clamp(32px, 6vw, 110px); min-height: 100%; max-width: 1600px; margin: 0 auto;
padding: calc(var(--info) + var(--entete) + clamp(16px, 4vh, 48px)) var(--marge) clamp(24px, 5vh, 56px);
}
.mp-pages { list-style: none; margin: 0; padding: 0; }
.mp-pages li { overflow: hidden; }
.mp-pages li:nth-child(2) { --k: 1; } .mp-pages li:nth-child(3) { --k: 2; } .mp-pages li:nth-child(4) { --k: 3; }
.mp-pages li:nth-child(5) { --k: 4; } .mp-pages li:nth-child(6) { --k: 5; } .mp-pages li:nth-child(7) { --k: 6; }
.mp-pages li:nth-child(8) { --k: 7; }
.mp-pages a {
display: flex; align-items: flex-start; gap: .55em; width: fit-content; max-width: 100%; color: var(--mp-texte); text-decoration: none;
font: 600 clamp(26px, min(5.9vh, 4.4vw), 66px)/1 var(--affiche); letter-spacing: -.012em;
transform: translateY(110%); transition: transform .25s cubic-bezier(.4, 0, 1, 1);
}
:root.mp-ouvert .mp-pages a { transform: none; transition: transform .5s cubic-bezier(.2, .8, .2, 1) calc(.1s + var(--k, 0) * .03s); }
:root .mp-pages a:focus-visible { outline: none; }
.mp-pages a:focus-visible .mp-mot { box-shadow: inset 0 -3px 0 var(--mp-texte); }
.mp-mot { display: inline-block; overflow: hidden; padding: .1em 0; line-height: 1.15; }
.mp-pages a[aria-current] .mp-mot::after { content: ""; display: inline-block; width: .17em; height: .17em; margin-left: .22em; border-radius: 50%; background: var(--mp-cyan); vertical-align: .12em; }
.mp-m { display: inline-block; white-space: nowrap; }
.mp-l { display: inline-block; text-shadow: 0 1.35em 0 var(--mp-cyan); transition: transform .6s cubic-bezier(.65, 0, .35, 1) calc(var(--i, 0) * 18ms); }
.mp-pages a:hover .mp-l, .mp-pages a:focus-visible .mp-l { transform: translateY(-1.35em); }
.mp-autres { display: flex; flex-wrap: wrap; gap: 0 26px; margin: clamp(10px, 2vh, 22px) 0 0; opacity: 0; transition: opacity .2s; }
:root.mp-ouvert .mp-autres { opacity: 1; transition: opacity .5s .35s; }
.mp-autres a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mp-doux); font: 500 16px/1 var(--titre); text-decoration: underline; text-decoration-color: rgba(243, 238, 230, .3); text-underline-offset: 6px; }
.mp-autres a:hover, .mp-autres a[aria-current] { color: var(--mp-texte); text-decoration-color: var(--cyan); }
:root .mp :is(.mp-autres, .mp-cote) a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.mp-cote { display: grid; gap: 22px; align-content: center; opacity: 0; transform: translateY(18px); transition: opacity .2s, transform .25s; }
:root.mp-ouvert .mp-cote { opacity: 1; transform: none; transition: opacity .5s .25s, transform .6s cubic-bezier(.2, .8, .2, 1) .2s; }
.mp-photo { display: none; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-carte, 16px); background: #2A241F; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .mp-photo { display: block; } }
.mp-photo img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
clip-path: inset(100% 0 0 0); transform: scale(1.08); transition: clip-path 0s .6s, transform 0s .6s;
}
.mp-photo img.vue { z-index: 2; clip-path: inset(0 0 0 0); transform: none; transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
.mp-photo.net img { transition: none !important; }
.mp-photo img.plein:not(.vue) { z-index: 1; clip-path: inset(0 0 0 0); transform: none; transition: none; }
.mp-soumission { display: none; }
.mp-joindre { display: grid; gap: 4px; justify-items: start; }
.mp-tel { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--mp-texte); text-decoration: none; font: 700 clamp(22px, 2vw, 30px)/1 var(--titre); font-variation-settings: "wdth" 108; }
.mp-courriel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--mp-doux); text-decoration: none; font: 500 16px/1.2 var(--titre); overflow-wrap: anywhere; }
.mp-tel:hover, .mp-courriel:hover { color: var(--mp-texte); text-decoration: underline; text-underline-offset: 5px; }
.mp-joindre .cb-i { width: 20px; height: 20px; color: var(--cyan); }
.mp-reseaux { display: flex; gap: 10px; margin: 6px 0 0; }
.mp-reseaux .reseau { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--mp-trait); border-radius: 50%; }
.mp-reseaux .reseau:hover { border-color: var(--cyan); }
.mp-reseaux img { width: 20px; height: 20px; }
.mp-rbq { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--mp-doux); font: 500 14px/1.3 var(--titre); }
.mp-rbq .cb-i { width: 16px; height: 16px; }
@media (max-width: 1023px) {
.mp-cadre { gap: 32px; align-items: start; }
.mp-cote { align-content: start; padding-top: 10px; }
}
@media (max-width: 699px) {
:root .entete .bouton-menu { min-height: 44px; padding: 0 14px 0 13px; gap: 9px; font-size: 14px; }
.mp-cadre { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; padding-top: calc(var(--entete) + 14px); padding-bottom: calc(28px + var(--sous, 0px)); }
.mp-pages a { font-size: clamp(27px, 8.2vw, 36px); }
.mp-autres { margin-left: 0; }
.mp-cote { gap: 14px; padding-top: 0; }
.mp-soumission {
display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 999px;
background: var(--cyan); color: #1B1B1B; font: 700 17px/1 var(--titre); text-decoration: none;
}
.mp-soumission .cb-i { width: 18px; height: 18px; }
.mp-joindre { grid-template-columns: auto auto; align-items: center; justify-content: space-between; column-gap: 12px; }
.mp-courriel, .mp-rbq { grid-column: 1 / -1; }
.mp-reseaux { margin: 0; }
.mp-rbq { margin-top: 4px; }
:root .mp { transition: clip-path .45s cubic-bezier(.76, 0, .24, 1), visibility 0s .45s !important; }
:root.mp-ouvert .mp { transition: clip-path .55s cubic-bezier(.76, 0, .24, 1), visibility 0s !important; }
:root .mp-pages a { transition: transform .2s cubic-bezier(.4, 0, 1, 1) !important; }
:root.mp-ouvert .mp-pages a { transition: transform .45s cubic-bezier(.2, .8, .2, 1) calc(.1s + var(--k, 0) * .03s) !important; }
:root .mp-cote, :root .mp-autres { transition: opacity .2s, transform .2s !important; }
:root.mp-ouvert .mp-cote, :root.mp-ouvert .mp-autres { transition: opacity .45s .3s, transform .5s cubic-bezier(.2, .8, .2, 1) .25s !important; }
:root .mp-traits i { transition: transform .4s cubic-bezier(.76, 0, .24, 1), opacity .2s, width .3s !important; }
}
@media (prefers-reduced-motion: reduce) {
:root .mp { clip-path: none; opacity: 0; transition: opacity .25s, visibility 0s .25s !important; }
:root.mp-ouvert .mp { clip-path: none; opacity: 1; transition: opacity .25s, visibility 0s !important; }
:root .mp-pages a, :root .mp-cote, :root .mp-autres, :root .mp-l, :root .mp-photo img, :root .mp-traits i { transition: none !important; }
:root .mp-pages a, :root .mp-cote { transform: none; }
:root .mp-cote, :root .mp-autres { opacity: 1; }
:root .mp-pages a:hover .mp-l { transform: none; }
:root .mp-pages a:hover .mp-mot { box-shadow: inset 0 -3px 0 var(--mp-texte); }
:root .mp-photo img { transform: none; }
}