/* Design system Agence Lily : voir DESIGN.md */
/* Palette et tokens : DA inspirée de « Rosella » (voir DESIGN.md) */
:root {
  --white: #ffffff;
  --bg: #f8f6f2;          /* ivoire : fond principal */
  --surface: #f0ebe4;     /* sable : sections alternées, cartes */
  --line: #e2d9cf;        /* filets */
  --ink: #2a2420;         /* brun très foncé : texte */
  --muted: #6f655e;       /* texte secondaire : 5,3 sur ivoire, 4,8 sur sable (WCAG AA) */
  --black: #2a2420;       /* alias historique : jamais de noir pur */
  --accent: #7a6558;      /* taupe : action principale, surtitres, footer */
  --accent-dark: #5f4d42;
  --font: "Manrope", "Helvetica Neue", system-ui, sans-serif;

  /* Échelle typographique : 7 tailles, pas une de plus (voir DESIGN.md) */
  --fs-label: 11px;
  --fs-small: 13px;
  --fs-body: 16px;
  --fs-lead: clamp(18px, 1.6vw, 21px);
  --fs-h2: clamp(32px, 4vw, 52px);
  --fs-h1: clamp(46px, 6.6vw, 96px);
  --fs-display: clamp(48px, 6vw, 88px);
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --wrap: 1200px;
  --radius: 2px;
  --pill: 2px;            /* plus de pilules : angles quasi droits partout */
  --header-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 var(--s4); }
/* Titres : grand serif éditorial en bas de casse. Les h3 restent des petites étiquettes en capitales. */
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0 0 var(--s4); line-height: 1.02; letter-spacing: -0.015em; }
h3 { font-family: var(--font); margin: 0 0 var(--s4); text-transform: uppercase; line-height: 1.3; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.06em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--s8) 0; }
.section.alt { background: var(--surface); }
@media (min-width: 900px) { .section { padding: var(--s9) 0; } }
.eyebrow, .tag { display: inline-block; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.tag { margin-bottom: var(--s2); }
.lede { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; color: var(--ink); max-width: 720px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); margin-bottom: var(--s6); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.link { font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--pill); background: var(--ink); color: var(--white); border: 1px solid var(--ink); font-family: var(--font); font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: opacity .2s; white-space: nowrap; }
.btn:hover { opacity: .8; }
/* Action principale : noir plein, plus grand. Sur fond sombre (header, pack, bandeaux), blanc plein. */
.btn.primary { background: var(--black); color: var(--white); border-color: var(--black); padding: 14px 28px; font-weight: 600; }
.btn.ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn.light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn.small { padding: 9px 18px; font-size: var(--fs-label); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: var(--black); color: var(--white); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--s5); }
.logo { font-size: var(--fs-lead); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.logo span { font-weight: 300; }
.nav { display: flex; align-items: center; gap: var(--s5); }
.nav a { text-decoration: none; font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav .btn { color: var(--black); background: var(--white); border-color: var(--white); }
.burger { display: none; }
@media (max-width: 960px) {
  .burger { display: block; }
  .burger summary { list-style: none; cursor: pointer; font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: var(--pill); }
  .burger summary::-webkit-details-marker { display: none; }
  .burger .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--s5); padding: var(--s6) 20px; background: var(--black); }
  .burger .nav a { font-size: var(--fs-small); }
  .nav.desktop { display: none; }
}

/* Hero plein cadre + bandeau d'intro */
.hero-full { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; color: var(--white); background: #2a2a28; isolation: isolate; }
.hero-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-full::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); }
.hero-full .wrap { width: 100%; padding-bottom: var(--s7); }
.hero-full .eyebrow { color: rgba(255,255,255,.8); }
.hero-full h1 { margin: 0; max-width: 900px; }
@media (max-width: 700px) {
  .hero-full { min-height: 58vh; }
  .hero-full h1 { font-size: var(--fs-h1); }
  .hero-full .wrap { padding-bottom: var(--s6); }
  /* Mobile : prix et bouton d'abord, texte ensuite */
  .intro-band { padding: var(--s6) 0; }
  .intro-aside { order: -1; }
}
.hero-full picture { position: absolute; inset: 0; z-index: -2; }
.intro-band { background: var(--surface); padding: var(--s7) 0; }
.intro-band .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s7); align-items: center; }
.intro-band .lede { margin: 0; }
.intro-aside { display: grid; gap: var(--s3); justify-items: start; font-size: var(--fs-small); color: var(--muted); }
.intro-aside .btns { margin-top: var(--s2); }
@media (max-width: 860px) { .intro-band .wrap { grid-template-columns: 1fr; gap: var(--s5); } }
.trust { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--fs-small); color: var(--muted); }
.trust strong { color: var(--ink); font-weight: 500; }
.stars { letter-spacing: 2px; color: var(--ink); }

/* Hero simple (pages sans photo) */
.hero { padding: var(--s8) 0 var(--s7); }

/* Visuels */
.ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #e9e9e5, #d9d9d3); display: flex; align-items: flex-end; }
.ph span { margin: var(--s3); padding: 4px 10px; background: var(--white); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ph img + span { display: none; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.tall { aspect-ratio: 4 / 5; }

/* Cartes */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5); }
.card { background: var(--surface); text-decoration: none; display: flex; flex-direction: column; color: var(--ink); }
.card .ph { aspect-ratio: 3 / 2; }
.card .body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: auto; padding-top: var(--s4); }
.price { font-size: var(--fs-small); font-weight: 500; letter-spacing: .04em; color: var(--ink); }
.price small { font-weight: 400; color: var(--muted); }
.card .ph img { transition: transform .6s ease; }
a.card:hover .ph img { transform: scale(1.03); }
.alt .card { background: var(--white); }

/* Carrousel horizontal */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 31%); gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s4); scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
@media (max-width: 700px) { .rail { grid-auto-columns: 82%; } }

/* Tuiles événement */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10; overflow: hidden; text-decoration: none; background: #2a2a28; isolation: isolate; }
.tile:first-child { grid-column: span 2; aspect-ratio: 21 / 9; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%); }
.tile:hover img { transform: scale(1.03); }
.tile-title { padding: 0 var(--s6) var(--s5); font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; letter-spacing: -0.01em; color: var(--white); line-height: 1; }
@media (max-width: 700px) {
  .tiles { grid-template-columns: 1fr; gap: var(--s4); }
  .tile, .tile:first-child { grid-column: auto; aspect-ratio: 16 / 10; }
  .tile-title { padding: 0 var(--s5) var(--s4); }
}

/* Galerie mosaïque */
.gallery { columns: 4 220px; column-gap: var(--s4); }
.gallery img { width: 100%; margin-bottom: var(--s4); break-inside: avoid; background: var(--surface); }

/* Bandeau citation */
.quote-band { position: relative; min-height: 520px; display: flex; align-items: center; color: var(--white); background: #2a2a28; isolation: isolate; }
.quote-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.quote-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.4); }
.quote-band p { font-family: var(--serif); font-size: var(--fs-display); font-weight: 400; line-height: 1.05; max-width: 900px; margin: 0; }
.quote-band .btn { margin-top: var(--s5); }

/* Split image + texte */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.split .card .body { padding: var(--s6); }
.feature { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); }
.feature .ph { aspect-ratio: auto; min-height: 380px; }
.feature .body { padding: var(--s7); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) { .split, .feature { grid-template-columns: 1fr; } .feature .ph { min-height: 260px; } .feature .body { padding: var(--s6) var(--s5); } }

/* Pastilles */
.pills { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pill { padding: 10px 20px; border-radius: var(--pill); background: var(--white); border: 1px solid var(--line); text-decoration: none; font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.pill:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Pages service / événement */
.price-box { display: grid; gap: 2px; }
.price-box strong { font-size: var(--fs-h2); font-weight: 400; letter-spacing: .02em; }
.price-box span { font-size: var(--fs-small); color: var(--muted); }
.two-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s7); }
@media (max-width: 860px) { .two-cols { grid-template-columns: 1fr; gap: var(--s6); } }
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.check li { padding-left: 24px; position: relative; }
.check li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 1px; background: currentColor; }
.box { background: var(--surface); padding: var(--s6); }
.alt .box { background: var(--white); }
.box h3 { margin-bottom: var(--s4); }

/* Formules */
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); }
.formule { background: var(--white); padding: var(--s5) var(--s5) var(--s6); position: relative; display: flex; flex-direction: column; }
.formule.pop { outline: 1px solid var(--ink); outline-offset: -1px; }
.formule .badge { position: absolute; top: var(--s4); right: var(--s4); z-index: 2; background: var(--black); color: var(--white); font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--pill); }
.formule .amount { font-family: var(--serif); font-size: var(--fs-display); line-height: 1; margin: var(--s2) 0 var(--s5); }
.formule-visual { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s5); }
.formule-visual .ph { aspect-ratio: 1 / 1; }

/* Options */
.options { list-style: none; padding: 0; margin: 0; }
.options li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.options li:last-child { border: 0; }
.options b { white-space: nowrap; font-weight: 500; }

/* Pack */
.pack { background: var(--black); color: var(--white); padding: var(--s7); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s6); align-items: center; }
.pack h2 { color: var(--white); }
.pack .eyebrow, .pack p { color: rgba(255,255,255,.7); }
.pack .btn, .quote-band .btn { background: var(--white); color: var(--black); border-color: var(--white); }
.pack .amount { font-family: var(--serif); font-size: var(--fs-display); }
.pack s { color: rgba(255,255,255,.5); font-size: var(--fs-lead); margin-right: 12px; }
@media (max-width: 760px) { .pack { grid-template-columns: 1fr; padding: var(--s6) var(--s5); } }

/* Recommandations */
.reco { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reco a { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center; background: var(--white); padding: var(--s5) 0; text-decoration: none; }
.reco a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.reco p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-small); }
.alt .reco a { background: var(--surface); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: var(--s5) 0; }
.faq summary { cursor: pointer; font-weight: 500; font-size: var(--fs-body); list-style: none; display: flex; justify-content: space-between; gap: var(--s4); }
.faq summary::after { content: "+"; font-size: var(--fs-lead); font-weight: 300; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: var(--s3) 0 0; color: var(--muted); }

/* Étapes */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s6); counter-reset: s; }
.step { counter-increment: s; border-top: 1px solid var(--ink); padding-top: var(--s4); }
.step::before { content: counter(s, decimal-leading-zero); display: block; font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; color: var(--muted); margin-bottom: var(--s3); }
.step p { color: var(--muted); }

/* Tableaux */
.table { width: 100%; border-collapse: collapse; background: var(--white); }
.table th, .table td { text-align: left; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.table td:last-child { white-space: nowrap; font-weight: 500; }
.table-wrap { overflow-x: auto; }

/* Encart devis */
.enquiry { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); background: var(--surface); padding: var(--s6) var(--s7); flex-wrap: wrap; }
.enquiry h2 { font-size: var(--fs-h2); margin: 0 0 var(--s2); }
.enquiry p { margin: 0; color: var(--muted); max-width: 620px; }
@media (max-width: 700px) { .enquiry { padding: var(--s6) var(--s5); } }

/* Fil d'Ariane */
.crumbs { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: var(--s5); padding-bottom: var(--s2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* Footer */
.footer { background: var(--black); color: rgba(255,255,255,.7); padding: var(--s8) 0 var(--s6); font-size: var(--fs-small); }
.footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s6); }
.footer h4 { color: var(--white); font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s4); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer .logo { color: var(--white); }
.footer .legal { border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--s7); padding-top: var(--s5); font-size: var(--fs-label); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); }
@media (max-width: 860px) { .footer .cols { grid-template-columns: 1fr 1fr; } }

/* Barre de contact mobile */
.contact-bar { display: none; }
@media (max-width: 760px) {
  .contact-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: var(--s2); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--black); }
  .cb-btn { flex: 1; text-align: center; padding: 12px 8px; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.35); color: var(--white); font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
  .cb-btn.cb-main { background: var(--white); color: var(--black); border-color: var(--white); font-weight: 600; }
  body { padding-bottom: 72px; }
}
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--white); }
@media (max-width: 760px) { .wa-float { display: none; } }

/* Simulateur */
.config { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s7); align-items: start; }
.config-summary { position: sticky; top: calc(var(--header-h) + 24px); }
.config-title { margin: var(--s7) 0 var(--s4); }
.config-title small { font-size: var(--fs-label); color: var(--muted); letter-spacing: .12em; margin-left: 8px; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); }
.config-options { margin-top: var(--s3); }
.config-item { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); background: var(--surface); cursor: pointer; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .15s; }
.config-item:has(input:checked) { outline-color: var(--ink); background: var(--white); }
.config-item input { margin-top: 4px; accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.ci-body { display: grid; gap: 2px; }
.ci-body strong { font-weight: 500; }
.ci-body span { font-size: var(--fs-small); color: var(--muted); }
.config-guests { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-small); }
.config-guests input { width: 120px; font: inherit; font-size: var(--fs-lead); font-weight: 300; padding: 10px 12px; border: 1px solid var(--line); background: var(--white); color: var(--ink); text-align: right; letter-spacing: 0; }
.config-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--ink); margin-top: var(--s2); padding-top: var(--s4); }
.config-total span { text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-label); font-weight: 500; }
.config-total strong { font-size: var(--fs-h2); font-weight: 300; }
.config-note { font-size: var(--fs-small); color: var(--muted); margin: var(--s3) 0 0; }
.config-summary .btn { width: 100%; margin-top: var(--s5); }
@media (max-width: 900px) { .config { grid-template-columns: 1fr; } .config-summary { position: static; } }

/* Avis */
.avis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5); }
.avis { margin: 0; padding: var(--s6); background: var(--surface); display: grid; gap: var(--s3); align-content: start; }
.avis blockquote { margin: 0; font-size: var(--fs-body); font-weight: 300; }
.avis figcaption { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Articles */
.article { max-width: 760px; }
.article h1 { font-size: var(--fs-h1); }
.prose { margin-top: var(--s6); font-size: var(--fs-body); line-height: 1.8; }
.prose h2 { font-size: var(--fs-h2); margin: var(--s7) 0 var(--s3); }
.prose h3 { margin: var(--s6) 0 var(--s2); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 var(--s4); }
.prose li { margin-bottom: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--s4) 0 var(--s5); font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 500; }
.prose blockquote { margin: var(--s5) 0; padding: var(--s5); background: var(--surface); }
.section:not(.alt) .formule { background: var(--surface); }

/* Carrousel mobile : une grille devient un défilement horizontal */
@media (max-width: 700px) {
  .m-rail, .formules { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3); margin-right: -20px; padding-right: 20px; }
  .m-rail > *, .formules > * { scroll-snap-align: start; }
  .formule-visual .ph { aspect-ratio: 3 / 2; }
  .steps.m-rail { grid-auto-columns: 72%; }
}
.rail-hint { display: none; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: var(--s2); }
@media (max-width: 700px) { .rail-hint { display: block; } }


/* Tuiles en 2 x 2 sur mobile (au lieu d'être empilées) */
@media (max-width: 700px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .tile, .tile:first-child { grid-column: auto; aspect-ratio: 1 / 1; }
  .tile-title { font-size: var(--fs-lead); padding: 0 var(--s3) var(--s3); }
}

/* Accueil éditorial */
.statement p { font-family: var(--serif); font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.015em; margin: 0; max-width: 1000px; }
.statement em { font-style: italic; color: var(--muted); }
.objet { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s8); align-items: end; }
.objet .ph.tall { aspect-ratio: 4 / 5; }
.objet-text p { font-size: var(--fs-lead); font-weight: 300; max-width: 380px; }
@media (max-width: 760px) { .objet { grid-template-columns: 1fr; gap: var(--s5); } }
.formules-min { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: var(--s6); border: 1px solid var(--line); }
.fm { display: grid; gap: var(--s3); padding: var(--s7) var(--s6); background: var(--white); text-decoration: none; color: var(--ink); transition: background .2s; }
.fm:hover { background: var(--surface); }
.fm.pop { background: var(--black); color: var(--white); }
.fm.pop .tag, .fm.pop .fm-line { color: rgba(255,255,255,.7); }
.fm-price { font-family: var(--serif); font-size: var(--fs-display); line-height: 1; }
.fm-line { font-size: var(--fs-small); color: var(--muted); }
.fm-note { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: var(--s5) 0 0; }
@media (max-width: 700px) { .formules-min { background: none; border: 0; } .fm { border: 1px solid var(--line); } }
/* Tuiles : la première en pleine largeur, les 3 autres sur une ligne */
@media (min-width: 701px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile:first-child { grid-column: span 3; aspect-ratio: 21 / 8; }
  .tile { aspect-ratio: 4 / 5; }
}
/* Formules en carrousel sur mobile, prix sur une ligne */
@media (max-width: 700px) {
  .formules-min { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -20px; padding-right: 20px; }
  .formules-min > * { scroll-snap-align: start; }
  .fm { padding: var(--s6) var(--s5); }
  .fm-price { font-size: var(--fs-display); white-space: nowrap; }
}

/* ---------- Harmonisation (audit UI) ---------- */
/* Lignes de titres équilibrées, pas de mot orphelin */
h1, h2, .statement p, .tile-title, .quote-band p { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Cibles tactiles : 44 px minimum pour les liens isolés */
.link, .crumbs a, .footer a { display: inline-flex; align-items: center; min-height: 44px; }
.faq summary { min-height: 44px; align-items: center; }
.footer ul { gap: 0; }

/* Fil d'Ariane posé sur la photo du hero */
.hero-full .crumbs { position: absolute; top: var(--s4); left: 0; right: 0; color: rgba(255,255,255,.75); padding: 0 20px; max-width: var(--wrap); margin: 0 auto; }
.hero-full .crumbs a:hover { color: var(--white); }

/* Footer sobre */
.footer-min { display: grid; gap: var(--s6); }
.footer-min .f-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.footer-min .f-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); list-style: none; padding: 0; margin: 0; font-size: var(--fs-small); }
.footer-min .f-links a { color: rgba(255,255,255,.75); }
.footer-min .f-links a:hover { color: var(--white); }
.footer-min .f-tagline { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.05; color: var(--white); margin: 0; max-width: 680px; }

/* Page devis : encart de contact en attendant le formulaire */
.devis-contact { display: grid; gap: var(--s4); padding: var(--s7) var(--s6); background: var(--surface); }
.devis-contact .mail { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.1; text-decoration: none; word-break: break-word; }

/* Bloc éditorial : titre à gauche, texte court à droite */
.split-lead { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s7); align-items: start; }
.split-lead p { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; margin: 0 0 var(--s4); }
.split-lead h2 { margin: 0; }
@media (max-width: 860px) { .split-lead { grid-template-columns: 1fr; gap: var(--s5); } }

/* Étapes en une ligne */
.steps-min { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); counter-reset: s; margin-top: var(--s6); }
.steps-min li { list-style: none; counter-increment: s; border-top: 1px solid var(--ink); padding-top: var(--s4); font-size: var(--fs-lead); font-weight: 300; }
.steps-min li::before { content: counter(s, decimal-leading-zero); display: block; font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; color: var(--muted); margin-bottom: var(--s3); }
.steps-min { padding: 0; margin-bottom: 0; }
@media (max-width: 760px) { .steps-min { grid-template-columns: 1fr; gap: var(--s5); } }

/* Citations (messages d'accueil) */
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: min(760px, 86%); gap: var(--s6); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: var(--s6); }
.quotes blockquote { scroll-snap-align: start; margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--fs-h2); line-height: 1.15; }
@media (max-width: 700px) { .quotes { margin-right: -20px; padding-right: 20px; } }

/* Liste en ligne (zone, idées) */
.inline-list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); list-style: none; padding: 0; margin: 0; font-size: var(--fs-lead); font-weight: 300; }
.inline-list li { display: inline-flex; align-items: center; gap: var(--s2); }
.inline-list li::before { content: ""; width: 12px; height: 1px; background: var(--muted); }


/* =====================================================================
   DA « Rosella » : couche de composants (prioritaire sur ce qui précède)
   ===================================================================== */
/* Surtitres taupe, centrés au-dessus des titres de section */
.eyebrow, .tag { color: var(--accent); letter-spacing: .22em; }
.section-title { text-align: center; max-width: 760px; margin: 0 auto var(--s7); }
.section-title .eyebrow { display: block; margin-bottom: var(--s3); }
.section-title p { color: var(--muted); font-size: var(--fs-small); max-width: 520px; margin: var(--s3) auto 0; }
.section.alt { background: var(--surface); }
.card { background: var(--white); }
.alt .card, .alt .box, .alt .formule { background: var(--bg); }
.box { background: var(--white); }

/* Boutons : contour fin par défaut, bas de casse, angles quasi droits */
.btn { background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius); text-transform: none; letter-spacing: .01em; font-size: var(--fs-small); font-weight: 500; padding: 11px 22px; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--ink); color: var(--white); opacity: 1; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--white); padding: 12px 24px; font-weight: 500; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn.light, .pack .btn, .quote-band .btn, .hero-full .btn { background: transparent; color: var(--white); border-color: rgba(255,255,255,.85); }
.btn.light:hover, .pack .btn:hover, .quote-band .btn:hover, .hero-full .btn:hover { background: var(--white); color: var(--ink); }
.link { text-transform: none; letter-spacing: .01em; font-size: var(--fs-small); }

/* En-tête : liens à gauche, logo centré, action à droite */
.header { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.header-grid { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); }
.nav-left { display: flex; gap: var(--s5); }
.nav-left a { text-decoration: none; font-size: var(--fs-small); color: var(--ink); }
.nav-left a:hover, .nav-left a[aria-current="page"] { color: var(--accent); }
.header-right { display: flex; justify-content: flex-end; align-items: center; gap: var(--s3); }
.logo { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--serif); font-style: italic; font-size: 28px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--ink); line-height: 1; }
.logo svg { width: 22px; height: 22px; }
.logo span { font-weight: 400; }
.burger summary { border-color: var(--line); color: var(--ink); text-transform: none; letter-spacing: .01em; font-size: var(--fs-small); border-radius: var(--radius); }
.burger .nav { background: var(--bg); border-bottom: 1px solid var(--line); }
.burger .nav a { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--fs-body); }
.burger .nav .btn { color: var(--white); }
@media (max-width: 960px) {
  .header-grid { grid-template-columns: auto 1fr; }
  .nav-left, .header-right .btn { display: none; }
  .header-grid .logo { justify-self: start; }
}

/* Hero encadré : photo en retrait, titre en capitales en haut, action et légende en bas */
.hero-full { width: calc(100% - 40px); max-width: 1320px; margin: 20px auto 0; min-height: min(80vh, 760px); align-items: stretch; }
.hero-full::after { background: linear-gradient(to bottom, rgba(30,22,18,.42), rgba(30,22,18,0) 42%, rgba(30,22,18,0) 58%, rgba(30,22,18,.5)); }
.hero-inner { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s8) var(--s7) var(--s7); gap: var(--s7); }
.hero-full h1 { text-transform: uppercase; letter-spacing: .005em; line-height: .96; max-width: 760px; }
.hero-full .eyebrow { color: rgba(255,255,255,.85); }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s6); flex-wrap: wrap; }
.hero-caption { max-width: 340px; margin: 0; color: rgba(255,255,255,.92); font-size: var(--fs-small); line-height: 1.5; text-align: right; }
.hero-aside .price-box strong, .hero-aside .price-box span { color: var(--white); }
.hero-aside .btns { margin-top: var(--s3); }
.hero-full .crumbs { top: var(--s4); padding: 0 var(--s7); }
@media (max-width: 700px) {
  .hero-full { width: calc(100% - 24px); margin-top: 12px; min-height: 78vh; }
  .hero-inner { padding: var(--s8) var(--s5) var(--s5); }
  .hero-caption { text-align: left; }
  .hero-full .crumbs { padding: 0 var(--s5); }
}

/* Intro centrée : icône, paragraphe en deux tons, bouton contour */
.intro-center { text-align: center; max-width: 860px; margin: 0 auto; }
.intro-center svg { width: 40px; height: 40px; color: var(--ink); margin: 0 auto var(--s5); display: block; }
.intro-center p { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); margin: 0; }
.intro-center p span { color: var(--muted); }
.intro-center .btns { justify-content: center; }

/* Trio décalé : trois colonnes, celle du milieu descend et met le titre au-dessus */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); align-items: start; }
.trio-item { display: flex; flex-direction: column; gap: var(--s4); }
.trio-item .ph { aspect-ratio: 4 / 5; }
.trio-item:nth-child(2) { flex-direction: column-reverse; margin-top: var(--s8); }
.trio-item:nth-child(2) .ph { aspect-ratio: 3 / 4; }
.trio-item h3 { margin: 0 0 var(--s2); font-size: var(--fs-small); letter-spacing: .04em; text-transform: none; font-weight: 600; }
.trio-item p { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: 320px; }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; gap: var(--s7); } .trio-item:nth-child(2) { margin-top: 0; flex-direction: column; } }

/* Offres en zigzag : photo d'un côté, texte de l'autre */
.zigzag { display: grid; gap: var(--s8); }
.zz { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.zz:nth-child(even) .zz-media { order: 2; }
.zz-media .ph { aspect-ratio: 4 / 5; }
.zz-text h3 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; text-transform: none; letter-spacing: -0.01em; line-height: 1.05; margin: 0 0 var(--s4); }
.zz-text > p { color: var(--muted); font-size: var(--fs-small); max-width: 380px; }
.zz-text .check { font-size: var(--fs-small); margin: var(--s5) 0; }
.zz-from { display: block; font-size: var(--fs-label); color: var(--muted); letter-spacing: .04em; margin-top: var(--s5); }
.zz-price { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1; }
.zz-badge { display: inline-block; font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); }
@media (max-width: 760px) { .zz { grid-template-columns: 1fr; gap: var(--s5); } .zz:nth-child(even) .zz-media { order: 0; } }

/* Puces rondes */
.check li { padding-left: 26px; }
.check li::before { top: 6px; width: 14px; height: 14px; border: 1px solid var(--accent); border-radius: 50%; background: transparent; }
.check li::after { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 3px; border-left: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: rotate(-45deg); }
.pack .check li::before, .feature-dark .check li::before { border-color: var(--white); }

/* Bandeau témoignage : photo pleine largeur, titre à gauche, carte en bas à droite */
.testimonial { position: relative; min-height: 560px; display: flex; color: var(--white); background: #3a302a; isolation: isolate; }
.testimonial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.testimonial::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(30,22,18,.55), rgba(30,22,18,.15)); }
.testimonial .wrap { width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: var(--s8); padding-bottom: var(--s7); gap: var(--s7); }
.testimonial .eyebrow { color: rgba(255,255,255,.85); }
.testimonial h2 { color: var(--white); max-width: 420px; }
.testimonial-card { align-self: flex-end; max-width: 380px; padding: var(--s5) var(--s6); background: rgba(30,22,18,.55); backdrop-filter: blur(6px); font-size: var(--fs-small); line-height: 1.6; }
.testimonial-card p { margin: 0 0 var(--s3); }
.testimonial-card span { color: rgba(255,255,255,.7); }

/* Galerie mosaïque avec légendes */
.masonry { columns: 3 260px; column-gap: var(--s4); }
.masonry a { position: relative; display: block; margin-bottom: var(--s4); break-inside: avoid; overflow: hidden; background: var(--surface); text-decoration: none; }
.masonry .ph { aspect-ratio: 4 / 5; }
.masonry a:nth-child(3n+2) .ph { aspect-ratio: 1 / 1; }
.masonry a:nth-child(4n) .ph { aspect-ratio: 3 / 4; }
.masonry .m-cap { position: absolute; left: var(--s4); bottom: var(--s4); color: var(--white); font-family: var(--serif); font-size: var(--fs-lead); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.masonry img { transition: transform .6s ease; }
.masonry a:hover img { transform: scale(1.03); }

/* FAQ centrée, étroite, chevrons */
.faq-center { max-width: 760px; margin: 0 auto; }
.faq summary { font-size: var(--fs-small); font-weight: 500; }
.faq summary::after { content: ""; width: 8px; height: 8px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); flex: none; margin-top: 4px; transition: transform .2s; }
.faq details[open] summary::after { content: ""; transform: rotate(-135deg); }
.faq p { font-size: var(--fs-small); }

/* Encart devis et footer taupe */
.enquiry { background: var(--surface); }
.footer { background: var(--accent); color: rgba(255,255,255,.82); }
.footer .logo { color: var(--white); }
.footer-min .f-links a { color: rgba(255,255,255,.82); }
.footer .legal { border-top-color: rgba(255,255,255,.25); }

/* Barre mobile */
@media (max-width: 760px) {
  .contact-bar { background: var(--bg); border-top: 1px solid var(--line); }
  .cb-btn { color: var(--ink); border-color: var(--line); text-transform: none; letter-spacing: .01em; font-size: var(--fs-small); border-radius: var(--radius); }
  .cb-btn.cb-main { background: var(--accent); color: var(--white); border-color: var(--accent); }
}
.wa-float { background: var(--accent); }

/* Formules compactes : couleurs de la DA */
.fm.pop { background: var(--accent); }
.formule .badge { background: var(--accent); color: var(--white); }
.statement { text-align: center; }
.statement p { margin: 0 auto; }
/* Galerie : 2 colonnes (4 occasions), décalage vertical façon mosaïque */
.masonry { columns: 2 300px; }
.masonry a:nth-child(2) { margin-top: var(--s8); }
@media (max-width: 700px) { .masonry a:nth-child(2) { margin-top: 0; } }
/* Mobile : formats paysage pour raccourcir la page */
@media (max-width: 700px) {
  .trio-item .ph, .trio-item:nth-child(2) .ph, .zz-media .ph { aspect-ratio: 3 / 2; }
  .zigzag { gap: var(--s7); }
  .testimonial { min-height: 460px; }
}
@media (max-width: 700px) {
  .masonry { columns: 2; column-gap: var(--s3); }
  .masonry a { margin-bottom: var(--s3); }
  .masonry .ph, .masonry a:nth-child(3n+2) .ph, .masonry a:nth-child(4n) .ph { aspect-ratio: 3 / 4; }
  .masonry a:nth-child(2) { margin-top: var(--s6); }
  .masonry .m-cap { font-size: var(--fs-body); left: var(--s3); bottom: var(--s3); }
}
/* Lisibilité du titre sur photo chargée */
.hero-full::after { background: linear-gradient(to bottom, rgba(30,22,18,.62), rgba(30,22,18,.18) 45%, rgba(30,22,18,.05) 60%, rgba(30,22,18,.55)); }

/* ---------- Audit UX/UI ---------- */
/* Navigation au clavier : contour taupe visible, jamais au clic souris */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-full :focus-visible, .testimonial :focus-visible, .footer :focus-visible { outline-color: var(--white); }
.config-item:has(input:focus-visible) { outline: 2px solid var(--accent); }
/* Footer : liens en blanc plein (contraste 5,5 sur taupe) */
.footer, .footer-min .f-links a { color: var(--white); }

/* Pages sans photo (tarifs, devis, simulateur) : en-tête centré façon Rosella */
.page-head { text-align: center; padding: var(--s7) 0 var(--s6); }
.page-head h1 { max-width: 860px; margin: 0 auto var(--s4); }
.page-head .lede { margin: 0 auto; color: var(--muted); font-size: var(--fs-body); }
.page-head .btns { justify-content: center; }
@media (max-width: 700px) { .page-head { padding: var(--s5) 0; } }
.crumbs + .page-head { padding-top: var(--s5); }

/* Tableaux : filets fins, pas de fond blanc en bloc */
.table { background: transparent; }
.table th { color: var(--accent); }
.table td:last-child { font-family: var(--serif); font-size: var(--fs-lead); font-weight: 400; }
.table a { text-decoration: none; }
.table a:hover strong { color: var(--accent); }

/* Formules en cartes (tarifs, pages service) : badge et contour taupe */
.formule { border: 1px solid var(--line); }
.formule.pop { outline: 1px solid var(--accent); }
.formule h3 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; text-transform: none; letter-spacing: -0.01em; margin: 0; }
.formule .amount { color: var(--ink); }
.formule .check { font-size: var(--fs-small); }

/* Simulateur */
.config-item { border: 1px solid var(--line); background: var(--white); outline-color: transparent; }
.config-item:has(input:checked) { outline: 1px solid var(--accent); border-color: var(--accent); }
.config-item input { accent-color: var(--accent); }
.config-total strong { font-family: var(--serif); font-weight: 400; }
.config-summary .box { border: 1px solid var(--line); }
/* Mobile : total et bouton toujours visibles en bas d'écran */
.config-sticky { display: none; }
@media (max-width: 900px) {
  .config-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .config-sticky span { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: block; }
  .config-sticky strong { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1; }
  body:has(.config-sticky) { padding-bottom: 76px; }
}

/* Devis : adresse e-mail juste sous le titre */
.devis-contact { border: 1px solid var(--line); background: var(--white); }
/* Surtitre porté par un h2 (hiérarchie des titres sans changer le visuel) */
h2.eyebrow { font-family: var(--font); font-size: var(--fs-label); line-height: 1.65; letter-spacing: .22em; margin: 0; }
.config-title small { font-family: var(--font); text-transform: uppercase; }

/* Formulaire de devis */
.devis-form { display: grid; gap: var(--s5); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 600px) { .f-row { grid-template-columns: 1fr; } }
.f-field { display: grid; gap: var(--s2); }
.f-field > span { font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.f-field small { font-size: var(--fs-label); letter-spacing: .06em; text-transform: none; color: var(--muted); font-weight: 400; margin-left: var(--s1); }
.f-field input, .f-field select, .f-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); -webkit-appearance: none; appearance: none; }
.f-field textarea { resize: vertical; min-height: 96px; }
.f-field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.f-field input::placeholder, .f-field textarea::placeholder { color: var(--muted); }
.f-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-submit { justify-self: start; min-height: 48px; padding: 14px 32px; font-size: var(--fs-body); }
.f-submit:disabled { opacity: .6; cursor: wait; }
@media (max-width: 600px) { .f-submit { justify-self: stretch; } }
.f-note { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.f-note a { color: var(--ink); }
.f-error { margin: 0; padding: var(--s4) var(--s5); background: var(--white); border: 1px solid var(--accent); font-size: var(--fs-small); }
.f-error a { color: var(--ink); }
.devis-form .box { padding: var(--s4) var(--s5); border: 1px solid var(--line); }

/* Témoignage vocal (bandeau de l'accueil) */
.voice { display: flex; align-items: center; gap: var(--s4); min-width: 280px; }
.voice-play { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: transparent; color: var(--white); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.voice-play:hover, .is-playing .voice-play { background: var(--white); color: var(--ink); }
.voice-play svg { width: 20px; height: 20px; fill: currentColor; }
.voice-play .i-pause, .is-playing .voice-play .i-play { display: none; }
.is-playing .voice-play .i-pause { display: inline; }
.voice-body { flex: 1; display: grid; gap: var(--s2); }
.voice-name { font-family: var(--serif); font-size: var(--fs-lead); color: var(--white); line-height: 1.2; }
.voice-bar { position: relative; height: 2px; background: rgba(255,255,255,.3); cursor: pointer; }
.voice-bar::before { content: ""; position: absolute; inset: -10px 0; }
.voice-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--white); }
.voice-time { font-size: var(--fs-label); letter-spacing: .08em; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .testimonial-card { align-self: stretch; max-width: none; } .voice { min-width: 0; } }

/* Logo LILY (SVG) */
.logo img { height: 22px; width: auto; display: block; }
@media (min-width: 961px) { .logo img { height: 26px; } }
.f-brand { display: inline-flex; align-items: center; gap: var(--s3); }
.f-brand img { height: 12px; width: auto; }

/* Footer XL : contact à gauche, 3 colonnes, filet + bouton, logo géant coupé en bas */
.footer-xl { background: var(--ink); color: rgba(255,255,255,.7); padding: var(--s8) 0 0; overflow: hidden; }
.footer-xl a { color: var(--white); }
.footer-xl a:hover { color: rgba(255,255,255,.7); }
.fx-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s7); }
.fx-tagline { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.02; color: var(--white); margin: 0 0 var(--s6); }
.fx-coords { list-style: none; padding: 0; margin: 0; font-size: var(--fs-body); }
.fx-coords li span { display: inline-flex; min-height: 44px; align-items: center; }
.fx-social { display: flex; gap: var(--s3); margin-top: var(--s5); }
.fx-social a { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; display: grid; place-items: center; transition: background .2s, color .2s; }
.fx-social a:hover { background: var(--white); color: var(--ink); }
.fx-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.fx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.fx-h { font-family: var(--font); font-size: var(--fs-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0 0 var(--s3); line-height: 1.4; }
.fx-cols ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-small); }
.fx-line { position: relative; display: flex; justify-content: flex-end; align-items: center; margin-top: var(--s8); }
.fx-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.3); }
.fx-line .btn { position: relative; background: var(--white); color: var(--ink); border-color: var(--white); }
.fx-line .btn:hover { background: var(--bg); }
.fx-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5); padding-top: var(--s5); font-size: var(--fs-small); }
.fx-bottom p { margin: 0; max-width: 420px; line-height: 1.6; }
.fx-bottom a { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-label); }
.fx-giant { margin: var(--s7) auto 0; padding: 0 20px; max-width: var(--wrap); aspect-ratio: 587 / 190; overflow: hidden; }
.fx-giant img { width: 100%; height: auto; opacity: .14; }
@media (max-width: 860px) {
  .fx-top { grid-template-columns: 1fr; gap: var(--s7); }
  .fx-cols { grid-template-columns: 1fr 1fr; }
  .fx-bottom { flex-direction: column; gap: 0; }
}

/* Bandeau de consentement */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 70; max-width: 380px; padding: var(--s5); background: var(--white); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(42,36,32,.12); font-size: var(--fs-small); }
.consent p { margin: 0 0 var(--s4); }
.consent-btns { display: flex; gap: var(--s3); }
.consent-btns .btn { flex: 1; }
@media (max-width: 760px) { .consent { left: 12px; right: 12px; bottom: 84px; max-width: none; } }
.fx-legal { display: inline-flex; gap: var(--s5); }

/* Avis Google */
.avis-section .stars { color: var(--accent); letter-spacing: 2px; margin-right: var(--s1); }
.avis-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.avis { background: var(--white); border: 1px solid var(--line); }
.avis blockquote { font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.35; font-weight: 400; }
.avis .stars { color: var(--accent); font-size: var(--fs-small); }
.card-title { font-family: var(--font); font-size: var(--fs-body); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; margin: 0; }