@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto:wght@300;400;500&display=swap');

:root {
  --teal:        #649498;
  --teal-light:  #68ccd1;
  --teal-dark:   #4a7174;
  --teal-pale:   #edf6f7;
  --dark:        #333333;
  --text:        #666666;
  --text-light:  #999999;
  --white:       #ffffff;
  --light:       #f7f9f9;
  --footer-bg:   #2a3535;
  --border:      #dde6e6;

  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;

  --shadow-sm: 0 2px 8px rgba(100,148,152,0.1);
  --shadow-md: 0 4px 20px rgba(100,148,152,0.15);
  --shadow-lg: 0 8px 40px rgba(100,148,152,0.2);

  --radius:  8px;
  --radius-lg: 16px;
  --t: 0.25s ease;
  --max: 1160px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
body  { font-family: var(--font-body); color: var(--text); background: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }
button{ font-family: var(--font-body); }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--dark); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section    { padding: 80px 0; }

.section-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 10px;
}
.section-title   { margin-bottom: 14px; }
.section-sub     { font-size: 1rem; color: var(--text-light); max-width: 560px; }
.section-head    { margin-bottom: 52px; }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--white);
  box-shadow: 0 1px 0 var(--border);
  transition: box-shadow var(--t);
}
.navbar.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.1); }

.nav-wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; justify-content: space-between;
}
.nav-brand  { display: flex; flex-direction: row; align-items: center; gap: 11px; }
.brand-mark { width: 36px; height: 36px; flex: none; border-radius: 9px; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; color: var(--dark); line-height: 1; }
.brand-sub  { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link  {
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 600;
  color: var(--text); padding: 8px 12px; border-radius: var(--radius);
  transition: all var(--t); letter-spacing: 0.02em;
}
.nav-link:hover       { color: var(--teal); background: var(--teal-pale); }
.nav-link.active      { color: var(--teal); }
.nav-link.btn-nav     { background: var(--teal); color: var(--white); margin-left: 8px; }
.nav-link.btn-nav:hover { background: var(--teal-dark); color: var(--white); }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform 0.35s cubic-bezier(.2,.7,.2,1), opacity 0.2s ease, background-color var(--t); transform-origin: center; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-backdrop {
  position: fixed; inset: 0; z-index: 1099;
  background: rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.nav-mobile-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s ease, visibility 0s; }

.nav-mobile {
  display: flex; position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86%, 360px);
  z-index: 1100;
  background: var(--white);
  flex-direction: column;
  padding: 22px 24px 24px;
  box-shadow: -12px 0 40px rgba(0,0,0,0.18);
  transform: translateX(100%);
  visibility: hidden; pointer-events: none;
  transition: transform 0.42s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.42s;
}
.nav-mobile.open {
  transform: translateX(0);
  visibility: visible; pointer-events: auto;
  transition: transform 0.42s cubic-bezier(.2,.7,.2,1), visibility 0s;
}

.nav-mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.nav-mobile-head .nav-brand { display: flex; flex-direction: row; align-items: center; gap: 11px; }

.nav-mobile-list {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; overflow-y: auto;
}
.nav-mobile-link {
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  color: var(--dark);
  padding: 14px 12px; border-radius: var(--radius);
  text-align: left;
  opacity: 0; transform: translateX(20px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.2,1), color var(--t), background var(--t);
}
.nav-mobile.open .nav-mobile-link { opacity: 1; transform: translateX(0); }
.nav-mobile.open .nav-mobile-link:nth-of-type(1) { transition-delay: 0.14s, 0.14s, 0s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-of-type(2) { transition-delay: 0.18s, 0.18s, 0s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-of-type(3) { transition-delay: 0.22s, 0.22s, 0s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-of-type(4) { transition-delay: 0.26s, 0.26s, 0s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-of-type(5) { transition-delay: 0.30s, 0.30s, 0s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-of-type(6) { transition-delay: 0.34s, 0.34s, 0s, 0s; }
.nav-mobile-link:hover { background: var(--teal-pale); color: var(--teal); }
.nav-mobile-link.active { color: var(--teal); background: var(--teal-pale); }

.nav-mobile-foot {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 18px; margin-top: 14px;
  border-top: 1px solid var(--border);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.35s ease 0.40s, transform 0.35s cubic-bezier(.2,.7,.2,1) 0.40s;
}
.nav-mobile.open .nav-mobile-foot { opacity: 1; transform: translateY(0); }
.nav-mobile-foot .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 0.85rem; }

.nav-mobile-close {
  width: 38px; height: 38px;
  background: var(--light); border: 1px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--text); cursor: pointer; padding: 0;
  transition: all var(--t);
}
.nav-mobile-close:hover { background: var(--teal-pale); color: var(--teal); border-color: var(--teal); }

.hero {
  position: relative; height: 100vh; min-height: 600px;
  display: flex; align-items: center; overflow: hidden;
  margin-top: 68px;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 8s ease; transform: scale(1.05);
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 100%);
}
.hero:hover .hero-bg { transform: scale(1); }
.hero-content { position: relative; z-index: 1; max-width: 640px; }
.hero-label {
  display: inline-block;
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: rgba(100,148,152,0.25); border: 1px solid rgba(104,204,209,0.5);
  color: var(--teal-light); padding: 6px 16px; border-radius: 100px;
  margin-bottom: 20px;
}
.hero h1 { color: var(--white); margin-bottom: 18px; }
.hero p  { font-size: 1.05rem; color: rgba(255,255,255,0.82); margin-bottom: 36px; max-width: 500px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.page-header {
  position: relative; height: 340px;
  display: flex; align-items: flex-end; padding-bottom: 52px;
  overflow: hidden; margin-top: 68px;
}
.page-header-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-header-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
}
.page-header-content { position: relative; z-index: 1; }
/* Page sans bandeau de titre : c'est la premiere section qui doit degager la
   barre fixe, sinon elle passe dessous. */
.section-first { margin-top: 68px; }
/* Variante sans photo : bandeau de couleur, pour les pages ou l'image
   n'apportait rien (carte). */
.page-header h1 { color: var(--white); }


.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.04em; cursor: pointer; border: none;
  transition: all var(--t); white-space: nowrap;
}
.btn-teal    { background: var(--teal); color: var(--white); box-shadow: 0 3px 12px rgba(100,148,152,0.35); }
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 5px 20px rgba(100,148,152,0.45); }
.btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.5); }
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.btn-outline-teal { background: transparent; color: var(--teal); border: 2px solid var(--teal); }
.btn-outline-teal:hover { background: var(--teal); color: var(--white); transform: translateY(-2px); }
.btn-white { background: var(--white); color: var(--teal); font-weight: 700; }
.btn-white:hover { background: var(--teal-pale); transform: translateY(-2px); }

.strip { background: var(--teal); padding: 60px 0; }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.strip-grid--duo { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; }
.strip-grid--trio { grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; }
.strip-item { text-align: center; }
.strip-number {
  font-family: var(--font-head); font-size: 2rem; font-weight: 800;
  color: var(--white); line-height: 1; margin-bottom: 6px; display: block;
}
.strip-label { font-size: 0.8rem; color: rgba(255,255,255,0.75); font-family: var(--font-head); font-weight: 500; }

.cards { display: grid; gap: 24px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative;
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); transition: all var(--t);
}
.card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  border-radius: 0 0 var(--radius) var(--radius);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(100,148,152,0.18); }
.card:hover::after { transform: scaleX(1); }
.card-img-wrap { overflow: hidden; }
/* Vaut aussi pour les <img> injectees par l'admin (data-ph), qui n'ont pas la
   classe .card-img : sans ca chaque photo garde son ratio et les cartes du
   meme rang n'ont plus la meme hauteur. */
.card-img, .card-img-wrap img { display: block; width: 100%; height: 290px; object-fit: cover; transition: transform 0.6s ease; }
/* Photo de pizza prise en portrait : le cadrage remonte, sinon la vignette ne
   montre qu'une bande de fromage au centre. */
[data-ph="accueil-card-pizzas"] img { object-position: 50% 20%; }
.card:hover .card-img, .card:hover .card-img-wrap img { transform: scale(1.07); }
.card-body  { padding: 22px; }
.card-label { font-family: var(--font-head); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.card-title { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 8px; color: var(--dark); }
.card-text  { font-size: 0.85rem; color: var(--text); line-height: 1.65; }
.card-foot  { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }

.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
/* L'image ne doit pas dicter la hauteur du bloc : une photo en portrait
   etirait la colonne de texte et laissait un grand vide a cote. Elle est donc
   posee en absolu et remplit la hauteur fixee par le texte. */
.split-img { overflow: hidden; position: relative; min-height: 340px; }
.split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.split-img:hover img { transform: scale(1.04); }
.split-body { display: flex; align-items: center; padding: 72px 56px; }
.split-body.bg-teal { background: var(--teal); }
.split-body.bg-teal .section-tag { color: rgba(255,255,255,0.7); }
.split-body.bg-teal h2, .split-body.bg-teal p { color: var(--white); }
.split-body.bg-teal p { color: rgba(255,255,255,0.8); }
.split-body.bg-light { background: var(--light); }
.split-inner { max-width: 440px; }
.split-inner p { color: var(--text); line-height: 1.75; margin-bottom: 14px; }

.tabs-wrap { text-align: center; }
.tabs {
  display: inline-flex; gap: 3px; padding: 4px;
  background: var(--light); border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 48px; flex-wrap: wrap; justify-content: center;
}
.tab {
  padding: 9px 22px; border-radius: calc(var(--radius) - 2px);
  font-family: var(--font-head); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; border: none; background: transparent; color: var(--text);
  transition: all var(--t);
}
.tab.active { background: var(--teal); color: var(--white); }
.tab:hover:not(.active) { background: var(--teal-pale); color: var(--teal); }

.panel { display: none; }
.panel.active { display: block; }

.menu-list { display: grid; }
.menu-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.menu-row:last-child { border-bottom: none; }
.menu-name { font-family: var(--font-head); font-size: 0.98rem; font-weight: 600; color: var(--dark); margin-bottom: 3px; }
.menu-desc { font-size: 0.78rem; color: var(--text-light); }
.menu-price { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--teal); white-space: nowrap; padding-top: 2px; }
.menu-row.star .menu-name::after { content: '  ★'; font-size: 0.7rem; color: var(--teal-light); }
/* Deux prix (petite / grande portion) : une ligne chacun, a la place du prix.
   La colonne des montants est de largeur fixe pour qu'ils restent alignes. */
.menu-price--duo { display: grid; grid-template-columns: auto 4.8em; gap: 2px 10px; text-align: right; }
.menu-price--duo .mp-lab {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--text-light); align-self: center;
}

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gal-item { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; cursor: pointer; }
.gal-item.tall { grid-row: span 2; aspect-ratio: auto; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gal-item:hover img { transform: scale(1.07); }
.gal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background var(--t); display: flex; align-items: center; justify-content: center; }
.gal-item:hover .gal-overlay { background: rgba(100,148,152,0.45); }

.cta-band {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  text-align: center; padding: 88px 0;
}
.cta-band h2 { color: var(--white); margin-bottom: 12px; }
.cta-band p  { color: rgba(255,255,255,0.82); font-size: 1.05rem; margin-bottom: 36px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  transition: all var(--t);
}
.info-card:hover { box-shadow: 0 8px 32px rgba(100,148,152,0.15); transform: translateY(-4px); border-color: var(--teal-light); }
.info-icon  { font-size: 2rem; margin-bottom: 14px; }
.info-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; color: var(--dark); }
.info-body  { font-size: 0.85rem; color: var(--text); line-height: 1.75; }
.info-body strong { color: var(--dark); font-weight: 600; }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table tr { border-bottom: 1px solid var(--border); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: 11px 0; font-size: 0.85rem; color: var(--text); }
.hours-table td:first-child { font-family: var(--font-head); font-weight: 600; color: var(--dark); width: 120px; }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 100px;
  font-family: var(--font-head); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-teal  { background: rgba(100,148,152,0.12); color: var(--teal); }
.badge-gray  { background: var(--light); color: var(--text-light); border: 1px solid var(--border); }
.badge-green { background: rgba(52,199,89,0.1); color: #2eb358; }

#pay-rotator .badge {
  border: 1px solid transparent;
  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
}
#pay-rotator .badge.badge-teal { transform: scale(1.07); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; align-items: start; }
.form-group   { margin-bottom: 18px; }
.form-label   { display: block; font-family: var(--font-head); font-size: 0.75rem; font-weight: 600; color: var(--dark); margin-bottom: 6px; letter-spacing: 0.03em; }
.form-input, .form-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.9rem; color: var(--dark);
  background: var(--white); transition: all var(--t); outline: none;
}
.form-input:focus, .form-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(100,148,152,0.1); }
.form-textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.footer { background: var(--footer-bg); color: var(--white); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; margin-bottom: 48px; }
.foot-logo    { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--white); margin-bottom: 4px;
                display: flex; align-items: center; gap: 10px; }
.foot-mark    { width: 30px; height: 30px; flex: none; border-radius: 8px; display: block; }
.foot-sub     { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 16px; }
.foot-about   { font-size: 0.84rem; color: rgba(255,255,255,0.5); line-height: 1.75; }
.foot-head    { font-family: var(--font-head); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 18px; }
.foot-links   { display: flex; flex-direction: column; gap: 9px; }
.foot-link    { font-size: 0.84rem; color: rgba(255,255,255,0.58); transition: color var(--t); }
.foot-link:hover { color: var(--white); }
.foot-info-row { display: flex; gap: 10px; font-size: 0.84rem; color: rgba(255,255,255,0.58); margin-bottom: 12px; align-items: flex-start; }
.foot-info-icon{ flex-shrink: 0; margin-top: 2px; display: flex; }

.payment-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pay-badge   { padding: 4px 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.45); }

.footer-sep  { height: 1px; background: rgba(255,255,255,0.07); }
.footer-bot  { padding: 22px 0; display: flex; justify-content: space-between; align-items: center; }
.foot-copy   { font-size: 0.76rem; color: rgba(255,255,255,0.28); }
.foot-legal  { display: flex; gap: 22px; }
.foot-legal a{ font-size: 0.76rem; color: rgba(255,255,255,0.28); transition: color var(--t); }
.foot-legal a:hover { color: rgba(255,255,255,0.65); }

.lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img  { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.lb-close, .lb-prev, .lb-next { background: rgba(255,255,255,0.1); border: none; color: var(--white); cursor: pointer; border-radius: var(--radius); transition: background var(--t); }
.lb-close { position: absolute; top: 20px; right: 20px; font-size: 1.4rem; padding: 10px 14px; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.4rem; padding: 14px 18px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.22); }

.mt-8  { margin-top:  8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8  { margin-bottom: 8px; } .mb-16{ margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.bg-light { background: var(--light); }
.bg-teal  { background: var(--teal); }

@media (max-width: 1024px) {
  .strip-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .split-body  { padding: 56px 40px; }
}
@media (max-width: 768px) {
  section { padding: 44px 0; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-img { height: 280px; }
  .split-body { padding: 44px 24px; }
  .info-grid  { grid-template-columns: 1fr; }
  .gallery    { grid-template-columns: repeat(2, 1fr); }
  .gal-item.tall { grid-row: auto; aspect-ratio: 4/3; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bot  { flex-direction: column; gap: 10px; text-align: center; }
  .hero-btns, .cta-actions { flex-direction: column; align-items: flex-start; }
  .cta-actions { align-items: center; }
  .form-row { grid-template-columns: 1fr; }
  .page-header { height: 260px; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .strip-grid.strip-grid--trio { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
/* Le trio reste sur UNE seule ligne en mobile : empile, il mangeait un ecran
   entier. Typo reduite et separateurs verticaux plutot que trois blocs. */
@media (max-width: 600px) {
  .strip { padding: 34px 0; }
  .strip-grid.strip-grid--trio { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .strip-grid.strip-grid--trio .strip-item {
    padding: 0 8px; border-left: 1px solid rgba(255,255,255,0.16);
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .strip-grid.strip-grid--trio .strip-item:first-child { border-left: none; }
  .strip-grid.strip-grid--trio .strip-number {
    font-size: 0.95rem; line-height: 1.2; margin-bottom: 3px; overflow-wrap: break-word;
  }
  .strip-grid.strip-grid--trio .strip-label {
    font-size: 0.65rem; line-height: 1.3; overflow-wrap: break-word;
  }
}
@media (max-width: 380px) {
  .strip-grid.strip-grid--trio .strip-item  { padding: 0 5px; }
  .strip-grid.strip-grid--trio .strip-number { font-size: 0.78rem; letter-spacing: -0.01em; }
  .strip-grid.strip-grid--trio .strip-label  { font-size: 0.58rem; }
}

.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: var(--light);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-placeholder span {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-img-wrap .img-placeholder { min-height: 290px; }

.reveal {
  opacity: 0;
  transform: translateY(var(--rv-from, 32px));
  transition: opacity 0.6s ease var(--rv-d, 0s), transform 0.6s ease var(--rv-d, 0s);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.7s ease var(--rv-d, 0s), transform 0.7s ease var(--rv-d, 0s);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.7s ease var(--rv-d, 0s), transform 0.7s ease var(--rv-d, 0s);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.strip-anim {
  opacity: 0;
  transform: translateY(var(--from, 24px));
  transition: opacity 0.55s ease var(--d, 0s), transform 0.55s ease var(--d, 0s);
}
.strip-anim.visible {
  opacity: 1;
  transform: translateY(0);
}

body {
  animation: page-in 0.35s ease both;
}

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.page-out {
  animation: page-out 0.25s ease forwards;
}
@keyframes page-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

#back-to-top {
  position: fixed;
  bottom: 92px;
  right: 28px;
  z-index: 998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
}
#back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 16px rgba(100,148,152,0.25);
}
#back-to-top svg {
  width: 16px;
  height: 16px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  z-index: 2000;
  transition: width 0.1s linear;
  pointer-events: none;
}

.fab-call {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Fonce plutot que teal : le bouton disparaissait sur les bandeaux teal. */
  background: var(--footer-bg);
  color: #fff;
  text-decoration: none;
  padding: 0 22px 0 18px;
  height: 52px;
  border-radius: 52px;
  box-shadow: 0 6px 22px rgba(20, 35, 37, 0.38);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: fab-appear 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.2s both;
}
.fab-call:hover {
  background: var(--teal-dark);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 30px rgba(20, 35, 37, 0.48);
}
.fab-call:active { transform: scale(0.97); }
.fab-icon {
  display: flex;
  align-items: center;
  line-height: 1;
}
/* Icones vectorielles (ex-emojis) : elles heritent de la couleur du texte
   et portent width/height en attribut pour ne pas ballonner avant le CSS. */
.ico { display: block; }
.foot-info-icon .ico { color: var(--teal-light); }
@keyframes fab-appear {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (max-width: 768px) {
  .fab-call .fab-label { display: none; }
  .fab-call { padding: 0; width: 52px; justify-content: center; }
}

.closed-banner {
  display: none;
  position: relative;
  z-index: 1001;
  background: #2a3535;
  border-bottom: 1px solid rgba(100,148,152,0.25);
  padding: 10px 0;
}
.closed-banner.show { display: block; }
.closed-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.closed-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e07a5f;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}
.closed-banner-text {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.03em;
}
.closed-banner-text strong {
  color: #fff;
}
.closed-banner-sep {
  color: rgba(255,255,255,0.2);
  font-size: 0.7rem;
}
.closed-banner-hours {
  font-family: var(--font-head);
  font-size: 0.72rem;
  color: var(--teal-light);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.reviews-carousel {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.rc-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.rc-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.rc-slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px 6px;
  display: flex;
}
.rc-slide .card { width: 100%; }
.rc-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: var(--white);
  color: var(--teal);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.rc-arrow:hover  { background: var(--teal); color: var(--white); transform: scale(1.06); }
.rc-arrow:active { transform: scale(0.96); }
.rc-arrow:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.rc-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
}
.rc-dot {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rc-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 100px;
  background: var(--border);
  transition: background 0.25s ease, width 0.25s ease;
}
.rc-dot:hover::before { background: var(--teal-light); }
.rc-dot.is-active::before { background: var(--teal); width: 26px; }
.rc-dot:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
@media (max-width: 720px) {
  .reviews-carousel { gap: 8px; }
  .rc-arrow { width: 38px; height: 38px; font-size: 1.25rem; }
  .rc-slide { padding: 4px 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-track { transition: none; }
}

.reviews-section { padding: 80px 0; }
@media (max-width: 768px) {
  .reviews-section { padding: 56px 0; }
}

@media (max-width: 480px) {
  .reviews-carousel { gap: 4px; }
  .rc-arrow { width: 32px; height: 32px; font-size: 1.05rem; }
  .rc-slide { padding: 4px 0 6px; }
}

.grp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 768px) {
  .grp-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .split-img:has(.img-placeholder) { display: none; }
}

@media (max-width: 768px) {
  .footer { text-align: center; }
  .foot-logo { justify-content: center; }
  .footer-grid { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 600px; margin: 0 auto 8px; }
  .foot-about { max-width: 480px; margin: 0 auto; }
  .foot-head { display: none; }
  .foot-links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0; }
  .foot-links li { display: flex; align-items: center; }
  .foot-links li:not(:last-child)::after { content: "\00B7"; color: rgba(255,255,255,0.3); margin: 0 14px; }
  .foot-info-row { align-items: center; justify-content: center; }
  .payment-row { justify-content: center; }
  .footer-sep { background: rgba(255,255,255,0.10); max-width: 340px; margin: 28px auto 0; }
  .footer-bot { flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
  .foot-legal { justify-content: center; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------
   Transitions arrondies entre sections.
   Une vague en masque CSS, coloree par `color` : on lui donne la
   couleur de la section VOISINE et elle vient mordre dessus.
   .wave--top    -> posee en haut d'une section, couleur = section du dessus
   .wave--bottom -> posee en bas  d'une section, couleur = section du dessous
   La section porteuse doit etre en position:relative et son contenu
   au-dessus (z-index), sinon la vague passe par-dessus le texte.
   --------------------------------------------------------------- */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 44px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201938%20110%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20103V0H1938V42C1937.03%2041.7882%201936.05%2041.6346%201935.06%2041.54C1914.42%2040.76%201893.78%2039.74%201873.13%2039.29C1774.42%2037.15%201675.95%2039.86%201577.99%2053.61C1526.99%2060.76%201476.55%2070.05%201426.99%2083.83C1366.88%20100.51%201306.26%20103.49%201245.2%2089.74C1222.34%2084.6%201199.78%2078.12%201176.93%2072.93C1125%2061.0666%201072.34%2052.6714%201019.29%2047.8C983.97%2044.58%20948.58%2041.18%20913.17%2040.28C861.22%2039%20809.2%2039%20757.24%2040C716.63%2040.78%20676.01%2043.16%20635.49%2046.23C597.49%2049.11%20559.55%2053.13%20521.75%2057.95C482.65%2062.95%20443.66%2068.95%20404.75%2075.54C361.75%2082.83%20319.14%2091.88%20276.17%2099.05C238.688%20105.208%20200.801%20108.577%20162.82%20109.13C158.2%20109.21%20153.58%20109.69%20148.96%20109.99H83.96C83.0331%20109.682%2082.0786%20109.465%2081.11%20109.34C64.22%20108.48%2047.32%20107.94%2030.46%20106.73C20.29%20106%2010.16%20104.28%200%20103Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201938%20110%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20103V0H1938V42C1937.03%2041.7882%201936.05%2041.6346%201935.06%2041.54C1914.42%2040.76%201893.78%2039.74%201873.13%2039.29C1774.42%2037.15%201675.95%2039.86%201577.99%2053.61C1526.99%2060.76%201476.55%2070.05%201426.99%2083.83C1366.88%20100.51%201306.26%20103.49%201245.2%2089.74C1222.34%2084.6%201199.78%2078.12%201176.93%2072.93C1125%2061.0666%201072.34%2052.6714%201019.29%2047.8C983.97%2044.58%20948.58%2041.18%20913.17%2040.28C861.22%2039%20809.2%2039%20757.24%2040C716.63%2040.78%20676.01%2043.16%20635.49%2046.23C597.49%2049.11%20559.55%2053.13%20521.75%2057.95C482.65%2062.95%20443.66%2068.95%20404.75%2075.54C361.75%2082.83%20319.14%2091.88%20276.17%2099.05C238.688%20105.208%20200.801%20108.577%20162.82%20109.13C158.2%20109.21%20153.58%20109.69%20148.96%20109.99H83.96C83.0331%20109.682%2082.0786%20109.465%2081.11%20109.34C64.22%20108.48%2047.32%20107.94%2030.46%20106.73C20.29%20106%2010.16%20104.28%200%20103Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 1;
}
.wave--top    { top: 0; }
.wave--bottom { bottom: 0; transform: rotate(180deg); }
@media (min-width: 768px) { .wave { height: 84px; } }

.cta-band, .footer { position: relative; }
.cta-band > .container, .footer > .container { position: relative; z-index: 2; }
/* De la place pour que la vague ne vienne pas mordre le texte. */
.cta-band.has-wave { padding: 124px 0 116px; }
.footer.has-wave   { padding-top: 108px; }
@media (max-width: 767px) {
  .cta-band.has-wave { padding: 76px 0 74px; }
  .footer.has-wave   { padding-top: 74px; }
}

/* ---------------------------------------------------------------
   Page Carte : plus de bandeau en haut, la carte demarre direct,
   avec la pizza detouree incrustee en fond a droite.
   --------------------------------------------------------------- */
.carte-section {
  position: relative;
  margin-top: 68px;
  overflow: hidden;   /* la pizza deborde a droite : jamais de scroll lateral */
}
.carte-section > .container { position: relative; z-index: 1; }
/* Les pizzas sont calees SUR LES BORDS de la colonne de texte (offset =
   leur propre largeur) : elles ne passent jamais sous les plats ni sous les
   prix, c'est le bord de l'ecran qui les rogne. */
.carte-deco {
  position: absolute;
  width: 620px; height: 483px;
  background: url('../photos/web/pizza-deco.webp') no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
}
.carte-deco--right { top: 40px;  right: -620px; transform: rotate(-6deg); }
.carte-deco--left  { top: 640px; left:  -620px; transform: scaleX(-1) rotate(-4deg); }
/* Sous cette largeur il n'y a plus de marge libre autour de la colonne : les
   pizzas restent, mais reduites, sorties par les bords et en filigrane, pour
   habiller le fond sans jamais gener la lecture des plats. */
@media (max-width: 1240px) {
  .carte-deco { width: 300px; height: 234px; opacity: 0.75; }
  .carte-deco--right { top: 90px;  right: -130px; }
  .carte-deco--left  { top: auto; bottom: 60px; left: -130px; }
}
@media (max-width: 600px) {
  /* Calees en haut et en bas de la section, la ou il n'y a ni plat ni prix. */
  .carte-deco { width: 235px; height: 183px; opacity: 0.75; }
  .carte-deco--right { top: 0;    right: -118px; }
  .carte-deco--left  { bottom: 0; left:  -118px; }
}

/* Carte un cran plus grande, sans casser le mobile. */
.carte-section .tab { font-size: 0.92rem; padding: 11px 26px; }
.carte-section .menu-row { padding: 22px 0; }
.carte-section .menu-name { font-size: 1.12rem; }
.carte-section .menu-desc { font-size: 0.88rem; }
.carte-section .menu-price { font-size: 1.15rem; }
@media (max-width: 768px) {
  .carte-section .tab { font-size: 0.82rem; padding: 9px 15px; }
  .carte-section .menu-row { padding: 18px 0; gap: 12px; }
  .carte-section .menu-name { font-size: 1.02rem; }
  .carte-section .menu-desc { font-size: 0.82rem; }
  .carte-section .menu-price { font-size: 1.02rem; }
  /* Colonne des montants resserree : le nom du plat garde sa place. */
  .menu-price--duo { grid-template-columns: auto 4.3em; gap: 2px 7px; }
  .menu-price--duo .mp-lab { font-size: 0.68rem; }
}

/* ---------------------------------------------------------------
   Bloc « Pizzeria / Restaurant » : assiette ronde coupee en deux,
   couronne crenelee, texte circulaire et deux fiches posees dessus.
   Inspire de pizza-amici.nl, transpose sur notre palette.
   --------------------------------------------------------------- */
.duo { background: var(--teal); overflow: hidden; padding: 120px 0; }
.duo-stage { position: relative; }

.duo-circle {
  position: relative;
  width: min(840px, 100%);
  margin: 0 auto;
  aspect-ratio: 1;
}
.duo-ring, .duo-arc {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.duo-arc, .duo-ring, .duo-photo, .duo-card { will-change: transform; }
.duo-arc, .duo-ring { transform-origin: 50% 50%; }
.duo-ring circle { fill: rgba(255,255,255,0.14); }
.duo-ring path   { fill: rgba(255,255,255,0.92); }

.duo-arc text {
  font-family: var(--font-head);
  font-size: 44px; font-weight: 800;
  letter-spacing: 0.02em;
  fill: var(--white);
}
.duo-arc .dot { fill: rgba(255,255,255,0.5); }

.duo-photo {
  position: absolute;
  left: 15%; top: 15%;
  width: 70%; height: 70%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.duo-card {
  position: absolute;
  width: 350px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 26px 26px 24px;
  box-shadow: 0 22px 60px rgba(20, 40, 42, 0.26);
}
.duo-card p { font-size: 0.9rem; color: var(--text); line-height: 1.7; margin-top: 8px; }
.duo-card-title { font-size: 1.65rem; margin-bottom: 2px; }
.duo-card-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.duo-card-btns .btn { justify-content: center; width: 100%; }

.duo-card--pizza { top: 8%;    left: 0;  transform: rotate(-2.5deg); }
.duo-card--resto { bottom: 6%; right: 0; transform: rotate(3deg); }

@media (max-width: 1100px) {
  .duo-card { width: 300px; }
  .duo-card--pizza { left: -20px; }
  .duo-card--resto { right: -20px; }
}
/* En dessous, plus de place autour du cercle : les fiches passent
   simplement sous l'assiette, a plat et sans rotation. */
@media (max-width: 900px) {
  .duo-circle { width: min(520px, 100%); }
  .duo-card {
    position: static;
    width: 100%;
    transform: none;
    margin-top: 20px;
    box-shadow: 0 12px 34px rgba(20, 40, 42, 0.20);
  }
}
/* Sur telephone on retrouve la composition du bureau : les deux fiches
   chevauchent l'assiette au lieu de descendre en dessous. Tout est reduit
   (assiette, fiches, typo) et le plateau garde une reserve haut et bas pour
   que les fiches debordent du cercle sans sortir de la section. */
@media (max-width: 640px) {
  .duo { padding: 60px 0; }
  .duo-stage { padding: 52px 0; }
  .duo-circle { width: 88%; }
  .duo-card {
    position: absolute;
    width: 49%;
    margin-top: 0;
    padding: 11px 12px 12px;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(20, 40, 42, 0.32);
  }
  .duo-card .section-tag { font-size: 0.47rem; letter-spacing: 0.13em; }
  .duo-card-title { font-size: 0.85rem; margin-bottom: 0; }
  .duo-card p { font-size: 0.59rem; line-height: 1.45; margin-top: 4px; }
  .duo-card-btns { margin-top: 9px; gap: 6px; }
  .duo-card-btns .btn { font-size: 0.56rem; padding: 7px 5px; letter-spacing: 0; }
  .duo-card--pizza { top: 0; left: -18px; bottom: auto; transform: rotate(-2.5deg); }
  .duo-card--resto { bottom: 0; right: -18px; top: auto;  transform: rotate(2.5deg); }
}
/* Ecrans etroits (iPhone SE et compagnie) : les deux fiches se rejoignaient
   au milieu et bouchaient l'assiette. Typo encore reduite et plus de reserve
   verticale, pour garder le cercle lisible entre les deux. */
@media (max-width: 375px) {
  .duo-stage { padding: 66px 0; }
  .duo-card { width: 51%; padding: 9px 10px 10px; }
  .duo-card .section-tag { font-size: 0.43rem; }
  .duo-card-title { font-size: 0.76rem; }
  .duo-card p { font-size: 0.54rem; line-height: 1.4; }
  .duo-card-btns { margin-top: 8px; }
  .duo-card-btns .btn { font-size: 0.52rem; padding: 6px 4px; }
}

/* « Nos espaces » (a-propos) : photo en encart et reperes sur deux colonnes.
   L'ancienne version etirait une liste dans une demi-page vide. */
.esp-duo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: center; }
.esp-photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.esp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.esp-photo:hover img { transform: scale(1.04); }
.esp-txt h2 { margin-bottom: 10px; }
.esp-txt p { color: var(--text); line-height: 1.7; margin-bottom: 20px; max-width: 520px; }
.esp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.esp-item { display: flex; gap: 12px; align-items: center; }
.esp-item svg { color: var(--teal); flex: none; }
.esp-nom { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: var(--dark); }
@media (max-width: 900px) { .esp-duo { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) {
  /* Les reperes restent sur deux colonnes en mobile, en plus compact. */
  .esp-grid { grid-template-columns: 1fr 1fr; gap: 14px 14px; }
  .esp-item { gap: 9px; align-items: flex-start; }
  .esp-item svg { width: 18px; height: 18px; margin-top: 1px; }
  .esp-nom { font-size: 0.86rem; line-height: 1.35; }
}

/* Haut de « A propos » : texte et photo cote a cote, chiffres en pied de bloc.
   Remplace l'ancien bandeau pleine largeur, qui etirait la page pour deux chiffres. */
.hist-duo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; }
.hist-txt h1 { margin-bottom: 12px; }
.hist-txt p { color: var(--text); line-height: 1.75; margin-bottom: 14px; max-width: 560px; }
.hist-photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5/4; }
.hist-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hist-photo:hover img { transform: scale(1.04); }
.hist-chiffres { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 38px;
                 margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--border); }
.hist-c { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hist-n { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--teal); line-height: 1.1; }
.hist-l { font-size: 0.78rem; color: var(--text-light); margin-top: 3px; }
/* Le texte existe en deux longueurs : la version courte sert au telephone,
   ou deux paragraphes pleins repoussent la photo hors du premier ecran. */
.hist-courte { display: none; }
@media (max-width: 900px) {
  /* Sous 900 px on empile : a deux colonnes, le texte tombe a quatre mots par
     ligne et le bloc devient illisible. */
  .hist-duo { grid-template-columns: 1fr; gap: 24px; }
  .hist-photo { aspect-ratio: 4/3; }
}
@media (max-width: 768px) {
  .hist-longue { display: none; }
  .hist-courte { display: block; }
}

/* Fond bleu-vert de la section « Nos espaces ». La teinte foncee est retenue
   pour le contraste : sur --teal, meme du blanc pur ne depasse pas 3,4:1. */
.esp-section { background: var(--teal-dark); }
.esp-section .section-tag { color: rgba(255,255,255,0.9); }
.esp-section .section-title { color: var(--white); }
.esp-section .esp-txt p { color: rgba(255,255,255,0.92); }
.esp-section .esp-item svg { color: rgba(255,255,255,0.85); }
.esp-section .esp-nom { color: var(--white); }

/* Accueil : meme bloc que « Notre histoire » sur A propos, photo a gauche. */
.hist-duo--photo { grid-template-columns: 0.9fr 1.1fr; }

/* Bande de reperes de l'accueil. Remplace un bandeau de 184 px de haut qui
   n'affichait que trois mots. Sur telephone, les reperes s'empilent. */
.bande { background: var(--teal-dark); padding: 22px 0; }
.bande-grid { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.bande-item { display: flex; align-items: baseline; gap: 9px; color: var(--white); padding: 6px 34px; }
.bande-item + .bande-item { border-left: 1px solid rgba(255,255,255,0.25); }
.bande-n { font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; }
.bande-l { font-size: 0.82rem; color: rgba(255,255,255,0.78); }
@media (max-width: 900px) { .bande-item { padding: 6px 20px; } }
@media (max-width: 768px) {
  .bande { padding: 14px 0; }
  .bande-grid { flex-direction: column; align-items: stretch; }
  .bande-item { padding: 11px 0; justify-content: flex-start; }
  .bande-item + .bande-item { border-left: 0; border-top: 1px solid rgba(255,255,255,0.2); }
  .bande-l { margin-left: auto; }
}