/* ===================================================== LE BAB – CSS principal Tokens injectés dynamiquement via PHP/ACF dans Ici on utilise les var() avec fallback ===================================================== */ /* ===================================================== FONTS – Montserrat auto-hébergée ===================================================== */ @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Titan One'; src: url('../fonts/titan-one-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ===================================================== TOKENS PAR DÉFAUT (surchargés par PHP depuis ACF) ===================================================== */ :root { --color-dark: #242527; --color-teal: #319193; --color-teal-light: #58a5a7; --color-yellow: #f4bd10; --color-purple: #846aa2; --color-beige: #f8eee2; --color-bg: #eeeded; --color-brown: #c18b52; --color-text: #242527; --font-primary: 'Montserrat', sans-serif; --font-size-base: 18px; /* Espacements */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --space-2xl: 8rem; /* Largeur container */ --container-max: 1280px; --container-pad: clamp(1rem, 4vw, 3rem); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 300ms ease; } /* ===================================================== RESET & BASE ===================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: 400; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ===================================================== UTILITAIRES ===================================================== */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .section-label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-teal); margin-bottom: var(--space-xs); } /* Animations au scroll */ .js-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .js-reveal.is-visible { opacity: 1; transform: none; } /* ===================================================== WYSIWYG ===================================================== */ .wysiwyg p { margin-bottom: 1em; } .wysiwyg p:last-child { margin-bottom: 0; } .wysiwyg strong { font-weight: 700; } .wysiwyg em { font-style: italic; } .wysiwyg a { color: var(--color-teal); text-decoration: underline; } .wysiwyg--light p, .wysiwyg--light strong, .wysiwyg--light em { color: var(--color-beige); } .wysiwyg--light a { color: var(--color-yellow); } /* ===================================================== BOUTONS ===================================================== */ .btn { display: inline-block; padding: 0.7em 1.5em; font-family: var(--font-primary); font-size: 1rem; font-weight: 600; text-align: center; border: 1px solid currentColor; transition: background-color var(--transition-base), color var(--transition-base); cursor: pointer; text-decoration: none; } .btn--outline { color: var(--color-dark); background-color: white; border-color: var(--color-dark); } .btn--outline:hover, .btn--outline:focus-visible { background-color: var(--color-dark); color: white; } .btn--yellow { color: var(--color-dark); background-color: var(--color-yellow); border-color: white; } .btn--yellow:hover, .btn--yellow:focus-visible { background-color: var(--color-dark); color: var(--color-yellow); } /* ===================================================== HEADER ===================================================== */ .site-header { /* fixed (et pas sticky) : rétrécir au scroll ne modifie plus le flux, donc plus d'oscillation/jank pendant le défilement */ position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: var(--color-dark); /* 1:1 maquette réduit de 25% : 181px de haut à 1920px, scale proportionnel en dessous */ height: clamp(105px, 9.41vw, 181px); transition: height var(--transition-base, 0.3s ease), box-shadow var(--transition-base, 0.3s ease); } /* Compense la hauteur du header fixe (valeur constante = grand header → aucun reflow au scroll) */ .site-main { padding-top: clamp(105px, 9.41vw, 181px); } /* Décalage de la barre d'admin WordPress (uniquement connecté, en dev) */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* État réduit au scroll (classe ajoutée par le JS) */ .site-header--scrolled { height: clamp(64px, 5vw, 84px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .site-header--scrolled .site-logo { height: clamp(44px, 3.6vw, 58px); } .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; padding-inline: clamp(1.5rem, 5vw, 5rem); gap: var(--space-md); } .site-header__nav .nav-menu { display: flex; gap: var(--space-md); align-items: center; } .site-header__nav--left .nav-menu { justify-content: flex-start; } .site-header__right { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1rem, 2.5vw, 2.75rem); } .site-header__nav--right .nav-menu { justify-content: flex-end; } .site-header__nav--left .nav-menu { gap: clamp(1rem, 3vw, 3.5rem); } .nav-menu a { font-size: clamp(0.8125rem, 0.94vw, 1.125rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-beige); transition: color var(--transition-fast); white-space: nowrap; } .nav-menu a:hover, .nav-menu a:focus-visible { color: var(--color-yellow); } .header-tagline { font-size: clamp(0.8125rem, 0.94vw, 1.125rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-beige); white-space: nowrap; } .site-header__logo { display: flex; justify-content: center; align-items: center; } .site-logo { height: clamp(82px, 8.48vw, 163px); width: auto; max-height: none; transition: height var(--transition-base, 0.3s ease); } .site-logo-text { font-size: 1.5rem; font-weight: 900; color: var(--color-beige); text-align: center; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; } /* Icônes sociales */ .site-header__social { display: flex; gap: var(--space-xs); align-items: center; } .site-header__social a { color: var(--color-beige); display: flex; align-items: center; transition: color var(--transition-fast); } .site-header__social a svg { width: clamp(22px, 1.5vw, 28px); height: auto; } .site-header__social a:hover, .site-header__social a:focus-visible { color: var(--color-yellow); } /* Burger (mobile) */ .site-header__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 110; } .burger-line { display: block; width: 24px; height: 2px; background-color: var(--color-beige); transition: transform var(--transition-fast), opacity var(--transition-fast); } .site-header__burger[aria-expanded='true'] .burger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .site-header__burger[aria-expanded='true'] .burger-line:nth-child(2) { opacity: 0; } .site-header__burger[aria-expanded='true'] .burger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Menu mobile */ .mobile-menu { display: none; flex-direction: column; background-color: var(--color-dark); padding: var(--space-md) var(--container-pad); gap: var(--space-sm); border-top: 1px solid rgba(255, 255, 255, 0.1); } .mobile-menu.is-open { display: flex; } .mobile-nav-menu { display: flex; flex-direction: column; gap: var(--space-xs); } .mobile-nav-menu a { display: block; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-beige); padding-block: 0.7em; border-bottom: 1px solid rgba(255, 255, 255, 0.12); transition: color var(--transition-fast); } .mobile-nav-menu a:hover, .mobile-nav-menu a:focus-visible { color: var(--color-yellow); } .mobile-menu__tagline { display: block; margin-top: var(--space-sm); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-yellow); } .mobile-menu__social { display: flex; gap: var(--space-md); margin-top: var(--space-sm); } .mobile-menu__social a { color: var(--color-beige); transition: color var(--transition-fast); } .mobile-menu__social a:hover, .mobile-menu__social a:focus-visible { color: var(--color-yellow); } /* ===================================================== HERO ===================================================== */ /* Conteneur hero + bandeau : contexte de positionnement pour la carte évènement qui déborde à cheval sur les sections. PAS d'overflow:hidden. */ .hero-wrap { position: relative; } .hero { position: relative; width: 100%; /* moins haut pour limiter le scroll */ height: 68svh; min-height: 440px; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: var(--space-lg); /* header statique : pas de compensation nécessaire */ } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Dégradé léger pour lisibilité du titre */ .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.45) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; padding-inline: clamp(1rem, 4vw, 3.5rem); width: 100%; } /* Le titre H1 porte le logo (texte « Le BAB » accessible via alt) */ .hero__title { margin: 0; /* décalé vers le centre */ margin-left: clamp(0px, 15vw, 280px); line-height: 0; } .hero__logo { /* Largeur bornée à la fois par la largeur (42vw) ET la hauteur dispo (63svh), hauteur auto → ratio préservé, jamais écrasé, et garde un espace en haut. */ width: clamp(180px, min(42vw, 63svh), 787px); height: auto; display: block; /* ombre douce pour détacher le logo blanc de la photo */ filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35)); } .hero__subtitle { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 700; text-transform: uppercase; color: var(--color-teal-light); letter-spacing: 0.1em; margin-top: var(--space-sm); } /* Carte évènement : visuel auto-suffisant, à cheval sur le hero, le bandeau et la section suivante (ancrée par le bas du conteneur). */ .event-card { position: absolute; right: clamp(1rem, 5vw, 5rem); bottom: clamp(-160px, -8vw, -90px); z-index: 10; width: clamp(220px, 26vw, 400px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .event-card__img { width: 100%; height: auto; display: block; } /* Onglet / bouton fermer / backdrop : uniquement sur mobile */ .event-tab, .event-card__close, .event-backdrop { display: none; } /* ===================================================== TICKER (bandeau défilant) ===================================================== */ .ticker-wrap { background-color: var(--color-teal-light); overflow: hidden; padding-block: clamp(0.56rem, 1.2vw, 1.43rem); } .ticker { display: flex; align-items: center; /* défilement lent en boucle */ animation: ticker-scroll 40s linear infinite; width: max-content; } /* Chaque item est un SVG : le texte est ajouré via un vrai contour vectoriel (stroke-linejoin: round = angles nets), et reste du vrai texte (SEO + a11y). */ .ticker__item { flex: 0 0 auto; display: block; height: clamp(1.9rem, 4vw, 4rem); width: auto; margin-right: clamp(2rem, 4vw, 5rem); overflow: visible; } .ticker__text { fill: var(--color-dark); font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 100px; text-transform: uppercase; } /* 2 copies identiques (marge incluse) → -50% = boucle sans couture */ @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker { animation: none; } } /* ===================================================== CONCEPT — scène reproduite 1:1 (coordonnées Figma 1920px) puis mise à l'échelle proportionnelle à la largeur. ===================================================== */ .concept { background-color: #fff; position: relative; overflow: hidden; /* espace entre le bandeau défilant et la section concept */ padding-top: clamp(2.5rem, 6vw, 6rem); } /* Boîte qui réserve la hauteur (ratio de la maquette) et sert de conteneur de requête pour le facteur d'échelle (cqw). */ .concept__stage-wrap { position: relative; width: 100%; max-width: 1920px; margin-inline: auto; aspect-ratio: 1920 / 1760; container-type: inline-size; overflow: hidden; } /* La scène est dessinée en pixels « design » (1920×1760) puis scalée. */ .concept__stage { position: absolute; top: 0; left: 0; width: 1920px; height: 1760px; transform: scale(calc(100cqw / 1920px)); transform-origin: top left; } .concept__stage > * { position: absolute; } /* Filigrane « LE BAB » en fond */ .concept__watermark { left: -377px; top: 95px; width: 2794px; height: auto; opacity: 0.06; filter: brightness(0); z-index: 0; pointer-events: none; user-select: none; } /* Bloc d'intro « LE CONCEPT » */ .concept__intro { left: 510px; top: 28px; width: 895px; z-index: 2; } .concept__title { font-size: 85px; font-weight: 900; text-transform: uppercase; color: var(--color-dark); line-height: 1; margin: 0 0 5px; } .concept__subtitle { font-size: 47px; font-weight: 700; color: var(--color-dark); line-height: 1; margin: 0 0 28px; } .concept__intro .concept__tagline { width: 433px; } .concept__tagline { font-size: 18px; font-weight: 700; color: var(--color-teal); line-height: 28px; margin: 0 0 28px; } .concept__body { font-size: 18px; line-height: 28px; color: var(--color-dark); } .concept__body p + p { margin-top: 28px; } /* Le wrapper ne génère pas de boîte : les figures restent positionnées dans la scène */ .concept__photos { display: contents; } /* Photos positionnées aux coordonnées Figma */ .concept__photo { position: absolute; margin: 0; overflow: hidden; z-index: 1; } .concept__photo img { width: 100%; height: 100%; object-fit: cover; } .concept__photo--left { left: -6px; top: 0; width: 349px; height: 831px; } .concept__photo--interior { left: 413px; top: 545px; width: 576px; height: 678px; } .concept__photo--main { left: 1060px; top: 724px; width: 531px; height: 957px; } .concept__photo--topright { left: 1662px; top: 188px; width: 266px; height: 336px; } .concept__photo--bottomright { left: 1662px; top: 578px; width: 267px; height: 508px; } /* Bloc secondaire « Simple, engagé, vivant » */ .concept__secondary { left: 212px; top: 1445px; width: 636px; z-index: 2; } .concept__secondary-title { font-size: 47px; font-weight: 700; color: var(--color-dark); line-height: 1; margin: 0 0 19px; } .concept__secondary .concept__tagline { margin: 0 0 44px; } /* ---- Mobile : on casse la scène en colonne empilée ---- */ @media (max-width: 768px) { .concept { padding-block: var(--space-xl); } .concept__stage-wrap { aspect-ratio: auto; height: auto; container-type: normal; overflow: visible; } .concept__stage { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; gap: var(--space-md); padding-inline: var(--container-pad); } .concept__stage > * { position: static; } .concept__watermark { display: none; } .concept__intro, .concept__secondary, .concept__intro .concept__tagline { width: auto; } .concept__secondary { margin-top: var(--space-md); } .concept__title, .concept__secondary-title { font-size: clamp(2.25rem, 11vw, 3.5rem); margin-bottom: 0.5rem; } .concept__subtitle { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 1rem; } .concept__tagline { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; } .concept__secondary .concept__tagline { margin-bottom: 1rem; } .concept__body { font-size: 1rem; line-height: 1.6; } /* Photos en carousel horizontal (scroll tactile + snap) */ .concept__photos { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; /* déborde un peu pour aller bord à bord */ margin-inline: calc(-1 * var(--container-pad)); padding-inline: var(--container-pad); } .concept__photo { position: static; flex: 0 0 78%; width: 78%; height: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; } } /* ===================================================== BANDEAU JAUNE ===================================================== */ .banner-yellow { position: relative; background-color: var(--color-yellow); padding-block: var(--space-md); overflow: hidden; } /* Swoosh décoratif (trait dessiné) sous le texte du bandeau */ .banner-yellow__swoosh { position: absolute; left: 50%; bottom: 0.4rem; width: min(70%, 1100px); height: 2.2rem; transform: translateX(-50%); background-repeat: no-repeat; background-position: center; background-size: contain; /* le SVG est jaune (#F4BD10) ; on le fonce pour qu'il ressorte sur le jaune */ filter: brightness(0) saturate(100%); opacity: 0.85; pointer-events: none; } .banner-yellow__inner { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; transform: rotate(-1.3deg); padding-block: 0.5rem; } .banner-yellow__inner span { font-size: clamp(2rem, 5vw, 5rem); font-weight: 500; text-transform: uppercase; color: var(--color-dark); white-space: nowrap; } /* ===================================================== SECTION MENU / CARTE (ardoise) — scène compacte (design 1920×1000) ===================================================== */ .menu-section { position: relative; /* fond blanc : le bandeau chevauche du blanc (continuité concept), pas de gris */ background-color: #fff; } .menu-stage-wrap { position: relative; width: 100%; max-width: 1920px; margin-inline: auto; aspect-ratio: 1920 / 1000; container-type: inline-size; overflow: hidden; } .menu-stage { position: absolute; top: 0; left: 0; width: 1920px; height: 1200px; transform: scale(calc(100cqw / 1920px)); transform-origin: top left; } .menu-stage > * { position: absolute; } /* Fond ardoise (verres dessinés intégrés) */ .menu-stage__bg { left: 0; top: 101px; width: 1921px; height: 899px; object-fit: cover; z-index: 0; } /* Bandeau (forme SVG), à cheval sur le haut de l'ardoise */ .menu-banner { left: 370px; top: 0; width: 1180px; height: 179px; background-image: url('../images/menu-banner.svg'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; display: flex; align-items: center; justify-content: center; z-index: 4; } .menu-banner span { font-size: 60px; font-weight: 500; text-transform: uppercase; color: var(--color-dark); white-space: nowrap; transform: rotate(-1.29deg); } /* Titres des catégories (texte ACF, police Titan One) */ .menu-cats { left: 660px; top: 270px; width: 600px; height: 700px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; } .menu-cat__title { font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 52px; line-height: 1; color: #fff; text-transform: uppercase; margin: 0; } .menu-cat__subtitle { font-family: var(--font-primary); font-weight: 800; font-size: 19px; line-height: 1.15; color: #fff; text-transform: uppercase; margin: 6px 0 0; } /* Textes latéraux */ .menu-txt { z-index: 3; color: #fff; font-size: 18px; line-height: 24px; } .menu-txt p { margin: 0; font-weight: 500; } .menu-txt p + p { margin-top: 0.25em; } /* accents jaunes (lignes italiques + titre Ambiance) */ .menu-txt em, .menu-txt i { color: var(--color-yellow); font-style: italic; } .menu-txt--ambiance strong, .menu-txt--ambiance b { color: var(--color-yellow); text-transform: uppercase; font-weight: 700; } .menu-txt--bieres { left: 157px; top: 400px; width: 420px; } .menu-txt--vins { left: 1386px; top: 360px; width: 380px; } .menu-txt--ambiance { left: 210px; top: 740px; width: 320px; } .menu-txt--planches { left: 1443px; top: 712px; width: 330px; } /* Flèches dessinées jaunes */ .menu-arrow { z-index: 3; height: auto; pointer-events: none; } .menu-arrow--bieres { left: 269px; top: 300px; width: 340px; } .menu-arrow--vins { left: 1164px; top: 250px; width: 375px; } .menu-arrow--planches { left: 1184px; top: 845px; width: 290px; } .menu-arrow--ambiance { left: 280px; top: 620px; width: 50px; } .menu-arrow--ambiance2 { left: 203px; top: 855px; width: 160px; } /* ---- Mobile : ardoise empilée ---- */ @media (max-width: 768px) { .menu-section { background-color: var(--color-dark); background-image: url('../images/menu-chalkboard.jpg'); background-size: cover; background-position: center; padding-block: var(--space-xl); } .menu-stage-wrap { aspect-ratio: auto; height: auto; container-type: normal; overflow: visible; } .menu-stage { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); padding-inline: var(--container-pad); } .menu-stage > * { position: static; } .menu-stage__bg, .menu-arrow { display: none; } .menu-banner { width: min(94%, 460px); max-width: none; height: auto; aspect-ratio: auto; min-height: 64px; padding: 0.9rem 2.2rem; background-size: 100% 100%; margin-bottom: var(--space-sm); } .menu-banner span { /* le texte peut passer sur 2 lignes et n'est plus incliné (sinon il déborde) */ white-space: normal; text-align: center; line-height: 1.1; transform: none; font-size: clamp(1.05rem, 5.2vw, 1.6rem); } .menu-cats { width: 100%; height: auto; gap: var(--space-md); } .menu-cat__title { font-size: clamp(2.25rem, 11vw, 3.5rem); } .menu-cat__subtitle { font-size: clamp(0.9rem, 4vw, 1.25rem); } .menu-txt { width: 100%; max-width: 440px; text-align: left; font-size: 1rem; line-height: 1.6; } } /* ===================================================== CAROUSEL (galerie défilante, pause au survol) ===================================================== */ .carousel { position: relative; z-index: 1; width: 100%; overflow: hidden; } .carousel__track { display: flex; width: max-content; animation: carousel-scroll 45s linear infinite; will-change: transform; } /* pause au survol (et au focus clavier) */ .carousel:hover .carousel__track, .carousel:focus-within .carousel__track { animation-play-state: paused; } .carousel__item { flex: 0 0 auto; width: clamp(240px, 26vw, 458px); aspect-ratio: 458 / 440; margin-right: 18px; overflow: hidden; } .carousel__img { width: 100%; height: 100%; object-fit: cover; } /* La piste contient 2 jeux d'images identiques (marge incluse) : translater de -50% revient exactement au point de départ → boucle nette. */ @keyframes carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .carousel__track { animation: none; } } /* ===================================================== SECTION BRASSERIE ===================================================== */ .brasserie { padding-block: var(--space-xl); background-color: var(--color-teal); position: relative; overflow: hidden; } /* Grand filigrane « LE BAB » en fond (comme les sections précédentes) */ .brasserie::before { content: ''; position: absolute; inset: 0; background-image: url('../images/logo-lebab.png'); background-repeat: no-repeat; background-position: center 38%; background-size: clamp(700px, 105vw, 2000px); opacity: 0.1; pointer-events: none; z-index: 0; } /* Le contenu passe au-dessus du filigrane */ .brasserie__images { position: relative; z-index: 1; } .brasserie__image-wrap { position: relative; z-index: 1; } /* Texte d'intro (haut de section, aligné à droite comme la maquette) */ .brasserie__intro { position: relative; z-index: 1; margin-bottom: var(--space-lg); } .brasserie__intro p { max-width: 760px; margin-left: auto; font-size: 1.0625rem; font-weight: 700; line-height: 1.55; color: var(--color-dark); text-align: left; } /* La carte (texte + 2 cartes) sous le carousel */ .brasserie__header { position: relative; z-index: 1; text-align: left; margin-top: var(--space-xl); margin-bottom: var(--space-lg); } .brasserie__header .section-label { color: var(--color-dark); opacity: 0.85; } .brasserie__title { font-size: clamp(1.5rem, 3.5vw, 2.6rem); font-weight: 800; text-transform: uppercase; color: var(--color-dark); line-height: 1.1; margin-bottom: var(--space-sm); max-width: 1006px; } .brasserie__text { max-width: 941px; font-size: 1rem; color: var(--color-dark); } .brasserie__images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; } .brasserie__image-wrap { display: flex; flex-direction: column; gap: var(--space-md); align-items: center; } .brasserie__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; } /* ===================================================== FOOTER ===================================================== */ .site-footer { background-color: var(--color-dark); padding-block: var(--space-xl); } .site-footer__inner { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: var(--space-lg); align-items: start; } .footer-logo { width: clamp(130px, 14vw, 200px); max-width: none; height: auto; } .footer-logo-text { font-size: 1.5rem; font-weight: 900; color: var(--color-beige); text-transform: uppercase; line-height: 1; } .footer-col-title { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 700; color: var(--color-beige); line-height: 1.1; margin-bottom: var(--space-sm); } .footer-address, .footer-text { font-size: 1rem; font-style: normal; color: var(--color-beige); line-height: 1.75; margin-bottom: var(--space-sm); } .footer-link { display: block; color: var(--color-beige); font-size: 1rem; line-height: 1.75; transition: color var(--transition-fast); margin-bottom: 0.25em; } .footer-link:hover, .footer-link:focus-visible { color: var(--color-yellow); } .footer-link--yellow { color: var(--color-yellow); } .footer-locate { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.35em; } .site-footer__bottom { padding-block: var(--space-md); margin-top: var(--space-lg); } .footer-nav { margin-top: var(--space-md); } /* Liste des liens (repli OU sortie de wp_nav_menu) */ .footer-nav__list { display: flex; flex-wrap: wrap; gap: 0.25em 1.5em; justify-content: center; list-style: none; margin: 0; padding: 0; } .footer-nav__list a, .footer-nav-link { font-size: 0.875rem; color: #aca17b; transition: color var(--transition-fast); } .footer-nav__list a:hover, .footer-nav__list a:focus-visible, .footer-nav-link:hover, .footer-nav-link:focus-visible { color: var(--color-beige); } .footer-legal { font-size: 0.8rem; color: var(--color-bg); text-align: center; line-height: 1.7; text-transform: uppercase; max-width: 1100px; margin-inline: auto; opacity: 0.85; } /* ===================================================== PAGES LÉGALES / TEXTE (Mentions légales, CGV…) ===================================================== */ .legal { background-color: #fff; padding-block: clamp(2.5rem, 6vw, 5rem); } .legal__inner { max-width: 820px; } .legal__title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; text-transform: uppercase; color: var(--color-dark); line-height: 1.05; margin-bottom: var(--space-md); } .legal__content { font-size: 1rem; line-height: 1.75; color: var(--color-dark); } .legal__content h2 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 800; color: var(--color-teal); margin-top: var(--space-md); margin-bottom: 0.5rem; } .legal__content h3 { font-size: 1.1rem; font-weight: 700; margin-top: var(--space-sm); margin-bottom: 0.4rem; } .legal__content p { margin-bottom: 1em; } .legal__content ul, .legal__content ol { margin: 0 0 1em 1.25em; list-style: revert; } .legal__content li { margin-bottom: 0.3em; } .legal__content a { color: var(--color-teal); text-decoration: underline; } /* ===================================================== RESPONSIVE ===================================================== */ /* Tablette large */ @media (max-width: 1200px) { .menu-section__inner { grid-template-columns: 1fr 1.5fr 1fr; gap: var(--space-md); } .concept__main { gap: var(--space-md); } .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-md); } } /* Tablette */ @media (max-width: 900px) { .concept__main { grid-template-columns: 1fr; } .concept__photos { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(160px, auto); grid-template-areas: 'left interior' 'left beer' 'topright beer' 'bottomright beer'; } .menu-section__inner { grid-template-columns: 1fr; } .menu-section__col--left { order: 2; } .menu-section__categories { order: 1; } .menu-section__col--right { order: 3; } .menu-section__image { display: none; } .menu-section__bottom { grid-template-columns: 1fr; gap: var(--space-md); } .brasserie__images { grid-template-columns: 1fr; } .site-footer__inner { grid-template-columns: 1fr 1fr; } } /* Mobile */ @media (max-width: 640px) { :root { --space-lg: 2.5rem; --space-xl: 4rem; } /* Header mobile */ .site-header { height: 72px; } .site-main { padding-top: 72px; } .site-logo { height: 48px; } .site-header--scrolled { height: 58px; } .site-header--scrolled .site-logo { height: 40px; } .site-header__nav { display: none; } .site-header__social, .site-header__right { display: none; } .site-header__burger { display: flex; } /* logo collé à gauche, burger collé à droite */ .site-header__inner { display: flex; grid-template-columns: none; justify-content: space-between; align-items: center; } .site-header__logo { justify-content: flex-start; } /* Hero : moins haut + logo centré */ .hero { height: 60svh; min-height: 420px; } .hero__content { text-align: center; } .hero__title { margin-left: 0; } .hero__logo { margin-inline: auto; width: clamp(200px, 72vw, 360px); } /* --- Évènement mobile : onglet collé à droite + panneau coulissant --- */ /* Le panneau (l'affiche) : caché hors écran à droite, centré verticalement */ .event-card { position: fixed; inset: auto auto auto auto; top: 50%; left: 50%; right: auto; bottom: auto; width: min(82vw, 360px); z-index: 1200; /* part du bord droit, hors écran */ transform: translate(130%, -50%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .event-card.is-open { transform: translate(-50%, -50%); /* glisse jusqu'au centre */ } /* Bouton fermer (coin haut-droit de l'affiche) */ .event-card__close { display: flex; position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-dark); color: #fff; z-index: 2; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } /* Onglet vertical collé au bord droit, toujours visible au scroll */ .event-tab { display: flex; position: fixed; top: 25%; right: 0; z-index: 1100; align-items: center; justify-content: center; padding: 0.9rem 0.45rem; background-color: var(--color-purple); color: var(--color-beige); border-radius: 8px 0 0 8px; box-shadow: -3px 4px 14px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, opacity 0.3s ease; } .event-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; } /* L'onglet s'efface quand le panneau est ouvert */ .event-tab[aria-expanded='true'] { transform: translateX(110%); opacity: 0; pointer-events: none; } /* Voile sombre derrière le panneau */ .event-backdrop { display: block; position: fixed; inset: 0; z-index: 1150; background-color: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .event-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* Carousel : items un peu plus petits sur mobile */ .carousel__item { width: clamp(200px, 64vw, 280px); margin-right: 12px; } /* Footer centré */ .site-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-md); } .footer-locate { justify-content: center; } /* Bandeau */ .banner-yellow__inner span { font-size: 1.5rem; } } /* Focus visible global (accessibilité) */ :focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 0; padding: 0.5em 1em; background-color: var(--color-yellow); color: var(--color-dark); font-weight: 700; z-index: 9999; transition: top var(--transition-fast); } .skip-link:focus { top: 0; }