/* Accueil : les plats en photos en haut de page, et un fond qui change de couleur au fil de la page
   (retours d'Antoine du 27 sept. 2026 : « carrousel en hero des plats », « plus de couleur, le fond
   est uni, peut-être qu'il change au fur et à mesure avec des effets »). */

/* ---------- La une : les plats en photos ---------- */
.une--plats { display: flex; flex-direction: column; min-height: 0; align-items: stretch; background: var(--terre-nuit); }
.une--plats::after { display: none; }
.plats-une { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--terre-nuit); view-transition-name: une-photo; }
.plats-une__vue { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s var(--ease-douce); }
.plats-une__vue.est-vue { opacity: 1; }
.plats-une__vue img { width: 100%; height: 100%; object-fit: cover; }
.plats-une__vue.est-vue img { animation: lent-zoom 9s cubic-bezier(0.2, 0, 0.3, 1) both; }
@keyframes lent-zoom { from { scale: 1.1; } to { scale: 1; } }
.plats-une__vue figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.plats-une__commandes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: var(--e-3) var(--e-4); }
.plats-une__legende { flex: 1 1 12rem; margin: 0; font-weight: 700; font-size: 1.1rem; }
.plats-une__points { display: flex; }
.plats-une__points button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0 5px; border: 0; background: transparent; cursor: pointer; }
.plats-une__points span { position: relative; display: block; width: 100%; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.35); overflow: hidden; transition: height 0.2s; }
.plats-une__points button:hover span { height: 6px; }
.plats-une__points span::after { content: ""; position: absolute; inset: 0; background: var(--mais); transform-origin: left center; scale: 0 1; }
.plats-une__points [aria-current="true"] span::after { scale: 1 1; animation: avance 6.5s linear both; }
/* La barre donne le tempo : quand elle est pleine, photo suivante (site.js). Pas d'arrêt au survol (Antoine, 28 sept.). */
@keyframes avance { from { scale: 0 1; } }
.une--plats .une__texte { padding-top: var(--e-4); }
/* Téléphone : les commandes se posent sur le bas de la photo (barres et pause sur une ligne,
   légende lue par les lecteurs d'écran mais cachée), pour que les deux boutons tiennent au-dessus
   de la barre d'appel dès le premier écran. */
@media (max-width: 899px) {
  .une--plats { display: grid; grid-template-columns: minmax(0, 1fr); }
  /* Safari n'étire pas un élément de grille qui a un rapport largeur/hauteur : sans largeur donnée, la photo ne
     prenait qu'un tiers de l'écran sur iPhone (capture d'Antoine du 15 octobre 2026). */
  .plats-une { grid-row: 1; grid-column: 1; width: 100%; justify-self: stretch; }
  .plats-une__commandes { grid-row: 1; grid-column: 1; align-self: end; z-index: 2; flex-wrap: nowrap; justify-content: space-between; padding: var(--e-7) var(--e-3) var(--e-2); background: linear-gradient(transparent, rgb(52 16 5 / 0.85)); }
  .plats-une__legende { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .plats-une__points button { width: 2.25rem; height: 2.25rem; }
    .une--plats .une__texte { grid-row: 2; }
}
.une--plats .etat { margin-top: 0; }

@media (min-width: 900px) {
  .une--plats { display: grid; grid-template-rows: 1fr auto; min-height: min(90svh, 52rem); position: relative; }
  .plats-une { position: absolute; inset: 0; aspect-ratio: auto; }
  /* Voile : sombre sous le texte à gauche et sous les commandes, la photo libre à droite */
  .une--plats::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgb(52 16 5 / 0.93) 0%, rgb(52 16 5 / 0.8) 30%, rgb(52 16 5 / 0.25) 55%, rgb(52 16 5 / 0) 70%),
      linear-gradient(0deg, rgb(52 16 5 / 0.8) 0%, rgb(52 16 5 / 0) 24%);
  }
  .une--plats .une__texte { position: relative; z-index: 2; grid-row: 1; align-self: center; width: 100%; padding: var(--e-8) var(--e-4) var(--e-6); }
  .une--plats h1 { max-width: 22ch; text-shadow: 0 2px 14px rgb(0 0 0 / 0.4); }
  /* Commandes à gauche, sous le texte : le coin bas droit est pris par les boutons Appeler et Itinéraire. */
  .plats-une__commandes { position: relative; z-index: 2; grid-row: 2; width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--e-4) var(--e-6); justify-content: flex-start; }
  .plats-une__legende { flex: 0 1 auto; margin-right: var(--e-3); text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); }
  .une--plats .une__texte .etat { display: none; }   /* déjà dans l'en-tête sur ordinateur */
}
@media (min-width: 900px) and (max-width: 1099px) {
  .une--plats .une__texte .etat { display: inline-flex; }   /* l'en-tête n'a plus la place de l'afficher */
}

/* ---------- Note Google sous les boutons du haut ---------- */
.une__note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-4); color: var(--blanc); text-decoration: none; font-size: 1.05rem; }
.une__note:hover strong { text-decoration: underline; }
.une__etoiles { position: relative; display: inline-block; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.3); font-size: 1.15rem; line-height: 1; }
.une__etoiles span { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--mais); }

/* ---------- Bandeau des atouts qui défile, sous la une (Antoine, 28 sept.) ---------- */
/* Vert olive depuis le 8 oct. 2026 (Antoine : « change la couleur du bandeau ») : il se détache du fond marron ; ni filet ni dessin jaune sur le vert. */
.atouts { background: #e7d3ae url("../img/planche-bois.webp") center / cover; color: var(--terre-nuit); border-block: 3px solid var(--terre); overflow: hidden; }   /* beige à effet bois (Antoine, 8 oct. au soir) */
.atouts__defile { display: flex; }
.atouts__piste { flex: none; display: flex; align-items: center; gap: var(--e-7); margin: 0; padding: var(--e-3) var(--e-7) var(--e-3) 0; list-style: none; animation: defile 32s linear infinite; }
.atouts__piste li { display: inline-flex; align-items: center; gap: var(--e-2); white-space: nowrap; font-weight: 700; font-size: 1.1rem; }
.atouts__piste svg { flex: none; width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--terre); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .atouts__defile { overflow-x: auto; } .atouts__piste[aria-hidden="true"] { display: none; } }

/* ---------- Le terroir limousin dans l'assiette : six raisons, sans cadre ---------- */
.terroir, .questions { max-width: var(--largeur); margin: var(--e-section) auto 0; padding: 0 var(--e-4); }
.terroir__tete p { max-width: none; font-size: var(--t-accroche); line-height: 1.45; }   /* texte en largeur (Antoine, 28 sept.) */
/* Six encarts beige, chacun avec sa photo (Antoine : « manque de photo », « mettre des encarts beige »). */
.terroir__liste { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-5); }
.terroir__liste li { overflow: hidden; border-radius: var(--rayon); background: var(--beige); color: var(--noir); box-shadow: var(--ombre-pose); }
.terroir__liste img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.6s var(--ease-douce); }
.terroir__liste li:hover img { transform: scale(1.04); }
.terroir__liste li:nth-child(2) img { object-position: center 80%; }   /* la planche plutôt que la nappe (revue du 29 sept.) */
.terroir__liste h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; margin: var(--e-4) var(--e-5) var(--e-2); color: var(--terre); }
.terroir__liste p { margin: 0 var(--e-5) var(--e-5); }
@media (min-width: 700px) { .terroir__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .terroir__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Un encart sur deux en vert olive, en damier quelle que soit la largeur (Antoine, 29 sept.). */
.terroir__liste li:is(:nth-child(2), :nth-child(4), :nth-child(6)) { background: var(--motif-clair) no-repeat right 0.8rem bottom 0.4rem / 4rem, var(--fond-olive); color: var(--beige); }
.terroir__liste li:is(:nth-child(2), :nth-child(4), :nth-child(6)) h3 { color: var(--beige); }
@media (min-width: 700px) and (max-width: 1099px) {
  .terroir__liste li:nth-child(3) { background: var(--motif-clair) no-repeat right 0.8rem bottom 0.4rem / 4rem, var(--fond-olive); color: var(--beige); }
  .terroir__liste li:nth-child(3) h3 { color: var(--beige); }
  .terroir__liste li:nth-child(4) { background: var(--motif) no-repeat right 0.8rem bottom 0.4rem / 4rem, var(--beige); color: var(--noir); }
  .terroir__liste li:nth-child(4) h3 { color: var(--terre); }
}

/* ---------- Vos questions, nos réponses ---------- */
.questions { max-width: calc(52rem + 2 * var(--e-4)); margin-left: auto; margin-right: auto; }
.questions > .titre, .questions__suite { text-align: center; }
.questions__suite { max-width: none; }
.questions details { margin-bottom: var(--e-3); padding: 0 var(--e-5); border-radius: 12px; background: var(--beige); color: var(--noir); box-shadow: var(--ombre-pose); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 3.25rem; padding: var(--e-3) 0; font-weight: 700; font-size: 1.2rem; cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mais); color: var(--noir); font-size: 1.3rem; line-height: 1; transition: rotate 0.25s var(--ease-douce); }
.questions details[open] summary::after { rotate: 45deg; }
.questions details p { margin: 0 0 var(--e-4); }
.questions__suite { margin-top: var(--e-4); }
.questions .lien-suite { font-weight: 700; display: inline-flex; min-height: 3rem; align-items: center; }

/* ---------- Le fond : marron, et deux bandes crème qui s'ouvrent en arrivant ---------- */
/* Antoine, 27 sept. : « trop de changements de couleur, le vert est moche en fond ; fond marron
   et après fond crème ». Le marron reste la base ; les plats, la découpe et les offres sont posés
   sur une bande crème, comme la carte posée sur la table. */
.bande--creme { position: relative; margin-top: var(--e-section); padding: 1px 0 var(--e-section); background: #efe3c8; color: var(--noir); }   /* beige chaud plutôt que blanc crème (« trop de zones de blanc ») */
.bande--creme .titre { color: var(--terre); }
.bande--creme .saveurs, .bande--creme .offres { margin-top: var(--e-section); }
.bande--creme .lien-suite { color: var(--terre-nuit); }
.bande--creme .decoupe { box-shadow: 0 1rem 2.5rem rgb(92 30 12 / 0.28); }
@supports (animation-timeline: view()) {
  .bande--creme { animation: bande-ouvre linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  @keyframes bande-ouvre { from { clip-path: inset(0 18% round 8rem); } to { clip-path: inset(0 0 round 0); } }
}

/* Une lueur maïs, discrète, qui glisse au fil du défilement sur le fond marron. */
@supports (animation-timeline: scroll()) {
  body::before {
    content: ""; position: fixed; inset: -30vmax; z-index: -1; pointer-events: none;
    background: radial-gradient(36vmax 30vmax at 25% 30%, rgb(250 181 0 / 0.1), transparent 70%);
    animation: lueur linear both; animation-timeline: scroll(root);
  }
  @keyframes lueur { from { transform: translate3d(-8vmax, -6vmax, 0); } to { transform: translate3d(30vmax, 20vmax, 0); } }
}

@media (prefers-reduced-motion: reduce) {
  .plats-une__vue { transition: none; }
  }

/* Plus de vert (Antoine, 11 oct. 2026) : le bandeau des atouts repasse au vert olive, les tuiles du terroir aussi (plus haut). */
.atouts { background: var(--vert-contact); color: var(--blanc); border-block: 3px solid var(--vert-profond); }
.atouts__piste svg { stroke: var(--beige); }

/* Le bloc du fondu, étoffé (Antoine, 11 oct. 2026 : « développe, ça fait trop vide ») : trois repères (quand, à volonté, le
   prix) et un encart de la hauteur de la photo, au lieu d'une petite carte perdue à côté d'elle. */
.offre__faits { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
.offre__faits li { display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; padding: var(--e-4) var(--e-3); border-radius: 12px; background: rgb(255 255 255 / 0.62); box-shadow: 0 1px 5px rgb(0 0 0 / 0.1); text-align: center; line-height: 1.25; }
.offre__faits strong { font: 400 2rem/1.05 var(--ff-pinceau); color: var(--vert-contact); }
.offre__faits span { font-size: 1rem; }
@media (max-width: 560px) { .offre__faits { grid-template-columns: 1fr; gap: var(--e-2); } .offre__faits li { align-items: flex-start; text-align: left; padding: var(--e-3) var(--e-4); } .offre__faits strong { white-space: nowrap; } }
@media (min-width: 900px) {
  .bloc--degage { align-items: stretch; }
  .bloc--degage .bloc__photo { grid-column: 7 / 13; }
  .bloc--degage .bloc__photo > img { height: 100%; aspect-ratio: auto; min-height: 26rem; }
  .bloc--degage .panneau { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: center; }
}

/* Les bandes claires en planches de bois clair (Antoine, 11 oct. 2026 : « sur la partie fond crème mets un élément de fond
   stp ») : la matière du fond brun de la page, en beige. Carreau fabriqué par fond_bois.py. */
.bande--creme { background: #efe3c8 url("../img/fond-bois-clair.webp") repeat center top / 1040px auto; }
@media (max-width: 699px) { .bande--creme { background-size: 620px auto; } }