/* Strofilia : accueils FR/EN et composants partagés (en-têtes de page, carrousels, collage Modula, visionneuse, carte Google).
   Valeurs reprises des réglages Elementor des pages 11 (FR) et 754 (EN). */

.e > .espace, .dedans > .espace { height: var(--h, 20px); flex-shrink: 0; }
.voile::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.voile > .dedans { position: relative; }

/* ---------------------------------------------------------------- héros de l'accueil */
.s-hero { --minh: 80vh; --mt: -75px; --jc: center; --ai: center;
  background: var(--noir) url(/wp-content/uploads/2023/12/164strfl-56.jpg) center / cover; }
.s-hero::before { background-image: linear-gradient(180deg, #1313132E 60%, var(--noir) 90%); }
.hero-titre { font-family: var(--quicksand); font-size: 96px; font-weight: 600; color: #fff; text-align: center; }
.hero-sous { list-style: none; margin: 0 -8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.hero-sous li { margin: 0 8px; font-family: var(--inter); font-size: 16px; font-weight: 300; line-height: 1.5; text-transform: uppercase; letter-spacing: 8px; color: #fff; }
.hero-boutons { --fd: row; --jc: center; --w: 86.481%; --shrink: 0; }
.hero-boutons .bouton-boite { flex: 0 1 auto; }
@media (max-width: 767px) {
  .hero-titre { font-size: 52px; }
  .hero-sous li { font-size: 12px; }
  .hero-boutons { --w: 100%; }
}

/* ---------------------------------------------------------------- « La gastronomie grecque au cœur de Bruxelles » + vidéo */
.s-gastro { --mt: -1px; --pt: 0px; --pb: 80px; --pl: 0px; --pr: 0px; --ai: center; background-color: var(--noir); }
.gastro-in { --ai: center; --g: 5px; }
.gastro-in > .dedans > * { width: 100%; }
.gastro-in > .dedans > .gastro-titre { width: 40%; max-width: 40%; }
.gastro-titre { font-family: var(--quicksand); font-size: 28px; font-weight: 600; text-transform: uppercase; line-height: 1.4em; color: #fff; text-align: center; }
.video { background-color: #414141; }
.video-cadre { aspect-ratio: 2.33333; overflow: hidden; }
.video video { display: flex; width: 100%; height: 100%; border: 0; background-color: #000; }
@media (max-width: 767px) { .gastro-in > .dedans > .gastro-titre { width: 100%; max-width: 100%; } }

/* ---------------------------------------------------------------- section « Menu » (carte) */
.s-menu { --ai: center; --g: 80px; --pt: 80px; --pb: 87px; --pl: 0px; --pr: 0px; scroll-margin-top: 0;
  background: var(--noir) url(/wp-content/uploads/2023/11/ba25cc1be256903a9011d37f4686db9d-l.jpg) center / cover no-repeat; }
.s-menu::before { background-color: var(--texte); opacity: .75; }
@media (min-width: 1025px) { .s-menu { background-attachment: fixed; } }
.menu-cadre { --ai: center; --w: 80%; --pt: 50px; --pr: 50px; --pb: 50px; --pl: 50px; background-color: #000000AB; }
.menu-intro { --w: 80%; }
.menu-cadre::after { content: ""; } /* widget HTML vide (script) du site actuel : un écart de plus en bas du cadre */
.menu-intro-p, .menu-legende { font-family: var(--inter); font-weight: 400; line-height: 1.2em; color: #fff; text-align: center; }
.menu-intro-p { font-size: 15px; }
.menu-legende { font-size: 14px; }
.menu-cadre > .accordeon, .menu-cadre > .menu-legende { width: 100%; }
@media (max-width: 767px) {
  .s-menu { --g: 40px; --pt: 50px; --pb: 50px; --pl: 5px; --pr: 5px; }
  .menu-cadre { --pt: 10px; --pr: 10px; --pb: 10px; --pl: 10px; }
  .menu-intro-p { font-size: 13px; }
  .menu-legende { font-size: 12px; }
}

/* titres entre filets : réglages de chaque section (largeur du titre, des filets, au mobile) */
.tf-menu { --tf-titre: 13%; }
.tf-resa { --tf-titre: 28%; }
.tf-galerie { --tf-titre: 69%; --tf-filet: 100%; --tf-filets-m: 35%; }
.tf-chef { --tf-titre: 100%; --tf-filet: 100%; --tf-filets-m: 35%; }
.tf-chef .tf-filets { width: 40%; }
.tf-avis, .tf-maps { --tf-titre: 40%; }
@media (max-width: 767px) {
  .tf-resa, .tf-galerie, .tf-chef, .tf-avis, .tf-maps { gap: 0; padding: 0; }
  .tf-chef .tf-filets { width: 35%; }
}

/* ---------------------------------------------------------------- réservation */
.s-resa { --fd: row; --ai: center; --pt: 80px; --pb: 80px; --pl: 0px; --pr: 0px; background-color: var(--noir); }
.resa-in { --g: 40px; }
.resa-in > .dedans > .bouton-boite { width: 100%; }
.resa-texte { --cw: 600px; }
.resa-p { font-size: 16px; color: #fff; text-align: center; }
.resa-p h1 { font-size: 18px; }
@media (max-width: 767px) {
  .s-resa { --pt: 50px; --pb: 50px; }
  .resa-texte { --cw: 1140px; }
  .resa-p { font-size: 14px; }
}

/* ---------------------------------------------------------------- galerie (carrousel + collage) */
.s-galerie { --fd: row; --ai: center; --pt: 80px; --pb: 80px; --pl: 0px; --pr: 0px;
  background: var(--noir) url(/wp-content/uploads/2023/11/Rectangle-14.png); }
.galerie-in { --pt: 25px; --pb: 25px; --pl: 100px; --pr: 100px; }
.galerie-in > .dedans > * { width: 100%; }
@media (max-width: 1024px) { .galerie-in { --pt: 0px; --pb: 0px; --pl: 0px; --pr: 0px; } }
@media (max-width: 767px) {
  .s-galerie { --pt: 40px; --pb: 40px; }
  .galerie-in { --g: 40px; --pt: 25px; --pb: 25px; --pl: 25px; --pr: 25px; }
}

/* ---------------------------------------------------------------- à propos */
.s-apropos { --fd: row; --ai: center; --pt: 80px; --pb: 80px; --pl: 0px; --pr: 0px; background-color: var(--noir); }
.apropos-texte { --g: 5px; }
.apropos-titre { font-family: var(--quicksand); font-size: 28px; font-weight: 600; text-transform: uppercase; color: var(--accent); text-align: center; }
.filet-jaune { --filet: var(--jaune); }
.apropos-p { font-size: 16px; color: #fff; text-align: center; }
.apropos-images { --fd: row; --jc: flex-end; --fw: wrap; --fwm: wrap; }
.apropos-images img { display: block; flex: 0 1 auto; align-self: flex-start; width: 207px; }
.apropos-images img.decale { margin-top: -30px; }
@media (max-width: 1024px) {
  .s-apropos { --fd: column-reverse; }
  .apropos-images { --pt: 15%; --pb: 15%; --pl: 15%; --pr: 15%; }
  .apropos-images img { width: 48%; max-width: 48%; }
}
@media (max-width: 767px) {
  .apropos-p { font-size: 14px; }
  .apropos-images { --jc: center; }
  .apropos-images img { width: 45%; max-width: 45%; }
}

/* ---------------------------------------------------------------- notre chef */
.s-chef { --fd: row; --ai: center; --pt: 80px; --pb: 80px; --pl: 0px; --pr: 0px;
  background: var(--noir) url(/wp-content/uploads/2023/11/Rectangle-27.png); }
.chef-photo { --fd: row; --jc: center; --fw: wrap; }
.chef-photo img { display: block; width: 468px; }
.chef-texte { --g: 80px; --pt: 25px; --pb: 25px; --pl: 100px; --pr: 100px; }
.chef-p { font-size: 16px; color: #fff; text-align: center; }
@media (max-width: 1024px) { .chef-texte { --pt: 0px; --pb: 0px; --pl: 0px; --pr: 0px; } }
@media (max-width: 767px) {
  .s-chef { --pt: 40px; --pb: 40px; }
  .chef-photo { --pt: 40px; --pb: 40px; --pl: 40px; --pr: 40px; }
  .chef-texte { --g: 40px; --pt: 25px; --pb: 25px; --pl: 25px; --pr: 25px; }
  .chef-p { font-size: 14px; }
}

/* ---------------------------------------------------------------- témoignages */
.s-avis { --fd: row; --ai: center; --pt: 80px; --pb: 0px; --pl: 0px; --pr: 0px; background-color: var(--noir); }
.avis-in { --g: 0px; }
.avis-cadre { --cw: 700px; }
.carrousel-avis { position: relative; }
.carrousel-avis .carrousel-fenetre { width: calc(95% - 40px); margin: 0 auto; }
.carrousel-avis .diapo { padding: 0; text-align: center; }
.avis-bulle { position: relative; padding: 20px; background-color: #FFFFFF10; }
.avis-bulle::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background-color: #FFFFFF10;
  transform: translateX(-50%) scaleX(.75) rotate(45deg); }
.avis-texte { font-family: var(--inter); font-size: 18px; font-weight: 400; font-style: italic; line-height: 1.5; color: #fff; }
.avis-pied { display: flex; justify-content: center; align-items: center; margin-top: 10px; padding: 0 20px; }
.avis-photo img { display: block; width: 50px; height: 50px; }
.carrousel-avis cite { display: flex; flex-direction: column; margin-left: 10px; font-style: normal; text-align: left; line-height: 1.5; }
.avis-nom { font-family: var(--inter); font-size: 14px; font-weight: 600; color: #fff; }
.avis-note { font-family: var(--inter); font-size: 14px; font-weight: 400; color: var(--jaune); }
.carrousel-avis .carrousel-fleche { font-size: 20px; color: #fff; }
@media (max-width: 767px) {
  .s-avis { --pt: 40px; }
  .carrousel-avis { margin-top: 10px; }
  .avis-pied { margin-top: 0; }
  .avis-texte { font-size: 15px; }
}

/* ---------------------------------------------------------------- carte Google */
.s-maps { --fd: row; --ai: center; --pt: 80px; --pb: 0px; --pl: 0px; --pr: 0px; background-color: var(--noir); }
.maps-in { --g: 40px; }
.maps-in > .dedans > * { width: 100%; }
.adresse-maps li { justify-content: center; }
.adresse-maps li > span:last-child { color: #fff; font-family: var(--inter); font-size: 14px; line-height: 1.5; text-align: center; }
.adresse-maps .ico-vide { display: none; }
.adresse-maps .ico + span { padding-left: 5px; }
.maps { overflow: hidden; line-height: 0; }
.maps iframe { display: block; width: 100%; height: 300px; border: 0; }
@media (max-width: 767px) { .s-maps { --pt: 40px; } }

/* ---------------------------------------------------------------- « Follow us on instagram » (accueil EN) */
.s-insta-en { --fd: row; --ai: center; --pt: 80px; --pb: 80px; --pl: 0px; --pr: 0px; background-color: var(--noir); }
.insta-en-in { --g: 40px; }
.tf-insta-en { --tf-titre: 35%; --tf-filets-m: 20%; }
.insta-en-boutons { --fd: row; --jc: center; }
.bouton-icone { display: inline-flex; align-items: center; gap: 5px; }
.bouton-icone .ico { width: 1em; height: 1em; fill: currentColor; }
@media (max-width: 767px) { .s-insta-en { --pt: 40px; --pb: 0px; } .tf-insta-en { gap: 0; padding: 0; } }

/* ---------------------------------------------------------------- en-têtes de page (galerie, contact, business, évènements, menu, réservation) */
.s-titre-page { --minh: 60vh; --mt: -75px; --jc: center; --ai: center; background: var(--noir) var(--fond) center / cover; }
.s-titre-page::before { background-image: linear-gradient(180deg, var(--voile-haut, #13131354) 60%, var(--noir) 90%); }
.titre-page { font-family: var(--quicksand); font-size: 96px; font-weight: 600; color: #fff; text-align: center; }
.titre-page-sous { font-family: var(--inter); font-weight: 300; color: #fff; font-size: 1rem; text-align: center; }
@media (max-width: 767px) {
  .titre-page { font-size: var(--titre-m, 52px); }
  .titre-page-sous { font-size: 14px; text-align: center; }
}

/* ---------------------------------------------------------------- carrousels */
.carrousel { position: relative; }
.carrousel-fenetre { overflow: hidden; }
.carrousel-piste { display: flex; will-change: transform; }
.carrousel .diapo { flex: 0 0 100%; min-width: 100%; text-align: center; }
.carrousel-fleche { position: absolute; top: 50%; z-index: 1; display: flex; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  transform: translateY(-50%); font-size: 25px; color: rgba(238, 238, 238, .9); }
.carrousel-fleche .ico { width: 1em; height: 1em; fill: currentColor; }
.carrousel-fleche.precedent { left: 10px; }
.carrousel-fleche.suivant { right: 10px; }
.carrousel-images img { vertical-align: baseline; }
html:not(.js) .carrousel .diapo:not(:first-child) { display: none; }

/* ---------------------------------------------------------------- collage (galerie Modula « creative ») */
.collage { position: relative; width: 100%; }
.collage.pret .tuile { position: absolute; }
.tuile { margin: 0; overflow: hidden; background-color: #000; cursor: zoom-in; }
.tuile-lien { display: block; width: 100%; height: 100%; }
.tuile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.tuile:hover img, .tuile-lien:focus img { opacity: .5; }
.collage:not(.pret) { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.collage:not(.pret) .tuile { aspect-ratio: 1; }

/* ---------------------------------------------------------------- visionneuse */
.visionneuse { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  background: rgba(24, 24, 27, .98); color: #fff; }
.visionneuse[hidden] { display: none; }
html.vis-ouverte, html.vis-ouverte body { overflow: hidden; }
.vis-cadre { margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 64px 8px; }
.vis-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.vis-compteur { position: absolute; top: 0; left: 0; padding: 0 10px; line-height: 46px; font-size: 17px; font-family: var(--systeme); color: #ddd; z-index: 1; }
.vis-fermer, .vis-prec, .vis-suiv { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: #fff; }
.vis-fermer { top: 0; right: 0; width: 46px; height: 46px; background: rgba(70, 70, 70, .5); }
.vis-prec, .vis-suiv { top: 50%; width: 46px; height: 46px; transform: translateY(-50%); }
.vis-prec { left: 140px; } .vis-suiv { right: 140px; }
.vis-prec:disabled, .vis-suiv:disabled { opacity: .35; pointer-events: none; }
.visionneuse svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 1024px) { .vis-prec { left: 8px; } .vis-suiv { right: 8px; } }