/* ============================================================ Chez Berna — Responsive ------------------------------------------------------------ Les écrans sont rendus par React avec des styles « en ligne ». On s'appuie donc sur deux points d'accroche stables : • les classes sémantiques (.site-header, .hero-grid, …) • les attributs data-* posés par ux.js (data-cols, data-pad, …) Aucune règle ne dépend du contenu exact d'un style en ligne. Ordre : tablette → petite tablette → mobile → petit mobile. ============================================================ */ /* ---------- Socle ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 108px; } /* La hauteur réelle de l'en-tête est mesurée par ux.js (--berna-header-h). Repli à 96px si le script n'a pas encore tourné. */ html { scroll-padding-top: calc(var(--berna-header-h, 96px) + 10px); } [id] { scroll-margin-top: calc(var(--berna-header-h, 96px) + 10px); } /* Les onglets collants de la carte se calent sous l'en-tête, quel que soit l'écran : la valeur en ligne (top: 91px, taillée pour l'ordinateur) laissait un jour de ~24px sous l'en-tête mobile (67px), où le contenu défilait à découvert. !important : il faut battre le style en ligne. */ .carte-tabs { top: var(--berna-header-h, 91px) !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Débordement horizontal bloqué sur seulement : posé sur , « clip » se propage à l'axe vertical et peut désactiver position:sticky. */ body { overflow-x: clip; } html, body { margin: 0; max-width: 100%; } body { min-width: 0; } img, video, canvas, svg { max-width: 100%; } img { height: auto; } /* Les images à hauteur imposée en ligne gardent leur cadrage */ img[style*="height"] { height: revert-layer; } /* Césure des mots trop longs (emails, adresses). « break-word » et NON « anywhere » : « anywhere » modifie le calcul de largeur minimale des boîtes, ce qui autorise le navigateur à écraser une colonne de tableau à un caractère (un numéro « #1057 » se retrouvait coupé en « #1 / 0 / 57 ») et à couper les mots au hasard dans le pied de page. */ p, li, a, td, dd, blockquote, h1, h2, h3, h4, b, strong, dt, figcaption { overflow-wrap: break-word; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* Un enfant de grille ou de flex refuse par défaut de passer sous la largeur minimale de son contenu (min-width: auto) — c'est ce qui fait déborder une colonne contenant un tableau large. On lève ce plancher partout, pas seulement sur mobile. */ [data-cols] > *, [data-flexrow] > * { min-width: 0; } /* Tout tableau vit dans un conteneur qui défile horizontalement, à toutes les largeurs : un tableau plus large que sa colonne se fait sinon silencieusement rogner (le composant DataTable est en overflow caché). */ [data-table-wrap] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* ============================================================ Grilles — dégradation progressive ux.js pose data-cols="2|3|4" et data-grid-kind="split|equal" ============================================================ */ @media (max-width: 1180px) { [data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 1024px) { [data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-grid-kind="split"] { grid-template-columns: minmax(0, 1fr) !important; } [data-grid-kind="split"] > * { min-width: 0; } } @media (max-width: 820px) { [data-cols] { grid-template-columns: minmax(0, 1fr) !important; } [data-cols] > * { min-width: 0; } } /* Les rangées en flex passent à la ligne dès que ça serre */ @media (max-width: 900px) { [data-flexrow] { flex-wrap: wrap !important; } } /* ============================================================ Rythme vertical & marges internes ux.js pose data-pad="section" | "card" | "footer" ============================================================ */ @media (max-width: 1024px) { [data-pad="section"] { padding-left: 32px !important; padding-right: 32px !important; } [data-pad="footer"] { padding-left: 32px !important; padding-right: 32px !important; } } @media (max-width: 720px) { [data-pad="section"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 38px !important; padding-bottom: 38px !important; } [data-pad="card"] { padding: 22px 18px !important; } [data-pad="footer"] { padding: 40px 18px 26px !important; } [data-margin="wide"] { margin-left: 16px !important; margin-right: 16px !important; } } @media (max-width: 420px) { [data-pad="section"] { padding-left: 14px !important; padding-right: 14px !important; } [data-pad="card"] { padding: 18px 14px !important; } [data-pad="footer"] { padding-left: 14px !important; padding-right: 14px !important; } } /* ============================================================ Typographie fluide ============================================================ */ @media (max-width: 900px) { main h1, [data-screen-label] h1 { font-size: clamp(32px, 6.2vw, 52px) !important; line-height: 1.08 !important; } main h2 { font-size: clamp(25px, 4.6vw, 38px) !important; line-height: 1.14 !important; } main h3 { font-size: clamp(19px, 3vw, 24px) !important; } } @media (max-width: 480px) { main h1 { font-size: clamp(29px, 8.4vw, 40px) !important; } main h2 { font-size: clamp(23px, 6.4vw, 30px) !important; } } /* ============================================================ En-tête — desktop → tablette ============================================================ */ @media (max-width: 1150px) { /* Quatre liens + trois boutons ne tiennent plus : le CTA « Commander » s'efface — le panier, lui, reste toujours accessible. */ .site-cta { display: none; } } @media (max-width: 1100px) { .site-header { padding: 16px 32px !important; gap: 20px !important; } .site-nav { gap: 20px !important; } } /* ============================================================ En-tête — mobile : menu déroulant (remplace la barre défilante) Le bouton .site-burger est créé par ux.js. ============================================================ */ .site-burger { display: none; } /* révélé par ux.js sous 900 px */ @media (max-width: 900px) { .site-header { padding: 10px 16px !important; gap: 10px !important; /* on garde l'en-tête collé en haut : plus pratique pour commander */ position: sticky !important; top: 0 !important; } .site-logo img { width: 44px !important; height: 44px !important; } .site-logo span span:first-child { font-size: 20px !important; } .site-logo span span:last-child { font-size: 9px !important; letter-spacing: 0.22em !important; } /* Bouton menu */ .site-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; order: 7; border: 1.5px solid var(--berna-line-gold-strong); border-radius: 12px; background: transparent; cursor: pointer; color: var(--text-display); flex: none; padding: 0; } .site-burger:active { background: rgba(185,139,47,0.10); } .site-burger span { display: block; width: 19px; height: 1.8px; border-radius: 2px; background: currentColor; position: relative; transition: transform 220ms cubic-bezier(.2,.7,.3,1), opacity 160ms ease; } .site-burger span::before, .site-burger span::after { content: ""; position: absolute; left: 0; width: 19px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform 220ms cubic-bezier(.2,.7,.3,1); } .site-burger span::before { top: -6px; } .site-burger span::after { top: 6px; } .site-burger[aria-expanded="true"] span { background: transparent; } .site-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .site-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } /* Navigation en panneau déroulant */ .site-nav { order: 10; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; padding: 6px 16px 14px !important; background: var(--surface-paper); border-bottom: 1px solid var(--berna-line-gold-strong); box-shadow: 0 18px 34px -22px rgba(42,33,25,0.45); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; visibility: hidden; transition: max-height 260ms cubic-bezier(.2,.7,.3,1), opacity 180ms ease, visibility 0s linear 260ms; } .site-header[data-menu="open"] .site-nav { max-height: 70vh; opacity: 1; overflow-y: auto; pointer-events: auto; visibility: visible; transition: max-height 300ms cubic-bezier(.2,.7,.3,1), opacity 200ms ease, visibility 0s; } .site-nav a { display: block; padding: 15px 4px !important; font-size: 17px !important; border-bottom: 1px solid var(--berna-line-gold) !important; border-radius: 0; } .site-nav a:last-child { border-bottom: none !important; } /* Compte + panier restent visibles en permanence */ .site-account { order: 5; margin-left: auto !important; padding: 8px 2px !important; } .site-account-label { display: none; } .site-cart-label { display: none; } .site-header > button[aria-label="Ouvrir le panier"] { order: 6; padding: 10px 14px !important; } .site-cta { display: none; } } @media (max-width: 900px) { /* Le sous-titre du logo prend de la place pour rien sur petit écran */ .site-logo span span:last-child { display: none; } } /* ============================================================ Héro ============================================================ */ @media (max-width: 1024px) { .hero-grid { padding: 40px 32px 46px !important; gap: 34px !important; } .hero-grid img { height: 400px !important; } } @media (max-width: 820px) { .hero-grid { padding: 30px 18px 38px !important; gap: 26px !important; text-align: left; } .hero-grid img { height: 300px !important; object-fit: cover; } .hero-actions { flex-direction: column; align-items: stretch !important; gap: 12px !important; } .hero-actions > * { width: 100%; } .hero-actions button { width: 100%; justify-content: center; } } @media (max-width: 420px) { .hero-grid img { height: 230px !important; } } /* Images décoratives très hautes → hauteur raisonnable sur mobile */ @media (max-width: 820px) { [data-tall-img] { height: 300px !important; } } @media (max-width: 480px) { [data-tall-img] { height: 215px !important; } } /* ============================================================ Page « La carte » — panier latéral permanent (ordinateur) ------------------------------------------------------------ Paliers : >1280 deux colonnes de plats + panneau 330 ; 1281-1200 panneau 300 ; 1280-1025 plats sur UNE colonne (le panneau mange la largeur) ; <=1024 panneau masqué, plats de nouveau sur deux colonnes ; <=820 une colonne. ============================================================ */ @media (max-width: 1280px) { .carte-items { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 1200px) { .carte-layout { grid-template-columns: minmax(0, 1fr) 300px !important; gap: 30px !important; } } @media (max-width: 1024px) { /* Le panneau s'efface : le volet panier et la barre « Commander » mobiles prennent le relais (mêmes données, même parcours). */ .carte-layout { grid-template-columns: minmax(0, 1fr) !important; } .carte-cart { display: none; } .carte-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 820px) { .carte-items { grid-template-columns: minmax(0, 1fr) !important; } } /* ============================================================ Espace client — carte de connexion Le gabarit 360px + 1fr se replie déjà à 1024 px (grille marquée « split ») ; on ramène juste le panneau photo à une hauteur de bandeau pour que le formulaire reste au premier plan. ============================================================ */ @media (max-width: 1024px) { /* BANDEAU À BORD PERDU. La photo doit toucher les bords de la carte : en retrait, elle laissait un liseré crème disgracieux et faisait paraître l'image « posée » au lieu d'habiller la carte. On neutralise donc toute marge intérieure horizontale sur la carte (le formulaire, lui, garde la sienne) et on force le panneau photo à occuper toute la largeur. */ .auth-card { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; } .auth-visual { min-height: 260px !important; width: 100% !important; margin: 0 !important; grid-column: 1 / -1 !important; /* toute la largeur, quelle que soit la grille */ } /* ⚠ Cibler UNIQUEMENT la photo de fond, qui vit dans