/*
Theme Name: Bam Bam Champs-Élysées
Description: Thème du lieu Bam Bam, avenue des Champs-Élysées. Bordeaux, noir et or ; Abril Fatface, Lora et Jost.
Version: 1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: bambam
License: Propriétaire
*/

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid #D4A84B; outline-offset: 3px; }
[id] { scroll-margin-top: 70px; }

/* Petites capitales dorées au-dessus des titres */
.bb-label { font-family: var(--wp--preset--font-family--sans); font-size: 12px !important; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--wp--preset--color--or); margin: 0; }
.bb-doux { color: var(--wp--preset--color--ivoire-doux); }
.bb-note { font-family: var(--wp--preset--font-family--sans); font-size: 13px; color: var(--wp--preset--color--ivoire-doux); }

/* En-tête */
.bb-entete { position: sticky; top: 0; z-index: 50; background: rgba(13, 11, 11, .92); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(212, 168, 75, .35); }
.admin-bar .bb-entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .bb-entete { top: 46px; } }
.bb-marque { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 22px; white-space: nowrap; }
.bb-marque a { color: var(--wp--preset--color--or); text-decoration: none; }
.bb-marque em { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 500; font-size: 18px; margin-left: 6px; }
.bb-entete .wp-block-navigation a { color: var(--wp--preset--color--ivoire-doux); text-decoration: none; }
.bb-entete .wp-block-navigation a:hover, .bb-entete .wp-block-navigation .bb-cta a { color: var(--wp--preset--color--or); }
.bb-entete .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--noir); color: var(--wp--preset--color--ivoire); }

/* Ouverture */
.bb-hero .wp-block-image { margin-inline: auto; }
.bb-ouverture { display: table; margin-inline: auto !important; font-family: var(--wp--preset--font-family--sans); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--wp--preset--color--or); border: 1px solid rgba(212, 168, 75, .35); padding: 9px 20px; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--or); border: 1px solid var(--wp--preset--color--or); }

/* Bandes et filets */
.bb-bande { border-block: 1px solid rgba(212, 168, 75, .35); }
.bb-cadre img { border: 1px solid rgba(212, 168, 75, .35); }
.bb-cadre figcaption { font-family: var(--wp--preset--font-family--sans); font-size: 12px; letter-spacing: .08em; color: var(--wp--preset--color--ivoire-doux); text-align: left; }
.bb-trois > .wp-block-column { text-align: center; padding-inline: 24px; }
@media (min-width: 782px) { .bb-trois > .wp-block-column + .wp-block-column { border-left: 1px solid rgba(212, 168, 75, .35); } }
.bb-trois h3 { margin-block: 8px; }
.bb-trois p:not(.bb-label) { color: var(--wp--preset--color--ivoire-doux); font-size: 16px; }

/* Privatisations */
.bb-discretion { border-left: 2px solid var(--wp--preset--color--or); padding-left: 18px; font-style: italic; }
.bb-occasions { list-style: none; padding: 0; margin: 0; }
.bb-occasions li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 16px; border-bottom: 1px solid rgba(212, 168, 75, .35); font-family: var(--wp--preset--font-family--sans); font-size: 13px; color: var(--wp--preset--color--ivoire-doux); text-align: right; }
.bb-occasions li:first-child { border-top: 1px solid rgba(212, 168, 75, .35); }
.bb-occasions li strong { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400; font-size: 20px; color: var(--wp--preset--color--ivoire); text-align: left; }

/* Boutique */
.bb-visuel img { aspect-ratio: 4 / 5; object-fit: contain; padding: 18%; box-sizing: border-box; width: 100%; background: radial-gradient(circle at 50% 40%, #4E0710 0%, #0D0B0B 85%); border: 1px solid rgba(212, 168, 75, .35); }
.bb-produit h3 { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 19px; margin: 6px 0 0; }
.bb-produit p { font-family: var(--wp--preset--font-family--sans); font-size: 13px; color: var(--wp--preset--color--ivoire-doux); margin: 4px 0 0; }

/* Formulaires (réservation et contact) */
.bb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.bb-form .champ { display: grid; gap: 6px; min-width: 0; }
.bb-form .large, .bb-form button, .bb-form .merci, .bb-form .offres, .bb-form .recap { grid-column: 1 / -1; }
.bb-form label { font-family: var(--wp--preset--font-family--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--or-pale); }
.bb-form input, .bb-form select, .bb-form textarea { font: inherit; font-size: 16px; color: var(--wp--preset--color--ivoire); background: rgba(13, 11, 11, .35); border: 0; border-bottom: 1px solid rgba(212, 168, 75, .35); padding: 10px 2px; width: 100%; border-radius: 0; color-scheme: dark; }
.bb-form select option { background: var(--wp--preset--color--noir); }
.bb-form textarea { min-height: 110px; resize: vertical; }
.bb-form input:focus, .bb-form select:focus, .bb-form textarea:focus { border-bottom-color: var(--wp--preset--color--or); outline: none; }
.bb-form button { justify-self: start; font-family: var(--wp--preset--font-family--sans); font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--noir); background: var(--wp--preset--color--or); border: 0; padding: 15px 30px; cursor: pointer; }
.bb-form button:hover { background: var(--wp--preset--color--or-pale); }
.bb-form .merci { font-style: italic; color: var(--wp--preset--color--or-pale); margin: 0; }
.bb-form .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bb-panneau { border: 1px solid rgba(212, 168, 75, .35); padding: clamp(20px, 4vw, 36px); background: var(--wp--preset--color--bordeaux-fonce); }
.offres { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.offres legend { margin-bottom: 12px; }
.offre { position: relative; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
.offre input { position: absolute; opacity: 0; pointer-events: none; }
.offre span { display: grid; gap: 4px; height: 100%; padding: 14px; border: 1px solid rgba(212, 168, 75, .35); }
.offre b { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 500; font-size: 18px; color: var(--wp--preset--color--ivoire); }
.offre small { font-family: var(--wp--preset--font-family--sans); font-size: 12px; color: var(--wp--preset--color--ivoire-doux); }
.offre input:checked + span { border-color: var(--wp--preset--color--or); background: rgba(212, 168, 75, .1); }
.offre input:focus-visible + span { outline: 2px solid var(--wp--preset--color--or); outline-offset: 3px; }
.recap { font-style: italic; color: var(--wp--preset--color--or-pale); border-top: 1px solid rgba(212, 168, 75, .35); padding-top: 18px; margin: 0; }
.bb-coord p { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 14px; }
@media (max-width: 560px) { .bb-form, .offres { grid-template-columns: 1fr; } }

/* Pied de page */
.bb-pied { border-top: 1px solid rgba(212, 168, 75, .35); font-family: var(--wp--preset--font-family--sans); font-size: 13px; color: var(--wp--preset--color--ivoire-doux); }
.bb-pied a { color: var(--wp--preset--color--ivoire-doux); }

/* Espacements des sections de la page d'accueil */
.bb-section { padding-block: clamp(56px, 8vw, 88px); }
.bb-hero { padding-block: 72px 64px; text-align: center; }
.bb-centre { text-align: center; }
.wp-block-columns.bb-colonnes { gap: clamp(32px, 5vw, 56px); }