/* ===================================================================
   À la bonne Franquette - styles.css
   Palette from Lens's photographic survey of the actual room.
   Mobile-first. No external dependencies. No CDN assets.
   =================================================================== */

/* 1. TOKENS */
:root {
  /* Palette - every value observed by Lens in their photographs */
  --terracotta:      #C0352A;   /* dominant accent wall */
  --terracotta-dark: #8B2118;   /* darker variant for text on light bg (5.9:1) */
  --terracotta-mid:  #9E2821;   /* hover state */
  --offwhite:        #F0EFEB;   /* all non-accent walls */
  --charcoal:        #4D4D4D;   /* skirting boards */
  --charcoal-dark:   #2A2A2A;   /* body text (~17:1 on offwhite) */
  --warm-brown:      #7A5229;   /* tables and chairs */
  --honey:           #C4A068;   /* floor planks */
  --amber:           #E8B030;   /* cone lamp accent */
  --mosaic:          #A0785A;   /* coin-mosaic screen tones */
  --cream-card:      #FAF9F5;   /* card backgrounds */
  --border:          #DDD9CE;   /* subtle borders */

  /* Text */
  --text-primary:   #2A2A2A;
  --text-secondary: #5A5650;
  --text-on-terra:  #FFFFFF;    /* white on terracotta: 5.15:1 */
  --text-link:      #8B2118;    /* terracotta-dark on light bg: 5.9:1 */

  /* Typography - system serif stack, no CDN */
  --font-heading: Georgia, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
                  Helvetica, Arial, sans-serif;

  /* Type scale - mobile-first */
  --step--1: 0.85rem;   /* 13.6px */
  --step-0:  1rem;      /* 16px   */
  --step-1:  1.2rem;    /* 19.2px */
  --step-2:  1.5rem;    /* 24px   */
  --step-3:  1.9rem;    /* 30.4px */
  --step-4:  2.4rem;    /* 38.4px */

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  /* Layout */
  --container-max: 920px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;

  /* Interaction */
  --transition:   180ms ease-out;
  --focus-ring:   3px solid var(--amber);
  --focus-offset: 2px;

  /* Touch target minimum (WCAG 2.5.8 / iOS HIG: 44px) */
  --tap-min: 44px;
}


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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size:   var(--step-0);
  line-height: 1.6;
  color:       var(--text-primary);
  background:  var(--offwhite);
}


/* 3. FOCUS (visible, keyboard-accessible) */
:focus-visible {
  outline:        var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius:  var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }


/* 4. TYPOGRAPHY */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color:       var(--text-primary);
}
h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { max-width: 68ch; }

a {
  color:                 var(--text-link);
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            color var(--transition);
  cursor:                pointer;
}
a:hover { color: var(--terracotta); }

strong { font-weight: 600; }
address { font-style: normal; }
ul { list-style: none; }
img { display: block; max-width: 100%; }


/* 5. LAYOUT UTILITIES */
.container {
  width:          100%;
  max-width:      var(--container-max);
  margin-inline:  auto;
  padding-inline: var(--space-lg);
}

.section {
  padding-block: var(--space-xl);
}

.section-label {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--step--1);
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--terracotta);
  margin-bottom:  var(--space-xs);
}

.section-intro {
  color:         var(--text-secondary);
  margin-top:    var(--space-xs);
  margin-bottom: var(--space-xl);
}


/* 6. BUTTONS */
/* All buttons: min-height 44px, touch-action manipulation */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.45em;
  min-height:      var(--tap-min);
  padding:         0.65rem 1.4rem;
  border:          2px solid transparent;
  border-radius:   var(--radius-md);
  font-family:     var(--font-body);
  font-size:       var(--step-0);
  font-weight:     600;
  line-height:     1.2;
  text-decoration: none;
  cursor:          pointer;
  transition:      background-color var(--transition),
                   border-color var(--transition),
                   color var(--transition);
  touch-action:    manipulation;
  white-space:     nowrap;
}

/* Primary - white on terracotta bg */
.btn--primary {
  background:   var(--text-on-terra);
  color:        var(--terracotta-dark);
  border-color: var(--text-on-terra);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background:   var(--offwhite);
  border-color: var(--offwhite);
  color:        var(--terracotta-dark);
}

/* Secondary - ghost on terracotta bg */
.btn--secondary {
  background:   transparent;
  color:        var(--text-on-terra);
  border-color: rgba(255,255,255,0.65);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background:   rgba(255,255,255,0.12);
  border-color: var(--text-on-terra);
  color:        var(--text-on-terra);
}

/* Terracotta on light bg */
.btn--terracotta {
  background:   var(--terracotta);
  color:        var(--text-on-terra);
  border-color: var(--terracotta);
}
.btn--terracotta:hover,
.btn--terracotta:focus-visible {
  background:   var(--terracotta-mid);
  border-color: var(--terracotta-mid);
  color:        var(--text-on-terra);
}


/* 7. HERO */
.site-hero {
  position:      relative;
  overflow:      hidden;
  background:    var(--terracotta);
  color:         var(--text-on-terra);
  padding-block: var(--space-2xl) var(--space-xl);
}

/* Coin-dot texture - radial dots, evokes the mosaic room-divider Lens photographed */
.hero-coins {
  position:           absolute;
  inset:              0;
  background-image:   radial-gradient(circle, rgba(240,239,235,0.10) 2px, transparent 2px);
  background-size:    22px 22px;
  pointer-events:     none;
}

.hero-inner {
  position: relative;
  z-index:  1;
}

.eyebrow {
  font-size:      var(--step--1);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.82);
  margin-bottom:  var(--space-sm);
}

.hero-title {
  color:          var(--text-on-terra);
  font-size:      clamp(2rem, 7vw, 3.4rem);
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-sm);
}

.hero-tagline {
  font-size:     var(--step-2);
  font-family:   var(--font-heading);
  font-style:    italic;
  color:         rgba(255,255,255,0.92);
  margin-bottom: var(--space-xs);
}

.hero-address {
  font-size:     var(--step--1);
  color:         rgba(255,255,255,0.78);
  margin-bottom: var(--space-lg);
}

/* Hours pills - min-height 44px so the pill area meets tap target even if not interactive */
.hours-row {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-sm);
  margin-bottom: var(--space-xs);
}

.hours-pill {
  display:      inline-flex;
  align-items:  center;
  gap:          0.4em;
  min-height:   var(--tap-min);
  padding:      0.65rem 1.1rem;
  background:   rgba(255,255,255,0.14);
  border:       1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-md);
  font-size:    var(--step-0);
  color:        var(--text-on-terra);
  line-height:  1.3;
  white-space:  nowrap;
}

.hours-pill--closed {
  background:   rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color:        rgba(255,255,255,0.65);
}

.pill-icon {
  flex-shrink: 0;
  opacity:     0.85;
}

/* Visible conflict caveat below the hours pills - required, not optional */
.hours-caveat {
  font-size:     var(--step--1);
  color:         rgba(255,255,255,0.72);
  font-style:    italic;
  margin-bottom: var(--space-lg);
  max-width:     none;
}

.hero-cta {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-sm);
}


/* 8. PLAT DU JOUR */
.section--plat {
  background: var(--cream-card);
}

.plat-card {
  position:      relative;
  background:    var(--offwhite);
  border-left:   4px solid var(--terracotta);
  border-radius: var(--radius-lg);
  padding:       var(--space-xl) var(--space-lg);
  overflow:      hidden;
  box-shadow:    0 2px 16px rgba(0,0,0,0.06);
}

/* Guitar/violin motif - top-right (verified by Lens) */
.plat-motif {
  position:  absolute;
  top:       var(--space-lg);
  right:     var(--space-lg);
  display:   flex;
  gap:       var(--space-xs);
  opacity:   0.18;
  color:     var(--terracotta);
  pointer-events: none;
}
.motif-guitar { width: 52px; height: auto; }
.motif-violin { width: 38px; height: auto; }

/* Coin-mosaic dot cluster (echoes the room-divider Lens observed) */
.plat-coins {
  position:         absolute;
  top:              -40px;
  right:            -40px;
  width:            180px;
  height:           180px;
  background-image: radial-gradient(circle, var(--mosaic) 3px, transparent 3px);
  background-size:  18px 18px;
  opacity:          0.13;
  border-radius:    50%;
  pointer-events:   none;
}

.plat-content { position: relative; z-index: 1; }

.plat-card h2 {
  font-size:     var(--step-3);
  margin-bottom: var(--space-md);
}

.plat-lead {
  font-size:     var(--step-1);
  line-height:   1.65;
  margin-bottom: var(--space-xl);
  color:         var(--text-secondary);
}

.specialites {
  margin-bottom: var(--space-xl);
}

.specialites-title {
  font-size:      var(--step-0);
  font-family:    var(--font-body);
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--charcoal);
  margin-bottom:  var(--space-md);
}

.specialites-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

.specialites-list li {
  display:       grid;
  gap:           var(--space-2xs);
  padding:       var(--space-md);
  background:    var(--cream-card);
  border-radius: var(--radius-md);
  border-left:   3px solid var(--honey);
}

.spec-name {
  font-family: var(--font-heading);
  font-size:   var(--step-1);
  font-weight: 700;
  color:       var(--text-primary);
}

.spec-note {
  font-size:  var(--step--1);
  color:      var(--text-secondary);
  font-style: italic;
}

.spec-caveat {
  font-size:   var(--step--1);
  color:       var(--text-secondary);
  margin-top:  var(--space-md);
  font-style:  italic;
}

.plat-cta {
  margin-top: var(--space-lg);
}


/* 9. A LA CARTE */
.section--carte {
  background: var(--offwhite);
}
.section--carte h2 {
  margin-bottom: var(--space-xs);
}

.menu-board {
  max-width: 580px;
}

/* Café featured strip */
.menu-cafe-strip {
  display:       flex;
  align-items:   baseline;
  flex-wrap:     wrap;
  gap:           var(--space-md);
  background:    var(--charcoal-dark);
  color:         var(--text-on-terra);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
}

.menu-cafe-label {
  font-family: var(--font-heading);
  font-size:   var(--step-2);
  font-style:  italic;
  color:       rgba(255,255,255,0.85);
}

.menu-cafe-price {
  font-family: var(--font-heading);
  font-size:   var(--step-4);
  font-weight: 700;
  color:       var(--amber);
  line-height: 1;
}

.menu-cafe-sub {
  font-size:  var(--step--1);
  color:      rgba(255,255,255,0.60);
  align-self: center;
}

/* Horizontal rule between menu categories */
.menu-rule {
  border:          none;
  border-top:      1px dashed var(--border);
  margin-block:    var(--space-xl);
}

/* Category block */
.menu-category {
  /* spacing comes from surrounding .menu-rule elements */
}

.menu-cat-title {
  font-family:    var(--font-body);
  font-size:      var(--step--1);
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--terracotta-dark);
  margin-bottom:  var(--space-md);
}

/* Sub-label inside the category heading */
.menu-cat-sub {
  display:        block;
  font-size:      var(--step--1);
  font-weight:    400;
  text-transform: none;
  letter-spacing: 0;
  color:          var(--text-secondary);
  margin-top:     var(--space-2xs);
}

/* Menu list - items with dotted leader and right-aligned price */
.menu-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.menu-row {
  display:     flex;
  align-items: flex-end;
  gap:         var(--space-xs);
  padding-block: var(--space-xs);
  border-bottom: 1px dotted var(--border);
}
.menu-row:last-child { border-bottom: none; }

.menu-item-name {
  font-size:   var(--step-0);
  color:       var(--text-primary);
  line-height: 1.4;
  flex-shrink: 0;
  max-width:   75%;
}

/* Dotted leader between name and price */
.menu-item-dots {
  flex:          1;
  border-bottom: 1.5px dotted var(--border);
  height:        1px;
  margin-bottom: 6px;
  min-width:     16px;
}

.menu-item-price {
  font-family: var(--font-heading);
  font-size:   var(--step-1);
  font-weight: 700;
  color:       var(--terracotta-dark);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

/* Price that needs owner confirmation */
.menu-item-price--tbc {
  font-family: var(--font-body);
  font-size:   var(--step--1);
  font-weight: 400;
  color:       var(--text-secondary);
  font-style:  italic;
}

/* Small note below a category - for from_photo items */
.menu-photo-note {
  font-size:  var(--step--1);
  color:      var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-sm);
  max-width:  none;
}

/* Tag pills for "aussi à la carte" items */
.menu-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-sm);
}

.menu-tag {
  display:       inline-block;
  padding:       var(--space-xs) var(--space-md);
  background:    var(--cream-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  font-size:     var(--step-0);
  color:         var(--text-secondary);
}


/* 10. PRATIQUE */
.section--pratique {
  background: var(--cream-card);
}

.pratique-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-lg);
}

.pratique-item {
  padding:       var(--space-lg);
  background:    var(--offwhite);
  border-radius: var(--radius-md);
  border:        1px solid var(--border);
}

.pratique-icon-wrap {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-md);
  background:      var(--terracotta);
  color:           var(--text-on-terra);
  margin-bottom:   var(--space-md);
  flex-shrink:     0;
}

.pratique-item h3 {
  font-size:     var(--step-1);
  margin-bottom: var(--space-xs);
}

.pratique-item p,
.pratique-item ul {
  font-size: var(--step-0);
  color:     var(--text-secondary);
}

.pratique-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2xs);
}

.pratique-list li::before {
  content:     "·\00a0";
  color:       var(--terracotta);
  font-weight: 700;
}


/* 11. VENIR NOUS VOIR */
.section--venir {
  background: var(--terracotta);
  color:      var(--text-on-terra);
}
.section--venir h2 { color: var(--text-on-terra); }

.venir-layout {
  display:    grid;
  gap:        var(--space-xl);
  margin-top: var(--space-lg);
}

.venir-address {
  font-size:   var(--step-2);
  line-height: 1.5;
  color:       var(--text-on-terra);
}

.venir-district {
  font-size:  var(--step--1);
  color:      rgba(255,255,255,0.72);
  margin-top: var(--space-xs);
}

.transport-title {
  font-size:     var(--step-1);
  color:         rgba(255,255,255,0.88);
  margin-bottom: var(--space-md);
}

.transport-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

.transport-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-md);
}

.transport-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-md);
  font-size:       var(--step--1);
  font-weight:     700;
  letter-spacing:  0.05em;
  flex-shrink:     0;
  margin-top:      2px;
}
.transport-badge--metro {
  background: var(--offwhite);
  color:      var(--terracotta-dark);
}
.transport-badge--tram {
  background: var(--amber);
  color:      var(--charcoal-dark);
}
.transport-badge--bus {
  background:   rgba(255,255,255,0.18);
  color:        var(--text-on-terra);
  border:       1px solid rgba(255,255,255,0.3);
}

.transport-detail {
  font-size:   var(--step-0);
  color:       rgba(255,255,255,0.88);
  line-height: 1.4;
}
.transport-detail strong { color: var(--text-on-terra); }


/* 12. CONTACT */
.section--contact {
  background: var(--cream-card);
}

.contact-intro {
  color:         var(--text-secondary);
  margin-top:    var(--space-xs);
  margin-bottom: var(--space-lg);
}

.contact-layout {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
}

/* Mobile: actions (DOM order: first) appear at top */
.contact-actions { order: 1; }
.contact-info    { order: 2; }

/* Large tap-friendly contact buttons */
.contact-actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.contact-btn {
  display:         flex;
  align-items:     center;
  gap:             var(--space-md);
  padding:         var(--space-md) var(--space-lg);
  border-radius:   var(--radius-md);
  text-decoration: none;
  min-height:      64px;   /* 44px minimum, 64px for comfort */
  transition:      filter var(--transition), transform var(--transition);
  touch-action:    manipulation;
  cursor:          pointer;
  border:          2px solid transparent;
}
.contact-btn:hover,
.contact-btn:focus-visible {
  filter:    brightness(1.08);
  transform: translateY(-1px);
  color:     var(--text-on-terra); /* prevent a:hover from overriding white text with terracotta */
}
/* Prevent the global a:hover { color: terracotta } from bleeding into
   these buttons — their text must stay white regardless of the link rule. */
.contact-btn--phone:hover,
.contact-btn--phone:focus-visible { color: var(--text-on-terra); }
.contact-btn--email:hover,
.contact-btn--email:focus-visible { color: var(--text-on-terra); }
.contact-btn--fb:hover,
.contact-btn--fb:focus-visible    { color: #FFFFFF; }

.contact-btn--phone { background: var(--terracotta); color: var(--text-on-terra); }
.contact-btn--email { background: var(--warm-brown);  color: var(--text-on-terra); }
.contact-btn--fb    { background: #1877F2;             color: #FFFFFF; }

.contact-btn-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  opacity:         0.9;
}

.contact-btn-text {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.contact-btn-label {
  font-size:      var(--step--1);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity:        0.85;
  line-height:    1;
}

.contact-btn-value {
  font-size:   var(--step-1);
  font-weight: 700;
  word-break:  break-all;
  line-height: 1.2;
}

/* Info block: address and hours */
.contact-info {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
}

.contact-info-block h3 {
  font-family:    var(--font-body);
  font-size:      var(--step--1);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--charcoal);
  margin-bottom:  var(--space-sm);
}

.contact-info-block address {
  font-size:   var(--step-0);
  color:       var(--text-secondary);
  line-height: 1.7;
}

.contact-hours-text {
  font-size:   var(--step-0);
  color:       var(--text-secondary);
  line-height: 1.6;
}

.contact-hours-closed {
  color: var(--charcoal);
}

/* Visible conflict caveat - intentional, required. Not a comment. */
.contact-hours-caveat {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-xs);
  font-size:     var(--step--1);
  color:         var(--warm-brown);
  background:    rgba(196, 160, 104, 0.14);
  border-left:   3px solid var(--honey);
  padding:       var(--space-sm) var(--space-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top:    var(--space-sm);
  font-style:    italic;
  max-width:     none;
}
.contact-hours-caveat svg { flex-shrink: 0; margin-top: 2px; }


/* 13. PHOTO SLOTS */
.section--photos {
  background: var(--cream-card);
}

/* photos-intro: inline email link meets 44px tap target */
.photos-intro { max-width: 60ch; }
.photos-intro a {
  color:        var(--text-link);
  display:      inline-flex;
  align-items:  center;
  min-height:   var(--tap-min);
}

.photo-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-md);
}

.photo-slot {
  background:    var(--offwhite);
  border-radius: var(--radius-md);
  border:        2px dashed var(--border);
  overflow:      hidden;
  background-image: linear-gradient(
    145deg,
    rgba(192, 53, 42, 0.04) 0%,
    rgba(196, 160, 104, 0.06) 100%
  );
}

.photo-slot--wide { grid-column: 1 / -1; }

.photo-slot__inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--space-xl) var(--space-lg);
  min-height:      160px;
  position:        relative;
  gap:             var(--space-sm);
}

.photo-slot--wide .photo-slot__inner { min-height: 200px; }

.photo-slot__motif {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0.5;
  pointer-events:  none;
}

.slot-svg {
  width:  100%;
  height: 100%;
  color:  var(--honey);
}

.slot-initials {
  position:       relative;
  z-index:        1;
  font-family:    var(--font-heading);
  font-size:      var(--step-3);
  font-weight:    700;
  color:          var(--honey);
  opacity:        0.55;
  line-height:    1;
  letter-spacing: 0.06em;
}

.slot-caption {
  position:    relative;
  z-index:     1;
  font-size:   var(--step--1);
  color:       var(--text-secondary);
  max-width:   28ch;
  line-height: 1.4;
}


/* 14. FOOTER */
.site-footer {
  background:    var(--charcoal-dark);
  color:         rgba(255,255,255,0.80);
  padding-block: var(--space-xl);
}

.footer-inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.footer-name {
  font-family: var(--font-heading);
  font-size:   var(--step-2);
  color:       var(--text-on-terra);
  font-style:  italic;
}

.footer-address {
  font-size:   var(--step--1);
  line-height: 1.7;
}

/* Footer links: meet 44px tap target with inline-flex and min-height */
.footer-address a {
  display:               inline-flex;
  align-items:           center;
  min-height:            var(--tap-min);
  padding-inline:        var(--space-2xs);
  color:                 rgba(255,255,255,0.80);
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.footer-address a:hover { color: var(--amber); }

.footer-hours {
  font-size: var(--step--1);
  color:     rgba(255,255,255,0.55);
}

.footer-facebook a {
  display:     inline-flex;
  align-items: center;
  min-height:  var(--tap-min);
  color:       rgba(255,255,255,0.60);
  font-size:   var(--step--1);
}
.footer-facebook a:hover { color: var(--amber); }


/* 15. RESPONSIVE - tablet and desktop (768px+) */
@media (min-width: 768px) {

  .hero-title    { font-size: var(--step-4); }
  .hero-tagline  { font-size: var(--step-2); }

  .plat-motif { opacity: 0.22; }
  .motif-guitar { width: 68px; }
  .motif-violin { width: 50px; }

  /* Pratique: 2x2 grid */
  .pratique-grid { grid-template-columns: 1fr 1fr; }

  /* Venir: side-by-side */
  .venir-layout { grid-template-columns: 1fr 1fr; align-items: start; }

  /* Contact: side-by-side, info on left, buttons on right */
  .contact-layout {
    flex-direction: row;
    align-items:    start;
  }
  .contact-info    { order: 1; flex: 1; }   /* info on left on desktop */
  .contact-actions { order: 2; flex: 1; }   /* buttons on right on desktop */

  /* Photo grid: 4 columns */
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .photo-slot--wide { grid-column: 1 / -1; }
  .photo-slot__inner { min-height: 180px; }
  .photo-slot--wide .photo-slot__inner { min-height: 240px; }

  /* Footer horizontal */
  .footer-inner {
    flex-direction: row;
    flex-wrap:      wrap;
    align-items:    baseline;
    gap:            var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .pratique-grid { grid-template-columns: repeat(4, 1fr); }
}


/* 16. ACCESSIBILITY AND REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}

@media (forced-colors: active) {
  .btn,
  .hours-pill,
  .contact-btn,
  .transport-badge {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
  }
}

@media print {
  .hero-coins, .plat-coins { display: none; }
  .site-hero  { background: #fff !important; color: #000 !important; }
  .btn        { border: 1px solid #000 !important; color: #000 !important; }
  a::after    { content: " (" attr(href) ")"; font-size: 0.8em; }
}