/*
 * Le Caradoc — bistro classique, fil « Table ronde ».
 * Papier blanc chaud, noir de comptoir, le rouge du logo pour ce qui compte.
 * Grenze (romain aux racines gothiques) pour l'affichage, Archivo pour le texte.
 */

@font-face {
  font-family: "Grenze";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/grenze-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Grenze";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/grenze-italic-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format("woff2");
}

:root {
  color-scheme: light;

  --paper: #fbf5ec;
  --paper-2: #f4e9d8;
  --ink: #2a1a12;
  --ink-2: #5a4436;
  --ink-3: #79604f;
  --rule: #e7d9c4;

  /* le bois sombre des tables du bar */
  --board: #2e1d14;
  --chalk: #fbf1e1;
  --chalk-2: #d7c2a8;
  --chalk-rule: rgba(251, 241, 225, .16);

  /* l'ambre d'une pression bien tirée */
  --amber: #eba938;
  --amber-soft: #f6d79a;

  --red: #e31a3a;       /* le rouge du logo */
  --red-ink: #c40f2c;   /* même rouge, assez dense pour du texte et des boutons */
  --herb: #3c6a34;

  --display: "Grenze", Georgia, serif;
  --text: "Archivo", system-ui, sans-serif;

  --nav-h: 72px;
  --gutter: clamp(20px, 5vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 64px);
  scrollbar-color: var(--ink-3) var(--paper-2);
}

body.cd-body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cd-body img { max-width: 100%; display: block; }
.cd-body a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.cd-body :where(h1, h2, h3, p, dl, dd, ul, figure, blockquote) { margin: 0; }
.cd-body :where(ul) { padding: 0; list-style: none; }

::selection { background: var(--red-ink); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red-ink);
  outline-offset: 3px;
}

.cd-skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--chalk) !important;
  text-decoration: none;
}
.cd-skip:focus { top: 12px; }

.cd-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.cd-h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* ---------- Boutons ---------- */

.cd-btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 48px;
  padding: 0 1.4em;
  box-sizing: border-box;
  font-family: var(--text);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cd-btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.cd-btn:hover svg { transform: translateX(3px); }

.cd-btn--red { background: var(--red-ink); color: #fff !important; }
.cd-btn--red:hover { background: #a50c25; }

.cd-btn--line { border-color: var(--ink); color: var(--ink) !important; }
.cd-btn--line:hover { background: var(--ink); color: var(--paper) !important; }

.cd-btn--light { border-color: var(--chalk-2); color: var(--chalk) !important; }
.cd-btn--light:hover { background: var(--chalk); color: var(--ink) !important; }

/* ---------- Statut ouvert / fermé ---------- */

.cd-status {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--ink-2);
}
.cd-status__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}
.cd-status.is-open .cd-status__dot {
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(227, 26, 58, .5);
  animation: cd-pulse 2.4s var(--ease-out) infinite;
}
.cd-status--large { font-size: 1.05rem; }
.cd-status--large strong { color: var(--ink); font-weight: 700; }
.cd-status--large.is-open strong { color: var(--red-ink); }

@keyframes cd-pulse {
  0% { box-shadow: 0 0 0 0 rgba(227, 26, 58, .45); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(227, 26, 58, 0); }
}

/* ---------- Navigation ---------- */

.cd-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.cd-nav.is-scrolled { border-bottom-color: var(--rule); }
.cd-nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.cd-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
}
.cd-nav__brand img { width: 44px; height: 44px; }

.cd-nav__links { display: flex; align-items: center; gap: 4px; }
.cd-nav__link {
  padding: 10px 14px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  text-underline-offset: 6px;
}
.cd-nav__link:hover,
.cd-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

.cd-nav__status {
  margin-left: 10px;
  padding-left: 18px;
  border-left: 1px solid var(--rule);
  font-size: .9rem;
  font-weight: 600;
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .cd-nav__brand { font-size: 1.3rem; gap: 10px; }
  .cd-nav__brand img { width: 40px; height: 40px; }
  .cd-nav__link { padding: 10px 8px; }
  .cd-nav__status { display: none; }
}

/* ---------- Ouverture (accueil) ---------- */

.cd-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Moins haut que l'écran : le début de l'ardoise des croques apparaît dès l'arrivée */
  height: clamp(460px, calc(100svh - var(--nav-h) - 230px), 680px);
  overflow: hidden;
  color: var(--chalk);
  background: var(--board);
  isolation: isolate;
}

.cd-hero__bg {
  position: absolute; inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.cd-hero__bg.is-active { opacity: 1; }

/* Voile bois sombre : la photo reste lisible, le texte aussi */
.cd-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(30, 19, 13, .62) 0%, rgba(30, 19, 13, .22) 50%, rgba(30, 19, 13, 0) 80%),
    linear-gradient(0deg, rgba(30, 19, 13, .55) 0%, rgba(30, 19, 13, 0) 45%),
    /* voile léger sur toute la photo */
    linear-gradient(rgba(30, 19, 13, .26), rgba(30, 19, 13, .26));
}

.cd-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 72px;
  padding-bottom: clamp(36px, 5vw, 64px);
}

.cd-hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.75rem, 9vw, 6rem);
  line-height: .88;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(20, 12, 8, .45);
}

.cd-hero__pitch {
  max-width: 34ch;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.45;
  color: var(--chalk);
  text-wrap: pretty;
}

.cd-status--on-photo { color: var(--chalk-2); }
.cd-status--on-photo strong { color: var(--chalk); }
.cd-status--on-photo.is-open strong { color: #ff8b8b; }
.cd-status--on-photo .cd-status__dot { background: var(--chalk-2); }
.cd-status--on-photo.is-open .cd-status__dot { background: var(--red); }

.cd-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Le seul mouvement signé du site : la photo se pose doucement au chargement */
/* Ordinateur : bande de bois sombre dans la marge de gauche, qui s'arrête au début du texte.
   Large sur très grand écran (grande marge), presque invisible sur écran normal, absente sur tablette et téléphone. */
@media (min-width: 1100px) {
  .cd-hero { --hero-pad: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); }
  .cd-hero::before {
    background:
      linear-gradient(90deg,
        var(--board) max(0px, calc(var(--hero-pad) - 140px)),
        rgba(46, 29, 20, .62) var(--hero-pad),
        rgba(46, 29, 20, .3) calc(var(--hero-pad) + 520px),
        rgba(46, 29, 20, 0) calc(var(--hero-pad) + 780px)),
      linear-gradient(0deg, rgba(30, 19, 13, .55) 0%, rgba(30, 19, 13, 0) 45%),
      linear-gradient(rgba(30, 19, 13, .26), rgba(30, 19, 13, .26));
  }
}

@keyframes cd-settle {
  from { transform: scale(1.06); }
  to { transform: none; }
}

@media (max-width: 700px) {
  .cd-hero { height: auto; min-height: clamp(440px, calc(100svh - var(--nav-h) - 150px), 600px); }
  .cd-hero::before {
    background: linear-gradient(0deg, rgba(30, 19, 13, .82) 0%, rgba(30, 19, 13, .4) 55%, rgba(30, 19, 13, .05) 100%), linear-gradient(rgba(30, 19, 13, .26), rgba(30, 19, 13, .26));
  }
}

@media (max-width: 480px) {
  .cd-hero__actions { width: 100%; }
  .cd-hero__actions .cd-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Ouverture « carte visible » : photo + ardoise ---------- */

.cd-front {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: clamp(600px, calc(100svh - var(--nav-h)), 860px);
  background: var(--board);
  color: var(--chalk);
}

.cd-front__photo { position: relative; overflow: hidden; margin: 0; }
.cd-front__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
  animation: cd-settle 1.6s var(--ease-out) both;
}

.cd-front__board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(32px, 4vw, 56px) max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))) clamp(32px, 4vw, 56px) clamp(32px, 4vw, 64px);
}

.cd-front__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.25rem, 6vw, 5rem);
  line-height: .9;
  letter-spacing: -.02em;
}
.cd-front__pitch { max-width: 36ch; font-size: 1.1rem; color: var(--chalk-2); }

.cd-front__menu {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--chalk-rule);
}
.cd-front__menu-title {
  margin-bottom: 10px;
  font-stretch: 80%;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}
.cd-front__menu ul { display: grid; gap: 2px; }
.cd-front__menu .cd-line { padding: 5px 0; }
.cd-front__menu .cd-line__name { font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
.cd-front__menu .cd-line__dots { border-color: rgba(235, 169, 56, .45); }
.cd-front__menu .cd-line__price { color: var(--amber); }
.cd-front__note { margin-top: 10px; font-size: .9rem; color: var(--chalk-2); }

@media (max-width: 900px) {
  .cd-front { grid-template-columns: 1fr; min-height: 0; }
  .cd-front__photo { aspect-ratio: 4 / 3; max-height: 46svh; width: 100%; }
  .cd-front__board { padding: 32px var(--gutter) 48px; }
}

/* ---------- Ardoise des croques ---------- */

.cd-board {
  background: var(--board);
  color: var(--chalk);
  padding: clamp(44px, 5vw, 64px) 0 clamp(72px, 10vw, 128px);
}

.cd-board__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.cd-board__head p { max-width: 46ch; color: var(--chalk-2); }

.cd-board__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  border-bottom: 1px solid var(--chalk-rule);
}
.cd-board__list li { padding: 20px 0 22px; border-top: 1px solid var(--chalk-rule); }
.cd-board .cd-line__name { font-size: clamp(1.6rem, 2.4vw, 1.9rem); }
.cd-board .cd-line__dots { border-color: rgba(235, 169, 56, .45); }
.cd-board .cd-line__price { color: var(--amber); }
.cd-board .cd-line__desc { color: var(--chalk-2); }
.cd-board .cd-veg { color: #9cc58f; }

.cd-board__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 44px;
}
.cd-board__foot p { color: var(--chalk-2); font-size: .95rem; }

@media (max-width: 900px) {
  .cd-board__head { grid-template-columns: 1fr; }
  .cd-board__list { grid-template-columns: 1fr; }
}

/* ---------- Ligne de carte (partagée accueil / carte) ---------- */

.cd-line { display: flex; align-items: baseline; gap: 10px; }
.cd-line__name {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
}
.cd-line__dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted var(--ink-3);
  transform: translateY(-.3em);
}
.cd-line__price {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cd-line__desc {
  margin-top: 6px;
  max-width: 60ch;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.cd-veg {
  display: inline-block;
  font-stretch: 80%;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--herb);
}

/* ---------- La maison ---------- */

.cd-house { padding: clamp(80px, 11vw, 140px) 0; }

.cd-house__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Carrousel de photos (la maison) */
.cd-slides__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper-2);
  box-shadow: 0 2px 6px rgba(46, 29, 20, .12), 0 24px 48px -20px rgba(46, 29, 20, .45);
}
.cd-slides__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s ease, transform 7s ease-out;
}
/* La photo affichée avance doucement, comme si on s'approchait de l'assiette */
.cd-slides__img.is-active { opacity: 1; transform: scale(1); }

/* Fines barres de progression, en bas à gauche de la photo */
.cd-slides__bars {
  position: absolute;
  left: 14px; bottom: 10px;
  display: flex;
  gap: 6px;
}
.cd-slides__bars button {
  display: flex;
  align-items: center;
  width: 28px; height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.cd-slides__bars span {
  position: relative;
  display: block;
  width: 100%; height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 1px 4px rgba(30, 19, 13, .35);
  transition: height .2s ease;
}
.cd-slides__bars button:hover span { height: 5px; }
.cd-slides__bars span::after {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.cd-slides__bars .is-done span::after { transform: none; }
.cd-slides__bars .is-active span::after { animation: cd-fill var(--slides-interval, 5s) linear forwards; }
.cd-slides.is-paused .cd-slides__bars .is-active span::after { animation-play-state: paused; }
.cd-slides.is-static .cd-slides__bars .is-active span::after { animation: none; transform: none; }

@keyframes cd-fill { to { transform: none; } }

.cd-house__text > p { margin-top: 24px; font-size: 1.125rem; color: var(--ink-2); max-width: 54ch; }

.cd-virtues { margin-top: 36px; }
.cd-virtues > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.cd-virtues > div:last-child { border-bottom: 1px solid var(--rule); }
.cd-virtues dt { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.cd-virtues dd { color: var(--ink-2); font-size: .98rem; }


@media (max-width: 900px) {
  .cd-house__grid { grid-template-columns: 1fr; }
}
/* La colonne de texte est étroite à côté du carrousel : titre au-dessus du texte */
@media (max-width: 1240px) {
  .cd-virtues > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Avis Google ---------- */

.cd-reviews { padding: 0 0 clamp(80px, 11vw, 140px); }

.cd-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 40px;
}

.cd-reviews__score {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink-2);
}
.cd-reviews__score strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--ink);
}
.cd-reviews__score:hover span:last-child { text-decoration: underline; }

.cd-stars { display: inline-flex; gap: 2px; color: var(--amber); }
.cd-stars svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }

.cd-reviews__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 48px;
}
.cd-review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.cd-review blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-review__by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: .92rem;
}
.cd-review__by img { width: 32px; height: 32px; border-radius: 50%; }
.cd-review__by a { font-weight: 600; text-decoration: none; }
.cd-review__by a:hover { text-decoration: underline; }
.cd-review__by small { display: block; color: var(--ink-3); font-size: .85rem; }

.cd-reviews__more { margin-top: 36px; }
.cd-reviews__more a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.cd-reviews__more a:hover { text-decoration: underline; }
.cd-reviews__more svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .cd-reviews__list { grid-template-columns: 1fr; }
}

/* ---------- En images ---------- */

.cd-photos { padding: 0 0 clamp(80px, 11vw, 140px); }
.cd-photos .cd-h2 { margin-bottom: 40px; }

.cd-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(140px, 17vw, 230px);
  grid-template-areas:
    "a a b c"
    "a a b d"
    "e f f d"
    "e g h h";
  gap: 10px;
}
.cd-mosaic__item {
  position: relative;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--paper-2);
  cursor: zoom-in;
}
.cd-mosaic__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.cd-mosaic__item:hover img { transform: scale(1.04); }
.cd-mosaic__item:nth-child(1) { grid-area: a; }
.cd-mosaic__item:nth-child(2) { grid-area: b; }
.cd-mosaic__item:nth-child(3) { grid-area: c; }
.cd-mosaic__item:nth-child(4) { grid-area: d; }
.cd-mosaic__item:nth-child(5) { grid-area: e; }
.cd-mosaic__item:nth-child(6) { grid-area: f; }
.cd-mosaic__item:nth-child(7) { grid-area: g; }
.cd-mosaic__item:nth-child(8) { grid-area: h; }

@media (max-width: 700px) {
  .cd-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
    grid-auto-rows: 44vw;
    gap: 6px;
  }
  .cd-mosaic__item:nth-child(n) { grid-area: auto; }
  .cd-mosaic__item:nth-child(1),
  .cd-mosaic__item:nth-child(6),
  .cd-mosaic__item:nth-child(7),
  .cd-mosaic__item:nth-child(8) { grid-column: span 2; }
}

/* Visionneuse */
.cd-lightbox {
  position: fixed; inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(30, 19, 13, .95);
}
.cd-lightbox.is-open { display: flex; animation: cd-fade .25s ease-out; }
.cd-lightbox__img { max-width: min(92vw, 1100px); max-height: 82vh; object-fit: contain; }
.cd-lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: transparent;
  color: var(--chalk);
  border: 1px solid rgba(251, 241, 225, .35);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cd-lightbox__btn:hover { background: var(--chalk); color: var(--ink); }
.cd-lightbox__btn--close { top: 20px; right: 20px; }
.cd-lightbox__btn--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.cd-lightbox__btn--next { right: 20px; top: 50%; transform: translateY(-50%); }
.cd-lightbox__counter { position: absolute; top: 32px; left: 24px; color: var(--chalk-2); font-variant-numeric: tabular-nums; font-size: .9rem; }

@keyframes cd-fade { from { opacity: 0; } }

@media (max-width: 640px) {
  .cd-lightbox__btn--prev, .cd-lightbox__btn--next { top: auto; bottom: 64px; transform: none; }
}

/* ---------- La carte ---------- */

.cd-menu__head { padding-top: clamp(48px, 8vw, 96px); padding-bottom: 40px; }
.cd-menu__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: .9;
  letter-spacing: -.02em;
}
.cd-menu__intro { margin-top: 16px; font-size: 1.2rem; color: var(--ink-2); }
.cd-menu__service {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 28px;
  max-width: 60ch;
  color: var(--ink-2);
}
.cd-menu__head .cd-status { margin-top: 24px; }
.cd-menu__service svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--ink-3); }
.cd-menu__service strong { color: var(--ink); }

.cd-chapters {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cd-chapters__track {
  position: relative;
  display: flex;
  gap: 4px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 calc(var(--gutter) - 12px);
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
  /* les rubriques coupées au bord s'effacent : on devine qu'on peut faire défiler */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent);
}
.cd-chapters__track::-webkit-scrollbar { display: none; }
.cd-chapters a {
  flex: none;
  padding: 16px 12px 14px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.cd-chapters a:hover { color: var(--ink); }
.cd-chapters a.is-active { color: var(--ink); border-bottom-color: var(--ink); }

.cd-menu__body { padding-bottom: clamp(72px, 10vw, 120px); }

/* Les croques salés sur l'ardoise, comme sur l'accueil */
.cd-board--menu { padding: 0; }
.cd-board--menu .cd-chapter { border-bottom: 0; padding: clamp(56px, 8vw, 88px) 0; }
.cd-board--menu .cd-chapter__head p { color: var(--chalk-2); }
.cd-board--menu .cd-chapter__head strong { color: var(--amber); }
.cd-board--menu .cd-item { border-bottom-color: var(--chalk-rule); }

/* Carrousel des croques, sous le titre de la rubrique */
.cd-slides--carte { margin-top: 32px; }
/* Sur l'ardoise, la photo est encadrée de crème comme un tirage posé sur le comptoir */
.cd-slides--carte .cd-slides__frame {
  aspect-ratio: 4 / 5;
  border: 4px solid var(--chalk);
  background: var(--chalk);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 60px -18px rgba(0, 0, 0, .85);
}
@media (max-width: 860px) {
  .cd-slides--carte .cd-slides__frame { aspect-ratio: 4 / 3; }
}
.cd-board--menu .cd-item:first-child { border-top: 1px solid var(--chalk-rule); }

.cd-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px 64px;
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
}
.cd-chapter__head { align-self: start; position: sticky; top: calc(var(--nav-h) + 80px); }
.cd-chapter__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1;
  margin-bottom: 14px;
}
.cd-chapter__head p { color: var(--ink-2); font-size: .98rem; }
.cd-chapter__head p + p { margin-top: 6px; }

.cd-group {
  margin: 36px 0 4px;
  font-stretch: 80%;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cd-group:first-child { margin-top: 0; }

.cd-item { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cd-items:not(.cd-items--knights) .cd-line__name { font-family: var(--text); font-weight: 550; font-size: 1.05rem; line-height: 1.35; }
.cd-items--knights .cd-item { padding: 20px 0; }
.cd-items--knights .cd-line__name { font-size: 1.6rem; }
.cd-items--knights .cd-line__price { font-size: 1.1rem; }
.cd-line__desc .cd-veg { margin-left: 6px; }

.cd-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 8px;
  font-size: .92rem;
  color: var(--ink-2);
}
.cd-sizes .cd-line__price { color: var(--ink); margin-left: 4px; }

.cd-menu__foot { padding-top: 40px; font-size: .92rem; color: var(--ink-3); }
.cd-menu__foot p + p { margin-top: 6px; }

@media (max-width: 860px) {
  .cd-chapter { grid-template-columns: 1fr; padding: 44px 0; }
  .cd-chapter__head { position: static; }
}

/* ---------- Pied de page ---------- */

.cd-footer {
  background: var(--board);
  color: var(--chalk);
  padding: clamp(72px, 9vw, 112px) 0 32px;
}
.cd-footer__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1;
  margin-bottom: 48px;
}
.cd-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px 64px;
}
.cd-footer h3 {
  margin-bottom: 18px;
  font-stretch: 80%;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}

.cd-hours > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--chalk-rule);
  font-variant-numeric: tabular-nums;
}
.cd-hours dd { white-space: nowrap; }
.cd-hours .is-closed { color: var(--chalk-2); }
.cd-hours .is-today { font-weight: 700; }
.cd-hours__today {
  margin-left: 8px;
  font-stretch: 80%;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
}

.cd-contact { font-style: normal; }
.cd-contact p { margin-bottom: 22px; font-size: 1.1rem; line-height: 1.5; }
.cd-contact p span { color: var(--chalk-2); }
.cd-contact--list li + li { margin-top: 12px; }
.cd-contact--list a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cd-contact--list a:hover { text-decoration: underline; }
.cd-contact svg { width: 18px; height: 18px; flex: none; color: var(--chalk-2); }

.cd-footer__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--chalk-rule);
  font-size: .88rem;
  color: var(--chalk-2);
}
.cd-footer__bottom img { width: 40px; height: 40px; }
.cd-footer__bottom p:last-child { margin-left: auto; }

@media (max-width: 900px) {
  .cd-footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Mentions légales ---------- */

.cd-legal { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(72px, 10vw, 120px); max-width: 860px; }
.cd-legal h1 { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 7vw, 4.5rem); line-height: .95; margin-bottom: 48px; }
.cd-legal section { padding: 32px 0; border-top: 1px solid var(--rule); }
.cd-legal h2 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.15; margin-bottom: 14px; }
.cd-legal p, .cd-legal li { color: var(--ink-2); max-width: 70ch; }
.cd-legal p + p, .cd-legal li + li { margin-top: 6px; }
.cd-legal strong { color: var(--ink); }
.cd-legal a:not(.cd-btn) { color: var(--ink); text-decoration: underline; }
.cd-legal__date { padding: 24px 0 40px; border-top: 1px solid var(--rule); font-size: .9rem; }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */