/* Vitrine MEGGA — sélecteur de langue : bouton de pied de page + petit menu.
 *
 * Fichier SÉPARÉ de css/styles.css à dessein : styles.css est l'export Webflow
 * et sert de source à la transcription de l'app (scripts/build-megga-x-css.mjs).
 * Y écrire à la main polluerait le design system côté CRM.
 *
 * Aucune couleur n'est réinventée : tout lit les variables `--neutral-colors--*`
 * de la vitrine, pour que le menu soit de la même matière que les cartes du
 * site (fond profond, filet discret, rayon généreux).
 *
 * ⚠ C'ÉTAIT UN DIALOGUE PLEIN ÉCRAN (fond flouté, titre, croix, page verrouillée
 * derrière, quatre lignes encadrées de 420px de large). Il a été ramené à un
 * menu de 176px : quatre langues ne valent pas qu'on couvre le site pour les
 * montrer. Ce qui a été RETIRÉ et qu'il ne faut pas rétablir par réflexe : le
 * fond, le titre, la croix, les cadres de ligne, et la mention « Langue
 * actuelle » — le bouton nomme déjà la langue courante. Ce qui a été GARDÉ
 * parce que ce n'est pas de la décoration : la mention « Vers l'accueil » sur
 * les langues où cette page n'existe pas, et le contour de focus. */

/* Le bouton se range avec le copyright, à gauche de la barre de pied de page :
   même famille d'information, et le bord droit reste au sigle Swiss Made — un
   contrôle discret n'a rien à gagner à se coller contre un logo de couleur.
   `wrap` parce que sous 480 px la barre passe en colonne : le couple copyright +
   bouton ne tient plus sur une ligne et se replie proprement, centré. */
.megga-lang-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* Le déclencheur se range avec le copyright : même famille d'information, même
   encre sourde. Pas de contour — un cadre autour de deux mots dans un pied de
   page fait plus de bruit que le contrôle n'en mérite. Le globe suffit à dire
   ce que c'est ; l'encre pleine, au survol comme à l'ouverture, dit qu'il vit. */
.megga-lang-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--neutral-colors--600);
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s;
}

.megga-lang-button:hover,
.megga-lang-button[aria-expanded='true'] {
  color: var(--neutral-colors--1000);
}

.megga-lang-button svg {
  display: block;
  flex-shrink: 0;
}

/* ── Le menu ───────────────────────────────────────────────────────────────
 *
 * `position: fixed` et posé sur le `body` : le pied de page reçoit un
 * `transform` des animations Webflow, et un `fixed` sous un ancêtre transformé
 * se positionne par rapport à LUI, pas par rapport à la fenêtre. Les
 * coordonnées sont calculées à l'ouverture (cf. `placer()` dans megga-lang.js).
 */
.megga-lang-pop[hidden] {
  display: none;
}

/* La carte est NOIRE, du même noir que la page (`--neutral-colors--100`,
   #030303) : c'est le FILET qui la détache, pas un écart de luminosité.
   ⚠ Le filet de la feuille ne peut pas tenir ce rôle — `--300` (#090909) rend
   1,04:1 sur ce fond, c'est-à-dire rien du tout ; il ne se voyait que sous le
   voile flouté du dialogue d'avant, qui assombrissait tout le reste. D'où un
   blanc translucide, seule valeur qui trace un bord sur du noir. */
.megga-lang-pop {
  position: fixed;
  z-index: 9999;
  min-width: 152px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: var(--neutral-colors--100);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  animation: meggaLangPop 0.16s ease both;
}

.megga-lang-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les lignes n'ont plus de cadre : c'est le survol qui les détache, et l'encre
   qui désigne la langue courante. Quatre rectangles empilés dessinaient une
   grille là où il n'y a qu'une liste. */
.megga-lang-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--neutral-colors--700);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.megga-lang-option:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--neutral-colors--1000);
}

/* Langue courante : l'encre pleine suffit. Les deux mentions d'origine — « Langue
   actuelle » et « Vers l'accueil » — ont été retirées de l'affichage. La seconde
   disait quelque chose de vrai (sur le blog ou les pages légales, la page n'existe
   pas dans l'autre langue et l'on arrive sur son accueil) : elle survit en
   `title`/`aria-label`, sans peser un pixel. */
.megga-lang-option[aria-current='true'] {
  color: var(--neutral-colors--1000);
}

/* Une langue dont les pages n'existent pas encore reste lisible mais inerte —
   mieux vaut l'annoncer que servir un lien mort. */
.megga-lang-option[aria-disabled='true'] {
  cursor: default;
  opacity: 0.4;
}

.megga-lang-option[aria-disabled='true']:hover {
  background: transparent;
  color: var(--neutral-colors--700);
}

/* Le contour du focus est POSÉ, jamais retiré : la vitrine a déjà connu un
   `outline: none` qui rendait la navigation au clavier invisible. */
.megga-lang-button:focus-visible,
.megga-lang-option:focus-visible {
  outline: 2px solid var(--neutral-colors--1000);
  outline-offset: 2px;
}

@keyframes meggaLangPop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@keyframes meggaLangRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .megga-lang-pop {
    animation: none;
  }
}

/* ── Barre de suggestion de langue ─────────────────────────────────────────
 *
 * Apparaît quand le pays du visiteur (détecté au bord, cf. `/api/geo`) désigne
 * une autre langue que celle de la page. Elle SUGGÈRE : elle ne redirige jamais,
 * et n'apparaît pas si l'on n'est pas sûr.
 *
 * `position: fixed` plutôt qu'inséré dans le flux : la barre arrive après le
 * premier rendu, une fois la réponse réseau revenue. Posée dans le flux, elle
 * décalerait la page sous les yeux du visiteur — et sous son curseur.
 *
 * z-index sous le dialogue de langue (9999) : si l'on ouvre le sélecteur
 * complet, il passe devant la suggestion, pas l'inverse.
 */
.megga-lang-suggest {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 16px 20px;
  border: 1px solid var(--neutral-colors--400);
  border-radius: 18px;
  background: var(--neutral-colors--100);
  box-shadow: 0 14px 40px rgba(3, 3, 3, 0.55);
  animation: meggaLangRise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.megga-lang-suggest[hidden] {
  display: none;
}

.megga-lang-suggest__text {
  flex: 1 1 200px;
  margin: 0;
  color: var(--neutral-colors--900);
  font-size: 15px;
  line-height: 1.4;
}

.megga-lang-suggest__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.megga-lang-suggest__go,
.megga-lang-suggest__no {
  padding: 10px 16px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.megga-lang-suggest__go {
  border: 1px solid var(--neutral-colors--1000);
  background: var(--neutral-colors--1000);
  color: var(--neutral-colors--100);
  font-weight: 600;
}

.megga-lang-suggest__go:hover {
  background: var(--neutral-colors--800);
  border-color: var(--neutral-colors--800);
}

.megga-lang-suggest__no {
  border: 1px solid var(--neutral-colors--400);
  background: transparent;
  color: var(--neutral-colors--700);
}

.megga-lang-suggest__no:hover {
  color: var(--neutral-colors--1000);
  border-color: var(--neutral-colors--600);
}

/* Le contour du focus est POSÉ, jamais retiré : la vitrine a déjà connu un
   `outline: none` qui rendait la navigation au clavier invisible. */
.megga-lang-suggest__go:focus-visible,
.megga-lang-suggest__no:focus-visible {
  outline: 2px solid var(--neutral-colors--1000);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .megga-lang-suggest {
    animation: none;
  }
}

@media screen and (max-width: 479px) {
  .megga-lang-suggest {
    bottom: 12px;
    padding: 14px 16px;
  }

  .megga-lang-suggest__actions {
    width: 100%;
  }

  .megga-lang-suggest__go {
    flex: 1 1 auto;
  }
}