/* ==========================================================================
   DIFERANCE — DESIGN SYSTEM 50/50
   Noir #1A1A1A / Blanc #FFFFFF / Accent #E31E24
   Auteur : build system Diferance — v2.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --charcoal: #1A1A1A;
  --charcoal-soft: #232323;
  --charcoal-line: #303030;
  --white: #FFFFFF;
  --off-white: #F7F7F7;
  --red: #E31E24;
  --red-dark: #B8161B;
  --silver: #E2E8F0;
  --gray: #4A4A4A;
  --gray-light: #8A8A8A;

  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono-weight: 600;   /* Barlow Condensed demande plus de gras que la mono */

  --container: 1280px;
  --gap: 16px;
  --pad-section: 120px;
  --radius: 1px;
  --nav-h: 76px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); margin: 0; line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--silver); margin: 48px 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--pad-section) 0; position: relative; }
.section--tight { padding: 80px 0; }
.section--dark { background: var(--charcoal); color: var(--white); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--light { background: var(--white); color: var(--charcoal); }
.section--offwhite { background: var(--off-white); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }
.gap-32 { gap: 32px; }
.gap-48 { gap: 48px; }

.stack > * + * { margin-top: 24px; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.maxw-720 { max-width: 720px; }
.maxw-620 { max-width: 620px; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--red); display: block; }
.eyebrow--plain::before { display: none; }
.section--dark .eyebrow { color: var(--red); }

.h-xxl { font-size: clamp(44px, 7.2vw, 104px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.035em; }
.h-xl  { font-size: clamp(36px, 5vw, 68px);  font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; }
.h-lg  { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; text-transform: uppercase; }
.h-md  { font-size: clamp(21px, 2vw, 27px);  font-weight: 800; }
.h-sm  { font-size: 18px; font-weight: 800; }

.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--gray); font-weight: 300; }
.section--dark .lead, .hero .lead, .footer .lead { color: #C4C4C4; }
.muted { color: var(--gray); }
.section--dark .muted { color: #9A9A9A; }
.accent { color: var(--red); }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.strike-red { position: relative; display: inline-block; }

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 17px 32px;
  border: 2px solid transparent;
  border-radius: 1px;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  min-height: 48px;
}
.btn--red { color: var(--white); }

.btn--dark { color: var(--white); }

.btn--light { color: var(--charcoal); }

.btn--ghost { border-color: currentColor; }

.btn--sm { padding: 12px 22px; font-size: 12px; min-height: 44px; }
/* Un bouton pleine largeur ne peut pas déborder de sa colonne : sur mobile,
   « Demander un devis détaillé » passe sur deux lignes plutôt que d'être
   coupé au bord de la carte. */
.btn--full { width: 100%; white-space: normal; text-align: center;
  padding-left: 20px; padding-right: 20px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  background: rgba(26, 26, 26, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--charcoal-line);
  transition: background 0.3s var(--ease);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: var(--white); text-transform: lowercase; white-space: nowrap; }
.nav__logo span { color: var(--red); }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__link {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #C9C9C9; transition: color 0.2s; position: relative; padding: 6px 0;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--white); }
.nav__link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__phone { font-family: var(--font-mono); font-size: 13px; color: var(--white); letter-spacing: 0.05em; }

/* dropdown services */
.nav__drop { position: relative; }
.nav__drop-menu {
  position: absolute; top: calc(100% + 14px); left: -20px; min-width: 268px;
  background: var(--charcoal); border: 1px solid var(--charcoal-line); border-radius: var(--radius);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.22s var(--ease); box-shadow: 0 24px 48px rgba(0,0,0,.45);
}
.nav__drop:hover .nav__drop-menu, .nav__drop:focus-within .nav__drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__drop-menu a { display: block; padding: 11px 14px; font-size: 14.5px; color: #C9C9C9; border-radius: 1px; transition: all 0.18s; }
.nav__drop-menu a:hover { background: var(--charcoal-soft); color: var(--white); padding-left: 20px; }

.nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--white); position: relative; transition: all 0.25s; }
.nav__burger span::before, .nav__burger span::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--white); transition: all 0.25s; }
.nav__burger span::before { top: -8px; }
.nav__burger span::after { top: 8px; }
.nav.is-open .nav__burger span { background: transparent; }
.nav.is-open .nav__burger span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__burger span::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; background: var(--charcoal); z-index: 890;
  padding: 32px; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s var(--ease);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu a { display: block; padding: 15px 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--white); border-bottom: 1px solid var(--charcoal-line); }
.mobile-menu a.sub { font-family: var(--font-body); font-weight: 400; font-size: 16px; text-transform: none; color: #B0B0B0; padding-left: 16px; }

body { padding-top: var(--nav-h); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { background: var(--charcoal); color: var(--white); padding: 110px 0 100px; position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; right: -180px; top: -120px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(227,30,36,0.14) 0%, transparent 68%); pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 26px; }
.hero .lead { max-width: 620px; margin-bottom: 38px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--charcoal-line); }
.hero__stat b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1; }
.hero__stat span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-light); }

.hero--service { padding: 88px 0 76px; }
.breadcrumb { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 28px; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb span { margin: 0 8px; opacity: .5; }

/* --------------------------------------------------------------------------
   8. CARTES SERVICES
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 38px 32px; transition: all 0.3s var(--ease); position: relative; overflow: hidden; height: 100%;
}
/* survol : le contour rouge et la photo se révèlent par un balayage à 45° */
.card::before, .card::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(135deg, #000 0 50%, transparent 50%);
  mask-image: linear-gradient(135deg, #000 0 50%, transparent 50%);
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%;
  -webkit-mask-position: 100% 100%; mask-position: 100% 100%;
  transition: -webkit-mask-position .65s var(--ease), mask-position .65s var(--ease); }
.card::before { border: 2px solid var(--red); z-index: 3; }
.card::after { z-index: 0; background-image: var(--fond, none); background-size: cover;
  background-position: center; opacity: .18; }
.card:hover::before, .card:hover::after { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
.card > * { position: relative; z-index: 1; }
.card:hover { border-color: var(--silver); }
.card--dark:hover { border-color: var(--charcoal-line); }
@media (prefers-reduced-motion: reduce) {
  .card::before, .card::after { transition: none; }
}
.card__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--gray-light); display: block; margin-bottom: 18px; }
.card h3 { margin-bottom: 12px; text-transform: uppercase; }
.card p { font-size: 15.5px; color: var(--gray); }
.card__link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); display: inline-flex; gap: 8px; margin-top: 20px; transition: gap 0.2s; }
.card:hover .card__link { gap: 14px; color: var(--red); }
.card--dark { background: var(--charcoal-soft); border-color: var(--charcoal-line); color: var(--white); }
.card--dark p { color: #A8A8A8; }
.card--dark .card__link { color: var(--white); }
.card--flag { border-color: var(--charcoal); }
.card__tag { position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--red); color: #fff; padding: 4px 9px; border-radius: 1px; }

/* pilier / valeur */
.pillar { padding: 32px 0; border-top: 2px solid var(--charcoal); }
.section--dark .pillar { border-color: var(--white); }
.pillar b { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--red); display: block; margin-bottom: 14px; }
.pillar h3 { margin-bottom: 12px; text-transform: uppercase; }
.pillar p { font-size: 15.5px; }

/* --------------------------------------------------------------------------
   9. CALCULATEUR
   -------------------------------------------------------------------------- */
.calc { background: var(--white); border: 2px solid var(--charcoal); border-radius: var(--radius); overflow: hidden; }
.calc__head { background: var(--charcoal); color: var(--white); padding: 30px 36px; }
.calc__head h3 { text-transform: uppercase; margin-bottom: 6px; }
.calc__head p { font-size: 14.5px; color: #A8A8A8; margin: 0; }
.calc__body { padding: 36px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; }
.calc__field { margin-bottom: 30px; }
.calc__field:last-child { margin-bottom: 0; }
.calc__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 13px; }
.calc__label i { color: var(--red); font-style: normal; }

.opts { display: grid; gap: 10px; }
.opts--2 { grid-template-columns: repeat(2, 1fr); }
.opts--3 { grid-template-columns: repeat(3, 1fr); }
.opts--4 { grid-template-columns: repeat(4, 1fr); }
.opt {
  border: 2px solid var(--silver); border-radius: var(--radius); padding: 15px 12px; text-align: center;
  transition: all 0.2s var(--ease); background: var(--white); min-height: 74px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.opt:hover { border-color: var(--gray); }
.opt em { font-size: 25px; font-style: normal; line-height: 1; }
.opt strong { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; display: block; line-height: 1.2; }
.opt small { font-size: 11.5px; color: var(--gray); line-height: 1.25; }
.opt[aria-pressed="true"] { border-color: var(--red); background: rgba(227,30,36,0.05); }
.opt[aria-pressed="true"] strong { color: var(--red); }

.calc__result { background: var(--charcoal); color: var(--white); border-radius: var(--radius); padding: 34px 30px; align-self: start; position: sticky; top: 100px; }
.calc__result-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-light); display: block; margin-bottom: 10px; }
.calc__price { font-family: var(--font-display); font-weight: 900; font-size: 54px; line-height: 1; letter-spacing: -0.03em; }
.calc__price small { font-size: 17px; font-weight: 500; color: var(--gray-light); margin-left: 6px; }
.calc__price.is-empty { font-size: 27px; color: var(--gray-light); }
.calc__recap { margin: 24px 0; padding: 20px 0; border-top: 1px solid var(--charcoal-line); border-bottom: 1px solid var(--charcoal-line); font-size: 14px; }
.calc__recap div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: #B0B0B0; }
.calc__recap div b { color: var(--white); font-weight: 600; text-align: right; }
.calc__note { font-size: 12.5px; color: var(--gray-light); margin-top: 16px; line-height: 1.5; }

.slider { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--silver); border-radius: 1px; outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--red); cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--red); cursor: pointer; border: 3px solid #fff; }
.slider-value { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin-top: 10px; display: block; }

/* --------------------------------------------------------------------------
   10. PROCESSUS
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; }
.step { position: relative; padding: 30px 0 30px 76px; border-bottom: 1px solid var(--silver); }
.section--dark .step { border-color: var(--charcoal-line); }
.step:last-child { border-bottom: none; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 30px; font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  letter-spacing: 0.1em; color: var(--red); border: 1px solid currentColor; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.step h3 { margin-bottom: 8px; text-transform: uppercase; }
.step p { font-size: 15.5px; color: var(--gray); margin: 0; }
.section--dark .step p { color: #A8A8A8; }

/* --------------------------------------------------------------------------
   11. PORTFOLIO / BENTO
   -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: var(--gap); }
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--charcoal-soft);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; color: var(--white);
  transition: transform 0.35s var(--ease); border: 1px solid var(--charcoal-line);
}
.tile:hover { transform: translateY(-4px); }
.tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(227,30,36,.22), transparent 62%); opacity: .85; }
.tile > * { position: relative; z-index: 2; }
.tile b { font-family: var(--font-display); font-weight: 800; font-size: 19px; text-transform: uppercase; }
.tile span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #B0B0B0; }
.tile--w2 { grid-column: span 2; }
.tile--h2 { grid-row: span 2; }
.tile--red::before { background: linear-gradient(135deg, var(--red), rgba(227,30,36,.35)); opacity: 1; }
.tile--light { background: var(--off-white); color: var(--charcoal); border-color: var(--silver); }
.tile--light::before { background: linear-gradient(135deg, rgba(26,26,26,.06), transparent 60%); }
.tile--light span { color: var(--gray); }

/* logos clients */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--silver); border: 1px solid var(--silver); }
.logos div {
  background: var(--white); padding: 26px 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
  color: var(--gray); text-transform: uppercase; text-align: center; transition: all .25s;
}
.logos div:hover { color: var(--charcoal); background: var(--off-white); }

/* --------------------------------------------------------------------------
   12. TÉMOIGNAGES
   -------------------------------------------------------------------------- */
.quote { background: var(--charcoal-soft); border: 1px solid var(--charcoal-line); border-radius: var(--radius); padding: 38px 34px; height: 100%; display: flex; flex-direction: column; }
.section--light .quote { background: var(--white); border-color: var(--silver); }
.quote__stars { color: var(--red); letter-spacing: 3px; margin-bottom: 18px; font-size: 15px; }
.quote p { font-size: 16.5px; line-height: 1.65; flex: 1; }
.quote footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--charcoal-line); }
.section--light .quote footer { border-color: var(--silver); }
.quote footer b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.quote footer span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-light); }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--silver); }
.section--dark .faq { border-color: var(--charcoal-line); }
.faq__item { border-bottom: 1px solid var(--silver); }
.section--dark .faq__item { border-color: var(--charcoal-line); }
.faq__q {
  width: 100%; text-align: left; padding: 26px 48px 26px 0; position: relative;
  font-family: var(--font-display); font-weight: 800; font-size: 17.5px; line-height: 1.35;
}
.faq__q::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 300; font-size: 30px; color: var(--red); transition: transform 0.3s var(--ease);
}
.faq__item.is-open .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq__a > div { padding: 0 60px 28px 0; color: var(--gray); font-size: 16px; }
.section--dark .faq__a > div { color: #A8A8A8; }

/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { background: var(--red); color: var(--white); padding: 96px 0; text-align: center; }
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { font-size: 19px; max-width: 620px; margin: 0 auto 34px; opacity: .92; }
.cta-band .btn--light:hover { background: var(--charcoal); color: var(--white); }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--charcoal); color: var(--white); padding: 88px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: 48px; padding-bottom: 56px; }
.footer h4 { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 22px; }
.footer li { margin-bottom: 11px; }
.footer a { color: #B0B0B0; font-size: 15px; transition: color .2s; }
.footer a:hover { color: var(--white); }
.footer__logo { font-family: var(--font-display); font-weight: 900; font-size: 27px; text-transform: lowercase; margin-bottom: 18px; letter-spacing: -0.02em; color: var(--white); }
.footer__logo span { color: var(--red); }
.footer__desc { font-size: 15px; color: #9A9A9A; max-width: 300px; }
.footer address { font-style: normal; font-size: 14.5px; color: #B0B0B0; line-height: 1.7; margin-bottom: 20px; }
.footer address b { color: var(--white); display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.footer__bar { border-top: 1px solid var(--charcoal-line); padding: 26px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--gray-light); }
.footer__bar a { font-size: 13px; }
.footer__bar nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   16. FORMULAIRES
   -------------------------------------------------------------------------- */
.field { margin-bottom: 22px; }
.field label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 9px; }
.field label i { color: var(--red); font-style: normal; }
.input, .textarea, .select {
  width: 100%; padding: 15px 16px; border: 2px solid var(--silver); border-radius: var(--radius);
  background: var(--white); font-size: 16px; transition: border-color 0.2s; font-family: var(--font-body);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--charcoal); outline: none; }
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A4A4A' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 11px; padding-right: 42px; }
.file-drop { border: 2px dashed var(--silver); border-radius: var(--radius); padding: 36px; text-align: center; transition: all .2s; cursor: pointer; }
.file-drop:hover { border-color: var(--red); background: rgba(227,30,36,.03); }
.checkline { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--gray); }
.checkline input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--red); flex-shrink: 0; }

/* étapes formulaire */
.wizard__nav { display: flex; gap: 4px; margin-bottom: 44px; }
.wizard__nav div { flex: 1; text-align: center; padding-bottom: 14px; border-bottom: 3px solid var(--silver); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); transition: all .3s; }
.wizard__nav div.is-active { border-color: var(--red); color: var(--red); }
.wizard__nav div.is-done { border-color: var(--charcoal); color: var(--charcoal); }
.wizard__step { display: none; }
.wizard__step.is-active { display: block; animation: fadeUp .35s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.radio-card { border: 2px solid var(--silver); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: all .2s; display: block; }
.radio-card:hover { border-color: var(--gray); }
.radio-card input { position: absolute; opacity: 0; }
.radio-card:has(input:checked) { border-color: var(--red); background: rgba(227,30,36,.04); }
.radio-card b { font-family: var(--font-display); font-weight: 800; display: block; margin-bottom: 4px; font-size: 15px; }
.radio-card span { font-size: 13.5px; color: var(--gray); }

/* --------------------------------------------------------------------------
   17. BLOG
   -------------------------------------------------------------------------- */
.post-card { border: 1px solid var(--silver); border-radius: var(--radius); overflow: hidden; transition: all .3s var(--ease); background: var(--white); height: 100%; display: flex; flex-direction: column; }
.post-card:hover { border-color: var(--charcoal); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.post-card__img { height: 190px; background: var(--charcoal); position: relative; display: flex; align-items: flex-end; padding: 20px; }
.post-card__img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(227,30,36,.35), transparent 65%); }
.post-card__img span { position: relative; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--red); padding: 5px 10px; border-radius: 1px; }
.post-card__body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.post-card h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.25; }
.post-card p { font-size: 14.5px; color: var(--gray); flex: 1; }
.post-card__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); margin-top: 18px; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.article { max-width: 760px; min-width: 0; }
.article h2 { font-size: 30px; margin: 48px 0 18px; text-transform: uppercase; }
.article h3 { font-size: 21px; margin: 34px 0 12px; }
.article p, .article li { font-size: 17.5px; line-height: 1.75; color: #2E2E2E; }
.article ul { margin: 0 0 1.2em; }
.article ul li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.article ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 2px; background: var(--red); }
.callout { background: var(--off-white); border-left: 3px solid var(--red); padding: 26px 28px; margin: 34px 0; border-radius: 0 1px 1px 0; }
.callout b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 10px; }
.callout p { font-size: 16px; margin: 0; }

/* --------------------------------------------------------------------------
   18. UTILITAIRES
   -------------------------------------------------------------------------- */
/* L'état masqué n'est appliqué que si JS est actif (classe posée sur <html>),
   afin que le contenu reste visible pour les moteurs et sans JavaScript. */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.divider-label { display: flex; align-items: center; gap: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 40px; }
.divider-label::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.chip { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--silver); border-radius: 1px; color: var(--gray); margin: 0 6px 6px 0; }
.section--dark .chip, .hero .chip { border-color: #4A4A4A; color: #C4C4C4; }
.sticky-cta { display: none; }

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --pad-section: 76px; }
  .container { padding: 0 24px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__phone { display: none; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .calc__body { grid-template-columns: 1fr; gap: 32px; }
  .calc__result { position: static; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 720px) {
  :root { --pad-section: 56px; --nav-h: 68px; }
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  .section { padding: var(--pad-section) 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 56px; }
  .hero__stats { gap: 28px 40px; margin-top: 48px; }
  .hero__stat b { font-size: 32px; }
  .calc__body { padding: 24px 20px; }
  .calc__head { padding: 24px 20px; }
  .opts--4 { grid-template-columns: repeat(2, 1fr); }
  .opts--3 { grid-template-columns: repeat(2, 1fr); }
  .calc__price { font-size: 42px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 160px; }
  .tile--w2, .tile--h2 { grid-column: span 1; grid-row: span 1; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .step { padding-left: 62px; }
  .step::before { width: 42px; height: 42px; font-size: 12px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .wizard__nav div { font-size: 9px; letter-spacing: .04em; }
  .faq__q { font-size: 16px; padding-right: 40px; }
  .article h2 { font-size: 25px; }
  .sticky-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 880;
    background: var(--charcoal); border-top: 1px solid var(--charcoal-line); padding: 10px 14px; gap: 10px;
  }
  .sticky-cta .btn { flex: 1; padding: 14px 12px; font-size: 11.5px; min-height: 48px; }
  .footer { padding-bottom: 76px; }
}

/* --------------------------------------------------------------------------
   20. IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  .nav, .sticky-cta, .cta-band, .mobile-menu { display: none !important; }
  body { padding-top: 0; color: #000; }
  .section--dark, .footer { background: #fff !important; color: #000 !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   21. PHOTOGRAPHIE & ANIMATIONS (niveau 1 — soigné & sobre)
   ========================================================================== */

/* ------------------------------------------------------------ LOGOTYPE */


/* ------------------------------------------------------------ HÉROS PHOTO */
.hero--photo { position: relative; }
.hero--photo::after { display: none; }
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #1A1A1A 12%, rgba(26,26,26,.92) 44%, rgba(26,26,26,.55) 100%),
              linear-gradient(180deg, rgba(26,26,26,.55), transparent 40%);
}
.hero--photo .hero__inner { position: relative; z-index: 2; }
@media (max-width: 720px) {
  .hero-media::after { background: linear-gradient(180deg, rgba(26,26,26,.72), rgba(26,26,26,.94) 55%); }
}

/* ------------------------------------------------------------ CARTES */
.card-media { position: relative; height: 200px; margin: -38px -32px 26px; overflow: hidden; background: var(--charcoal); }
.card-media picture { display: block; height: 100%; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card-media img { transform: scale(1.07); }
.card__link { position: relative; }
.card__link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.card:hover .card__link::after { transform: scaleX(1); transform-origin: left; }

/* ------------------------------------------------------------ TUILES */
.tile picture { position: absolute; inset: 0; z-index: 0; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.07); }
.tile::before { z-index: 1; opacity: .35; }
.tile::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: 1;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); pointer-events: none;
}
.tile > span, .tile > b { position: relative; z-index: 2; }
.tile b { transition: transform .5s var(--ease); }
.tile span { opacity: .8; transform: translateY(5px); transition: all .5s var(--ease); }
.tile:hover span { opacity: 1; transform: none; }
.tile:hover b { transform: translateY(-2px); }
.tile--light { color: var(--white); }
.tile--light span { color: #D8D8D8; }

/* ------------------------------------------------------------ BLOG */
.post-card__img { overflow: hidden; align-items: flex-end; }
.post-card__img picture { position: absolute; inset: 0; display: block; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.06); }
.post-card__img::before { z-index: 1; background: linear-gradient(transparent 30%, rgba(0,0,0,.7)); opacity: 1; }

/* ------------------------------------------------------------ BOUTONS & NAV */
/* l'ancien balayage horizontal translucide est remplacé par le remplissage
   en diagonale, défini en section 36 */
.btn { position: relative; overflow: hidden; z-index: 0; }
.nav__link::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav__link:hover::before { transform: scaleX(1); transform-origin: left; }
.logos div { transition: background .3s, color .3s, transform .3s; }
.logos div:hover { transform: translateY(-3px); }

/* ------------------------------------------------------------ APPARITIONS */
.js-reveal .reveal { transition-delay: var(--d, 0ms); }

/* ------------------------------------------------------------ IMAGE MANQUANTE */
.ph-missing { position: absolute; inset: 0; background: linear-gradient(135deg, #2b2b2b, #1a1a1a); }

/* ==========================================================================
   22. ICÔNES CONTOUR & SECTIONS IMAGE + TEXTE
   ========================================================================== */
.icon { display: block; flex-shrink: 0; color: var(--red); }
.card .icon { margin-bottom: 20px; }
.step .icon, .pillar .icon { margin-bottom: 14px; }
.icon-line { display: inline-flex; align-items: center; gap: 10px; }

/* pastille d'icône */
.icon-badge {
  width: 54px; height: 54px; border: 1.5px solid var(--silver); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.section--dark .icon-badge, .card--dark .icon-badge { border-color: var(--charcoal-line); }
.card:hover .icon-badge { border-color: var(--red); background: rgba(227,30,36,.06); }

/* --- image + texte -------------------------------------------------------- */
.split { display: grid; gap: 56px; align-items: center; }
.split--third   { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.split--half    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--twothird{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.split--reverse .split__media { order: 2; }
.split__media { margin: 0; position: relative; }
.split__media picture { display: block; overflow: hidden; border-radius: var(--radius); }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease); }
.split__media:hover img { transform: scale(1.04); }
.split__media::after {
  content: ''; position: absolute; left: -12px; top: -12px; width: 64px; height: 64px;
  border-left: 2px solid var(--red); border-top: 2px solid var(--red); pointer-events: none;
}
.split--reverse .split__media::after { left: auto; right: -12px; border-left: 0; border-right: 2px solid var(--red); }
.split__media figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-light); margin-top: 12px;
}
.split__text .lead p + p { margin-top: 1em; }

/* --- bande visuelle ------------------------------------------------------- */
.band { margin: 0; position: relative; }
.band picture { display: block; overflow: hidden; border-radius: var(--radius); }
.band img { width: 100%; height: clamp(220px, 34vw, 460px); object-fit: cover; display: block; }
.band figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-light); margin-top: 14px;
}

/* --- carte statistique ---------------------------------------------------- */
.statcard { border-top: 2px solid var(--charcoal); padding-top: 22px; }
.section--dark .statcard { border-color: var(--white); }
.statcard .icon { color: var(--red); margin-bottom: 16px; }
.statcard b { display: block; font-family: var(--font-display); font-weight: 900;
  font-size: 38px; line-height: 1; letter-spacing: -.02em; }
.statcard span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray); display: block; margin-top: 8px; }
.section--dark .statcard span { color: var(--gray-light); }

/* --- figure d'article ----------------------------------------------------- */
.article figure { margin: 40px 0; }
.article figure picture { display: block; overflow: hidden; border-radius: var(--radius); }
.article figure img { width: 100%; display: block; }
.article figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray-light); margin-top: 12px; }

/* --- liste à icônes ------------------------------------------------------- */
.iconlist { display: grid; gap: 18px; margin-top: 28px; }
.iconlist li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; }
.iconlist .icon { color: var(--red); margin-top: 2px; }

@media (max-width: 900px) {
  .split, .split--third, .split--half, .split--twothird { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split--reverse .split__media { order: 0; }
  .split__media::after { display: none; }
}

/* ==========================================================================
   23. BLOCS COURTS : POINTS À ICÔNE & GRILLE DE FONCTIONNALITÉS
   ========================================================================== */
.points { display: grid; gap: 26px; margin-top: 34px; }
.point { display: flex; gap: 16px; align-items: flex-start; }
.point__icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--silver); display: flex; align-items: center; justify-content: center;
}
.section--dark .point__icon { border-color: var(--charcoal-line); }
.point b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 16px; margin-bottom: 5px; letter-spacing: -0.01em;
}
.point span { display: block; font-size: 15.5px; line-height: 1.55; color: var(--gray); }
.section--dark .point span { color: #A8A8A8; }

/* grille de fonctionnalités — sans cadre, aérée */
.feature { max-width: 400px; }
.feature__icon {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--silver);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.section--dark .feature__icon { border-color: var(--charcoal-line); }
.feature:hover .feature__icon { border-color: var(--red); background: rgba(227,30,36,.06); }
.feature h3 { margin-bottom: 10px; text-transform: uppercase; letter-spacing: -0.01em; }
.feature p { font-size: 15.5px; line-height: 1.6; color: var(--gray); margin: 0; }
.section--dark .feature p { color: #A8A8A8; }

/* ==========================================================================
   24. ICÔNES — version finale : à plat, sans cercle
   ========================================================================== */
.icon-badge,
.feature__icon,
.point__icon {
  width: auto; height: auto; border: 0; border-radius: 1px; background: none;
  display: block; margin: 0 0 18px; color: var(--red);
}
.point__icon { margin: 2px 0 0; flex-shrink: 0; }
.feature__icon { margin-bottom: 20px; }
.card:hover .icon-badge,
.feature:hover .feature__icon { border: 0; background: none; }
.icon-badge .icon, .feature__icon .icon, .point__icon .icon { color: var(--red); }

/* ==========================================================================
   25. GALERIE MASONRY — flux en colonnes, sans trou
   ========================================================================== */
.masonry { column-count: 4; column-gap: var(--gap); }
.gal {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 var(--gap); position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--charcoal-soft); display: block;
}
.gal picture { display: block; }
.gal img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); }
.gal::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(transparent, rgba(0,0,0,.86)); pointer-events: none;
  opacity: .9; transition: opacity .35s var(--ease);
}
.gal:hover img { transform: scale(1.05); }
.gal:hover::after { opacity: 1; }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 18px; color: #fff;
}
.gal figcaption span {
  display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #C0C0C0; margin-bottom: 4px;
}
.gal figcaption b {
  font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.2;
  display: block; letter-spacing: -0.01em;
}
.masonry--3 { column-count: 3; }
.masonry--2 { column-count: 2; }

@media (max-width: 1100px) { .masonry { column-count: 3; } .masonry--3 { column-count: 2; } }
@media (max-width: 760px)  { .masonry, .masonry--3 { column-count: 2; } }
@media (max-width: 480px)  { .masonry, .masonry--3, .masonry--2 { column-count: 1; } }
.chip--link { transition: all .25s var(--ease); }
.chip--link:hover { border-color: var(--red); color: var(--red); }
.chip--link em { font-style: normal; opacity: .6; margin-left: 4px; }

/* ==========================================================================
   26. BARLOW CONDENSED — calage des libellés
   Une condensée « lit » plus petit qu'une monospace à taille égale : on
   remonte légèrement les corps et le gras, on resserre un peu l'interlettrage.
   ========================================================================== */
.eyebrow, .btn, .nav__link, .nav__phone, .mono, .chip, .breadcrumb, .divider-label,
.calc__label, .calc__result-label, .card__num, .card__tag, .field label, .checkline,
.wizard__nav div, .footer h4, .footer address b, .post-card__meta, .post-card__img span,
.tile span, .gal figcaption span, .hero__stat span, .statcard span, .split__media figcaption,
.band figcaption, .article figcaption, .quote footer span, .logos div, .step::before {
  font-weight: var(--mono-weight);
}

.eyebrow            { font-size: 13.5px; letter-spacing: 0.16em; }
.btn                { font-size: 14.5px; letter-spacing: 0.09em; }
.btn--sm            { font-size: 13.5px; }
.nav__link          { font-size: 14px;   letter-spacing: 0.07em; }
.nav__phone         { font-size: 15px;   letter-spacing: 0.03em; font-weight: 700; }
.mono               { font-size: 14.5px; letter-spacing: 0.07em; }
.chip               { font-size: 12.5px; letter-spacing: 0.09em; }
.breadcrumb         { font-size: 13px;   letter-spacing: 0.09em; }
.divider-label      { font-size: 12.5px; letter-spacing: 0.14em; }
.calc__label        { font-size: 13px;   letter-spacing: 0.12em; }
.calc__result-label { font-size: 12.5px; letter-spacing: 0.14em; }
.calc__price small  { font-size: 18px; }
.card__num          { font-size: 13px;   letter-spacing: 0.12em; }
.card__tag          { font-size: 11.5px; }
.card__link         { font-size: 13.5px; letter-spacing: 0.09em; font-weight: var(--mono-weight); }
.field label        { font-size: 13px;   letter-spacing: 0.1em; }
.wizard__nav div    { font-size: 12.5px; letter-spacing: 0.08em; }
.footer h4          { font-size: 13px;   letter-spacing: 0.14em; }
.footer address b   { font-size: 12.5px; letter-spacing: 0.1em; }
.post-card__meta    { font-size: 12.5px; letter-spacing: 0.09em; }
.post-card__img span{ font-size: 12px;   letter-spacing: 0.1em; }
.tile span          { font-size: 12.5px; letter-spacing: 0.1em; }
.gal figcaption span{ font-size: 12px;   letter-spacing: 0.1em; }
.hero__stat span    { font-size: 13px;   letter-spacing: 0.12em; }
.statcard span      { font-size: 12.5px; letter-spacing: 0.11em; }
.split__media figcaption, .band figcaption, .article figcaption {
                      font-size: 12.5px; letter-spacing: 0.09em; }
.quote footer span  { font-size: 12.5px; letter-spacing: 0.09em; }
.logos div          { font-size: 15.5px; letter-spacing: 0.01em; }
.step::before       { font-size: 15px;   letter-spacing: 0.06em; }
.calc__note         { font-size: 13.5px; }
.footer__bar, .footer__bar a { font-size: 14px; }

/* Barlow Condensed a des chiffres étroits : on élargit un peu là où ils comptent */
.nav__phone, .calc__recap, .demo__phone { font-variant-numeric: tabular-nums; }

/* Barre de navigation mobile : la condensée élargit le bouton, on resserre */
@media (max-width: 900px) {
  .nav__inner { gap: 12px; }
  .nav__logo { font-size: 20px; }
  .nav__actions { gap: 8px; }
  .nav__actions .btn--sm { padding: 11px 14px; font-size: 12.5px; letter-spacing: 0.05em; }
}
@media (max-width: 400px) {
  .nav__actions .btn--sm { padding: 11px 12px; font-size: 12px; }
  .nav__logo { font-size: 18px; }
}

/* Le menu mobile était déporté hors écran par translateX(100%) : en position
   fixed il échappait au rognage du body et créait un débordement horizontal.
   On le masque désormais sans le sortir du cadre. */
.mobile-menu {
  transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .35s var(--ease), opacity .3s var(--ease), visibility .35s;
}
.mobile-menu.is-open {
  transform: none; opacity: 1; visibility: visible; pointer-events: auto;
}

/* Bandeau clients : en Barlow Condensed, certains noms dépassaient leur colonne */
.logos div { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) { .logos { grid-template-columns: repeat(2, 1fr); } }

/* Sécurité anti-débordement : les enfants de grille peuvent rétrécir, et les
   chaînes insécables (adresses e-mail, URL) se coupent plutôt que de déborder. */
.grid > *, .split > *, .points > * { min-width: 0; }
.card h3, .card p, .footer a, .article a, .iconlist span { overflow-wrap: anywhere; }

/* ==========================================================================
   27. SÉRIES CLIENT — une boîte par chantier, carrousel discret
   ========================================================================== */
.car { position: relative; width: 100%; overflow: hidden; }
.car__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.car__slide.is-on { opacity: 1; visibility: visible; }
.car__slide:first-child { opacity: 1; visibility: visible; }   /* avant l'init JS */
.car__slide picture, .car__slide img { display: block; width: 100%; height: 100%; }
.car__slide img { object-fit: cover; transition: transform .9s var(--ease); }
.gal--multi:hover .car__slide.is-on img { transform: scale(1.04); }

/* flèches — invisibles au repos, révélées au survol */
.car__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 38px; height: 38px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #fff;
  background: rgba(20,20,20,.62); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s var(--ease), background .2s;
}
.car__arrow:hover { background: var(--red); }
.car__arrow--prev { left: 10px; }
.car__arrow--prev .icon { transform: rotate(180deg); }
.car__arrow--next { right: 10px; }
.gal--multi:hover .car__arrow,
.gal--multi:focus-within .car__arrow { opacity: 1; }

/* compteur discret en haut à droite */
.car__count {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  letter-spacing: .06em; color: #fff; background: rgba(20,20,20,.6);
  backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 1px;
  font-variant-numeric: tabular-nums;
}
.car__count b { font-weight: 700; }

/* pastilles de navigation */
.car__dots {
  position: absolute; left: 0; right: 0; bottom: 62px; z-index: 4;
  display: flex; justify-content: center; gap: 6px; padding: 0 16px; flex-wrap: wrap;
}
.car__dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.42);
  transition: background .25s, transform .25s;
}
.car__dot.is-on { background: #fff; transform: scale(1.35); }
.car__dot:hover { background: #fff; }

.gal--multi figcaption em { display: none; }

@media (hover: none) {
  .gal--multi .car__arrow { opacity: 1; width: 34px; height: 34px; }
}

/* ==========================================================================
   28. CARROUSEL — pastilles collées en bas, compteur supprimé
   ========================================================================== */
.car__count { display: none; }

.car__dots {
  bottom: 5px; gap: 5px; padding: 0 12px;
}
.car__dot {
  width: 4px; height: 4px; background: rgba(255,255,255,.45);
  box-shadow: 0 0 3px rgba(0,0,0,.5);
}
.car__dot.is-on { background: #fff; transform: scale(1.5); }

/* la légende remonte pour laisser respirer les pastilles */
.gal--multi figcaption { padding-bottom: 20px; }

/* ==========================================================================
   29. LIGHTBOX — agrandissement d'une série
   ========================================================================== */
.car__zone {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative;
}
.car__zone .car { display: block; }
.car__loupe {
  position: absolute; top: 10px; right: 10px; z-index: 4; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(20,20,20,.55); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.gal:hover .car__loupe, .gal:focus-within .car__loupe { opacity: 1; }

.lb {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(12,12,12,.96); backdrop-filter: blur(6px);
}
.lb.is-open { display: flex; flex-direction: column; }
.lb__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 22px; color: #fff; flex-shrink: 0;
}
.lb__titre { min-width: 0; }
.lb__titre b {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb__titre span {
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #A8A8A8;
}
.lb__outils { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.lb__compteur {
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 14px;
  color: #C4C4C4; font-variant-numeric: tabular-nums;
}
.lb__fermer {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; background: rgba(255,255,255,.1); transition: background .2s;
}
.lb__fermer:hover { background: var(--red); }

.lb__scene {
  flex: 1; min-height: 0; position: relative; display: flex; align-items: center;
  justify-content: center; padding: 0 76px 12px;
}
.lb__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius); opacity: 0; transition: opacity .3s var(--ease);
}
.lb__img.is-ready { opacity: 1; }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; background: rgba(255,255,255,.1); transition: background .2s;
}
.lb__nav:hover { background: var(--red); }
.lb__nav--prev { left: 14px; }
.lb__nav--prev .icon { transform: rotate(180deg); }
.lb__nav--next { right: 14px; }
.lb__legende {
  text-align: center; color: #9A9A9A; font-size: 14px; padding: 0 22px 14px; flex-shrink: 0;
}
.lb__vignettes {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 0 22px 22px; flex-shrink: 0; max-height: 92px; overflow: auto;
}
.lb__vignette {
  width: 54px; height: 40px; border-radius: 1px; overflow: hidden; opacity: .45;
  border: 2px solid transparent; transition: opacity .2s, border-color .2s; flex-shrink: 0;
}
.lb__vignette img { width: 100%; height: 100%; object-fit: cover; }
.lb__vignette.is-on { opacity: 1; border-color: var(--red); }
.lb__vignette:hover { opacity: .85; }

body.lb-ouverte { overflow: hidden; }

@media (max-width: 720px) {
  .lb__scene { padding: 0 12px 10px; }
  .lb__nav { width: 42px; height: 42px; background: rgba(20,20,20,.6); }
  .lb__nav--prev { left: 6px; }
  .lb__nav--next { right: 6px; }
  .lb__vignettes { display: none; }
  .lb__titre b { font-size: 16px; }
}

/* ==========================================================================
   30. NAVIGATION À DEUX NIVEAUX (barre utilitaire + barre métiers)
   ========================================================================== */
:root { --nav-h: 106px; }

.nav__top {
  height: 38px; border-bottom: 1px solid var(--charcoal-line);
  background: rgba(0, 0, 0, .28);
}
.nav__top-inner {
  height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__baseline {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #8A8A8A; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.nav__utility { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.nav__utility a {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .07em;
  text-transform: uppercase; color: #B4B4B4; transition: color .2s; white-space: nowrap;
}
.nav__utility a:hover, .nav__utility a[aria-current="page"] { color: var(--white); }
.nav__utility .nav__phone { color: var(--white); font-weight: 700; font-size: 13.5px; }

.nav__inner { height: 68px; gap: 14px; max-width: 1560px; }
.nav__top-inner { max-width: 1560px; }
.nav__logo { font-size: 20px; }
.nav__links { gap: 13px; flex-wrap: nowrap; flex: 1 1 auto; justify-content: flex-end; }
/* au-dessus de 1200 px, le bloc d'actions est vide : on le retire pour que le
   menu finisse exactement au même aplomb que le bouton « Devis gratuit ». */
@media (min-width: 1200px) { .nav__actions { display: none; } }
.nav__link { font-size: 15px; letter-spacing: .03em; white-space: nowrap; padding: 8px 0;
  display: inline-flex; align-items: center; line-height: 1; }
.nav__link--drop i { font-style: normal; margin-left: 6px; font-size: 10px; opacity: .65;
  line-height: 1; transform: translateY(1px); }
.nav__links { align-items: center; }
.nav__drop { display: inline-flex; align-items: center; }
.nav__drop-menu { top: calc(100% + 10px); left: -16px; min-width: 300px; }

@media (max-width: 1340px) {
  .nav__baseline { display: none; }
  .nav__top-inner { justify-content: flex-end; }
}
/* le menu reste complet le plus longtemps possible, en se resserrant par paliers */
@media (max-width: 1439px) and (min-width: 1340px) {
  .nav__link { font-size: 14px; }
  .nav__links { gap: 11px; }
}
@media (max-width: 1339px) and (min-width: 1200px) {
  .nav__link { font-size: 12.5px; letter-spacing: .02em; }
  .nav__links { gap: 9px; }
  .nav__logo { font-size: 19px; }
}
@media (max-width: 1199px) {
  :root { --nav-h: 68px; }
  .nav__top { display: none; }
  .nav__inner { height: 68px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}

/* bouton devis remonté dans la barre utilitaire : la barre métiers garde toute sa largeur */
.btn--xs { padding: 7px 13px; font-size: 11.5px; letter-spacing: .06em; border-radius: 1px; }
/* dans la barre utilitaire, le bouton doit tenir sur la même ligne que les liens */
.nav__utility .btn--xs {
  min-height: 26px; padding: 5px 14px; font-size: 12px; line-height: 1;
  letter-spacing: .07em; align-self: center; color: var(--white);
}
.nav__utility .btn--xs:hover, .nav__utility .btn--xs:focus-visible { color: var(--white); }
.nav__links { min-width: 0; }
.nav__cta-mob { display: none; }
@media (max-width: 1100px) { .nav__cta-mob { display: inline-flex; } }

/* titres très longs : on autorise la coupure plutôt qu'un débordement en 360 px */
.cta-band h2, .hero h1, .h-xl { overflow-wrap: anywhere; }

/* ==========================================================================
   31. CATALOGUES — ÉVENTAIL DE COUVERTURES, LISTE, CARTES D'UNIVERS
   ========================================================================== */
.catintro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: center; }
.catintro__note { margin-top: 26px; font-size: 14.5px; color: var(--gray-light); max-width: 480px; }
.section:not(.section--dark) .catintro__note { color: var(--gray); }

/* liste compacte des catalogues */
.catlist { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--charcoal-line); }
.section:not(.section--dark) .catlist { border-top-color: var(--silver); }
.catrow { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--charcoal-line); }
.section:not(.section--dark) .catrow { border-bottom-color: var(--silver); }
.catrow__lien { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex: 1; }
.catrow__lien b { font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: .01em; }
.catrow__lien span { font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gray-light); white-space: nowrap; }
.catrow__lien:hover b { color: var(--red); }
.catrow__pdf { font-family: var(--font-mono); font-weight: 600; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gray-light);
  border: 1px solid var(--charcoal-line); padding: 7px 12px; border-radius: 1px;
  white-space: nowrap; transition: all .2s; }
.catrow__pdf::before { content: '↓ '; }
.catrow__pdf:hover { border-color: var(--red); color: var(--red); }
.section:not(.section--dark) .catrow__pdf { border-color: var(--silver); color: var(--gray); }

/* éventail de couvertures */
.eventail { position: relative; height: 500px; perspective: 1600px; overflow: hidden;
  padding-bottom: 26px; }
.couv { position: absolute; top: 50%; left: 50%; width: 268px; border-radius: 1px;
  overflow: hidden; background: var(--couv, #333);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
  transition: transform .55s var(--ease), box-shadow .45s var(--ease); }
.couv img { width: 100%; height: auto; display: block; }
.couv::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.26), rgba(255,255,255,0) 26%,
    rgba(0,0,0,.06) 72%, rgba(0,0,0,.28)); }
.couv--0 { transform: translate(-52%, -54%) rotate(-7deg) translateZ(60px); z-index: 3; }
.couv--1 { transform: translate(-14%, -54%) rotate(6deg) scale(.94); z-index: 2; }
.couv--2 { transform: translate(-88%, -46%) rotate(-16deg) scale(.9); z-index: 1; }
.eventail:hover .couv--0 { transform: translate(-52%, -54%) rotate(-5deg) translateZ(60px); }
.eventail:hover .couv--1 { transform: translate(-6%, -56%) rotate(9deg) scale(.95); }
.eventail:hover .couv--2 { transform: translate(-96%, -48%) rotate(-19deg) scale(.91); }
.eventail__ombre { position: absolute; left: 50%; top: 50%; width: 460px; height: 300px;
  transform: translate(-50%, -40%); border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse, rgba(227,30,36,.16), transparent 68%); }
.eventail__socle { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-light); white-space: nowrap; z-index: 4; }
/* un seul catalogue : couverture centrée, plus grande */
.eventail:not(:has(.couv--1)) .couv--0 { transform: translate(-50%, -55%) rotate(-4deg); width: 300px; }
.eventail:not(:has(.couv--1)):hover .couv--0 { transform: translate(-50%, -58%) rotate(-2deg); }

/* cartes d'univers */
.catcards { display: grid; gap: 14px; }
.catcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.catcards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.catcard { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px;
  border: 1px solid var(--silver); border-radius: 1px; transition: all .22s var(--ease); }
.section--dark .catcard { border-color: var(--charcoal-line); }
.catcard:hover { border-color: var(--red); transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.section--dark .catcard:hover { box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.catcard__icone { color: var(--red); line-height: 0; }
.catcard h3 { font-family: var(--font-display); font-weight: 800; font-size: 15px;
  line-height: 1.22; letter-spacing: .01em; }
.catcard__lien { margin-top: auto; display: block; line-height: 1.5;
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--red); }
.catcard__lien .icon { display: inline-block; vertical-align: -3px; transition: transform .2s; }
.catcard:hover .catcard__lien .icon { transform: translateX(4px); }
.catcard__pdf { font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gray);
  padding-top: 10px; border-top: 1px solid var(--silver); }
.section--dark .catcard__pdf { border-top-color: var(--charcoal-line); color: var(--gray-light); }
.catcard__pdf::before { content: '↓ '; }
.catcard__pdf:hover { color: var(--red); }

/* marques */
.marques { display: flex; flex-wrap: wrap; gap: 10px; }
.marques span { font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; padding: 9px 15px; border-radius: 1px;
  border: 1px solid var(--silver); color: var(--gray); transition: all .2s; }
.section--dark .marques span { border-color: var(--charcoal-line); color: var(--gray-light); }
.marques span:hover { border-color: var(--red); color: var(--red); }
.note-marques { margin-top: 20px; font-size: 14px; color: var(--gray); }

@media (max-width: 1200px) { .catcards--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .catintro { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .eventail { height: 400px; order: -1; }
  .catcards--4, .catcards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .catcards--4, .catcards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eventail { height: 330px; }
  .couv { width: 172px; }
  .couv--0 { transform: translate(-50%, -50%) rotate(-6deg); }
  .couv--1 { transform: translate(-16%, -53%) rotate(6deg) scale(.9); }
  .couv--2 { transform: translate(-84%, -47%) rotate(-15deg) scale(.88); }
  .eventail:not(:has(.couv--1)) .couv--0 { width: 230px; }
  .catrow { flex-wrap: wrap; gap: 10px; }
}

/* ==========================================================================
   32. LECTEUR DE CATALOGUE (visualiseur.html)
   ========================================================================== */
body:has(.lecteur) { padding-top: 0; overflow: hidden; }
.lecteur { position: fixed; inset: 0; display: flex; flex-direction: column;
  background: #101010; color: #fff; }
.lecteur__barre { display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 62px;
  border-bottom: 1px solid #262626; background: #161616; flex: 0 0 auto; }
.lecteur__logo { font-family: var(--font-display); font-weight: 900; font-size: 19px;
  letter-spacing: -.02em; color: #fff; text-transform: lowercase; }
.lecteur__logo span { color: var(--red); }
.lecteur__titre { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 14px; }
.lecteur__titre b { font-family: var(--font-display); font-weight: 800; font-size: 15px;
  text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.lecteur__titre span { font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; color: #9A9A9A; white-space: nowrap; }
.lecteur__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lecteur__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid #333; border-radius: 1px; color: #D6D6D6; background: none; cursor: pointer;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; transition: all .2s; }
.lecteur__btn:hover { border-color: var(--red); color: #fff; }
.lecteur__quitter { padding: 9px 11px; }

.lecteur__scene { flex: 1; position: relative; display: flex; align-items: center;
  justify-content: center; padding: 22px 74px; min-height: 0; }
.vue { display: flex; gap: 0; align-items: stretch; justify-content: center;
  max-width: 100%; max-height: 100%; cursor: zoom-in; }
.vue img { max-height: calc(100vh - 62px - 74px - 44px); width: auto; max-width: 100%;
  height: auto; object-fit: contain; display: block; background: #fff;
  box-shadow: 0 26px 60px rgba(0,0,0,.6); }
.vue--double img:first-child { border-right: 1px solid rgba(0,0,0,.12); }
.vue--zoom { cursor: zoom-out; overflow: auto; align-items: flex-start; }
.vue--zoom img { max-height: none; max-width: none; width: min(1600px, 175vw); }

.lecteur__fleche { position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid #333; background: #1B1B1B;
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; z-index: 3; }
.lecteur__fleche:hover { background: var(--red); border-color: var(--red); }
.lecteur__fleche--g { left: 14px; }
.lecteur__fleche--g .icon { transform: rotate(180deg); }
.lecteur__fleche--d { right: 14px; }

.lecteur__pied { flex: 0 0 auto; border-top: 1px solid #262626; background: #161616;
  padding: 10px 20px; display: flex; align-items: center; gap: 26px; }
.lecteur__prog { position: absolute; left: 0; right: 0; bottom: 43px; height: 2px; background: #262626; }
.lecteur__prog i { display: block; height: 100%; background: var(--red); transition: width .3s var(--ease); }
.lecteur__saut { font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: #9A9A9A;
  display: inline-flex; align-items: center; gap: 10px; }
.lecteur__saut input { width: 78px; padding: 7px 10px; background: #101010; color: #fff;
  border: 1px solid #333; border-radius: 1px; font-family: var(--font-mono); font-size: 13px; }
.lecteur__autres { display: flex; gap: 18px; overflow-x: auto; }
.lecteur__autres a { font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; color: #7E7E7E; white-space: nowrap;
  transition: color .2s; }
.lecteur__autres a:hover { color: #fff; }

.panneau { position: absolute; top: 62px; bottom: 0; left: 0; width: 330px; background: #161616;
  border-right: 1px solid #262626; transform: translateX(-100%); transition: transform .3s var(--ease);
  display: flex; flex-direction: column; z-index: 5; }
.panneau.is-ouvert { transform: none; }
.panneau__tete { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #262626; }
.panneau__tete b { font-family: var(--font-display); font-weight: 800; font-size: 14px;
  text-transform: uppercase; }
.panneau__tete button { background: none; border: 0; color: #9A9A9A; cursor: pointer; }
.panneau__tete button:hover { color: #fff; }
.panneau__sections { padding: 14px; border-bottom: 1px solid #262626;
  max-height: 38vh; overflow-y: auto; }
.panneau__sections button { display: block; width: 100%; text-align: left; background: none;
  border: 0; color: #C9C9C9; padding: 9px 12px; border-radius: 1px; cursor: pointer;
  font-size: 14.5px; transition: all .18s; }
.panneau__sections button:hover { background: #222; color: #fff; padding-left: 17px; }
.panneau__minia { flex: 1; overflow-y: auto; padding: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
.mini { position: relative; border: 1px solid #2B2B2B; border-radius: 1px; overflow: hidden;
  background: #0D0D0D; cursor: pointer; padding: 0; }
.mini { min-height: 118px; }
.mini img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  display: block; opacity: .82; transition: opacity .2s; }
.mini:hover img { opacity: 1; }
.mini span { position: absolute; right: 3px; bottom: 3px; font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; color: #fff; background: rgba(0,0,0,.65);
  padding: 1px 5px; border-radius: 1px; }
.mini.is-actif { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

@media (max-width: 900px) {
  .lecteur__scene { padding: 14px 12px; }
  .lecteur__fleche { width: 44px; height: 44px; bottom: 12px; top: auto; transform: none; }
  .lecteur__fleche--g { left: 12px; }
  .lecteur__fleche--d { right: 12px; }
  .vue img { max-height: calc(100vh - 62px - 62px - 30px); }
  .lecteur__saut, .lecteur__autres { display: none; }
  .lecteur__titre b { font-size: 13px; }
  .panneau { width: 88%; }
  .lecteur__btn span { display: none; }
}

/* ==========================================================================
   33. SECTIONS IMAGE + TEXTE : L'IMAGE ÉPOUSE LA HAUTEUR DU TEXTE
   ========================================================================== */
/* Sans fond transparent, une image plus courte que sa colonne de texte laissait
   un vide. On étire donc le visuel sur toute la hauteur de la ligne, en
   recadrant au centre, avec des garde-fous mini/maxi. */
.split { align-items: stretch; }
.split__media { display: flex; flex-direction: column; }
.split__media picture { flex: 1 1 0; display: block; min-height: 300px;
  overflow: hidden; border-radius: var(--radius); }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.split__text { align-self: center; }
@media (max-width: 900px) {
  .split__media picture { min-height: 230px; max-height: 380px; }
}

/* ==========================================================================
   34. HERO D'ACCUEIL : DIAPORAMA DE FOND + ACCÈS DIRECT AUX CALCULATEURS
   ========================================================================== */
.diapo { position: absolute; inset: 0; overflow: hidden; }
.diapo__vue { position: absolute; inset: 0; opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 6s linear; pointer-events: none; }
.diapo__vue.is-actif { opacity: 1; transform: scale(1); pointer-events: auto; }
.diapo__vue picture, .diapo__vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diapo__legende { position: absolute; right: 26px; bottom: 88px; z-index: 3;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  padding: 7px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 1px;
  backdrop-filter: blur(6px); background: rgba(0,0,0,.25); }
.diapo__puces { position: absolute; right: 26px; bottom: 56px; z-index: 4; display: flex; gap: 7px; }
.diapo__puces button { width: 22px; height: 3px; border: 0; padding: 0; border-radius: 1px;
  background: rgba(255,255,255,.32); cursor: pointer; transition: background .3s, width .3s; }
.diapo__puces button.is-actif { background: var(--red); width: 34px; }

/* accès direct aux calculateurs */
.hero__calc { margin-top: 26px; }
.hero__calc-titre { display: block; font-family: var(--font-mono); font-weight: 600;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 12px; }
.hero__calc-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__calc-liens a { display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 1px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: rgba(0,0,0,.22);
  transition: all .22s var(--ease); }
.hero__calc-liens a .icon { color: var(--red); transition: color .22s; }
.hero__calc-liens a:hover { border-color: var(--red); background: var(--red); }
.hero__calc-liens a:hover .icon { color: #fff; }

@media (max-width: 900px) {
  .diapo__legende { display: none; }
  .diapo__puces { right: auto; left: 24px; bottom: 22px; }
  .hero__calc-liens a { font-size: 11.5px; padding: 8px 12px; }
}

/* ==========================================================================
   35. AVIS CLIENTS : EN-TÊTE, APPEL À AVIS GOOGLE, GRILLE 4 COLONNES
   ========================================================================== */
.avis-tete { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px;
  align-items: end; margin-bottom: 44px; }
.avis-cta { border: 1px solid var(--silver); border-radius: 1px; padding: 22px 24px; }
.section--dark .avis-cta { border-color: var(--charcoal-line); background: var(--charcoal-soft); }
.avis-cta__note { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.avis-cta__etoiles { color: #F5A623; letter-spacing: 3px; font-size: 16px; }
.avis-cta__note b { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.avis-cta p { font-size: 15px; color: var(--gray); line-height: 1.55; }
.section--dark .avis-cta p { color: var(--gray-light); }
.avis-cta__liens { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.avis-cta__voir { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red); }
.avis-cta__voir .icon { transition: transform .2s; }
.avis-cta__voir:hover .icon { transform: translateX(4px); }

/* la grille passe à 4 colonnes et les citations respirent */
.grid.avis-grille { gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.avis-grille .quote { padding: 26px 24px; margin: 0; }
.quote { margin: 0; }
.avis-grille .quote p { font-size: 15.5px; line-height: 1.62; }
.section:not(.section--dark) .quote { background: var(--offwhite, #F7F8FA); border-color: var(--silver); }
.section:not(.section--dark) .quote p { color: var(--charcoal); }
.section:not(.section--dark) .quote footer { border-top-color: var(--silver); }
.section:not(.section--dark) .quote footer span { color: var(--gray); }

/* 4e case : déposer un avis */
.section:not(.section--dark) .quote.quote--cta,
.section--dark .quote.quote--cta,
.quote.quote--cta { justify-content: center; text-align: left; gap: 12px;
  border: 1px dashed var(--red); background: rgba(227,30,36,.06); }
.quote--cta .quote__plus { color: var(--red); line-height: 0; }
.quote--cta b { font-family: var(--font-display); font-weight: 900; font-size: 19px;
  text-transform: uppercase; letter-spacing: -.01em; }
.quote--cta span { font-size: 15px; line-height: 1.55; color: var(--gray); }
.section--dark .quote--cta span { color: var(--gray-light); }
.quote--cta em { font-family: var(--font-mono); font-weight: 600; font-style: normal;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--red); margin-top: 4px; }
.quote.quote--cta:hover { background: rgba(227,30,36,.12); }

@media (max-width: 1100px) {
  .avis-tete { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .grid.avis-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .grid.avis-grille { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   36. BOUTONS : DOUBLE VOLET DIAGONAL + LIBELLÉ REMPLACÉ
   ========================================================================== */
/* Deux bandes en biais se referment depuis la gauche et la droite pendant que
   le libellé sort par le haut et qu'un appel à l'action entre par le bas.
   Les volets et le second libellé sont ajoutés par le script ; sans JavaScript,
   le bouton garde un remplissage en diagonale simple (règles plus bas). */
.btn { position: relative; overflow: hidden; isolation: isolate; }

/* --- version enrichie par le script --- */
.btn--anim > i {
  position: absolute; left: -12%; width: 124%; height: 52%; z-index: 1;
  transform: translateX(-118%) skewX(-20deg);
  transition: transform .45s var(--ease); pointer-events: none;
}
.btn--anim > i:nth-of-type(1) { top: 0; }
.btn--anim > i:nth-of-type(2) { bottom: 0; transform: translateX(118%) skewX(-20deg); }
.btn--anim:hover > i, .btn--anim:focus-visible > i { transform: translateX(0) skewX(-20deg); }

.btn--anim .lib {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px;
  transition: transform .4s var(--ease), opacity .28s var(--ease);
}
.btn--anim .lib--2 {
  position: absolute; inset: 0; justify-content: center;
  transform: translateY(105%); opacity: 0; white-space: nowrap;
}
.btn--anim:hover .lib--1, .btn--anim:focus-visible .lib--1 { transform: translateY(-105%); opacity: 0; }
.btn--anim:hover .lib--2, .btn--anim:focus-visible .lib--2 { transform: translateY(0); opacity: 1; }

/* couleur des volets selon la variante */
.btn--red > i    { background: var(--charcoal); }
.btn--dark > i   { background: var(--red); }
.btn--light > i  { background: var(--red); }
.btn--ghost > i  { background: var(--red); }

/* fonds au repos */
.btn--red   { background-color: var(--red); color: var(--white); }
.btn--dark  { background-color: var(--charcoal); color: var(--white); }
.btn--light { background-color: var(--white); color: var(--charcoal); }
.btn--ghost { background-color: transparent; }

/* à l'arrivée, le texte passe en blanc sur tous les fonds */
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn--red:hover, .btn--dark:hover, .btn--ghost:hover,
.btn--red:focus-visible, .btn--dark:focus-visible, .btn--ghost:focus-visible { color: var(--white); }
.btn--light:hover, .btn--light:focus-visible { color: var(--white); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--red); }

/* --- repli sans JavaScript : remplissage diagonal simple --- */
.btn:not(.btn--anim) {
  background-repeat: no-repeat; background-size: 230% 100%; background-position: 100% 0;
  transition: background-position .5s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .25s var(--ease);
}
.btn--red:not(.btn--anim)   { background-image: linear-gradient(114deg, var(--charcoal) 0 50%, rgba(0,0,0,0) 50%); }
.btn--dark:not(.btn--anim)  { background-image: linear-gradient(114deg, var(--red) 0 50%, rgba(0,0,0,0) 50%); }
.btn--light:not(.btn--anim) { background-image: linear-gradient(114deg, var(--red) 0 50%, rgba(0,0,0,0) 50%); }
.btn--ghost:not(.btn--anim) { background-image: linear-gradient(114deg, var(--red) 0 50%, rgba(0,0,0,0) 50%); }
.btn:not(.btn--anim):hover, .btn:not(.btn--anim):focus-visible { background-position: 0 0; }

/* le petit bouton du menu garde le remplissage simple, sans changement de libellé */
.btn--xs { background-image: linear-gradient(114deg, var(--charcoal) 0 50%, rgba(0,0,0,0) 50%); }

@media (prefers-reduced-motion: reduce) {
  .btn--anim > i, .btn--anim .lib { transition: none; }
}

/* ==========================================================================
   37. PAGE DE TRAVAIL « BIBLIOTHÈQUE DE SECTIONS » (non publiée)
   ========================================================================== */
.demo-tete { padding: 72px 0 48px; background: var(--charcoal); color: var(--white);
  margin-top: calc(-1 * var(--nav-h)); }   /* pas de barre de menu sur cette page */
.demo-tete .lead { max-width: 720px; margin-top: 20px; color: var(--gray-light); }
.demo-sommaire { background: #141414; color: var(--white); padding: 30px 0 34px;
  border-top: 1px solid var(--charcoal-line); border-bottom: 1px solid var(--charcoal-line); }
.demo-fam { display: flex; align-items: baseline; gap: 18px; padding: 9px 0; flex-wrap: wrap; }
.demo-fam > b { font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light);
  min-width: 190px; flex: 0 0 auto; }
.demo-fam > div { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-fam a { font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
  letter-spacing: .04em; color: var(--white); border: 1px solid var(--charcoal-line);
  padding: 5px 10px; border-radius: 1px; transition: all .2s; }
.demo-fam a:hover { border-color: var(--red); color: var(--red); }

.demo-bloc { background: var(--red); color: var(--white); padding: 16px 0; scroll-margin-top: 120px; }
.demo-bloc__tete { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.demo-nom { font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; background: rgba(0,0,0,.28); padding: 5px 12px; border-radius: 1px;
  white-space: nowrap; }
.demo-bloc__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.demo-bloc__txt b { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.demo-bloc__txt span { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.86); max-width: 820px; }
.demo-note { background: #141414; color: var(--gray-light); padding: 40px 0; font-size: 15.5px; }

/* ==========================================================================
   38. NOUVELLES MISES EN PAGE DE SECTION
   ========================================================================== */
/* --- plan-de-pose : colonne fixe + vues qui défilent --- */
.plan { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 64px; }
.plan__txt { position: sticky; top: 130px; align-self: start; }
.plan__liste { margin-top: 28px; border-top: 1px solid var(--charcoal-line); }
.section:not(.section--dark) .plan__liste { border-top-color: var(--silver); }
.plan__liste div { display: flex; gap: 16px; padding: 13px 0; font-size: 15.5px;
  border-bottom: 1px solid var(--charcoal-line); }
.section:not(.section--dark) .plan__liste div { border-bottom-color: var(--silver); }
.plan__liste em { font-family: var(--font-mono); font-weight: 700; font-style: normal;
  font-size: 13px; letter-spacing: .1em; color: var(--red); white-space: nowrap;
  min-width: 62px; flex: 0 0 auto; padding-top: 2px; text-transform: uppercase; }
.plan__vues { display: grid; gap: 24px; }
.plan__vue { position: relative; margin: 0; overflow: hidden; }
.plan__vue img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.plan__vue figcaption { position: absolute; left: 0; bottom: 0; background: var(--charcoal);
  color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; }

/* --- regle-graduee --- */
.frise__sous { max-width: 620px; margin-top: 16px; }
.frise__piste { position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; padding-top: 48px; margin-top: 44px; }
.frise__piste::before { content: ''; position: absolute; top: 22px; left: 0; right: 0; height: 2px;
  background: var(--charcoal-line); }
.section:not(.section--dark) .frise__piste::before { background: var(--silver); }
.frise__piste::after { content: ''; position: absolute; top: 16px; left: 0; right: 0; height: 14px;
  background: repeating-linear-gradient(90deg, var(--charcoal-line) 0 1px, transparent 1px 28px); }
.section:not(.section--dark) .frise__piste::after {
  background: repeating-linear-gradient(90deg, var(--silver) 0 1px, transparent 1px 28px); }
.jalon { position: relative; }
.jalon::before { content: ''; position: absolute; top: -34px; left: 0; width: 14px; height: 14px;
  background: var(--red); border-radius: 50%; box-shadow: 0 0 0 6px var(--white); }
.section--dark .jalon::before { box-shadow: 0 0 0 6px var(--charcoal); }
.jalon em { display: block; font-family: var(--font-mono); font-weight: 600; font-style: normal;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 9px; }
.jalon b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16.5px;
  margin-bottom: 7px; }
.jalon span { font-size: 15px; color: var(--gray-light); }
.section:not(.section--dark) .jalon span { color: var(--gray); }

/* --- nuancier --- */
.nuancier__grille { display: grid; gap: 2px; background: var(--charcoal-line);
  border: 1px solid var(--charcoal-line); }
.nuancier--6 { grid-template-columns: repeat(6, 1fr); }
.nuancier--4 { grid-template-columns: repeat(4, 1fr); }
.nuance { position: relative; aspect-ratio: 3 / 4; background: var(--charcoal-soft); overflow: hidden; }
.nuance i { position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .6s var(--ease); }
.nuance:hover i { transform: scale(1.07); }
.nuance b { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 10px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.86)); font-family: var(--font-mono);
  font-weight: 600; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.nuance u { position: absolute; left: 10px; top: 10px; text-decoration: none; color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; background: var(--red); padding: 3px 7px; opacity: 0;
  transform: translateY(-6px); transition: all .3s var(--ease); }
.nuance:hover u { opacity: 1; transform: none; }

/* --- fiche-technique --- */
.fiche__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px;
  align-items: start; }
.specs { border-top: 2px solid var(--red); }
.specs > div { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 20px; padding: 15px 0;
  border-bottom: 1px solid var(--silver); }
.section--dark .specs > div { border-bottom-color: var(--charcoal-line); }
.specs dt { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--gray); padding-top: 3px; }
.section--dark .specs dt { color: var(--gray-light); }
.specs dd { font-size: 16px; }

/* --- empilement --- */
.pile__carte { position: sticky; top: 130px; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--silver);
  background: var(--white); margin-bottom: 24px; overflow: hidden; }
.section--dark .pile__carte { border-color: var(--charcoal-line); background: var(--charcoal); }
.pile__carte img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.pile__txt { padding: 42px 40px; }
.pile__txt em { font-family: var(--font-mono); font-weight: 700; font-style: normal; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.pile__txt h3 { font-family: var(--font-display); font-weight: 900; font-size: clamp(21px, 2.3vw, 29px);
  text-transform: uppercase; line-height: 1.04; margin: 12px 0 13px; }
.pile__txt p { color: var(--gray); font-size: 16px; }
.section--dark .pile__txt p { color: var(--gray-light); }

/* --- onglets --- */
.onglets__barre { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--charcoal-line);
  margin-bottom: 38px; }
.section:not(.section--dark) .onglets__barre { border-bottom-color: var(--silver); }
.onglets__barre button { background: none; border: 0; cursor: pointer; padding: 14px 22px;
  color: var(--gray-light); font-family: var(--font-mono); font-weight: 600; font-size: 13.5px;
  letter-spacing: .09em; text-transform: uppercase; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all .2s; }
.section:not(.section--dark) .onglets__barre button { color: var(--gray); }
.onglets__barre button[aria-selected="true"] { color: var(--red); border-bottom-color: var(--red); }
.onglet { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px;
  align-items: center; }
.onglet[data-actif] { display: grid; }
.onglet img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.onglet h3 { font-family: var(--font-display); font-weight: 900; font-size: 26px;
  text-transform: uppercase; margin-bottom: 13px; }
.onglet p { font-size: 16.5px; color: var(--gray-light); margin-bottom: 18px; }
.section:not(.section--dark) .onglet p { color: var(--gray); }
.onglet ul { list-style: none; display: grid; gap: 10px; }
.onglet li { display: flex; gap: 12px; font-size: 15.5px; }
.onglet li::before { content: ''; width: 6px; height: 6px; background: var(--red); margin-top: 9px;
  flex: 0 0 auto; }

/* --- chiffre-geant --- */
.geant__in { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 64px;
  align-items: center; }
.geant__in > b { font-family: var(--font-display); font-weight: 900;
  font-size: clamp(96px, 15vw, 220px); line-height: .78; letter-spacing: -.05em; display: block; }
.geant__in > b i { font-style: normal; color: var(--red); }
.geant__note { margin-top: 20px; font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

/* --- citation-plein --- */
.parole { position: relative; padding: 120px 0; overflow: hidden; color: #fff; }
.parole picture, .parole .parole__fond { position: absolute; inset: 0; }
.parole img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.34) grayscale(.35); }
.parole__in { position: relative; z-index: 2; }
.parole blockquote { font-family: var(--font-display); font-weight: 900;
  font-size: clamp(25px, 4vw, 52px); line-height: 1.05; text-transform: uppercase;
  letter-spacing: -.02em; max-width: 1000px; }
.parole blockquote span { color: var(--red); }
.parole footer { margin-top: 32px; display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-light); }
.parole footer::before { content: ''; width: 46px; height: 2px; background: var(--red); }

/* --- mosaique --- */
.mosa__grille { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; }
.mosa__c { position: relative; margin: 0; overflow: hidden; }
.mosa__c img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mosa__c:hover img { transform: scale(1.06); }
.mosa__c picture { display: block; width: 100%; height: 100%; }
.mosa__c figcaption { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-mono);
  font-weight: 600; font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,.66); padding: 6px 10px; }
.mosa__c--g { grid-column: span 2; grid-row: span 2; }
.mosa__c--h { grid-row: span 2; }
.mosa__c--l { grid-column: span 2; }

/* --- comparatif --- */
.compa__grille { display: grid; grid-template-columns: 190px repeat(3, 1fr);
  border: 1px solid var(--silver); }
.section--dark .compa__grille { border-color: var(--charcoal-line); }
.compa__grille > div { padding: 16px 18px; border-bottom: 1px solid var(--silver); font-size: 15.5px; }
.section--dark .compa__grille > div { border-bottom-color: var(--charcoal-line); }
.compa__grille > div:nth-child(4n+1) { font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--gray); background: rgba(0,0,0,.03); }
.section--dark .compa__grille > div:nth-child(4n+1) { color: var(--gray-light);
  background: rgba(255,255,255,.03); }
.compa__tete { font-family: var(--font-display); font-weight: 900; font-size: 17px;
  text-transform: uppercase; position: relative; }
.compa__reco { background: rgba(227,30,36,.06); }
.compa__badge { position: absolute; top: -11px; left: 18px; background: var(--red); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 9px; }

@media (max-width: 1000px) {
  .plan, .fiche__in, .geant__in, .onglet, .pile__carte { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .plan__txt, .pile__carte { position: static; }
  .frise__piste { grid-template-columns: repeat(2, 1fr); gap: 42px 24px; }
  .nuancier--6 { grid-template-columns: repeat(3, 1fr); }
  .mosa__grille { grid-template-columns: repeat(2, 1fr); }
  .compa__grille { grid-template-columns: minmax(0, 1fr); border: 0; }
  .compa__grille > div { border: 1px solid var(--silver); margin-bottom: -1px; }
  .section--dark .compa__grille > div { border-color: var(--charcoal-line); }
  .compa__badge { position: static; display: inline-block; margin-right: 8px; }
}
@media (max-width: 600px) {
  .nuancier--6, .nuancier--4 { grid-template-columns: repeat(2, 1fr); }
  .mosa__grille { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .mosa__c--g, .mosa__c--l { grid-column: span 1; }
  .pile__txt { padding: 30px 24px; }
}

/* ===========================================================================
   39. ÉCHANTILLONS (nuancier de matières, sans photo)
   =========================================================================== */
.ech__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--charcoal-line); border: 1px solid var(--charcoal-line); }
.section:not(.section--dark) .ech__grille { background: var(--silver); border-color: var(--silver); }
.ech { background: var(--charcoal); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.section:not(.section--dark) .ech { background: #fff; }
.ech i { display: block; height: 88px; border: 1px solid rgba(255,255,255,.09); }
.section:not(.section--dark) .ech i { border-color: rgba(0,0,0,.10); }
.ech u { text-decoration: none; font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--red); }
.ech b { font-family: var(--font-display); font-weight: 800; font-size: 15.5px;
  text-transform: uppercase; letter-spacing: .005em; line-height: 1.2; }

/* l'onglet : le visuel épouse la hauteur du panneau */
.onglet { align-items: stretch; }
.onglet > picture { display: block; height: 100%; }
.onglet picture img { height: 100%; min-height: 320px; aspect-ratio: auto; object-fit: cover; }
.onglet > div { align-self: center; }

@media (max-width: 1000px) {
  .ech__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onglet picture img { min-height: 240px; height: auto; aspect-ratio: 4 / 3; }
}

/* ===========================================================================
   40. BIBLIOTHÈQUE 3 — nouvelles sections
   =========================================================================== */

/* --- sommaire-ancre : rail d'ancres collant --- */
.ancres { position: sticky; top: var(--nav-h); z-index: 40; background: var(--white);
  border-bottom: 1px solid var(--silver); }
.ancres__in { display: flex; align-items: center; gap: 26px; height: 56px; }
.ancres__lib { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray-light);
  flex: 0 0 auto; }
.ancres__liens { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.ancres__liens::-webkit-scrollbar { display: none; }
.ancres__liens a { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 13.5px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding: 4px 0;
  border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; }
.ancres__liens a:hover, .ancres__liens a.est-ici { color: var(--red); border-bottom-color: var(--red); }

/* --- bento : grille asymétrique --- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--silver); border: 1px solid var(--silver); }
.section--dark .bento { background: var(--charcoal-line); border-color: var(--charcoal-line); }
.bento__c { background: var(--white); padding: 30px; min-height: 210px; margin: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.section--dark .bento__c { background: var(--charcoal); }
.bento__c--2 { grid-column: span 2; }
.bento__c--3 { grid-column: span 3; }
.bento__c--h2 { grid-row: span 2; }
.bento__c--photo { padding: 0; position: relative; overflow: hidden; }
.bento__c--photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bento__c--photo figcaption { position: relative; z-index: 2; margin: auto 0 0; padding: 14px 18px;
  background: rgba(26,26,26,.82); color: var(--white); font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  align-self: flex-start; }
.bento__c--stat b { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 5vw, 68px);
  line-height: .9; letter-spacing: -.04em; display: block; }
.bento__c--stat span { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.bento__c--cit { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.3;
  letter-spacing: -.01em; }
.bento__c--cit cite { display: block; margin-top: 16px; font-family: var(--font-mono); font-style: normal;
  font-weight: var(--mono-weight); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-light); }
.bento__c--txt h3, .bento__c--cta h3 { font-size: 19px; font-weight: 800; text-transform: uppercase;
  margin-bottom: 6px; }
.bento__c--txt p { font-size: 15.5px; color: var(--gray); margin: 0; }
.section--dark .bento__c--txt p { color: var(--gray-light); }
.bento__c--cta { justify-content: center; align-items: flex-start; gap: 18px; }

/* --- rail-cartes : défilement horizontal --- */
.rail__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-bottom: 36px; }
.rail__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.rail__b { width: 46px; height: 46px; border: 1px solid var(--charcoal-line); display: grid;
  place-items: center; transition: background .2s, border-color .2s; }
.section:not(.section--dark) .rail__b { border-color: var(--silver); }
.rail__b:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.rail__b[data-rail="-1"] svg { transform: rotate(180deg); }
.rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding: 0 max(24px, calc((100vw - var(--container)) / 2));
  scroll-padding-left: max(24px, calc((100vw - var(--container)) / 2)); }
.rail::-webkit-scrollbar { display: none; }
.rail__c { flex: 0 0 340px; scroll-snap-align: start; }
.rail__c img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rail__c em { display: block; margin: 16px 0 6px; font-family: var(--font-mono); font-style: normal;
  font-weight: var(--mono-weight); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--red); }
.rail__c h3 { font-size: 19px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.rail__c p { font-size: 15.5px; color: var(--gray-light); margin: 0; }
.section:not(.section--dark) .rail__c p { color: var(--gray); }

/* --- accordeon-visuel --- */
.accv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px;
  align-items: start; }
.accv__l { border-top: 1px solid var(--silver); }
.section--dark .accv__l { border-top-color: var(--charcoal-line); }
.accv__l:last-child { border-bottom: 1px solid var(--silver); }
.section--dark .accv__l:last-child { border-bottom-color: var(--charcoal-line); }
.accv__l button { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 0;
  text-align: left; }
.accv__n { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  letter-spacing: .12em; color: var(--red); flex: 0 0 auto; }
.accv__t { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase;
  letter-spacing: -.01em; flex: 1 1 auto; }
.accv__l button i { width: 12px; height: 12px; position: relative; flex: 0 0 auto; }
.accv__l button i::before, .accv__l button i::after { content: ''; position: absolute; background: currentColor;
  transition: transform .25s var(--ease); }
.accv__l button i::before { inset: 5px 0; height: 2px; }
.accv__l button i::after { inset: 0 5px; width: 2px; }
.accv__l[data-ouvert] button i::after { transform: scaleY(0); }
.accv__l[data-ouvert] .accv__t { color: var(--red); }
.accv__p { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.accv__l[data-ouvert] .accv__p { max-height: 320px; }
.accv__p p { padding-bottom: 24px; font-size: 16px; color: var(--gray); max-width: 52ch; }
.section--dark .accv__p p { color: var(--gray-light); }
.accv__vues { position: relative; }
.accv__vues { aspect-ratio: 4 / 3; }
.accv__v { margin: 0; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease);
  position: absolute; inset: 0; }
.accv__v img { width: 100%; height: 100%; object-fit: cover; }
.accv__v[data-ouvert] { opacity: 1; visibility: visible; }

/* --- objections : idée reçue / réalité --- */
.obj { display: grid; gap: 1px; background: var(--silver); border: 1px solid var(--silver); }
.section--dark .obj { background: var(--charcoal-line); border-color: var(--charcoal-line); }
.obj__p { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: inherit; }
.obj__a, .obj__b { background: var(--white); padding: 26px 30px; }
.section--dark .obj__a, .section--dark .obj__b { background: var(--charcoal); }
.obj__a { color: var(--gray); }
.section--dark .obj__a { color: var(--gray-light); }
.obj__a span, .obj__b span { display: block; margin-bottom: 8px; font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; }
.obj__a span { color: var(--gray-light); }
.obj__b span { color: var(--red); }
.obj__a p { margin: 0; font-size: 16.5px; font-style: italic; }
.obj__a p::before { content: ''; display: inline-block; width: 14px; height: 1.5px;
  background: var(--red); vertical-align: middle; margin-right: 10px; }
.obj__b p { margin: 0; font-size: 16.5px; font-weight: 400; }

/* --- prix-cartes --- */
.prix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.prix__c { position: relative; border: 1px solid var(--silver); padding: 34px 30px 30px;
  display: flex; flex-direction: column; gap: 14px; }
.section--dark .prix__c { border-color: var(--charcoal-line); }
.prix__c--reco { border-color: var(--charcoal); box-shadow: 0 0 0 1px var(--charcoal); }
.section--dark .prix__c--reco { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.prix__badge { position: absolute; top: -11px; left: 30px; background: var(--red); color: var(--white);
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 10px; }
.prix__c h3 { font-size: 20px; font-weight: 800; text-transform: uppercase; }
.prix__n { display: flex; flex-direction: column; gap: 2px; }
.prix__n b { font-family: var(--font-display); font-weight: 900; font-size: 42px; letter-spacing: -.03em;
  line-height: 1; }
.prix__n span { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.prix__c > p { font-size: 15.5px; color: var(--gray); margin: 0; }
.section--dark .prix__c > p { color: var(--gray-light); }
.prix__c ul { display: grid; gap: 9px; margin: 4px 0 auto; }
.prix__c li { display: flex; gap: 11px; font-size: 15px; }
.prix__c li::before { content: ''; width: 6px; height: 6px; background: var(--red); margin-top: 8px;
  flex: 0 0 auto; }
.prix__c .btn { margin-top: 20px; align-self: flex-start; }

/* --- zone-couverture --- */
.zone { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 56px;
  align-items: start; }
.zone__note { margin-top: 18px; font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.zone__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.zone__liste a, .zone__liste span { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 13px; letter-spacing: .09em; text-transform: uppercase; padding: 9px 14px;
  border: 1px solid var(--charcoal-line); transition: background .2s, border-color .2s, color .2s; }
.section:not(.section--dark) .zone__liste a, .section:not(.section--dark) .zone__liste span {
  border-color: var(--silver); }
.zone__liste a:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.zone__liste span { color: var(--gray-light); }

/* --- temoignage-vedette --- */
.vedette { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 56px;
  align-items: center; }
.vedette__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vedette__txt blockquote { margin: 18px 0 22px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.22; letter-spacing: -.02em; }
.vedette__txt footer { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vedette__txt footer b { font-family: var(--font-display); font-weight: 800; font-size: 16px;
  text-transform: uppercase; }
.vedette__txt footer span { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.vedette__rep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--silver); }
.section--dark .vedette__rep { border-top-color: var(--charcoal-line); }
.vedette__rep b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 26px;
  letter-spacing: -.03em; }
.vedette__rep span { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

@media (max-width: 1000px) {
  .accv__vues { aspect-ratio: 16 / 10; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__c--3 { grid-column: span 2; }
  .accv, .zone, .vedette { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .accv__v { position: relative; }
  .accv__v:not([data-ouvert]) { display: none; }
  .prix { grid-template-columns: minmax(0, 1fr); }
  .rail__tete { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__c--2, .bento__c--3 { grid-column: span 1; }
  .bento__c--h2 { grid-row: span 1; }
  .obj__p { grid-template-columns: minmax(0, 1fr); }
  .rail__c { flex: 0 0 78vw; }
  .vedette__rep { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* ===========================================================================
   41. ACCUEIL — variantes de bandeau et point d'entrée
   =========================================================================== */
.hero--court .hero__inner { padding-top: 130px; padding-bottom: 90px; }
.hero--texte { background: var(--charcoal); color: var(--white); }
.hero--texte .hero__inner { padding-top: 150px; padding-bottom: 110px; }
.hero--texte .h-xxl { max-width: 15ch; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.hero--texte .lead, .hero--texte .btn-row { max-width: 640px; }
.hero--texte .h-xxl { color: var(--white); }

.choix__sec { padding-top: 0; margin-top: -64px; position: relative; z-index: 5; }
.choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--silver); border: 1px solid var(--silver); box-shadow: 0 24px 60px rgba(0,0,0,.16); }
.choix__c { background: var(--white); padding: 30px 26px 26px; display: flex; flex-direction: column;
  gap: 10px; min-height: 172px; position: relative; transition: background .25s var(--ease); }
.choix__c:hover { background: var(--charcoal); color: var(--white); }
.choix__i { color: var(--red); }
.choix__c b { font-family: var(--font-display); font-weight: 800; font-size: 19px;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15; }
.choix__c em { font-family: var(--font-mono); font-style: normal; font-weight: var(--mono-weight);
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.choix__f { margin-top: auto; padding-top: 12px; color: var(--gray-light); transition: transform .25s var(--ease); }
.choix__c:hover .choix__f { transform: translateX(6px); color: var(--white); }

@media (max-width: 1000px) {
  .choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choix__sec { margin-top: -40px; }
}
@media (max-width: 600px) {
  .choix { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   42. ESTIMATEURS & BANDEAU MOSAÏQUE
   =========================================================================== */
.estim__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 48px;
  align-items: end; margin-bottom: 42px; }
.estim { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--charcoal-line); border: 1px solid var(--charcoal-line); }
.section:not(.section--dark) .estim { background: var(--silver); border-color: var(--silver); }
.estim__c { background: var(--charcoal); padding: 30px 26px 26px; display: flex; flex-direction: column;
  gap: 12px; position: relative; transition: background .28s var(--ease); }
.section:not(.section--dark) .estim__c { background: var(--white); }
.estim__c:hover { background: var(--red); }
.estim__n { position: absolute; top: 22px; right: 24px; font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 12px; letter-spacing: .14em; color: var(--gray-light); }
.estim__c:hover .estim__n { color: rgba(255,255,255,.7); }
.estim__i { color: var(--red); }
.estim__c:hover .estim__i, .estim__c:hover .estim__p em { color: var(--white); }
.estim__c h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15; min-height: 2.3em; }
.estim__p { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.estim__p em { font-family: var(--font-mono); font-style: normal; font-weight: var(--mono-weight);
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.estim__p b { font-family: var(--font-display); font-weight: 900; font-size: 34px;
  letter-spacing: -.03em; line-height: 1; }
.estim__c ul { display: grid; gap: 8px; margin: 6px 0 auto; }
.estim__c li { display: flex; gap: 10px; font-size: 14.5px; color: var(--gray-light); }
.section:not(.section--dark) .estim__c li { color: var(--gray); }
.estim__c:hover li { color: rgba(255,255,255,.92); }
.estim__c li::before { content: ''; width: 5px; height: 5px; background: var(--red); margin-top: 8px;
  flex: 0 0 auto; }
.estim__c:hover li::before { background: var(--white); }
.estim__go { display: flex; align-items: center; gap: 9px; margin-top: 22px;
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; }
.estim__c:hover .estim__go { color: var(--white); }

.hero--mosaique { background: var(--charcoal); color: var(--white); }
.hero--mosaique .h-xxl { color: var(--white); }
.mosa-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 64px;
  align-items: center; padding-top: 140px; padding-bottom: 110px; }
.mosa-hero .h-xxl { font-size: clamp(38px, 4.3vw, 68px); }
.mosa-hero__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mosa-hero__grille figure { margin: 0; position: relative; }
.mosa-hero__grille img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mosa-hero__grille figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 10px;
  background: rgba(26,26,26,.85); font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.mosa-hero__grille figure:nth-child(2) { transform: translateY(28px); }
.mosa-hero__grille figure:nth-child(5) { transform: translateY(28px); }

@media (max-width: 1000px) {
  .estim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estim__tete { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .mosa-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 120px; }
  .mosa-hero__grille figure:nth-child(2), .mosa-hero__grille figure:nth-child(5) { transform: none; }
}
@media (max-width: 600px) {
  .estim { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   43. COLONNE DE DROITE DES ARTICLES — widgets contextuels
   =========================================================================== */
.colonne { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 24px); }
.wg { border: 1px solid var(--silver); padding: 24px 22px; background: var(--white); }
.wg__lib { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--red); margin-bottom: 12px; }
.wg__lib svg { flex: 0 0 auto; }
.wg h3 { font-family: var(--font-display); font-weight: 800; font-size: 17.5px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px; }
.wg p { font-size: 15px; line-height: 1.55; color: var(--gray); margin: 0 0 16px; }
.wg .btn { margin-top: 2px; }
.wg .card__link { font-size: 13px; }
.wg__liens { display: grid; gap: 12px; margin: 0; }
.wg__liens li { font-size: 14.5px; line-height: 1.4; }
.wg__liens a { display: block; }
.wg__liens b { font-weight: 600; }
.wg__liens a:hover b { color: var(--red); }
.wg form { display: grid; gap: 9px; }
.wg input { width: 100%; padding: 11px 13px; font-size: 15px; border: 1px solid var(--silver);
  background: var(--white); border-radius: var(--radius); }
.wg input::placeholder { color: var(--gray-light); }
.wg input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.wg small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--gray-light);
  line-height: 1.4; }

/* variante rouge : demande de rappel */
.wg--rappel { background: var(--red); border-color: var(--red); color: var(--white); }
.wg--rappel .wg__lib, .wg--rappel h3 { color: var(--white); }
.wg--rappel p { color: rgba(255,255,255,.92); }
.wg--rappel input { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12);
  color: var(--white); }
.wg--rappel input::placeholder { color: rgba(255,255,255,.75); }
.wg--rappel input:focus { outline-color: var(--white); }
.wg--rappel .btn { background: var(--white); color: var(--charcoal); border: 0; }
.wg--rappel .btn:hover { background: var(--charcoal); color: var(--white); }

/* variante sombre : lettre d'information */
.wg--lettre { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.wg--lettre h3 { color: var(--white); text-transform: none; font-size: 17px; }
.wg--lettre p { color: #B9B9B9; }
.wg--lettre input { border-color: var(--charcoal-line); background: var(--charcoal-soft);
  color: var(--white); }
.wg--lettre .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.5); }
.wg--lettre .btn--ghost:hover { background: var(--white); color: var(--charcoal); }
.wg--lettre small { color: var(--gray-light); }

/* accents discrets */
.wg--calc { border-left: 3px solid var(--red); }
.wg--cat { background: var(--off-white); }
.wg--avis .wg__lib { color: var(--charcoal); }

@media (max-width: 1100px) {
  .colonne { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg--lettre, .wg--rappel { grid-column: span 2; }
}
@media (max-width: 720px) {
  .colonne { grid-template-columns: minmax(0, 1fr); }
  .wg--lettre, .wg--rappel { grid-column: span 1; }
}

/* --- retour d'envoi des formulaires --- */
.form-avis { margin: 14px 0 0; font-size: 14.5px; line-height: 1.45; padding-left: 14px;
  border-left: 2px solid var(--silver); }
.form-avis--ok { border-left-color: #1f7a3d; color: #1f7a3d; }
.form-avis--ko { border-left-color: var(--red); color: var(--red); }
.wg--rappel .form-avis, .wg--lettre .form-avis { color: var(--white); border-left-color: var(--white); }

/* ===========================================================================
   44. PAGES TUNNEL (publicité Meta) — sans menu, formulaire d'abord
   =========================================================================== */
.lp-tete { position: sticky; top: 0; z-index: 60; background: var(--charcoal); color: var(--white); }
.lp-tete__in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.lp-logo { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.lp-logo span { color: var(--red); }
.lp-tel { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 15px; letter-spacing: .06em; }
.lp-tel:hover { color: var(--red); }

.lp-hero { position: relative; background: var(--charcoal); color: var(--white); overflow: hidden; }
.lp-hero .hero-media { position: absolute; inset: 0; opacity: .30; }
.lp-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.lp-hero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(26,26,26,.94) 0%, rgba(26,26,26,.72) 55%, rgba(26,26,26,.5) 100%); }
.lp-hero__in { position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center;
  padding-top: 62px; padding-bottom: 62px; }
.lp-hero__txt .h-xl { color: var(--white); margin: 16px 0 20px; }
.lp-hero__txt .lead { color: #D2D2D2; max-width: 34em; }
.lp-puces { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.lp-puces span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.lp-puces svg { color: var(--red); }

.lp-carte { background: var(--white); color: var(--charcoal); padding: 28px 26px;
  box-shadow: 0 28px 70px rgba(0,0,0,.35); }
.lp-carte--sombre { box-shadow: none; }
.lp-carte__lib { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 11.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--red); }
.lp-carte h2 { font-family: var(--font-display); font-weight: 900; font-size: 24px;
  text-transform: uppercase; line-height: 1.05; margin: 10px 0 10px; }
.lp-carte > p { font-size: 15.5px; color: var(--gray); margin-bottom: 18px; }
.lp-form { display: grid; gap: 10px; }
.lp-form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-form input[type=text], .lp-form input[type=tel] { width: 100%; padding: 13px 14px; font-size: 16px;
  border: 1px solid var(--silver); border-radius: var(--radius); background: var(--white); }
.lp-form input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.lp-form small { font-size: 12.5px; color: var(--gray-light); line-height: 1.45; }

.lp-confiance { background: var(--red); color: var(--white); }
.lp-confiance__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; padding: 26px 0; }
.lp-confiance b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 30px;
  letter-spacing: -.03em; line-height: 1; }
.lp-confiance span { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; }

.lp-sec-tete { max-width: 700px; margin-bottom: 38px; }
.lp-sec-tete .h-lg { margin: 14px 0 14px; }
.lp-sec-tete .lead { color: var(--gray); }
.section--dark .lp-sec-tete .lead { color: #B0B0B0; }

.lp-formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lp-f { border: 1px solid var(--silver); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.lp-f h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.lp-f__prix em { display: block; font-family: var(--font-mono); font-style: normal;
  font-weight: var(--mono-weight); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); }
.lp-f__prix b { font-family: var(--font-display); font-weight: 900; font-size: 32px; letter-spacing: -.03em; }
.lp-f > p { font-size: 15.5px; color: var(--gray); margin: 0; }
.lp-f ul { display: grid; gap: 8px; margin-top: 2px; }
.lp-f li { display: flex; gap: 11px; font-size: 15px; }
.lp-f li::before { content: ''; width: 6px; height: 6px; background: var(--red); margin-top: 8px; flex: 0 0 auto; }

.lp-galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lp-galerie figure { margin: 0; }
.lp-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lp-galerie figcaption { margin-top: 10px; font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }

.lp-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.lp-etapes em { font-family: var(--font-mono); font-style: normal; font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: .14em; color: var(--red); }
.lp-etapes h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px;
  text-transform: uppercase; margin: 8px 0 8px; }
.lp-etapes p { font-size: 15.5px; color: var(--gray); margin: 0; }

.lp-obj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--silver); border: 1px solid var(--silver); }
.lp-obj > div { background: var(--white); padding: 26px 28px; }
.lp-obj h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin-bottom: 10px;
  color: var(--charcoal); }
.lp-obj p { font-size: 15.5px; color: var(--gray); margin: 0; }

.lp-final__in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: center; }
.lp-final .lead { color: #C4C4C4; }
.lp-final .lead a { text-decoration: underline; }

.lp-pied { background: var(--charcoal); color: var(--gray-light); padding: 34px 0 90px; font-size: 13.5px; }
.lp-pied a { text-decoration: underline; }
.lp-pied p { margin-bottom: 8px; }

.lp-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(26,26,26,.96); backdrop-filter: blur(6px); }
.lp-barre .btn { flex: 1 1 auto; justify-content: center; }
.lp-barre .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.5); }
/* le téléphone reste accessible mais ne concurrence pas le formulaire */
.lp-barre__tel { flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; width: 46px; align-self: stretch;
  border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.7); }
.lp-barre__tel .icon { color: inherit; }
.lp-barre__tel:hover { color: var(--white); border-color: rgba(255,255,255,.55); }

@media (max-width: 1000px) {
  .lp-hero__in, .lp-final__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-formules, .lp-etapes { grid-template-columns: minmax(0, 1fr); }
  .lp-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-obj { grid-template-columns: minmax(0, 1fr); }
  .lp-confiance__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-barre { display: flex; }
}
@media (max-width: 560px) {
  .lp-form__ligne { grid-template-columns: minmax(0, 1fr); }
  .lp-hero__in { padding-top: 40px; padding-bottom: 44px; }
}

/* les pages tunnel n'ont pas la barre de navigation du site */
body:has(.lp-tete) { padding-top: 0; }
.lp-hero .h-xl { font-size: clamp(30px, 5.4vw, 54px); }
@media (max-width: 560px) {
  .lp-hero .h-xl { font-size: 30px; line-height: 1.06; }
  .lp-hero__txt .lead { font-size: 16px; }
  .lp-puces { gap: 8px 16px; margin-top: 20px; }
  .lp-puces span { font-size: 11.5px; }
}

/* --- pages tunnel : chiffres sourcés, gabarits, univers, avis, FAQ --- */
.lp-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-chiffre { background: var(--white); border: 1px solid var(--silver); padding: 28px 26px; }
.lp-chiffre b { display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 4vw, 50px); letter-spacing: -.04em; line-height: 1; }
.lp-chiffre em { display: block; margin-top: 6px; font-family: var(--font-mono); font-style: normal;
  font-weight: var(--mono-weight); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); }
.lp-chiffre p { margin: 14px 0 0; font-size: 15.5px; color: var(--gray); }
.lp-src { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--gray-light);
  text-decoration: underline; }
.lp-src:hover { color: var(--red); }

.lp-gabarits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lp-gab { border: 1px solid var(--silver); padding: 24px 22px; }
.lp-gab__i { color: var(--red); }
.lp-gab h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px;
  text-transform: uppercase; margin: 12px 0 4px; }
.lp-gab em { display: block; font-family: var(--font-mono); font-style: normal;
  font-weight: var(--mono-weight); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-light); margin-bottom: 10px; }
.lp-gab p { font-size: 15px; color: var(--gray); margin: 0; }

.lp-univers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--charcoal-line); border: 1px solid var(--charcoal-line); }
.lp-univ { background: var(--charcoal); padding: 20px 18px; display: flex; align-items: center;
  gap: 12px; font-size: 15px; transition: background .2s; }
.lp-univ svg { color: var(--red); flex: 0 0 auto; }
.lp-univ:hover { background: var(--red); }
.lp-univ:hover svg { color: var(--white); }

.lp-avis__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  margin-bottom: 34px; }
.lp-avis__nav { display: flex; gap: 8px; }
.lp-avis__rail { padding-bottom: 6px; }
.lp-avis { flex: 0 0 380px; scroll-snap-align: start; margin: 0; background: var(--white);
  border: 1px solid var(--silver); padding: 28px 26px; display: flex; flex-direction: column;
  overflow: hidden; }
.lp-avis p { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical;
  overflow: hidden; }
.lp-avis__etoiles { color: var(--red); letter-spacing: .18em; font-size: 14px; margin-bottom: 14px; }
.lp-avis p { font-size: 16.5px; line-height: 1.6; margin: 0 0 20px; }
.lp-avis footer { margin-top: auto; }
.lp-avis footer b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  text-transform: uppercase; }
.lp-avis footer span { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.lp-avis__lien { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; }
.lp-avis__lien:hover { color: var(--red); }
.lp-avis__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  margin-top: 30px; }
.lp-avis__go { display: inline-flex; align-items: center; gap: 10px; }
.lp-avis__go svg { flex: 0 0 auto; background: var(--white); border-radius: 50%;
  padding: 3px; box-sizing: content-box; }
@media (max-width: 600px) {
  .lp-avis__actions { flex-direction: column; align-items: stretch; }
  .lp-avis__actions .btn { justify-content: center; }
}

.lp-faq { border-top: 1px solid var(--silver); }
.lp-faq details { border-bottom: 1px solid var(--silver); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex;
  align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; margin-left: auto; color: var(--red); font-family: var(--font-mono);
  font-size: 22px; line-height: 1; }
.lp-faq details[open] summary::after { content: '–'; }
.lp-faq p { padding: 0 0 22px; margin: 0; font-size: 16px; color: var(--gray); max-width: 62ch; }

.lp-galerie .gal { margin: 0; }
.lp-galerie .gal figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.lp-galerie .gal figcaption span { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.lp-galerie .gal figcaption b { font-size: 14px; font-weight: 600; }

@media (max-width: 1000px) {
  .lp-chiffres { grid-template-columns: minmax(0, 1fr); }
  .lp-gabarits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-univers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-avis__tete { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .lp-gabarits, .lp-univers { grid-template-columns: minmax(0, 1fr); }
  .lp-avis { flex: 0 0 82vw; }
}
.lp-galerie .gal figcaption { position: static; background: none; padding: 0; }
.section--dark .lp-galerie .gal figcaption b { color: var(--white); }

/* ===========================================================================
   45. VAGUE 1 — rappel en bandeau, réassurance du devis
   =========================================================================== */
.rappel { background: var(--red); color: var(--white); padding: 64px 0; }
.rappel__in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: center; }
.rappel__txt .eyebrow { color: var(--white); }
.rappel__txt .eyebrow::before { background: var(--white); }
.rappel__txt .h-lg { color: var(--white); margin: 14px 0 16px; }
.rappel__txt .lead { color: rgba(255,255,255,.94); max-width: 34em; }
.rappel__tel { margin-top: 18px; font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.rappel__tel a { text-decoration: underline; }
.rappel__form { display: grid; gap: 10px; background: rgba(255,255,255,.12); padding: 24px;
  border: 1px solid rgba(255,255,255,.28); }
.rappel__form input { width: 100%; padding: 13px 14px; font-size: 16px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.14); color: var(--white); }
.rappel__form input::placeholder { color: rgba(255,255,255,.78); }
.rappel__form input:focus { outline: 2px solid var(--white); outline-offset: 1px; }
.rappel__form .btn { background: var(--white); color: var(--charcoal); border: 0; }
.rappel__form .btn:hover { background: var(--charcoal); color: var(--white); }
.rappel .form-avis { color: var(--white); border-left-color: var(--white); }

.devis__grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px;
  align-items: start; max-width: 1180px; }
.reassur { display: grid; gap: 16px; position: sticky; top: calc(var(--nav-h) + 24px); }
.reassur__b { border: 1px solid var(--silver); padding: 20px 22px; }
.reassur__lib { display: flex; align-items: center; gap: 10px; font-family: var(--font-display);
  font-weight: 800; font-size: 15.5px; text-transform: uppercase; margin-bottom: 8px; }
.reassur__lib svg { color: var(--red); flex: 0 0 auto; }
.reassur__b p { font-size: 14.5px; color: var(--gray); margin: 0; }
.reassur__avis { margin: 0; background: var(--off-white); border-left: 3px solid var(--red);
  padding: 22px 22px; }
.reassur__avis p { font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
.reassur__avis footer b { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 14px; text-transform: uppercase; }
.reassur__avis footer span { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }

@media (max-width: 1000px) {
  .rappel__in, .devis__grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .reassur { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reassur__avis { grid-column: span 2; }
}
@media (max-width: 640px) {
  .reassur { grid-template-columns: minmax(0, 1fr); }
  .reassur__avis { grid-column: span 1; }
}

/* ==========================================================================
   46. CARTE À VOILE : photo pleine + noir dense au survol, texte en blanc
   ========================================================================== */
.card--voile::after { opacity: 1;
  background-image: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)), var(--fond); }
.card--voile h3, .card--voile p, .card--voile .card__link { transition: color .45s var(--ease); }
.card--voile:hover h3, .card--voile:hover p, .card--voile:hover .card__link { color: var(--white); }
.card--voile .icon-badge { width: 56px; }
.card--voile:hover .icon-badge { border-color: rgba(255,255,255,.45); background: transparent; }
.card--voile:hover .card__link svg { color: var(--white); }

/* ==========================================================================
   47. LANDING : LA GROSSE SECTION CHIFFRES
   ========================================================================== */
.lp-impact { background: var(--charcoal); color: var(--white); padding: 96px 0 84px; }
.lp-impact__tete { max-width: 760px; margin-bottom: 56px; }
.lp-impact__tete h2 { margin-top: 14px; }
.lp-impact__tete p { color: #A8A8A8; font-size: 17px; margin-top: 18px; line-height: 1.6; }
.lp-impact__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.lp-impact__c { padding: 0 40px; border-left: 1px solid var(--charcoal-line); }
.lp-impact__c:first-child { padding-left: 0; border-left: 0; }
.lp-impact__c:last-child { padding-right: 0; }
.lp-impact__n { display: block; font-family: var(--font-display); font-weight: 900; line-height: .88;
  font-size: clamp(40px, 4.4vw, 66px); letter-spacing: -.03em; }
.lp-impact__u { display: block; margin-top: 14px; font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); }
.lp-impact__t { margin: 16px 0 0; font-size: 16.5px; line-height: 1.55; color: #D6D6D6; }
.lp-impact__s { display: inline-block; margin-top: 18px; font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 11px; letter-spacing: .08em; color: #7A7A7A;
  text-decoration: underline; text-underline-offset: 3px; }
.lp-impact__s:hover { color: var(--white); }
.lp-impact__pied { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--charcoal-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.lp-impact__pied p { margin: 0; color: #A8A8A8; font-size: 15.5px; }
@media (max-width: 900px) {
  .lp-impact { padding: 66px 0 58px; }
  .lp-impact__grille { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .lp-impact__c { padding: 0 0 34px; border-left: 0; border-bottom: 1px solid var(--charcoal-line); }
  .lp-impact__c:last-child { padding-bottom: 0; border-bottom: 0; }
}

/* ==========================================================================
   48. BANDE DE PRIX D'ENTRÉE + RAPPEL CONTEXTUEL DANS LES RÉALISATIONS
   ========================================================================== */
.bprix { background: var(--charcoal); color: var(--white); }
.bprix__in { display: grid; grid-template-columns: auto 1fr 1fr auto; align-items: center;
  gap: 0; }
.bprix__c { padding: 26px 32px; border-left: 1px solid var(--charcoal-line); min-width: 0; }
.bprix__c:first-child { padding-left: 0; border-left: 0; }
.bprix__c em { display: block; font-family: var(--font-mono); font-style: normal;
  font-weight: var(--mono-weight); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #8A8A8A; margin-bottom: 8px; }
.bprix__c b { font-family: var(--font-display); font-weight: 900; font-size: 30px;
  letter-spacing: -.02em; line-height: 1; }
.bprix__c span { font-size: 15px; color: #D6D6D6; line-height: 1.45; }
.bprix__c--prix b { color: var(--white); }
.bprix__c--cta { padding-right: 0; }
@media (max-width: 900px) {
  .bprix__in { grid-template-columns: 1fr 1fr; }
  .bprix__c { padding: 20px 0; border-left: 0; border-top: 1px solid var(--charcoal-line); }
  .bprix__c:first-child, .bprix__c:nth-child(2) { border-top: 0; }
  .bprix__c--cta { grid-column: 1 / -1; }
  .bprix__c--cta .btn { width: 100%; justify-content: center; }
}

.rctx { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px; margin: 40px 0; padding: 22px 26px; background: var(--off-white);
  border-left: 3px solid var(--red); }
.rctx--dark { background: var(--charcoal-soft); }
.rctx p { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 17px;
  text-transform: uppercase; letter-spacing: -.01em; }
.rctx--dark p { color: var(--white); }
.rctx__l { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.rctx__l > a:first-child { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; }
.rctx--dark .rctx__l > a:first-child { color: var(--white); }
.rctx__l > a:first-child:hover { color: var(--red); }
@media (max-width: 600px) {
  .rctx { flex-direction: column; align-items: flex-start; }
  .rctx__l { width: 100%; }
  .rctx__l .btn { flex: 1 0 auto; justify-content: center; }
}

/* ==========================================================================
   49. BLOG : FILTRE PAR FAMILLE + CHARGEMENT PAR PAQUETS
   ========================================================================== */
.bfiltre { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.bfiltre button { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 11px 18px;
  border: 1px solid var(--silver); background: var(--white); color: var(--charcoal);
  border-radius: var(--radius); cursor: pointer; transition: all .22s var(--ease);
  display: inline-flex; align-items: center; gap: 9px; }
.bfiltre button em { font-style: normal; color: var(--gray-light); font-size: 11px; }
.bfiltre button:hover { border-color: var(--charcoal); }
.bfiltre button.is-actif { background: var(--charcoal); border-color: var(--charcoal);
  color: var(--white); }
.bfiltre button.is-actif em { color: rgba(255,255,255,.6); }
.post-card.est-cache { display: none; }
.bplus { margin-top: 48px; display: flex; flex-direction: column; align-items: center;
  gap: 16px; }
.bplus__n { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.bplus.est-fini .btn { display: none; }
@media (max-width: 600px) {
  .bfiltre { gap: 8px; }
  .bfiltre button { padding: 10px 14px; font-size: 11px; }
}

/* ==========================================================================
   50. ARTICLES : ENCADRÉ DE SYNTHÈSE ET TABLEAUX
   ========================================================================== */
.art-cle { background: var(--charcoal); color: var(--white); padding: 30px 32px;
  margin: 44px 0; border-left: 3px solid var(--red); }
.art-cle > b { display: block; font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  margin-bottom: 16px; }
.art-cle ul { margin: 0; }
.art-cle li { font-size: 16.5px; line-height: 1.6; color: #E6E6E6; padding-left: 22px;
  margin-bottom: 12px; position: relative; }
.art-cle li:last-child { margin-bottom: 0; }
.art-cle li::before { content: ''; position: absolute; left: 0; top: 11px; width: 9px;
  height: 2px; background: var(--red); }
.art-cle strong { color: var(--white); }

.article table { width: 100%; border-collapse: collapse; margin: 36px 0; font-size: 16px;
  display: block; overflow-x: auto; }
.article table thead th { background: var(--charcoal); color: var(--white); text-align: left;
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; padding: 14px 16px; white-space: nowrap; }
.article table td, .article table tbody th { padding: 14px 16px;
  border-bottom: 1px solid var(--silver); vertical-align: top; line-height: 1.55; }
.article table tbody th { text-align: left; font-weight: 700; }
.article table tbody tr:nth-child(even) { background: var(--off-white); }
.article table strong { color: var(--charcoal); }

.article blockquote { margin: 36px 0; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--red); font-size: 19px; line-height: 1.6; font-style: italic;
  color: var(--charcoal); }
.article ol { margin: 0 0 1.2em; padding-left: 22px; }
.article ol li { margin-bottom: 10px; }
.article .reponse-directe { font-size: 19px; line-height: 1.65; background: var(--off-white);
  border-left: 3px solid var(--red); padding: 22px 26px; margin-bottom: 34px; }
@media (max-width: 600px) {
  .art-cle { padding: 24px 22px; }
  .article table { font-size: 15px; }
}

/* pastille de prix sur les cartes de spécialité */
.spec__prix { display: inline-block; font-family: var(--font-mono);
  font-weight: var(--mono-weight); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); border: 1px solid var(--red);
  padding: 4px 10px; margin-bottom: 16px; }
.card--voile:hover .spec__prix { color: var(--white); border-color: rgba(255,255,255,.5); }

/* ==========================================================================
   51. BANDEAU COOKIES
   ========================================================================== */
.ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--charcoal); color: var(--white);
  border-top: 3px solid var(--red); box-shadow: 0 -18px 44px rgba(0,0,0,.28);
  transform: translateY(100%); transition: transform .45s var(--ease); }
.ck[hidden] { display: none; }
.ck.est-ouvert { transform: translateY(0); }
.ck__in { max-width: 1240px; margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: center; gap: 20px 34px; flex-wrap: wrap; }
.ck__txt { flex: 1 1 420px; min-width: 0; }
.ck__txt b { display: block; font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  margin-bottom: 7px; }
.ck__txt p { margin: 0; font-size: 14px; line-height: 1.55; color: #C4C4C4; }
.ck__txt a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.ck__txt a:hover { color: var(--red); }
.ck__btn { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.ck__btn .btn--ghost { border-color: #5A5A5A; color: var(--white); }
.ck__btn .btn--ghost:hover { border-color: var(--white); }

.ck__detail { border-top: 1px solid var(--charcoal-line); max-width: 1240px;
  margin: 0 auto; padding: 6px 28px 22px; }
.ck__detail[hidden] { display: none; }
.ck__cat { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px 30px; padding: 16px 0; border-bottom: 1px solid var(--charcoal-line); }
.ck__cat b { display: block; font-size: 15px; margin-bottom: 4px; }
.ck__cat span { font-size: 13.5px; line-height: 1.5; color: #A0A0A0; display: block;
  max-width: 760px; }
.ck__fixe { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #7A7A7A; white-space: nowrap;
  padding-top: 3px; }
.ck__int { flex: 0 0 auto; position: relative; width: 46px; height: 26px; cursor: pointer; }
.ck__int input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
  cursor: pointer; }
.ck__int span { position: absolute; inset: 0; background: #3A3A3A; border-radius: 26px;
  transition: background .25s var(--ease); pointer-events: none; }
.ck__int span::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px;
  height: 20px; background: var(--white); border-radius: 50%;
  transition: transform .25s var(--ease); }
.ck__int input:checked + span { background: var(--red); }
.ck__int input:checked + span::before { transform: translateX(20px); }
.ck__int input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }
.ck__detail-btn { padding-top: 18px; display: flex; justify-content: flex-end; }

@media (max-width: 760px) {
  .ck__in { padding: 16px 20px; gap: 14px; }
  .ck__txt p { font-size: 13.5px; }
  .ck__btn { width: 100%; }
  .ck__btn .btn { flex: 1 1 auto; justify-content: center; }
  .ck__detail { padding: 4px 20px 20px; }
  .ck__cat { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ck__detail-btn { justify-content: stretch; }
  .ck__detail-btn .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } }

/* ==========================================================================
   52. PRIX RÉELS : une bande de chantiers chiffrés, photo et prix
   ========================================================================== */
.pxr__sec { padding: 56px 0; }
.pxr__rangee { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; align-items: stretch; }
.pxr__texte { display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding-right: 8px; }
.pxr__titre { margin: 12px 0 0; font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1.02;
  font-size: clamp(21px, 2.1vw, 30px); }
.pxr__intro { margin: 12px 0 0; color: var(--gray); line-height: 1.55;
  font-size: clamp(13.5px, 1.05vw, 15.5px); }
.pxr__sec--dark { background: var(--charcoal); color: var(--off-white); }
.pxr__sec--dark .pxr__titre { color: var(--white); }
.pxr__sec--dark .pxr__intro { color: var(--silver); }
.pxr { display: block; background: var(--white); border: 1px solid var(--silver);
  overflow: hidden; transition: border-color .25s var(--ease); min-width: 0; }
.pxr:hover { border-color: var(--charcoal); }
.pxr--appel { border-color: var(--red); }
.pxr__vue { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--charcoal); }
.pxr__vue picture, .pxr__vue img { display: block; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s var(--ease); }
.pxr:hover .pxr__vue img { transform: scale(1.05); }
.pxr__bas { display: block; padding: 14px 16px 16px; }
.pxr__bas b { display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(20px, 1.85vw, 26px); letter-spacing: -.02em; line-height: 1;
  color: var(--charcoal); }
.pxr--appel .pxr__bas b { color: var(--red); }
.pxr__bas em { display: block; margin-top: 7px; font-style: normal;
  font-size: clamp(12.5px, 1vw, 14px); color: var(--gray); line-height: 1.4; }
.pxr__note { margin: 16px 0 0; font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-light);
  line-height: 1.5; }
@media (max-width: 900px) {
  .pxr__rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxr__texte { grid-column: 1 / -1; padding-right: 0; }
  .pxr__titre { font-size: 26px; }
  .pxr__intro { font-size: 15.5px; }
}
@media (max-width: 520px) {
  .pxr__rangee { grid-template-columns: minmax(0, 1fr); }
  .pxr__bas b { font-size: 22px; }
  .pxr__bas em { font-size: 13.5px; }
}

/* visuel de catalogue détouré : il porte sa propre ombre, on ne rajoute rien */
/* le reflet de couverture n'a pas de sens sur un visuel détouré :
   il dessinait un rectangle clair par-dessus la transparence. */
.couv--mockup::after { display: none; }
.couv--mockup { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: min(600px, 94%);
  background: none; border-radius: 0; box-shadow: none; overflow: visible;
  transition: transform .5s var(--ease); }
.couv--mockup picture, .couv--mockup img { display: block; width: 100%; height: auto;
  box-shadow: none; border-radius: 0; }
.eventail:hover .couv--mockup { transform: translate(-50%, -55%) scale(1.03); }
.eventail:has(.couv--mockup) .eventail__ombre { display: none; }
@media (max-width: 900px) { .couv--mockup { width: 92%; } }

/* ==========================================================================
   53. LANDING : bande de rappel entre deux sections
   discrète par construction : le formulaire d'abord (seul élément rouge),
   l'e-mail en lien texte, le téléphone en dernier et en petit
   ========================================================================== */
.lp-bande { background: var(--off-white); border-top: 1px solid var(--silver);
  border-bottom: 1px solid var(--silver); padding: 34px 0; }
.lp-bande__in { display: flex; flex-wrap: wrap; gap: 22px 48px;
  align-items: center; justify-content: space-between; }
.lp-bande__txt { min-width: 0; }
.lp-bande h2 { margin: 0; font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(19px, 1.7vw, 24px); color: var(--charcoal); }
.lp-bande__txt p { margin: 8px 0 0; max-width: 52ch; color: var(--gray);
  font-size: 15px; line-height: 1.55; }
.lp-bande__act { display: flex; flex-direction: column; align-items: flex-end;
  gap: 8px; flex: 0 0 auto; text-align: right; }
.lp-bande__alt { margin: 2px 0 0; font-size: 13px; color: var(--gray); }
.lp-bande__alt a { color: var(--charcoal); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--silver); }
.lp-bande__alt a:hover { text-decoration-color: var(--red); }
.lp-bande__tel { margin: 0; font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11.5px; letter-spacing: .06em; color: var(--gray-light); }
.lp-bande__tel a { color: inherit; text-decoration: none; }
.lp-bande__tel a:hover { color: var(--charcoal); }
@media (max-width: 700px) {
  .lp-bande { padding: 28px 0; }
  .lp-bande__act { width: 100%; align-items: stretch; }
  .lp-bande__act .btn { justify-content: center; }
  .lp-bande__alt, .lp-bande__tel { text-align: center; }
}

/* ==========================================================================
   54. CALCULATEUR TEXTILE
   quatre colonnes de questions, trois techniques chiffrées côte à côte
   ========================================================================== */
.tx { background: var(--white); border: 1px solid var(--silver); }
.tx__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tx__col { padding: 26px 24px 28px; border-right: 1px solid var(--silver); min-width: 0; }
.tx__col:last-child { border-right: 0; }
.tx__num { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--charcoal); color: var(--white);
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px; }
.tx__col h3 { margin: 14px 0 16px; font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.tx__col h3 em { font-style: normal; font-weight: 400; color: var(--gray); font-size: 14px; }
.tx__aide { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gray); }

.tx-opts { display: grid; gap: 8px; }
.tx-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tx-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tx-opt { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 6px; background: var(--white); border: 1px solid var(--silver);
  cursor: pointer; text-align: center; font: inherit; color: var(--charcoal);
  transition: border-color .18s var(--ease), background .18s var(--ease); min-width: 0; }
.tx-opt strong { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.tx-opt small { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px; color: var(--gray); }
.tx-opt .icon { color: var(--gray); transition: color .18s var(--ease); }
.tx-opt:hover:not(:disabled) { border-color: var(--charcoal); }
.tx-opt[aria-pressed="true"] { border-color: var(--red); background: rgba(227,30,36,.05); }
.tx-opt[aria-pressed="true"] strong { color: var(--red); }
.tx-opt[aria-pressed="true"] .icon { color: var(--red); }
.tx-opt.is-off { opacity: .32; cursor: not-allowed; }
.tx-opt--zone { align-items: flex-start; text-align: left; padding: 12px 12px 13px; gap: 3px; }

.tx-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.tx-chips--large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tx-chip { min-width: 0; padding: 11px 4px; text-align: center; background: var(--white);
  border: 1px solid var(--silver); cursor: pointer; font: inherit; font-weight: 600;
  font-size: 14px; color: var(--charcoal); transition: border-color .18s var(--ease); }
.tx-chip:hover { border-color: var(--charcoal); }
.tx-chip[aria-pressed="true"] { border-color: var(--red); color: var(--red);
  background: rgba(227,30,36,.05); }
.tx__exact { display: block; margin-top: 18px; font-size: 13.5px; color: var(--gray); }
.tx__exact span { font-weight: 600; color: var(--charcoal); }
.tx__exact input { display: block; width: 100%; margin-top: 8px; padding: 11px 12px;
  border: 1px solid var(--silver); font: inherit; font-family: var(--font-mono);
  font-weight: var(--mono-weight); background: var(--white); color: var(--charcoal); }
.tx__exact input:focus { outline: 2px solid var(--red); outline-offset: -2px; }

.tx__resultat { border-top: 1px solid var(--silver); background: var(--off-white);
  padding: 26px 24px 28px; }
.tx__resultat-tete { display: flex; flex-wrap: wrap; gap: 16px 24px;
  align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tx-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tx-carte { display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--silver); padding: 20px 20px 22px;
  position: relative; min-width: 0; transition: border-color .2s var(--ease); }
.tx-carte.is-conseille { border-color: var(--red); }
.tx-carte.is-off { opacity: .55; }
.tx-carte__cons { visibility: hidden; display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.tx-carte.is-conseille .tx-carte__cons { visibility: visible; }
.tx-carte__ref { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11.5px; letter-spacing: .08em; color: var(--gray-light); }
.tx-carte h4 { margin: 6px 0 8px; font-family: var(--font-display); font-weight: 900;
  font-size: 22px; letter-spacing: -.01em; }
.tx-carte p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gray); }
.tx-carte__prix { display: flex; align-items: baseline; gap: 8px; margin-top: auto;
  padding-top: 20px; }
.tx-carte__prix b { font-family: var(--font-display); font-weight: 900; font-size: 34px;
  letter-spacing: -.02em; line-height: 1; }
.tx-carte__prix span { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; color: var(--gray); }
.tx-carte__total { margin-top: 10px !important; font-size: 13.5px; color: var(--charcoal); }
.tx-carte__total s { color: var(--gray-light); }
.tx-carte__detail { margin-top: 6px !important; font-size: 12px; line-height: 1.5;
  color: var(--gray-light); }
.tx__note { margin: 20px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--gray-light);
  max-width: 90ch; }
.tx__liens { margin: 10px 0 0; font-size: 12.5px; }
.tx__liens a { color: var(--gray); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--silver); }
.tx__liens a:hover { color: var(--red); }

/* la boîte de campagne : visible seulement quand assets/remise.json est actif */
.tx-remise { margin-bottom: 20px; }
.tx-remise__in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px;
  background: var(--red); color: var(--white); padding: 22px 26px; }
.tx-remise__taux { font-family: var(--font-display); font-weight: 900; font-size: 46px;
  line-height: 1; letter-spacing: -.03em; }
.tx-remise__in > div { flex: 1 1 320px; min-width: 0; }
.tx-remise__in b { display: block; font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em; font-size: 19px; line-height: 1.15; }
.tx-remise__in p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9); }
.tx-remise__in .btn--red { background: var(--white); color: var(--red); }
.tx-remise__in .btn--red:hover { background: var(--charcoal); color: var(--white); }

@media (max-width: 1080px) {
  .tx__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx__col { border-bottom: 1px solid var(--silver); }
  .tx__col:nth-child(2n) { border-right: 0; }
  .tx-cartes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .tx__grille { grid-template-columns: minmax(0, 1fr); }
  .tx__col { border-right: 0; }
  .tx__resultat-tete .btn { width: 100%; justify-content: center; }
  .tx-remise__taux { font-size: 38px; }
}

/* ==========================================================================
   55. PAGES DE TARIFS : grilles publiques, charte Diferance
   ========================================================================== */
.tf-tete { padding: 44px 0 8px; }
.tf-bloc { margin-top: 40px; }
.tf-bloc__tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px;
  margin-bottom: 14px; }
.tf-bloc__ref { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: .12em; color: var(--red); }
.tf-bloc__tete h2 { font-family: var(--font-display); font-weight: 900; font-size: 21px;
  text-transform: uppercase; letter-spacing: -.01em; }
.tf-bloc__intro { margin: 0 0 16px; color: var(--gray); font-size: 14.5px;
  line-height: 1.6; max-width: 76ch; }
.tf-tab { overflow-x: auto; border: 1px solid var(--silver); background: var(--white); }
.tf-tab table { width: 100%; border-collapse: collapse; min-width: 640px; }
.tf-tab th { background: var(--charcoal); color: var(--white); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 12px 10px; text-align: center; white-space: nowrap; }
.tf-tab th.g { text-align: left; padding-left: 18px; }
.tf-tab td { border-top: 1px solid var(--silver); padding: 12px 10px; text-align: center;
  font-size: 14px; }
.tf-tab tr:nth-child(even) td { background: var(--off-white); }
.tf-tab td.g { text-align: left; padding-left: 18px; font-weight: 600; }
.tf-tab td.g small { display: block; font-weight: 400; font-size: 12.5px; color: var(--gray); }
.tf-tab td.g a { color: inherit; border-bottom: 1px dotted var(--silver); }
.tf-tab td.g a:hover { color: var(--red); border-bottom-color: var(--red); }
.tf-tab td.p { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 14.5px; white-space: nowrap; }
.tf-tab td.r { font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12.5px; color: var(--gray-light); white-space: nowrap; }
.tf-tab td.d { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray-light); }
.tf-tab td.n { text-align: left; font-size: 13px; color: var(--gray); }
.tf-notes { margin-top: 28px; background: var(--off-white); border-left: 2px solid var(--red);
  padding: 22px 24px; }
.tf-notes h3 { font-family: var(--font-display); font-weight: 900; font-size: 15px;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.tf-notes li { list-style: none; position: relative; padding: 5px 0 5px 18px;
  font-size: 13.5px; line-height: 1.55; color: var(--gray); }
.tf-notes li::before { content: ""; position: absolute; left: 0; top: 13px;
  width: 8px; height: 1px; background: var(--red); }
.tf-liens { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 12px; }
.tf-liens a { font-size: 12.5px; color: var(--gray); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--silver); }
.tf-liens a:hover { color: var(--red); }
/* fil d'Ariane sur fond clair : la version par défaut est écrite en blanc,
   elle est faite pour les bandeaux photo */
.breadcrumb--clair a { color: var(--gray); }
.breadcrumb--clair a:hover { color: var(--red); }
.breadcrumb--clair strong { font-weight: 400; color: var(--charcoal); }
.breadcrumb--clair span { color: var(--gray-light); }
/* les petites icônes de fiche produit, PDF et guide des tailles */
.tf-tab td.f { text-align: right; padding-right: 18px; white-space: nowrap; width: 1%; }
.tf-tab th:nth-child(3) { text-align: right; padding-right: 18px; }
.tf-ics { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; }
.tf-ic { display: inline-flex; padding: 3px; color: var(--gray);
  transition: color .18s var(--ease); }
.tf-ic .icon { color: inherit; }
.tf-ic:hover { color: var(--red); }
/* cases à cocher du calculateur : expédition grossiste et forfait de préparation */
.tx-cases { margin-top: 16px; display: grid; gap: 9px; }
.tx-cases label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  font-size: 12.5px; line-height: 1.45; color: var(--gray); }
.tx-cases input { margin-top: 2px; accent-color: var(--red); flex: 0 0 auto; }
.tx-cases b { color: var(--charcoal); font-weight: 600; }
.tx-carte__ttc { display: block; margin-top: 3px; font-size: 12.5px; color: var(--gray-light); }
.tx__chargement { margin: 0; font-size: 14px; color: var(--gray); }
/* une note de prix ne doit pas étirer la colonne tarif */
.tf-tab td.p .tf-note-px { display: block; margin-top: 3px; white-space: normal;
  font-family: var(--font-body); font-weight: 400; font-size: 11.5px;
  line-height: 1.35; color: var(--gray-light); max-width: 22ch; margin-left: auto; }

/* ==========================================================================
   56. CALCULATEUR VÉHICULE, OPTIONS ILLUSTRÉES
   Les mêmes boutons .opt que les autres calculateurs, mais portant un dessin
   au trait. Les quatre gabarits partagent la même ligne de sol : le rapport
   de taille entre une citadine et un L3H2 est donc lisible d'un coup d'œil,
   avant même de regarder le prix.
   ========================================================================== */
.opts--vues { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.opt--vue { justify-content: flex-start; text-align: left; align-items: stretch;
  padding: 12px 14px 14px; gap: 4px; min-height: 0; }
.opt__vue { display: block; margin-bottom: 4px; }
.opt__vue picture, .opt__vue img { display: block; width: 100%; height: auto; }
.opt--vue strong { font-size: 14px; }
.opt--vue small { display: block; }

@media (max-width: 900px) {
  .opts--vues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  /* En colonne unique, le dessin passe à gauche et le texte à droite :
     la liste reste courte et le pouce atteint tout sans défiler. */
  /* Colonne image en pixels et non en pourcentage : une largeur relative
     remonte dans le calcul de largeur minimale de la grille du calculateur
     et fait déborder la colonne. */
  .calc__body, .opts--vues { grid-template-columns: minmax(0, 1fr); }
  .calc__body > *, .calc__field, .opts--vues > .opt { min-width: 0; }
  .opt--vue { display: grid; grid-template-columns: 116px minmax(0, 1fr);
    column-gap: 14px; align-items: center; }
  .opt__vue { grid-row: 1 / span 2; margin-bottom: 0; }
  .opt--vue strong { align-self: end; }
  .opt--vue small { align-self: start; }
}