/* ══════════════════════════════════════════════════════════════ L'Épée Gourmande — Verviers Identité : nuit d'acier, ambre de braise, rouge d'enseigne. Le motif conducteur est la lame : traits effilés, pointes, titres tranchés d'un filet ambre. ══════════════════════════════════════════════════════════════ */ :root { /* ── Palette ────────────────────────────────────────────── La nuit est légèrement bleutée (l'acier), pas brune : c'est ce qui distingue l'ambiance de celle d'une brasserie beige. */ --nuit: #0B0C0E; --nuit-2: #14161A; /* surfaces surélevées */ --nuit-3: #1F232A; /* filets et séparateurs */ --os: #F4F1EB; /* fond clair des sections inversées */ --os-2: #EAE5DC; /* surfaces sur fond clair */ /* ── L'accent ───────────────────────────────────────────── Toutes les nuances de l'accent sont ici, y compris celles des halos : écrites en dur au fil de la feuille, elles ne suivaient pas la palette. Pour essayer le vert de leur décoration, il suffit d'écrire `data-palette="vert"` sur la balise — et de le retirer pour revenir. Le rouge de l'enseigne, lui, ne bouge dans aucun des deux cas. */ --ambre: #E7A83C; /* accent : boutons, filets, chiffres */ --ambre-fonce: #C9871F; /* survol */ --ambre-vif: #F2A93A; /* le titre à l'incandescence */ --ambre-clair: #FFDCA6; /* la ligne d'accent, à l'incandescence */ --ambre-rgb: 231 168 60; /* pour les halos et les voiles */ --ambre-halo-rgb: 255 214 140; --braise: #C4222E; /* rouge de l'enseigne — signal, jamais fond de texte */ --acier: #8E97A3; /* gris froid : mentions sur fond sombre */ --encre-douce: #55504A; /* mentions sur fond clair (5,9:1 sur --os) */ --sur-nuit: #F4F1EB; --sur-nuit-doux: rgb(244 241 235 / .74); --sur-nuit-faible:rgb(244 241 235 / .58); /* ── Alias attendus par les modules partagés ────────────── booking-widget.css (posé plus tard par l'installateur) lit --ink, --ink-2, --ink-3, --beige, --beige-deep, --cream, --display, --body, --fast et --ease. Sans ces alias, le formulaire de réservation s'afficherait sans couleurs ni typographie. Ils pointent ici sur la palette de la maison : le module hérite donc de l'identité, sans une ligne à retoucher le jour de l'installation. --beige y sert de couleur de bouton avec du texte --ink dessus : elle doit rester claire. D'où l'ambre, et non le rouge de l'enseigne. */ --ink: var(--nuit); --ink-2: var(--nuit-2); --ink-3: var(--nuit-3); --beige: var(--ambre); --beige-deep: var(--ambre-fonce); --cream: var(--sur-nuit); /* ── Typographie ────────────────────────────────────────── Instrument Serif : un seul poids, très contrasté — la lame. Instrument Sans : même atelier, pour le texte courant. */ --display: 'Instrument Serif', 'Times New Roman', serif; --body: 'Instrument Sans', system-ui, -apple-system, sans-serif; /* ── Rythme ───────────────────────────────────────────────── */ --shell: 1220px; --gutter: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(4.5rem, 9vw, 8.5rem); /* ── Mouvement ────────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --fast: 200ms var(--ease); --slow: 640ms var(--ease); /* ── Empilement ───────────────────────────────────────────── */ --z-sticky: 100; /* Le menu plein écran passe SOUS le bandeau : c'est le bouton du bandeau qui le referme, et il doit donc rester visible et cliquable une fois le menu ouvert. Au-dessus, il n'y avait plus aucune sortie au doigt — seule la touche Échap, absente d'un téléphone. */ --z-drawer: 150; --z-header: 200; --z-modal: 400; --notice-h: 0px; } /* Le vert de leur décoration — relevé sur leurs photos, pas choisi au jugé : #99BE48, teinte 85°. Le rouge de l'enseigne reste intact. */ :root[data-palette="vert"] { --ambre: #99BE48; --ambre-fonce: #7FA236; --ambre-vif: #A8D24F; --ambre-clair: #DDF0B0; --ambre-rgb: 153 190 72; --ambre-halo-rgb: 210 235 150; } /* ══ Base ══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(5rem + var(--notice-h)); } body { background: var(--nuit); color: var(--sur-nuit); font-family: var(--body); font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, svg, iframe, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; border-radius: 2px; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; padding: .8rem 1.2rem; background: var(--ambre); color: var(--nuit); font-weight: 600; } .skip:focus { left: 0; } /* ══ Titres et éléments d'écriture ═════════════════════════ */ /* Les titres se répartissaient au fil de l'eau : « Rue Jules Cerexhe 50, à Verviers » laissait « Verviers » seul sur sa ligne. `balance` répartit les mots entre les lignes plutôt que de remplir la première — et là où il n'est pas reconnu, la mise en page reste celle d'avant. */ .hero-title, .h2, .h3, .course-title, .footer-name { text-wrap: balance; } /* Pour le texte courant, `pretty` ne touche qu'à la fin du paragraphe : il évite le mot esseulé sur la dernière ligne, sans rien redistribuer. */ p, .lede, .dish-name, .info-aside, .quote blockquote, .carte-notes li, .points li { text-wrap: pretty; } .h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.015em; } .h2 em { font-style: italic; color: var(--ambre); } .h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.12; } /* Le sur-titre porte la lame : un filet qui s'effile vers la droite. */ .kicker { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ambre); } .kicker::after { content: ""; flex: 0 0 auto; width: clamp(28px, 6vw, 64px); height: 2px; background: linear-gradient(90deg, var(--ambre), transparent); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); } /* Conservée pour les pages qui la portent déjà : elle ne fait plus que confirmer la couleur de fond sombre. */ .kicker-light { color: var(--ambre); } .lede { font-size: clamp(1.06rem, 1rem + 0.4vw, 1.25rem); line-height: 1.58; color: var(--sur-nuit-doux); } .section { padding-block: var(--section-y); position: relative; } /* La largeur de confort — 46 caractères — vaut pour le texte à lire, pas pour un titre de 64 px : elle cassait « Rue Jules Cerexhe 50, à Verviers » en deux alors que la ligne tenait largement. On ne la garde donc que sur le chapeau. */ .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head .lede { margin-top: 1.1rem; max-width: 46ch; } /* Bascule sur fond clair : l'alternance donne le rythme du site. */ .inverse { background: var(--os); color: var(--nuit); } .inverse .lede { color: var(--encre-douce); } .inverse .kicker { color: var(--braise); } .inverse .kicker::after { background: linear-gradient(90deg, var(--braise), transparent); } /* ══ Boutons ═══════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .82rem 1.5rem; border-radius: 2px; font-size: .93rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast); } .btn:active { transform: translateY(1px); } .btn-lg { padding: 1rem 1.9rem; font-size: 1rem; } .btn-solid { background: var(--ambre); color: var(--nuit); } .btn-solid:hover { background: var(--ambre-fonce); } .btn-ghost { border: 1px solid rgb(244 241 235 / .34); color: var(--sur-nuit); } .btn-ghost:hover { border-color: var(--sur-nuit); background: rgb(244 241 235 / .07); } .inverse .btn-ghost { border-color: rgb(11 12 14 / .25); color: var(--nuit); } .inverse .btn-ghost:hover { border-color: var(--nuit); background: rgb(11 12 14 / .05); } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; font-weight: 600; font-size: .92rem; color: var(--braise); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap var(--fast); } .link-arrow::after { content: "→"; } .link-arrow:hover { gap: .8rem; } /* ══ Annonce ═══════════════════════════════════════════════ */ .sitenotice { position: relative; z-index: calc(var(--z-header) + 1); background: var(--braise); color: #fff; font-size: .9rem; } .sitenotice[hidden] { display: none; } .sitenotice-inner { display: flex; align-items: center; gap: .7rem; padding-block: .6rem; } .sitenotice-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .sitenotice-link { text-decoration: underline; font-weight: 600; } .sitenotice-link[hidden] { display: none; } /* ══ Bandeau ═══════════════════════════════════════════════ */ .header { position: fixed; top: var(--notice-h); left: 0; right: 0; z-index: var(--z-header); transition: background var(--fast), border-color var(--fast), top var(--fast); border-bottom: 1px solid transparent; } body.has-notice .header { position: absolute; } .header.is-stuck { position: fixed; top: 0; background: rgb(11 12 14 / .88); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--nuit-3); } .header-inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 4.6rem; } .brand { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; } .brand-blade { width: 54px; height: 12px; fill: var(--braise); flex: 0 0 auto; transition: transform var(--slow); } .brand:hover .brand-blade { transform: translateX(3px); } .brand-text { display: flex; flex-direction: column; line-height: 1.12; } .brand-text strong { font-family: var(--display); font-weight: 400; font-size: 1.32rem; letter-spacing: .005em; } .brand-text small { font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; color: var(--acier); } .nav { margin-left: auto; } .nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2rem); } .nav a { position: relative; font-size: .9rem; color: var(--sur-nuit-doux); padding-block: .35rem; transition: color var(--fast); } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--ambre); transition: width var(--fast); } .nav a:hover, .nav a.is-active { color: var(--sur-nuit); } .nav a:hover::after, .nav a.is-active::after { width: 100%; } .btn-header { flex: 0 0 auto; } .btn-header[hidden] { display: none; } .burger { display: none; width: 42px; height: 42px; margin-left: auto; position: relative; } .burger span { position: absolute; left: 10px; width: 22px; height: 1.5px; background: var(--sur-nuit); transition: transform var(--fast), opacity var(--fast); } .burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 24px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* ══ Menu plein écran ══════════════════════════════════════ */ .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--nuit); display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding: 5rem var(--gutter) 3rem; opacity: 0; transition: opacity 300ms var(--ease); } .drawer[hidden] { display: none; } .drawer.is-open { opacity: 1; } body.menu-ouvert .header { background: var(--nuit); border-bottom-color: var(--nuit-3); } .drawer-nav ul { display: flex; flex-direction: column; gap: .35rem; } .drawer-nav a { font-family: var(--display); font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1.22; transition: color var(--fast), padding-left var(--fast); } .drawer-nav a:hover { color: var(--ambre); padding-left: .6rem; } .drawer-cta { align-self: flex-start; } .drawer-foot { font-size: .85rem; color: var(--acier); } /* ══ Hero ══════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 8rem; padding-bottom: 0; overflow: hidden; } .hero-media { position: absolute; inset: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 46%; } /* Deux voiles : un dégradé vertical pour asseoir le texte, une teinte froide pour rapprocher la photo de la palette du site. */ .hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 12 14 / .72) 0%, rgb(11 12 14 / .28) 34%, rgb(11 12 14 / .82) 82%, var(--nuit) 100%), linear-gradient(96deg, rgb(11 12 14 / .74) 0%, rgb(11 12 14 / .15) 62%); } .hero-inner { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4rem); max-width: min(var(--shell), 100%); } /* Le sur-titre du hero tient un rôle que les autres n'ont pas : c'est la première mention de la ville et de la rue, lue de loin sur une photo. Il est donc posé plus grand que les sur-titres de section, et son filet suit. */ .hero .kicker { font-size: clamp(.84rem, .78rem + .3vw, .98rem); letter-spacing: .18em; margin-bottom: 1.35rem; } .hero .kicker::after { width: clamp(36px, 7vw, 78px); height: 2.5px; } /* ── L'entrée du hero ───────────────────────────────────── Le titre ne paraît pas : il est découvert. Un masque en dégradé balaie chaque ligne de gauche à droite, et un trait d'ambre passe au même moment sur l'ensemble — la lame qui a déjà tout tranché. Tout est en CSS et démarre au premier rendu : rien n'attend le JavaScript, et le texte reste présent dans le document pour qui ne verra jamais l'animation. La position du masque est une propriété déclarée : sans `@property`, une variable ne s'anime pas, elle saute d'une valeur à l'autre. Les navigateurs qui ne la connaissent pas ignorent l'animation et affichent le titre d'emblée. */ @property --coupe { syntax: ''; inherits: false; initial-value: 0%; } .hero .kicker, .hero-lede, .hero-actions, .hero-strip li { animation: monte 720ms var(--ease) backwards; } .hero .kicker { animation-delay: 40ms; } .hero-lede { animation-delay: 620ms; } .hero-actions { animation-delay: 720ms; } .hero-strip li { animation-delay: 820ms; } /* Les repères se posent l'un après l'autre, de gauche à droite. */ .hero-strip li:nth-child(2) { animation-delay: 880ms; } .hero-strip li:nth-child(3) { animation-delay: 940ms; } .hero-strip li:nth-child(4) { animation-delay: 1000ms; } @keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero-line { --coupe: 0%; /* La frange de 7 % adoucit le bord : une coupe nette donnerait un défilement de bandeau, pas une révélation. */ -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--coupe) - 7%), transparent var(--coupe)); mask-image: linear-gradient(90deg, #000 calc(var(--coupe) - 7%), transparent var(--coupe)); /* Sans ces deux lignes, le dégradé se répète : passé la zone transparente, un nouveau cycle repeint du noir et le texte réapparaît aussitôt derrière la coupe — le masque semblait alors ne rien faire du tout. */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation: tranche 880ms cubic-bezier(0.3, 0.7, 0.4, 1) both, refroidit 1600ms cubic-bezier(0.2, 0.6, 0.3, 1) both; } .hero-line:first-child { animation-delay: 60ms, 60ms; } .hero-line-em { animation-delay: 260ms, 260ms; animation-name: tranche, refroidit-em; } @keyframes tranche { from { --coupe: 0%; } to { --coupe: 107%; } } /* Chaque ligne refroidit vers sa propre couleur : le blanc pour la première, l'ambre pour la seconde. Une seule règle ne suffirait pas — on ne peut pas animer « vers la valeur d'origine » sans la nommer. */ @keyframes refroidit { 0% { color: var(--ambre-vif); text-shadow: 0 0 30px rgb(var(--ambre-rgb) / .8), 0 0 8px rgb(var(--ambre-halo-rgb) / .5); } 40% { text-shadow: 0 0 20px rgb(var(--ambre-rgb) / .45), 0 0 6px rgb(var(--ambre-halo-rgb) / .2); } 100% { color: var(--sur-nuit); text-shadow: none; } } @keyframes refroidit-em { 0% { color: var(--ambre-clair); text-shadow: 0 0 34px rgb(var(--ambre-halo-rgb) / .85), 0 0 10px rgb(var(--ambre-halo-rgb) / .5); } 40% { text-shadow: 0 0 22px rgb(var(--ambre-rgb) / .5); } 100% { color: var(--ambre); text-shadow: none; } } /* Le titre sort de la braise. Deux mouvements en même temps : un balayage le découvre de gauche à droite — la lame est suggérée, plus dessinée —, et les lettres passent d'un ambre incandescent à leur couleur définitive, comme un métal qui refroidit. Le halo se dissipe au même rythme. Le refroidissement dure plus longtemps que la découverte : c'est ce décalage qui donne la sensation de chaleur qui retombe, plutôt que d'un simple fondu de couleur. */ .hero-title { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 1.2rem + 9.5vw, 8.4rem); line-height: .93; letter-spacing: -0.025em; margin-bottom: 1.5rem; } .hero-line { display: block; } .hero-line-em { font-style: italic; color: var(--ambre); padding-left: clamp(1.5rem, 7vw, 6rem); } .hero-lede { max-width: 54ch; color: var(--sur-nuit-doux); font-size: clamp(1.02rem, .97rem + .35vw, 1.18rem); } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } /* Bande de faits, posée sur le bas du hero */ .hero-strip { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); border-top: 1px solid var(--nuit-3); } .hero-strip li { padding: 1.15rem 1.3rem 1.15rem 0; display: flex; flex-direction: column; gap: .1rem; } .hero-strip li + li { padding-left: 1.3rem; border-left: 1px solid var(--nuit-3); } .hero-strip strong { font-size: .96rem; font-weight: 600; } .hero-strip span { font-size: .78rem; color: var(--acier); } /* Indicateur de défilement : une lame verticale qui pulse */ .hero-scroll { position: absolute; right: var(--gutter); bottom: clamp(7rem, 12vw, 9rem); width: 22px; height: 64px; display: grid; place-items: center; } .hero-scroll-blade { width: 1.5px; height: 100%; background: linear-gradient(180deg, transparent, var(--ambre)); transform-origin: top; animation: lame 2.4s var(--ease) infinite; } @keyframes lame { 0%, 100% { transform: scaleY(.35); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } } /* ══ Bandeau défilant ══════════════════════════════════════ */ .marquee { border-block: 1px solid var(--nuit-3); background: var(--nuit-2); overflow: hidden; padding-block: .95rem; } .marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: defile 42s linear infinite; } .marquee-track span { font-family: var(--display); font-size: 1.32rem; color: var(--sur-nuit-faible); white-space: nowrap; display: flex; align-items: center; gap: 2.6rem; } .marquee-track span::after { content: ""; width: 7px; height: 7px; background: var(--braise); transform: rotate(45deg); flex: 0 0 auto; } @keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee:hover .marquee-track { animation-play-state: paused; } /* ══ Le restaurant ═════════════════════════════════════════ */ .resto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2.5rem, 6vw, 5.5rem); /* `stretch`, et non `start` : sans cela la colonne des photos garde sa hauteur naturelle et le `1fr` de la vidéo n'a rien à remplir. */ align-items: stretch; } .resto-texte p + p { margin-top: 1.1rem; } .resto-texte .lede { margin-top: 1.4rem; } .resto-texte > p:not(.lede):not(.kicker) { color: var(--sur-nuit-doux); } .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 2.6rem; background: var(--nuit-3); border: 1px solid var(--nuit-3); } .facts li { background: var(--nuit); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .15rem; } .facts strong { font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1; color: var(--ambre); } .facts span { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--acier); } /* Les rangées ont une hauteur propre, plutôt qu'un rapport imposé au conteneur : ce rapport ne valait que pour la disposition en 2×2, et dès que la grille passait à une colonne, les trois photos étaient écrasées dans un carré — réduites à des bandes. Ici, chaque rangée garde sa hauteur quel que soit le nombre de colonnes, et les photos la remplissent en recadrant. */ .resto-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Deux rangées égales qui remplissent la place laissée par la vidéo. */ grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1rem; min-height: 0; } .shot { overflow: hidden; background: var(--nuit-2); min-height: 0; } .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); } .shot:hover img { transform: scale(1.045); } .shot-tall { grid-row: span 2; } /* ══ La carte ══════════════════════════════════════════════ */ /* Le plat signature : la photo déborde du cadre ambre décalé */ .signature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-bottom: clamp(3.5rem, 7vw, 6rem); } .signature-media { position: relative; } .signature-media::before { content: ""; position: absolute; inset: -14px -14px 14px 14px; border: 1px solid var(--braise); pointer-events: none; } .signature-media img { position: relative; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .signature-texte > p:not(.tag) { margin-block: 1.1rem 1.7rem; color: var(--encre-douce); } .tag { display: inline-block; padding: .3rem .7rem; margin-bottom: .9rem; background: var(--nuit); color: var(--ambre); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1.6rem, 3vw, 2.4rem); } .course { padding: 1.7rem 1.6rem 1.9rem; background: var(--os-2); border-top: 2px solid var(--nuit); } .course-title { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin-bottom: 1.2rem; padding-bottom: .85rem; border-bottom: 1px solid rgb(11 12 14 / .14); } .dishes li { padding-block: .42rem; } .dishes li + li { border-top: 1px dotted rgb(11 12 14 / .14); } .dish-name { font-size: .96rem; line-height: 1.42; } .dish-name em { font-style: italic; color: var(--encre-douce); font-size: .88em; } .dish-price { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: .6rem; } /* La spécialité de la maison prend le contrepied du fond clair */ .course-highlight { background: var(--nuit); color: var(--sur-nuit); border-top-color: var(--braise); } .course-highlight .course-title { color: var(--ambre); border-bottom-color: var(--nuit-3); } .course-highlight .dishes li + li { border-top-color: rgb(244 241 235 / .14); } .course-highlight .dish-name em { color: var(--acier); } .carte-notes { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: .55rem; max-width: 72ch; } .carte-notes li { position: relative; padding-left: 1.4rem; font-size: .89rem; color: var(--encre-douce); } .carte-notes li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--braise); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); } .ardoise { margin-top: clamp(2.5rem, 5vw, 4rem); } .ardoise-inner { background: var(--nuit); color: var(--sur-nuit); padding: clamp(1.8rem, 4vw, 3rem); border-left: 3px solid var(--ambre); } .ardoise-inner p { margin-top: 1rem; color: var(--sur-nuit-doux); max-width: 68ch; } .ardoise-note { font-size: .84rem; color: var(--acier) !important; } /* ══ La vidéo ══════════════════════════════════════════════ */ /* La colonne de droite tient les photos puis la vidéo. Sans elle, la colonne s'arrêtait à mi-hauteur du texte et laissait un grand vide noir. La vidéo occupe la hauteur qui reste (`1fr`) : les deux colonnes se terminent alors ensemble, quelle que soit la longueur du texte — qui, elle, change dès que le restaurant modifie sa présentation. Un alignement calculé une fois à la main n'aurait pas survécu à la première correction. */ .resto-media { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; align-content: stretch; } .video-facade { display: block; position: relative; width: 100%; padding: 0; overflow: hidden; background: var(--nuit-2); cursor: pointer; /* La progression est celle de la façade dans la page, pas celle de l'image dans la façade. */ view-timeline-name: --video-vue; } .video-facade { min-height: 0; } .video-facade img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; /* La mise au point : sombre et trop grande à l'entrée, nette et posée au centre. La minuterie est le défilement lui-même — l'image suit le geste du visiteur. Les navigateurs qui ignorent `view()` l'affichent nette d'emblée, ce qui reste juste. */ animation: video-mise-au-point linear both; animation-timeline: --video-vue; animation-range: entry 0% cover 48%; } @keyframes video-mise-au-point { from { transform: scale(1.14); filter: brightness(.42) saturate(.7); } to { transform: scale(1); filter: brightness(1) saturate(1); } } /* Le survol passe par un voile : agir sur `filter` entrerait en conflit avec l'animation de mise au point, qui l'emporterait. */ .video-facade::after { content: ""; position: absolute; inset: 0; background: rgb(11 12 14 / .3); opacity: 0; transition: opacity var(--fast); pointer-events: none; } .video-facade:hover::after { opacity: 1; } /* Le bouton de lecture : un disque d'ambre d'où partent deux ondes, dès que la vignette entre dans le champ. C'est ce qui accroche l'œil au défilement ; au repos, hors écran, rien ne tourne. */ .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(56px, 6vw, 78px); height: clamp(56px, 6vw, 78px); border-radius: 50%; background: var(--ambre); display: grid; place-items: center; transition: transform var(--fast), background var(--fast); } .video-play svg { width: 40%; height: 40%; fill: var(--nuit); margin-left: 7%; } .video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.07); background: var(--ambre-fonce); } .video-play::before, .video-play::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--ambre); border-radius: 50%; opacity: 0; pointer-events: none; } .video-facade.is-in .video-play::before { animation: onde 2.8s ease-out infinite; } .video-facade.is-in .video-play::after { animation: onde 2.8s ease-out infinite 1.4s; } @keyframes onde { 0% { inset: -4px; opacity: .85; } 70% { opacity: .18; } 100% { inset: -30px; opacity: 0; } } /* Une barre de lecteur en pied de vignette : elle porte le triangle et le libellé sur toute la largeur, ce qui distingue la vidéo des photos voisines même sans regarder le centre. */ .video-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem; background: linear-gradient(180deg, transparent, rgb(11 12 14 / .82) 42%); color: var(--sur-nuit); font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-align: left; } .video-label::before { content: ""; flex: 0 0 auto; width: 0; height: 0; border-left: 9px solid var(--ambre); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } /* La fenêtre de lecture */ .videobox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgb(6 7 8 / .95); display: grid; place-items: center; padding: clamp(1rem, 5vw, 4rem); } .videobox[hidden] { display: none; } .videobox-cadre { width: min(100%, 1180px); aspect-ratio: 16 / 9; background: #000; } .videobox-cadre iframe { width: 100%; height: 100%; border: 0; } .videobox-close { position: absolute; top: 1rem; right: 1rem; width: 3rem; height: 3rem; display: grid; place-items: center; font-size: 2.8rem; line-height: 1; color: var(--sur-nuit); transition: color var(--fast); } .videobox-close:hover { color: var(--ambre); } .videobox-credit { margin-top: .9rem; font-size: .8rem; color: var(--acier); text-align: center; } /* ══ Salle & terrasse ══════════════════════════════════════ */ .lieu { padding-block: 0; } .lieu-media { position: relative; height: clamp(340px, 52vh, 620px); } .lieu-media img { width: 100%; height: 100%; object-fit: cover; } .lieu-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 12 14 / .55) 0%, rgb(11 12 14 / .1) 40%, var(--nuit) 100%); } .lieu-inner { position: relative; margin-top: clamp(-7rem, -8vw, -4rem); padding-bottom: var(--section-y); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } .lieu-texte p { margin-block: 1.2rem; color: var(--sur-nuit-doux); } .lieu-texte .h2 { margin-top: .2rem; } .points { display: grid; gap: .7rem; margin-bottom: 2rem; } .points li { position: relative; padding-left: 1.6rem; font-size: .95rem; color: var(--sur-nuit-doux); } .points li::before { content: ""; position: absolute; left: 0; top: .58em; width: 12px; height: 3px; background: var(--ambre); clip-path: polygon(0 0, 100% 38%, 100% 62%, 0 100%); } .lieu-shots { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; aspect-ratio: 5 / 2; } .lieu-shots figure { overflow: hidden; background: var(--nuit-2); min-height: 0; } .lieu-shots img { display: block; } .lieu-shots img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); } .lieu-shots figure:hover img { transform: scale(1.04); } /* ══ Avis ══════════════════════════════════════════════════ */ .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgb(11 12 14 / .14); border: 1px solid rgb(11 12 14 / .14); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .stats li { background: var(--os); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; } .stats strong { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); line-height: .95; color: var(--braise); } .stats span { font-size: .84rem; color: var(--encre-douce); } .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: 1.2rem; } .quote { background: var(--os-2); padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; border-top: 2px solid var(--braise); } .quote blockquote { font-family: var(--display); font-size: 1.16rem; line-height: 1.42; flex: 1; } .quote blockquote::before { content: "« "; color: var(--braise); } .quote blockquote::after { content: " »"; color: var(--braise); } .quote figcaption { display: flex; flex-direction: column; gap: .1rem; } .quote-author { font-weight: 600; font-size: .93rem; } .quote-meta { font-size: .8rem; color: var(--encre-douce); } .avis-foot { margin-top: 2rem; display: flex; flex-direction: column; gap: .5rem; } .avis-foot > a { align-self: flex-start; font-weight: 600; color: var(--braise); border-bottom: 1px solid currentColor; padding-bottom: 2px; } .avis-note { font-size: .78rem; color: var(--encre-douce); } /* ══ Galerie ═══════════════════════════════════════════════ */ .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; gap: .75rem; } .tile { overflow: hidden; background: var(--nuit-2); padding: 0; position: relative; } .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease), opacity var(--fast); } .tile::after { content: ""; position: absolute; inset: 0; background: rgb(11 12 14 / .28); opacity: 0; transition: opacity var(--fast); } .tile:hover img { transform: scale(1.06); } .tile:hover::after { opacity: 1; } .tile-tall { grid-row: span 2; } .tile-square { grid-row: span 1; } /* Conservé pour un usage ponctuel, mais la galerie livrée n'en use pas : une tuile de deux colonnes ne se loge jamais dans un reste d'une colonne, et creuse un trou que `dense` ne peut pas combler. */ .tile-wide { grid-column: span 2; } /* Toute photo marquée s'agrandit : le curseur l'annonce, et un voile léger la souligne au survol — le même que sur les tuiles de la galerie. */ [data-zoom] { cursor: zoom-in; position: relative; } [data-zoom]::after { content: ""; position: absolute; inset: 0; background: rgb(11 12 14 / .22); opacity: 0; transition: opacity var(--fast); pointer-events: none; } [data-zoom]:hover::after, [data-zoom]:focus-visible::after { opacity: 1; } .lieu-media[data-zoom]::after { background: rgb(11 12 14 / .12); } /* Visionneuse */ .lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgb(6 7 8 / .95); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; } .lightbox button { position: absolute; color: var(--sur-nuit); font-size: 2.4rem; line-height: 1; width: 3rem; height: 3rem; display: grid; place-items: center; transition: color var(--fast); } .lightbox button:hover { color: var(--ambre); } .lightbox-close { top: 1rem; right: 1rem; font-size: 2.8rem; } .lightbox-prev { left: .5rem; top: 50%; transform: translateY(-50%); } .lightbox-next { right: .5rem; top: 50%; transform: translateY(-50%); } /* ══ Infos & contact ═══════════════════════════════════════ */ .infos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .info-card { background: var(--os-2); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; border-top: 2px solid var(--nuit); } .info-card h3 { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--braise); margin-bottom: 1rem; } .info-strong { font-size: 1.05rem; line-height: 1.45; } .info-strong a { border-bottom: 1px solid rgb(11 12 14 / .25); } .info-strong a:hover { border-bottom-color: var(--braise); color: var(--braise); } .info-aside { margin-top: .9rem; font-size: .86rem; color: var(--encre-douce); } .info-aside a { color: var(--braise); border-bottom: 1px solid currentColor; } .info-phone { font-family: var(--display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.1; transition: color var(--fast); } .info-phone:hover { color: var(--braise); } .info-links { margin-top: .8rem; } .info-links a { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; } .info-links svg { width: 18px; height: 18px; fill: currentColor; } .info-links a:hover { color: var(--braise); } .hours { display: grid; gap: .05rem; } .hours li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .38rem; font-size: .92rem; border-bottom: 1px dotted rgb(11 12 14 / .16); } .hours li > span:first-child { font-weight: 600; } .hours li > span:last-child { color: var(--encre-douce); font-variant-numeric: tabular-nums; } .hours li.is-closed > span { color: rgb(85 80 74 / .92); font-style: italic; } .hours li.is-today { background: var(--nuit); color: var(--sur-nuit); margin-inline: -.5rem; padding-inline: .5rem; border-bottom-color: transparent; } .hours li.is-today > span:last-child { color: var(--ambre); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chips li { padding: .32rem .75rem; border: 1px solid rgb(11 12 14 / .2); border-radius: 100px; font-size: .82rem; } .info-card-wide { grid-column: 1 / -1; } /* Sur quatre colonnes, les cartes se répartissent en deux rangées pleines : adresse | horaires (deux colonnes, deux services par jour) | réserver, puis écrire | sur place. Sans cela, la seconde rangée gardait deux emplacements vides à droite. */ @media (min-width: 1040px) { .info-card-hours { grid-column: span 2; } .info-card-ecrire { grid-column: span 2; } .info-card-wide { grid-column: span 2; } } .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; } .map-frame { min-height: 380px; background: var(--os-2); } .map-frame iframe { width: 100%; height: 100%; min-height: 380px; filter: grayscale(1) contrast(1.05); transition: filter var(--fast); } .map-frame:hover iframe { filter: grayscale(0); } .contact-form { background: var(--nuit); color: var(--sur-nuit); padding: clamp(1.6rem, 3.5vw, 2.6rem); } .contact-form .h3 { color: var(--sur-nuit); } .form-intro { margin-block: .8rem 1.6rem; color: var(--sur-nuit-doux); font-size: .95rem; } .field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; } .field label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acier); } .field input, .field textarea { background: var(--nuit-2); border: 1px solid var(--nuit-3); border-radius: 2px; padding: .72rem .85rem; color: var(--sur-nuit); transition: border-color var(--fast); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--ambre); } .field textarea { resize: vertical; min-height: 110px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .consent { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.4rem; font-size: .84rem; color: var(--sur-nuit-doux); cursor: pointer; } .consent input { margin-top: .25rem; accent-color: var(--ambre); } .form-status { margin-top: 1rem; font-size: .9rem; min-height: 1.2em; } .form-status.is-ok { color: var(--ambre); } .form-status.is-error { color: #FF8A80; } .form-aside { margin-top: 1.2rem; font-size: .84rem; color: var(--acier); } .form-aside a { border-bottom: 1px solid currentColor; } .form-aside a:hover { color: var(--ambre); } /* ══ Pied de page ══════════════════════════════════════════ */ .footer { background: var(--nuit-2); border-top: 1px solid var(--nuit-3); padding-top: clamp(3rem, 6vw, 4.5rem); } .footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 2.5rem; } .footer-brand .brand-blade { width: 60px; height: 13px; margin-bottom: 1rem; } .footer-name { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; } .footer-tagline { margin-top: .5rem; font-size: .9rem; color: var(--acier); max-width: 34ch; } .footer-nav ul { display: grid; gap: .5rem; } .footer-nav a { font-size: .9rem; color: var(--sur-nuit-doux); transition: color var(--fast); } .footer-nav a:hover { color: var(--ambre); } .footer-contact p { font-size: .9rem; color: var(--sur-nuit-doux); } .footer-contact p + p { margin-top: .5rem; } .footer-contact a:hover { color: var(--ambre); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding-block: 1.3rem; border-top: 1px solid var(--nuit-3); font-size: .78rem; color: var(--acier); } .footer-bottom a:hover { color: var(--ambre); } /* ══ Barre d'appel (téléphone) ═════════════════════════════ */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: none; background: rgb(11 12 14 / .96); backdrop-filter: blur(12px); border-top: 1px solid var(--nuit-3); padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); gap: .5rem; } .callbar-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: .6rem; background: var(--ambre); color: var(--nuit); padding: .7rem 1rem; border-radius: 2px; } .callbar-main svg { width: 19px; height: 19px; fill: currentColor; } .callbar-label { display: flex; flex-direction: column; line-height: 1.15; } .callbar-label strong { font-size: .95rem; font-weight: 600; } .callbar-label small { font-size: .74rem; opacity: .8; } .callbar-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem .8rem; font-size: .66rem; color: var(--sur-nuit-doux); } .callbar-side svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } /* ══ Révélation au défilement ══════════════════════════════ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* ══ Adaptations ═══════════════════════════════════════════ */ @media (max-width: 1040px) { .resto-grid, .signature, .lieu-inner, .contact-grid { grid-template-columns: 1fr; } .lieu-inner { align-items: start; } .mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; } } /* Au-delà du seuil du menu, le panneau plein écran n'a plus lieu d'être : la règle vaut même si le JavaScript n'a pas suivi le redimensionnement. Sans elle, agrandir la fenêtre menu ouvert laissait le site derrière un voile noir. */ @media (min-width: 861px) { .drawer { display: none; } } @media (max-width: 860px) { .nav, .btn-header { display: none; } .burger { display: block; } /* Deux repères seulement sur téléphone : le troisième était le numéro, que la barre du bas affiche déjà en bouton, et le quatrième passait sous cette barre sans jamais se voir. On garde les deux qui décident — est-ce bon, est-ce ouvert. Le reste est dit dans « Infos ». La règle porte sur le rang, pas sur le contenu : si le restaurant réordonne ses repères depuis le CMS, ce sont ses deux premiers qui s'affichent. */ .hero-strip { grid-template-columns: repeat(2, 1fr); } .hero-strip li:nth-child(odd) { padding-left: 0; border-left: 0; } .hero-strip li:nth-child(n+3) { display: none; } .hero-scroll { display: none; } /* La barre du bas porte déjà « Réserver » et « La carte », et elle reste sous le pouce pendant tout le défilement. Les deux boutons du hero n'y ajoutaient rien : ils répétaient les mêmes actions à deux cents pixels d'écart et mangeaient un tiers de l'écran d'accueil. Ils restent en place sur grand écran, où aucune barre ne les double. */ .hero-actions { display: none; } .hero-lede { margin-bottom: .5rem; } .callbar { display: flex; } body { padding-bottom: 4.6rem; } /* Le hero occupait toute la hauteur d'écran sans tenir compte de la barre fixe, qui recouvrait donc sa bande de repères. Le padding du body ne protège que la fin du document, pas un bloc en pleine hauteur. */ .hero { min-height: calc(100svh - 4.6rem); } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .stats { grid-template-columns: 1fr; } .lieu-shots { grid-template-columns: 1fr 1fr; } .course-highlight { grid-row: auto; } } /* « VERVIERS · RUE JULES CEREXHE » demande 334 px avec son filet : sur un écran de 320 ou 360 px, il se cassait en deux lignes. On resserre la taille et l'interlettrage juste assez pour qu'il tienne — il reste plus grand qu'un sur-titre de section. */ @media (max-width: 480px) { .hero .kicker { font-size: .8rem; letter-spacing: .11em; } .hero .kicker::after { width: 26px; } } @media (max-width: 600px) { .facts { grid-template-columns: 1fr; } .resto-shots { grid-template-columns: 1fr; } .shot-tall { grid-row: auto; aspect-ratio: 3 / 4; } .resto-media { grid-template-rows: auto auto; } .resto-shots { grid-template-rows: none; } .shot-wide { aspect-ratio: 3 / 2; } .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } .tile-wide { grid-column: span 2; } .field-row { grid-template-columns: 1fr; } .signature-media::before { inset: -8px -8px 8px 8px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-line { -webkit-mask-image: none; mask-image: none; animation: none; } .hero .kicker, .hero-lede, .hero-actions, .hero-strip li { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none; } .video-facade img { animation: none; transform: none; filter: none; } .video-play::before, .video-play::after { animation: none; } .hero-scroll-blade { animation: none; } * { transition-duration: 1ms !important; } } /* Mode édition du CMS : les zones éditables se signalent au survol. Les règles restent inertes tant que edit-mode.js n'a pas posé la classe sur . */ body.edit-mode [data-edit] { outline: 1px dashed rgb(var(--ambre-rgb) / .5); outline-offset: 3px; cursor: text; } body.edit-mode [data-edit]:hover { outline-color: var(--ambre); background: rgb(var(--ambre-rgb) / .08); }