/* sam.css — enhancement layer loaded after the Tailwind build (styles-*.css).
   Scope: motion, header, cards, before/after, 3-step lead form, mobile dock, hero. */

:root {
  --sam-ease: cubic-bezier(.2, .7, .2, 1);
  --sam-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sam-shadow-1: 0 1px 2px rgba(36, 31, 23, .06), 0 10px 24px -14px rgba(36, 31, 23, .22);
  --sam-shadow-2: 0 2px 6px rgba(36, 31, 23, .08), 0 28px 56px -24px rgba(36, 31, 23, .32);
  --sam-focus: 0 0 0 3px rgba(167, 133, 101, .35);
  --sam-header-h: 72px;
}

html { scroll-padding-top: calc(var(--sam-header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Header ---------- */
header.sticky { transition: box-shadow .25s var(--sam-ease); }
header.sticky.is-scrolled { box-shadow: 0 1px 0 var(--color-line), 0 12px 32px -20px rgba(36, 31, 23, .35); }
header.sticky nav a, header.sticky .cta-call, header.sticky .cta-primary { white-space: nowrap; }
header.sticky nav { gap: 1.25rem; }
header.sticky nav a { position: relative; text-decoration: none; }
header.sticky nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--color-brass); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--sam-ease);
}
header.sticky nav a:hover::after, header.sticky nav a:focus-visible::after { transform: scaleX(1); }
header.sticky nav a:hover { text-decoration: none; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  header.sticky nav { gap: .9rem; }
  header.sticky nav a { font-size: .875rem; }
  header.sticky .hdr-num { display: none; }
  header.sticky .cta-call { padding-inline: .9rem; }
}

/* ---------- Buttons ---------- */
.cta-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
  transition: transform .18s var(--sam-ease), box-shadow .18s var(--sam-ease), background-color .18s;
  cursor: pointer;
}
@media (hover: hover) {
  .cta-primary:hover { transform: translateY(-1px); box-shadow: inset 0 -3px #00000047, 0 10px 22px -12px rgba(36, 31, 23, .55); }
}
.cta-primary:active { transform: translateY(1px); }
.cta-call, .cta-link, summary { cursor: pointer; }
.cta-primary:focus-visible, .cta-call:focus-visible, .cta-link:focus-visible, .sf-back:focus-visible, .sf-edit:focus-visible {
  outline: 2px solid var(--color-brass); outline-offset: 3px;
}

/* ---------- Scroll reveal (JS adds .in; html.js set inline in <head>) ---------- */
html.js [data-reveal]:not(.in) { opacity: 0; }
html.js [data-reveal].in { animation: sam-reveal .7s var(--sam-ease-out) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes sam-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.in) { opacity: 1; }
  html.js [data-reveal].in { animation: none; }
}

/* ---------- Hero ---------- */
.sam-hero {
  background: radial-gradient(55% 60% at 85% 0%, rgba(194, 160, 122, .16), transparent 70%), var(--color-paper);
}
@media (max-width: 767.98px) {
  h1.text-4xl { font-size: clamp(1.95rem, 8vw, 2.25rem); }
  figure > div.select-none.overflow-hidden { max-height: 60vh; }
}

/* Hero = landing block: pitch + proof on the left, quote form on the right (form right under the title on phones) */
.sam-hero-grid { display: grid; gap: 1.25rem; padding-block: 1.25rem 2.25rem; grid-template-areas: "intro" "form" "more"; }
.sam-hero-intro { grid-area: intro; }
.sam-hero-form { grid-area: form; }
.sam-hero-more { grid-area: more; }
@media (min-width: 1024px) {
  .sam-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
    grid-template-areas: "intro form" "more form"; gap: 0 3.5rem; align-items: start; padding-block: 2.5rem 3rem;
  }
}
.sam-hero-intro h1.text-4xl { font-size: clamp(1.8rem, 7.2vw, 2.25rem); line-height: 1.08; }
@media (min-width: 1024px) { .sam-hero-intro h1.text-4xl { font-size: clamp(2.6rem, 3.5vw, 3.4rem); } }
.sam-proof { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .85rem 0 0; padding: 0; list-style: none; font-size: .85rem; font-weight: 600; color: var(--color-ink-2); }
.sam-proof li { display: flex; align-items: center; gap: .3rem; }
.sam-proof svg { width: 1rem; height: 1rem; color: var(--color-brass); flex: none; }
@media (min-width: 1024px) { .sam-proof { display: none; } } /* desktop shows the full guarantees grid instead */
.sam-hero-more > p:first-child { margin-top: 0; font-size: 1rem; }
@media (min-width: 1024px) { .sam-hero-more > p:first-child { margin-top: 1.25rem; font-size: 1.125rem; } }
.sam-hero-guar { display: grid; gap: 1rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 480px) { .sam-hero-guar { grid-template-columns: 1fr 1fr; } }
.sam-hero-call { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.75rem; font-size: .875rem; color: var(--color-ink-3); }
.cta-call svg { width: 1.05rem; height: 1.05rem; flex: none; }
.sam-hero-call .cta-call { gap: .5rem; }

/* form card inside the hero: compact, one row per project choice */
.sam-hero-form { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-sam); padding: 1.25rem; }
@media (min-width: 1024px) { .sam-hero-form { padding: 1.75rem; position: sticky; top: calc(var(--sam-header-h) + 1rem); } }
.sam-hero-form form.sf { gap: .85rem; }
.sam-hero-form .sf-title { font-size: 1.45rem; }
.sam-hero-form .sf-step > legend { font-size: 1.15rem; margin-bottom: .75rem; }
.sam-hero-form .sf-step .sf-hint { margin: -.35rem 0 .75rem; }
.sam-hero-form .sf-opts { gap: .5rem; }
.sam-hero-form .sf-opt > span { flex-direction: row; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .55rem .75rem; font-size: .875rem; }
.sam-hero-form .sf-opt svg { width: 1.25rem; height: 1.25rem; }
.sam-hero-form .sf-nav { margin-top: .9rem; }
@media (max-width: 639.98px), (min-width: 1024px) {
  .sam-hero-form .sf-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sam-hero-form .sf-opt:last-child { grid-column: 1 / -1; } /* 9 choices in 2 columns: last one full width */
}

/* Header: tap-to-call beside Menu on phones/tablets */
.sam-hdr-mobile { display: flex; align-items: center; gap: .5rem; }
.sam-hdr-mobile > a.cta-call { min-height: 2.5rem; padding-inline: .9rem; gap: .4rem; font-size: .875rem; }
@media (min-width: 1024px) { .sam-hdr-mobile { display: none; } }
@media (max-width: 479.98px) {
  header.sticky a > img.h-9 { height: 1.85rem; }
  .sam-hdr-mobile > a.cta-call { width: 2.5rem; padding: 0; justify-content: center; }
  .sam-hdr-mobile > a.cta-call span { display: none; } /* icon-only; aria-label carries the text */
  .sam-hero-form { padding: 1rem; }
  .sam-hero-form .sf-title { font-size: 1.3rem; }
  .sam-hero-form .sf-sub { display: none; } /* same-day callback is already in the proof line above */
  .sam-hero-form .sf-opt > span { padding: .5rem .6rem; gap: .5rem; font-size: .84rem; }
}

/* ---------- Section headings: small brass rule ---------- */
main h2.text-3xl::before { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--color-brass); margin-bottom: .9rem; }

/* ---------- Cards ---------- */
li.group.rounded-sam { transition: transform .25s var(--sam-ease), box-shadow .25s var(--sam-ease); }
li.group.rounded-sam > a { overflow: hidden; }
li.group.rounded-sam img { transition: transform .8s var(--sam-ease-out); }
@media (hover: hover) {
  li.group.rounded-sam:hover { transform: translateY(-3px); box-shadow: var(--sam-shadow-2); }
  li.group.rounded-sam:hover img { transform: scale(1.04); }
}
li.border-l-2.border-brass { transition: border-color .2s; }

/* ---------- Before / after ---------- */
.ba-knob { background: var(--color-brass); color: var(--color-paper); box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 3px rgba(251, 250, 247, .92); }
.ba-handle { background: var(--color-paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .28); }
.ba-range:focus-visible + * , figure > div:has(.ba-range:focus-visible) { outline: 2px solid var(--color-brass); outline-offset: 3px; }

/* ---------- FAQ ---------- */
details.faq summary { list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover > span:first-child { text-decoration: underline; text-decoration-color: var(--color-brass); text-underline-offset: 4px; }
details.faq > p { animation: sam-fade .3s var(--sam-ease-out); }
@keyframes sam-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Lead form band ---------- */
.sf-card { box-shadow: var(--sam-shadow-2); } /* no scroll-margin here: html scroll-padding-top already clears the sticky header */
.on-dark .sf-card { border: 1px solid rgba(255, 255, 255, .08); }
@media (max-width: 1023.98px) { #soumission .sf-card { order: -1; } } /* phones/tablets: form first, band text below */
.sam-trust { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .65rem; }
.sam-trust li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.4; color: var(--color-ink-2); }
.on-dark .sam-trust li { color: rgba(251, 250, 247, .85); }
.sam-trust svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .15rem; color: var(--color-brass); }
.on-dark .sam-trust svg { color: var(--color-brass-2); }

/* ---------- 3-step form ---------- */
form.sf { display: grid; gap: 1rem; position: relative; }
.sf-head { display: grid; gap: .25rem; }
.sf-title { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.sf-sub { font-size: .92rem; color: var(--color-ink-2); margin: 0; }
.sf-progress { display: none; }
html.js .sf-progress { display: block; }
.sf-progress-label { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-3); }
.sf-bar { height: 4px; margin-top: .5rem; border-radius: 999px; background: var(--color-paper-3); overflow: hidden; }
.sf-bar i { display: block; height: 100%; width: 33.333%; border-radius: inherit; background: var(--color-brass); transition: width .45s var(--sam-ease); }
.sf-alert { margin: 0; padding: .75rem 1rem; border: 1px solid var(--color-err); border-radius: var(--radius-sam); background: #fff6f4; color: var(--color-err); font-size: .9rem; font-weight: 600; }
.sf-alert[hidden] { display: none; }
.sf-chosen { display: none; }
html.js .sf-chosen:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; font-size: .875rem; color: var(--color-ink-2); }
.sf-chosen b { color: var(--color-ink); }
.sf-edit, .sf-back {
  background: none; border: 0; padding: .25rem .1rem; font: inherit; font-size: .875rem; font-weight: 600; color: var(--color-ink-2);
  text-decoration: underline; text-decoration-color: var(--color-brass); text-underline-offset: 4px; cursor: pointer; min-height: 2.75rem;
}
.sf-edit:hover, .sf-back:hover { color: var(--color-ink); text-decoration-thickness: 2px; }

.sf-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.sf-step[hidden] { display: none; }
html.js form.sf:not([data-step]) .sf-step + .sf-step { display: none; } /* before JS init: show step 1 only */
.sf-step > legend { padding: 0; margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; font-weight: 600; }
.sf-step .sf-hint { margin: -.5rem 0 1rem; font-size: .9rem; color: var(--color-ink-3); }
html.js .sf-step:not([hidden]) { animation: sf-in .35s var(--sam-ease-out) both; }
html.js .sf-step.is-back:not([hidden]) { animation-name: sf-in-back; }
@keyframes sf-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes sf-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .sf-step:not([hidden]) { animation: none; } .sf-bar i { transition: none; } }

.sf-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 640px) { .sf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-opt { position: relative; display: block; cursor: pointer; }
.sf-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sf-opt > span {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-height: 5.25rem; padding: .85rem .9rem;
  border: 1.5px solid var(--color-line-2); border-radius: var(--radius-sam); background: var(--color-paper);
  font-size: .9rem; font-weight: 600; line-height: 1.25; color: var(--color-ink);
  transition: border-color .18s, background-color .18s, transform .18s var(--sam-ease), box-shadow .18s;
}
.sf-opt svg { width: 1.5rem; height: 1.5rem; color: var(--color-brass); flex: none; }
@media (hover: hover) { .sf-opt:hover > span { border-color: var(--color-ink); transform: translateY(-1px); box-shadow: var(--sam-shadow-1); } }
.sf-opt input:focus-visible + span { outline: 2px solid var(--color-brass); outline-offset: 2px; }
.sf-opt input:checked + span { border-color: var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-ink); }
.sf-opt input:checked + span svg { color: var(--color-ink); }

.sf-fields { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sf-fields.two { grid-template-columns: 1fr 1fr; } .sf-fields.two > .wide { grid-column: 1 / -1; } }
.sf-fields label { display: block; margin-bottom: .3rem; font-size: .875rem; font-weight: 600; }
.sf-fields label small { font-weight: 500; color: var(--color-ink-3); }
form.sf .field { min-height: 3.25rem; transition: border-color .15s, box-shadow .15s; }
form.sf .field:focus { outline: none; border-color: var(--color-brass); box-shadow: var(--sam-focus); }
form.sf textarea.field { min-height: 6rem; resize: vertical; }

.sf-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }
.sf-nav .cta-primary { min-height: 3.25rem; font-size: 1rem; flex: 1 1 auto; }
.sf-nav > span:empty { display: none; } /* step 1 placeholder: would add a stray gap before the button */
html:not(.js) .sf-nav .sf-next, html:not(.js) .sf-back { display: none; }
.sf-note { margin: .9rem 0 0; font-size: .85rem; font-weight: 600; color: var(--color-ink-2); }
.sf-legal { margin: .5rem 0 0; font-size: .75rem; color: var(--color-ink-3); }
.sf-busy { opacity: .7; pointer-events: none; }

/* ---------- Closing band: pitch + quote button + phone, photo on the right ---------- */
.sam-band-cta { margin-top: 1.75rem; }
@media (min-width: 1024px) { .sam-band > .sam-container { align-items: center; } }
.sam-band-fig figure { margin: 0; }
.sam-band-fig figure > div, .sam-band-fig figure > img { aspect-ratio: 4 / 3 !important; height: auto; box-shadow: var(--sam-shadow-2); }
.sam-band-fig figcaption { color: rgba(251, 250, 247, .6); }

/* ---------- Before / after strip right under the hero ---------- */
.sam-ba { background: var(--color-paper-2); border-bottom: 1px solid var(--color-line); padding-block: 2.5rem 3rem; }
@media (min-width: 1024px) { .sam-ba { padding-block: 3.5rem 4rem; } }
.sam-ba-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.sam-ba-head p { margin: .6rem 0 0; max-width: 56ch; color: var(--color-ink-2); }
.sam-ba-row { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .sam-ba-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.sam-ba-row figure { margin: 0; }
.sam-ba-row figure > div { aspect-ratio: 4 / 3 !important; box-shadow: var(--sam-shadow-1); }
@media (min-width: 768px) { .sam-ba-row figure > div { aspect-ratio: 1 / 1 !important; } }
.sam-ba-row figcaption > span:last-child { display: none; } /* "Projet réalisé par…" repeats the section title */
@media (max-width: 767.98px) { /* phones: title, sliders, then the button */
  .sam-ba > .sam-container { display: flex; flex-direction: column; }
  .sam-ba-head { display: contents; }
  .sam-ba-head > div { margin-bottom: 1.5rem; }
  .sam-ba-row { order: 1; }
  .sam-ba-head > .cta-primary { order: 2; margin-top: 1.75rem; width: 100%; }
}

/* ---------- Mobile dock ---------- */
.sam-dock {
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 28px -16px rgba(36, 31, 23, .35);
  transition: transform .3s var(--sam-ease);
}
.sam-dock.hide { transform: translateY(110%); }
.sam-dock .cta-primary, .sam-dock .cta-call { min-height: 3rem; font-size: .95rem; padding-inline: .75rem; white-space: nowrap; }

/* ---------- Contact page ---------- */
@media (max-width: 639.98px) { iframe[title^="Carte"], iframe[title^="Map"] { height: 14rem; } }

/* ---------- Floating WhatsApp chat bubble (514 290-2202) ---------- */
.sam-wa {
  position: fixed; right: 1rem; bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); z-index: 41;
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: #13803f; color: #fff; box-shadow: 0 10px 24px -10px rgba(10, 70, 35, .6), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .2s var(--sam-ease), bottom .3s var(--sam-ease), background-color .2s;
}
.sam-wa svg { width: 1.55rem; height: 1.55rem; }
.sam-wa:hover { background: #0f6b34; transform: scale(1.06); }
.sam-wa:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.sam-dock.hide ~ .sam-wa { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .sam-wa { right: 1.5rem; bottom: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .sam-wa { transition: none; } }
@media print { .sam-wa { display: none; } }