/* ========================================================= Le Midi - Restaurant - Site one-page Thème SOMBRE, élégant et épuré Charte (logo) : noir chaud + bordeaux + crème. Pas d'or/jaune. ========================================================= */ /* ---------- Webfont : Quicksand (auto-hébergé, version originale 2009) ---------- Police de marque Le Midi. 3 graisses : Light 300, Book 400, Bold 700. Les graisses 500/600/800 du CSS retombent automatiquement sur le 700. */ @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/quicksand-300.woff2') format('woff2'); } @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/quicksand-400.woff2') format('woff2'); } @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/quicksand-700.woff2') format('woff2'); } /* ---------- Variables ---------- */ :root { --bg: #100C0B; /* noir chaud principal */ --bg-2: #16100E; /* section alternée */ --bg-3: #1d1512; /* cartes */ --bg-4: #241a16; /* cartes hover / bordures */ --bordeaux: #7a1d23; /* bordeaux EXACT du logo (code couleur officiel) */ --bordeaux-bright: #98262f; --bordeaux-deep: #2c0a0d; --bordeaux-btn: #8c2530; /* CTA : bordeaux légèrement éclairci, texte crème */ --bordeaux-hover: #a52e3a; --accent: #cd4350; /* accent bordeaux éclairci, lisible sur fond sombre (marques, icônes, points) */ --accent-soft: #de8a93; /* accent texte (rosé bordeaux, lisible sur fond sombre) */ --grad-bordeaux: linear-gradient(135deg, #7a1d23 0%, #4a0f14 100%); /* dégradé bordeaux profond : CTA / blocs forts */ --cream: #F4EEE4; --muted: #a99b8c; --muted-2: #7c7066; --line: rgba(205, 67, 80, .28); --line-soft: rgba(244, 238, 228, .10); --shadow: 0 24px 60px rgba(0, 0, 0, .5); --shadow-sm: 0 10px 30px rgba(0, 0, 0, .35); --radius: 14px; --radius-lg: 22px; --container: 1200px; --header-h: 84px; --ease-out: cubic-bezier(.16, 1, .3, 1); /* easing premium (expo-out) des animations */ --font-head: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) - 10px); -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-body); color: var(--cream); background: var(--bg); line-height: 1.75; font-size: 17px; font-weight: 400; -webkit-font-smoothing: antialiased; /* clip (et non hidden) : rogne tout débordement horizontal en flux (reveals directionnels translateX, SVG des anneaux) sans créer de conteneur de scroll, donc sans casser le scroll programmatique ni la barre de progression. iOS Safari ignore parfois overflow-x:hidden de pour ces débordements. */ overflow-x: clip; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } section { position: relative; } ::selection { background: var(--bordeaux); color: var(--cream); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible, .carousel__arrow:focus-visible { outline-offset: 4px; border-radius: 50px; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 26px; } .section { padding: clamp(70px, 9vw, 130px) 0; } .text-center { text-align: center; } .nowrap { white-space: nowrap; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .btn-block { width: 100%; } .split__cta { margin-top: 28px; } /* ---------- Typographie ---------- */ /* Quicksand n'existe qu'en 300/400/700 : on déclare les graisses réellement servies */ h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.14; color: var(--cream); } .kicker { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: .74rem; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .section-title { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 12px; text-wrap: balance; } .section-title em { font-style: normal; color: var(--accent); } .lead { font-size: clamp(1.04rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 660px; } /* Paragraphes des sections centrées : justifiés pour que toutes les lignes partent du même bord (pas de 1re ligne "décalée"). */ .text-center .lead { margin-left: auto; margin-right: auto; text-align: justify; hyphens: auto; } /* Ornement : filet bordeaux + 3 points (dessiné à l'apparition de la section) */ .ornament { display: flex; gap: 9px; justify-content: center; align-items: center; margin: 20px 0 30px; } .ornament span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .ornament::before, .ornament::after { content: ""; width: 50px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); } .ornament::after { background: linear-gradient(90deg, var(--accent), transparent); } .ornament--left { justify-content: flex-start; } .ornament--left::before { display: none; } .js .reveal .ornament::before { transform: scaleX(0); transform-origin: 100% 50%; transition: transform .8s var(--ease-out) .25s; } .js .reveal .ornament::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out) .25s; } .js .reveal .ornament span { transform: scale(0); transition: transform .5s var(--ease-out) .15s; } .js .reveal .ornament span:nth-child(2) { transition-delay: .25s; } .js .reveal .ornament span:nth-child(3) { transition-delay: .35s; } .js .reveal.in .ornament::before, .js .reveal.in .ornament::after { transform: scaleX(1); } .js .reveal.in .ornament span { transform: scale(1); } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .03em; padding: 15px 32px; border-radius: 50px; cursor: pointer; border: 1.5px solid transparent; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-gold { background: var(--grad-bordeaux); color: var(--cream); } .btn-gold:hover { background: linear-gradient(135deg, #8c2530 0%, #5a131a 100%); box-shadow: 0 12px 30px rgba(122, 29, 35, .5); } .btn-bordeaux { background: var(--bordeaux); color: var(--cream); } .btn-bordeaux:hover { background: var(--bordeaux-bright); } .btn-outline { background: transparent; color: var(--cream); border-color: rgba(244, 238, 228, .4); } .btn-outline:hover { background: var(--cream); color: #25160f; border-color: var(--cream); } .btn-outline-gold { background: transparent; color: var(--accent-soft); border-color: var(--accent); } .btn-outline-gold:hover { background: var(--bordeaux-btn); color: var(--cream); border-color: var(--bordeaux-btn); } .btn .arrow { transition: transform .25s ease; } .btn:hover .arrow { transform: translateX(4px); } /* ========================================================= HEADER ========================================================= */ .header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 100; display: flex; align-items: center; transition: background .4s ease, box-shadow .4s ease, height .4s ease, border-color .4s ease, transform .35s ease; border-bottom: 1px solid transparent; } /* Sur mobile : le header s'efface en défilement vers le bas, revient dès qu'on remonte */ .header.is-hidden { transform: translateY(-100%); } .header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .brand { display: flex; align-items: center; } .brand__img { height: 56px; width: auto; display: block; transition: height .4s ease; filter: drop-shadow(0 2px 10px rgba(0,0,0,.4)); } .header.scrolled { background: rgba(16, 12, 11, .9); backdrop-filter: blur(12px); height: 70px; border-bottom: 1px solid var(--line); } .header.scrolled .brand__img { height: 46px; } .nav { display: flex; align-items: center; gap: 38px; } .nav__links { display: flex; gap: 32px; } .nav__links a { font-weight: 700; font-size: .93rem; color: var(--cream); position: relative; padding: 5px 0; letter-spacing: .02em; transition: color .25s ease; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--accent); transition: width .28s ease; } .nav__links a:hover { color: var(--accent-soft); } .nav__links a:hover::after, .nav__links a.active::after { width: 100%; } /* Burger */ .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; padding: 8px; z-index: 120; } .burger span { width: 26px; height: 2.5px; background: var(--cream); border-radius: 2px; transition: .3s ease; } .burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Menu mobile */ .mobile-menu { position: fixed; inset: 0; background: linear-gradient(160deg, #1a1210, var(--bordeaux-deep)); z-index: 110; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: calc(var(--header-h) + 10px) 24px calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; /* Fermé = fondu sur place (PAS de translateX hors-écran : un élément fixe posé à droite du viewport créait un scroll horizontal, non rognable par overflow-x). visibility:hidden sort aussi les liens de la tabulation. L'entrée est portée par la cascade des liens ci-dessous. */ opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; } .mobile-menu.open { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s 0s; } .mobile-menu a { font-family: var(--font-head); font-size: 1.75rem; color: var(--cream); padding: 13px 0; } .mobile-menu a:hover { color: var(--accent-soft); } .mobile-menu .btn { margin-top: 20px; font-family: var(--font-body); font-size: 1rem; } .mobile-menu__contact { margin-top: 28px; color: var(--accent-soft); font-size: .9rem; letter-spacing: .05em; text-align: center; } /* Entrée en cascade des liens à l'ouverture */ .mobile-menu > * { opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s var(--ease-out); } .mobile-menu.open > * { opacity: 1; transform: none; } .mobile-menu.open > *:nth-child(1) { transition-delay: .10s; } .mobile-menu.open > *:nth-child(2) { transition-delay: .15s; } .mobile-menu.open > *:nth-child(3) { transition-delay: .20s; } .mobile-menu.open > *:nth-child(4) { transition-delay: .25s; } .mobile-menu.open > *:nth-child(5) { transition-delay: .30s; } .mobile-menu.open > *:nth-child(6) { transition-delay: .35s; } .mobile-menu.open > *:nth-child(7) { transition-delay: .40s; } .mobile-menu.open > *:nth-child(8) { transition-delay: .45s; } .mobile-menu.open > *:nth-child(9) { transition-delay: .50s; } /* Le burger (X) doit rester cliquable au-dessus du menu ouvert : le header passe au-dessus du voile, sans fond ni filet. */ body.nav-open .header { z-index: 130; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } /* ========================================================= HERO (bannière cinématographique) ========================================================= */ .hero { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: calc(var(--header-h) + 30px) 26px 100px; } .hero__bg { position: absolute; inset: 0; z-index: -2; background: url('../img/hero-banner.jpg') center / cover no-repeat; animation: kenburns 26s ease-in-out infinite alternate; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 60% at 50% 55%, rgba(16,12,11,.34), rgba(16,12,11,.66) 75%), linear-gradient(180deg, rgba(16,12,11,.55) 0%, rgba(16,12,11,.12) 28%, rgba(16,12,11,.5) 72%, rgba(16,12,11,.92) 100%); } @keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.09) translateY(-1.2%); } } .hero__inner { max-width: 900px; position: relative; } .hero__kicker { color: var(--accent-soft); letter-spacing: .34em; } .hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.2rem); line-height: 1.03; margin: 10px 0 24px; text-shadow: 0 4px 40px rgba(0, 0, 0, .55); } .hero h1 em { font-style: normal; color: var(--accent); } .hero__accroche { font-size: clamp(1.1rem, 2vw, 1.42rem); color: rgba(244, 238, 228, .92); max-width: 640px; margin: 0 auto 38px; text-shadow: 0 2px 20px rgba(0,0,0,.5); } .hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .hero__meta { margin-top: 30px; font-size: .92rem; letter-spacing: .06em; color: rgba(244, 238, 228, .82); } .hero__meta strong { color: var(--cream); } .scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(244, 238, 228, .5); border-radius: 14px; z-index: 2; } .scroll-cue::after { content: ""; position: absolute; left: 50%; top: 9px; width: 7px; height: 7px; border-right: 2px solid var(--cream); border-bottom: 2px solid var(--cream); transform: translateX(-50%) rotate(45deg); animation: scrollchev 1.8s ease-in-out infinite; } @keyframes scrollchev { 0%, 100% { opacity: 0; top: 8px; } 50% { opacity: 1; top: 18px; } } /* ========================================================= BIENVENUE / CHEF ========================================================= */ .bienvenue { background: var(--bg); } .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 78px); align-items: center; } .split__media { position: relative; } /* Montage 2 photos : chef (grand) + service en salle (médaillon superposé) */ .photo-duo { position: relative; padding-bottom: 34px; } .photo-duo__main { display: block; width: 84%; margin-left: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .photo-duo__inset { position: absolute; left: 0; bottom: 0; width: 50%; border-radius: var(--radius); border: 5px solid var(--bg); box-shadow: var(--shadow); object-fit: cover; transform: rotate(-3.5deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .photo-duo .frame-deco { position: absolute; top: -16px; right: -16px; width: 84%; aspect-ratio: 1 / 1; border: 1px solid var(--accent); border-radius: var(--radius-lg); z-index: -1; } .split__media:hover .photo-duo__main { transform: scale(1.02); } .split__media:hover .photo-duo__inset { transform: rotate(0); } .split__body p + p { margin-top: 18px; } .split__body p { color: var(--muted); } .split__body .lead { margin-bottom: 22px; color: var(--cream); } .signature { font-family: var(--font-head); font-style: normal; font-weight: 700; font-size: 1.4rem; color: var(--accent-soft); margin-top: 20px; } /* ========================================================= CUISINE ========================================================= */ .cuisine { background: var(--bg-2); } .cuisine__actions { margin-top: 44px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* ========================================================= CARROUSEL (réutilisable) ========================================================= */ .carousel { position: relative; margin-top: 52px; } .carousel__viewport { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); touch-action: pan-y; } .carousel__track { position: relative; aspect-ratio: 16 / 9; } /* Fondu "par-dessus" : la slide sortante (.is-prev) reste opaque sous la nouvelle, pour éviter le creux sombre d'un fondu croisé sur fond noir. */ .carousel__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; background: #000; transition: opacity .8s ease; } .carousel__slide.is-active { opacity: 1; z-index: 2; } .carousel__slide.is-prev { opacity: 1; z-index: 1; transition: none; } .carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } .carousel__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.7)); } /* Pas de voile sombre sur les slides sans légende (ex. photos de plats) */ .carousel__slide:not(:has(.carousel__cap))::after { content: none; } .carousel__cap { position: absolute; left: 30px; bottom: 26px; z-index: 2; } .carousel__cap h3 { color: var(--cream); font-size: clamp(1.3rem, 3vw, 1.9rem); text-shadow: 0 2px 16px rgba(0,0,0,.6); } .carousel__cap p { color: rgba(244,238,228,.85); font-size: .95rem; max-width: 460px; margin-top: 4px; text-shadow: 0 2px 12px rgba(0,0,0,.6); } .carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; background: rgba(16, 12, 11, .5); border: 1.5px solid rgba(244, 238, 228, .5); color: var(--cream); display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .25s ease, border-color .25s ease, transform .25s ease; } .carousel__arrow:hover { background: var(--bordeaux-btn); border-color: var(--bordeaux-btn); color: var(--cream); } .carousel__arrow svg { width: 22px; height: 22px; } .carousel__arrow--prev { left: 18px; } .carousel__arrow--next { right: 18px; } .carousel__arrow:hover { transform: translateY(-50%) scale(1.06); } /* Points : pastille visuelle fine, mais cible tactile de 26px (confort mobile) */ .carousel__dots { display: flex; gap: 2px; justify-content: center; margin-top: 18px; } .carousel__dots button { position: relative; width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; padding: 0; } .carousel__dots button::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 5px; background: rgba(244, 238, 228, .25); transition: background .25s ease, width .25s ease; } .carousel__dots button.active::after { background: var(--accent); width: 24px; } /* ========================================================= OCCASIONS ========================================================= */ .occasions { background: var(--bg); } .occ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; } .occ { text-align: center; padding: 44px 28px 38px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--bg-3); transition: transform .35s ease, border-color .35s ease, background .35s ease; } .occ:hover { transform: translateY(-6px); border-color: var(--line); background: var(--bg-4); } .occ__icon { width: 66px; height: 66px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(205, 67, 80, .14); border: 1px solid var(--line); color: var(--accent-soft); } .occ__icon svg { width: 30px; height: 30px; } .occ h3 { font-size: 1.35rem; margin-bottom: 10px; } .occ p { color: var(--muted); font-size: .96rem; } .occasions__actions { margin-top: 46px; text-align: center; } /* ===== OCCASIONS : arrivée "cartes distribuées" en cascade (cards-deal) ===== À l'entrée dans le viewport, les cartes se posent une à une, légèrement inclinées, et passent du gris à la couleur (façon croupier qui distribue). On réutilise l'observer partagé (classe .in) ; --si (index de carte) est posé par le JS pour le décalage en cascade. Réf : bibliotheque-animations/cards-deal. */ .js .occ.cards-deal { transition: transform .35s var(--ease-out), border-color .35s ease, background .35s ease; } /* Survol : léger lift + pivot — spécificité volontairement élevée pour primer sur .reveal.in (qui force transform:none une fois la carte révélée). */ .js .occ.cards-deal:hover { transform: translateY(-8px) rotate(-1deg); } @media (prefers-reduced-motion: no-preference) { .js .occ.cards-deal { opacity: 0; } .js .occ.cards-deal.in { opacity: 1; animation: occDeal .7s var(--ease-out) backwards; animation-delay: calc(var(--si, 0) * 90ms); } @keyframes occDeal { 0% { opacity: 0; transform: translateY(34px) rotate(-3.5deg) scale(.95); filter: grayscale(1); } 55% { filter: grayscale(0); } 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: grayscale(0); } } } /* ========================================================= TERRASSE (carrousel extérieur) ========================================================= */ .terrasse { background: var(--bg-2); } .features { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } .feature { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 50px; padding: 10px 20px; font-size: .9rem; font-weight: 700; color: var(--accent-soft); } .feature svg { width: 18px; height: 18px; color: var(--accent); } /* ---- Soulignement ondulé animé (sous les pastilles de la terrasse) ---- Transposition vanilla du composant AnimatedText (framer-motion) : le tracé se dessine via pathLength + stroke-dashoffset (1,5 s, easeInOut), puis l'ondulation se déforme au survol (morph du `d`, 0,8 s). */ .underline-flourish { text-align: center; margin-top: 44px; } .underline-flourish__wrap { position: relative; display: inline-block; } .underline-flourish__text { font-family: var(--font-head); font-weight: 700; color: var(--cream); font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: .01em; display: inline-block; transition: transform .4s cubic-bezier(.2, .7, .2, 1); } .underline-flourish__svg { position: absolute; left: 0; bottom: -13px; width: 100%; height: 18px; overflow: visible; pointer-events: none; } .underline-flourish__path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; d: path("M 0,10 Q 75,0 150,10 Q 225,20 300,10"); transition: d .8s ease; } .underline-flourish.is-drawn .underline-flourish__path { opacity: .95; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s ease-in-out, opacity .5s ease, d .8s ease; } .underline-flourish__wrap:hover .underline-flourish__text { transform: scale(1.02); } .underline-flourish__wrap:hover .underline-flourish__path { d: path("M 0,10 Q 75,20 150,10 Q 225,0 300,10"); } /* ========================================================= AVIS ========================================================= */ .avis { background: var(--bg); text-align: center; } .avis-widget { margin-top: 50px; } /* ========================================================= RESERVER (bande CTA) ========================================================= */ .reserve { text-align: center; overflow: hidden; } .reserve__bg { position: absolute; inset: 0; z-index: -2; background: url('../img/plat-noble.jpg') center / cover no-repeat; } .reserve__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(16,12,11,.82), rgba(42,12,18,.9)); } .reserve .section-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); } .reserve .kicker { color: var(--accent-soft); } .reserve p { color: rgba(244, 238, 228, .9); max-width: 600px; margin: 0 auto 36px; font-size: 1.12rem; } /* Module Barestho in-page : leur CSS le rend en carte blanche (370px, arrondie, en flux) ; on le centre simplement dans la section. */ .reserve__widget { display: flex; justify-content: center; margin: 34px 0 22px; } .reserve__phone { font-size: 1rem; color: rgba(244, 238, 228, .9); margin-top: 6px; } .reserve__phone a { color: var(--accent-soft); font-weight: 700; } /* ========================================================= INFOS ========================================================= */ .infos { background: var(--bg-2); } .infos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; margin-top: 52px; align-items: start; } .infos-block h3 { font-size: 1.35rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .infos-block h3 svg { width: 22px; height: 22px; color: var(--accent); } .info-line { display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; } .info-line svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; margin-top: 4px; } .info-line span { color: var(--muted); } .info-line strong { font-weight: 700; color: var(--cream); } .info-line a { color: var(--muted); } .info-line a:hover { color: var(--accent-soft); } .hours { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .hours thead th { padding: 0 6px 10px; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); text-align: right; border-bottom: 1px solid var(--line); } .hours td { padding: 11px 6px; border-bottom: 1px solid var(--line-soft); font-size: .96rem; } .hours td:first-child { font-weight: 700; color: var(--cream); } .hours td:nth-child(2), .hours td:nth-child(3) { text-align: right; color: var(--muted); white-space: nowrap; } .hours tr.highlight td { color: var(--accent-soft); } .hours tr.highlight td:nth-child(2) { color: var(--accent); font-weight: 700; } .hours tr.closed td:last-child { color: var(--muted-2); } .map-wrap { margin-top: 26px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .map-wrap iframe { width: 100%; height: 260px; border: 0; display: block; filter: grayscale(.3) invert(.92) hue-rotate(180deg) contrast(.9); } /* ========================================================= FOOTER ========================================================= */ .footer { background: var(--bordeaux-deep); color: rgba(244, 238, 228, .72); padding: 70px 0 30px; border-top: 1px solid var(--line); } /* Bouton "remonter" flottant : droite, mi-hauteur, capsule + chevron animé vers le haut. Apparaît dès qu'on dépasse le header (classe .is-visible posée par main.js). */ .to-top { position: fixed; right: 22px; top: 50%; z-index: 90; width: 32px; height: 50px; border: 2px solid rgba(244, 238, 228, .5); border-radius: 16px; background: rgba(16, 12, 11, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(16px); transition: opacity .35s ease, transform .35s ease, border-color .25s ease; } .to-top::before { content: ""; position: absolute; inset: -8px; border-radius: 24px; } /* cible tactile élargie (~48px) */ .to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); } .to-top:hover { border-color: var(--accent); } .to-top::after { content: ""; position: absolute; left: 50%; bottom: 11px; width: 8px; height: 8px; border-left: 2px solid var(--cream); border-top: 2px solid var(--cream); transform: translateX(-50%) rotate(45deg); animation: scrollchevup 1.8s ease-in-out infinite; } @keyframes scrollchevup { 0%, 100% { opacity: 0; bottom: 10px; } 50% { opacity: 1; bottom: 21px; } } .footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 44px; } .brand--footer img { height: 76px; width: auto; display: block; } .footer__about p { margin-top: 16px; font-size: .94rem; max-width: 330px; } .footer h4 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 18px; } .footer__links a { display: block; padding: 6px 0; font-size: .95rem; transition: color .2s ease; } .footer__links a:hover { color: var(--cream); } .footer__contact p { font-size: .95rem; padding: 5px 0; } .footer__contact a:hover { color: var(--accent-soft); } .social { display: flex; gap: 12px; margin-top: 18px; } .social a { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: rgba(244, 238, 228, .07); border: 1px solid var(--line-soft); transition: background .25s ease, transform .25s ease, color .25s ease, border-color .25s ease; } .social a:hover { background: var(--bordeaux-btn); color: var(--cream); transform: translateY(-3px); } .social svg { width: 19px; height: 19px; } .footer__bottom { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .84rem; color: var(--muted-2); } .footer__bottom a { color: var(--accent-soft); } /* ========================================================= REVEAL AU SCROLL ========================================================= */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--ease-out); } .js .reveal.in { opacity: 1; transform: none; } .js .reveal.d1 { transition-delay: .12s; } .js .reveal.d2 { transition-delay: .24s; } .js .reveal.d3 { transition-delay: .36s; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 980px) { .infos-grid { gap: 42px; } .footer__top { grid-template-columns: 1fr 1fr; } .footer__about { grid-column: 1 / -1; } } @media (max-width: 860px) { .nav__links { display: none; } .nav .btn { display: none; } .burger { display: flex; } .split { grid-template-columns: 1fr; } .bienvenue .split__media { order: -1; margin-bottom: 14px; } .photo-duo .frame-deco { top: -12px; right: -12px; } .occ-grid { grid-template-columns: 1fr; max-width: 430px; margin-left: auto; margin-right: auto; } .avis-grid { grid-template-columns: 1fr; max-width: 470px; margin-left: auto; margin-right: auto; } .infos-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { :root { --header-h: 72px; } body { font-size: 16px; } .container { padding: 0 20px; } .brand__img { height: 46px; } .header.scrolled .brand__img { height: 40px; } .brand--footer img { height: 64px; } .hero { padding-left: 20px; padding-right: 20px; } .hero__kicker { font-size: .68rem; letter-spacing: .22em; } .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { width: 100%; } .hero__cta .cta-ring { width: 100%; } .cta-ring__svg { inset: -10px -13px; width: calc(100% + 26px); height: calc(100% + 20px); } .carousel__track { aspect-ratio: 4 / 5; } .carousel__arrow { width: 44px; height: 44px; } .carousel__arrow--prev { left: 10px; } .carousel__arrow--next { right: 10px; } .carousel__cap { left: 20px; bottom: 20px; } .hours td { font-size: .9rem; padding: 10px 4px; } .hours td:first-child { font-size: .92rem; } .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; transform: none !important; } .js .reveal .ornament::before, .js .reveal .ornament::after, .js .reveal .ornament span { transform: none !important; transition: none !important; } .scroll-cue::after, .to-top::after, .hero__bg { animation: none !important; } .carousel__slide { transition: none !important; } .carousel__slide img { animation: none !important; transform: none !important; } .mobile-menu > * { opacity: 1; transform: none; transition: none; } .header { transition: none; } .header.is-hidden { transform: none; } } /* ========================================================= MODALE CARTE (PDF) ========================================================= */ .menu-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s ease; } .menu-modal.open { opacity: 1; visibility: visible; pointer-events: auto; } .menu-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 6, 5, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .menu-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(1000px, 100%); height: min(92vh, 100%); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; transform: translateY(18px) scale(.97); transition: transform .4s cubic-bezier(.2, .7, .2, 1); } .menu-modal.open .menu-modal__dialog { transform: translateY(0) scale(1); } .menu-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px 13px 22px; background: var(--grad-bordeaux); color: var(--cream); flex-shrink: 0; } .menu-modal__title { font-family: var(--font-head); font-style: normal; font-weight: 700; font-size: 1.5rem; color: var(--cream); line-height: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-modal__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .menu-modal__link { font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--cream); padding: 8px 14px; border-radius: 50px; border: 1px solid rgba(244, 238, 228, .45); transition: background .25s ease, border-color .25s ease; white-space: nowrap; } .menu-modal__link:hover { background: rgba(244, 238, 228, .14); border-color: var(--cream); } .menu-modal__close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; font-size: 1.6rem; line-height: 1; color: var(--cream); background: rgba(244, 238, 228, .12); border: 1px solid rgba(244, 238, 228, .25); border-radius: 50%; cursor: pointer; transition: background .25s ease, transform .25s ease; } .menu-modal__close:hover { background: rgba(244, 238, 228, .24); transform: rotate(90deg); } .menu-modal__viewport { position: relative; flex: 1; min-height: 0; background: #2b2320; } .menu-modal__frame { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; } .menu-modal__loader { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; } .menu-modal__loader span { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(244, 238, 228, .25); border-top-color: var(--accent); animation: menu-spin .8s linear infinite; } @keyframes menu-spin { to { transform: rotate(360deg); } } body.menu-open { overflow: hidden; } @media (max-width: 600px) { .menu-modal { padding: 0; } .menu-modal__dialog { width: 100%; height: 100%; border-radius: 0; border: 0; } .menu-modal__bar { gap: 10px; padding: 12px 12px 12px 16px; } .menu-modal__title { font-size: 1.25rem; } .menu-modal__link { padding: 7px 11px; font-size: .76rem; } .menu-modal__actions { gap: 6px; } } @media (max-width: 360px) { /* Très petits écrans : on masque visuellement le titre (le bouton qui a ouvert la modale donne déjà le contexte) pour que les actions + fermer tiennent sans rognage. Reste lu par les lecteurs d'écran via aria-labelledby. */ .menu-modal__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .menu-modal__bar { justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .menu-modal, .menu-modal__dialog { transition: none; } .menu-modal__dialog { transform: none; } .menu-modal__loader span { animation: none; } } /* ========================================================= V5 - Originalité & animations (légères, premium, on-brand) ========================================================= */ /* ---- Barre de progression de lecture (fin filet bordeaux) ---- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--bordeaux), var(--accent)); box-shadow: 0 0 12px rgba(205, 67, 80, .55); transition: transform .1s linear; } /* ---- Grain cinématographique (texture éditoriale premium) ---- */ .grain { /* inset:0 (jamais hors du viewport) : un `inset` négatif débordait à droite et créait un scroll horizontal sur mobile (élément fixe non rogné par overflow-x). Le frémissement se fait via background-position, qui ne déplace pas la boîte. */ position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; animation: grain-shift 7s steps(6) infinite; } @keyframes grain-shift { 0% { background-position: 0 0; } 20% { background-position: -7px 5px; } 40% { background-position: 5px -7px; } 60% { background-position: -5px 7px; } 80% { background-position: 7px -5px; } 100% { background-position: 0 0; } } /* ---- Halos d'ambiance (profondeur sur les sections sombres) ---- */ .bienvenue::before, .occasions::before, .avis::before { content: ""; position: absolute; pointer-events: none; z-index: 0; width: 60vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(205, 67, 80, .12), transparent 64%); filter: blur(8px); } .bienvenue::before { top: -12%; right: -14%; } .occasions::before { top: -10%; left: -14%; } .avis::before { bottom: -14%; right: -10%; } .bienvenue > .container, .occasions > .container, .avis > .container { position: relative; z-index: 1; } /* ---- Hero : entrée cinétique au chargement ---- */ .js .hero__inner > * { opacity: 0; transform: translateY(28px); } body.loaded .hero__inner > * { animation: heroIn 1s cubic-bezier(.2, .7, .2, 1) forwards; } body.loaded .hero__inner > *:nth-child(1) { animation-delay: .15s; } body.loaded .hero__inner > *:nth-child(2) { animation-delay: .30s; } body.loaded .hero__inner > *:nth-child(3) { animation-delay: .45s; } body.loaded .hero__inner > *:nth-child(4) { animation-delay: .60s; } body.loaded .hero__inner > *:nth-child(5) { animation-delay: .72s; } @keyframes heroIn { to { opacity: 1; transform: none; } } /* ---- Anneau « tracé à la main » autour des CTA clés ---- Transposition vanilla du composant HandWrittenTitle (framer-motion) : le cercle se dessine via pathLength normalisé + stroke-dashoffset animé, même easing cubic-bezier(.43,.13,.23,.96) et même durée 2,5 s. */ /* Anneau « tracé à la main » autour des CTA de réservation (sauf le bouton pleine largeur des horaires : l'ellipse ne peut pas enfermer proprement un bouton 100% large). */ .cta-ring { position: relative; display: inline-flex; } .cta-ring .btn { position: relative; z-index: 1; } .cta-ring__svg { position: absolute; inset: -13px -19px; width: calc(100% + 38px); height: calc(100% + 26px); overflow: visible; pointer-events: none; z-index: 2; } .cta-ring__svg path { fill: none; stroke: var(--cream); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; } .cta-ring.is-drawn path { opacity: .9; stroke-dashoffset: 0; transition: stroke-dashoffset 2.5s cubic-bezier(.43, .13, .23, .96), opacity .5s ease; } /* ---- Boutons : reflet glissant (sheen) ---- */ .btn-gold { position: relative; overflow: hidden; } .btn-gold::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent); transform: skewX(-18deg); transition: left .65s ease; } .btn-gold:hover::after { left: 140%; } /* ---- Facebook dans le header (carré sobre, bleu officiel au survol) ---- */ .nav__fb { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--cream); background: rgba(244, 238, 228, .06); border: 1px solid rgba(244, 238, 228, .16); transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } .nav__fb svg { width: 14px; height: 14px; display: block; } .nav__fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; transform: translateY(-2px); } /* ---- Facebook dans le menu mobile ---- */ .mobile-menu a.mobile-menu__fb { display: inline-flex; align-items: center; gap: 11px; margin-top: 22px; font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-soft); padding: 8px 0; } .mobile-menu a.mobile-menu__fb svg { width: 30px; height: 30px; padding: 8px; border-radius: 9px; background: rgba(244, 238, 228, .08); border: 1px solid rgba(244, 238, 228, .16); box-sizing: border-box; color: var(--accent-soft); } .mobile-menu a.mobile-menu__fb:hover { color: var(--cream); } /* ---- Reveals directionnels (variété au scroll) ---- */ .js .reveal--left { opacity: 0; transform: translateX(-40px); } .js .reveal--right { opacity: 0; transform: translateX(40px); } .js .reveal--left.in, .js .reveal--right.in { opacity: 1; transform: none; } /* ---- Ken Burns doux sur la slide active (desktop ET mobile, pas besoin de survol) ---- */ .carousel__slide.is-active img { animation: slidedrift 9s ease-out forwards; } .carousel__slide.is-prev img { transform: scale(1.05); } @keyframes slidedrift { from { transform: scale(1); } to { transform: scale(1.05); } } /* ---- Appel Facebook dans les avis ---- */ .avis__fb { margin-top: 42px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .fb-cta { display: inline-flex; align-items: center; gap: 15px; text-align: left; max-width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 50px; padding: 11px 24px 11px 12px; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; } .fb-cta:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--bg-4); box-shadow: var(--shadow-sm); } .fb-cta__icon { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: rgba(244, 238, 228, .07); border: 1px solid var(--line-soft); color: var(--cream); transition: background .3s ease, border-color .3s ease, color .3s ease; } .fb-cta__icon svg { width: 19px; height: 19px; } .fb-cta:hover .fb-cta__icon { background: #1877F2; border-color: #1877F2; color: #fff; } .fb-cta__txt { display: flex; flex-direction: column; line-height: 1.3; font-size: .82rem; color: var(--muted); } .fb-cta__txt strong { color: var(--cream); font-size: 1rem; font-family: var(--font-body); } .fb-cta__arrow { color: var(--accent); font-size: 1.2rem; transition: transform .3s ease; } .fb-cta:hover .fb-cta__arrow { transform: translateX(4px); } /* ---- Footer : libellé "Suivez-nous" + Facebook marqué ---- */ .social__label { display: block; margin-top: 18px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); } .social { margin-top: 11px; } .social a.social--fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; } /* ---- Bouton d'appel flottant (bas gauche) ---- */ .call-fab { position: fixed; left: 22px; bottom: 26px; z-index: 95; display: inline-flex; align-items: center; height: 58px; width: 58px; border-radius: 50px; overflow: hidden; white-space: nowrap; background: var(--grad-bordeaux); color: var(--cream); box-shadow: 0 12px 30px rgba(122, 29, 35, .5); transition: width .38s cubic-bezier(.2, .7, .2, 1), transform .25s ease, box-shadow .25s ease; } .call-fab__icon { width: 58px; height: 58px; flex-shrink: 0; display: grid; place-items: center; } .call-fab__icon svg { width: 23px; height: 23px; } .call-fab__label { font-family: var(--font-body); font-weight: 700; font-size: .96rem; letter-spacing: .02em; padding-right: 24px; opacity: 0; transition: opacity .25s ease; } .call-fab:hover { width: 168px; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(122, 29, 35, .6); } .call-fab:hover .call-fab__label { opacity: 1; } .call-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50px; pointer-events: none; box-shadow: 0 0 0 0 rgba(205, 67, 80, .5); animation: callpulse 2.6s ease-out infinite; } @keyframes callpulse { 0% { box-shadow: 0 0 0 0 rgba(205, 67, 80, .45); } 70% { box-shadow: 0 0 0 16px rgba(205, 67, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(205, 67, 80, 0); } } /* ---- Overlays : quand le menu mobile ou la modale carte est ouvert, on masque les boutons flottants (appel, remonter) ---- */ body.nav-open .call-fab, body.nav-open .to-top, body.menu-open .call-fab, body.menu-open .to-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .call-fab, .to-top { transition: opacity .25s ease, visibility .25s ease; } .call-fab { transition: width .38s cubic-bezier(.2, .7, .2, 1), transform .25s ease, box-shadow .25s ease, opacity .25s ease, visibility .25s ease; } /* ---- Grain : texture statique sur tactile (économie batterie) ---- */ @media (hover: none) { .grain { animation: none; opacity: .04; } } /* ---- Responsive V5 ---- */ @media (max-width: 860px) { .nav__fb { display: none; } } @media (max-width: 600px) { .fb-cta { gap: 12px; padding: 10px 18px 10px 10px; } .fb-cta__icon { width: 42px; height: 42px; } /* Indicateur « descendre » retiré sur mobile (chevauchait le bas du hero + les flottants). */ .scroll-cue { display: none; } /* Bouton d'appel en bas à gauche, bouton « remonter » en bas à droite : 2 coins symétriques (plus de widget Barestho flottant, la réservation est désormais intégrée dans la page). */ .call-fab { left: 14px; bottom: calc(20px + env(safe-area-inset-bottom)); height: 52px; width: 52px; } .call-fab__icon { width: 52px; height: 52px; } /* to-top : caché par glissement vertical (pas horizontal, qui débordait à droite). */ .to-top { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); right: 14px; transform: translateY(14px); } .to-top.is-visible { transform: translateY(0); } } /* ---- Respect de prefers-reduced-motion (V5) ---- */ @media (prefers-reduced-motion: reduce) { .grain { animation: none; } .cta-ring__svg path { opacity: .9 !important; stroke-dashoffset: 0 !important; transition: none !important; } .underline-flourish__path { opacity: .95 !important; stroke-dashoffset: 0 !important; transition: none !important; } .underline-flourish__wrap:hover .underline-flourish__text { transform: none; } .js .hero__inner > * { opacity: 1 !important; transform: none !important; animation: none !important; } .btn-gold::after { display: none; } .split__media:hover .photo-duo__main, .carousel:hover .carousel__slide img { transform: none; } .split__media:hover .photo-duo__inset { transform: rotate(-3.5deg); } .scroll-progress span { transition: none; } .call-fab::after { animation: none; } }