/* ==========================================================================
   OJ DIAG IMMO — Responsive
   --------------------------------------------------------------------------
   Chargé juste après style.css. Contient toutes les media queries de largeur.
   SOMMAIRE
   1. Container (identique Bootstrap 5) + --container-max pour les débords
   2. ≤ 1399px
   3. ≤ 1199px (menu burger)
   4. ≤ 991px
   5. ≤ 767px
   6. ≤ 575px
   ========================================================================== */

/* ===== Container ===== */
@media (min-width: 576px)  { .container { max-width: 540px; }  :root { --container-max: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; }  :root { --container-max: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; }  :root { --container-max: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } :root { --container-max: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } :root { --container-max: 1320px; } }

/* ===== ≤ 1399px ===== */
@media (max-width: 1399.98px) {
  .site-header__logo { --logo-w: 170px; height: 132px; }
  .site-header__logo img { width: 100px; height: 100px; }
  .site-nav, .site-nav__list { gap: 14px; }
  .site-nav__link { font-size: 11px; }
  .site-header__client { padding: 0 20px; gap: 10px; font-size: 15px; }
  .hero__content { padding-left: 40px; }
  .quote-bar__box { padding: 16px 24px 16px 32px; gap: 14px; }
  .quote-bar__option label { width: 92px; white-space: normal; }
  .quote-bar__title strong { font-size: 21px; }
  .quote-bar__title span { font-size: 18px; }
  .site-footer__main { grid-template-columns: 300px 1fr 1fr 1fr; }
  .site-footer__logo { margin-left: 20px; }
  .site-footer__bottom-inner { padding-left: 20px; padding-right: 20px; }
  .cta__list { margin-left: 0; }
}

/* ===== ≤ 1199px ===== */
@media (max-width: 1199.98px) {
  :root { --header-h: 80px; }
  .burger { display: block; }
  .site-header__logo { --logo-w: 140px; height: 110px; }
  .site-header__logo img { width: 84px; height: 84px; }
  .site-header.is-scrolled .site-header__logo img { width: 64px; height: 64px; }
  .site-header__client { margin-left: auto; }
  .site-nav {
    position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin: 0;
    padding: calc(var(--header-h) + 24px) 28px 40px;
    background: var(--c-navy); border-left: 1px solid rgba(201, 157, 101, .35);
    overflow-y: auto; transform: translateX(100%); visibility: hidden;
    transition: transform .45s var(--ease), visibility .45s;
  }
  .site-nav.is-open { transform: none; visibility: visible; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .site-nav__link { flex: 1; font-size: 14px; padding: 14px 0; }
  .site-nav__link .site-nav__chevron { display: none; }
  .site-nav__toggle {
    display: grid; place-items: center; width: 40px; height: 40px; color: var(--c-gold);
  }
  .site-nav__toggle .icon { width: 14px; height: 14px; transition: transform .3s; }
  .site-nav__item.is-open .site-nav__toggle .icon { transform: rotate(180deg); }
  .site-nav__sub {
    position: static; flex-basis: 100%; min-width: 0; padding: 0 0 0 12px; border: 0; border-radius: 0;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .site-nav__item:hover > .site-nav__sub, .site-nav__item:focus-within > .site-nav__sub { display: none; }
  .site-nav__item.is-open > .site-nav__sub { display: block; padding-bottom: 10px; }
  .nav-overlay {
    position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  }
  .nav-overlay.is-visible { opacity: 1; visibility: visible; }
  /* Verrou du scroll sur <html> (et non <body>) : avec html { overflow-x: clip },
     un overflow sur body n'est pas propagé au viewport, body devient un conteneur
     de défilement et le header sticky (donc le burger) remonte hors de l'écran */
  html.nav-open { overflow: hidden; }

  .hero { min-height: 640px; padding-top: 200px; }
  .hero__title { font-size: 56px; line-height: 52px; }
  .quote-bar__box { flex-wrap: wrap; justify-content: center; padding: 24px; }
  .quote-bar__title { flex-basis: 100%; text-align: center; }
  .quote-bar__submit { align-self: stretch; height: auto; min-height: 102px; }
  .features__list { gap: 20px; }
  .feature-card { padding: 32px 26px; }
  .service-card__footer { left: 20px; gap: 16px; }
  .service-card__title { font-size: 20px; line-height: 28px; }
  .service-card__icon { width: 56px; height: 56px; }
  .site-footer__main { grid-template-columns: 1fr 1fr 1fr; row-gap: 24px; }
  .site-footer__logo { grid-column: 1 / -1; margin: 0; width: 160px; height: 160px; }
  .contact__aside { margin-left: 0; }
}

/* ===== ≤ 991px ===== */
@media (max-width: 991.98px) {
  .title-xl { font-size: 28px; line-height: 38px; }
  .title-lg { font-size: 30px; line-height: 40px; }
  .hero__content { padding-left: 0; }
  .split-block, .sector .split-block, .sector__row--reverse .split-block, .contact__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .split-block__media { margin-right: calc(-1 * var(--bleed)); }
  .sector .split-block__media { margin-left: 0; }
  .sector__row--reverse .split-block__body { padding-left: 0; order: 0; }
  .sector__row--reverse .split-block__media { order: -1; }
  .split-block__body { max-width: none; }
  .features__list { grid-template-columns: 1fr; max-width: 520px; }
  .cta__list { grid-template-columns: 1fr; }
  .news__list { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .contact__aside { padding-top: 0; }
  .contact-form { max-width: none; }
  .contact__title { margin-top: 20px; }
  .site-footer__bottom-inner { flex-direction: column; justify-content: center; padding-top: 16px; padding-bottom: 16px; text-align: center; }
  .site-footer__legal { justify-content: center; }
}

/* ===== ≤ 767px ===== */
@media (max-width: 767.98px) {
  .site-header__client { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .site-header__client span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hero { min-height: 0; padding-top: 170px; padding-bottom: 150px; }
  .hero--page { padding-bottom: 130px; }
  .hero__title { font-size: 44px; line-height: 44px; }
  .hero__subtitle { font-size: 16px; }
  .quote-bar__group { width: 100%; }
  .quote-bar__options { width: 100%; justify-content: space-around; padding: 14px 8px; }
  .quote-bar__option label { width: auto; min-width: 72px; font-size: 10px; }
  .quote-bar__submit { width: 100%; min-height: 56px; }
  .quote-bar__submit .icon { width: 30px; height: 30px; }
  .about, .page-interne .about { padding-top: 64px; }
  .features, .page-interne .features { padding-top: 72px; }
  .services, .news { padding-top: 72px; }
  .cta { padding-top: 72px; }
  .cta-card { padding: 32px 24px; min-height: 260px; }
  .cta-card__title { font-size: 26px; line-height: 36px; }
  .news__list { grid-template-columns: 1fr; max-width: 420px; }
  .site-footer__main { grid-template-columns: 1fr; text-align: left; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-card { width: 92%; margin-left: 4%; padding: 20px; }
  .contact-card__item { gap: 26px; }
  .contact-card__value { font-size: 17px; }
  .contact-form__captcha { margin-right: 0; }
}

/* ===== ≤ 575px ===== */
@media (max-width: 575.98px) {
  .hero__title { font-size: 38px; line-height: 40px; }
  .btn { white-space: normal; text-align: left; }
  .quote-bar__title strong { font-size: 19px; }
  .quote-bar__title span { font-size: 16px; }
  .quote-bar__picto { width: 44px; height: 44px; }
  .quote-bar__option label { min-width: 0; padding: 0 2px; }
  .service-card__footer { left: 20px; bottom: 16px; gap: 16px; }
  .service-card__icon { width: 56px; height: 56px; }
  .service-card__title { font-size: 21px; }
}