/* Luvia World — respiration de la scène (mobile).
 *
 * DEUX GESTES, UN SEUL BUT : rendre la carte au monde.
 *
 * 1. Les pays remontent contre le titre. Ils flottaient sous la barre de
 *    recherche, à mi-hauteur du globe, et coupaient la France en deux. Collés
 *    à « Le monde, à deux. », ils appartiennent à l'en-tête et libèrent tout
 *    ce qui est en dessous.
 *
 * 2. Deux commandes disparaissent du rail. « Revenir au nord » ne sert que si
 *    l'on a fait tourner le globe — geste à deux doigts que personne ne fait
 *    au pouce — et « Recentrer », juste dessous, ramène déjà la vue sur le
 *    pays. « Mettre les nuages en pause » règle un détail décoratif que
 *    personne ne vient chercher. Six boutons empilés au bord de l'écran, c'est
 *    ce qui donnait l'impression d'un cockpit ; il en reste trois.
 *
 * Rien n'est supprimé : les boutons restent construits et écoutés, seul leur
 * affichage mobile tombe. Sur bureau, où l'on fait pivoter le globe à la
 * souris, ils gardent tout leur sens et ce fichier ne s'applique pas.
 */

@media (max-width: 1023px) {

  /* --- Les pays contre le titre ---------------------------------------- */
  /* L'en-tête passe en ligne : le titre garde sa largeur, les pays prennent
     ce qui reste à sa droite, et la recherche occupe seule la ligne suivante.
     Si les pastilles ne tiennent pas — écran étroit, libellés longs — elles
     retombent d'elles-mêmes sur leur propre ligne, toujours au-dessus de la
     recherche. Aucune largeur n'est imposée, donc rien ne peut déborder. */
  .world-2032 .world-intro {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 12px;
    row-gap: 14px;
  }

  .world-2032 .world-intro > div:first-child { flex: 0 1 auto; }

  /* La colonne de droite : les pays, puis le rendu. Alignée à droite et sur
     le bas du titre, elle se lit comme une marge de réglages plutôt que comme
     une rangée de boutons posés sur la carte. */
  .world-2032 .world-intro .world-intro-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    order: 2;
    pointer-events: auto;
  }

  /* Le sélecteur de rendu était calé en absolu sur la carte : il reprend sa
     place dans le flux de l'en-tête. */
  .world-2032 .world-intro .world-map-modes {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto;
    flex: none;
  }

  /* Sur les écrans les plus étroits la pastille est un peu plus large que la
     colonne, et « Vue 3D » se cassait en deux lignes. On interdit la coupure :
     alignée à droite, elle déborde alors vers la gauche — dans le vide laissé
     par la deuxième ligne du titre, où rien ne la gêne. */
  .world-2032 .world-intro .world-map-modes button { white-space: nowrap; }

  /* La barre portait `width: calc(100% + 20px)` : elle réclamait toute la
     ligne et se renvoyait donc systématiquement sous le titre. On la ramène à
     la largeur de son contenu, et `flex-basis: 0` la laisse simplement occuper
     ce qui reste à droite. */
  .world-2032 .world-intro .world-country-bar {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* La colonne parente gère désormais la largeur : la barre se contente de
       sa propre taille, sinon elle s'étirerait sur toute sa hauteur. */
    flex: none;
    min-width: 0;
    /* L'en-tête est traversant pour laisser tourner le globe dessous ; les
       pastilles, elles, doivent rester cliquables. */
    pointer-events: auto;
  }

  /* Les pastilles étaient dans un défilement horizontal, hérité du temps où
     cinq pays s'y bousculaient. À deux, elles tiennent : on les laisse passer
     à la ligne plutôt que sortir du cadre. */
  .world-2032 .world-intro .world-country-options {
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 7px;
    overflow: visible;
    padding: 0 !important;
  }

  .world-2032 .world-intro .world-search-controls {
    order: 3;
    flex: 1 0 100%;
  }

  /* --- Le rail allégé --------------------------------------------------- */
  .world-2032 .world-product-controls [data-world-north],
  .world-2032 .world-product-controls [data-world-clouds] {
    display: none !important;
  }
}