/* =========================================================================
   WISY SAFETY — Sélecteur de langue (design pro) + adaptations RTL (arabe)
   Utilise les tokens de la charte (var(--epinette)…) définis dans chaque page.
   Chargé sur toutes les pages via <link rel="stylesheet" href="css/i18n.css">.
   ========================================================================= */

/* ---------- Placement : après « Contact / S'inscrire », à l'extrême droite ---------- */
.main-inner .header-actions { order: 2; }
.main-inner .lang-switch    { order: 3; }
.main-inner .nav-toggle     { order: 4; }

/* ---------- Bouton (pastille compacte : globe + code + chevron) ---------- */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-titre); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  color: var(--noir-jais); background: transparent;
  border: 1.5px solid var(--granit-20); border-radius: var(--radius-pill);
  padding: .68rem .8rem; cursor: pointer; line-height: 1;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.lang-btn:hover, .lang-btn:focus-visible,
.lang-switch.is-open .lang-btn {
  color: var(--epinette); border-color: var(--epinette); background: var(--brume-08);
}
.lang-btn__globe { width: 17px; height: 17px; flex-shrink: 0; color: var(--epinette); }
.lang-btn__name  { display: none; }          /* forme compacte : on affiche le code */
.lang-code       { display: inline; }
.lang-caret      { width: .6em; height: .6em; opacity: .6; transition: transform var(--t-fast) var(--ease); }
.lang-switch.is-open .lang-caret { transform: rotate(180deg); }

/* ---------- Menu déroulant ---------- */
.lang-menu {
  position: absolute; top: calc(100% + .55rem); right: 0; min-width: 232px;
  background: var(--creme); border: 1px solid var(--granit-12);
  border-radius: var(--radius); box-shadow: var(--shadow-drop); padding: .4rem;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top right;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out),
              visibility var(--t-fast);
  z-index: 1002; max-height: min(72vh, 460px); overflow: auto;
}
.lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }

.lang-menu a {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .7rem; border-radius: var(--radius-sm);
  font-family: var(--font-titre); font-weight: 500; font-size: .93rem; color: var(--noir-jais);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--brume-14); color: var(--epinette); }
/* Langue active : léger fond + coche (plus raffiné qu'un aplat plein) */
.lang-menu a[aria-current="true"] { background: var(--brume-08); color: var(--epinette); font-weight: 600; }
.lang-menu a::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; opacity: 0;
  background: no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6F64' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.lang-menu a[aria-current="true"]::before { opacity: 1; }
.lang-menu a .lc {
  margin-inline-start: auto; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--granit);
}
.lang-menu a[aria-current="true"] .lc { color: var(--epinette); }

/* ---------- Version compacte garantie dans le header + placement mobile ---------- */
@media (max-width: 1080px) {
  .main-inner .lang-switch { margin-inline-start: auto; margin-inline-end: .25rem; }
}

/* ---------- Sélecteur dans le panneau mobile (liste ouverte) ---------- */
.m-lang { margin-top: .75rem; border-top: 1px solid var(--granit-20); padding-top: 1rem; }
.m-lang .lang-switch { width: 100%; }
.m-lang .lang-menu {
  position: static; opacity: 1; visibility: visible; transform: none;
  box-shadow: none; border: none; background: transparent; padding: .5rem 0 0; max-height: none;
}
.m-lang .lang-menu a { padding: .75rem .5rem; }

/* ---------- RTL (arabe) ---------- */
[dir="rtl"] .util-contacts { margin-left: 0; margin-right: auto; }
[dir="rtl"] .main-inner .lang-switch { margin-inline-start: auto; }
[dir="rtl"] .lang-menu { right: auto; left: 0; transform-origin: top left; }
[dir="rtl"] .fo-hero::before { right: auto; left: -150px; }
[dir="rtl"] .fo-hero::after { left: auto; right: -140px; }
[dir="rtl"] .site-footer::before { left: auto; right: -120px; }
[dir="rtl"] .site-footer::after { right: auto; left: -80px; }
[dir="rtl"] .f-cta::before { left: auto; right: 0; }
[dir="rtl"] .f-col__title::after { left: auto; right: 0; }
[dir="rtl"] .m-panel { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .m-panel.is-open { transform: translateX(0); }
/* Flèches directionnelles : miroir horizontal */
[dir="rtl"] .fo-card__cta svg,
[dir="rtl"] .btn__arrow,
[dir="rtl"] .chero__link svg,
[dir="rtl"] .map-link span,
[dir="rtl"] .gt-card__btn span { display: inline-block; transform: scaleX(-1); }

/* Numéros de téléphone et adresses e-mail : toujours lus de gauche à droite, isolés du texte arabe
   (sans cela « +32 2 318 86 59 » s'affiche « 59 86 318 2 32+ »). */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }

/* Bandeau et centre de préférences des cookies (css/cookie-consent.css) : miroir en arabe */
[dir="rtl"] .wcc-banner__actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .wcc-switch__thumb { left: auto; right: 3px; }
[dir="rtl"] .wcc-switch input:checked + .wcc-switch__track .wcc-switch__thumb { transform: translateX(-18px); }
@media (max-width: 900px) { [dir="rtl"] .wcc-banner__actions { margin-right: 0; } }

/* ---------- Libellés plus longs selon la langue : jamais de débordement sur mobile ---------- */
@media (max-width: 640px) {
  /* un bouton dont le libellé est long passe à la ligne au lieu de dépasser de l'écran */
  body .btn { white-space: normal; text-align: center; }
  /* un mot surligné dans un titre (« experts certifiés ») peut passer à la ligne */
  body .team-head h2 .mark, body .chero__title .mark, body .gt__title .mark { white-space: normal; }
}

/* Mots longs (allemand, néerlandais, bulgare…) : césure automatique des titres et boutons plutôt que débordement.
   Le français et l'anglais gardent leur mise en page d'origine. */
html[lang]:not([lang="fr"]):not([lang="en"]) :is(h1, h2, h3, h4, .btn) { overflow-wrap: break-word; hyphens: auto; }

/* Alignements « à gauche » écrits en dur dans le CSS des pages : à droite en arabe */
[dir="rtl"] .m-nav > li > a, [dir="rtl"] .m-acc__trigger, [dir="rtl"] .tcard__hab,
[dir="rtl"] .faqc-search, [dir="rtl"] .faqc-way, [dir="rtl"] .faqc-cat, [dir="rtl"] .faqc-trigger, [dir="rtl"] .faqc-ask__ex,
[dir="rtl"] .beps-acc__btn, [dir="rtl"] .nac-acc__btn { text-align: right; }