/* ============================================================ Tokens — direction "console de réservation" moderne Couleur : neutres froids + indigo confiant + accent ambre ponctuel Typo : Space Grotesk (titres, géométrique) / Work Sans (corps) / IBM Plex Mono (données, heures) Concept : tableau de disponibilité en direct — pas de registre en cuir, pas de tampon ============================================================ */ :root{ --ink: #12172B; --ink-2: #0B0F1F; --surface: #FFFFFF; --bg-light: #F5F6FA; --primary: #3B4FE0; --primary-dark: #2E3FC0; --accent: #F5A623; --line: #E4E6EE; --text: #1B1F2B; --text-soft: #6B7280; --success: #16A34A; --danger: #DC2626; --radius: 10px; --display: 'Space Grotesk', sans-serif; --sans: 'Work Sans', sans-serif; --mono: 'IBM Plex Mono', monospace; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background: var(--bg-light); color: var(--text); font-family: var(--sans); min-height:100vh; } /* ============================================================ Thèmes par restaurant — remplacent les tokens ci-dessus selon data-theme sur . Un restaurant choisit son thème dans /admin/settings.php ; reserve.php pose l'attribut et charge la bonne police Google Fonts en conséquence (voir reserve.php). ============================================================ */ body[data-theme="chaleureux"]{ --ink: #6B2A2A; --ink-2: #551F1F; --primary: #6B2A2A; --primary-dark: #551F1F; --accent: #E3B04B; --bg-light: #F6EFE4; --text: #2B211A; --text-soft: #8A6A4A; --line: #E4D5C0; --display: 'Fraunces', serif; } body[data-theme="epure"]{ --ink: #1C1C1A; --ink-2: #0F0F0D; --primary: #1F3D2E; --primary-dark: #16301F; --accent: #1F3D2E; --bg-light: #FAFAF7; --text: #1C1C1A; --text-soft: #6E6C63; --line: #E7E4DC; --display: 'Cormorant', serif; } body[data-theme="nocturne"]{ --ink: #241D10; --primary: #8B6C2E; --primary-dark: #6E5623; --accent: #C99A4E; --bg-light: #FAF6EC; --text: #2B2415; --text-soft: #6B5D3F; --line: #DDD2B0; --display: 'Playfair Display', serif; } body[data-theme="marche"]{ --ink: #3A4A2C; --primary: #C7521E; --primary-dark: #A8431A; --accent: #4A5A3A; --bg-light: #F4F1E8; --text: #2E3625; --text-soft: #6B7A5A; --line: #DDD8C2; --display: 'DM Serif Display', serif; } body[data-theme="cotier"]{ --ink: #0F2624; --primary: #2E7A6C; --primary-dark: #245F54; --accent: #14302E; --bg-light: #F5F7F6; --text: #14302E; --text-soft: #5E8A83; --line: #DCE7E4; --display: 'Libre Baskerville', serif; } body[data-theme="cabane"]{ --ink: #5A2C16; --primary: #C4471F; --primary-dark: #A0391A; --accent: #F0B429; --bg-light: #FBF3E4; --text: #3E2A16; --text-soft: #8A5A2E; --line: #E4C79A; --display: 'Bitter', serif; } body[data-theme="brasserie"]{ --ink: #16261C; --primary: #4B6152; --primary-dark: #3A4C41; --accent: #C79A4B; --bg-light: #F2F1EC; --text: #1E2B22; --text-soft: #4B6152; --line: #D6D1BF; --display: 'Cormorant SC', serif; } body[data-theme="patisserie"]{ --ink: #7A4144; --primary: #D98586; --primary-dark: #B96B6C; --accent: #A85D5E; --bg-light: #FDF6F5; --text: #4A2E30; --text-soft: #8A5A5C; --line: #F0DEDC; --display: 'Petrona', serif; } .wrap{max-width:760px;margin:0 auto;padding:0 24px} .wrap-wide{max-width:1080px;margin:0 auto;padding:0 24px} /* ---------- En-tête ---------- */ .site-header{background:var(--ink);padding:20px 0;position:sticky;top:0;z-index:10} .site-header .wrap,.site-header .wrap-wide{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .brand{font-family:var(--display);font-weight:600;font-size:20px;color:#fff;letter-spacing:-0.01em} .brand em{font-style:normal;color:var(--accent)} .phone-link{color:rgba(255,255,255,0.75);text-decoration:none;font-size:14px} .phone-link:hover{color:#fff} /* ---------- Hero ---------- */ .hero{background:var(--ink);color:#fff;padding:72px 0 88px} .hero .eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.14em;font-size:12px;color:var(--accent);margin:0 0 16px} .hero h1{font-family:var(--display);font-weight:600;font-size:clamp(32px,5.5vw,50px);line-height:1.08;letter-spacing:-0.01em;margin:0 0 18px;max-width:16ch} .lede{font-size:17px;color:rgba(255,255,255,0.72);max-width:48ch;line-height:1.6} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center} /* La page de réservation (reserve.php) réutilise .hero mais sur fond clair */ .booking-desk .hero,body[data-slug] .hero{background:transparent;color:var(--text);padding:56px 0 32px} body[data-slug] .hero .eyebrow{color:var(--primary)} body[data-slug] .hero h1{color:var(--text)} body[data-slug] .lede{color:var(--text-soft)} body[data-slug] .site-header{background:var(--surface);border-bottom:1px solid var(--line)} body[data-slug] .brand{color:var(--text)} body[data-slug] .phone-link{color:var(--text-soft)} body[data-slug] .phone-link:hover{color:var(--text)} body[data-slug]{background:var(--bg-light)} .btn-stamp{ font-family: var(--sans); font-weight:600; font-size:14.5px; background: var(--primary); color: #fff; border:none; padding:13px 22px; border-radius: var(--radius); cursor:pointer; transition: background .15s ease, transform .1s ease; margin-left:14px; display:inline-block; } .btn-stamp:hover{background:var(--primary-dark)} .btn-stamp:active{transform:scale(0.98)} .btn-ghost{ font-family:var(--sans);font-weight:600;font-size:14.5px; color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,0.3); padding:12px 20px;border-radius:var(--radius);text-decoration:none;display:inline-block; transition:border-color .15s ease, background .15s ease; } .btn-ghost:hover{border-color:var(--accent);background:rgba(245,166,35,0.08)} /* ---------- Cartes / formulaire de réservation ---------- */ .booking-desk{padding-bottom:80px} .ledger-card{ background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 32px -12px rgba(16,24,40,0.12); border:1px solid var(--line); border-left:4px solid var(--primary); position:relative; margin-bottom:18px; } .ledger-row{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:18px} .ledger-row label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px} .ledger-card label.full{display:flex;flex-direction:column;gap:6px;margin-bottom:18px} .ledger-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-soft)} .chosen-slot{color:var(--primary);text-transform:none;letter-spacing:0;font-weight:600} input[type="date"],input[type="text"],input[type="tel"],input[type="email"],select,textarea{ font-family: var(--sans); font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius: 6px; background:#fff; color:var(--text); } input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px} textarea{resize:vertical} .link-btn{background:none;border:none;color:var(--primary);font-family:var(--sans);font-weight:600;font-size:13.5px;cursor:pointer;padding-left:0;text-decoration:underline} .slots-panel{margin-top:4px} .slots-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .slot-btn{ font-family:var(--mono);font-size:14px; border:1.5px solid var(--line); background:#fff;color:var(--text); padding:9px 14px;border-radius:8px;cursor:pointer; transition:border-color .12s ease, background .12s ease; } .slot-btn:hover{border-color:var(--primary)} .slot-btn.selected{background:var(--primary);border-color:var(--primary);color:#fff} .no-slots{margin-top:14px;color:var(--text-soft);font-size:14px} .hidden{display:none !important} /* ---------- Confirmation ---------- */ .ticket{display:flex;justify-content:center;padding:20px 0} .ticket-inner{ background: var(--surface); color: var(--text); padding:36px 40px; text-align:center; border-radius: var(--radius); border:1px solid var(--line); border-top:4px solid var(--success); box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 20px 48px -16px rgba(16,24,40,0.18); } .ticket-eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.14em;font-size:11px;color:var(--success);margin:0 0 8px} .ticket-inner h2{font-family:var(--display);font-size:36px;letter-spacing:0.02em;margin:0 0 14px;color:var(--text)} .ticket-note{font-size:13px;color:var(--text-soft);margin-top:14px} .site-footer{border-top:1px solid var(--line);padding:24px 0;color:var(--text-soft);font-size:13px} body[data-slug] .site-footer{background:var(--surface)} .hero ~ .site-footer, main ~ .site-footer{} .site-footer{background:var(--ink);color:rgba(255,255,255,0.55);border-top:1px solid rgba(255,255,255,0.08)} body[data-slug] .site-footer{background:var(--surface);color:var(--text-soft);border-top:1px solid var(--line)} .site-footer a{color:inherit} .brand-logo{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#fff} .banner-hero{ height:260px;background-size:cover;background-position:center; } .address-line{font-size:14px;color:var(--text-soft);margin-top:14px} body[data-slug] .banner-hero + main .hero .address-line{color:var(--text-soft)} /* Calendrier de disponibilités */ .avail-calendar{margin-top:4px} .avail-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .cal-month-label{font-family:var(--display);font-weight:600;font-size:15px;text-transform:capitalize} .cal-nav{background:none;border:1px solid var(--line);border-radius:6px;width:30px;height:30px;cursor:pointer;font-size:14px;color:var(--text)} .cal-nav:hover{border-color:var(--primary);color:var(--primary)} .avail-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .cal-dow{text-align:center;font-family:var(--mono);font-size:10px;color:var(--text-soft);padding-bottom:4px} .cal-day{ aspect-ratio:1;border-radius:6px;border:1px solid var(--line);background:#fff; font-family:var(--sans);font-size:13px;cursor:pointer;color:var(--text); } .cal-day.cal-disponible{border-color:var(--success);background:#EFFBF3;color:#0F7A3D;font-weight:600} .cal-day.cal-disponible:hover{background:var(--success);color:#fff} .cal-day.cal-complet,.cal-day.cal-hors_periode{color:#C4C7D0;cursor:not-allowed;background:#FAFAFB} .cal-day.selected{outline:2px solid var(--primary);background:var(--primary);color:#fff} .avail-legend{display:flex;gap:16px;margin-top:10px;font-size:11px;color:var(--text-soft)} .avail-legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px} .dot-open{background:var(--success)} .dot-full{background:#C4C7D0} @media (max-width:640px){ .banner-hero{height:220px} } @media (max-width:600px){ .ledger-row{flex-direction:column} .btn-stamp{margin-left:0;width:100%;text-align:center} } /* ============================================================ Page de vente (landing) ============================================================ */ .section{padding:64px 0} .section-head{max-width:640px;margin:0 0 40px} .section-head .eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.14em;font-size:12px;color:var(--primary);margin:0 0 10px} .section-head h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,36px);margin:0 0 12px;letter-spacing:-0.01em;color:var(--text)} .section-head p{color:var(--text-soft);font-size:16px;line-height:1.5;margin:0} .section.on-dark{background:var(--ink);color:#fff} .section.on-dark .section-head h2{color:#fff} .section.on-dark .section-head p{color:rgba(255,255,255,0.65)} .section.on-dark .section-head .eyebrow{color:var(--accent)} /* Grille de fonctionnalités */ .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px} .feature-card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:24px; box-shadow:0 1px 2px rgba(16,24,40,0.04); } .feature-card .icon{width:32px;height:32px;color:var(--primary);margin-bottom:16px} .feature-card h3{font-family:var(--display);font-weight:600;font-size:17px;margin:0 0 8px;color:var(--text)} .feature-card p{font-size:14px;line-height:1.5;color:var(--text-soft);margin:0} /* Maquette miniature du plan de salle — élément signature */ .mini-floorplan{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px; display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px; box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 16px 40px -16px rgba(16,24,40,0.12); } .mini-table{ aspect-ratio:1;border:2px solid var(--success);border-radius:8px; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:12px;color:var(--text);background:#EFFBF3; } .mini-table.round{border-radius:50%} .mini-table.taken{background:var(--ink);color:#fff;border-color:var(--ink);opacity:0.55} /* Comparatif de prix */ .compare-table{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .compare-table th,.compare-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)} .compare-table th{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-soft);background:var(--bg-light)} .compare-table td.us{font-weight:700;color:var(--primary)} .compare-table tr:last-child td{border-bottom:none} .compare-note{font-size:12px;color:var(--text-soft);margin-top:10px} /* Cartes de tarification */ .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .price-card{ background:var(--surface);color:var(--text);border-radius:var(--radius);padding:26px; border:1px solid var(--line);position:relative; box-shadow:0 1px 2px rgba(16,24,40,0.04); } .price-card.featured{border:2px solid var(--primary);box-shadow:0 20px 48px -16px rgba(59,79,224,0.25)} .price-card .tag{ position:absolute;top:-12px;right:20px;background:var(--primary);color:#fff; font-family:var(--sans);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.04em; padding:4px 10px;border-radius:20px; } .price-card h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 4px} .price-card .price{font-family:var(--display);font-size:32px;font-weight:600;margin:10px 0 4px} .price-card .price span{font-size:13px;color:var(--text-soft);font-weight:400;font-family:var(--sans)} .price-card ul{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:8px} .price-card li{font-size:13.5px;padding-left:18px;position:relative;color:var(--text-soft)} .price-card li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700} .price-card .btn-stamp{margin-left:0;width:100%;text-align:center;text-decoration:none;box-sizing:border-box} .cta-band{ background:var(--ink);color:#fff; text-align:center;padding:70px 24px; } .cta-band h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,38px);margin:0 0 14px;letter-spacing:-0.01em} .cta-band p{color:rgba(255,255,255,0.65);margin:0 0 26px} @media (max-width:640px){ .mini-floorplan{grid-template-columns:repeat(3,1fr)} .compare-table{font-size:13px} .compare-table th,.compare-table td{padding:10px} }