/*
Theme Name: Theme by utøpeak
Theme URI: https://www.utopeak.agency
Author: utøpeak.agency
Author URI: https://www.utopeak.agency
Description: Création sur mesure pour <strong>le chef Fréféric Molina</strong> !
Version: 2025
*/

 @import url("https://use.typekit.net/opp6zxg.css");
:root {
    --vert: #224039;
    --jaune: #c3a90f;
    --white: #FFF;
    --beige: #f9f5f1;
    --beige1: #eee9e2;
}

/*---------- GENERAL ----------*/
* {outline: 0;margin: 0;}
body {font-family: sans-serif; font-size: 1.1em;font-weight: 200;margin: 0;text-wrap: balance;color: var(--vert);background: url(img/texture.png) var(--beige) 50%;background-blend-mode: multiply;}
.green {color: var(--white);background: url(img/texture.png) var(--vert);padding: 13em 0; background-blend-mode: multiply;}
.white {background: url(img/texture.png) var(--beige1) 50%;background-blend-mode: multiply;}
a {color:var(--vert);transition: 0.25s ease-out;text-decoration: none;}
a:hover {color: var(--jaune);}

/*---------- Etoile ----------*/
.txtetoile:after, .etoile:after{
    content: '';
    width: 38px;
	height:18px;
    display: inline-block;
    transform: translate(0, -20px);
    margin-left: 5px;
	background: no-repeat url("img/etoiles-michelin-verte.png");
	background-size: cover;
}


/*---------- TYPOGRAPHIE ----------*/
h1, h2, h3, h4, .focus, .footer strong, .submenu-content a, #menumm {font-family: "gyst-variable", sans-serif;font-weight: 100;letter-spacing: .1em;}
h1 {font-size: 3em;}
h2 {font-size: 2em}
h3 {font-size: 1.5em}
h4 {font-size: 1.2em; font-weight: 600;}
p {line-height: 1.4em;}
.focus {border-left: solid 2px var(--jaune);font-weight: 300;}
.focus p {padding-left: 1em;font-size: 1.25em;}

.copyright {font-size: 11px;}
.footer {font-size: 14px;}
.footer strong {font-size: 18px; font-weight: 300; margin-bottom: 10px;display: block;}
.footer .gloss p{font-size: 6vw;line-height: 0.8em;}

blockquote {font-family: "gyst-variable", sans-serif;font-weight: 100;letter-spacing: .1em;font-size: 1.5em;line-height: 1.4em;}
blockquote span {font-size: 0.7em;display: block;text-align: end;}
h2 .gloss, .gloss {font-family: "gloss-drop", cursive;font-size: 4em;letter-spacing: 0;display: block;line-height: 0.5em;color: var(--jaune);}

@media all and (max-width: 768px){
body {font-size: 1em}
h1 {font-size: 2em;}
h2 {font-size: 1.75em}
h3 {font-size: 1.5em}
h4 {font-size: 1.2em;}
p {line-height: 1.4em;}
.elementor-element {padding: 0 1em;}
.focus p {padding-left: 1em;font-size: 0.95em;}
blockquote {font-size: 1em;line-height: 1.4em;}
h2 .gloss, .gloss {font-size: 2em;}
}


/*---------- LIEN ----------*/
.link a, p a{
	text-decoration: none;
	position: relative;
    border-bottom: 1px solid var(--jaune);
    color: var(--vert);
    font-weight: 500;
}
.link a::after, p a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--jaune);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.link a:hover::after, p a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/*---------- BOUTON ----------*/
.elementor-button {background-color: var(--vert);border-radius: 55px;transition: 0.25s ease-out;}
.elementor-button:hover {background-color: var(--jaune);color: var(--white);}


.btn-clair .elementor-button {background-color: var(--beige);border-radius: 55px;transition: 0.25s ease-out;border: solid 1px var(--vert);color:var(--vert);}
.btn-clair .elementor-button:hover {background-color: var(--jaune);color: var(--white);border: solid 1px var(--jaune);}


/* ————————————————————————— MENU ————————————————————————— */
.reserver a{background-color: var(--vert);color: var(--white);}

#menumm .e-n-menu-content{color: var(--white);background: url(img/texture.png) var(--vert);background-blend-mode: multiply;font-size: 2.5vw;padding: 0;}
#menumm .e-n-menu-content li{font-size: 0.5em;list-style: none;padding-bottom: 15px;}
#menumm .e-n-menu-content ul{padding: 15px 0 20px 0; border-top: solid 0.5px #c3a90f;padding-inline-start: 0;}
#menumm .e-n-menu-content li a {color: var(--white);}
#menumm .e-n-menu-content li a:hover {color: var(--jaune);}

.mobilemenu, .mobilemenu a {color: white;}
.mobilemenu .gloss a::after {content: unset;}
.mobilemenu li{list-style: none;padding-bottom: 10px;}
.mobilemenu .gloss, .mobilemenu .gloss a{color: var(--jaune)!important;padding: 5px 0;border: none;}

/* ————————————————————————— MANGER - DORMIR ————————————————————————— */
.manger {margin-top: 50px;}
.manger .gloss {font-size: 7em;position: absolute;top:-90px;z-index: 10;}
.manger h2 {text-wrap:wrap;font-size: 3em;}
.manger .link a{padding-top: 10px;display: inline-block;}

@media all and (max-width: 768px){
    .manger .gloss {font-size: 5em;position: absolute;top:-90px;left: -20px; z-index: 10;}
    .manger h2 {font-size: 2em;}
}