/* BREAK FOOD — vitrine. CONVERSION FIDÈLE de la maquette Claude Design (22/08/2026).
   Le corps HTML est celui de la maquette, tel quel. Trois choses seulement ont dû être
   traduites, parce qu'elles n'existent pas dans un navigateur :
   1. `style-hover="…"` (attribut propre au canvas Design) → vraies règles :hover, en bas.
   2. `<sc-for>` (boucles de gabarit) → déroulées avec les données de la maquette elle-même,
      extraites en exécutant son propre `menuData()` sous node — aucune retranscription.
   3. Les polices : la maquette les chargeait depuis fonts.googleapis.com. Servies ici
      depuis assets/ — une dépendance de moins et l'IP des visiteurs ne part pas chez Google. */
@font-face{font-family:Anton;src:url(assets/anton-400-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(assets/archivo-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
/* Garde-fou anti-débordement — sur body SEUL, jamais sur html : sur html il
   neutralise position:sticky, et l'en-tête de cette page est sticky (règle du dossier). */
/* 23/08 — Archivo était DÉCLARÉE (@font-face) mais jamais APPLIQUÉE : body n'avait
   aucune font-family, donc tout le texte courant sortait en Times sur iPhone et
   Safari. La maquette Design v2 posait bien `font:16px/1.6 "Archivo",…` sur body. */
body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;font:16px/1.6 "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}

/* ══ Carte de la vitrine — 23/08 : chaque plat porte SA PHOTO et devient un LIEN
   vers le module de commande, à sa catégorie. Un plat qui donne envie et sur lequel
   on ne peut pas cliquer, c'est une impasse. ══ */
.onglets-carte{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.dc-onglet{padding:.55rem 1.1rem;border-radius:999px;border:2px solid rgb(28 35 34 / 18%);
  background:transparent;color:#1c2322;font-weight:700;font-size:.95rem;cursor:pointer;
  font-family:inherit;transition:all .2s ease;min-height:44px}
.dc-onglet.actif{background:#f96140;border-color:#f96140;color:#fff}
.dc-plats{display:block}
.dc-pan{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.dc-pan[hidden]{display:none}
.dc-plat{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:0 2px 6px rgb(28 35 34 / 7%),0 10px 26px rgb(28 35 34 / 9%);
  transition:transform .18s ease,box-shadow .18s ease}
.dc-plat:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgb(28 35 34 / 10%),0 18px 40px rgb(28 35 34 / 16%)}
.dc-plat-img{display:block;background:#fff;aspect-ratio:1/1;overflow:hidden}
.dc-plat-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.dc-sans-photo{display:flex;align-items:center;justify-content:center;height:100%;font-size:2.4rem;opacity:.25}
.dc-plat-corps{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px}
.dc-plat-tete{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.dc-plat h3{margin:0;font-size:1.02rem;font-weight:800;color:#1c2322}
.dc-plat-prix{font-family:Anton,sans-serif;font-size:1.12rem;color:#f96140;white-space:nowrap}
.dc-plat-des{color:#4c5a58;font-size:.88rem;line-height:1.45}

/* Le logo garde son rapport : sans width:auto, l'attribut width du HTML l'écrase. */
header img,footer img{width:auto}

@keyframes bfMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bfPop{0%{opacity:0;transform:scale(.6) rotate(-14deg)}70%{transform:scale(1.05) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
@keyframes bfRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── survols traduits depuis style-hover ── */
.dch0:hover{background:rgba(255,255,255,.1);color:#f6f3ec}
.dch1:hover{background:rgba(255,255,255,.1);color:#f6f3ec}
.dch2:hover{background:rgba(255,255,255,.1);color:#f6f3ec}
.dch3:hover{background:#dd4a2b;color:#fff}
.dch4:hover{background:#dd4a2b;color:#fff;transform:translateY(-2px)}
.dch5:hover{border-color:#f6f3ec;color:#f6f3ec}
.dch6:hover{background:#dd4a2b;color:#fff}
.dch7:hover{background:#263032;color:#fff;transform:translateY(-3px)}
.dch8:hover{transform:scale(1.06)}
.dch9:hover{transform:scale(1.06)}
.dch10:hover{transform:scale(1.06)}
.dch11:hover{background:#dd4a2b;color:#fff}
/* Bouton « Laisser un avis Google » — sous les avis (demande du 23/08). */
.dch-avis:hover{background:#dd4a2b}

/* ══ Bas de page : les 4 informations qu on cherche vraiment — 23/08 ══
   Horaires, itinéraire, téléphone et mode de retrait étaient noyés dans des encadrés
   identiques. Chacun devient une carte cliquable quand ça a du sens (appeler, ouvrir
   l itinéraire), avec l état ouvert/fermé calculé en direct sur les horaires réels. */
.infos-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:22px}
.info-carte{display:flex;flex-direction:column;gap:3px;background:#fff;border-radius:18px;padding:22px;
  text-decoration:none;color:inherit;box-shadow:0 2px 6px rgb(28 35 34 / 7%),0 10px 26px rgb(28 35 34 / 9%);
  transition:transform .18s ease,box-shadow .18s ease}
a.info-carte:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgb(28 35 34 / 12%),0 18px 40px rgb(28 35 34 / 18%)}
.info-ico{font-size:1.6rem;line-height:1;margin-bottom:6px}
.info-lib{font-size:.76rem;text-transform:uppercase;letter-spacing:1.4px;font-weight:800;color:#f96140}
.info-val{font-size:1.06rem;color:#1c2322;line-height:1.3}
.info-sous{font-size:.86rem;color:#4c5a58}
#etat-ouvert.ouvert{color:#1d9e4b;font-weight:800}
#etat-ouvert.ferme{color:#c01824;font-weight:800}
.plan{border:0;width:100%;height:330px;border-radius:18px;filter:grayscale(.2)}

/* 23/08 — EN-TÊTE MOBILE : le lien du logo était un élément flex compressible ; dès
   que la nav remplit la largeur (375 px, police Archivo), le logo tombait à 4 px.
   Le logo ne rétrécit plus ; sous 480 px, « Avis » et « Infos » disparaissent
   (une page qu'on déroule), « La carte » et « Commander » restent. */
header > div > a:first-child{flex:0 0 auto}
header nav a{white-space:nowrap}
@media (max-width:480px){
  header nav a[href="#avis"],header nav a[href="#infos"]{display:none}
  header > div{gap:8px}
  header img{height:40px!important}
  header nav a{padding-left:.65rem!important;padding-right:.65rem!important}
  header nav a[href^="https://break-food-commande"]{padding-left:.95rem!important;padding-right:.95rem!important;margin-left:4px!important}
}

/* 23/08 — carte de fidélité : une colonne sous 620 px, QR plus petit */
@media (max-width:620px){
  .fid-carte{grid-template-columns:1fr!important;gap:18px!important}
  .fid-tuile img{width:140px!important;height:140px!important}
}