/* ==========================================================================
   DRAY & FILS — Langues : menu des langues, polices de secours par écriture, pages de droite à gauche
   Chargée après style.css (build_langues.py la pose avant </head>). Sur le nuancier, qui a ses propres couleurs
   (--paper, --ink, --rule…), le menu prend celles-ci.
   ========================================================================== */

/* ---------- Menu des langues : un bouton rond (code de la langue), la liste des langues par leur nom ---------- */
.langues {
  --lg-fond: var(--surface, var(--paper-2, #1b1915));
  --lg-texte: var(--text, var(--ink, #efe9de));
  --lg-texte-2: var(--text-2, var(--ink-2, #b3ab9d));
  --lg-texte-3: var(--text-3, var(--ink-3, #857d70));
  --lg-trait: var(--line, var(--rule, rgba(239, 233, 222, 0.1)));
  --lg-trait-2: var(--line-2, var(--rule-2, rgba(239, 233, 222, 0.22)));
  --lg-accent: var(--accent, #c9a86a);
  --lg-ease: var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
  position: relative;
  flex: none;
}
.langues__btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--lg-texte-2); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--lg-trait-2);
  font: 600 11px/1 var(--f-sans, "Instrument Sans", "Helvetica Neue", system-ui, sans-serif); letter-spacing: 0.08em;
  transition: color 0.3s, box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.langues__btn:hover, .langues__btn[aria-expanded="true"] { color: var(--lg-accent); box-shadow: inset 0 0 0 1px var(--lg-accent); }
.langues__btn:focus-visible { outline: 1px solid var(--lg-accent); outline-offset: 3px; }
.langues__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.langues__panel {
  position: absolute; z-index: 60; top: calc(100% + 12px); inset-inline-end: 0;
  width: min(440px, calc(100vw - 32px)); padding: 16px 8px 8px; border-radius: 2px;
  background: var(--lg-fond); color: var(--lg-texte); text-align: start;
  box-shadow: 0 0 0 1px var(--lg-trait-2), 0 28px 60px -28px rgba(0, 0, 0, 0.6);
}
.langues__panel:not([hidden]) { animation: langues-bas 0.28s var(--lg-ease) both; }
@keyframes langues-bas { from { opacity: 0; transform: translateY(-6px); } }
@keyframes langues-haut { from { opacity: 0; transform: translateY(6px); } }
.langues__titre {
  margin: 0 8px 8px; padding: 0 4px 12px; border-bottom: 1px solid var(--lg-trait);
  font: 600 11px/1.2 var(--f-sans, "Instrument Sans", "Helvetica Neue", system-ui, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lg-texte-3);
}
.langues__liste {
  position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px;
  margin: 0; padding: 0; list-style: none;
  max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--lg-trait-2) transparent;
}
.langues__liste a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 40px; padding: 10px 12px; border-radius: 2px;
  color: var(--lg-texte-2); text-decoration: none; border: 0;
  font-family: var(--f-sans, "Instrument Sans", "Helvetica Neue", system-ui, sans-serif); font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none;
  transition: color 0.2s, background-color 0.2s;
}
.langues__liste a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langues__liste a small { flex: none; font-family: var(--f-sans, "Instrument Sans", sans-serif); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--lg-texte-3); }
.langues__liste a:hover, .langues__liste a:focus-visible { color: var(--lg-texte); background: color-mix(in srgb, var(--lg-accent) 11%, transparent); outline: none; }
.langues__liste a:focus-visible { box-shadow: inset 0 0 0 1px var(--lg-accent); }
.langues__liste a[aria-current], .langues__liste a[aria-current] small { color: var(--lg-accent); }
.langues__liste a[aria-current] span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-end: 9px; border-radius: 50%; background: currentColor; vertical-align: 0.15em; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .langues__liste a:hover, .langues__liste a:focus-visible { background: var(--lg-trait); }
}

/* en-tête du site : la liste s'aligne sur la marge de l'en-tête (à droite, ou à gauche de droite à gauche) */
.site-header .langues { position: static; }
.site-header .langues__panel { top: calc(100% + 6px); inset-inline-end: var(--gutter, 20px); }
.site-header > .langues { margin-inline-start: auto; } /* page d'erreur, mentions légales : avant le bouton d'appel */
@media (max-width: 720px) {
  .header__tools .langues { display: none; } /* téléphone : le menu des langues est dans le menu ☰ */
}
/* menu mobile : la liste s'ouvre vers le haut, sur toute la largeur du pied du menu */
.menu__foot { position: relative; }
.menu__foot .langues { position: static; }
.menu__foot .langues__btn { width: 44px; height: 44px; font-size: 12px; }
.menu__foot .langues__panel { top: auto; bottom: calc(100% + 14px); inset-inline: 0; width: auto; }
.menu__foot .langues__panel:not([hidden]) { animation-name: langues-haut; }
.menu__foot .langues__liste { max-height: min(54vh, 460px); }
/* barre d'outils du nuancier : bouton carré comme « PDF » et « Imprimer » */
.toolbar .langues { position: static; }
.toolbar .langues__btn { width: auto; min-width: 48px; height: 38px; padding: 0 14px; border-radius: 2px; color: var(--lg-texte); font-size: 12px; letter-spacing: 0.1em; }
.toolbar .langues__panel { top: calc(100% + 1px); inset-inline-end: clamp(12px, 4vw, 40px); }
@media print { .langues { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .langues__panel:not([hidden]) { animation: none; } }

/* ---------- Polices de secours : Bodoni Moda et Instrument Sans n'ont que l'alphabet latin ----------
   Pour chaque écriture, des polices système d'Apple (macOS, iOS), d'Android (Noto) et de Windows ; les lettres latines
   (Dray & Fils, communes, chiffres) restent dans les polices du site. */
:lang(ru), :lang(uk), :lang(bg), :lang(sr), :lang(mk), :lang(be) {
  --f-display: "Bodoni Moda", "PT Serif", Georgia, "Noto Serif", Cambria, "Times New Roman", serif;
  --f-sans: "Instrument Sans", "PT Sans", "Helvetica Neue", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
:lang(el) {
  --f-display: "Bodoni Moda", Georgia, "Noto Serif", Cambria, "Times New Roman", serif;
  --f-sans: "Instrument Sans", "Helvetica Neue", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
:lang(ar) {
  --f-display: "Bodoni Moda", "Noto Naskh Arabic", "Geeza Pro", "Sakkal Majalla", "Times New Roman", serif;
  --f-sans: "Instrument Sans", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
:lang(fa) {
  --f-display: "Bodoni Moda", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, serif;
  --f-sans: "Instrument Sans", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
:lang(he) {
  --f-display: "Bodoni Moda", "New Peninim MT", "Noto Serif Hebrew", David, "Times New Roman", serif;
  --f-sans: "Instrument Sans", "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
}
:lang(hi), :lang(mr), :lang(ne) {
  --f-display: "Bodoni Moda", "ITF Devanagari", "Kohinoor Devanagari", "Noto Serif Devanagari", "Nirmala UI", Mangal, serif;
  --f-sans: "Instrument Sans", "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif;
}
:lang(th) {
  --f-display: "Bodoni Moda", "Sukhumvit Set", Thonburi, "Noto Serif Thai", "Leelawadee UI", Tahoma, serif;
  --f-sans: "Instrument Sans", "Sukhumvit Set", Thonburi, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
}
:lang(zh) {
  --f-display: "Bodoni Moda", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", SimSun, serif;
  --f-sans: "Instrument Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
}
:lang(zh-TW), :lang(zh-HK), :lang(zh-Hant) {
  --f-display: "Bodoni Moda", "Songti TC", "Noto Serif CJK TC", "Noto Serif TC", PMingLiU, serif;
  --f-sans: "Instrument Sans", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", sans-serif;
}
:lang(ja) {
  --f-display: "Bodoni Moda", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif CJK JP", "Noto Serif JP", serif;
  --f-sans: "Instrument Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
}
:lang(ko) {
  --f-display: "Bodoni Moda", AppleMyungjo, "Noto Serif CJK KR", "Noto Serif KR", Batang, serif;
  --f-sans: "Instrument Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
}
/* vietnamien : ses voyelles à deux accents manquent aux polices du site ; tout le texte en police système (le nom reste en Bodoni) */
:lang(vi) {
  --f-display: ui-serif, "Noto Serif", Cambria, "Times New Roman", serif;
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
:lang(vi) :is(.brand__name, .footer__name, .loader__name, .toolbar__title) { font-family: "Bodoni Moda", Didot, Georgia, serif; }

/* écritures sans italique : les mots mis en valeur gardent la couleur, sans pencher */
:is(:lang(ar), :lang(fa), :lang(he), :lang(hi), :lang(th), :lang(zh), :lang(ja), :lang(ko)) em { font-style: normal; }
/* lettres liées (arabe, persan) : ni espacement ni capitales, qui les séparent ; hébreu : pas de capitales.
   Le nom Dray & Fils, en lettres latines, garde son dessin. */
:is(:lang(ar), :lang(fa)) :not(.brand__name, .brand__name *, .brand__sub, .footer__name, .footer__name *, .loader__name, .loader__name *, .loader__place, .toolbar__title, .toolbar__title *, .langues__btn, .langues__liste small) { letter-spacing: 0 !important; text-transform: none !important; }
:lang(he) :not(.brand__name, .brand__name *, .brand__sub, .footer__name, .footer__name *, .loader__name, .loader__name *, .loader__place, .toolbar__title, .toolbar__title *, .langues__btn, .langues__liste small) { text-transform: none !important; }
:is(:lang(hi), :lang(th)) :is(.label, .btn, .nav a, .valve__name, .valve__sub, .field > span, .field legend, .footer h2, .callbar a, .pnet__k, .hero__pre) { letter-spacing: 0.02em; }
/* écritures plus hautes que le latin : des lignes moins serrées */
:is(:lang(ar), :lang(fa), :lang(hi), :lang(th)) :is(.hero__title, .title, h1, h2, h3, .menu ol a, .ville-links a, .tile__meta h3, .product__meta h3, .intro h2, .cover h1) { line-height: 1.38; }
:is(:lang(ar), :lang(fa), :lang(hi), :lang(th)) body { line-height: 1.8; }
:is(:lang(zh), :lang(ja), :lang(ko), :lang(he)) :is(.hero__title, .title, .intro h2, .cover h1) { line-height: 1.22; }
:lang(ja) { line-break: strict; }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- De droite à gauche : arabe, hébreu, persan ----------
   Les rangées (flex) et les grilles se retournent d'elles-mêmes avec dir="rtl" ; ici, ce que style.css, ville.css et le
   nuancier placent à gauche ou à droite. La conduite décorative reste à gauche : ses raccords ne vont pas jusqu'aux textes. */
/* hors écran vers la droite : de droite à gauche, ce qui dépasse à gauche agrandirait la page (le téléphone dézoome) */
[dir="rtl"] .hp { left: auto; right: -9999px; }
/* « DRAY & FILS » du chargement, lettre à lettre : se lit de gauche à droite */
[dir="rtl"] .loader__brand { direction: ltr; }
[dir="rtl"] .pipeline { direction: ltr; }
[dir="rtl"] .joint__branch, [dir="rtl"] .joint__tag { display: none; }
[dir="rtl"] svg { direction: ltr; } /* carte, schéma, dureté de l'eau : libellés placés pour la lecture de gauche à droite */
[dir="rtl"] svg text[text-anchor="middle"] { direction: rtl; } /* centrés : « 8 à 15 °f » traduit se lit de droite à gauche */
[dir="rtl"] a[href^="tel:"], [dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .form input[type="tel"], [dir="rtl"] .form input[type="email"] { direction: ltr; text-align: right; }
[dir="rtl"] .skip-link { left: auto; right: 16px; }
/* flèches « → » dessinées : vers la gauche (scale, à part de transform : le survol les fait toujours avancer) */
[dir="rtl"] svg:has(> use[href="#i-arrow"]) { scale: -1 1; }
/* ouverture : le texte reste à gauche, le logo 3D occupe la colonne de droite */
@media (min-width: 980px) {
  [dir="rtl"] .hero__content, [dir="rtl"] .hero__index .manifold { margin-inline-start: auto; }
}
/* avant / après : le curseur se lit de gauche à droite (main.js le place depuis la gauche) */
[dir="rtl"] .ba { direction: ltr; }
[dir="rtl"] .ba__tag { direction: rtl; }
[dir="rtl"] .pnet__readout { border-left: 0; border-right: 2px solid var(--water); }
[dir="rtl"] .pnet.is-drawn .pnet__name::after { content: "◂"; margin-left: 0; margin-right: 8px; }
[dir="rtl"] .pnet__source .town-btn, [dir="rtl"] .pnet--down li .town-btn { text-align: right; }
[dir="rtl"] .drop__count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .thumb button { right: auto; left: 6px; }
[dir="rtl"] .panel__media figcaption { left: auto; right: 0; }
[dir="rtl"] .panel__media figcaption span { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .galerie__item figcaption { left: auto; right: 0; }
[dir="rtl"] .chantier__progress i { transform-origin: right center; }
@media (max-width: 979px) {
  [dir="rtl"] .faq__a p { padding-left: 0; }
}
@media (max-width: 720px) {
  [dir="rtl"] .callbar a + a { border-left: 0; border-right: 1px solid var(--line); }
}
/* pages communes (ville.css) */
[dir="rtl"] .crumbs li + li::before { content: "‹"; margin-right: 0; margin-left: 10px; }
[dir="rtl"] .ville-tip { border-left: 0; border-right: 2px solid var(--water); }
[dir="rtl"] .ville-tip li { padding-left: 0; padding-right: 40px; }
[dir="rtl"] .ville-tip li::before { left: auto; right: 0; }
@media (min-width: 721px) {
  [dir="rtl"] .route__pipe { right: auto; left: 50%; }
  [dir="rtl"] .route__pipe i::after { transform-origin: 100% 50%; animation-direction: normal, reverse; }
}
@media (max-width: 720px) {
  [dir="rtl"] .route__line li { text-align: right; }
  [dir="rtl"] .route__pipe { left: auto; right: 6px; }
  [dir="rtl"] .route .is-here .route__pipe { left: auto; right: 9px; }
  [dir="rtl"] .route__name { margin: 0 16px 0 0; }
  [dir="rtl"] .route__name small { margin: 0 8px 0 0; }
}
/* nuancier */
[dir="rtl"] .tile__ref { left: auto; right: 10px; }

/* De droite à gauche, ce qui dépasse à gauche (clés et reflets des raccords de la conduite) se fait défiler :
   la page ne doit jamais défiler en largeur */
[dir="rtl"] body { overflow-x: hidden; }
@supports (overflow: clip) { [dir="rtl"] body { overflow-x: clip; } }