/* ==========================================================================
   Responsive — chargé en dernier
   1440 px : desktop compact (portables)
   desktop peu haut (≤ 800 px) : premier écran resserré pour tenir sans défiler
   1100 px : tablette — menu burger, hero et écrans empilés, photo en bandeau
    640 px : mobile — d'après la maquette mobile
   ========================================================================== */

/* ---------------------------------------------------------------- ≤ 1440 */
@media (max-width: 1440px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }

  .features { padding-inline: 16px; }
  .features__item { padding-inline: 10px; }
  .features__label { font-size: 1rem; }

  /* Cartes avantages : picto réduit pour laisser la largeur au texte */
  .benefit { gap: 10px; padding-inline: 16px; }
  .benefit__icon { width: 48px; height: 48px; }
  .benefit__body { padding-left: 10px; }
  .benefit__title { font-size: 1.0625rem; }
  .benefit__text { margin-top: 6px; font-size: .875rem; }

  .header-phone { font-size: 1.25rem; }
  :root { --fs-h2: 1.5rem; }
  .quote__form .btn { gap: 12px; padding-inline: 20px; font-size: 1.1875rem; white-space: nowrap; }
  .quote__form .btn__arrow { margin-left: 0; }
}

/* ------------------------------------------- desktop peu haut (≤ 800 px) */
@media (min-width: 1101px) and (max-height: 800px) {
  .hero { padding-top: 12px; }
  .quote { padding-top: 20px; padding-bottom: 16px; }
  .quote__title { font-size: 1.375rem; }
  .quote::before { margin-bottom: 8px; }
  .quote__direct { margin-top: 8px; }
  .quote__subtitle { margin-top: 4px; font-size: 1rem; }

  .hero__location { font-size: 1rem; }
  .features__item { gap: 8px; }
  .features__label { font-size: 1rem; }
  .benefit { min-height: 0; gap: 12px; }
  .benefit__icon { width: 52px; height: 52px; }
  .benefit__title { font-size: 1.0625rem; }
  .benefit__text { margin-top: 6px; }
}

/* ---------------------------------------------------------------- ≤ 1100 */
@media (max-width: 1100px) {
  :root { --header-h: 76px; --fs-h2: 1.6875rem; }

  /* Header : burger + panneau déroulant */
  .site-header__inner { gap: 16px; }
  .brand { margin-right: auto; }
  .brand__logo { height: 58px; }
  .nav-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--c-white);
    border-top: 1px solid var(--c-divider);
    box-shadow: 0 16px 30px rgba(20, 32, 46, .12);
  }
  .site-header.is-menu-open .main-nav { display: block; }
  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav__list li + li { border-top: 1px solid var(--c-divider); }
  .main-nav__link {
    display: flex;
    padding: 18px var(--container-pad);
    font-size: 1rem;
  }
  .main-nav__link::after { display: none; }
  .main-nav__link.is-active { background: var(--c-icon-bg); }

  /* Hero : photo en bandeau, puis contenu, puis formulaire */
  .hero { padding-block: 0 56px; }
  .hero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(220px, 52vw, 460px);
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 72%, #fff 100%),
      var(--hero-image) 42% 30% / cover no-repeat,
      var(--hero-fallback);
  }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__content { padding-top: 8px; }
  .quote { width: 100%; max-width: 680px; }

  /* Cartes avantages : une par ligne, picto de nouveau à gauche */
  .benefits { grid-template-columns: minmax(0, 1fr); }
  .benefit { gap: 18px; min-height: 0; }
  .benefit__icon { width: 60px; height: 60px; }
  .benefit__body { padding-left: 16px; }

  /* Écrans 1 → 4 : photo en bandeau au-dessus du texte */
  .story {
    display: block;
    min-height: 0;
    padding-block: 0 64px;
  }
  .story__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(240px, 50vw, 440px);
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 70%, #fff 100%),
      var(--story-image) var(--story-position-m, center) / cover no-repeat,
      var(--story-fallback);
  }
  .story--condensation .story__bg { --story-position-m: 90% 85%; }
  .story--acces .story__bg        { --story-position-m: 60% center; }
  .story--sain .story__bg         { --story-position-m: 75% center; }

  .story__inner { padding-top: 24px; }
  .story__content { max-width: 720px; }
  .note { display: none; }   /* annotations manuscrites : desktop uniquement */

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------- ≤ 640 */
@media (max-width: 640px) {
  :root {
    --header-h: 68px;
    --fs-h1: clamp(2.125rem, 9.4vw, 3rem);
    --fs-lead: 1.0625rem;
    --fs-h2: 1.375rem;
  }

  .brand__logo { height: 50px; }

  /* Téléphone : pastille ronde, numéro dans le libellé accessible */
  .header-phone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-red);
    color: var(--c-white);
  }
  .header-phone:hover { color: var(--c-white); background: var(--c-red-dark); }
  .header-phone svg { width: 22px; height: 22px; }
  .header-phone__num {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Hero */
  .hero { padding-bottom: 40px; }
  .hero__grid { gap: 28px; }
  .hero__location { font-size: .9375rem; }
  .hero__location svg { width: 18px; height: 18px; }
  .hero__lead { margin-top: 14px; }
  .hero__lead br { display: none; }

  /* Barre d'atouts : 3 + 2, comme la maquette mobile */
  .features {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 22px;
    margin-top: 24px;
    padding: 20px 8px;
    border-radius: var(--radius-md);
  }
  .features__item { grid-column: span 2; gap: 8px; padding-inline: 4px; }
  .features__item:nth-child(4) { grid-column: 2 / span 2; }
  .features__item:nth-child(4)::before { display: none; }
  .features__icon { width: 52px; height: 52px; }
  .features__icon svg { width: 34px; height: 34px; }
  .features__label { font-size: .875rem; line-height: 1.25; white-space: normal; }

  .benefits { gap: 12px; margin-top: 20px; }
  .benefit { padding: 18px 16px; }
  .benefit__icon { width: 56px; height: 56px; }
  .benefit__title { font-size: 1.0625rem; }
  .benefit__text { margin-top: 6px; }

  /* Formulaire */
  .quote { padding: 32px 20px 24px; }
  .quote__form { gap: 16px; margin-top: 20px; }
  .radio-group { gap: 24px; }
  .quote__form .btn { min-height: 56px; gap: 10px; padding-inline: 16px; font-size: 1.0625rem; white-space: nowrap; }
  .quote__form .btn__arrow { margin-left: 0; }

  .quote-modal { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .quote-modal__close { top: 10px; right: 10px; }
  .info-modal__body { padding: 28px 20px 24px; }
  .info-modal__title { font-size: 1.3125rem; }

  /* Écrans 1 → 4 */
  .story { padding-bottom: 48px; }
  .story__title { margin-top: 16px; font-size: clamp(2.125rem, 9.4vw, 3rem); }
  .story__lead { margin-top: 14px; font-size: 1.0625rem; }

  .tiles { gap: 8px; margin-top: 24px; }
  .tile { flex: 1 1 0; width: auto; padding: 16px 6px; gap: 10px; }
  .tiles > li:not(.tile) { flex: 1 1 0; }
  .tiles > li > .tile { width: 100%; }
  .tile__plus { top: 6px; right: 6px; width: 20px; height: 20px; font-size: .9375rem; }
  .tile svg { width: 38px; height: 38px; }
  .tile__label { font-size: .8125rem; }

  .checklist { gap: 14px; margin-top: 22px; }
  .checklist li { gap: 14px; font-size: .9375rem; }
  .checklist__icon { width: 44px; height: 44px; }
  .checklist__icon svg { width: 22px; height: 22px; }

  /* Écran 3 : cartes en liste, picto à gauche */
  .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    padding: 18px 16px;
    text-align: left;
  }
  .card__icon { grid-row: span 2; width: 64px; height: 64px; }
  .card__title { margin-top: 0; font-size: 1.0625rem; }
  .card__text { margin-top: 4px; }

  .btn--cta { display: flex; width: 100%; margin-top: 28px; }

  /* Footer */
  .site-footer__inner {
    flex-direction: column;
    gap: 22px;
    padding-block: 32px 88px;   /* place pour le bouton « remonter » */
    text-align: center;
  }
  .site-footer__addresses { flex-direction: column; align-items: center; }
  .site-footer__links { flex-wrap: wrap; justify-content: center; gap: 16px 24px; margin-right: 0; }

  .back-to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}