/* ═══════════════════════════════════════════════════════════════════════════ styles-v7-braise.css — VITRINE « LA BRAISE » [V7 · 2026-08-08] ─────────────────────────────────────────────────────────────────────────── Feuille de SURCHARGE, chargée EN DERNIER (après styles-v6-brand.css). Elle n'écrit que des classes `lcx-*` neuves. Elle ne réécrit ni v1→v6 ni styles-mobile.css : aucune régression possible sur le tunnel de commande. ─── POURQUOI CETTE DIRECTION ──────────────────────────────────────────── Les 113 photos produit de ce dépôt sont des prises de vue studio sur fond NOIR, avec un liseré de lumière orange. Posées sur du crème, ce sont 113 rectangles noirs — c'est très exactement ce que montrait la capture d'avant. Posées sur la nuit, elles n'ont plus de bord : le produit flotte et c'est LUI qui éclaire la page. La direction ne vient donc pas d'un catalogue de styles : c'est la seule qui fasse lire ces actifs-là pour ce qu'ils sont. Elle est cohérente avec le service réel (18 h → minuit) et avec la palette de marque imposée (CLAUDE.md §3bis : #F4501E, #FFB800, sombre). ─── PARTAGE DES EAUX (décision V6 conservée) ───────────────────────────── VITRINE (accueil) = la nuit. TUNNEL (menu → wizard → panier → paiement) = la pleine lumière. « On séduit dans la nuit, on commande en pleine lumière. » V7 ne renverse pas ce contrat ; il rend la vitrine continue au lieu d'alterner crème/noir toutes les deux sections. ─── ZONES MINÉES RESPECTÉES (pièges documentés du dépôt) ───────────────── - JAMAIS de transform / filter / backdrop-filter sur .lc-app, main, .lcf-page ni .lc-container → ça casse .lcf-cta-bar (position:fixed). Tout est scopé sous `.lcx-*`, qui n'est ancêtre d'aucun élément fixed. - Le sandwich volant est enfant direct de : aucun ancêtre transformé. - prefers-reduced-motion : le vol, le fondu du carrousel et toutes les animations d'ambiance sont coupés (bloc en fin de fichier). - Aucune ressource externe (0 CDN, 0 @import de police). - Les photos sources font ≤ 800 px : on ne les agrandit jamais au-delà. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* La nuit est celle des photos, pas un gris de charte : elle est chaude. */ --x-nuit: #0A0807; --x-nuit-2: #151110; --x-nuit-3: #211A17; --x-braise: #F4501E; --x-braise-2: #FF8A3D; /* [A11Y 2026-08-28] LE FOND DES BOUTONS PLEINS, distinct de l'identité ci-dessus. Les deux teintes du dessus portent la braise PARTOUT — ombres, filets, survols, le orange du titre, les badges. Les assombrir repeindrait la vitrine entière ; elles restent donc intactes. Mais en FOND d'un bouton dont le libellé est blanc à 16 px en Anton — police qui n'existe QU'EN 400, donc jamais du « texte large » au sens WCAG (≥24 px, ou ≥18,66 px en gras) — elles donnent 3,49:1 et 2,35:1 là où 1.4.3 niveau AA exige 4,5:1. Ci-dessous la MÊME braise assombrie : 4,93:1 et 6,68:1 sur blanc, de teinte identique (16,6° et 15,6° contre 15,4° pour --x-braise). C'est la décision déjà prise pour le tunnel en 2026-06-06 (--orange-text = #C2410C, 5,18:1), enfin appliquée à la vitrine. Banc : tests-e2e/contraste-cta-2026-08-28.regression.js */ --x-braise-fond: #A8330A; --x-braise-fond-2: #C74412; --x-neon: #FFB800; --x-creme: #FBF7F0; --x-fumee: rgba(255, 248, 240, 0.60); --x-filet: rgba(255, 248, 240, 0.12); --x-spring: cubic-bezier(0.22, 1, 0.36, 1); } /* ─────────────────────────────────────────────────────────────────────────── 0. LA NUIT CONTINUE Une seule surface sombre de la nav au pied de page. Les sections ne portent plus de fond : elles héritent. C'est ce qui supprime l'effet « damier » crème/noir/crème/noir de la version précédente. ─────────────────────────────────────────────────────────────────────────── */ .lcx-nuit { background: var(--x-nuit); color: var(--x-creme); } /* Rythme vertical resserré. `.lc-section` valait clamp(60px, 8vw, 120px) HAUT ET BAS : entre deux blocs, cela faisait jusqu'à 240 px de vide, soit un quart d'écran de rien du tout à chaque respiration. Sur une vitrine dont la consigne est « rapide, on ne lit pas », c'est du défilement pur. Scopé à `.lcx-nuit`, donc sans effet sur le tunnel de commande. */ .lcx-nuit .lc-section { background: transparent; padding: clamp(38px, 5vw, 72px) 0; } /* Le grain : une trame de 3 px, opacité 3,5 %. Sans elle, un aplat noir sur un grand écran OLED se bande visiblement dans les dégradés du hero. */ .lcx-nuit::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035; background-image: radial-gradient(rgba(255, 248, 240, 1) 0.5px, transparent 0.5px); background-size: 3px 3px; } .lcx-nuit > * { position: relative; z-index: 1; } /* ─────────────────────────────────────────────────────────────────────────── 1. HERO — LA LETTRE F Psychologie de lecture (Nielsen) : l'œil balaie une 1ʳᵉ ligne horizontale, puis une 2ᵉ plus courte, puis descend le long du bord gauche. On y pose donc, dans cet ordre exact : barre 1 (horizontale, pleine largeur) → LE RUBAN DES POINTS FORTS barre 2 (horizontale, plus courte) → LE TITRE hampe (verticale, à gauche) → sous-titre + les 2 actions La photo occupe la droite : là où le F n'a pas d'encre, donc là où l'œil ne cherche pas de mots. Rien n'est décoratif dans ce placement. MOBILE : le F ne s'applique pas (pas de balayage horizontal sur 390 px). L'ordre devient celui de l'appétit : photo → titre → prix/action. ─────────────────────────────────────────────────────────────────────────── */ .lcx-hero { position: relative; background: var(--x-nuit); color: var(--x-creme); overflow: hidden; isolation: isolate; --lcx-scene-beam-x: 0px; --lcx-scene-beam-y: 0px; --lcx-scene-reel-x: 0px; --lcx-scene-reel-y: 0px; --lcx-scene-reel-ry: 0deg; --lcx-scene-reel-rx: 0deg; --lcx-scene-text-x: 0px; --lcx-scene-text-y: 0px; } /* Le foyer : deux braises très diffuses. Coût zéro image, et c'est ce qui empêche le fond de lire comme un rectangle noir plat. */ .lcx-hero::before { content: ''; position: absolute; inset: -30% -15% auto -15%; height: 150%; z-index: 0; pointer-events: none; background: radial-gradient(52% 46% at 74% 38%, rgba(244, 80, 30, 0.26), transparent 72%), radial-gradient(34% 34% at 8% 6%, rgba(255, 184, 0, 0.10), transparent 70%); } /* Deux faisceaux lents donnent une profondeur cinématographique au hero sans ajouter une image ou déplacer le contenu. Le fondu est coupé au mouvement réduit. */ .lcx-hero::after { content: ''; position: absolute; inset: -28%; z-index: 0; pointer-events: none; opacity: .48; background: linear-gradient(112deg, transparent 38%, rgba(255,184,0,.08) 47%, transparent 56%), linear-gradient(72deg, transparent 43%, rgba(244,80,30,.11) 51%, transparent 59%); transform: translate3d(calc(-8% + var(--lcx-scene-beam-x)), var(--lcx-scene-beam-y), 0); animation: lcx-hero-beams 13s ease-in-out infinite alternate; } @keyframes lcx-hero-beams { from { transform: translate3d(-8%, -2%, 0) rotate(-1deg); opacity: .24; } to { transform: translate3d(8%, 3%, 0) rotate(1deg); opacity: .58; } } /* — BARRE 1 DU F : le ruban des points forts — Contrainte owner : « ils veulent pas trop lire ». Chaque force tient en DEUX MOTS, sans phrase d'appui. Les descriptions d'avant (« Livrée le matin, jamais surgelée. ») coûtaient 4 lignes de lecture pour dire ce que « Viande fraîche » dit déjà. */ .lcx-ruban { position: relative; z-index: 2; border-bottom: 1px solid var(--x-filet); } .lcx-ruban-piste { display: flex; align-items: center; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; padding: 0; } .lcx-ruban-piste::-webkit-scrollbar { display: none; } .lcx-force { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; scroll-snap-align: start; padding: 13px 18px 13px 0; margin-right: 18px; border-right: 1px solid var(--x-filet); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-creme); white-space: nowrap; } .lcx-force:last-child { border-right: 0; margin-right: 0; } .lcx-force-ico { font-size: 15px; line-height: 1; } /* La pastille d'ouverture : le seul élément vert/orange animé du ruban. */ .lcx-force--statut { color: var(--x-neon); } .lcx-pouls { width: 7px; height: 7px; border-radius: 50%; background: #35D07F; box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.6); animation: lcx-pouls 2.4s ease-out infinite; } @keyframes lcx-pouls { 0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); } } /* — La scène : hampe du F à gauche, carrousel à droite — */ .lcx-scene { position: relative; z-index: 1; perspective: 1400px; } .lcx-grille { display: grid; grid-template-columns: 1fr; align-items: center; } /* — LE CARROUSEL — Chaque photo reste 3,2 s puis se fond en 900 ms, avec une très lente dérive d'échelle (Ken Burns) qui donne l'impression que le plat respire. Aucune photo n'est agrandie au-delà de sa source. */ .lcx-reel { position: relative; width: auto; aspect-ratio: 3 / 2; overflow: hidden; z-index: 1; /* PLEIN BORD sur téléphone. Elle vit dans .lc-container, dont la gouttière la réduisait à une vignette à 16 px de chaque bord — mesuré. Une photo de plat qui ne touche pas les bords perd la moitié de son pouvoir d'appétit, et c'est la toute première chose que voit un visiteur mobile. */ margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); transform: translate3d(var(--lcx-scene-reel-x), var(--lcx-scene-reel-y), 0) rotateY(var(--lcx-scene-reel-ry)) rotateX(var(--lcx-scene-reel-rx)); transform-origin: center center; transition: transform 520ms var(--x-spring); will-change: transform; } .lcx-reel-vue { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 900ms ease, transform 4200ms linear; will-change: opacity, transform; } .lcx-reel-vue.is-on { opacity: 1; transform: scale(1); } .lcx-reel-vue img { width: 100%; height: 100%; object-fit: cover; /* Cadre et source ont le MÊME rapport (3/2 · 800×533) : `cover` ne rogne rien et object-position n'a aucun effet vertical. Laisser une valeur exotique ici laisserait croire qu'elle règle quelque chose. C'est le fondu ci-dessus qui tient le bas de l'image, et il commence maintenant SOUS le produit. */ object-position: center; display: block; } /* Fondu de la photo dans la nuit — les 4 bords d'un coup. Le fond de la photo étant déjà quasi noir, le raccord devient invisible. */ .lcx-reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; /* Le fondu doit être ACHEVÉ avant le bas du cadre : le titre remonte de quelques pixels dans la photo, et sur la version précédente « FAIT MAISON » se posait EN PLEIN SUR LA SALADE du sandwich (mesuré sur la capture mobile). Le noir est atteint à 92 %, et le cadrage ci-dessous place le produit plus haut pour que ce dernier huitième soit du fond, pas du produit. */ background: linear-gradient(to bottom, rgba(10, 8, 7, 0) 58%, rgba(10, 8, 7, 0.82) 86%, var(--x-nuit) 100%); box-shadow: inset 0 0 66px 24px var(--x-nuit); } .lcx-reel::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent 38%, rgba(255,248,240,.12) 50%, transparent 62%); transform: translateX(-130%); animation: lcx-reel-flare 8.5s var(--x-spring) 1.8s infinite; } @keyframes lcx-reel-flare { 0%, 22% { transform: translateX(-130%); opacity: 0; } 30% { opacity: 1; } 58%, 100% { transform: translateX(130%); opacity: 0; } } /* Les puces : elles disent AUSSI quel produit passe — un repère, pas un ornement. */ .lcx-reel-puces { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 7px; align-items: center; } /* La puce visible fait 3 px de haut — mais la CIBLE TACTILE doit faire au moins 24 px (WCAG 2.5.8). Mesuré avant correction : 22 × 3 px sur desktop, soit une cible de 3 pixels de haut pour un vrai bouton. Le bouton porte donc la hauteur, et ::before dessine la barre. */ .lcx-puce { position: relative; /* 24 px MINIMUM dans les deux dimensions : mesuré à 22 × 26, la puce restait sous le plancher WCAG 2.5.8 en largeur. La barre dessinée par ::before garde ses 3 px de haut — seule la zone sensible grandit. */ width: 24px; height: 26px; background: transparent; border: 0; padding: 0; cursor: pointer; transition: width 320ms var(--x-spring); } .lcx-puce::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255, 248, 240, 0.32); transition: background 320ms ease; } .lcx-puce.is-on { width: 34px; } .lcx-puce.is-on::before { background: var(--x-braise); } .lcx-puce:focus-visible { outline: 2px solid var(--x-neon); outline-offset: 2px; border-radius: 4px; } /* Cartouche éditorial : il identifie le plat sans transformer la photo en affiche publicitaire. Placé en haut, loin des puces et de la braise basse. */ .lcx-reel-meta { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; max-width: calc(100% - 28px); padding: 8px 11px; border: 1px solid rgba(255, 248, 240, 0.18); border-radius: 12px; color: var(--x-creme); background: rgba(10, 8, 7, 0.72); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); pointer-events: none; } .lcx-reel-nom { display: grid; gap: 1px; min-width: 0; } .lcx-reel-nom b { overflow: hidden; font-family: var(--font-display); font-size: 16px; line-height: 1; font-weight: 400; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; } .lcx-reel-nom small { overflow: hidden; font-size: 9px; line-height: 1.25; color: var(--x-fumee); text-overflow: ellipsis; white-space: nowrap; } /* Une signature d'atelier gravée dans la photo, pas une rangée de badges. */ .lcx-reel-atelier { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; max-width: calc(100% - 32px); margin: 0; color: rgba(255,248,240,.94); font: 700 9px/1.25 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.9); } .lcx-reel-atelier i { width: 3px; height: 3px; border-radius: 50%; background: var(--x-neon); box-shadow: 0 0 9px rgba(255,184,0,.8); } /* — LA HAMPE DU F : texte + actions — */ .lcx-hero-texte { position: relative; z-index: 2; padding: 0 0 34px; /* Le texte mord LÉGÈREMENT sur le fondu pour que photo et titre forment une seule scène. −30 px faisaient poser le titre SUR le produit (mesuré sur la capture mobile) ; −10 px suppriment la couture sans rien recouvrir. */ margin-top: -10px; transform: translate3d(var(--lcx-scene-text-x), var(--lcx-scene-text-y), 0); transition: transform 520ms var(--x-spring); will-change: transform; } .lcx-titre { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(52px, 15vw, 122px); line-height: 0.80; letter-spacing: -0.02em; margin: 0; color: var(--x-creme); text-wrap: balance; } .lcx-titre em { display: block; font-style: normal; color: var(--x-braise); } .lcx-sous { margin: 16px 0 0; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--x-fumee); } .lcx-sous b { color: var(--x-creme); font-weight: 600; } .lcx-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; } /* Action primaire : une seule sur toute la page d'accueil. */ .lcx-btn { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; padding: 15px 24px; font-family: var(--font-display); font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 220ms var(--x-spring), box-shadow 220ms ease, background 220ms ease; } .lcx-btn--braise { background: linear-gradient(135deg, var(--x-braise-fond-2), var(--x-braise-fond)); color: #fff; box-shadow: 0 10px 30px -8px rgba(244, 80, 30, 0.62); isolation: isolate; overflow: hidden; } .lcx-btn--braise::before { content: ''; position: absolute; z-index: -1; width: 146px; height: 146px; left: calc(var(--lcx-mx, 50%) - 73px); top: calc(var(--lcx-my, 50%) - 73px); border-radius: 50%; /* [A11Y 2026-08-28] CE HALO CREUSE, IL N'ÉCLAIRCIT PLUS. Il valait rgba(255,232,164,.66) — un voile crème posé PAR-DESSUS le fond et SOUS le texte : `z-index:-1` dans le contexte d'empilement isolé par `isolation:isolate` se peint après le fond de l'élément et avant son contenu. Mesuré au survol : le blanc du libellé tombait à 1,52:1. Il s'allume aussi sur :focus-visible, donc il dégradait la lisibilité au moment précis où quelqu'un qui navigue au clavier a besoin de lire le bouton. Aucun voile CLAIR n'est rattrapable ici : même à 10 % d'opacité sur un fond conforme, le blanc redescend sous 4,5:1 (calcul dans le banc). La seule issue qui garde le geste — une lueur qui suit le pointeur — est de l'inverser : le fond se CREUSE sous le doigt, comme une braise qu'on presse. Assombrir ne peut, par construction, que faire MONTER le contraste d'un texte blanc. La lumière, elle, n'est pas perdue : elle est passée DEHORS, en lueur néon sur :hover / :focus-visible plus bas, là où elle ne se met jamais sous un mot. */ background: radial-gradient(circle, rgba(92, 27, 4, .58), rgba(92, 27, 4, .22) 40%, transparent 70%); transform: scale(.18); opacity: 0; transition: transform 420ms var(--x-spring), opacity 220ms ease; } .lcx-btn--braise:hover::before, .lcx-btn--braise:focus-visible::before { transform: scale(1); opacity: 1; } /* La lueur néon vit DEHORS : une box-shadow n'est jamais rognée par l'`overflow:hidden` de son propre élément, et ne passe jamais sous le libellé. Le bouton s'allume donc toujours — sans rien coûter au contraste. */ .lcx-btn--braise:hover, .lcx-btn--braise:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(244, 80, 30, 0.78), 0 0 24px -2px rgba(255, 184, 0, 0.45); } .lcx-btn--braise:active { transform: translateY(0); } /* Action secondaire : le téléphone. Un restaurant local encaisse encore une grande part de ses commandes par appel — le masquer serait une perte sèche. */ .lcx-btn--fantome { background: transparent; color: var(--x-creme); border: 1px solid var(--x-filet); } .lcx-btn--fantome:hover { border-color: var(--x-braise); color: var(--x-braise-2); transform: translateY(-2px); } .lcx-btn:focus-visible { outline: 3px solid var(--x-neon); outline-offset: 3px; } .lcx-btn-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: none; } /* — MOBILE : LA PHOTO D'ABORD — Le DOM place le texte avant le carrousel, parce que c'est l'ordre du F en desktop et l'ordre de lecture correct pour un lecteur d'écran (le titre h1 d'abord). Sur téléphone, l'ordre de L'APPÉTIT est l'inverse : on montre le plat, ensuite on parle. `order` ne déplace que le rendu visuel — la structure du document, donc l'ordre de lecture assistée, reste intacte. */ @media (max-width: 899px) { /* ⚠️ `align-items: stretch` est OBLIGATOIRE ici. La règle de base pose `align-items: center` pour la grille desktop ; en colonne flex, l'axe transversal devient l'HORIZONTALE, si bien que `center` faisait rétrécir le carrousel à sa largeur de contenu puis le centrait. Mesuré : 195 px de large sur un écran de 390. Un plein-bord devenu demi-écran. */ .lcx-grille { display: flex; flex-direction: column; align-items: stretch; } .lcx-reel { order: -1; } } /* — DESKTOP : le F se déploie — */ @media (min-width: 900px) { .lcx-grille { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: clamp(480px, 60vh, 660px); } .lcx-hero-texte { margin-top: 0; padding: 56px 0 64px; } .lcx-reel { aspect-ratio: 3 / 2; border-radius: 26px 0 0 26px; margin-left: 0; /* La photo touche le bord droit de l'écran : elle sort du cadre, ce qui la fait lire comme une scène et non comme une vignette dans une boîte. ⚠️ `width: auto` est indispensable : avec `width: 100%` (valeur de base), la largeur est calculée sur la piste de grille AVANT la marge négative, qui ne fait alors que décaler le bloc au lieu de l'élargir — mesuré, il restait exactement une gouttière (58 px) de vide à droite. */ width: auto; margin-right: calc(var(--gutter) * -1); } .lcx-reel::after { /* DEUX fondus superposés. Celui vers le BAS était absent : la photo se terminait sur une ligne droite franche, visible en travers de l'écran sur la capture desktop. Celui vers la droite dissout le bord gauche de la photo dans la colonne de texte. */ background: linear-gradient(to bottom, rgba(10, 8, 7, 0) 70%, rgba(10, 8, 7, 0.5) 89%, rgba(10, 8, 7, 0.92) 100%), linear-gradient(to right, rgba(10, 8, 7, 0.92) 0%, rgba(10, 8, 7, 0.15) 34%, rgba(10, 8, 7, 0) 60%); box-shadow: inset 0 0 90px 26px rgba(10, 8, 7, 0.55); } .lcx-reel-puces { left: auto; right: 22px; bottom: 18px; transform: none; } .lcx-reel-meta { top: 20px; left: 22px; } .lcx-titre { font-size: clamp(64px, 7.4vw, 116px); } .lcx-sous { font-size: 16px; } } /* ─────────────────────────────────────────────────────────────────────────── 2. SIGNATURE — LE SANDWICH QUI TRAVERSE LA PAGE Demande owner explicite : « le sandwich dans la première section, dans la deuxième on va le prendre, il va se déplacer lui-même au scroll ». Mécanique (FLIP au défilement) : un unique en position:fixed, enfant DIRECT de (donc sans ancêtre transformé — cf. zone minée), animé par translate3d + scale seuls, calculés en JS depuis les rectangles réels de départ (le carrousel) et d'arrivée (l'assiette de la signature). Rien d'autre n'est animé : ni largeur, ni marge, ni filtre. C'est ce qui garantit les 60 im/s sur téléphone. ─────────────────────────────────────────────────────────────────────────── */ .lcx-vol { position: fixed; top: 0; left: 0; z-index: 30; /* sous la nav (z-50), au-dessus du contenu */ pointer-events: none; transform-origin: top left; will-change: transform, opacity; display: none; /* L'ombre est portée par la FORME du détourage (drop-shadow suit l'alpha), pas par un rectangle : le sandwich a un poids, il ne flotte pas comme une vignette. Une deuxième ombre, chaude et large, sert de reflet de braise. */ filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 4px 34px rgba(244, 80, 30, 0.30)); } .lcx-vol::before, .lcx-vol::after { content: ''; position: absolute; pointer-events: none; border-radius: 999px; transform-origin: 0 50%; } /* La traînée suit le sandwich durant sa trajectoire : elle ne peut exister que tant que l'objet vole et sa longueur dépend directement de la progression. */ .lcx-vol::before { right: 66%; top: 48%; width: var(--lcx-flight-line, 96px); height: 3px; background: linear-gradient(to left, rgba(255,184,0,0), rgba(255,138,61,.86), rgba(255,248,240,.74)); opacity: .78; transform: rotate(-4deg) scaleX(var(--lcx-flight-scale, .95)); filter: blur(.2px); } .lcx-vol::after { right: 78%; top: 56%; width: var(--lcx-flight-spark, 57px); height: 2px; background: linear-gradient(to left, transparent, rgba(244,80,30,.72)); opacity: .7; transform: rotate(7deg) scaleX(var(--lcx-flight-scale, .85)); } .lcx-vol.is-actif { display: block; } /* `contain`, PAS `cover` : sur un détourage, `cover` rognerait les extrémités du pain dès que le cadre de départ et celui d'arrivée n'ont pas le même rapport. */ .lcx-vol img { width: 100%; height: 100%; object-fit: contain; display: block; } /* L'élément d'arrivée s'efface tant que le sandwich est en vol : sans ça on verrait le même sandwich à deux endroits pendant tout le trajet. */ .lcx-atterrissage { transition: opacity 160ms linear; } .lcx-atterrissage.est-en-vol { opacity: 0; } .lcx-signature { position: relative; border: 1px solid var(--x-filet); border-radius: 30px; overflow: hidden; background: radial-gradient(70% 90% at 88% 40%, rgba(244, 80, 30, 0.20), transparent 68%), linear-gradient(150deg, var(--x-nuit-2), var(--x-nuit)); display: grid; grid-template-columns: 1fr; } .lcx-signature-corps { padding: clamp(26px, 4vw, 44px); } .lcx-signature-pilule { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 184, 0, 0.14); color: var(--x-neon); border: 1px solid rgba(255, 184, 0, 0.3); border-radius: 999px; padding: 6px 13px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .lcx-signature-titre { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 6vw, 68px); line-height: 0.86; letter-spacing: -0.015em; margin: 16px 0 0; color: var(--x-creme); } .lcx-signature-titre span { color: var(--x-braise); } /* La composition, en langage de cuisine et non en paragraphe : le client scanne des ingrédients, il ne lit pas une description. */ .lcx-compo { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; } .lcx-compo li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-fumee); border: 1px solid var(--x-filet); border-radius: 999px; padding: 5px 11px; } .lcx-signature-bas { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; } .lcx-prix { font-family: var(--font-display); font-size: clamp(38px, 5vw, 58px); line-height: 1; color: var(--x-neon); letter-spacing: -0.01em; } /* L'ASSIETTE D'ARRIVÉE. Elle doit être NETTEMENT plus petite et NETTEMENT décalée par rapport au carrousel, sinon le vol ne se voit pas. Mesuré sur la 1ʳᵉ version : le sandwich partait de 683 px de large en x=703 pour arriver à 705 px en x=703 — même abscisse, même taille. Le trajet existait dans le code et pas à l'écran. C'est corrigé des deux côtés : · téléphone : l'assiette est ENCASTRÉE (marges + coins ronds), ~24 % plus étroite que le carrousel plein bord dont part le sandwich ; · desktop : l'assiette passe À GAUCHE alors que le carrousel est à droite → le sandwich traverse la page en diagonale en rétrécissant. Bénéfice secondaire : la page cesse d'enchaîner deux fois « texte à gauche, image à droite ». */ .lcx-signature-art { position: relative; order: -1; aspect-ratio: 16 / 10; margin: clamp(14px, 4vw, 22px) clamp(14px, 4vw, 22px) 0; /* Le socle lumineux : un détourage posé sur du noir sans halo flotte dans le vide. Même traitement que les 9 tuiles de familles — une seule grammaire. */ background: radial-gradient(56% 54% at 50% 56%, rgba(244, 80, 30, 0.24), transparent 72%); } .lcx-signature-art img { width: 100%; height: 100%; object-fit: contain; display: block; } .lcx-order-detail-toggle { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--orange-text); font: 700 11px/1.3 var(--font-mono); cursor: pointer; } .lcx-order-detail-toggle:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; border-radius: 4px; } .lcx-order-detail { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--gray-1); color: var(--gray-4); font-size: 12px; line-height: 1.5; } .lcx-order-detail span { display: inline-block; } .lcx-order-card { position: relative; overflow: hidden; transition: transform 260ms var(--x-spring), box-shadow 260ms ease; } .lcx-order-card::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--orange), var(--yellow)); transform: scaleY(.22); transform-origin: center; opacity: .65; transition: transform 260ms var(--x-spring), opacity 260ms ease; } .lcx-order-card:hover { transform: translateY(-3px); box-shadow: 0 24px 45px -34px rgba(26,26,26,.48); } .lcx-order-card:hover::after { transform: scaleY(1); opacity: 1; } .lcx-order-points { display: inline-flex; margin-top: 9px; padding: 4px 8px; border-radius: 7px; background: var(--cream); color: var(--gray-3); font: 700 10px/1.35 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; } .lcx-order-points.is-delivered { background: rgba(31,166,83,.12); color: var(--green-text); } .lcx-order-points.is-cancelled { background: rgba(215,38,56,.1); color: var(--red-text); } .lcx-track-reward { position: relative; overflow: hidden; } .lcx-track-reward::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,184,0,.15) 50%, transparent 58%); transform: translateX(-120%); } .lcf-track.is-ready ~ * .lcx-track-reward::after { animation: lcx-reward-glint 900ms ease both; } @keyframes lcx-reward-glint { to { transform: translateX(120%); } } .lcx-wallet-recovery { display: grid; gap: 8px; margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(244,80,30,.35); border-radius: 14px; background: rgba(244,80,30,.08); color: var(--gray-4); font-size: 13px; } .lcx-wallet-recovery strong { color: var(--ink); } .lcx-wallet-recovery > span { font-size: 12px; } .lcx-wallet-recovery > div { display: flex; flex-wrap: wrap; gap: 8px; } .lcx-wallet-recovery button { min-height: 40px; padding: 9px 13px; font-size: 12px; } @media (min-width: 900px) { .lcx-signature { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; } .lcx-signature-art { order: -1; /* l'art passe en colonne 1 : à gauche */ aspect-ratio: 5 / 4; margin: clamp(18px, 2vw, 28px); } } /* ─────────────────────────────────────────────────────────────────────────── 3. LES ENVIES — défilement horizontal sur téléphone L'ancienne grille empilait 4 cartes verticalement : 4 écrans de haut pour 4 produits. Une piste horizontale à aimant montre le 1ᵉʳ produit ENTIER et laisse dépasser le 2ᵉ — le débord est ce qui signale qu'il y en a d'autres. ─────────────────────────────────────────────────────────────────────────── */ .lcx-piste { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; /* déborde jusqu'aux deux bords de l'écran, sinon la carte suivante est coupée par la gouttière du conteneur au lieu de dépasser franchement */ margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); } .lcx-piste::-webkit-scrollbar { display: none; } .lcx-piste > * { scroll-snap-align: start; } @media (min-width: 720px) { .lcx-piste { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding-left: 0; padding-right: 0; } } /* — Carte produit sur la nuit — */ .lcx-carte { display: flex; flex-direction: column; border: 1px solid var(--x-filet); border-radius: 22px; background: var(--x-nuit-2); overflow: hidden; text-align: left; color: inherit; font: inherit; padding: 0; cursor: pointer; transition: border-color 240ms ease, transform 240ms var(--x-spring), box-shadow 240ms ease; } .lcx-carte:hover { border-color: rgba(244, 80, 30, 0.55); transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(244, 80, 30, 0.6); } .lcx-carte:focus-visible { outline: 3px solid var(--x-neon); outline-offset: 3px; } .lcx-carte-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(60% 60% at 50% 55%, rgba(244, 80, 30, 0.14), transparent 72%); } .lcx-carte-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--x-spring); } .lcx-carte:hover .lcx-carte-art img { transform: scale(1.05); } /* [AUDIT 2026-08-29] Fond conforme, pas la braise vive. « XL » et « SIGNATURE » se lisent en 9,5 px gras : blanc sur `--x-braise` #F4501E donne 3,49:1, très en dessous des 4,5:1 exigés, et à cette taille aucune exception « texte large » ne s'applique (elle demande 18,66 px gras). `--x-braise-fond` #A8330A donne 6,68:1 — c'est la teinte déjà retenue pour le bouton COMMANDER, même famille chromatique (16,6° contre 15,4°) : l'identité ne bouge pas. `--x-braise` reste intacte, elle porte la marque partout ailleurs. */ .lcx-carte-badge { position: absolute; top: 10px; left: 10px; background: var(--x-braise-fond); color: #fff; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; } .lcx-carte-badge--top { background: var(--x-neon); color: #1A1206; } .lcx-carte-corps { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; } .lcx-carte-nom { font-family: var(--font-display); font-size: 19px; line-height: 1; text-transform: uppercase; letter-spacing: -0.005em; color: var(--x-creme); } .lcx-carte-desc { font-size: 12px; line-height: 1.4; color: var(--x-fumee); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lcx-carte-bas { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; } .lcx-carte-prix { font-family: var(--font-display); font-size: 22px; color: var(--x-neon); line-height: 1; } .lcx-carte-plus { width: 34px; height: 34px; border-radius: 50%; background: var(--x-braise); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform 220ms var(--x-spring); } .lcx-carte:hover .lcx-carte-plus { transform: rotate(90deg) scale(1.08); } .lcx-carte.est-epuise { opacity: 1; } .lcx-carte.est-epuise .lcx-carte-art img { filter: grayscale(1); opacity: 0.5; } .lcx-carte.est-epuise .lcx-carte-badge { background: var(--x-nuit-3); color: var(--x-creme); } /* ─────────────────────────────────────────────────────────────────────────── 4. TÊTES DE SECTION SUR LA NUIT ─────────────────────────────────────────────────────────────────────────── */ .lcx-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .lcx-oeil { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--x-braise-2); } .lcx-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4.6vw, 52px); line-height: 0.9; letter-spacing: -0.015em; text-transform: uppercase; margin: 10px 0 0; color: var(--x-creme); } .lcx-h2 span { color: var(--x-braise); } .lcx-lien { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-creme); background: transparent; border: 1px solid var(--x-filet); border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: border-color 200ms ease, color 200ms ease, transform 200ms var(--x-spring); } .lcx-lien:hover { border-color: var(--x-braise); color: var(--x-braise-2); transform: translateX(2px); } .lcx-lien:focus-visible { outline: 3px solid var(--x-neon); outline-offset: 3px; } /* ─────────────────────────────────────────────────────────────────────────── 5. LES FAMILLES — 9 visuels détourés Ces 9 découpes sur fond blanc sont les meilleurs actifs « produit » du dépôt. Sur la nuit, elles ont besoin d'un socle lumineux, sinon un détourage blanc flotte sans ancrage. ─────────────────────────────────────────────────────────────────────────── */ .lcx-familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .lcx-famille { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 14px; border: 1px solid var(--x-filet); border-radius: 18px; background: var(--x-nuit-2); cursor: pointer; font: inherit; color: inherit; transition: border-color 220ms ease, background 220ms ease, transform 220ms var(--x-spring); } .lcx-famille:hover { border-color: rgba(244, 80, 30, 0.5); background: var(--x-nuit-3); transform: translateY(-3px); } .lcx-famille:focus-visible { outline: 3px solid var(--x-neon); outline-offset: 3px; } .lcx-famille-art { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; /* Le socle : un halo chaud qui fait poser le détourage au lieu de le laisser flotter. */ background: radial-gradient(52% 48% at 50% 62%, rgba(244, 80, 30, 0.22), transparent 70%); } .lcx-famille-art img { width: 100%; height: 100%; object-fit: contain; display: block; } .lcx-famille-emoji { font-size: 40px; } .lcx-famille-nom { font-family: var(--font-display); font-size: clamp(12px, 1.5vw, 17px); text-transform: uppercase; letter-spacing: -0.005em; color: var(--x-creme); text-align: center; line-height: 1.05; } /* ⚠️ NEUF tuiles : le nombre de colonnes ne peut valoir QUE 3, 5 ou 9, jamais `auto-fit`. Règle du dépôt (audit RED cycle 10, réapprise ici par la mesure) : jamais une tuile SEULE sur sa dernière rangée. `auto-fit minmax(150px,1fr)` donnait 8 colonnes à 1440 px → « MENU ENFANT » orpheline, et 7 à 1280 px. 3 → 3+3+3 · 5 → 5+4 · 9 → une rangée pleine. Tous sans orpheline. */ @media (min-width: 760px) { .lcx-familles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } } @media (min-width: 1180px) { .lcx-familles { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; } } /* ─────────────────────────────────────────────────────────────────────────── 6. LE RESTAURANT — adresse, horaires compressés, actions Les 7 lignes d'horaires disaient SEPT FOIS « 18h — 00h ». Un tableau n'est utile que s'il porte une différence ; ici il n'en portait aucune. Une seule ligne dit la même chose et ne coûte pas un écran de défilement. ─────────────────────────────────────────────────────────────────────────── */ .lcx-lieu { border: 1px solid var(--x-filet); border-radius: 30px; overflow: hidden; background: radial-gradient(64% 80% at 12% 8%, rgba(255, 184, 0, 0.10), transparent 62%), linear-gradient(160deg, var(--x-nuit-2), var(--x-nuit)); padding: clamp(26px, 4vw, 46px); display: grid; gap: 26px; grid-template-columns: 1fr; } .lcx-adresse { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4.4vw, 50px); line-height: 0.9; letter-spacing: -0.015em; text-transform: uppercase; margin: 12px 0 0; color: var(--x-creme); } .lcx-adresse span { color: var(--x-braise); } .lcx-faits { display: grid; gap: 1px; background: var(--x-filet); border-radius: 18px; overflow: hidden; align-content: start; } .lcx-fait { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--x-nuit-2); padding: 15px 18px; } .lcx-fait-l { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--x-fumee); } .lcx-fait-v { font-family: var(--font-display); font-size: 19px; color: var(--x-creme); text-transform: uppercase; } .lcx-fait-v.est-ouvert { color: #4BE08C; } /* La ligne Livraison est un LIEN vers la boutique Uber Eats : elle doit se comporter comme tel — survol, focus visible, pas de soulignement hérité. */ .lcx-fait--lien { text-decoration: none; color: inherit; transition: background 200ms ease; } .lcx-fait--lien:hover { background: var(--x-nuit-3); } .lcx-fait--lien:hover .lcx-fait-v { color: var(--x-braise-2); } .lcx-fait--lien:focus-visible { outline: 3px solid var(--x-neon); outline-offset: -3px; } @media (min-width: 900px) { .lcx-lieu { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr); gap: 40px; align-items: center; } } /* — La bande photo (Facebook) : une frise, pas une grille — */ .lcx-frise { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); } .lcx-frise::-webkit-scrollbar { display: none; } .lcx-frise a { scroll-snap-align: start; display: block; overflow: hidden; border-radius: 16px; border: 1px solid var(--x-filet); aspect-ratio: 3 / 2; background: radial-gradient(65% 75% at 50% 52%, #2B1D17 0%, var(--x-nuit-2) 72%); } .lcx-frise img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 240ms ease; } .lcx-frise a:hover img { opacity: 0.9; } @media (min-width: 720px) { .lcx-frise { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } } /* ─────────────────────────────────────────────────────────────────────────── 7. FAQ SUR LA NUIT — surcharge de couleurs uniquement, structure inchangée ─────────────────────────────────────────────────────────────────────────── */ .lcx-nuit .lc-faq-item { border-color: var(--x-filet); background: var(--x-nuit-2); } .lcx-nuit .lc-faq-q { color: var(--x-creme); } .lcx-nuit .lc-faq-a { color: var(--x-fumee); } .lcx-nuit .lc-faq-item.is-open { border-color: rgba(244, 80, 30, 0.45); } /* ─────────────────────────────────────────────────────────────────────────── 8. LE BANDEAU DÉFILANT — surcharge nuit ─────────────────────────────────────────────────────────────────────────── */ .lcx-nuit .lc-marquee { border-color: var(--x-filet); background: transparent; } .lcx-nuit .lc-marquee-track i { background: var(--x-braise); } /* Le bandeau était composé en Anton ~32 px : il criait AUSSI FORT que le h1 situé juste au-dessus, alors que ce n'est qu'une frise d'ambiance. Deux voix de même volume dans le même écran, aucune ne porte. Il redevient ce qu'il est : une ligne d'information, en police utilitaire, discrète et lisible. */ .lcx-nuit .lc-marquee-track span { color: var(--x-fumee); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } /* ─────────────────────────────────────────────────────────────────────────── 8bis. PIED DE PAGE — densité sur téléphone Mesuré : le pied occupait 23 % de la hauteur totale de l'accueil mobile. Cause : ses 4 blocs s'empilaient en UNE colonne, et ses 15 liens portent (à juste titre) des cibles tactiles de 44 px — soit ~660 px rien qu'en liens. On ne retire AUCUN lien : les cinq entrées légales sont exigées par la LCEN et les cibles de 44 px sont un correctif d'accessibilité documenté. On passe simplement les colonnes de liens sur DEUX colonnes et on resserre les marges de tête. Règle globale volontairement : le pied est le même sur toutes les pages, et le gain vaut partout. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 699px) { .lc-footer { margin-top: 44px; padding: 44px 0 28px; } .lc-footer-grid--4col { grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-bottom: 26px; } .lc-footer-brand { grid-column: 1 / -1; } .lc-footer-brand p { margin-top: 10px; } .lc-footer-end { padding-top: 18px; } } /* ─────────────────────────────────────────────────────────────────────────── 9. LE LOGO VIVANT La mascotte est un piment qui fait un clin d'œil, casquette et moustache. Un logo qui ne bouge JAMAIS renonce à son seul trait de caractère. - à l'arrivée : une entrée ressort, légèrement penchée, qui se redresse ; - au repos : un hochement de 500 ms toutes les 9 s ; - au survol : le même hochement, immédiat. Rien de plus : la mascotte salue, elle ne danse pas. ─────────────────────────────────────────────────────────────────────────── */ .lc-nav-logo { transform-origin: 12% 62%; /* le pivot est la pointe du piment, pas le centre du PNG */ animation: lcx-logo-arrivee 760ms var(--x-spring) both; } @keyframes lcx-logo-arrivee { 0% { opacity: 0; transform: scale(0.72) rotate(-9deg); } 62% { opacity: 1; transform: scale(1.045) rotate(2.5deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .lc-nav-brand { overflow: visible; } /* Le hochement au repos — piloté par une classe posée en JS toutes les 9 s (une animation infinie permanente serait du bruit visuel). */ .lc-nav-logo.lcx-salue { animation: lcx-logo-salut 620ms var(--x-spring); } @keyframes lcx-logo-salut { 0% { transform: rotate(0deg) scale(1); } 28% { transform: rotate(-6deg) scale(1.035); } 62% { transform: rotate(3.5deg) scale(1.01); } 100% { transform: rotate(0deg) scale(1); } } .lc-nav-brand:hover .lc-nav-logo { animation: lcx-logo-salut 620ms var(--x-spring); } /* ─────────────────────────────────────────────────────────────────────────── 10. ENTRÉES ORCHESTRÉES DU HERO Les éléments arrivent dans l'ordre où l'œil les prend : ruban, titre, sous-titre, actions. 90 ms d'écart — assez pour être perçu comme une séquence, trop court pour faire attendre. ─────────────────────────────────────────────────────────────────────────── */ .lcx-entre { animation: lcx-monte 620ms var(--x-spring) both; } .lcx-entre-1 { animation-delay: 60ms; } .lcx-entre-2 { animation-delay: 150ms; } .lcx-entre-3 { animation-delay: 240ms; } .lcx-entre-4 { animation-delay: 330ms; } @keyframes lcx-monte { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ─────────────────────────────────────────────────────────────────────────── 11. MOUVEMENT RÉDUIT — engagement tenu On ne se contente pas de raccourcir les durées (le bloc global de styles.css le fait déjà) : on COUPE ce qui déplace des objets à l'écran. Le carrousel garde son fondu d'opacité — sans lui, changer de photo deviendrait un saut brutal, ce qui est pire pour une personne sensible au mouvement qu'une transition douce. ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lcx-vol { display: none !important; } .lcx-atterrissage.est-en-vol { opacity: 1 !important; } .lcx-reel-vue { transform: none !important; transition: opacity 240ms linear !important; } .lcx-pouls { animation: none !important; } .lc-nav-logo, .lc-nav-logo.lcx-salue, .lc-nav-brand:hover .lc-nav-logo { animation: none !important; } .lcx-entre { animation: none !important; opacity: 1 !important; transform: none !important; } .lcx-carte:hover { transform: none !important; } .lcx-carte:hover .lcx-carte-art img { transform: none !important; } .lcx-btn:hover, .lcx-famille:hover, .lcx-lien:hover { transform: none !important; } .lcx-hero::after, .lcx-reel::before { animation: none !important; opacity: 0 !important; } .lcx-reel, .lcx-hero-texte { transform: none !important; transition: none !important; } .lcx-btn--braise::before, .lcx-btn--braise:hover::before { transform: scale(.18) !important; opacity: 0 !important; transition: none !important; } .lcx-vol::before, .lcx-vol::after { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 12. LE MENU — LA CARTE (tunnel : ON RESTE EN PLEINE LUMIÈRE) ─────────────────────────────────────────────────────────────────────────── Le contrat V6 est maintenu : on séduit dans la nuit, on commande en pleine lumière. Cette section ne fait donc PAS basculer le menu en sombre ; elle corrige ce qui était mesuré comme fautif et pousse la finition. DÉFAUT PRINCIPAL, MESURÉ : sur téléphone la grille était forcée à UNE colonne (`styles-mobile.css:343`, en !important). 39 produits × ~370 px = une page de 14 400 px. Un client qui cherche un burger devait faire défiler l'équivalent de 38 écrans. Deux colonnes ramènent la page à ~7 000 px sans rien retirer. La carte est donc redessinée pour tenir à (360 − 32 − 10) / 2 = 159 px. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { /* Bat le !important de styles-mobile.css:343 — d'où le !important ici. C'est le SEUL de ce fichier, et il est nécessaire : la règle adverse en porte un. */ .lc-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .lc-card-item { border-radius: 16px; } .lc-card-item-body { padding: 10px 11px 12px; } .lc-card-item-name { font-size: 13.5px; line-height: 1.2; } /* La description passe à deux lignes coupées net : à 159 px de large, une composition entière (« Poulet mariné · Cheddar · Jambon · Oignons rouges · Tomates · Salade · Sauce fromagère maison ») occupe SEPT lignes et repousse le prix hors de vue. Le détail complet reste dans la fiche produit. */ .lc-card-item-desc { font-size: 11px; line-height: 1.35; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lc-card-item-foot { padding-top: 9px; } .lc-card-item-price { font-size: 18px; } .lc-card-item-badge { top: 7px; left: 7px; padding: 3px 7px; font-size: 9px; letter-spacing: 0.1em; } } /* Le puits sombre : les photos produit ont un fond NOIR. Sur une carte blanche, chacune est un rectangle noir posé dans une boîte blanche — le mur de pavés noirs qu'on voyait sur la capture d'avant. En donnant à la vignette son propre puits sombre arrondi, le noir de la photo devient un CHOIX (un projecteur) au lieu d'un accident. Le dégradé jaune/orange d'origine ne se voyait jamais : il était intégralement recouvert par la photo. */ .lc-card-item-thumb { background: radial-gradient(70% 70% at 50% 42%, #241C18 0%, #0E0B0A 100%); border-radius: 14px; margin: 6px 6px 0; } @media (max-width: 700px) { .lc-card-item-thumb { border-radius: 11px; margin: 5px 5px 0; } } /* Le survol : la photo respire, la carte se soulève. Deux propriétés compositables (transform), aucune recomposition de page. */ .lc-card-item-thumb img { transition: transform 620ms var(--x-spring); } .lc-card-item--glace .lc-card-item-thumb img { padding: 1.5% !important; } .lc-card-item:hover .lc-card-item-thumb img { transform: scale(1.06); } .lc-card-item:hover .lc-card-item-add { background: var(--orange, #FF5A1F); transform: rotate(90deg); } .lc-card-item-add { transition: background 200ms ease, transform 260ms var(--x-spring); } /* Le « + » était une cible de 36 px. WCAG 2.5.8 en demande 24 au minimum, et le reste du site s'est aligné sur 44 (heal documenté du pied de page et des boutons − / + du panier). On garde le disque à 36 px — le dessin est juste — et on élargit la zone sensible autour, sans déplacer un seul pixel visible. */ .lc-card-item-add { position: relative; } .lc-card-item-add::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* 4 colonnes dès 1200 px : la règle 900-1199 px de styles-v6-brand.css:388 était écrite POUR LES 4 PRODUITS DE L'ACCUEIL (« le 4ᵉ restait seul »). L'accueil n'utilise plus .lc-menu-grid depuis la V7 — il a sa propre piste .lcx-piste — si bien que cette règle ne servait plus qu'à afficher le MENU en 2 colonnes sur un portable de 1024-1199 px, là où 3 tiennent largement. On la neutralise ici plutôt que d'éditer v6 : V7 n'écrit que par-dessus, jamais dedans. */ @media (min-width: 900px) and (max-width: 1199px) { .lc-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Entrée en cascade des cartes. Le hook Reveal existant pose .lc-rv/.in ; on ajoute seulement une légère montée pour que la grille se compose au lieu d'apparaître d'un bloc. Coupé sous mouvement réduit (bloc final). */ .lc-menu-grid .lc-rv { transition: opacity 460ms ease, transform 460ms var(--x-spring); } /* ═══════════════════════════════════════════════════════════════════════════ 13. MOUVEMENT RÉDUIT — complément pour le menu ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .lc-card-item:hover .lc-card-item-thumb img { transform: none !important; } .lc-card-item:hover .lc-card-item-add { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 14. LA FICHE PRODUIT — la photo remplit son cadre ─────────────────────────────────────────────────────────────────────────── MESURÉ : `.lc-detail-art` fait 390 × 355 px sur téléphone, et l'image y était posée en `contain` avec 7 % de marge intérieure → un visuel de 335 × 223 px centré, donc DEUX bandes noires mortes de 66 px, en haut et en bas de la plus grande photo produit du site. Le dégradé jaune→orange déclaré dessous n'a jamais été visible : la photo le recouvre intégralement. Le cadre prend le rapport NATIF des photos (3/2 · 800×533) et l'image passe en `cover` : à rapport identique, `cover` ne rogne rien — zéro perte, zéro bande morte, et 95 px de hauteur rendus au contenu. ═══════════════════════════════════════════════════════════════════════════ */ .lc-detail-art { background: radial-gradient(70% 70% at 50% 42%, #241C18 0%, #0E0B0A 100%); } .lc-detail-art img { object-fit: cover !important; /* bat le style inline du composant */ padding: 0 !important; } /* ⚠️ Le rapport imposé vaut UNIQUEMENT pour la mise en page à une colonne. Posé sans borne, il cassait la version deux colonnes : la photo, qui doit occuper toute la hauteur de la modale, se figeait à 455 px et laissait un vide blanc en L de presque 500 px sous elle. Vu sur la capture desktop. */ @media (max-width: 799px) { .lc-detail-art { aspect-ratio: 3 / 2; min-height: 0; } /* Et la grille doit donner le RESTE au corps. Deux rangées `auto` sous `height:100%` se partagent l'espace libre par étirement : la photo, bornée par son rapport, ne pouvait pas grandir — d'où 85 px de blanc fantôme entre la photo et le premier mot (mesuré : photo finit à 260, corps commence à 345). */ .lc-detail { grid-template-rows: auto 1fr; } } /* Fiche produit éditoriale : la photo vend le plat, le panneau clair aide à décider. Toutes les données viennent encore de l'item réel ; le CSS ne fait qu'organiser le choix et supprimer le grand vide mobile observé. */ .lcx-detail { background: #100D0B; } .lcx-detail-art { isolation: isolate; } .lcx-detail-art::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent 50%, rgba(10, 8, 7, 0.82) 100%); } .lcx-detail-art img { animation: lcx-detail-image 680ms var(--x-spring) both; } /* Les visuels détourés carrés ne doivent jamais être recadrés dans la grande scène portrait de la fiche. `contain` conserve le pot, le tacos, le bol et les bouteilles en entier ; le fond nocturne absorbe naturellement les marges. */ .lcx-detail--galette .lcx-detail-art img, .lcx-detail--tacos .lcx-detail-art img, .lcx-detail--bols .lcx-detail-art img, .lcx-detail--frites .lcx-detail-art img, .lcx-detail--desserts .lcx-detail-art img, .lcx-detail--boissons .lcx-detail-art img, .lcx-detail--menu-enfant .lcx-detail-art img { object-fit: contain !important; padding: clamp(8px, 2vw, 24px) !important; } @keyframes lcx-detail-image { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: scale(1); } } .lcx-detail-art .lc-detail-art-badges { z-index: 2; } .lcx-detail-art-caption { position: absolute; z-index: 2; left: 20px; bottom: 18px; display: grid; gap: 2px; color: var(--x-creme); } .lcx-detail-art-caption span { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--x-braise-2); } .lcx-detail-art-caption b { font-family: var(--font-display); font-size: clamp(21px, 3vw, 31px); line-height: 1; font-weight: 400; text-transform: uppercase; } .lcx-detail .lc-detail-body { padding: clamp(24px, 3vw, 42px); background: radial-gradient(90% 52% at 100% 0%, rgba(255, 184, 0, 0.09), transparent 68%), #FFF9F2; } .lcx-detail-head { animation: lcx-detail-copy 560ms 90ms var(--x-spring) both; } @keyframes lcx-detail-copy { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .lcx-detail .lc-detail-title { max-width: 12ch; margin-top: 10px; font-size: clamp(36px, 4.2vw, 58px); line-height: 0.88; } .lcx-detail-intro { max-width: 40ch; margin: 13px 0 0; color: var(--gray-4); font-size: 14px; line-height: 1.5; } .lcx-detail-composition { margin-top: 24px; } .lcx-detail-label { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--gray-4); } .lcx-detail-composition ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; } .lcx-detail-composition li { padding: 8px 11px; border: 1px solid rgba(35, 25, 18, 0.11); border-radius: 999px; background: rgba(255, 255, 255, 0.62); color: var(--ink); font-size: 12px; font-weight: 650; line-height: 1.2; } .lcx-detail .lc-detail-info { margin-top: 18px; } .lcx-detail .lc-detail-info-pill { border: 1px solid rgba(35, 25, 18, 0.08); background: rgba(255, 255, 255, 0.72); } .lcx-detail .lcx-detail-nutr { margin-top: 15px; padding: 0; border-radius: 0; background: transparent; } .lcx-detail-nutr .lc-detail-nutr-row { padding: 14px; border: 1px solid rgba(35, 25, 18, 0.09); border-radius: 16px; background: rgba(255, 255, 255, 0.65); } .lcx-detail-allergenes { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 5px 0; color: var(--gray-4); font-size: 12px; } .lcx-detail-allergenes a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 12px; font-weight: 750; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; } .lcx-detail-allergenes a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; } .lcx-detail .lc-detail-foot { margin-top: 18px; padding-top: 18px; border-color: rgba(35, 25, 18, 0.12); } .lcx-detail-prix { display: grid; gap: 1px; flex: 0 0 auto; } .lcx-detail-prix small { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-4); } .lcx-detail-prix .lc-detail-price { line-height: 0.95; color: var(--orange-text); } .lcx-detail-cta { min-height: 50px; padding-inline: clamp(18px, 2.6vw, 28px); transition: transform 220ms var(--x-spring), box-shadow 220ms ease; } .lcx-detail-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(222, 67, 20, 0.22); } .lcx-detail-cta:active { transform: scale(0.985); } @media (max-width: 520px) { .lcx-detail .lc-detail-body { padding: 22px 18px 26px; } .lcx-detail .lc-detail-title { font-size: clamp(36px, 12vw, 48px); } .lcx-detail-allergenes { align-items: flex-start; flex-direction: column; gap: 0; } .lcx-detail .lc-detail-foot { align-items: stretch; } .lcx-detail-cta { flex: 1 1 auto; padding-inline: 16px; } } @media (min-width: 800px) { .lcx-detail .lc-detail-foot { margin-top: auto; } .lcx-detail-art-caption { left: 28px; bottom: 26px; } } /* La donnée fidélité est vraie dès le HTML ; seule son apparition est animée. */ .lc-rv.lcx-fidelite.in .lc-counter { animation: lcx-counter-arrive 650ms var(--x-spring) both; } @keyframes lcx-counter-arrive { from { opacity: 0; transform: translateY(8px) scale(0.82); } 65% { opacity: 1; transform: translateY(0) scale(1.08); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ═══════════════════════════════════════════════════════════════════════════ 15. LE WIZARD — 68 % DE L'ÉCRAN ÉTAIT VIDE ─────────────────────────────────────────────────────────────────────────── MESURÉ à l'étape « Pain ou galette ? » sur un écran de 844 px : `.lc-wiz-body` = 733 px de haut, `.lc-wiz-options` = 158 px. Soit 575 px de blanc — deux tiers de l'écran — sur la toute première étape de commande, celle que TOUS les clients voient. Correctif : `margin-block: auto` sur le bloc d'options. ⚠️ PAS `justify-content: center` sur le conteneur : sur un conteneur qui défile, centrer rogne le HAUT du contenu dès qu'il dépasse (étape « sauces », 12 choix) et les premières options deviennent inatteignables. `margin: auto` centre quand ça tient, et se comporte comme un alignement en haut quand ça déborde. C'est la seule des deux qui marche dans les deux cas. ═══════════════════════════════════════════════════════════════════════════ */ .lc-wiz-body { display: flex; flex-direction: column; } .lc-wiz-options { margin-block: auto; width: 100%; } /* Des choix à la taille du doigt. Les lignes faisaient 74 px avec une vignette de 44 px ; sur un écran où l'on a 575 px à rendre, c'est de la place gratuite. La vignette passe à 58 px et le nom à 15,5 px — plus lisible en cuisine comme à bout de bras, sans allonger les étapes à 12 options au point de les casser. */ @media (max-width: 700px) { .lc-wiz-choice { padding: 15px 16px; gap: 15px; border-radius: 20px; } .lc-wiz-choice-thumb { width: 58px; height: 58px; border-radius: 15px; font-size: 28px; } .lc-wiz-choice-name { font-size: 15.5px; } .lc-wiz-choice-desc { font-size: 12.5px; } .lc-wiz-options { gap: 12px; } } /* La vignette porte souvent une VRAIE photo de produit : elle doit la remplir, pas la laisser flotter dans un carré beige. */ .lc-wiz-choice-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* Retour tactile : l'appui enfonce le choix. Le site pose déjà ce geste sur .lc-btn / .lc-card-item / .lc-cat-tab (styles-mobile.css) — le wizard, qui est l'écran le plus tapoté du site, en était dépourvu. */ .lc-wiz-choice:active { transform: scale(0.985); } .lc-wiz-choice.is-on { box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.12), 0 10px 24px -14px rgba(255, 90, 31, 0.7); } /* Entrée en cascade des options à chaque étape : on comprend qu'on a changé d'étape, au lieu de voir le contenu se substituer sans transition. `--i` est posé en JSX sur chaque choix ; sans lui le retard vaut 0 et l'animation reste correcte — elle est simplement simultanée. */ .lc-wiz-choice { animation: lcx-choix 380ms var(--x-spring) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes lcx-choix { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* La barre de progression : 3 px sans arrondi ni transition. Elle devient lisible et son avancée s'anime — c'est le seul repère « où j'en suis ». */ .lc-wiz-progress > * { border-radius: 999px; transition: background 320ms ease; } @media (prefers-reduced-motion: reduce) { .lc-wiz-choice { animation: none !important; } .lc-wiz-choice:active { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 16. LE PANIER — cohérence des vignettes ─────────────────────────────────────────────────────────────────────────── La vignette de ligne portait un dégradé jaune→orange. Or les photos produit ont un fond NOIR : on obtenait un cadre orange vif dont l'intérieur est noir, et c'était la SEULE surface du site à traiter la photo ainsi. Depuis la V7, la carte du menu et la fiche produit posent la photo dans un puits sombre ; le panier suit la même grammaire. Le dégradé reste visible pour les rares lignes SANS photo (repli émoji), où il fait son office. ═══════════════════════════════════════════════════════════════════════════ */ .lc-cart-row-thumb:has(img) { background: radial-gradient(72% 72% at 50% 42%, #241C18 0%, #0E0B0A 100%); } .lc-cart-row-thumb img { border-radius: inherit; } /* La ligne réagit au survol comme une ligne cliquable du reste du site. */ .lc-cart-row { transition: background 180ms ease; } /* ═══════════════════════════════════════════════════════════════════════════ 17. LES MÉTHODES DE PAIEMENT — retour tactile Les tuiles « À emporter / Livraison » et « Payer sur place / Carte » sont les derniers gestes avant la commande. Elles n'avaient ni élévation au survol ni enfoncement à l'appui, là où les cartes produit et le wizard en ont un. ═══════════════════════════════════════════════════════════════════════════ */ .lcf-paymethod, .lcf-pickup-slot, .lcf-pickup-day { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--x-spring); } .lcf-paymethod:hover, .lcf-pickup-slot:hover, .lcf-pickup-day:hover { transform: translateY(-1px); } .lcf-paymethod.is-on { box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.12); } @media (prefers-reduced-motion: reduce) { .lcf-paymethod:hover, .lcf-pickup-slot:hover, .lcf-pickup-day:hover { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 18. FIDÉLITÉ — l'écran visiteur ─────────────────────────────────────────────────────────────────────────── Ici, la numérotation 1 / 2 / 3 est LÉGITIME : le contenu est une séquence réelle (on commande, on cumule, on déduit), et l'ordre porte une information dont le lecteur a besoin. C'est la seule numérotation du site — la section « service » de l'accueil en portait une (01→04) sur du contenu qui n'était pas une séquence ; elle a été retirée pour cette raison même. ═══════════════════════════════════════════════════════════════════════════ */ .lcx-fid { max-width: 720px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) 0; text-align: center; } .lcx-fid-titre { font-size: clamp(38px, 7vw, 68px); line-height: 0.9; margin: 12px 0 0; } .lcx-fid-titre span { color: var(--orange-text); } .lcx-fid-etapes { list-style: none; margin: clamp(26px, 4vw, 40px) 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; text-align: left; counter-reset: none; } @media (min-width: 640px) { .lcx-fid-etapes { grid-template-columns: repeat(3, 1fr); gap: 12px; } } .lcx-fid-etapes li { display: grid; grid-template-columns: 34px 1fr; grid-template-areas: 'num titre' 'num detail'; align-items: center; gap: 0 12px; background: var(--paper, #fff); border: 1px solid var(--gray-1, #ECE8DE); border-radius: 18px; padding: 16px 18px; } @media (min-width: 640px) { .lcx-fid-etapes li { grid-template-columns: 1fr; grid-template-areas: 'num' 'titre' 'detail'; gap: 8px; align-items: start; } } .lcx-fid-num { grid-area: num; width: 34px; height: 34px; border-radius: 999px; background: var(--orange, #FF5A1F); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 17px; line-height: 1; } .lcx-fid-etapes b { grid-area: titre; font-family: var(--font-display); font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink, #0A0A0A); } .lcx-fid-etapes em { grid-area: detail; font-style: normal; font-size: 13px; line-height: 1.4; color: var(--gray-4, #5C584F); } .lcx-fid-exemple { margin: clamp(20px, 3vw, 30px) auto clamp(22px, 3vw, 30px); max-width: 460px; font-size: 15px; line-height: 1.55; color: var(--gray-4, #5C584F); } .lcx-fid-exemple b { color: var(--ink, #0A0A0A); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ 19. MODALE COMPTE — la croix mangeait l'onglet « Créer un compte » ─────────────────────────────────────────────────────────────────────────── MESURÉ sur 320, 360, 390 et 430 px — donc sur TOUS les téléphones réels : le bouton de fermeture (44 px, position absolue à 12 px du bord) recouvrait les 28 derniers pixels de l'onglet « Créer un compte ». 390 px → croix x 334→378 · onglet x 197→362 · chevauchement 334→362. Conséquence : un client qui vise la droite de « Créer un compte » FERME la modale au lieu d'ouvrir l'inscription. Sur l'écran d'inscription lui-même. `styles-mobile.css:216` posait `width: 100%` sur la rangée d'onglets, qui passait donc sous une croix dessinée par-dessus. On rend sa place à la croix : la rangée s'arrête avant elle. `width: auto` est nécessaire — avec `width: 100%`, la marge s'ajouterait à la largeur au lieu de la réduire, et l'onglet déborderait de la modale. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .lc-modal .lcf-tabs { width: auto; margin-right: 52px; } } /* ═══════════════════════════════════════════════════════════════════════════ 20. LE REBOURS D'OUVERTURE, LE CLICK & COLLECT, LA FIDÉLITÉ [2026-08-09] ─────────────────────────────────────────────────────────────────────────── Trois demandes owner du même souffle : dire dans combien de temps on ouvre, dire comment on récupère sa commande, et dire enfin ce que rapporte la fidélité. Tout est en classes `lcx-*` neuves : aucune règle v1→v6 réécrite, donc aucun effet possible sur le tunnel de commande. ═══════════════════════════════════════════════════════════════════════════ */ /* — Le rebours dans le ruban du hero — */ /* Le détail (« encore 40 min », « ce soir ») est volontairement plus discret que l'état : c'est une précision, pas le message. */ .lcx-statut-detail { font-style: normal; margin-left: 7px; opacity: 0.72; font-weight: 500; } /* Dernière heure de service, ou ouverture imminente : la pastille passe à la braise. Elle ne clignote pas — un clignotement sur une vitrine se lit comme une bannière publicitaire, et WCAG 2.3.1 l'interdit au-delà de 3 Hz. */ .lcx-force--statut.est-urgent { color: var(--x-braise-2); } /* ─────────────────────────────────────────────────────────────────────────── CLICK & COLLECT — la séquence en trois temps Le trait qui relie les étapes est tracé en `::after` sur les deux premières : il se DESSINE au passage du regard (transition sur scaleX, déclenchée par la classe `.in` que pose déjà le Reveal du dépôt). Un trait figé serait décoratif ; celui-ci dit « ça avance ». ─────────────────────────────────────────────────────────────────────────── */ .lcx-cc { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; counter-reset: none; } @media (min-width: 760px) { .lcx-cc { grid-template-columns: repeat(3, 1fr); gap: 16px; } } .lcx-cc-etape { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-areas: 'num titre' 'num detail'; align-items: start; gap: 2px 14px; padding: 20px 22px; border: 1px solid var(--x-filet); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 248, 240, 0.035), rgba(255, 248, 240, 0.012)); transition: border-color 260ms ease, transform 260ms var(--x-spring); } @media (min-width: 760px) { .lcx-cc-etape { grid-template-columns: 1fr; grid-template-areas: 'num' 'titre' 'detail'; gap: 10px; } } .lcx-cc-etape:hover { border-color: rgba(244, 80, 30, 0.5); transform: translateY(-2px); } .lcx-cc-num { grid-area: num; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--x-nuit); background: var(--x-neon); box-shadow: 0 6px 20px rgba(255, 184, 0, 0.22); } .lcx-cc-titre { grid-area: titre; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--x-creme); } .lcx-cc-detail { grid-area: detail; font-size: 13.5px; line-height: 1.5; color: var(--x-fumee); } /* Le trait de liaison — desktop seulement : sur téléphone les cartes sont empilées, un trait horizontal n'aurait rien à relier. */ @media (min-width: 760px) { .lcx-cc-etape::after { content: ''; position: absolute; top: 42px; right: -16px; width: 16px; height: 1px; background: linear-gradient(90deg, var(--x-braise), rgba(244, 80, 30, 0.1)); transform: scaleX(0); transform-origin: left center; transition: transform 520ms var(--x-spring) 180ms; } .lcx-cc-etape.in::after { transform: scaleX(1); } .lcx-cc-etape:last-child::after { display: none; } } .lcx-cc-pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; } .lcx-cc-statut { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-fumee); } .lcx-cc-statut.est-ouvert { color: var(--x-neon); } /* ─────────────────────────────────────────────────────────────────────────── FIDÉLITÉ — le discours à gauche, le barème à droite Le barème est présenté comme un CALCUL et non comme un argument : trois lignes « clé → valeur », parce que c'est exactement ce que le client veut vérifier avant de créer un compte. ─────────────────────────────────────────────────────────────────────────── */ .lcx-fidelite { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; border: 1px solid var(--x-filet); border-radius: 26px; padding: clamp(24px, 4vw, 40px); /* La braise vient du coin haut-droit, là où se pose le barème : la chaleur désigne le contenu, elle ne décore pas le cadre. */ background: radial-gradient(120% 140% at 100% 0%, rgba(244, 80, 30, 0.16), transparent 62%), linear-gradient(180deg, rgba(255, 248, 240, 0.04), rgba(255, 248, 240, 0.015)); } @media (min-width: 900px) { .lcx-fidelite { grid-template-columns: 1.05fr 1fr; gap: 40px; } } .lcx-fidelite-phrase { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--x-fumee); max-width: 44ch; } .lcx-fidelite-phrase b { color: var(--x-creme); font-weight: 700; } /* Le pourcentage animé : c'est LE chiffre de la section, il a droit à sa taille. */ .lcx-fidelite-phrase .lc-counter { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 42px); line-height: 1; color: var(--x-neon); display: inline-block; vertical-align: -3px; margin-right: 2px; } .lcx-fidelite-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .lcx-fidelite-calcul { display: grid; gap: 10px; background: rgba(10, 8, 7, 0.42); border: 1px solid var(--x-filet); border-radius: 20px; padding: 18px 20px; } .lcx-fid-ligne { display: grid; grid-template-columns: 1fr auto 18px auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--x-filet); } .lcx-fid-cle { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-fumee); } .lcx-fid-val { font-family: var(--font-display); font-size: 21px; color: var(--x-creme); line-height: 1; } .lcx-fid-fleche { color: var(--x-braise); text-align: center; } .lcx-fid-gain { font-family: var(--font-display); font-size: 21px; color: var(--x-neon); line-height: 1; white-space: nowrap; } .lcx-fid-exemple-vif { font-size: 13.5px; line-height: 1.55; color: var(--x-fumee); padding-top: 6px; } .lcx-fid-exemple-vif b { color: var(--x-creme); } .lcx-fid-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 248, 240, 0.42); border-top: 1px solid var(--x-filet); padding-top: 12px; } /* Sur téléphone, quatre colonnes sur une ligne de barème écrasent le libellé : la clé passe au-dessus, le calcul garde sa lecture gauche→droite. */ @media (max-width: 420px) { .lcx-fid-ligne { grid-template-columns: auto 18px 1fr; grid-template-areas: 'cle cle cle' 'val fleche gain'; gap: 6px 8px; } .lcx-fid-cle { grid-area: cle; } .lcx-fid-val { grid-area: val; } .lcx-fid-fleche { grid-area: fleche; } .lcx-fid-gain { grid-area: gain; text-align: right; } } /* ─────────────────────────────────────────────────────────────────────────── MENU — l'aide sous la puce, et la catégorie sans issue ─────────────────────────────────────────────────────────────────────────── */ /* « En menu » ne dit pas, seul, qu'il s'agit de la formule frites + boisson. L'aide vit sous le libellé, en colonne — pas en `title`, qui n'existe pas au doigt et que personne ne survole sur un téléphone. */ .lc-diet-libelle { display: flex; flex-direction: column; gap: 2px; text-align: left; } .lc-diet-aide { font-style: normal; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--gray-3, #8A857A); letter-spacing: 0; text-transform: none; } .lc-menu-side-link.is-on .lc-diet-aide { color: inherit; opacity: 0.78; } /* [2026-08-09] `.is-dead` existait pour les puces de filtre et la colonne de gauche, PAS pour l'onglet catégorie du mobile — qui vient tout juste de pouvoir être désactivé lui aussi. Sans cette règle, un onglet inatteignable gardait exactement l'aspect d'un onglet cliquable : le client appuyait, rien ne se passait. */ .lc-cat-tab.is-dead { opacity: .42; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; } .lc-cat-tab.is-dead:hover { background: inherit; transform: none; } @media (prefers-reduced-motion: reduce) { .lcx-cc-etape::after { transition: none; transform: scaleX(1); } .lcx-cc-etape:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 21. LA COUCHE « WAOUH » — matière, profondeur, réponse au geste [2026-08-09] ─────────────────────────────────────────────────────────────────────────── Demande owner : « des animations vraiment professionnelles, qui donnent de la valeur ». Trois règles que je m'impose ici, parce que c'est ce qui sépare une vitrine chère d'un thème animé : 1. ON N'ANIME QUE `transform` ET `opacity`. Ce sont les deux seules propriétés que le navigateur compose sans recalculer la mise en page : tout le reste (top, width, box-shadow sur un grand bloc…) provoque un reflow à chaque image et fait tomber le défilement sous 60 im/s sur téléphone. C'est aussi pour ça qu'aucune de ces règles ne peut décaler la page — le CLS ne bouge pas d'un pouce, contrairement à la tentative de CSS critique annulée le 08. 2. RIEN NE BOUGE TOUT SEUL EN BOUCLE. Chaque animation répond à un geste (survol, appui) ou au défilement. Une vitrine où trois choses s'agitent en permanence fatigue et se lit comme une bannière publicitaire. 3. TOUT EST COUPÉ par prefers-reduced-motion, bloc en fin de section. ═══════════════════════════════════════════════════════════════════════════ */ /* — Les tuiles familles : légère bascule 3D au survol — La perspective est posée sur le CONTENEUR, jamais sur `.lc-container` ni sur un ancêtre de `.lcf-cta-bar` (zone minée documentée du dépôt). */ /* ⚠️ Ce bloc RAFFINE la section 5, il ne la duplique pas : `.lcx-famille:hover` y pose déjà un translateY et sa transition. On n'ajoute ici que la 3ᵉ dimension et la réponse à l'appui. Même sélecteur plus bas dans le fichier = c'est bien cette valeur de `transform` qui gagne, et c'est voulu. */ .lcx-familles { perspective: 900px; } .lcx-famille { transform-style: preserve-3d; } .lcx-famille:hover { transform: translateY(-4px) rotateX(5deg) scale(1.015); } .lcx-famille:active { transform: translateY(-1px) scale(0.995); } /* La découpe produit avance un peu plus que sa tuile : c'est ce décalage qui crée la profondeur, pas l'ombre. */ .lcx-famille-art img { transition: transform 380ms var(--x-spring); } .lcx-famille:hover .lcx-famille-art img { transform: translateZ(22px) scale(1.06); } /* — Les cartes produit : la lumière passe dessus au survol — Un balayage lumineux court, en `transform` pur sur un pseudo-élément isolé. `overflow:hidden` est déjà porté par `.lcx-carte-art` ; on ne le repose pas. */ .lcx-carte-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 240, 0.16) 50%, transparent 62%); transform: translateX(-115%); pointer-events: none; } .lcx-carte:hover .lcx-carte-art::after { transition: transform 720ms ease; transform: translateX(115%); } /* Idem : la section 4 gère déjà le survol de la carte et l'échelle de sa photo. On n'ajoute que la réponse à l'APPUI, qui manquait — sur téléphone, où il n'y a pas de survol, c'était le seul retour possible et il n'existait pas. */ .lcx-carte:active { transform: translateY(-1px) scale(0.994); } /* — L'action principale : la braise respire sous le doigt — Pas de halo permanent : il apparaît au survol et se resserre à l'appui, pour que le bouton se comporte comme un objet et non comme une image. */ .lcx-btn--braise { position: relative; transition: transform 240ms var(--x-spring), box-shadow 240ms ease, filter 240ms ease; } .lcx-btn--braise:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(244, 80, 30, 0.38); } .lcx-btn--braise:active { transform: translateY(0) scale(0.985); box-shadow: 0 4px 14px rgba(244, 80, 30, 0.3); } /* La flèche part en avant : elle dit où mène le bouton. */ .lcx-btn .lc-btn-arrow { transition: transform 260ms var(--x-spring); } .lcx-btn:hover .lc-btn-arrow { transform: translateX(4px); } /* — Les lignes du barème de fidélité : la valeur gagnée pulse une fois quand la section entre à l'écran. Une seule fois : c'est un accent, pas un clignotant. */ .lc-rv.lcx-fidelite.in .lcx-fid-gain { animation: lcx-gain 760ms var(--x-spring) both; } .lc-rv.lcx-fidelite.in .lcx-fid-ligne:nth-child(2) .lcx-fid-gain { animation-delay: 140ms; } @keyframes lcx-gain { 0% { transform: scale(0.86); opacity: 0; } 62% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* — Les pastilles du click & collect : le chiffre tombe à sa place — C'est l'« animation qui tombe » demandée, appliquée là où elle a un sens : sur une séquence numérotée, la chute de chaque numéro rythme la lecture. */ .lc-rv.lcx-cc-etape.in .lcx-cc-num { animation: lcx-tombe 620ms var(--x-spring) both; } .lc-rv.lcx-cc-etape.lc-rv-2.in .lcx-cc-num { animation-delay: 90ms; } .lc-rv.lcx-cc-etape.lc-rv-3.in .lcx-cc-num { animation-delay: 180ms; } @keyframes lcx-tombe { 0% { transform: translateY(-16px) scale(0.8); opacity: 0; } 58% { transform: translateY(3px) scale(1.05); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } /* — La frise Facebook : la photo survolée prend le pas sur ses voisines — */ .lcx-frise a { transition: transform 340ms var(--x-spring); } .lcx-frise a:hover { transform: scale(1.05); z-index: 2; } @media (prefers-reduced-motion: reduce) { .lcx-famille, .lcx-famille:hover, .lcx-famille:active, .lcx-famille-art img, .lcx-famille:hover .lcx-famille-art img, .lcx-carte, .lcx-carte:hover, .lcx-carte:active, .lcx-carte-art img, .lcx-carte:hover .lcx-carte-art img, .lcx-btn--braise:hover, .lcx-btn--braise:active, .lcx-btn:hover .lc-btn-arrow, .lcx-frise a:hover { transform: none !important; transition: none !important; } .lcx-carte:hover .lcx-carte-art::after { transition: none; transform: translateX(-115%); } .lc-rv.lcx-fidelite.in .lcx-fid-gain, .lc-rv.lcx-cc-etape.in .lcx-cc-num, .lc-rv.lcx-fidelite.in .lc-counter, .lcx-detail-art img, .lcx-detail-head { animation: none !important; } .lcx-order-card, .lcx-order-card:hover { transform: none !important; transition: none !important; } .lcx-order-card::after, .lcx-order-card:hover::after { transform: scaleY(.22) !important; transition: none !important; } .lcf-track.is-ready ~ * .lcx-track-reward::after { animation: none !important; } }