/* Bella Trattoria – styles compacts (header plus bas) */
:root{
  --bg:#f8f6f2;
  --card:#ffffff;
  --ink:#3a3a3a;
  --muted:#666;
  --border:#e9e4da;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial}
img{max-width:100%;height:auto;display:block}

.container{max-width:1500px;margin:0 auto;padding:20px}

/* Header tricolore – plus bas */
.header{
  background:#f1e9d8 url('../assets/italian-flag-banner.png') center/100% 100% no-repeat;
  padding:20px 16px 12px;           /* ↓ au lieu de 56px 16px 24px */
}
.header .inner{
  display:grid;
  grid-template-columns:1.6fr minmax(340px,440px) 1.6fr;
  gap:24px;                         /* ↓ au lieu de 56px */
  align-items:center;
  min-height:0;                     /* supprime la contrainte 380px */
}

/* Brand (centre) */
.brand-simple{ text-align:center; color:var(--ink) }
.brand-simple .logo{ width:360px; height:auto; margin:0 auto 8px; display:block } /* ↓ 420px */
.brand-simple p{ margin:4px 0; color:#444 }

/* Colonnes gauche/droite */
.contact-block, .hours-block{ background:transparent; border:0; }
.contact-block{ justify-self:start; }
.contact-lines .line{ font-size:20px; line-height:1.55 }  /* ↓ 22px */

.hours-block{ color:var(--ink); justify-self:end; text-align:left }
.hours-block h3{ margin:.2rem 0 .6rem; text-align:center } /* marges réduites */
.hours-block table{ width:100%; border-collapse:collapse; font-size:16px }
.hours-block td{ padding:8px 0; border-bottom:0 }
.hours-block td:first-child{ text-align:left; font-weight:600 }
.hours-block td:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.hours-block td.closed{ color:#888; font-style:italic }

/* Cards & CTA section */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.map-section{margin:28px 0;background:#e7dbc5 url('../assets/map-placeholder.png') center/cover no-repeat;border-radius:18px;border:1px solid var(--border);padding:60px 16px}
.ctas{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.cta{background:#222;color:#fff;border-radius:14px;padding:18px 24px;text-decoration:none;font-weight:700;min-width:260px;text-align:center}
.cta small{display:block;font-weight:500;opacity:.9;margin-top:6px}

/* Reviews (no API) */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:#222;color:#fff;text-decoration:none;font-weight:700}
.btn:hover{filter:brightness(1.1)}
.maps-embed iframe{border-radius:12px}

/* Footer */
.footer{padding:24px 16px 48px;color:#666;text-align:center}

/* Responsive header stack */
@media (max-width:1100px){
  .header .inner{ grid-template-columns:1fr; gap:20px; }
  .contact-block,.hours-block{ justify-self:center; }
  .contact-lines .line{ font-size:18px; }
  .brand-simple .logo{ width:300px; } /* un peu plus petit sur mobile */
}

/* --- V10 CTA image cards replacing old strip --- */
.cta-strip{ display:none !important; } /* masque l'ancien bloc s'il reste dans le HTML */
.cta-cards{ padding: 22px 0 8px; }
.cta-cards .wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.card-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:70px; }

.cta-card{ position:relative; min-height:280px; border-radius:24px; overflow:hidden; box-shadow: var(--shadow); }
.cta-card .bg{ position:absolute; inset:0; background:#ccc center/cover no-repeat; transform:scale(1.02); transition:transform .45s ease; }
.cta-card.ristorante .bg{ background-image:url('../assets/cta-ristorante.jpg'); }
.cta-card.pizza .bg{ background-image:url('../assets/cta-pizza.jpg'); }
.cta-card.epicerie .bg{ background-image:url('../assets/cta-epicerie.jpg'); }
.cta-card::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45) 60%, rgba(0,0,0,.60)); }
.cta-card a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px; color:#fff; text-decoration:none; }
.cta-card h3{ margin:0 0 4px; font-size:28px; line-height:1.1; font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.35); }
.cta-card p{ margin:0; font-style:italic; font-weight:600; opacity:.95; text-shadow:0 1px 6px rgba(0,0,0,.3); }
.cta-card:hover .bg{ transform:scale(1.06); }

@media (max-width: 960px){
  .card-row{ grid-template-columns:1fr; }
  .cta-card{ min-height:220px; }
  .cta-card h3{ font-size:24px; }
}

/* Fond Italie en plein centre + avis transparents */
main.container{ position: relative; z-index: 0; }
main.container::before{
  content:""; position:absolute; top:0; bottom:0;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: url('../assets/carte_italie4.png') center/cover no-repeat;
  opacity:.24; pointer-events:none; z-index:-1; filter: contrast(1.05) saturate(.95);
}
section.reviews{ background: transparent; }
.reviews .map-card{ background: transparent !important; border:0 !important; box-shadow:none !important; }

/* --- FIX clic CTA --- */
.cta-card .bg { 
  pointer-events: none;
}
.cta-card::after { 
  pointer-events: none;
}
.cta-card a {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* === V12: Fond carte FIXE sur toute la page (compatible iOS) === */
body.has-fixed-bg{ position:relative; z-index:0; }
body.has-fixed-bg::before{
  content:"";
  position:fixed; /* clé : ne bouge pas au scroll */
  inset:0;
  z-index:-1;
  background:url('../assets/carte_italie4.png') center/cover no-repeat;
  opacity:.18; /* ajuste le filigrane (0.08–0.25) */
  pointer-events:none;
}
/* Neutralise l'ancien fond sur <main> quand fond fixe actif */
body.has-fixed-bg main.container::before{ display:none !important; }

/* === V12: Couleurs adresse + horaires === */
.header .contact-lines .line{ color:#ffffff !important; }
.header .hours-block,
.header .hours-block td,
.header .hours-block h3{ color:#ffffff !important; }
.header .hours-block td.closed{ color:#ffffff !important; }

/* --- V14 : Moyens de paiement --- */
/* --- V14 : Moyens de paiement --- */
.payments {
  text-align: center;
  margin: 40px auto 20px;
}
.payments h2 {
  font-size: 20px;
  margin-bottom: 14px;
  color: #333;
}
.payments-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}
.payments-logos img {
  height: 22px !important;   /* 🔹 taille réduite de façon stricte */
  width: auto !important;
  max-height: 22px;
  display: inline-block;
  opacity: 0.9;
  transition: transform .2s ease, opacity .2s ease;
}
.payments-logos img:hover {
  transform: scale(1.05);
  opacity: 1;
}
.payments-note {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}



/* === Modal Mentions légales (V15) === */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:9999; }
.modal-overlay[hidden]{ display:none !important; }
.modal{ background:#fff; width:min(760px, 100%); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; max-height:88vh; display:flex; flex-direction:column; }
.modal-header{ background:#e74c3c; color:#fff; padding:14px 18px; }
.modal-header h3{ margin:0; font-size:18px; letter-spacing:.2px; }
.modal-content{ padding:10px 18px; overflow:auto; }
.ml-row{ display:flex; gap:16px; padding:10px 0; border-bottom:1px solid var(--border); }
.ml-row:last-child{ border-bottom:0; }
.ml-label{ flex:0 0 42%; font-weight:700; color:#444; }
.ml-value{ flex:1; color:#222; }
.modal-actions{ padding:12px 18px; border-top:1px solid var(--border); text-align:center; background:#fafafa; }
button#closeLegal{ padding:10px 18px; border-radius:10px; border:0; background:#222; color:#fff; font-weight:700; cursor:pointer; }
button#closeLegal:hover{ filter:brightness(1.1); }
@media (max-width:560px){
  .ml-label{ flex-basis:46%; }
}



/* Correction taille logos paiement */
.payment-logos img {
  max-width: 60px;   /* largeur max en pixels */
  height: auto;      /* conserve le ratio */
  margin: 0 6px;     /* petit espace entre logos */
  display: inline-block;
}
.payment-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}



/* =====================
   Contact form (V16-3)
   ===================== */
.contact-section{padding:40px 0}
.contact-section.has-transparent-bg{background:transparent}
.section-title{font-size:28px;margin:0 0 8px;text-align:center}
.section-subtitle{color:var(--muted);text-align:center;margin:0 0 24px}

.contact-form{max-width:980px;margin:0 auto;border:0;box-shadow:none;border-radius:20px;padding:0;background:transparent}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field--full{grid-column:1 / -1}
.form-field label{font-weight:600}
.form-field input,.form-field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;
  background:#fff;color:var(--ink);font-size:16px
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:#bbb;box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:8px;flex-wrap:wrap}
.form-note{margin:0;color:var(--muted);font-size:14px}

/* Button style (scoped to contact form to avoid conflicts with other .btn) */
.contact-form .btn{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid var(--border);box-shadow:0 6px 16px rgba(0,0,0,.08);background:#fff;color:#222 !important;cursor:pointer;font-weight:700}
.contact-form .btn:hover{filter:brightness(.98)}
.btn-primary{font-weight:700}
.hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.contact-status{margin:0 auto 16px;max-width:980px;text-align:center;font-weight:600}
.contact-status--ok{color:#167c2b}
.contact-status--fail{color:#9b1c1c}

@media (max-width: 780px){
  .form-grid{grid-template-columns:1fr}
}

@media (min-width: 1280px){ .card-row{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 1279.98px) and (min-width: 700px){ .card-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 699.98px){ .card-row{ grid-template-columns: 1fr !important; } }

/* Ensure foto card is fully clickable with overlay */
.cta-card.foto{ position:relative; overflow:hidden; }
.cta-card.foto .bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:inherit; z-index:1; }
.cta-card.foto a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; text-decoration:none; z-index:2; }
.cta-card.foto a::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55)); pointer-events:none; z-index:0; }
.cta-card.foto h3, .cta-card.foto p{ position:relative; z-index:1; }

/* V17-2b — Foto card fixes */
.cta-card.foto{ position:relative; overflow:hidden; }
.cta-card.foto .bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:inherit; z-index:1; }
.cta-card.foto a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; text-decoration:none; z-index:2; }
.cta-card.foto a::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55)); pointer-events:none; z-index:0; }
.cta-card.foto h3, .cta-card.foto p{ position:relative; z-index:1; }

@media (min-width: 1280px){ .card-row{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 1279.98px) and (min-width: 700px){ .card-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 699.98px){ .card-row{ grid-template-columns: 1fr !important; } }