/* ==========================================================================
   L'ère du digital — leredudigital.com
   Layout-only styles. All visual language (color, type, radii, shadow, motion)
   comes from the LR Digital design-system tokens. Navy + gold + cream.
   ========================================================================== */

/* ---------- density / accent / type tweaks (set on #lr-root) ---------- */
.site { --sec: clamp(72px, 9vw, 128px); --stack: clamp(40px, 5vw, 72px); }
.site[data-density="compact"] { --sec: clamp(52px, 6vw, 88px); --stack: clamp(28px, 3.5vw, 48px); }
.site[data-density="comfy"]   { --sec: clamp(96px, 12vw, 168px); --stack: clamp(56px, 7vw, 104px); }
/* bold accent: gold filets become a touch more present */
.site[data-accent="bold"] { --line-gold: rgba(193,157,68,.85); }
/* type variant: a quieter all-Geist display option */
.site[data-type="sans"] { --font-display: "Geist", system-ui, sans-serif; --ls-display: -0.03em; }
.site[data-type="sans"] .display em { font-style: normal; font-weight: 600; }

.site { background: var(--bg); color: var(--ink); min-height: 100vh; }
.site * { box-sizing: border-box; }
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 940px; }
em { font-style: italic; }

/* numbered eyebrow keeps the DS gold chevron; on dark it lifts */
.eyebrow--light { color: var(--ink); }
.on-dark .eyebrow { color: rgba(251,248,241,.9); }

/* ======================= HEADER / NAV ======================= */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(251,248,241,.8);
  backdrop-filter: var(--blur-bar); -webkit-backdrop-filter: var(--blur-bar);
  border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; gap: 24px; height: 68px; }
.nav__brand { flex: none; }
.nav__links { display: flex; gap: 4px; margin: 0 auto; }
.nav__links a { font-size: 14px; font-weight: var(--fw-medium); color: var(--muted);
  padding: 9px 13px; border-radius: var(--r-sm); position: relative; transition: color var(--dur) var(--ease); white-space: nowrap; }
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1.5px; background: var(--gold); }
.nav__cta { flex: none; display: flex; align-items: center; gap: 10px; }
.nav__login { font-size: 13.5px; font-weight: var(--fw-medium); color: var(--ink); padding: 8px 6px; }
.nav__burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-pill); align-items: center; justify-content: center; }
.nav__mobile { display: none; }
@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__login { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__cta .lr-btn { display: none; }
  .nav__mobile { display: block; border-bottom: 1px solid var(--line); background: var(--bg); }
  .nav__mobile a { display: block; padding: 14px var(--pad); border-top: 1px solid var(--line); font-weight: var(--fw-medium); font-size: 15px; }
  .nav__mobile .lr-btn { margin: 16px var(--pad); }
}

/* ======================= FOOTER ======================= */
.foot { background: var(--ink); color: var(--bg); margin-top: var(--sec); }
.foot__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: clamp(48px,6vw,80px) 0 36px; }
@media (max-width: 820px){ .foot__in { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px){ .foot__in { grid-template-columns: 1fr; } }
.foot__bio { font-size: 14px; color: rgba(251,248,241,.62); line-height: 1.6; max-width: 34ch; margin: 18px 0 0; }
.foot__col h5 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; font-weight: var(--fw-semibold); }
.foot__col a, .foot__col p { display: block; font-size: 14px; color: rgba(251,248,241,.72); margin: 0 0 11px; transition: color var(--dur) var(--ease); }
.foot__col a:hover { color: var(--bg); }
.foot__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0 40px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(251,248,241,.5); }
.brandlock--on-dark .brandlock__sep { background: var(--line-gold); }

/* ======================= GENERIC SECTION ======================= */
.section { padding-top: var(--sec); }
.section--pad { padding-block: var(--sec); }
.section--dark { background: var(--ink); color: var(--bg); }
.section--alt { background: var(--bg-2); }
.sec-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px,4vw,64px); align-items: end; margin-bottom: clamp(32px,4vw,56px); }
@media (max-width: 820px){ .sec-head { grid-template-columns: 1fr; gap: 16px; } }
.sec-head h2 { margin: 16px 0 0; font-size: var(--display-2); }
.sec-head .lead { padding-bottom: 6px; }
.on-dark .display, .section--dark .display { color: var(--bg); }
.on-dark .display em, .section--dark .display em { color: var(--gold); }
.on-dark .lead, .section--dark .lead { color: rgba(251,248,241,.72); }

/* ======================= HERO ======================= */
.hero { padding-top: clamp(36px, 5vw, 72px); }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1.18fr; gap: clamp(28px,4vw,56px); align-items: center; }
/* Empêche les colonnes grid de gonfler au-delà du viewport (cause réelle des
   débordements horizontaux) — sans masquage via overflow-x:hidden. */
.hero__grid > * { min-width: 0; }
.hero h1 { font-size: clamp(40px, 6vw, 86px); line-height: 1.0; letter-spacing: -0.02em; margin: 22px 0 0; }

/* ----- Tablette : 768–1199 px — deux colonnes conservées, équilibre resserré ----- */
@media (min-width: 768px) and (max-width: 1199px){
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: clamp(22px,3vw,40px); align-items: center; }
}
/* ----- Mobile : < 768 px — une seule colonne, teaser sous le texte ----- */
@media (max-width: 767px){
  .hero { padding-top: clamp(28px, 6vw, 44px); }
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 46px); }
  .hero__lead { max-width: none; }
  .hero__geo { max-width: none; }
}
/* ----- Très petits écrans : ≤ 480 px — marges réduites, boutons pleine largeur ----- */
@media (max-width: 480px){
  .hero h1 { font-size: clamp(28px, 9vw, 40px); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .lr-btn { width: 100%; justify-content: center; }
}

/* ----- Accessibilité : respect de « réduire les animations » ----- */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .site-transition-container { transition: none; transform: none; }
}
.hero__lead { margin: 26px 0 0; max-width: 42ch; font-size: clamp(16px,1.35vw,19px); }
.hero__ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero__trust { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 30px; }
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: var(--fw-medium); }
.hero__trust svg { width: 15px; height: 15px; color: var(--gold-deep); flex: none; }

/* video media zone — embeds the launch teaser (1920×1080) scaled to fit */
.media { position: relative; width: 100%; max-width: 100%; margin-inline: auto;
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); background: var(--ink); aspect-ratio: 16 / 9; }
.media__scaler { position: absolute; inset: 0; }
.media__teaser { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.media__frame { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; border: 0;
  transform-origin: center center; transform: translate(-50%, -50%) scale(var(--media-scale, .25)); }
.media__tag { position: absolute; z-index: 3; top: 16px; left: 16px; font: var(--fw-semibold) 10.5px var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgba(251,248,241,.9);
  border: 1px solid var(--line-gold); padding: 6px 12px; border-radius: var(--r-pill); display: inline-flex; gap: 8px; align-items: center; }
.media__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: #c0392f; box-shadow: 0 0 0 0 rgba(192,57,47,.5); animation: rec 1.6s infinite; }
@keyframes rec { 0%{ box-shadow: 0 0 0 0 rgba(192,57,47,.5);} 70%{ box-shadow: 0 0 0 6px rgba(192,57,47,0);} 100%{ box-shadow: 0 0 0 0 rgba(192,57,47,0);} }
.media__sound { position: absolute; z-index: 3; bottom: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(19,30,51,.7); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.media__bar { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 18px; height: 3px; border-radius: 3px; background: rgba(251,248,241,.25); overflow: hidden; }
.media__bar i { display: block; height: 100%; width: 0; background: var(--gold); }

/* ======================= TRUST / LOGO STRIP ======================= */
.logos { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.logo-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-size: 13.5px; color: var(--muted); font-weight: var(--fw-medium); }
.logo-chip .dotg { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.todo-note { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); font-family: var(--font-mono);
  background: var(--gold-soft); border: 1px solid var(--line-gold); padding: 4px 11px; border-radius: var(--r-pill); }

/* ======================= PLANS ROW ======================= */
.plans-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: start; }
@media (max-width: 860px){ .plans-row { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ======================= PROCESS SCHEMA ======================= */
.process { position: relative; }
.process__track { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; position: relative; }
@media (max-width: 820px){ .process__track { grid-template-columns: 1fr; } }
.pstep { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; }
.pstep__n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: 14px; font-weight: var(--fw-semibold); margin-bottom: 16px; }
.pstep h4 { margin: 0 0 8px; font-size: 16px; font-weight: var(--fw-medium); }
.pstep p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.pstep__arrow { position: absolute; right: -12px; top: 44px; z-index: 2; width: 24px; height: 24px; color: var(--gold); background: var(--bg); }
@media (max-width: 820px){ .pstep__arrow { display: none; } }
.process__delays { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.delay-chip { font-size: 13px; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-soft); font-weight: var(--fw-medium); }
.delay-chip b { font-family: var(--font-mono); }
.delay-chip--gold { border-color: var(--line-gold); background: var(--gold-soft); }

/* ======================= ADD-ONS PREVIEW ======================= */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.addon-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; transition: var(--transition-control); }
.addon-tile:hover { transform: var(--lift-3); box-shadow: var(--shadow-md); }
.addon-tile__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--taupe-soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.addon-tile h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: var(--fw-medium); }
.addon-tile p { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.addon-tile .price { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }

/* ======================= TESTIMONIALS ======================= */
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 820px){ .testi-grid { grid-template-columns: 1fr; } }
.testi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.testi__q { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--ink); }
.testi__by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: auto; }
.testi__av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--gold-soft),var(--taupe-soft)); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: 13px; flex: none; }
.testi__by b { font-size: 14px; font-weight: var(--fw-medium); display: block; }
.testi__by span { font-size: 12.5px; color: var(--muted); }

/* ======================= FINANCING BAND ======================= */
.fin { background: var(--ink); color: var(--bg); border-radius: var(--r-xl); padding: clamp(28px,4vw,52px); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px,4vw,48px); align-items: center; }
@media (max-width: 860px){ .fin { grid-template-columns: 1fr; } }
.fin h3 { font-family: var(--font-display); font-size: clamp(28px,3.4vw,46px); margin: 14px 0 14px; color: var(--bg); line-height: 1.04; }
.fin h3 em { font-style: italic; color: var(--gold); }
.fin p { color: rgba(251,248,241,.74); line-height: 1.6; margin: 0; font-size: 15px; }
.fin__cards { display: grid; gap: 14px; }
.fin__card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 22px; }
.badge-g { display: inline-block; font: var(--fw-semibold) 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 12px; }
.fin__card b { display: block; font-size: 17px; margin-bottom: 4px; }
.fin__card span { color: rgba(251,248,241,.62); font-size: 13.5px; line-height: 1.5; }

/* ======================= FAQ ======================= */
.faq-wrap { max-width: 880px; }
.faq-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.faq-theme { padding-block: clamp(44px, 5vw, 76px); scroll-margin-top: 96px; }
.faq-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.faq-nav__chip { display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 13.5px; font-weight: var(--fw-medium); color: var(--ink); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.faq-nav__chip:hover { border-color: var(--gold); color: var(--gold-deep); box-shadow: var(--ring-gold); }

/* ======================= CGV repliables (contrat) ======================= */
.cgv { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.cgv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: var(--fw-medium); font-size: 15px; color: var(--ink); }
.cgv > summary::-webkit-details-marker { display: none; }
.cgv > summary svg { color: var(--gold-deep); flex: none; transition: transform var(--dur) var(--ease); }
.cgv[open] > summary { border-bottom: 1px solid var(--line); }
.cgv[open] > summary svg { transform: rotate(90deg); }
.cgv__body { padding: clamp(20px, 3vw, 32px); max-height: 540px; overflow-y: auto; }
.cgv__head h4 { font-family: var(--font-display); font-size: 24px; margin: 0 0 4px; letter-spacing: -0.01em; }
.cgv__sub { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.cgv__note { font-size: 12.5px; color: var(--gold-deep); background: var(--gold-soft); border: 1px solid var(--line-gold); border-radius: var(--r-md); padding: 10px 14px; line-height: 1.55; margin: 0; }
.cgv__ident { margin: 18px 0; display: grid; gap: 8px; }
.cgv__ident p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.cgv__art { margin-bottom: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.cgv__art h5 { font-size: 13.5px; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.cgv__art p { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.cgv__accept { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.cgv__accept b { font-size: 13px; display: block; margin-bottom: 8px; color: var(--ink); }
.cgv__accept ul { margin: 0; padding-left: 18px; }
.cgv__accept li { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 6px; }

/* ======================= CTA + FORM ======================= */
.cta-final { background: var(--ink); color: var(--bg); border-radius: var(--r-xl); padding: clamp(32px,5vw,64px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; position: relative; overflow: hidden; }
@media (max-width: 860px){ .cta-final { grid-template-columns: 1fr; } }
.cta-final h2 { font-size: clamp(30px,4vw,56px); color: var(--bg); line-height: 1.02; }
.cta-final h2 em { color: var(--gold); }
.cta-final .lead { color: rgba(251,248,241,.74); margin-top: 16px; }
.lr-form { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 26px; display: grid; gap: 16px; }
.lr-form__note { font-size: 12.5px; color: rgba(251,248,241,.55); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.lr-form__note svg { color: var(--gold); flex: none; }
.lr-form__error { font-size: 13px; color: #F4C7B8; background: rgba(214,90,60,.14); border: 1px solid rgba(214,90,60,.4); border-radius: var(--r-md); padding: 11px 14px; margin: 0; line-height: 1.5; }
.lr-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: rgba(251,248,241,.7); line-height: 1.5; cursor: pointer; }
.lr-form__consent input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--gold); cursor: pointer; }
.lr-form__consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.lr-form button[disabled] { opacity: .6; cursor: progress; }
.form-row { display: grid; gap: 16px; }

/* ======================= OFFERS PAGE — comparison table ======================= */
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th { background: var(--bg-2); font-weight: var(--fw-semibold); font-size: 13px; }
.cmp thead th.feat { color: var(--ink); }
.cmp tbody th { font-weight: var(--fw-medium); color: var(--ink-soft); }
.cmp td { color: var(--muted); }
.cmp td.yes { color: var(--ink); }
.cmp td .ok { color: var(--gold-deep); font-weight: var(--fw-semibold); }
.cmp .col-feat { background: rgba(193,157,68,.06); }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: none; }
.cmp .price-row td, .cmp .price-row th { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
@media (max-width: 720px){ .cmp-scroll { overflow-x: auto; } .cmp { min-width: 640px; } }

/* ======================= REALISATIONS ======================= */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filter { font-size: 13px; font-weight: var(--fw-medium); padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--muted); background: var(--paper); transition: var(--transition-control); }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 900px){ .work-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .work-grid { grid-template-columns: 1fr; } }
.work { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: var(--transition-control); }
.work:hover { transform: var(--lift-3); box-shadow: var(--shadow-md); }
.work__shot { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.work__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.work__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.work__bar .u { margin-left: 8px; font: 11px var(--font-mono); color: var(--muted); }
.work__canvas { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; position: relative; background: linear-gradient(150deg, var(--navy-soft), var(--bg-2)); }
.work__canvas .mono { font-family: var(--font-display); font-size: 40px; color: var(--navy-300); }
.work__body { padding: 18px 20px; }
.work__body h4 { margin: 0 0 4px; font-size: 16px; font-weight: var(--fw-medium); }
.work__body p { margin: 0; font-size: 13px; color: var(--muted); }
.work__tag { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }

/* live preview realisation cards */
a.work { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.work__live { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-2); }
.work__frame { position: absolute; top: 0; left: 0; transform-origin: top left; border: 0; pointer-events: none; background: #fff; }
.work__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .45s ease; pointer-events: none; }
.work__ph .mono { font-family: var(--font-display); font-size: 44px; }
.work__ph--navy { background: linear-gradient(150deg, var(--navy-soft), var(--bg-2)); color: var(--navy-300); }
.work__ph--cream { background: linear-gradient(150deg, #efe9e0, #f5f1e8); color: #9b4242; }
.work__ph--dark { background: linear-gradient(150deg, #1a1f26, #0f1318); color: #f5c518; }
.work__open { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: var(--fw-medium); opacity: 0; transform: translateY(4px); transition: var(--transition-control); pointer-events: none; }
.work:hover .work__open { opacity: 1; transform: translateY(0); }
.work__soon-badge { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: #1c2b46; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .03em; }
.work__tag--gold { color: var(--gold-deep); }
.work__tmpl-badge { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(28,43,70,.82); color: var(--gold); border: 1px solid rgba(193,157,68,.5); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.work--soon { border-style: dashed; border-color: var(--line-2); }
.work__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.work__tag--muted { color: var(--taupe); }

/* ======================= PERSONAS ======================= */
.persona-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 900px){ .persona-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .persona-grid { grid-template-columns: 1fr; } }
.persona { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.persona__top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.persona__av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,var(--gold-soft),var(--taupe-soft)); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: 16px; flex: none; }
.persona__top b { font-size: 16px; display: block; font-weight: var(--fw-medium); }
.persona__top span { font-size: 12.5px; color: var(--muted); }
.persona__row { padding: 13px 0; border-top: 1px solid var(--line); }
.persona__row .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: var(--fw-semibold); display: block; margin-bottom: 4px; }
.persona__row p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.persona__budget { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }

/* ======================= FINANCEMENT example ======================= */
.finex { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,3vw,36px); }
.finex__line { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.finex__line .lbl { color: var(--ink-soft); }
.finex__line .num { font-family: var(--font-mono); }
.finex__line.minus .num { color: var(--gold-deep); }
.finex__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; }
.finex__total .lbl { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.finex__total .amt { font-family: var(--font-display); font-size: clamp(40px,5vw,60px); letter-spacing: -0.02em; }

/* ======================= ABOUT values ======================= */
.values { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 820px){ .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .values { grid-template-columns: 1fr; } }
.value { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.value__n { font-family: var(--font-display); font-size: 28px; color: var(--gold-deep); }
.value h4 { margin: 12px 0 8px; font-size: 16px; font-weight: var(--fw-medium); }
.value p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.about-quote { font-family: var(--font-display); font-size: clamp(26px,3.4vw,44px); line-height: 1.18; max-width: 22ch; }
.about-quote em { color: var(--gold-deep); font-style: italic; }

/* ======================= PARRAINAGE ======================= */
.tier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 820px){ .tier-grid { grid-template-columns: 1fr; } }
.tier { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; position: relative; }
.tier__big { font-family: var(--font-display); font-size: clamp(36px,4.5vw,56px); color: var(--ink); line-height: 1; }
.tier__big em { color: var(--gold-deep); font-style: italic; }
.tier h4 { margin: 14px 0 8px; font-size: 16px; font-weight: var(--fw-medium); }
.tier p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ======================= CONTACT ======================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
@media (max-width: 820px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.contact-card__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--taupe-soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.contact-card b { font-size: 15px; font-weight: var(--fw-medium); display: block; margin-bottom: 3px; }
.contact-card span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.contact-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 30px; }
.contact-cards .contact-card { margin-bottom: 0; flex-direction: column; }
@media (max-width: 820px){ .contact-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .contact-cards { grid-template-columns: 1fr; } }

/* small shared bits */
.note-band { display: flex; gap: 12px; align-items: flex-start; background: var(--gold-soft); border: 1px solid var(--line-gold); border-radius: var(--r-md); padding: 16px 18px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.note-band svg { color: var(--gold-deep); flex: none; }
.pagehead { padding-top: clamp(40px,5vw,72px); }
.pagehead h1 { font-size: var(--display-1); margin: 18px 0 0; }
.pagehead .lead { margin-top: 20px; }
.mini-link { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-medium); font-size: 14.5px; color: var(--ink); }
.mini-link svg { width: 16px; height: 16px; color: var(--gold-deep); transition: transform var(--dur) var(--ease); }
.mini-link:hover svg { transform: translateX(3px); }

/* ======================= CONFIGURATOR — COMPTOIR WEB ======================= */
.cfg { display: grid; grid-template-columns: 1.32fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 980px){ .cfg { grid-template-columns: 1fr; } }
.cfg__panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px,3vw,30px); }
.cfg__steps { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.cfg__chip { font-size: 12.5px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--muted); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; cursor: pointer; transition: var(--transition-control); }
.cfg__chip:hover { border-color: var(--ink); color: var(--ink); }
.cfg__chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cfg__chip.is-done { border-color: var(--line-gold); color: var(--gold-deep); }
.cfg__chip .n { font-family: var(--font-mono); }
.cfg__q { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 6px 0 14px; font-weight: var(--fw-semibold); }
.cfg__hint { font-size: 13px; color: var(--muted); margin: -6px 0 16px; line-height: 1.5; }
.cfg__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }

.opt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; }
.opt-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px){ .opt-row--2 { grid-template-columns: 1fr; } }
.opt { border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 16px; cursor: pointer; transition: var(--transition-control); background: var(--bg); position: relative; }
.opt:hover { border-color: var(--navy-400); }
.opt.is-on { border-color: var(--ink); box-shadow: var(--ring-gold); background: var(--paper); }
.opt b { display: block; font-size: 15px; font-weight: var(--fw-medium); }
.opt .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: block; }
.opt .price { font-family: var(--font-mono); font-size: 13px; color: var(--ink); margin-top: 10px; display: block; }
.opt .price.free { color: var(--gold-deep); }
.opt__tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--bg); display: none; align-items: center; justify-content: center; }
.opt.is-on .opt__tick { display: inline-flex; }

.addon { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; background: var(--bg); cursor: pointer; transition: var(--transition-control); }
.addon:hover { border-color: var(--line-2); }
.addon.is-on { border-color: var(--ink); box-shadow: var(--ring-gold); background: var(--paper); }
.addon__check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); flex: none; display: flex; align-items: center; justify-content: center; color: transparent; }
.addon.is-on .addon__check { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.addon b { font-size: 14.5px; font-weight: var(--fw-medium); } .addon .sub { font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }
.addon .price { margin-left: auto; font-family: var(--font-mono); font-size: 14px; white-space: nowrap; }
.addon .price small { color: var(--muted); }
.addon__group { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: var(--fw-semibold); margin: 22px 0 12px; }

/* live preview + cart */
.cfg__aside { position: sticky; top: 88px; display: grid; gap: 18px; }
.preview { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.preview__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.preview__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.preview__url { margin-left: 10px; font: 12px var(--font-mono); color: var(--muted); }
.preview__stage { padding: 22px; background: var(--bg-2); }
.mock { border-radius: 12px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-sm); transition: opacity .3s var(--ease); }
.mock__hero { height: 84px; background: var(--ink); position: relative; display: flex; align-items: center; padding: 0 18px; transition: clip-path .4s var(--ease); }
.mock__hero.objectif::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 46px; height: 30px; border-radius: 6px; background: var(--gold); }
.mock__logo { width: 30px; height: 12px; border-radius: 3px; background: rgba(251,248,241,.55); }
.mock__row { height: 9px; border-radius: 3px; background: var(--bg-3); margin: 12px 16px; }
.mock__row.s { width: 45%; } .mock__row.m { width: 72%; }
.mock__btn { margin: 16px; width: 92px; height: 26px; border-radius: var(--r-pill); background: var(--gold); }
.mock__media { margin: 14px 16px; height: 40px; border-radius: 8px; background: linear-gradient(120deg,var(--navy-soft),var(--gold-soft)); display: flex; align-items: center; justify-content: center; }
.mock__media svg { width: 18px; height: 18px; color: var(--navy-500); }

.summary { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.summary__pack { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.summary__pack .nm { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.01em; }
.summary__pack .nm em { color: var(--gold-deep); font-style: italic; }
.summary__line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 8px 0; color: var(--ink-soft); }
.summary__line.muted { color: var(--muted); font-size: 12.5px; }
.summary__line .num { font-family: var(--font-mono); white-space: nowrap; }
.summary__line.discount { color: var(--gold-deep); font-weight: var(--fw-medium); }
.summary__sub { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding: 6px 0; border-top: 1px dashed var(--line); margin-top: 6px; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.summary__total .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.summary__total .amt { font-family: var(--font-display); font-size: 38px; letter-spacing: -0.02em; }
.summary__rec { font-size: 12.5px; color: var(--muted); margin-top: 4px; text-align: right; }
.summary__delay { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid var(--line-gold); font-size: 13px; color: var(--ink-soft); }
.summary__delay b { font-family: var(--font-mono); }
.summary__note { font-size: 11.5px; color: var(--muted); margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.summary__note svg { flex: none; color: var(--gold-deep); margin-top: 1px; }
.express-row { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--bg); cursor: pointer; }
.express-row.is-on { border-color: var(--ink); box-shadow: var(--ring-gold); background: var(--paper); }
.express-row .toggle { width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--line-2); position: relative; flex: none; transition: background var(--dur) var(--ease); }
.express-row.is-on .toggle { background: var(--ink); }
.express-row .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-sm); }
.express-row.is-on .toggle::after { transform: translateX(18px); }

/* ======================= CONTRACT ======================= */
.contract { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 980px){ .contract { grid-template-columns: 1fr; } }
.doc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,3vw,40px); }
.doc h3 { font-family: var(--font-display); font-size: 26px; margin: 0 0 6px; }
.doc__meta { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); margin-bottom: 22px; }
.doc__scroll { max-height: 420px; overflow-y: auto; padding-right: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 18px; }
.doc__art { margin-bottom: 18px; }
.doc__art b { font-size: 13.5px; color: var(--ink); display: block; margin-bottom: 5px; }
.doc__art p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.doc__terms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
@media (max-width: 560px){ .doc__terms { grid-template-columns: 1fr; } }
.term { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); padding: 12px 14px; background: var(--bg-2); border-radius: var(--r-sm); }
.term svg { color: var(--gold-deep); flex: none; margin-top: 1px; width: 16px; height: 16px; }
.sign { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; position: sticky; top: 88px; }
.sign__pad { height: 96px; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; margin: 14px 0; background: var(--bg); cursor: crosshair; }
.sign__pad.signed { border-style: solid; border-color: var(--line-gold); background: var(--gold-soft); color: var(--ink); font-family: var(--font-display); font-size: 30px; font-style: italic; }
.sign__check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); margin: 16px 0; cursor: pointer; line-height: 1.5; }
.sign__box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); flex: none; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.sign__check.on .sign__box { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ======================= PAYMENT ======================= */
.pay { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 980px){ .pay { grid-template-columns: 1fr; } }
.pay__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px,3vw,32px); }
.pay__methods { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.pay__method { flex: 1; min-width: 130px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 16px; cursor: pointer; transition: var(--transition-control); display: flex; gap: 10px; align-items: center; }
.pay__method.is-on { border-color: var(--ink); box-shadow: var(--ring-gold); }
.pay__method b { font-size: 14px; font-weight: var(--fw-medium); }
.card-visual { aspect-ratio: 1.6; border-radius: var(--r-md); background: linear-gradient(135deg, var(--navy-700), var(--ink)); color: var(--bg); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-md); margin-bottom: 18px; }
.card-visual .chip { width: 40px; height: 28px; border-radius: 6px; background: linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.card-visual .no { font-family: var(--font-mono); font-size: 18px; letter-spacing: .14em; }
.card-visual .rowb { display: flex; justify-content: space-between; font-size: 12px; color: rgba(251,248,241,.7); }
.recap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; position: sticky; top: 88px; }
.recap__line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; color: var(--ink-soft); }
.recap__line .num { font-family: var(--font-mono); }
.recap__acompte { background: var(--ink); color: var(--bg); border-radius: var(--r-md); padding: 18px; margin-top: 14px; }
.recap__acompte .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(251,248,241,.6); }
.recap__acompte .amt { font-family: var(--font-display); font-size: 36px; margin-top: 6px; }
.recap__acompte .sub { font-size: 12px; color: rgba(251,248,241,.6); margin-top: 4px; }

/* success */
.success { max-width: 620px; margin: 0 auto; text-align: center; padding: clamp(40px,7vw,90px) 0; }
.success__ring { width: 92px; height: 92px; border-radius: 50%; background: var(--gold-soft); border: 1px solid var(--line-gold); color: var(--gold-deep); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.success h1 { font-size: clamp(34px,5vw,60px); }
.success .lead { margin: 18px auto 30px; }

/* ======================= LOGIN ======================= */
.login { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px){ .login { grid-template-columns: 1fr; } }
.login__aside { background: var(--ink); color: var(--bg); padding: clamp(40px,6vw,80px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.login__aside h2 { font-family: var(--font-display); font-size: clamp(30px,3.6vw,48px); color: var(--bg); line-height: 1.06; }
.login__aside h2 em { color: var(--gold); font-style: italic; }
.login__aside p { color: rgba(251,248,241,.72); margin-top: 18px; max-width: 38ch; line-height: 1.6; }
.login__pts { margin-top: 30px; display: grid; gap: 14px; }
.login__pt { display: flex; gap: 12px; align-items: center; font-size: 14px; color: rgba(251,248,241,.85); }
.login__pt svg { color: var(--gold); flex: none; }
.login__form { padding: clamp(32px,5vw,72px); display: flex; flex-direction: column; justify-content: center; max-width: 480px; }
.login__form h1 { font-size: clamp(28px,3.4vw,40px); margin-bottom: 8px; }

/* ======================= DASHBOARD SHELL (dark) ======================= */
.dash { display: grid; grid-template-columns: 256px 1fr; min-height: calc(100vh - 68px); }
@media (max-width: 1040px){ .dash { grid-template-columns: 1fr; } .dash__side { display: none; } }
.dash__side { background: var(--ink); color: var(--bg); padding: 22px 16px; border-right: 1px solid rgba(255,255,255,.08); position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; }
.dash__group { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(251,248,241,.4); margin: 22px 12px 10px; }
.dash__group:first-child { margin-top: 4px; }
.dash__nav { display: grid; gap: 2px; }
.dash__nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: rgba(251,248,241,.72); font-size: 14px; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dash__nav a:hover { background: rgba(255,255,255,.05); color: var(--bg); }
.dash__nav a.is-active { background: rgba(255,255,255,.08); color: var(--bg); }
.dash__nav a.is-active .ic { color: var(--gold); }
.dash__nav .ic { width: 18px; height: 18px; flex: none; color: rgba(251,248,241,.55); }
.dash__nav .bdg { margin-left: auto; font: var(--fw-semibold) 11px var(--font-mono); background: var(--gold); color: var(--ink); padding: 1px 8px; border-radius: var(--r-pill); }
.dash__levels { padding: 0 12px; font-size: 12px; color: rgba(251,248,241,.45); line-height: 1.6; }

.board { background: var(--navy-900); color: var(--bg); padding: clamp(20px,3vw,36px); min-height: calc(100vh - 68px); }
.board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.board__title { font-family: var(--font-display); font-size: clamp(28px,3vw,40px); line-height: 1.05; margin: 6px 0 0; color: var(--bg); }
.board__title em { font-style: italic; color: var(--gold); }
.eyebrow-d { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow-d::before { content: ""; width: 9px; height: 9px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); transform: skewX(-14deg) rotate(45deg); }

.d-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-lg); padding: 22px; }
.d-card--pad0 { padding: 0; overflow: hidden; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md); padding: 18px 20px; }
.kpi__label { font-size: 12px; color: rgba(251,248,241,.55); }
.kpi__value { font-family: var(--font-display); font-size: 38px; line-height: 1; margin-top: 10px; color: var(--bg); letter-spacing: -0.02em; }
.kpi__value em { font-style: italic; color: var(--gold); }
.kpi__sub { font-size: 12px; color: rgba(251,248,241,.5); margin-top: 8px; }
.kpi--warn { border-color: rgba(193,157,68,.4); }
.kpi--warn .kpi__value { color: var(--gold); }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1040px){ .grid-2 { grid-template-columns: 1fr; } }
.d-title { font-size: 13px; letter-spacing: .04em; color: rgba(251,248,241,.6); text-transform: uppercase; margin: 0 0 16px; font-weight: var(--fw-semibold); }
.stack-24 > * + * { margin-top: 24px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muted-d { color: rgba(251,248,241,.6); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: var(--fw-medium); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(251,248,241,.45); padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.tbl td { padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(251,248,241,.85); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(255,255,255,.025); }
.tbl .num { font-family: var(--font-mono); text-align: right; }
.tbl .ref { font-family: var(--font-mono); font-size: 13px; color: rgba(251,248,241,.6); }

/* status pills (dark) */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: var(--fw-medium); padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--neutral { color: #C6D0E0; background: rgba(198,208,224,.12); }
.pill--info { color: #9AABC6; background: rgba(154,171,198,.14); }
.pill--gold { color: #D9B964; background: rgba(193,157,68,.16); }
.pill--ok { color: #79C9A6; background: rgba(121,201,166,.14); }
.pill--warn { color: #E0A36B; background: rgba(224,163,107,.15); }
.pill--late { color: #E08585; background: rgba(224,133,133,.15); }

/* pipeline */
.pipe { display: flex; gap: 0; }
.pipe__step { flex: 1; position: relative; padding: 0 6px; }
.pipe__dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font: var(--fw-semibold) 12px var(--font-mono); color: rgba(251,248,241,.5); background: var(--navy-900); position: relative; z-index: 1; }
.pipe__step.done .pipe__dot { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pipe__step.now .pipe__dot { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 4px rgba(193,157,68,.15); }
.pipe__line { position: absolute; top: 15px; left: 50%; right: -50%; height: 2px; background: rgba(255,255,255,.12); z-index: 0; }
.pipe__step.done .pipe__line { background: var(--gold); }
.pipe__step:last-child .pipe__line { display: none; }
.pipe__label { font-size: 12.5px; margin-top: 12px; color: rgba(251,248,241,.65); }
.pipe__step.now .pipe__label { color: var(--bg); font-weight: var(--fw-medium); }

/* billing */
.inv { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 28px; }
.inv__head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 20px; }
.inv__tva { display: grid; gap: 8px; }
.inv__tva-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; font-size: 13.5px; padding: 8px 0; border-bottom: 1px dashed var(--line); align-items: center; }
.tva-flag { font: var(--fw-semibold) 10.5px var(--font-mono); padding: 2px 8px; border-radius: var(--r-pill); background: var(--navy-soft); color: var(--navy-700); }

/* maintenance / sepa */
.sepa { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px){ .sepa { grid-template-columns: 1fr; } }
.rgpd { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 16px; font-size: 13px; color: rgba(251,248,241,.72); line-height: 1.55; }
.rgpd svg { color: var(--gold); flex: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 560px){ .field-row { grid-template-columns: 1fr; } }
.seg { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.seg button { font-size: 12.5px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.18); color: rgba(251,248,241,.7); background: transparent; transition: var(--transition-control); }
.seg button.is-on { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: var(--fw-medium); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: rgba(251,248,241,.78); margin: 10px 0 18px; cursor: pointer; line-height: 1.5; }
.consent__box { width: 20px; height: 20px; border-radius: 6px; background: var(--gold); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink); }

/* ======================= CONFIG — étape 4 (qty lines, BI, devis) ======================= */
.cfg-line { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; background: var(--bg); }
.cfg-line__main { flex: 1; min-width: 0; }
.cfg-line__main b { font-size: 14.5px; font-weight: var(--fw-medium); display: block; }
.cfg-line__main .sub { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; line-height: 1.5; }
.cfg-line__price { font-family: var(--font-mono); font-size: 13.5px; white-space: nowrap; text-align: right; min-width: 96px; }
.cfg-line__price small { color: var(--muted); display: block; font-size: 11px; }
.cfg-line__hd { font-size: 12.5px; color: var(--ink-soft); font-weight: var(--fw-medium); margin: 4px 0 10px; }

.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--paper); flex: none; }
.stepper__b { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--ink); background: transparent; border: none; cursor: pointer; border-radius: 50%; transition: var(--transition-control); }
.stepper__b:hover:not(:disabled) { background: var(--bg-2); }
.stepper__b:disabled { color: var(--line-2); cursor: not-allowed; }
.stepper__v { min-width: 26px; text-align: center; font-family: var(--font-mono); font-size: 14px; }

.bi { border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 16px; background: var(--bg-2); margin-bottom: 10px; }
.bi__head { margin-bottom: 12px; }
.bi__head b { font-size: 14.5px; font-weight: var(--fw-medium); display: block; }
.bi__head span { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; }
.bi .cfg-line { background: var(--paper); margin-bottom: 8px; }
.bi__note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.bi__note svg { color: var(--gold-deep); flex: none; margin-top: 1px; }

.devis { border: 1px solid var(--line-gold); background: var(--gold-soft); border-radius: var(--r-md); padding: 16px 18px; margin: 12px 0; }
.devis__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.devis__head svg { color: var(--gold-deep); flex: none; }
.devis__list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.devis__list li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.devis__check { display: flex; gap: 10px; align-items: center; margin-top: 14px; cursor: pointer; font-size: 13.5px; color: var(--ink); font-weight: var(--fw-medium); }
.devis__check .sign__box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--paper); flex: none; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: var(--transition-control); }
.devis__check.on .sign__box { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.cfg-textarea { width: 100%; margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg); padding: 12px 14px; font: inherit; font-size: 14px; color: var(--ink); resize: vertical; outline: none; font-family: var(--font-sans); transition: border-color var(--dur) var(--ease); }
.cfg-textarea:focus { border-color: var(--ink); box-shadow: var(--ring-gold); }
.cfg-textarea::placeholder { color: var(--muted); }

/* ======================= CONFIG — étape 5 (packs + bundles) ======================= */
.pack { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; background: var(--bg); overflow: hidden; transition: var(--transition-control); }
.pack.is-on { border-color: var(--ink); box-shadow: var(--ring-gold); background: var(--paper); }
.pack__top { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
.pack__top .addon__check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); flex: none; display: flex; align-items: center; justify-content: center; color: transparent; }
.pack.is-on .pack__top .addon__check { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pack__name { flex: 1; min-width: 0; }
.pack__name b { font-size: 14.5px; font-weight: var(--fw-medium); display: flex; align-items: center; gap: 8px; }
.pack__name .sub { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; line-height: 1.5; }
.pack__top .price { margin-left: auto; font-family: var(--font-mono); font-size: 14px; white-space: nowrap; text-align: right; }
.pack__top .price small { color: var(--muted); }
.pack__delay { font: var(--fw-semibold) 10px var(--font-mono); letter-spacing: .04em; color: var(--gold-deep); background: var(--gold-soft); border: 1px solid var(--line-gold); padding: 1px 7px; border-radius: var(--r-pill); }
.pack__save { display: block; font-size: 11px; color: var(--gold-deep); margin-top: 2px; }
.pack__feats { margin: 0; padding: 0 18px 16px 52px; list-style: none; display: grid; gap: 7px; }
.pack__feats li { position: relative; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; padding-left: 18px; }
.pack__feats li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pack__logos { display: flex; gap: 16px; align-items: center; padding: 0 18px 16px 52px; flex-wrap: wrap; }
.pack__logos img { height: 22px; width: auto; display: block; }
.pack--bundle .pack__top .price { color: var(--ink); }
.pack--bundle.is-on { box-shadow: var(--ring-gold), var(--shadow-md); }

/* ======================= PAYMENT (virement + form) ======================= */
.pay-method-solo { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1.5px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--ring-gold); background: var(--paper); margin-bottom: 14px; }
.pay-method-solo b { font-size: 15px; font-weight: var(--fw-medium); display: block; }
.pay-method-solo .sub { font-size: 12.5px; color: var(--muted); display: block; margin-top: 3px; line-height: 1.5; }
.pay-split { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--bg); cursor: pointer; transition: var(--transition-control); }
.pay-split.is-on { border-color: var(--ink); box-shadow: var(--ring-gold); background: var(--paper); }
.pay-split .addon__check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); flex: none; display: flex; align-items: center; justify-content: center; color: transparent; }
.pay-split.is-on .addon__check { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pay-split b { font-size: 14px; font-weight: var(--fw-medium); display: block; }
.pay-split .sub { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.5; }
.pay-split .price { font-family: var(--font-mono); font-size: 13.5px; white-space: nowrap; }

.filefield { display: grid; gap: 8px; cursor: pointer; }
.filefield__lbl { font-family: var(--font-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.filefield__drop { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); background: var(--bg); font-size: 13.5px; color: var(--muted); transition: var(--transition-control); }
.filefield:hover .filefield__drop { border-color: var(--navy-400); color: var(--ink); }
.filefield__drop svg { color: var(--gold-deep); flex: none; }

/* ======================= HERO — repère géographique (territoires) ======================= */
.hero__geo { margin-top: clamp(26px, 3.4vw, 34px); }
/* Repère géographique : doré, discret, secondaire au titre. Se replie proprement
   au niveau des puces « • » sur les petits écrans, sans débordement horizontal. */
.hero__geo-zone {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: clamp(12px, 1.05vw, 13.5px);
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* chaque territoire reste insécable : la ligne ne se replie qu'au niveau des « • » */
.hero__geo-loc { white-space: nowrap; }


/* ==========================================================================
   « Notre agence » (équipe) — section ajoutée. Réutilise les tokens du DS.
   ========================================================================== */

/* ---- séparateur décoratif ---- */
.agence__divider{
  display:flex; align-items:center; gap:18px;
  max-width:340px; margin:0 auto clamp(40px,6vw,72px);
}
.agence__divider-line{ flex:1; height:1px; background:var(--line-gold); }
.agence__divider-mark{
  flex:none; width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid var(--line-gold);
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.agence__divider-mark img{ width:24px; height:auto; opacity:.92; }

/* ---- grille deux colonnes ---- */
.agence__grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(40px,6vw,88px); align-items:center;
}

/* ---- colonne gauche ---- */
.agence__title{ margin:18px 0 0; max-width:14ch; }
.agence__rule{
  display:block; width:64px; height:2px; background:var(--gold);
  margin:26px 0; border-radius:2px;
}
.agence__lead{
  color:var(--ink-soft); line-height:1.7;
  font-size:clamp(15px,1.15vw,16.5px); max-width:46ch; margin:0 0 18px;
}
.agence__cta{ margin-top:10px; }

/* ---- colonne droite : cartes ---- */
.agence__cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); }

.team-card{
  position:relative; background:var(--paper);
  border:1px solid var(--taupe-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.team-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.team-card__photo{
  aspect-ratio:4/5; background:var(--ink); overflow:hidden;
  border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg);
}
.team-card__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
/* Recadrage ciblé de la photo de Quentin (2ᵉ carte) : la photo source est
   composée à gauche (vide à droite + bras en bas). Léger zoom + recentrage,
   sans toucher la photo d'Antony ni les dimensions de la carte. */
.agence__cards .team-card:nth-of-type(2) .team-card__photo img{
  transform:scale(1.5); transform-origin:-4% -1%;
}

/* monogramme doré à cheval entre la photo et le corps */
.team-card__mono{
  position:relative; width:48px; height:48px; margin:-24px auto 0;
  border-radius:var(--r-pill); background:var(--bg);
  border:1px solid var(--line-gold); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.team-card__mono img{ width:26px; height:auto; }

.team-card__body{
  text-align:center; padding:14px 20px clamp(22px,3vw,28px);
  display:flex; flex-direction:column; align-items:center;
}
.team-card__name{
  font-family:var(--font-display); font-weight:var(--fw-regular);
  font-size:clamp(22px,2vw,26px); color:var(--ink); margin:6px 0 0; line-height:1.1;
}
.team-card__role{
  font-family:var(--font-sans); font-weight:var(--fw-semibold);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); margin-top:9px;
}
.team-card__sub{
  font-family:var(--font-sans); font-size:13.5px; color:var(--taupe);
  margin-top:7px; line-height:1.4;
}
.team-card__li{
  margin-top:16px; width:34px; height:34px; border-radius:var(--r-pill);
  border:1px solid var(--taupe-soft); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.team-card__li:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.team-card__li svg{ width:16px; height:16px; display:block; }

/* ---- révélation au scroll ---- */
.agence .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.agence .reveal.is-in{ opacity:1; transform:none; }
.agence__cards .reveal:nth-child(2){ transition-delay:.1s; }

/* ---- responsive ---- */
@media (max-width:940px){
  .agence__grid{ grid-template-columns:1fr; gap:40px; }
  .agence__title{ max-width:none; }
  .agence__lead{ max-width:none; }
}
@media (max-width:560px){
  .agence__cards{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; gap:24px; }
}
@media (prefers-reduced-motion:reduce){
  .agence .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .team-card{ transition:none; }
}

/* ==========================================================================
   Pages légales (Mentions légales, Politique de confidentialité) — prose
   ========================================================================== */
.legal { max-width: 760px; }
.legal h2 {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: clamp(22px, 2.4vw, 28px); color: var(--ink);
  margin: 40px 0 14px; line-height: 1.15;
}
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--ink-soft); line-height: 1.75; font-size: 15.5px; margin: 0 0 16px; }
.legal a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur) var(--ease); }
.legal a:hover { color: var(--gold); }
.legal strong { color: var(--ink); font-weight: var(--fw-semibold); }

.legal ul { margin: 0 0 16px; padding: 0; list-style: none; }
.legal ul:not(.legal__defs) li {
  position: relative; padding-left: 20px; color: var(--ink-soft);
  line-height: 1.7; font-size: 15.5px; margin-bottom: 8px;
}
.legal ul:not(.legal__defs) li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--gold);
}

/* liste « clé / valeur » (bloc éditeur) */
.legal__defs li {
  display: grid; grid-template-columns: 168px 1fr; gap: 4px 18px;
  padding: 12px 0; border-bottom: 1px solid var(--taupe-soft);
  color: var(--ink-soft); line-height: 1.6; font-size: 15px;
}
.legal__defs li:first-child { border-top: 1px solid var(--taupe-soft); }
.legal__defs li > span:first-child {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: var(--fw-semibold); padding-top: 3px;
}
@media (max-width: 560px) {
  .legal__defs li { grid-template-columns: 1fr; gap: 2px; }
}

/* tableau finalités / base légale */
.legal__table {
  width: 100%; border-collapse: collapse; margin: 0 0 18px;
  border: 1px solid var(--taupe-soft); border-radius: var(--r-md); overflow: hidden;
}
.legal__table th, .legal__table td {
  text-align: left; padding: 13px 16px; font-size: 14.5px; line-height: 1.6;
  border-bottom: 1px solid var(--taupe-soft); vertical-align: top;
}
.legal__table th {
  background: var(--bg-2); color: var(--ink);
  font-weight: var(--fw-semibold); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
}
.legal__table td { color: var(--ink-soft); }
.legal__table td:first-child { color: var(--ink); font-weight: var(--fw-medium); width: 38%; }
.legal__table tr:last-child td { border-bottom: 0; }

.legal__updated { margin-top: 34px; font-size: 13px; color: var(--taupe); font-style: italic; }

/* liens légaux dans le pied de page */
.foot__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.foot__legal a { color: rgba(251,248,241,.6); transition: color var(--dur) var(--ease); }
.foot__legal a:hover { color: var(--bg); }