/*!
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
   ------------------------------------------------------
   Système de design aligné sur la maquette
   (cream + terracotta + ink + Cormorant / DM Sans / DM Mono).
   Les anciens tokens (--bg, --tx, --acc, --mt, --bd, --sans, --mono, --r)
   sont conservés en ALIAS afin de ne rien casser côté blocs existants.
   Les valeurs par défaut peuvent être écrasées via l'onglet Apparence → Design.
═══════════════════════════════════════════════════════ */
:root {
  /* ── NEUTRES (texte + bordures) ── */
  --wf-ink:       #1A1814;
  --wf-ink-2:     #3D3930;
  --wf-mid:       #7A7468;
  --wf-soft:      #B0A99E;
  --wf-border:    rgba(26, 24, 20, .10);
  --wf-border-2:  rgba(26, 24, 20, .06);

  /* ── FONDS ── */
  --wf-cream:     #FAF7F0;
  --wf-warm:      #FFF9F0;
  --wf-beige:     #EDE5D8;
  --wf-beige-2:   #D8CCBA;

  /* ── ACCENT TERRA (action, boutons, highlights) ── */
  --wf-terra:       #B84D25;
  --wf-terra-dark:  #8A3519;
  --wf-terra-pale:  #F9EDE7;

  /* ── SECONDAIRES ── */
  --wf-gold:       #C8902A;
  --wf-sage:       #4E7260;
  --wf-sage-pale:  #EBF3EE;

  /* ── SÉMANTIQUE BADGES ── */
  --wf-success-bg: #EBF4E7;  --wf-success: #2D6A1F;
  --wf-warn-bg:    #FEF3E2;  --wf-warn:    #7A4A0A;
  --wf-danger-bg:  #FDEAEA;  --wf-danger:  #8B2020;
  --wf-info-bg:    #E8F0FA;  --wf-info:    #1A4F8A;

  /* ── TYPOGRAPHIE ── */
  --wf-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --wf-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wf-font-mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  --wf-size-h1:   clamp(40px, 5.6vw, 72px);
  --wf-size-h2:   clamp(26px, 3.5vw, 40px);
  --wf-size-h3:   clamp(20px, 2.4vw, 28px);
  --wf-size-h4:   clamp(16px, 1.5vw, 20px);
  --wf-size-body: 15px;
  --wf-size-sm:   13.5px;
  --wf-size-xs:   11px;

  --wf-lh-body:     1.65;
  --wf-lh-heading:  1.12;

  --wf-overline-tracking: .14em;

  /* ── GÉOMÉTRIE ── */
  --wf-radius:      4px;
  --wf-radius-sm:   3px;
  --wf-radius-lg:   8px;
  --wf-radius-pill: 100px;

  --wf-sp-xs:  0.5rem;
  --wf-sp-s:   1rem;
  --wf-sp-m:   1.75rem;
  --wf-sp-l:   3rem;
  --wf-sp-xl:  5rem;
  --wf-sp-2xl: 7rem;

  --wf-container-max: 1100px;
  --wf-container-pad: 5%;

  /* ── EFFETS ── */
  --wf-shadow:        0 2px 24px rgba(26, 24, 20, .07);
  --wf-shadow-lg:     0 8px 48px rgba(26, 24, 20, .12);
  --wf-shadow-terra:  0 4px 24px rgba(184, 77, 37, .35);

  --wf-trans:        .2s ease;
  --wf-trans-fast:   .15s ease;
  --wf-trans-panel:  .4s cubic-bezier(.4, 0, .2, 1);

  /* ── STICKY OFFSETS (coordonnés header/journey-strip/progress/price-card) ── */
  --wf-nav-h:        64px;
  --wf-journey-top:  var(--wf-nav-h);
  --wf-progress-top: var(--wf-nav-h);
  --wf-price-top:    calc(var(--wf-nav-h) + 16px);

  /* ═══════════════════════════════════════════════════
     ALIASES DE COMPATIBILITÉ (legacy wireframe)
     Les blocs existants référencent encore --bg/--tx/--acc/etc.
     Ces alias pointent vers les nouveaux tokens pour
     garder une transition douce.
  ═══════════════════════════════════════════════════ */
  --bg:    var(--wf-cream);
  --surf:  var(--wf-beige);
  --bd:    var(--wf-border);
  --bds:   var(--wf-ink-2);
  --tx:    var(--wf-ink);
  --mt:    var(--wf-mid);
  --acc:   var(--wf-terra);
  --adk:   var(--wf-terra-dark);
  --wf-red: var(--wf-terra);
  --mono:  var(--wf-font-mono);
  --sans:  var(--wf-font-body);
  --heading:    var(--wf-font-display);
  --subheading: var(--wf-font-body);
  --r:     var(--wf-radius);

  /* Grille wireframe legacy — inchangée */
  --cols:   12;
  --gap:    20px;
  --pad:    40px;
  --max:    1240px;

  /* Navbar legacy */
  --h-navbar: var(--wf-nav-h);
}

@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(--wf-cream);
  color: var(--wf-ink);
  font-family: var(--wf-font-body);
  font-size: var(--wf-base-font-size, var(--wf-size-body));
  line-height: var(--wf-lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── Typographie headings (par défaut — les blocs peuvent override) ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wf-font-display);
  font-weight: 300;
  line-height: var(--wf-lh-heading);
  color: var(--wf-ink);
}
h1 { font-size: var(--wf-size-h1); }
h2 { font-size: var(--wf-size-h2); }
h3 { font-size: var(--wf-size-h3); }
h4 { font-size: var(--wf-size-h4); }

/* ── Overline utilitaire (pattern récurrent dans la maquette) ── */
.wf-overline {
  display: inline-block;
  font-family: var(--wf-font-body);
  font-size: var(--wf-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--wf-overline-tracking);
  color: var(--wf-terra);
}

/* ── Emphase serif italique terracotta (<em> dans les titres) ── */
h1 em, h2 em, h3 em, .wf-em-terra {
  font-style: italic;
  color: var(--wf-terra);
  font-weight: inherit;
}

/* 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
   ------------------------------------------------------
   Styles alignés sur la maquette (nav 64px crème blur).
   Les valeurs sont paramétrées via inc/header-settings.php
   qui injecte <style id="wf-header-inline"> avec --_h-bg,
   --_h-tx, --_h-accent, --_h-height, --_h-font.
═══════════════════════════════════════════════════════ */
header.navbar {
  --_h-bg:     var(--wf-cream);
  --_h-tx:     var(--wf-ink);
  --_h-accent: var(--wf-terra);
  --_h-height: var(--wf-nav-h, 64px);
  --_h-font:   var(--wf-font-body);

  position: relative;
  top: 0;
  z-index: 200;
  height: var(--_h-height);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 5%;
  background: var(--_h-bg);
  color: var(--_h-tx);
  font-family: var(--_h-font);
  border-bottom: 1px solid var(--wf-border);
  transition: box-shadow var(--wf-trans), background-color var(--wf-trans);
}

header.navbar.is-sticky {
  position: sticky;
  top: 0;
}

/* Effet translucide + blur une fois sticky */
header.navbar.has-blur.is-sticky {
  background: color-mix(in srgb, var(--_h-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

/* Ajoute une ombre quand on scrolle (classe appliquée via script.js) */
header.navbar.scrolled {
  box-shadow: 0 1px 0 var(--wf-border), var(--wf-shadow);
}

/* ── Brand (logo + nom) ── */
header.navbar .nav-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--_h-tx);
  font-family: var(--wf-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-decoration: none;
}
header.navbar .nav-logo {
  max-width: 120px;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
}
header.navbar .nav-title {
  line-height: 1;
}
header.navbar .nav-brand:hover .nav-title {
  color: var(--_h-accent);
}

/* ── Menu central ── */
header.navbar .nav-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 0;
  font-family: var(--_h-font);
}
header.navbar .nav-links ul,
header.navbar .nav-links .menu {
  display: flex;
  list-style: none;
  gap: .25rem;
  margin: 0;
  padding: 0;
}
header.navbar .nav-links .menu-item a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--wf-mid);
  padding: .5rem 1rem;
  border-radius: var(--wf-radius);
  transition: color var(--wf-trans), background-color var(--wf-trans);
}
header.navbar .nav-links .menu-item a:hover,
header.navbar .nav-links .menu-item.current-menu-item a,
header.navbar .nav-links .menu-item.current-menu-ancestor a {
  color: var(--_h-accent);
  background: color-mix(in srgb, var(--_h-accent) 10%, transparent);
}

/* ── Nav-right ── */
header.navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* ── CTA button ── */
header.navbar .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .65rem 1.4rem;
  border-radius: var(--wf-radius);
  text-decoration: none;
  transition: transform var(--wf-trans-fast), background-color var(--wf-trans), box-shadow var(--wf-trans);
  border: 1px solid transparent;
  cursor: pointer;
}
header.navbar .nav-cta--terra {
  background: var(--_h-accent);
  color: #fff;
  box-shadow: 0 2px 12px rgba(184,77,37,.25);
}
header.navbar .nav-cta--terra:hover {
  background: var(--wf-terra-dark);
  transform: translateY(-1px);
  box-shadow: var(--wf-shadow-terra);
}
header.navbar .nav-cta--outline {
  background: transparent;
  color: var(--_h-tx);
  border-color: var(--wf-border);
}
header.navbar .nav-cta--outline:hover {
  background: var(--wf-terra-pale);
  border-color: var(--_h-accent);
  color: var(--_h-accent);
}
header.navbar .nav-cta--ghost {
  background: transparent;
  color: var(--_h-tx);
  padding: .65rem .5rem;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
header.navbar .nav-cta--ghost:hover {
  color: var(--_h-accent);
  border-bottom-color: var(--_h-accent);
}

/* Theme switcher legacy masqué */
.theme-switcher { display: none !important; }

/* ── Hamburger ── */
header.navbar .burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--wf-trans);
}
header.navbar .burger:hover { border-color: var(--_h-accent); }
header.navbar .burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--_h-tx);
  border-radius: 1px;
  transition: transform var(--wf-trans-fast), opacity var(--wf-trans-fast);
}
header.navbar .burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
header.navbar .burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
header.navbar .burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ── Mobile drawer (fallback quand pas de burger-panel.php) ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--wf-nav-h, 64px);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--wf-cream);
  border-top: 1px solid var(--wf-border);
  z-index: 199;
  padding: 1.5rem 5%;
  overflow-y: auto;
}
.mobile-nav.active { display: block; }
.mobile-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav .menu-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-size: 16px;
  color: var(--wf-ink);
  border-bottom: 1px solid var(--wf-border);
  transition: color var(--wf-trans);
}
.mobile-nav .menu-item a:hover { color: var(--wf-terra); }

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

  min-height: 70vh;

  background: var(--surf);
}

/* 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(--footer-sans, 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 var(--footer-body, 13px)/1.7 var(--footer-sans, 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(--footer-lnk, var(--mt));
  border: 1px solid var(--footer-lnk, 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(--footer-lnk, var(--bds)); color: var(--footer-lnk, var(--tx)); opacity: .8; }

/* 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 var(--footer-body, 13px)/1 var(--footer-sans, var(--sans));
  color: var(--footer-lnk, var(--mt));
  transition: color .15s;
}
.links-menu li a:hover { color: var(--footer-lnk, var(--tx)); opacity: .8; }

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

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

/* 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(--footer-lnk, var(--mt)); }
.footer-bottom a:hover { color: var(--footer-lnk, var(--tx)); opacity: .8; }

@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; }
}




/* ═══════════════════════════════════════════════════════
   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;
}


/* ═══════════════════════════════════════════════════════════════
   LISTES — blocs WF uniquement
   Sélecteur : [class*="wp-block-wf-"] cible tous les blocs wf/*
   sans toucher au footer, menus, ou autres zones du thème.
════════════════════════════════════════════════════════════════ */

[class*="wp-block-wf-"] ul,
[class*="wp-block-wf-"] ol {
    list-style: none;
    margin:  0 0 1em 0;
    padding: 0;
}

/* ── Liste non ordonnée ── */
[class*="wp-block-wf-"] ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: .45em;
    line-height: 1.6;
}

[class*="wp-block-wf-"] ul li::before {
    content: '';
    position: absolute;
    left:  1px;
    top:   .59em;           /* alignement vertical avec la première ligne */
    width:  6px;
    height: 6px;
    border-radius: 10px;     /* carré légèrement arrondi */
    background: currentColor; /* hérite de la couleur du li, quelle qu'elle soit */
}

/* ── Liste ordonnée — compteur ── */
[class*="wp-block-wf-"] ol {
    counter-reset: wf-list;
}

[class*="wp-block-wf-"] ol li {
    position: relative;
    padding-left: 2em;
    margin-bottom: .45em;
    line-height: 1.6;
    counter-increment: wf-list;
}

[class*="wp-block-wf-"] ol li::before {
    content: counter(wf-list);
    position: absolute;
    left: 0;
    top:  0;
    width:    1.4em;
    font: 600 .75em/1.8 var(--mono, monospace);
    letter-spacing: .02em;
    text-align: center;
    color:      currentColor; /* hérite de la couleur du li */
    background: transparent;
}

/* ── Listes imbriquées ── */
[class*="wp-block-wf-"] ul ul,
[class*="wp-block-wf-"] ol ul {
    margin-top: .35em;
    margin-bottom: 0;
}

[class*="wp-block-wf-"] ul ul li::before {
    width:  4px;
    height: 4px;
    background: var(--mt, #7a7268); /* puce secondaire plus discrète */
}

/* ═══════════════════════════════════════════════════════
   18. BLOCK STYLES VARIANTS (is-style-cream / warm / beige / dark / terra-pale / sage-pale)
   ------------------------------------------------------
   Variants de fond applicables sur tous les blocs wf/*.
   Enregistrés dynamiquement dans inc/wf-block-styles.php.
   Utilisation : dans l'éditeur Gutenberg, sélectionne un bloc → onglet
   Styles (panneau de droite) → choisis le variant.
═══════════════════════════════════════════════════════ */

/* Règles communes — les variants héritent via --wf-bg et --wf-tx */
[class*="wp-block-wf-"].is-style-cream,
[class*="wp-block-wf-"].is-style-warm,
[class*="wp-block-wf-"].is-style-beige,
[class*="wp-block-wf-"].is-style-dark,
[class*="wp-block-wf-"].is-style-terra-pale,
[class*="wp-block-wf-"].is-style-sage-pale {
    background-color: var(--wf-bg-local);
    color: var(--wf-tx-local);
}

/* Cream — défaut, identique au fond du site */
[class*="wp-block-wf-"].is-style-cream {
    --wf-bg-local: var(--wf-cream);
    --wf-tx-local: var(--wf-ink);
}

/* Warm — blanc chaud, pour les cards et surfaces légères */
[class*="wp-block-wf-"].is-style-warm {
    --wf-bg-local: var(--wf-warm);
    --wf-tx-local: var(--wf-ink);
}

/* Beige — surfaces colorées, about sections */
[class*="wp-block-wf-"].is-style-beige {
    --wf-bg-local: var(--wf-beige);
    --wf-tx-local: var(--wf-ink);
}

/* Dark — fond ink sombre, inverse le texte */
[class*="wp-block-wf-"].is-style-dark {
    --wf-bg-local: var(--wf-ink);
    --wf-tx-local: var(--wf-cream);
    --tx: var(--wf-cream);
    --mt: var(--wf-soft);
}
[class*="wp-block-wf-"].is-style-dark h1,
[class*="wp-block-wf-"].is-style-dark h2,
[class*="wp-block-wf-"].is-style-dark h3,
[class*="wp-block-wf-"].is-style-dark h4 {
    color: var(--wf-cream);
}
[class*="wp-block-wf-"].is-style-dark a {
    color: var(--wf-terra-pale);
}

/* Terra pâle — sections method, bandeau accent */
[class*="wp-block-wf-"].is-style-terra-pale {
    --wf-bg-local: var(--wf-terra-pale);
    --wf-tx-local: var(--wf-ink);
}

/* Sage pâle — success / guarantee box / tips */
[class*="wp-block-wf-"].is-style-sage-pale {
    --wf-bg-local: var(--wf-sage-pale);
    --wf-tx-local: var(--wf-ink);
}