/* Mekong Digital — registre « clean » : une seule famille sans-serif, titres
   tres grands et resserres, blanc dominant, coins arrondis, boutons en
   gelule, aucune bordure decorative, beaucoup de vide.
   Reference assumee : Apple et Tesla. */

:root {
  --bg: #FFFFFF;
  --bg-2: #F5F5F7;
  --bg-3: #EBEBEF;
  --ink: #1D1D1F;
  --body: #424245;
  --muted: #6E6E73;
  --line: #D2D2D7;
  --accent: #0066CC;
  --invert-bg: #000000;
  --invert-ink: #F5F5F7;
  --invert-body: #A1A1A6;
  --invert-line: #2C2C2E;
  --sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wrap: 1180px;
  --narrow: 820px;
  --gutter: clamp(22px, 5vw, 56px);
  --r: 14px;
  --r-lg: 22px;
  --pill: 980px;
  --section: clamp(68px, 10vw, 136px);
  /* Ombres a deux couches : une courte et dense qui pose l'objet sur le fond,
     une longue et diffuse qui lui donne sa hauteur. Une seule couche donne
     toujours l'air d'un autocollant. */
  --shadow-s: 0 1px 2px rgba(16, 18, 27, .05), 0 3px 10px rgba(16, 18, 27, .045);
  --shadow-m: 0 2px 4px rgba(16, 18, 27, .06), 0 12px 30px rgba(16, 18, 27, .085);
  --shadow-l: 0 4px 10px rgba(16, 18, 27, .07), 0 26px 60px rgba(16, 18, 27, .13);
  /* Une surface n'est jamais d'un gris plat : elle recoit un peu de lumiere
     par le haut. */
  --surface: linear-gradient(180deg, #FFFFFF 0%, #F6F7FA 100%);
  --surface-2: linear-gradient(180deg, #FAFAFC 0%, #F1F2F6 100%);
  --edge: rgba(16, 18, 27, .08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-2: #1C1C1E;
    --bg-3: #2C2C2E;
    --ink: #F5F5F7;
    --body: #C7C7CC;
    --muted: #98989D;
    --line: #2C2C2E;
    --accent: #2997FF;
    --invert-bg: #1C1C1E;
    --invert-ink: #F5F5F7;
    --invert-body: #A1A1A6;
    --invert-line: #3A3A3C;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .4);
    --shadow-m: 0 2px 4px rgba(0, 0, 0, .55), 0 12px 30px rgba(0, 0, 0, .5);
    --shadow-l: 0 4px 10px rgba(0, 0, 0, .6), 0 26px 60px rgba(0, 0, 0, .62);
    --surface: linear-gradient(180deg, #202023 0%, #171719 100%);
    --surface-2: linear-gradient(180deg, #27272B 0%, #1C1C1F 100%);
    --edge: rgba(255, 255, 255, .09);
  }
}

:root[data-theme="dark"] {
  --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E;
  --ink: #F5F5F7; --body: #C7C7CC; --muted: #98989D; --line: #2C2C2E;
  --accent: #2997FF;
  --invert-bg: #1C1C1E; --invert-ink: #F5F5F7;
  --invert-body: #A1A1A6; --invert-line: #3A3A3C;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .4);
    --shadow-m: 0 2px 4px rgba(0, 0, 0, .55), 0 12px 30px rgba(0, 0, 0, .5);
    --shadow-l: 0 4px 10px rgba(0, 0, 0, .6), 0 26px 60px rgba(0, 0, 0, .62);
    --surface: linear-gradient(180deg, #202023 0%, #171719 100%);
    --surface-2: linear-gradient(180deg, #27272B 0%, #1C1C1F 100%);
    --edge: rgba(255, 255, 255, .09);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  /* clip et non hidden : le bandeau clients deborde en 100vw, et hidden
     casserait l'en-tete collante. */
  overflow-x: clip;
  /* Une nappe froide tres pale sous l'entete, et un fond qui se rechauffe
     vers le bas. De loin on ne la voit pas ; on voit juste que la page
     n'est pas un carre blanc. */
  background:
    radial-gradient(1100px 540px at 50% -140px, rgba(0, 102, 204, .075), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 58%, var(--bg-2) 100%);
  background-attachment: scroll, fixed;
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Les ecritures de la region ont besoin de leur propre fonte et de plus
   d'interligne : les signes montent et descendent plus que l'alphabet latin,
   et avec 1.62 ils se touchent d'une ligne a l'autre. */
:lang(km) { font-family: "Kantumruy Pro", var(--sans); line-height: 1.95; }
:lang(th) { font-family: "Noto Sans Thai", var(--sans); line-height: 1.85; }
:lang(lo) { font-family: "Noto Sans Lao", var(--sans); line-height: 1.85; }
/* Le khmer, le thai et le lao ne portent pas de capitales : les mettre en
   majuscules ne change rien, mais l'interlettrage casse les signes
   combinatoires. On annule les deux. */
:lang(km) .org-country, :lang(th) .org-country, :lang(lo) .org-country,
:lang(km) .eyebrow, :lang(th) .eyebrow, :lang(lo) .eyebrow {
  text-transform: none; letter-spacing: 0; }
/* Titres : pas de resserrage optique sur ces ecritures, et un corps un peu
   plus petit — a taille egale, un titre khmer occupe une ligne de plus qu'un
   titre latin, et les signes souscrits demandent de l'air sous la ligne. */
:lang(km) h1, :lang(km) h2, :lang(km) h3,
:lang(th) h1, :lang(th) h2, :lang(th) h3,
:lang(lo) h1, :lang(lo) h2, :lang(lo) h3 { letter-spacing: 0; }
:lang(km) h1, :lang(th) h1, :lang(lo) h1 {
  font-size: clamp(32px, 5.4vw, 62px); line-height: 1.38; }
:lang(km) h2, :lang(th) h2, :lang(lo) h2 { line-height: 1.42; }
:lang(km) .hero h1, :lang(th) .hero h1, :lang(lo) .hero h1 { max-width: 26ch; }

h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; }
h1 {
  font-size: clamp(40px, 7.4vw, 84px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(27px, 4.2vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 0 0.5em;
}
h3 {
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 0.45em;
}
p { margin: 0 0 1.1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: var(--bg); padding: 12px 20px;
  border-radius: var(--pill); font-weight: 600; }
.skip:focus { left: 10px; top: 10px; }

/* ─── entete ────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px;
  padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; flex-grow: 1;
  color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -0.022em; }
.brand:hover { text-decoration: none; }
.brand svg { color: var(--ink); flex: 0 0 auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px 28px; }
.site-nav a { color: var(--body); font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.005em; min-height: 44px;
  display: inline-flex; align-items: center; }
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.head-end { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.langs { display: flex; gap: 4px; font-size: 12.5px; font-weight: 600; }
.langs a, .langs span { color: var(--muted); min-height: 44px; padding-inline: 6px;
  display: inline-flex; align-items: center; letter-spacing: 0.02em; }
.langs a:hover { color: var(--ink); text-decoration: none; }
.langs [aria-current="true"] { color: var(--ink); }

/* ─── boutons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 14px 30px;
  background: var(--ink); color: var(--bg);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  border: 0; border-radius: var(--pill);
  transition: opacity .18s ease, transform .18s ease;
}
.btn:hover { opacity: .85; text-decoration: none; color: var(--bg); }
.btn:active { transform: scale(.985); }
.btn-sm { min-height: 40px; padding: 9px 20px; font-size: 14px; }

a.pill {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--line); border-radius: var(--pill);
  color: var(--ink); font-size: 14.5px; font-weight: 500;
  transition: background-color .18s ease, border-color .18s ease;
}
a.pill:hover { background: var(--bg-2); border-color: var(--muted);
  text-decoration: none; }
a.pill svg.ico { color: currentColor; }

svg.ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ─── bascule clair / sombre ────────────────────────────────────────────── */
/* Le bouton montre l'etat vers lequel on va, pas l'etat courant. */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--pill);
  transition: background-color .18s ease, border-color .18s ease;
}
.theme-btn:hover { background: var(--bg-2); border-color: var(--muted); }
.theme-btn .sun { display: none; }
.theme-btn .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: none; }
}
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: block; }

/* ─── sous-menu « Services » ────────────────────────────────────────────── */
details.nav-group { position: relative; }
details.nav-group > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 500; color: var(--body);
}
details.nav-group > summary::-webkit-details-marker { display: none; }
details.nav-group > summary::marker { content: ""; }
details.nav-group > summary:hover { color: var(--ink); }
details.nav-group > summary[aria-current="true"] { color: var(--ink); font-weight: 600; }
.chev { width: 14px; height: 14px; transition: transform .2s ease; }
details[open] > summary .chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 30;
  width: min(640px, 86vw);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  padding: 10px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .16);
  animation: menuIn .2s cubic-bezier(.2, .7, .2, 1);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.nav-menu a {
  display: flex; align-items: center; gap: 12px; min-height: 46px;
  padding: 11px 14px; border-radius: 10px;
  color: var(--ink); font-size: 14.5px; font-weight: 500;
}
.nav-menu a:hover { background: var(--bg-2); text-decoration: none; }
.nav-menu a[aria-current="page"] { background: var(--bg-2); font-weight: 600; }
.nav-all { grid-column: 1 / -1; color: var(--accent); font-weight: 600;
  margin-bottom: 4px; }

/* ─── motifs ────────────────────────────────────────────────────────────── */
.motif { display: block; color: var(--ink); }
.motif-xs { width: 22px; height: 22px; flex: 0 0 auto;
  color: var(--muted); stroke-width: 7; }
.motif-sm { width: 58px; height: 44px; margin-bottom: 22px;
  opacity: .5; stroke-width: 3.4;
  transition: opacity .25s ease, transform .25s ease; }
.card:hover .motif-sm { opacity: 1; transform: translateY(-2px); }
.card-mark .motif-sm { margin-bottom: 0; }
.hero-motif { display: flex; justify-content: center;
  margin-bottom: clamp(22px, 3vw, 38px); }
.motif-lg { width: clamp(132px, 16vw, 196px); height: auto; opacity: .45;
  animation: motifIn .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes motifIn {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to { opacity: .45; transform: none; }
}

/* ─── entrees et apparitions ────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero h1, .hero .lede, .hero .hero-cta {
  animation: fadeUp .85s cubic-bezier(.2, .7, .2, 1) both;
}
.hero h1 { animation-delay: .06s; }
.hero .lede { animation-delay: .18s; }
.hero .hero-cta { animation-delay: .3s; }

/* La classe n'est posee que par le script : sans JavaScript, rien n'est cache. */
.reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1),
              transform .75s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ─── fil d'ariane ──────────────────────────────────────────────────────── */
.crumbs { max-width: var(--wrap); margin: 0 auto;
  padding: 26px var(--gutter) 0; font-size: 13.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ─── accroche ──────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(56px, 9vw, 118px) clamp(12px, 2vw, 24px);
  text-align: center; }

/* Accroche photographique : l'image occupe toute la largeur et toute la
   hauteur du bloc, le titre se pose dessus en bas a gauche. Le voile sombre
   n'est pas decoratif, il garantit le contraste du texte quelle que soit la
   photo — sans lui, un ciel clair rendrait le titre illisible. */
.hero-shot { position: relative; overflow: hidden;
  min-height: clamp(520px, 74vh, 800px);
  display: flex; align-items: flex-end; text-align: left;
  padding-block: clamp(90px, 12vw, 150px) clamp(44px, 6vw, 76px);
  color: #FFFFFF; }
.hero-shot .wrap { max-width: var(--wrap); width: 100%; }
.hero-shot h1 { color: #FFFFFF; margin-inline: 0; max-width: 17ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero-shot .lede { margin-inline: 0; color: rgba(255, 255, 255, .86);
  max-width: 50ch; text-shadow: 0 1px 16px rgba(0, 0, 0, .4); }
.hero-shot .hero-motif { display: none; }
.hero-shot .btn { background: #FFFFFF; color: #111113; box-shadow: var(--shadow-m); }
.hero-shot .btn:hover { color: #111113; opacity: .9; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: calc(100% + 80px); margin-top: -40px;
  object-fit: cover; display: block; }
/* Deux voiles superposes : un vertical qui assoit le bloc, un horizontal qui
   assombrit la colonne du texte. Avec le seul voile vertical, une accroche
   posee sur une ville devient illisible des que le batiment est clair. */
.hero-media::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(8, 10, 14, .72) 0%, rgba(8, 10, 14, .46) 38%,
      rgba(8, 10, 14, .10) 72%, rgba(8, 10, 14, 0) 100%),
    linear-gradient(180deg, rgba(8, 10, 14, .50) 0%, rgba(8, 10, 14, .10) 34%,
      rgba(8, 10, 14, .30) 62%, rgba(8, 10, 14, .80) 100%); }
.hero-shot > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .hero-shot { min-height: 76vh; }
  .hero-shot h1 { max-width: none; }
}
.hero .wrap { max-width: var(--narrow); }
.hero h1 { margin-inline: auto; max-width: 20ch; }
.lede { margin: clamp(22px, 2.6vw, 30px) auto 0; max-width: 46ch;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5;
  font-weight: 400; color: var(--muted); letter-spacing: -0.012em; }
.hero-cta { margin: clamp(28px, 3.4vw, 40px) 0 0; }

/* ─── corps ─────────────────────────────────────────────────────────────── */
.body-copy { padding-block: var(--section) calc(var(--section) * .8); }
.body-copy > h2 { margin-top: 2.1em; max-width: 24ch; }
.body-copy > h2:first-child { margin-top: 0; }
.body-copy > p, .body-copy > .list { max-width: 62ch; }

.list { margin: 0 0 1.7em; padding: 0; list-style: none; }
.list li { position: relative; padding-left: 28px; margin-bottom: 0.7em; }
.list li::before { content: ""; position: absolute; left: 4px; top: 0.72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .35; }

/* ─── tuiles de prestations ─────────────────────────────────────────────── */
.cards { display: grid; gap: 16px; margin: clamp(36px, 4.5vw, 56px) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-lg); box-shadow: var(--shadow-s);
  color: var(--body);
  transition: transform .34s cubic-bezier(.16, 1, .3, 1),
              box-shadow .34s cubic-bezier(.16, 1, .3, 1),
              border-color .34s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l);
  border-color: transparent; text-decoration: none; color: var(--body); }
/* Le visuel deborde legerement au survol : le mouvement de la tuile et celui
   de l'image ne vont pas a la meme vitesse, et c'est ce decalage qui donne
   l'impression de relief plutot qu'un simple deplacement. */
.card-pic { position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--bg-3); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.card:hover .card-pic img { transform: scale(1.055); }
.card-pic::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 10, 14, .55) 100%); }
.motif-badge { position: absolute; left: 18px; bottom: 14px; z-index: 1;
  width: 38px; height: 29px; color: #FFFFFF;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55)); }
.card-mark { display: block; padding: clamp(28px, 3.2vw, 38px) 0 0
  clamp(28px, 3.2vw, 38px); }
.card-body { display: flex; flex-direction: column; flex: 1 1 auto;
  padding: clamp(24px, 2.6vw, 32px); }
.card h3 { margin: 0 0 10px; }
.card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
/* Pousse la fleche en bas de tuile : toutes s'alignent quel que soit le
   nombre de lignes du texte. */
.card-go { margin-top: auto; padding-top: 24px; color: var(--accent);
  font-size: 17px; font-weight: 600; }
.card[aria-current="page"] { border-color: var(--accent); }

/* ─── section inversee ─────────────────────────────────────────────────── */
.band { position: relative; isolation: isolate; overflow: hidden; margin: 0;
  background:
    radial-gradient(760px 380px at 50% -60px, rgba(41, 151, 255, .16), transparent 68%),
    linear-gradient(180deg, #121215 0%, #000000 100%);
  padding-block: var(--section); text-align: center; }
.band h2 { color: var(--invert-ink); margin-inline: auto; max-width: 22ch; }
.band > .wrap > p { color: var(--invert-body); margin-inline: auto; max-width: 48ch;
  font-size: clamp(17px, 1.5vw, 20px); }

.steps { list-style: none; margin: clamp(44px, 5.5vw, 72px) 0 0; padding: 0;
  display: grid; gap: clamp(30px, 3.6vw, 48px); text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.step { padding-top: 26px; border-top: 1px solid var(--invert-line); }
.step h3 { color: var(--invert-ink); }
.step p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--invert-body); }
.step-n { margin: 0 0 14px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--invert-body); opacity: .7; }

/* ─── zone d'intervention ───────────────────────────────────────────────── */
.coverage { margin: clamp(44px, 5vw, 68px) 0; padding: clamp(30px, 3.6vw, 44px);
  border: 1px solid var(--edge); box-shadow: var(--shadow-s);
  background: var(--surface-2) !important;
  background: var(--bg-2); border-radius: var(--r-lg); text-align: center; }
.coverage h2 { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px; max-width: none; }
.coverage p { margin: 0 auto; max-width: 44ch;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.4; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); }

/* ─── faits et coordonnees ──────────────────────────────────────────────── */
.facts { margin: clamp(30px, 3.4vw, 44px) 0 0; }
.facts .row { display: flex; flex-wrap: wrap; gap: 6px 32px;
  padding: 22px 0; border-top: 1px solid var(--line); }
.facts .row:last-child { border-bottom: 1px solid var(--line); }
.facts dt { flex: 1 1 180px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding-top: 5px; }
/* L'icone reste collee a sa valeur meme quand le texte tient sur trois
   lignes : nowrap sur le conteneur, et la valeur retrecit au lieu de passer
   dessous. */
.facts dd { flex: 2 1 300px; margin: 0; font-size: 17px; color: var(--ink);
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
.facts dd > .v { flex: 1 1 auto; min-width: 0; }
.facts dd svg.ico { color: var(--muted); margin-top: 4px; }
.facts dd a:not(.pill) { color: var(--accent); overflow-wrap: anywhere; }
.num-big { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600;
  letter-spacing: -0.025em; color: var(--ink); }
.chan { gap: 16px; flex-wrap: wrap; align-items: center; }
.chan-ico { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.js-note { font-size: 14.5px; color: var(--muted); margin-top: 16px; }

/* ─── clients ───────────────────────────────────────────────────────────── */
/* Bandeau defilant. Il deborde la colonne de texte pour aller d'un bord a
   l'autre de la fenetre, avec un fondu a gauche et a droite : les cases
   entrent et sortent du champ au lieu d'etre coupees net. */
.marquee { margin: clamp(32px, 4vw, 48px) 0 0; padding-block: 10px;
  width: 100vw; position: relative; left: 50%; transform: translateX(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track { display: flex; width: max-content;
  animation: marquee 72s linear infinite; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.orgs { list-style: none; margin: 0; padding: 0 7px;
  display: flex; gap: 14px; }
.orgs li { background: var(--surface); border: 1px solid var(--edge);
  box-shadow: var(--shadow-s); border-radius: var(--r);
  flex: 0 0 auto; width: 180px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center;
  min-height: 112px; padding: 22px 20px; text-align: center;
  transition: background-color .2s ease; }
.org-country { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); }
/* Sans animation, le defilement n'a plus lieu : la piste devient une bande
   que le visiteur fait glisser lui-meme, et le doublon disparait. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track > ul[aria-hidden="true"] { display: none; }
}
.orgs li:hover { box-shadow: var(--shadow-m); }
.org-name { font-size: clamp(16px, 1.5vw, 19px); font-weight: 600;
  letter-spacing: -0.015em; color: var(--ink); text-align: center; }
.org-logo { max-width: 100%; width: auto; height: auto; max-height: 44px;
  object-fit: contain; filter: grayscale(1); opacity: .65;
  transition: filter .2s ease, opacity .2s ease; }
.orgs li:hover .org-logo { filter: grayscale(0); opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .org-logo { filter: grayscale(1) invert(1) brightness(1.8); }
  :root:not([data-theme="light"]) .orgs li:hover .org-logo { filter: invert(1) brightness(1.5); }
}

/* ─── tableau des formations ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: clamp(30px, 3.4vw, 44px) 0 0;
  background: var(--surface); border: 1px solid var(--edge);
  box-shadow: var(--shadow-s); border-radius: var(--r-lg);
  padding: clamp(10px, 1.6vw, 20px) clamp(20px, 2.6vw, 32px); }
table { width: 100%; border-collapse: collapse; min-width: 380px; }
caption { text-align: left; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 16px 0; }
th, td { text-align: left; padding: 17px 12px 17px 0;
  border-top: 1px solid var(--line); }
tr:first-child th, tr:first-child td { border-top: 0; }
th { font-size: 16.5px; font-weight: 500; color: var(--ink); }
td { font-size: 15px; color: var(--muted); text-align: left; padding-right: 0; }

/* ─── missions ──────────────────────────────────────────────────────────── */
.cases { display: grid; gap: 16px; margin: clamp(32px, 4vw, 48px) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.case { background: var(--surface); border: 1px solid var(--edge);
  box-shadow: var(--shadow-s); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease; }
.case h3 { margin: 0 0 12px; }
.case p { font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.case-meta { margin: 0 0 14px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.case-result { margin: 0; font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); }

/* ─── pied de page ──────────────────────────────────────────────────────── */
/* Le pied ne commence pas net : il se fond depuis le corps de la page, avec
   un filet lumineux sur l'arete pour marquer la separation sans tracer un
   trait gris. */
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.case-body { padding: clamp(28px, 3.2vw, 40px); }

/* Fond photographique de la section inversee. */
.band-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .16; }
.band::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .62) 100%); }
.band > .wrap { position: relative; z-index: 1; }

.site-foot { position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 22%, var(--bg-3) 100%); }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: linear-gradient(90deg, transparent,
    var(--edge) 18%, var(--edge) 82%, transparent); }
.foot-grid { display: grid; gap: clamp(32px, 4vw, 52px);
  padding-block: clamp(48px, 6vw, 76px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 10px; }
.foot-grid a:not(.pill) { color: var(--body); font-size: 14.5px; }
.foot-grid a:not(.pill):hover { color: var(--ink); text-decoration: none; }
.foot-brand { margin: 0 0 14px; font-size: 18px; font-weight: 700;
  letter-spacing: -0.022em; color: var(--ink); }
/* Le numero ne figure plus au pied de page : il reste sur la page contact,
   et les gelules Telegram / WhatsApp / Email y menent directement. */
.foot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.foot-h { margin: 0 0 16px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.foot-small { margin: 0; font-size: 14.5px; color: var(--muted); }
.foot-bar { border-top: 1px solid var(--line); padding-block: 22px; }
.foot-bar p { margin: 0; font-size: 13px; color: var(--muted); }

/* ─── racine ────────────────────────────────────────────────────────────── */
.root-pick { display: grid; place-items: center; min-height: 100vh;
  text-align: center; }
.root-langs { list-style: none; margin: 38px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.root-langs a { display: inline-flex; align-items: center; min-height: 50px;
  padding: 14px 30px; background: var(--ink); color: var(--bg);
  border-radius: var(--pill); font-weight: 600; font-size: 15px; }
.root-langs a:hover { opacity: .85; text-decoration: none; color: var(--bg); }

/* ─── adaptations ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-head { position: static; }
  .brand { flex: 1 1 100%; }
  .site-nav { flex: 1 1 100%; order: 3; gap: 0 22px; align-items: flex-start; }
  .head-end { margin-left: auto; }
  /* Le sous-menu se deplie dans le flux : pas de panneau flottant au doigt. */
  details.nav-group { position: static; flex: 1 1 100%; }
  .nav-menu { position: static; width: 100%; grid-template-columns: 1fr;
    box-shadow: none; margin: 6px 0 10px; animation: none; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .hero { padding-block: 40px 10px; }
  .hero h1 { max-width: none; }
  td { white-space: normal; }
  .facts dt { flex-basis: 100%; }
}

@media print {
  .site-head, .site-foot, .crumbs, .skip { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .card, .case, .coverage, .table-wrap, .orgs li { background: none;
    border: 1px solid #ccc; }
  .band { background: none; }
  .band h2, .step h3, .band p, .step p { color: #000; }
  /* A l'impression, le bandeau clients se deplie sur plusieurs lignes :
     rien ne defile sur du papier. */
  .marquee { width: auto; left: auto; transform: none; overflow: visible;
    -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; animation: none; }
  .marquee-track > ul[aria-hidden="true"] { display: none; }
  .orgs { flex-wrap: wrap; }
}

/* La bande photographique a laisse place a l'accroche photographique :
   l'image est passee dans le hero, ces regles n'ont plus d'objet. */


/* ─── entete au-dessus de la photo ──────────────────────────────────────── */
/* Sur une page a photo, l'entete flotte : elle ne pousse plus le contenu vers
   le bas et ne forme plus une barre pleine au-dessus de l'image. Le fil
   d'Ariane est passe dans l'accroche, donc les deux bandeaux empiles ont
   disparu. */
.over-hero .site-head { position: fixed; top: 0; left: 0; right: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color .3s ease, border-color .3s ease,
              backdrop-filter .3s ease; }
.over-hero .site-head .brand,
.over-hero .site-head .site-nav a,
.over-hero .site-head details.nav-group > summary,
.over-hero .site-head details.nav-group > summary[aria-current="true"],
.over-hero .site-head .theme-btn,
.over-hero .site-head .langsel,
.over-hero .site-head .langsel-chev { color: #FFFFFF; }
.over-hero .site-head .theme-btn,
.over-hero .site-head .langsel { border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .10); }
.over-hero .site-head .btn { background: #FFFFFF; color: #111113; }

/* Des que la page defile, l'entete reprend un fond : sans lui, le menu
   deviendrait illisible sur le corps de page clair. */
.over-hero .site-head.stuck {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: var(--line); }
.over-hero .site-head.stuck .brand,
.over-hero .site-head.stuck details.nav-group > summary { color: var(--body); }
.over-hero .site-head.stuck .brand,
.over-hero .site-head.stuck details.nav-group > summary[aria-current="true"] {
  color: var(--ink); }
.over-hero .site-head.stuck .site-nav a { color: var(--body); }
.over-hero .site-head.stuck .site-nav a:hover { color: var(--ink); }
.over-hero .site-head.stuck .theme-btn,
.over-hero .site-head.stuck .langsel,
.over-hero .site-head.stuck .langsel-chev { color: var(--ink);
  border-color: var(--line); background: transparent; }
.over-hero .site-head.stuck .btn { background: var(--ink); color: var(--bg); }

/* Le fil d'Ariane sur la photo. */
.hero-shot .crumbs { margin: 0 0 clamp(18px, 2.4vw, 28px); padding: 0;
  max-width: none; color: rgba(255, 255, 255, .72); }
.hero-shot .crumbs a { color: rgba(255, 255, 255, .72); }
.hero-shot .crumbs a:hover { color: #FFFFFF; }
.hero-shot .crumbs [aria-current] { color: #FFFFFF; }

/* ─── selecteur de langue ───────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.langpick { position: relative; display: inline-flex; align-items: center; }
.langsel {
  appearance: none; -webkit-appearance: none;
  min-height: 40px; padding: 8px 34px 8px 14px;
  max-width: 11.5rem; text-overflow: ellipsis;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: var(--pill);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.langsel:hover { border-color: var(--muted); }
.langsel option { color: #111113; background: #FFFFFF; }
/* Le chevron est dessine par-dessus : la fleche native est differente sur
   chaque systeme et ne suit pas la couleur du texte. */
.langsel-chev { position: absolute; right: 13px; width: 14px; height: 14px;
  pointer-events: none; color: var(--muted); }
.langsel-ns { display: flex; gap: 8px; font-size: 12.5px; font-weight: 600; }

/* ─── entete sur petit ecran ─────────────────────────────────────────────── */
/* A sept langues et avec la bascule de theme, la rangee unique debordait en
   quatre lignes empilees. On passe sur deux lignes nettes : marque + langue +
   theme en haut, menu + Contact en dessous. « display: contents » sur
   .head-end laisse ses trois enfants devenir des cases de la grille sans
   toucher au balisage. */
@media (max-width: 720px) {
  .head-row {
    display: grid; align-items: center; gap: 14px 10px;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "brand theme cta"
      "nav   lang  lang";
  }
  .brand { grid-area: brand; font-size: 17.5px; }
  .head-end { display: contents; }
  .langpick { grid-area: lang; justify-self: end; }
  .theme-btn { grid-area: theme; }
  .head-end .btn { grid-area: cta; justify-self: end; }
  /* Le menu ne doit jamais passer a la ligne : la seconde rangee le partage
     avec le selecteur, et un retour a la ligne ferait une troisieme rangee. */
  .site-nav { grid-area: nav; gap: 0 14px; align-items: center;
    flex-wrap: nowrap; white-space: nowrap; }
  .langsel { max-width: 6.6rem; font-size: 13px; padding: 7px 28px 7px 11px;
    min-height: 38px; }
  /* Le sous-menu sur une colonne : a deux colonnes, les libelles se coupaient
     en trois lignes sur un ecran de telephone. */
  .nav-menu { grid-template-columns: 1fr; width: min(420px, 90vw); }
  .langsel-chev { right: 11px; width: 13px; height: 13px; }
  /* L'entete flottante fait deux lignes : l'accroche doit reserver la place,
     sinon le fil d'Ariane passe dessous. */
  .over-hero .hero-shot { padding-top: 148px; }
}
@media (max-width: 400px) {
  .brand span { font-size: 16px; }
  .langsel { max-width: 6.1rem; }
  .head-end .btn { padding-inline: 16px; }
}

/* Les tres petits ecrans, 320 px de large : la premiere rangee de l'entete
   depassait de la vingtaine de pixels. On recupere la place sur la gouttiere,
   sur le corps de la marque et sur le bouton, plutot que de masquer un
   element. */
@media (max-width: 360px) {
  .wrap { padding-inline: 16px; }
  .head-row { gap: 12px 8px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand svg { width: 22px; height: 22px; }
  .head-end .btn { padding-inline: 14px; font-size: 13.5px; }
  .site-nav { gap: 0 10px; }
  .site-nav a, details.nav-group > summary { font-size: 13.5px; }
  .langsel { max-width: 6.3rem; padding: 7px 25px 7px 9px; }
  .langsel-chev { right: 9px; }
}

/* Le bouton Contact de l'entete porte une enveloppe ET son libelle. Le mot
   suffit tant qu'il y a la place ; sous 420 px il ne reste plus assez de
   largeur pour la marque, le theme et un bouton texte, alors le bouton
   devient rond et ne garde que l'icone. aria-label porte toujours le mot,
   donc rien n'est perdu pour un lecteur d'ecran. */
.head-cta { gap: 8px; }
.head-cta svg.ico { display: none; }
@media (max-width: 420px) {
  .head-cta { width: 40px; min-height: 40px; padding: 0; border-radius: var(--pill);
    justify-content: center; }
  .head-cta svg.ico { display: block; }
  .head-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
}