/* ===================================================================
   DOFNY — Landing page « Double action Buderus »
   Implémentation de « 01 Landing page.dc.html » (Claude Design).

   Les couleurs, typographies, rayons et ombres proviennent du design
   system DOFNY (_ds/…/tokens/*.css). Les seules valeurs définies ici
   sont celles que la landing introduit et que les tokens ne couvrent
   pas (les deux teintes de la bande sombre et le texte clair sur fond
   sombre), regroupées sous le préfixe --lp-.

   Le design est un artboard de 1440 px. Les bandes sont ici en pleine
   largeur et leur contenu est recentré à --page-max : à 1440 px le
   rendu est identique à l'artboard, au-delà la page ne s'étire plus.
=================================================================== */

:root {
  /* Bande sombre du hero et de la section compte pro */
  --lp-dark-1: #10131a;
  --lp-dark-2: #2a3644;
  /* Texte clair sur fond sombre */
  --lp-on-dark: #e6edf5;
  /* Gouttière de page : 6.6vw plafonné au gutter du DS (96px) */
  --lp-gutter: clamp(20px, 6.6vw, var(--page-gutter));
}

/* ---- Reset ciblé ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--text-body-base);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--text-link); }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: 3px solid var(--dofny-blue);
  outline-offset: 3px;
  border-radius: var(--radius-4);
}
.on-dark :focus-visible { outline-color: var(--dofny-white); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 20px;
  background: var(--dofny-white);
  color: var(--dofny-ink);
  font: var(--fw-bold) var(--fs-16) / 1 var(--font-ui);
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Bandes ---------------------------------------------------- */
/* Chaque section occupe toute la largeur ; .inner recentre le contenu
   sur la largeur de l'artboard et porte la gouttière. */
.inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.band--light  { background: var(--dofny-surface-3); }  /* #f4f6f9 */
.band--well   { background: var(--dofny-surface); }    /* #f1f2f5 */
.band--dark   { background: linear-gradient(90deg, var(--lp-dark-1), var(--lp-dark-2)); color: var(--dofny-white); }

/* Rythme vertical des sections (clamp repris de l'artboard) */
.section > .inner {
  padding-block: clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---- Titres ---------------------------------------------------- */
.h2 {
  font: var(--fw-bold) clamp(28px, 3vw, 40px) / 1.1 var(--font-display);
}
.h3 {
  font: var(--fw-bold) var(--fs-24) / 1.2 var(--font-display);
}

/* ---- Boutons ---------------------------------------------------- */
/* Transcription du composant DesignSystem_b672e4.Button, taille md.
   Les états hover/active complètent la transition déclarée par le
   composant (filter 120ms, transform 80ms), que l'artboard n'expose pas. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 48px;
  padding: 0 var(--space-24);
  border: none;
  border-radius: var(--radius-30);
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: filter 120ms ease, transform 80ms ease;
}
.btn:hover { filter: brightness(0.94); }
.btn:active { transform: scale(0.98); }

/* Les couleurs sont répétées sur :hover pour neutraliser la règle
   a:hover globale — le seul retour au survol est le filter ci-dessus. */
.btn--cta,     .btn--cta:hover     { background: var(--dofny-green); color: var(--dofny-white); }
.btn--primary, .btn--primary:hover { background: var(--dofny-blue);  color: var(--dofny-white); }
.btn--light,   .btn--light:hover   { background: var(--dofny-white); color: var(--dofny-ink); }
.btn--outline, .btn--outline:hover {
  background: transparent;
  color: var(--dofny-blue);
  border: 1.5px solid var(--dofny-blue);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

/* ---- Badges / eyebrows ------------------------------------------ */
.badge {
  align-self: flex-start;
  border-radius: var(--radius-8);
  padding: 6px 10px;
  font: var(--fw-bold) var(--fs-14) / 1 var(--font-display);
  color: var(--dofny-white);
}
.badge--blue  { background: var(--dofny-blue); }
.badge--green { background: var(--dofny-green-600); }
.badge--lg    { padding: 7px 12px; }

.eyebrow {
  font: var(--fw-bold) var(--fs-14) / 1 var(--font-display);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* ===================================================================
   Header
=================================================================== */
.site-header > .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--dofny-border-2);
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  text-decoration: none;
}
.site-header__brand img { height: 34px; width: auto; }
.site-header__wordmark {
  font: var(--fw-bold) var(--fs-22) / 1 var(--font-display);
  color: var(--dofny-ink);
}
.site-header__aside {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  flex-wrap: wrap;
}
.site-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--fw-bold) var(--fs-14) / 1 var(--font-display);
  color: var(--dofny-blue);
  text-decoration: none;
}
.site-header__back:hover { text-decoration: underline; }
.dealer-mark { display: block; width: 112px; height: 56px; }

/* ===================================================================
   Hero
=================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--lp-dark-1), var(--lp-dark-2));
  color: var(--dofny-white);
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: 0.45;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(16, 19, 26, 0.95) 0%,
    rgba(16, 19, 26, 0.75) 55%,
    rgba(16, 19, 26, 0.35) 100%);
}
.hero > .inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
  padding-block: clamp(40px, 6vw, 88px);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  max-width: 640px;
}
.hero__eyebrow { color: var(--dofny-blue-band-text); }
.hero__title {
  font: var(--fw-black) clamp(36px, 5vw, 64px) / 1.02 var(--font-display);
  letter-spacing: -0.5px;
}
.hero__lead {
  font: var(--fw-medium) clamp(17px, 1.4vw, 20px) / 1.45 var(--font-body);
  color: var(--lp-on-dark);
}
.hero .btn-row { margin-top: var(--space-8); }
.hero__note {
  font: var(--fw-semibold) var(--fs-15) / 1.4 var(--font-body);
  color: var(--dofny-blue-band-text);
}

.hero__figures {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  justify-self: end;
  width: 100%;
  max-width: 460px;
}
.hero__figures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-12);
}

/* Carte chiffre du hero — container query reprise de l'artboard :
   le chiffre s'adapte à la largeur de la carte, pas à celle de l'écran. */
.figure-card {
  background: var(--dofny-white);
  color: var(--dofny-ink);
  border-radius: 10px;
  padding: var(--space-24) 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-width: 0;
  container-type: inline-size;
}
.figure-card__value {
  font: var(--fw-black) clamp(40px, 30cqw, 68px) / 1 var(--font-display);
  letter-spacing: -2px;
  white-space: nowrap;
}
.figure-card__value--sm { font-size: clamp(36px, 24cqw, 68px); }
.figure-card__value--blue  { color: var(--dofny-blue); }
.figure-card__value--green { color: var(--dofny-green-600); }
.figure-card__label { font: var(--fw-bold) var(--fs-16) / 1.3 var(--font-display); }

.hero__strip {
  background: var(--dofny-blue);
  color: var(--dofny-white);
  border-radius: 10px;
  padding: var(--space-16) 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.hero__strip-label { font: var(--fw-bold) var(--fs-16) / 1 var(--font-display); }
.hero__strip-dates { font: var(--fw-black) var(--fs-22) / 1 var(--font-display); }

/* ===================================================================
   Deux actions
=================================================================== */
.actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-24);
}
.action-card {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--dofny-border);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.action-card__value {
  font: var(--fw-black) clamp(64px, 7vw, 104px) / 0.95 var(--font-display);
  letter-spacing: -3px;
  white-space: nowrap;
}
.action-card__value--blue  { color: var(--dofny-blue); }
.action-card__value--green { color: var(--dofny-green-600); }
.action-card__body { font: var(--fw-regular) 17px / 1.55 var(--font-body); }
.action-card__fine {
  font: var(--fw-medium) var(--fs-14) / 1.5 var(--font-body);
  color: var(--dofny-gray-2);
}
.action-card .btn-row { margin-top: 6px; }

/* ===================================================================
   Exemple concret
=================================================================== */
.example__head {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  flex-wrap: wrap;
}
.example__photo { width: 96px; height: 96px; object-fit: contain; }
.example__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.example__lead { font: var(--fw-medium) 17px / 1.5 var(--font-body); }

.example__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-16);
}
.money-card {
  background: var(--dofny-white);
  border-radius: 10px;
  padding: 28px var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.money-card--dark { background: var(--lp-dark-1); color: var(--dofny-white); }
.money-card__amount {
  font: var(--fw-bold) 48px / 1 var(--font-price);
  color: var(--dofny-ink);
}
.money-card__amount--green { color: var(--dofny-green-600); }
.money-card--dark .money-card__amount { color: var(--dofny-white); }
.money-card__meta {
  font: var(--fw-medium) var(--fs-16) / 1.4 var(--font-body);
  color: var(--dofny-gray-2);
}
.money-card--dark .money-card__meta { color: var(--dofny-blue-band-text); }
.money-card__body { font: var(--fw-regular) var(--fs-16) / 1.5 var(--font-body); }
.money-card--dark .money-card__body { color: var(--lp-on-dark); }
.eyebrow--blue  { color: var(--dofny-blue); }
.eyebrow--green { color: var(--dofny-green-600); }
.eyebrow--pale  { color: var(--dofny-blue-band-text); }

/* ===================================================================
   Comment ça marche
=================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-24);
}
.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step__number {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--dofny-blue);
  color: var(--dofny-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--fw-black) 26px / 1 var(--font-display);
}
.step__text { font: var(--fw-semibold) var(--fs-18) / 1.45 var(--font-body); }
.steps + .btn-row { margin-top: var(--space-8); }

/* ===================================================================
   Conditions
=================================================================== */
.conditions > .inner {
  padding-block: clamp(40px, 5vw, 64px);
  gap: var(--space-20);
}
.conditions__title {
  font: var(--fw-bold) clamp(24px, 2.4vw, 32px) / 1.1 var(--font-display);
}
.conditions__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 900px;
}
.conditions__list li {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  font: var(--fw-regular) var(--fs-16) / 1.5 var(--font-body);
}
.conditions__list li::before {
  content: "";
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  margin-top: var(--space-8);
  background: var(--dofny-blue);
  border-radius: 2px;
}

/* ===================================================================
   Compte pro
=================================================================== */
.pro > .inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-32);
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
}
.pro__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.pro__lead {
  font: var(--fw-medium) var(--fs-18) / 1.5 var(--font-body);
  color: var(--lp-on-dark);
}
.pro__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
  justify-self: end;
}
.pro__contact {
  font: var(--fw-medium) var(--fs-16) / 1.5 var(--font-body);
  color: var(--dofny-blue-band-text);
}
.pro__contact a {
  color: var(--dofny-white);
  font-weight: var(--fw-bold);
}
.pro__contact a:hover { color: var(--dofny-white); }

/* ===================================================================
   Footer
=================================================================== */
.site-footer {
  background: linear-gradient(90deg, var(--dofny-footer-1), var(--dofny-footer-2));
  color: var(--dofny-white);
}
.site-footer > .inner {
  padding-block: var(--space-32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  flex-wrap: wrap;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  flex-wrap: wrap;
}
.site-footer__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 var(--space-16);
  border-radius: var(--radius-8);
  background: rgba(255, 255, 255, 0.1);
  font: var(--fw-bold) var(--fs-20) / 1 var(--font-display);
}
.site-footer .dealer-mark { width: 96px; height: 48px; }
.site-footer__nav {
  display: flex;
  gap: var(--space-20);
  flex-wrap: wrap;
}
.site-footer__nav a {
  font: var(--fw-medium) var(--fs-14) / 1 var(--font-body);
  color: var(--dofny-blue-band-text);
  text-decoration: none;
}
.site-footer__nav a:hover {
  color: var(--dofny-white);
  text-decoration: underline;
}

/* ---- Préférences utilisateur ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}