/* site/i18n.css — sélecteur de langue et corrections RTL pour musicsouslecapot.com. */
/* Ajouté par apply-index-i18n.mjs ; ne pas inclure dans style.css (fusion après GO Prototypes). */

/* ── Sélecteur de langue ──────────────────────────────────────────────────── */
/* Même balisage et mêmes variables que garage.css, adaptés au masthead de l'accueil. */
.lang {
  display: flex;
  gap: .25rem;
  align-items: center;
  flex-shrink: 0;
  margin-inline-start: auto; /* pousse vers la droite en LTR, vers la gauche en RTL */
}
.lang button {
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: .25rem;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  letter-spacing: .04em;
  line-height: 1;
  opacity: .65;
  padding: .25rem .45rem;
  transition: opacity .15s, border-color .15s;
}
.lang button:hover,
.lang button:focus-visible {
  opacity: 1;
  border-color: currentColor;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.lang button[aria-pressed="true"] {
  opacity: 1;
  border-color: currentColor;
  font-weight: 700;
}
/* Police arabe — reprend la pile de garage.css. */
:root { --arabic: 'Geeza Pro', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Segoe UI', 'Tahoma', sans-serif; } /* même pile que garage.css */
html[lang="ar"] .lang button[data-lang="ar"],
html[lang="ar"] body {
  font-family: var(--arabic);
}

/* ── Masthead responsive avec le sélecteur de langue ────────────────────────── */
/* Sur mobile, aucun lien du menu n'est masqué en plus de ce que fait style.css :
   le sélecteur de langue passe sur sa propre ligne et le menu peut revenir à la ligne. */
/* Sélecteur de langue : sous le menu, à droite, dans toutes les langues (le menu reste à droite en RTL). */
.masthead > .lang { position: absolute; top: 84px; right: 6%; z-index: 4; margin: 0; pointer-events: auto; } /* le bandeau est pointer-events:none (brand-lights.css) */
@media (max-width: 700px) {
  /* Le logo et les voitures descendent de 34 px pour laisser la place au sélecteur. */
  .masthead > .lang { top: 72px; }
  .masthead .brand-showcase { top: 134px; }
  .masthead { min-height: 434px; }
  .hero-copy { padding-top: 454px; }
}

/* ── Corrections RTL pour l'accueil (index.html) ─────────────────────────── */
/* Les propriétés logiques (margin-inline, padding-inline, inset-inline…)
   sont déjà correctes si présentes. On corrige ici les propriétés physiques
   restantes dans style.css qui cassent visuellement en arabe. */
html[dir="rtl"] {
  body { text-align: start; }
  /* Platine : géométrie fixe, commandes et lectures restent de gauche à droite. */
  .turntable-photo,
  .deck-readouts { direction: ltr; }
  #deck-speed,
  #deck-light-name { unicode-bidi: isolate; }
  footer { text-align: center; }
  /* Années « 1920–40 » : chiffres et tiret de gauche à droite. */
  .era-list .year { direction: ltr; unicode-bidi: isolate; text-align: end; }
  /* Boutons de réservation : le libellé arabe plus long peut passer à la ligne. */
  .reservation > .button { white-space: normal; }
}
/* Les lettres animées du grand logo débordent déjà légèrement à droite en FR (invisible).
   En RTL, ce débordement décale l'origine de la page : on le coupe au niveau du bandeau,
   sans créer de zone de défilement (overflow-x: clip). */
html[dir="rtl"] .masthead { overflow-x: clip; }

/* Logo latin « music / sous le capot » : toujours de gauche à droite, quelle que soit la langue. */
.wordmark { direction: ltr; unicode-bidi: isolate; }
/* Numéros de téléphone : toujours de gauche à droite. */
.footer-phones a[href^="tel"], .tel { unicode-bidi: isolate; direction: ltr; }

/* ── Police arabe sur tout le body en ar ────────────────────────────────────── */
html[lang="ar"] body {
  font-family: var(--arabic);
}

/* Note « vidéo en français » : visible seulement en anglais et en arabe. */
html:not([lang="fr"]) .guide-video-note[hidden] { display: block; }
/* Les titres utilisent une police latine à empattements : en arabe, même pile que le texte. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: var(--arabic); letter-spacing: 0; }

/* Accueil en arabe, grand écran : la photo passe à gauche et le texte garde un fond sombre à droite. */
@media (min-width: 701px) {
  html[dir="rtl"] .car-image { inset: 0 auto 0 0; object-position: 52% center; }
  html[dir="rtl"] .hero:before {
    background: linear-gradient(270deg, #071216 3%, #071216ee 22%, #0712169e 42%, #07121612 76%),
                linear-gradient(0deg, #091519 0%, transparent 30%, transparent 67%, #0610149e);
  }
}

/* Mention « Billets également sur ticket.ma » (sans lien : la page de la soirée n'existe pas encore). */
.hero-copy .ticket-note { margin: -8px 0 14px; font-size: 13px; color: #e5dece; }
.reservation .ticket-note { margin-top: 4px; }

/* V39 (26/09/2026) : menu à six entrées (ajout « Musée ») — sur petit écran, le menu passe sur deux lignes centrées
   au lieu de déborder à gauche ; le choix de langue et les boutons de voitures descendent d'une ligne (44 px). */
@media (max-width: 480px) {
  .masthead nav { left: 12px; right: 12px; width: auto; flex-wrap: wrap; justify-content: center; column-gap: 14px; row-gap: 0; }
  .masthead > .lang { top: 116px; }
  .masthead .brand-showcase { top: 178px; }
  .masthead { min-height: 478px; }
}