/* ==========================================================================
DJ Boujou — styles du thème
Valeurs reprises à l'identique de la maquette Claude Design.
========================================================================== */
/* ---------- Polices hébergées sur le site (Fraunces & Manrope, licence SIL OFL) ---------- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- Charte « Ivoire & or » ----------
Les variables décrivent la surface courante : ivoire par défaut, « brun nuit » dans les zones
sombres (.tone-dark et en-tête, hauts de page, commandements, encadrés, pied de page).
--cream = couleur du texte principal, --black = fond, --accent = or pour les textes et filets
(or foncé sur l'ivoire pour rester lisible), --gold = or des boutons et aplats. */
:root {
--gold: #C9A24B;
--gold-dark: #7E6226;
--night: #1C1916;
--night-2: #26211C;
--ivory: #F7F2EA;
--accent: #7E6226;
--cream: #1D1A17;
--black: #F7F2EA;
--panel: #FFFFFF;
--seal: #F2EBDF;
--alt: #EFE7DA;
--media: #E7DDCC;
--footer: #161310;
--muted: #6B6258;
--muted-2: #6F6558;
--muted-3: #716759;
--soft: #3E3831;
--line: rgba(29, 26, 23, 0.1);
--line-2: #E4D9C6;
--line-strong: rgba(29, 26, 23, 0.28);
--hover-tint: rgba(29, 26, 23, 0.05);
--scheme: light;
--serif: 'Fraunces', Georgia, serif;
--sans: 'Manrope', system-ui, sans-serif;
--gutter: 32px;
}
/* Zones sombres « brun nuit » */
.tone-dark,
.site-header,
.site-footer,
.hero,
.page-hero,
.commandments-card,
.framed,
.lightbox,
.is-style-djb-sombre,
.is-style-djb-avis {
--accent: #C9A24B;
--cream: #F5EFE4;
--black: #1C1916;
--panel: #26211C;
--seal: #221E1A;
--alt: #1C1916;
--media: #2E2823;
--muted: #C9BFAE;
--muted-2: #A89E8E;
--muted-3: #9B9183;
--soft: #DDD4C6;
--line: rgba(245, 239, 228, 0.1);
--line-2: rgba(245, 239, 228, 0.12);
--line-strong: rgba(245, 239, 228, 0.28);
--hover-tint: rgba(245, 239, 228, 0.06);
--scheme: dark;
color: var(--cream);
}
.tone-dark { background: var(--night); }
.hero,
.page-hero { background: linear-gradient(160deg, #26211C, #161310); }
.framed { background: linear-gradient(160deg, #26211C, #1C1916); }
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--cream); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
img, video, iframe { max-width: 100%; }
/* Les photos du thème portent leur largeur et leur hauteur (balise ![]()
, 1.84) pour que la page ne bouge pas : sans « height: auto », la hauteur
écrite dans la balise s'imposerait aux styles qui ne fixent que la largeur (mur de photos des options, photos du déroulé…). Tout style de classe qui
fixe une hauteur l'emporte toujours. */
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: var(--night); padding: 10px 16px; font-size: 14px; font-weight: 700; }
.skip-link:focus { left: 16px; top: 16px; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
/* Conteneur : 1180px de contenu + 32px de marge de chaque côté */
.wrap { max-width: calc(1180px + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* ---------- Boutons & liens ---------- */
.btn { display: inline-block; font-family: var(--sans); font-size: 14px; padding: 15px 28px; border-radius: 2px; cursor: pointer; text-align: center; }
.btn--fill { background: var(--gold); color: var(--night); font-weight: 700; border: 0; }
.btn--fill:hover { filter: brightness(1.08); }
.btn--line { border: 1px solid var(--line-strong); color: var(--cream); font-weight: 600; }
.btn--line:hover { background: var(--hover-tint); }
.btn--sm { font-size: 13px; letter-spacing: 0.03em; padding: 11px 22px; white-space: nowrap; }
.btn--lg { padding: 17px 34px; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-row--top { align-items: flex-start; }
.text-link { font-size: 14px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.arrow-link { font-size: 13px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
/* ---------- Sur-titres & titres ---------- */
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.eyebrow--center { justify-content: center; }
.eyebrow__line { display: inline-block; flex-shrink: 0; width: 36px; height: 1px; background: var(--accent); }
.eyebrow__text { font-size: 12px; letter-spacing: 0.28em; color: var(--accent); font-weight: 700; }
.h2 { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.25; text-wrap: balance; }
.h2__em { font-style: italic; color: var(--accent); }
.djb-note { font-style: normal; font-weight: 400; color: var(--accent); }
.label-caps { font-size: 11px; letter-spacing: 0.2em; color: var(--accent); }
/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(28, 25, 22, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.admin-bar .site-header { top: 32px; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.seal { position: relative; flex-shrink: 0; width: 76px; height: 64px; background: var(--seal); border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; }
.seal__corner { position: absolute; box-sizing: content-box; width: 10px; height: 10px; border: 0 solid var(--cream); }
.seal__corner--tl { top: -2px; left: -2px; border-top-width: 2px; border-left-width: 2px; }
.seal__corner--tr { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.seal__corner--bl { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; }
.seal__corner--br { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; }
.main-nav { display: flex; align-items: center; gap: 36px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.main-nav a:hover { color: var(--cream); }
.main-nav a.is-active { color: var(--accent); }
/* Sous-menu de Prestations (au survol ou au clavier) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-caret { margin-left: 5px; vertical-align: 1px; transition: transform 0.25s ease; }
.nav-item--has-sub:hover .nav-caret,
.nav-item--has-sub:focus-within .nav-caret { transform: rotate(180deg); }
.sub-nav { position: absolute; top: 100%; left: 50%; z-index: 50; padding-top: 22px; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.nav-item--has-sub:hover .sub-nav,
.nav-item--has-sub:focus-within .sub-nav { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sub-nav__panel { display: flex; flex-direction: column; min-width: 280px; padding: 10px 0; background: rgba(28, 25, 22, 0.98); border: 1px solid rgba(201, 162, 75, 0.3); border-radius: 2px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85); }
.sub-nav a { display: block; padding: 11px 22px; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease; }
.sub-nav a:hover { background: rgba(201, 162, 75, 0.08); padding-left: 27px; }
.site-header__actions { display: flex; align-items: center; gap: 14px; }
.btn--quote::first-letter { text-transform: uppercase; }
/* Note Google, à l'extrémité droite de l'en-tête */
.g-badge { display: flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 5px 12px 5px 10px; border: 1px solid rgba(201, 162, 75, 0.38); border-radius: 2px; background: rgba(245, 239, 228, 0.03); color: var(--cream); line-height: 1.15; white-space: nowrap; transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
.g-badge:hover { border-color: var(--accent); background: rgba(201, 162, 75, 0.08); box-shadow: 0 0 22px -6px rgba(201, 162, 75, 0.6); }
.g-badge svg { flex-shrink: 0; }
/* Drapeau de langue : même page dans l'autre langue (inc/i18n.php) */
.lang-switch { display: inline-flex; flex-shrink: 0; padding: 4px; border: 1px solid rgba(201, 162, 75, 0.38); border-radius: 2px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.lang-switch:hover,
.lang-switch:focus-visible { border-color: var(--accent); box-shadow: 0 0 18px -6px rgba(201, 162, 75, 0.6); transform: translateY(-1px); outline: none; }
.lang-switch__flag { display: block; width: 30px; height: 20px; border-radius: 1px; }
.entry-notice { margin-bottom: 1.6em; padding: 12px 16px; border-left: 2px solid var(--gold); background: var(--panel); font-size: 14.5px; color: var(--muted); }
.g-badge__body { display: flex; flex-direction: column; }
.g-badge__score { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 16px; font-weight: 500; }
.g-badge__stars { color: var(--accent); font-size: 11px; letter-spacing: 1.5px; text-shadow: 0 0 10px rgba(201, 162, 75, 0.5); }
.g-badge__label { font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); }
/* Widget Trustindex : réserve la place pendant son chargement */
.reviews-widget { min-height: 200px; }
/* Widget Trustindex aux couleurs du site (ses styles imposent leur police et le blanc : !important nécessaire) */
.reviews-widget .ti-widget .ti-widget-container,
.reviews-widget .ti-widget .ti-widget-container * { font-family: var(--sans) !important; }
.reviews-widget .ti-widget .ti-name { font-family: var(--serif) !important; font-weight: 500 !important; font-size: 16px !important; color: var(--cream) !important; }
.reviews-widget .ti-widget .ti-date { color: var(--muted-2) !important; }
.reviews-widget .ti-widget .ti-review-content { color: var(--soft) !important; }
.reviews-widget .ti-widget .ti-read-more span { color: var(--accent) !important; opacity: 1 !important; }
.reviews-widget .ti-widget[data-layout-id][data-set-id] .ti-review-item > .ti-inner { background: var(--panel) !important; border: 1px solid var(--line-2) !important; border-radius: 2px !important; padding: 24px !important; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.reviews-widget .ti-widget[data-layout-id][data-set-id] .ti-review-item > .ti-inner:hover { border-color: rgba(201, 162, 75, 0.4) !important; box-shadow: 0 26px 60px -30px rgba(201, 162, 75, 0.5); }
.reviews-widget .ti-widget[data-layout-id][data-set-id] .ti-load-more-reviews-container .ti-load-more-reviews-button { background: transparent !important; border: 1px solid rgba(201, 162, 75, 0.6) !important; border-radius: 2px !important; color: var(--cream) !important; font-weight: 600 !important; padding: 13px 26px !important; }
.reviews-widget .ti-widget[data-layout-id][data-set-id] .ti-load-more-reviews-container .ti-load-more-reviews-button:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--black) !important; }
.reviews-widget .ti-widget[data-layout-id][data-set-id] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn { background: transparent !important; border-color: rgba(201, 162, 75, 0.6) !important; border-radius: 2px !important; color: var(--cream) !important; font-weight: 600 !important; padding: 12px 20px !important; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.reviews-widget .ti-widget[data-layout-id][data-set-id] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--black) !important; }
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid rgba(245, 239, 228, 0.18); border-radius: 2px; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--cream); transition: transform 0.2s ease, opacity 0.2s ease; }
.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ---------- Accueil : hero ---------- */
.hero__inner { padding-top: 72px; padding-bottom: 64px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.85fr; gap: 64px; align-items: center; }
.hero__logo { display: flex; justify-content: center; margin-bottom: 24px; }
.hero__logo svg { display: block; max-width: 100%; height: auto; }
.hero .eyebrow { margin-bottom: 28px; }
h1.eyebrow { font-size: 1rem; font-weight: 400; line-height: 1.5; }
/* Sur-titre en lignes (1.120) : une ligne par rangée, chacune avec son trait de chaque côté. */
.eyebrow--rows { flex-direction: column; gap: 10px; }
.eyebrow__row { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
/* Téléphone : les traits restent (plus courts) tant que la ligne de texte les accepte ; sur les écrans de 440 px et moins, toute la largeur va au texte (comme avant). */
@media (max-width: 600px) {
.hero .eyebrow--rows .eyebrow__line { display: inline-block; width: 18px; }
.eyebrow--rows .eyebrow__row { gap: 10px; }
}
@media (max-width: 440px) {
.hero .eyebrow--rows .eyebrow__line { display: none; }
}
h1.eyebrow .eyebrow__text { text-transform: uppercase; text-align: center; text-wrap: balance; }
.hero__title { font-family: var(--serif); font-weight: 500; font-size: 58px; line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 26px; text-align: center; }
.hero__title em { font-style: italic; color: var(--accent); }
.hero__lead { font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 480px; margin: 0 auto 36px; text-align: center; }
.hero .btn-row { justify-content: center; }
.hero__media { position: relative; }
.hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
/* Photo dans son cadre (1.105) : portrait 3:4 ou paysage 16:9, avec cadrage et zoom (--hx, --hy, --hz posés par le gabarit ; « scale » se combine avec l'animation d'entrée). */
.hero__photo { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 2px; background: var(--media); }
.hero__photo--landscape { aspect-ratio: 16 / 9; }
.hero__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--hx, 50%) var(--hy, 50%); scale: var(--hz, 1); transform-origin: var(--hx, 50%) var(--hy, 50%); }
.hero__video .hero__fallback { object-position: var(--hx, 50%) var(--hy, 50%); scale: var(--hz, 1); transform-origin: var(--hx, 50%) var(--hy, 50%); }
/* Photo retirée, sans vidéo (1.103) : plus de colonne d'image, textes centrés. */
/* Cadre portrait plus grand (1.120, réglage « Taille du cadre portrait » de l'accueil) : plus haut (5:7 ou 2:3 au lieu de 3:4) et, colonne de l'image plus large seulement sur les grandes fenêtres (à partir de 1230 px, ou 1270 px pour « xlarge ») : en dessous, la colonne du slogan ne serait plus assez large pour « Je la mets en musique » sur une ligne.
« standard » garde le cadre d'origine ; le format paysage n'est pas concerné. */
.hero__grid[data-size="large"]:not(.hero__grid--landscape) :is(.hero__video, .hero__photo), .hero__grid[data-size="large"]:not(.hero__grid--landscape) .hero__media > img { aspect-ratio: 5 / 7; }
.hero__grid[data-size="xlarge"]:not(.hero__grid--landscape) :is(.hero__video, .hero__photo), .hero__grid[data-size="xlarge"]:not(.hero__grid--landscape) .hero__media > img { aspect-ratio: 2 / 3; }
/* « Vertical entier » (9:16, le format d'une vidéo de téléphone : aucun rognage) : le cadre est limité à la hauteur de la fenêtre (moins 200 px) et centré dans sa colonne. */
.hero__grid[data-size="tall"]:not(.hero__grid--landscape) :is(.hero__video, .hero__photo), .hero__grid[data-size="tall"]:not(.hero__grid--landscape) .hero__media > img { aspect-ratio: 9 / 16; }
.hero__grid[data-size="tall"]:not(.hero__grid--landscape):not(.hero__grid--solo) .hero__media { width: clamp(260px, calc((100vh - 200px) * 9 / 16), 100%); justify-self: center; }
@media (min-width: 1230px) {
.hero__grid[data-size="large"]:not(.hero__grid--landscape):not(.hero__grid--solo) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 48px; }
}
@media (min-width: 1270px) {
.hero__grid[data-size="xlarge"]:not(.hero__grid--landscape):not(.hero__grid--solo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
.hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.hero__grid--solo > div { max-width: 780px; margin: 0 auto; }
/* Vidéo à la place de la photo (1.100) : cadre portrait (3:4, comme la photo) ou paysage (16:9, colonne de l'image un peu plus large). */
.hero__video { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 2px; background: var(--media); }
.hero__video--landscape { aspect-ratio: 16 / 9; }
.hero__video > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__video.is-manual > video { cursor: pointer; }
/* Repli photo (1.104) : la vidéo passe avant la photo ; la photo ne s'affiche que sans JavaScript, avec « réduire les animations » (la vidéo est alors cachée) ou
l'économiseur de données (classe is-static posée par accueil.js). Avec une vignette choisie (is-manual), rien de tout cela : la vignette sert d'image. */
.hero__video .hero__fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } /* « .hero__video » : l'emporte sur « .hero__media img » */
.hero__video .hero__fallback--ns { display: block; }
@media (prefers-reduced-motion: reduce) {
.hero__video:not(.is-manual) .hero__fallback { display: block; }
.hero__video:not(.is-manual):has(.hero__fallback) > video,
.hero__video:not(.is-manual):has(.hero__fallback) .hero__sound { display: none; }
}
.hero__video.is-static:not(.is-manual) .hero__fallback { display: block; }
.hero__video.is-static:not(.is-manual):has(.hero__fallback) > video,
.hero__video.is-static:not(.is-manual):has(.hero__fallback) .hero__sound { display: none; }
/* Lecture automatique refusée par le navigateur (mode économie d'énergie de l'iPhone, 1.149) : la photo de repli prend le relais, comme avec « réduire les animations » */
.hero__video.is-blocked:not(.is-manual):not(.is-playing) .hero__fallback { display: block; }
.hero__video.is-blocked:not(.is-manual):not(.is-playing):has(.hero__fallback) > video,
.hero__video.is-blocked:not(.is-manual):not(.is-playing):has(.hero__fallback) .hero__sound { display: none; }
/* Photo choisie à la place de la vidéo (1.149) : une vraie image posée sur la vidéo (vidéos des en-têtes de prestations, vignette de la vidéo de l'accueil). Cachée par défaut ; visible
avec « réduire les animations », l'économiseur de données (classe djb-save-data posée par main.js) ou quand la lecture automatique est refusée (is-blocked). Elle s'efface dès que la
vidéo de l'accueil, lancée par son bouton, est en lecture. Cadrage et zoom : les variables --hx, --hy, --hz écrites sur l'image (réglage « Cadrage et zoom de la photo de remplacement »,
1.150 ; 50 %, 50 %, zoom 1 sans réglage). */
.media-slot > .media-slot__still,
.hero__video > .media-slot__still { display: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--hx, 50%) var(--hy, 50%); scale: var(--hz, 1); transform-origin: var(--hx, 50%) var(--hy, 50%); }
@media (prefers-reduced-motion: reduce) {
.media-slot > .media-slot__still,
.hero__video:not(.is-playing) > .media-slot__still { display: block; }
}
html.djb-save-data .media-slot > .media-slot__still,
html.djb-save-data .hero__video:not(.is-playing) > .media-slot__still,
.media-slot.is-blocked > .media-slot__still,
.hero__video.is-blocked:not(.is-playing) > .media-slot__still { display: block; }
/* Bouton de lecture doré (vignette choisie : la vidéo ne démarre qu'au toucher) et bouton son, en bas de la vidéo (1.102). Même or que toutes les pastilles de lecture du site. */
.hero__play { position: absolute; z-index: 2; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0; border: 0; border-radius: 50%; background: var(--gold); color: #1D1A17; box-shadow: 0 0 0 7px rgba(201, 162, 75, 0.3), 0 14px 34px rgba(0, 0, 0, 0.45); cursor: pointer; transition: transform 0.35s ease, filter 0.25s ease; }
.hero__play::before { content: ""; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent currentColor; }
.hero__play:hover { transform: scale(1.08); filter: brightness(1.08); }
.hero__play:focus-visible, .hero__sound:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hero__video.is-playing .hero__play { display: none; }
.hero__sound { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: rgba(20, 17, 14, 0.62); color: var(--gold); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; }
.hero__sound[hidden] { display: none; }
.hero__sound:hover { background: var(--gold); color: #1D1A17; }
.hero__sound-on { display: none; }
.hero__sound.is-on .hero__sound-on { display: block; }
.hero__sound.is-on .hero__sound-off { display: none; }
/* Vidéo paysage 16:9 seulement (1.101) : l'en-tête est réorganisé pour rester harmonieux. Le logo et le sur-titre passent en haut, au centre ; en dessous, le slogan à gauche et la
vidéo à droite ; le texte de présentation et les deux boutons, centrés, sous la vidéo. Sur téléphone, tout s'empile : logo, sur-titre, slogan, vidéo, texte, boutons. */
.hero__grid--landscape { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 56px; row-gap: 0; grid-template-areas: "logo logo" "eyebrow eyebrow" "title media" "lead lead" "btns btns"; }
.hero__grid--landscape > div { display: contents; }
.hero__grid--landscape .hero__logo { grid-area: logo; }
.hero__grid--landscape .eyebrow { grid-area: eyebrow; }
.hero__grid--landscape .hero__title { grid-area: title; margin-bottom: 0; font-size: clamp(38px, min(4.6vw, max(42px, calc(15vh - 65px))), 58px); }
.hero__grid--landscape .hero__media { grid-area: media; }
.hero__grid--landscape .hero__lead { grid-area: lead; max-width: 720px; margin: 40px auto 32px; }
.hero__grid--landscape .btn-row { grid-area: btns; }
/* Ordinateur portable peu haut (et seulement lui) : espaces resserrés et vidéo un peu plus petite, selon la hauteur de la fenêtre (1.102) ; identique au-dessus de 820 px de haut. */
@media (min-width: 901px) and (max-height: 820px) {
.hero__grid--landscape .hero__lead { margin: clamp(10px, calc(16.5vh - 95px), 40px) auto clamp(10px, calc(11.7vh - 64px), 32px); }
.hero__grid--landscape .hero__media { width: min(100%, calc((100vh - 360px) * 16 / 9)); justify-self: end; }
}
@media (max-width: 900px) {
.hero__grid--landscape { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "eyebrow" "title" "media" "lead" "btns"; }
.hero__grid--landscape .hero__title { margin-bottom: 28px; }
.hero__grid--landscape .hero__lead { margin: 32px auto 28px; }
}
.hero__caption { font-size: 12px; color: var(--muted-2); margin: 14px 4px 0; font-style: italic; }
/* Écrans d'ordinateur peu hauts (portables) : l'en-tête se resserre, selon la hauteur de la fenêtre, pour que les boutons
arrivent dans l'écran (identique au-dessus de 820 px de haut). */
@media (min-width: 901px) and (max-height: 820px) {
.hero__inner { padding-top: clamp(24px, calc(44vh - 289px), 72px); padding-bottom: clamp(28px, calc(20vh - 100px), 64px); }
.hero__logo { margin-bottom: clamp(6px, calc(11.7vh - 72px), 24px); }
.hero__logo svg { width: clamp(230px, calc(212.5vh - 1322px), 420px); }
.hero .eyebrow { margin-bottom: clamp(12px, calc(10vh - 54px), 28px); }
.hero__title { font-size: clamp(42px, calc(15vh - 65px), 58px); margin-bottom: clamp(12px, calc(8.3vh - 42px), 26px); }
.hero__lead { font-size: clamp(15.5px, calc(1.4vh + 5.5px), 17px); line-height: 1.6; max-width: 560px; margin-bottom: clamp(16px, calc(11.7vh - 60px), 36px); }
}
.corner { position: absolute; box-sizing: content-box; width: 64px; height: 64px; }
.corner--tl { top: -14px; left: -14px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.corner--br { bottom: -14px; right: -14px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 0; }
.stats-band { background: #FBF8F2; border-bottom: 1px solid var(--line-2); padding: 36px 0; }
.stats-band .stats__item { background: #FBF8F2; }
.stats__item { background: var(--black); padding: 28px 20px; text-align: center; }
.stats__value { font-family: var(--serif); font-size: 34px; color: var(--accent); }
.stats__label { font-size: 12px; color: var(--muted); letter-spacing: 0.05em; margin-top: 6px; }
/* ---------- Sections ---------- */
.section { padding-top: 96px; padding-bottom: 96px; }
.anchor { scroll-margin-top: 24px; }
.band { background: var(--alt); }
.band--bordered { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 620px; margin-bottom: 64px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; }
.section-head__main { max-width: 560px; }
/* Cartes qui se soulèvent au survol */
.card { transition: transform 0.25s ease, border-color 0.25s ease; }
.card:hover { transform: translateY(-4px); border-color: rgba(201, 162, 75, 0.45); }
/* L'approche */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.approach__item { background: var(--panel); padding: 40px 32px; border: 1px solid transparent; }
.approach__icon { display: block; margin-bottom: 22px; }
.approach__item h3 { font-family: var(--serif); font-weight: 500; font-size: 19px; margin-bottom: 12px; }
.approach__item p { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
/* BoujouZik (accueil) */
.app-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 72px; align-items: center; }
.app-grid--card-first { grid-template-columns: 1.05fr 0.95fr; }
.app-grid--card-first > .timeline-card { order: -1; }
.app__title { font-size: 34px; margin-bottom: 22px; }
.app__text { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin-bottom: 28px; }
.checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.checklist li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--soft); }
.checklist svg { flex-shrink: 0; }
.framed { position: relative; background: var(--panel); border: 1px solid var(--line-2); }
.framed__corner { position: absolute; box-sizing: content-box; width: 36px; height: 36px; }
.framed__corner--tl { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.framed__corner--br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.timeline-card { padding: 40px; }
.timeline-card .label-caps { margin-bottom: 26px; }
.timeline { position: relative; margin-left: 6px; padding-left: 26px; border-left: 1px solid rgba(245, 239, 228, 0.15); display: flex; flex-direction: column; gap: 22px; }
.timeline li { position: relative; }
.timeline__dot { position: absolute; left: -31px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.timeline__title { font-family: var(--serif); font-size: 17px; color: var(--cream); margin-bottom: 3px; }
.timeline__sub { font-size: 12.5px; color: var(--muted-2); }
.badges { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.badge { font-size: 11.5px; padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(245, 239, 228, 0.25); color: var(--muted); }
.badge--fill { background: var(--gold); color: var(--night); font-weight: 700; border-color: transparent; }
/* Aperçu prestations */
/* Grandes vignettes 2 × 2 : photo ou vidéo en boucle au format 16:9 */
.services-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.service-card { display: block; background: var(--panel); border: 1px solid var(--line-2); overflow: hidden; }
/* Nombre impair de vignettes (jusqu'à 8, 1.80) : la dernière se place au milieu au lieu de rester seule à gauche. */
@media (min-width: 701px) {
.services-preview:not([data-mode="volets"]) > .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 14px); }
}
.service-card__media { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line-2); }
.service-card__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 28px 26px; }
.service-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.service-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.service-card__more { flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); white-space: nowrap; transition: transform 0.3s ease; }
.service-card:hover .service-card__more { transform: translateX(4px); }
/* ---------- Emplacements photo / vidéo ---------- */
.media-slot { position: relative; overflow: hidden; background: var(--media); display: flex; align-items: center; justify-content: center; }
.media-slot__label { font-size: 11px; color: var(--muted-3); letter-spacing: 0.05em; text-align: center; padding: 0 16px; }
.media-slot > img, .media-slot > video, .media-slot > iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.media-slot > img { object-fit: cover; }
.media-slot > video { object-fit: contain; background: #000; }
.media-slot > video.media-slot__loop { object-fit: cover; background: none; }
/* ---------- Témoignages ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-card { background: var(--panel); border: 1px solid var(--line-2); padding: 32px; }
.quote-card__mark { font-family: var(--serif); font-size: 34px; color: var(--accent); line-height: 1; margin-bottom: 12px; }
.quote-card__text { font-size: 14.5px; line-height: 1.7; color: var(--soft); font-style: italic; margin-bottom: 20px; }
.quote-card__author { font-size: 12.5px; color: var(--muted-2); }
.g-box-wrap { padding-bottom: 40px; }
.g-box { background: var(--panel); border: 1px solid var(--line-2); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.g-box__main { display: flex; align-items: center; gap: 18px; }
.g-box__main > svg { flex-shrink: 0; }
.g-box__score { display: flex; align-items: center; gap: 8px; }
.g-box__value { font-family: var(--serif); font-size: 22px; color: var(--cream); }
.g-box__stars { color: var(--accent); font-size: 15px; letter-spacing: 2px; }
.g-box__label { font-size: 12.5px; color: var(--muted-2); margin-top: 4px; }
.g-box__note { font-size: 12px; color: var(--muted-3); max-width: 360px; line-height: 1.6; text-align: right; }
.testi-grid-wrap { padding-top: 20px; padding-bottom: 90px; }
.testi-band { padding-top: 12px; }
/* ---------- Presse ---------- */
.press { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.press__inner { padding-top: 48px; padding-bottom: 48px; }
.press__label { text-align: center; font-size: 11px; letter-spacing: 0.28em; color: var(--muted-2); margin-bottom: 28px; }
.press__list { display: flex; justify-content: center; align-items: center; gap: 64px; flex-wrap: wrap; }
.press__item { font-family: var(--serif); font-size: 20px; color: var(--soft); transition: color 0.25s ease, text-shadow 0.25s ease; }
a.press__item:hover { color: var(--accent); text-shadow: 0 0 18px rgba(201, 162, 75, 0.45); }
/* ---------- Appel à l'action ---------- */
/* Même marge au-dessus et en dessous sur toutes les pages : texte centré dans la hauteur du bandeau
(les classes cta--pad-100, cta--tail-110… des modèles ne changent plus l'espacement). */
.cta { text-align: center; padding-top: 68px; padding-bottom: 68px; }
.cta__title { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 34px; line-height: 1.3; max-width: 780px; margin: 0 auto 28px; text-wrap: balance; }
.cta .btn { vertical-align: top; } /* pas d'espace de ligne sous le bouton */
.cta .btn + .btn { margin-left: 14px; }
@media (max-width: 640px) { .cta .btn + .btn { display: block; max-width: 340px; margin: 14px auto 0; } }
.cta__nowrap { white-space: nowrap; }
.cta--home { padding-top: 76px; padding-bottom: 76px; }
.cta--home .cta__title { font-size: 36px; max-width: 900px; margin-bottom: 30px; }
/* ---------- Pages intérieures : en-tête ---------- */
.page-hero { text-align: center; }
.page-hero__inner { padding-top: 90px; padding-bottom: 60px; }
.page-hero .eyebrow { margin-bottom: 24px; }
.page-hero__title { font-family: var(--serif); font-weight: 500; font-size: 46px; line-height: 1.2; max-width: 700px; margin: 0 auto 22px; }
.page-hero__text { font-size: 16.5px; line-height: 1.7; color: var(--muted); max-width: 560px; margin: 0 auto; }
/* ---------- Prestations ---------- */
.service { padding-top: 64px; padding-bottom: 64px; }
.service__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.service__grid--reverse { grid-template-columns: 1.1fr 0.9fr; }
.service__grid--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.service__media { aspect-ratio: 4 / 3; border: 1px solid var(--line-2); }
.service__title { font-family: var(--serif); font-weight: 500; font-size: 30px; margin-bottom: 18px; }
.service__text { font-size: 15px; line-height: 1.75; color: var(--muted); margin-bottom: 22px; }
.dash-list { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--soft); }
.dash-list li { display: flex; gap: 10px; align-items: baseline; }
.dash-list li::before { content: "—"; color: var(--accent); }
.options { padding-top: 64px; padding-bottom: 64px; }
/* Titre de la rubrique « Les options disponibles » (1.74, présenté comme le sur-titre de BoujouZik en 1.76) : un sur-titre doré avec filet, à gauche, puis les options. */
.sec .options-head { padding-top: 64px; }
.options-head .eyebrow { margin-bottom: 0; }
.options-head .eyebrow__text { text-transform: uppercase; }
.sec .options-head + .options, .options-head + .options { padding-top: 36px; }
@media (max-width: 700px) { .sec .options-head { padding-top: 48px; } .sec .options-head + .options, .options-head + .options { padding-top: 26px; } }
.option-card { background: var(--panel); border: 1px solid var(--line-2); padding: 36px; }
.option-card h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin-bottom: 14px; }
.option-card p { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.lexplay { padding-top: 96px; padding-bottom: 96px; }
.lexplay__box { padding: 56px; }
.lexplay__title { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.25; max-width: 640px; margin-bottom: 18px; }
.lexplay__text { font-size: 15px; line-height: 1.75; color: var(--muted); max-width: 660px; margin-bottom: 28px; }
/* Accueil, BoujouZik : la vidéo se déroule sous les deux blocs, centrée (le bloc de gauche ne bouge pas). « :target » : repli sans script. */
.app-video { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.app-video.is-open, .app-video:target { grid-template-rows: 1fr; }
.app-video__in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.5s; }
.app-video.is-open .app-video__in, .app-video:target .app-video__in { visibility: visible; transition-delay: 0s; }
.app-video__box { position: relative; max-width: 860px; margin: 48px auto 0; border: 1px solid rgba(245, 239, 228, 0.15); border-radius: 2px; background: #000; box-shadow: 0 40px 80px -40px rgba(28, 25, 22, 0.75); }
.app-video__v { display: block; width: 100%; }
.app-video__x { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 1px solid rgba(245, 239, 228, 0.3); border-radius: 50%; background: rgba(14, 12, 10, 0.65); color: #F5EFE4; font: 300 24px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity 0.25s ease, border-color 0.2s; }
.app-video__box:hover .app-video__x, .app-video__x:focus-visible { opacity: 1; }
.app-video__x:hover { border-color: var(--gold); }
.app-video__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: none) { .app-video__x { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-video, .app-video__in, .app-video__x { transition: none; } }
/* Page Prestations (1.142) : la vidéo se déroule sous les boutons, dans la colonne de texte ; « Voir un exemple » reste à côté de « Découvrir l'application ». */
.app-video--inline .app-video__box { margin-top: 28px; }
/* Vidéo de présentation verticale (1.142) : sur un téléphone la vidéo 9:16 remplit la largeur sans dépasser l'écran en hauteur (bandes noires sur les côtés si besoin). */
@media (max-width: 700px) {
.app-video__v[data-src-phone] { max-height: 82vh; max-height: 82svh; object-fit: contain; background: #000; }
}
.process { padding-top: 100px; padding-bottom: 100px; }
.process__head { text-align: center; max-width: 620px; margin: 0 auto 64px; }
.process__title { font-family: var(--serif); font-weight: 500; font-size: 32px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.step__num { font-family: var(--serif); font-size: 30px; color: var(--accent); margin-bottom: 14px; }
.step h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.step p { font-size: 13.5px; line-height: 1.65; color: var(--muted); }
/* Blocs cliquables vers les sous-pages */
.service__media-link { display: block; }
.service__media-link:hover .media-slot > img { transform: scale(1.05); }
.service__title a { transition: color 0.2s ease; }
.service__title a:hover { color: var(--accent); }
.service__more { display: inline-block; margin-top: 26px; }
.service__text + .service__more { margin-top: 0; } /* Lien « Les conseils d'un professionnel » sous le texte de Mariages (1.24.1). */
/* ---------- Sous-pages de Prestations ---------- */
.breadcrumb a.eyebrow__text { transition: color 0.2s ease; }
.breadcrumb a.eyebrow__text:hover { color: var(--cream); }
.breadcrumb__sep { letter-spacing: 0; }
.service__text + .service__text { margin-top: -6px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.features--2 { grid-template-columns: repeat(2, 1fr); }
/* Blocs « Ce que comprend la prestation » (1.59) : un nombre quelconque de blocs ; la dernière ligne, incomplète, est centrée */
.features--center { display: flex; flex-wrap: wrap; justify-content: center; }
.features--center > .option-slot { display: flex; flex: 0 1 calc((100% - 48px) / 3); box-sizing: border-box; min-width: 0; }
.features--center > .option-slot > .option-card { flex: 1 1 auto; min-width: 0; }
.features--center.features--2 > .option-slot { flex-basis: calc((100% - 24px) / 2); }
@media (max-width: 900px) {
.features--center > .option-slot,
.features--center.features--2 > .option-slot { flex-basis: 100%; }
}
.features .option-card { background: var(--panel); }
.tags-section__text { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.tag-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 860px; margin: 0 auto; }
.tag-list li { padding: 11px 20px; border: 1px solid rgba(201, 162, 75, 0.45); border-radius: 999px; background: rgba(201, 162, 75, 0.05); font-size: 14px; color: var(--soft); }
.options-note { padding-bottom: 32px; }
.options-note--below { padding: 44px 0 0; }
.options-note__box { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 40px; }
.options-note__text { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 720px; }
.options-note .text-link { flex-shrink: 0; }
.quote-section { padding-top: 64px; padding-bottom: 96px; text-align: center; }
.pull-quote { max-width: 820px; margin: 0 auto; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.4; color: var(--cream); }
.pull-quote::before { content: "“"; display: block; margin-bottom: 6px; font-size: 56px; line-height: 0.6; color: var(--accent); }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card { display: flex; flex-direction: column; gap: 10px; padding: 30px; background: var(--panel); border: 1px solid var(--line-2); }
.related-card h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; }
.related-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.related-card .arrow-link { margin-top: auto; padding-top: 8px; }
.related > .option-slot { display: flex; min-width: 0; }
.related > .option-slot > .related-card { flex: 1 1 auto; min-width: 0; }
/* ---------- Galerie ---------- */
.gallery-wrap { padding-top: 20px; padding-bottom: 100px; }
/* Galerie (1.33) : liste de photos et vidéos de n'importe quel nombre et format. Chaque case porte ses proportions (--r) et
son cadrage (--pos) ; elles se rangent en rangées pleines de même hauteur (--gallery-h : hauteur visée). */
.gallery { --gallery-h: 340px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.gallery__item { flex: calc(var(--r, 1.5) * 100) 1 calc(var(--r, 1.5) * var(--gallery-h)); min-width: 0; aspect-ratio: var(--r, 1.5); border: 1px solid var(--line-2); }
.gallery::after { content: ""; flex: 100000 1 0; }
.gallery .media-slot__zoom img,
.gallery .media-slot__zoom video { object-position: var(--pos, center); }
.gallery__note { text-align: center; font-size: 12.5px; color: var(--muted-3); margin-top: 32px; }
/* ---------- Contact ---------- */
.page-hero--left { text-align: left; }
.page-hero--left .page-hero__inner { padding-bottom: 40px; }
.contact-hero__title { font-size: 44px; max-width: 640px; margin: 0 0 18px; }
.contact-hero__text { font-size: 16px; max-width: 520px; margin: 0; }
.contact { padding-top: 40px; padding-bottom: 100px; }
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
.contact-info { display: flex; flex-direction: column; gap: 28px; margin-bottom: 28px; }
.contact-info dt { font-size: 11px; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 10px; }
.contact-info dd { font-family: var(--serif); font-size: 18px; }
.contact-info a:hover { color: var(--accent); }
.contact-info .socials { display: flex; gap: 18px; }
.contact-info .socials a { display: inline-flex; color: var(--cream); transition: color 0.2s ease; }
.contact-info .socials a:hover { color: var(--accent); }
.contact-zone__label { font-size: 11px; letter-spacing: 0.2em; color: var(--accent); margin: 0 0 10px; }
.contact-zone p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 10px; }
.contact-zone p:last-child { margin-bottom: 0; }
.contact-form { display: flex; flex-direction: column; gap: 22px; background: var(--panel); border: 1px solid var(--line-2); padding: 40px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.form-row > div { min-width: 0; }
.contact-form label { display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 8px; }
.field { width: 100%; background: var(--black); border: 1px solid var(--line-strong); color: var(--cream); font-family: var(--sans); font-size: 14px; padding: 13px 14px; border-radius: 2px; color-scheme: var(--scheme); }
.field:focus { outline: none; border-color: var(--accent); }
.field::placeholder { color: var(--muted-3); }
.field[aria-invalid="true"] { border-color: #D0785F; }
/* Champs « date » (1.145) : sur iPhone le sélecteur de date gardait sa largeur d'origine et dépassait de sa colonne ou de la carte ; on retire son apparence native et on l'autorise à rétrécir. */
.field[type="date"] { display: block; min-width: 0; max-width: 100%; min-height: 46px; line-height: 1.4; -webkit-appearance: none; appearance: none; }
.field[type="date"]::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
textarea.field { resize: vertical; }
.contact-form__submit { align-self: flex-start; padding: 15px 30px; }
.form-notice { font-size: 14px; line-height: 1.6; padding: 14px 16px; border-radius: 2px; }
.form-notice--ok { border: 1px solid rgba(201, 162, 75, 0.5); background: rgba(201, 162, 75, 0.08); }
.form-notice--error { border: 1px solid rgba(208, 120, 95, 0.6); background: rgba(208, 120, 95, 0.08); }
.form-notice--info { border: 1px solid rgba(201, 162, 75, 0.35); background: rgba(201, 162, 75, 0.06); color: var(--soft); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Partenaires ---------- */
.partners-wrap { padding-top: 20px; padding-bottom: 90px; }
.partner-card { background: var(--panel); border: 1px solid var(--line-2); padding: 32px; display: flex; flex-direction: column; transition: border-color 0.15s ease; }
.partner-card:hover { border-color: rgba(201, 162, 75, 0.5); }
.partner-card__cat { font-size: 11px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 14px; }
.partner-card__name { font-family: var(--serif); font-weight: 600; font-size: 22px; margin-bottom: 12px; }
.partner-card__desc { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 22px; flex-grow: 1; }
.partner-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.partner-card__phone { font-size: 12.5px; color: var(--muted-2); }
.partner-card--join { background: var(--seal); border: 1px dashed var(--line-strong); align-items: flex-start; justify-content: center; }
.partner-card--join .partner-card__cat { color: var(--muted-2); }
.partner-card--join .partner-card__desc { flex-grow: 0; }
/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--footer); }
/* Réseaux sociaux et WhatsApp : pastilles rondes dorées, bien visibles */
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, 0.55); background: rgba(201, 162, 75, 0.1); color: var(--accent); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.socials--compact a { width: 44px; height: 44px; }
.socials a:hover,
.socials a:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--black); transform: translateY(-2px); }
.socials a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-footer--wa .footer-full,
.site-footer--wa .footer-compact { padding-bottom: 104px; }
.footer-full { padding-top: 64px; padding-bottom: 36px; }
.footer-full__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 48px; }
.footer-full__brand { max-width: 280px; }
.footer-full__logo { display: flex; align-items: center; margin-bottom: 18px; }
.footer-full__desc { font-size: 13px; line-height: 1.7; color: var(--muted-2); margin-bottom: 20px; }
.footer-full__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col__title { font-size: 11px; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 16px; }
.footer-col__list { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--muted); }
.footer-col__list a:hover { color: var(--cream); }
.footer-full__bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted-3); }
.footer-compact { padding-top: 48px; padding-bottom: 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-compact__copy { font-size: 12px; color: var(--muted-3); }
.footer-compact__links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 12px; color: var(--muted-3); }
.footer-compact__links a:hover { color: var(--cream); }
.footer-compact__legal { opacity: .8; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal a:hover { color: var(--cream); }
/* ---------- Contenu éditorial (page.php) ---------- */
.entry { padding-top: 64px; padding-bottom: 100px; }
.entry-content { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.75; color: var(--soft); }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.3; color: var(--cream); margin-top: 1.8em; }
.entry-content h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.35; color: var(--cream); margin-top: 1.6em; }
.entry-content a { color: var(--accent); border-bottom: 1px solid currentColor; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; list-style: revert; }
.entry-content li::marker { color: var(--accent); }
.entry-content img { height: auto; }
/* Pages créées dans WordPress : blocs « large » et « pleine largeur » (styles des blocs : blocks.css) */
#contenu { overflow-x: clip; }
.entry--cta { padding-bottom: 80px; }
.entry-content > .alignwide { width: min(1100px, calc(100vw - 2 * var(--gutter))); max-width: none; margin-left: calc((100% - min(1100px, calc(100vw - 2 * var(--gutter)))) / 2); }
.entry-content > .alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.entry-content > .alignwide,
.entry-content > .alignfull { margin-top: 56px; margin-bottom: 56px; }
/* Page qui finit par une section pleine largeur : elle rejoint le bandeau final, sans bande vide. */
.entry-content > .alignfull:last-child { margin-bottom: 0; }
.entry:has(> .entry-content > .alignfull:last-child) { padding-bottom: 0; }
/* ==========================================================================
Ambiance soirée : lumières de scène, animations, interactions
========================================================================== */
/* Grain de pellicule très léger sur tout le site */
body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* ---------- Scène : halo + faisceaux de projecteurs + bokeh ---------- */
.stage { position: relative; isolation: isolate; overflow: hidden; }
.stage > .wrap { position: relative; z-index: 1; }
.stage-lights { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stage-lights__glow { position: absolute; left: 50%; top: -38%; width: min(1200px, 130%); height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(201, 162, 75, 0.2), rgba(201, 162, 75, 0.06) 55%, transparent); }
.beam { position: absolute; top: -2%; left: var(--x); width: var(--w, 440px); height: 118%; margin-left: calc(var(--w, 440px) / -2); transform-origin: 50% 0; transform: rotate(var(--from)); opacity: var(--o, 0.9); filter: blur(14px); mix-blend-mode: screen; will-change: transform; animation: beam-sway var(--d, 14s) ease-in-out infinite alternate; }
.beam::before { content: ""; position: absolute; inset: 0; clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(243, 223, 168, 0.3) 0%, rgba(201, 162, 75, 0.1) 42%, rgba(201, 162, 75, 0) 85%); }
.beam::after { content: ""; position: absolute; top: 1%; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: rgba(255, 238, 200, 0.95); box-shadow: 0 0 24px 8px rgba(227, 200, 136, 0.55); }
.beam--1 { --x: 12%; --from: -18deg; --to: 4deg; --d: 13s; }
.beam--2 { --x: 50%; --from: 9deg; --to: -9deg; --d: 17s; --o: 0.55; }
.beam--3 { --x: 88%; --from: 16deg; --to: -4deg; --d: 11s; }
@keyframes beam-sway { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } }
/* Vitesse réglable page par page (1.108) : --spots-k multiplie la durée de chaque balayage (1 : celle d'origine) ; « immobiles » fige les faisceaux à mi-course. */
.stage-lights .beam { animation-duration: calc(var(--d, 14s) * var(--spots-k, 1)); }
.stage-lights .bokeh { animation-duration: calc(var(--d, 16s) * var(--spots-k, 1)); }
.stage-lights--still .beam { animation: none; transform: rotate(calc((var(--from) + var(--to)) / 2)); }
.stage-lights--still .bokeh { animation: none; }
.bokeh { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(243, 223, 168, 0.55), rgba(201, 162, 75, 0.14) 45%, transparent 70%); opacity: 0.35; animation: bokeh-drift var(--d, 16s) ease-in-out infinite alternate; }
.bokeh--1 { --s: 90px; --x: 6%; --y: 64%; --d: 18s; }
.bokeh--2 { --s: 38px; --x: 24%; --y: 28%; --d: 13s; }
.bokeh--3 { --s: 130px; --x: 68%; --y: 72%; --d: 22s; }
.bokeh--4 { --s: 28px; --x: 80%; --y: 20%; --d: 11s; }
.bokeh--5 { --s: 60px; --x: 44%; --y: 86%; --d: 19s; }
.bokeh--6 { --s: 22px; --x: 93%; --y: 50%; --d: 15s; }
@keyframes bokeh-drift { 0% { transform: translate3d(0, 0, 0); opacity: 0.2; } 50% { opacity: 0.5; } 100% { transform: translate3d(26px, -38px, 0); opacity: 0.28; } }
/* En-têtes de pages : lumière plus douce */
.stage-lights--soft .stage-lights__glow { top: -55%; height: 110%; }
.stage-lights--soft .beam { opacity: 0.5; }
.stage-lights--soft .bokeh--3,
.stage-lights--soft .bokeh--5 { display: none; }
/* Appels à l'action : les projecteurs convergent vers le titre */
.stage-lights--cta .stage-lights__glow { top: -5%; height: 110%; background: radial-gradient(closest-side, rgba(201, 162, 75, 0.2), rgba(201, 162, 75, 0.05) 60%, transparent); }
.stage-lights--cta .beam--1 { --x: 28%; --from: -26deg; --to: -12deg; }
.stage-lights--cta .beam--2 { display: none; }
.stage-lights--cta .beam--3 { --x: 72%; --from: 26deg; --to: 12deg; }
/* Appel à l'action final : bande dorée, texte et bouton « brun nuit », faisceaux de lumière blanche */
.cta.stage { --cream: #1D1A17; --muted: #3E3831; --accent: #1D1A17; background: linear-gradient(160deg, #D6B566 0%, #C9A24B 55%, #B8913F 100%); color: var(--cream); }
.cta.stage .btn--fill { background: var(--night); color: #F5EFE4; }
.cta.stage .btn--fill:hover { box-shadow: 0 14px 32px -12px rgba(28, 25, 22, 0.65); }
.stage-lights--cta .stage-lights__glow { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 60%, transparent); }
.stage-lights--cta .beam::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0) 85%); }
.stage-lights--cta .bokeh { background: radial-gradient(circle, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.16) 45%, transparent 70%); }
/* ---------- En-tête : plus dense au défilement ---------- */
.site-header { transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.site-header__inner { transition: padding 0.3s ease; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.7), transparent); opacity: 0; transition: opacity 0.3s ease; }
.site-header.is-scrolled { background: rgba(28, 25, 22, 0.97); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7); }
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-scrolled .site-header__inner { padding-top: 12px; padding-bottom: 12px; }
/* Menu intelligent (1.51) : l'en-tête se range vers le haut en descendant dans la page et revient en remontant (assets/js/main.js). */
.djb-smart-header .site-header { transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.djb-smart-header .site-header.is-tucked { transform: translateY(calc(-100% - 48px)); box-shadow: none; }
.subnav { transition: top 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
.djb-smart-header .site-header, .subnav { transition: none; }
}
/* ---------- Boutons : reflet doré au survol ---------- */
.btn { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.25s ease; }
.btn--fill { position: relative; overflow: hidden; }
.btn--fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); transition: left 0.7s ease; pointer-events: none; }
.btn--fill:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(201, 162, 75, 0.75); }
.btn--fill:hover::after { left: 130%; }
.btn--line:hover { transform: translateY(-2px); border-color: rgba(201, 162, 75, 0.65); box-shadow: 0 0 26px -8px rgba(201, 162, 75, 0.5); }
/* ---------- Cartes : halo doré au survol ---------- */
.card:hover { box-shadow: 0 26px 60px -30px rgba(201, 162, 75, 0.55); }
.quote-card, .option-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.quote-card:hover, .option-card:hover { transform: translateY(-3px); border-color: rgba(201, 162, 75, 0.4); box-shadow: 0 26px 60px -30px rgba(201, 162, 75, 0.5); }
.partner-card { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.partner-card:hover { box-shadow: 0 26px 60px -30px rgba(201, 162, 75, 0.5); }
/* Photos : léger zoom au survol */
.media-slot > img,
.media-slot > video.media-slot__loop,
.media-slot__zoom img,
.media-slot__zoom video { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.service-card:hover .media-slot > img,
.service-card:hover .media-slot > video.media-slot__loop,
.media-slot__zoom:hover img,
.media-slot__zoom:hover video { transform: scale(1.05); }
.media-slot__zoom { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.media-slot__zoom img,
.media-slot__zoom video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-slot__zoom video { pointer-events: none; background: #000; }
.media-slot__zoom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 13, 12, 0.55)); opacity: 0; transition: opacity 0.4s ease; }
.media-slot__zoom:hover::after { opacity: 1; }
/* 1.34 : pastille « lecture » sur la vignette d'une vidéo (galerie, ruban) ; un clic l'ouvre en grand. 1.102 : dorée, comme tous les boutons de lecture du site. */
.video-badge { --badge: 52px; position: absolute; top: 50%; left: 50%; width: var(--badge); height: var(--badge); margin: calc(var(--badge) / -2) 0 0 calc(var(--badge) / -2); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); border: 0; color: #1D1A17; box-shadow: 0 0 0 5px rgba(201, 162, 75, 0.3), 0 8px 22px rgba(0, 0, 0, 0.4); pointer-events: none; transition: filter 0.25s ease, transform 0.35s ease; }
.video-badge::before { content: ""; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.media-slot__zoom:hover .video-badge,
.media-slot__zoom:focus-visible .video-badge,
.ribbon__item:hover .video-badge,
.ribbon__item:focus-visible .video-badge { filter: brightness(1.1); transform: scale(1.08); }
/* ---------- Accueil : hero ---------- */
.hero__title em { padding-right: 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__logo .djb-logo { filter: drop-shadow(0 0 22px rgba(201, 162, 75, 0.28)); overflow: visible; }
.hero__media { isolation: isolate; }
.hero__media::before { content: ""; position: absolute; inset: 6% -8% -2% -8%; z-index: -1; background: radial-gradient(closest-side, rgba(201, 162, 75, 0.32), transparent); filter: blur(40px); }
.stats__value { font-variant-numeric: tabular-nums; }
/* ---------- Bandeau défilant ---------- */
.marquee { position: relative; overflow: hidden; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(201, 162, 75, 0.07), transparent 30%, transparent 70%, rgba(201, 162, 75, 0.07)); }
.marquee::before,
.marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 120px; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--black), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--black), transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.marquee__item { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 38px; line-height: 1.1; white-space: nowrap; color: var(--cream); }
.marquee__item--outline { color: transparent; -webkit-text-stroke: 1px var(--accent); }
.marquee__sep { color: var(--accent); font-size: 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* ---------- Page « Le DJ » ---------- */
.dj-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; align-items: center; }
.dj-film { position: relative; margin: 0; isolation: isolate; }
.dj-film::before { content: ""; position: absolute; inset: 6% -6% -4% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(201, 162, 75, 0.3), transparent); filter: blur(40px); }
.dj-film__media { aspect-ratio: 16 / 9; border-radius: 2px; box-shadow: 0 40px 90px -40px rgba(28, 25, 22, 0.7); }
.dj-film__toggle { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid rgba(245, 239, 228, 0.35); background: rgba(20, 17, 14, 0.55); color: #F5EFE4; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.2s ease, border-color 0.2s ease; }
/* 1.102 : bouton lecture / pause du film en or, comme les autres boutons de lecture du site. */
.dj-film__toggle { background: var(--gold); border-color: var(--gold); color: #1D1A17; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.dj-film__toggle:hover { background: #D9B661; border-color: #D9B661; }
.dj-film__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dj-film__icon-play,
.dj-film__toggle.is-paused .dj-film__icon-pause { display: none; }
.dj-film__toggle.is-paused .dj-film__icon-play { display: block; }
.dj-intro__text .h2 { margin-bottom: 22px; }
.dj-intro__text p { font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.dj-intro__text p + p { margin-top: 14px; }
.dj-intro__text .dj-signature { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.2; color: var(--accent); }
.dj-signature::before { content: ""; width: 36px; height: 1px; background: var(--accent); }
.dj-skills .approach__icon { margin-bottom: 18px; }
.dj-skills .option-card h3 { font-size: 20px; }
.dj-promise__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.dj-promise .h2 { margin-bottom: 28px; }
.dj-promise__list { margin-bottom: 0; }
.dj-promise__list li { font-size: 15px; }
.dj-stats { grid-template-columns: repeat(2, 1fr); }
.dj-stats .stats__item { padding: 34px 20px; }
.dj-stats .stats__value { font-size: 40px; }
.dj-quote { padding-top: 88px; }
.dj-quote__who { margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; }
.dj-quote .text-link { display: inline-block; margin-top: 14px; }
/* ---------- L'approche + les 10 commandements (accueil, côte à côte) ---------- */
.approach-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.approach-duo .section-head { margin-bottom: 36px; }
.approach--list { grid-template-columns: 1fr; }
.approach--list .approach__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 22px; padding: 26px 28px; }
.approach--list .approach__icon { grid-row: span 2; margin: 2px 0 0; }
.approach--list .approach__item h3 { font-size: 18px; margin-bottom: 6px; }
.approach--list .approach__item p { font-size: 14px; line-height: 1.65; }
/* Une seule « table » compacte : arche dorée, chiffres romains lumineux */
.commandments-card { position: relative; padding: 62px 32px 20px; background: linear-gradient(180deg, #1D1811, #141110 70%); border: 1px solid rgba(201, 162, 75, 0.42); border-radius: 50% 50% 4px 4px / 70px 70px 4px 4px; box-shadow: 0 34px 80px -40px rgba(201, 162, 75, 0.45), inset 0 1px 0 rgba(245, 239, 228, 0.07); }
.commandments-card__eyebrow { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; color: var(--accent); }
.commandments-card__title { margin-top: 10px; text-align: center; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--cream); text-wrap: balance; }
.commandments-card__list { list-style: none; margin: 20px 0 0; padding: 0; }
.commandment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); transition: transform 0.3s ease; }
.commandment:first-child { border-top: 0; }
.commandment:hover { transform: translateX(4px); }
.commandment__num { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1; color: var(--accent); text-shadow: 0 0 14px rgba(201, 162, 75, 0.45); transition: text-shadow 0.3s ease; }
.commandment:hover .commandment__num { text-shadow: 0 0 18px rgba(243, 223, 168, 0.9); }
.commandment__text { font-family: var(--serif); font-size: 15.5px; line-height: 1.45; color: var(--cream); }
.commandment__text em { font-style: italic; color: var(--accent); white-space: nowrap; }
/* ---------- Bouton WhatsApp flottant ---------- */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: flex; align-items: center; height: 58px; padding: 0 16px; border-radius: 999px; background: var(--gold); color: var(--night); font-size: 14px; font-weight: 700; box-shadow: 0 14px 34px -10px rgba(201, 162, 75, 0.7), 0 0 0 1px rgba(28, 25, 22, 0.3); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.wa-float svg { flex-shrink: 0; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--gold); animation: wa-pulse 2.6s ease-out infinite; pointer-events: none; }
.wa-float__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease; }
.wa-float:hover,
.wa-float:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(201, 162, 75, 0.85); }
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { max-width: 240px; opacity: 1; margin-left: 10px; }
@keyframes wa-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.45); opacity: 0; } }
/* ---------- Galerie plein écran ---------- */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 9, 8, 0.95); color: var(--cream); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; animation: lightbox-in 0.3s ease; }
.lightbox::backdrop { background: rgba(10, 9, 8, 0.7); }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__img { display: block; max-width: 88vw; max-height: 80vh; object-fit: contain; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(201, 162, 75, 0.28); }
/* 1.33 : photos en grand (galerie, ruban). La photo grandit depuis sa vignette (main.js) ; l'ombre arrive une fois en place. */
.lightbox--zoom .lightbox__img,
.lightbox--zoom .lightbox__video { box-shadow: 0 0 0 1px rgba(201, 162, 75, 0); transition: box-shadow 0.5s ease; will-change: transform, clip-path; }
.lightbox--zoom .lightbox__figure.is-settled .lightbox__img,
.lightbox--zoom .lightbox__figure.is-settled .lightbox__video { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(201, 162, 75, 0.28); }
/* 1.34 : vidéo en grand. Son cadre suit les proportions de la vidéo (--ar, posées par main.js) sans dépasser l'écran. */
.lightbox__video { display: none; width: min(88vw, calc(80vh * var(--ar, 1.7778))); aspect-ratio: var(--ar, 1.7778); max-width: 88vw; max-height: 80vh; background: #000; object-fit: contain; }
.lightbox--video .lightbox__video { display: block; }
.lightbox--video .lightbox__img { display: none; }
.lightbox--zoom[open] { animation: lightbox-bg 0.45s ease both; }
.lightbox--zoom[open] .lightbox__btn, .lightbox--zoom[open] .lightbox__caption, .lightbox--zoom[open] .lightbox__count { animation: lightbox-fade 0.45s ease 0.25s both; }
.lightbox--zoom.is-closing .lightbox__btn, .lightbox--zoom.is-closing .lightbox__caption, .lightbox--zoom.is-closing .lightbox__count { opacity: 0; transition: opacity 0.2s ease; animation: none; }
.lightbox__caption { font-size: 13px; color: var(--muted); text-align: center; max-width: 80vw; }
.lightbox__caption:empty { display: none; }
.lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; background: rgba(245, 239, 228, 0.06); border: 1px solid rgba(245, 239, 228, 0.2); color: var(--cream); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.lightbox__btn:hover { background: rgba(201, 162, 75, 0.2); border-color: var(--accent); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 22px; left: 0; right: 0; margin: 0; text-align: center; font-size: 12px; letter-spacing: 0.2em; color: var(--muted-2); }
.lightbox--single .lightbox__prev,
.lightbox--single .lightbox__next,
.lightbox--single .lightbox__count { display: none; }
html.has-lightbox { overflow: hidden; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-bg { from { background-color: rgba(10, 9, 8, 0); } to { background-color: rgba(10, 9, 8, 0.95); } }
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
/* ---------- Avis en photos (page Témoignages) ---------- */
.photo-reviews { padding-top: 96px; padding-bottom: 104px; }
.photo-reviews .section-head { margin-bottom: 56px; }
.photo-reviews__intro { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.photo-reviews__admin-note { max-width: 760px; margin: 0 auto 40px; padding: 12px 18px; border: 1px dashed var(--gold-dark); border-radius: 2px; background: rgba(201, 162, 75, 0.08); font-size: 13px; line-height: 1.6; color: var(--soft); text-align: center; }
.photo-reviews__admin-note a { color: var(--accent); border-bottom: 1px solid currentColor; }
.photo-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 28px; }
.photo-reviews__more { margin-top: 48px; text-align: center; }
.photo-reviews__swipe { display: none; }
.p-review { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: var(--night); box-shadow: 0 24px 50px -32px rgba(28, 25, 22, 0.6); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.p-review--extra { display: none; }
.photo-reviews.is-expanded .p-review--extra { display: block; }
/* Mise en page réglable (Personnaliser › DJ Boujou › Avis en photos) :
3 ou 4 vignettes par ligne ; vignette paysage « grande » (deux cases) ou « petite » (une case :
photo entière sur fond flouté, ou cases en forme paysage quand toutes les photos le sont). */
.photo-reviews--cols-4 .photo-reviews__grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.photo-reviews--wide-big .p-review--landscape { grid-column: span 2; aspect-ratio: 5 / 3; }
.photo-reviews--wide-small .p-review--landscape .p-review__img { object-fit: contain; object-position: 50% 24% !important; } /* photo entière vers le haut : le texte reste sur le fond flouté */
.photo-reviews--wide-small .p-review--landscape .p-review__backdrop { display: block; }
.photo-reviews--landscape-rows .p-review { aspect-ratio: 4 / 3; }
.photo-reviews--landscape-rows .p-review--landscape .p-review__img { object-fit: cover; }
.photo-reviews--landscape-rows .p-review--landscape .p-review__backdrop { display: none; }
.p-review__backdrop { display: none; position: absolute; inset: -24px; background-size: cover; background-position: center; filter: blur(18px) brightness(0.55); }
@supports (width: 1cqw) {
.photo-reviews > .wrap { container-type: inline-size; }
.photo-reviews__grid { grid-auto-rows: calc((100cqw - 2 * 28px) / 3 * 1.25); }
.photo-reviews--cols-4 .photo-reviews__grid { grid-auto-rows: calc((100cqw - 3 * 22px) / 4 * 1.25); }
.photo-reviews--landscape-rows .photo-reviews__grid { grid-auto-rows: calc((100cqw - 2 * 28px) / 3 * 0.75); }
.photo-reviews--landscape-rows.photo-reviews--cols-4 .photo-reviews__grid { grid-auto-rows: calc((100cqw - 3 * 22px) / 4 * 0.75); }
.photo-reviews__grid > .p-review { aspect-ratio: auto; }
}
/* Petites vignettes : texte plus compact (titre limité à 2 ou 3 lignes) */
.photo-reviews--cols-4 .p-review__body,
.photo-reviews--landscape-rows .p-review__body { padding: 20px 20px 18px; }
.photo-reviews--cols-4 .p-review__title,
.photo-reviews--landscape-rows .p-review__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 18px; }
.photo-reviews--landscape-rows .p-review__title { -webkit-line-clamp: 2; }
.photo-reviews--landscape-rows.photo-reviews--cols-4 .p-review__title { font-size: 16px; }
.photo-reviews--cols-4 .p-review__meta,
.photo-reviews--landscape-rows .p-review__meta { margin-top: 10px; font-size: 11.5px; }
.photo-reviews--landscape-rows.photo-reviews--cols-4 .p-review__source { display: none; }
/* Vignettes par ligne sur ordinateur : 2, 5 ou 6 en plus de 3 (d'origine) et 4 (1.135, Personnaliser › DJ Boujou › Avis en photos). Dès 1080 px et moins : toujours 2 par ligne
(règles du bloc « Menu repliable » plus bas). Plus il y a de vignettes par ligne, plus le texte est compact. */
@media (min-width: 1081px) {
.photo-reviews--cols-2 .photo-reviews__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.photo-reviews--cols-5 .photo-reviews__grid { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.photo-reviews--cols-6 .photo-reviews__grid { grid-template-columns: repeat(6, 1fr); gap: 14px; }
@supports (width: 1cqw) {
.photo-reviews--cols-2 .photo-reviews__grid { grid-auto-rows: calc((100cqw - 32px) / 2 * 1.25); }
.photo-reviews--cols-5 .photo-reviews__grid { grid-auto-rows: calc((100cqw - 4 * 18px) / 5 * 1.25); }
.photo-reviews--cols-6 .photo-reviews__grid { grid-auto-rows: calc((100cqw - 5 * 14px) / 6 * 1.25); }
.photo-reviews--landscape-rows.photo-reviews--cols-2 .photo-reviews__grid { grid-auto-rows: calc((100cqw - 32px) / 2 * 0.75); }
.photo-reviews--landscape-rows.photo-reviews--cols-5 .photo-reviews__grid { grid-auto-rows: calc((100cqw - 4 * 18px) / 5 * 0.75); }
.photo-reviews--landscape-rows.photo-reviews--cols-6 .photo-reviews__grid { grid-auto-rows: calc((100cqw - 5 * 14px) / 6 * 0.75); }
}
.photo-reviews--cols-5 .p-review__body,
.photo-reviews--cols-6 .p-review__body { padding: 16px 14px 14px; }
.photo-reviews--cols-5 .p-review__title,
.photo-reviews--cols-6 .p-review__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 16px; }
.photo-reviews--cols-6 .p-review__title { font-size: 14.5px; }
.photo-reviews--cols-5 .p-review__meta,
.photo-reviews--cols-6 .p-review__meta { margin-top: 8px; font-size: 10.5px; }
.photo-reviews--cols-5 .p-review__source,
.photo-reviews--cols-6 .p-review__source { display: none; }
}
.p-review__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #F5EFE4; font: inherit; text-align: left; cursor: pointer; }
.p-review__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.p-review__open::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 17, 14, 0) 36%, rgba(20, 17, 14, 0.55) 60%, rgba(20, 17, 14, 0.95) 100%); }
.p-review__open::after { content: ""; position: absolute; inset: 12px; z-index: 2; border: 1px solid rgba(201, 162, 75, 0); pointer-events: none; transition: border-color 0.35s ease; }
.p-review__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; padding: 30px 28px 26px; }
.p-review__stars { color: var(--gold); font-size: 14px; letter-spacing: 3px; }
.p-review__stars-off { color: rgba(245, 239, 228, 0.28); }
.p-review__title { margin-top: 10px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.3; }
.p-review__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12.5px; color: #C9BFAE; }
.p-review__source { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 5px 9px; border: 1px solid rgba(245, 239, 228, 0.25); border-radius: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: #F5EFE4; }
.p-review__more { max-height: 0; margin-top: 0; overflow: hidden; font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold); opacity: 0; transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.35s ease; }
.p-review__full { display: none; }
.p-review--wait { opacity: 0; transform: translateY(28px); }
.p-review--wait.is-in { opacity: 1; transform: none; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0s), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0s); }
.p-review:hover,
.p-review:focus-within { transform: translateY(-4px); box-shadow: 0 34px 60px -30px rgba(201, 162, 75, 0.6); }
.p-review:hover .p-review__img,
.p-review:focus-within .p-review__img { transform: scale(1.06); }
.p-review:hover .p-review__open::after,
.p-review__open:focus-visible::after { border-color: rgba(201, 162, 75, 0.65); }
.p-review:hover .p-review__more,
.p-review__open:focus-visible .p-review__more { max-height: 20px; margin-top: 14px; opacity: 1; }
.p-review__open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (hover: none) {
.p-review__more { max-height: 20px; margin-top: 14px; opacity: 1; }
}
/* Fenêtre de lecture d'un avis (même visionneuse que la galerie) */
.review-box__panel { display: grid; grid-template-columns: 44% 1fr; width: min(1040px, 88vw); height: min(640px, 84vh); background: linear-gradient(160deg, #26211C, #1C1916); border: 1px solid rgba(201, 162, 75, 0.3); border-radius: 2px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(201, 162, 75, 0.35); }
.review-box__media { position: relative; overflow: hidden; background: #141210; }
.review-box__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Photo paysage : colonne plus large, photo entière sur un fond flouté de la même photo */
.review-box__media::before { content: ""; display: none; position: absolute; inset: -30px; background: var(--photo, none) center / cover; filter: blur(26px) brightness(0.5); }
.review-box--landscape .review-box__panel { grid-template-columns: 58% 1fr; }
.review-box--landscape .review-box__media::before { display: block; }
.review-box--landscape .review-box__media img { object-fit: contain; }
/* Retourner l'avis (1.106) : la photo, cliquable, remplace le texte (photo entière sur fond flouté). Plus de bouton doré depuis la 1.137 : la photo est le bouton. */
.review-box--flip .review-box__media { cursor: pointer; }
.review-box--flip .review-box__media:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.review-box .review-box__panel { transform-origin: center; }
.review-box__credit { position: absolute; left: 14px; bottom: 12px; margin: 0; font-size: 11px; color: rgba(245, 239, 228, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.review-box__credit:empty { display: none; }
.review-box__content { display: flex; flex-direction: column; padding: 48px 56px 44px; overflow-y: auto; }
.review-box__content > :first-child { margin-top: auto; }
.review-box__content > :last-child { margin-bottom: auto; }
.review-box__stars { color: var(--gold); font-size: 16px; letter-spacing: 4px; }
.review-box__title { margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.3; color: var(--cream); }
.review-box__title:empty { display: none; }
.review-box__text { margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17.5px; line-height: 1.75; color: var(--soft); }
.review-box__text p + p { margin-top: 1em; }
.review-box--long .review-box__text { font-size: 16px; line-height: 1.7; }
.review-box__who { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; }
.review-box__who::before { content: ""; flex-shrink: 0; width: 28px; height: 1px; background: var(--accent); }
.review-box__link { align-self: flex-start; margin-top: 18px; font-size: 13px; color: var(--muted); border-bottom: 1px solid rgba(245, 239, 228, 0.25); }
.review-box__link:hover { color: var(--cream); border-color: var(--accent); }
.review-box .lightbox__count { bottom: 16px; }
/* Bande des avis Google : titre au-dessus du widget quand les avis en photos sont affichés */
.testi-band__head { padding-top: 88px; margin-bottom: 24px; }
/* ---------- Apparitions au défilement (activées par main.js) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
/* ---------- Animations d'entrée et en boucle (si le visiteur les accepte) ---------- */
@media (prefers-reduced-motion: no-preference) {
.hero__logo,
.hero .eyebrow,
.hero__title,
.hero__lead,
.hero .btn-row,
.page-hero__inner > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .eyebrow,
.page-hero__inner > :nth-child(2) { animation-delay: 0.1s; }
.hero__title,
.page-hero__inner > :nth-child(3) { animation-delay: 0.2s; }
.hero__lead { animation-delay: 0.3s; }
.hero .btn-row { animation-delay: 0.4s; }
.hero__media { animation: rise-soft 1.2s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
/* Reflet qui parcourt « Je la mets en musique. » */
.hero__title em { background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #F6E3B0 50%, var(--accent) 62%, var(--accent) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s ease-in-out 1s infinite; }
/* Les faders du logo bougent comme sur une table de mixage */
.hero__logo .djb-logo__knob { animation: fader var(--fd, 2.6s) ease-in-out infinite alternate; }
.hero__logo .djb-logo__knob--1 { --fa: -6px; --fb: 8px; --fd: 2.4s; }
.hero__logo .djb-logo__knob--2 { --fa: 4px; --fb: -22px; --fd: 3.2s; }
.hero__logo .djb-logo__knob--3 { --fa: 0px; --fb: 18px; --fd: 2s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rise-soft { from { opacity: 0; transform: translateY(30px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
@keyframes fader { from { transform: translateY(var(--fa)); } to { transform: translateY(var(--fb)); } }
/* ==========================================================================
Responsive (points de rupture de la maquette : 900px)
========================================================================== */
@media (max-width: 1240px) {
.main-nav { gap: 22px; }
}
/* Barre complète (liens, devis, note, sélecteur d'ambiance, drapeau) entre 1081 et 1239 px : les liens ne passent jamais à la ligne, l'écart entre
eux s'adapte à la largeur, et la note Google perd son « G » (le texte « avis Google » reste). Au-dessus : barre d'origine ; en dessous : menu ☰. */
@media (min-width: 1081px) and (max-width: 1239px) {
.main-nav { gap: clamp(12px, calc(20vw - 204px), 22px); font-size: 12.5px; }
.main-nav a { white-space: nowrap; }
.site-header__inner { gap: 16px; }
.site-header__actions { gap: 10px; }
.g-badge > svg { display: none; }
.g-badge { padding-inline: 12px; }
}
/* À partir de 1240 px (note Google avec son « G », liens en 13 px) : la barre est limitée en largeur et l'écart d'origine de 36 px ne tient plus avec le sélecteur d'ambiance ;
il passe à 28 px (il restait 2 liens coupés sur toutes les grandes fenêtres) et les liens ne passent jamais à la ligne. */
@media (min-width: 1240px) {
.main-nav a { white-space: nowrap; }
.main-nav { gap: 28px; }
}
/* Menu repliable : l'en-tête garde logo, devis et note Google sur une ligne */
@media (max-width: 1080px) {
.photo-reviews .photo-reviews__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; grid-auto-rows: calc((100cqw - 28px) / 2 * 1.25); }
.photo-reviews.photo-reviews--landscape-rows .photo-reviews__grid { grid-auto-rows: calc((100cqw - 28px) / 2 * 0.75); }
.main-nav { display: none; }
.nav-toggle { display: inline-flex; }
.site-header.is-open .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; padding: 8px var(--gutter) 20px; background: var(--black); border-bottom: 1px solid var(--line); font-size: 15px; }
.site-header.is-open .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
.site-header.is-open .main-nav a:last-child { border-bottom: 0; }
.site-header.is-open .main-nav .nav-item { display: block; border-bottom: 1px solid var(--line); }
.site-header.is-open .main-nav .nav-item > a { border-bottom: 0; }
.nav-caret { display: none; }
.sub-nav { position: static; padding: 0; opacity: 1; visibility: visible; transform: none; }
.sub-nav__panel { min-width: 0; padding: 0 0 10px 14px; background: none; border: 0; box-shadow: none; }
.site-header.is-open .main-nav .sub-nav a { padding: 9px 0; border-bottom: 0; font-size: 14px; color: var(--muted-2); }
.site-header.is-open .main-nav .sub-nav a.is-active { color: var(--accent); }
.sub-nav a:hover { background: none; padding-left: 0; }
}
@media (max-width: 900px) {
/* Avis en photos : la fenêtre sous le bouton Fermer, les flèches en dessous (jamais sur le texte) */
.review-box[open] { align-items: flex-start; }
.review-box__panel,
.review-box--landscape .review-box__panel { grid-template-columns: 1fr; grid-template-rows: 34vh 1fr; width: calc(100vw - 24px); height: calc(100vh - 136px); height: calc(100dvh - 136px); margin-top: 64px; }
.review-box__content { padding: 28px 24px 32px; }
.review-box__content > :first-child { margin-top: 0; }
.review-box__title { font-size: 23px; }
.review-box__text { font-size: 16.5px; }
.review-box .lightbox__prev,
.review-box .lightbox__next { top: auto; bottom: 14px; transform: none; }
.review-box .lightbox__prev { left: 12px; }
.review-box .lightbox__next { right: 12px; }
.review-box .lightbox__count { bottom: 30px; }
.hero__grid,
.app-grid,
.contact-grid,
.service__grid,
.service__grid--reverse { grid-template-columns: 1fr; }
.app-grid--card-first > .timeline-card { order: 0; } /* sur mobile, le texte reste avant le cadre */
.service__media,
.service__media-link { order: -1; }
.features,
.features--2,
.related { grid-template-columns: 1fr; }
.options-note__box { flex-direction: column; align-items: flex-start; padding: 28px; }
.pull-quote { font-size: 24px; }
.stats { grid-template-columns: repeat(2, 1fr); }
.approach,
.grid-3,
.steps { grid-template-columns: 1fr; }
.services-preview { grid-template-columns: repeat(2, 1fr); }
.gallery { --gallery-h: 260px; }
.press__list { gap: 28px; }
.hero__title { font-size: 44px; }
.page-hero__title,
.contact-hero__title { font-size: 38px; }
.beam { --w: 280px; }
.beam--2 { display: none; }
.marquee { padding: 20px 0; }
.marquee__item { font-size: 28px; }
.marquee::before,
.marquee::after { width: 48px; }
.approach-duo { grid-template-columns: 1fr; gap: 48px; }
.commandments-card { width: 100%; max-width: 560px; margin: 0 auto; }
.dj-intro,
.dj-promise__grid { grid-template-columns: 1fr; gap: 48px; }
.features.dj-skills { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
:root { --gutter: 20px; }
.cta,
.cta--home { padding-top: 52px; padding-bottom: 52px; }
.cta__title,
.cta--home .cta__title { font-size: 27px; margin-bottom: 24px; }
.hero .eyebrow__line { display: none; } /* sur-titre du hero sur 2 lignes : toute la largeur pour le texte */
/* Avis en photos : cartes qui défilent de côté (toutes affichées, sans bouton « Voir plus ») */
.photo-reviews { padding-top: 72px; padding-bottom: 80px; }
.photo-reviews .photo-reviews__grid { display: flex; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.photo-reviews__grid::-webkit-scrollbar { display: none; }
.p-review { flex: 0 0 84%; scroll-snap-align: center; }
/* Carrousel : toutes les vignettes au même format ; une photo paysage s'affiche en entier sur fond
flouté (cases en forme paysage si toutes les photos le sont et que les vignettes paysage sont petites) */
.photo-reviews .photo-reviews__grid > .p-review { aspect-ratio: 4 / 5; }
.photo-reviews.photo-reviews--landscape-rows .photo-reviews__grid > .p-review { aspect-ratio: 4 / 3; }
.p-review--landscape .p-review__img { object-fit: contain; }
.p-review--landscape .p-review__backdrop { display: block; }
.p-review--extra { display: block; }
.p-review__title { font-size: 20px; }
.photo-reviews__more { display: none; }
.photo-reviews__swipe { display: block; margin-top: 18px; text-align: center; font-size: 12px; letter-spacing: 0.16em; color: var(--muted-2); }
.testi-band__head { padding-top: 64px; }
.features.dj-skills { grid-template-columns: 1fr; }
.dj-stats .stats__value { font-size: 32px; }
.dj-film__toggle { right: 10px; bottom: 10px; width: 38px; height: 38px; }
.service-card__body { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 20px 22px; }
.service-card h3 { font-size: 20px; }
.admin-bar .site-header { top: 0; }
.site-header .btn--sm { padding: 11px 14px; }
.services-preview,
.form-row { grid-template-columns: minmax(0, 1fr); }
.contact-form { padding: 28px 20px; }
.lexplay__box { padding: 40px 24px; }
.g-box__note { text-align: left; }
.commandments-card { padding: 60px 20px 18px; border-radius: 50% 50% 4px 4px / 56px 56px 4px 4px; }
.commandments-card__title { font-size: 22px; }
.commandment { grid-template-columns: 32px minmax(0, 1fr); gap: 6px; padding: 6px 0; }
.commandment__num { font-size: 16px; }
.commandment__text { font-size: 14.5px; line-height: 1.4; }
.approach--list .approach__item { padding: 22px 20px; column-gap: 16px; }
.wa-float { right: 16px; bottom: 16px; height: 54px; padding: 0 14px; }
.lightbox__btn { width: 44px; height: 44px; }
.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }
.lightbox__close { top: 12px; right: 12px; }
}
/* Petits écrans : « Devis » + note Google compacte */
@media (max-width: 480px) {
.site-header__inner { gap: 12px; }
.site-header__actions { gap: 8px; }
.btn__extra,
.g-badge__label { display: none; }
.g-badge { gap: 6px; padding: 6px 9px; }
.g-badge svg { width: 16px; height: 16px; }
.g-badge__score { gap: 4px; font-size: 15px; }
.g-badge__stars { font-size: 9px; letter-spacing: 1px; }
.lang-switch { padding: 3px; }
.lang-switch__flag { width: 24px; height: 16px; }
}
/* Téléphones étroits : place pour le drapeau de langue (le badge garde le G et la note) */
@media (max-width: 420px) {
.g-badge__stars { display: none; }
}
@media (max-width: 380px) {
.site-header__actions { gap: 6px; }
.g-badge__stars { font-size: 7.5px; letter-spacing: 0.5px; }
}
@media (prefers-reduced-motion: reduce) {
.card, .partner-card, .nav-toggle span, .btn, .quote-card, .option-card, .commandment, .media-slot > img, .media-slot > video, .media-slot__zoom img, .media-slot__zoom video, .service-card__more { transition: none; }
.card:hover, .btn:hover, .quote-card:hover, .option-card:hover, .commandment:hover, .wa-float:hover { transform: none; }
.beam, .bokeh, .marquee__track, .wa-float::before, .lightbox[open] { animation: none; }
.lightbox--zoom[open] .lightbox__btn, .lightbox--zoom[open] .lightbox__caption, .lightbox--zoom[open] .lightbox__count { animation: none; }
.ribbon__img, .lightbox--zoom .lightbox__img, .lightbox--zoom .lightbox__video { transition: none; }
.marquee__track { flex-wrap: wrap; width: auto; justify-content: center; }
.marquee__group + .marquee__group { display: none; }
}
/* =====================================================================
Version 1.24 : fil d'Ariane, page Mariages enrichie, photo fixe au défilement,
ruban de photos, rubrique Conseils, délai de réponse.
===================================================================== */
/* ---------- Fil d'Ariane (haut des pages intérieures) ---------- */
.crumbs { margin-bottom: 20px; font-size: 12.5px; line-height: 1.5; }
.crumbs__list { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.crumbs__item + .crumbs__item::before { content: "›"; margin: 0 9px; color: var(--accent); }
.crumbs a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--muted-2); }
.page-hero--left .crumbs__list { justify-content: flex-start; }
.page-hero__meta { margin-top: 18px; font-size: 13.5px; color: var(--muted-2); }
/* ---------- Délai de réponse (bandeau doré, formulaire) ---------- */
.cta__note { margin-top: 14px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.contact-form__note { font-size: 13.5px; color: var(--muted); }
/* ---------- Le jour J en photos (page Mariages) : photo collée, moments qui défilent ---------- */
.day .section-head { margin-bottom: 24px; }
.day__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.day__pics { position: sticky; top: 120px; height: min(70vh, 620px); overflow: hidden; border-radius: 2px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7); }
.day__pic { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.day__pic.is-on { opacity: 1; }
.day__pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.4s ease; }
.day__pic.is-on img { transform: none; }
.day__steps { display: grid; margin: 0; padding: 3vh 0; list-style: none; }
.day__step { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 18vh; padding: 8px 0; }
.day--js .day__step { opacity: 0.32; transition: opacity 0.45s ease; }
.day--js .day__step.is-on { opacity: 1; }
.day__time { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--accent); }
.day__title { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.2; }
.day__text { max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.day__step-pic { display: none; }
/* ---------- Côté musique (3 colonnes) ---------- */
.music-cols__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.music-col { padding: 34px 30px; border: 1px solid var(--line-2); background: var(--panel); }
.music-col h3 { margin-bottom: 10px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.3; }
.music-col p { font-size: 15px; line-height: 1.7; color: var(--muted); }
/* Chaque case est dans un emplacement fixe (.option-slot), comme les blocs « Ce que comprend la prestation » : c'est lui qui reste en place pendant que la case arrive (1.95). */
.music-cols__grid > .option-slot { display: flex; min-width: 0; }
.music-cols__grid > .option-slot > .music-col { flex: 1 1 auto; min-width: 0; }
.music-cols__grid > .option-slot:nth-child(2) > .music-col { border-color: var(--night); background: var(--night); color: #F5EFE4; }
.music-cols__grid > .option-slot:nth-child(2) > .music-col p { color: #C9BFAE; }
.music-cols__link { margin-top: 34px; text-align: center; }
/* ---------- Photo fixe au défilement : la photo reste immobile, la page glisse dessus ---------- */
/* Image en position fixe dans une zone découpée (clip-path) : fonctionne aussi sur iPhone. */
.photo-band { --cream: #F5EFE4; --accent: #C9A24B; position: relative; display: grid; place-items: center; min-height: clamp(360px, 62vh, 600px); clip-path: inset(0); text-align: center; color: var(--cream); }
.photo-band__img { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 17, 14, 0.42), rgba(20, 17, 14, 0.62)); }
.photo-band__inner { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.photo-band__text { max-width: 860px; margin: 0 auto; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.2; text-wrap: balance; }
.photo-band__text em { display: block; font-style: italic; color: var(--accent); }
/* ---------- Questions fréquentes (accordéon) ---------- */
.faq__list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q { display: flex; align-items: center; gap: 18px; padding: 22px 4px; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.35; transition: color 0.2s ease; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-left: auto; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: translateY(-3px) rotate(45deg); transition: transform 0.25s ease; }
.faq__item[open] .faq__q::after { transform: translateY(2px) rotate(-135deg); }
.faq__q:hover { color: var(--accent); }
.faq__q:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq__a { padding: 0 44px 24px 4px; font-size: 15.5px; line-height: 1.75; color: var(--muted); }
/* Réponses mises en forme (inc/faq.php) : paragraphes, listes, gras, liens. */
.faq__a > * { margin: 0 0 14px; }
.faq__a > :last-child { margin-bottom: 0; }
.faq__a ul, .faq__a ol { padding-left: 22px; }
.faq__a ul { list-style: disc; }
.faq__a ol { list-style: decimal; }
.faq__a li { margin: 0 0 6px; padding-left: 4px; }
.faq__a li::marker { color: var(--accent); }
.faq__a strong { font-weight: 700; color: var(--cream); }
.faq__a a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.faq__a a:hover { text-decoration-thickness: 2px; }
/* ---------- Lieux et secteurs ---------- */
.places { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.places__text { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.places__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.places__list li { padding: 10px 18px; border: 1px solid rgba(201, 162, 75, 0.45); border-radius: 999px; background: var(--panel); font-size: 14px; color: var(--soft); }
.places__list--venues li { background: transparent; }
.places__sub { margin: 28px 0 14px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
/* ---------- Plaquette PDF ---------- */
.brochure { padding-top: 72px; padding-bottom: 24px; }
.brochure--end { padding-bottom: 88px; }
/* Page Contact : le bandeau suit directement le formulaire (100 px de marge en bas du formulaire + 72 px en haut du bandeau = trop d'espace). */
.contact + .brochure { margin-top: -48px; padding-top: 0; }
.brochure__box { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 48px; }
.brochure__title { margin-bottom: 8px; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.25; }
.brochure__text p { max-width: 560px; color: var(--muted); }
.brochure .btn { flex-shrink: 0; }
/* ---------- Cartes des articles Conseils (rubrique, page Mariages, « À lire aussi ») ---------- */
.advice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* « À lire aussi » (1.24.2) : cartes de même largeur (3 par ligne), dernière ligne centrée ; 4 cartes = 4 par ligne, plus petites. */
.advice-grid--flex { display: flex; flex-wrap: wrap; justify-content: center; }
.advice-grid--flex > .advice-card { flex: 0 0 calc((100% - 56px) / 3); min-width: 0; }
.advice-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel); color: inherit; text-decoration: none; }
.advice-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--media); }
.advice-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.advice-card:hover .advice-card__media img { transform: scale(1.04); }
.advice-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 24px 26px 26px; }
.advice-card__meta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.advice-card__title { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--cream); }
.advice-card__text { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.advice-card .arrow-link { margin-top: auto; padding-top: 6px; }
.conseils-list__empty { max-width: 560px; margin: 0 auto; text-align: center; font-size: 17px; color: var(--muted); }
.read-next { padding-top: 8px; padding-bottom: 96px; }
.read-next .eyebrow { margin-bottom: 24px; }
/* ---------- Ruban de photos (Témoignages) : défile en continu, s'arrête au survol ---------- */
.ribbon { overflow: hidden; padding: 56px 0; background: var(--alt); }
.ribbon__track { display: flex; gap: 16px; width: max-content; animation: ribbon 60s linear infinite; }
/* Pause : au survol de la souris (pas au toucher, où le « survol » reste collé après un appui) et quand le focus est visible
au clavier. 1.34 : un focus rendu après un clic (retour de la visionneuse) ne fige plus le ruban ; et après la fermeture
d'une photo il repart même si la souris est restée dessus, jusqu'à ce qu'elle bouge (classe is-resumed, main.js). */
@media (hover: hover) {
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon.is-resumed:hover .ribbon__track { animation-play-state: running; }
}
.ribbon:focus-visible .ribbon__track { animation-play-state: paused; }
.ribbon:has(:focus-visible) .ribbon__track { animation-play-state: paused; }
.ribbon:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* 1.33 : chaque photo est un lien qui l'agrandit ; ses proportions (--r) et son cadrage (--pos) se règlent dans Pages › Témoignages › Modifier. */
.ribbon__item { position: relative; display: block; flex: none; height: 240px; aspect-ratio: var(--r, 1.5); overflow: hidden; border-radius: 2px; cursor: zoom-in; }
.ribbon__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ribbon__item:hover .ribbon__img { transform: scale(1.06); }
.ribbon__item { --badge: 42px; }
.ribbon__item video { pointer-events: none; background: #000; }
.ribbon__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html.has-lightbox .ribbon__track { animation-play-state: paused; }
@keyframes ribbon { to { transform: translateX(calc(-50% - 8px)); } }
@media (min-width: 1081px) {
.advice-grid--4 > .advice-card { flex-basis: calc((100% - 84px) / 4); }
.advice-grid--4 .advice-card__body { gap: 8px; padding: 18px 18px 20px; }
.advice-grid--4 .advice-card__title { font-size: 18px; }
.advice-grid--4 .advice-card__text { font-size: 13.5px; }
}
@media (max-width: 1080px) {
.advice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advice-grid--flex > .advice-card { flex-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 900px) {
.day__grid { grid-template-columns: 1fr; gap: 0; }
.day__pics { display: none; }
.day__steps { gap: 44px; padding: 0; }
.day__step { min-height: 0; }
.day--js .day__step { opacity: 1; }
.day__step-pic { display: block; margin-bottom: 8px; }
.day__step-pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; }
.day__title { font-size: 26px; }
.music-cols__grid { grid-template-columns: 1fr; }
.places { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
.advice-grid { grid-template-columns: 1fr; }
.advice-grid--flex > .advice-card { flex-basis: 100%; }
.brochure__box { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
.faq__q { font-size: 18px; }
.faq__a { padding-right: 4px; }
}
@media (max-width: 600px) {
.ribbon { padding: 40px 0; }
.ribbon__item { height: 170px; }
.gallery { --gallery-h: 180px; gap: 10px; }
.photo-band__inner { padding-top: 64px; padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.ribbon { overflow-x: auto; }
.ribbon__track { animation: none; }
.ribbon__item[data-lightbox-copy] { display: none; }
.day__pic,
.day__pic img,
.day--js .day__step { transition: none; }
}
/* ---------- Menu de la page (sous-pages de Prestations, 1.28) : barre arrondie à cheval sur le bandeau du titre ---------- */
.subnav { position: sticky; top: 84px; z-index: 30; margin: -26px 0 6px; padding: 0 var(--gutter); pointer-events: none; }
.subnav__list { display: flex; justify-content: center; gap: 4px 30px; max-width: 1060px; margin: 0 auto; padding: 0 30px; list-style: none; overflow-x: auto; scrollbar-width: none; pointer-events: auto; background: #EFE7DA; border: 1px solid #DDD0B9; border-radius: 14px; box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav a { position: relative; display: block; padding: 16px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #3E3831; white-space: nowrap; transition: color 0.2s ease; }
.subnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #7E6226; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; }
.subnav a:hover, .subnav a:focus-visible, .subnav a.is-active { color: #7E6226; }
.subnav a:hover::after, .subnav a:focus-visible::after, .subnav a.is-active::after { transform: scaleX(1); }
.subnav__list { transition: transform 0.35s ease, opacity 0.25s ease; }
/* 1.32 : la barre s'efface (vers le haut, sous l'en-tête) le temps de passer devant une photo ; main.js pose is-away. */
.subnav.is-away .subnav__list { transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
.subnav.is-away:focus-within .subnav__list { transform: none; opacity: 1; pointer-events: auto; }
.has-subnav { scroll-padding-top: calc(var(--djb-sticky-h, 0px) + 12px); }
/* La photo du déroulé reste collée sous la barre, jamais derrière elle. */
.has-subnav .day__pics { top: calc(var(--djb-sticky-h, 108px) + 14px); height: min(70vh, 620px, calc(100vh - var(--djb-sticky-h, 108px) - 44px)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 700px) {
.subnav { margin-top: -22px; padding: 0 12px; }
.subnav__list { justify-content: flex-start; gap: 4px 22px; padding: 0 18px; border-radius: 12px; }
.subnav a { padding: 14px 2px; font-size: 11.5px; }
}
/* ---------- Fond de chaque partie des pages de prestations (1.32) ----------
Chaque partie est enveloppée par le gabarit dans : le fond se règle dans
Pages › Modifier (« Fond de cette partie »). Deux parties de même fond qui se suivent se rapprochent (sec--joined). */
.sec--sable { background: var(--alt); }
.sec--nuit { background: var(--night); }
.sec .section, .sec .service, .sec .options, .sec .lexplay, .sec .process { padding-top: 64px; padding-bottom: 64px; }
.sec .brochure, .sec .quote-section { padding-top: 48px; padding-bottom: 48px; }
.sec--joined { margin-top: -48px; }
@media (max-width: 700px) {
.sec .section, .sec .service, .sec .options, .sec .lexplay, .sec .process { padding-top: 48px; padding-bottom: 48px; }
.sec .brochure, .sec .quote-section { padding-top: 40px; padding-bottom: 40px; }
.sec--joined { margin-top: -40px; }
}
/* ---------- Parties de l'accueil (1.36) et de la page Le DJ (1.37) ----------
Même principe que les pages de prestations (sec--ivoire|sable|nuit), avec le fond d'origine de chaque partie. Ces deux
pages gardent leurs espacements d'origine (96 px : classe sec--wide), et les bandeaux minces de l'accueil ne se
rapprochent pas de leur voisine. Accueil : chiffres, bandeau défilant, approche et presse sur ivoire ; prestations et
BoujouZik sur sable. Le DJ : savoir-faire et mise en lumière sur sable, engagements sur brun nuit, le reste sur ivoire. */
.sec--wide .section { padding-top: 96px; padding-bottom: 96px; }
.sec--wide .dj-quote { padding-top: 88px; padding-bottom: 96px; }
/* Page Le DJ (1.110) : espacements entre les rubriques réduits aussi sur ordinateur (96 px en haut et en bas laissaient près de 200 px de vide entre deux rubriques) ;
l'accueil garde ses 96 px. Tablette et téléphone (1.69) : réduits davantage. Bandeau presse de la page Le DJ resserré de la même façon. */
.sec--dj .section { padding-top: 64px; padding-bottom: 64px; }
.sec--dj .dj-quote { padding-top: 56px; padding-bottom: 64px; }
.page-slug-le-dj .press__inner { padding-top: 32px; padding-bottom: 32px; }
.page-slug-le-dj .press__label { margin-bottom: 20px; }
@media (max-width: 900px) {
.sec--dj .section { padding-top: 52px; padding-bottom: 52px; }
.sec--dj .dj-quote { padding-top: 44px; padding-bottom: 52px; }
}
@media (max-width: 600px) {
.sec--dj .section { padding-top: 40px; padding-bottom: 40px; }
.sec--dj .dj-quote { padding-top: 36px; padding-bottom: 44px; }
.page-slug-le-dj .press__inner { padding-top: 28px; padding-bottom: 28px; }
}
.sec .band { background: none; }
.sec--wide.sec--sable { --black: var(--alt); } /* fondu des bords du bandeau défilant */
.sec--wide:not(.sec--ivoire) .stats-band { background: none; }
.sec--wide:not(.sec--ivoire) .stats-band .stats__item { background: var(--black); }
/* Ambiance d'origine (LOUNGE) : les quatre cases des chiffres clés sont noires sur le bandeau clair (1.135) ; leur texte reprend les couleurs du thème sombre (or, texte clair).
Soirée, Disco et Funk gardent leurs propres règles (signature.css, ambiances.css). */
html:not(.djb-party):not(.djb-disco):not(.djb-funk):not(.djb-electro):not(.djb-urbain) .stats-band .stats__item { background: #1C1916; --accent: #C9A24B; --muted: #C9BFAE; --cream: #F5EFE4; }
/* Fond des cases au choix (1.149, Pages › Accueil › Modifier › Bandeau des chiffres) : noir (ci-dessus), brun nuit, sable ou ivoire. Sur fond clair, les chiffres passent à l'or foncé et les petits
textes au brun (les mêmes couleurs que les cases blanches de la Soirée) pour rester lisibles ; sur fond sombre : l'or et le texte clair. */
html:not(.djb-party):not(.djb-disco):not(.djb-funk):not(.djb-electro):not(.djb-urbain) .stats-band[data-case="nuit"] .stats__item { background: #2A241E; }
html:not(.djb-party):not(.djb-disco):not(.djb-funk):not(.djb-electro):not(.djb-urbain) .stats-band[data-case="sable"] .stats__item { background: #EFE7DA; --accent: #7E6226; --muted: #6B6258; --cream: #1D1A17; }
html:not(.djb-party):not(.djb-disco):not(.djb-funk):not(.djb-electro):not(.djb-urbain) .stats-band[data-case="ivoire"] .stats__item { background: #F7F2EA; --accent: #7E6226; --muted: #6B6258; --cream: #1D1A17; }
.home-extra { scroll-margin-top: 24px; }
/* ---------- Derniers avis Google de l'accueil (1.41) ---------- */
.home-reviews .section-head { margin-bottom: 40px; }
.home-reviews__score { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.home-reviews__score span { color: var(--accent); letter-spacing: 0.06em; }
.home-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review-card { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 26px 26px 24px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 2px; }
.review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-card__stars { font-size: 15px; letter-spacing: 0.1em; color: var(--accent); }
.review-card__text { flex: 1 1 auto; margin: 0; font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.6; color: var(--cream); }
.review-card__text::before { content: "“"; }
.review-card__text::after { content: "”"; }
.review-card__who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.review-card__avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--seal); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
.review-card__name,
.review-card__date { display: block; }
.review-card__name { font-size: 14px; font-weight: 700; color: var(--cream); }
.review-card__date { margin-top: 2px; font-size: 12px; color: var(--muted-2); }
.home-extra .entry-content > .alignfull:last-child { margin-bottom: 0; }
/* ---------- Page Le DJ : matériel et mise en lumière architecturale (1.37) ---------- */
.equip__intro { max-width: 720px; margin: -28px auto 40px; text-align: center; }
.equip__intro p { font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.equip__intro p + p { margin-top: 12px; }
.equip__photos { display: grid; gap: 16px; margin: 0 auto 48px; }
.equip__photos--1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.equip__photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.equip__photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.equip__photos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.equip__photo { aspect-ratio: 4 / 3; border: 1px solid var(--line-2); }
.equip__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line-strong); }
.equip__item { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.equip__name { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--cream); }
.equip__name::before { content: ""; display: block; width: 24px; height: 1px; margin-bottom: 12px; background: var(--accent); }
.equip__text { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.lighting__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
.lighting__grid--photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.lighting__grid:not(.lighting__grid--photo) .lighting__text { max-width: 760px; margin: 0 auto; }
.lighting__text .h2 { margin-bottom: 22px; }
.lighting__p { font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.lighting__p + .lighting__p { margin-top: 14px; }
.lighting__points { margin-top: 24px; margin-bottom: 0; }
.lighting__photo { aspect-ratio: 4 / 5; border: 1px solid var(--line-2); }
/* Mini carrousel sous le texte (1.39) : le ruban des Témoignages, de la largeur de la rubrique, sur un fond au choix (--mini-bg). */
.ribbon--mini { margin-top: 56px; padding: 18px 0; border-radius: 2px; background: var(--mini-bg, transparent); }
.ribbon--mini .ribbon__track { animation-duration: var(--mini-dur, 60s); }
.ribbon--mini .ribbon__item { height: 180px; }
@media (max-width: 900px) {
.equip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Plus de 2 photos : un bandeau que l'on fait glisser (la photo suivante dépasse un peu), au lieu d'une grille de 2 avec un trou (1.67). */
.equip__photos--3, .equip__photos--4 { display: flex; gap: 12px; max-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.equip__photos--3::-webkit-scrollbar, .equip__photos--4::-webkit-scrollbar { display: none; }
.equip__photos--3 .equip__photo, .equip__photos--4 .equip__photo { flex: 0 0 min(74%, 360px); scroll-snap-align: start; }
.lighting__grid--photo { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.lighting__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
.equip__list { grid-template-columns: minmax(0, 1fr); }
.equip__intro { margin-top: -36px; }
.ribbon--mini { margin-top: 40px; padding: 12px 0; }
.ribbon--mini .ribbon__item { height: 130px; }
}
/* Page Galerie : deux rubriques (Vidéos, Photos), éléments rangés par lignes de N (inc/gallery.php). */
.subnav--compact .subnav__list { width: fit-content; max-width: min(1060px, 100%); padding: 0 34px; gap: 4px 36px; }
.gallery-sec__head { margin-bottom: 28px; }
.gallery-sec__intro { max-width: 620px; margin: 0 auto 40px; text-align: center; color: var(--muted); }
.gallery-sec__intro p { margin: 0 0 12px; }
.gallery-sec__intro p:last-child { margin-bottom: 0; }
.gallery-rows { --gap: 16px; --gallery-max-h: 520px; display: flex; flex-direction: column; gap: var(--gap); }
.gallery-rows--videos { --gallery-max-h: 560px; }
.gallery__row { display: grid; align-items: start; column-gap: var(--gap); row-gap: 0; width: 100%; margin-left: auto; margin-right: auto; max-width: calc(var(--sum) * var(--gallery-max-h) + (var(--n) - 1) * var(--gap)); }
.gallery__cell { display: contents; }
.gallery__title { grid-row: 1; grid-column: var(--c); margin: 0 0 12px; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.3; color: inherit; overflow-wrap: anywhere; }
.gallery__cell > .gallery__item { grid-row: 2; grid-column: var(--c); min-width: 0; aspect-ratio: var(--r, 1.5); border: 1px solid var(--line-2); }
.gallery-rows .media-slot__zoom img,
.gallery-rows .media-slot__zoom video { object-position: var(--pos, center); }
.sec--gallery .gallery-sec { padding-bottom: 72px; }
@media (max-width: 900px) {
/* Tablette et téléphone : les rangées se recomposent selon la largeur de l'écran (hauteur de rangée visée). */
.gallery-rows { --gallery-h: 260px; flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.gallery-rows::after { content: ""; flex: 100000 1 0; }
.gallery__row { display: contents; }
.gallery__cell { display: block; min-width: 0; flex: calc(var(--r, 1.5) * 100) 1 calc(var(--r, 1.5) * var(--gallery-h)); }
.gallery__title { font-size: 17px; margin-bottom: 8px; }
.gallery__cell > .gallery__item { width: 100%; }
}
@media (max-width: 600px) {
.gallery-rows { --gallery-h: 180px; --gap: 10px; }
}
/* ---------- Surlignage en or (==texte== dans les textes mis en forme : fiches des articles Conseils, FAQ) ---------- */
mark.djb-hl { padding: 0 2px; color: inherit; background: linear-gradient(var(--gold), var(--gold)) 0 92% / 100% 38% no-repeat; }
.tone-dark mark.djb-hl { background-image: linear-gradient(rgba(201, 162, 75, 0.42), rgba(201, 162, 75, 0.42)); }
/* Avis retourné : la photo entière (fond flouté), plein cadre ; après les règles de la fenêtre sur téléphone pour les remplacer. */
.review-box.review-box--photo .review-box__panel { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.review-box.review-box--photo .review-box__content { display: none; }
.review-box.review-box--photo .review-box__media img { object-fit: contain; }
.review-box.review-box--photo .review-box__media::before { display: block; }