/**
 * Template meiandhao — Design premium « Sino-European Legal Counsel »
 * (C) 2026 MEI & HAO Sàrl
 *
 * Thème sombre par défaut, clair via :root[data-mh-theme="light"].
 * Aucun texte de contenu ici : uniquement la mise en forme.
 * Classes utilitaires .mh-* réutilisables dans le HTML des articles.
 */

/* ====================================================================
   1. THÈME — variables (sombre par défaut)
==================================================================== */
:root {
  --mh-bg: #080808;
  --mh-bg-2: #111111;
  --mh-bg-3: #1a1a1a;
  --mh-surface: rgba(201,168,76,.035);
  --mh-text: #E7E3DC;
  --mh-text-2: #CBC6BD;
  --mh-strong: #FFFFFF;
  --mh-muted: #A49E95;
  --mh-gold: #C9A84C;
  --mh-gold-light: #E2CC8F;
  --mh-gold-dark: #8B6914;
  --mh-border: rgba(201,168,76,.18);
  --mh-border-2: rgba(201,168,76,.10);
  --mh-header-bg: rgba(8,8,8,.95);
  --mh-card-grad: linear-gradient(145deg,rgba(201,168,76,.08) 0%,rgba(8,8,8,.9) 100%);

  --mh-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mh-cjk: 'Noto Serif SC', 'Songti SC', serif;
  --mh-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mh-maxw: 1280px;
  --mh-edge: max(40px, calc((100% - var(--mh-maxw)) / 2));
}

:root[data-mh-theme="light"] {
  --mh-bg: #F2EEE6;
  --mh-bg-2: #FBF8F1;
  --mh-bg-3: #FFFFFF;
  --mh-surface: rgba(139,105,20,.05);
  --mh-text: #2A251F;
  --mh-text-2: #47433C;
  --mh-strong: #0C0B09;
  --mh-muted: #665F57;
  --mh-gold: #9A7B2E;
  --mh-gold-light: #B08F3C;
  --mh-gold-dark: #6E5410;
  --mh-border: rgba(139,105,20,.22);
  --mh-border-2: rgba(139,105,20,.12);
  --mh-header-bg: rgba(242,238,230,.96);
  --mh-card-grad: linear-gradient(145deg,rgba(154,123,46,.10) 0%,rgba(251,248,241,.6) 100%);
}

/* ====================================================================
   2. BASE
==================================================================== */
/* Alias des variables Cassiopeia sur le thème (pour qu'elles suivent la bascule) */
:root {
  --body-bg: var(--mh-bg);
  --body-color: var(--mh-text);
  --link-color: var(--mh-gold);
  --link-hover-color: var(--mh-gold-light);
}


body {
  background: var(--mh-bg) !important;
  color: var(--mh-text);
  font-family: var(--mh-sans);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}
/* Lisibilité : le chinois en serif fin est peu lisible → graisse renforcée */
:lang(zh) p, html[lang^="zh"] p, :lang(zh) li, html[lang^="zh"] li,
:lang(zh) .mh-lead, html[lang^="zh"] .mh-lead { font-weight: 500; letter-spacing: .3px; }
.site-grid, .container-main, main, .container-component { background: var(--mh-bg) !important; }

h1,h2,h3,h4 { font-family: var(--mh-serif); color: var(--mh-strong); font-weight: 300; line-height: 1.15; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4,
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { font-family: var(--mh-cjk); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: var(--mh-gold); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--mh-gold-light); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--mh-bg); }
::-webkit-scrollbar-thumb { background: var(--mh-gold-dark); }

/* ====================================================================
   3. EN-TÊTE / NAVIGATION (structure Cassiopeia)
==================================================================== */
/* En-tête FIXE façon mockup : transparent au-dessus du hero, fond plein au défilement */
.container-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease,
              -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease, padding .4s ease;
}
.container-header.mh-scrolled {
  background: var(--mh-header-bg);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom-color: var(--mh-border);
}
/* Décale le contenu sous l'en-tête fixe ; le hero d'accueil remonte derrière lui */
.site-grid { padding-top: var(--mh-header-h, 116px); }
.com-content-article__body > .mh-hero:first-child { margin-top: calc(-1 * var(--mh-header-h, 116px)); }
.grid-child.container-nav, .container-header .grid-child { background: transparent; }

.brand-title, .brand-title a, .container-header .logo, .site-title a {
  font-family: var(--mh-serif);
  color: var(--mh-gold) !important;
  letter-spacing: 5px; text-transform: uppercase; font-weight: 400;
}
.site-description { color: var(--mh-muted); font-style: italic; letter-spacing: 2px; }

/* Liens du menu principal */
.mod-menu > li > a, .navbar .nav-item > .nav-link, .container-header .mod-menu a,
.mod-menu .mod-menu__heading {
  color: var(--mh-text-2);
  font-size: .82rem; letter-spacing: 2.3px; text-transform: uppercase; font-weight: 500;
  padding: .5rem .2rem; position: relative;
}
.mod-menu > li > a::after, .navbar .nav-item > .nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--mh-gold); transition: width .3s ease;
}
.mod-menu > li > a:hover, .navbar .nav-item > .nav-link:hover,
.mod-menu > li.current > a, .mod-menu > li.active > a,
.mod-menu > li.parent:hover .mod-menu__heading { color: var(--mh-gold); }
.mod-menu > li > a:hover::after,
.mod-menu > li.current > a::after, .mod-menu > li.active > a::after { width: 100%; }

/* En-tête horizontal façon mockup : barre langues en haut, logo à gauche + menu à droite */
.container-header { display: flex; flex-wrap: wrap; align-items: center; padding: 0 48px; }
.container-header > .container-topbar { flex: 0 0 100%; display: flex; justify-content: flex-end; align-items: center; padding: 8px 0 7px; }
.container-header > .grid-child:not(.container-nav) { flex: 0 0 auto; padding: 14px 0; }
.container-header > .container-nav { flex: 1 1 auto; display: flex; justify-content: flex-end; padding: 14px 0; }
.container-header > .grid-child, .container-header > .container-topbar { transition: padding .4s ease; }
.container-header.mh-scrolled > .grid-child:not(.container-nav),
.container-header.mh-scrolled > .container-nav { padding: 9px 0; }
.container-header.mh-scrolled > .container-topbar { padding: 5px 0 4px; }
.mod-menu.nav, .container-nav .mod-menu { display: flex; flex-wrap: wrap; gap: 34px; align-items: center; margin: 0; padding: 0; }
.container-nav .mod-menu > li { list-style: none; margin: 0; }
/* ── Sous-menu déroulant (items avec enfants) ─────────────────────── */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
/* Le li parent reste en flux inline (comme ses voisins) pour que le lien et son
   soulignement gardent exactement la même géométrie que les autres items. */
.container-nav .mod-menu > li.parent { position: relative; white-space: nowrap; }
.mod-menu__toggle-sub {
  background: none; border: 0; padding: 2px; margin: 0 0 0 6px; cursor: pointer;
  color: var(--mh-text-2); display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; transition: color .25s;
}
.mod-menu__toggle-sub:hover { color: var(--mh-gold); }
/* Caret dessiné en CSS (indépendant de la police d'icônes du parent) */
.mod-menu__toggle-sub .icon-chevron-down::before { content: none; }
.mod-menu__toggle-sub .icon-chevron-down {
  display: block; width: 8px; height: 8px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s, margin-top .25s;
}
.container-nav .mod-menu > li.parent:hover .icon-chevron-down,
.mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down { transform: rotate(225deg); margin-top: 4px; }
.container-nav .mod-menu .mod-menu__sub {
  display: block; /* force l'affichage : bat la règle Joomla :where([aria-hidden]) display:none ; la visibilité est pilotée par l'opacité (animable) */
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: max-content; margin: 0; padding: 8px 0; list-style: none;
  background: var(--mh-header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--mh-border); border-top: 2px solid var(--mh-gold); border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35); z-index: 60;
  /* Apparition fluide : fondu + léger glissement (au lieu d'un display sec) */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.container-nav .mod-menu > li.parent:hover > .mod-menu__sub,
.container-nav .mod-menu > li.parent:focus-within > .mod-menu__sub,
.container-nav .mod-menu > li.mh-sub-open > .mod-menu__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Évite la double ligne : pas de soulignement du lien quand le panneau (et son liseré or) est ouvert */
.container-nav .mod-menu > li.parent:hover > a::after,
.container-nav .mod-menu > li.parent:focus-within > a::after,
.container-nav .mod-menu > li.mh-sub-open > a::after { width: 0; }
.container-nav .mod-menu .mod-menu__sub > li { list-style: none; margin: 0; }
.container-nav .mod-menu .mod-menu__sub a {
  display: block; padding: 13px 26px; text-decoration: none; white-space: nowrap;
  font-family: var(--mh-sans); font-size: .78rem; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mh-text-2); transition: color .25s, background-color .25s, padding-left .25s;
}
.container-nav .mod-menu .mod-menu__sub a:hover { color: var(--mh-gold); background: var(--mh-surface); padding-left: 32px; }
.container-nav .mod-menu .mod-menu__sub li.active > a,
.container-nav .mod-menu .mod-menu__sub li.current > a { color: var(--mh-gold); }
/* Mobile / tablette (menu hamburger) : sous-menu à plat, indenté, toujours visible */
@media (max-width: 1199.98px) {
  .container-nav .mod-menu > li.parent { position: static; display: block; }
  .mod-menu__toggle-sub { display: none; }
  .container-nav .mod-menu .mod-menu__sub {
    position: static; transform: none; min-width: 0;
    opacity: 1; visibility: visible; pointer-events: auto; transition: none;
    background: transparent; border: 0; border-left: 1px solid var(--mh-border); border-radius: 0;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    margin: 0 0 12px 10px; padding: 0 0 0 14px;
  }
  .container-nav .mod-menu .mod-menu__sub a { padding: 11px 6px; white-space: normal; }
  .container-nav .mod-menu .mod-menu__sub a:hover { padding-left: 6px; background: transparent; }
  /* Le survol/tap du parent ne doit pas rejouer le glissement translateX(-50%) du panneau desktop (le lien débordait à gauche) */
  .container-nav .mod-menu > li.parent:hover > .mod-menu__sub,
  .container-nav .mod-menu > li.parent:focus-within > .mod-menu__sub,
  .container-nav .mod-menu > li.mh-sub-open > .mod-menu__sub { transform: none; }
}

/* Logo "MEI & HAO LEGAL & TAX" : texte en pseudo-éléments + monogramme (image du paramètre Logo du style, logo-monogram-mh-240.webp) à gauche, lettres ≈ 1,7 × la hauteur des capitales du texte 1.5rem, lettres centrées verticalement sur les capitales (l'image a 10 % de marge transparente haut/bas) */
.navbar-brand a img, .container-header .logo img { display: inline-block !important; order: -1; width: auto; height: 2rem; margin: 0; position: relative; top: .53rem; }
@media (max-width: 1199.98px) { .navbar-brand a img { height: 1.65rem; top: .43rem; } }
.container-header .logo, .navbar-brand a { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; }
.container-header .logo::before, .navbar-brand a::before {
  content: "MEI & HAO"; font-family: var(--mh-serif);
  font-size: 1.5rem; letter-spacing: 5px; color: var(--mh-gold);
  text-transform: uppercase; font-weight: 400; white-space: nowrap;
}
.container-header .logo::after, .navbar-brand a::after {
  content: "LEGAL & TAX"; font-family: var(--mh-sans); white-space: nowrap;
  font-size: .66rem; letter-spacing: 3px; color: var(--mh-muted);
  font-style: italic; text-transform: uppercase;
}

/* ====================================================================
   4. SÉLECTEUR DE LANGUE (mod_languages) — pastilles
==================================================================== */
.mod-languages p.visually-hidden { display: none; }
.mod-languages__list, .mod-languages ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; align-items: center; }
.mod-languages__list li { margin: 0; }
.mod-languages__list a {
  display: inline-flex; align-items: center; text-decoration: none;
  color: var(--mh-text-2); font-family: var(--mh-sans);
  font-size: .72rem; letter-spacing: 2.3px; text-transform: uppercase; font-weight: 500;
  padding: 6px 17px; border-left: 1px solid var(--mh-border-2);
  transition: color .25s ease, background .25s ease;
}
.mod-languages__list li:last-child a { border-right: 1px solid var(--mh-border-2); }
.mod-languages__list a:hover { color: var(--mh-gold-light); }
.mod-languages__list .lang-active a { color: var(--mh-gold); background: rgba(201,168,76,.10); }
.mod-languages__list img { display: none; }

/* ====================================================================
   5. BOUTON BASCULE SOMBRE/CLAIR
==================================================================== */
.mh-theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--mh-gold); color: #080808;
  border: 1px solid var(--mh-gold); cursor: pointer;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: transform .25s ease, background .3s ease;
}
.mh-theme-toggle:hover { transform: translateY(-3px); }
/* Icônes animées : soleil qui tourne (mode sombre), lune en phases (mode clair) */
.mh-theme-toggle svg { width: 23px; height: 23px; display: block; overflow: visible; }
.mh-theme-toggle .mh-ico-moon { display: none; }
:root[data-mh-theme="light"] .mh-theme-toggle .mh-ico-sun { display: none; }
:root[data-mh-theme="light"] .mh-theme-toggle .mh-ico-moon { display: block; }
.mh-ico-sun { animation: mh-sun-spin 16s linear infinite; transform-origin: 50% 50%; }
@keyframes mh-sun-spin { to { transform: rotate(360deg); } }
/* Position par défaut = croissant (visible même sans animation) */
.mh-moon-shadow { transform-box: view-box; transform: translateX(-8px); animation: mh-moon-phase 9s linear infinite; }
@keyframes mh-moon-phase {
  0%   { transform: translateX(-20px); }
  50%  { transform: translateX(20px); }
  100% { transform: translateX(-20px); }
}

/* Bouton « retour en haut » : à gauche du bouton clair/sombre, apparaît au défilement */
.mh-totop {
  position: fixed; right: 76px; bottom: 18px; z-index: 1200;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--mh-bg-2); color: var(--mh-gold);
  border: 1px solid var(--mh-gold); cursor: pointer;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.30);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease;
}
.mh-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.mh-totop:hover { background: var(--mh-gold); color: #080808; transform: translateY(-3px); }
/* on masque le bouton natif Cassiopeia (doublon, n'apparaît qu'en bas) */
.back-to-top-link { display: none !important; }

/* ====================================================================
   6. BOUTONS
==================================================================== */
.mh-btn, .btn-primary, .com-content-article a.mh-btn {
  display: inline-block; background: var(--mh-gold); color: #080808 !important;
  padding: 14px 38px; font-family: var(--mh-sans);
  font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--mh-gold); border-radius: 0;
  position: relative; overflow: hidden;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
/* Éclat fin et discret qui glisse au survol */
.mh-btn::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 42%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform: skewX(-20deg); pointer-events: none;
  transition: left .5s ease;
}
.mh-btn:hover::after { left: 150%; }
/* Hover léger et animé : inversion douce + très subtil mouvement */
.mh-btn:hover {
  background: transparent; color: var(--mh-gold) !important;
  transform: translateY(-2px); text-decoration: none;
}
.mh-btn:hover::after { background: linear-gradient(110deg, transparent 0%, rgba(201,168,76,.28) 50%, transparent 100%); }
.mh-btn:active { transform: translateY(0); }
.mh-btn:focus-visible { outline: 2px solid var(--mh-gold-light); outline-offset: 3px; }

.mh-btn-ghost {
  background: transparent; color: var(--mh-gold-light) !important;
  border-color: var(--mh-border); font-weight: 500;
}
.mh-btn-ghost:hover {
  background: transparent; border-color: var(--mh-gold); color: var(--mh-gold) !important;
  transform: translateY(-2px);
}

/* ====================================================================
   7. SECTIONS & TITRES
==================================================================== */
.mh-sec { padding: 110px 0; }
.mh-sec-alt { background: var(--mh-bg-2); }
.mh-wrap { max-width: var(--mh-maxw); margin: 0 auto; padding: 0 56px; }
.mh-center { text-align: center; }

.mh-eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mh-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--mh-gold); }
.mh-eyebrow span, .mh-eyebrow { font-size: .82rem; letter-spacing: 3.5px; text-transform: uppercase; color: var(--mh-gold); font-weight: 500; }
.mh-center .mh-eyebrow::after { content: ''; width: 32px; height: 1px; background: var(--mh-gold); }

.mh-h { font-family: var(--mh-serif); font-size: clamp(34px,4.4vw,58px); color: var(--mh-strong); line-height: 1.12; margin: 0 0 10px; }
.mh-h em { font-style: italic; color: var(--mh-gold); }
html[lang^="zh"] .mh-h { font-family: var(--mh-cjk); font-size: clamp(28px,3.6vw,46px); }
.mh-sub { font-family: var(--mh-serif); font-size: 1.34rem; color: var(--mh-gold-light); letter-spacing: 3px; margin-bottom: 22px; }
.mh-lead { font-size: 1rem; color: var(--mh-text-2); line-height: 1.85; max-width: 680px; letter-spacing: .2px; }
.mh-center .mh-lead { margin-left: auto; margin-right: auto; }
.mh-rule { width: 52px; height: 1.5px; background: var(--mh-gold); margin: 30px 0; }
.mh-center .mh-rule { margin-left: auto; margin-right: auto; }
.mh-divider { height: 1px; background: linear-gradient(to right,transparent,var(--mh-border),transparent); }

/* ====================================================================
   8. HERO
==================================================================== */
.mh-hero {
  position: relative; overflow: hidden;
  min-height: 88vh; display: flex; align-items: center;
  padding: 120px var(--mh-edge) 80px;
  background:
    radial-gradient(ellipse 70% 90% at 75% 50%,rgba(201,168,76,.06) 0%,transparent 65%),
    radial-gradient(ellipse 40% 50% at 12% 85%,rgba(201,168,76,.03) 0%,transparent 55%),
    var(--mh-bg);
  border-bottom: 1px solid var(--mh-border);
}
/* Écran large : l'espace au-dessus du hero suit la hauteur réelle de l'en-tête fixe (menu allemand sur 2 lignes → 185px) */
@media (min-width: 1200px) { .mh-hero { padding-top: calc(var(--mh-header-h, 116px) + 12px); } }
.mh-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--mh-border-2) 1px,transparent 1px),linear-gradient(90deg,var(--mh-border-2) 1px,transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 100%);
}
.mh-hero-char {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  font-family: var(--mh-cjk); font-size: 230px; color: rgba(201,168,76,.04);
  user-select: none; line-height: 1; pointer-events: none;
}
.mh-hero-body { position: relative; z-index: 2; max-width: 920px; width: 100%; margin: 0 auto; }
.mh-hero h1 { font-size: clamp(46px,6vw,86px); color: var(--mh-strong); line-height: 1.05; margin: 0 0 8px; }
.mh-hero h1 em { font-style: italic; color: var(--mh-gold); }
/* Grand monogramme « MH » en tête du hero (image posée dans l'article d'accueil, conteneur .mh-monogram-wrap) — sans cercle, centré en mobile uniquement */
.mh-hero-body .mh-monogram-wrap { display: block; width: 144px; margin: 0 0 22px; }
.mh-hero-body .mh-monogram { display: block; width: 144px; height: 144px; object-fit: contain; }
@media (max-width: 767px) { .mh-hero-body .mh-monogram-wrap { width: 100px; margin: 0 auto 16px; } .mh-hero-body .mh-monogram { width: 100px; height: 100px; } }
/* Titre du hero chinois : une seule ligne sur écran large (taille max réduite pour tenir dans 920px), retour à la ligne autorisé en mobile */
:lang(zh) .mh-hero h1, html[lang^="zh"] .mh-hero h1 { white-space: nowrap; font-size: clamp(40px, 5.6vw, 80px); }
@media (max-width: 767px) { :lang(zh) .mh-hero h1, html[lang^="zh"] .mh-hero h1 { white-space: normal; } }
.mh-hero .mh-hero-zh { font-family: var(--mh-cjk); font-size: clamp(18px,2.4vw,30px); color: var(--mh-gold-light); letter-spacing: 8px; margin: 14px 0 40px; }
.mh-hero p.mh-hero-desc { font-size: 1.02rem; line-height: 1.85; color: var(--mh-text-2); max-width: 600px; margin: 0 0 40px; }
.mh-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* L'anti-spam Joomla enveloppe les liens mailto dans <joomla-hidden-mail> (inline) :
   on le neutralise pour que les boutons gardent tous la même taille. */
joomla-hidden-mail { display: inline-flex; }
joomla-hidden-mail > .mh-btn { display: inline-flex; align-items: center; justify-content: center; }

/* Choix de langue mis en avant dans le hero d'accueil */
.mh-langpick { margin: 28px 0 36px; }
.mh-langpick-label { display: block; font-family: var(--mh-sans); font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; color: var(--mh-gold-light); margin-bottom: 14px; }
.mh-langpick-list { display: flex; flex-wrap: wrap; gap: 10px; }
.mh-langpick a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 108px; padding: 12px 22px;
  border: 1px solid var(--mh-border); background: rgba(201,168,76,.04);
  color: var(--mh-text-2); text-decoration: none;
  font-family: var(--mh-sans); font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}
.mh-langpick a:hover { color: var(--mh-gold); border-color: var(--mh-gold); background: rgba(201,168,76,.10); transform: translateY(-2px); }
.mh-langpick a.is-active { color: var(--mh-gold); border-color: var(--mh-gold); background: rgba(201,168,76,.14); }

/* ====================================================================
   9. BARRE DE STATISTIQUES
==================================================================== */
.mh-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--mh-surface);
  border-top: 1px solid var(--mh-border); border-bottom: 1px solid var(--mh-border);
}
.mh-stats > * { text-align: center; padding: 42px 20px; border-right: 1px solid var(--mh-border-2); }
.mh-stats > *:last-child { border-right: none; }
.mh-stat-n { font-family: var(--mh-serif); font-size: 3.2rem; color: var(--mh-gold); line-height: 1; margin-bottom: 8px; }
.mh-stat-l { font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-muted); }

/* ====================================================================
   10. CARTES SERVICES / VALEURS (grille)
==================================================================== */
.mh-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--mh-border); margin-top: 56px; }
.mh-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--mh-border); margin-top: 56px; }
.mh-card {
  background: var(--mh-bg-2); padding: 52px 44px; position: relative; overflow: hidden;
  transition: background .25s ease;
}
.mh-card::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--mh-gold); transition: width .3s ease; }
.mh-card:hover { background: var(--mh-surface); }
.mh-card:hover::after { width: 100%; }
.mh-card-num { position: absolute; top: 24px; right: 32px; font-family: var(--mh-serif); font-size: 76px; color: rgba(201,168,76,.07); line-height: 1; user-select: none; }
.mh-card-icon { width: 50px; height: 50px; border: 1px solid var(--mh-border); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 28px; color: var(--mh-gold); }
.mh-card h3 { font-size: 1.6rem; color: var(--mh-strong); margin: 0 0 6px; line-height: 1.25; }
.mh-card .mh-card-zh { font-family: var(--mh-cjk); font-size: .92rem; color: var(--mh-gold); letter-spacing: 3px; margin-bottom: 18px; }
.mh-card p { font-size: .95rem; line-height: 1.85; color: var(--mh-text-2); margin: 0 0 18px; }
.mh-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.mh-card ul li { font-size: .9rem; color: var(--mh-text-2); display: flex; align-items: center; gap: 12px; }
.mh-card ul li::before { content: ''; width: 18px; height: 1px; background: var(--mh-gold); flex-shrink: 0; }

/* ====================================================================
   11. À PROPOS / FONDATEUR
==================================================================== */
.mh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.mh-portrait {
  position: relative; aspect-ratio: 4/5; background: var(--mh-card-grad);
  border: 1px solid var(--mh-border); display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden;
}
.mh-portrait-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mh-cjk); font-size: 200px; color: rgba(201,168,76,.05); }
.mh-portrait-name { position: relative; font-family: var(--mh-serif); font-size: 2rem; color: var(--mh-gold); letter-spacing: 6px; }
.mh-portrait-role { position: relative; font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-muted); margin-top: 10px; }
.mh-cred { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.mh-cred-item { padding: 14px 18px; border-left: 2px solid var(--mh-gold); background: var(--mh-surface); }
.mh-cred-item strong { color: var(--mh-text); font-weight: 500; display: block; margin-bottom: 3px; font-size: .92rem; }
.mh-cred-item span { font-size: .88rem; color: var(--mh-text-2); }

/* ====================================================================
   12. ÉQUIPE
==================================================================== */
.mh-team { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--mh-border); margin-top: 56px; }
.mh-team-card { background: var(--mh-bg-2); }
.mh-team-portrait { aspect-ratio: 1/1; position: relative; background: var(--mh-card-grad); border-bottom: 1px solid var(--mh-border); }
.mh-team-portrait .mh-team-char { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mh-cjk); font-size: 96px; color: rgba(201,168,76,.10); }
.mh-team-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 24px; background: linear-gradient(to top,rgba(8,8,8,.95),transparent); }
:root[data-mh-theme="light"] .mh-team-info { background: linear-gradient(to top,rgba(20,18,14,.6),transparent); }
.mh-team-info .mh-team-name { font-family: var(--mh-serif); font-size: 1.4rem; color: #FDFCFA; letter-spacing: 2px; }
.mh-team-info .mh-team-name-zh { font-family: var(--mh-cjk); font-size: .78rem; color: var(--mh-gold); letter-spacing: 3px; }
.mh-team-body { padding: 26px 28px 30px; }
.mh-team-role { font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold); font-weight: 500; margin-bottom: 12px; }
.mh-team-body p { font-size: .9rem; line-height: 1.85; color: var(--mh-text-2); margin: 0; }
.mh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.mh-tag { font-size: .64rem; letter-spacing: 1.8px; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--mh-border); color: var(--mh-muted); }

/* Profils détaillés des membres (photo + CV) */
.mh-members { display: flex; flex-direction: column; gap: 56px; margin-top: 56px; }
.mh-member { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; padding: 40px; background: var(--mh-bg-2); border: 1px solid var(--mh-border); scroll-margin-top: calc(var(--mh-header-h, 80px) + 16px); }
.mh-member-photo { margin: 0; position: sticky; top: calc(var(--mh-header-h, 80px) + 24px); }
.mh-member-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--mh-border); filter: saturate(.92); }
.mh-member-name { font-family: var(--mh-serif); font-size: 1.7rem; color: var(--mh-text); margin: 0 0 6px; letter-spacing: 1px; }
.mh-member-role { font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold); font-weight: 500; margin-bottom: 8px; }
.mh-member-langs { font-size: .78rem; letter-spacing: 1.5px; color: var(--mh-muted); margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--mh-border); }
.mh-member-body p { font-size: .92rem; line-height: 1.85; color: var(--mh-text-2); }
.mh-member-h { font-family: var(--mh-serif); font-size: 1.05rem; color: var(--mh-text); letter-spacing: 1px; margin: 26px 0 12px; }
.mh-member-body ul:not(.mh-check) { list-style: none; margin: 0; padding: 0; }
.mh-member-body ul:not(.mh-check) li { font-size: .88rem; line-height: 1.75; color: var(--mh-text-2); padding: 5px 0 5px 18px; position: relative; }
.mh-member-body ul:not(.mh-check) li::before { content: '·'; position: absolute; left: 2px; color: var(--mh-gold); }
.mh-member-more { margin-top: 26px; border-top: 1px solid var(--mh-border); }
.mh-member-more summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold); font-weight: 500; transition: color .25s; }
.mh-member-more summary::-webkit-details-marker { display: none; }
.mh-member-more summary::after { content: '+'; margin-left: 10px; font-size: .9rem; }
.mh-member-more[open] summary::after { content: '−'; }
.mh-member-more summary:hover { color: var(--mh-text); }
@media (max-width: 767.98px) {
  .mh-member { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .mh-member-photo { position: static; max-width: 320px; }
}

/* Blog Actualités / News (vue catégorie com_content) */
.com-content-category-blog { max-width: 1160px; margin: 0 auto; padding: 56px 24px 90px; }
.com-content-category-blog > .page-header { text-align: center; margin: 0 0 40px; }
.com-content-category-blog > .page-header h1 { font-family: var(--mh-serif); font-size: clamp(34px,3.6vw,52px); color: var(--mh-strong); letter-spacing: 1px; margin: 0; text-align: center; }
/* Bouton « Installer l'application » (PWA) sous le titre Actualités */
.mh-install-wrap { margin: 22px 0 0; }
.mh-install-btn {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: var(--mh-sans); font-size: .72rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mh-gold); background: linear-gradient(rgba(201,168,76,.07), rgba(201,168,76,.02));
  border: 1px solid var(--mh-border); padding: 13px 26px 13px 22px; border-radius: 0;
  position: relative; overflow: hidden;
  transition: border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mh-install-btn::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 42%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(201,168,76,.28) 50%, transparent 100%);
  transform: skewX(-20deg); pointer-events: none; transition: left .6s ease;
}
.mh-install-btn:hover { border-color: var(--mh-gold); color: var(--mh-gold-light); transform: translateY(-2px); box-shadow: 0 12px 34px -16px rgba(201,168,76,.55); }
.mh-install-btn:hover::after { left: 150%; }
.mh-install-btn:active { transform: translateY(0); }
.mh-install-btn:focus-visible { outline: 2px solid var(--mh-gold-light); outline-offset: 3px; }
.mh-install-ic { display: inline-flex; }
.mh-install-ic svg { display: block; }
.mh-install-note { max-width: 460px; margin: 16px auto 0; font-size: .82rem; line-height: 1.6; color: var(--mh-muted); }
.com-content-category-blog .blog-items { display: flex; flex-direction: column; gap: 28px; }
.com-content-category-blog .blog-item { background: var(--mh-bg-2); border: 1px solid var(--mh-border); padding: 36px 40px; transition: border-color .25s; }
.com-content-category-blog .blog-item:hover { border-color: var(--mh-gold); }
.com-content-category-blog .blog-item .item-title, .com-content-category-blog .blog-item h2 { font-family: var(--mh-serif); font-size: 1.6rem; margin: 0 0 10px; line-height: 1.3; }
.com-content-category-blog .blog-item .item-title a { color: var(--mh-strong); text-decoration: none; }
.com-content-category-blog .blog-item .item-title a:hover { color: var(--mh-gold); }
.com-content-category-blog .article-info { display: block; margin: 0 0 16px; }
.com-content-category-blog .article-info-term { display: none; }
.com-content-category-blog .article-info dd { display: inline-block; margin: 0; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--mh-gold); }
.com-content-category-blog .article-info dd [class*="icon-"], .com-content-category-blog .article-info dd .fa, .com-content-category-blog .article-info dd svg { display: none; }
.com-content-category-blog .blog-item p { color: var(--mh-text-2); line-height: 1.85; font-size: .98rem; }
/* Vignette : l'image d'intro devient une petite miniature à gauche, texte à côté */
.com-content-category-blog .blog-item img {
  float: left; width: 220px !important; max-width: 38% !important; height: 150px !important;
  object-fit: cover; margin: 2px 26px 8px 0; border-radius: 8px;
}
.com-content-category-blog .blog-item p:has(img) { margin: 0; }
.com-content-category-blog .readmore { margin-top: 18px; clear: both; }
.com-content-category-blog .readmore a { display: inline-block; font-size: .7rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold); text-decoration: none; border-bottom: 1px solid var(--mh-border-2); padding-bottom: 4px; }
.com-content-category-blog .readmore a:hover { color: var(--mh-gold-light); border-color: var(--mh-gold); }
.com-content-category-blog nav.pagination__wrapper { margin-top: 40px; }
@media (max-width: 767.98px) {
  .com-content-category-blog .blog-item { padding: 24px; }
}

/* ---- Pages légales (Mentions légales / Confidentialité) : colonne lisible + sommaire ancré ---- */
.mh-legal { max-width: 1120px; margin: 0 auto; counter-reset: mhsec; }
.mh-legal-h1 { font-family: var(--mh-serif); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--mh-strong); line-height: 1.1; margin: 0 0 22px; letter-spacing: .5px; }
html[lang^="zh"] .mh-legal-h1 { font-family: var(--mh-cjk); }
.mh-legal .mh-legal-intro { color: var(--mh-text-2); font-size: 1.02rem; line-height: 1.8; margin: 0 0 8px; max-width: 780px; }
.mh-legal .mh-legal-updated { font-size: .74rem; letter-spacing: 2px; text-transform: uppercase; color: var(--mh-muted); margin: 0 0 44px; }
/* Deux colonnes : sommaire fixe à gauche, contenu à droite */
.mh-legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.mh-legal-main { max-width: 800px; }
/* Sommaire (sidebar sticky) */
.mh-toc { position: sticky; top: calc(var(--mh-header-h, 116px) + 24px); background: var(--mh-bg-2); border: 1px solid var(--mh-border); border-left: 2px solid var(--mh-gold); border-radius: 8px; padding: 24px 26px; }
.mh-toc-t { font-family: var(--mh-sans); font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--mh-gold-light); margin: 0 0 16px; }
.mh-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: mhtoc; }
.mh-toc li { counter-increment: mhtoc; margin: 0 0 4px; }
.mh-toc a { color: var(--mh-text-2); text-decoration: none; font-size: .9rem; line-height: 1.45; transition: color .25s; display: flex; gap: 9px; padding: 4px 0; }
.mh-toc a::before { content: counter(mhtoc) "."; color: var(--mh-gold); font-family: var(--mh-serif); font-size: .95rem; min-width: 18px; text-align: right; }
.mh-toc a:hover { color: var(--mh-gold); }
/* Entrée active (section en cours de lecture) mise en évidence */
.mh-toc a.is-active { color: var(--mh-gold); font-weight: 500; }
.mh-toc a.is-active::before { color: var(--mh-gold-light); }
@media (max-width: 900px) {
  .mh-legal-layout { grid-template-columns: 1fr; gap: 0; }
  .mh-toc { position: static; margin-bottom: 44px; }
  .mh-legal-main { max-width: none; }
}
/* Sections */
.mh-legal-sec { padding-top: 12px; margin: 0 0 40px; scroll-margin-top: calc(var(--mh-header-h, 116px) + 20px); counter-increment: mhsec; }
.mh-legal-sec > h2 { font-family: var(--mh-serif); font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--mh-strong); font-weight: 300; margin: 0 0 16px; display: flex; align-items: baseline; gap: 14px; }
.mh-legal-sec > h2::before { content: counter(mhsec,decimal-leading-zero); font-size: 1rem; color: var(--mh-gold); letter-spacing: 1px; }
.mh-legal-main .mh-legal-sec:first-child { padding-top: 0; }
.mh-legal-sec p { color: var(--mh-text-2); line-height: 1.85; margin: 0 0 14px; }
.mh-legal-sec a { color: var(--mh-gold); }
.mh-legal-sec a:hover { color: var(--mh-gold-light); }
.mh-legal-sec ul { list-style: none; padding: 0; margin: 0 0 18px; }
.mh-legal-sec ul li { position: relative; padding: 5px 0 5px 24px; color: var(--mh-text-2); line-height: 1.7; }
.mh-legal-sec ul li::before { content: ''; position: absolute; left: 3px; top: 14px; width: 6px; height: 6px; background: var(--mh-gold); transform: rotate(45deg); }
.mh-legal-sec .mh-legal-note { font-size: .9rem; color: var(--mh-muted); border-left: 1px solid var(--mh-border); padding-left: 18px; margin-top: 8px; }
/* « Retour au sommaire » : inutile sur desktop (sommaire fixe visible) → seulement en pile mobile */
.mh-legal-back { display: none; margin-top: 6px; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--mh-muted); text-decoration: none; }
.mh-legal-back:hover { color: var(--mh-gold); }
@media (max-width: 900px) { .mh-legal-back { display: inline-block; } }
html[lang^="zh"] .mh-legal-sec > h2 { font-family: var(--mh-cjk); }

/* ---- Article News en pleine page (vue article sous le menu Actualités) ---- */
/* Ciblé sur les itemids du menu News (parents EN134/ZH135/FR136/DE137 + sous-items blogs EN153/ZH154/FR138/DE155) pour ne pas toucher
   aux pages design (accueil, services…) qui utilisent aussi .com-content-article. */
.view-article.itemid-134 .com-content-article,
.view-article.itemid-135 .com-content-article,
.view-article.itemid-136 .com-content-article,
.view-article:is(.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article {
  max-width: 800px; margin: 0 auto; padding: 26px 24px 90px;
}
/* 1er page-header = titre du menu « Actualités » → masqué ; 2e = titre de l'article → affiché */
.view-article.itemid-134 .com-content-article > .page-header:first-of-type,
.view-article.itemid-135 .com-content-article > .page-header:first-of-type,
.view-article.itemid-136 .com-content-article > .page-header:first-of-type,
.view-article:is(.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article > .page-header:first-of-type { display: none; }
.view-article.itemid-134 .com-content-article > .page-header + .page-header,
.view-article.itemid-135 .com-content-article > .page-header + .page-header,
.view-article.itemid-136 .com-content-article > .page-header + .page-header,
.view-article:is(.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article > .page-header + .page-header { display: block; margin: 0 0 10px; }
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article > .page-header + .page-header :is(h1,h2) {
  font-family: var(--mh-serif); font-size: clamp(30px,4.2vw,46px); color: var(--mh-strong);
  line-height: 1.15; letter-spacing: .5px; margin: 0; font-weight: 300;
}
:lang(zh) .view-article .com-content-article > .page-header + .page-header :is(h1,h2) { font-family: var(--mh-cjk); }
/* date de publication sous le titre (bloc .article-info « Détails ») */
.view-article.itemid-134 .com-content-article .article-info,
.view-article.itemid-135 .com-content-article .article-info,
.view-article.itemid-136 .com-content-article .article-info,
.view-article:is(.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article .article-info {
  margin: 0 0 34px; padding: 0; border: 0; background: none;
}
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article .article-info-term { display: none; }
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article .article-info dd {
  margin: 0; font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold);
}
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article .article-info dd [class*="icon-"],
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article .article-info dd svg { display: none; }
/* corps de l'article */
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body > *:first-child { margin-top: 0; }
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body img { display: block; border-radius: 10px; }
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body > p:has(img) { margin: 8px 0 28px; }
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body h2 {
  font-family: var(--mh-serif); font-size: 1.7rem; color: var(--mh-strong); margin: 40px 0 14px; font-weight: 300;
}
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body p {
  font-size: 1.02rem; line-height: 1.9; color: var(--mh-text-2); margin: 0 0 18px;
}
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body ul {
  list-style: none; padding: 0; margin: 0 0 22px;
}
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body ul li {
  position: relative; padding: 6px 0 6px 26px; color: var(--mh-text-2); line-height: 1.7;
}
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body ul li::before {
  content: ''; position: absolute; left: 4px; top: 15px; width: 7px; height: 7px;
  background: var(--mh-gold); transform: rotate(45deg);
}
/* galerie / carousel d'images */
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body img { width: 100%; height: auto; }
/* Carrousel d'images (défilable, flèches + points, images à taille uniforme) */
.mh-carousel { position: relative; margin: 30px 0; }
.mh-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 10px; }
.mh-carousel-track::-webkit-scrollbar { display: none; }
.mh-carousel-slide { flex: 0 0 100%; scroll-snap-align: center; }
.mh-carousel .mh-carousel-slide img,
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body .mh-carousel-slide img {
  display: block; width: 100% !important; height: clamp(260px, 44vw, 480px) !important;
  object-fit: cover; border-radius: 10px; margin: 0;
}
.mh-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; background: rgba(8,8,8,.55); backdrop-filter: blur(4px);
  border: 1px solid var(--mh-border); color: var(--mh-gold); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s, color .25s; }
.mh-carousel-nav:hover { background: rgba(8,8,8,.8); border-color: var(--mh-gold); color: var(--mh-gold-light); }
.mh-carousel-prev { left: 14px; } .mh-carousel-next { right: 14px; }
.mh-carousel-dots { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.mh-carousel-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--mh-border); border: 0;
  cursor: pointer; transition: background .25s, transform .25s; }
.mh-carousel-dot.is-active { background: var(--mh-gold); transform: scale(1.25); }
@media (max-width: 575px) { .mh-carousel-nav { width: 38px; height: 38px; font-size: 1.2rem; } }
/* carte d'appel à l'action « Une question sur ce sujet ? » */
.mh-news-cta { margin: 48px 0 0; padding: 34px 38px; border: 1px solid var(--mh-border); background: var(--mh-bg-2); }
.mh-news-cta h3 { font-family: var(--mh-serif); font-size: 1.5rem; color: var(--mh-strong); margin: 0 0 8px; font-weight: 300; }
.mh-news-cta p { font-size: .98rem; color: var(--mh-text-2); margin: 0 0 20px; line-height: 1.8; }
.mh-news-cta .mh-btns { margin: 0; }
/* Le bouton WeChat est un <button> : forcer le MÊME rendu que les liens .mh-btn */
.mh-news-cta .mh-btn[data-mh-wechat] {
  cursor: pointer; font-family: var(--mh-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.15;
}
/* Popup QR WeChat */
.mh-wechat-modal { border: 0; padding: 0; background: transparent; max-width: 92vw; }
.mh-wechat-modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.mh-wechat-modal-in { position: relative; background: var(--mh-bg-2); border: 1px solid var(--mh-gold); padding: 34px 34px 28px; text-align: center; }
.mh-wechat-modal-in img,
.view-article:is(.itemid-134,.itemid-135,.itemid-136,.itemid-137,.itemid-138,.itemid-153,.itemid-154,.itemid-155) .com-content-article__body .mh-wechat-modal-in img {
  display: block; width: 220px; height: 220px; margin: 0 auto; border-radius: 8px; background: #fff; padding: 8px;
}
.mh-wechat-id { margin: 18px 0 4px; font-size: .9rem; color: var(--mh-text); letter-spacing: .5px; }
.mh-wechat-id strong { color: var(--mh-gold); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; font-size: .72rem; margin-right: 4px; }
.mh-wechat-hint { margin: 0; font-size: .8rem; color: var(--mh-muted); }
.mh-wechat-close { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--mh-muted); font-size: 1.7rem; line-height: 1; cursor: pointer; transition: color .2s; }
.mh-wechat-close:hover { color: var(--mh-gold); }

/* Rangée de boutons (page Contact) */
.mh-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.mh-btns .mh-btn { display: inline-flex; align-items: center; justify-content: center; }

/* Carte QR WeChat (page Contact) */
.mh-wechat { display: flex; align-items: center; gap: 22px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--mh-border); }
.mh-wechat img { width: 132px; height: 132px; flex: none; border-radius: 10px; border: 1px solid var(--mh-border); }
.mh-wechat-t { display: flex; flex-direction: column; gap: 5px; }
.mh-wechat-t strong { font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold); font-weight: 500; }
.mh-wechat-t span { font-size: .95rem; color: var(--mh-text); letter-spacing: .5px; }
.mh-wechat-t em { font-style: normal; font-size: .8rem; color: var(--mh-muted); line-height: 1.6; max-width: 230px; }

/* ====================================================================
   13. PROCESSUS
==================================================================== */
.mh-process { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; margin-top: 64px; }
.mh-process::before { content: ''; position: absolute; top: 38px; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right,transparent,var(--mh-border),transparent); }
.mh-step { text-align: center; padding: 0 24px; }
.mh-step-num { width: 76px; height: 76px; border: 1px solid var(--mh-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; background: var(--mh-bg); position: relative; z-index: 1; font-family: var(--mh-serif); font-size: 1.8rem; color: var(--mh-gold); }
.mh-step h4 { font-size: 1.3rem; color: var(--mh-strong); margin: 0 0 6px; }
.mh-step .mh-step-zh { font-family: var(--mh-cjk); font-size: .78rem; color: var(--mh-gold); letter-spacing: 2px; margin-bottom: 12px; }
.mh-step p { font-size: .86rem; line-height: 1.85; color: var(--mh-text-2); margin: 0; }

/* ====================================================================
   14. CONTACT
==================================================================== */
.mh-contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
.mh-ci { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.mh-ci-item { display: flex; gap: 18px; align-items: flex-start; }
.mh-ci-ico { color: var(--mh-gold); font-size: 16px; width: 22px; flex-shrink: 0; }
.mh-ci-label { font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold); margin-bottom: 4px; }
.mh-ci-val { font-size: .82rem; color: var(--mh-text); }
.mh-box { padding: 48px 44px; border: 1px solid var(--mh-border); background: var(--mh-surface); border-radius: 6px; }
.mh-box h3 { font-family: var(--mh-serif); font-size: 1.85rem; color: var(--mh-strong); margin: 0 0 12px; }
.mh-box p { color: var(--mh-text-2); font-size: 1rem; line-height: 1.7; }
.mh-fine { font-size: .82rem; color: var(--mh-muted); margin-top: 20px !important; }
.mh-ci-list { list-style: none; padding: 0; margin: 34px 0 0; }
.mh-ci-list li { padding: 17px 0; border-bottom: 1px solid var(--mh-border); display: flex; flex-direction: column; gap: 5px; }
.mh-ci-list li:first-child { padding-top: 0; }
.mh-ci-list .mh-ci-l { font-size: .6rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold); }
.mh-ci-list li, .mh-ci-list li a { color: var(--mh-text); font-size: 1.02rem; text-decoration: none; }
.mh-ci-list li a:hover { color: var(--mh-gold); }

/* ====================================================================
   15. PIED DE PAGE (structure Cassiopeia)
==================================================================== */
.container-footer { background: var(--mh-bg-2); border-top: 1px solid var(--mh-border); color: var(--mh-text-2); }
.container-footer h1, .container-footer h2, .container-footer h3 { color: var(--mh-gold); }
.container-footer a { color: var(--mh-text-2); }
.container-footer a:hover { color: var(--mh-gold); }

/* Footer (modules HTML personnalisés par langue) */
.mh-footer { padding: 64px var(--mh-edge) 36px; }
.mh-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; margin-bottom: 44px; }
.mh-footer-logo { font-family: var(--mh-serif); font-size: 1.6rem; letter-spacing: 5px; color: var(--mh-gold); text-transform: uppercase; margin-bottom: 14px; }
.mh-footer-tag { font-size: .94rem; color: var(--mh-text-2); line-height: 1.85; max-width: 400px; }
.mh-footer-h { font-size: .78rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mh-gold); font-weight: 500; margin-bottom: 18px; }
.mh-footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.mh-footer-nav li { font-size: .9rem; color: var(--mh-text-2); line-height: 1.5; }
.mh-footer-nav a { color: var(--mh-text-2); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.mh-footer-nav a::before { content: ''; width: 13px; height: 1px; background: var(--mh-border); transition: width .3s ease, background .3s ease; }
.mh-footer-nav a:hover { color: var(--mh-gold); }
.mh-footer-nav a:hover::before { width: 22px; background: var(--mh-gold); }
/* Colonne Contact du footer — présentation épurée avec pictos */
.mh-footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.mh-footer-contact li { font-size: .9rem; color: var(--mh-text-2); line-height: 1.4; display: flex; align-items: center; gap: 11px; }
.mh-footer-contact a { color: var(--mh-text-2); text-decoration: none; transition: color .25s ease; }
.mh-footer-contact a:hover { color: var(--mh-gold); }
.mh-fi { flex: none; display: inline-flex; color: var(--mh-gold); }
.mh-fi svg { display: block; width: 16px; height: 16px; }
/* Bloc WeChat : QR + identifiant + invitation, groupés dans une mini-carte */
.mh-footer-wechat { display: flex; align-items: center; gap: 14px; margin: 20px 0; padding: 14px; border: 1px solid var(--mh-border); background: rgba(201,168,76,.03); }
.mh-footer-wechat img { flex: none; width: 84px; height: 84px; border-radius: 6px; background: #fff; padding: 5px; }
.mh-fw-t { display: flex; flex-direction: column; gap: 5px; }
.mh-fw-id { font-size: .82rem; color: var(--mh-text); letter-spacing: .3px; }
.mh-fw-id strong { color: var(--mh-gold); font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; font-size: .68rem; }
.mh-fw-hint { font-size: .74rem; color: var(--mh-muted); line-height: 1.45; }
/* Adresse + juridiction : méta discrète en bas de colonne */
.mh-footer-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mh-footer-meta li { font-size: .82rem; color: var(--mh-muted); line-height: 1.55; letter-spacing: .2px; display: flex; gap: 11px; }
.mh-footer-meta li .mh-fi { margin-top: 2px; align-self: flex-start; }
.mh-footer-meta li:last-child { padding-left: 27px; } /* juridiction alignée sous l'adresse */
.mh-footer-bottom { border-top: 1px solid var(--mh-border); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.mh-footer-bottom span { font-size: .8rem; color: var(--mh-muted); letter-spacing: .5px; }
.mh-footer-legal { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.mh-footer-legal a { color: var(--mh-muted); text-decoration: none; font-size: .8rem; letter-spacing: .5px; transition: color .25s; }
.mh-footer-legal a:hover { color: var(--mh-gold); }
@media (max-width: 767px) { .mh-footer-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ====================================================================
   16. DIVERS
==================================================================== */
.com-content-article > .page-header { display: none; } /* le contenu porte ses propres titres */
.container-breadcrumb, .mod-breadcrumbs, nav[aria-label="Breadcrumbs"] { display: none; } /* pas de fil d'Ariane (comme le mockup) */
.item-page { max-width: none; }
.mh-tag-line { display: inline-block; width: 40px; height: 1px; background: var(--mh-gold); vertical-align: middle; }

/* Animations d'apparition au défilement (activées via .mh-js + IntersectionObserver).
   Les éléments sont masqués seulement si JS actif (.mh-js sur <html>) pour éviter
   tout contenu invisible si le script échoue. */
.mh-js .mh-hero-body, .mh-js .mh-stats, .mh-js .mh-band, .mh-js .mh-section,
.mh-js .mh-service, .mh-js .mh-card, .mh-js .mh-step, .mh-js .mh-cred-item,
.mh-js .mh-split > *, .mh-js .mh-team-card, .mh-js .mh-footer-grid,
.mh-js .mh-icard, .mh-js .mh-cards > li {
  opacity: 0;
}
/* Apparition via keyframes (le translate ne vit QUE dans l'animation) : aucune règle
   persistante ne touche `transform` => les survols des cartes restent courts/discrets. */
.mh-js .mh-in {
  opacity: 1 !important;
  animation: mhReveal .8s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes mhReveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
/* cascade dans les grilles (cartes, étapes, cartes-icônes) */
.mh-js .mh-card:nth-child(2), .mh-js .mh-step:nth-child(2), .mh-js .mh-cards > li:nth-child(2), .mh-js .mh-icard:nth-child(2) { animation-delay: .07s; }
.mh-js .mh-card:nth-child(3), .mh-js .mh-step:nth-child(3), .mh-js .mh-cards > li:nth-child(3), .mh-js .mh-icard:nth-child(3) { animation-delay: .14s; }
.mh-js .mh-card:nth-child(4), .mh-js .mh-step:nth-child(4), .mh-js .mh-cards > li:nth-child(4), .mh-js .mh-icard:nth-child(4) { animation-delay: .21s; }
.mh-js .mh-cards > li:nth-child(5), .mh-js .mh-icard:nth-child(5) { animation-delay: .28s; }
.mh-js .mh-cards > li:nth-child(6), .mh-js .mh-icard:nth-child(6) { animation-delay: .35s; }
.mh-js .mh-cards > li:nth-child(7), .mh-js .mh-icard:nth-child(7) { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  .mh-js .mh-hero-body, .mh-js .mh-stats, .mh-js .mh-band, .mh-js .mh-section,
  .mh-js .mh-service, .mh-js .mh-card, .mh-js .mh-step, .mh-js .mh-cred-item,
  .mh-js .mh-split > *, .mh-js .mh-team-card, .mh-js .mh-footer-grid,
  .mh-js .mh-icard, .mh-js .mh-cards > li { opacity: 1; transform: none; animation: none; }
}

/* ====================================================================
   16b. COMPAT — contenu Word existant (anciennes classes utilitaires)
   Habille les articles rédigés avant la refonte au thème sombre premium.
==================================================================== */
/* Sections en PLEINE LARGEUR : le fond va d'un bord à l'autre, le contenu reste
   centré dans une colonne de largeur --mh-maxw via le padding latéral --mh-edge. */
.com-content-article { max-width: none; margin: 0; padding: 0 0 70px; counter-reset: mhsvc; }
.mh-band { position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse 55% 95% at 82% 50%, rgba(201,168,76,.05), transparent 62%), var(--mh-bg-2);
  margin: 0; padding: 84px var(--mh-edge); border-top: 1px solid var(--mh-border); border-bottom: 1px solid var(--mh-border); }
.mh-band .mh-lead { margin: 0 auto; font-size: 1.18rem; color: var(--mh-text); max-width: 800px; line-height: 1.85; }
.mh-section { padding: 64px var(--mh-edge); }
.mh-section > h2, .com-content-article h2 { font-size: clamp(30px,3.2vw,44px); color: var(--mh-strong); line-height: 1.15; margin: 0 0 14px; }
.com-content-article h3 { font-size: 1.48rem; color: var(--mh-strong); margin: 22px 0 8px; }
.com-content-article p { color: var(--mh-text-2); line-height: 1.9; font-size: 1.02rem; }
.mh-check { list-style: none; padding: 0; margin: 26px 0; columns: 2; column-gap: 64px; }
.mh-check li { position: relative; padding-left: 1.9rem; margin-bottom: 14px; color: var(--mh-text-2); font-size: .98rem; line-height: 1.6; break-inside: avoid; }
.mh-check li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--mh-gold); font-size: .82rem; line-height: 1.78; font-weight: 700; }
.mh-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 14px; background: transparent; list-style: none; padding: 0; margin: 32px 0; }
.mh-cards > li { background: var(--mh-bg-2); border: 1px solid var(--mh-border); border-top: 2px solid var(--mh-gold); padding: 34px 30px; list-style: none; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.mh-cards > li:hover { background: var(--mh-surface); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }

/* Cartes « icône + titre + description » (style JadeStone) */
.mh-icards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; list-style: none; padding: 0; margin: 46px 0 0; }
.mh-icard {
  flex: 1 1 300px; max-width: 380px; background: var(--mh-bg-2);
  border: 1px solid var(--mh-border); border-radius: 6px; padding: 46px 34px 40px; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mh-icard:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.24); border-color: rgba(201,168,76,.35); }
.mh-icard-ic {
  width: 58px; height: 58px; margin: 0 auto 24px; border-radius: 12px;
  background: rgba(201,168,76,.12); color: var(--mh-gold);
  display: flex; align-items: center; justify-content: center; font-size: 25px;
}
.mh-icard h3 { font-family: var(--mh-serif); font-size: 1.5rem; color: var(--mh-strong); margin: 0 0 12px; line-height: 1.2; }
.mh-icard p { font-size: .92rem; color: var(--mh-text-2); line-height: 1.7; margin: 0; }
/* Grilles de 4 cartes : 2×2 équilibré (les grilles de 3 restent sur une ligne) */
.mh-icards:has(> li:nth-child(4):last-child) .mh-icard { flex: 1 1 calc(50% - 11px); max-width: 470px; }
@media (max-width: 991px) { .mh-icard { flex-basis: 44%; } }
@media (max-width: 575px) { .mh-icard, .mh-icards:has(> li:nth-child(4):last-child) .mh-icard { flex-basis: 100%; max-width: none; } }
.mh-cards > li h3 { margin: 0; font-size: 1.28rem; color: var(--mh-strong); }
/* Numéro d'étape (eyebrow dans une icard) */
.mh-icard-step { display: block; font-family: var(--mh-serif); font-size: 1.5rem; color: var(--mh-gold); letter-spacing: 1px; margin: -6px 0 10px; }
/* Panneau « insight vedette » */
.mh-feature { background: var(--mh-bg-2); border: 1px solid var(--mh-border); border-top: 2px solid var(--mh-gold); border-radius: 6px; padding: 54px 50px 50px; margin-top: 46px; }
.mh-feature > .mh-eyebrow { margin-bottom: 16px; }
.mh-feature h2 { margin: 0 0 18px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.mh-feature > p { max-width: 840px; color: var(--mh-text-2); font-size: 1.02rem; line-height: 1.85; margin: 0; }
.mh-feature .mh-icards { margin-top: 40px; }
@media (max-width: 575px) { .mh-feature { padding: 38px 22px 32px; } }
.mh-steps { list-style: none; padding: 0; margin: 32px 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 28px; counter-reset: mhstep; }
.mh-steps > li { counter-increment: mhstep; text-align: center; padding: 0 12px; color: var(--mh-text-2); font-size: .95rem; line-height: 1.7; }
.mh-steps > li::before { content: counter(mhstep,decimal-leading-zero); display: block; font-family: var(--mh-serif); font-size: 2.1rem; color: var(--mh-gold); margin-bottom: 10px; }
.mh-services { counter-reset: mhsvc; }
.mh-service { position: relative; overflow: hidden; padding: 78px var(--mh-edge); border-top: 1px solid var(--mh-border); counter-increment: mhsvc; }
.mh-service:nth-child(odd) { background: var(--mh-bg-2); }
.mh-service::before {
  content: counter(mhsvc,decimal-leading-zero);
  position: absolute; top: 28px; right: max(36px, var(--mh-edge));
  font-family: var(--mh-serif); font-size: 9.5rem; line-height: 1;
  color: rgba(201,168,76,.09); pointer-events: none; user-select: none;
}
.mh-service > h2 { position: relative; margin-bottom: 0; max-width: 780px; }
.mh-service > h2::after { content: ''; display: block; width: 56px; height: 2px; background: var(--mh-gold); margin-top: 20px; }
.mh-service > .mh-lead { margin: 24px 0 30px; max-width: 780px; }
.mh-service .mh-check { margin-top: 6px; max-width: 1000px; }
/* Icône en tête de bloc de service */
.mh-service-ic { width: 48px; height: 48px; border-radius: 10px; background: rgba(201,168,76,.12); color: var(--mh-gold); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.mh-service-ic svg { width: 25px; height: 25px; }
/* Décalage d'ancrage sous l'en-tête fixe (défilement depuis les cartes) */
.mh-service { scroll-margin-top: calc(var(--mh-header-h, 116px) + 16px); }
/* Cartes d'aperçu cliquables */
.mh-icard-link { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; color: inherit; text-decoration: none; }
.mh-icard-link:hover { color: inherit; }

/* Bandeau CTA (dernier .mh-hero d'un article) : compact, centré, empilé
   — corrige le min-height 88vh et l'alignement horizontal hérités du hero principal. */
.com-content-article .mh-hero:last-child {
  min-height: auto; padding: 88px var(--mh-edge);
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.com-content-article .mh-hero:last-child h2 { color: var(--mh-strong); margin: 0; }
.com-content-article .mh-hero:last-child p { margin: 16px 0 0; color: var(--mh-text-2); font-size: 1.05rem; max-width: 640px; }
.com-content-article .mh-hero:last-child .mh-hero-btns,
.com-content-article .mh-hero:last-child p:last-child { margin-top: 30px; justify-content: center; }

/* ====================================================================
   17. RESPONSIVE
==================================================================== */
@media (max-width: 991.98px) {
  .mh-wrap { padding: 0 28px; }
  .mh-sec { padding: 72px 0; }
  .mh-hero { padding: 100px 28px 64px; }
  .mh-split, .mh-contact { grid-template-columns: 1fr; gap: 48px; }
  .mh-grid-2, .mh-grid-3, .mh-team { grid-template-columns: 1fr; }
  .mh-stats { grid-template-columns: repeat(2,1fr); }
  .mh-stats > *:nth-child(2) { border-right: none; }
  .mh-process { grid-template-columns: repeat(2,1fr); gap: 36px; }
  .mh-process::before { display: none; }
  .mh-hero-char { font-size: 140px; opacity: .6; }
  .mh-check, .mh-service .mh-check { columns: 1; }
  .mh-service { padding-top: 56px; padding-bottom: 56px; }
  .mh-service::before { font-size: 5rem; top: 18px; }
}
@media (max-width: 575.98px) {
  .mh-stats { grid-template-columns: 1fr; }
  .mh-stats > * { border-right: none; border-bottom: 1px solid var(--mh-border-2); }
}

/* ====================================================================
   18. EN-TÊTE MOBILE (menu hamburger déroulant)
==================================================================== */
.mh-burger {
  display: none; width: 42px; height: 42px; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 0;
  background: transparent; border: 1px solid var(--mh-border); border-radius: 5px; cursor: pointer;
}
.mh-burger span { display: block; width: 20px; height: 1.5px; background: var(--mh-gold); transition: transform .3s ease, opacity .3s ease; }
.container-header.mh-nav-open .mh-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.container-header.mh-nav-open .mh-burger span:nth-child(2) { opacity: 0; }
.container-header.mh-nav-open .mh-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1199.98px) {
  .container-header { flex-wrap: wrap; padding: 0 20px; align-items: center; }
  .container-header > .container-topbar { order: 0; flex: 0 0 100%; justify-content: center; flex-wrap: wrap; padding: 7px 0 6px; }
  .container-header > .grid-child:not(.container-nav) { order: 1; flex: 1 1 auto; padding: 12px 0; }
  .mh-burger { order: 2; display: inline-flex; }
  .container-header > .container-nav { order: 3; flex: 0 0 100%; max-height: 0; overflow: hidden; padding: 0; transition: max-height .35s ease; }
  .container-header.mh-nav-open { background: var(--mh-header-bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom-color: var(--mh-border); }
  .container-header.mh-nav-open > .container-nav { max-height: 74vh; overflow-y: auto; }
  .container-nav .mod-menu, .container-nav .mod-menu.nav { flex-direction: column; gap: 0; align-items: stretch; width: 100%; padding: 4px 0 16px; }
  .container-nav .mod-menu > li { width: 100%; border-top: 1px solid var(--mh-border-2); }
  .container-nav .mod-menu > li > a { display: block; padding: 15px 6px; }
  .container-nav .mod-menu > li > a::after { display: none; }
  .container-header .navbar-brand a::before { font-size: 1.25rem; letter-spacing: 3px; }
  .container-header .navbar-brand a::after { display: none; }
  .mod-languages__list a { padding: 5px 11px; letter-spacing: 1.4px; font-size: .58rem; }
}