/* ============================================================
   Chez Berna — Finitions visuelles
   ------------------------------------------------------------
   Complète les tokens existants sans les remplacer. On travaille
   la profondeur, le rythme et les micro-interactions : l'identité
   (crème, vert cèdre, rouge, or) reste inchangée.
   ============================================================ */

:root {
  /* Ombres douces, teintées encre plutôt que noires */
  --shadow-xs:   0 1px 2px rgba(42, 33, 25, 0.06);
  --shadow-sm:   0 2px 8px -3px rgba(42, 33, 25, 0.16);
  --shadow-md:   0 10px 26px -16px rgba(42, 33, 25, 0.38);
  --shadow-lg:   0 26px 56px -30px rgba(42, 33, 25, 0.46);
  --shadow-gold: 0 14px 30px -18px rgba(166, 123, 37, 0.55);
  --shadow-accent: 0 14px 28px -14px rgba(168, 38, 44, 0.55);

  --ring-gold: 0 0 0 3px rgba(185, 139, 47, 0.28);
  --dur-fast: 150ms;
  --dur-med: 240ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ------------------------------------------------------------
   Accessibilité — lien d'évitement + focus visible
   ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--berna-green-900); color: var(--berna-cream-050);
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  text-decoration: none;
  transition: top var(--dur-med) var(--ease-out);
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--berna-gold-500);
  outline-offset: 3px;
}
/* Le focus au clic souris ne dessine rien : uniquement au clavier */
:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------
   En-tête — un léger relief apparaît au défilement
   ------------------------------------------------------------ */
.site-header {
  transition: box-shadow var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out);
}
.site-header[data-scrolled="1"] {
  box-shadow: 0 12px 28px -24px rgba(42, 33, 25, 0.65);
  background: rgba(247, 240, 222, 0.985) !important;
}

/* Liens de navigation : le soulignement doré s'installe en glissant */
.site-nav a {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (min-width: 901px) {
  .site-nav a { border-bottom-color: transparent !important; }
  .site-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
    height: 2px; border-radius: 2px; background: var(--accent-gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-med) var(--ease-out);
  }
  .site-nav a:hover::after { transform: scaleX(1); }
  .site-nav a[data-active="1"]::after { transform: scaleX(1); }
  .site-nav a:hover { color: var(--text-display); }
}

/* Logo : très léger agrandissement au survol */
.site-logo img { transition: transform var(--dur-med) var(--ease-out); }
.site-logo:hover img { transform: scale(1.04) rotate(-1.5deg); }

/* ------------------------------------------------------------
   Boutons — profondeur et retour au clic
   ------------------------------------------------------------ */
button, [role="button"] { -webkit-tap-highlight-color: transparent; }

button:not(:disabled) { transition: transform var(--dur-fast) var(--ease-out),
                                    box-shadow var(--dur-med) var(--ease-out),
                                    background var(--dur-fast) var(--ease-out),
                                    border-color var(--dur-fast) var(--ease-out); }
button:not(:disabled):hover  { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0); }
button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Bouton panier de l'en-tête — deux états distincts au survol :
   · panier vide (fond transparent)  → léger voile vert, texte vert foncé ;
   · panier rempli (fond vert cèdre) → vert un cran plus clair, le texte
     crème reste parfaitement lisible (l'ancien voile clair rendait
     « Panier » invisible au survol). */
.site-header button[aria-label="Ouvrir le panier"]:not([data-filled]):hover {
  background: rgba(29, 74, 44, 0.06) !important;
  box-shadow: var(--shadow-sm);
}
.site-header button[aria-label="Ouvrir le panier"][data-filled]:hover {
  background: var(--berna-green-700) !important;
  border-color: var(--berna-green-700) !important;
  box-shadow: var(--shadow-sm);
}
/* Pastille du panier : petite pulsation quand un article est ajouté */
@media (prefers-reduced-motion: no-preference) {
  .cart-badge-pop { animation: cartPop 420ms var(--ease-out); }
  @keyframes cartPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.32); }
    100% { transform: scale(1); }
  }
}

/* ------------------------------------------------------------
   Cartes de plats — l'élément le plus regardé du site
   ------------------------------------------------------------ */
.carte-item {
  transition: background var(--dur-fast) var(--ease-out);
  border-radius: 12px;
}
.carte-item:hover { background: rgba(185, 139, 47, 0.075); }

/* Le relief au survol est déjà animé par le composant React :
   on n'ajoute ici que ce qui manque — le zoom lent de la photo
   et un filet doré qui se révèle. */
[data-dish-card] { will-change: transform; }
[data-dish-media] { overflow: hidden; }
[data-dish-photo] { transition: transform 640ms var(--ease-out); }

@media (hover: hover) {
  [data-dish-card]:hover [data-dish-photo] { transform: scale(1.055); }
  [data-dish-card]:hover { border-color: var(--berna-line-gold-strong) !important; }
}

/* Plat épuisé : traitement visuel explicite */
[data-soldout] { position: relative; }
[data-soldout] [data-dish-photo],
[data-soldout] img { filter: grayscale(0.85) opacity(0.55); }

/* ------------------------------------------------------------
   Photos — chargement en fondu, jamais de « saut » de mise en page
   ------------------------------------------------------------ */
img { background-color: var(--berna-cream-200); }
img[data-fade] { opacity: 0; transition: opacity 420ms ease; }
img[data-fade][data-loaded="1"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  img[data-fade] { opacity: 1; transition: none; }
}

/* Image cassée : on affiche un cadre discret plutôt qu'une icône système */
img[data-broken="1"] {
  object-fit: contain;
  background:
    linear-gradient(135deg, rgba(185,139,47,0.10), rgba(29,74,44,0.06)),
    var(--berna-cream-200);
}

/* Note : pas d'ombre automatique sur les « surfaces en carte ». Appliquée
   sans distinction, elle atterrissait aussi sur des blocs du pied de page,
   sur fond vert foncé, où une ombre n'a aucun sens. Le relief est porté par
   les composants eux-mêmes.
   L'attribut data-surface reste posé par ux.js : il sert à reconnaître les
   fiches produit, pas à les styler. */

/* ------------------------------------------------------------
   Champs de formulaire
   ------------------------------------------------------------ */
input, select, textarea {
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--berna-gold-500) !important;
  box-shadow: var(--ring-gold);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--berna-ink-400); opacity: 0.75; }
input:invalid:not(:placeholder-shown) { border-color: var(--danger) !important; }

/* Correction Safari : les select gardent la flèche système */
select { -webkit-appearance: none; appearance: none; }

/* ------------------------------------------------------------
   Panier latéral — entrée en glissé
   ------------------------------------------------------------ */
.cart-drawer { box-shadow: var(--shadow-lg); }

/* ------------------------------------------------------------
   Barre de défilement discrète, aux couleurs de la marque
   ------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: rgba(185,139,47,0.45) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(185, 139, 47, 0.38);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(185, 139, 47, 0.62); background-clip: content-box; }

/* ------------------------------------------------------------
   Sélection de texte & liens
   ------------------------------------------------------------ */
::selection { background: rgba(217, 180, 92, 0.45); color: var(--berna-ink-900); }

a { text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent-gold); }

/* ------------------------------------------------------------
   Bandeau « fermé » — plus lisible
   ------------------------------------------------------------ */
[data-closed-banner] {
  border-bottom: 1px solid rgba(185, 139, 47, 0.35);
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   Révélation des sections au défilement
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .berna-reveal { animation: bernaReveal 560ms var(--ease-out) backwards; }
  @keyframes bernaReveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes skeletonSlide { from { background-position: 100% 0; } to { background-position: 0 0; } }
}

/* ------------------------------------------------------------
   Panel admin — lisibilité des tableaux et des onglets
   ------------------------------------------------------------ */
.panel-main tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.panel-main tbody tr:hover { background: rgba(185, 139, 47, 0.07); }
.panel-topbar { box-shadow: var(--shadow-xs); }
.panel-shell > aside { box-shadow: 2px 0 18px -14px rgba(0, 0, 0, 0.55); }

/* ------------------------------------------------------------
   Confort tactile — toute cible cliquable fait au moins 44 px
   ------------------------------------------------------------ */
@media (pointer: coarse) {
  button, a[role="button"], [data-touch] { min-height: 44px; }
  /* Sélecteur de quantité : la pastille suit la hauteur tactile de ses
     boutons. Sans cela, les boutons « − » et « + » (44 px) débordaient d'une
     pastille de 34 px et leurs glyphes se retrouvaient poussés vers le bas,
     à moitié rognés. La cible tactile reste conforme. */
  [data-stepper] { height: 44px !important; }
  [data-stepper] > button { min-height: 0 !important; height: 100% !important; }
  [data-stepper="sm"] > button { width: 42px !important; }
}

/* ------------------------------------------------------------
   Cohérence typographique
   ------------------------------------------------------------ */
/* Le Cormorant respire mieux légèrement resserré en grands corps */
main h1, main h2 { letter-spacing: -0.012em; }
main h3 { letter-spacing: -0.006em; }

/* Chiffres tabulaires pour les prix et totaux : les colonnes de
   montants s'alignent au lieu de danser d'une ligne à l'autre */
td, [data-price], .panel-main b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Liens du pied de page — retour visuel doré
   ------------------------------------------------------------ */
footer a { transition: color var(--dur-fast) var(--ease-out),
                       border-color var(--dur-fast) var(--ease-out); }
footer a:hover { color: var(--berna-gold-300) !important;
                 border-color: var(--berna-gold-300) !important; }

/* ------------------------------------------------------------
   Séparateurs par défaut, aux couleurs de la marque
   ------------------------------------------------------------ */
hr { border: none; border-top: 1px solid var(--berna-line-gold); }

/* ------------------------------------------------------------
   Bandeau de fermeture : petite pulsation du repère temporel
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  [data-closed-banner] { animation: none; }
}

/* ------------------------------------------------------------
   Onglets de la carte : l'onglet actif se distingue mieux
   (le style de base vient du composant ; on renforce le contraste)
   ------------------------------------------------------------ */
/* (v27 : la transition complète vit désormais sur .carte-tab, plus bas) */

/* ------------------------------------------------------------
   Vignettes des plats (page carte) — la photo répond au survol
   de la ligne : léger agrandissement, arche dorée qui s'affirme.
   ------------------------------------------------------------ */
.carte-item img {
  transition: transform 480ms var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  .carte-item:hover img {
    transform: scale(1.05);
    border-color: var(--berna-line-gold-strong);
    box-shadow: var(--shadow-sm);
  }
}

/* ------------------------------------------------------------
   Panneau panier de la carte — un liseré doré discret en tête,
   signature de la marque, sans surcharge.
   ------------------------------------------------------------ */
.carte-cart > div {
  position: relative;
  overflow: hidden;
}
.carte-cart > div::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent, var(--accent-gold) 30%, var(--accent-gold) 70%, transparent);
  opacity: 0.75;
}

/* Le total du panneau respire comme un prix de menu */
.carte-cart [data-price] { letter-spacing: -0.01em; }

/* ------------------------------------------------------------
   Onglet actif de la carte : petite ombre portée, il « tient »
   la rangée au lieu de se fondre dedans.
   ------------------------------------------------------------ */
.carte-tabs button { flex: none; }

/* ------------------------------------------------------------
   Accueil — largeur de lecture maîtrisée
   Sur un grand écran, les sections s'étiraient d'un bord à
   l'autre : lignes d'avis interminables, cartes géantes. Le
   contenu est maintenant contenu (le bandeau vert TrustStrip,
   lui, reste volontairement pleine largeur : c'est un ruban).
   ------------------------------------------------------------ */
main[data-screen-label="Accueil"] > section {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.hero-grid {
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   Avis clients — la carte répond au survol
   ------------------------------------------------------------ */
main figure {
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  main figure:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
}

/* ------------------------------------------------------------
   Bande photos d'ambiance — même respiration que les plats
   ------------------------------------------------------------ */
[aria-label="L'ambiance Chez Berna"] img {
  transition: transform 520ms var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  [aria-label="L'ambiance Chez Berna"] img:hover {
    transform: scale(1.025);
    box-shadow: var(--shadow-sm);
  }
}

/* ------------------------------------------------------------
   Interface générale — derniers réglages transversaux
   ------------------------------------------------------------ */
/* Le logo de l'en-tête est rond dans un carré : on l'assume */
.site-logo img { border-radius: 50%; }

/* Onglets de connexion : transition douce du soulignement */
.auth-card button { transition: color var(--dur-fast) var(--ease-out),
                                border-color var(--dur-fast) var(--ease-out); }

/* Les médaillons numérotés des étapes se remplissent au survol du bloc —
   chiffre CRÈME sur or : lisible partout, quel que soit le rendu. */
.home-etapes > button > span[aria-hidden] {
  background: var(--surface-card, #FCF7EA);
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  .home-etapes > button:hover > span[aria-hidden] {
    background: var(--accent-gold);
    color: var(--berna-cream-050, #FCF7EA);
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-etapes > button:hover > span[aria-hidden] { transform: none; }
}

/* ============================================================
   ✦ POLISH 2026 — profondeur, verre, rythme
   ------------------------------------------------------------
   Passe de modernisation transversale : contenu contenu et
   centré, espacement identique entre les sections, en-tête en
   verre dépoli, reliefs superposés, micro-détails.
   L'identité (crème · cèdre · rouge · or) reste inchangée.
   ============================================================ */

:root {
  --shell-max: 1240px;
  --band-max: 1180px;
  --rhythm: clamp(52px, 6.5vw, 88px);
  --shadow-float: 0 1px 2px rgba(42,33,25,.05),
                  0 8px 18px -10px rgba(42,33,25,.18),
                  0 28px 60px -34px rgba(42,33,25,.35);
  --shadow-press: inset 0 1px 0 rgba(255,255,255,.35),
                  0 1px 2px rgba(42,33,25,.10);
}

/* ------------------------------------------------------------
   Fond de scène — papier chaud, halos très discrets
   ------------------------------------------------------------ */
body {
  background:
    radial-gradient(1100px 520px at 85% -140px, rgba(217,180,92,.16), transparent 60%),
    radial-gradient(900px 480px at -180px 30%, rgba(29,74,44,.07), transparent 55%),
    var(--berna-cream-100, #F7F0DE);
}

/* ------------------------------------------------------------
   En-tête en verre dépoli — flotte au-dessus du contenu
   ------------------------------------------------------------ */
.site-header {
  background: rgba(250, 244, 229, .82) !important;
  -webkit-backdrop-filter: saturate(1.35) blur(14px);
  backdrop-filter: saturate(1.35) blur(14px);
  border-bottom: 1px solid rgba(185, 139, 47, .22) !important;
}
.site-header[data-scrolled="1"] {
  background: rgba(250, 244, 229, .92) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 18px 40px -30px rgba(42,33,25,.55);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(250, 244, 229, .97) !important; }
}

/* ------------------------------------------------------------
   Largeur maîtrisée & rythme identique entre les sections
   ------------------------------------------------------------ */
main[data-screen-label] > section,
main[data-screen-label] > div[data-pad] {
  max-width: var(--shell-max);
  margin-left: auto;
  margin-right: auto;
}
main[data-screen-label="Accueil"] > section {
  padding-top: calc(var(--rhythm) / 2) !important;
  padding-bottom: calc(var(--rhythm) / 2) !important;
}
main[data-screen-label="Accueil"] > section:first-of-type {
  padding-top: clamp(28px, 4vw, 48px) !important;
}
/* Les grands bandeaux (gazette, mezzés, devis) deviennent des
   cartes majestueuses, jamais collées aux bords de l'écran */
main [style*="surface-inverse"] {
  max-width: var(--band-max);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ------------------------------------------------------------
   Profondeur unifiée des cartes — flottement doux au survol
   ------------------------------------------------------------ */
[data-surface="card"]:not([data-pad="footer"] *) {
  box-shadow: var(--shadow-float);
  border: 1px solid rgba(185, 139, 47, .18);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  [data-surface="card"]:not([data-pad="footer"] *):hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 3px rgba(42,33,25,.06),
                0 14px 30px -14px rgba(42,33,25,.26),
                0 44px 90px -48px rgba(42,33,25,.42);
  }
}

/* ------------------------------------------------------------
   Boutons pleins — mat et net (v40) : le vernis dégradé
   blanc→noir est retiré, la profondeur vient des ombres du
   composant Button lui-même.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Champs — surfaces nacrées, halo doré au focus
   ------------------------------------------------------------ */
input, select, textarea {
  box-shadow: inset 0 1px 2px rgba(42,33,25,.06);
}
input:focus, select:focus, textarea:focus {
  box-shadow: inset 0 1px 2px rgba(42,33,25,.04), var(--ring-gold);
}
/* Champ de la gazette : lisible sur le vert profond */
input[placeholder="vous@email.fr"] {
  background: rgba(252, 247, 234, .96) !important;
  border: 1px solid rgba(217, 180, 92, .55) !important;
  color: var(--berna-ink-900) !important;
  min-height: 50px;
}
input[placeholder="vous@email.fr"]:focus {
  box-shadow: 0 0 0 4px rgba(217, 180, 92, .30);
}

/* ------------------------------------------------------------
   Avis clients — guillemet en filigrane, carte plus racée
   ------------------------------------------------------------ */
main figure {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(185, 139, 47, .2);
  box-shadow: var(--shadow-float);
}
main figure::after {
  content: "”";
  position: absolute;
  right: 14px; top: -26px;
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 1;
  color: rgba(185, 139, 47, .14);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Carte des plats — panier collant, lignes aérées
   ------------------------------------------------------------ */
.carte-cart { position: sticky; top: calc(var(--berna-header-h, 91px) + var(--carte-tabs-h, 66px) + 12px); align-self: start; }
.carte-items { align-items: start; }
.carte-item { align-items: flex-start; }

/* ------------------------------------------------------------
   Compte client — deux colonnes calées en haut, historique collant
   ------------------------------------------------------------ */
main[data-screen-label="Compte client"] [data-cols="2"] { align-items: start; }
@media (min-width: 1024px) {
  main[data-screen-label="Compte client"] [data-cols="2"] > :last-child {
    position: sticky;
    top: 104px;
  }
}

/* ------------------------------------------------------------
   Pied de page — la ligne du bas ne déborde jamais
   ------------------------------------------------------------ */
[data-footer-bottom] { flex-wrap: wrap; gap: 10px 22px; }

/* ------------------------------------------------------------
   Titres de section — le trait d'accroche respire en dégradé
   ------------------------------------------------------------ */
.berna-eyebrow { letter-spacing: .06em; } /* casse normale : interlettrage réduit (15/09/2026) */

/* ------------------------------------------------------------
   Apparition des sections : léger voile + montée feutrée
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .berna-reveal { animation: bernaReveal 640ms var(--ease-out) backwards; }
}

/* ============================================================
   ✦ CORRECTIONS v10.1 — retours captures du 7 août 14h20
   ============================================================ */

/* 1) Avis clients : le guillemet en filigrane rendait une tache
      grise coupée en haut des cartes → supprimé. Le relief reste. */
main figure::after { content: none; }

/* 2) Ruban de réassurance : ni pleine largeur ni rectangle brut —
      il devient une vraie bande arrondie, cohérente avec la gazette. */
main[data-screen-label="Accueil"] > div[style*="surface-inverse"] {
  max-width: var(--band-max);
  margin: 6px auto !important;
  border-radius: 20px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

/* 3) En-tête : un peu moins transparent — les cartes qui défilent
      dessous ne laissent plus de traînées fantômes dans le verre. */
.site-header { background: rgba(250, 244, 229, .93) !important; }
.site-header[data-scrolled="1"] { background: rgba(250, 244, 229, .97) !important; }

/* 4) Pied de page : la ligne du bas (© / Halal · CB…) ne touche
      plus jamais le bord droit, quel que soit l'écran. */
[data-footer-bottom] { padding-right: clamp(4px, 1vw, 12px); }
[data-footer-bottom] > * { min-width: 0; white-space: normal; text-align: right; }
[data-footer-bottom] > :first-child { text-align: left; }

/* 5) Tout bloc interne à largeur fixe se centre dans sa section
      (FAQ, listes…) — fini les colonnes décalées vers un côté. */
main[data-screen-label="Accueil"] > section > div[style*="max-width"] {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   ✦ CORRECTIONS v10.2 — retours captures du 7 août 14h28
   ============================================================ */

/* 1) Le fond crème anti-flash ne s'applique qu'aux photos JPG :
      sur un PNG transparent (logo), il dessinait un carré crème
      visible sur les fonds verts. */
img[src$=".png"], footer img { background: transparent !important; }

/* 2) Logo du pied de page : parfaitement rond, comme en en-tête. */
footer img { border-radius: 50%; }

/* 3) Sécurité chevauchement : un badge ne recouvre jamais un texte. */
.carte-item [style*="inline-flex"] > span { overflow-wrap: break-word; }

/* ✦ v10.3 — la carte respire comme un vrai menu : un plat par ligne,
   séparés par un fin filet doré. */
.carte-items > .carte-item + .carte-item {
  border-top: 1px solid rgba(185, 139, 47, .16);
  border-radius: 0 0 16px 16px;
}
.carte-item:hover { border-radius: 16px; }

/* ============================================================
   ✦ v10.4 — l'en-tête se fond dans la page
   Sa teinte était un crème plus blanc que le fond : couture
   visible sous la barre. Même crème que la page + halo doré
   remonté hors de la zone → transition invisible.
   ============================================================ */
.site-header { background: rgba(247, 240, 222, .90) !important; }
.site-header[data-scrolled="1"] { background: rgba(247, 240, 222, .96) !important; }
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(247, 240, 222, .98) !important; }
}
body {
  background:
    radial-gradient(1200px 560px at 88% -280px, rgba(217, 180, 92, .11), transparent 62%),
    radial-gradient(900px 480px at -200px 36%, rgba(29, 74, 44, .05), transparent 55%),
    var(--berna-cream-100, #F7F0DE);
}

/* ============================================================
   ✦ v15 — le panel respire : survols, entrées animées, finesse
   ============================================================ */
.p-card {
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.p-card:hover {
  box-shadow: 0 16px 34px -24px rgba(31, 26, 18, .32);
}
.stat-card {
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -24px rgba(31, 26, 18, .35);
}
.berna-overlay { animation: berna-overlay-in .22s ease both; }
@keyframes berna-overlay-in { from { opacity: 0; } }
.berna-dialog { animation: berna-dialog-in .28s var(--ease-out) both; }
@keyframes berna-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}
/* Barres de défilement discrètes dans le panel */
.panel-shell ::-webkit-scrollbar { width: 10px; height: 10px; }
.panel-shell ::-webkit-scrollbar-thumb {
  background: rgba(185, 139, 47, .35);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.panel-shell ::-webkit-scrollbar-thumb:hover { background-color: rgba(185, 139, 47, .55); }
.panel-shell ::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .berna-dialog, .berna-overlay { animation: none; }
  .stat-card:hover { transform: none; }
}

/* ============================================================
   ✦ v16 — la vitrine prend vie
   Révélations au défilement, photos animées, matière du papier,
   micro-tactilité — le tout dégradable sans JavaScript.
   ============================================================ */

/* — Révélation des sections (armée par ux.js via html.ux-anim) — */
html.ux-anim main[data-screen-label] > section,
html.ux-anim main[data-screen-label] > div {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  will-change: opacity, transform;
}
html.ux-anim main[data-screen-label] > .is-in {
  opacity: 1;
  transform: none;
}

/* — Les photos respirent dans leur cadre au survol — */
main article > img,
.carte-item > img {
  transition: transform .7s var(--ease-out);
}
main article:hover > img,
.carte-item:hover > img {
  transform: scale(1.045);
}

/* — Grain de papier imperceptible sur tout le fond — */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(31, 26, 18, .028) 1px, transparent 1.4px),
    radial-gradient(rgba(185, 139, 47, .02) 1px, transparent 1.4px);
  background-size: 26px 26px, 42px 42px;
  background-position: 0 0, 13px 21px;
}
body > * { position: relative; z-index: 1; }

/* — Micro-tactilité & confort — */
:where(button):active { transform: translateY(1px); }
::selection { background: rgba(185, 139, 47, .28); color: var(--berna-ink-900, #1F1A12); }
:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  /* (v29.1 : plus de border-radius forcé — le contour épouse déjà la
     forme de l'élément, et 4px déformait pastilles et champs.) */
}
html { scroll-behavior: smooth; }

/* — Barres de défilement fines et dorées, partout — */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(185, 139, 47, .35);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(185, 139, 47, .55); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.ux-anim main[data-screen-label] > section,
  html.ux-anim main[data-screen-label] > div {
    opacity: 1; transform: none; transition: none;
  }
  main article > img, .carte-item > img { transition: none; }
  main article:hover > img, .carte-item:hover > img { transform: none; }
}

/* ✦ v18 — la bande de photos respire au survol, comme les cartes */
.gallery-img { transition: transform .7s var(--ease-out), box-shadow .5s var(--ease-out); }
.gallery-img:hover { transform: scale(1.035); box-shadow: 0 26px 50px -30px rgba(31, 26, 18, .5); }
@media (prefers-reduced-motion: reduce) {
  .gallery-img { transition: none; }
  .gallery-img:hover { transform: none; }
}

/* ============================================================
   ✦ v24.1 — RESPONSIVE : le site s'empile proprement en mobile
   ============================================================ */
@media (max-width: 820px) {
  /* Toute grille à colonnes fixes du CONTENU passe en une colonne.
     minmax(0, 1fr) et non 1fr : une piste « 1fr » refuse de descendre
     sous la largeur intrinsèque de son contenu (l'<input type=date>
     d'iOS, par exemple) et fait alors déborder la grille de sa carte. */
  main [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Respiration latérale raisonnable */
  main > section, main > div { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="margin: 40px 56px"] { margin-left: 14px !important; margin-right: 14px !important; }

  /* Étapes : séparateurs horizontaux au lieu de verticaux */
  .home-etapes > button { border-left: none !important; border-top: 1px solid var(--berna-line-gold); }
  .home-etapes > button:first-child { border-top: none; }

  /* Photos : hauteurs adaptées à l'empilement */
  img[style*="height: 340px"] { height: 240px !important; }
  img[style*="height: 540px"] { height: 380px !important; }
  img[style*="height: 300px"] { height: 220px !important; }

  /* En-tête : panier compact, badge bien calé */
  .site-header button[aria-label="Ouvrir le panier"] { padding: 9px 12px !important; gap: 0 !important; }
  .site-header { padding-left: 14px !important; padding-right: 14px !important; }
}

/* FAQ : la question et le « + » restent sur la même ligne, quoi qu'il arrive */
main section details > summary {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
main section details > summary > *:last-child { flex: none; }
main section details > summary > *:first-child { flex: 1; min-width: 0; }

/* ============================================================
   ✦ v25.3 — MOBILE : en-tête panier, pastilles, espacements
   ============================================================ */
@media (max-width: 820px) {
  /* Panier : vrai bouton rond, icône sac, compteur en badge d'angle */
  .site-header button[aria-label="Ouvrir le panier"] {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1.5px solid var(--berna-gold-500) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B98B2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1.1 12H7.1L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 21px 21px !important;
  }
  .site-header button[aria-label="Ouvrir le panier"] > span:last-child {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 11.5px !important;
    box-shadow: 0 0 0 2px var(--berna-cream-100, #F6F0DD);
  }

  /* La barre « Voir le panier » ne recouvre plus la fin de page */
  main { padding-bottom: 96px !important; }

  /* Groupe de droite de l'en-tête : respiration régulière */
  .site-header > div:last-child, .site-header nav { gap: 10px !important; }
}

/* Pastilles et éléments décalés en négatif : ramenés dans l'écran.
   ≤900 (et plus seulement ≤820) : couvre aussi les petites tablettes
   en portrait où la pastille du héros sortait encore de l'écran. */
@media (max-width: 900px) {
  main [style*="left: -"]  { left: 10px !important; }
  main [style*="right: -"] { right: 10px !important; }
  main [style*="left: -"] > div, main [style*="right: -"] > div { transform: scale(.9); }
}

/* ============================================================
   ✦ v25.5 — Tranche tablette assouplie
   ============================================================ */
/* Tablette : les grilles à colonne fixe (460px, 360px, panneau 330px)
   s'empilent dès 1024px au lieu d'attendre 820px */
@media (max-width: 1024px) {
  [style*="grid-template-columns: 460px"],
  [style*="grid-template-columns: 360px"],
  [style*="grid-template-columns: minmax(0, 1fr) 330px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ✦ v25.6 — RESPONSIVE COMPLET : blocs verts centrés à toutes
   les tailles + garde-fous systématiques par palier
   ============================================================ */

/* --- Typo d'affichage fluide : les titres ne débordent jamais --- */
@media (max-width: 1024px) {
  :root { --text-display-xl: clamp(36px, 5vw, 52px); --text-display-lg: clamp(28px, 4vw, 38px); --text-display-md: clamp(22px, 3.4vw, 30px); }
}
@media (max-width: 600px) {
  :root { --text-display-xl: clamp(30px, 8.5vw, 38px); --text-display-lg: clamp(24px, 7vw, 30px); --text-display-md: clamp(20px, 6vw, 25px); }
}

/* --- Anti-débordement horizontal : plus rien ne dépasse l'écran --- */
@media (max-width: 1024px) {
  /* clip (et non hidden) + body seulement : « hidden » sur <html> crée un
     conteneur de défilement qui peut casser position:sticky (en-tête, onglets). */
  body { overflow-x: clip; }
  img, svg, video { max-width: 100%; }
}

/* --- Les rangées flexibles du contenu replient au lieu de compresser --- */
@media (max-width: 820px) {
  main [style*="display: flex"][style*="gap"] { flex-wrap: wrap; }
}

/* --- Dialogs : jamais plus larges que l'écran ---
   ⚠ L'ancienne version ciblait [style*="width: 560px"] : ce sélecteur
   « contient » attrapait AUSSI « max-width: 560px » (paragraphes de
   l'accueil), qui se retrouvaient forcés à 100vw-28px → défilement
   horizontal sur mobile. On cible désormais la classe du composant. */
@media (max-width: 720px) {
  .berna-overlay { padding: 14px !important; }
  .berna-dialog { width: 100% !important; }
}

/* --- Très petits écrans : respiration resserrée --- */
@media (max-width: 400px) {
  main > section, main > div { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ============================================================
   ✦ v25.7 — GABARIT CENTRAL : tout le contenu est centré avec
   une gouttière garantie, à toutes les tailles. Aucun bloc ne
   peut plus toucher les bords — par construction.
   ============================================================ */
:root {
  --page-max: 1280px;
  --page-gutter: clamp(16px, 4vw, 56px);
}

/* Chaque bloc de premier niveau : centré, borné, gouttières assurées */
main > * {
  width: min(100% - (2 * var(--page-gutter)), var(--page-max)) !important;
  max-width: var(--page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Les gros paddings latéraux internes (56px) deviennent raisonnables :
   la gouttière extérieure fait déjà le travail */
main > section, main > div {
  padding-left: clamp(16px, 2.5vw, 34px) !important;
  padding-right: clamp(16px, 2.5vw, 34px) !important;
}

/* Couches flottantes (tiroir panier, toasts, overlays) : hors gabarit */
main > [style*="position: fixed"],
main > [style*="position:fixed"],
main > [style*="position: absolute"] {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ============================================================
   ✦ v27 — RAIL D'ONGLETS DE LA CARTE (redesign)
   ------------------------------------------------------------
   Bandeau collant opaque calé sous l'en-tête (top =
   --berna-header-h, mesurée par ux.js) ; à l'intérieur, un rail
   de pastilles : centré et multi-lignes sur grand écran, une
   seule ligne défilante avec fondu sur les bords en mobile.
   ============================================================ */
.carte-tabs {
  position: sticky;              /* top : voir responsive.css (--berna-header-h) */
  z-index: 30;
  margin: 24px 0 34px;
  padding: 12px 0 14px;
  background: var(--surface-page, #F7F0DE);
  border-bottom: 1px solid var(--berna-line-gold);
  box-shadow: 0 16px 20px -20px rgba(31, 26, 18, 0.4);
}
.carte-tabs-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 4px 24px 6px;
  scroll-padding-inline: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.carte-tabs-rail::-webkit-scrollbar { display: none; }
/* Centré quand tout tient, aligné à gauche (et défilable) sinon —
   l'astuce des marges auto, compatible partout, sans « safe center ». */
.carte-tabs-rail > .carte-tab:first-child { margin-left: auto; }
.carte-tabs-rail > .carte-tab:last-child { margin-right: auto; }
.carte-tab { flex: none; scroll-snap-align: center; }
.carte-tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--berna-line-gold-strong);
  background: var(--berna-cream-050, #FBF7EA);
  color: var(--berna-ink-600);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.carte-tab:hover { border-color: var(--berna-green-700); color: var(--berna-green-900); transform: translateY(-1px); }
.carte-tab:active { transform: translateY(0); }
.carte-tab:focus-visible { outline: 2px solid var(--berna-gold-500); outline-offset: 3px; }
.carte-tab.is-active {
  background: var(--berna-green-900);
  border-color: var(--berna-green-900);
  color: var(--text-display-on-inverse);
  box-shadow: 0 12px 22px -14px rgba(19, 46, 32, 0.65);
}
@media (max-width: 900px) {
  .carte-tabs { margin: 16px 0 24px; padding: 10px 0 12px; }
  .carte-tabs-rail { padding: 4px 20px 6px; scroll-padding-inline: 20px; }
}

/* ============================================================
   ✦ v27 — LA GAZETTE EN CARTE POSTALE
   ------------------------------------------------------------
   Fini le pavé vert au-dessus du pied de page vert : la
   newsletter devient une carte crème au liseré pointillé doré,
   scellée d'un petit cachet. Formulaire empilé en mobile.
   ============================================================ */
.gazette-card {
  position: relative;
  background: var(--surface-card, #FFFDF4);
  border: 1px solid var(--berna-line-gold-strong);
  border-radius: var(--radius-lg);
  padding: 38px 44px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
  align-items: center;
  box-shadow: var(--shadow-soft);
}
.gazette-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1.5px dashed rgba(185, 139, 47, 0.45);
  border-radius: calc(var(--radius-lg, 24px) - 7px);
  pointer-events: none;
}
.gazette-card::after {
  content: '✦';
  position: absolute;
  top: 26px;
  right: 30px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--berna-green-900);
  color: var(--berna-gold-300);
  border-radius: 10px;
  font-size: 15px;
  transform: rotate(6deg);
  box-shadow: 0 10px 18px -12px rgba(19, 46, 32, 0.6);
  pointer-events: none;
}
.gazette-body, .gazette-form, .gazette-ok { position: relative; }
.gazette-title { color: var(--text-display); }
.gazette-title em { color: var(--accent); font-style: italic; }
.gazette-text { color: var(--berna-ink-500); max-width: 46ch; }
.gazette-ok {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--berna-green-700);
  margin: 0;
  text-align: center;
}
.gazette-form { display: flex; gap: 10px; align-items: center; }
.gazette-input {
  flex: 1;
  min-width: 0;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--berna-line-gold-strong);
  background: #FFFDF4;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.gazette-input:focus {
  border-color: var(--berna-gold-500);
  box-shadow: 0 0 0 3px rgba(185, 139, 47, 0.18);
}
@media (max-width: 900px) {
  .gazette-card { grid-template-columns: 1fr; gap: 18px; padding: 28px 20px 24px; text-align: center; }
  .gazette-eyebrow::before, .gazette-eyebrow::after { display: none; }
  .gazette-card::after { top: 22px; right: 24px; width: 32px; height: 32px; font-size: 13px; }
  .gazette-text { margin-left: auto !important; margin-right: auto !important; }
  .gazette-form { flex-direction: column; align-items: stretch; }
  .gazette-form > * { width: 100%; }
}

/* ============================================================
   ✦ v27 — PANNEAU DEVIS (traiteur) recomposé
   ------------------------------------------------------------
   Grand écran : panneau vert profond, cadre doré intérieur,
   intro à gauche / formulaire crème à droite. Mobile : plus de
   « cadre » vert autour du formulaire — deux cartes empilées,
   l'intro verte puis le formulaire crème pleine largeur.
   ============================================================ */
.devis-panel {
  position: relative;
  background: var(--surface-inverse);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  padding-top: 44px;
  padding-bottom: 44px;
}
.devis-panel::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 180, 92, 0.35);
  border-radius: calc(var(--radius-lg, 24px) - 8px);
  pointer-events: none;
}
.devis-intro, .devis-form-card { position: relative; }
.devis-form-card {
  background: var(--surface-paper);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 26px 46px -32px rgba(0, 0, 0, 0.55);
}
@media (max-width: 900px) {
  .devis-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: transparent;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .devis-panel::before { display: none; }
  .devis-intro {
    background: var(--surface-inverse);
    border-radius: var(--radius-lg);
    padding: 28px 22px 26px;
    box-shadow: var(--shadow-soft);
  }
  .devis-form-card {
    border: 1px solid var(--berna-line-gold-strong);
    border-radius: var(--radius-lg);
    padding: 22px 18px;
    box-shadow: var(--shadow-soft);
  }
}

/* Le « + » des questions fréquentes reste collé à sa question,
   même quand elle tient sur deux lignes : la question est un vrai
   enfant flex (span.faq-q) qui rétrécit, et la rangée ne replie pas. */
main details > summary, main details > summary[data-flexrow] { flex-wrap: nowrap !important; }
main details > summary .faq-q { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   ✦ v28.1 — Les rangées de boutons replient au lieu de s'écraser
   ------------------------------------------------------------
   Entre ~1025 et ~1175px, la colonne de droite des « Plateaux »
   devenait trop étroite : le bouton doré (white-space: nowrap)
   rétrécissait sous son libellé — autorisé par le min-width: 0
   générique — et son texte filait sous « Voir dans la carte ».
   Un bouton ne doit jamais être plus étroit que son libellé :
   il ne rétrécit plus, et la rangée passe à la ligne au besoin,
   à TOUTES les largeurs (pas seulement en mobile).
   ============================================================ */
/* Uniquement les rangées DE BOUTONS (:has) : les rangées icône+texte
   (étapes numérotées, eyebrows…) gardent leur mise en page côte à côte. */
main [data-flexrow]:has(> button:first-child) { flex-wrap: wrap; }
main [data-flexrow] > button { flex-shrink: 0; max-width: 100%; }

/* ============================================================
   ✦ v28.2 — Chiffres des étapes bien centrés dans leur cercle
   ------------------------------------------------------------
   Cormorant Garamond utilise par défaut des chiffres elzéviriens
   (« à l'ancienne ») : le 1 est haut comme un i, le 3 descend
   sous la ligne — d'où des numéros qui semblaient décentrés.
   On force les chiffres alignés (lnum) et une ligne à 1.
   ============================================================ */
.step-num {
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1, 'onum' 0;
  line-height: 1;
  padding: 0;
  background: var(--surface-paper);
  color: var(--accent-gold-text);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------
   Page Traiteur — finitions v46
   · un filet doré en pointillés relie les trois étapes (ordinateur) ;
     les pastilles numérotées, sur fond papier, se posent dessus.
   · les cartes de formules prennent un léger relief au survol. */
.traiteur-etapes { position: relative; }
.traiteur-etapes > div { position: relative; }
@media (min-width: 821px) {
  .traiteur-etapes::before {
    content: '';
    position: absolute;
    left: 16.5%;
    right: 16.5%;
    top: 31px;                       /* centre des pastilles de 62 px */
    border-top: 1px dashed var(--berna-line-gold-strong);
  }
}
@media (hover: hover) {
  .formule-card:hover {
    transform: translateY(-3px);
    border-color: var(--berna-line-gold-strong);
    box-shadow: var(--shadow-soft);
  }
}

/* ============================================================
   ✦ v38 — LA CARTE PLEINE LARGEUR + MENU COMPLET
   ------------------------------------------------------------
   1) La page récupère la largeur perdue : le <main> n'a plus de
      padding latéral (le gabarit central « main > * » garantit
      déjà les gouttières), et la grille n'est plus re-paddée —
      trois couches de marges s'empilaient (56 + 56 + 34 px) et
      la colonne des plats tombait à ~618 px sur un écran 1440.
   2) Toutes les catégories sont affichées d'un bloc : les
      onglets sont des ancres ; chaque section se cale sous les
      deux barres collantes (en-tête + onglets).
   3) Le panier latéral se colle SOUS la barre d'onglets
      (voir .carte-cart, plus haut).
   ============================================================ */
main[data-screen-label="La carte"] > .carte-layout {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.carte-cats { min-width: 0; }
.carte-cats > section {
  scroll-margin-top: calc(var(--berna-header-h, 91px) + var(--carte-tabs-h, 66px) + 12px);
}

/* Rangées « nom ……… prix » : le prix ne passe JAMAIS à la ligne.
   La règle générique de repli des flex (≤ 820 px) attrapait aussi
   ces rangées : selon la longueur du nom, le prix tombait sous les
   pointillés sur certaines lignes et pas d'autres. Le nom, lui,
   garde le droit de se replier sur deux lignes. */
main [style*="display: flex"][style*="gap"]:has(> span[aria-hidden][style*="border-bottom"]) {
  flex-wrap: nowrap !important;
}

/* v38 — Onglets : sur grand écran, le rail passe à la ligne si la
   carte gagne des catégories (l'intention v27, jamais câblée) ;
   le défilement + fondu restent le comportement mobile/tablette. */
@media (min-width: 1025px) {
  .carte-tabs-rail {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    overflow-x: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .carte-tabs-rail > .carte-tab:first-child { margin-left: 0; }
  .carte-tabs-rail > .carte-tab:last-child { margin-right: 0; }
}

/* v38 — Plats sur mobile : la carte perd son grand padding, la photo
   rétrécit — le nom garde ainsi une vraie colonne, et le prix reste
   sur la première ligne sans jamais couper un mot en deux. */
@media (max-width: 720px) {
  .carte-cats > section { padding: 26px 16px !important; }
  .carte-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (max-width: 480px) {
  .carte-item > img {
    width: 74px !important;
    height: 88px !important;
    border-radius: 37px 37px 10px 10px !important;
  }
}

/* v38 — Très petits écrans : les pointillés cèdent la place.
   Sous ~385px, « nom + pointillés + double prix » ne tient
   mathématiquement plus sur une ligne : on retire le guide
   pointillé et le prix s'aligne à droite, tout simplement. */
@media (max-width: 385px) {
  main [style*="display: flex"][style*="gap"] > span[aria-hidden][style*="border-bottom"] {
    display: none;
  }
  main [style*="display: flex"][style*="gap"] > span[aria-hidden][style*="border-bottom"] + span {
    margin-left: auto;
    font-size: 14.5px;
  }
}

/* v38 — Tactile : la compression des pastilles ne sert qu'à faire
   tenir les 8 catégories sur grand écran ; au doigt, on garde la
   taille d'origine. */
@media (max-width: 1024px) {
  .carte-tab { font-size: 14.5px; padding: 9px 16px; }
}