/* =====================================================================
   Maxime Bonnet — Webmaster freelance Nancy
   Refonte 2026 — design system
   ===================================================================== */

:root {
  /* Brand — rouge (logo #db4e4e, barre header #8a1717) */
  --blue:        #d23f3f;   /* alias conservés pour limiter les changements */
  --blue-dark:   #b02f2f;
  --blue-darker: #8a1717;
  --blue-soft:   #fbecec;

  --red:         #d23f3f;
  --red-dark:    #b02f2f;
  --red-deep:    #8a1717;
  --red-soft:    #fbecec;

  /* Ink / neutrals */
  --ink:    #1a1a1a;
  --ink-2:  #333333;
  --muted:  #6b6b6b;
  --line:   #ececec;
  --bg:     #ffffff;
  --bg-alt: #f7f5f4;
  --white:  #ffffff;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, .06), 0 2px 8px rgba(26, 26, 26, .05);
  --shadow-md: 0 6px 18px rgba(26, 26, 26, .08), 0 12px 32px rgba(26, 26, 26, .07);
  --shadow-lg: 0 18px 40px rgba(138, 23, 23, .20);
  --grad: linear-gradient(135deg, #db4e4e 0%, #8a1717 100%);

  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  --container: 1140px;
  --topbar-h:  40px;
  --header-h:  74px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink-2);
  background: var(--bg);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--blue-dark); text-decoration: none; transition: color .2s ease; }
a[data-h], [data-h] { cursor: pointer; }
a:hover { color: var(--blue-darker); }
h1, h2, h3, h4 {
  font-family: "Poppins", "Open Sans", sans-serif;
  color: var(--ink);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.22rem; }
p  { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }
strong { color: var(--ink); font-weight: 600; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.section { padding: clamp(56px, 8vw, 100px) 0; }
.section--alt { background: var(--bg-alt); }
.center { text-align: center; }
.lead { font-size: 1.12rem; color: var(--muted); }
.eyebrow {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.section-head.center .eyebrow { text-align: center; }
.section-head { max-width: 720px; margin: 0 0 clamp(38px, 5vw, 60px); }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .98rem;
  padding: 13px 24px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  line-height: 1;
}
.btn { -webkit-tap-highlight-color: transparent; }
.btn:focus { outline: none; box-shadow: none; }
.btn:active { box-shadow: none; }
.btn:focus-visible { outline: 3px solid rgba(210, 63, 63, .45); outline-offset: 2px; }
.btn--primary {
  background: var(--red);
  color: #fff;
}
.btn--primary:hover { color: #fff; background: var(--red-dark); }
.btn--ghost {
  background: #fff;
  color: var(--red);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--red); color: var(--red-dark); }
.btn--light { background: #fff; color: var(--red); }
.btn--light:hover { color: var(--red-dark); background: #fff; }
/* Bouton "fantôme" lisible sur fond foncé (ex. cta-band) */
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: #fff; color: var(--red-dark); border-color: #fff; }
.btn--lg { padding: 15px 30px; font-size: 1.05rem; }

/* ---------- Top bar (rouge) ---------- */
.topbar {
  background: var(--red-deep);
  color: #f4d9d9;
  font-size: .85rem;
}
.topbar__inner {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: flex-end; gap: 22px;
}
.topbar a { color: #fff; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.topbar a:hover { color: #fff; opacity: .85; }
.topbar a svg { opacity: .85; }
.topbar__sep { width: 1px; height: 16px; background: rgba(255,255,255,.25); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 18px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand__mark { height: 40px; width: auto; display: block; }
.brand__text { font-family: "Poppins", sans-serif; line-height: 1.1; }
.brand__name { display: block; font-weight: 700; color: var(--ink); font-size: 1.02rem; letter-spacing: -.01em; }
.brand__role { display: block; font-size: .72rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

.nav__menu { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.nav__links a { white-space: nowrap; }
.nav__links a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-2);
}
.nav__links a:hover { background: var(--blue-soft); color: var(--blue-dark); }
.nav__links a.active { color: var(--blue-dark); }
.nav__cta { margin-left: 8px; }

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after  { position: absolute; top: 6px; }
body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero plein cadre (photo en fond + overlay) ---------- */
.hero {
  position: relative;
  min-height: clamp(440px, 72vh, 640px);
  display: flex;
  align-items: center;
  /* background-image fournie en inline sur chaque page (chemin relatif à la page) */
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 55%, transparent 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
  /* padding-block uniquement : on garde le padding-inline: 22px de .container
     pour conserver les marges latérales (sinon le hero colle aux bords sur mobile) */
  padding-block: clamp(48px, 8vw, 96px);
}
.hero .eyebrow { color: #fff; }
.hero h1 { color: #fff; margin-bottom: .3em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero h1 .hl { color: #f3b4b4; }
.hero__sub {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.3rem;
  color: #fff; margin-bottom: .7em;
}
.hero p.lead { color: rgba(255,255,255,.92); margin-bottom: 1.7em; max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Poppins", sans-serif; font-weight: 600; color: #fff;
}
.hero__phone:hover { color: #fff; opacity: .9; }
.hero__phone svg { color: #fff; }
/* Hero compact (pages de contenu : mentions légales, etc.) */
.hero--compact { min-height: clamp(240px, 36vh, 340px); }

/* ---------- Pages légales / contenu texte ---------- */
.legal { max-width: 820px; }
.legal h2 { margin-top: 1.8em; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .5em; }
.legal__credit {
  margin-top: 2.4em; padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted);
}

/* ---------- About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.about__img img { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.about__img--portrait {
  background: linear-gradient(160deg, #fbecec 0%, #f3d6d6 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.about__img--portrait img {
  border-radius: 0; box-shadow: none;
  width: 86%; max-height: 460px; object-fit: contain;
}
.signature {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 6px;
}
.signature img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); }
.signature b { font-family: "Poppins", sans-serif; color: var(--ink); display: block; }
.signature span { font-size: .85rem; color: var(--muted); }

/* ---------- Services ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: #d4e6f7; }
.card__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--blue-soft); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.card__icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: .5em; }
.card p { color: var(--muted); flex: 1; }
.card__link {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
}
.card__link svg { transition: transform .2s ease; }
.card:hover .card__link svg { transform: translateX(4px); }

/* ---------- Portfolio ---------- */
.portfolio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.work {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: #0e1c2c;
  aspect-ratio: 16 / 11;
  transition: transform .3s ease, box-shadow .3s ease;
}
.work:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.work img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, opacity .3s ease;
}
.work:hover img { transform: scale(1.06); opacity: .55; }
.work__overlay {
  position: absolute; inset: 0;
  padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, rgba(8, 20, 33, .92) 0%, rgba(8, 20, 33, .35) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.work:hover .work__overlay { opacity: 1; transform: translateY(0); }
.work__overlay p { color: #eaf3fb; font-size: .9rem; line-height: 1.55; margin: 0; }
.work__visit {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .82rem;
  color: #fff; border: 1px solid rgba(255,255,255,.55);
  padding: 7px 14px; border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.work__visit:hover { background: #fff; color: var(--blue-dark); border-color: #fff; }
.work__visit svg { width: 14px; height: 14px; }
.work__tag {
  align-self: flex-start;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--blue-dark);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}

/* ---------- Content / article pages ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.feature-row + .feature-row { margin-top: clamp(40px, 6vw, 72px); }
.feature-row--rev .feature-row__media { order: 2; }
.feature-row__media img,
.feature-row__media svg { width: 100%; border-radius: var(--radius); }
.feature-row__media.plain img, .feature-row__media.plain svg { box-shadow: none; }

.prose h2 { margin-top: 0; }
.prose p { color: var(--ink-2); }

/* generic two-col text blocks */
.text-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.text-block {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.text-block:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.text-block h3 { display: flex; align-items: flex-start; gap: 12px; }
.text-block h3 .dot {
  flex: none; width: 30px; height: 30px; border-radius: 9px; margin-top: 2px;
  background: var(--blue-soft); color: var(--blue-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.text-block p { color: var(--muted); margin-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 22px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease;
}
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary {
  list-style: none; cursor: pointer;
  font-family: "Poppins", sans-serif; font-weight: 600; color: var(--ink);
  padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 1.04rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue-dark);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
}
.faq details[open] summary .chev { transform: rotate(45deg); }
.faq__body { padding: 0 0 18px; color: var(--muted); }
.faq__body p:last-child { margin-bottom: 0; }

/* chips / cities */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.chips li {
  background: var(--blue-soft); color: var(--blue-dark);
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: .9rem;
  padding: 7px 15px; border-radius: 999px;
}

/* bullet list with checks */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; }
.checklist li svg { flex: none; margin-top: 3px; color: var(--blue-dark); }
.checklist li b { color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner {
  background: var(--red-deep);
  border-radius: var(--radius-lg);
  padding: clamp(38px, 6vw, 64px);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
}
.cta-band__inner > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 50ch; margin-inline: auto; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.cta-band__phone {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.1rem;
  margin-top: 18px;
}
.cta-band__phone:hover { color: #fff; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 56px); }
.contact__info .lead { margin-bottom: 24px; }
.contact__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact__list li { display: flex; gap: 14px; align-items: center; }
.contact__list .ic {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--blue-soft); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
}
.contact__list .k { font-size: .82rem; color: var(--muted); display: block; }
.contact__list .v { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--ink); }

.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow-md); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .88rem; color: var(--ink); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; font: inherit; font-size: .98rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt);
  color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--red); background: #fff;
  box-shadow: 0 0 0 4px rgba(210, 63, 63, .14);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.field .hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form__reassure { margin: 0 0 18px; font-size: .9rem; color: var(--ink-2); }
/* Honeypot anti-spam : invisible pour les humains, piège à robots */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Message de statut après envoi */
.form__status { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: .9rem; }
.form__status--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.form__status--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
@media (max-width: 540px) { .form__row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #b9c6d4; padding: 56px 0 26px; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.1fr; gap: 36px; margin-bottom: 40px; }
.footer__brand img { width: 168px; margin-bottom: 16px; }
.footer__brand p { color: #93a3b4; max-width: 34ch; }
.site-footer h4 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__links a { color: #b9c6d4; }
.footer__links a:hover { color: #fff; }
.footer__contact { display: grid; gap: 12px; }
.footer__contact a { color: #b9c6d4; display: inline-flex; align-items: center; gap: 9px; }
.footer__contact a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: .85rem; color: #7e8fa0;
}
.footer__bottom a { color: #9fb0c2; }
.footer__bottom a:hover { color: #fff; }

/* ---------- Effet « rideau » : le footer est révélé depuis l'arrière ----------
   Le footer est fixé en bas de la fenêtre (z-index 0) et reste caché DERRIÈRE
   le contenu de la page (main, opaque, z-index 1). En arrivant en bas, le
   contenu remonte et découvre le footer, comme s'il était collé au fond du
   site. Activé uniquement quand le footer tient dans la fenêtre (classe posée
   par main.js) → dégradation propre sur mobile / footers très hauts. */
.footer-reveal main {
  position: relative;
  z-index: 1;
  background: var(--bg);
  /* espace de défilement égal à la hauteur du footer, pour pouvoir le révéler */
  margin-bottom: var(--footer-reveal-h, 0px);
  /* le contenu couvre au moins la fenêtre : pas de footer qui dépasse sur les pages courtes */
  min-height: calc(100vh - var(--topbar-h) - var(--header-h));
  /* ombre portée sous le contenu → impression de profondeur au moment du reveal */
  box-shadow: 0 26px 50px -18px rgba(15, 23, 32, .45);
}
.footer-reveal .site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
}
/* léger « lift » du contenu du footer pendant qu'il se dévoile (piloté par main.js) */
.footer-reveal .site-footer .container {
  transform: translateY(var(--footer-lift, 0px));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .footer-reveal .site-footer .container { transform: none; }
}

/* ---------- Breadcrumb (fil d'Ariane) ---------- */
.breadcrumb { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 13px 0; display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .86rem; color: var(--muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--muted); opacity: .7; }
.breadcrumb a { color: var(--red-dark); font-weight: 500; }
.breadcrumb a:hover { color: var(--red-deep); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-2); }

/* ---------- Process / étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow-sm); position: relative;
}
.step::before {
  counter-increment: step; content: counter(step);
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.05rem;
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px;
  background: var(--grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 1.1rem; margin-bottom: .4em; }
.step p { color: var(--muted); margin-bottom: 0; font-size: .95rem; }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.price-card--featured { border-color: var(--red); box-shadow: var(--shadow-md); position: relative; }
.price-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-family: "Poppins", sans-serif; font-weight: 600;
  font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}
.price-card h3 { margin-bottom: .3em; }
.price-card__price { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 2rem; color: var(--ink); line-height: 1.1; }
.price-card__price small { display: block; font-size: .82rem; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
.price-card__price .price-card__unit { font-size: 1rem; font-weight: 600; color: var(--muted); }
.price-card ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 11px; flex: 1; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.price-card li svg { flex: none; margin-top: 3px; color: var(--red); }

/* ---------- Estimateur de devis ---------- */
.estimator { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.estimator__form { display: grid; gap: 26px; }
.est-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.est-group legend, .est-group__title { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 14px; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.06rem; color: var(--ink); }
.est-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-size: .9rem; font-weight: 700; flex: none; }
.est-num--ok { background: #1f9d63; }
.est-group--ecom legend { color: var(--red-dark); }

/* Explication contextuelle sous un groupe */
.est-info { margin: 13px 0 0; padding: 13px 15px; background: var(--red-soft); border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.est-info:empty { display: none; }

/* Bloc « toujours inclus » */
.est-included { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.est-included__item { padding: 15px 16px; border: 1.5px dashed #c9d8cf; border-radius: var(--radius); background: #f3f9f5; }
.est-included__head { margin: 0 0 6px; font-family: "Poppins", sans-serif; font-weight: 700; font-size: .98rem; color: var(--ink); }
.est-included__item p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }

/* Sous-question (ex. gestion du blog) */
.est-sub { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--red); background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.est-sub legend { font-size: .95rem; margin-bottom: 11px; }
.est-sub--in { margin-top: 14px; background: #fff; }
.est-sub--in2 { margin-top: 14px; background: var(--bg-alt); }
.est-sub__note { margin: 11px 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }

.est-opts { display: grid; gap: 12px; }
.est-opt { min-width: 0; }
.est-hint { margin: -4px 0 14px; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.est-fieldlabel { display: block; margin-bottom: 8px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.est-textarea { width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: .92rem; color: var(--ink); resize: vertical; min-height: 72px; }
.est-textarea:focus { outline: none; border-color: var(--red); }

.est-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.est-cards--3 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.est-reco { display: inline-block; vertical-align: middle; margin-left: 6px; font-family: -apple-system, sans-serif; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--red); color: #fff; padding: 2px 7px; border-radius: 999px; }
.est-card { position: relative; display: block; }
.est-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.est-card__in { display: block; height: 100%; padding: 15px 16px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.est-card__in b { display: block; font-family: "Poppins", sans-serif; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.est-card__in small { display: block; font-size: .85rem; line-height: 1.35; color: var(--muted); }
.est-card input:checked + .est-card__in { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.est-card input:focus-visible + .est-card__in { outline: 2px solid var(--red); outline-offset: 2px; }

.est-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.est-pill { position: relative; display: inline-block; }
.est-pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.est-pill span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font-size: .92rem; line-height: 1.2; color: var(--ink-2); transition: all .15s ease; }
.est-pill input:checked + span { border-color: var(--red); background: var(--red); color: #fff; }
.est-pill input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
/* Badge « conseillé » discret à l'intérieur d'un pill */
.est-pill .est-reco { margin: 0; padding: 2px 6px; font-size: .56rem; line-height: 1; background: var(--red); color: #fff; }
.est-pill input:checked + span .est-reco { background: #fff; color: var(--red-dark); }

.est-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 10px; }
.est-check { position: relative; display: block; }
.est-check input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.est-check__box { display: flex; align-items: flex-start; gap: 11px; height: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; transition: all .15s ease; }
.est-check__box::before { content: ""; width: 19px; height: 19px; border: 2px solid var(--line); border-radius: 6px; flex: none; margin-top: 1px; background-position: center; background-repeat: no-repeat; transition: all .15s ease; }
.est-check__txt b { display: block; font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.est-check__txt small { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.35; color: var(--muted); }
.est-check input:checked + .est-check__box { border-color: var(--red); }
.est-check input:checked + .est-check__box .est-check__txt b { color: var(--ink); }
.est-check input:checked + .est-check__box::before { background-color: var(--red); border-color: var(--red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); background-size: 13px; }
.est-check input:focus-visible + .est-check__box { outline: 2px solid var(--red); outline-offset: 2px; }

.estimator__panel { position: sticky; top: 96px; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-md); }
.est-panel__label { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); }
.est-panel__price { margin: 0; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 2.1rem; line-height: 1.1; color: #fff; }
.est-panel__range { margin: 4px 0 0; font-size: .9rem; color: rgba(255,255,255,.7); }
.est-panel__rec { margin: 7px 0 0; font-size: .92rem; color: rgba(255,255,255,.8); }
.est-panel__recap { list-style: none; margin: 18px 0; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); display: grid; gap: 9px; }
.est-panel__recap li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: .9rem; color: rgba(255,255,255,.9); }
.est-panel__recap .k { color: rgba(255,255,255,.55); }
.est-panel__note { margin: 14px 0 0; font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.6); }

@media (max-width: 860px) {
  .estimator { grid-template-columns: 1fr; }
  .estimator__panel { position: static; }
}

/* ---------- Comparison / generic table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table.tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: .96rem; }
table.tbl th, table.tbl td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl thead th { background: var(--bg-alt); font-family: "Poppins", sans-serif; font-size: .9rem; color: var(--ink); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- Zones grid (liens villes crawlables) ---------- */
.zones-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zones-grid a {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; font-family: "Poppins", sans-serif; font-weight: 500; font-size: .95rem;
  color: var(--ink-2); transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.zones-grid a:hover { border-color: var(--red); color: var(--red-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.zones-grid a svg { flex: none; color: var(--red); }

/* ---------- Callout / answer box ---------- */
.callout {
  background: var(--red-soft); border: 1px solid #f3d6d6; border-left: 4px solid var(--red);
  border-radius: var(--radius-sm); padding: 20px 24px; margin: 0 0 1.4em;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--red-deep); }
.answer-lead { font-size: 1.12rem; color: var(--ink-2); font-weight: 500; max-width: 70ch; }

/* Prose niceties for content pages */
.prose--wide { max-width: 860px; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose table { margin: 1.4em 0; }
.tldr { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; font-family: "Poppins", sans-serif; font-weight: 700; color: var(--red); margin: 0 0 8px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .about__grid, .feature-row { grid-template-columns: 1fr; }
  .feature-row__media, .feature-row--rev .feature-row__media { order: -1 !important; }
  .contact__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .portfolio { grid-template-columns: repeat(2, 1fr); }
  /* Footer compacté sur tablette : marque en bandeau + 4 colonnes sur UNE
     seule ligne. Réduit nettement la hauteur totale (~990px -> ~800px) pour
     que l'effet « rideau » du footer s'active de façon fiable, même avec les
     barres du navigateur qui rognent la hauteur utile. */
  .site-footer { padding: 40px 0 22px; }
  .footer__grid {
    /* dernière colonne (Contact) un peu plus large : l'e-mail est long */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 26px 22px;
    margin-bottom: 26px;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand p { max-width: 62ch; }
  .footer__links { gap: 8px; }
  .footer__contact a { font-size: .92rem; overflow-wrap: anywhere; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .zones-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Menu : bascule en hamburger dès que les liens sont à l'étroit */
@media (max-width: 1040px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 22px 20px; box-shadow: var(--shadow-md);
    flex-direction: column; align-items: stretch; gap: 2px;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  body.menu-open .nav__menu { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: 14px 12px; border-radius: 10px; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__links li:last-child a { border-bottom: 0; }
  .nav__links a.active { background: var(--red-soft); }
  .nav__cta { margin: 12px 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; padding: 14px; }
}

@media (max-width: 700px) {
  .topbar { display: none; }
}

@media (max-width: 760px) {
  .text-blocks { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .cards, .portfolio, .footer__grid { grid-template-columns: 1fr; }
  .steps, .zones-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .brand__role { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { transition: none; opacity: 1; transform: none; }
}