/* =============================================================================
   credit_offers_page.css — Zone « credit-simulation » (offres de credit)

   Couvre :
     - la page d'index des offres        (templates/credit_offers/index.html.twig)
     - le gabarit de page de detail      (templates/credit_offers/credit_page_structure.html.twig)
     - les cartes de documents           (templates/credit_offers/credit_professionnel.html.twig)

   Meme grille, meme hierarchie et memes composants que le simulateur
   (assets/styles/ds-credit-sim.css).

   Consomme EXCLUSIVEMENT les tokens de design-system.css.
   Aucune couleur en dur. Mobile-first : base 320px, puis min-width.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Fondations communes aux deux pages
   -------------------------------------------------------------------------- */

.credit-offers-page,
.credit-detail-page {
  background-color: var(--ds-surface-sunken);
}

.credit-hero__container,
.credit-categories__container,
.credit-advantages__container,
.credit-cta__container,
.credit-detail-hero__container,
.credit-detail-content__container,
.credit-legal-notice__container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

/* Bandeau sombre reutilise par les deux heros + la section CTA finale */
.credit-hero,
.credit-detail-hero,
.credit-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ds-surface-inverse);
  color: var(--ds-text-inverse);
}

/* =============================================================================
   1. PAGE D'INDEX DES OFFRES
   ========================================================================== */

/* --- 1.1 Hero ------------------------------------------------------------- */

.credit-hero {
  padding-block: var(--ds-section-y);
}

.credit-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-5);
  max-width: var(--ds-container-narrow);
}

.credit-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-4);
  border: 1px solid var(--ds-border-inverse);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-text-inverse-muted);
}

.credit-hero__badge-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-accent);
}

/* Titre de hero : meme echelle que svc-hero__title / sup-hero__title /
   home__hero-title. --ds-text-4xl est deja un clamp(), il se met a l'echelle
   tout seul : pas de palier @media supplementaire. */
.credit-hero__title {
  margin: 0;
  font-family: var(--ds-font-sans);
  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);
  text-wrap: balance;
}

.credit-hero__subtitle {
  margin: 0;
  max-width: var(--ds-measure);
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-inverse-muted);
}

.credit-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--ds-space-6);
  width: 100%;
  padding-block: var(--ds-space-4);
  border-block: 1px solid var(--ds-border-inverse);
}

.credit-hero__stat-number {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--ds-leading-none);
  color: var(--ds-text-inverse);
}

.credit-hero__stat-label {
  margin-top: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-inverse-muted);
}

.credit-hero__actions,
.credit-detail-hero__actions,
.credit-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  width: 100%;
}

/* --- 1.2 Sections de categories ------------------------------------------- */

.credit-categories,
.credit-advantages {
  padding-block: var(--ds-section-y);
}

.credit-categories__header,
.credit-advantages__header {
  max-width: var(--ds-container-narrow);
  margin-bottom: var(--ds-space-10);
}

.credit-categories__title,
.credit-advantages__title {
  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);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text);
  text-wrap: balance;
}

.credit-categories__subtitle,
.credit-advantages__subtitle {
  margin: 0;
  max-width: var(--ds-measure);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.credit-category {
  margin-bottom: var(--ds-space-12);
}

.credit-category:last-child {
  margin-bottom: 0;
}

.credit-category__header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-6);
  padding-bottom: var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
}

.credit-category__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--ds-ink-subtle);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.credit-category__icon-svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-text);
}

.credit-category__title {
  margin: 0;
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.credit-category__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);
}

.credit-category__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-5);
}

@media (min-width: 768px) {
  .credit-category__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .credit-category__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- 1.3 Carte d'offre ---------------------------------------------------- */

.credit-item {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding: var(--ds-space-5);
  background-color: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  transition:
    border-color var(--ds-transition),
    box-shadow var(--ds-transition);
}

.credit-item:hover {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-md);
}

.credit-item:focus-within {
  border-color: var(--ds-accent-border);
}

.credit-item__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.credit-item__content {
  flex: 1 1 12rem;
  min-width: 0;
}

.credit-item__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);
  text-wrap: balance;
}

.credit-item__description {
  margin: var(--ds-space-2) 0 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.credit-item__rate {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2) var(--ds-space-3);
  background-color: var(--ds-accent-subtle);
  border: 1px solid var(--ds-accent-border);
  border-radius: var(--ds-radius-md);
  text-align: end;
}

.credit-item__rate-value {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--ds-leading-none);
  color: var(--ds-accent-hover);
}

.credit-item__rate-label {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-muted);
}

.credit-item__content-text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
}

.credit-item__content-text p {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.credit-item__content-text strong {
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.credit-item__content-text-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2em;
  color: var(--ds-muted);
}

.credit-item__footer {
  margin-top: auto;
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
}

.credit-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

/* --- 1.4 Avantages -------------------------------------------------------- */

.credit-advantages {
  background-color: var(--ds-surface-raised);
  border-block: 1px solid var(--ds-border);
}

.credit-advantages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-5);
}

@media (min-width: 640px) {
  .credit-advantages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .credit-advantages__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.credit-advantage {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-5);
  background-color: var(--ds-surface-sunken);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  transition: border-color var(--ds-transition);
}

.credit-advantage:hover {
  border-color: var(--ds-border-strong);
}

.credit-advantage__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--ds-surface-inverse);
  border-radius: var(--ds-radius-full);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-inverse);
}

.credit-advantage__title {
  margin: 0;
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.credit-advantage__description {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.credit-advantages__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--ds-space-6);
  margin-top: var(--ds-space-10);
  padding-top: var(--ds-space-8);
  border-top: 1px solid var(--ds-border);
}

.credit-advantages__stat-number {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--ds-leading-none);
  color: var(--ds-text);
}

.credit-advantages__stat-label {
  margin-top: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

/* --- 1.5 CTA final (partage index / detail) ------------------------------- */

.credit-cta {
  padding-block: var(--ds-section-y);
}

.credit-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-4);
  max-width: var(--ds-container-narrow);
}

.credit-cta__title {
  margin: 0;
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text-inverse);
  text-wrap: balance;
}

.credit-cta__subtitle {
  margin: 0;
  max-width: var(--ds-measure);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-inverse-muted);
}

.credit-cta__actions {
  margin-top: var(--ds-space-2);
}

/* =============================================================================
   2. BOUTONS DE LA ZONE
   Meme anatomie que .ds-btn, decline en clair et en inverse.
   ========================================================================== */

.credit-hero__cta,
.credit-detail-hero__cta,
.credit-cta__button,
.credit-item__action,
.credit-detail-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-3) var(--ds-space-5);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  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;
  text-wrap: balance;
  cursor: pointer;
  transition:
    background-color var(--ds-transition),
    border-color var(--ds-transition),
    color var(--ds-transition);
}

.credit-hero__cta:focus-visible,
.credit-detail-hero__cta:focus-visible,
.credit-cta__button:focus-visible,
.credit-item__action:focus-visible,
.credit-detail-card__cta:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: var(--ds-focus-offset);
}

.credit-hero__cta-icon,
.credit-detail-hero__cta-icon,
.credit-cta__button-icon,
.credit-item__action-icon,
.credit-detail-card__cta-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* Sur fond sombre : primaire = accent, secondaire = contour clair */
.credit-hero__cta--primary,
.credit-detail-hero__cta--primary,
.credit-cta__button--primary {
  background-color: var(--ds-accent);
  color: var(--ds-text-on-accent);
}

.credit-hero__cta--primary:hover,
.credit-detail-hero__cta--primary:hover,
.credit-cta__button--primary:hover {
  background-color: var(--ds-accent-hover);
  color: var(--ds-text-on-accent);
}

.credit-hero__cta--secondary,
.credit-detail-hero__cta--secondary,
.credit-cta__button--secondary {
  background-color: transparent;
  border-color: var(--ds-border-inverse);
  color: var(--ds-text-inverse);
}

.credit-hero__cta--secondary:hover,
.credit-detail-hero__cta--secondary:hover,
.credit-cta__button--secondary:hover {
  background-color: var(--ds-border-inverse);
  color: var(--ds-text-inverse);
}

.credit-hero__cta--secondary:focus-visible,
.credit-detail-hero__cta--secondary:focus-visible,
.credit-cta__button--secondary:focus-visible {
  outline-color: var(--ds-text-inverse);
}

/* Sur fond clair : action d'une carte d'offre */
.credit-item__action--primary,
.credit-detail-card__cta {
  background-color: var(--ds-accent);
  color: var(--ds-text-on-accent);
}

.credit-item__action--primary:hover,
.credit-detail-card__cta:hover {
  background-color: var(--ds-accent-hover);
  color: var(--ds-text-on-accent);
}

.credit-item__action--secondary {
  background-color: var(--ds-surface-raised);
  border-color: var(--ds-border-strong);
  color: var(--ds-text);
}

.credit-item__action--secondary:hover {
  background-color: var(--ds-ink-subtle);
  border-color: var(--ds-muted);
  color: var(--ds-text);
}

.credit-item__action {
  flex: 1 1 10rem;
}

.credit-detail-card__cta {
  width: 100%;
}

/* =============================================================================
   3. PAGE DE DETAIL D'UNE OFFRE
   ========================================================================== */

/* --- 3.1 Hero ------------------------------------------------------------- */

.credit-detail-hero {
  padding-block: var(--ds-section-y);
}

.credit-detail-hero__container {
  position: relative;
  z-index: 1;
}

.credit-detail-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-5);
  max-width: var(--ds-container-narrow);
}

.credit-detail-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-inverse-muted);
}

.credit-detail-hero__breadcrumb a {
  color: var(--ds-text-inverse-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.credit-detail-hero__breadcrumb a:hover {
  color: var(--ds-text-inverse);
}

.credit-detail-hero__breadcrumb a:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-text-inverse);
  outline-offset: var(--ds-focus-offset);
  border-radius: var(--ds-radius-sm);
}

.credit-detail-hero__title {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text-inverse);
  text-wrap: balance;
}

.credit-detail-hero__subtitle {
  margin: 0;
  max-width: var(--ds-measure);
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-inverse-muted);
}

.credit-detail-hero__highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--ds-space-6);
  width: 100%;
  padding-block: var(--ds-space-4);
  border-block: 1px solid var(--ds-border-inverse);
}

.credit-highlight__value {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--ds-leading-none);
  color: var(--ds-text-inverse);
}

.credit-highlight__label {
  margin-top: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-inverse-muted);
}

@media (min-width: 768px) {
  .credit-detail-hero__title {
    font-size: var(--ds-text-4xl);
  }
}

/* --- 3.2 Corps de page ---------------------------------------------------- */

.credit-detail-content {
  padding-block: var(--ds-section-y);
}

.credit-detail-content__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .credit-detail-content__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--ds-space-12);
  }
}

.credit-detail-content__main {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  min-width: 0;
}

.credit-detail-section {
  padding: var(--ds-space-5);
  background-color: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

@media (min-width: 640px) {
  .credit-detail-section {
    padding: var(--ds-space-8);
  }
}

.credit-detail-section__title {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin: 0 0 var(--ds-space-5);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
  text-wrap: balance;
}

.credit-detail-section__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ds-muted);
}

.credit-detail-section__content p {
  margin: 0 0 var(--ds-space-4);
  max-width: var(--ds-measure);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.credit-detail-section__content p:last-child {
  margin-bottom: 0;
}

/* Caracteristiques */
.credit-detail-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
}

@media (min-width: 640px) {
  .credit-detail-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.credit-detail-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  background-color: var(--ds-surface-sunken);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.credit-detail-feature__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.credit-detail-feature__icon-svg {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text);
}

.credit-detail-feature__content {
  min-width: 0;
}

.credit-detail-feature__title {
  margin: 0 0 var(--ds-space-1);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.credit-detail-feature__description {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}

.credit-detail-feature__detail {
  margin: var(--ds-space-1) 0 0;
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

/* Avantages */
.credit-detail-advantages {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.credit-detail-advantage {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
}

.credit-detail-advantage__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;
  background-color: var(--ds-accent-subtle);
  border-radius: var(--ds-radius-full);
}

.credit-detail-advantage__icon-svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ds-accent-hover);
}

.credit-detail-advantage__text {
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.credit-detail-advantage__text strong {
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

/* Conditions et pieces justificatives */
.credit-detail-requirements,
.credit-detail-documents {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
}

@media (min-width: 640px) {
  .credit-detail-requirements,
  .credit-detail-documents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.credit-detail-requirement,
.credit-detail-document-category {
  padding: var(--ds-space-4);
  background-color: var(--ds-surface-sunken);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.credit-detail-requirement h3,
.credit-detail-document-category h3 {
  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);
}

.credit-detail-requirement ul,
.credit-detail-document-category ul {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.credit-detail-requirement li,
.credit-detail-document-category li {
  position: relative;
  padding-inline-start: var(--ds-space-5);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.credit-detail-requirement li::before,
.credit-detail-document-category li::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--ds-space-1);
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-muted);
}

/* --- 3.3 Barre laterale --------------------------------------------------- */

.credit-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

@media (min-width: 1024px) {
  .credit-detail-content__sidebar {
    position: sticky;
    top: var(--ds-space-6);
  }
}

.credit-detail-card {
  background-color: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}

.credit-detail-card__header {
  padding: var(--ds-space-4) var(--ds-space-5);
  background-color: var(--ds-surface-sunken);
  border-bottom: 1px solid var(--ds-border);
}

.credit-detail-card__title {
  margin: 0;
  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);
}

.credit-detail-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding: var(--ds-space-5);
}

.credit-detail-card__content p {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.credit-detail-contact {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.credit-detail-contact__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  color: var(--ds-text);
  overflow-wrap: anywhere;
}

.credit-detail-contact__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--ds-muted);
}

/* Etapes de traitement */
.credit-detail-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.credit-detail-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
}

.credit-detail-timeline__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--ds-surface-inverse);
  border-radius: var(--ds-radius-full);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text-inverse);
}

.credit-detail-timeline__title {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.credit-detail-timeline__time {
  margin-top: var(--ds-space-1);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

/* --- 3.4 Mentions legales ------------------------------------------------- */

.credit-legal-notice {
  padding-block: var(--ds-space-10);
  background-color: var(--ds-surface-raised);
  border-top: 1px solid var(--ds-border);
}

.credit-legal-notice__content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  max-width: var(--ds-container-narrow);
}

.credit-legal-notice__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  background-color: var(--ds-ink-subtle);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
}

.credit-legal-notice__warning-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  color: var(--ds-text);
}

.credit-legal-notice__warning-title,
.credit-legal-notice__warning-text {
  margin: 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text);
}

.credit-legal-notice__details 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);
}

.credit-legal-notice__details ul {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.credit-legal-notice__details li {
  position: relative;
  padding-inline-start: var(--ds-space-5);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.credit-legal-notice__details li::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--ds-space-1);
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-muted);
}

.credit-legal-notice__details strong {
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.credit-legal-notice__footer p {
  margin: 0;
  max-width: var(--ds-measure);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

/* =============================================================================
   4. CARTES DE PIECES JUSTIFICATIVES (credit professionnel)
   ========================================================================== */

.documents-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-5);
}

@media (min-width: 768px) {
  .documents-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.document-card {
  background-color: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  transition: border-color var(--ds-transition);
}

.document-card:hover {
  border-color: var(--ds-border-strong);
}

.document-card__header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-5);
  background-color: var(--ds-surface-sunken);
  border-bottom: 1px solid var(--ds-border);
}

.document-card__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.document-card__icon-svg {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text);
}

.document-card__title {
  margin: 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.document-card__body {
  padding: var(--ds-space-5);
}

.document-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.document-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3);
  background-color: var(--ds-surface-sunken);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
}

.document-card__item span {
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.document-item__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15em;
  color: var(--ds-accent);
}