/* Défilement fluide vers les ancres (ex. "Explorer par application" en page
   d'accueil, liens de notes en bas de page) plutôt qu'un saut instantané.
   Respecte prefers-reduced-motion pour l'accessibilité. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Jetons de couleur Moka, appliqués aux variables du thème Material par défaut. */

[data-md-color-scheme="default"] {
  --md-default-bg-color: #E9ECEF;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #212429;
}

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  /* Header */
  --md-primary-fg-color: #1c1c1c;
  /* Accent : liens, icônes, surlignages */
  --md-accent-fg-color: #E2B45C;
  --md-typeset-a-color: #E2B45C;
}
/* Le thème définit aussi --md-typeset-a-color via [data-md-color-scheme]
   [data-md-color-primary=...] (couleur "indigo" par défaut, non utilisée
   ici), plus spécifique que la règle ci-dessus : on la neutralise avec un
   sélecteur de même spécificité pour garder le jaune or partout. */
[data-md-color-scheme="default"][data-md-color-primary],
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: #E2B45C;
}

.md-typeset p,
.md-typeset li {
  font-size: 15px;
  line-height: 1.65;
}

/* Titres moins imposants que le défaut Material, mais avec un vrai espacement
   pour marquer clairement le début d'une nouvelle section (retour utilisateur :
   le contenu paraissait "entassé", sections difficiles à distinguer). */
.md-typeset h1 { font-size: 27px; margin-bottom: 4px; }

/* Material applique par défaut une couleur semi-transparente aux titres
   (h1 : #0000008a ≈ 54% ; texte/h2 hérité : #000000de ≈ 87%), ce qui les
   rend moins accentués que souhaité. On passe à une couleur pleine (sans
   alpha), plus foncée que le texte courant pour bien les faire ressortir. */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2 {
  color: #1c1c1c;
}
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #f5f5f5;
}

/* Petit trait doré sous les H1/H2 (repris du site moka.cloud) : repère visuel
   rapide pour distinguer un H1/H2 d'un H3, sans dépendre uniquement de la
   taille de police. Le H1 délimite aussi le bandeau durée/difficulté juste
   en dessous. Rapproché du titre (margin-top réduit) et séparé du texte qui
   suit (margin-bottom) pour ne pas le coller. Retiré des H1 "hero" (accueil,
   tarifs), déjà stylés à part, via un simple `content: none` plus bas (le
   sélecteur `:not()` ne peut pas cibler un descendant comme
   `.mokahome-hero h1`). */
.md-typeset h1::after,
.md-typeset h2::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--moka-gold-deep);
  margin-top: 4px;
  margin-bottom: 10px;
}
.md-typeset h1::after { width: 50px; }
.md-typeset h2::after { width: 25px; }
.md-typeset .mokahome-hero h1::after,
.md-typeset .mokahome-pricing-hero h1::after {
  content: none;
}

.md-typeset h2 {
  font-size: 22px;
  /*font-weight: 700;*/
  margin-top: 2.4em;
}
/* Le tout premier titre de section d'une page démarre plus près du texte qui précède */
.md-typeset h1 + p + h2,
.md-typeset h1 + h2,
.md-typeset .moka-tuto-meta + p + h2,
.md-typeset .moka-tuto-meta + h2 {
  margin-top: 1.4em;
}

.md-typeset h3 {
  font-size: 18px;
  /*font-weight: 700;*/
  margin-top: 1.8em;
}

.md-typeset h4 { font-size: 16px; }

/* =========================================================================
   Page d'accueil : hero sombre + bloc audience + cartes par application
   (généré par hooks/generate_index.py à partir de docs/index.md)
   ========================================================================= */

/* Jetons de surface, adaptés au clair / sombre */
[data-md-color-scheme="default"] {
  --moka-surface: #ffffff;
  --moka-line: #e3e6ea;
  --moka-muted: #6b7075;
  --moka-tile-soon: #eef0f2;
}
[data-md-color-scheme="slate"] {
  --moka-surface: #2b2f36;
  --moka-line: #3a3f47;
  --moka-muted: #a2a8ae;
  --moka-tile-soon: #33373e;
}
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --moka-gold-deep: #c9973f;
}

/* La page d'accueil gère elle-même l'espacement de ses sections (bandeaux
   plein cadre) ; la marge basse par défaut du thème laisse un vide avant
   le footer. */
.md-content__inner:has(.mokahome-hero) { margin-bottom: 0; }

/* --- Hero : plein cadre, débute directement sous la barre de navigation --- */
.md-typeset .mokahome-hero {
  background: radial-gradient(1200px 520px at 82% -12%, #33322e 0%, var(--md-primary-fg-color) 56%);
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -2.5rem; /* colle au header (annule le padding-top + margin-top de .md-main__inner) */
  /* 50vw - 30.5rem centre sur la largeur de .md-grid (61rem) ; -.8rem de plus pour
     aligner avec la marge propre de .md-content__inner (mesuré empiriquement). */
  padding: 56px max(24px, calc(50vw - 29.7rem)) 66px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  /* Hero + bloc audience occupent la hauteur visible sous le header, avec une
     marge de 20px avant la ligne de flottaison (96px = barre + onglets ;
     70px = hauteur nette du bloc audience, une fois retiré son chevauchement
     négatif ; mesuré empiriquement). */
  min-height: calc(100vh - 186px);
  box-sizing: border-box;
}
.md-typeset .mokahome-hero-text { min-width: 0; }
.md-typeset .mokahome-hero-visual {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.md-typeset .mokahome-hero-island-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  animation: mokahome-float 6s ease-in-out infinite;
}
.md-typeset .mokahome-hero-visual .mokahome-hero-island {
  width: 100%;
  height: auto;
  display: block;
}
/* Bulles d'infos : positionnées en % (coordonnées relevées sur l'image
   source, 978x858) directement sur l'îlot, donc elles flottent avec lui.
   Discrètes (semi-transparentes) au repos, elles s'opacifient et
   sautillent légèrement au survol pour inviter au clic/à la lecture. */
.md-typeset .mokahome-hero-poi {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, -100%);
  background: #fff;
  color: #1c1c1c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
  opacity: .85;
  transition: opacity .2s ease;
}
/* Toutes les bulles partagent le même z-index : l'empilement retombe donc
   sur l'ordre d'apparition dans le HTML, où "Destinations" est déclarée
   après "Activités" et passe donc devant elle (chevauchement visible
   surtout en mobile, où l'îlot est plus petit et les bulles plus
   proches). On relève explicitement Activités au-dessus. */
.md-typeset a.mokahome-hero-poi[href="activites/"] {
  z-index: 2;
}
/* Icône de secteur en doré, cohérente d'une bulle à l'autre. */
.md-typeset .mokahome-hero-poi .twemoji {
  color: var(--moka-gold-deep);
  flex: 0 0 auto;
}
/* Flèche : uniquement sur les bulles cliquables (lien vers une page secteur
   publiée), pour signaler que c'est un lien. */
.md-typeset .mokahome-hero-poi-arrow {
  font-weight: 700;
}
/* Envolée de billets au survol d'une bulle cliquable : petit effet
   ludique ("chez nous, ça se vend par dizaines"), façon feu d'artifice —
   les billets jaillissent de derrière la bulle vers le haut. Pur CSS (le
   site n'a aucun JS) — 8 billets positionnés au bas de la bulle, en
   arrière-plan (z-index négatif), chacun avec sa propre trajectoire
   courbe (--mx/--my point intermédiaire, --tx/--ty point final), sa
   rotation (--rot), sa taille (--sz) et son délai — le tout volontairement
   irrégulier (distances, angles et vitesses de rotation différents) pour
   éviter un rendu trop mécanique. Pleine opacité maintenue une bonne
   partie du trajet, immobiles/invisibles au repos, animés uniquement
   pendant le survol. */
.md-typeset .mokahome-poi-tickets {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: -1;
}
.md-typeset .mokahome-poi-ticket {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.md-typeset .mokahome-poi-ticket .twemoji {
  width: calc(13px * var(--sz, 1));
  height: calc(13px * var(--sz, 1));
  color: var(--moka-gold-deep);
}
.md-typeset a.mokahome-hero-poi:hover .mokahome-poi-ticket,
.md-typeset a.mokahome-hero-poi:focus-within .mokahome-poi-ticket {
  animation: mokahome-ticket-burst .9s ease-out forwards;
}
@keyframes mokahome-ticket-burst {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0deg) scale(.3); }
  15% { opacity: 1; transform: translate(calc(-50% + var(--mx)), var(--my)) rotate(calc(var(--rot) * .35)) scale(var(--sz)); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), var(--ty)) rotate(var(--rot)) scale(var(--sz)); }
}
.md-typeset .mokahome-poi-ticket:nth-child(1) { --mx: -18px; --my: -40px; --tx: -62px; --ty: -92px; --rot: -260deg; --sz: 1.3; animation-delay: 0s; }
.md-typeset .mokahome-poi-ticket:nth-child(2) { --mx: -34px; --my: -50px; --tx: -18px; --ty: -118px; --rot: 190deg; --sz: .8; animation-delay: .07s; }
.md-typeset .mokahome-poi-ticket:nth-child(3) { --mx: 2px; --my: -55px; --tx: 14px; --ty: -132px; --rot: -340deg; --sz: 1.1; animation-delay: .02s; }
.md-typeset .mokahome-poi-ticket:nth-child(4) { --mx: 22px; --my: -46px; --tx: 46px; --ty: -104px; --rot: 220deg; --sz: .9; animation-delay: .16s; }
.md-typeset .mokahome-poi-ticket:nth-child(5) { --mx: 40px; --my: -20px; --tx: 66px; --ty: -60px; --rot: -180deg; --sz: 1.4; animation-delay: .1s; }
.md-typeset .mokahome-poi-ticket:nth-child(6) { --mx: -55px; --my: -15px; --tx: -40px; --ty: -60px; --rot: 300deg; --sz: .75; animation-delay: .2s; }
.md-typeset .mokahome-poi-ticket:nth-child(7) { --mx: -60px; --my: -5px; --tx: -80px; --ty: -30px; --rot: -240deg; --sz: 1.15; animation-delay: .04s; }
.md-typeset .mokahome-poi-ticket:nth-child(8) { --mx: 15px; --my: -30px; --tx: 5px; --ty: -75px; --rot: 260deg; --sz: 1; animation-delay: .13s; }
/* Bulle cliquable (lien vers une page secteur) : conserve le texte foncé
   au survol (sinon la règle globale .md-typeset a:hover du thème repasse
   le texte en doré). */
.md-typeset a.mokahome-hero-poi:hover {
  color: #1c1c1c;
}
.md-typeset .mokahome-hero-poi::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 3px 0;
  z-index: -1;
}
/* Zone de survol élargie, invisible : le changement de style se déclenche
   dès que la souris s'approche de la bulle, pas seulement pile dessus. */
.md-typeset .mokahome-hero-poi::before {
  content: "";
  position: absolute;
  inset: -20px;
}
.md-typeset .mokahome-hero-poi:hover {
  opacity: 1;
  animation: mokahome-poi-hop .5s ease;
}
@keyframes mokahome-poi-hop {
  0%, 100% { transform: translate(-50%, -100%) translateY(0); }
  30% { transform: translate(-50%, -100%) translateY(-7px); }
  55% { transform: translate(-50%, -100%) translateY(0); }
  75% { transform: translate(-50%, -100%) translateY(-3px); }
}
/* Nuages : 2 grands derrière (haut), 2 grands devant (bas, chevauchant
   l'îlot pour la profondeur), et seulement 2 petits nuages au total — un
   accroché à un grand nuage du haut, un à un grand nuage du bas — chacun
   placé dans le prolongement du sens de la longueur de son grand nuage
   plutôt qu'en dessous. Rendus nativement dans le même style que l'îlot
   (pas besoin de déformation CSS) ; chaque nuage flotte à son propre
   rythme pour dériver de façon désynchronisée. */
.md-typeset .mokahome-hero-cloud {
  position: absolute;
  height: auto;
  display: block;
  pointer-events: none;
}

/* Haut-gauche : le grand nuage s'amincit vers la droite, le petit
   prolonge cette pointe. */
.md-typeset .mokahome-hero-cloud-back-1 {
  z-index: 0;
  width: 20%;
  left: 6%;
  top: 18%;
  opacity: .92;
  animation: mokahome-float 7s ease-in-out infinite;
  animation-delay: -2.3s;
}
.md-typeset .mokahome-hero-cloud-back-2 {
  z-index: 0;
  width: 8%;
  left: 28%;
  top: 21%;
  opacity: .92;
  animation: mokahome-float 7s ease-in-out infinite;
  animation-delay: -2.6s;
}

/* Haut-droite : pas de petit nuage associé (un seul petit en haut). */
.md-typeset .mokahome-hero-cloud-back-3 {
  z-index: 0;
  width: 26%;
  right: 15%;
  top: 10%;
  opacity: .92;
  animation: mokahome-float 8s ease-in-out infinite;
  animation-delay: -4.6s;
}

/* Bas-gauche : image "right" utilisée ici pour que le nuage soit orienté
   dans le bon sens à cet endroit ; il s'amincit vers la gauche, le petit
   nuage (variante "right" également) prolonge cette pointe vers l'extérieur. */
.md-typeset .mokahome-hero-cloud-front-1 {
  z-index: 2;
  width: 15%;
  left: 12%;
  bottom: 24%;
  animation: mokahome-float 5.5s ease-in-out infinite;
  animation-delay: -1.1s;
}
.md-typeset .mokahome-hero-cloud-front-2 {
  z-index: 2;
  width: 6.5%;
  left: 3%;
  bottom: 27%;
  animation: mokahome-float 5.5s ease-in-out infinite;
  animation-delay: -1.4s;
}

/* Bas-droite : image "left" utilisée pour la même raison d'orientation ;
   pas de petit nuage associé (un seul petit en bas). */
.md-typeset .mokahome-hero-cloud-front-3 {
  z-index: 2;
  width: 16%;
  right: 10%;
  bottom: 22%;
  animation: mokahome-float 6.5s ease-in-out infinite;
  animation-delay: -3.4s;
}
@keyframes mokahome-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .mokahome-hero-island,
  .md-typeset .mokahome-hero-island-wrap,
  .md-typeset .mokahome-hero-cloud,
  .md-typeset .mokahome-hero-poi:hover {
    animation: none;
  }
}
@media (max-width: 960px) {
  .md-typeset .mokahome-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .md-typeset .mokahome-hero-visual { margin-top: 32px; }
  .md-typeset .mokahome-hero-island-wrap { max-width: 340px; }
  /* Version allégée sur mobile : 1 nuage derrière (gauche, avec son petit)
     et 1 nuage devant (droite), pour rester léger tout en gardant un peu
     de profondeur et de répartition gauche/droite. */
  .md-typeset .mokahome-hero-cloud-back-3,
  .md-typeset .mokahome-hero-cloud-front-1,
  .md-typeset .mokahome-hero-cloud-front-2 {
    display: none;
  }
}
/* Sur un écran tactile, il n'y a pas de survol : les bulles doivent donc
   rester lisibles par défaut plutôt que de dépendre du hover. */
@media (hover: none) {
  .md-typeset .mokahome-hero-poi { opacity: .85; }
}
.md-typeset .mokahome-kicker {
  color: var(--md-accent-fg-color);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.md-typeset .mokahome-hero h1 {
  color: #fff;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  max-width: 20ch;
}
.md-typeset .mokahome-hero h1 span { color: var(--md-accent-fg-color); }
.md-typeset .mokahome-lead {
  color: #d7d9dc;
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 28px;
}
.md-typeset .mokahome-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.md-typeset .mokahome-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.md-typeset .mokahome-btn-primary {
  background: var(--md-accent-fg-color);
  color: var(--md-primary-fg-color);
}
/* Spécificité (.md-typeset a.mokahome-btn-primary:hover) volontairement plus élevée que la
   règle du thème .md-typeset a:hover (qui repasse sinon le texte en jaune, illisible sur le
   fond jaune du bouton). */
.md-typeset a.mokahome-btn-primary:hover {
  color: var(--md-primary-fg-color);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(226, 180, 92, .35);
}
.md-typeset .mokahome-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #4a4a48;
}
.md-typeset .mokahome-btn-ghost:hover {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

/* --- Bloc audience (chevauche le hero) --- */
.md-typeset .mokahome-audience {
  position: relative;
  z-index: 2;
  margin: -46px 0 20px;
  background: var(--moka-surface);
  border: 1px solid var(--moka-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.md-typeset .mokahome-col { display: flex; gap: 14px; align-items: flex-start; }
.md-typeset .mokahome-em { font-size: 24px; line-height: 1.2; }
.md-typeset .mokahome-coltxt { display: block; }
.md-typeset .mokahome-coltxt b { display: block; font-size: 14px; margin-bottom: 4px; }
.md-typeset .mokahome-coltxt span { display: block; font-size: 13px; line-height: 1.55; color: var(--moka-muted); }

/* --- Titre de section --- */
.md-typeset .mokahome-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 52px 0 22px;
}
.md-typeset .mokahome-section-head h2 { margin: 0; font-size: 24px; font-weight: 800; }
.md-typeset .mokahome-section-head h2::before { display: none; } /* pas d'ancre permalink visuelle */
.md-typeset .mokahome-section-head p { margin: 0; color: var(--moka-muted); font-size: 14px; }

/* --- Grille de cartes --- */
.md-typeset .mokahome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.md-typeset .mokahome-card {
  display: flex;
  flex-direction: column;
  background: var(--moka-surface);
  border: 1px solid var(--moka-line);
  border-radius: 16px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.md-typeset a.mokahome-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
}
.md-typeset .mokahome-top {
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--md-accent-fg-color), var(--moka-gold-deep));
}
.md-typeset .mokahome-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.md-typeset .mokahome-tile {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--moka-tile-soon);
  margin-bottom: 14px;
}
.md-typeset .mokahome-tile img { width: 38px; height: 38px; object-fit: contain; }
.md-typeset .mokahome-h3 { display: block; font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.md-typeset .mokahome-p {
  display: block;
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--moka-muted);
  margin-bottom: 18px;
}
.md-typeset .mokahome-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--moka-line);
}
.md-typeset .mokahome-count { font-size: 13px; font-weight: 600; color: var(--moka-muted); }
.md-typeset .mokahome-go { font-size: 14px; font-weight: 700; color: var(--moka-gold-deep); }

/* --- Variante « Bientôt » --- */
.md-typeset .mokahome-soon { opacity: .85; }
.md-typeset .mokahome-soon .mokahome-top { background: var(--moka-line); }
.md-typeset .mokahome-soon .mokahome-tile { background: var(--moka-tile-soon); }
.md-typeset .mokahome-soon .mokahome-tile img { opacity: .5; filter: grayscale(1); }
.md-typeset .mokahome-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--moka-muted);
  background: var(--moka-tile-soon);
  padding: 4px 10px;
  border-radius: 999px;
}

/* --- Responsive --- */
@media (max-width: 720px) {
  .md-typeset .mokahome-hero { padding: 40px 24px 56px; }
  .md-typeset .mokahome-audience { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================================
   Bandeau de métadonnées d'un tutoriel (durée, difficulté, tags), juste
   sous le H1 — repère immédiat avant de commencer à lire.
   ========================================================================= */
.md-typeset .moka-tuto-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  color: var(--moka-muted);
  font-size: 13px;
  font-weight: 600;
  margin: -8px 0 20px;
}
.md-typeset .moka-tuto-meta .twemoji { color: var(--moka-gold-deep); }
.md-typeset .moka-tuto-meta code {
  background: var(--moka-tile-soon);
  color: var(--moka-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

/* =========================================================================
   Bloc "Qui est Moka" — présentation de l'éditeur, services, puis
   mots-clés métier, sous la grille de cartes de la page d'accueil.
   Bandeau plein cadre en fond sombre fixe (identique quel que soit le
   thème clair/sombre — même teinte que le header), pour détacher
   visuellement cette section (même technique de plein cadre que le hero).
   ========================================================================= */
.md-typeset .mokahome-moka-section {
  background: #1c1c1c;
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px max(24px, calc(50vw - 29.7rem));
  margin-top: 48px;
  margin-bottom: 0;
}
.md-typeset .mokahome-moka-section .mokahome-section-head { margin-top: 0; }
.md-typeset .mokahome-moka-section .mokahome-keywords { margin-bottom: 0; }
.md-typeset .mokahome-moka-section .mokahome-section-head h2 { color: #fff; }
.md-typeset .mokahome-moka {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 780px;
  margin: 0 0 32px;
}
.md-typeset .mokahome-moka-logo {
  height: 40px;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  margin-top: 4px;
}
.md-typeset .mokahome-moka p {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #d7d9dc;
}

.md-typeset .mokahome-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.md-typeset .mokahome-service {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--moka-surface);
  border: 1px solid var(--moka-line);
  border-radius: 16px;
  padding: 20px;
}
.md-typeset .mokahome-service-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--moka-tile-soon);
  color: var(--moka-gold-deep);
  flex: 0 0 auto;
}
.md-typeset .mokahome-service-icon .twemoji { font-size: 22px; }
.md-typeset .mokahome-service-txt { display: block; }
.md-typeset .mokahome-service-txt b {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--md-default-fg-color);
}
.md-typeset .mokahome-service-txt span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--moka-muted);
}
.md-typeset .mokahome-service-txt a {
  color: var(--moka-gold-deep);
  font-weight: 700;
}
.md-typeset .mokahome-keywords {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  /* Le padding de la pastille est intérieur : il ne compte pas comme espace
     entre deux étiquettes. L'espace perçu, c'est uniquement le gap. On garde
     donc le row-gap égal au column-gap pour un rythme régulier dans les deux
     sens (sinon les rangées « respirent » beaucoup plus que les colonnes). */
  row-gap: 10px;
  margin-bottom: 56px;
}
.md-typeset .mokahome-keywords .mokahome-kw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #d7d9dc;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  margin-bottom: 5px;
}
/* Mot-clé cliquable (renvoie vers une page d'exemple secteur publiée) : léger
   surlignage au survol pour signaler que c'est un lien. */
a.mokahome-kw:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
}
.md-typeset .mokahome-keywords .twemoji { color: var(--md-accent-fg-color); }

/* =========================================================================
   Header : logo un peu plus grand que la taille par défaut du thème
   (24px), pour donner plus de présence à l'icône Billetterie.
   ========================================================================= */
.md-header__button.md-logo img {
  height: 32px;
  width: 32px;
}

/* =========================================================================
   Menu déroulant au survol d'un onglet du header (ex. "Guide utilisateur")
   listant ses sous-rubriques directes — même mécanisme CSS pur (survol qui
   révèle un panneau caché via max-height/opacity) que le sélecteur de
   langue natif du thème (.md-select).
   ========================================================================= */
/* .md-tabs/.md-tabs__list ont overflow:auto par défaut (pour le scroll
   horizontal si trop d'onglets) : ça découpe notre menu déroulant, qui
   dépasse du cadre de la barre. Sans incidence ici (peu d'onglets, jamais
   de débordement horizontal réel). */
.md-tabs,
.md-tabs__list {
  overflow: visible;
}
/* .md-tabs__list a aussi contain:content (layout+paint+style), qui clippe
   son contenu à sa propre boîte indépendamment de overflow — sans ça, le
   menu déroulant reste coupé même avec overflow:visible ci-dessus. */
.md-tabs__list {
  contain: none;
}
/* .md-tabs est position:static par défaut, ce qui empêche .mokahome-tabs-menu
   (position:absolute) de se positionner par rapport à lui. Le rendre
   positionné pour que ce calcul de position fonctionne.
   ⚠️ Material donne à .md-tabs un z-index:3 par défaut, inerte tant qu'il
   reste position:static. Dès qu'on le passe en position:relative, ce
   z-index latent s'active et passe devant .md-header__inner (le bloc voisin
   qui contient le sélecteur de langue, z-index:1) : son menu déroulant se
   retrouve alors recouvert par la barre d'onglets (bug constaté avec le
   sélecteur de langue). On neutralise donc explicitement ce z-index hérité.
   .mokahome-tabs-menu porte son propre z-index (10) dans son propre contexte
   d'empilement, suffisant pour passer au-dessus du contenu de la page sans
   toucher à l'empilement du reste du header. */
.md-tabs {
  position: relative;
  z-index: auto;
}
.md-tabs__item.mokahome-tabs-item--has-menu {
  position: relative;
}
.mokahome-tabs-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 220px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background-color: var(--md-default-bg-color);
  border-radius: .1rem;
  box-shadow: var(--md-shadow-z2);
  transform: translate3d(-50%, .3rem, 0);
  transition: transform .25s 375ms, opacity .25s .25s, max-height 0ms .5s;
  z-index: 10;
}
.md-tabs__item.mokahome-tabs-item--has-menu:hover .mokahome-tabs-menu,
.md-tabs__item.mokahome-tabs-item--has-menu:focus-within .mokahome-tabs-menu {
  max-height: 20rem;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  transition: transform .25s cubic-bezier(.1, .7, .1, 1), opacity .25s, max-height 0ms;
}
.mokahome-tabs-menu__list {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
}
.mokahome-tabs-menu__link {
  display: block;
  padding: .5rem 1rem;
  font-size: .7rem;
  color: var(--md-default-fg-color);
  text-decoration: none;
  white-space: nowrap;
  transition: color .125s, background-color .125s;
}
.mokahome-tabs-menu__link:hover {
  color: var(--md-accent-fg-color);
  background-color: var(--md-accent-fg-color--transparent);
}

/* =========================================================================
   Bloc "avantage par module" d'une page exemple secteur (voir doc-generator
   "8.3 Page exemple secteur") : icône de l'application (même icône que sur
   la page d'accueil), alignée à gauche via la syntaxe native Material
   ![](...){ align=left }, le titre et la liste d'avantages viennent
   s'enrouler à droite. .mokahome-module-clear stoppe le flottement entre
   deux blocs consécutifs.
   ========================================================================= */
.md-typeset img.mokahome-module-icon {
  border-radius: 12px;
  background: var(--moka-tile-soon);
  padding: 8px;
  margin-right: 20px;
}
.mokahome-module-clear {
  clear: left;
}

/* =========================================================================
   Page Tarifs (prix.md) : présentation custom (pas le gabarit "page de
   documentation" standard), sur le même design system que la page
   d'accueil — hero plein cadre, bande "pourquoi nous" (variante 4 colonnes
   de .mokahome-audience), colonnes de tarifs comparatives avec listes de
   fonctionnalités.
   ========================================================================= */
.md-content__inner:has(.mokahome-pricing-hero) { margin-bottom: 0; }
.md-typeset .mokahome-pricing-hero {
  background: radial-gradient(1200px 520px at 82% -12%, #33322e 0%, var(--md-primary-fg-color) 56%);
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -2.5rem; /* colle au header, même technique que .mokahome-hero */
  padding: 56px max(24px, calc(50vw - 29.7rem)) 66px;
  text-align: center;
}
.md-typeset .mokahome-pricing-hero h1 {
  color: #fff;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 auto 16px;
  max-width: 18ch;
}
.md-typeset .mokahome-pricing-hero h1 span { color: var(--md-accent-fg-color); }
.md-typeset .mokahome-pricing-hero .mokahome-lead { margin-left: auto; margin-right: auto; }
.md-typeset .mokahome-pricing-hero .mokahome-cta { justify-content: center; }

/* --- Badges de compatibilité (éditions/hébergements/versions Odoo), sous le CTA ---
   Regroupés par famille (édition, hébergement, version majeure), séparées par un
   liseré vertical. Coche verte = compatible, croix rouge = non compatible. --- */
.md-typeset .mokahome-pricing-compat {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 28px;
}
.md-typeset .mokahome-compat-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.md-typeset .mokahome-compat-group + .mokahome-compat-group {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .2);
}
.md-typeset .mokahome-pricing-compat span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #d7d9dc;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
}
.md-typeset .mokahome-pricing-compat span::before {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.md-typeset .mokahome-pricing-compat span.is-yes::before {
  content: "✓";
  color: #7bdb95;
}
.md-typeset .mokahome-pricing-compat span.is-no {
  color: #e9b3b3;
  border-color: rgba(255, 120, 120, .35);
}
.md-typeset .mokahome-pricing-compat span.is-no::before {
  content: "✕";
  color: #ff7a7a;
}

/* --- Bande "pourquoi nous" (4 colonnes), chevauche le hero comme
   .mokahome-audience sur la page d'accueil (mêmes classes .mokahome-col/
   -em/-coltxt, réutilisées telles quelles). --- */
.md-typeset .mokahome-pricing-why {
  position: relative;
  z-index: 2;
  margin: -46px 0 20px;
  background: var(--moka-surface);
  border: 1px solid var(--moka-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* --- Colonnes de tarifs comparatives --- */
.md-typeset .mokahome-pricing-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 12px;
}
.md-typeset .mokahome-pricing-col {
  display: flex;
  flex-direction: column;
  background: var(--moka-surface);
  border: 1px solid var(--moka-line);
  border-radius: 16px;
  padding: 28px 24px;
}
.md-typeset .mokahome-pricing-col--highlight {
  border: 2px solid var(--moka-gold-deep);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}
.md-typeset .mokahome-pricing-col .mokahome-tag {
  background: var(--moka-gold-deep);
  color: var(--md-primary-fg-color);
  align-self: flex-start;
  margin-bottom: 12px;
}
.md-typeset .mokahome-pricing-col-name { display: block; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.md-typeset .mokahome-pricing-col-amount { display: block; font-size: 38px; font-weight: 800; line-height: 1; }
.md-typeset .mokahome-pricing-col-amount small { font-size: 15px; font-weight: 600; color: var(--moka-muted); }
.md-typeset .mokahome-pricing-col-amount .footnote-ref { font-size: 13px; vertical-align: super; }
.md-typeset .mokahome-pricing-col-note { display: block; font-size: 13px; color: var(--moka-muted); margin: 6px 0 20px; }
.md-typeset .mokahome-pricing-col ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.md-typeset .mokahome-pricing-col li {
  font-size: 14px;
  line-height: 1.5;
  padding-left: 24px;
  position: relative;
  margin-bottom: 10px;
  color: var(--moka-muted);
}
.md-typeset .mokahome-pricing-col li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--moka-gold-deep);
  font-weight: 700;
}
.md-typeset .mokahome-pricing-col .mokahome-btn { justify-content: center; margin-top: auto; }

/* --- Note de bas de page (achat par version majeure Odoo) --- */
.md-typeset .mokahome-pricing-footnote {
  text-align: center;
  color: var(--moka-muted);
  font-size: 14px;
  max-width: 640px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

/* --- Section "Pourquoi un module sur Odoo" : prose classique, largeur de
   lecture confortable --- */
.md-typeset .mokahome-pricing-why-odoo { max-width: 760px; margin: 0 auto; }

/* --- Grille des services d'accompagnement (installation, lancement,
   personnalisation, hébergement) : mêmes cartes .mokahome-col/-em/-coltxt que
   la bande "pourquoi nous", dans une grille indépendante (pas de chevauchement
   de hero ici). --- */
.md-typeset .mokahome-pricing-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 28px 0 0;
}

@media (max-width: 900px) {
  .md-typeset .mokahome-pricing-why,
  .md-typeset .mokahome-pricing-cols,
  .md-typeset .mokahome-pricing-services {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .md-typeset .mokahome-pricing-compat { gap: 14px 22px; }
  .md-typeset .mokahome-compat-group + .mokahome-compat-group {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 14px;
    width: 100%;
    justify-content: center;
  }
}