/* La vitrine publique hors accueil : les documents (/conditions/) et les pages
   servies par plateforme/functions/_pages.js (les mentions d'un rôtisseur, le
   signalement, la commande), chargée après /socle.css. L'accueil a sa propre
   feuille (vitrine/accueil/accueil.css) ; celle-ci en reprend la direction
   « Au marché » : l'en-tête sur un trait d'encre, les grands titres Fraunces,
   le repère (un trait, des capitales), le pied sur l'encre.
   Aucune couleur ici : uniquement les jetons du socle. */

.enveloppe{width:min(1180px,100% - 2 * clamp(16px,4.2vw,56px));margin-inline:auto}
.a-confirmer{padding:0 4px;border-radius:4px;background:var(--or-voile);color:var(--or-texte);font-weight:600;white-space:nowrap}
/* Les textes de l'offre ([data-offre]) sont écrits dans le HTML : rien à masquer en attendant le script. */

/* ---------- L'en-tête : la marque, « Se connecter », sur un trait d'encre ---------- */
.vitrine-entete{position:sticky;top:0;z-index:30;border-bottom:2px solid var(--encre);background:var(--papier)}
.vitrine-entete .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);height:68px}
/* Le nom d'un rôtisseur peut être long : il s'arrête avant le bord. */
.vitrine-entete .marque{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.vitrine-entete .actions{flex:none;flex-wrap:nowrap;gap:var(--e1)}
.vitrine-entete .btn--discret{min-height:44px;padding:0 var(--e3)}

/* ---------- Le repère : un trait, des capitales, à la braise ---------- */
.sur-titre{display:flex;align-items:flex-start;gap:var(--e3);font-weight:700;letter-spacing:.22em;color:var(--braise)}
.sur-titre::before{content:"";flex:none;width:28px;height:2px;margin-top:.62em;background:currentColor}

/* ---------- Le pied, sur l'encre ---------- */
.vitrine-pied{padding:var(--e12) 0 56px;background:var(--nuit);color:var(--filet-fort);font-size:var(--t14)}
.vitrine-pied .enveloppe{display:grid;gap:var(--e4)}
.vitrine-pied a{color:var(--reflet);text-underline-offset:4px}
.vitrine-pied a:hover{color:var(--or-clair)}
.vitrine-pied .marque{color:var(--reflet)}
.vitrine-pied .marque svg{fill:var(--reflet);color:var(--braise)}
.vitrine-pied .marque__pro{color:var(--or-clair)}
.vitrine-pied nav{display:flex;flex-wrap:wrap;gap:0 22px}
.vitrine-pied nav a{display:inline-flex;align-items:center;min-height:44px}
.vitrine-pied nav a[aria-current]{color:var(--or-clair);font-weight:600;text-decoration:none}
.vitrine-pied .a-confirmer{background:var(--encre);color:var(--or-clair)}
.vitrine-pied :focus-visible{outline-color:var(--focus-sombre)}
@media (min-width:960px){
  .vitrine-pied .enveloppe{grid-template-columns:auto 1fr;align-items:center;column-gap:var(--e12)}
  .vitrine-pied nav{grid-column:1 / -1}
}