/* ============================================================
Le Café du Marché — feuille de style (doré/champagne · brasserie)
============================================================ */
/* Polices Google chargées via dans le de chaque page
(évite le bloqueur de rendu causé par @import). */
/* ---------- Design tokens ---------- */
:root {
/* Neutres */
--bg: #ffffff;
--bg-soft: #f1f5fa;
--surface: #ffffff;
--ink: #0f1f2e;
--text: #1e2a36;
--text-muted: #56697a;
--text-soft: #8493a3;
--inverse: #ffffff;
--line: rgba(15, 31, 46, 0.12);
--shadow-card: 0 16px 40px rgba(15, 31, 46, 0.08);
--shadow-soft: 0 8px 24px rgba(15, 31, 46, 0.06);
--shadow-gold: 0 14px 30px rgba(42, 93, 124, 0.22);
/* Charte bleu pétrole / marine (aliases conservés : --gold-*) */
--gold: #2a5d7c;
--gold-soft: #4d83a3;
--gold-light: #c6dde9;
--gold-deep: #1b425a;
--champagne: #dde9f0;
--champagne-soft: #eef4f8;
/* Vert PMU (utilisé uniquement sur le coin-jeu PMU) */
--pmu-green: #00873d;
--pmu-green-deep: #005b2f;
--pmu-green-soft: #e8f4ec;
/* Hero */
--hero-bg: #0e1c2a;
/* Typographie : serif élégant pour titres, sans-serif lisible pour corps */
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Cormorant Garamond", "Times New Roman", serif;
--font-script: "Cormorant Garamond", "Times New Roman", serif;
/* Logo « le café du marché » vectorisé (figé, identique tous navigateurs) */
--logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.00 -80.80 838.65 86.00' role='img' aria-label='Le Café du Marché' fill='currentColor'%3E %3Cg%3E%3Cpath transform='translate(0.00 0.00) scale(0.10000 -0.10000)' d='M90 756H150V0H90Z'/%3E%3Cpath transform='translate(27.00 0.00) scale(0.10000 -0.10000)' d='M488 87Q453 34 401.5 11.0Q350 -12 288 -12Q235 -12 192.0 6.0Q149 24 118.0 56.5Q87 89 70.5 133.5Q54 178 54 232Q54 284 71.0 328.0Q88 372 119.0 404.5Q150 437 192.0 455.5Q234 474 285 474Q338 474 378.5 455.5Q419 437 446.5 406.5Q474 376 488.0 337.0Q502 298 502 258V216H114Q114 197 121.5 167.5Q129 138 149.0 110.0Q169 82 202.5 62.0Q236 42 289 42Q335 42 378.0 64.0Q421 86 444 124ZM442 270Q442 301 429.5 328.0Q417 355 395.5 375.5Q374 396 344.5 408.0Q315 420 282 420Q233 420 200.5 400.0Q168 380 149.0 354.0Q130 328 122.0 303.5Q114 279 114 270Z'/%3E%3Cpath transform='translate(116.60 0.00) scale(0.15000 -0.15000)' d='M455 251Q432 214 394.5 171.5Q357 129 313 92Q259 47 205.0 19.5Q151 -8 99 -8Q62 -8 37.0 11.5Q12 31 12 69Q12 117 39.5 167.0Q67 217 108.5 258.5Q150 300 199.5 326.0Q249 352 293 352Q322 352 343.5 341.5Q365 331 365 305Q365 293 358.5 285.0Q352 277 342.5 272.0Q333 267 321.5 264.5Q310 262 301 261Q305 271 308.0 281.5Q311 292 311 303Q311 340 276 340Q250 340 214.5 314.5Q179 289 147.5 250.0Q116 211 94.0 164.0Q72 117 72 73Q72 46 84.5 27.0Q97 8 123 8Q158 8 203.5 31.0Q249 54 292 88Q337 123 378.5 168.5Q420 214 448 257Z'/%3E%3Cpath transform='translate(169.55 0.00) scale(0.10000 -0.10000)' d='M439 194Q439 160 439.5 133.0Q440 106 441.0 83.0Q442 60 443.5 40.0Q445 20 448 0H392Q386 34 386 75H384Q358 30 319.5 9.0Q281 -12 222 -12Q192 -12 163.0 -4.5Q134 3 111.0 19.5Q88 36 73.5 62.0Q59 88 59 125Q59 178 86.0 209.0Q113 240 152.5 255.5Q192 271 236.5 275.5Q281 280 315 280H385V308Q385 368 348.0 394.0Q311 420 255 420Q175 420 114 368L79 409Q112 441 161.0 457.5Q210 474 255 474Q339 474 389.0 434.5Q439 395 439 307ZM319 232Q281 232 245.5 227.0Q210 222 181.5 210.0Q153 198 136.0 178.0Q119 158 119 128Q119 107 128.5 90.5Q138 74 153.0 63.5Q168 53 186.5 47.5Q205 42 224 42Q272 42 303.0 56.0Q334 70 352.5 92.5Q371 115 378.0 143.5Q385 172 385 201V232Z'/%3E%3Cpath transform='translate(224.45 0.00) scale(0.10000 -0.10000)' d='M114 408H18V462H114V613Q114 658 127.5 687.5Q141 717 161.0 735.0Q181 753 205.5 760.5Q230 768 252 768Q294 768 321 756L309 704Q289 714 255 714Q174 714 174 591V462H282V408H174V0H114Z'/%3E%3Cpath transform='translate(257.05 0.00) scale(0.10000 -0.10000)' d='M488 87Q453 34 401.5 11.0Q350 -12 288 -12Q235 -12 192.0 6.0Q149 24 118.0 56.5Q87 89 70.5 133.5Q54 178 54 232Q54 284 71.0 328.0Q88 372 119.0 404.5Q150 437 192.0 455.5Q234 474 285 474Q338 474 378.5 455.5Q419 437 446.5 406.5Q474 376 488.0 337.0Q502 298 502 258V216H114Q114 197 121.5 167.5Q129 138 149.0 110.0Q169 82 202.5 62.0Q236 42 289 42Q335 42 378.0 64.0Q421 86 444 124ZM442 270Q442 301 429.5 328.0Q417 355 395.5 375.5Q374 396 344.5 408.0Q315 420 282 420Q233 420 200.5 400.0Q168 380 149.0 354.0Q130 328 122.0 303.5Q114 279 114 270ZM324 708H404L270 564H220Z'/%3E%3Cpath transform='translate(346.65 0.00) scale(0.10000 -0.10000)' d='M484 81H482Q468 57 447.0 39.5Q426 22 401.5 10.5Q377 -1 350.0 -6.5Q323 -12 297 -12Q244 -12 199.0 6.0Q154 24 122.0 56.5Q90 89 72.0 133.5Q54 178 54 231Q54 284 72.0 328.5Q90 373 122.0 405.5Q154 438 199.0 456.0Q244 474 297 474Q323 474 350.0 468.5Q377 463 401.5 451.5Q426 440 447.0 422.5Q468 405 482 381H484V756H544V0H484ZM490 231Q490 270 475.0 304.5Q460 339 434.0 364.5Q408 390 373.0 405.0Q338 420 297 420Q255 420 221.0 405.0Q187 390 163.0 364.5Q139 339 126.5 304.5Q114 270 114 231Q114 192 126.5 157.5Q139 123 163.0 97.5Q187 72 221.0 57.0Q255 42 297 42Q338 42 373.0 57.0Q408 72 434.0 97.5Q460 123 475.0 157.5Q490 192 490 231Z'/%3E%3Cpath transform='translate(410.75 0.00) scale(0.10000 -0.10000)' d='M471 130Q471 117 472.0 98.5Q473 80 473.5 61.0Q474 42 475.0 25.5Q476 9 476 0H416Q415 26 414.5 50.0Q414 74 412 81H409Q391 43 349.0 15.5Q307 -12 251 -12Q197 -12 162.5 5.0Q128 22 108.5 49.5Q89 77 82.0 113.0Q75 149 75 187V462H135V190Q135 162 140.0 135.5Q145 109 157.5 88.0Q170 67 192.5 54.5Q215 42 251 42Q284 42 313.5 53.5Q343 65 364.5 88.5Q386 112 398.5 147.5Q411 183 411 231V462H471Z'/%3E%3Cpath transform='translate(500.35 0.00) scale(0.10000 -0.10000)' d='M80 332Q80 345 79.0 363.5Q78 382 77.5 401.0Q77 420 76.0 436.5Q75 453 75 462H135Q136 436 136.5 412.0Q137 388 139 381H142Q160 419 202.0 446.5Q244 474 300 474Q346 474 384.0 450.5Q422 427 439 374Q461 426 504.5 450.0Q548 474 596 474Q650 474 684.0 457.0Q718 440 737.5 412.5Q757 385 764.5 349.0Q772 313 772 275V0H712V272Q712 300 707.0 326.5Q702 353 689.5 374.0Q677 395 654.5 407.5Q632 420 596 420Q554 420 527.0 404.5Q500 389 484.5 365.0Q469 341 462.5 313.0Q456 285 456 260V0H396V278Q396 342 372.5 381.0Q349 420 300 420Q267 420 237.5 408.5Q208 397 186.5 373.5Q165 350 152.5 314.5Q140 279 140 231V0H80Z'/%3E%3Cpath transform='translate(588.55 0.00) scale(0.10000 -0.10000)' d='M439 194Q439 160 439.5 133.0Q440 106 441.0 83.0Q442 60 443.5 40.0Q445 20 448 0H392Q386 34 386 75H384Q358 30 319.5 9.0Q281 -12 222 -12Q192 -12 163.0 -4.5Q134 3 111.0 19.5Q88 36 73.5 62.0Q59 88 59 125Q59 178 86.0 209.0Q113 240 152.5 255.5Q192 271 236.5 275.5Q281 280 315 280H385V308Q385 368 348.0 394.0Q311 420 255 420Q175 420 114 368L79 409Q112 441 161.0 457.5Q210 474 255 474Q339 474 389.0 434.5Q439 395 439 307ZM319 232Q281 232 245.5 227.0Q210 222 181.5 210.0Q153 198 136.0 178.0Q119 158 119 128Q119 107 128.5 90.5Q138 74 153.0 63.5Q168 53 186.5 47.5Q205 42 224 42Q272 42 303.0 56.0Q334 70 352.5 92.5Q371 115 378.0 143.5Q385 172 385 201V232Z'/%3E%3Cpath transform='translate(643.45 0.00) scale(0.10000 -0.10000)' d='M80 332Q80 345 79.0 363.5Q78 382 77.5 401.0Q77 420 76.0 436.5Q75 453 75 462H135Q136 436 136.5 412.0Q137 388 139 381Q162 422 198.0 448.0Q234 474 286 474Q295 474 303.5 472.5Q312 471 321 469L314 410Q302 414 291 414Q252 414 223.5 401.5Q195 389 176.5 367.0Q158 345 149.0 315.5Q140 286 140 252V0H80Z'/%3E%3Cpath transform='translate(679.75 0.00) scale(0.10000 -0.10000)' d='M467 68Q433 27 390.0 7.5Q347 -12 297 -12Q244 -12 199.0 6.0Q154 24 122.0 56.5Q90 89 72.0 133.5Q54 178 54 231Q54 284 72.0 328.5Q90 373 122.0 405.5Q154 438 199.0 456.0Q244 474 297 474Q348 474 391.5 453.0Q435 432 469 394L421 358Q395 387 364.0 403.5Q333 420 297 420Q255 420 221.0 405.0Q187 390 163.0 364.5Q139 339 126.5 304.5Q114 270 114 231Q114 192 126.5 157.5Q139 123 163.0 97.5Q187 72 221.0 57.0Q255 42 297 42Q335 42 366.5 59.5Q398 77 421 106Z'/%3E%3Cpath transform='translate(730.85 0.00) scale(0.10000 -0.10000)' d='M80 756H140V381H142Q160 419 202.0 446.5Q244 474 300 474Q354 474 388.0 457.0Q422 440 441.5 412.5Q461 385 468.5 349.0Q476 313 476 275V0H416V272Q416 300 411.0 326.5Q406 353 393.5 374.0Q381 395 358.5 407.5Q336 420 300 420Q267 420 237.5 408.5Q208 397 186.5 373.5Q165 350 152.5 314.5Q140 279 140 231V0H80Z'/%3E%3Cpath transform='translate(789.45 0.00) scale(0.10000 -0.10000)' d='M488 87Q453 34 401.5 11.0Q350 -12 288 -12Q235 -12 192.0 6.0Q149 24 118.0 56.5Q87 89 70.5 133.5Q54 178 54 232Q54 284 71.0 328.0Q88 372 119.0 404.5Q150 437 192.0 455.5Q234 474 285 474Q338 474 378.5 455.5Q419 437 446.5 406.5Q474 376 488.0 337.0Q502 298 502 258V216H114Q114 197 121.5 167.5Q129 138 149.0 110.0Q169 82 202.5 62.0Q236 42 289 42Q335 42 378.0 64.0Q421 86 444 124ZM442 270Q442 301 429.5 328.0Q417 355 395.5 375.5Q374 396 344.5 408.0Q315 420 282 420Q233 420 200.5 400.0Q168 380 149.0 354.0Q130 328 122.0 303.5Q114 279 114 270ZM324 708H404L270 564H220Z'/%3E%3C/g%3E %3C/svg%3E");
/* Layout */
--container: 1180px;
--container-narrow: 720px;
--gutter: 24px;
--section-space: 96px;
/* Header */
--safe-area-top: 0px;
--header-content-height: 78px;
--header-height: var(--header-content-height);
--anchor-offset: calc(var(--header-height) + 18px);
--radius: 8px;
--radius-lg: 14px;
--touch: 48px;
}
@supports (padding: env(safe-area-inset-top)) {
:root {
--safe-area-top: env(safe-area-inset-top);
--header-height: calc(var(--header-content-height) + var(--safe-area-top));
}
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--hero-bg);
overflow-x: hidden;
scroll-behavior: auto;
scroll-padding-top: var(--anchor-offset);
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html.anchor-scroll-ready { scroll-behavior: smooth; }
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
min-height: 100svh;
overflow-x: clip;
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
line-height: 1.65;
color: var(--text);
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.site-page { overflow-x: clip; }
@supports not (overflow: clip) {
.site-page, body { overflow-x: hidden; }
}
main, header, footer { position: relative; }
main { background-color: var(--bg); }
img, picture { display: block; max-width: 100%; height: auto; }
/* Les qui enveloppent une image en object-fit doivent remplir leur conteneur. */
.dish-media picture, .terrasse-photo picture { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; appearance: none; -webkit-appearance: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
color: var(--ink);
font-family: var(--font-display);
font-weight: 600;
line-height: 1.1;
letter-spacing: 0;
text-wrap: balance;
}
.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;
}
/* ---------- Layout helpers ---------- */
.container {
width: min(calc(100% - (var(--gutter) * 2)), var(--container));
margin-inline: auto;
}
.container-narrow {
width: min(calc(100% - (var(--gutter) * 2)), var(--container-narrow));
margin-inline: auto;
}
.section {
padding: var(--section-space) 0;
background-color: var(--bg);
}
.section + .section { border-top: 1px solid var(--line); }
.section-alt {
background-color: var(--bg-soft);
background-image:
radial-gradient(circle at 8% 12%, rgba(42, 93, 124, 0.07), transparent 38%),
radial-gradient(circle at 92% 88%, rgba(42, 93, 124, 0.06), transparent 40%);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
color: var(--gold-deep);
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--gold);
}
.section h2 {
font-size: clamp(2rem, 3.6vw, 2.9rem);
margin-bottom: 16px;
font-weight: 500;
letter-spacing: -0.005em;
}
.section-lead {
max-width: 720px;
margin: 0 0 40px;
color: var(--text-muted);
font-size: 1.08rem;
line-height: 1.75;
}
/* ---------- Boutons (pill) ---------- */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: var(--touch);
padding: 0.86rem 1.5rem;
border: 1px solid transparent;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.98rem;
font-weight: 600;
line-height: 1.15;
text-align: center;
letter-spacing: 0.01em;
transition:
transform 180ms ease,
border-color 180ms ease,
background-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease;
}
.button:hover { transform: translateY(-1px); }
.button svg { width: 18px; height: 18px; }
.button-primary {
color: #fff;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
border-color: var(--gold-deep);
box-shadow: var(--shadow-gold);
}
.button-primary:hover {
background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
box-shadow: 0 18px 36px rgba(42, 93, 124, 0.32);
}
.button-secondary {
color: var(--ink);
background: #fff;
border-color: rgba(26, 20, 16, 0.18);
}
.button-secondary:hover {
border-color: var(--gold);
color: var(--gold-deep);
box-shadow: 0 10px 22px rgba(26, 20, 16, 0.08);
}
.button-ghost {
color: var(--gold-deep);
background: transparent;
border-color: var(--gold);
}
.button-ghost:hover {
background: var(--gold);
color: #fff;
border-color: var(--gold);
}
.button-small {
min-height: 42px;
padding: 0.7rem 1.1rem;
font-size: 0.92rem;
}
/* ===========================================================
HEADER scroll-aware
=========================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 60;
min-height: var(--header-height);
padding-top: var(--safe-area-top);
background-color: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(26, 20, 16, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
background-color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
.js .home-page .site-header {
margin-bottom: calc(var(--header-height) * -1);
}
.header-inner {
min-height: var(--header-content-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
min-width: 0;
border-radius: var(--radius);
transform-origin: left center;
transition:
opacity 220ms ease,
transform 220ms ease,
visibility 220ms ease;
}
.brand-wordmark {
display: inline-block;
width: auto;
height: 1.45rem;
aspect-ratio: 838.7 / 86;
color: var(--ink);
background-color: currentColor;
-webkit-mask: var(--logo-mask) no-repeat left center / contain;
mask: var(--logo-mask) no-repeat left center / contain;
font-size: 0; /* masque le texte de repli, gardé dans le DOM pour l'accessibilité */
line-height: 1;
transition: color 180ms ease;
}
.js .home-page:not(.logo-in-nav) [data-header-brand] {
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(0.96);
pointer-events: none;
}
/* ---------- Nav ---------- */
.site-nav {
display: flex;
align-items: center;
gap: 22px;
}
.site-nav > a:not(.button) {
display: inline-flex;
align-items: center;
min-height: 40px;
color: var(--text-muted);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
transition: color 180ms ease;
}
.site-nav > a:not(.button):hover { color: var(--gold-deep); }
.site-nav .nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 6px;
line-height: 0;
color: var(--text-muted);
transition: color 180ms ease, transform 180ms ease;
}
.site-nav .nav-icon svg {
display: block;
width: 22px;
height: 22px;
}
.site-nav .nav-icon:hover {
color: var(--gold-deep);
transform: translateY(-1px);
}
.site-nav .nav-icon .nav-icon-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.site-nav .nav-pmu {
display: inline-flex;
align-items: center;
padding: 5px 10px;
line-height: 0;
border-radius: 999px;
background: transparent;
transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.site-nav .nav-pmu img {
display: block;
height: 22px;
width: auto;
transition: filter 180ms ease;
}
.site-nav .nav-pmu:hover {
transform: translateY(-1px);
}
.site-nav .nav-pmu:hover img {
filter: drop-shadow(0 4px 8px rgba(31, 139, 61, 0.35));
}
/* Logo PMU+ dans la section Coin PMU */
.pmu-brand {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.pmu-brand img {
display: block;
height: 38px;
width: auto;
}
/* ---------- Burger (mobile) ---------- */
.nav-toggle {
display: none;
position: relative;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
transition: background-color 180ms ease, border-color 180ms ease;
}
.nav-toggle span:not(.sr-only) {
position: absolute;
left: 14px;
right: 14px;
height: 2px;
background: var(--ink);
transition: transform 180ms ease, top 180ms ease, background-color 180ms ease;
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 27px; }
body.nav-open .nav-toggle span:nth-child(1),
body.nav-open .nav-toggle span:nth-child(2) { top: 22px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: rotate(-45deg); }
/* ---------- État transparent (au-dessus du hero) ---------- */
.js .home-page:not(.header-solid):not(.nav-open) .site-header {
background-color: transparent;
border-bottom-color: transparent;
border-bottom-width: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.js .home-page:not(.header-solid):not(.nav-open) .brand-wordmark {
color: var(--inverse);
}
.js .home-page:not(.header-solid):not(.nav-open) .site-nav > a:not(.button) {
color: rgba(255, 255, 255, 0.84);
}
.js .home-page:not(.header-solid):not(.nav-open) .site-nav > a:not(.button):hover {
color: var(--gold-light);
}
.js .home-page:not(.header-solid):not(.nav-open) .nav-cta {
color: var(--ink);
background: rgba(255, 255, 255, 0.94);
border-color: rgba(255, 255, 255, 0.78);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}
.js .home-page:not(.header-solid):not(.nav-open) .nav-cta:hover {
background: var(--gold);
color: #fff;
border-color: var(--gold);
}
.js .home-page:not(.header-solid):not(.nav-open) .nav-toggle {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.36);
}
.js .home-page:not(.header-solid):not(.nav-open) .nav-toggle span:not(.sr-only) {
background: var(--inverse);
}
/* ===========================================================
HERO — plein écran avec ambiance dorée festive
=========================================================== */
.hero {
position: relative;
padding: 0;
background: var(--hero-bg);
color: var(--inverse);
isolation: isolate;
}
.hero-visual {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
/* Hero : photo d'ambiance en fond + voile sombre pour la lisibilité. */
.hero-image-placeholder {
position: absolute;
inset: 0;
background-color: #0e1c2a;
/* Repli JPEG pour les navigateurs sans image-set/WebP */
background-image:
linear-gradient(155deg, rgba(14, 28, 42, 0.55) 0%, rgba(14, 28, 42, 0.55) 50%, rgba(8, 18, 28, 0.72) 100%),
url('../../img/hero-fond.jpg');
/* WebP pour les navigateurs modernes (sinon la déclaration précédente reste utilisée) */
background-image:
linear-gradient(155deg, rgba(14, 28, 42, 0.55) 0%, rgba(14, 28, 42, 0.55) 50%, rgba(8, 18, 28, 0.72) 100%),
image-set(
url('../../img/hero-fond.webp') type('image/webp'),
url('../../img/hero-fond.jpg') type('image/jpeg')
);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
/* Overlay lisibilité texte hero */
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
.hero-grid {
position: relative;
z-index: 2;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
padding: calc(var(--header-height) + 40px) 0 80px;
}
.hero-copy { max-width: 760px; }
.hero .eyebrow { color: var(--gold-light); }
.hero .eyebrow::before { background: var(--gold-soft); }
.hero-title { margin-bottom: 24px; }
.hero-logo {
display: block;
width: min(640px, 86vw);
aspect-ratio: 838.7 / 86;
background: linear-gradient(135deg, #fff 0%, var(--gold-light) 100%);
-webkit-mask: var(--logo-mask) no-repeat left center / contain;
mask: var(--logo-mask) no-repeat left center / contain;
filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));
font-size: 0; /* masque le texte de repli, gardé dans le DOM pour l'accessibilité */
}
.hero-lead {
margin: 0 0 36px;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.92);
max-width: 600px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.hero-cta-note {
margin-top: 14px;
color: rgba(255, 255, 255, 0.78);
font-size: 0.9rem;
}
.hero-cta-note a {
color: var(--gold-light);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(232, 197, 122, 0.5);
}
.hero-cta-note a:hover {
border-bottom-color: var(--gold-light);
}
.hero-meta {
margin-top: 48px;
display: flex;
flex-wrap: nowrap;
gap: 32px;
color: rgba(255, 255, 255, 0.78);
font-size: 0.92rem;
}
.hero-meta > div {
min-width: 0;
}
.hero-meta strong {
display: block;
color: var(--gold-light);
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 4px;
}
@media (max-width: 600px) {
.hero-actions {
justify-content: center;
}
.hero-meta {
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* ===========================================================
SECTION "LA SALLE" — feature grid
=========================================================== */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 24px;
}
.feature-card {
position: relative;
padding: 32px 26px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.feature-card:hover {
transform: translateY(-4px);
border-color: var(--gold-soft);
box-shadow: var(--shadow-gold);
}
.feature-card .feature-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
border-radius: 50%;
background: var(--champagne);
color: var(--gold-deep);
}
.feature-card .feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 600;
margin-bottom: 8px;
}
.feature-card p {
color: var(--text-muted);
font-size: 0.96rem;
line-height: 1.65;
}
.feature-card--pmu {
background: var(--pmu-green-soft);
border-color: var(--pmu-green);
border-left: 4px solid var(--pmu-green);
}
.feature-card--pmu:hover {
border-color: var(--pmu-green-deep);
box-shadow: 0 18px 40px -22px rgba(0, 135, 61, 0.45);
}
.feature-card--pmu .feature-icon {
background: var(--pmu-green);
color: #fff;
}
.feature-card--pmu h3 {
color: var(--pmu-green-deep);
}
.feature-card--pmu h3 .pmu-logo-inline {
height: 1.1em;
width: auto;
display: inline-block;
vertical-align: -0.15em;
margin-left: 8px;
}
/* ===========================================================
TERRASSE — bandeau de faits & galerie photos
=========================================================== */
.terrasse-facts {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin: 0 0 28px;
padding: 0;
}
.terrasse-facts li {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.terrasse-fact-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--champagne);
color: var(--gold-deep);
}
.terrasse-fact-icon svg { width: 20px; height: 20px; }
.terrasse-facts li > div {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.terrasse-facts strong {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 600;
color: var(--ink);
}
.terrasse-facts span {
font-size: 0.88rem;
color: var(--text-muted);
}
.terrasse-gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 220px;
gap: 14px;
margin-top: 8px;
}
.terrasse-photo {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
background: var(--bg-soft);
}
.terrasse-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms ease;
}
.terrasse-photo:hover img { transform: scale(1.04); }
.terrasse-photo--lead {
grid-column: span 7;
grid-row: span 2;
}
.terrasse-photo:not(.terrasse-photo--lead) {
grid-column: span 5;
}
@media (max-width: 820px) {
.terrasse-gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 180px;
}
.terrasse-photo--lead {
grid-column: span 2;
grid-row: span 1;
aspect-ratio: 16 / 9;
}
.terrasse-photo:not(.terrasse-photo--lead) { grid-column: span 1; }
}
@media (max-width: 540px) {
.terrasse-gallery { grid-template-columns: 1fr; grid-auto-rows: 200px; }
.terrasse-photo,
.terrasse-photo--lead { grid-column: span 1; aspect-ratio: auto; }
}
/* ===========================================================
GALERIE — grille de visuels festifs
=========================================================== */
.gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
margin-top: 24px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
aspect-ratio: 4 / 3;
isolation: isolate;
background: linear-gradient(135deg, #1a3247, #0a1622);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.gallery-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms ease, filter 320ms ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(26, 20, 16, 0.45) 100%);
pointer-events: none;
transition: opacity 220ms ease;
}
.gallery-item:hover::after { opacity: 0.7; }
.gallery-item figcaption {
position: absolute;
left: 18px;
bottom: 16px;
z-index: 2;
color: #fff;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.02em;
text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
/* Layout asymétrique : 1ère grande, autres compactes */
.gallery-item:nth-child(1) { grid-column: span 8; aspect-ratio: 16 / 9; }
.gallery-item:nth-child(2) { grid-column: span 4; aspect-ratio: 4 / 5; }
.gallery-item:nth-child(3) { grid-column: span 4; }
.gallery-item:nth-child(4) { grid-column: span 4; }
.gallery-item:nth-child(5) { grid-column: span 4; }
.gallery-item:nth-child(6) { grid-column: span 12; aspect-ratio: 21 / 9; }
@media (max-width: 820px) {
.gallery { grid-template-columns: repeat(2, 1fr); }
.gallery-item,
.gallery-item:nth-child(n) { grid-column: span 1; aspect-ratio: 4 / 3; }
.gallery-item:nth-child(1),
.gallery-item:nth-child(6) { grid-column: span 2; aspect-ratio: 16 / 9; }
}
/* ===========================================================
FORMULES — cartes thématiques
=========================================================== */
.formula-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 24px;
}
.formula-card {
position: relative;
padding: 36px 28px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.formula-card:hover {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: var(--shadow-gold);
}
.formula-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-soft));
transform: scaleX(0);
transform-origin: left;
transition: transform 320ms ease;
}
.formula-card:hover::before { transform: scaleX(1); }
.formula-card h3 {
font-family: var(--font-display);
font-size: 1.55rem;
font-weight: 600;
margin-bottom: 10px;
}
.formula-card p {
color: var(--text-muted);
font-size: 0.98rem;
line-height: 1.7;
}
.formula-card .formula-tag {
display: inline-block;
margin-bottom: 14px;
padding: 4px 12px;
border-radius: 999px;
background: var(--champagne-soft);
color: var(--gold-deep);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ===========================================================
SECTION SOCIAL — Instagram & avis Google
=========================================================== */
.social-block {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
align-items: stretch;
margin-top: 24px;
}
@media (max-width: 820px) { .social-block { grid-template-columns: 1fr; } }
.social-card {
padding: 40px 36px;
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.social-card-ig {
color: #fff;
background:
radial-gradient(circle at 30% 20%, rgba(255, 220, 150, 0.25), transparent 60%),
radial-gradient(circle at 80% 80%, rgba(220, 100, 100, 0.22), transparent 60%),
linear-gradient(135deg, #2a1f18 0%, #1a1410 100%);
}
.social-card-ig h3 {
color: #fff;
font-family: var(--font-display);
font-size: 1.85rem;
font-weight: 600;
margin-bottom: 12px;
}
.social-card-ig p {
color: rgba(255, 255, 255, 0.82);
margin-bottom: 24px;
font-size: 1rem;
line-height: 1.65;
}
.social-card-ig .ig-handle {
display: inline-block;
margin-bottom: 20px;
color: var(--gold-light);
font-family: var(--font-display);
font-size: 1.4rem;
font-style: italic;
letter-spacing: 0.02em;
}
.social-card-google {
background: var(--surface);
border: 1px solid var(--line);
}
.social-card-google h3 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 600;
margin-bottom: 10px;
}
.social-card-google p {
color: var(--text-muted);
margin-bottom: 24px;
line-height: 1.65;
}
.social-card-google .google-stars {
display: flex;
gap: 4px;
margin-bottom: 14px;
color: var(--gold);
}
.social-card-google .google-stars svg { width: 22px; height: 22px; }
/* ===========================================================
LOCALISATION — map + adresse
=========================================================== */
.location-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 24px;
margin-top: 24px;
align-items: stretch;
}
@media (max-width: 820px) { .location-grid { grid-template-columns: 1fr; } }
.location-info {
padding: 36px 32px;
background: var(--champagne-soft);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: 22px;
}
.location-info h3 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 6px;
}
.location-info .info-block {
display: flex;
gap: 14px;
}
.location-info .info-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
color: var(--gold-deep);
display: inline-flex;
align-items: center;
justify-content: center;
}
.location-info .info-icon svg { width: 18px; height: 18px; }
.location-info .info-body strong {
display: block;
color: var(--ink);
font-weight: 600;
margin-bottom: 2px;
}
.location-info .info-body a,
.location-info .info-body p {
color: var(--text-muted);
font-size: 0.98rem;
}
.location-info .info-body a:hover { color: var(--gold-deep); }
.map-frame {
position: relative;
min-height: 420px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid var(--line);
}
.map-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ===========================================================
CONTACT
=========================================================== */
.contact-form {
margin-top: 12px;
display: grid;
gap: 16px;
}
.contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) { .contact-row { grid-template-columns: 1fr; } }
.contact-form label {
display: block;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 13px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
/* 16px min : empêche le zoom automatique au focus sur iOS Safari. */
font-size: 16px;
color: var(--text);
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(42, 93, 124, 0.18);
}
.contact-form textarea {
min-height: 130px;
resize: vertical;
font-family: inherit;
}
.contact-form .form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 8px;
}
.contact-form .form-actions .button { min-width: 180px; }
.contact-fine {
margin-top: 16px;
color: var(--text-soft);
font-size: 0.85rem;
text-align: center;
}
.contact-channels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin: 24px 0 36px;
}
.contact-channel {
padding: 22px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-align: center;
transition: border-color 180ms ease, transform 180ms ease;
}
.contact-channel:hover {
border-color: var(--gold);
transform: translateY(-2px);
}
.contact-channel .ch-icon {
width: 40px; height: 40px;
margin: 0 auto 10px;
border-radius: 50%;
background: var(--champagne);
color: var(--gold-deep);
display: flex; align-items: center; justify-content: center;
}
.contact-channel .ch-icon svg { width: 20px; height: 20px; }
.contact-channel strong {
display: block;
font-weight: 600;
color: var(--ink);
}
.contact-channel a {
font-size: 0.95rem;
color: var(--text-muted);
}
.contact-channel a:hover { color: var(--gold-deep); }
/* ===========================================================
Footer
=========================================================== */
.site-footer {
background: var(--ink);
color: rgba(255, 255, 255, 0.78);
padding: 56px 0 36px;
font-size: 0.92rem;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 10%, rgba(77, 131, 163, 0.16), transparent 40%),
radial-gradient(circle at 90% 80%, rgba(77, 131, 163, 0.10), transparent 40%);
pointer-events: none;
}
.site-footer > .container { position: relative; }
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 40px;
margin-bottom: 36px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 820px) {
.footer-top { grid-template-columns: 1fr; gap: 28px; }
}
.footer-brand .brand-wordmark {
color: #fff;
font-size: 1.6rem;
}
.footer-brand p {
margin-top: 14px;
color: rgba(255, 255, 255, 0.7);
max-width: 360px;
font-size: 0.93rem;
line-height: 1.7;
}
.footer-col h4 {
color: var(--gold-light);
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a {
color: rgba(255, 255, 255, 0.78);
font-size: 0.93rem;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-col .footer-pmu {
display: inline-flex;
align-items: center;
padding: 4px 0;
line-height: 0;
transition: transform 180ms ease, filter 180ms ease;
}
.footer-col .footer-pmu img {
display: block;
height: 26px;
width: auto;
filter: brightness(0) invert(1) opacity(0.85);
transition: filter 180ms ease, transform 180ms ease;
}
.footer-col .footer-pmu:hover img {
filter: none;
transform: translateY(-1px);
}
.footer-col .footer-icon {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.78);
transition: color 180ms ease;
}
.footer-col .footer-icon svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.footer-col .footer-icon:hover { color: var(--gold-light); }
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.footer-links {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
.footer-links a {
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
font-size: 0.9rem;
}
.footer-links a:hover { color: var(--gold-light); }
/* ===========================================================
Page mentions légales (statique simple)
=========================================================== */
.legal-page main { padding: calc(var(--header-height) + 60px) 0 80px; }
.legal-page .container-narrow h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 500;
margin-bottom: 24px;
}
.legal-page .container-narrow h2 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 600;
margin: 36px 0 12px;
}
.legal-page .container-narrow p {
color: var(--text-muted);
margin-bottom: 12px;
line-height: 1.75;
}
/* ===========================================================
Carte / spécialités — cartes plat avec photo
=========================================================== */
.dish-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
margin-top: 24px;
}
.dish-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.dish-card:hover {
transform: translateY(-3px);
border-color: var(--gold-soft);
box-shadow: var(--shadow-gold);
}
.dish-card .dish-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg-soft);
}
.dish-card .dish-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms ease;
}
.dish-card:hover .dish-media img { transform: scale(1.04); }
.dish-card .dish-tag {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: var(--gold-deep);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.dish-card .dish-tag strong {
font-weight: 800;
}
.dish-card .dish-body {
padding: 20px 22px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.dish-card h3 {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 600;
letter-spacing: 0.005em;
}
.dish-card p {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
}
/* Variante featured (couscous mis en avant, format portrait) */
.dish-card.dish-featured .dish-media { aspect-ratio: 3 / 4; }
/* ===========================================================
Coin PMU — bloc sobre informatif
=========================================================== */
.pmu-block {
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: center;
padding: 32px 32px;
margin-top: 24px;
border: 1px solid rgba(0, 135, 61, 0.22);
border-left: 4px solid var(--pmu-green);
border-radius: var(--radius-lg);
background: var(--pmu-green-soft);
}
.pmu-block .pmu-icon {
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: 50%;
background: var(--pmu-green);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pmu-block .pmu-icon svg { width: 30px; height: 30px; }
.pmu-block h3 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 6px;
color: var(--pmu-green-deep);
}
.pmu-block p {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.65;
}
.pmu-cta {
margin-top: 14px;
}
.pmu-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
background: var(--pmu-green);
color: #fff;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.pmu-link:hover,
.pmu-link:focus-visible {
background: var(--pmu-green-deep);
color: #fff;
transform: translateY(-1px);
}
.pmu-link svg {
width: 16px;
height: 16px;
}
.pmu-warning {
display: inline-block;
margin-top: 14px;
padding: 6px 12px;
border-radius: 4px;
background: rgba(0, 135, 61, 0.12);
color: var(--pmu-green-deep);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.pmu-warning a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 600px) {
.pmu-block { grid-template-columns: 1fr; text-align: left; padding: 26px; }
}
/* ===========================================================
Horaires — tableau lisible
=========================================================== */
.hours-block {
margin-top: 24px;
padding: 32px 32px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
max-width: 560px;
}
.hours-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.hours-list li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px dashed var(--line);
font-size: 1rem;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list .day { color: var(--ink); font-weight: 600; }
.hours-list .time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hours-list .closed { color: #d33; font-style: italic; font-weight: 600; }
/* Bloc placeholder explicite (à confirmer) */
.notice {
margin-top: 16px;
padding: 14px 18px;
border-left: 3px solid var(--gold);
background: rgba(42, 93, 124, 0.09);
color: var(--gold-deep);
font-size: 0.92rem;
border-radius: 4px;
}
/* ===========================================================
Focus visible (a11y)
=========================================================== */
.button:focus-visible,
.nav-toggle:focus-visible,
.site-nav a:focus-visible,
.footer-links a:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.js .home-page:not(.header-solid):not(.nav-open) .button:focus-visible,
.js .home-page:not(.header-solid):not(.nav-open) .nav-toggle:focus-visible,
.js .home-page:not(.header-solid):not(.nav-open) .site-nav a:focus-visible {
outline-color: var(--gold-light);
}
/* ===========================================================
Responsive
=========================================================== */
@media (max-width: 1120px) {
:root { --section-space: 80px; }
.site-nav { gap: 16px; }
.site-nav > a:not(.button) { font-size: 0.9rem; }
}
@media (max-width: 960px) {
:root { --header-content-height: 70px; }
.site-header {
background-color: rgba(255, 255, 255, 0.96);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.site-nav {
position: absolute;
top: calc(100% + 10px);
right: var(--gutter);
left: var(--gutter);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-card);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.site-nav > .nav-icon,
.site-nav > .nav-pmu {
align-self: flex-start;
}
body.nav-open .site-nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.site-nav > a:not(.button) {
min-height: 44px;
padding: 8px 10px;
color: var(--text);
}
.site-nav .nav-icon {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
line-height: 1.2;
}
.site-nav .nav-icon .nav-icon-label {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--text);
}
.nav-cta { width: 100%; }
.hero-grid { padding: calc(var(--header-height) + 60px) 0 60px; }
.hero-meta { gap: 24px; }
.hero-meta strong { font-size: 1.4rem; }
.footer-inner { justify-content: center; text-align: center; }
}
/* ===========================================================
ARDOISES DE LA MAISON — tarifs façon ardoise
=========================================================== */
.section-board {
background:
radial-gradient(circle at 12% 18%, rgba(42, 93, 124, 0.06), transparent 42%),
radial-gradient(circle at 88% 82%, rgba(15, 31, 46, 0.05), transparent 45%),
var(--bg);
}
.menu-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 26px;
margin-top: 28px;
}
.board-card {
position: relative;
padding: 32px 30px 28px;
border-radius: var(--radius-lg);
background:
radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.04), transparent 55%),
radial-gradient(circle at 88% 88%, rgba(255, 255, 255, 0.03), transparent 55%),
linear-gradient(160deg, #1d2a36 0%, #0e1820 100%);
color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: var(--shadow-card);
overflow: hidden;
isolation: isolate;
}
.board-card::before {
content: "";
position: absolute;
inset: 6px;
border: 1px dashed rgba(255, 255, 255, 0.07);
border-radius: calc(var(--radius-lg) - 6px);
pointer-events: none;
z-index: 0;
}
.board-card > * { position: relative; z-index: 1; }
.board-card--featured {
grid-column: 1 / -1;
background:
radial-gradient(circle at 20% 20%, rgba(198, 221, 233, 0.10), transparent 55%),
radial-gradient(circle at 85% 85%, rgba(42, 93, 124, 0.20), transparent 55%),
linear-gradient(150deg, #1f3041 0%, #0e1820 100%);
}
.board-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--gold-light);
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.board-subtitle::before {
content: "";
width: 22px;
height: 1px;
background: var(--gold-soft);
}
.board-card h3 {
font-family: var(--font-display);
font-size: 1.95rem;
font-weight: 600;
letter-spacing: 0.01em;
color: #fff;
margin-bottom: 6px;
}
.board-card--featured h3 {
font-size: 2.4rem;
}
.board-intro {
color: rgba(255, 255, 255, 0.66);
font-size: 0.98rem;
line-height: 1.55;
margin-bottom: 18px;
max-width: 56ch;
}
.board-list {
list-style: none;
margin: 0;
padding: 0;
}
.board-list li {
display: flex;
align-items: baseline;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 1.02rem;
line-height: 1.45;
}
.board-list li:last-child { border-bottom: 0; }
.board-name {
flex: 0 1 auto;
color: rgba(255, 255, 255, 0.94);
font-weight: 500;
}
.board-name small {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.01em;
margin-top: 1px;
}
.board-dots {
flex: 1 1 auto;
align-self: center;
border-bottom: 1px dotted rgba(255, 255, 255, 0.22);
min-width: 14px;
transform: translateY(-3px);
}
.board-price {
flex: 0 0 auto;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--gold-light);
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.board-note {
margin-top: 16px;
font-size: 0.86rem;
font-style: italic;
color: rgba(255, 255, 255, 0.55);
}
/* Couscous : grille à 2 colonnes pour aérer la longue liste */
.board-featured-grid {
display: grid;
grid-template-columns: 1fr;
column-gap: 36px;
}
@media (min-width: 720px) {
.board-featured-grid { grid-template-columns: 1fr 1fr; }
.board-featured-grid li:nth-child(odd) { border-right: 0; }
}
/* ===========================================================
CARTE DES BOISSONS — colonnes claires
=========================================================== */
.drinks-board {
margin-top: 40px;
padding: 36px 32px 32px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.drinks-board > .eyebrow { margin-bottom: 10px; }
.drinks-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 600;
margin-bottom: 8px;
}
.drinks-lead {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.65;
max-width: 62ch;
margin-bottom: 24px;
}
.drinks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 28px 36px;
}
.drinks-col--wide {
grid-column: span 2;
}
@media (max-width: 720px) {
.drinks-col--wide { grid-column: span 1; }
}
.drinks-col h4 {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 600;
color: var(--gold-deep);
letter-spacing: 0.01em;
padding-bottom: 8px;
margin-bottom: 6px;
border-bottom: 1px solid var(--line);
}
.drinks-col h4 small {
color: var(--text-soft);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-left: 6px;
}
.drinks-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.drinks-col li {
display: flex;
align-items: baseline;
gap: 12px;
padding: 7px 0;
font-size: 0.96rem;
color: var(--text);
border-bottom: 1px dashed rgba(15, 31, 46, 0.06);
}
.drinks-col li:last-child { border-bottom: 0; }
.drinks-col li .name {
flex: 1 1 auto;
}
.drinks-col li .name small {
color: var(--text-soft);
font-size: 0.82rem;
margin-left: 4px;
}
.drinks-col li .price {
flex: 0 0 auto;
color: var(--gold-deep);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.drinks-col li .price-multi {
display: inline-flex;
gap: 18px;
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
}
.drinks-col li .price-multi > span {
min-width: 44px;
text-align: right;
color: var(--gold-deep);
font-weight: 600;
}
.drinks-headers {
display: flex;
justify-content: flex-end;
gap: 18px;
margin: 2px 0 4px;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-soft);
}
.drinks-headers > span {
min-width: 44px;
text-align: right;
}
.drinks-wines .wine-group {
display: block;
padding: 14px 0 6px;
margin-top: 6px;
border-bottom: 0;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--gold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.drinks-wines .wine-group:first-child { padding-top: 0; }
.drinks-footer {
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid var(--line);
font-size: 0.88rem;
color: var(--text-muted);
font-style: italic;
}
.drinks-footer a {
color: var(--gold-deep);
font-weight: 600;
font-style: normal;
}
@media (max-width: 540px) {
.board-card { padding: 26px 22px 22px; }
.board-card h3 { font-size: 1.7rem; }
.board-card--featured h3 { font-size: 2rem; }
.board-list li { gap: 10px; font-size: 0.96rem; }
.board-price { font-size: 1.1rem; }
.drinks-board { padding: 28px 22px 24px; }
.drinks-col li { flex-wrap: wrap; gap: 6px; }
.drinks-col li .price-multi { gap: 12px; }
}
/* ---------- Timeline (Notre histoire) ---------- */
.timeline {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 18px;
max-width: 880px;
}
.timeline-step {
display: grid;
grid-template-columns: 160px 1fr;
gap: 28px;
align-items: start;
padding: 24px 28px;
background: var(--bg);
border: 1px solid var(--line);
border-left: 3px solid var(--gold);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(15, 31, 46, 0.02);
}
.timeline-year {
display: inline-block;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-deep);
padding-top: 4px;
}
.timeline-body h3 {
font-size: 1.2rem;
margin: 0 0 8px;
color: var(--ink);
font-weight: 600;
letter-spacing: -0.005em;
}
.timeline-body p {
margin: 0;
color: var(--text);
line-height: 1.75;
}
@media (max-width: 700px) {
.timeline-step {
grid-template-columns: 1fr;
gap: 6px;
padding: 20px 22px;
}
.timeline-year {
padding-top: 0;
color: var(--gold);
font-size: 0.82rem;
}
}
/* ---------- Chef portrait (Notre histoire) ---------- */
.chef-portrait {
margin: 36px 0 0;
padding: 28px 32px;
max-width: 880px;
background: var(--bg);
border: 1px solid var(--line);
border-top: 3px solid var(--gold);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(15, 31, 46, 0.02);
}
.chef-portrait-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
margin: 0 0 12px;
}
.chef-portrait h3 {
font-size: clamp(1.4rem, 2.4vw, 1.7rem);
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
margin: 0 0 14px;
}
.chef-portrait p {
margin: 0 0 14px;
color: var(--text);
line-height: 1.75;
}
.chef-portrait p:last-child {
margin-bottom: 0;
}
@media (max-width: 700px) {
.chef-portrait {
margin-top: 28px;
padding: 22px 22px;
}
}
/* ===========================================================
MOBILE — Hero entièrement centré
=========================================================== */
@media (max-width: 720px) {
.hero-grid {
justify-content: center;
}
.hero-copy {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.hero .eyebrow {
display: flex;
justify-content: center;
}
.hero-title,
.hero-logo {
text-align: center;
}
.hero-lead {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
justify-content: center;
}
.hero-cta-note {
text-align: center;
}
.hero-meta {
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
.hero-meta > div {
text-align: center;
}
}