@import url("le-bouillon.css");
/* ---- La carte ---- */
.ct-page { margin: 0 calc(var(--cadre) + var(--marge)); padding: clamp(28px, 3.4vw, 44px) 0 0; }
.ct-onglets { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-onglets a { display: inline-flex; padding: 12px 18px; border: 3px solid var(--rouge); color: var(--rouge); -webkit-text-fill-color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.ct-blocs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px) clamp(32px, 5vw, 72px); margin-top: clamp(28px, 3.4vw, 44px); }
.ct-titre { margin: 0; padding-bottom: 12px; border-bottom: 4px solid var(--rouge); color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: .01em; }
.ct-liste { list-style: none; margin: 4px 0 0; padding: 0; }
.ct-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid rgba(134, 1, 1, .18); }
.ct-liste li:last-child { border-bottom: 0; }
.ct-liste .nom { color: #2B2320; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 700; }
.ct-liste .prix { color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ct-note { margin: clamp(24px, 3vw, 36px) 0 0; text-align: center; color: #6B5B52; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 13px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .ct-onglets a { transition: background-color .3s var(--ease), color .3s var(--ease); } .ct-onglets a:hover { background: var(--rouge); color: #fff; -webkit-text-fill-color: #fff; } }
@media (max-width: 1023px), (pointer: coarse) { .ct-blocs { grid-template-columns: 1fr; } .ct-onglets a { padding: 10px 14px; font-size: 11px; } }
.page-interne .hero-img--photo { left: 0; right: auto; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; -webkit-mask-image: none; mask-image: none; }
.page-interne .hero--photo .hero-cadre { background: #1a1412; }
.hero-voile--photo { background: linear-gradient(to top, rgba(28,8,6,.62) 0%, rgba(28,8,6,.28) 50%, rgba(28,8,6,.1) 100%); }
.page-interne .hero-img--photo { object-position: center 45%; }
.hero-voile--photo { background: linear-gradient(to top, rgba(20,6,4,.78) 0%, rgba(20,6,4,.5) 42%, rgba(20,6,4,.22) 100%); }

/* ---- Titre de section (meme calage que "L'histoire" sur Le bouillon) ---- */
.ct-titre-section { margin-bottom: clamp(6px, 1vw, 14px); }

/* ---- Colonnes du menu : bouton "voir la suite" aligne en bas ---- */
.mn-col { display: flex; flex-direction: column; }
.mn-col > ul { flex: 0 0 auto; }

/* le repli : hauteur animee sans valeur en dur (0fr -> 1fr) */
.mn-suite { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s cubic-bezier(.22, .61, .36, 1), opacity .18s ease; }
.mn-suite > ul { overflow: hidden; min-height: 0; margin: 0; padding: 0; list-style: none; }
.mn-col.est-ouvert .mn-suite { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .28s cubic-bezier(.22, .61, .36, 1), opacity .2s ease; }
/* ouvert, le trait revient entre la 6e ligne et la suite */
.mn-col.est-ouvert > ul > li:last-child { border-bottom: 1px solid rgba(134, 1, 1, .18); }

/* le bouton reprend le style du "+ d'autres entrees" de l'accueil */
.mn-plus { margin-top: auto; display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 0 0; background: none; border: 0; border-radius: 0; color: var(--rouge); -webkit-text-fill-color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mn-plus-txt { transition: opacity .18s ease; }
.mn-plus-chev { position: relative; width: 9px; height: 9px; flex: 0 0 auto; margin-bottom: 2px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.mn-col.est-ouvert .mn-plus-chev { transform: rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .mn-plus:hover .mn-plus-txt { opacity: .62; } }
.mn-plus:active .mn-plus-txt { opacity: .62; }
.mn-plus:focus-visible { outline: 3px solid var(--rouge); outline-offset: 4px; }

@media (max-width: 1023px), (pointer: coarse) { .mn-plus { padding-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .mn-suite, .mn-col.est-ouvert .mn-suite, .mn-plus-chev { transition: none; } }

/* une ligne par plat : ce qui depasse est coupe par des points de suspension */
.ct-page .menu .nom { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Mobile : le depliant "+ d'autres..." doit offrir 44px sous le doigt ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .mn-plus { padding-bottom: 15px; }
}

/* ---- Telephone : de l'air avant la section de cloture, la page du menu
   n'en laissait aucun ---- */
@media (max-width: 700px) {
  .ct-page { padding-bottom: 24px; }
}

/* ---- Hors desktop : les memes intervalles que sur Le bouillon, et les deux
   personnages qui encadrent chaque titre de rubrique. ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .ct-page { padding-top: 24px; }
  .ct-page .ct-titre-section { margin-bottom: 24px; }   /* le titre collait a la photo */
  .ct-page .menu .mn-scene { padding-top: 24px; }       /* photo -> titre de rubrique */
  .ct-page .menu h3 { text-align: center; }             /* meme sans la scene des personnages */
}

/* ---- La mention de garniture, sous les plats, comme sur la carte ---- */
.mn-note { margin: 14px 0 0; color: rgba(43, 35, 32, .68);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 13px;
  font-weight: 600; font-style: italic; line-height: 1.4; }
@media (max-width: 1023px), (pointer: coarse) { .mn-note { text-align: center; font-size: 12.5px; } }

/* ---- Ordinateur : chaque rubrique garde sa hauteur. Etirees a la plus haute,
   les colonnes poussaient les boutons des voisines vers le bas des qu'on en
   depliait une. ---- */
@media (min-width: 1024px) {
  .ct-page .menu { align-items: start; }
  .ct-page .mn-plus { margin-top: 14px; }
}

/* ---- Ordinateur : la mention de garniture alourdissait la carte, elle n'y
   figure plus. Elle reste sur telephone, sous les plats, ou la carte papier la
   place. ---- */
@media (min-width: 1024px) { .mn-note { display: none; } }

/* ---- Un intitule coupe se donne pour cliquable, et se deplie sur deux lignes ---- */
.ct-page .menu .nom.est-coupe { cursor: pointer; -webkit-tap-highlight-color: transparent;
  text-decoration: underline dotted rgba(134, 1, 1, .45); text-underline-offset: 4px; }
.ct-page .menu .nom.est-deplie { white-space: normal; overflow: visible; text-overflow: clip;
  text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .ct-page .menu .nom.est-coupe:hover { text-decoration-color: var(--rouge); }
}
.ct-page .menu .nom:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }