/* Le Bouchon — compléments au thème (classes custom hors main.css) */

/* Sélecteur de langue dans le header */
.header-extra { gap: 18px; }
.langswitcher { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.langswitcher li { line-height: 1; }
.langswitcher a {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  color: var(--default-color, #fff); opacity: .65; padding: 4px 6px;
}
.langswitcher a:hover { opacity: 1; }
.langswitcher a.active { opacity: 1; color: var(--accent-color, #ce1212); }

/* La carte */
.carte-list { list-style: none; padding: 0; margin: 0 auto 1.5rem; max-width: 480px; }
.carte-list li {
  font-size: 1.15rem; padding: .55rem 0;
  border-bottom: 1px solid rgba(0,0,0,.08); display: flex; align-items: center;
}
.carte-list li i { color: var(--accent-color, #ce1212); font-size: 1.4rem; margin-right: .25rem; }
.carte-note { text-align: center; opacity: .7; }

/* À propos — portrait du chef : rectangle aux coins arrondis,
   cadre accent (orange), un peu plus grand que l'ancien cercle. */
.author-chef{ display:flex; align-items:center; gap:1.2rem; }
.about-chef{
  width:150px; height:185px; flex:0 0 150px;
  border-radius:16px; object-fit:cover;
  border:3px solid var(--accent-color, #ff9f1c);
  box-shadow:0 8px 22px rgba(0,0,0,.20);
}
.author-meta{ display:flex; flex-direction:column; gap:.15rem; }
.author-meta .author-name{ margin:0; font-weight:700; }
.author-role{ font-size:.85rem; opacity:.65; font-style:italic; }

/* À propos sans photos : colonne unique centrée, chef en tête */
.about-single{ max-width:780px; margin:0 auto; }
.author-chef--lead{
  justify-content:center; text-align:left;
  margin:0 auto 1.8rem; padding-bottom:1.4rem;
  border-bottom:1px solid rgba(0,0,0,.10);
}
.author-chef--lead .about-chef{
  width:190px; height:235px; flex-basis:190px;
}
/* Photo « la chef en cuisine » dans À propos */
.about-photo{
  margin:0 auto 1.8rem; max-width:340px;
}
.about-photo img{
  display:block; width:100%; height:auto;
  border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.18);
}

/* Galerie « Le lieu » — intertitre de catégorie */
.gal-cat{
  margin:2.6rem 0 1.1rem; padding-bottom:.4rem;
  font-size:1rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--accent-color, #ce1212);
  border-bottom:2px solid rgba(206,18,18,.30);
}
.gal-cat:first-of-type{ margin-top:0; }
/* Cible d'ancre des atouts → la barre/header ne masque pas le titre */
.gal-cat[id^="cat-"]{ scroll-margin-top:110px; }

/* Atouts « À propos » : version compacte + cliquable vers Le lieu */
.about .highlight-card--compact{
  padding:1.1rem 1rem; text-align:left;
  display:flex; flex-direction:column; gap:.25rem;
}
.about .highlight-card--compact .icon-wrap{
  width:38px; height:38px; margin:0 0 .35rem; font-size:1rem;
}
.about .highlight-card--compact .icon-wrap i{ font-size:1.05rem; }
.about .highlight-card--compact h4{ font-size:1rem; margin:0; }
.about .highlight-card--compact p{ font-size:.86rem; opacity:.7; margin:.15rem 0 0; }
.about a.highlight-card--link{
  text-decoration:none; color:inherit;
  transition:transform .15s, box-shadow .15s;
}
.about a.highlight-card--link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.highlight-card-go{
  margin-top:.5rem; font-size:.8rem; font-weight:700;
  color:var(--accent-color, #ff9f1c);
  display:inline-flex; align-items:center; gap:.15rem;
}

/* Galerie « Le lieu » — grille façon Instagram : vignettes toutes
   identiques (carré, recadrage centré → tout reste de bord disparaît). */
.gallery-grid .glightbox{
  display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:8px; background:#eceae6;   /* fond neutre, plus de noir */
}
.gallery-grid .glightbox img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease;
}
.gallery-grid .glightbox:hover img{ transform:scale(1.05); }

/* Visionneuse GLightbox : plus de bandes noires plates au-dessus/en
   dessous de la photo → fond sombre flouté + image entière (contain). */
.goverlay{
  background:rgba(22,18,15,.90) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.glightbox-clean .gslide-media{ box-shadow:none !important; }
.gslide-image img{
  -o-object-fit:contain !important; object-fit:contain !important;
  max-height:94vh !important; border-radius:6px;
}

/* On parle de nous */
.guides-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.guide-badge {
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  padding: .6rem 1.4rem; border-radius: 40px; font-size: .95rem;
  letter-spacing: .03em;
}

/* Réserver / Évènements */
.book-text, .events-text {
  font-size: 1.2rem; max-width: 640px; margin: 0 auto 1.6rem;
}
.reserver-adresse{
  margin:1.1rem 0 .5rem; font-size:1.05rem; opacity:.85;
}
.reserver-adresse i{ color:var(--accent-color, #ff9f1c); margin-right:.3rem; }
.reserver-itineraire{
  display:flex; justify-content:center; margin-bottom:1.6rem;
}
.reserver-itineraire .itineraire{ flex-wrap:wrap; justify-content:center; }

/* Bandeau d'alerte dans le hero (activable depuis le back-office).
   La couleur suit l'icône choisie : le Twig ajoute .hero-info--<ton>
   (mapping icône→ton). Voir templates/home.html.twig. */
.hero-info{
  display:flex; align-items:flex-start; gap:.6rem;
  margin-top:1.6rem; max-width:520px;
  padding:.85rem 1.1rem; border-radius:10px;
  background:rgba(206,18,18,.92);          /* repli si ton inconnu */
  color:#fff; font-size:1rem; line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.hero-info i{ font-size:1.25rem; line-height:1.4; flex-shrink:0; }
.hero-info strong{ font-weight:700; }

/* Tons — accordés aux options de la liste « Icône du bandeau ».
   Fonds assez sombres pour garder le texte blanc lisible (AA). */
.hero-info--annonce  { background:rgba(38,42,51,.93); }   /* 📣 neutre sombre */
.hero-info--info     { background:rgba(13,90,170,.93); }   /* ℹ️ / 📅 bleu */
.hero-info--attention{ background:rgba(176,108,8,.95); }   /* ⚠️ / 🕐 ambre */
.hero-info--danger   { background:rgba(206,18,18,.92); }   /* 🚪 fermeture rouge */
.hero-info--fete     { background:rgba(150,40,110,.93); }  /* 🎁 fête magenta */
.hero-info--hiver    { background:rgba(38,108,132,.93); }  /* ❄️ bleu froid */
.hero-info--ete      { background:rgba(201,98,26,.95); }    /* ☀️ orange chaud */

/* Liens « voir la carte » + « réserver » présents dans chaque section */
.carte-links{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  align-items:center; justify-content:center;
}
.carte-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; letter-spacing:.02em; text-decoration:none;
  color:var(--accent-color, #ce1212);
  border-bottom:2px solid currentColor; padding-bottom:2px;
}
.carte-link:hover{ opacity:.75; }
.dark-background .carte-link{ color:var(--accent-color, #ff9f1c); }

/* Bandeau « La carte » sur l'accueil (remplace l'ancienne section carte) */
.carte-banner{ padding:48px 0; }
.carte-banner h2{ margin-bottom:.6rem; }
.carte-banner p{ max-width:640px; margin:0 auto 1.6rem; opacity:.85; }

/* Page dédiée « La carte » */
.page-carte{ padding-top:140px; }            /* dégage le header fixe */
.page-carte-kicker{
  display:inline-block; margin-bottom:.4rem; font-size:.85rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-color, #ce1212); font-weight:600;
}
.carte-cards{ margin-bottom:2.2rem; }
.carte-card{ height:100%; text-align:center; }
.carte-actions{ margin-top:2rem; display:flex; flex-wrap:wrap;
  gap:14px; justify-content:center; }
.btn-link{
  display:inline-flex; align-items:center; gap:.3rem;
  text-decoration:none; font-weight:600; padding:12px 18px;
  color:inherit; opacity:.75;
}
.btn-link:hover{ opacity:1; }

/* ── Carte structurée : nav d'ancres + groupes + sections + items ── */
/* Barre de catégories façon Uber Eats : une seule ligne, collante,
   défilement horizontal au doigt, suit la section active (JS). */
.carte-nav{
  position:sticky; top:72px; z-index:20;
  display:flex; flex-wrap:nowrap; align-items:center; gap:.5rem;
  padding:.6rem .9rem; margin-bottom:2.4rem;
  background:rgba(255,255,255,.97); border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  overscroll-behavior-x:contain; scrollbar-width:none;
}
.carte-nav::-webkit-scrollbar{ display:none; }
.carte-nav-grp{
  flex:0 0 auto;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:.5; font-weight:700; margin:0 .15rem 0 .5rem;
}
.carte-nav-grp:first-child{ margin-left:0; }
.carte-nav a{
  flex:0 0 auto; white-space:nowrap;
  text-decoration:none; font-weight:600; font-size:.92rem;
  padding:.34rem .8rem; border-radius:999px; color:inherit;
  background:rgba(0,0,0,.05);
  transition:background .15s, color .15s;
}
.carte-nav a:hover{ background:rgba(206,18,18,.15); }
.carte-nav a.active{ background:var(--accent-color,#ce1212); color:#fff; }

.carte-liste{ max-width:820px; }

/* Intertitre de groupe : bandeau accent plein (Cuisine / Boissons) —
   marque nettement la bascule entre les grandes parties de la carte. */
.carte-groupe{
  margin:3.6rem 0 2rem; padding:.75rem 1rem; text-align:center;
  font-size:1.05rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:#fff;
  background:var(--accent-color,#ce1212); border-radius:10px;
  box-shadow:0 8px 22px rgba(206,18,18,.28);
}
.carte-groupe:first-child{ margin-top:0; }

/* En-tête de section : pastille d'icône + gros titre, nettement séparé
   des items par un filet épais. */
.carte-section{ scroll-margin-top:150px; margin-bottom:2.8rem; }
.carte-section-head{
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:1rem; padding-bottom:.7rem;
  border-bottom:2px solid rgba(206,18,18,.40);
}
.carte-ic{
  flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; width:46px; height:46px; border-radius:50%;
  background:rgba(206,18,18,.10); color:var(--accent-color,#ce1212);
  font-size:1.3rem; line-height:1;
}
.carte-section-head h4{
  margin:0; font-size:1.5rem; font-weight:700;
}
.carte-section-intro{ margin:-.2rem 0 .9rem; opacity:.7; font-style:italic; }

/* Items : visuellement subordonnés (légers, fins, sans pastille) */
.carte-items{ list-style:none; margin:0; padding:0 0 0 .2rem; }
.carte-item{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.2rem; padding:.6rem 0; border-bottom:1px solid rgba(0,0,0,.07);
}
.carte-item:last-child{ border-bottom:0; }
.carte-item-main{
  display:flex; flex-direction:column; gap:.12rem; min-width:0;
}
.carte-item-nom{ font-weight:600; font-size:1.02rem; }
.carte-item-desc{ font-size:.9rem; opacity:.6; font-style:italic; }
.carte-item-prix{
  flex:0 0 auto; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--accent-color,#ce1212);
  padding-top:.15rem;
}

/* Contact — horaires en texte (NAP crawlable) */
.horaires-texte{ list-style:none; padding:0; margin:0 0 .6rem; }
.horaires-texte li{ font-size:.95rem; padding:.15rem 0; opacity:.9; }
.contact address{ font-style:normal; margin:0; }

/* Itinéraire — boutons multi-apps (Google Maps / Plans / Waze) */
.itineraire{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem; margin-top:.7rem;
}
.itineraire-label{
  font-size:.76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; opacity:.6;
}
.itineraire-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.85rem; font-weight:600; text-decoration:none; color:inherit;
  padding:.32rem .7rem; border-radius:999px;
  border:1px solid rgba(128,128,128,.35);
  transition:background .15s, color .15s, border-color .15s;
}
.itineraire-btn:hover{
  background:var(--accent-color,#ce1212); color:#fff;
  border-color:var(--accent-color,#ce1212);
}
.itineraire-btn .ico-waze{ width:1em; height:1em; vertical-align:-.15em; }
.dark-background .itineraire-label{ color:#fff; }
.dark-background .itineraire-btn{
  color:#fff; border-color:rgba(255,255,255,.30);
}

/* Tous les blocs de la barre d'infos à la même hauteur : les colonnes
   Bootstrap s'étirent déjà sur la plus haute ; on force l'item à
   remplir sa colonne (contenu centré verticalement). */
.hero-info-bar .row{ align-items:stretch; }
.hero-info-bar .info-bar-item{ height:100%; }

/* Logos providers (nav rapide) dans la barre d'infos du hero */
.info-bar-nav{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:.25rem;
}
.info-bar-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.55rem; height:1.55rem; border-radius:50%;
  color:inherit; opacity:.7; text-decoration:none;
  transition:opacity .15s, background .15s;
}
.info-bar-nav a:hover{ opacity:1; background:rgba(255,255,255,.12); }
/* Les 3 logos sont des SVG Simple Icons (même grille 24×24) → même
   boîte = même hauteur visuelle, pas de mélange police/SVG. */
.info-bar-nav .ico-prov{
  display:block; width:1rem; height:1rem;
}

/* Contact — carte */
.map-embed { height: 100%; border-radius: 12px; overflow: hidden; }
.map-embed iframe { display: block; width: 100%; height: 100%; }

/* Footer */
.footer .footer-grid {
  display: flex; flex-wrap: wrap; gap: 40px;
  justify-content: space-between; padding: 50px 20px 10px;
}
.footer .footer-grid h4 { font-size: 1.05rem; margin-bottom: .6rem; }
.footer .footer-legal {
  text-align: center; padding: 18px 20px 30px;
  font-size: .85rem; opacity: .55;
}

/* Tableau des horaires — sobre, sans grille (juste un filet léger) */
.horaires-table{
  border-collapse:collapse; margin:.5rem auto 0; font-size:.72rem;
  width:auto; opacity:.92;
}
.horaires-table th,.horaires-table td{
  border:0; padding:3px 8px; text-align:center; white-space:nowrap;
  font-weight:400;
}
.horaires-table thead th{
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  opacity:.6; padding-bottom:5px;
  border-bottom:1px solid rgba(128,128,128,.25);
}
.horaires-table tbody th{
  text-align:left; font-weight:600; padding-right:14px;
}
.horaires-table tbody tr+tr td,
.horaires-table tbody tr+tr th{ padding-top:5px; }
.horaires-table td.h-ok{                       /* ✓ ouvert : vert + gras */
  color:#1a7f37; font-weight:700; opacity:1;
}
.horaires-table td.h-no{ opacity:.5; }         /* — fermé : discret */
.footer .horaires-table td.h-ok,
.dark-background .horaires-table td.h-ok{ color:#3fbf5f; }  /* vert lisible sur fond sombre */
.horaires-wrap{ display:flex; justify-content:center; margin-top:1.1rem; }
.footer .horaires-table thead th{ border-bottom-color:rgba(255,255,255,.18); }

/* Navbar : items plus petits et plus sobres */
@media (min-width:1200px){
  .navmenu a,.navmenu a:focus{
    font-size:13px; padding:12px 11px; font-weight:400;
    letter-spacing:.03em;
  }
  .navmenu a i,.navmenu a:focus i{ font-size:10px; }
}

/* Tableau horaires dans la barre info : sans titre, encore plus compact */
.info-bar-hours .horaires-table{ font-size:.6rem; margin:0; }
.info-bar-hours .horaires-table th,
.info-bar-hours .horaires-table td{ padding:2px 6px; }
.info-bar-hours .horaires-table thead th{
  font-size:.54rem; padding-bottom:3px;
}

/* Réseaux sociaux à côté du sélecteur de langue
   (dans .header-extra : toujours visible, y compris en format téléphone) */
.header-social{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.header-social li{ line-height:1; }
.header-social a{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.15rem; padding:6px; text-decoration:none;
  color:var(--default-color, #fff); opacity:.65;
}
.header-social a:hover{ opacity:1; }
.header-social a i{ margin:0; }

/* ------------------------------------------------------------------ */
/* Identité = images extraites du logo officiel (plus de police texte).  */
/* Nav bar : lettrage « le bouchon / RESTO BISTRO » détouré.             */
.header .logo .logo-wordmark {
  height: 64px;
  width: auto;
  display: block;
  max-width: 70vw;
  max-height: none;          /* lève le plafond .header .logo img (36px) */
  object-fit: contain;
}
.scrolled .header .logo .logo-wordmark { height: 52px; }
@media (max-width: 575px) {
  .header .logo .logo-wordmark { height: 46px; }
}
/* Accueil : tant qu'on est dans le hero (pas scrollé), le logo de la
   navbar est masqué (le hero affiche déjà le grand logo). Il apparaît
   au scroll. Sur les autres pages (pas de .has-hero) : toujours visible. */
.header.has-hero .logo .logo-wordmark {
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
body.scrolled .header.has-hero .logo .logo-wordmark {
  opacity: 1; visibility: visible;
}
/* Hero : même lettrage que la navbar (logo-wordmark-light), en grand
   (texte h1 conservé en visually-hidden pour le SEO). */
.hero .hero-content .hero-logo-h1 { margin-bottom: 14px; line-height: 1; }
/* Logo + tag groupés : le conteneur prend la largeur du logo, donc la
   pastille se centre exactement sous le logo (pas dans la colonne). */
/* La boîte de marque a EXACTEMENT la largeur du logo (pas celle des
   boutons) → logo et boutons partagent le même axe (centré sur le logo). */
.hero .hero-content .hero-brand{
  display:inline-block;
  width: clamp(340px, 62vw, 540px);
  max-width:100%;
  text-align:center;
}
.hero .hero-content .hero-brand .hero-logo-h1{ margin-bottom:0; }
.hero .hero-content .hero-brand .hero-logo{ width:100%; margin:0 auto; }
.hero .hero-content .hero-tag-line{
  text-align:center; margin:.55rem 0 38px;
}
/* « Maison fondée en 1991 » : plus petit */
.hero .hero-content .hero-tag{
  display:inline-block; margin:0;
  font-size:.6rem; letter-spacing:2px; padding:4px 12px;
}
.hero .hero-content .hero-logo {
  width: clamp(260px, 56vw, 520px);
  height: auto;
  max-width: 100%;
  display: block;
}
/* Boutons « Réserver / La carte » : dans .hero-brand (largeur = logo)
   → centrés exactement sous le logo, toutes tailles d'écran. */
.hero .hero-content .hero-brand .hero-actions{
  justify-content: center;
  margin-top: 1.2rem;
  gap: 14px;
}
/* Harmonie des 2 CTA du hero : paire primaire/secondaire de même
   gabarit. Réserver = plein orange ; La carte = contour clair.
   (surcharge du thème de base où .btn-menu n'était qu'un lien souligné) */
.hero .hero-content .hero-actions .btn-book,
.hero .hero-content .hero-actions .btn-menu{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px; border-radius:4px;
  font-weight:600; font-size:.9rem; letter-spacing:.4px;
  border:2px solid transparent;
  transition:background-color .25s ease, color .25s ease,
             border-color .25s ease, transform .25s ease;
}
.hero .hero-content .hero-actions .btn-book{
  background-color:var(--accent-color, #ff9f1c);
  color:var(--contrast-color, #1a1a1a); border-color:var(--accent-color, #ff9f1c);
}
.hero .hero-content .hero-actions .btn-book:hover{
  transform:translateY(-2px);
  background-color:color-mix(in srgb, var(--accent-color), #000 12%);
  border-color:color-mix(in srgb, var(--accent-color), #000 12%);
}
.hero .hero-content .hero-actions .btn-menu{
  background:transparent; color:#fff;
  border-color:rgba(255,255,255,.6);
}
.hero .hero-content .hero-actions .btn-menu:hover{
  transform:translateY(-2px);
  background:#fff; color:#1a1a1a; border-color:#fff;
}
.hero .hero-content .hero-actions .btn-menu i{ transition:transform .25s ease; }
.hero .hero-content .hero-actions .btn-menu:hover i{ transform:translateX(3px); }

/* Hero centré quand le bloc se réduit (colonne resserrée ≤ lg) :
   à gauche en grand écran (design d'origine), centré dès que ça se
   tasse — logo, accroche, boutons et bandeau d'alerte. */
@media (max-width: 991.98px) {
  .hero .hero-content { text-align: center; }
  /* Web resserré (tablette / fenêtre réduite) : la marque pilote la
     taille du logo → on l'élargit pour qu'il ne rétrécisse plus trop. */
  .hero .hero-content .hero-brand{
    display:block; width:min(88vw, 540px);
    margin-left:auto; margin-right:auto;
  }
  .hero .hero-content .hero-logo { margin-left: auto; margin-right: auto; }
  .hero .hero-content .hero-actions { justify-content: center; }
  .hero .hero-content .hero-info {
    margin-left: auto; margin-right: auto;   /* bloc centré… */
    text-align: left;                        /* …texte interne lisible */
  }
}

/* Smartphone : logo bien grand. On agit sur .hero-brand (même
   spécificité que la règle de base → l'override prend, contrairement
   à .hero-logo qui était neutralisé par .hero-brand .hero-logo). */
@media (max-width: 768px) {
  .hero .hero-content .hero-brand{
    display:block; width:min(92vw, 500px);
    margin-left:auto; margin-right:auto;
  }
}
@media (max-width: 480px) {
  .hero .hero-content .hero-brand{ width:94vw; }
}