:root {
  --serif: "Jost", system-ui, sans-serif;      /* titres */
  --sub: "Montserrat", system-ui, sans-serif;  /* sous-titres (test du 21/09) */
  --bodoni: "Bodoni Moda", Georgia, serif;     /* titre d'accueil */
  --sans: "Jost", system-ui, sans-serif;       /* texte courant */
  --display-weight: 300;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: clamp(14px, 1.6vw, 24px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* échelle d'espacement verticale : petit / moyen / grand, + haut de page sous le menu */
  --space-s: clamp(40px, 5vw, 64px);
  --space-m: clamp(64px, 8vw, 112px);
  --space-l: clamp(88px, 11vw, 160px);
  --top-page: clamp(120px, 12vw, 170px);
}
/* Palette retenue : beige, vert anglais & or */
:root {
  --bg: #f1eadc; --bg-2: #e6dcc8; --text: #1d3328; --text-soft: #5b6b5f;
  --accent: #a8813a; --accent-hover: #8c6a2c; --on-accent: #fbf6ec;
  --accent-light: #e3c683; --surface: #f8f3ea; --dark-bg: #1d3328; --dark-text: #efe7d8;
  --dark-soft: #b3b8a6; --dark-accent: #c9a55a; --line: rgba(29,51,40,.15);
  --photo-text: #fbf6ec; --mark: #eadbb8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
em { font-style: italic; }
.muted { color: var(--text-soft); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 12px; }

/* ---------- Typo ---------- */
.logo {
  display: block; width: 175px; aspect-ratio: 2500 / 702; background: currentColor;
  -webkit-mask: url(img/logo.png) center / contain no-repeat; mask: url(img/logo.png) center / contain no-repeat;
}
.logo-lg { width: 220px; margin-bottom: 20px; color: var(--dark-accent); }
.eyebrow {
  font: 600 12px/1.4 var(--sub); letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
.eyebrow.light { color: var(--photo-text); opacity: .9; }
.display, .display-xl, .display-sm, .hero-title {
  font-family: var(--serif); font-weight: var(--display-weight); letter-spacing: -.02em; line-height: 1; margin: 0;
}
.display em, .display-xl em, .display-sm em, .hero-title em, .lead em { font-style: italic; color: var(--accent); font-weight: var(--display-weight); }
.display { font-size: clamp(42px, 4.6vw, 68px); }
.display-xl { font-size: clamp(56px, 7.5vw, 120px); }
.display-sm { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.05; }
.lead { font: 400 clamp(21px, 2.3vw, 32px)/1.4 var(--sub); letter-spacing: -.01em; margin: 0; max-width: 30ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--accent); color: var(--on-accent); text-decoration: none; border: 0; cursor: pointer;
  font: 600 15px/1 var(--sans); letter-spacing: .02em;
  padding: 18px 28px; border-radius: 999px; transition: background .3s, transform .3s var(--ease);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-small { padding: 12px 20px; font-size: 14px; }
.btn-light { background: var(--photo-text); color: #1d3328; }
.btn-light:hover { background: var(--accent-light); color: #1d3328; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.link-arrow:hover { color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter); transition: background .4s, padding .4s, color .4s;
}
.site-header.solid { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); padding-block: 12px; box-shadow: 0 1px 0 var(--line); }
.home .site-header:not(.solid) { color: var(--photo-text); }
.brand { text-decoration: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 32px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; }
.nav > ul > li > a:not(.btn):hover, .nav a[aria-current] { color: var(--accent); }
.home .site-header:not(.solid) .nav > ul > li > a:not(.btn):hover { color: var(--photo-text); opacity: .7; }
.icon-link { display: inline-flex; font-size: 22px; }
.has-sub { position: relative; }
.sub {
  position: absolute; top: calc(100% + 12px); left: -20px; min-width: 230px;
  flex-direction: column; align-items: flex-start !important; gap: 0 !important;
  background: rgba(20, 30, 25, .45); color: var(--photo-text); padding: 14px 0 !important; border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 20px 40px -20px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* verre fumé */
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .25s var(--ease);
}
.sub::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.sub li { width: 100%; }
.sub a { display: block; padding: 8px 20px; }
.sub a:hover { color: var(--accent-light); }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.menu-toggle { display: none; background: none; border: 0; color: inherit; font-size: 30px; cursor: pointer; padding: 4px; }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; background: var(--bg); color: var(--text);
    padding: 96px var(--gutter) 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transition: .3s var(--ease); z-index: -1;
  }
  .nav.open { opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nav > ul > li > a:not(.btn):not(.icon-link) { font: 400 40px/1 var(--serif); }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; background: none; box-shadow: none; padding: 10px 0 0 !important; }
  .sub a { padding: 6px 0; color: var(--text-soft); }
  .menu-open .site-header { color: var(--text) !important; }
  /* Le flou de l'en-tête (backdrop-filter) sert de cadre de référence aux enfants
     en position fixed : le menu se retrouvait enfermé dans la hauteur de l'en-tête.
     Menu ouvert, on retire flou/fond pour qu'il occupe tout l'écran. */
  .menu-open .site-header.solid { background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-open { overflow: hidden; }
}

/* ---------- Layout ---------- */
main { display: block; }
.section { padding: var(--space-l) var(--gutter); }
.section-wide { padding: 0 var(--gutter) var(--space-m); }
.hero + .section, .cat-hero + .section { padding-top: var(--space-s); }
.section-head { display: flex; flex-direction: column; margin-bottom: clamp(40px, 6vw, 80px); }
.page-head { padding: var(--top-page) var(--gutter) clamp(12px, 2vw, 28px); }
.page-head .lead { margin-top: 32px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--photo-text); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); animation: heroZoom 16s cubic-bezier(.2,.6,.2,1) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero-slides .hero-img { opacity: 0; animation: none; transform: scale(1.06); transition: opacity 1.6s ease, transform 7s linear; }
.hero-slides .hero-img.active { opacity: 1; transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,16,.35) 0%, rgba(10,22,16,0) 30%, rgba(10,22,16,.1) 55%, rgba(10,22,16,.65) 100%); }
.hero-text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 7vw, 90px); }
.hero-title { font-family: var(--bodoni); font-weight: 400; letter-spacing: -.02em; font-optical-sizing: none; font-variation-settings: "opsz" 11; font-size: clamp(42px, 6.6vw, 112px); margin-bottom: 32px; }
.hero-title em { font-weight: 400; }
.hero-title em { color: var(--accent-light); }

.intro { display: flex; justify-content: center; text-align: center;
  padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(12px, 1.6vw, 24px); }
.intro + .section { padding-top: clamp(28px, 3.4vw, 48px); }
.intro .lead {
  max-width: 26ch; font-family: var(--bodoni); font-weight: 400; font-optical-sizing: none; font-variation-settings: "opsz" 11;
  font-size: clamp(30px, 3.8vw, 56px); line-height: 1.3; letter-spacing: 0;
}

/* ---------- Catégories (accueil) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.4vw, 20px) clamp(10px, 1.2vw, 18px); }
.cat-card { grid-column: span 2; color: inherit; text-decoration: none; display: grid; gap: 10px; align-content: start; }
/* les deux dernières vignettes, plus larges, ferment la grille */
/* les deux dernières, plus larges : format un peu moins haut pour équilibrer la page */
.cat-card:nth-child(4), .cat-card:nth-child(5) { grid-column: span 3; }
.cat-card:nth-child(4) img, .cat-card:nth-child(5) img { aspect-ratio: 3/2; }
.cat-img { overflow: hidden; border-radius: var(--radius); display: block; }
/* section « Cinq façons de raconter » : marges resserrées, photos jamais écrasées */
.section:has(.cat-grid) { padding-block: clamp(44px, 5.5vw, 84px); }
.section:has(.cat-grid) .section-head { margin-bottom: clamp(20px, 2.4vw, 32px); }
.cat-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1.2s var(--ease); }
.cat-card:hover img { transform: scale(1.04); }
/* vignette « entier » : la photo n'est pas recadrée, le cadre se remplit d'un fond doux */
.cat-card.entier img { object-fit: contain; background: var(--bg-2); }
.cat-card.entier:hover img { transform: none; }
.cat-label { display: grid; gap: 6px; }
.cat-num { font: 600 11px/1 var(--sub); letter-spacing: .18em; color: var(--accent); }
.cat-titre { font: var(--display-weight) clamp(22px, 2vw, 30px)/1.1 var(--serif); letter-spacing: -.02em; }
.cat-card:hover .cat-titre { color: var(--accent); }
.cat-phrase { color: var(--text-soft); font-size: 15px; max-width: 34ch; }
@media (max-width: 900px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .cat-card, .cat-card:nth-child(4), .cat-card:nth-child(5) { grid-column: span 1; }
  .cat-card img, .cat-card:nth-child(4) img, .cat-card:nth-child(5) img { aspect-ratio: 3/2; }
  .cat-card:first-child { grid-column: 1 / -1; }
  .cat-card:first-child img { aspect-ratio: 3/2; }
  .cat-phrase { display: none; }
}

/* ---------- Témoignages ---------- */
.testimonials { background: var(--dark-bg); color: var(--dark-text); padding-block: var(--space-s); }
.testimonials .eyebrow { color: var(--dark-accent); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); }
.quote { margin: 0; border-top: 1px solid color-mix(in srgb, var(--dark-text) 20%, transparent); padding-top: 28px; }
.quote blockquote { margin: 0 0 24px; font: 400 italic clamp(18px, 1.5vw, 22px)/1.55 var(--sub); }
/* Avis long : coupé à 6 lignes, dépliable par « voir plus » */
.quote blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.quote.ouvert blockquote { -webkit-line-clamp: unset; overflow: visible; }
.quote-plus {
  display: none; background: none; border: 0; padding: 0; margin: -14px 0 22px; cursor: pointer;
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--dark-accent);
  border-bottom: 1px solid currentColor; transition: color .3s;
}
.quote-plus:hover { color: var(--accent-light); }
.quote.coupable .quote-plus { display: inline-block; }
.quote figcaption { font-size: 14px; color: var(--dark-soft); }
.quote-role { display: block; margin-top: 3px; }
.quote strong { color: var(--dark-text); font-weight: 600; }
@media (max-width: 800px) { .quotes { grid-template-columns: 1fr; } }
/* Avis Google sous les témoignages */
.avis-google { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--dark-text) 20%, transparent); }
.btn-avis { display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; border-radius: 999px; text-decoration: none;
  color: var(--dark-text); box-shadow: inset 0 0 0 1px var(--dark-accent);
  font: 500 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: background .35s, color .35s; }
.btn-avis svg { font-size: 16px; color: var(--dark-accent); }
.btn-avis:hover { background: var(--dark-accent); color: var(--dark-bg); }
.btn-avis:hover svg { color: var(--dark-bg); }
.avis-google p { margin: 0; color: var(--dark-soft); font-size: 18px; }
.avis-google p a { color: var(--dark-text); text-underline-offset: 4px; text-decoration-color: var(--dark-accent); }
.avis-google p a:hover { color: var(--accent-light); }

/* ---------- Duo ---------- */
.duo { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 110px); align-items: center; padding: var(--space-l) var(--gutter) var(--space-m); }
.duo-img { display: flex; align-items: flex-start; padding-bottom: 8%; }
.duo-img figure { margin: 0; width: 58%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex: none; }
.duo-img figure:last-child { margin: 30% 0 0 -16%; }
.duo-img img { width: 100%; height: 100%; object-fit: cover; }
.duo-img figure:first-child img { object-position: 22% 30%; }
.duo-text .display { margin-bottom: 32px; }
.duo-text p:not(.eyebrow) { max-width: 44ch; margin: 0 0 32px; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } .duo-text .display { margin-left: 0; } }

/* ---------- CTA ---------- */
.cta { text-align: center; padding: var(--space-m) var(--gutter) var(--space-l); }
.cta .display { margin-bottom: 28px; }
.cta p:not(.eyebrow) { margin: 0 auto 40px; color: var(--text-soft); }

/* ---------- Portfolio ---------- */
.pf-list { padding: 0 var(--gutter) var(--space-m); display: grid; gap: var(--space-l); }
.pf-card { overflow-x: clip; display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: clamp(24px, 4vw, 64px); text-decoration: none; }
.pf-card:nth-child(even) { grid-template-columns: 5fr 7fr; }
.pf-card:nth-child(even) img { order: 2; }
.pf-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: filter .6s; }
.pf-card:hover img { filter: brightness(1.06) saturate(1.05); }
.pf-title { display: block; font: 400 clamp(40px, 6vw, 96px)/.95 var(--serif); letter-spacing: -.025em; margin-bottom: 16px; transition: color .3s; }
.pf-card:hover .pf-title { color: var(--accent); font-style: italic; }
.pf-sub { color: var(--text-soft); font: 400 19px/1.4 var(--sub); }
.pf-text .cat-num { color: var(--accent); }
@media (max-width: 800px) { .pf-card, .pf-card:nth-child(even) { grid-template-columns: 1fr; } .pf-card:nth-child(even) img { order: 0; } }

/* ---------- Page catégorie ---------- */
.cat-hero { position: relative; height: 88svh; min-height: 480px; }
.cat-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-hero-text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: -0.32em; font-size: clamp(56px, 7.5vw, 120px); }
.cat-hero-text .eyebrow { color: var(--photo-text); text-shadow: 0 1px 12px rgba(0,0,0,.4); font-size: 12px; margin-bottom: 24px; }
.cat-hero-text h1 { color: var(--text); mix-blend-mode: normal; }
.cat-hero-text h1 { padding-bottom: .3em; margin-bottom: -.3em; background: linear-gradient(180deg, var(--photo-text) 0 .62em, var(--text) .62em); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cat-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 6vw, 100px); align-items: start; }
.cat-intro p:not(.lead) { margin: 0; max-width: 52ch; }
.cat-intro .btn { grid-column: 2; justify-self: start; }
@media (max-width: 800px) { .cat-intro { grid-template-columns: 1fr; } .cat-intro .btn { grid-column: 1; } }

/* Galerie découpée en séries (page Image de marque) : boutons de filtre + titre */
.series-nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--gutter) var(--space-s); }
.serie-btn {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: none;
  font: 500 12px/1 var(--sub); letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.serie-btn:hover { color: var(--text); border-color: var(--accent); }
.serie-btn.actif { color: var(--on-accent); background: var(--dark-bg); border-color: var(--dark-bg); }
.serie-nb { font-size: 10px; letter-spacing: .1em; color: var(--accent); }
.serie-btn.actif .serie-nb { color: var(--dark-accent); }
.serie[hidden] { display: none; }

/* Titre de série + filet */
.serie { padding-bottom: var(--space-s); }
.serie + .serie { padding-top: 0; }
.serie-titre {
  font: 300 clamp(24px, 2.6vw, 34px)/1.2 var(--serif); letter-spacing: .01em; color: var(--text);
  margin: 0 0 clamp(18px, 2vw, 28px); display: flex; align-items: center; gap: clamp(16px, 2vw, 28px);
}
.serie-titre::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.gallery { columns: 3; column-gap: clamp(8px, 1.2vw, 18px); }
.g-item { display: block; margin-bottom: clamp(8px, 1.2vw, 18px); break-inside: avoid; overflow: hidden; cursor: zoom-in; }
.g-item img { width: 100%; transition: transform 1s var(--ease); }
.g-item:hover img { transform: scale(1.03); }
/* Bandeau vert fumé avec le nom de l'artiste (page Événementiel) : au survol et dans la visionneuse */
.g-item { position: relative; }
.g-legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 16px; background: rgba(20,38,29,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--photo-text); font: 400 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-align: center; pointer-events: none; opacity: 0; transform: translateY(100%); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.g-item:hover .g-legende, .g-item:focus-visible .g-legende { opacity: 1; transform: none; }
.lb-fig { position: relative; margin: 0; }
.lb-fig img { display: block; }
.lb-fig .g-legende { opacity: 1; transform: none; border-radius: 0 0 var(--radius) var(--radius); }
.lb-fig .g-legende[hidden] { display: none; }
@media (max-width: 900px) { .gallery { columns: 2; } }

/* Navigation précédent / suivant entre catégories */
.cat-nav { display: flex; justify-content: space-between; gap: 24px; padding: 0 var(--gutter) clamp(40px, 5vw, 64px); margin-top: calc(var(--space-l) / -2); }
.cat-nav a { display: flex; align-items: center; gap: 16px; text-decoration: none; min-width: 0; }
.cat-nav-suiv { flex-direction: row-reverse; text-align: right; margin-left: auto; }
.cat-nav-img { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.cat-nav-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat-nav-txt { display: grid; gap: 4px; }
.cat-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* lu par les lecteurs d'écran seulement */
.cat-nav-titre { font: 400 clamp(18px, 1.6vw, 22px)/1.2 var(--serif); }
.cat-nav-fleche { font-size: 18px; color: var(--accent); display: inline-flex; transition: transform .35s var(--ease); }
.cat-nav-prec .cat-nav-fleche { transform: scaleX(-1); order: -1; }
.cat-nav a:hover .cat-nav-img img { transform: scale(1.1); }
.cat-nav a:hover .cat-nav-titre { color: var(--accent); }
.cat-nav-suiv:hover .cat-nav-fleche { transform: translateX(4px); }
.cat-nav-prec:hover .cat-nav-fleche { transform: scaleX(-1) translateX(4px); }
@media (max-width: 600px) { .cat-nav-img { display: none; } .cat-nav-fleche { display: none; } }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, #0f1c15 96%, transparent); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100svh - 80px); object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #efe5d1; font-size: 34px; cursor: pointer; padding: 14px; opacity: .8; }
.lightbox button:hover { opacity: 1; color: #e3c683; }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
@media (max-width: 700px) { .lightbox img { max-width: 100vw; } .lb-prev, .lb-next { bottom: 16px; } }

/* ---------- À propos ---------- */
.about { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 110px); padding: 0 var(--gutter) var(--space-m); align-items: start; }
.about-img { position: sticky; top: 100px; margin-top: clamp(16px, 2.5vw, 40px); }
.about-img.duo-img { position: sticky; }
.caption { font-size: 13px; color: var(--text-soft); margin: 12px 0 0; }
.about-text .display-sm { margin-bottom: 32px; }
.about-text p { max-width: 58ch; }
.about-text h3 { margin-top: 48px; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 18px 0 18px 56px; border-top: 1px solid var(--line); position: relative; }
.steps li::before { content: "0" counter(s); position: absolute; left: 0; top: 16px; font: italic 400 28px/1 var(--sub); color: var(--accent); }
@media (max-width: 800px) { .about { grid-template-columns: 1fr; } .about-img, .about-img.duo-img { position: static; } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); padding: var(--top-page) var(--gutter) var(--space-m); }
.contact .display-xl { font-size: clamp(52px, 6vw, 96px); margin-bottom: 32px; }
.contact-list { list-style: none; padding: 0; margin: 36px 0; font: 500 20px/1.8 var(--sub); }
.contact-list a { text-decoration: none; border-bottom: 1px solid transparent; }
.contact-list a:hover { border-color: var(--accent); color: var(--accent); }
.contact-list li { position: relative; padding-left: 22px; }
.contact-list li::before { content: ""; position: absolute; left: 0; top: .82em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light); }
.contact-zone { margin: 0; font-size: 15px; letter-spacing: .02em; color: var(--text-soft); }
.contact-steps { margin-top: clamp(48px, 6vw, 80px); }
.contact-steps .eyebrow { margin-bottom: 8px; }
.contact-steps .steps li { padding-left: 64px; }
.contact-steps .steps h2 { font: 600 17px/1.4 var(--sub); letter-spacing: .01em; margin: 0 0 4px; }
.contact-steps .steps p { margin: 0; max-width: 46ch; color: var(--text-soft); }
.form { display: grid; gap: 22px; align-self: start; position: sticky; top: 104px; background: var(--surface); padding: clamp(24px, 4vw, 52px); border-radius: 4px; box-shadow: 0 18px 50px -30px rgba(29,51,40,.45); }
.form-head { margin-bottom: 4px; }
.form-head .display-sm { margin: 0 0 6px; }
.form-head p { margin: 0; font-size: 15px; color: var(--text-soft); }
/* Hibou messager : apparaît dans le cadre du formulaire une fois la demande envoyée */
.form[hidden] { display: none; }
/* le bloc de confirmation reprend le cadre du formulaire */
.form-merci { scroll-margin-top: 120px; align-self: start; position: sticky; top: 104px; background: var(--surface);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 52px); border-radius: 4px;
  box-shadow: 0 18px 50px -30px rgba(29,51,40,.45); text-align: center; }
.form-merci .display-sm { margin: 18px 0 10px; }
.form-merci p { margin: 0 auto; max-width: 42ch; color: var(--text-soft); }
.form-merci .merci-mail { margin-top: 14px; font-size: 15px; }
.hibou { width: 108px; height: auto; display: block; margin: 0 auto; color: var(--accent); }
.hibou .aile { transform-origin: 80px 70px; }
/* dessin fourni, vectorisé (make_chauve_svg.py) en trois morceaux : le corps (oreilles, tête, ventre,
   pattes, enveloppe) reste immobile, seules les deux ailes battent. Le pivot de chaque aile est écrit
   dans le SVG (transform-origin). Le cisaillement vertical fait monter et descendre le bout de l'aile
   sans décoller son attache au corps. */
.chauve-svg { width: 200px; }
.form-merci.visible .chauve-svg .aile-g { animation: bat-aile-g .8s ease-in-out .5s infinite alternate both; }
.form-merci.visible .chauve-svg .aile-d { animation: bat-aile-d .8s ease-in-out .5s infinite alternate both; }
@keyframes bat-aile-g { from { transform: skewY(9deg); } to { transform: skewY(-7deg); } }
@keyframes bat-aile-d { from { transform: skewY(-9deg); } to { transform: skewY(7deg); } }
@media (prefers-reduced-motion: reduce) { .form-merci.visible .chauve-svg .aile { animation: none; } }
/* ancienne version en image (masque PNG), gardée en secours */
.chauve-dessin { width: 190px; aspect-ratio: 845 / 520; background: currentColor; color: var(--accent);
  -webkit-mask: url(img/contact/chauve-souris.png) center / contain no-repeat;
  mask: url(img/contact/chauve-souris.png) center / contain no-repeat; }
/* la chauve-souris dessinée est plus large que le hibou : dessin plus grand, ailes pivotant plus bas */
.hibou.chauve { width: 152px; }
.hibou.chauve .aile { transform-origin: 120px 90px; }
/* entrée : le hibou monte doucement, les ailes battent une fois, le texte suit */
.form-merci.visible .hibou { animation: hibou-envol .9s var(--ease) both; }
/* battement unique du hibou dessiné (la chauve-souris a le sien, plus bas) */
.form-merci.visible .hibou:not(.chauve-svg) .aile-g { animation: aile-g 1.6s var(--ease) both; }
.form-merci.visible .hibou:not(.chauve-svg) .aile-d { animation: aile-d 1.6s var(--ease) both; }
.form-merci.visible .display-sm { animation: monte .7s var(--ease) .25s both; }
.form-merci.visible p { animation: monte .7s var(--ease) .4s both; }
@keyframes hibou-envol { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes aile-g { 0%, 100% { transform: none; } 35% { transform: rotate(-16deg); } 70% { transform: rotate(-4deg); } }
@keyframes aile-d { 0%, 100% { transform: none; } 35% { transform: rotate(16deg); } 70% { transform: rotate(4deg); } }
@keyframes monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .form-merci.visible .hibou, .form-merci.visible .hibou .aile,
  .form-merci.visible .display-sm, .form-merci.visible p { animation: none; }
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.form input, .form select, .form textarea {
  font: 400 16px/1.4 var(--sans); color: var(--text); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; border-radius: 0; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
/* Date souhaitée : icône calendrier bien visible, cliquable sur toute sa zone */
.form input[type="date"] { position: relative; cursor: pointer; }
.form input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .65; cursor: pointer; padding: 4px; margin-right: -4px; border-radius: 6px;
}
.form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--line); }
[data-palette="noir"] .form input[type="date"]::-webkit-calendar-picker-indicator,
[data-palette="noir-argent"] .form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.form textarea { resize: vertical; }
.form .btn { justify-self: start; margin-top: 8px; }
.form .invalid { border-color: #c0392b; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 0; font-weight: 500; }
@media (max-width: 1000px) { .form { position: static; } }
@media (max-width: 800px) { .contact, .form .row { grid-template-columns: 1fr; } .contact-steps { margin-top: 48px; } }

.legal { max-width: 760px; padding-top: 0; }
.legal h2 { font: 400 26px/1.2 var(--serif); margin: 40px 0 8px; }
.legal mark { background: var(--mark); color: inherit; }

/* ---------- Footer : colonnes sur beige ---------- */
.site-footer { background: var(--bg); color: var(--text); padding: clamp(56px, 7vw, 96px) var(--gutter) 28px; border-top: 1px solid var(--line); }
.site-footer a { text-decoration: none; transition: color .3s; }
.site-footer a:hover { color: var(--accent); }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-brand p { margin: 0; color: var(--text-soft); }
.logo-foot { width: 190px; margin-bottom: 18px; color: var(--text); }
.site-footer .eyebrow { margin: 0 0 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer li a[href^="tel:"] { font-variant-numeric: tabular-nums; }
.socials { display: flex; gap: 16px; font-size: 22px; margin-top: 6px; }
.footer-bottom { margin: clamp(48px, 6vw, 72px) 0 0; font-size: 13px; color: var(--text-soft); }
@media (max-width: 800px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Apparition ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-img { animation: none; transform: none; }
}


/* ---------- Post-production ---------- */
.postprod { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 6vw, 100px); align-items: start;
  margin: 0 var(--gutter); padding: clamp(48px, 7vw, 96px) 0 clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); }
.postprod .eyebrow { grid-column: 1 / -1; margin: 0; }
.postprod-text p { margin: 0 0 20px; max-width: 52ch; }
.postprod-text strong { font-weight: 500; color: var(--accent); }
@media (max-width: 800px) { .postprod { grid-template-columns: 1fr; } }

/* ---------- Accueil : variantes de test ---------- */
.hero-split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 80px);
  min-height: 100svh; padding: 110px var(--gutter) 48px;
}
.hero-split .hero-title { color: var(--text); font-size: clamp(48px, 6.4vw, 108px); }
.hero-split .hero-title em { color: var(--accent); }
.hs-img { height: calc(100svh - 158px); min-height: 460px; overflow: hidden; }
.hs-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-arche { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); max-width: 1320px; margin-inline: auto; }
.hero-arche .hs-img { border-radius: 999px 999px 0 0; width: min(46vw, calc((100svh - 150px) * .78)); height: calc(100svh - 150px); justify-self: end; }
.hero-arche .hero-title { font-size: clamp(52px, 7.4vw, 132px); margin-right: clamp(-140px, -7vw, 0px); position: relative; z-index: 1; }
@media (max-width: 800px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; padding-top: 96px; }
  .hs-img { order: -1; height: 62svh; min-height: 0; }
  .hero-arche { grid-template-columns: 1fr; }
  .hero-arche .hs-img { width: 100%; max-width: 360px; height: 62svh; justify-self: center; }
  .hero-arche .hero-title { margin-right: 0; }
}
.hero-cadre { height: calc(100svh - 24px); margin: 88px var(--gutter) 0; min-height: 480px; height: calc(100svh - 112px); }
.hero-cadre .hero-img { object-position: 50% 34% !important; }

/* ---------- Coins arrondis ---------- */
.cat-img, .pf-card img, .g-item, .form, .hero-cadre, .hs-img, .lightbox img { border-radius: var(--radius); }
.cat-img, .g-item, .hero-cadre, .hs-img { isolation: isolate; }
.hero-arche .hs-img { border-radius: 999px 999px var(--radius) var(--radius); }
.cat-hero { margin: 88px var(--gutter) 0; height: calc(88svh - 88px); }
.cat-hero-img { border-radius: var(--radius); }


/* ---------- Voile sombre sous le titre : garde l'eyebrow et le haut du titre lisibles
   même sur une photo très claire (ciel, plage...) ---------- */
.cat-hero::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; background: linear-gradient(180deg, rgba(10,22,16,0) 55%, rgba(10,22,16,.45) 100%); }
.cat-hero-text { z-index: 1; }

/* ---------- Couverture catégorie haute (Mariage) ---------- */
.cat-hero.cat-hero-haute { height: calc(100svh - 88px - clamp(28px, 3.75vw, 60px) - 24px); }
.cat-hero-haute::after { background: linear-gradient(180deg, rgba(10,22,16,0) 45%, rgba(10,22,16,.55) 100%); }
@media (max-width: 640px) { .cat-hero-haute .cat-hero-img { object-position: 71% 50% !important; } }

/* ---------- Or métallique pailleté, fixe ---------- */
:root {
  /* grain pailleté : petits points clairs générés en SVG */
  --paillettes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .97  0 0 0 0 .85  0 0 0 9 -6.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --or-mat: #8f6f2b;        /* sur fond beige */
  --or-mat-clair: #cdb27a;  /* sur photo / fond sombre */
  --or-metal: linear-gradient(100deg, #6e4a12 0%, #a57a2a 20%, #d4ad58 34%, #8f6620 48%, #c29a45 64%, #74511a 82%, #b08533 100%);
  --or-metal-clair: linear-gradient(100deg, #c9a150 0%, #f6e3a6 20%, #fff4cf 32%, #d9b262 48%, #f3d98e 64%, #c19545 82%, #efd28a 100%);
}
.display em, .display-xl em, .display-sm em, .lead em, .eyebrow, .postprod-text strong, .pf-text .cat-num,
.testimonials .eyebrow {
  color: var(--or-mat); -webkit-text-fill-color: var(--or-mat); /* TEST doré mat unique (voir sauvegardes/) */
}
.testimonials .eyebrow { color: var(--or-mat-clair); -webkit-text-fill-color: var(--or-mat-clair); }
.eyebrow.light, .cat-hero-text .eyebrow { background: none; -webkit-text-fill-color: currentColor; color: var(--photo-text); }
.steps li::before { color: var(--accent); }
/* Accueil : or champagne mat, aplat sans dégradé ni paillettes */
.hero-title em { color: var(--or-mat-clair); -webkit-text-fill-color: var(--or-mat-clair); background: none; }
/* ombre portée sur le h1 (et non sur em) : dans .ligne, overflow:hidden la coupait en rectangle */
.hero .hero-title { filter: drop-shadow(0 2px 14px rgba(0,0,0,.35)); }

/* Accueil : entrée en douceur de l'accroche et du bouton, après le titre */
.hero-text .eyebrow, .hero-text .btn { opacity: 0; animation: heroIn 1.1s cubic-bezier(.2,.75,.15,1) forwards; }
.hero-text .eyebrow { animation-delay: .2s; }
.hero-text .btn { animation-delay: 1s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-text .eyebrow, .hero-text .btn { animation: none; opacity: 1; } }

/* ---------- 1. Titres dévoilés ligne par ligne ---------- */
.ligne { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.ligne > span { display: block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2, .75, .15, 1); }
.titre-on .ligne > span { transform: none; }
.titre-on .ligne:nth-child(2) > span { transition-delay: .12s; }
.titre-on .ligne:nth-child(3) > span { transition-delay: .24s; }

/* ---------- 2. Photos qui s'ouvrent comme un rideau ---------- */
.js .g-item.reveal, .js .cat-card.reveal, .js .pf-card.reveal, .js .duo-img.reveal { opacity: 1; transform: none; }
.js .g-item.reveal img, .js .cat-card.reveal img, .js .pf-card.reveal img, .js .duo-img.reveal figure {
  clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.65, 0, .25, 1), transform 1.6s cubic-bezier(.2, .7, .2, 1);
}
.js .g-item.reveal img, .js .cat-card.reveal img, .js .pf-card.reveal img { transform: scale(1.12); }
.js .reveal.in img, .js .duo-img.reveal.in figure { clip-path: inset(0 0 0 0); transform: none; }
.js .duo-img.reveal.in figure:last-child { transition-delay: .2s; }
.js .g-item.reveal.in:hover img, .js .cat-card.reveal.in:hover img { transform: scale(1.04); }
.cat-hero-img { animation: rideau 1.4s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes rideau { from { clip-path: inset(100% 0 0 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }

@media (prefers-reduced-motion: reduce) {
  .ligne > span { transform: none; transition: none; }
  .js .reveal img, .js .duo-img.reveal figure { clip-path: none !important; transform: none !important; transition: none; }
  .cat-hero-img { animation: none; }
}

/* ---------- Boutons : transparent, contour doré fin, reflet de lumière ---------- */
.btn:not(.btn-light) {
  font: 500 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  padding: 19px 30px; transition: background .35s, color .35s, border-color .35s, box-shadow .35s;
}
.btn:hover { transform: none; }
.btn:not(.btn-light) {
  background: transparent; color: #1d3328; box-shadow: inset 0 0 0 1px rgba(176,138,62,.55);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn:not(.btn-light)[href^="contact.html"]::after {
  /* douce lumière dorée qui se balance d'un bord à l'autre, sans arête */
  content: ""; position: absolute; inset: -60% auto -60% 0; width: 60%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 240, 236, .36), rgba(226, 228, 224, .12) 55%, transparent);
  filter: blur(6px);
  transform: translateX(-30%);
  /* comme une lampe suspendue qu'on ferait osciller : vitesse max au centre, ralentie aux extrémités, léger arc */
  animation: lumiere-bouton 2s cubic-bezier(.37, 0, .63, 1) infinite alternate, lumiere-arc 2s cubic-bezier(.37, 0, .63, 1) infinite;
}
.btn:not(.btn-light):hover { background: rgba(201, 165, 90, .12); }
.home .site-header:not(.solid) .btn { color: var(--photo-text); box-shadow: inset 0 0 0 1px rgba(227,198,131,.6); }
/* au survol, la lueur s'efface : tous les boutons réagissent de la même façon (fond vert, texte clair) */
.btn[href^="contact.html"]:hover::after { opacity: 0; animation: none; }
@keyframes lumiere-bouton { from { transform: translateX(-30%); opacity: .4; } to { transform: translateX(70%); opacity: .85; } }
@keyframes lumiere-arc { 0%, 100% { translate: 0 -7%; } 50% { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn:not(.btn-light)::after { display: none; } }
.testimonials .btn:not(.btn-light) { box-shadow: inset 0 0 0 1px rgba(201,165,90,.6); }
/* Bouton sur photo (accueil) : transparent, filet or clair, comme « Demander un devis » */
.btn.btn-photo { background: transparent; color: var(--photo-text); box-shadow: inset 0 0 0 1px rgba(227,198,131,.6); }
.btn.btn-photo:hover { background: rgba(227, 198, 131, .14); color: var(--photo-text); }


/* ---------- Le bouton « Demander un devis » ressort un peu plus ---------- */
.btn[href^="contact.html"], .btn[href^="formules-mariage.html"]:not(.btn-photo) {
  font-weight: 600; letter-spacing: .22em;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 6px 22px -12px rgba(29, 51, 40, .55);
  background: rgba(29, 51, 40, .05);
}
.btn[href^="contact.html"]:hover, .btn[href^="formules-mariage.html"]:not(.btn-photo):hover { background: var(--dark-bg); color: var(--photo-text); box-shadow: inset 0 0 0 1.5px var(--accent-light); }
/* Sur photo : verre plus dense et filet or clair */
.home .site-header:not(.solid) .btn[href^="contact.html"], .hero .btn[href^="contact.html"] {
  background: rgba(14, 22, 18, .5); box-shadow: inset 0 0 0 1.5px #e3c683, 0 8px 26px -14px rgba(0, 0, 0, .8);
}
.home .site-header:not(.solid) .btn[href^="contact.html"]:hover, .hero .btn[href^="contact.html"]:hover {
  background: rgba(29, 51, 40, .82); color: var(--photo-text);
}
/* Dans le bas de page vert */
.formules-band .btn-photo { font-weight: 600; letter-spacing: .22em; box-shadow: inset 0 0 0 1.5px #e3c683; }
.site-footer .btn[href^="contact.html"] { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1.5px var(--dark-accent); }

.intro .lead em { font-style: normal; color: inherit; -webkit-text-fill-color: inherit; }



/* ---------- Formules (page catégorie) ---------- */
.intro-btns { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.intro-btns .link-arrow svg { width: 16px; }
@media (max-width: 800px) { .intro-btns { grid-column: 1; } }
.formules-band { margin: 0 var(--gutter) var(--space-m); background: var(--dark-bg); color: var(--dark-text); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.fb-text { padding: clamp(40px, 6vw, 96px); align-self: center; }
.fb-text .eyebrow { color: var(--dark-accent); }
.fb-text .display { margin-bottom: 28px; }
.fb-text .display em { color: var(--accent-light); }
.fb-text p:not(.eyebrow) { color: var(--dark-soft); max-width: 44ch; margin: 0 0 36px; }
.fb-img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 800px) { .formules-band { grid-template-columns: 1fr; } .fb-img { min-height: 0; aspect-ratio: 4/3; order: -1; } }
.formules-page { padding-top: 0; max-width: none; }
.formules-page .eyebrow a { color: inherit; }
.formules-page .display-xl { margin-bottom: 40px; }
.formules-page .lead { max-width: 40ch; margin: 0 0 40px; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Accueil : le canvas WebGL prend le relais de la photo (qui reste en repli) */
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero.gl .hero-img { visibility: hidden; }

/* Lisibilité des petits textes sur photo (accueil) */
.hero .hero-shade { background: linear-gradient(180deg, rgba(10,22,16,.22) 0%, rgba(10,22,16,0) 30%, rgba(10,22,16,.04) 55%, rgba(10,22,16,.48) 100%); }
/* Photo d'ouverture légèrement rééclaircie (28/09) */
.hero:not(.gl) .hero-img { filter: brightness(1.1) contrast(.98); }
.hero-text .eyebrow.light { opacity: 1; font-size: 13px; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.home .site-header:not(.solid) .nav > ul > li > a, .home .site-header:not(.solid) .logo { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
/* Menu téléphone ouvert : fond beige, on retire l'ombre portée prévue pour la photo */
.menu-open .site-header:not(.solid) .nav > ul > li > a, .menu-open .site-header:not(.solid) .nav .sub a,
.menu-open .site-header:not(.solid) .logo { text-shadow: none; }
/* Menu téléphone ouvert : le bouton devis reprend son habillage beige */
.menu-open .site-header:not(.solid) .btn[href^="contact.html"] {
  background: rgba(29, 51, 40, .05); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 6px 22px -12px rgba(29, 51, 40, .55);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.home .site-header:not(.solid) .btn, .hero .btn-photo {
  background: rgba(14, 22, 18, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ---------- Accueil : reflet lustré sur « révéler l'émotion » ---------- */
/* Un seul passage de lumière, lent, après l'apparition du titre. */
.hero .hero-title em {
  /* le reflet suit la couleur d'accent de la palette */
  background: linear-gradient(100deg,
      var(--or-mat-clair) 0%, var(--or-mat-clair) 30%,
      color-mix(in srgb, var(--or-mat-clair) 60%, #fff) 40%,
      color-mix(in srgb, var(--or-mat-clair) 22%, #fff) 50%,
      color-mix(in srgb, var(--or-mat-clair) 60%, #fff) 60%,
      var(--or-mat-clair) 70%, var(--or-mat-clair) 100%);
  background-size: 300% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* passage de ~4,5 s, puis pause : le reflet revient toutes les 11 s */
.hero-title.titre-on em { animation: reflet 11s linear 1.15s infinite; }
@keyframes reflet {
  0% { background-position: 130% 0; }
  41% { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-title em { background: none; -webkit-text-fill-color: var(--or-mat-clair); color: var(--or-mat-clair); }
  .hero-title.titre-on em { animation: none; }
}

/* ---------- TEST boutons champagne (21/09) : fond champagne uni, texte vert anglais ; survol vert ----------
   Retour arrière : sauvegardes/2026-09-21-avant-boutons-pleins/style.css (ou supprimer ce bloc) */
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small),
.site-header.solid .btn, .site-footer .btn {
  /* champagne translucide : dégradé léger + filet + reflet intérieur, pour ne pas faire aplat */
  background: linear-gradient(180deg, var(--btn-1, rgba(222, 200, 152, .62)), var(--btn-2, rgba(196, 168, 112, .5)));
  color: var(--dark-bg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px var(--btn-ring, rgba(196, 168, 112, .85)), inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px -14px rgba(0, 0, 0, .45);
}
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small):hover,
.site-header.solid .btn:hover, .site-footer .btn:hover {
  background: var(--dark-bg); color: var(--or-mat-clair, #cdb27a);
  box-shadow: inset 0 0 0 1px var(--btn-ring, rgba(205, 178, 122, .7)), 0 10px 26px -14px rgba(0, 0, 0, .55);
}
/* Le scintillement ne reste que sur le bouton « Demander un devis » posé sur la photo d'accueil (menu transparent) */
.btn:not(.btn-light)[href^="contact.html"]::after { display: none; }
.home .site-header:not(.solid) .btn[href^="contact.html"]::after { display: block; }

/* ---------- Fenêtre de promotion (petite carte, discrète) ---------- */
.promo {
  /* à droite : le titre du bandeau d'accueil occupe le bas à gauche */
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 60;
  width: min(330px, calc(100vw - 2 * var(--gutter)));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--text); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(168, 129, 58, .45), 0 24px 50px -24px rgba(29, 51, 40, .55);
  padding: 22px 24px 20px; display: grid; gap: 6px;
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.promo[hidden] { display: none; }
.promo.in { opacity: 1; transform: none; }
.promo-sur { margin: 0; font: 500 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.promo-titre { margin: 4px 0 0; font: 400 21px/1.25 var(--serif); }
.promo-texte { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.promo .link-arrow { margin-top: 10px; font-size: 13px; }
.promo-close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 7px;
  border: 0; border-radius: 50%; background: none; color: var(--text-soft); cursor: pointer;
  display: inline-flex; transition: background .3s, color .3s;
}
.promo-close:hover { background: rgba(29, 51, 40, .07); color: var(--text); }
.promo-close svg { width: 100%; height: 100%; }
@media (max-width: 600px) {
  .promo { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 20px 16px; }
  .promo-titre { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .promo { transition: none; transform: none; } }

/* ---------- Annonce de la promotion, page Contact (versions à comparer) ---------- */
.promo-note {
  margin: 0 0 clamp(28px, 3vw, 40px); padding: 18px 22px 18px 26px;
  background: color-mix(in srgb, var(--accent-light) 16%, var(--surface));
  border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--accent);
  display: grid; gap: 4px; max-width: 520px;
}
.promo-note-sur { font: 500 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.promo-note-titre { font: 400 20px/1.3 var(--serif); color: var(--text); }
.promo-note-texte { font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.promo-note { margin-bottom: 28px; }
@media (max-width: 800px) { .promo-note { max-width: none; } }

/* Sur téléphone, la carte de promo occupe le bas de l'écran : on remonte le texte du bandeau */
@media (max-width: 600px) {
  body:has(.promo:not([hidden])) .hero-text { bottom: clamp(190px, 34vw, 240px); }
}

/* ---------- Essais d'ouverture (à retirer une fois la variante choisie) ---------- */
.ouv { padding: calc(var(--top-page) - 30px) var(--gutter) 0; }
.ouv-texte { text-align: center; max-width: 100%; margin: 0 auto clamp(28px, 4vw, 48px); }
.ouv-texte .eyebrow { margin-bottom: 20px; }
.ouv .hero-title { color: var(--text); font-size: clamp(26px, 8.6vw, 88px); }
/* chaque ligne reste d'un seul tenant : pas de retour après la virgule */
.ouv .ligne > span { white-space: nowrap; }
.ouv .ligne { overflow: visible; }  /* le titre ne doit jamais être rogné */
.ouv .hero-title em { color: var(--accent); }
.ouv-photo { margin: 0; overflow: hidden; border-radius: var(--radius); }
.ouv-photo img { width: 100%; object-fit: cover; }

/* Photo encadrée : deux tiers de l'écran, marges beiges autour */
.ouv-encadre .ouv-photo img { height: min(62svh, 560px); }

/* Deux photos côte à côte */
.ouv-duo .ouv-photos { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(10px, 1.4vw, 18px); }
.ouv-duo figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.ouv-duo img { width: 100%; height: min(58svh, 520px); object-fit: cover; }
.ouv-duo figure:last-child img { height: min(48svh, 430px); align-self: end; }
.ouv-duo figure:last-child { align-self: end; }

/* Titre d'abord : grand titre sur le beige, photo découverte ensuite */
.ouv-titre { padding-top: calc(var(--top-page) + 20px); }
.ouv-titre .ouv-texte { margin-bottom: clamp(40px, 7vw, 96px); }
.ouv-titre .hero-title { font-size: clamp(30px, 9.2vw, 128px); }
.ouv-titre .ouv-photo img { height: min(70svh, 620px); }

/* Bande panoramique */
.ouv-bande .ouv-photo img { aspect-ratio: 21/9; height: auto; max-height: 56svh; }

@media (max-width: 700px) {
  .ouv-duo .ouv-photos { grid-template-columns: 1fr; }
  .ouv-duo figure:last-child { display: none; }
  .ouv-bande .ouv-photo img { aspect-ratio: 4/3; }
}

/* ---------- Palettes (data-palette sur <html> ; choix retenu : blanc-vert) ---------- */
/* 1. Marron & vert foncé : fond blanc chaud, texte marron, aplats vert forêt */
[data-palette="marron-vert"] {
  --or-mat: var(--accent); --or-mat-clair: var(--accent-light);
  --btn-1: color-mix(in srgb, var(--accent) 72%, transparent);
  --btn-2: color-mix(in srgb, var(--accent) 52%, transparent);
  --btn-ring: color-mix(in srgb, var(--accent) 85%, transparent);
  --bg: #f4f3f1; --bg-2: #e7e6e2; --text: #4a3226; --text-soft: #7b665b;
  --accent: #2c4a36; --accent-hover: #1f3627; --on-accent: #f4f3f1;
  --accent-light: #9ab89f; --surface: #fbfbfa; --dark-bg: #1f3327; --dark-text: #eef0ea;
  --dark-soft: #a8b5a6; --dark-accent: #c08b5a; --line: rgba(74,50,38,.18);
  --mark: #dcd2c2;
}
/* 3. Marron foncé : le site bascule en sombre, accents vert sauge */
[data-palette="marron-fonce"] {
  --or-mat: var(--accent); --or-mat-clair: var(--accent-light);
  --btn-1: color-mix(in srgb, var(--accent) 72%, transparent);
  --btn-2: color-mix(in srgb, var(--accent) 52%, transparent);
  --btn-ring: color-mix(in srgb, var(--accent) 85%, transparent);
  --bg: #2b211b; --bg-2: #241b16; --text: #f2ebe3; --text-soft: #bda997;
  --accent: #9fba9c; --accent-hover: #b9cfb6; --on-accent: #23180f;
  --accent-light: #c9dcc4; --surface: #34281f; --dark-bg: #1b1410; --dark-text: #f2ebe3;
  --dark-soft: #b09c8b; --dark-accent: #c08b5a; --line: rgba(242,235,227,.18);
  --mark: rgba(192,139,90,.35);
}
[data-palette="marron-fonce"] .site-header.solid { box-shadow: 0 1px 0 var(--line); }
[data-palette="marron-fonce"] .btn:not(.btn-light) { color: var(--accent); }
/* 2. Blanc & marron : fond blanc franc, texte et aplats marron */
[data-palette="blanc-marron"] {
  --or-mat: var(--accent); --or-mat-clair: var(--accent-light);
  --btn-1: color-mix(in srgb, var(--accent) 72%, transparent);
  --btn-2: color-mix(in srgb, var(--accent) 52%, transparent);
  --btn-ring: color-mix(in srgb, var(--accent) 85%, transparent);
  --bg: #fdfcfa; --bg-2: #f4efe9; --text: #3d2b21; --text-soft: #7d685b;
  --accent: #8a5a38; --accent-hover: #6f462a; --on-accent: #fdfcfa;
  --accent-light: #d6b391; --surface: #ffffff; --dark-bg: #2f211a; --dark-text: #f5efe8;
  --dark-soft: #b3a396; --dark-accent: #c99a6a; --line: rgba(61,43,33,.14);
  --mark: #eddcc8;
}
/* 4. Noir : le site bascule en noir, textes crème, accent doré */
[data-palette="noir"] {
  --or-mat: var(--accent); --or-mat-clair: var(--accent-light);
  --btn-1: color-mix(in srgb, var(--accent) 72%, transparent);
  --btn-2: color-mix(in srgb, var(--accent) 52%, transparent);
  --btn-ring: color-mix(in srgb, var(--accent) 85%, transparent);
  --bg: #121212; --bg-2: #191919; --text: #f2efe9; --text-soft: #a8a49c;
  --accent: #c9a55a; --accent-hover: #ddbd79; --on-accent: #141414;
  --accent-light: #e6cf95; --surface: #1c1c1c;
  /* idem : bandeaux clairs pour détacher les témoignages du fond noir */
  --dark-bg: #f3f0e9; --dark-text: #1a1815;
  --dark-soft: #6a6459; --dark-accent: #8a6c30; --line: rgba(242,239,233,.16);
  --mark: rgba(201,165,90,.3);
}
[data-palette="noir"] .btn:not(.btn-light) { color: var(--accent); }
[data-palette="noir"] { --or-metal: linear-gradient(100deg, #8a6c30 0%, #c9a55a 28%, #f0dca4 50%, #c9a55a 72%, #8a6c30 100%); }

/* 5. Noir & argent : accent gris bleuté, clair de lune */
[data-palette="noir-argent"] {
  --or-mat: var(--accent); --or-mat-clair: var(--accent-light);
  --btn-1: color-mix(in srgb, var(--accent) 72%, transparent);
  --btn-2: color-mix(in srgb, var(--accent) 52%, transparent);
  --btn-ring: color-mix(in srgb, var(--accent) 85%, transparent);
  --bg: #121212; --bg-2: #191919; --text: #f1f1ef; --text-soft: #a3a6aa;
  --accent: #b9c2cc; --accent-hover: #d5dbe2; --on-accent: #14171a;
  --accent-light: #dde3ea; --surface: #1c1c1c;
  /* bandeaux clairs (témoignages, pied de page) : sur fond noir, ils font ressortir les avis */
  --dark-bg: #f2f0ec; --dark-text: #16181a;
  --dark-soft: #5d6167; --dark-accent: #6d7886; --line: rgba(241,241,239,.16);
  --mark: rgba(185,194,204,.3);
}
[data-palette="noir-argent"] .btn:not(.btn-light) { color: var(--accent); }
[data-palette="noir-argent"] { --or-metal: linear-gradient(100deg, #7f878f 0%, #b9c2cc 28%, #e8eef5 50%, #b9c2cc 72%, #7f878f 100%); }

/* 6. Blanc & vert anglais : fond blanc franc, vert forêt en texte et aplats */
[data-palette="blanc-vert"] {
  /* un seul vert pour tout le texte : les mots en italique (em, eyebrow…) ne se distinguent plus par la couleur */
  --or-mat: var(--text); --or-mat-clair: var(--accent-light);
  --btn-1: color-mix(in srgb, var(--accent) 72%, transparent);
  --btn-2: color-mix(in srgb, var(--accent) 52%, transparent);
  --btn-ring: color-mix(in srgb, var(--accent) 85%, transparent);
  --bg: #fcfcfb; --bg-2: #eef0ec; --text: #1d3328; --text-soft: #5f6f64;
  --accent: #23503a; --accent-hover: #17392a; --on-accent: #fcfcfb;
  --accent-light: #8fae96; --surface: #ffffff; --dark-bg: #1d3328; --dark-text: #eef0ea;
  --dark-soft: #a9b7ab; --dark-accent: #9fba9c; --line: rgba(29,51,40,.14);
  --mark: #d6e2d6;
}
[data-palette="blanc-vert"] { --or-metal: linear-gradient(100deg, #17392a 0%, #23503a 30%, #4d7a5e 52%, #23503a 74%, #17392a 100%); }

/* le doré métallique suit la palette choisie */
[data-palette="marron-vert"] { --or-metal: linear-gradient(100deg, #1c3324 0%, #2c4a36 30%, #4b6b52 52%, #2c4a36 74%, #1c3324 100%); }
[data-palette="marron-fonce"] { --or-metal: linear-gradient(100deg, #8fae8c 0%, #b9cfb6 30%, #dcebd7 52%, #9fba9c 74%, #86a684 100%); }
[data-palette="blanc-marron"] { --or-metal: linear-gradient(100deg, #6b4227 0%, #8a5a38 28%, #b98456 50%, #8a5a38 72%, #6b4227 100%); }



/* ---------- Ouverture : le titre, puis la photo qui grandit (test du 24/09) ---------- */
.ouv-zoom { position: relative; height: 260svh; }
.oz-collant { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.oz-texte {
  position: absolute; top: 32%; left: 50%; width: min(100%, 92vw); text-align: center;
  padding-inline: var(--gutter);
  opacity: clamp(0, calc(1 - var(--p, 0) * 2.2), 1);
  translate: -50% calc(-50% - var(--p, 0) * 40px);
}
.oz-texte .hero-title { color: var(--text); font-size: clamp(26px, 8.6vw, 92px); }
.oz-texte .hero-title em { color: var(--accent); }
.oz-texte .ligne { overflow: visible; }
.oz-texte .ligne > span { white-space: nowrap; }
.oz-cadre {
  position: relative; margin: 0; overflow: hidden; align-self: end;
  width: calc(26vw + (100vw - 26vw) * var(--p, 0));
  height: calc(34svh + (100svh - 34svh) * var(--p, 0));
  border-radius: calc(var(--radius) * (1 - var(--p, 0)));
  margin-bottom: calc((1 - var(--p, 0)) * 9svh);
  /* la photo entre par la droite puis se cale au centre en grandissant */
  translate: calc((1 - var(--p, 0)) * 52vw) 0;
}
.oz-cadre img { width: 100%; height: 100%; object-fit: cover; }
.oz-cadre figcaption {
  position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px);
  color: var(--photo-text); opacity: clamp(0, calc(var(--p, 0) * 2 - 1), 1);
  font: 600 12px/1.4 var(--sub); letter-spacing: .2em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
/* écrans peu hauts : on remonte le texte et on réduit la photo de départ */
@media (max-height: 760px) {
  .oz-texte { top: 28%; }
  .oz-cadre { height: calc(28svh + (100svh - 28svh) * var(--p, 0)); }
}
@media (max-width: 800px) {
  .ouv-zoom { height: 200svh; }
  .oz-cadre { width: calc(64vw + (100vw - 64vw) * var(--p, 0)); height: calc(26svh + (100svh - 26svh) * var(--p, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .ouv-zoom { height: auto; }
  .oz-collant { position: static; height: auto; display: block; padding-top: var(--top-page); }
  .oz-texte { position: static; translate: none; opacity: 1; margin-bottom: var(--space-s); }
  .oz-cadre { width: 100%; height: auto; aspect-ratio: 3/2; margin-bottom: 0; border-radius: var(--radius); }
  .oz-cadre figcaption { opacity: 1; }
}
}

/* Ouverture « logo » : la marque à la place de la phrase */
.oz-logo { margin: 0; display: grid; justify-items: center; }
/* ouverture « logo » : la marque de l'en-tête s'efface tant qu'on est en haut */
.site-header.sans-marque .brand { opacity: 0; pointer-events: none; }
.site-header .brand { transition: opacity .4s var(--ease); }
.logo-ouv { width: min(72vw, 620px); color: var(--text); margin-inline: auto; }
.lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Logo éclipse animé (ouverture) ---------- */
.ec-logo { display: grid; justify-items: center; gap: clamp(14px, 2vw, 22px); color: var(--text); }
.ec { width: clamp(120px, 20vw, 190px); height: auto; fill: currentColor; overflow: visible; }
.ec-mot {
  display: flex; gap: .04em; font: 300 clamp(26px, 5.4vw, 58px)/1 var(--serif);
  letter-spacing: .14em; text-indent: .14em;
}
.ec-mot span { opacity: 0; translate: 0 .35em; }
.ec-sous {
  font: 500 clamp(9px, 1.1vw, 12px)/1 var(--sub); letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase; color: var(--text-soft); opacity: 0;
}
/* pièces du symbole */
.ec-croissant { transform-origin: 150px 150px; opacity: 0; rotate: -150deg; }
.ec-arc { stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0; transform-origin: 150px 150px; rotate: -14deg; }
.ec-trait { stroke-dasharray: 316; stroke-dashoffset: 316; }
.ec-etoile { transform-origin: 156px 151px; scale: 0; opacity: 0; }

.js .ec-logo.assemble .ec-croissant { animation: ec-croissant 1.2s cubic-bezier(.2,.75,.2,1) both; }
.js .ec-logo.assemble .ec-arc-1 { animation: ec-arc 1.1s cubic-bezier(.4,0,.2,1) .35s both; }
.js .ec-logo.assemble .ec-arc-2 { animation: ec-arc 1.1s cubic-bezier(.4,0,.2,1) .5s both; }
.js .ec-logo.assemble .ec-trait { animation: ec-trait .9s cubic-bezier(.4,0,.2,1) .6s both; }
.js .ec-logo.assemble .ec-etoile { animation: ec-etoile .8s cubic-bezier(.2,1.4,.3,1) .95s both; }
.js .ec-logo.assemble .ec-mot span { animation: ec-lettre .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1s + var(--i) * .055s); }
.js .ec-logo.assemble .ec-sous { animation: ec-sous .8s ease both 1.75s; }

@keyframes ec-croissant { to { opacity: 1; rotate: 0deg; } }
@keyframes ec-arc { to { opacity: 1; stroke-dashoffset: 0; rotate: 0deg; } }
@keyframes ec-trait { to { stroke-dashoffset: 0; } }
@keyframes ec-etoile { 0% { scale: 0; rotate: -90deg; opacity: 0; } 100% { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes ec-lettre { to { opacity: 1; translate: 0 0; } }
@keyframes ec-sous { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ec-croissant, .ec-arc, .ec-etoile { opacity: 1; rotate: 0deg; scale: 1; stroke-dashoffset: 0; }
  .ec-trait { stroke-dashoffset: 0; }
  .ec-mot span, .ec-sous { opacity: 1; translate: 0 0; }
}

/* Ouverture « logo » : logo et photo calés à gauche */
.ouv-zoom:has(.oz-logo) .oz-texte { left: 0; translate: 0 calc(-50% - var(--p, 0) * 40px); text-align: left; }
.ouv-zoom:has(.oz-logo) .ec-logo { justify-items: start; }
.ouv-zoom:has(.oz-logo) .oz-collant { justify-items: start; }
@media (max-width: 700px) { .ouv-zoom:has(.oz-logo) .oz-cadre { translate: calc((1 - var(--p, 0)) * 42vw) 0; } }

/* ---------- Bouton « Demander un devis » de l'en-tête : aplat net ---------- */
.site-header .btn, .site-header.solid .btn {
  background: var(--accent); background-image: none; color: var(--on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; border-radius: 999px;
  font: 500 12px/1 var(--sub); letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 22px;
}
.site-header .btn:hover, .site-header.solid .btn:hover {
  background: var(--accent-hover); color: var(--on-accent); box-shadow: none; transform: translateY(-1px);
}
.site-header .btn svg { display: none; }
/* sur la photo d'accueil : contour clair, fond translucide */
.home .site-header:not(.solid) .btn {
  background: rgba(255, 255, 255, .1); color: var(--photo-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.home .site-header:not(.solid) .btn:hover { background: var(--photo-text); color: var(--text); box-shadow: none; }

/* ---------- Tous les boutons au même style : aplat net, petites capitales ---------- */
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small),
main .btn:not(.btn-photo):not(.btn-light).btn-small,
.site-header.solid .btn, .site-footer .btn, .testimonials .btn, .promo .btn {
  background: var(--accent); background-image: none; color: var(--on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border-radius: 999px; padding: 16px 26px;
  font: 500 12.5px/1 var(--sub); letter-spacing: .14em; text-transform: uppercase;
}
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small):hover,
main .btn:not(.btn-photo):not(.btn-light).btn-small:hover,
.site-header.solid .btn:hover, .site-footer .btn:hover, .testimonials .btn:hover, .promo .btn:hover {
  background: var(--accent-hover); color: var(--on-accent); box-shadow: none;
}
main .btn-small { padding: 12px 20px; font-size: 11.5px; }
/* le bouton « Voir nos avis Google » du bandeau sombre garde son contour */
.testimonials .btn-avis, .btn-avis {
  background: transparent; color: var(--dark-text);
  box-shadow: inset 0 0 0 1px var(--dark-accent); text-transform: uppercase;
}
.btn-avis:hover { background: var(--dark-accent); color: var(--dark-bg); }

/* ---------- Bouton « Demander un devis » de l'en-tête : aplat net ---------- */
.site-header .btn, .site-header.solid .btn {
  background: var(--accent); background-image: none; color: var(--on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; border-radius: 999px;
  font: 500 12px/1 var(--sub); letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 22px;
}
.site-header .btn:hover, .site-header.solid .btn:hover {
  background: var(--accent-hover); color: var(--on-accent); box-shadow: none; transform: translateY(-1px);
}
.site-header .btn svg { display: none; }
/* sur la photo d'accueil : contour clair, fond translucide */
.home .site-header:not(.solid) .btn {
  background: rgba(255, 255, 255, .1); color: var(--photo-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.home .site-header:not(.solid) .btn:hover { background: var(--photo-text); color: var(--text); box-shadow: none; }

/* ---------- Tous les boutons au même style : aplat net, petites capitales ---------- */
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small),
main .btn:not(.btn-photo):not(.btn-light).btn-small,
.site-header.solid .btn, .site-footer .btn, .testimonials .btn, .promo .btn {
  background: var(--accent); background-image: none; color: var(--on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border-radius: 999px; padding: 16px 26px;
  font: 500 12.5px/1 var(--sub); letter-spacing: .14em; text-transform: uppercase;
}
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small):hover,
main .btn:not(.btn-photo):not(.btn-light).btn-small:hover,
.site-header.solid .btn:hover, .site-footer .btn:hover, .testimonials .btn:hover, .promo .btn:hover {
  background: var(--accent-hover); color: var(--on-accent); box-shadow: none;
}
main .btn-small { padding: 12px 20px; font-size: 11.5px; }
/* le bouton « Voir nos avis Google » du bandeau sombre garde son contour */
.testimonials .btn-avis, .btn-avis {
  background: transparent; color: var(--dark-text);
  box-shadow: inset 0 0 0 1px var(--dark-accent); text-transform: uppercase;
}
.btn-avis:hover { background: var(--dark-accent); color: var(--dark-bg); }



/* ---------- Tous les boutons au même style : aplat net, petites capitales ---------- */
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small),
main .btn:not(.btn-photo):not(.btn-light).btn-small,
.site-header.solid .btn, .site-footer .btn, .testimonials .btn, .promo .btn {
  background: var(--accent); background-image: none; color: var(--on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border-radius: 999px; padding: 16px 26px;
  font: 500 12.5px/1 var(--sub); letter-spacing: .14em; text-transform: uppercase;
}
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small):hover,
main .btn:not(.btn-photo):not(.btn-light).btn-small:hover,
.site-header.solid .btn:hover, .site-footer .btn:hover, .testimonials .btn:hover, .promo .btn:hover {
  background: var(--accent-hover); color: var(--on-accent); box-shadow: none;
}
main .btn-small { padding: 12px 20px; font-size: 11.5px; }
/* le bouton « Voir nos avis Google » du bandeau sombre garde son contour */
.testimonials .btn-avis, .btn-avis {
  background: transparent; color: var(--dark-text);
  box-shadow: inset 0 0 0 1px var(--dark-accent); text-transform: uppercase;
}
.btn-avis:hover { background: var(--dark-accent); color: var(--dark-bg); }

/* ---------- Bouton « Demander un devis » de l'en-tête : aplat net ---------- */
.site-header .btn, .site-header.solid .btn {
  background: var(--accent); background-image: none; color: var(--on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; border-radius: 999px;
  font: 500 12px/1 var(--sub); letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 22px;
}
.site-header .btn:hover, .site-header.solid .btn:hover {
  background: var(--accent-hover); color: var(--on-accent); box-shadow: none; transform: translateY(-1px);
}
.site-header .btn svg { display: none; }
/* sur la photo d'accueil : contour clair, fond translucide */
.home .site-header:not(.solid) .btn {
  background: rgba(255, 255, 255, .1); color: var(--photo-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.home .site-header:not(.solid) .btn:hover { background: var(--photo-text); color: var(--text); box-shadow: none; }

/* ---------- Tous les boutons au même style : aplat net, petites capitales ---------- */
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small),
main .btn:not(.btn-photo):not(.btn-light).btn-small,
.site-header.solid .btn, .site-footer .btn, .testimonials .btn, .promo .btn {
  background: var(--accent); background-image: none; color: var(--on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border-radius: 999px; padding: 16px 26px;
  font: 500 12.5px/1 var(--sub); letter-spacing: .14em; text-transform: uppercase;
}
main .btn:not(.btn-photo):not(.btn-light):not(.btn-small):hover,
main .btn:not(.btn-photo):not(.btn-light).btn-small:hover,
.site-header.solid .btn:hover, .site-footer .btn:hover, .testimonials .btn:hover, .promo .btn:hover {
  background: var(--accent-hover); color: var(--on-accent); box-shadow: none;
}
main .btn-small { padding: 12px 20px; font-size: 11.5px; }
/* le bouton « Voir nos avis Google » du bandeau sombre garde son contour */
.testimonials .btn-avis, .btn-avis {
  background: transparent; color: var(--dark-text);
  box-shadow: inset 0 0 0 1px var(--dark-accent); text-transform: uppercase;
}
.btn-avis:hover { background: var(--dark-accent); color: var(--dark-bg); }




/* ---------- Palettes sombres : le bloc « Parlons de votre projet » en bandeau clair ---------- */
[data-palette="noir"] .cta, [data-palette="noir-argent"] .cta {
  background: var(--dark-bg); color: var(--dark-text);
}
[data-palette="noir"] .cta p:not(.eyebrow), [data-palette="noir-argent"] .cta p:not(.eyebrow) { color: var(--dark-soft); }
/* sur fond clair, l'accent argent ou or pâle devient illisible : on prend sa version foncée */
[data-palette="noir"] .cta .eyebrow, [data-palette="noir-argent"] .cta .eyebrow,
[data-palette="noir"] .cta .display em, [data-palette="noir-argent"] .cta .display em {
  color: var(--dark-accent); -webkit-text-fill-color: var(--dark-accent); background: none;
}
[data-palette="noir"] main .cta .btn:not(.btn-light),
[data-palette="noir-argent"] main .cta .btn:not(.btn-light) {
  background: var(--dark-text); background-image: none; color: var(--dark-bg); box-shadow: none;
}
[data-palette="noir"] main .cta .btn:not(.btn-light):hover,
[data-palette="noir-argent"] main .cta .btn:not(.btn-light):hover {
  background: var(--dark-accent); color: var(--dark-bg);
}

/* ---------- Variante « studio » : sombre, titres en capitales, boutons pilule ---------- */
/* menu flottant en pilule, comme chez Manza */
.studio .site-header {
  inset: 14px 14px auto; border-radius: 999px; padding: 12px 14px 12px 22px;
  background: rgba(14, 14, 14, .55); color: #f3f3f1;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.studio .site-header.solid { background: rgba(14, 14, 14, .82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.studio .site-header .brand { color: #f3f3f1; }
.studio .site-header .nav a:not(.btn) { color: #f3f3f1; }
.studio .site-header .btn {
  background: #f3f3f1; color: var(--text); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.studio .site-header .btn:hover { background: var(--accent-light); color: var(--text); }

/* ouverture : voile plus marqué, texte centré */
.hero-studio .hero-shade {
  background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.35) 45%, rgba(8,8,8,.75) 100%);
}
.st-texte {
  position: absolute; inset: auto 0 0; padding: 0 var(--gutter) clamp(48px, 9vh, 110px);
  display: grid; justify-items: center; text-align: center; gap: 18px; color: #fbfbf9;
}
.st-texte .eyebrow { margin: 0; color: #fbfbf9; opacity: .85; }
.st-titre {
  margin: 0; max-width: 20ch;
  font: 700 clamp(30px, 5.2vw, 76px)/1.08 var(--sub);
  letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance;
}
.st-sous { margin: 0; max-width: 46ch; font-size: clamp(15px, 1.4vw, 19px); opacity: .92; }
.st-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 30px; border-radius: 999px; text-decoration: none;
  font: 500 13px/1 var(--sub); letter-spacing: .06em; transition: background .3s, color .3s;
}
.btn-pill.plein { background: #fbfbf9; color: var(--text); }
.btn-pill.plein:hover { background: var(--accent-light); }
.btn-pill.contour { color: #fbfbf9; box-shadow: inset 0 0 0 1.5px rgba(251,251,249,.75); }
.btn-pill.contour:hover { background: rgba(251,251,249,.14); }

/* vignettes : le nom revient sur la photo, avec un bouton, façon Orbis */
.studio .cat-card { position: relative; }
.studio .cat-img::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(180deg, transparent 40%, rgba(8,8,8,.72));
}
.studio .cat-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px;
  justify-items: center; text-align: center; color: #fbfbf9;
}
.studio .cat-titre, .studio .cat-card:hover .cat-titre { color: #fbfbf9; }
.studio .cat-num { color: rgba(251,251,249,.75); }
.studio .cat-phrase { display: none; }
.studio .cat-label::after {
  content: "Découvrir"; margin-top: 12px; padding: 11px 20px; border-radius: 999px;
  font: 500 11.5px/1 var(--sub); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1.5px rgba(251,251,249,.7); transition: background .3s, color .3s;
}
.studio .cat-card:hover .cat-label::after { background: #fbfbf9; color: var(--text); }
@media (max-width: 700px) { .studio .site-header { inset: 8px 8px auto; padding-left: 16px; } }


/* ---------- Variantes d'en-tête (essai du 25/09, sélecteur « Menu ») ---------- */
.head-devis { display: none; }

/* — Pilule flottante : menu arrondi posé sur la page — */
html[data-header="pilule"] .site-header {
  inset: 14px 14px auto; border-radius: 999px; padding: 10px 12px 10px 24px;
  background: rgba(14, 14, 14, .6); color: #f3f3f1;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
html[data-header="pilule"] .site-header.solid {
  background: rgba(14, 14, 14, .86); padding-block: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
html[data-header="pilule"] .site-header .brand, html[data-header="pilule"] .site-header .nav a:not(.btn) { color: #f3f3f1; text-shadow: none; }
html[data-header="pilule"] .site-header .logo { width: 140px; }
html[data-header="pilule"] .site-header .btn {
  background: #f3f3f1 !important; color: var(--text) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-header="pilule"] .site-header .btn:hover { background: var(--accent-light) !important; }
/* accueil : le bouton du menu répète celui du bandeau, on l'assombrit (verre clair discret) */
html[data-header="pilule"] body.home .site-header .btn {
  background: rgba(243, 243, 241, .16) !important; color: #f3f3f1 !important;
  box-shadow: inset 0 0 0 1px rgba(243, 243, 241, .32) !important;
}
html[data-header="pilule"] body.home .site-header .btn:hover { background: var(--accent-light) !important; color: var(--text) !important; }
html[data-header="pilule"] .site-header .sub { border-radius: 24px; }
/* le blanc fixé ci-dessus (color #f3f3f1) gagnait aussi sur le survol du sous-menu : on lui redonne la couleur d'accent */
html[data-header="pilule"] .site-header .nav .sub a:not(.btn):hover { color: var(--accent-light); }

/* Sur les pages autres que l'accueil (pas de photo derrière), la pilule se fond dans le fond de page
   au lieu de flotter en verre sombre : fond très proche du fond, texte de la couleur du texte courant. */
html[data-header="pilule"] body:not(.home) .site-header,
html[data-header="pilule"] body:not(.home) .site-header.solid {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px -16px rgba(0,0,0,.18);
}
html[data-header="pilule"] body:not(.home) .site-header .brand,
html[data-header="pilule"] body:not(.home) .site-header .nav a:not(.btn) { color: var(--text); }
/* le sous-menu (Portfolio) garde son fond sombre en verre fumé, quelle que soit la page :
   il lui faut donc son texte clair d'origine, pas le vert repris juste au-dessus */
html[data-header="pilule"] body:not(.home) .site-header .nav .sub a:not(.btn) { color: var(--photo-text); }
html[data-header="pilule"] body:not(.home) .site-header .btn {
  background: var(--accent) !important; color: var(--on-accent) !important;
}
html[data-header="pilule"] body:not(.home) .site-header .btn:hover { background: var(--accent-hover) !important; }

/* — Barre sombre : bandeau plein, toujours foncé — */
html[data-header="sombre"] .site-header, html[data-header="sombre"] .site-header.solid {
  background: #101512; color: #f2f2ef; padding-block: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-header="sombre"] .site-header .brand, html[data-header="sombre"] .site-header .nav a:not(.btn) { color: #f2f2ef; text-shadow: none; }
html[data-header="sombre"] .site-header .btn {
  background: #f2f2ef !important; color: var(--text) !important; box-shadow: none !important;
}

/* — Burger (logo à gauche) et burger (logo centré) : menu plein écran à toutes les largeurs — */
html[data-header="burger"] .menu-toggle, html[data-header="centre"] .menu-toggle { display: inline-flex; }
html[data-header="burger"] .nav, html[data-header="centre"] .nav {
  position: fixed; inset: 0; background: var(--bg); color: var(--text);
  padding: 120px var(--gutter) 40px; overflow-y: auto; display: block;
  opacity: 0; visibility: hidden; transition: .3s var(--ease); z-index: -1;
}
html[data-header="burger"] .nav.open, html[data-header="centre"] .nav.open { opacity: 1; visibility: visible; }
html[data-header="burger"] .nav ul, html[data-header="centre"] .nav ul {
  flex-direction: column; align-items: flex-start; gap: 16px;
}
html[data-header="burger"] .nav > ul > li > a:not(.btn):not(.icon-link),
html[data-header="centre"] .nav > ul > li > a:not(.btn):not(.icon-link) {
  font: 400 clamp(36px, 5.4vw, 68px)/1.02 var(--serif); letter-spacing: -.02em; text-shadow: none;
}
html[data-header="burger"] .nav .sub, html[data-header="centre"] .nav .sub {
  position: static; opacity: 1; visibility: visible; transform: none; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 10px 0 0 !important; flex-direction: row;
  flex-wrap: wrap; gap: 6px 26px !important;
}
html[data-header="burger"] .nav .sub li, html[data-header="centre"] .nav .sub li { width: auto; }
html[data-header="burger"] .nav .sub a, html[data-header="centre"] .nav .sub a {
  padding: 4px 0; color: var(--text-soft); font-size: 17px; text-shadow: none;
}
html[data-header="burger"] .nav .btn, html[data-header="centre"] .nav .btn { margin-top: 14px; }
html[data-header="burger"] .menu-open .site-header, html[data-header="centre"] .menu-open .site-header,
html[data-header="burger"] .menu-open .site-header .logo, html[data-header="centre"] .menu-open .site-header .logo { color: var(--text) !important; text-shadow: none; }
html[data-header="burger"] .menu-open .site-header, html[data-header="centre"] .menu-open .site-header {
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* petit bouton Devis toujours visible à côté du burger */
html[data-header="burger"] .head-devis, html[data-header="centre"] .head-devis {
  display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; text-decoration: none;
  font: 500 11.5px/1 var(--sub); letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent); transition: background .3s;
}
html[data-header="burger"] .head-devis:hover, html[data-header="centre"] .head-devis:hover { background: var(--accent-hover); }
html[data-header="burger"] .home .site-header:not(.solid) .head-devis,
html[data-header="centre"] .home .site-header:not(.solid) .head-devis {
  background: rgba(255,255,255,.12); color: var(--photo-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
html[data-header="burger"] .menu-open .head-devis, html[data-header="centre"] .menu-open .head-devis { display: none; }
html[data-header="burger"] .head-devis { margin-left: auto; margin-right: 14px; }
/* logo centré : le burger passe à gauche, le devis à droite */
html[data-header="centre"] .site-header { justify-content: space-between; }
html[data-header="centre"] .menu-toggle { order: 0; }
html[data-header="centre"] .brand { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
html[data-header="centre"] .head-devis { order: 2; margin-left: auto; }
html[data-header="centre"] .site-header .logo { width: 150px; }

/* sélecteur d'essai du menu */


/* ---------- Pellicule de film : bande de transition sur l'accueil ---------- */
/* Le pas d'une vignette (largeur + marge) est un multiple du pas des perforations (22 px) :
   la boucle est donc parfaite. */
.pellicule {
  --film: #0b0b0b; --pm: 22px; --ph: 140px;
  position: relative; overflow: hidden; background: var(--film);
  margin-block: clamp(16px, 2.4vw, 32px) 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(255,255,255,.1);
}
.pell-piste {
  position: relative; display: flex; width: max-content; padding: 26px 0; margin-left: 0;
  animation: pellicule-defile 34s linear infinite;
}
/* perforations : elles laissent voir la couleur de la page, comme un vrai film */
.pell-piste::before, .pell-piste::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Crect x='4' y='1' width='13' height='10' rx='2.5' fill='%23000'/%3E%3C/svg%3E") 0 0 / 22px 12px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Crect x='4' y='1' width='13' height='10' rx='2.5' fill='%23000'/%3E%3C/svg%3E") 0 0 / 22px 12px repeat-x;
}
.pell-piste::before { top: 7px; }
.pell-piste::after { bottom: 7px; }
.pell-copie { display: contents; }
/* la vignette garde le format de sa photo (--r = largeur / hauteur) ; la largeur est arrondie au pas
   des perforations (22 px) pour que la boucle reste parfaite */
.pell-cadre {
  position: relative; display: block; flex: none; height: var(--ph); margin-right: var(--pm);
  width: calc(var(--r, 1.5) * var(--ph));
  border-radius: 6px; overflow: hidden; background: var(--film); cursor: pointer;
}
@supports (width: round(nearest, 10px, 5px)) {
  .pell-cadre { width: round(nearest, calc(var(--r, 1.5) * var(--ph)), 22px); }
}
/* au survol : la bande s'arrête et le nom de l'univers apparaît */
.pell-cadre::after {
  content: attr(data-nom); position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; border-radius: 999px;
  background: rgba(10,10,10,.72); color: #f3f3f1; font: 500 10.5px/1 var(--sub); letter-spacing: .12em;
  text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s;
}
.pell-cadre:hover::after, .pell-cadre:focus-visible::after { opacity: 1; transform: none; }
.pell-cadre:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* photo entière (jamais rognée) : l'éventuel liseré est noir, comme le film */
.pell-cadre img { width: 100%; height: 100%; object-fit: contain; filter: saturate(.92) contrast(1.03); }
@keyframes pellicule-defile { to { transform: translateX(-50%); } }
.pellicule:hover .pell-piste { animation-play-state: paused; }
/* la section qui suit la bande reprend un espace compact */
.pellicule + .section { padding-top: var(--space-s); }
.pellicule + .postprod { border-top: 0; }
@media (max-width: 700px) {
  .pellicule { --ph: 100px; }
  .pell-piste { animation-duration: 28s; }
  .pell-piste { padding-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pellicule { overflow-x: auto; }
  .pell-piste { animation: none; }
}

/* palettes noires : sur le bandeau clair des témoignages, le petit titre prend l'accent foncé (lisible) */
[data-palette="noir"] .testimonials .eyebrow, [data-palette="noir-argent"] .testimonials .eyebrow {
  color: var(--dark-accent); -webkit-text-fill-color: var(--dark-accent); background: none; opacity: 1;
}

/* palettes noires : le volet gauche de la page contact passe en panneau clair */
[data-palette="noir"] .contact-side, [data-palette="noir-argent"] .contact-side {
  background: var(--dark-bg); color: var(--dark-text); border-radius: 28px;
  padding: clamp(28px, 4vw, 56px); align-self: start;
}
[data-palette="noir"] .contact-side .display-xl, [data-palette="noir-argent"] .contact-side .display-xl { color: var(--dark-text); }
[data-palette="noir"] .contact-side .eyebrow, [data-palette="noir-argent"] .contact-side .eyebrow,
[data-palette="noir"] .contact-side .display-xl em, [data-palette="noir-argent"] .contact-side .display-xl em {
  color: var(--dark-accent); -webkit-text-fill-color: var(--dark-accent); background: none;
}
[data-palette="noir"] .contact-side p, [data-palette="noir-argent"] .contact-side p,
[data-palette="noir"] .contact-side .steps p, [data-palette="noir-argent"] .contact-side .steps p { color: var(--dark-soft); }
[data-palette="noir"] .contact-side .contact-list a, [data-palette="noir-argent"] .contact-side .contact-list a,
[data-palette="noir"] .contact-side .steps h2, [data-palette="noir-argent"] .contact-side .steps h2 { color: var(--dark-text); }
[data-palette="noir"] .contact-side .contact-list li::before, [data-palette="noir-argent"] .contact-side .contact-list li::before { background: var(--dark-accent); }

/* Essai : sur les palettes noires, les bandeaux alternent clair / sombre après l'ouverture */
[data-palette="noir"] .intro, [data-palette="noir-argent"] .intro,
[data-palette="noir"] .pres, [data-palette="noir-argent"] .pres,
[data-palette="noir"] .postprod, [data-palette="noir-argent"] .postprod,
[data-palette="noir"] .duo, [data-palette="noir-argent"] .duo,
[data-palette="noir"] .site-footer, [data-palette="noir-argent"] .site-footer {
  --bg: var(--dark-bg); --text: var(--dark-text); --text-soft: var(--dark-soft); --line: rgba(22,24,26,.16);
  --accent: var(--dark-accent); --accent-hover: var(--dark-text); --on-accent: #f7f6f3;
  --surface: #fff; --mark: rgba(109,120,134,.25); --accent-light: var(--dark-accent);
  background: var(--dark-bg); color: var(--dark-text);
  box-shadow: 0 0 0 100vmax var(--dark-bg); clip-path: inset(0 -100vmax);
}
[data-palette="noir"] :is(.intro,.postprod,.duo,.site-footer) :is(em,.eyebrow,strong),
[data-palette="noir-argent"] :is(.intro,.postprod,.duo,.site-footer) :is(em,.eyebrow,strong) {
  color: var(--dark-accent); -webkit-text-fill-color: var(--dark-accent); background: none;
}
[data-palette="noir"] :is(.postprod,.duo) .btn, [data-palette="noir-argent"] :is(.postprod,.duo) .btn {
  background: var(--dark-text); background-image: none; color: #f7f6f3; box-shadow: none;
}
/* la pellicule : perforations claires sur fond clair */
[data-palette="noir"] .pellicule, [data-palette="noir-argent"] .pellicule { --bg: #f2f0ec; }
/* témoignages et « Parlons de votre projet » : passent en sombre */
[data-palette="noir"] :is(.testimonials,.cta), [data-palette="noir-argent"] :is(.testimonials,.cta) {
  --dark-bg: #131313; --dark-text: #f1f1ef; --dark-soft: #a3a6aa; --dark-accent: #b9c2cc;
  --bg: #131313; --text: #f1f1ef; --text-soft: #a3a6aa; --line: rgba(241,241,239,.16);
  background: #131313; color: #f1f1ef;
}

/* ---------- Présentations des cinq univers : une seule rangée fixe (30/09), chaque photo une seule fois ---------- */
.pres { padding: var(--space-s) var(--gutter) var(--space-m); }
.bd-rang { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.bd-cadre { flex: none; display: block; height: clamp(120px, 15vw, 210px); aspect-ratio: var(--r); border-radius: 18px; overflow: hidden; }
.bd-cadre img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bd-cadre:hover img { transform: scale(1.06); }


/* Pilule flottante : se cache en descendant, revient en remontant */
html[data-header="pilule"] .site-header {
  transition: background .3s, padding .3s, color .3s, transform .35s var(--ease), opacity .35s var(--ease);
}
html[data-header="pilule"] .site-header.cachee {
  transform: translateY(-140%); opacity: 0; pointer-events: none;
}

/* ---------- Page retouche photo ---------- */
.retouche { max-width: 760px; padding-top: 0; }
.retouche h2 { font: 400 26px/1.2 var(--serif); margin: 40px 0 12px; }
.retouche ul { padding-left: 1.1em; }
.retouche li { margin-bottom: 8px; }
.retouche details { border-top: 1px solid var(--line); padding: 14px 0; }
.retouche details:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.retouche summary { cursor: pointer; font-weight: 500; }
.retouche details p { margin: 10px 0 0; color: var(--text-soft); }

/* ---------- Formules mariage ---------- */
.formules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1500px; margin: 0 auto; }
.formule { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.formule h2 { font: var(--display-weight) clamp(30px, 3vw, 40px)/1.1 var(--serif); letter-spacing: -.02em; margin: 0; }
.formule-duree { font: 600 12px/1.4 var(--sub); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0; }
.formule ul { list-style: none; padding: 0; margin: 8px 0 20px; }
.formule li { margin-bottom: 4px; }
.formule .prix { font: var(--display-weight) 44px/1.1 var(--serif); margin: auto 0 0; }
.formule .prix small { display: block; margin-top: 6px; font: 400 14px/1.4 var(--sans); color: var(--text-soft); }
.formules-notes { max-width: 640px; margin: 48px auto 0; text-align: center; }
.formules-notes p { color: var(--text-soft); }
.formules-notes .btn { margin-top: 12px; }
.formule-photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(var(--radius) - 6px); margin-bottom: 12px; }
.formule-photo img { width: 100%; height: 100%; object-fit: cover; }
.formule-accroche { margin: 0; padding: 0 14px; color: var(--text-soft); font-style: italic; }
.formule ul, .formule .prix { padding: 0 14px; }

/* Menu téléphone ouvert (en-tête « pilule ») : fond beige, donc logo et liens sombres.
   Sans cela, les liens clairs de la pilule d'accueil devenaient invisibles sur le fond beige. */
@media (max-width: 900px) {
  html[data-header="pilule"] body.menu-open .site-header,
  html[data-header="pilule"] body.menu-open .site-header.solid {
    background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-header="pilule"] body.menu-open .site-header .brand,
  html[data-header="pilule"] body.menu-open .site-header .logo,
  html[data-header="pilule"] body.menu-open .site-header .nav a:not(.btn) { color: var(--text); }
  html[data-header="pilule"] body.menu-open .site-header .nav .sub a:not(.btn) { color: var(--text-soft); }
  html[data-header="pilule"] body.menu-open .site-header .btn {
    background: var(--accent) !important; color: var(--on-accent) !important; box-shadow: none !important;
  }
}

/* Bas de page centré ; annonce de lancement masquée quand le menu téléphone est ouvert */
.footer-cols { text-align: center; justify-items: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; }
.footer-brand .logo { margin-inline: auto; }
.footer-sanstitre { padding-top: 33px; } /* aligne les liens sur ceux des colonnes qui ont un titre */
.site-footer .socials { justify-content: center; }
.footer-bottom { text-align: center; }
@media (max-width: 900px) { .footer-sanstitre { padding-top: 0; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; } }
body.menu-open .promo { display: none !important; }

/* Bouton du menu (trois traits) : lisible sur les pages claires */
html[data-header="pilule"] body:not(.home) .site-header .menu-toggle { color: var(--text); }
html[data-header="pilule"] body.home .site-header .menu-toggle { color: #f3f3f1; }
html[data-header="pilule"] body.menu-open .site-header .menu-toggle { color: var(--text); }
.menu-toggle { font-size: 36px; }
.menu-toggle svg { stroke-width: 2.2; }

/* Page post-production : photo à droite du texte sur grand écran */
.retouche-mise { display: block; }
.retouche-photo { margin: 0; padding: 0 var(--gutter) var(--space-m); }
.retouche-photo img { width: 100%; max-height: 720px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 1000px) {
  .retouche-mise { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 520px); justify-content: space-between; align-items: start; padding-right: var(--gutter); }
  .retouche-mise .retouche { max-width: none; }
  .retouche-photo { position: sticky; top: 120px; padding: 0; margin-top: 0; }
}