/* Strofilia : base commune (remise à zéro de Hello Elementor, modèle de conteneur d'Elementor, en-tête, pied de page,
   bandeau, pages d'Arthur, 404). Valeurs relevées sur le site actuel (règles Elementor et styles calculés, 3/11/2026).
   Points de rupture d'Elementor : mobile <= 767 px, tablette 768 à 1024 px, bureau >= 1025 px. */

:root {
  --jaune: #FCBE36;      /* couleur principale du kit */
  --noir: #131313;       /* secondaire */
  --texte: #000;         /* texte */
  --accent: #FFE3A3;     /* accentuée */
  --blanc: #fff;
  --inter: "Inter", sans-serif;
  --quicksand: "Quicksand", sans-serif;
  --systeme: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ---------------------------------------------------------------- remise à zéro (Hello Elementor) */
*, ::before, ::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background-color: #fff; color: #333; font-family: var(--systeme); font-size: 1rem; font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { color: inherit; font-family: inherit; font-weight: 500; line-height: 1.2; margin-block: .5rem 1rem; }
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; }
p { margin-block: 0 .9rem; }
a { background-color: transparent; color: #c36; text-decoration: none; }
a:active, a:hover { color: #336; }
b, strong { font-weight: bolder; }
img { border-style: none; height: auto; max-width: 100%; }
ul, ol { margin-block: 0; }
li, ul, ol { background: transparent; border: 0; font-size: 100%; outline: 0; vertical-align: baseline; }
label { display: inline-block; line-height: 1; vertical-align: middle; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; }
button, select { text-transform: none; }
table { background-color: transparent; border-collapse: collapse; border-spacing: 0; font-size: .9em; margin-block-end: 15px; width: 100%; }
table td, table th { border: 1px solid hsl(0 0% 50% / .502); line-height: 1.5; padding: 15px; vertical-align: top; }
table th { font-weight: 700; }
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: hsl(0 0% 50% / .071); }
table tbody tr:hover > td, table tbody tr:hover > th { background-color: hsl(0 0% 50% / .102); }
.ico { display: block; width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
.sr, .lien-evitement { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal !important; border: 0; clip-path: inset(50%); }
.lien-evitement:focus { z-index: 100000; left: 5px; top: 5px; width: auto; height: auto; padding: 15px 23px 14px; clip: auto !important; clip-path: none;
  background-color: #eee; color: #333; font-size: 1em; line-height: normal; text-decoration: none; }

/* ---------------------------------------------------------------- conteneurs (même modèle qu'Elementor)
   .e : conteneur flex. Réglages par variables : --w (largeur), --fd (direction), --jc, --ai, --fw (retour à la ligne),
   --g (écart), --pt/--pr/--pb/--pl (marges internes, 10 px par défaut), --mt/--mb (marges externes).
   .e.boite : contenu centré dans .dedans, limité à --cw (1140 px par défaut). Au mobile, largeur 100 % et retour à la ligne
   (--fwm), comme Elementor. */
.e {
  --w: 100%; --cw: 1140px; --pt: 10px; --pr: 10px; --pb: 10px; --pl: 10px; --mt: 0px; --mb: 0px; --g: 20px; --rg: var(--g); --cg: var(--g);
  --fd: column; --jc: normal; --ai: normal; --fw: nowrap; --grow: 0; --shrink: 1; --minh: initial; --ta: initial;
  display: flex; position: relative; min-width: 0; width: var(--w); min-height: var(--minh);
  flex: var(--grow) var(--shrink) auto; margin-block: var(--mt) var(--mb);
  padding: var(--pt) var(--pr) var(--pb) var(--pl); text-align: var(--ta);
  flex-direction: var(--fd); flex-wrap: var(--fw); justify-content: var(--jc); align-items: var(--ai); gap: var(--rg) var(--cg);
}
.e.boite { flex-direction: column; flex-wrap: nowrap; justify-content: normal; align-items: normal; gap: 0; padding-block: 0; }
.e.boite > .dedans { display: flex; flex: 1 1 auto; width: 100%; max-width: min(100%, var(--cw)); height: 100%; margin: 0 auto; padding-block: var(--pt) var(--pb);
  flex-direction: var(--fd); flex-wrap: var(--fw); justify-content: var(--jc); align-items: var(--ai); gap: var(--rg) var(--cg); text-align: var(--ta); }
main > .e, .s-racine { max-width: min(100%, var(--w)); margin-inline: auto; }
.e > :not(.e):not(.dedans), .e > .dedans > :not(.e) { max-width: 100%; }
.e.voile::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.e.voile > * { position: relative; }
@media (max-width: 767px) {
  .e.e { --w: 100%; --fw: var(--fwm, wrap); } /* double classe : l'emporte sur les largeurs du bureau, comme dans Elementor */
}

/* ---------------------------------------------------------------- éléments simples (réglages par défaut d'Elementor) */
.titre-el { margin: 0; padding: 0; line-height: 1; font-family: var(--inter); font-weight: 600; color: var(--jaune); }
.texte-el { font-family: var(--inter); font-weight: 400; }
.bouton-boite { text-align: center; }
.bouton { display: inline-block; font-family: var(--inter); font-size: 15px; font-weight: 500; line-height: 1; text-transform: uppercase;
  padding: 15px 40px; border: 2px solid #fff; border-radius: 25px; text-align: center; transition: all .3s; }
.bouton-blanc { background-color: #fff; color: var(--texte); }
.bouton-blanc:hover, .bouton-blanc:focus { background-color: transparent; color: #fff; border-color: #fff; }
.bouton-contour { background-color: transparent; color: #fff; border-color: #fff; }
.bouton-contour:hover, .bouton-contour:focus { background-color: #fff; color: var(--texte); border-color: #fff; }
.bouton-jaune { background-color: var(--jaune); color: var(--texte); border-color: var(--jaune); }
.bouton-jaune:hover, .bouton-jaune:focus { background-color: var(--jaune); color: var(--texte); border-color: var(--jaune); }
@media (max-width: 767px) { .bouton { font-size: 14px; } }

/* filet simple (widget « diviseur ») */
.filet { padding-block: 15px; display: flex; justify-content: center; }
.filet span { display: block; width: 15%; border-top: 1px solid var(--filet, #fff); }

/* titre de section entre deux paires de filets */
.titre-filets { --tf-titre: 13%; --tf-filet: 25%; --tf-couleur: var(--jaune);
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; padding: 10px; width: 100%; }
.titre-filets .tf-filets { display: flex; flex-direction: column; gap: 5px; padding: 10px; width: 50%; flex: 0 1 auto; min-width: 0; }
.titre-filets .tf-filets span { display: block; padding-block: 2px; }
.titre-filets .tf-filets span::before { content: ""; display: block; width: var(--tf-filet); border-top: 1px solid var(--tf-couleur); }
.titre-filets .tf-g span::before { margin-left: auto; }
.titre-filets .tf-titre { width: var(--tf-titre); max-width: var(--tf-titre); flex: 0 1 auto; margin: 0; padding: 0; line-height: 1; text-align: center;
  font-family: var(--quicksand); font-size: 28px; font-weight: 600; text-transform: uppercase; color: var(--accent); }
@media (max-width: 767px) {
  .titre-filets .tf-filets { width: var(--tf-filets-m, 25%); }
  .titre-filets .tf-filets span::before { width: 100%; }
  .titre-filets .tf-titre { width: 100%; max-width: 100%; }
}
/* apparition (fadeInUp / fadeInLeft / fadeInRight d'Elementor, « animated-fast ») */
@media (prefers-reduced-motion: no-preference) {
  .js .titre-filets:not(.vu) .tf-g, .js .titre-filets:not(.vu) .tf-d, .js .titre-filets:not(.vu) .tf-titre { opacity: 0; }
  .js .titre-filets.vu .tf-g { animation: entreGauche .5s both; }
  .js .titre-filets.vu .tf-d { animation: entreDroite .5s both; }
  .js .titre-filets.vu .tf-titre { animation: entreHaut .5s both; }
}
@keyframes entreGauche { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes entreDroite { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes entreHaut { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }

/* liste à icônes (widget « liste d'icônes ») */
.liste-ico { list-style: none; margin: 0; padding: 0; --ico: 14px; }
.liste-ico li { display: flex; align-items: center; font-size: inherit; }
.liste-ico li + li { margin-top: 5px; }
.liste-ico li:not(:last-child) { padding-bottom: 5px; }
.liste-ico a, .liste-ico li > span { display: flex; align-items: center; font-family: var(--inter); font-size: 14px; font-weight: 400; line-height: 1.5; }
.liste-ico .ico { width: var(--ico); height: var(--ico); margin-right: calc(var(--ico) * .25); fill: var(--jaune); }
.liste-ico .ico + span { padding-left: 5px; }
.liste-ico.en-ligne { display: flex; flex-wrap: wrap; margin-inline: -5px; }
.liste-ico.en-ligne li { margin: 0 5px; padding: 0; }

/* ---------------------------------------------------------------- en-tête */
.entete { position: relative; }
.entete .dedans { display: flex; flex-direction: row; width: 100%; max-width: min(100%, 1400px); margin: 0 auto; }
.barre-haut { position: relative; z-index: 999; background-color: var(--jaune); }
.bh-infos { list-style: none; margin: 0; padding: 10px 5px; width: 65%; flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; }
.bh-infos li, .bh-adresse li { display: flex; align-items: center; margin: 0 5px; }
.bh-infos a, .bh-adresse a { display: flex; align-items: center; font-family: var(--inter); font-size: 14px; line-height: 1.5; color: var(--noir); }
.bh-infos .ico, .bh-adresse .ico { width: 14px; height: 14px; margin-right: 3.5px; fill: var(--noir); }
.bh-adresse .ico { width: 13px; height: 13px; margin-right: 3.25px; }
.bh-infos .ico + span, .bh-adresse .ico + span { padding-left: 5px; }
.bh-droite { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 20px; padding: 10px; width: 50%; flex: 0 1 auto; min-width: 0; }
.bh-adresse { list-style: none; margin: 0; padding: 0; display: flex; }
/* comme les widgets Elementor : l'adresse et les icônes rétrécissent ensemble, en proportion de leur largeur ;
   faute de place, les deux icônes passent l'une sous l'autre */
.bh-adresse li { margin: 0; }
.bh-reseaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; }
.bh-reseaux a { display: flex; font-size: 16px; color: var(--texte); }
.bh-reseaux .ico { width: 16px; height: 16px; fill: var(--texte); }
.barre-nav { position: relative; z-index: 999; }
.barre-nav .dedans { align-items: center; }
.bn-logo, .bm-logo { padding: 10px; flex: 0 1 auto; min-width: 0; }
.bn-logo { width: 10%; }
.bn-logo .logo img, .bm-logo .logo img { display: block; width: 50px; }
.bn-menu { width: 80%; padding: 10px; flex: 0 1 auto; min-width: 0; }
.bn-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.bn-menu li { display: flex; }
.bn-menu a { position: relative; display: flex; align-items: center; padding: 4px 0; margin: 0 12.5px; font-family: var(--inter); font-size: 15px; font-weight: 400;
  line-height: 20px; text-transform: uppercase; color: #C9C9C9; white-space: nowrap; transition: color .3s; }
.bn-menu li:first-child a { margin-left: 0; }
.bn-menu li:last-child a { margin-right: 0; }
.bn-menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: var(--accent); opacity: 0; transition: opacity .3s; }
.bn-menu a:hover, .bn-menu a:focus, .bn-menu a.actif { color: var(--accent); }
.bn-menu a:hover::after, .bn-menu a:focus::after, .bn-menu a.actif::after { opacity: 1; }
.bn-langues { width: 10%; padding: 10px; flex: 0 1 auto; min-width: 0; }
.bn-langues ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; }
.bn-langues li { display: flex; height: 22.625px; } /* boîte du sélecteur de langue Elementor : drapeau 2,625 px sous le haut */
.bn-langues li + li { margin-left: 15px; }
.bn-langues a { display: flex; padding: 2.625px 0 0; }
.drapeau { display: block; width: 20px; height: 20px; object-fit: cover; border-radius: 100px; }
.barre-mobile { display: none; position: relative; z-index: 999; }
/* en-tête EN (Elementor 882) : menu en blanc, icônes un peu plus grandes */
html[lang^="en"] .bn-menu a { color: #fff; }
html[lang^="en"] .bn-menu a:hover, html[lang^="en"] .bn-menu a:focus, html[lang^="en"] .bn-menu a.actif { color: var(--accent); }
html[lang^="en"] .bh-reseaux .ico { width: 19px; height: 19px; }
html[lang^="en"] .bh-adresse .ico { width: 14px; height: 14px; margin-right: 3.5px; }
@media (max-width: 1024px) {
  .bh-infos { width: 40%; }
  .bh-droite { width: 60%; gap: 20px; }
  .bh-infos a, .bh-adresse a { font-size: 12px; }
  .bh-infos .ico, .bh-adresse .ico { width: 12px; height: 12px; margin-right: 3px; }
  .bh-reseaux { gap: 0 7px; }
  .bh-reseaux .ico, html[lang^="en"] .bh-reseaux .ico { width: 14px; height: 14px; }
  html[lang^="en"] .bh-adresse .ico { width: 12px; height: 12px; margin-right: 3px; }
  .bn-logo { width: 20%; }
  .bn-menu { width: 75%; }
  .bn-langues { width: 20%; }
}
@media (max-width: 767px) {
  .bh-infos { width: 100%; padding: 5px 0; justify-content: center; text-align: center; }
  .bh-infos a { font-size: 12px; justify-content: center; }
  .bh-droite { display: none; }
  .barre-nav { display: none; }
  .barre-mobile { display: block; }
  .barre-mobile .dedans { align-items: center; }
  .bm-burger { width: 25%; padding: 10px; flex: 0 1 auto; }
  .bm-logo { width: 50%; }
  .bm-logo .logo { display: block; width: 50px; margin: 0 auto; }
  .bm-langue { width: 25%; padding: 10px; flex: 0 1 auto; }
}
/* menu mobile */
.burger { display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; padding: 0; margin-right: auto; border: 0; border-radius: 3px;
  background: rgba(0, 0, 0, .05); color: #fff; font-size: 22px; cursor: pointer; }
.burger .ico { width: 22px; height: 22px; fill: currentColor; }
.burger .fermer, .burger[aria-expanded="true"] .ouvrir { display: none; }
.burger[aria-expanded="true"] .fermer { display: block; }
.burger:hover, .burger:focus, .burger[aria-expanded="true"] { color: var(--jaune); }
.menu-deroulant { position: absolute; left: 0; top: 100%; width: 100%; margin-top: -9px; background: #fff; z-index: 9997;
  max-height: 0; overflow: hidden; transform: scaleY(0); transform-origin: top; transition: max-height .3s, transform .3s; }
.menu-deroulant.ouvert { max-height: 100vh; transform: scaleY(1); }
.menu-deroulant ul { list-style: none; margin: 0; padding: 0; }
.menu-deroulant a { display: flex; padding: 5px 20px; font-family: var(--inter); font-size: 14px; font-weight: 400; line-height: 20px;
  text-transform: uppercase; color: var(--noir); }
.menu-deroulant a:hover, .menu-deroulant a:focus { color: var(--accent); }
.menu-deroulant a.actif { color: var(--jaune); }
/* menu tablette (768 à 1024 px), comme le widget de navigation Elementor : bouton centré, liste pleine largeur
   10 px sous le bouton (barre de navigation de 69,5 px : 50 % + 16,5 px + 10 px), liens en 15 px décalés de 100 px */
.burger-tablette, .menu-tablette { display: none; }
@media (min-width: 768px) and (max-width: 1024px) {
  .bn-menu { display: flex; align-items: center; }
  .bn-menu > ul { display: none; }
  .burger-tablette { display: flex; margin: 0 auto; }
  .menu-tablette { display: block; top: calc(50% + 26.5px); margin-top: 0; }
  .menu-tablette a { padding: 5px 100px; font-size: 15px; }
}
/* langue (mobile) : liste déroulante sous le drapeau */
.langue-choix { position: relative; display: flex; justify-content: flex-end; }
.langue-actuelle, .langue-liste a { display: flex; align-items: center; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--inter); font-size: 16px; font-weight: 600; line-height: 24px; color: #fff; }
.langue-actuelle .code, .langue-liste .code { padding-left: 10px; }
.langue-actuelle .caret { width: 10px; height: 1em; visibility: hidden; } /* aujourd'hui, la police d'icônes n'est pas chargée : flèche invisible */
.langue-liste { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; right: 0; width: 60px; overflow: hidden; max-height: 0; transition: max-height .3s; }
.langue-actuelle[aria-expanded="true"] + .langue-liste { max-height: 40px; }
.langue-liste a { width: 60px; }

/* ---------------------------------------------------------------- bandeau de réservation (ex-functions.php) */
.sto-banner { margin: 0 0 24px; padding: 18px 24px; border-radius: 4px; background: #FDBE2D; color: #1a1a1a; text-align: center;
  font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; cursor: pointer; border-bottom: 3px solid #1a1a1a;
  transition: background .15s, transform .15s; }
.sto-banner:hover { background: #f0ae12; transform: translateY(-1px); }
.sto-banner:focus { outline: 3px solid #1a1a1a; outline-offset: 2px; }

/* ---------------------------------------------------------------- pied de page */
.pied .dedans { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; max-width: min(100%, 1400px); margin: 0 auto; }
.pp-r1 { background-color: #1E1E1E; padding-top: 40px; }
.pp-r1 .dedans { align-items: center; }
.pp-r2 { background-color: #1E1E1E; padding-block: 40px; }
.pp-r3 { background-color: #111010; padding-inline: 10px; }
.pp-r3 .dedans { padding-block: 10px; }
.pp-col { display: flex; flex-direction: column; gap: 20px; padding: 10px; width: 33%; flex: 0 1 auto; min-width: 0; text-align: center; }
.pp-liste { list-style: none; margin: 0; padding: 0; }
.pp-liste li { display: flex; justify-content: center; align-items: center; }
.pp-liste li + li { margin-top: 5px; }
.pp-liste li:not(:last-child) { padding-bottom: 5px; }
.pp-liste a, .pp-liste span { display: flex; align-items: center; font-family: var(--inter); font-size: 14px; font-weight: 400; line-height: 1.5; color: #fff; }
.pp-liste .ico { width: 14px; height: 14px; margin-right: 3.5px; fill: var(--jaune); }
.pp-liste .ico + span { padding-left: 5px; }
.pp-titre span { font-weight: 700; }
.pp-marque { margin: 0; padding: 0; line-height: 1; font-family: var(--quicksand); font-size: 42px; font-weight: 600; color: var(--accent); }
.pp-reseaux { display: flex; justify-content: center; gap: 15px; }
.pp-reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 32.4px; height: 32.4px; border-radius: 50%; background: #fff; font-size: 18px; }
.pp-reseaux .ico { width: 18px; height: 18px; fill: var(--noir); }
.pp-image { text-align: center; line-height: 0; }
.pp-image img { display: inline-block; vertical-align: middle; }
.pp-michelin { width: 150px; }
.pp-elabel { width: 175px; }
.pp-gm { width: 250px; }
.pp-bas { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; width: 100%; }
.pp-bas li { display: flex; margin: 0 5px; }
.pp-bas span, .pp-bas a { font-family: var(--inter); font-size: 12px; font-weight: 400; line-height: 1.5; text-transform: uppercase; color: #fff; }
.pp-bas li:hover span, .pp-bas a:hover { color: var(--accent); }
.pp-r3 .dedans > .pp-bas { padding: 10px; }
@media (max-width: 767px) {
  .pied .dedans { flex-wrap: wrap; }
  .pp-col { width: 100%; }
}

/* ---------------------------------------------------------------- pages d'Arthur, réservation, 404 (gabarit de page de Hello Elementor) */
.site-main .page-header .entry-title, html:not(.page-elementor) .site-main { margin-inline: auto; width: 100%; }
@media (max-width: 575px) { .site-main .page-header .entry-title, html:not(.page-elementor) .site-main { padding-inline: 10px; } }
@media (min-width: 576px) { .site-main .page-header .entry-title, html:not(.page-elementor) .site-main { max-width: 500px; } }
@media (min-width: 768px) { .site-main .page-header .entry-title, html:not(.page-elementor) .site-main { max-width: 600px; } }
@media (min-width: 992px) { .site-main .page-header .entry-title, html:not(.page-elementor) .site-main { max-width: 800px; } }
@media (min-width: 1200px) { .site-main .page-header .entry-title, html:not(.page-elementor) .site-main { max-width: 1140px; } }
.page-content a { text-decoration: underline; }