/* TMG Conseil - navigation multilingue et correctifs RTL */

/* Polices auto-hébergées sous SIL OFL 1.1. Les notices sont dans /fonts/. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin.woff2?v=85f55a58a31e") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-cyrillic.woff2?v=aebf2ab4a4ce") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2?v=c940764593d0") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-cyrillic.woff2?v=4995a9a43ac6") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2?v=2c32b9b3ee35") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/fonts/noto-sans-arabic.woff2?v=760c804f4cb4") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 10px;
  background: #18181b;
  color: #fff;
  transform: translateY(-150%);
  transition: transform .15s ease;
}

.skip-link:focus { transform: translateY(0); }

.nav-inner { position: relative; }

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line, #e7e5e0);
  border-radius: 999px;
  background: #fff;
  direction: ltr;
}

.lang-switch a,
.lang-switch summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--ink-soft, #3f3f46);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.lang-switch summary::-webkit-details-marker,
.mobile-menu summary::-webkit-details-marker { display: none; }

.lang-switch a:hover,
.lang-switch a:focus-visible,
.lang-switch summary:hover,
.lang-switch summary:focus-visible,
.lang-switch a.active,
.lang-more.active > summary,
.lang-more[open] > summary {
  background: var(--ink, #18181b);
  color: var(--paper, #fafaf9);
}

.lang-switch b { font-weight: 600; }
.lang-more { position: relative; }

.lang-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: grid;
  min-width: 116px;
  padding: 6px;
  border: 1px solid var(--line, #e7e5e0);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(24, 24, 27, .14);
}

.lang-more-menu a { justify-content: flex-start; }
.mobile-menu { display: none; position: relative; }

.mobile-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--line, #e7e5e0);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #18181b);
  cursor: pointer;
  list-style: none;
  font-size: 13px;
}

.mobile-menu > summary span,
.mobile-menu > summary span::before,
.mobile-menu > summary span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.mobile-menu > summary { gap: 8px; }
.mobile-menu > summary span::before { transform: translateY(-5px); }
.mobile-menu > summary span::after { transform: translateY(3.5px); }

.mobile-menu[open] > summary {
  background: var(--ink, #18181b);
  color: var(--paper, #fafaf9);
}

.mobile-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 110;
  width: min(330px, calc(100vw - 40px));
  padding: 16px;
  border: 1px solid var(--line, #e7e5e0);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(24, 24, 27, .18);
}

.mobile-menu-links { display: grid; gap: 3px; }
.mobile-menu-links a { padding: 10px 12px; border-radius: 10px; }
.mobile-menu-links a:hover { background: var(--tile-ash, #e7e5e0); }

.mobile-menu-language-title {
  margin: 14px 0 8px;
  color: var(--muted, #71717a);
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mobile-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  direction: ltr;
}

.mobile-lang-grid a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line, #e7e5e0);
  border-radius: 10px;
  font-size: 12px;
}

.mobile-lang-grid a.active {
  border-color: var(--ink, #18181b);
  background: var(--ink, #18181b);
  color: var(--paper, #fafaf9);
}

.mobile-menu-cta {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--accent, #dd6b4d);
  color: #fff;
  font-weight: 600;
}

/* Les niveaux sont normalisés dans le HTML sans modifier le rendu Bento. */
.tile h2 {
  margin: 16px 0 0;
  font-family: var(--ff-display, "Inter", system-ui, sans-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.cell h3 {
  margin: 0;
  font-family: var(--ff-display, "Inter", system-ui, sans-serif);
  font-weight: 500;
}

html[lang="ru"] {
  --ff-display: "Inter", system-ui, sans-serif;
}

html[dir="rtl"] {
  --ff-display: "Noto Sans Arabic", "Inter", system-ui, sans-serif;
  --ff-body: "Noto Sans Arabic", "Inter", system-ui, sans-serif;
  --ff-mono: "Noto Sans Arabic", "JetBrains Mono", ui-monospace, monospace;
}

html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] :where(h1, h2, h3, h4, p, a, button, summary, label) { letter-spacing: normal; }
html[dir="rtl"] .lang-switch,
html[dir="rtl"] .mobile-lang-grid { direction: ltr; }
html[dir="rtl"] .lang-more-menu,
html[dir="rtl"] .mobile-menu-panel { right: auto; left: 0; }
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }

/* Directional glyphs are localized in the Arabic HTML. Mirroring their
   containers would also mirror adjacent Arabic text and reverse the glyphs. */
html[dir="rtl"] .btn-ghost:hover .arr { transform: translateX(-4px); }

/* Preserve the terracotta palette while keeping readable text WCAG AA. */
.tile-accent .tile-foot,
.cell-5,
.cell-5 .ix,
.cell-5 p {
  color: var(--ink, #18181b) !important;
}

.contact-tile.accent,
.contact-tile.accent .ix,
.contact-tile.accent h3,
.contact-tile.accent p,
.contact-tile.accent .step-line .t,
.contact-tile.accent .step-line .t b {
  color: var(--ink, #18181b) !important;
}

.contact-tile.accent .step-line .n {
  background: var(--ink, #18181b) !important;
  color: var(--paper, #fafaf9) !important;
}

.tile-accent .tile-foot .arrow {
  background: var(--ink, #18181b) !important;
  color: var(--paper, #fafaf9) !important;
}

.cell-4 .glyph {
  color: #f3dac8 !important;
}

.bignum::before {
  content: attr(data-number);
}

.footer .f-cta,
footer a[href*="/rdv/"][style*="background"] {
  color: var(--ink, #18181b) !important;
}

.field label .opt {
  color: #62626b !important;
}

@media (max-width: 1180px) {
  .lang-switch a,
  .lang-switch summary { padding-inline: 6px; }
  .lang-switch a span { display: none; }
}

@media (max-width: 960px) {
  .lang-switch { display: none; }
  .mobile-menu { display: block; }
  .nav-inner { grid-template-columns: auto auto !important; }
}

@media (max-width: 640px) {
  .nav-actions > .cta { display: none !important; }
  .mobile-menu-panel { position: fixed; top: 76px; right: 20px; }
  html[dir="rtl"] .mobile-menu-panel { right: auto; left: 20px; }
}

@media (max-width: 390px) {
  .logo > span:last-child { display: none; }
}