/* ==========================================================================
   GAIA CONCEPT — RESPONSIVE
   Approche : composants.css et home.css définissent une mise en page
   confortable en grand écran ; ce fichier resserre la mise en page pour
   les petits écrans (mobile-first en pratique : le site est d'abord
   pensé et testé à 360px, ce fichier objective les paliers).
   Paliers testés : 360 / 390 / 768 / 1024 / 1440 / grands écrans.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   BASE MOBILE (< 768px) — s'applique à tous les écrans de téléphone
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .container {
    padding-inline: var(--container-pad);
  }

  .section {
    padding-block: var(--space-8);
  }

  .brand-statement {
    padding-block: var(--space-8);
  }

  /* Header */
  .site-header__row--top {
    padding-block: var(--space-3);
  }

  .brand__wordmark {
    font-size: 1rem;
  }

  .brand__wordmark span {
    display: none;
  }

  /* Le CTA "Demander un devis" est déjà présent dans la barre fixe mobile */
  .header-actions > .btn-primary {
    display: none;
  }

  /* Hero */
  .hero__logo-decor {
    display: none;
  }

  /* Vidéo masquée sous 768px : économie de données et de batterie.
     Modifiable ici si vous préférez l'activer partout — voir
     assets/video/README-video.md */
  .hero__video-bg {
    display: none;
  }

  .hero {
    padding-top: 88px;
    min-height: unset;
    padding-bottom: var(--space-8);
  }

  .hero__title {
    max-width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__quick {
    flex-direction: column;
  }

  /* Réassurance */
  .reassurance__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Univers */
  .universes__grid {
    grid-template-columns: 1fr;
  }

  .universe-card__list {
    grid-template-columns: 1fr;
  }

  /* Diagnostic */
  .diagnostic__panel {
    padding: var(--space-5) var(--space-4);
  }

  .diagnostic__options {
    grid-template-columns: 1fr;
  }

  /* Logement */
  .housing__grid {
    grid-template-columns: 1fr;
  }

  /* Méthode */
  .method__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Galerie */
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Zone */
  .zone__layout {
    grid-template-columns: 1fr;
  }

  .zone__map {
    max-width: 340px;
    margin-inline: auto;
  }

  /* Conseils */
  .advice__grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Espace pour la barre fixe mobile */
  body {
    padding-bottom: var(--mobile-bar-height);
  }
}

/* Très petits écrans (360–389px) : resserrement supplémentaire */
@media (max-width: 389.98px) {
  .container {
    padding-inline: 1rem;
  }

  .btn {
    padding: 0.85em 1.3em;
  }

  .gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   TABLETTE (768px – 1023px)
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Header encore sur une seule ligne à cette largeur (nav dédiée à partir de 1024px) */
  .hero {
    padding-top: 100px;
  }

  .universes__grid {
    grid-template-columns: 1fr;
  }

  .housing__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .method__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .zone__layout {
    grid-template-columns: 1fr;
  }

  .zone__map {
    max-width: 420px;
    margin-inline: auto;
  }

  .advice__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  body {
    padding-bottom: var(--mobile-bar-height);
  }
}

/* ---------------------------------------------------------------------------
   NAVIGATION : bascule desktop à partir de 1024px
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .main-nav {
    display: block;
    border-top: 1px solid var(--glass-border);
  }

  .header-phone {
    display: inline-flex;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-toggle,
  .mobile-menu {
    display: none;
  }

  .mobile-bar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* ---------------------------------------------------------------------------
   DESKTOP (≥ 1024px)
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero__content {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .hero__quick {
    flex-direction: column;
    margin-top: 0;
  }

  .hero__actions {
    margin-top: var(--space-7);
  }

  .method__track {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   GRANDS ÉCRANS (≥ 1440px)
   --------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1360px;
  }

  .hero__title {
    max-width: 20ch;
  }

  .gallery__grid {
    gap: var(--space-5);
  }
}

/* Très grands écrans : on plafonne la largeur pour éviter l'étirement */
@media (min-width: 1920px) {
  :root {
    --container-max: 1440px;
  }
}