/* Menu Kohen Avocats : cartes et verre liquide.
   Composant autonome : ce fichier, menu.js, bouton.css et le dossier img/.
   Toutes les règles sont préfixées par .km pour ne rien toucher au reste du site. */

@property --km-beacon { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes km-beacon-rim { to { --km-beacon: 360deg; } }
@keyframes km-beacon-flow { to { transform: rotate(360deg); } }
@keyframes km-beacon-wave { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.32); opacity: 0; } }

.km, .km *, .km *::before, .km *::after { box-sizing: border-box; }

.km {
  --km-ink: #1D1D1F;
  --km-ink-2: #48484D;
  --km-ink-3: #6E6E73;
  --km-studio-top: #D9EAFC;
  --km-studio-mid: #E3EFFC;
  --km-studio-bot: #EDF3FC;
  --km-ochre: #E09019;
  --km-focus: #1F4FA8;
  --km-gap: 14px;
  --km-pad: clamp(16px, 2vw, 28px);
  --km-r-feature: 34px;
  --km-r-card: 26px;
  --km-inset: 8px;
  --km-ease: cubic-bezier(.16, 1, .3, 1);
  --km-spring: cubic-bezier(.3, 1.3, .5, 1);
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--km-ink);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.km[hidden] { display: none !important; }
.km:focus { outline: none; }
.km .km-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

html.km-lock, html.km-lock body { overflow: hidden !important; }

/* Liens, boutons et images : neutralise les styles du thème. */
.km a, .km a:hover, .km a:focus, .km a:visited { color: inherit; text-decoration: none; }
.km button {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0; border: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.km .km-langs button, .km .km-langs button:hover, .km .km-langs button:focus, .km .km-langs button:active {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-decoration: none;
}
.km img { display: block; max-width: none; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.km p, .km ul { margin: 0; padding: 0; }
.km li { list-style: none; margin: 0; padding: 0; }
.km a:focus-visible, .km button:focus-visible { outline: 3px solid var(--km-focus); outline-offset: 3px; }

/* ---------- Le fond : une plaque de verre posée au-dessus de la page ---------- */
.km { --km-lx: 18%; --km-ly: 0%; }
.km .km-vitre {
  position: absolute;
  inset: 10px;
  z-index: 0;
  border-radius: 40px;
  pointer-events: none;
  background:
    radial-gradient(60vmax 44vmax at var(--km-lx) var(--km-ly), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .14));
  -webkit-backdrop-filter: blur(11px) saturate(165%) brightness(1.05);
  backdrop-filter: blur(11px) saturate(165%) brightness(1.05);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    inset 0 0 50px rgba(255, 255, 255, .22),
    0 40px 90px -40px rgba(16, 32, 64, .45);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .36s var(--km-ease), transform .7s var(--km-ease);
}
.km.km-lentille .km-vitre { backdrop-filter: url(#km-lentille) blur(9px) saturate(165%) brightness(1.05); }
.km.is-open .km-vitre { opacity: 1; transform: none; }
@media (prefers-reduced-transparency: reduce) {
  .km .km-vitre { background: rgba(241, 245, 251, .97); }
}

.km .km-sheet {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: opacity .34s var(--km-ease);
}
.km.is-open .km-sheet { opacity: 1; }

/* ---------- Barre du haut, calée sur l'en-tête du site ---------- */
.km .km-bar { position: sticky; top: 0; z-index: 5; height: var(--km-bar-h, 96px); pointer-events: none; }
.km .km-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 -22px;
  background: rgba(241, 245, 251, .72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  opacity: 0;
  transition: opacity .25s linear;
}
.km.is-scrolled .km-bar::before { opacity: 1; }

.km .km-logo {
  position: absolute;
  left: var(--km-logo-x, max(var(--km-pad), calc((100% - 1480px) / 2)));
  top: var(--km-logo-y, calc(var(--km-btn-y, 18px) + var(--km-btn-h, 58px) / 2 - var(--km-logo-h, 67px) / 2));
  width: var(--km-logo-w, 113px);
  height: var(--km-logo-h, 67px);
  pointer-events: auto;
  border-radius: 10px;
}
.km .km-logo img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.km .km-logo::before {
  content: "";
  position: absolute;
  inset: -14px -22px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(247, 250, 254, .96), rgba(247, 250, 254, .85) 62%, rgba(247, 250, 254, 0));
}

/* Bouton de fermeture : même place et même verre que le bouton de menu. */
.km .km-close {
  position: absolute;
  left: var(--km-btn-x, calc(100% - 82px));
  top: var(--km-btn-y, 18px);
  width: var(--km-btn-w, 58px);
  height: var(--km-btn-h, 58px);
  display: grid;
  place-items: center;
  isolation: isolate;
  pointer-events: auto;
  border-radius: 19px;
  background: conic-gradient(from var(--km-beacon), #f7f9fc 0deg, #d5e3f4 50deg, #fff 95deg, #dce8f7 150deg, #eef3fa 205deg, #cfdef1 265deg, #fff 320deg, #f7f9fc 360deg);
  box-shadow: 0 0 0 1px rgba(190, 196, 211, .4), 0 10px 18px -8px rgba(24, 35, 57, .3);
  transition: transform .2s, box-shadow .2s;
}
.km .km-close::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 23px;
  border: 1px solid rgba(136, 141, 148, .18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -2px 1px rgba(255, 255, 255, .45), 0 1px 2px rgba(61, 66, 67, .17);
  pointer-events: none;
  z-index: -2;
}
.km .km-close::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 16.5px;
  z-index: -1;
  background: radial-gradient(ellipse at 35% 0%, rgba(255, 255, 255, .72), transparent 64%), linear-gradient(180deg, #eef1f5, #e2e6ec 65%, #eaedf2);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px #c7ccd6;
  pointer-events: none;
}
.km .km-close:hover, .km .km-close:focus, .km .km-close:active {
  background: conic-gradient(from var(--km-beacon), #f7f9fc 0deg, #d5e3f4 50deg, #fff 95deg, #dce8f7 150deg, #eef3fa 205deg, #cfdef1 265deg, #fff 320deg, #f7f9fc 360deg);
  color: inherit;
  border: 0;
}
.km .km-close:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(190, 196, 211, .45), 0 14px 22px -8px rgba(24, 35, 57, .38); animation: km-beacon-rim 9s linear infinite; }
.km .km-close:active { transform: translateY(1.5px); }
.km .km-close svg { width: 24px; height: 24px; overflow: visible; }
.km .km-close path {
  fill: none;
  stroke: #16191e;
  stroke-width: 1.5;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .5s var(--km-spring);
}
.km.is-open .km-close .km-x1 { transform: translateY(3.5px) rotate(45deg); }
.km.is-open .km-close .km-x2 { transform: translateY(-3.5px) rotate(-45deg); }

/* Liseré de verre : blanc et bleu pâle, discret. */
.km .km-rim::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--km-rim-w, 1.5px);
  pointer-events: none;
  background: conic-gradient(from var(--km-rim, 210deg),
    rgba(255, 255, 255, .95) 0deg, #cfe0f6 55deg, #fff 100deg, rgba(255, 255, 255, .5) 150deg,
    #dbe8f9 205deg, #fff 250deg, #c6daf4 300deg, rgba(255, 255, 255, .95) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .9;
  transition: opacity .4s var(--km-ease);
}

/* Sélecteur de langue en contrôle segmenté. */
.km .km-langs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  position: absolute;
  right: var(--km-langs-r, 96px);
  left: var(--km-langs-l, auto);
  top: var(--km-langs-y, 47px);
  transform: translateY(-50%);
  pointer-events: auto;
  background: rgba(247, 250, 254, .94);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 .5px rgba(29, 29, 31, .1), 0 8px 20px -12px rgba(16, 32, 64, .3);
}
.km .km-langs button {
  position: relative;
  z-index: 1;
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--km-ink-3);
  transition: color .2s, background-color .2s;
}
.km .km-langs button:hover { color: var(--km-ink); }
.km .km-langs button[aria-pressed="true"] { color: var(--km-ink); }
/* Halo derrière le sélecteur : les drapeaux de l'en-tête ne transparaissent plus autour. */
.km .km-langs--bar::before {
  content: "";
  position: absolute;
  inset: -16px -26px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(247, 250, 254, .96), rgba(247, 250, 254, .82) 66%, rgba(247, 250, 254, 0));
  pointer-events: none;
}
.km .km-langs-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -4px rgba(16, 32, 64, .22);
  transition: transform .5s var(--km-spring), width .5s var(--km-spring);
}
.km .km-langs-thumb.km-fixe { transition: none; }
.km .km-langs--foot { display: none; }

/* ---------- Grille (colonnes et rangées posées par menu.js selon le nombre de cartes) ---------- */
.km .km-grid {
  --km-row-s: clamp(136px, 16.5vh, 156px);
  --km-row: clamp(196px, calc((100vh - var(--km-bar-h, 96px) - var(--km-row-s) - 2 * var(--km-gap) - var(--km-pad) - 6px) / 2), 330px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: var(--km-row);
  gap: var(--km-gap);
  width: min(calc(100% - 2 * var(--km-pad)), 1480px);
  margin: 0 auto;
  padding: 6px 0 max(var(--km-pad), env(safe-area-inset-bottom));
}
@supports (height: 100dvh) {
  .km .km-grid {
    --km-row: clamp(196px, calc((100dvh - var(--km-bar-h, 96px) - var(--km-row-s) - 2 * var(--km-gap) - var(--km-pad) - 6px) / 2), 330px);
  }
}

/* ---------- Carte ---------- */
.km .km-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--km-r-card);
  background: linear-gradient(180deg, var(--km-studio-top) 0%, var(--km-studio-mid) 55%, var(--km-studio-bot) 100%);
  color: var(--km-ink);
  box-shadow: 0 1px 1px rgba(16, 24, 40, .04), 0 22px 44px -30px rgba(16, 32, 64, .55);
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.965);
  transition: opacity .5s var(--km-ease), transform .75s var(--km-ease), box-shadow .4s var(--km-ease);
  transition-delay: calc(var(--km-i, 0) * 45ms + 70ms);
  -webkit-tap-highlight-color: transparent;
}
.km.is-open .km-card { opacity: 1; transform: none; }
.km .km-card { --km-rim: calc(196deg + var(--km-i, 0) * 47deg); }
.km.is-settled .km-card, .km.is-closing .km-card { transition-delay: 0s; }
.km.is-closing .km-card { transition-duration: .22s; }
.km .km-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.km .km-stage { position: absolute; inset: 0; z-index: 0; }
.km .km-piece {
  position: absolute;
  opacity: 0;
  transform-origin: 50% 100%;
  transition: transform 1.05s var(--km-spring), opacity .6s var(--km-ease);
  transition-delay: calc(var(--km-i, 0) * 45ms + 230ms);
}
.km .km-piece--cut {
  left: 50%;
  bottom: var(--km-b, 22%);
  width: var(--km-w, auto);
  height: var(--km-h, 72%);
  translate: -50% 0;
  transform: translate3d(0, 18%, 0) scale(.94);
  filter: drop-shadow(0 18px 22px rgba(16, 32, 64, .22));
}
.km .km-piece--photo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--km-pos, 50% 50%);
  scale: var(--km-zoom, 1);
  transform: scale(1.12);
}
/* Carte très large (tablette, téléphone) : cadrage propre à ce format quand le visuel en prévoit un. */
.km .km-tile, .km .km-base { container: km-tuile / size; }
@container km-tuile (min-aspect-ratio: 2/1) {
  .km .km-piece--photo { object-position: var(--km-pos-large, var(--km-pos, 50% 50%)); }
}
.km.is-open .km-piece.is-loaded { opacity: 1; transform: none; }
.km.is-settled .km-piece, .km.is-closing .km-piece { transition-delay: 0s; }

/* ---------- Changement de langue : les cartes sortent puis reviennent en cascade ---------- */
.km .km-grid.km-sortie .km-card {
  opacity: 0;
  transform: translate3d(0, -10px, 0) scale(.97);
  transition-duration: .22s, .26s, .2s;
  transition-delay: calc(var(--km-i, 0) * 18ms);
}
.km .km-card.km-entree { opacity: 0; transform: translate3d(0, 26px, 0) scale(.965); transition: none; }
.km .km-card.km-entree .km-piece--cut { opacity: 0; transform: translate3d(0, 18%, 0) scale(.94); transition: none; }
.km .km-card.km-entree .km-piece--photo { opacity: 0; transform: scale(1.12); transition: none; }
.km.is-switching .km-card { transition-delay: calc(var(--km-i, 0) * 45ms + 30ms); }
.km.is-switching .km-piece { transition-delay: calc(var(--km-i, 0) * 45ms + 190ms); }

/* ---------- La lame de verre posée devant la pièce ---------- */
.km .km-slab {
  position: absolute;
  z-index: 2;
  inset-inline: var(--km-inset);
  bottom: var(--km-inset);
  min-height: var(--km-slab-h, 38%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 4px;
  padding: 13px 15px 14px;
  border-radius: calc(var(--km-r-card) - var(--km-inset));
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 22%, #fff 78%, rgba(255, 255, 255, 0)) top / 100% 1.5px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .64) 0%, rgba(255, 255, 255, .42) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 1px 0 0 rgba(255, 255, 255, .5),
    inset -1px 0 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .65),
    inset 0 10px 16px -12px rgba(255, 255, 255, .95),
    inset 0 -14px 22px -18px rgba(96, 128, 176, .38),
    0 12px 28px -18px rgba(16, 32, 64, .55);
}
.km .km-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(200px circle at var(--km-px, 25%) var(--km-py, -40%), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .35s var(--km-ease);
}

.km .km-title {
  display: inline;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(17px, 1.28vw, 21px);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--km-ink);
}
.km:lang(ru) .km-title, .km:lang(zh) .km-title, .km:lang(ar) .km-title { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; letter-spacing: -.01em; }
.km .km-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.36;
  color: var(--km-ink-2);
}
.km .km-note {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: .2em;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  color: var(--km-ink-2);
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 .5px rgba(29, 29, 31, .08);
}

.km [aria-current="page"].km-title::after,
.km .km-card[aria-current="page"] .km-title::after {
  content: "";
  display: inline-block;
  width: .17em;
  height: .17em;
  margin-inline-start: .16em;
  border-radius: 50%;
  background: var(--km-ochre);
  vertical-align: .62em;
}

@media (hover: hover) and (pointer: fine) {
  .km.is-settled .km-card:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .05), 0 30px 52px -28px rgba(16, 32, 64, .6);
  }
  .km.is-settled .km-card:hover .km-piece--cut { transform: translate3d(0, -5%, 0) scale(1.045); }
  .km.is-settled .km-card:hover .km-piece--photo { transform: scale(1.05); }
  .km .km-card:hover .km-slab::after { opacity: 1; }
}
.km.is-settled .km-card:active { transform: scale(.985); transition-duration: .15s; }

/* ---------- Carte principale ---------- */
.km .km-feature { border-radius: var(--km-r-feature); container: km-vedette / size; }
.km .km-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.km .km-feature .km-slab {
  --km-inset: 10px;
  min-height: 0;
  gap: 10px;
  padding: 24px 24px 22px;
  border-radius: calc(var(--km-r-feature) - 10px);
  pointer-events: none;
}
.km .km-feature .km-slab a { pointer-events: auto; }
.km .km-feature .km-title { display: block; font-size: clamp(34px, 3.3vw, 56px); line-height: .95; letter-spacing: -.035em; }
.km .km-feature .km-desc { font-size: 15px; -webkit-line-clamp: 3; max-width: 40ch; }
.km .km-feature:has(.km-title:focus-visible) { outline: 3px solid var(--km-focus); outline-offset: 4px; }
.km .km-feature .km-title:focus-visible { outline: none; }

.km .km-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; max-width: 100%; }
.km .km-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--km-ink);
  white-space: nowrap;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 .5px rgba(29, 29, 31, .1), 0 3px 8px -5px rgba(16, 32, 64, .35);
  transition: background-color .25s, transform .4s var(--km-spring);
}
.km .km-chip:hover { background: rgba(255, 255, 255, .92); transform: translateY(-1px); }
.km .km-chip:active { transform: scale(.96); }

/* Carte principale en format large : la lame à gauche, la pièce entière à droite. */
@container km-vedette (min-aspect-ratio: 13/10) {
  .km .km-feature .km-slab { inset-inline-end: auto; width: 56%; }
  .km .km-feature .km-piece--cut { height: 90%; bottom: 4%; left: 76%; }
  .km[dir="rtl"] .km-feature .km-piece--cut { left: 24%; }
}

/* ---------- Nos avocats : portraits lus sur la page équipe ---------- */
.km .km-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(247, 250, 254, .56));
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 .5px rgba(29, 29, 31, .06), 0 18px 40px -30px rgba(16, 32, 64, .5);
}
.km .km-team { --km-face: 56px; --km-face-overlap: 12px; padding: 18px 22px; }
.km .km-team-in { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.km .km-faces {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  height: var(--km-face);
  padding-inline-start: var(--km-face-overlap);
}
.km .km-face {
  flex: none;
  width: var(--km-face);
  height: var(--km-face);
  margin-inline-start: calc(-1 * var(--km-face-overlap));
  border-radius: 50%;
  object-fit: cover;
  background: #e6eef8;
  box-shadow: 0 5px 12px -6px rgba(16, 32, 64, .5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--km-ease), transform .7s var(--km-spring);
  transition-delay: calc(var(--km-i, 0) * 45ms + 240ms + var(--km-f, 0) * 35ms);
}
.km.is-open .km-face.is-loaded { opacity: 1; transform: none; }
.km.is-settled .km-face { transition-delay: 0s; }
.km .km-face--vide { opacity: .9; transform: none; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); }
.km .km-face--plus {
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--km-ink-2);
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px #fff, 0 5px 12px -6px rgba(16, 32, 64, .35);
}
.km .km-team-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.km .km-team .km-desc { -webkit-line-clamp: 1; }

/* ---------- Base de données ---------- */
.km .km-base .km-slab { --km-slab-h: 0; }
/* Tuile haute (deux rangées) : lame plus courte, pièce plus haute. */
.km .km-tile--haute .km-slab { --km-slab-h: 20%; }
.km .km-tile--haute .km-piece--cut { height: 58%; bottom: 25%; }

/* ---------- Contact : les deux boutons du site ---------- */
.km .km-contact { container: km-contact / inline-size; padding: 18px 24px; }
.km .km-contact-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.km .km-contact-text { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.km .km-contact .km-title { font-size: clamp(18px, 1.4vw, 22px); }
.km .km-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 7px; }

.km .km-btn {
  --km-btn-h: 64px;
  --km-btn-icon: 48px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: var(--km-btn-h);
  padding-block: 7px;
  padding-inline: 8px 24px;
  border-radius: 999px;
  color: #16191e;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  background: conic-gradient(from var(--km-beacon), #f5f7fa 0deg, #ccd7e4 40deg, #fff 80deg, #f6dfb3 85deg, #d4e8fc 92deg, #e0e5ed 150deg, #bacdde 185deg, #fff 202deg, #f3e6c8 206deg, #ccebf1 211deg, #edf2f8 270deg, #c2d5e7 320deg, #fff 338deg, #f5f7fa 360deg);
  box-shadow: 0 0 0 1px rgba(190, 196, 211, .4), 0 12px 18px -5px rgba(24, 35, 57, .27);
  animation: km-beacon-rim 9s linear infinite;
  transition: transform .2s, box-shadow .2s;
}
/* Les pages en arabe forcent les liens tel: en bloc de gauche à droite : pas dans le menu. */
.km .km-actions a.km-btn { display: inline-flex; direction: inherit; unicode-bidi: normal; }
.km .km-btn::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid rgba(136, 141, 148, .18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -2px 1px rgba(255, 255, 255, .45), 0 1px 2px rgba(61, 66, 67, .17);
  pointer-events: none;
  z-index: -2;
}
.km .km-btn::after {
  content: "";
  position: absolute;
  inset: 2.7px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(ellipse at 35% 0%, rgba(255, 255, 255, .72), transparent 64%), linear-gradient(180deg, #e9e9e9, #dedee0 65%, #e7e7e9);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px #c1c3ca;
  pointer-events: none;
}
.km .km-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 2px rgba(255, 255, 255, .53), 0 15px 22px -6px rgba(24, 35, 57, .33); }
.km .km-btn:active { transform: translateY(1.5px); box-shadow: 0 1px 2px rgba(255, 255, 255, .53), 0 5px 8px -3px rgba(24, 35, 57, .25); }
.km .km-btn:focus-visible { outline: 3px solid var(--km-focus); outline-offset: 10px; }
.km .km-btn-icon {
  position: relative;
  isolation: isolate;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 var(--km-btn-icon);
  width: var(--km-btn-icon);
  height: var(--km-btn-icon);
  border-radius: 50%;
  color: #fff;
  transition: transform .2s;
}
.km .km-btn:active .km-btn-icon { transform: scale(.96); }
.km .km-btn-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  background: repeating-conic-gradient(from 35deg, transparent 0deg, var(--km-reflet-1) 18deg, transparent 29deg, transparent 80deg, var(--km-reflet-2) 92deg, transparent 106deg);
  opacity: .2;
  pointer-events: none;
  animation: km-beacon-flow 11s linear infinite;
}
.km .km-btn-icon::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid var(--km-onde);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: km-beacon-wave 3.5s ease-out infinite;
}
.km .km-btn-icon svg { position: relative; z-index: 3; width: calc(var(--km-btn-icon) * .56); height: calc(var(--km-btn-icon) * .56); }
.km .km-btn--call .km-btn-icon {
  --km-reflet-1: #79f5a5; --km-reflet-2: #bafbd1; --km-onde: #25d366;
  border: 1px solid #a5edbe;
  background: radial-gradient(ellipse at 30% 15%, rgba(206, 255, 223, .4), transparent 45%), linear-gradient(145deg, #25D366, #128C4A);
  box-shadow: inset 0 1px 3px #ddffe8, 0 0 16px rgba(37, 211, 102, .47);
}
.km .km-btn--call svg { fill: #fff; filter: drop-shadow(0 1px 1px #00351f); }
.km .km-btn--form .km-btn-icon {
  --km-reflet-1: #56d6ff; --km-reflet-2: #86e9ff; --km-onde: #469eff;
  border: 1px solid #82c6ff;
  background: radial-gradient(ellipse at 30% 15%, rgba(153, 218, 255, .33), transparent 45%), linear-gradient(145deg, #276bcc, #082c72);
  box-shadow: inset 0 1px 3px #b3e2ff, 0 0 16px rgba(50, 140, 255, .47);
}
.km .km-btn--form svg { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #001940); }
.km .km-btn-text { position: relative; z-index: 2; }

/* Carte de contact étroite : titre au-dessus, boutons plus compacts. */
@container km-contact (max-width: 640px) {
  .km .km-contact-in { flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
  .km .km-btn { --km-btn-h: 54px; --km-btn-icon: 40px; gap: 10px; padding-inline: 7px 18px; font-size: 13px; }
  .km .km-actions { gap: 14px; }
}
@container km-contact (max-width: 380px) {
  .km .km-actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---------- Ordinateur peu haut (portables 13 pouces) ---------- */
@media (min-width: 1100px) and (max-height: 860px) {
  .km .km-feature .km-title { font-size: clamp(34px, 6vh, 50px); }
  .km .km-feature .km-slab { gap: 8px; padding-block: 20px 18px; padding-inline: 22px 0; }
  .km .km-feature .km-desc { padding-inline-end: 22px; }
  .km .km-feature .km-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 2px 4px;
    padding-inline: 1px 22px;
    -webkit-mask: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .km .km-feature .km-chips::-webkit-scrollbar { display: none; }
  .km .km-team { --km-face: 48px; --km-face-overlap: 11px; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1099px) {
  .km .km-grid { grid-auto-rows: auto; }
  .km .km-feature { height: 400px; }
  .km .km-tile { height: 250px; }
  .km .km-team, .km .km-base { height: 150px; }
  .km .km-contact { min-height: 118px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 699px) {
  .km { --km-gap: 10px; --km-r-card: 22px; --km-r-feature: 28px; }
  .km .km-vitre { inset: 6px; border-radius: 30px; }
  .km .km-langs--bar { display: none; }
  .km .km-langs--foot {
    display: flex;
    position: static;
    transform: none;
    justify-content: space-between;
    width: min(calc(100% - 2 * var(--km-pad)), 1480px);
    margin: 4px auto max(var(--km-pad), env(safe-area-inset-bottom));
  }
  .km .km-langs--foot { position: relative; left: auto; right: auto; top: auto; }
  .km .km-langs--foot button { min-width: 0; flex: 1; padding: 0; }
  .km .km-grid { padding-bottom: 12px; }
  .km .km-feature { height: 468px; }
  .km .km-feature .km-slab { padding-block: 18px 16px; padding-inline: 18px 0; }
  .km .km-feature .km-title { font-size: 38px; }
  .km .km-feature .km-desc { font-size: 14px; padding-inline-end: 18px; }
  .km .km-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 2px 4px;
    padding-inline: 1px 18px;
    -webkit-mask: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .km .km-chips::-webkit-scrollbar { display: none; }
  .km .km-chip { height: 32px; padding: 0 12px; font-size: 13px; }
  .km .km-tile { height: 200px; }
  .km .km-slab { padding: 11px 12px 12px; min-height: 0; }
  .km .km-title { font-size: 16px; }
  .km .km-tile .km-desc { display: none; }
  .km .km-team { height: auto; --km-face: 48px; --km-face-overlap: 12px; padding: 18px 20px; }
  .km .km-base { height: 120px; }
  .km .km-base .km-desc { font-size: 12.5px; }
  .km .km-contact { padding: 18px 16px; }
}
.km[dir="rtl"] .km-chips { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .km .km-sheet { transition-duration: .15s; }
  .km .km-card, .km .km-piece, .km .km-face, .km .km-close path {
    transition: opacity .2s linear !important;
    transform: none !important;
  }
  .km .km-btn, .km .km-close, .km .km-btn-icon::before, .km .km-btn-icon::after { animation: none !important; }
}