/* Au Paysan Gourmand, thème 2026 : ce qui vient de la carte imprimée (planche de bois, cadres
   entaillés, vache découpée) et le mouvement. Chaque effet a sa version sans mouvement. */

:root {
  --ease-sortie: cubic-bezier(0.16, 1, 0.3, 1);   /* expo : entrées franches */
  --ease-douce: cubic-bezier(0.22, 1, 0.36, 1);   /* quint : états */
  /* Cadre de la carte : filet fin, coins entaillés en quart de cercle */
  --cadre-carte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath d='M11 1.5H43A10 10 0 0 0 52.5 11V43A10 10 0 0 0 43 52.5H11A10 10 0 0 0 1.5 43V11A10 10 0 0 0 11 1.5Z' fill='none' stroke='%23913317' stroke-width='1.5'/%3E%3C/svg%3E");
  --cadre-mais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath d='M11 1.5H43A10 10 0 0 0 52.5 11V43A10 10 0 0 0 43 52.5H11A10 10 0 0 0 1.5 43V11A10 10 0 0 0 11 1.5Z' fill='none' stroke='%23fab500' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---------- Cadre de la carte sur les panneaux blancs, en maïs sur les verts ---------- */
.panneau--blanc::after, .panneau--vert::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 17px solid transparent; border-image: var(--cadre-carte) 18 / 17px stretch;
}
.panneau--vert::after { border-image-source: var(--cadre-mais); opacity: 0.6; }

/* ---------- La découpe du Paysan ---------- */
.decoupe {
  position: relative; display: grid; gap: var(--e-6); color: var(--noir);
  margin: var(--e-section) max(var(--e-4), calc((100% - var(--largeur)) / 2 + var(--e-4))) 0;
  padding: var(--e-7) clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  background: #e7d3ae url("../img/planche-bois.webp") center / cover;
  box-shadow: var(--ombre-pose); border-radius: var(--rayon);
}
.decoupe::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 17px solid transparent; border-image: var(--cadre-carte) 18 / 17px stretch; }
.decoupe .titre { color: var(--terre); margin-bottom: var(--e-3); }
.decoupe__tete p { max-width: 58ch; margin: 0; }
.decoupe__vbf { float: right; width: clamp(3.5rem, 2.5rem + 3vw, 5rem); margin: 0 0 var(--e-3) var(--e-4); }
.decoupe__orn { position: absolute; pointer-events: none; height: auto; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.25)); }
.decoupe__orn--haut { top: -1.25rem; left: 42%; width: clamp(3.5rem, 2rem + 4vw, 6rem); rotate: 14deg; }
.decoupe__orn--bas { bottom: -1rem; left: 0.5rem; width: clamp(5rem, 3rem + 5vw, 8rem); }

.decoupe__vache { position: relative; aspect-ratio: 242 / 144; max-width: 100%; }
.decoupe__zones, .decoupe__teintes, .decoupe__dessin, .decoupe__reperes, .decoupe__noms { position: absolute; inset: 0; width: 100%; height: 100%; }
.decoupe__noms { pointer-events: none; }   /* noms et point du restaurant au-dessus de la teinte et des trajets */
.decoupe__teintes { pointer-events: none; }
/* Teintes calculées sur les pixels du dessin (zones_vache.py) : elles s'arrêtent sur les traits noirs. */
.teinte { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: multiply; transition: opacity 0.25s var(--ease-douce); }
.teinte.choisie { opacity: 0.6; }
.decoupe__vache:has(.zone[data-zone="1"]:hover) .teinte[data-zone="1"]:not(.choisie) { opacity: 0.25; }
.decoupe__vache:has(.zone[data-zone="2"]:hover) .teinte[data-zone="2"]:not(.choisie) { opacity: 0.25; }
.decoupe__vache:has(.zone[data-zone="3"]:hover) .teinte[data-zone="3"]:not(.choisie) { opacity: 0.25; }
.decoupe__vache:has(.zone[data-zone="4"]:hover) .teinte[data-zone="4"]:not(.choisie) { opacity: 0.25; }
.decoupe__vache:has(.zone[data-zone="5"]:hover) .teinte[data-zone="5"]:not(.choisie) { opacity: 0.25; }
.decoupe__vache:has(.zone[data-zone="6"]:hover) .teinte[data-zone="6"]:not(.choisie) { opacity: 0.25; }
.decoupe__vache:has(.zone[data-zone="7"]:hover) .teinte[data-zone="7"]:not(.choisie) { opacity: 0.25; }
.decoupe__vache:has(.zone[data-zone="8"]:hover) .teinte[data-zone="8"]:not(.choisie) { opacity: 0.25; }

.decoupe__dessin { pointer-events: none; }
.zone { fill: transparent; cursor: pointer; }

.repere {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0;
  border: 2px solid var(--blanc); border-radius: 50%; background: var(--terre); color: var(--blanc);
  font: 700 1rem/1 var(--ff-texte); cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
  transition: scale 0.2s var(--ease-douce), background-color 0.2s, color 0.2s;
}
.repere::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.repere:hover { scale: 1.12; }
/* La zone 4 (entrecôte) est étroite : sa pastille est plus petite pour laisser voir ses traits. */
#viande .repere[data-zone="4"] { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; }
.repere.choisi { background: var(--mais); color: var(--noir); scale: 1.2; }
/* Invitation : un seul « ping » des repères, la première fois que la découpe arrive à l'écran. */
.decoupe.vue .repere::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--terre);
  opacity: 0; pointer-events: none;   /* l'anneau agrandi, devenu invisible, ne doit pas capter les clics du repère voisin */
  animation: ping 0.9s var(--ease-sortie) calc(var(--i) * 70ms) both;
}
@keyframes ping { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 2.3; } }

.decoupe__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: var(--e-2); }
.morceau {
  width: 100%; min-height: 3rem; display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3);
  border: 2px solid rgb(92 30 12 / 0.35); border-radius: 10px; background: rgb(255 255 255 / 0.82); color: var(--noir);
  font: 700 1rem/1.2 var(--ff-texte); text-align: left; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, scale 0.12s;
}
.morceau .num { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--terre); color: var(--blanc); font-size: 1rem; transition: background-color 0.2s, color 0.2s; }
.morceau:hover { background: var(--blanc); border-color: var(--terre); }
.morceau:active { scale: 0.97; }
.morceau[aria-pressed="true"] { background: var(--terre); border-color: var(--terre-nuit); color: var(--blanc); }
.morceau[aria-pressed="true"] .num { background: var(--mais); color: var(--noir); }

.fiche { margin-top: var(--e-4); padding: var(--e-4) var(--e-5); background: rgb(255 255 255 / 0.92); border-radius: 12px; }
.fiche + .fiche { margin-top: var(--e-3); }
/* Aucun morceau ouvert : une invitation à la place du détail. */
.decoupe__choix:not(:has(.fiche:not([hidden])))::after { content: "Choisissez un morceau sur la vache ou dans la liste pour voir son poids et son prix."; display: block; padding: var(--e-4) var(--e-5); margin-top: var(--e-4); border: 2px dashed rgb(92 30 12 / 0.4); border-radius: 12px; font-weight: 700; color: var(--terre-nuit); }
.fiche h3 { font: 700 1.35rem/1.2 var(--ff-texte); color: var(--terre); margin-bottom: var(--e-2); }
.fiche .plats { margin-bottom: 0; }
.fiche.entre { animation: fiche-entre 0.24s var(--ease-douce); }
@keyframes fiche-entre { from { opacity: 0; translate: 0 6px; } }
.decoupe__liens { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); margin: var(--e-2) 0 0; }
.decoupe__choix { display: flex; flex-direction: column; }
.decoupe__choix::after { order: 1; }
.decoupe__liens { order: 2; }
.decoupe .lien-suite { display: inline-flex; min-height: 3rem; align-items: center; font-weight: 700; color: var(--terre-nuit); }

@media (max-width: 899px) {
  .repere { width: 1.4rem; height: 1.4rem; font-size: 0.8rem; border-width: 1.5px; }
}
@media (min-width: 900px) {
  .decoupe { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; column-gap: var(--e-6); }
  .decoupe__tete { grid-column: 1 / -1; }
  .decoupe__vache { align-self: start; margin-top: var(--e-6); }
  /* Retour d'Antoine du 8 octobre : le bloc de la découpe était trop haut. La liste passe sur deux colonnes,
     la colonne de droite s'élargit et les marges se resserrent. */
  #viande { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); row-gap: var(--e-4); padding-top: var(--e-6); padding-bottom: var(--e-6); }
  #viande .decoupe__liste { grid-template-columns: 1fr 1fr; }
  #viande .decoupe__vache { margin-top: var(--e-3); }
  #viande .morceau { min-height: 2.75rem; }
}

/* ---------- Nos fournisseurs : la carte du Limousin, sur le modèle de la découpe ---------- */
.decoupe--fournisseurs { background: #e7d3ae url("../img/planche-bois.webp") center / cover; }   /* même fond de bois que la découpe (Antoine, 8 oct.) */
/* La carte reste dans son cadre : rien ne déborde sur le titre, la liste ou la fiche. */
.carte-producteurs { overflow: hidden; border-radius: 12px; background: #e9e1cf; box-shadow: inset 0 0 0 1px rgb(92 30 12 / 0.15); }
.carte-producteurs svg { overflow: hidden; }
.dep { stroke-linejoin: round; }
.dep--voisin { fill: #e9e1cf; stroke: #cbbfa6; stroke-width: 1; }
.dep--limousin { fill: #fbf6ea; stroke: var(--terre); stroke-width: 1.4; }
.ville { font: 700 21px var(--ff-texte); fill: var(--terre-nuit); paint-order: stroke; stroke: #fbf6ea; stroke-width: 5px; stroke-linejoin: round; }
.restaurant circle { fill: var(--mais); stroke: var(--terre-nuit); stroke-width: 3; }
.restaurant text { font: 700 21px var(--ff-texte); fill: var(--noir); paint-order: stroke; stroke: #fbf6ea; stroke-width: 5px; stroke-linejoin: round; }
.teinte--region path { fill: var(--terre); }
.decoupe--fournisseurs .decoupe__vache { margin-top: 0; }
/* Téléphone : la carte est petite, les noms grossissent pour rester lisibles (au moins 12 px). */
@media (max-width: 699px) {
  .ville { font-size: 27px; }
  .restaurant text { display: none; }   /* trop serré autour de Limoges : la légende prend le relais */
  .fiche--fournisseur { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--e-3); }
}
.carte-legende { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-3); font-weight: 700; color: var(--terre-nuit); }
.carte-legende__point { flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--mais); border: 3px solid var(--terre-nuit); }
@media (min-width: 700px) { .carte-legende { display: none; } }
.trajet { fill: none; stroke: var(--terre); stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-douce); }
.trajet.choisie { opacity: 1; animation: trajet 0.9s var(--ease-sortie); }
@keyframes trajet { from { stroke-dashoffset: 120; opacity: 0; } }
.fiche--fournisseur { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.fiche--fournisseur[hidden] { display: none; }
.fiche--fournisseur h3 { margin-bottom: var(--e-1); }
.fiche--fournisseur p { margin: 0 0 var(--e-2); }
/* Logo tout en largeur (Distillerie du Centre, Torréfaction Cahu) : au-dessus du texte ; dans la case carrée il ne ferait que 16 px de haut. */
.fiche--logo-large { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
.fiche--logo-large .fournisseurs__logo { width: auto; height: auto; place-items: center start; }
.fiche--logo-large .fournisseurs__logo img { height: 3.25rem; width: auto; max-height: none; }
.fiche__lieu { font-weight: 700; color: var(--terre); }

/* ---------- Le midi : le texte en largeur, la façade et le plan côte à côte (Antoine, 28 sept.) ---------- */
.midi { max-width: var(--largeur); margin: var(--e-section) auto 0; padding: 0 var(--e-4); }
.midi__texte { margin: 0; }
.midi__texte p { max-width: 62ch; }
.midi__vues { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.midi__vue { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon); box-shadow: var(--ombre-pose); background: #e9e4d8; }
.midi__vue > img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
/* Sur les photos que l'encart chevauche (en bas au téléphone, sur le côté à l'ordinateur), l'étiquette passe en haut. */
.bloc__photo .etiquette { top: var(--e-3); bottom: auto; }
@media (min-width: 900px) { .bloc--envers .bloc__photo .etiquette { left: auto; right: var(--e-3); } }
.midi__vue .etiquette { top: auto; bottom: var(--e-3); left: auto; right: var(--e-3); border-radius: 6px; }
@media (min-width: 700px) { .midi__vues { grid-template-columns: 1fr 1fr; } }
.midi__photo { margin: var(--e-4) 0 0; overflow: hidden; border-radius: var(--rayon); aspect-ratio: 3 / 2; }
.midi__photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  /* Le texte à gauche, la photo à droite sur toute la hauteur du texte (retour d'Antoine du 8 octobre : « faut une photo là »). */
  .midi__texte { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-7); padding: var(--e-7); }
  .midi__texte > .titre { grid-column: 1 / -1; }
  .midi__texte > p, .midi__texte > .lien-suite { grid-column: 1; }
  .midi__texte > .lien-suite { justify-self: start; }
  .midi__photo { grid-column: 2; grid-row: 2 / span 3; margin: 0; aspect-ratio: auto; min-height: 17rem; }
}

/* ---------- Le midi : façade et plan Google Maps, en entier, sans panneau par-dessus ---------- */
.media__piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3; border-radius: var(--rayon); box-shadow: var(--ombre-pose); background: var(--terre-nuit); }
.media__piste::-webkit-scrollbar { display: none; }
.media__vue { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.media__vue > img { width: 100%; height: 100%; object-fit: cover; }
#midi-facade img { object-position: 68% 50%; }   /* l'enseigne entière dans le cadre */
.plan-google { position: relative; width: 100%; height: 100%; background: #e9e4d8; }
.plan-google iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan__repli { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--e-5); text-align: center; font-weight: 700; color: var(--terre-nuit); }
.plan-google.charge .plan__repli { display: none; }
.media__onglets { display: flex; gap: var(--e-2); margin-top: var(--e-3); }
.media__onglets [role="tab"] { min-height: 2.75rem; padding: 0 var(--e-4); border: 2px solid var(--creme); border-radius: 2rem; background: transparent; color: var(--blanc); font: 700 1rem var(--ff-texte); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.media__onglets [role="tab"][aria-selected="true"] { background: var(--mais); border-color: var(--mais); color: var(--noir); }
.bloc--media .panneau, .bloc--cote .panneau { margin-top: var(--e-5); }
/* Téléphone : les prix et les boutons d'abord, la carte ensuite. */
.bloc--cote .panneau { order: -1; margin: 0 0 var(--e-5); }
.media__vue .etiquette { top: auto; bottom: var(--e-3); left: auto; right: var(--e-3); border-radius: 6px; }   /* en bas à droite : ni l'enseigne ni la porte */
/* La carte scannée se montre en entier et en grand, sans panneau par-dessus ; un clic ouvre le PDF. */
.carte-apercu { display: block; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-pose); }
.carte-apercu img { width: 100%; height: auto; transition: transform 0.4s var(--ease-douce); }
.carte-apercu:hover img { transform: scale(1.02); }
@media (min-width: 900px) {
  .bloc--media .bloc__photo { grid-column: 1 / 8; }
  .bloc--media .panneau { grid-column: 8 / 13; margin: 0 0 0 var(--e-5); }
  /* Cartes et menus : le panneau en pleine largeur (prix sur deux colonnes), puis la carte en grand. */
  .bloc--cote .panneau { grid-column: 1 / 13; grid-row: 1; margin: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--e-8); align-items: start; }
  .bloc--cote .panneau > .titre { grid-column: 1 / -1; }
  .bloc--cote .panneau .plats { grid-column: 1; grid-row: 2 / span 2; }
  .bloc--cote .panneau > p, .bloc--cote .panneau .boutons { grid-column: 2; }
  .bloc--cote .bloc__photo { grid-column: 1 / 13; grid-row: 2; margin-top: var(--e-5); }
}

/* ---------- Saveurs et recettes traditionnelles : la galerie des plats ---------- */
.saveurs, .offres { max-width: var(--largeur); margin: var(--e-section) auto 0; padding: 0 var(--e-4); }
.saveurs__tete p { max-width: 62ch; }
.saveurs__grille { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.saveurs__plat { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--rayon); background: var(--terre-nuit); box-shadow: var(--ombre-pose); }
.saveurs__plat--grand { grid-column: span 2; aspect-ratio: 4 / 3; }
/* Photo posée en absolu : la grande case prend la hauteur de deux rangées, sans les écarter. */
.saveurs__plat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-douce); }
.saveurs__plat:hover img { transform: scale(1.05); }
.saveurs__plat p { position: absolute; inset: auto 0 0 0; margin: 0; max-width: none; padding: var(--e-7) var(--e-3) var(--e-3); background: linear-gradient(transparent, rgb(40 12 4 / 0.9)); color: var(--blanc); font-size: 1rem; line-height: 1.3; }
.saveurs__plat strong { display: block; font-size: 1.15rem; }
.saveurs__plat:not(.saveurs__plat--grand) p span { display: none; }
@media (min-width: 900px) {
  .saveurs__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .saveurs__plat--grand { grid-row: span 2; aspect-ratio: auto; }
  .saveurs__plat:not(.saveurs__plat--grand) p span { display: block; }
}

/* ---------- Un décor chaleureux : les photos de la salle qui défilent ---------- */
.decor { margin-top: var(--e-section); }
.decor__texte { max-width: var(--largeur); margin: 0 auto var(--e-6); padding: 0 var(--e-4); }
.decor__texte .titre { margin-bottom: var(--e-3); }
.decor__texte p { margin: 0; }
.decor__defile { display: flex; gap: var(--e-4); overflow: hidden; padding: var(--e-2) 0 var(--e-4); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.decor__piste { flex: none; display: flex; gap: var(--e-4); margin: 0; padding: 0; list-style: none; animation: defile 38s linear infinite; }
.decor__piste img { max-width: none; width: auto; height: clamp(11rem, 8rem + 8vw, 18rem); border-radius: var(--rayon); box-shadow: var(--ombre-pose); }
@keyframes defile { to { transform: translateX(calc(-100% - var(--e-4))); } }
@media (prefers-reduced-motion: reduce) {
  .decor__defile { overflow-x: auto; mask-image: none; }
  .decor__piste[aria-hidden="true"], }

/* ---------- Nos offres : en grand ---------- */
.offres__liste { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-4); }
.offre a { color: inherit; text-decoration: none; display: block; }
.offre img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre-pose); transition: transform 0.3s var(--ease-douce), box-shadow 0.3s var(--ease-douce); }
.offre:hover img { transform: translateY(-6px); box-shadow: 0 1.25rem 2rem rgb(0 0 0 / 0.28); }
.offre p { margin: var(--e-3) 0 0; font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.25; }
.offre a:hover p { text-decoration: underline; }
/* Téléphone : de grandes cartes qu'on fait glisser, la suivante dépasse pour inviter au geste. */
@media (max-width: 699px) {
  .offres__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--e-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-3); scrollbar-width: thin; }
  .offre { scroll-snap-align: start; }
}
/* Quatre offres depuis l'arrêt de la boutique (3 oct. 2026) : deux par deux, en format large pour rester « en grand ». */
@media (min-width: 700px) {
  .offre img { aspect-ratio: 16 / 10; }
}

/* ---------- Nos fournisseurs locaux : dans le cadre de la carte ---------- */
.fournisseurs { position: relative; margin: var(--e-section) max(var(--e-4), calc((100% - 52rem) / 2)) 0; padding: var(--e-7) clamp(1.5rem, 1rem + 3vw, 3.5rem); border-radius: var(--rayon); }
.fournisseurs .titre { color: var(--vert-profond); }
.fournisseurs__liste { list-style: none; margin: var(--e-4) 0 0; padding: 0; }
.fournisseurs__liste li { display: grid; gap: 0 var(--e-4); padding: var(--e-3) 0; border-top: 2px dotted rgb(0 0 0 / 0.25); }
.fournisseurs__liste li:first-child { border-top: 0; }
.fournisseurs__liste strong { color: var(--terre); }
.fournisseurs__suite { margin: var(--e-4) 0 0; font-weight: 700; }
.fournisseurs__liste li { grid-template-columns: 4rem minmax(0, 1fr); align-items: center; }
.fournisseurs__logo { grid-row: span 2; display: grid; place-items: center; width: 4rem; height: 4rem; }
.fournisseurs__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fournisseurs__initiales { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 2px solid var(--terre); color: var(--terre); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; }
@media (min-width: 700px) {
  .fournisseurs__liste li { grid-template-columns: 4.5rem minmax(0, 14rem) 1fr; }
  .fournisseurs__logo { grid-row: auto; width: 4.5rem; height: 4.5rem; }
}

/* ---------- Ils en parlent : avis Google à cinq étoiles, qui défilent sans fin ---------- */
/* Pleine largeur d'écran pour la bande ; titre et lien restent dans la colonne du site. */
.avis { max-width: none; padding: 0; }
.avis__tete, .avis__commandes { max-width: var(--largeur); margin-left: auto; margin-right: auto; padding: 0 var(--e-4); }
.avis__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3) var(--e-5); }
.avis__tete .titre { margin-bottom: 0; }
.avis__note { margin: 0; font-weight: 700; }
.avis__note .etoile { color: var(--mais); }
.avis__defile { display: flex; gap: var(--e-4); margin: var(--e-6) 0 0; padding: var(--e-2) 0 var(--e-4); overflow: hidden; }
.avis__piste { flex: none; display: flex; align-items: stretch; gap: var(--e-4); margin: 0; padding: 0; list-style: none; animation: defile 110s linear infinite; }
.avis__carte { flex: none; width: clamp(16.5rem, 12rem + 16vw, 23rem); display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); border-radius: var(--rayon); background: var(--creme); color: var(--noir); box-shadow: var(--ombre-pose); }
.avis__carte .etoiles { margin: 0; color: var(--brule); letter-spacing: 0.12em; }
.avis__carte blockquote { margin: 0; flex: 1; }
.avis__carte blockquote p { font-size: 1.1rem; line-height: 1.45; font-style: italic; margin: 0; }
.avis__qui { margin: 0; font-weight: 700; color: var(--terre); }
.avis__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-3); }
.avis__tous { margin: 0; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .avis__defile { overflow-x: auto; mask-image: none; }
  .avis__piste[aria-hidden="true"], }

/* ---------- Accueil : couverture en attendant la côte de bœuf ---------- */
@media (min-width: 900px) {
  .une--accueil { grid-template-columns: 1fr minmax(0, 40rem); }
  .une--accueil .une__photo { min-height: 34rem; }
}

/* Le tampon du paysan qui flottait sur la photo du haut est retiré (Antoine, 3 oct. 2026). */

/* ---------- Mouvement ---------- */
/* 1. L'entrée : une seule, orchestrée, sur le haut de page. */
.une h1 { animation: titre-entre 0.75s var(--ease-sortie) 0.12s both; }
.une .etat { animation: monte 0.5s var(--ease-douce) 0.05s both; }
.une .accroche { animation: monte 0.6s var(--ease-douce) 0.32s both; }
.une .boutons { animation: monte 0.6s var(--ease-douce) 0.44s both; }
@keyframes titre-entre { from { clip-path: inset(0 0 100% 0); translate: 0 0.35em; } to { clip-path: inset(-0.3em -0.3em -0.4em -0.3em); translate: 0 0; } }
@keyframes monte { from { opacity: 0; translate: 0 14px; } }

/* 2. Retour immédiat sur ce qui se touche. */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; }
.plats li:hover .points { opacity: 0.85; }
.carte-nav a, .nav a, .sommaire a { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }

/* Le bouton d'appel du bas fait un petit « pop » toutes les 4 secondes (demande d'Antoine). */
#cta-appel svg { animation: pop-icone 4s var(--ease-douce) 2s infinite; }
@keyframes pop-icone { 0%, 84%, 100% { scale: 1; rotate: 0deg; } 88% { scale: 1.35; rotate: -14deg; } 92% { scale: 1.2; rotate: 12deg; } 96% { scale: 1.3; rotate: -6deg; } }
@media (min-width: 900px) {
  #cta-appel { animation: pop-bouton 4s var(--ease-douce) 2s infinite; }
  @keyframes pop-bouton { 0%, 84%, 100% { scale: 1; box-shadow: 0 3px 14px rgb(0 0 0 / 0.3); } 90% { scale: 1.1; box-shadow: 0 0 0 10px rgb(143 170 29 / 0.35), 0 6px 18px rgb(0 0 0 / 0.35); } 96% { scale: 0.98; } }
}
@media (max-width: 899px) {
  #cta-appel { animation: pop-barre 4s var(--ease-douce) 2s infinite; }
  @keyframes pop-barre { 0%, 84%, 100% { background-color: var(--vert-profond); } 90% { background-color: var(--vert-contact); } }
}

/* 3. Le défilement : l'en-tête se resserre, le filet vert se trace, les photos prennent de la profondeur. */
@supports (animation-timeline: view()) {
  .entete { animation: entete-pose linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  @keyframes entete-pose { to { box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); } }

  .panneau::before { transform-origin: left center; animation: filet-trace linear both; animation-timeline: view(); animation-range: entry 5% entry 65%; }
  @keyframes filet-trace { from { scale: 0 1; } }

  .bloc__photo:has(> img) { overflow: hidden; box-shadow: var(--ombre-pose); border-radius: var(--rayon); }
  .bloc__photo > img { box-shadow: none; animation: profondeur linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes profondeur { from { transform: translateY(-4%) scale(1.08); } to { transform: translateY(4%) scale(1.08); } }
}

/* 4. D'une page à l'autre : fondu court, la photo du haut glisse vers la suivante. */
@view-transition { navigation: auto; }
.une__photo { view-transition-name: une-photo; }
.entete { view-transition-name: entete; }
::view-transition-old(root) { animation: 0.2s cubic-bezier(0.4, 0, 1, 1) both vt-sortie; }
::view-transition-new(root) { animation: 0.38s var(--ease-sortie) both vt-entree; }
::view-transition-group(une-photo) { animation-duration: 0.45s; animation-timing-function: var(--ease-sortie); }
@keyframes vt-sortie { to { opacity: 0; } }
@keyframes vt-entree { from { opacity: 0; translate: 0 12px; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Retours d'Antoine du 8 octobre au soir ---------- */
/* « Où nous trouver » : la façade en entier, sans recadrage ni encart par-dessus. */
.bloc--entier .bloc__photo > img { aspect-ratio: auto; height: auto; object-fit: contain; animation: none; transform: none; }
.bloc--entier .panneau { margin: var(--e-4) 0 0; }
@media (min-width: 900px) {
  .bloc--entier .bloc__photo { grid-column: 1 / 13; grid-row: 1; }
  .bloc--entier .panneau { grid-column: 1 / 13; grid-row: 2; margin: var(--e-5) 0 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--e-8); align-items: start; }
  .bloc--entier .panneau > .titre { grid-column: 1 / -1; }
  .bloc--entier .panneau > p, .bloc--entier .panneau > .boutons { grid-column: 1; }
  .bloc--entier .panneau > .horaires { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; }
}
/* Le G de Google à côté de la note. */
.une__google { flex: none; width: 1.75rem; height: 1.75rem; padding: 0.28rem; border-radius: 50%; background: var(--blanc); box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); }
/* Avis : le nom sous les étoiles, avec une pastille à l'initiale. */
.avis__carte .avis__qui { display: flex; align-items: center; gap: var(--e-3); line-height: 1.2; }
.avis__qui small { display: block; margin-top: 0.15rem; font-weight: 400; font-size: 0.85rem; color: var(--noir); opacity: 0.75; }
.avis__photo { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--terre); color: var(--creme); font-weight: 700; font-size: 1.25rem; }
.avis__carte:nth-child(3n+2) .avis__photo { background: var(--vert-profond); }
.avis__carte:nth-child(3n) .avis__photo { background: var(--brule); }
/* Fournisseurs : le logo de chaque maison dans la liste. */
.morceau__nom { flex: 1; }
.morceau__logo { flex: none; width: auto; height: 1.9rem; max-width: 4.4rem; object-fit: contain; padding: 2px 5px; border-radius: 6px; background: var(--blanc); }
/* La photo de profil recouvre la pastille à l'initiale ; sans photo, la pastille reste. */
.avis__photo { position: relative; overflow: hidden; }
.avis__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Chaque carte à la taille de son avis (Antoine, 11 oct. 2026 : « adapte la taille des avis pour pas qu'il y ait trop de blanc
   et la photo en dessous du commentaire et cliquable »). La largeur suit la longueur du texte (--signes, posé par avis.py),
   la hauteur celle du contenu ; les cartes se rangent au milieu de la bande. */
.avis__piste { align-items: center; animation-duration: var(--duree-avis, 110s); }
.avis__carte { width: clamp(15rem, calc(3rem + var(--signes, 160) * 0.097rem), 30rem); max-width: 84vw; }
.avis__carte--photo { min-width: min(19rem, 84vw); }
.avis__carte blockquote { flex: none; }
/* La photo que le client a jointe à son avis : sous le commentaire, elle s'ouvre en grand au clic (site.js). */
.avis__image { flex: none; display: block; position: relative; height: 10rem; margin-top: var(--e-2); overflow: hidden; border-radius: 10px; cursor: zoom-in; }
.avis__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.4s var(--ease-douce, ease); }
.avis__image:hover img, .avis__image:focus-visible img { scale: 1.05; }
.avis__loupe { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.2rem 0.6rem; border-radius: 2rem; background: rgb(0 0 0 / 0.62); color: var(--blanc); font-size: 0.8rem; font-weight: 700; font-style: normal; }
/* La photo en grand, par-dessus la page. */
.agrandi { max-width: min(92vw, 70rem); max-height: 92vh; padding: 0; border: 0; border-radius: var(--rayon); background: var(--terre-nuit, #3a1408); color: var(--blanc); overflow: hidden; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.5); }
.agrandi::backdrop { background: rgb(20 8 3 / 0.82); }
.agrandi figure { margin: 0; display: flex; flex-direction: column; }
.agrandi img { display: block; max-width: 100%; max-height: calc(92vh - 3.2rem); width: auto; height: auto; margin: 0 auto; object-fit: contain; }
@media (min-width: 700px) { .agrandi img { min-height: min(60vh, 32rem); } }   /* la petite photo tient la place en attendant la grande */
.agrandi figcaption { padding: var(--e-3) 4.5rem var(--e-3) var(--e-4); font-size: 0.95rem; }
.agrandi__fermer { position: absolute; right: 0.6rem; bottom: 0.45rem; min-height: 2.2rem; padding: 0 var(--e-3); border: 2px solid var(--blanc); border-radius: 2rem; background: transparent; color: var(--blanc); font: 700 0.9rem var(--ff-texte); cursor: pointer; }
.agrandi__fermer:hover, .agrandi__fermer:focus-visible { background: var(--blanc); color: var(--noir); }
/* Les étoiles sous le nom du client (Antoine, 11 oct. 2026). */
.avis__qui .etoiles { display: block; margin-top: 0.15rem; font-size: 1rem; font-weight: 400; line-height: 1.1; }

/* ---------- Cookies : le choix du visiteur (js/cookies.js, 12 oct. 2026) ----------
   Un carton beige posé au-dessus de la barre d'appel, jamais dessus ni sur l'en-tête. « Tout refuser » et « Tout accepter »
   ont le même habit : refuser est aussi simple qu'accepter. */
.cookies {
  position: fixed; z-index: var(--z-cookies); left: var(--e-3); right: var(--e-3); bottom: calc(3.5rem + var(--e-3));
  max-height: calc(100dvh - var(--haut-entete) - 3.5rem - 2 * var(--e-3)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e-4); border: 2px solid var(--terre); border-radius: var(--rayon);
  background: var(--beige) url("../img/fond-bois-clair.webp") center / 1040px auto; color: var(--noir);
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.4); font-size: 1rem; line-height: 1.4;
}
.nav-ouverte .cookies { display: none; }
.cookies__titre { margin: 0 0 var(--e-1); font: 700 1.125rem/1.2 var(--ff-texte); color: var(--terre-nuit); }
.cookies__titre:focus { outline: none; }
.cookies__texte { margin: 0; }
.cookies a { color: var(--terre-nuit); font-weight: 700; }
.cookies__choix { display: grid; gap: var(--e-3); margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid rgb(92 30 12 / 0.3); }
.cookies__choix[hidden] { display: none; }
.cookies__usage { display: flex; gap: var(--e-3); align-items: flex-start; cursor: pointer; }
.cookies__usage input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--vert-contact); }
.cookies__usage strong { display: block; }
.cookies__boutons { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e-2); margin-top: var(--e-3); }
.cookies__btn {
  min-height: 2.75rem; padding: 0 var(--e-3); border: 2px solid var(--terre-nuit); border-radius: 6px;
  background: transparent; color: var(--terre-nuit); font: 700 1rem/1.2 var(--ff-texte); cursor: pointer;
}
.cookies__btn--plein { background: var(--terre-nuit); color: var(--blanc); }
.cookies__btn:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.cookies__btn:focus-visible, .cookies__usage input:focus-visible, .pied__cookies:focus-visible { outline: 3px solid var(--vert-contact); outline-offset: 2px; }
@media (min-width: 900px) {
  /* Sur ordinateur, à droite, au-dessus des deux boutons d'appel : le fil de lecture des pages est à gauche. */
  .cookies { left: auto; right: var(--e-5); bottom: calc(var(--e-5) + 3.5rem + var(--e-3)); width: 27rem; max-height: calc(100dvh - var(--haut-entete) - 3.5rem - 3 * var(--e-5)); }
}
.pied__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
/* Le plan Google Maps tant que le visiteur ne l'a pas accepté. */
.plan-google.attente .plan__repli { display: none; }
.plan__accord { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--e-3); padding: var(--e-5); text-align: center; color: var(--terre-nuit); }
.plan__accord p { margin: 0; max-width: 24rem; font-weight: 700; }
.plan__accord a { color: var(--terre-nuit); font-weight: 700; }