/* Porté depuis la maquette demo_comptoir_2. */
:root {
  --green: #3F6E4F;
  --green-deep: #234A33;
  --gold: #F2D26B;
  --gold-deep: #B8921E;
  --gold-text: #7A5C08; /* jaune foncé pour du texte sur fond clair (contraste > 5:1) */
  --gold-light: #FBEFC0;
  --cream: #FBF7EA;
  --white: #FFFFFF;
  --terracotta: #C1502E;
  --ink: #1B2A21;
  --grey: #6B7269;
  --display: "Baloo 2", "Fredoka", sans-serif;
  --script: "Caveat", cursive;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
section[id] { scroll-margin-top: 64px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; }
/* WordPress met les marges des enfants de groupes à 0 : on rend celles de la maquette (même poids, placées après). */
:root :where(h1, h2, h3) { margin: 0 0 0.35em; }
:root :where(p, ul, ol) { margin-block: 1em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); text-transform: uppercase; }
.script { font-family: var(--script); font-weight: 600; text-transform: none; color: var(--gold-text); font-size: 1.1em; display: block; line-height: 1.1; }
.muted { color: var(--grey); }

.mockup-banner {
  background: var(--terracotta); color: var(--white); text-align: center; padding: 8px 16px; font-size: 0.78rem;
  font-weight: 700;
}

/* Striped frame, like the flyer's border */
.stripes {
  height: 40px;
  background: repeating-linear-gradient(90deg, var(--green) 0px, var(--green) 9px, var(--gold-light) 9px, var(--gold-light) 18px);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 6px;
  font-weight: 800; font-size: 0.92rem; border: 2px solid var(--green-deep); cursor: pointer; transition: all 0.2s ease;
  text-transform: uppercase; letter-spacing: 0.02em; font-family: var(--display);
}
.btn-gold { background: var(--gold-grad); color: var(--green-deep); border-color: transparent; box-shadow: 0 4px 12px rgba(27, 42, 33, 0.22), var(--pill-shine); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(27, 42, 33, 0.26), var(--pill-shine); }
.btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--green-deep); }
.btn-dark { background: var(--green-deep-grad); color: var(--gold-light); border-color: transparent; }
.btn-dark:hover { background: var(--green-grad); }


/* Header - big logo */
.site-header { --logo-h: clamp(96px, 16vw, 150px); background: var(--cream); padding: 18px 0 10px; position: relative; }
.site-header .wrap { display: flex; align-items: center; justify-content: flex-start; }
.brand { display: block; }
.brand img { height: var(--logo-h); width: auto; mix-blend-mode: multiply; }

/* Pancarte ardoise - accrochée en haut du header, à droite du logo, à la craie comme celles du resto */
.door-sign {
  position: relative; align-self: flex-start; margin: -18px auto 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; font-size: 16px;
  transform-origin: top center; animation: doorSwing 5.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,0.3));
}
.door-sign-cord { width: 2px; height: calc(var(--logo-h) / 2 + 32px - 3.95em); background: #C9B087; }
.door-sign-plaque {
  position: relative; display: flex; flex-direction: column; align-items: center; min-width: 7.2em;
  padding: 0.8em 1.3em 0.7em; border-radius: 4px; border: 3px solid #3A2F23;
  background:
    radial-gradient(ellipse at 28% 22%, rgba(255,255,255,0.07), transparent 55%),
    radial-gradient(ellipse at 78% 80%, rgba(255,255,255,0.04), transparent 50%),
    #1B1D1C;
}
/* Pince à linge en bois */
.door-sign-plaque::before {
  content: ""; position: absolute; top: -1.45em; left: 50%; width: 1em; height: 2.2em; margin-left: -0.5em;
  border-radius: 3px; background: linear-gradient(90deg, #B98F57, #D9B77F 45%, #A97F48); box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.door-sign-plaque::after {
  content: ""; position: absolute; top: -0.75em; left: 50%; width: 0.7em; height: 2px; margin-left: -0.35em; background: rgba(60,40,15,0.55);
}
.door-sign-status {
  font-family: var(--script); font-weight: 700; font-size: 2.1em; line-height: 0.95; letter-spacing: 0.02em;
  color: #B5E8A8; text-shadow: 0 0 1px rgba(255,255,255,0.5); white-space: nowrap; position: relative;
}
.door-sign-status::after {
  content: ""; display: block; height: 7px; margin-top: 2px; opacity: 0.85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M2 4 C 14 1, 26 6, 40 3 S 66 1, 78 4 S 92 5, 98 3' fill='none' stroke='%23EDEBE3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.door-sign.is-closed .door-sign-status { color: #FF9C8C; }
.door-sign-sub {
  font-family: var(--script); font-weight: 600; font-size: 1.15em; line-height: 1.1; color: #EDEBE3; opacity: 0.92;
  margin-top: 0.1em; white-space: nowrap;
}
@keyframes doorSwing {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

/* Hero */
.hero { background: var(--green); color: var(--white); padding: 56px 0 70px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero-eyebrow {
  display: inline-block; background: var(--gold); color: var(--green-deep); font-weight: 800;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 14px;
  border-radius: 4px; margin-bottom: 18px; font-family: var(--display); transform: rotate(-2deg);
}
.hero h1 { color: var(--white); }
.hero h1 .accent { color: var(--gold); position: relative; white-space: nowrap; }
.hero h1 .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px; opacity: 0.9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 14 1, 22 8, 34 4 S 54 1, 66 5 S 90 8, 102 3 S 114 5, 118 4' fill='none' stroke='%23F2D26B' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero .lead { font-size: 1.1rem; color: #E3ECE6; max-width: 48ch; margin: 14px 0 18px; }
.pillars { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.pillars li {
  border: 2px solid var(--gold); color: var(--gold-light); border-radius: 100px; padding: 6px 16px;
  font-family: var(--display); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.pillars li:nth-child(2) { transform: rotate(1.5deg); }
.pillars li:nth-child(3) { transform: rotate(-1deg); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-photo { position: relative; }
.hero-photo img {
  border-radius: 6px; aspect-ratio: 4/5; object-fit: cover; border: 6px solid var(--white);
  box-shadow: 0 18px 36px rgba(0,0,0,0.3);
}
.price-sticker {
  position: absolute; bottom: -20px; left: -18px; width: 150px; height: 150px; border-radius: 50%;
  background: var(--gold-grad); color: var(--green-deep); display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.45); line-height: 1;
}
.price-sticker .big { font-family: var(--display); font-weight: 800; font-size: 2.8rem; }
.price-sticker .small { font-family: var(--script); font-weight: 700; font-size: 1.05rem; line-height: 1.05; padding: 0 14px; }

/* Section heads */
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.hl { background: linear-gradient(transparent 58%, var(--gold) 58%); padding: 0 4px; }
.hl-dark { background: linear-gradient(transparent 58%, var(--gold) 58%); padding: 0 4px; color: var(--green-deep); }

/* Buffet */
.buffet { padding: 80px 0 70px; }
.buffet h2 { color: var(--green-deep); }

.tarifs { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px; }
.tarif {
  background: var(--white); border: 1px solid rgba(35, 74, 51, 0.35); border-radius: 8px; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 2px; position: relative;
}
.tarif-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--green-deep); font-size: 1.05rem; }
.tarif-detail { font-size: 0.8rem; color: var(--grey); font-weight: 600; }
.tarif-price { font-family: var(--display); font-weight: 800; font-size: 2.2rem; color: var(--green); margin-top: 8px; line-height: 1; }
.tarif-main { background: var(--green-deep-grad); border-color: transparent; box-shadow: 0 10px 24px rgba(27, 42, 33, 0.25); }
.tarif-main .tarif-name { color: var(--gold); }
.tarif-main .tarif-detail { color: #C3D4C8; }
.tarif-main .tarif-price { color: var(--gold); font-size: 3.2rem; }
.tarifs-note { text-align: center; margin: 22px 0 0; font-weight: 700; color: var(--green); font-size: 0.9rem; }

/* Fait maison */
.maison { background: var(--green-deep); color: var(--white); padding: 76px 0; }
.maison h2 { color: var(--white); }
.maison .hl-dark { color: var(--gold); background: none; padding: 0; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.maison-more { margin: 48px 0 0; color: #CFDDD3; }
.maison-more strong { color: var(--gold-light); }

/* Carousel - polaroïds épinglés */
.gallery { padding: 80px 0 70px; overflow: hidden; }
.gallery h2 { color: var(--green-deep); }
.pc { position: relative; max-width: 900px; margin: 0 auto; outline: none; }
.pc-stage { position: relative; height: 560px; touch-action: pan-y; cursor: grab; user-select: none; }
.pc-stage.is-dragging { cursor: grabbing; }
.pc-card {
  position: absolute; top: 0; left: 50%; width: 330px; margin: 0 0 0 -165px; background: var(--white);
  padding: 14px 14px 12px; box-shadow: 0 10px 26px rgba(27,42,33,0.22); transition: transform 0.7s cubic-bezier(0.34, 1.35, 0.5, 1), opacity 0.5s ease, filter 0.5s ease;
  will-change: transform;
}
.pc-card::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 92px; height: 26px; margin-left: -46px; z-index: 2;
  background: rgba(242,210,107,0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.pc-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: #E8E1CC; pointer-events: none; }
.pc-card figcaption { font-family: var(--script); font-weight: 700; font-size: 1.5rem; text-align: center; color: var(--green-deep); padding-top: 8px; line-height: 1.1; }
.pc-btn {
  position: absolute; top: 42%; width: 48px; height: 48px; border-radius: 50%; border: none; font-family: var(--display);
  background: var(--gold-grad); color: var(--green-deep); font-size: 1.3rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 12px rgba(27, 42, 33, 0.25); z-index: 20; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pc-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(27, 42, 33, 0.3); }
.pc-btn.prev { left: 0; }
.pc-btn.next { right: 0; }
.pc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.pc-dot { width: 10px; height: 10px; border-radius: 50%; background: #D5CDB1; transition: all 0.3s ease; }
.pc-dot.active { background: var(--green-deep); width: 28px; border-radius: 6px; }

/* Avis Google */
.avis { background: var(--gold-grad); color: var(--green-deep); padding: 56px 0; }
.avis-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.avis h2 { margin-bottom: 8px; }
.avis .script { color: var(--green); font-size: 1.15em; }
.avis p { margin: 0; max-width: 54ch; }
.avis-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.avis .btn-gold { background: var(--green-deep-grad); color: var(--gold-light); box-shadow: 0 4px 12px rgba(27, 42, 33, 0.22), var(--pill-shine); }
.avis .btn-gold:hover { box-shadow: 0 7px 16px rgba(27, 42, 33, 0.26), var(--pill-shine); }
.avis .btn-outline { color: var(--green-deep); border-color: var(--green-deep); }
.avis .btn-outline:hover { background: var(--green-deep); color: var(--gold-light); }

/* Infos + map */
.infos { padding: 80px 0; }
.infos h2 { color: var(--green-deep); }
.infos-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 28px; align-items: stretch; }
.infos-cards { display: flex; flex-direction: column; gap: 14px; }
.info-card { background: var(--white); border: 1px solid rgba(35, 74, 51, 0.35); border-radius: 8px; padding: 18px 20px; }
.info-card h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-text); margin-bottom: 4px; }
.info-card p { margin: 0; font-weight: 600; }
.info-card a { text-decoration: underline; text-underline-offset: 3px; }
.map-frame { border: 1px solid rgba(35, 74, 51, 0.35); border-radius: 8px; overflow: hidden; min-height: 340px; box-shadow: 0 10px 24px rgba(27, 42, 33, 0.15); }
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }


/* Footer */
.site-footer { background: var(--green-deep); color: #B9C4BC; padding: 40px 0; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-logo img { height: 70px; width: auto; border-radius: 4px; background: var(--cream); padding: 6px 10px; }
.footer-addr { font-weight: 700; color: var(--white); }
.footer-addr .phone { color: var(--gold-light); display: block; margin-top: 4px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex;
  align-items: center; justify-content: center; color: var(--white);
}
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { margin-top: 26px; font-size: 0.78rem; text-align: center; color: #B9C4BC; }
.footer-bottom strong { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .door-sign { animation: none; }
  .pc-card { transition: opacity 0.2s ease; }
  html { scroll-behavior: auto; }
}

@media (max-width: 820px) {
  .hero-grid, .infos-layout { grid-template-columns: 1fr; }
  .hero-photo { max-width: 340px; margin: 10px auto 0; }
  .tarifs { grid-template-columns: 1fr 1fr; }
  .tarif-main { grid-column: 1 / -1; }
  .footer-grid { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .site-header { --logo-h: 84px; }
  .door-sign { font-size: 9.5px; }
  .door-sign-cord { height: calc(var(--logo-h) / 2 + 16px - 3.95em); }
  .mockup-banner { font-size: 0.7rem; padding: 6px 12px; }
  .pc-stage { height: 440px; }
  .pc-card { width: 240px; margin-left: -120px; }
  .pc-btn { top: 38%; }
  .avis-actions { width: 100%; }
}

/* Chatbot widget */
.cb-toggle-group { position: fixed; bottom: 22px; right: 22px; z-index: 60; display: flex; align-items: center; }
.cb-toggle {
  width: 60px; height: 60px; border-radius: 50%; background: var(--gold);
  color: var(--green-deep); border: none; cursor: pointer; box-shadow: 0 10px 24px rgba(20,51,39,0.35);
  display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease;
}
.cb-toggle:hover { transform: scale(1.12); }
.cb-toggle svg { width: 26px; height: 26px; }
.cb-toggle .close-ic { display: none; }
.cb-toggle.open .chat-ic { display: none; }
.cb-toggle.open .close-ic { display: block; }

.cb-tooltip {
  position: absolute; right: 72px; z-index: 20; transform-origin: right center; transform: scale(0);
  background: var(--ink); color: var(--gold-light); font-family: var(--display); font-weight: 600;
  font-size: 0.82rem; padding: 8px 14px; border-radius: 100px; white-space: nowrap; box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  transition: transform 0.2s ease; pointer-events: none;
}
.cb-toggle-group:hover .cb-tooltip, .cb-toggle-group.nudge .cb-tooltip { transform: scale(1); }
.cb-toggle.open ~ .cb-tooltip { display: none; }

.cb-backdrop {
  position: fixed; inset: 0; background: rgba(4,20,13,0.72); z-index: 55; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}

html.cb-lock { overflow: hidden; }

/* Panneau - ardoise en en-tête, comme les ardoises du resto */
.cb-panel {
  position: fixed; bottom: 92px; right: 22px; width: 380px; max-width: calc(100vw - 32px);
  height: min(600px, calc(100vh - 120px)); height: min(600px, calc(100dvh - 120px));
  background: var(--cream); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); display: flex;
  flex-direction: column; overflow: hidden; z-index: 60; border: 3px solid var(--green-deep);
  opacity: 0; transform: translateY(18px) scale(0.94); transform-origin: bottom right; pointer-events: none; visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1), transform 0.28s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.28s;
}
.cb-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; transition-delay: 0s; }

.cb-head { background: #1B1D1C; color: var(--white); padding: 14px 14px 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 3px solid var(--gold); flex-shrink: 0; }
.cb-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: #1B1D1C; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cb-avatar svg { width: 22px; height: 22px; }
.cb-head-text { flex: 1; min-width: 0; line-height: 1.15; }
.cb-head-text strong { display: block; font-family: var(--script); font-weight: 700; font-size: 1.55rem; color: #EDEBE3; }
.cb-head-text span { font-size: 0.74rem; color: #A9B3AC; }
.cb-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.1); color: #EDEBE3; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease; }
.cb-close:hover { background: rgba(255,255,255,0.2); }
.cb-close svg { width: 18px; height: 18px; }

.cb-body { padding: 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; background: var(--cream); overscroll-behavior: contain; }
.cb-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; animation: cbIn 0.25s ease both; }
.cb-msg.bot { color: var(--ink); background: var(--white); border: 1px solid #E3DABD; align-self: flex-start; border-bottom-left-radius: 4px; }
.cb-msg.user { background: var(--green); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
@keyframes cbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cb-typing { display: flex; gap: 5px; padding: 14px 16px; }
.cb-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9CA79F; animation: cbDot 1s infinite ease-in-out; }
.cb-typing i:nth-child(2) { animation-delay: 0.15s; }
.cb-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cbDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-5px); opacity: 1; } }

.cb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cb-action { display: inline-block; background: var(--gold); color: var(--green-deep); border: 2px solid var(--green-deep); border-radius: 100px; padding: 5px 13px; font-family: var(--display); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; transition: transform 0.12s ease; }
.cb-action:hover { transform: translateY(-1px); }

.cb-questions { padding: 10px 14px 12px; background: var(--white); border-top: 1px solid #E3DABD; display: flex; flex-wrap: wrap; gap: 7px; flex-shrink: 0; max-height: 40%; overflow-y: auto; overscroll-behavior: contain; }
.cb-questions[hidden] { display: none; }
.cb-chip { background: var(--cream); border: 1.5px solid var(--green-deep); color: var(--green-deep); border-radius: 100px; padding: 6px 12px; font: 600 0.8rem/1.2 var(--sans); cursor: pointer; transition: background 0.15s ease; text-align: left; }
.cb-chip:hover { background: var(--gold-light); }
.cb-chip.is-done { opacity: 0.6; }


@media (max-width: 480px) {
  .cb-backdrop.open { opacity: 1; pointer-events: auto; }

  .cb-panel {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-width: none;
    height: min(82vh, 640px); height: min(82dvh, 640px); border-radius: 22px; transform-origin: bottom center;
  }
  .cb-msg { font-size: 0.95rem; }
  .cb-questions { max-height: 38vh; max-height: 38dvh; }
  .cb-chip { padding: 9px 14px; font-size: 0.85rem; }
  .cb-close { width: 40px; height: 40px; }

  .cb-toggle-group { bottom: 18px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-msg, .cb-typing i { animation: none; }
}

/* Horaires (section Nous trouver) */
.hours-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.95rem; }
.hours-list li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.hours-list strong { font-weight: 700; white-space: nowrap; }
.hours-list .is-closed { opacity: 0.6; }
.hours-list .is-closed strong { font-weight: 500; }

/* ==========================================================================
   Pastilles plus soignées + dégradés très discrets (jaunes et verts)
   Les variables ci-dessous se règlent à un seul endroit.
========================================================================== */
:root {
  --gold-grad: linear-gradient(135deg, #F8E08F 0%, #F2D26B 50%, #EAC55A 100%);
  --gold-grad-soft: linear-gradient(180deg, #FCF1C8 0%, #F7E5A6 100%);
  --green-grad: linear-gradient(165deg, #46785A 0%, #3F6E4F 55%, #386244 100%);
  --green-deep-grad: linear-gradient(180deg, #285439 0%, #234A33 55%, #1F422D 100%);
  --pill-shine: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Fonds verts */
.hero { background: var(--green-grad); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 85% 8%, rgba(248, 224, 143, 0.10), transparent 70%);
}
.hero > .wrap { position: relative; }
.maison, .site-footer { background: var(--green-deep-grad); }
/* Jaunes */
.hl, .hl-dark { background: linear-gradient(transparent 58%, #F8E08F 58%, #EBC85A 100%); }
.maison .hl-dark { background: none; }
.tarif-main .tarif-price {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tarif:not(.tarif-main) .tarif-price {
  background: linear-gradient(180deg, #4D8362, #3A6A4B); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Pastille du haut du hero : une vraie pastille, sans inclinaison */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; transform: none; border-radius: 999px; padding: 6px 15px 6px 12px;
  background: var(--gold-grad); box-shadow: var(--pill-shine), 0 2px 6px rgba(0, 0, 0, 0.18); letter-spacing: 0.07em;
}
.hero-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-deep); box-shadow: 0 0 0 3px rgba(35, 74, 51, 0.2); }

/* Trois atouts : pastilles régulières, avec une coche */
.pillars li, .pillars li:nth-child(2), .pillars li:nth-child(3) {
  transform: none; display: inline-flex; align-items: center; gap: 9px; padding: 7px 17px 7px 11px;
  border: 1px solid rgba(242, 210, 107, 0.65); border-radius: 999px; font-size: 0.88rem; letter-spacing: 0.04em;
  background: linear-gradient(180deg, rgba(251, 239, 192, 0.17), rgba(251, 239, 192, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.pillars li { position: relative; }
.pillars li::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.pillars li::after {
  content: ""; position: absolute; left: 18px; top: 50%; width: 4px; height: 8px; border: solid var(--green-deep);
  border-width: 0 2px 2px 0; transform: translateY(-62%) rotate(45deg);
}

/* Boutons de réponse de l'assistant et pastilles d'action */
.cb-action { background: var(--gold-grad); box-shadow: var(--pill-shine); }
.cb-toggle { background-image: var(--gold-grad); }
.pc-dot.active { background: var(--green-deep-grad); }

/* Le principe du buffet en une phrase, sans étapes numérotées */
.how { max-width: 52ch; margin: 0 auto 40px; text-align: center; font-size: 1.12rem; color: var(--green-deep); font-weight: 500; }

/* "Fait maison" : une photo et deux paragraphes, au lieu de trois cartes numérotées */
.maison-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
.maison-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3); }
.maison-text p { margin: 0 0 16px; font-size: 1.08rem; color: #DCE7DF; }
.maison-text p:first-child { font-size: 1.28rem; color: var(--white); line-height: 1.45; }

@media (max-width: 820px) {
  .maison-split { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Assistant : panneau plus léger et plus chaleureux ---- */
.cb-toggle { box-shadow: 0 8px 22px rgba(20, 51, 39, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.cb-tooltip { background: var(--green-deep-grad); }
.cb-avatar { background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.cb-head-text strong { font-size: 1.45rem; }
.cb-head-text span { display: flex; align-items: center; gap: 6px; }
.cb-head-text span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7ED492; box-shadow: 0 0 0 3px rgba(126, 212, 146, 0.25); }
.cb-msg { animation-duration: 0.3s; }
.cb-action { border-color: transparent; box-shadow: 0 2px 6px rgba(27, 42, 33, 0.18), var(--pill-shine); }
.cb-chip { border-width: 1px; }

/* clair aussi sur mobile */
.cb-panel { border: none; border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 38, 28, 0.35), 0 0 0 1px rgba(35, 74, 51, 0.12); }
.cb-head { background: var(--green-deep-grad); border-bottom: none; padding: 16px 16px 16px 18px; }
.cb-head-text strong { color: var(--gold-light); }
.cb-head-text span { color: #C3D4C8; }
.cb-body { background: var(--cream); padding: 18px 16px; }
.cb-msg.bot { border: none; box-shadow: 0 1px 3px rgba(27, 42, 33, 0.1); border-radius: 16px 16px 16px 5px; }
.cb-msg.user { border-radius: 16px 16px 5px 16px; }
.cb-questions { background: var(--cream); border-top: none; padding: 4px 16px 14px; max-height: 44%; scrollbar-width: thin; }
.cb-questions::before { content: "Une question ?"; flex-basis: 100%; font: 700 0.7rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.cb-chip { background: var(--white); border: 1px solid rgba(35, 74, 51, 0.3); padding: 7px 13px; box-shadow: 0 1px 2px rgba(27, 42, 33, 0.06); }
.cb-chip:hover { border-color: var(--gold-text); background: var(--gold-grad-soft); }

.cb-panel { background: var(--cream); }
.cb-msg.user { background: var(--green-grad); color: var(--white); }
.cb-typing i { background: #9CA79F; }
.cb-chip { color: var(--green-deep); }
.cb-more { background: transparent; border-style: dashed; color: var(--green); }

/* Plan Google : chargé seulement après accord */
.map-frame { display: flex; }
.map-consent { margin: auto; padding: 28px 24px; text-align: center; max-width: 420px; display: grid; gap: 14px; justify-items: center; }
.map-consent p { margin: 0; color: var(--grey); font-size: 0.92rem; }
.map-link { font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; color: var(--green); }
.map-frame iframe { flex: 1; }

/* Liens légaux (pied de page) */
.footer-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 0.82rem; }
.footer-legal a { color: #C3D4C8; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--gold-light); }



/* Pages obligatoires (mentions légales, confidentialité, cookies) */
.legal { padding: 36px 0 70px; }
.legal-wrap { max-width: 760px; }
.legal-back { display: inline-block; margin-bottom: 18px; font-weight: 600; color: var(--green); }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--green-deep); margin-bottom: 18px; }
.legal h2 { font-size: 1.2rem; color: var(--green-deep); margin: 30px 0 8px; text-transform: none; }
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 20px; display: grid; gap: 6px; }
.legal a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal-lead { font-size: 1.08rem; color: var(--green-deep); }
.legal-date { margin-top: 34px; color: var(--grey); font-size: 0.85rem; }
.todo { background: var(--gold-light); padding: 1px 6px; border-radius: 4px; color: var(--green-deep); }
.legal-page .site-footer { padding: 28px 0; }

/* Carrousel avec une seule photo : pas de flèches ni de points */
.pc.is-single .pc-btn, .pc.is-single .pc-dots { display: none; }

/* ==========================================================================
   Pont avec les blocs Gutenberg (même rendu que la maquette)
========================================================================== */
.wp-block-image { margin: 0; }
.wp-block-group, .wp-block-buttons, .wp-block-list { box-sizing: border-box; }
.wp-block-buttons.hero-actions, .wp-block-buttons.avis-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.avis-actions { gap: 12px; }
.footer-legal p { margin: 0; }
.footer-bottom { margin-bottom: 0; }
.pillars { list-style: none; }
.legal .wp-block-post-title { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--green-deep); text-transform: none; margin-bottom: 18px; }
.wp-block-post-content > :first-child { margin-top: 0; }

/* Boutons */
.wp-block-button.btn { padding: 0; border: 0; background: none; box-shadow: none; display: inline-flex; border-radius: 6px; }
.wp-block-button.btn:hover { background: none; box-shadow: none; }
.wp-block-button.btn .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 6px; border: 2px solid var(--green-deep);
  font-family: var(--display); font-weight: 800; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.02em;
  line-height: inherit; background: transparent; color: inherit; transition: all 0.2s ease; text-decoration: none;
}
.wp-block-button.btn-gold .wp-block-button__link { background: var(--gold-grad); color: var(--green-deep); border-color: transparent; box-shadow: 0 4px 12px rgba(27, 42, 33, 0.22), var(--pill-shine); }
.wp-block-button.btn-gold:hover .wp-block-button__link { box-shadow: 0 7px 16px rgba(27, 42, 33, 0.26), var(--pill-shine); }
.wp-block-button.btn-outline .wp-block-button__link { color: var(--white); border-color: var(--white); }
.wp-block-button.btn-outline:hover .wp-block-button__link { background: var(--white); color: var(--green-deep); }
.avis .wp-block-button.btn-gold .wp-block-button__link { background: var(--green-deep-grad); color: var(--gold-light); }
.avis .wp-block-button.btn-outline .wp-block-button__link { color: var(--green-deep); border-color: var(--green-deep); }
.avis .wp-block-button.btn-outline:hover .wp-block-button__link { background: var(--green-deep); color: var(--gold-light); }

/* Focus visible (accessibilité) */
a:focus-visible, button:focus-visible, .pc:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 3px; }
.hero a:focus-visible, .maison a:focus-visible, .site-footer a:focus-visible { outline-color: var(--gold); }

/* ==========================================================================
   Adoucissement : aplats à la place des dégradés, ombres légères, boutons et pastilles sobres.
   (Ce bloc passe en dernier : pour revenir au style précédent, le supprimer.)
========================================================================== */
:root {
  --gold-grad: #F2D26B;
  --gold-grad-soft: #FAEDBB;
  --green-grad: #3F6E4F;
  --green-deep-grad: #234A33;
  --pill-shine: inset 0 0 0 transparent;
  --soft-shadow: 0 1px 2px rgba(27, 42, 33, 0.08), 0 6px 18px rgba(27, 42, 33, 0.08);
  --line: rgba(35, 74, 51, 0.16);
}

/* Fond du hero : plus de halo */
.hero::before { display: none; }

/* Titres : un peu moins massifs */
h1, h2, h3 { font-weight: 600; letter-spacing: 0.005em; line-height: 1.1; }
.hl, .hl-dark { background: linear-gradient(transparent 68%, rgba(242, 210, 107, 0.75) 68%); padding: 0 2px; }

/* Boutons : plats, nets, sans reflet */
.wp-block-button.btn .wp-block-button__link, .btn {
  padding: 12px 24px; border-radius: 10px; border-width: 1.5px; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
  box-shadow: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button.btn-gold .wp-block-button__link, .btn-gold { background: var(--gold); color: var(--green-deep); border-color: var(--gold); box-shadow: none; }
.wp-block-button.btn-gold:hover .wp-block-button__link, .btn-gold:hover { background: #F6DD85; border-color: #F6DD85; box-shadow: var(--soft-shadow); transform: none; }
.wp-block-button.btn-outline .wp-block-button__link, .btn-outline { border-color: rgba(255, 255, 255, 0.6); color: var(--white); background: transparent; }
.wp-block-button.btn-outline:hover .wp-block-button__link, .btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); color: var(--white); }
.wp-block-button.btn:hover { transform: none; }
.avis .wp-block-button.btn-gold .wp-block-button__link, .avis .btn-gold { background: var(--green-deep); color: var(--gold-light); border-color: var(--green-deep); box-shadow: none; }
.avis .wp-block-button.btn-gold:hover .wp-block-button__link, .avis .btn-gold:hover { background: #2D5C41; border-color: #2D5C41; }
.avis .wp-block-button.btn-outline .wp-block-button__link, .avis .btn-outline { color: var(--green-deep); border-color: rgba(35, 74, 51, 0.5); }
.avis .wp-block-button.btn-outline:hover .wp-block-button__link, .avis .btn-outline:hover { background: rgba(35, 74, 51, 0.08); color: var(--green-deep); border-color: var(--green-deep); }

/* Pastilles : discrètes */
.hero-eyebrow { background: var(--gold); box-shadow: none; padding: 5px 13px; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; }
.hero-eyebrow::before { box-shadow: none; width: 6px; height: 6px; }
.pillars { gap: 8px; }
.pillars li, .pillars li:nth-child(2), .pillars li:nth-child(3) {
  background: transparent; box-shadow: none; border: 1px solid rgba(242, 210, 107, 0.45); color: var(--gold-light);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; padding: 6px 14px 6px 10px; gap: 8px;
}
.pillars li::before { width: 15px; height: 15px; box-shadow: none; background: var(--gold); }
.pillars li::after { left: 15px; width: 3px; height: 6px; border-width: 0 1.5px 1.5px 0; }

/* Photo du hero et autocollant : plus légers */
.hero-photo img { border: 0; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
.price-sticker { background: var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }

/* Cartes : traits fins, coins moyens, ombres douces */
.tarif, .info-card { border: 1px solid var(--line); border-radius: 12px; }
.tarif-main { box-shadow: var(--soft-shadow); }
.tarif-main .tarif-price { background: none; color: var(--gold); }
.tarif:not(.tarif-main) .tarif-price { background: none; color: var(--green); }
.map-frame { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--soft-shadow); }
.maison-photo img { border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }

/* Carrousel : polaroïds plus légers */
.pc-card { box-shadow: 0 6px 20px rgba(27, 42, 33, 0.14); }
.pc-btn { background: var(--gold); box-shadow: var(--soft-shadow); }
.pc-btn:hover { box-shadow: var(--soft-shadow); transform: none; background: #F6DD85; }
.pc-dot.active { background: var(--green-deep); }

/* Pancarte : balancier plus calme */
@keyframes doorSwing { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* Assistant : bulle et panneau plus doux */
.cb-toggle { background: var(--gold); box-shadow: var(--soft-shadow); }
.cb-toggle:hover { transform: none; background: #F6DD85; }
.cb-panel { box-shadow: 0 16px 44px rgba(20, 38, 28, 0.25); }
.cb-action { background: var(--gold); box-shadow: none; }
.cb-chip { box-shadow: none; }

/* ==========================================================================
   Section « Le soir, à emporter » : visible seulement quand le service est à emporter (classe sur <body>)
========================================================================== */
.soir-only { display: none; }
body.service-emporter .soir-only { display: block; }
.editor-styles-wrapper .soir-only { display: block; outline: 2px dashed rgba(35, 74, 51, 0.35); outline-offset: -6px; }
.soir { background: var(--gold-light); padding: 56px 0; }
.soir-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.soir h2 { color: var(--green-deep); }
.soir p { max-width: 44ch; color: var(--green-deep); margin: 0; }
.soir-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.soir-steps li {
  counter-increment: step; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; gap: 10px;
  color: var(--green-deep); font-weight: 500; padding-bottom: 12px; border-bottom: 1px solid rgba(35, 74, 51, 0.18);
}
.soir-steps li::before { content: counter(step); font-family: var(--script); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--gold-text); }
@media (max-width: 820px) { .soir-inner { grid-template-columns: 1fr; gap: 24px; } }

/* ==========================================================================
   Identité « ardoise » : ardoise à cadre en bois (hero + tarifs), prix à la craie, tampon.
========================================================================== */
:root { --slate: #1F2623; --chalk: #F4F1E8; --wood: #8B6A3E; --terracotta: #C1502E; }

.board {
  position: relative; color: var(--chalk); background: var(--slate); border-radius: 3px; padding: 40px 44px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 0 0 9px var(--wood), 0 0 0 11px #6b5030, 0 18px 34px rgba(27, 42, 33, 0.28);
}
.board::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px; opacity: 0.5;
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 85%, rgba(255, 255, 255, 0.05), transparent 70%);
}
.board > * { position: relative; }

/* Hero : l'ardoise et la photo (non recadrée) côte à côte, mêmes hauteurs */
.hero--ardoise { background: var(--cream); color: var(--ink); padding: 44px 0 80px; }
.hero--ardoise::before { display: none; }
.hero--ardoise .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: stretch; }
.hero-board { display: flex; flex-direction: column; justify-content: center; align-self: center; margin: 11px 0; }
.hero--ardoise h1 { color: var(--chalk); font-size: clamp(2.2rem, 4.4vw, 3.3rem); text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); margin: 0; }
.hero--ardoise h1 .accent { color: var(--gold); }
.hero--ardoise h1 .accent::after { display: none; }
.hero--ardoise .lead { color: #E4E0D2; font-size: 1.05rem; max-width: 44ch; margin: 18px 0 0; }
.hero--ardoise .hero-actions { margin-top: 26px; }
.hero--ardoise .hero-photo { align-self: center; }
.hero--ardoise .hero-photo img { width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; border: 0; border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); }

.price-chalk { display: flex; align-items: center; gap: 16px; margin-top: 24px; color: var(--chalk); }
.price-chalk .ring { position: relative; flex: none; width: 150px; height: 84px; display: grid; place-items: center; }
.price-chalk .ring svg { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
.price-chalk .ring b { position: relative; font-family: var(--script); font-size: 3.1rem; font-weight: 700; line-height: 1; }
.price-chalk small { font-family: var(--script); font-size: 1.5rem; font-weight: 600; line-height: 1.1; max-width: 12ch; opacity: 0.92; }

.stamp {
  display: inline-block; text-align: center; transform: rotate(-4deg); padding: 6px 14px 4px; border: 3px solid var(--terracotta); border-radius: 6px;
  background: rgba(251, 247, 234, 0.94); color: var(--terracotta); line-height: 1.15;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.09em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px #fbf7ea, inset 0 0 0 3.5px var(--terracotta);
}
.stamp small { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.06em; }
.hero-photo .stamp { position: absolute; right: -12px; bottom: 22px; }

/* Tarifs : « l'ardoise du jour » */
.buffet .tarifs, .buffet .tarifs-note { display: none; }
.board--menu { max-width: 760px; margin: 28px auto 0; padding: 38px 48px 34px; }
.board--menu .board-title { font-family: var(--script); font-weight: 700; font-size: 2.1rem; line-height: 1.1; color: var(--gold); text-align: center; text-transform: none; margin: 0 0 14px; }
.menu-lines { list-style: none; margin: 0; padding: 0; }
.menu-lines .line { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; margin: 0; }
.menu-lines .name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; }
.menu-lines .name small { display: block; font-family: var(--script); font-weight: 600; font-size: 1.25rem; line-height: 1; letter-spacing: 0; text-transform: none; color: #cfcbbd; }
.menu-lines .dots { flex: 1; border-bottom: 2px dotted rgba(244, 241, 232, 0.38); transform: translateY(-5px); }
.menu-lines .price { font-family: var(--script); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--chalk); white-space: nowrap; }
.menu-lines .main .name { color: var(--gold); font-size: 1.25rem; }
.menu-lines .main .price { color: var(--gold); font-size: 2.6rem; }
.board-foot { margin: 18px 0 0; text-align: center; font-family: var(--script); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: #cfcbbd; }
.board-foot span { display: block; font-size: 1.2rem; opacity: 0.85; }

@media (max-width: 820px) {
  .hero--ardoise { padding: 28px 0 64px; }
  .hero--ardoise .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .board { padding: 28px 22px; }
  .board--menu { padding: 30px 22px 26px; }
  .hero--ardoise .hero-photo { max-width: 420px; width: 100%; margin: 0 auto; }
  .hero-photo .stamp { right: 8px; }
  .menu-lines .main .price { font-size: 2.2rem; }
}

/* Photos jamais recadrées : toutes les photos du site sont en 3:4 et s'affichent en entier. */
.maison-photo { max-width: 460px; }
.maison-photo img { width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; }
.pc-card img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 820px) { .maison-photo { max-width: 360px; margin: 0 auto; } }

/* Avis Google recopiés : note, cartes crème, lien. Pleine largeur sous le texte et les boutons. */
.avis-list { flex-basis: 100%; margin-top: 8px; }
.avis-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; font-weight: 600; max-width: none; }
.avis-score strong { font-family: var(--script); font-size: 2.6rem; line-height: 1; font-weight: 700; }
.avis .stars { color: #B7791F; letter-spacing: 2px; white-space: nowrap; }
.avis .stars .off { color: rgba(35, 74, 51, 0.25); }
.avis-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.avis-card { background: var(--cream); border-radius: 14px; padding: 18px 20px; box-shadow: 0 6px 18px rgba(27, 42, 33, 0.14); display: flex; flex-direction: column; gap: 8px; }
.avis-card blockquote { margin: 0; font-size: 0.97rem; line-height: 1.5; color: var(--ink); }
.avis-who { margin: auto 0 0; font-weight: 700; font-size: 0.92rem; max-width: none; }
.avis-who span { font-weight: 400; opacity: 0.75; }
.avis-all { margin: 18px 0 0; max-width: none; }
.avis-all a { color: var(--green-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Ratio réservé avant le chargement (évite les sauts de mise en page), puis ratio réel de l'image. */
.hero--ardoise .hero-photo img { aspect-ratio: auto 3 / 4; }
.brand img, .footer-logo img { aspect-ratio: auto 700 / 262; }

/* ==========================================================================
   Assistant « ardoise » : la fenêtre est un petit tableau noir à cadre bois (comme le hero et les tarifs).
   Les réponses sont de petits tickets de papier réglé ; les questions sont des lignes numérotées à la craie.
========================================================================== */
.cb-toggle { background: var(--slate); background-image: none; color: var(--chalk); box-shadow: 0 0 0 4px var(--wood), 0 0 0 5px #6b5030, 0 10px 24px rgba(20, 38, 28, 0.38); }
.cb-toggle:hover { transform: scale(1.08) rotate(-3deg); }
.cb-tooltip { background: var(--cream); color: var(--green-deep); font-family: var(--script); font-weight: 700; font-size: 1.25rem; padding: 4px 16px 6px; border-radius: 6px; box-shadow: 0 6px 16px rgba(20, 38, 28, 0.25); }

.cb-panel {
  background: var(--slate); border-radius: 4px; border: none;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 0 0 9px var(--wood), 0 0 0 11px #6b5030, 0 24px 60px rgba(20, 38, 28, 0.4);
}
.cb-head { background: transparent; border-bottom: 2px dotted rgba(244, 241, 232, 0.3); padding: 16px 16px 12px 18px; }
.cb-avatar { background: transparent; color: var(--chalk); box-shadow: none; border: 2px solid rgba(244, 241, 232, 0.7); }
.cb-head-text strong { font-size: 1.75rem; color: var(--gold); }
.cb-head-text span { color: #cfcbbd; }
.cb-close { background: transparent; color: var(--chalk); border: 1.5px solid rgba(244, 241, 232, 0.5); }
.cb-close:hover { background: rgba(244, 241, 232, 0.14); }

.cb-body { background: transparent; padding: 16px 16px 8px; gap: 12px; }
.cb-msg.bot {
  color: var(--ink); border-radius: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); padding: 8px 14px 9px 18px; border-left: 4px solid var(--terracotta);
  background: repeating-linear-gradient(180deg, transparent 0, transparent 22px, rgba(35, 74, 51, 0.13) 22px, rgba(35, 74, 51, 0.13) 23px), var(--cream);
  line-height: 23px; font-size: 0.92rem;
}
.cb-msg.user { background: transparent; color: var(--chalk); border-radius: 0; padding: 2px 4px 6px; font-family: var(--script); font-weight: 700; font-size: 1.45rem; line-height: 1.15; border-bottom: 2px dotted rgba(244, 241, 232, 0.5); text-align: right; }
.cb-typing i { background: var(--chalk); }

.cb-questions { background: transparent; counter-reset: q; padding: 6px 16px 16px; gap: 2px; flex-direction: column; flex-wrap: nowrap; }
.cb-questions::before { content: "Une question ?"; font: 700 1.5rem/1 var(--script); letter-spacing: 0; text-transform: none; color: var(--gold); padding-bottom: 6px; }
.cb-chip {
  display: flex; align-items: baseline; gap: 10px; width: 100%; background: transparent; color: var(--chalk); border: 0; border-radius: 3px; padding: 7px 4px;
  border-bottom: 2px dotted rgba(244, 241, 232, 0.28); font: 600 0.92rem/1.3 var(--sans); counter-increment: q;
}
.cb-chip:not(.cb-more)::before { content: counter(q) "."; font: 700 1.35rem/1 var(--script); color: var(--gold); min-width: 1.3em; }
.cb-chip:hover { background: rgba(244, 241, 232, 0.08); }
.cb-chip:focus-visible, .cb-close:focus-visible, .cb-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cb-chip.is-done { opacity: 0.55; }
.cb-chip.cb-more { color: var(--gold); font-family: var(--script); font-weight: 700; font-size: 1.25rem; }

@media (max-width: 480px) {
  .cb-panel { border-radius: 4px; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 0 0 6px var(--wood), 0 0 0 7px #6b5030, 0 18px 40px rgba(20, 38, 28, 0.4); left: 16px; right: 16px; }
  .cb-chip { padding: 10px 4px; font-size: 0.95rem; }
  .cb-head-text strong { font-size: 1.45rem; white-space: nowrap; }
}

/* Assistant : plus aéré, sans liseré rouge sur les réponses */
.cb-msg.bot { border-left: 0; padding: 10px 18px 12px; }
.cb-body { padding: 20px 20px 16px; gap: 18px; }
.cb-msg { max-width: 92%; }
.cb-head { padding: 18px 18px 16px 20px; }
.cb-questions { padding: 18px 20px 20px; gap: 6px; border-top: 2px dotted rgba(244, 241, 232, 0.3); }
.cb-questions::before { padding-bottom: 10px; }
.cb-chip { padding: 10px 4px; }
@media (max-width: 480px) {
  .cb-body { padding: 18px 16px 14px; }
  .cb-questions { padding: 16px 16px 18px; }
  .cb-chip { padding: 12px 4px; }
}

/* ==========================================================================
   Avis : deux colonnes. À gauche l'invitation (texte + boutons), à droite le panneau des avis (note, cartes, lien).
========================================================================== */
.avis-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 56px; align-items: start; }
.avis-inner > .wp-block-group:first-child { grid-column: 1; grid-row: 1; margin: 0; }
.avis-inner > .avis-actions { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
.avis-inner > .avis-list { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.avis-inner:not(:has(.avis-list)) { grid-template-columns: 1fr auto; align-items: center; }
.avis-inner:not(:has(.avis-list)) > .avis-actions { grid-column: 2; grid-row: 1; }

.avis-list { background: var(--cream); border-radius: 18px; padding: 24px 26px 20px; box-shadow: 0 10px 26px rgba(27, 42, 33, 0.16); }
.avis-score { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px dashed rgba(35, 74, 51, 0.28); max-width: none; }
.avis-score strong { font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -0.02em; color: var(--green-deep); }
.avis-score-meta { display: flex; flex-direction: column; gap: 3px; }
.avis-score-meta .stars { font-size: 1.15rem; }
.avis-score-count { font-size: 0.9rem; font-weight: 600; color: var(--grey); }
.avis-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.avis-card { background: var(--white); box-shadow: none; border: 1px solid rgba(35, 74, 51, 0.14); border-radius: 12px; padding: 16px 18px; }
.avis-card blockquote { font-size: 0.95rem; color: var(--ink); }
.avis-who { padding-top: 6px; font-size: 0.88rem; }
.avis-all { margin: 16px 0 0; text-align: right; }
.avis-all a { font-size: 0.9rem; }

@media (max-width: 820px) {
  .avis-inner, .avis-inner:not(:has(.avis-list)) { grid-template-columns: 1fr; gap: 20px; }
  .avis-inner > .wp-block-group:first-child, .avis-inner > .avis-actions, .avis-inner > .avis-list,
  .avis-inner:not(:has(.avis-list)) > .avis-actions { grid-column: 1; grid-row: auto; }
  .avis-list { padding: 20px 18px 16px; }
  .avis-score strong { font-size: 2.8rem; }
}

/* Avis, version compacte : panneau étroit, avis en lignes (pas en grosses cartes) */
.avis-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 8px 64px; grid-template-rows: auto 1fr; align-items: start; }
.avis-inner > .avis-list { grid-row: 1 / span 2; align-self: center; padding: 18px 22px 14px; border-radius: 16px; box-shadow: 0 8px 22px rgba(27, 42, 33, 0.14); }
.avis-inner > .avis-actions { margin-top: 12px; }
.avis-score { gap: 12px; margin: 0 0 6px; padding-bottom: 12px; }
.avis-score strong { font-size: 2.4rem; }
.avis-score-meta .stars { font-size: 1rem; }
.avis-score-count { font-size: 0.85rem; }
.avis-cards { display: block; }
.avis-row { padding: 11px 0; border-bottom: 1px dotted rgba(35, 74, 51, 0.28); }
.avis-row:last-child { border-bottom: 0; }
.avis-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 3px; font-size: 0.85rem; max-width: none; }
.avis-row-head strong { color: var(--green-deep); }
.avis-row-head span { color: var(--grey); }
.avis-row-head .stars { font-size: 0.82rem; letter-spacing: 1px; }
.avis-row blockquote { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.avis-all { margin: 8px 0 0; }
@media (max-width: 820px) {
  .avis-inner { grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; }
  .avis-inner > .avis-list { grid-row: auto; align-self: stretch; }
  .avis-inner > .avis-actions { margin-top: 0; }
}

/* Pancarte : cliquable (lien vers « Nous trouver » ou appel) + variante « store rayé » */
a.door-sign-plaque { pointer-events: auto; text-decoration: none; color: inherit; cursor: pointer; transition: transform .2s ease; }
a.door-sign-plaque:hover { transform: scale(1.04); }
a.door-sign-plaque:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.door-sign--store .door-sign-plaque {
  border: 3px solid #1B7125; padding-top: 1.55em;
  background-color: #FBF6E6;
  background-image: repeating-linear-gradient(90deg, #FFE382 0 0.45em, #1B7125 0.45em 0.9em);
  background-size: 100% 0.85em; background-repeat: no-repeat; background-position: top;
}
.door-sign--store .door-sign-plaque::before { background: linear-gradient(90deg, #C1502E, #E0795A 45%, #A93F20); }
.door-sign--store .door-sign-status { color: #1B7125; text-shadow: none; }
.door-sign--store.is-closed .door-sign-status { color: #C1502E; }
.door-sign--store .door-sign-status::after { display: none; }
.door-sign--store .door-sign-sub { color: #3A2F23; opacity: 1; }
@media (prefers-reduced-motion: reduce) { a.door-sign-plaque { transition: none; } }

/* Mode soir : bandeau « À emporter jusqu'à … » sous l'en-tête (visible seulement quand le service est à emporter) */
.soir-bandeau { padding: 9px 0; text-align: center; font-weight: 600; font-size: 0.95rem; }
.soir-bandeau p { margin: 0; padding: 0 16px; }
.soir-bandeau--vert { background: var(--green-deep, #234a33); color: #F2D26B; }
.soir-bandeau--or { background: #F2D26B; color: #234a33; }
body.service-emporter .soir-bandeau { display: block; }

/* Assistant : position, couleur de la bulle, point « ouvert », texte écrit à la craie */
.cb-toggle-group.cb-pos-left { right: auto; left: 22px; }
.cb-toggle-group.cb-pos-left .cb-tooltip { right: auto; left: 76px; transform-origin: left center; }
.cb-panel.cb-pos-left { right: auto; left: 22px; transform-origin: bottom left; }
@media (max-width: 480px) { .cb-panel.cb-pos-left { left: 16px; right: 16px; } .cb-toggle-group.cb-pos-left { left: 18px; } }
.cb-toggle-group.cb-color-vert .cb-toggle { background: var(--green-deep, #234a33); color: #F2D26B; box-shadow: 0 0 0 4px #F2D26B, 0 10px 24px rgba(20, 38, 28, 0.38); }
.cb-toggle-group.cb-color-or .cb-toggle { background: #F2D26B; color: #234a33; box-shadow: 0 0 0 4px #234a33, 0 10px 24px rgba(20, 38, 28, 0.38); }
.cb-toggle-group.cb-color-terracotta .cb-toggle { background: #C1502E; color: #fff; box-shadow: 0 0 0 4px #F4F1E8, 0 10px 24px rgba(20, 38, 28, 0.38); }
.cb-dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9aa39d; border: 2px solid #F4F1E8; display: none; pointer-events: none; z-index: 2; }
.cb-dot.on { display: block; background: #3cb356; box-shadow: 0 0 0 0 rgba(60, 179, 86, 0.6); animation: cbPulse 2s infinite; }
.cb-toggle-group.cb-pos-left .cb-dot { right: auto; left: 2px; }
.cb-toggle-group { }
@keyframes cbPulse { 70% { box-shadow: 0 0 0 8px rgba(60, 179, 86, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 179, 86, 0); } }
.cb-msg.bot > span { display: inline-block; animation: cbChalk 0.9s ease-out both; }
@keyframes cbChalk { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cb-toggle-group.open .cb-dot, .cb-toggle.open ~ .cb-dot { display: none; }
@media (prefers-reduced-motion: reduce) { .cb-dot.on, .cb-msg.bot > span { animation: none; } }

/* Page 404 : ardoise avec la balle qui monte l'escalier (adaptée de Uiverse.io, alexruix) */
.nf { padding: 48px 0 84px; }
.nf-wrap { display: flex; justify-content: center; }
.nf-board { width: 100%; max-width: 560px; text-align: center; padding: 10px 36px 38px; }
.nf-board h1 { color: var(--gold); font-family: var(--script); font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.05; margin: 0 0 12px; text-transform: none; }
.nf-code { margin: 0; font: 700 0.8rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk); opacity: 0.7; }
.nf-text { color: #E4E0D2; margin: 0 auto 22px; max-width: 40ch; }
.nf-actions { justify-content: center; }
.nf-loader-wrap { height: 170px; padding-top: 70px; overflow: hidden; }
.nf-loader { position: relative; width: 120px; height: 90px; margin: 0 auto; transform: scale(0.8); transform-origin: top center; }
.nf-loader:before { content: ""; position: absolute; bottom: 30px; left: 50px; height: 30px; width: 30px; border-radius: 50%; background: var(--gold); animation: nf-bounce 0.5s ease-in-out infinite alternate; }
.nf-loader:after { content: ""; position: absolute; right: 0; top: 0; height: 7px; width: 45px; border-radius: 4px; box-shadow: 0 5px 0 var(--chalk), -35px 50px 0 var(--chalk), -70px 95px 0 var(--chalk); animation: nf-step 1s ease-in-out infinite; }
@keyframes nf-bounce { 0% { transform: scale(1, 0.7); } 40% { transform: scale(0.8, 1.2); } 60% { transform: scale(1, 1); } 100% { bottom: 140px; } }
@keyframes nf-step {
  0% { box-shadow: 0 10px 0 rgba(0,0,0,0), 0 10px 0 var(--chalk), -35px 50px 0 var(--chalk), -70px 90px 0 var(--chalk); }
  100% { box-shadow: 0 10px 0 var(--chalk), -35px 50px 0 var(--chalk), -70px 90px 0 var(--chalk), -70px 90px 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) { .nf-loader:before, .nf-loader:after { animation: none; } .nf-loader:before { bottom: 90px; } }

/* Réponses de l'assistant : le texte repose sur les lignes du cahier (les lignes démarrent au haut du texte, pas du bord) */
.cb-msg.bot { background-origin: content-box, padding-box; background-clip: padding-box; line-height: 23px; }
.cb-msg.bot > span { display: block; line-height: 23px; }

/* 404 : pas de jargon, liens utiles à la craie, pied de page en bas de l'écran */
.nf { min-height: calc(100vh - 430px); display: flex; align-items: center; padding: 40px 0 70px; }
.nf-wrap { width: 100%; }
.nf-board { max-width: 600px; }
.nf-board h1 { margin-top: 4px; }
.nf-links { margin-top: 28px; padding-top: 18px; border-top: 2px dotted rgba(244, 241, 232, 0.3); text-align: left; }
.nf-links-title { margin: 0 0 8px; font: 700 1.5rem/1 var(--script); color: var(--gold); }
.nf-links ul { list-style: none; margin: 0; padding: 0; counter-reset: l; }
.nf-links li { counter-increment: l; border-bottom: 2px dotted rgba(244, 241, 232, 0.28); }
.nf-links a { display: flex; align-items: baseline; gap: 10px; padding: 9px 4px; color: var(--chalk); font-weight: 600; text-decoration: none; }
.nf-links a::before { content: counter(l) "."; font: 700 1.35rem/1 var(--script); color: var(--gold); min-width: 1.3em; }
.nf-links a:hover { background: rgba(244, 241, 232, 0.08); }
.nf-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 600px) { .nf-board { padding: 6px 20px 28px; } .nf { padding: 28px 0 56px; } }

/* Mode soir : « Comment ça marche » juste sous le haut de page, avec la dernière boîte */
.soir { padding: 34px 0; }
.soir-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: 36px; align-items: center; }
.soir-intro h2 { margin: 0 0 8px; }
.soir-intro > p { max-width: 42ch; }
.soir .soir-last { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-top: 14px; padding: 7px 16px; background: var(--green-deep, #234a33); color: var(--gold, #F2D26B); border-radius: 100px; font-weight: 700; font-size: 0.92rem; max-width: none; }
.soir-last-left:empty { display: none; }
.soir-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.soir-steps li { grid-template-columns: 1fr; gap: 4px; align-items: start; padding: 14px 16px 16px; background: rgba(255, 255, 255, 0.6); border: 0; border-radius: 10px; box-shadow: 0 4px 12px rgba(35, 74, 51, 0.1); }
.soir-steps li::before { font-size: 2.3rem; }
@media (max-width: 820px) {
  .soir-inner { grid-template-columns: 1fr; gap: 20px; }
  .soir-steps { grid-template-columns: 1fr; gap: 10px; }
  .soir-steps li { grid-template-columns: 40px 1fr; align-items: baseline; padding: 12px 14px; }
}