/* ==========================================================================
   HOME — Page d'accueil (zone "accueil")
   --------------------------------------------------------------------------
   Consomme UNIQUEMENT les tokens du design system (assets/styles/design-system.css).
   Aucune couleur en dur : tout passe par var(--ds-*) / color-mix() sur les 4
   teintes de marque (ink, paper, muted, accent) + --ds-danger (jamais decoratif).

   PORTEE / CASCADE
   Le markup de la home vit dans templates/main/_*.html.twig, hors de mon
   perimetre de fichiers : ces partials embarquent chacun un <style> inline
   (legacy, palette verte) que je ne peux pas supprimer. Je le neutralise par
   la cascade :
     1. templates/home/index.html.twig enveloppe les includes dans .home-page
        -> mes selecteurs gagnent +1 classe de specificite ;
     2. cette feuille est chargee A LA FIN du block body, donc APRES tous les
        <style> des partials -> je gagne aussi les egalites de specificite.
   Corollaire : toute propriete que je surcharge doit etre re-declaree pour
   TOUS les breakpoints (leurs @media max-width perdent face a ma base).

   Mobile-first : base = 320px, puis 640 / 768 / 1024 / 1280.
   ========================================================================== */

/* ==========================================================================
   1. RACINE DE PAGE
   ========================================================================== */

.home-page {
  --home-gutter: var(--ds-gutter);
  --home-max: var(--ds-container);
  --home-section-y: var(--ds-section-y);
  --home-card-radius: var(--ds-radius-lg);

  display: block;
  background-color: var(--ds-paper);
  color: var(--ds-text);
  overflow-x: hidden;
}

/* Les partials heritent d'une typo legacy : on repose tout sur les tokens. */
.home-page :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ds-font-sans);
  color: var(--ds-text);
  letter-spacing: var(--ds-tracking-tight);
  text-wrap: balance;
}

.home-page :where(p, li) {
  text-wrap: pretty;
}

/* Conteneurs de section — largeur et gouttiere uniformes partout. */
.home-page .home__hero-container,
.home-page .services-container,
.home-page .home__digital-container,
.home-page .home__offers-container,
.home-page .home__credit-container,
.home-page .home__simulation-container,
.home-page .home__credit-legal,
.home-page .home__simulation-legal-content {
  inline-size: 100%;
  max-inline-size: var(--home-max);
  margin-inline: auto;
  padding-inline: var(--home-gutter);
}

/* Rythme vertical commun a toutes les sections. */
.home-page .services,
.home-page .home__digital,
.home-page .home__offers,
.home-page .home__credit,
.home-page .home__simulation {
  padding-block: var(--home-section-y);
  position: relative;
  overflow: clip;
}

/* Elements decoratifs legacy (halos, blobs) : supprimes. */
.home-page .home__credit::before,
.home-page .home__simulation::before,
.home-page .home__hero-bg-elements,
.home-page .home__hero-bg-circle,
.home-page .home__hero-bg-gradient {
  content: none;
  display: none;
}

/* Alternance de surfaces : paper / sunken / paper / sunken. */
.home-page .services,
.home-page .home__offers {
  background-color: var(--ds-paper);
}

.home-page .home__digital,
.home-page .home__credit,
.home-page .home__simulation {
  background-color: var(--ds-surface-sunken);
}

.home-page .home__digital,
.home-page .home__offers,
.home-page .home__credit,
.home-page .home__simulation {
  border-block-start: 1px solid var(--ds-border);
}

/* ==========================================================================
   2. PRIMITIVES PARTAGEES DE LA PAGE
   ========================================================================== */

/* --- 2.1 Pastille d'accroche (eyebrow) --- */
.home-page .home__hero-badge,
.home-page .header-badge,
.home-page .home__digital-badge,
.home-page .home__offers-badge,
.home-page .home__credit-badge,
.home-page .home__simulation-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0 0 var(--ds-space-5);
  padding: var(--ds-space-2) var(--ds-space-4);
  border: 1px solid var(--ds-accent-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-accent-subtle);
  color: var(--ds-accent-hover);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
  line-height: var(--ds-leading-snug);
  animation: none;
}

.home-page .home__hero-badge-icon,
.home-page .badge-icon,
.home-page .home__digital-badge-icon,
.home-page .home__offers-badge-icon,
.home-page .home__credit-badge-icon,
.home-page .home__simulation-badge-icon {
  inline-size: 0.875em;
  block-size: 0.875em;
  flex: none;
}

/* --- 2.2 Titres de section --- */
.home-page .section-title,
.home-page .home__digital-title,
.home-page .home__offers-title,
.home-page .home__credit-title,
.home-page .home__simulation-title {
  margin: 0 0 var(--ds-space-4);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  color: var(--ds-text);
  animation: none;
}

.home-page .title-accent,
.home-page .home__digital-title--accent,
.home-page .home__offers-title--accent,
.home-page .home__credit-title--accent,
.home-page .home__simulation-title--accent {
  color: var(--ds-accent-hover);
}

/* --- 2.3 Chapeaux de section --- */
.home-page .section-description,
.home-page .home__digital-description,
.home-page .home__offers-description,
.home-page .home__credit-description,
.home-page .home__simulation-description {
  margin: 0;
  max-inline-size: var(--ds-measure);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
  animation: none;
}

/* --- 2.4 En-tetes centres --- */
.home-page .section-header,
.home-page .home__offers-header,
.home-page .home__simulation-header {
  margin: 0 0 var(--ds-space-10);
  text-align: start;
}

.home-page .section-header .section-description,
.home-page .home__offers-header .home__offers-description,
.home-page .home__simulation-header .home__simulation-description {
  margin-inline: 0;
}

/* --- 2.5 Boutons (base commune a tous les CTA de la home) --- */
.home-page .home__hero-btn,
.home-page .service-card .service-cta,
.home-page .home__offers-btn,
.home-page .home__credit-btn,
.home-page .home__credit-card-btn,
.home-page .home__simulation-btn,
.home-page .home__digital-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-block-size: var(--ds-touch-target);
  padding: var(--ds-space-3) var(--ds-space-6);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  background-color: transparent;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transform: none;
  box-shadow: none;
  transition:
    background-color var(--ds-transition),
    border-color var(--ds-transition),
    color var(--ds-transition);
}

.home-page .home__hero-btn:hover,
.home-page .service-card .service-cta:hover,
.home-page .home__offers-btn:hover,
.home-page .home__credit-btn:hover,
.home-page .home__credit-card-btn:hover,
.home-page .home__simulation-btn:hover,
.home-page .home__digital-store:hover {
  transform: none;
  box-shadow: none;
  text-decoration: none;
}

.home-page .home__hero-btn:focus-visible,
.home-page .service-card .service-cta:focus-visible,
.home-page .home__offers-btn:focus-visible,
.home-page .home__credit-btn:focus-visible,
.home-page .home__credit-card-btn:focus-visible,
.home-page .home__simulation-btn:focus-visible,
.home-page .home__digital-store:focus-visible,
.home-page a:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: var(--ds-focus-offset);
  border-radius: var(--ds-radius-md);
}

/* Variante pleine (accent) — action primaire */
.home-page .home__hero-btn--primary,
.home-page .home__offers-btn--premium,
.home-page .home__credit-btn--primary,
.home-page .home__simulation-btn--primary {
  background-color: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-text-on-accent);
}

.home-page .home__hero-btn--primary:hover,
.home-page .home__offers-btn--premium:hover,
.home-page .home__credit-btn--primary:hover,
.home-page .home__simulation-btn--primary:hover {
  background-color: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
  color: var(--ds-text-on-accent);
}

.home-page .home__hero-btn--primary:active,
.home-page .home__offers-btn--premium:active,
.home-page .home__credit-btn--primary:active,
.home-page .home__simulation-btn--primary:active {
  background-color: var(--ds-accent-active);
  border-color: var(--ds-accent-active);
}

/* Variante contour neutre — action secondaire sur fond clair */
.home-page .service-card .service-cta,
.home-page .home__offers-btn--essential,
.home-page .home__offers-btn--private,
.home-page .home__credit-btn--secondary,
.home-page .home__credit-card-btn,
.home-page .home__simulation-btn--secondary,
.home-page .home__simulation-btn--accent {
  background-color: var(--ds-surface-raised);
  border-color: var(--ds-border-strong);
  color: var(--ds-text);
}

.home-page .service-card .service-cta:hover,
.home-page .home__offers-btn--essential:hover,
.home-page .home__offers-btn--private:hover,
.home-page .home__credit-btn--secondary:hover,
.home-page .home__credit-card-btn:hover,
.home-page .home__simulation-btn--secondary:hover,
.home-page .home__simulation-btn--accent:hover {
  background-color: var(--ds-ink-subtle);
  border-color: var(--ds-ink);
  color: var(--ds-text);
}

/* Variante inverse — sur fond encre */
.home-page .home__hero-btn--secondary,
.home-page .home__simulation-btn--outline,
.home-page .home__simulation-btn--chat {
  background-color: transparent;
  border-color: var(--ds-border-inverse);
  color: var(--ds-text-inverse);
}

.home-page .home__hero-btn--secondary:hover,
.home-page .home__simulation-btn--outline:hover,
.home-page .home__simulation-btn--chat:hover {
  background-color: color-mix(in srgb, var(--ds-paper) 12%, transparent);
  border-color: color-mix(in srgb, var(--ds-paper) 45%, transparent);
  color: var(--ds-text-inverse);
}

.home-page .home__hero-btn-icon,
.home-page .home__simulation-btn-icon,
.home-page .cta-arrow {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
}

/* --- 2.6 Tuiles d'icone (features, cartes, offres) --- */
.home-page .service-card .service-icon,
.home-page .home__digital-feature-icon,
.home-page .home__credit-feature-icon,
.home-page .home__credit-card-icon,
.home-page .home__offers-card-icon,
.home-page .home__simulation-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  margin: 0;
  border: 1px solid var(--ds-accent-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-accent-subtle);
  color: var(--ds-accent-hover);
}

.home-page .service-card .service-icon .icon,
.home-page .home__digital-feature-icon-svg,
.home-page .home__credit-feature-icon-svg,
.home-page .home__credit-card-icon-svg,
.home-page .home__offers-card-icon-svg,
.home-page .home__simulation-card-icon-svg,
.home-page .home__offers-card--essential .home__offers-card-icon-svg,
.home-page .home__offers-card--private .home__offers-card-icon-svg,
.home-page .home__credit-card--immobilier .home__credit-card-icon-svg,
.home-page .home__credit-card--auto .home__credit-card-icon-svg,
.home-page .home__credit-card--personnel .home__credit-card-icon-svg,
.home-page .home__credit-card--travaux .home__credit-card-icon-svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: currentColor;
}

/* Les modificateurs de couleur legacy des tuiles sont neutralises. */
.home-page .home__offers-card--essential .home__offers-card-icon,
.home-page .home__offers-card--premium .home__offers-card-icon,
.home-page .home__offers-card--private .home__offers-card-icon,
.home-page .home__credit-card--immobilier .home__credit-card-icon,
.home-page .home__credit-card--auto .home__credit-card-icon,
.home-page .home__credit-card--personnel .home__credit-card-icon,
.home-page .home__credit-card--travaux .home__credit-card-icon {
  background-color: var(--ds-accent-subtle);
  border-color: var(--ds-accent-border);
  color: var(--ds-accent-hover);
}

/* --- 2.7 Carte generique --- */
.home-page .service-card,
.home-page .home__offers-card,
.home-page .home__credit-card,
.home-page .home__simulation-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-block-size: 100%;
  padding: var(--ds-space-6);
  border: 1px solid var(--ds-border);
  border-radius: var(--home-card-radius);
  background-color: var(--ds-surface-raised);
  background-image: none;
  box-shadow: var(--ds-shadow-sm);
  overflow: visible;
  position: relative;
  transform: none;
  transition:
    border-color var(--ds-transition),
    box-shadow var(--ds-transition);
}

.home-page .service-card:hover,
.home-page .home__offers-card:hover,
.home-page .home__credit-card:hover,
.home-page .home__simulation-card:hover {
  transform: none;
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-md);
}

/* --- 2.8 Valeurs chiffrees : Departure Mono --- */
.home-page .home__offers-price-amount,
.home-page .home__credit-rate-value,
.home-page .home__credit-card-amount span {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ds-tracking-normal);
}

/* ==========================================================================
   3. HERO
   ========================================================================== */

.home-page .home__hero {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: auto;
  padding-block: calc(var(--home-section-y) * 1.1);
  padding-inline: 0;
  overflow: clip;
  isolation: isolate;

  /* Surcharge de l'attribut style="" inline du partial (hors perimetre). */
  background-color: var(--ds-ink) !important;
  background-image:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--ds-ink) 94%, transparent) 0%,
      color-mix(in srgb, var(--ds-ink) 82%, transparent) 52%,
      color-mix(in srgb, var(--ds-ink) 58%, transparent) 100%
    ),
    url('/images/hero1.jpg') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

.home-page .home__hero-content {
  display: block;
  max-inline-size: 46rem;
  min-block-size: 0;
  gap: 0;
  text-align: start;
}

.home-page .home__hero-text {
  position: relative;
  z-index: var(--ds-z-base);
}

.home-page .home__hero-badge {
  background-color: color-mix(in srgb, var(--ds-paper) 12%, transparent);
  border-color: var(--ds-border-inverse);
  color: var(--ds-text-inverse);
}

.home-page .home__hero-title {
  margin: 0 0 var(--ds-space-5);
  font-size: var(--ds-text-4xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text-inverse);
  animation: none;
}

.home-page .home__hero-title--accent {
  color: color-mix(in srgb, var(--ds-accent) 42%, var(--ds-paper));
}

.home-page .home__hero-description {
  margin: 0 0 var(--ds-space-8);
  max-inline-size: 34rem;
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-inverse-muted);
  animation: none;
}

.home-page .home__hero-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-3);
  margin: 0 0 var(--ds-space-8);
  animation: none;
}

.home-page .home__hero-btn {
  inline-size: 100%;
  padding-inline: var(--ds-space-6);
}

.home-page .home__hero-btn:focus-visible {
  outline-color: var(--ds-paper);
}







@media (min-width: 640px) {
  .home-page .home__hero-cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .home-page .home__hero-btn {
    inline-size: auto;
  }

}

@media (min-width: 1024px) {
  .home-page .home__hero {
    min-block-size: min(78vh, 40rem);
    padding-block: calc(var(--home-section-y) * 1.25);
  }

  .home-page .home__hero-description {
    max-inline-size: 38rem;
  }
}

/* ==========================================================================
   4. SERVICES — propositions de valeur
   ========================================================================== */

.home-page .services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
  align-items: stretch;
  animation: none;
}

.home-page .service-card {
  gap: var(--ds-space-3);
}

.home-page .service-card.featured,
.home-page .service-card.premium {
  border-width: 1px;
  border-color: var(--ds-accent-border);
  background-color: var(--ds-accent-subtle);
  background-image: none;
}

.home-page .service-card .featured-badge,
.home-page .service-card .premium-badge {
  position: static;
  align-self: flex-start;
  order: -1;
  inset: auto;
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 1px solid var(--ds-accent-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface-raised);
  color: var(--ds-accent-hover);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
}

.home-page .service-card .service-title {
  margin: 0;
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.home-page .service-card .service-description {
  margin: 0;
  display: block;
  overflow: visible;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
  -webkit-line-clamp: none;
}

.home-page .service-card .service-features {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.home-page .service-card .service-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  line-height: var(--ds-leading-normal);
}

.home-page .service-card .service-features .check-icon {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  flex: none;
  margin-block-start: 0.35em;
  color: var(--ds-accent-hover);
}

.home-page .service-card .regulatory-note {
  display: block;
  margin: 0;
  padding-block-start: var(--ds-space-3);
  border-block-start: 1px solid var(--ds-border);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.home-page .service-card .service-cta {
  margin-block-start: auto;
  align-self: flex-start;
  inline-size: 100%;
}

@media (min-width: 640px) {
  .home-page .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-5);
  }

  .home-page .service-card .service-cta {
    inline-size: auto;
  }
}

@media (min-width: 1024px) {
  .home-page .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-6);
  }

  .home-page .section-header {
    max-inline-size: 48rem;
  }
}

/* ==========================================================================
   5. DIGITAL / CONFIANCE (_trust.html.twig)
   ========================================================================== */

.home-page .home__digital-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-10);
  align-items: center;
  text-align: start;
}

.home-page .home__digital-text {
  min-inline-size: 0;
}

.home-page .home__digital-description {
  margin-block-end: var(--ds-space-8);
}

.home-page .home__digital-features {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  margin: 0 0 var(--ds-space-8);
  text-align: start;
}

.home-page .home__digital-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-4);
  margin: 0;
}

.home-page .home__digital-feature-content h4 {
  margin: 0 0 var(--ds-space-1);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.home-page .home__digital-feature-content p {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.home-page .home__digital-stores h4 {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.home-page .home__digital-stores-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-3);
}

.home-page .home__digital-store {
  justify-content: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  background-color: var(--ds-surface-inverse);
  border-color: var(--ds-surface-inverse);
  color: var(--ds-text-inverse);
}

.home-page .home__digital-store:hover {
  background-color: var(--ds-ink-hover);
  border-color: var(--ds-ink-hover);
  color: var(--ds-text-inverse);
}

.home-page .home__digital-store-icon {
  display: inline-flex;
  flex: none;
}

.home-page .home__digital-store-icon-svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--ds-text-inverse);
}

.home-page .home__digital-store-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--ds-leading-snug);
}

.home-page .home__digital-store-small {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-regular);
  opacity: 1;
  color: var(--ds-text-inverse-muted);
}

.home-page .home__digital-store-name {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-inverse);
}

.home-page .home__digital-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-inline-size: 0;
}

.home-page .home__digital-illustration {
  position: relative;
  inline-size: 100%;
  max-inline-size: 20rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--home-card-radius);
  background-color: var(--ds-surface-raised);
  background-image: none;
  box-shadow: var(--ds-shadow-md);
}

.home-page .home__digital-illustration img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 640px) {
  .home-page .home__digital-stores-grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .home-page .home__digital-content {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--ds-space-16);
  }

  .home-page .home__digital-illustration {
    max-inline-size: 22rem;
  }
}

/* ==========================================================================
   6. OFFRES
   ========================================================================== */

.home-page .home__offers-content {
  display: block;
}

.home-page .home__offers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
  align-items: stretch;
}

.home-page .home__offers-card {
  gap: var(--ds-space-5);
}

.home-page .home__offers-card--essential,
.home-page .home__offers-card--private {
  border-color: var(--ds-border);
  background-color: var(--ds-surface-raised);
  background-image: none;
  transform: none;
}

/* Offre mise en avant : un seul signal, la bordure accent. */
.home-page .home__offers-card--premium {
  border-color: var(--ds-accent);
  background-color: var(--ds-surface-raised);
  background-image: none;
  transform: none;
  box-shadow: var(--ds-shadow-md);
}

.home-page .home__offers-card-badge {
  position: static;
  align-self: flex-start;
  order: -1;
  inset: auto;
  transform: none;
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-accent);
  color: var(--ds-text-on-accent);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
  white-space: nowrap;
}

.home-page .home__offers-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: 0;
  border: 0;
  text-align: start;
}

.home-page .home__offers-card-title h3 {
  margin: 0;
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.home-page .home__offers-card-subtitle {
  margin: var(--ds-space-1) 0 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.home-page .home__offers-card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-block-start: var(--ds-space-2);
  padding-block-start: var(--ds-space-4);
  border-block-start: 1px solid var(--ds-border);
  inline-size: 100%;
}

.home-page .home__offers-price-amount {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-none);
  color: var(--ds-text);
}

.home-page .home__offers-price-period {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.home-page .home__offers-card-features {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-page .home__offers-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.home-page .home__offers-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  margin-block-start: 0.1em;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-accent-subtle);
  color: var(--ds-accent-hover);
  font-size: var(--ds-text-xs);
  line-height: 1;
}

.home-page .home__offers-btn {
  margin-block-start: auto;
  inline-size: 100%;
}

/* Tableau comparatif */
.home-page .home__offers-comparison {
  margin-block-start: var(--ds-space-12);
  padding: 0;
  border: 0;
  background: none;
}

.home-page .home__offers-comparison h3 {
  margin: 0 0 var(--ds-space-5);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
  text-align: start;
}

.home-page .home__offers-table-container {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface-raised);
}

.home-page .home__offers-table {
  inline-size: 100%;
  min-inline-size: 34rem;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
}

.home-page .home__offers-table caption {
  text-align: start;
}

.home-page .home__offers-table thead th {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 0;
  border-block-end: 1px solid var(--ds-border-strong);
  background-color: var(--ds-surface-sunken);
  color: var(--ds-text);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  text-align: start;
  white-space: nowrap;
}

.home-page .home__offers-table tbody td {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 0;
  border-block-start: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  vertical-align: top;
}

.home-page .home__offers-table tbody td:first-child {
  color: var(--ds-text);
  font-weight: var(--ds-weight-medium);
}

.home-page .home__offers-table tbody tr:hover td {
  background-color: var(--ds-ink-subtle);
}

@media (min-width: 768px) {
  .home-page .home__offers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-5);
  }
}

@media (min-width: 1024px) {
  .home-page .home__offers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-6);
  }

  .home-page .home__offers-table thead th:first-child,
  .home-page .home__offers-table tbody td:first-child {
    inline-size: 34%;
  }
}

/* ==========================================================================
   7. CREDIT
   ========================================================================== */

.home-page .home__credit-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-10);
  align-items: start;
}

.home-page .home__credit-text {
  min-inline-size: 0;
}

.home-page .home__credit-description {
  margin-block-end: var(--ds-space-8);
}

.home-page .home__credit-features {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  margin: 0 0 var(--ds-space-8);
}

.home-page .home__credit-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-4);
  margin: 0;
}

.home-page .home__credit-feature-content h4 {
  margin: 0 0 var(--ds-space-1);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.home-page .home__credit-feature-content p {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.home-page .home__credit-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-3);
  margin: 0;
}

.home-page .home__credit-btn {
  inline-size: 100%;
}

/* Cartes de credit */
.home-page .home__credit-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
  align-items: stretch;
}

.home-page .home__credit-card {
  gap: var(--ds-space-4);
}

.home-page .home__credit-card-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: 0;
  border: 0;
  background: none;
}

.home-page .home__credit-card-header h3 {
  margin: 0;
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.home-page .home__credit-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.home-page .home__credit-card-amount {
  margin: 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.home-page .home__credit-card-amount span {
  font-size: var(--ds-text-base);
  color: var(--ds-text);
}

.home-page .home__credit-card-rate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  padding-block: var(--ds-space-3);
  border-block: 1px solid var(--ds-border);
}

.home-page .home__credit-rate-from {
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.home-page .home__credit-rate-value {
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-none);
  color: var(--ds-accent-hover);
}

.home-page .home__credit-card-features {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.home-page .home__credit-card-features li {
  position: relative;
  margin: 0;
  padding-inline-start: var(--ds-space-5);
  line-height: var(--ds-leading-normal);
}

.home-page .home__credit-card-features li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-accent);
}

.home-page .home__credit-card-btn {
  margin-block-start: auto;
  inline-size: 100%;
}

/* Processus en 4 etapes */
.home-page .home__credit-process {
  margin-block-start: var(--ds-space-12);
  padding: var(--ds-space-8) var(--ds-space-6);
  border: 1px solid var(--ds-border);
  border-radius: var(--home-card-radius);
  background-color: var(--ds-surface-raised);
}

.home-page .home__credit-process h3 {
  margin: 0 0 var(--ds-space-6);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
  text-align: start;
}

.home-page .home__credit-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-6);
}

.home-page .home__credit-step {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-4);
}

.home-page .home__credit-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface-sunken);
  color: var(--ds-text);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  line-height: 1;
}

.home-page .home__credit-step-content h4 {
  margin: 0 0 var(--ds-space-1);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.home-page .home__credit-step-content p {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

/* Mentions legales credit */
/* Bloc frere de .home__credit-container : il reprend la gouttiere de section
   (voir la regle de conteneurs plus haut) et n'ajoute qu'une respiration. */
.home-page .home__credit-legal {
  margin-block-start: var(--ds-space-12);
  padding-block: 0;
  border: 0;
  background: none;
}

.home-page .home__credit-legal-content {
  max-inline-size: none;
  margin: 0;
  padding: var(--ds-space-6);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface-raised);
}

.home-page .home__credit-legal-content > p {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.home-page .home__credit-legal-content > p:last-child {
  margin-block-end: 0;
}

.home-page .home__credit-legal-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-3);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

@media (min-width: 640px) {
  .home-page .home__credit-cta {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .home-page .home__credit-btn {
    inline-size: auto;
  }

  .home-page .home__credit-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-5);
  }

  .home-page .home__credit-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .home__credit-legal-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-page .home__credit-content {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ds-space-16);
  }

  .home-page .home__credit-process {
    padding: var(--ds-space-10);
  }

  .home-page .home__credit-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ds-space-8);
  }
}

/* ==========================================================================
   8. SIMULATION / CTA FINAL
   ========================================================================== */

.home-page .home__simulation-content {
  display: block;
}

.home-page .home__simulation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
  align-items: stretch;
}

.home-page .home__simulation-card {
  gap: var(--ds-space-4);
}

.home-page .home__simulation-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  flex: 1 1 auto;
}

.home-page .home__simulation-card-content h3 {
  margin: 0;
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.home-page .home__simulation-card-content > p {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.home-page .home__simulation-card-features {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin: 0;
}

.home-page .home__simulation-card-features span {
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.home-page .home__simulation-card-form {
  margin-block-start: auto;
  padding: 0;
  border: 0;
  background: none;
}

.home-page .home__simulation-btn {
  inline-size: 100%;
}

/* Bandeau CTA final — le point d'arrivee de la page. */
.home-page .home__simulation-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-8);
  align-items: center;
  margin-block-start: var(--ds-space-12);
  padding: var(--ds-space-8) var(--ds-space-6);
  border: 1px solid var(--ds-ink);
  border-radius: var(--home-card-radius);
  background-color: var(--ds-surface-inverse);
  background-image: none;
  color: var(--ds-text-inverse);
  text-align: start;
}

.home-page .home__simulation-cta-content h3 {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  color: var(--ds-text-inverse);
}

.home-page .home__simulation-cta-content p {
  margin: 0 0 var(--ds-space-6);
  max-inline-size: 42ch;
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-inverse-muted);
}

.home-page .home__simulation-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-3);
}

.home-page .home__simulation-cta .home__simulation-btn {
  inline-size: 100%;
}

.home-page .home__simulation-cta .home__simulation-btn:focus-visible {
  outline-color: var(--ds-paper);
}

.home-page .home__simulation-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding-block-start: var(--ds-space-6);
  border-block-start: 1px solid var(--ds-border-inverse);
}

.home-page .home__simulation-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
}

.home-page .home__simulation-contact-text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

.home-page .home__simulation-contact-text strong {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-inverse-muted);
}

.home-page .home__simulation-contact-text span {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse);
}

/* Mentions legales simulation */
.home-page .home__simulation-legal {
  /* Pas de margin-block-start : elle s'ajoutait au padding ci-dessous et creait
     une bande vide d'environ 80px au-dessus du trait de separation. */
  margin-block-start: 0;
  padding-block-start: var(--ds-space-8);
  border-block-start: 1px solid var(--ds-border);
  background-color: transparent;
}

.home-page .home__simulation-legal-content > p {
  margin: 0 0 var(--ds-space-4);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.home-page .home__simulation-legal-content > p strong {
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
}

.home-page .home__simulation-legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
}

.home-page .home__simulation-legal-item {
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background-color: var(--ds-surface-raised);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.home-page .home__simulation-legal-item strong {
  display: block;
  margin-block-end: var(--ds-space-1);
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
}

@media (min-width: 640px) {
  .home-page .home__simulation-cta-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .home-page .home__simulation-cta .home__simulation-btn {
    inline-size: auto;
  }

  .home-page .home__simulation-legal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .home-page .home__simulation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-5);
  }
}

@media (min-width: 1024px) {
  .home-page .home__simulation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-6);
  }

  .home-page .home__simulation-cta {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--ds-space-12);
    padding: var(--ds-space-12);
  }

  .home-page .home__simulation-contact-info {
    padding-block-start: 0;
    padding-inline-start: var(--ds-space-10);
    border-block-start: 0;
    border-inline-start: 1px solid var(--ds-border-inverse);
  }

  .home-page .home__simulation-legal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   9. LOGOS PARTENAIRES (section _engagement, actuellement desactivee dans
      templates/home/index.html.twig — styles prets si elle est reactivee)
   ========================================================================== */

.home-page .home__engagement-bank-logo {
  block-size: 1.75rem;
  inline-size: auto;
  max-inline-size: 7.5rem;
  object-fit: contain;
  /* Harmonisation optique : logos ramenes au gris neutre de la palette. */
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--ds-transition);
}

.home-page .home__engagement-bank-logo:hover {
  filter: grayscale(1) opacity(0.85);
}

@media (min-width: 768px) {
  .home-page .home__engagement-bank-logo {
    block-size: 2rem;
  }
}

/* ==========================================================================
   10. DIVERS / GARDE-FOUS
   ========================================================================== */

/* Aucun media ne doit deborder a 320px. */
.home-page :where(img, svg, video, table, pre) {
  max-inline-size: 100%;
}

.home-page img {
  block-size: auto;
}

/* Liens en ligne dans les mentions legales. */
.home-page .home__credit-legal-content a,
.home-page .home__simulation-legal-content a {
  color: var(--ds-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Classe posee par le script inline d'index.html.twig sur .home__section. */
.home-page .fade-in {
  animation: home-fade-in-up 400ms ease-out both;
}

@keyframes home-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page,
  .home-page *,
  .home-page *::before,
  .home-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .home-page .fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .home-page .service-card,
  .home-page .home__offers-card,
  .home-page .home__credit-card,
  .home-page .home__simulation-card,
  .home-page .home__offers-table-container,
  .home-page .home__credit-process,
  .home-page .home__simulation-legal-item {
    border-color: var(--ds-border-strong);
  }
}