/**
 * Iroise 2026 — Page "Demande de devis".
 *
 * Layout 2 colonnes (desktop) : form (~60%) + sidebar trust (~40%).
 * Mobile : form puis sidebar empilés.
 */

.devis-section {
  background: var(--color-iroise-blue-soft);
}

.devis-layout {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
}

@media (min-width: 960px) {
  .devis-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap:                   var(--space-7);
    align-items:           start;
  }
}

.devis-layout__main {
  min-width: 0;
}

.devis-layout__side {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

@media (min-width: 960px) {
  .devis-layout__side {
    position: sticky;
    top:      90px;
  }
}

/* ===== Side cards ===== */

.devis-side-card {
  background:    #fff;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.75rem);
  padding:       var(--space-5);
  box-shadow:    0 4px 18px rgba(0, 0, 0, 0.04);
}

.devis-side-card__eyebrow {
  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-3);
}

/* Card téléphone */
.devis-side-card--phone {
  background: var(--color-iroise-blue);
  color:      var(--color-text-inverse);
  border:     none;
}

.devis-side-card--phone .devis-side-card__eyebrow {
  color: rgba(255, 255, 255, 0.75);
}

.devis-side-card__phone {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  font-family:     var(--font-display);
  font-size:       clamp(1.25rem, 3vw, var(--fs-xl));
  font-weight:     var(--fw-bold);
  color:           var(--color-text-inverse);
  text-decoration: none;
  letter-spacing:  -0.01em;
  transition:      opacity 150ms ease;
}

.devis-side-card__phone:hover {
  opacity:         0.85;
  text-decoration: none;
}

.devis-side-card__sub {
  font-size:    var(--fs-xs);
  color:        rgba(255, 255, 255, 0.75);
  margin:       var(--space-2) 0 0;
  font-weight:  var(--fw-regular);
}

/* Card "Notre engagement" */
.devis-side-card__list {
  list-style:    none;
  padding:       0;
  margin:        0;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
}

.devis-side-card__list li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   var(--fs-sm);
  line-height: var(--lh-snug);
  color:       var(--color-text);
}

.devis-side-card__list svg {
  color:        var(--color-iroise-blue);
  flex-shrink:  0;
  margin-top:   2px;
}

/* Card certifications */
.devis-side-card--certs {
  background: var(--color-iroise-blue-soft);
  border:     none;
}

.devis-side-card__certs-lead {
  font-size:   var(--fs-sm);
  font-weight: var(--fw-semibold);
  color:       var(--color-iroise-blue);
  line-height: var(--lh-snug);
  margin:      0 0 var(--space-4);
}

.devis-side-card__logos {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--space-3);
  align-items:    center;
  justify-content:space-around;
}

.devis-side-card__logo {
  max-width:    100px;
  max-height:   60px;
  width:        auto;
  height:       auto;
  object-fit:   contain;
  filter:       grayscale(15%);
  transition:   filter 200ms ease, transform 200ms ease;
}

.devis-side-card__logo:hover {
  filter:    grayscale(0%);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .devis-side-card__logo {
    transition: none;
  }
}


/* ===========================================
   CTA flottant "Appeler" — mobile/tablette uniquement
   --------------------------------------------
   Sur mobile, la sidebar (qui contient la carte téléphone)
   tombe sous le formulaire. Ce bouton fixe garantit que
   l'option d'appel reste accessible pendant tout le scroll.
   Caché en desktop (la sidebar fait le travail).
   =========================================== */

.floating-call-cta {
  display: none;
}

@media (max-width: 1023px) {
  .floating-call-cta {
    position:        fixed;
    bottom:          calc(env(safe-area-inset-bottom, 0px) + 16px);
    right:           16px;
    z-index:         50;
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         14px 20px;
    border-radius:   999px;
    background:      var(--color-iroise-blue);
    color:           var(--color-text-inverse);
    text-decoration: none;
    font-family:     var(--font-base);
    font-size:       var(--fs-md);
    font-weight:     var(--fw-medium);
    line-height:     1;
    box-shadow:      0 8px 24px rgba(0, 80, 168, 0.35);
    transition:      transform var(--duration-base) var(--ease-out),
                     box-shadow var(--duration-base) var(--ease-out);
  }

  .floating-call-cta:hover,
  .floating-call-cta:focus-visible {
    transform:  translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 80, 168, 0.45);
    color:      var(--color-text-inverse);
    outline:    none;
  }

  .floating-call-cta:focus-visible {
    box-shadow: 0 0 0 3px var(--color-iroise-cyan),
                0 12px 32px rgba(0, 80, 168, 0.45);
  }

  .floating-call-cta svg {
    flex-shrink: 0;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .floating-call-cta {
    transition: none;
  }
  .floating-call-cta:hover,
  .floating-call-cta:focus-visible {
    transform: none;
  }
}