/*!
Theme Name: quentin_wireframe_template
Description: Template wireframe visuel pour la construction de sites WordPress. Blocs et composants affichés en style wireframe avec grille, placeholders et annotations. Idéal pour préparer la structure d'un site avant la phase de design.
Author: quentinrenaux.com
Author URI: https://quentinrenaux.com
Version: 1.0
Text Domain: qwt
*/

/* ═══════════════════════════════════════════════════════
   TABLE DES MATIÈRES
   1. TOKENS & VARIABLES
   2. RESET & BASE
   3. LAYOUT — WRAP / GRID
   4. GRILLE OVERLAY (admin)
   5. WIREFRAME DECORATORS
   6. NAVBAR
   7. COVER / HERO BLOCK
   8. MARQUEE BANDEAU
   9. SECTIONS GÉNÉRIQUES
   10. BLOCS : AGENDA
   11. BLOCS : RESTAURANTS
   12. BLOCS : INFO / HOURS
   13. FOOTER
   14. SECTION CARDS MENU
   15. BOUTON FLOTTANT (ORDER FAB)
   16. UTILITAIRES
   17. RESPONSIVE
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   1. TOKENS & VARIABLES
═══════════════════════════════════════════════════════ */
:root {
  --bg:     #f2efe9;
  --surf:   #e8e3db;
  --bd:     #b8b0a4;
  --bds:    #5c5650;
  --tx:     #1e1b17;
  --mt:     #7a7268;
  --acc:    #f5c031;
  --adk:    #2b2822;
  --wf-red: rgba(210, 60, 15, 1);
  --mono:   'DM Mono', monospace;
  --sans:   'Space Grotesk', sans-serif;
  --r:      var(--wf-radius, 3px);

  /* Grille */
  --cols:   12;
  --gap:    20px;
  --pad:    40px;
  --max:    1240px;

  /* Navbar */
  --h-navbar: 60px;
}

@media (max-width: 900px)  { :root { --cols: 8;  --gap: 16px; --pad: 24px; } }
@media (max-width: 600px)  { :root { --cols: 4;  --gap: 12px; --pad: 16px; } }

/* ═══════════════════════════════════════════════════════
   2. RESET & BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: var(--wf-base-font-size, 15px);
  line-height: 1.6;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Supprimer le noise overlay (spécifique ancien thème) */
.noise-overlay { display: none !important; }

/* ═══════════════════════════════════════════════════════
   3. LAYOUT — WRAP / GRID
═══════════════════════════════════════════════════════ */
.wrap,
.container {
  max-width: var(--wf-max-width, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}

/* Colonnes nommées */
.c-hero-text  { grid-column: 1 / span 7; }
.c-hero-img   { grid-column: 8 / span 5; }
.c-sec-head   { grid-column: 1 / span 8; }
.c-sec-center { grid-column: 3 / span 8; text-align: center; }
.c-feat       { grid-column: span 4; }
.c-split-img  { grid-column: 1 / span 5; }
.c-split-cnt  { grid-column: 7 / span 6; }
.c-stat       { grid-column: span 3; }
.c-testi      { grid-column: span 4; }
.c-price      { grid-column: span 4; }
.c-cta        { grid-column: 3 / span 8; text-align: center; }
.c-fbrand     { grid-column: 1 / span 4; }
.c-fcol1      { grid-column: 6 / span 2; }
.c-fcol2      { grid-column: 8 / span 2; }
.c-fcol3      { grid-column: 10 / span 3; }

@media (max-width: 900px) {
  .c-hero-text  { grid-column: 1 / -1; }
  .c-hero-img   { grid-column: 1 / -1; order: -1; }
  .c-sec-head   { grid-column: 1 / -1; }
  .c-sec-center { grid-column: 1 / -1; }
  .c-feat       { grid-column: span 4; }
  .c-split-img  { grid-column: 1 / span 4; }
  .c-split-cnt  { grid-column: 5 / span 4; }
  .c-stat       { grid-column: span 4; }
  .c-testi      { grid-column: 1 / -1; }
  .c-price      { grid-column: 1 / -1; }
  .c-cta        { grid-column: 1 / -1; }
  .c-fbrand     { grid-column: 1 / -1; }
  .c-fcol1      { grid-column: 1 / span 4; }
  .c-fcol2      { grid-column: 5 / span 4; }
  .c-fcol3      { grid-column: 1 / span 4; }
}

@media (max-width: 600px) {
  .c-feat       { grid-column: 1 / -1; }
  .c-split-img  { grid-column: 1 / -1; }
  .c-split-cnt  { grid-column: 1 / -1; }
  .c-stat       { grid-column: span 2; }
  .c-testi      { grid-column: 1 / -1; }
  .c-price      { grid-column: 1 / -1; }
  .c-cta        { grid-column: 1 / -1; }
  .c-fbrand     { grid-column: 1 / -1; }
  .c-fcol1      { grid-column: 1 / span 2; }
  .c-fcol2      { grid-column: 3 / span 2; }
  .c-fcol3      { grid-column: 1 / -1; }
}

/* Padding helpers */
.pt64 { padding-top: 64px; }
.pb64 { padding-bottom: 64px; }
.py64 { padding-top: 64px; padding-bottom: 64px; }
.pb40 { padding-bottom: 40px; }

/* ═══════════════════════════════════════════════════════
   4. GRILLE OVERLAY (admin uniquement)
═══════════════════════════════════════════════════════ */
#go {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0; transition: opacity .2s;
}
body.wf-grid-on #go { opacity: 1; }

#go::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(210,60,15,.10) 0, rgba(210,60,15,.10) 1px,
    transparent 1px, transparent 8px
  );
}

.gcols {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--pad);
  left: 50%; transform: translateX(-50%);
  width: 100%;
}
.gcol {
  background: rgba(210,60,15,.05);
  border-left:  1px solid rgba(210,60,15,.20);
  border-right: 1px solid rgba(210,60,15,.20);
}

.gbadge {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(210,60,15,.92); color: #fff;
  font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 20px;
  z-index: 10001; pointer-events: none;
  opacity: 0; transition: opacity .2s;
  white-space: nowrap;
}
body.wf-grid-on .gbadge { opacity: 1; }

/* Annotation de section */
.wf-sec {
  position: relative;
  border-top: 1.5px solid var(--bd);
}



body.wf-grid-on .wf-sec[data-lay]::before {
  content: attr(data-lay);
  position: absolute; top: 0; right: 0; z-index: 100;
  font: 500 9px/1 var(--mono);
  background: rgba(210,60,15,.85);
  color: #fff; letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 0 0 0 4px;
}

/* Bouton toggle grille */
#gbtn {
  position: fixed; bottom: 20px; right: 20px; z-index: 10001;
  background: var(--adk); color: var(--acc);
  border: 2px solid var(--acc);
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer; border-radius: var(--r);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 3px 3px 0 var(--acc);
  transition: transform .15s, box-shadow .15s;
  user-select: none;
}
#gbtn:hover  { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--acc); }
#gbtn:active { transform: translate(1px,1px);   box-shadow: 1px 1px 0 var(--acc); }
body.wf-grid-on #gbtn { background: var(--acc); color: var(--adk); }

.gi { display: grid; grid-template-columns: repeat(3,3px); gap: 2px; }
.gi b { width: 3px; height: 7px; background: currentColor; border-radius: 1px; font-weight: normal; }

/* ═══════════════════════════════════════════════════════
   5. WIREFRAME DECORATORS
═══════════════════════════════════════════════════════ */

/* Label chip */
.wl {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--bg); padding: 4px 10px; border-radius: 2px;
}
.wl::before {
  content: ''; width: 6px; height: 6px;
  border: 1.5px solid var(--bds); border-radius: 50%;
}

/* Badge de dimension */
.dim {
  font: 400 9px/1 var(--mono); color: rgba(210,60,15,.8);
  border: 1px solid rgba(210,60,15,.3);
  padding: 2px 6px; border-radius: 2px;
  background: rgba(210,60,15,.05);
  display: inline-block;
}

/* Annotation */
.ann {
  font: 400 10px/1 var(--mono); color: var(--mt);
  display: flex; align-items: center; gap: 5px;
}
.ann::before { content: ''; width: 12px; height: 1px; background: var(--bd); }

/* ── IMAGE PLACEHOLDER ── */
.wf-img {
  position: relative;
  background: var(--surf);
  border: 1.5px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
}
.wf-img-ratio { padding-top: 62.5%; }
.wf-img svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.wf-img-lbl {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font: 400 10px/1 var(--mono); color: var(--mt);
  background: var(--surf); border: 1px solid var(--bd);
  padding: 2px 8px; border-radius: 2px;
  white-space: nowrap; z-index: 1;
}

/* Block label (apparaît en haut à gauche de chaque bloc) */
.wf-block-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--surf); padding: 3px 8px;
  border-radius: 0 0 var(--r) 0;
  position: absolute; top: 0; left: 0; z-index: 10;
}

/* ── Mixin badge sombre (réutilisé par les ::before de chaque bloc) ── */
/* usage : appliquer ces valeurs dans chaque block::before */
/* color: #f2efe9; background: #1e1b17; font: 500 9px/1 'DM Mono'; */
/* padding: 4px 10px; border-radius: 0 0 4px 0;                     */

/* Zone éditable en front-end — dashed outline sur les textes modifiables */
.wf-editable {
  outline: 1.5px dashed rgba(184, 176, 164, 0.5);
  outline-offset: 5px;
  border-radius: 2px;
  transition: outline-color .2s;
}
.wf-editable:hover {
  outline-color: rgba(92, 86, 80, 0.7);
}

/* ═══════════════════════════════════════════════════════
   6. NAVBAR
═══════════════════════════════════════════════════════ */
header.navbar {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1.5px solid var(--bd);
  z-index: 200;
  height: var(--h-navbar);
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
}



/* Conteneur principal de l'en-tête */
.site-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0px;
}

.site-logo {
  max-width: 100px;
  max-height: 26px;
  object-fit: contain;
  width: auto;
  height: auto;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.site-title a {
    text-decoration: none;        
    color: inherit;             
}

.site-title a:hover {
    opacity: 0.8;                
}




.dot { display: none; }

header.navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* Menu WordPress */
header.navbar .nav-links {
  display: flex;
  gap: 0;
}

header.navbar .nav-links ul,
header.navbar .nav-links .menu {
  display: flex;
  list-style: none;
  gap: 0;
  margin: 0; padding: 0;
}

header.navbar .nav-links .menu-item a {
  font: 500 14px/1 var(--sans);
  color: var(--mt);
  padding: 4px 12px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  display: block;
}

header.navbar .nav-links .menu-item a:hover,
header.navbar .nav-links .menu-item.current-menu-item a {
  color: var(--tx);
  border-bottom-color: var(--acc);
}

/* Masquer le theme switcher (spécifique à l'ancien site) */
.theme-switcher { display: none !important; }

/* Hamburger mobile */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  border: 1.5px solid var(--bd); border-radius: var(--r);
  background: transparent; cursor: pointer;
}
.burger span {
  display: block; width: 16px; height: 1.5px;
  background: var(--tx); border-radius: 1px;
}

.mobile-nav {
  display: none;
  position: fixed;
  top: var(--h-navbar); left: 0; right: 0; bottom: 0;
  background: var(--bg); border-top: 1.5px solid var(--bd);
  z-index: 199;
  padding: 20px var(--pad);
  overflow-y: auto;
}
.mobile-nav.active { display: block; }
.mobile-nav .menu-item a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  font: 500 15px/1 var(--sans); color: var(--mt);
  border-bottom: 1px solid var(--bd);
  transition: background .15s, color .15s;
}
.mobile-nav .menu-item a:hover { background: var(--surf); color: var(--tx); }

@media (max-width: 900px) {
  header.navbar .nav-links { display: none; }
  .burger { display: flex; }
}

/* ═══════════════════════════════════════════════════════
   7. COVER / HERO BLOCK
═══════════════════════════════════════════════════════ */
.wf-cover {

  min-height: 70vh;

  background: var(--surf);
  border-bottom: 1.5px solid var(--bd);
}

/* Quand il y a un media réel, on laisse le media s'afficher */
.wf-cover-bg-wrap {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}

/*.wf-cover-bg-wrap .bg-media {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: grayscale(1);
}*/

/* Placeholder wireframe quand pas de media */
.wf-cover .wf-cover-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wf-cover .wf-cover-placeholder svg {
  width: 100%; height: 100%;
}

/* Overlay wireframe léger */
/*.wf-cover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(242,239,233,.5);
  z-index: 2;
}*/

/* Contenu */
.wf-cover-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 60px var(--pad);
  width: 100%;
  max-width: var(--max);
}

.wf-cover-content h1 {
  font: 700 clamp(30px, 5vw, 60px)/1.1 var(--sans);
  letter-spacing: -.03em;
  color: var(--tx);
  margin-bottom: 16px;
}

.wf-cover-content .wf-subtitle {
  font: 400 16px/1.7 var(--sans);
  color: var(--mt);
  max-width: 560px;
  margin: 0 auto 20px;
}

.wf-sub-titles-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.wf-sub-item {
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
  border: 1px solid var(--bd);
  padding: 6px 12px;
  border-radius: 2px;
  background: var(--bg);
}


/* Label WF sur le cover */
.wf-cover::before {
  content: 'Block · Cover';
  position: absolute; top: 0; left: 0; z-index: 10;
  font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--surf); padding: 3px 8px;
  border-radius: 0 0 var(--r) 0;
}

/* Bouton son */
.wf-sound-btn {
  position: absolute;
  bottom: 12px; left: var(--pad);
  z-index: 4;
  background: transparent;
  color: var(--bds);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 6px 14px;
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .2s;
}
.wf-sound-btn:hover { background: var(--surf); }
.wf-sound-btn.is-active { border-color: var(--bds); color: var(--tx); }

/* ═══════════════════════════════════════════════════════
   8. MARQUEE BANDEAU
═══════════════════════════════════════════════════════ */
.wf-marquee-outer.sticky-bandeau {
  position: sticky;
  top: var(--h-navbar);
  left: 0;
  z-index: 190;
  overflow: clip;
  padding: 40px 0;
  margin: -40px 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  pointer-events: none;
  border-top: 1.5px solid var(--bd);
  border-bottom: 1.5px solid var(--bd);
}

.wf-marquee-inner {
  background: var(--acc);
  display: flex;
  align-items: center;
  height: 44px;
  width: calc(100% + 100px);
  margin-left: -50px;
  overflow: clip;
  pointer-events: all;
  border-top: 2px solid var(--adk);
  border-bottom: 2px solid var(--adk);
  transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
}

.wf-marquee-outer.sticky-bandeau:hover .wf-marquee-inner {
  transform: rotate(-2deg) scale(1.02);
}

.marquee-content {
  display: flex;
  white-space: nowrap;
  animation: scrollLinear 20s linear infinite;
}

@keyframes scrollLinear {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wf-marquee-outer .item {
  font: 700 1.4rem/1 var(--sans);
  text-transform: uppercase;
  color: var(--adk);
  padding: 0 15px;
  display: inline-block;
  letter-spacing: -.01em;
}

.wf-marquee-outer .sep {
  font-weight: 900;
  font-size: 1rem;
  color: var(--adk);
  opacity: .5;
}

.wf-marquee-outer .highlight {
  background: var(--adk);
  color: var(--acc);
  padding: 2px 15px;
  margin: 0 10px;
}

.wf-marquee-outer .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--adk);
}

/* ═══════════════════════════════════════════════════════
   9. SECTIONS GÉNÉRIQUES
═══════════════════════════════════════════════════════ */
.section-border-top {
  border-top: 1.5px solid var(--bd);
  padding-top: 12px;
  margin-bottom: 8px;
}

.section-header {
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--mt);
  margin-bottom: 6px;
}

.subtitle {
  font: 400 13px/1.6 var(--sans);
  color: var(--mt);
}

/* En-têtes de section */
.sec-hd { display: flex; flex-direction: column; gap: 10px; }
.sec-hd h2 {
  font: 700 clamp(22px,3vw,40px)/1.2 var(--sans);
  letter-spacing: -.025em; margin-top: 6px;
}
.sec-hd p { color: var(--mt); font-size: 15px; line-height: 1.7; }

/* Boutons génériques */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px;
  border: 1.5px solid var(--bds); background: transparent; color: var(--tx);
  font: 500 14px/1 var(--sans); cursor: pointer; border-radius: var(--r);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surf); }
.btn-fill  { background: var(--tx); color: var(--bg); }
.btn-fill:hover { background: var(--bds); }
.btn-acc   { background: var(--acc); color: var(--tx); border-color: var(--acc); font-weight: 600; }
.btn-acc:hover { background: #e8b420; border-color: #e8b420; }
.btn-ghost { border-color: var(--bd); color: var(--mt); }
.btn-ghost:hover { border-color: var(--bds); color: var(--tx); }

/* ═══════════════════════════════════════════════════════
   10. BLOCK · INFO GRID (ratz/info)
   ─────────────────────────────────────────────────────
   Structure : 2 colonnes
     .info-col-left  → numéro + grand titre + sous-texte
     .info-col-right → liste à puces + bouton CTA
═══════════════════════════════════════════════════════ */
.wf-info-block {
  padding: 64px 0;
  background: var(--bg);
  border-top: 1.5px solid var(--bd);
  position: relative;
}

.wf-info-block::before {
  content: 'Block · Info Grid';
  position: absolute; top: 0; left: 0;
  font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--surf); padding: 3px 8px;
  border-radius: 0 0 var(--r) 0;
}

.wf-info-block-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Colonne gauche */
.info-col-left .info-section-num {
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--mt);
  border-top: 1.5px solid var(--bd);
  padding-top: 12px;
  margin-bottom: 20px;
}

.info-col-left h2 {
  font: 700 clamp(2rem, 4vw, 3.5rem)/1.05 var(--sans);
  letter-spacing: -.04em;
  color: var(--tx);
  margin-bottom: 12px;
}

.info-col-left .info-subtitle {
  font: 400 14px/1.6 var(--sans);
  color: var(--mt);
}

/* Colonne droite */
.info-col-right .info-list {
  list-style: none;
  margin: 0 0 28px;
  border-top: 1.5px solid var(--bd);
}

.info-col-right .info-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
  font: 400 14px/1.4 var(--sans);
  color: var(--tx);
}

.info-col-right .info-list li::before {
  content: '>';
  font: 500 12px/1 var(--mono);
  color: var(--mt);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .wf-info-block-wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════════════════════
   11. BLOCS : AGENDA (supprimé — conservé pour référence CSS)
═══════════════════════════════════════════════════════ */
.agenda-block-section {
  background: var(--bg);
  padding: 64px 0;
  position: relative;
  border-top: 1.5px solid var(--bd);
}

.agenda-block-section::before {
  content: 'Block · Agenda';
  position: absolute; top: 0; left: 0;
  font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--surf); padding: 3px 8px;
  border-radius: 0 0 var(--r) 0;
}

/* Labels colonnes */
.agenda-labels {
  display: grid;
  grid-template-columns: 120px 1fr 160px;
  padding: 8px 20px;
  border-bottom: 1.5px solid var(--bd);
  font: 400 9px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
}

/* Ligne d'événement */
.agenda-container {
  border: 1.5px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
}

.event-row {
  display: grid;
  grid-template-columns: 120px 1fr 160px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--bd);
  transition: background .15s;
  background: var(--bg);
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { background: var(--surf); }

.event-row.is-sold-out { opacity: .5; }

.event-date {
  display: flex;
  flex-direction: column;
}
.event-date .day {
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
}
.event-date .num {
  font: 600 24px/1 var(--sans);
  letter-spacing: -.03em;
  color: var(--tx);
  margin-top: 3px;
}

.event-title {
  font: 600 16px/1.3 var(--sans);
  letter-spacing: -.01em;
  color: var(--tx);
  margin: 0 0 6px;
}
.event-title a { color: var(--tx); }
.event-title a:hover { color: var(--bds); }

.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.event-tag a {
  font: 400 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mt);
  border: 1px solid var(--bd);
  padding: 2px 7px;
  border-radius: 2px;
  background: var(--bg);
  transition: border-color .15s, color .15s;
}
.event-tag a:hover { border-color: var(--bds); color: var(--tx); }

.event-location {
  font: 400 11px/1 var(--mono);
  color: var(--mt);
  display: block;
}

.event-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.event-prix-inrender {
  font: 400 11px/1 var(--mono);
  color: var(--mt);
}

.btn-ticket {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--bds);
  color: var(--tx);
  font: 500 12px/1 var(--sans);
  border-radius: var(--r);
  transition: background .15s;
  text-align: center;
}
.btn-ticket:hover { background: var(--surf); }

.btn-soldout {
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
  border: 1px solid var(--bd);
  padding: 4px 8px;
  border-radius: 2px;
}

.no-events {
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
  text-align: center;
  padding: 40px;
}

.block-agenda-see-allevents {
  display: flex;
  justify-content: center;
  padding: 20px;
  border-top: 1px solid var(--bd);
  background: var(--surf);
}
.block-agenda-see-allevents a {
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
  border: 1px solid var(--bd);
  padding: 8px 16px;
  border-radius: var(--r);
  transition: border-color .15s, color .15s;
}
.block-agenda-see-allevents a:hover { border-color: var(--bds); color: var(--tx); }

/* ═══════════════════════════════════════════════════════
   11. BLOCS : RESTAURANTS
═══════════════════════════════════════════════════════ */
.wf-resto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: 64px var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  border-top: 1.5px solid var(--bd);
}

.wf-resto-grid::before {
  content: 'Block · Restaurants';
  position: absolute; top: 0; left: var(--pad);
  font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--surf); padding: 3px 8px;
  border-radius: 0 0 var(--r) 0;
}

.resto-card {
  border: 1.5px solid var(--bd);
  border-radius: var(--r);
  background: var(--bg);
  overflow: hidden;
  transition: background .15s, border-color .15s;
}
.resto-card:hover { background: var(--surf); border-color: var(--bds); }

.resto-card a { display: block; color: inherit; }

/* Placeholder image resto */
.resto-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surf);
  border-bottom: 1px solid var(--bd);
}

/* Image réelle (filtrée en wireframe) */
.resto-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .4;
  transition: filter .3s, opacity .3s;
}
.resto-card:hover .resto-thumb img { opacity: .6; }

/* SVG placeholder */
.resto-thumb-wf {
  position: absolute; inset: 0;
}
.resto-thumb-wf svg {
  width: 100%; height: 100%;
}
.resto-thumb-lbl {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font: 400 9px/1 var(--mono); color: var(--mt);
  background: var(--surf); border: 1px solid var(--bd);
  padding: 2px 7px; border-radius: 2px;
  white-space: nowrap;
}

.resto-lot {
  position: absolute; top: 8px; right: 8px;
  background: var(--acc);
  color: var(--adk);
  font: 500 9px/1 var(--mono);
  padding: 2px 7px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.no-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
}

.resto-infos {
  padding: 16px;
}

.resto-title {
  font: 600 14px/1.3 var(--sans);
  color: var(--tx);
  margin: 0 0 6px;
}

.resto-food {
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mt);
  margin: 0;
}

@media (max-width: 1024px) {
  .wf-resto-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .wf-resto-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .wf-resto-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   12. BLOCS : INFO / HOURS
═══════════════════════════════════════════════════════ */
.wf-info-section {
  padding: 64px 0;
  background: var(--surf);
  border-top: 1.5px solid var(--bd);
  position: relative;
}

.wf-info-section::before {
  content: 'Block · Info & Hours';
  position: absolute; top: 0; left: 0;
  font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--bg); padding: 3px 8px;
  border-radius: 0 0 var(--r) 0;
}

.wf-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Gauche */
.wf-title-large {
  font: 700 clamp(2.5rem, 5vw, 5rem)/1 var(--sans);
  letter-spacing: -.04em;
  margin: 0 0 20px;
  color: var(--tx);
}

.wf-description {
  font: 400 15px/1.7 var(--sans);
  color: var(--mt);
  max-width: 420px;
}

/* Droite — liste horaires */
.hours-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.hours-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
  font: 400 15px/1 var(--sans);
  color: var(--tx);
}
.hours-list li .day { color: var(--tx); }
.hours-list li .middle { color: var(--mt); font-size: 13px; }
.hours-list li .time { color: var(--mt); font: 400 13px/1 var(--mono); }

.hours-list.extra-lines { margin-bottom: 8px; }
.hours-list.extra-lines li.extra-line {
  font-size: 13px;
  color: var(--mt);
  border-bottom: 1px dashed var(--bd);
  padding: 8px 0;
}
.hours-list.extra-lines li.extra-line strong { color: var(--tx); }

.info-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wf-btn-brutal {
  flex: 1;
  display: inline-block;
  padding: 12px 20px;
  border: 1.5px solid var(--bds);
  color: var(--tx);
  text-align: center;
  font: 500 13px/1 var(--sans);
  border-radius: var(--r);
  transition: background .15s;
}
.wf-btn-brutal:hover { background: var(--bg); }

@media (max-width: 900px) {
  .wf-info-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════════════════════
   13. FOOTER
═══════════════════════════════════════════════════════ */
footer.footer-brut {
  border-top: 1.5px solid var(--bd);
  padding: 48px 0 28px;
  background: var(--bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.f-col h3 {
  font: 600 15px/1 var(--sans);
  letter-spacing: -.01em;
  margin-bottom: 14px;
  color: var(--tx);
}

.f-col h4 {
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
  margin-bottom: 14px;
}

.f-col p {
  font: 400 13px/1.7 var(--sans);
  color: var(--mt);
  max-width: 280px;
  margin-bottom: 16px;
}

/* Social links */
.social-footer {
  font: 400 11px/1 var(--mono);
  color: var(--mt);
  margin-top: 12px;
}

.social-footer .social-icons,
.social-footer .social-menu,
.social-footer ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 8px;
  padding: 0;
}

.social-footer a,
.social-footer .menu-item a {
  font: 400 10px/1 var(--mono);
  color: var(--mt);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 3px 9px;
  transition: border-color .15s, color .15s;
  display: block;
}
.social-footer a:hover,
.social-footer .menu-item a:hover { border-color: var(--bds); color: var(--tx); }

/* Menu footer liens */
.links-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0; margin: 0;
}
.links-menu li a {
  font: 400 13px/1 var(--sans);
  color: var(--mt);
  transition: color .15s;
}
.links-menu li a:hover { color: var(--tx); }

/* Colonne privatisation */
.f-col.privat p {
  font-size: 13px;
  color: var(--mt);
  line-height: 1.6;
  max-width: 100%;
}

.btn-privat {
  display: inline-block;
  padding: 10px 18px;
  border: 1.5px solid var(--bds);
  color: var(--tx);
  font: 500 12px/1 var(--sans);
  border-radius: var(--r);
  transition: background .15s;
  margin-top: 4px;
}
.btn-privat:hover { background: var(--surf); }

/* Ligne copyright */
.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}

.footer-bottom span,
.footer-bottom .footer-credits span {
  font: 400 11px/1.6 var(--mono);
  color: var(--mt);
}

.footer-bottom a { color: var(--mt); }
.footer-bottom a:hover { color: var(--tx); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   14. SECTION CARDS MENU
═══════════════════════════════════════════════════════ */
.section-cards-menu-footer {
  border-top: 1.5px solid var(--bd);
  background: var(--surf);
  padding: 32px 0;
}

.wf-cards-grid-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wf-card-item-footer {
  flex: 1 1 160px;
}

.wf-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border: 1.5px solid var(--bd);
  border-radius: var(--r);
  background: var(--bg);
  font: 500 13px/1 var(--sans);
  color: var(--tx);
  transition: background .15s, border-color .15s;
}
.wf-card-link:hover { background: var(--bg); border-color: var(--bds); }

.wf-card-arrow {
  font-size: 12px;
  color: var(--mt);
}

/* ═══════════════════════════════════════════════════════
   15. BOUTON FLOTTANT (ORDER FAB)
═══════════════════════════════════════════════════════ */
.wf-order-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9000;
}

.wf-order-btn {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid var(--bds);
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.wf-order-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.wf-order-circle-text {
  font: 400 9px/1 var(--mono);
  fill: var(--mt);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.wf-order-icon {
  position: relative; z-index: 1;
}

.logo-svg {
  width: 36px; height: 36px;
  fill: var(--tx);
}

/* Panel slide-in */
.wf-order-panel {
  position: fixed;
  top: 0; right: 0;
  width: 400px; height: 100vh;
  background: var(--bg);
  border-left: 1.5px solid var(--bd);
  z-index: 9001;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.wf-order-panel.is-open { transform: translateX(0); }

.wf-order-panel-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wf-order-close {
  position: absolute;
  top: 12px; right: 12px;
  background: transparent;
  border: 1px solid var(--bd);
  color: var(--mt);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font: 12px/1 var(--sans);
  display: flex; align-items: center; justify-content: center;
}

.wf-order-iframe {
  flex: 1;
  border: none;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════
   16. UTILITAIRES
═══════════════════════════════════════════════════════ */

/* Masquer éléments internes à l'ancien thème */
.sansplombtest { display: none !important; }

/* Styles login page */
.login #login {
  background: var(--bg);
}

/* Edit button (template part) */
.wf-edit-btn a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 11px/1 var(--mono);
  color: var(--mt);
  border: 1px solid var(--bd);
  padding: 5px 10px;
  border-radius: var(--r);
  background: var(--bg);
  transition: border-color .15s, color .15s;
}
.wf-edit-btn a:hover { border-color: var(--bds); color: var(--tx); }

/* Pagination */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.pagination {
  list-style: none;
  display: flex;
  gap: 4px;
}
.pagination a,
.pagination .current {
  display: block;
  padding: 7px 12px;
  border: 1.5px solid var(--bd);
  border-radius: var(--r);
  font: 400 13px/1 var(--sans);
  color: var(--mt);
  transition: border-color .15s, color .15s;
}
.pagination a:hover { border-color: var(--bds); color: var(--tx); }
.pagination .current { border-color: var(--bds); color: var(--tx); background: var(--surf); }

/* ═══════════════════════════════════════════════════════
   17. RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .agenda-labels { display: none; }
  .event-row {
    grid-template-columns: 90px 1fr;
    grid-template-rows: auto auto;
  }
  .event-action {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .wf-info-grid { grid-template-columns: 1fr; gap: 40px; }
  .wf-order-panel { width: 100%; }
  .wf-order-fab { bottom: 16px; left: 16px; }
  header.navbar { padding: 0 20px; }
}



/* page-content section */
.page-content section {
  border: 1px dotted rgba(0, 0, 0, 0.148);
  margin: 10px 0;
}

/* page-content paragraphe <p> */
.container p {
  border: 1px dotted rgba(0, 0, 0, 0.148);
  padding: 10px 0;
  margin: 10px 0;
}

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF — padding vertical des blocs
   Contrôlés via wfPadding dans le panneau ↕ Espacement
   ═══════════════════════════════════════════════════════ */
.wf-pad-s  { padding-top:  40px !important; padding-bottom:  40px !important; }
.wf-pad-m  { padding-top:  80px !important; padding-bottom:  80px !important; }
.wf-pad-l  { padding-top: 120px !important; padding-bottom: 120px !important; }
.wf-pad-xl { padding-top: 180px !important; padding-bottom: 180px !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF — marges extérieures des blocs
   Contrôlés via wfMarginTop / wfMarginBottom
   ═══════════════════════════════════════════════════════ */
.wf-mt-s  { margin-top:  24px !important; }
.wf-mt-m  { margin-top:  48px !important; }
.wf-mt-l  { margin-top:  80px !important; }
.wf-mt-xl { margin-top: 120px !important; }

.wf-mb-s  { margin-bottom:  24px !important; }
.wf-mb-m  { margin-bottom:  48px !important; }
.wf-mb-l  { margin-bottom:  80px !important; }
.wf-mb-xl { margin-bottom: 120px !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF — séparateurs de blocs
   Contrôlés via wfDividerTop / wfDividerBottom
   ═══════════════════════════════════════════════════════ */
.wf-divider-top    { border-top:    1.5px solid var(--bd) !important; }
.wf-divider-bottom { border-bottom: 1.5px solid var(--bd) !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF — arrondi des blocs
   Contrôlé via wfRadius dans le panneau 🎨 Apparence
   ═══════════════════════════════════════════════════════ */
.wf-radius-s { border-radius:  4px !important; overflow: hidden !important; }
.wf-radius-m { border-radius:  8px !important; overflow: hidden !important; }
.wf-radius-l { border-radius: 16px !important; overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF — largeur max du contenu
   Contrôlé via wfMaxWidth dans le panneau 🎨 Apparence
   ═══════════════════════════════════════════════════════ */
.wf-width-narrow > * { max-width: 760px  !important; margin-left: auto !important; margin-right: auto !important; }
.wf-width-full       { max-width: none   !important; padding-left: 0  !important; padding-right: 0 !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF — presets couleur de fond des blocs
   Contrôlés via wfBgColor dans le panneau 🎨 Apparence
   ═══════════════════════════════════════════════════════ */
.wf-bg-bg      { background-color: var(--bg)   !important; }
.wf-bg-surface { background-color: var(--surf) !important; }
.wf-bg-dark    { background-color: var(--adk)  !important; color: var(--bg) !important; }
.wf-bg-accent  { background-color: var(--acc)  !important; }





/* --------- accueil monitor template ------------ */

/* Style pour les vignettes du monitoring */
.wf-card {
    border: 1.5px solid var(--bd);
    border-radius: var(--r);
    background: var(--bg);
    overflow: hidden;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wf-card:hover {
    background: var(--surf);
    border-color: var(--bds);
}
.wf-card .wf-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--bd);
}
.wf-card-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-card-title {
    font: 600 14px/1.3 var(--sans);
    color: var(--tx);
    margin: 0;
}
.wf-card-excerpt {
    font: 400 12px/1.5 var(--sans);
    color: var(--mt);
    margin: 0;
    flex: 1;
}
.wf-card .ann {
    font-size: 10px;
    margin: 4px 0;
}
.wf-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Style pour le Main Link Button dans les vignettes */
.wf-main-link-button {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
    font-weight: 600;
    border-radius: var(--r);
    padding: 10px;
    transition: all .2s;
}