/**
 * Iroise 2026 — Page "Financement".
 *
 * Sections : hero, dispositifs (4 cards), process (4 steps), cta-final.
 * Pas de tarifs (cf. feedback_no_public_pricing).
 * Animations transform/opacity uniquement (cf. feedback_scroll_performance).
 */


/* ===== Grille dispositifs (4 cards) ===== */

.financement-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 720px) {
  .financement-grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-6);
  }
}

.financement-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  padding:        var(--space-6);
  background:     #fff;
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-lg, 0.75rem);
  box-shadow:     0 4px 18px rgba(0, 0, 0, 0.05);
  scroll-margin-top: 90px;
  transition:     transform 250ms var(--ease-out, ease-out), box-shadow 250ms var(--ease-out, ease-out);
}

.financement-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 80, 168, 0.12);
}

.financement-card__icon {
  width:           56px;
  height:          56px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  background:      var(--color-iroise-blue-soft);
  color:           var(--color-iroise-blue);
  flex-shrink:     0;
}

.financement-card__short {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-iroise-cyan);
  margin:         0 0 var(--space-2);
}

.financement-card__name {
  font-family: var(--font-display);
  font-size:   clamp(1.125rem, 2vw, var(--fs-lg));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color:       var(--color-iroise-blue);
  margin:      0 0 var(--space-3);
}

.financement-card__lead {
  font-size:   var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color:       var(--color-text);
  margin:      0 0 var(--space-3);
}

.financement-card__detail {
  font-size:   var(--fs-sm);
  line-height: var(--lh-normal);
  color:       var(--color-text-muted);
  margin:      0 0 var(--space-4);
}

.financement-card__public {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  margin:         0;
  padding:        var(--space-3) var(--space-4);
  background:     var(--color-iroise-blue-soft);
  border-radius:  var(--radius-md);
  border-left:    3px solid var(--color-iroise-cyan);
}

.financement-card__public dt {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-iroise-blue);
}

.financement-card__public dd {
  font-size:   var(--fs-sm);
  font-weight: var(--fw-medium);
  color:       var(--color-text);
  margin:      0;
}


/* ===== Process (4 étapes) ===== */

.financement-process {
  background: var(--color-iroise-blue-soft);
}

.financement-steps {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
  list-style:            none;
  padding:               0;
  counter-reset:         step;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 720px) {
  .financement-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .financement-steps {
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-4);
  }
}

.financement-step {
  padding:        var(--space-5);
  background:     #fff;
  border-radius:  var(--radius-lg, 0.75rem);
  border-top:     3px solid var(--color-iroise-cyan);
}

.financement-step__num {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xl);
  font-weight:    var(--fw-bold);
  color:          var(--color-iroise-cyan);
  margin:         0 0 var(--space-3);
  letter-spacing: 0.05em;
}

.financement-step__title {
  font-family: var(--font-display);
  font-size:   var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color:       var(--color-iroise-blue);
  margin:      0 0 var(--space-2);
}

.financement-step__lead {
  font-size:   var(--fs-sm);
  line-height: var(--lh-normal);
  color:       var(--color-text);
  margin:      0;
}


@media (prefers-reduced-motion: reduce) {
  .financement-card,
  .financement-card:hover {
    transform:  none;
    transition: none;
  }
}


/* ===== CTA-final : fond bleu foncé pour cohérence avec les overrides btn ===== */

.cta-final {
  background: var(--color-iroise-blue);
  color:      var(--color-text-inverse);
}

.cta-final .cta-final__title {
  color: var(--color-text-inverse);
}

.cta-final .cta-final__lead {
  color: rgba(255, 255, 255, 0.85);
}


/* ===========================================
   Note Qualiopi sous la grille des dispositifs
   --------------------------------------------
   Pavé de réassurance qui précise la condition réglementaire
   et pointe vers /qualiopi/ pour consulter le certificat.
   =========================================== */

.financement-qualiopi-note {
  display:        flex;
  align-items:    flex-start;
  gap:            var(--space-3);
  padding:        var(--space-4) var(--space-5);
  margin-top:     var(--space-6);
  background:     var(--color-iroise-blue-soft);
  border-left:    3px solid var(--color-iroise-blue);
  border-radius:  var(--radius-md);
}

.financement-qualiopi-note__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           var(--color-iroise-blue);
  margin-top:      2px;
}

.financement-qualiopi-note__text {
  margin:      0;
  max-width:   none;
  font-size:   var(--fs-sm);
  line-height: var(--lh-relaxed);
  color:       var(--color-text);
}

.financement-qualiopi-note__link {
  color:                 var(--color-iroise-blue);
  font-weight:           var(--fw-medium);
  text-decoration:       underline;
  text-underline-offset: 0.2em;
  transition:            color var(--duration-fast) var(--ease-out);
}

.financement-qualiopi-note__link:hover,
.financement-qualiopi-note__link:focus-visible {
  color: var(--color-iroise-cyan);
}