/* 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 sur une seule ligne.

     POURQUOI PLUS DE RETOUR À LA LIGNE. Mesuré à 390 px : la colonne de droite
     offre 133 px, les deux pastilles en réclament 156. Elles passaient donc à
     la ligne et mangeaient une rangée entière de l'en-tête. Côte à côte, le
     bloc passe de 206 à 195 px — 11 px, pas davantage : une fois les pastilles
     sur une ligne, c'est le titre (111 px) qui fixe la hauteur, plus elles.

     LE DÉBORDEMENT EST ASSUMÉ, ET IL EST DÉJÀ LÀ. Alignées à droite, elles
     s'étendent vers la gauche au-delà de la colonne, dans le vide laissé par
     la deuxième ligne du titre — exactement ce que fait déjà le sélecteur de
     rendu juste dessous, 143 px dans la même colonne de 133. */
  .world-2032 .world-intro .world-country-options {
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 0 !important;
  }

  /* Un padding resserré pour limiter ce débordement : 156 px de pastilles
     tombent autour de 148, soit le même dépassement que le sélecteur de rendu.
     La hauteur, elle, ne change pas — seule la largeur se tasse. */
  .world-2032 .world-intro .world-country-options button {
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }

  .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;
  }
}

/* --- Les plus petits ecrans (<= 380 px) -------------------------------- */
/* Mesure a 360 px : la pastille « France » commencait a x=192 alors que la
   premiere ligne du titre s'arrete a x=196 — 4 px de chevauchement reel des
   glyphes. On resserre donc un peu plus les pastilles a cette seule largeur.
   A 390 px et au-dela il n'y avait aucun chevauchement : rien n'y change. */
@media (max-width: 380px) {
  .world-2032 .world-intro .world-country-options {
    gap: 4px;
  }
  .world-2032 .world-intro .world-country-options button {
    padding-left: 8px;
    padding-right: 8px;
  }
}