/* ==========================================================================
   RESPONSIVE – Tablette et mobile.
   La maquette ne fournit que la version desktop (1440px) : les breakpoints
   utilisés sont ceux de Divi, documentés ici. Les tailles de texte sont déjà
   fluides via clamp() (variables.css) et ne sont pas redéfinies.

   Breakpoints Divi :
   - ≤ 980px : tablette (les colonnes Divi s'empilent)
   - ≤ 767px : mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop (> 980px) — masquer le menu mobile
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  /* Bloc mobile complet (hamburger + panneau déroulant) masqué en desktop :
     seul le menu principal #top-menu-nav reste. */
  #main-header #et_mobile_nav_menu {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Tablette (≤ 980px)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  /* Bascule des menus. On masque UNIQUEMENT le nav desktop : #et-top-navigation
     est le conteneur commun, il abrite aussi le hamburger — le masquer
     supprimerait le menu mobile avec. */
  #main-header #top-menu-nav {
    display: none !important;
  }

  #main-header #et_mobile_nav_menu {
    display: block !important;
  }

  /* Header en positionnement relatif : permet au menu mobile absolu de se
     positionner par rapport au header (et donc de disparaître avec lui au scroll) */
  #main-header {
    position: relative;
  }

  /* Aucun ancêtre positionné entre le header et le panneau : le bloc conteneur
     du menu est donc #main-header, et son `right: 0` tombe sur le bord droit de
     l'écran. Sans ça il se cale sur .container (que Divi met en position:
     relative), lequel est en retrait de var(--margin-outer) à droite. */
  #main-header .container,
  #main-header #et_mobile_nav_menu,
  #main-header #et_mobile_nav_menu .mobile_nav {
    position: static;
  }

  /* Logo : ne descend jamais sous 80px de haut en tablette/mobile.
     width/height auto : la largeur suit le ratio, aucune déformation. */
  #main-header #logo {
    min-height: 80px;
    width: auto;
    height: auto;
    max-width: none;
  }

  /* Hamburger aux couleurs du site */
  #main-header .mobile_menu_bar::before {
    color: var(--color-primary);
  }

  /* Menu mobile ouvert : 2/3 de la page, aligné à droite, sous le bandeau blanc,
     deux angles bas arrondis. Position absolue par rapport au header
     → disparaît avec le header au scroll */
  #main-header .et_mobile_menu {
    width: calc(100vw * 2 / 3);
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    /* Collé sous le header. Tout décalage se règle ici, sur top, et surtout
       PAS sur margin-top : à l'ouverture, Divi anime
       le panneau avec slideDown(), qui interpole hauteur + marges + paddings
       via des styles inline. Un !important sur ces propriétés bloque
       l'interpolation (l'inline perd face au !important) et le panneau
       s'ouvre par à-coups. top n'est jamais animé : sans risque. */
    top: 100% !important;
    /* haut · droite · bas · gauche — rien à droite : le panneau est à ras bord */
    padding: 24px 0 32px var(--container-padding);
    background-color: var(--color-background);
    border: none;
    box-shadow: none;
    border-bottom-left-radius: var(--border-radius-lg);
  }

  #main-header .et_mobile_menu li {
    margin-bottom: 16px;
  }

  #main-header .et_mobile_menu li a {
    display: block;
    padding: 12px 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--font-size-base);
    color: var(--color-primary);
    transition: color var(--transition-default);
  }

  #main-header .et_mobile_menu li a:hover {
    color: var(--color-secondary);
    background-color: transparent;
  }

  /* Retrait droit des blocs mis en avant réduit de moitié */
  .km-indent {
    margin-right: 10%;
  }

  .km-indent--lg {
    margin-right: 18%;
  }

  /* Chiffres clés empilés : resserrer l'espace vertical */
  .km-stat {
    margin-bottom: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   Mobile (≤ 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --header-height: 96px; /* loge le logo de 80px minimum + respiration */
    /* --border-radius-lg conserve ses 80px : arrondi identique du desktop au mobile */
  }

  /* Retrait droit des blocs mis en avant annulé */
  .km-indent,
  .km-indent--lg {
    margin-right: 0;
  }

  /* Colonnes d'images décalées : décalages annulés en mobile */
  .km-cols-offset > .et_pb_column:nth-child(1),
  .km-cols-offset > .et_pb_column:nth-child(2),
  .km-cols-offset > .et_pb_column:nth-child(3) {
    margin-top: 0;
  }

  /* Ligne d'images : marges du contenu en mobile (images non bord à bord)
     et descente du bloc annulée */
  body #page-container .et_pb_row.km-cols-offset {
    width: calc(100% - 2 * var(--container-padding)) !important;
    margin: 0 auto !important;
  }

  /* Retrait du texte : inutile en mobile, où les colonnes s'empilent et où la
     ligne porte déjà ses marges latérales — le conserver décalerait la
     première colonne par rapport aux suivantes. */
  .km-text-inset > .et_pb_column:first-child .et_pb_text {
    padding-left: 0;
  }

  /* Rythme des colonnes : annulé une fois les colonnes empilées, où il ne
     produirait plus qu'un espacement vertical irrégulier. */
  .km-cols-rhythm > .et_pb_column:nth-child(1),
  .km-cols-rhythm > .et_pb_column:nth-child(2),
  .km-cols-rhythm > .et_pb_column:nth-child(3) {
    margin-top: 0;
  }

  .km-cols-rhythm > .et_pb_column:nth-child(2) .et_pb_text {
    padding-top: 0;
  }

  /* Colonnes décalées : en mobile (empilé), on annule tous les décalages */
  .km-cols-stagger > .et_pb_column:nth-child(2),
  .km-cols-stagger > .et_pb_column:nth-child(3),
  .km-cols-stagger > .et_pb_column:nth-child(3) .et_pb_image {
    margin-top: 0;
  }

  /* Textes : padding vertical harmonieux de 40px, sans décalage latéral
     (la marge latérale est portée par la ligne, cf. ci-dessous) */
  .km-cols-stagger > .et_pb_column .et_pb_text {
    padding: 40px 0 !important;
  }

  /* Col 2 : le texte passe SOUS l'image (ordre inversé) */
  .km-cols-stagger > .et_pb_column:nth-child(2) .et_pb_image {
    order: 1;
  }
  .km-cols-stagger > .et_pb_column:nth-child(2) .et_pb_text {
    order: 2;
  }

  /* Ligne pleine largeur : marges latérales normales en mobile pour que les
     images ne soient plus bord à bord. */
  body #page-container .et_pb_row.km-cols-stagger {
    width: calc(100% - 2 * var(--container-padding));
    margin-left: auto;
    margin-right: auto;
  }

  /* Formulaire : 2 colonnes en mobile. Nom/Prénom et Email/Téléphone restent
     côte à côte ; Commentaire, typologie, consentement et bouton passent
     pleine largeur (2 colonnes) et reprennent le flux normal. */
  #page-container .km-form .et_pb_contact_form {
    grid-template-columns: 1fr 1fr;
  }

  #page-container .km-form .et_pb_contact_field:has(textarea),
  #page-container .km-form .et_pb_contact_field:has(select),
  #page-container .km-form .et_pb_contact_field:has([type='checkbox']),
  #page-container .km-form .et_pb_contact_field:has([type='radio']),
  #page-container .km-form .et_pb_contact_field:has([name*='adresse']),
  #page-container .km-form .et_contact_bottom_container {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  /* Commentaire intercalé entre Choix de typologie et Résident Bernex.
     Rangée explicite : en placement automatique il se rangerait à sa position
     dans le balisage, qui n'est pas celle-là — c'est justement pour cette
     raison qu'il est placé explicitement en desktop.
     Carte des rangées en mobile : 1 Civilité · 2 Nom/Prénom ·
     3 Email/Téléphone · 4 Choix de typologie · 5 Commentaire ·
     6 Résident Bernex · 7 Adresse · 8 Consentement · 9 Envoyer.
     À décaler si un champ est ajouté au-dessus. */
  #page-container .km-form .et_pb_contact_field:has(textarea) {
    grid-row: 5;
  }


  /* Boutons pleine largeur pour une zone tactile confortable */
  .km-button,
  body #page-container .et_pb_button {
    width: 100%;
  }

  /* Cartes : padding réduit */
  .km-card {
    padding: var(--space-md);
  }

  /* Images franc-bord : en mobile, marges gauche/droite normales comme les
     autres images (plus de débord). */
  .km-img-bleed-right {
    margin-right: 0 !important;
  }

  .km-img-bleed-left {
    margin-left: 0 !important;
  }

  /* Blocs à padding droit : reprennent toute la largeur en mobile */
  .km-col-width,
  .km-pr-5 {
    padding-right: 0 !important;
  }

  /* Padding gauche/droite réduit de moitié (50px) en mobile */
  .km-px-100 {
    padding-left: 50px;
    padding-right: 50px;
  }

  /* Padding bas 300px : réduit à 120px en mobile */
  .km-pb-300 {
    padding-bottom: 120px !important;
  }

  /* Encadrés beige : toutes leurs colonnes passent en pleine largeur sur
     téléphone (certaines étaient réglées à 50%) → tous les encadrés ont les
     mêmes marges que le reste du contenu. */
  .et_pb_column:has(.km-box-beige) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Footer mobile : « Solanya » aligné verticalement avec « Les Jardins de
     Lully » — indenté de la largeur du logo + la gouttière de km-inline-logo.
     À poser sur le module « Solanya Properties ». */
  .km-footer-indent {
    padding-left: calc(var(--km-logo, 100px) + 0.75em);
  }

  /* Footer mobile : de l'air autour du bouton (plus collé au bas) */
  .km-footer .et_pb_button_module_wrapper {
    margin: 24px 0 48px !important;
  }

  /* Padding haut annulé en mobile — à ajouter sur un module précis (à côté
     de km-pt-25 par ex.) sans affecter les autres usages de km-pt-25. */
  .km-pt-0-mobile {
    padding-top: 0 !important;
  }

  /* Chiffres clés en mobile sur 2 colonnes ÉQUILIBRÉES (ex. 3/3).
     La ligne est en 3 colonnes Divi × 2 stats : on « aplatit » les colonnes
     (display: contents) pour que les 6 stats deviennent enfants de la ligne,
     puis on les répartit en 2 colonnes CSS de hauteur égale, espacement
     uniforme. À poser sur la LIGNE. */
  body #page-container .et_pb_row.km-2col-mobile {
    display: block !important;
    columns: 2;
    column-gap: 16px;
  }

  .km-2col-mobile > .et_pb_column {
    display: contents; /* les colonnes s'effacent, les stats remontent */
  }

  .km-2col-mobile .et_pb_text {
    break-inside: avoid;          /* chaque stat reste entier */
    margin: 0 0 40px !important;  /* espace uniforme entre les stats */
    /*padding-right: 15% !important;*/
  }

  /* Chiffres clés réduits sur téléphone : à 36px, un nombre de quatre
     chiffres (« 2029 ») ne tenait pas dans une demi-colonne de km-2col-mobile
     et passait à la ligne. 28px à 375px de large, en remontant progressivement
     vers les 36px du reste du site. */
  body h5 {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem); /* 28 → 36px */
  }

  /* Aucune marge/padding en haut du chiffre : les 2 colonnes s'alignent en
     haut (sinon le 1er stat de la colonne de droite descend). */
  .km-2col-mobile .et_pb_text h5 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Décalage vertical annulé en mobile (empilement naturel) */
  .km-pt-160 {
    padding-top: 0;
  }

  /* Barre inférieure du footer : en desktop le copyright est à gauche et les
     liens légaux à droite. En mobile les colonnes s'empilent sur toute la
     largeur, et la ligne des liens restait seule à droite sous des textes
     alignés à gauche. On la ramène à gauche.

     ATTENTION : l'alignement ne vient PAS de text-align. Les modules Divi 5
     sont des conteneurs flex en colonne, et Divi pousse celui-ci à droite via
     « align-items: flex-end » (.et_pb_text_5_tb_footer). C'est donc cette
     propriété qu'il faut inverser ; agir sur text-align seul est sans effet,
     le bloc entier restant collé à droite. Le text-align complète le
     traitement pour le style inline « text-align: right » posé sur le
     paragraphe par l'éditeur.
     !important : nécessaire pour battre le style inline (paragraphe) et la
     feuille dynamique de Divi, chargée après le thème enfant. */
  .km-footer__legal {
    align-items: flex-start !important;
  }

  .km-footer__legal p {
    text-align: left !important;
  }

}