/* Accueil visiteur de mikhplus.com (ALPHA 2026-10-04) : les interfaces reelles du Hub
   (tableau de bord, vendeurs, bot Telegram, WhatsApp) servent d'illustrations animees.
   Reprend les jetons de plateforme.css (theme sombre unique, voulu).
   Passe « impeccable » (detecteur de design) : couleurs pleines, ombres neutres, pas
   d'etiquette au-dessus des titres, animations seulement sur les interfaces. */
:root {
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --ecran2: #121c36; --violet: #8b6cf6; --tg: #2aabee; --wa: #25d366; --wa-bulle: #0f2b1f;
  --encre-douce: #cdd6fb; --accent-texte: #8ea2ff; --bord-vif: #2c3f7a;
  /* teintes de la page : redefinies par les palettes (assets/palettes.css) */
  --barre-fond: rgba(11,18,32,.92); --cta-survol: #3349c0; --voile-1: rgba(255,255,255,.04); --voile-2: rgba(255,255,255,.06); --voile-3: rgba(255,255,255,.08);
  --badge-fond: #15224a; --gain-fond: #1b2a57; --total-v-fond: #221d4a; --texte-2: #dfe5ff;
  --violet-texte: #b6a5ff; --tg-texte: #8fd6ff; --wa-texte: #7ff0b0; --tg-moi-fond: rgba(42,171,238,.18); --tg-moi-texte: #bfe7ff;
  --wa-bulle-texte: #d6f5e2; --wa-petit: #9fdcb8; --puce-actif-fond: #8fd6ff; --puce-actif-texte: #062033;
  --avant-fond: #102a2c; --avant-voile: rgba(16,42,44,.96); --ruban-texte: #062014; --ticket-fond: #131f40; --talon-fond: #1b2a5c; --decoupe: #3a4f92;
  --carte-voile: rgba(17,29,53,.94); --mini-action-texte: #cfc3ff; --pt-gris: #5b6788; --ko-texte: #ff9b98; --bloc-trait: rgba(34,49,90,.5);
  --texte-fort: #fff; --google-bord: transparent;
  --reseau-rgb: 142,162,255; --reseau-paquet: 29,196,255; --reseau-paie: 62,207,142; --reseau-opacite: .75;
}
body.accueil { overflow-x: hidden; }
.accueil main { max-width: 1160px; }
.accueil .barre { position: sticky; top: 0; z-index: 30; background: var(--barre-fond); }

/* ---------- apparition des interfaces (seul mouvement d'entree de la page) ---------- */
.js-actif .revele { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.js-actif .revele.vu { opacity: 1; transform: none; }

/* ---------- boutons ---------- */
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; font: 600 16px var(--corps); text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.cta-plein { color: #fff; background: var(--accent-fonce); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.cta-plein:hover { background: var(--cta-survol); transform: translateY(-2px); }
.cta-creux { color: var(--texte); border: 1px solid var(--bord-vif); }
.cta-creux:hover { background: var(--voile-1); transform: translateY(-2px); }
.cta:active { transform: translateY(0); }
.cta svg { flex: none; }

/* ---------- hero ---------- */
.a-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; padding: 64px 0 56px; }
/* reseau de routeurs dessine au canvas (assets/reseau.js) : toute la largeur de l'ecran, derriere
   l'en-tete, plus discret sous le texte et fondu en bas */
.a-reseau { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 55%), linear-gradient(180deg, #000 75%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 55%), linear-gradient(180deg, #000 75%, transparent); mask-composite: intersect; }
.a-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; color: var(--encre-douce); background: var(--badge-fond); }
.a-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.a-hero h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.06; letter-spacing: -.02em; margin: 18px 0 18px; }
.a-hero h1 em { font-style: normal; color: var(--accent-texte); }
.a-hero .chapeau { font-size: 18.5px; color: var(--encre-douce); max-width: 32em; }
.a-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.a-garanties { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--doux); }
.a-garanties li { display: inline-flex; align-items: center; gap: 7px; }
.a-garanties svg { color: var(--ok); flex: none; }

/* ---------- ecran du tableau de bord (hero) ---------- */
.a-scene { position: relative; padding-bottom: 64px; } /* place des notifications sous l'ecran, sans rien cacher */
.ecran { background: var(--ecran2); border: 1px solid var(--trait); border-radius: 22px; padding: 18px; }
.ecran-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ecran-tete b { font-family: var(--titre); font-size: 15px; }
.ecran-heure { font: 500 13px var(--mono); color: var(--doux); font-variant-numeric: tabular-nums; }
.puce { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.puce.ok { color: var(--ok); background: rgba(62,207,142,.13); }
.puce.att { color: var(--att); background: rgba(245,181,68,.14); }
.puce i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gain { background: var(--gain-fond); border: 1px solid var(--bord-vif); border-radius: 16px; padding: 14px 16px; }
.gain small, .kpi small { display: block; font-size: 12.5px; color: var(--doux); }
.gain b { display: block; font: 600 clamp(26px, 3.4vw, 34px) var(--mono); letter-spacing: -.01em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.gain .hausse { font-size: 12.5px; color: var(--ok); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.kpi { background: var(--surface2); border-radius: 14px; padding: 10px 12px; }
.kpi b { font: 600 20px var(--mono); font-variant-numeric: tabular-nums; }
.courbe { margin-top: 12px; background: var(--surface2); border-radius: 14px; padding: 10px 12px 6px; }
.courbe-tete { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--doux); }
.courbe-tete span { display: inline-flex; align-items: center; gap: 5px; }
.courbe-tete i { width: 8px; height: 8px; border-radius: 2px; }
.courbe svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.js-actif .trace { stroke-dasharray: 600; stroke-dashoffset: 600; }
.js-actif .joue .trace { animation: dessine 1.8s .3s cubic-bezier(.16,1,.3,1) forwards; }
.js-actif .joue .trace.t2 { animation-delay: .6s; }
@keyframes dessine { to { stroke-dashoffset: 0; } }
.js-actif .aire { opacity: 0; transition: opacity 1s 1.4s; }
.js-actif .joue .aire { opacity: 1; }
.routeurs-mini { margin-top: 10px; display: grid; gap: 6px; }
.routeurs-mini div { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; padding: 7px 2px; border-top: 1px solid var(--trait); }
.routeurs-mini span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.routeurs-mini .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.routeurs-mini .pt.att { background: var(--att); }

/* notifications du hero : une a la fois, sous l'ecran */
.toasts { position: absolute; left: -36px; bottom: 0; width: 300px; z-index: 2; pointer-events: none; }
.toast { position: absolute; left: 0; bottom: 0; width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--bord-vif);
  opacity: 0; transform: translateY(14px); transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); font-size: 13px; line-height: 1.4; }
.toast.actif { opacity: 1; transform: none; }
.toast .ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.toast .ico.tg { background: rgba(42,171,238,.18); color: var(--tg); }
.toast .ico.wa { background: rgba(37,211,102,.16); color: var(--wa); }
.toast .ico.wv { background: rgba(29,196,255,.16); color: var(--wave); }
.toast b { display: block; font-size: 13px; }
.toast span { color: var(--encre-douce); }
.toast .mono { font-family: var(--mono); color: var(--texte); }

/* ---------- bandeau des outils ---------- */
.a-outils { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 0 30px; }
.a-outils span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--trait); color: var(--encre-douce); font-size: 14px; }
.a-outils svg { color: var(--doux); }

/* ---------- visite guidee (3 interfaces) ---------- */
.a-titre-section { text-align: center; max-width: 40em; margin: 56px auto 8px; }
.a-titre-section h2 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.01em; margin-bottom: 12px; }
.a-titre-section p { color: var(--encre-douce); margin: 0 auto; max-width: 60ch; }
.a-bloc { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--bloc-trait); }
.a-bloc:last-of-type { border-bottom: 0; }
.a-bloc.inverse .a-bloc-texte { order: 2; }
.a-bloc h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.01em; margin: 0 0 14px; }
.marque-outil { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; margin-right: 12px; vertical-align: -7px; }
.marque-outil.v { background: rgba(139,108,246,.18); color: var(--violet-texte); }
.marque-outil.t { background: rgba(42,171,238,.16); color: var(--tg-texte); }
.marque-outil.w { background: rgba(37,211,102,.14); color: var(--wa-texte); }
.a-bloc-texte > p { color: var(--encre-douce); font-size: 17px; margin: 0 0 18px; max-width: 30em; }
.a-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a-points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--texte-2); font-size: 15.5px; }
.a-points svg { margin-top: 3px; color: var(--ok); }

.maquette { position: relative; background: var(--ecran2); border: 1px solid var(--trait); border-radius: 22px; padding: 18px; max-width: 440px; margin: 0 auto; width: 100%; }
.maquette-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.maquette-tete b { font-family: var(--titre); }
.vendeur { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait); font-size: 14px; }
.vendeur b { font-weight: 600; }
.vendeur .barre-v { height: 8px; border-radius: 99px; background: var(--voile-2); overflow: hidden; }
.vendeur .barre-v i { display: block; height: 100%; width: var(--l); border-radius: 99px; background: var(--violet); transform-origin: left center; }
.js-actif .vendeur .barre-v i { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.js-actif .joue .vendeur .barre-v i { transform: none; }
.vendeur .m { font: 500 13.5px var(--mono); font-variant-numeric: tabular-nums; }
.total-v { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--total-v-fond); }
.total-v b { font: 600 20px var(--mono); font-variant-numeric: tabular-nums; }

.chat { display: flex; flex-direction: column; gap: 8px; min-height: 270px; }
.bulle { max-width: 84%; padding: 9px 12px; border-radius: 15px; font-size: 14px; line-height: 1.45; }
.bulle.moi { align-self: flex-end; background: var(--tg-moi-fond); color: var(--tg-moi-texte); border-bottom-right-radius: 5px; font-family: var(--mono); font-size: 13.5px; }
.bulle.bot { align-self: flex-start; background: var(--voile-2); border-bottom-left-radius: 5px; }
.bulle.wa { align-self: flex-start; background: var(--wa-bulle); color: var(--wa-bulle-texte); border-bottom-left-radius: 5px; max-width: 92%; }
.bulle .mono { font-family: var(--mono); }
.bulle small { display: block; color: var(--encre-douce); font-size: 12px; margin-top: 3px; }
.bulle.wa small { color: var(--wa-petit); }
.boutons-bot { display: flex; gap: 6px; margin-top: 7px; }
.boutons-bot span { flex: 1; text-align: center; font-size: 12.5px; padding: 6px; border-radius: 8px; background: rgba(42,171,238,.14); color: var(--tg-texte); }
.ecrit { align-self: flex-start; display: none; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--voile-2); }
.ecrit.ok { display: inline-flex; }
.js-actif .bulle:not(.ok) { display: none; } /* pas de trou : une bulle n'occupe sa place qu'en apparaissant */
.bulle.ok { animation: bulle .6s cubic-bezier(.16,1,.3,1); }
@keyframes bulle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ecrit i { width: 6px; height: 6px; border-radius: 50%; background: var(--doux); animation: saute .6s 3; } /* visible ~1,7 s avant chaque reponse */
.ecrit i:nth-child(2) { animation-delay: .15s; } .ecrit i:nth-child(3) { animation-delay: .3s; }
@keyframes saute { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
/* conversation rejouee en boucle : fondu avant de recommencer */
.chat.efface .bulle.ok { opacity: 0; transform: translateY(-6px); transition: opacity .7s ease, transform .7s ease; }
/* demonstration des commandes Telegram : une scene a la fois */
.scene { display: none; flex-direction: column; gap: 8px; }
.scene.active { display: flex; }
.js-actif .scene .bulle:not(.ok) { display: none; }
.cmd-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cmd-puces button { font: 500 12.5px var(--mono); color: var(--doux); background: rgba(42,171,238,.08); border: 1px solid rgba(42,171,238,.22); border-radius: 999px; padding: 5px 10px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.cmd-puces button:hover { color: var(--tg-moi-texte); border-color: rgba(42,171,238,.45); }
.cmd-puces button.active { color: var(--puce-actif-texte); background: var(--puce-actif-fond); border-color: var(--puce-actif-fond); }
.cmd-puces button:focus-visible { outline: 2px solid var(--wave); outline-offset: 2px; }
.chat.chat-tg { min-height: 190px; }
/* reponses reelles du bot : <code>, <i>, banniere d'etoiles de la facture */
.chat-tg .bulle.bot { max-width: 94%; font-size: 13.5px; line-height: 1.5; }
.chat-tg .bulle code { font: 500 12.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--voile-3); color: var(--texte-2); }
.chat-tg .bulle i { color: var(--encre-douce); }
.facture-entete { display: block; margin-bottom: 6px; font: 500 12px/1.35 var(--mono); text-align: center; color: var(--doux); }
.facture-entete b { color: var(--texte); }
.chat-tg .boutons-bot + .boutons-bot { margin-top: 6px; }
.cmd-explique { margin: 0 0 12px; min-height: 2.9em; font-size: 13.5px; line-height: 1.45; color: var(--encre-douce); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.avatar.tg { background: rgba(42,171,238,.18); color: var(--tg); }
.avatar.wa { background: rgba(37,211,102,.16); color: var(--wa); }
.qui { display: inline-flex; align-items: center; gap: 10px; }
.qui small { display: block; font-size: 12px; color: var(--doux); font-weight: 400; }

/* ---------- autres atouts : liste a trois colonnes, icone a cote du titre ---------- */
.a-atouts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 40px; padding: 32px 0 8px; border-top: 1px solid var(--trait); }
.a-atouts h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 8px; }
.a-atouts h3 svg { flex: none; color: var(--accent-texte); }
.a-atouts p { margin: 0; color: var(--encre-douce); font-size: 15px; max-width: 34ch; }

/* ---------- etapes : frise numerotee (l'ordre compte) ---------- */
.a-etapes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; counter-reset: etape; margin: 0; padding: 16px 0 24px; position: relative; }
.a-etapes::before { content: ""; position: absolute; top: 33px; left: 18px; right: calc(33.33% - 18px); height: 2px; background: var(--trait); }
.a-etapes li { list-style: none; position: relative; }
.a-etapes li::before { counter-increment: etape; content: counter(etape); position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 16px;
  font: 700 15px var(--titre); color: #fff; background: var(--accent-fonce); box-shadow: 0 0 0 6px var(--fond); }
.a-etapes b { display: block; font-family: var(--titre); font-size: 18px; margin-bottom: 6px; }
.a-etapes p { margin: 0; color: var(--encre-douce); font-size: 15px; max-width: 32ch; }

/* ---------- tarifs ---------- */
.a-tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; padding: 14px 0 8px; }
.a-tarif { position: relative; display: grid; gap: 4px; align-content: start; background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; padding: 22px 20px; transition: transform .25s ease, border-color .25s ease; }
.a-tarif:hover { transform: translateY(-3px); border-color: var(--bord-vif); }
.a-tarif.mis-en-avant { border-color: rgba(62,207,142,.6); background: var(--avant-fond); }
.a-tarif .ruban { position: absolute; top: -11px; left: 18px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--ok); color: var(--ruban-texte); }
.a-tarif .nom { color: var(--doux); font-size: 14px; }
.a-tarif .prix { font: 700 30px var(--titre); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.a-tarif .duree { color: var(--doux); font-size: 13.5px; }
.a-tarif .par-mois { color: var(--encre-douce); font-size: 13px; margin-top: 6px; }

/* ---------- appel final ---------- */
/* l'appel final a la forme d'un ticket WiFi : talon « 1 MOIS offert », ligne de decoupe
   en pointilles avec encoches, puis le texte et les boutons */
.a-final { margin: 56px 0 10px; }
.a-final h2 { font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 10px; }
.a-final p { color: var(--encre-douce); margin: 0 0 24px; max-width: 40em; }
.a-final .a-actions { margin-top: 0; }
.ticket { position: relative; display: grid; grid-template-columns: 230px 1fr; background: var(--ticket-fond); border: 1px solid var(--bord-vif); border-radius: 20px; overflow: hidden; }
.ticket-talon { position: relative; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 32px 20px; background: var(--talon-fond); border-right: 2px dashed var(--decoupe); }
.ticket-talon::before, .ticket-talon::after { content: ""; position: absolute; right: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--fond); border: 1px solid var(--bord-vif); }
.ticket-talon::before { top: -14px; }
.ticket-talon::after { bottom: -14px; }
.ticket-etiquette { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.ticket-code { font: 700 38px/1.1 var(--mono); letter-spacing: .03em; color: var(--texte-fort); font-variant-numeric: tabular-nums; }
.ticket-sous { font-size: 14px; font-weight: 600; color: var(--ok); }
.ticket-corps { padding: 34px 36px 36px; }
.ticket .cta-creux { border-color: var(--decoupe); }

/* ---------- page « MIKH+ en action » (decouvrir.php) ---------- */
/* reseau de routeurs en fond fixe de toute la page, sous le contenu */
.fond-reseau { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: var(--reseau-opacite); }
.vitrine main, .vitrine .pied { position: relative; z-index: 1; }
.vitrine .pied { background: var(--fond); }
.v-tete { text-align: center; max-width: 46rem; margin: 0 auto; padding: 64px 0 36px; }
.v-tete h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px; }
.v-tete h1 em { font-style: normal; color: var(--accent-texte); }
.v-tete .chapeau { color: var(--encre-douce); font-size: 18px; margin: 0 auto; max-width: 40em; }
.v-scene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; padding: 24px 0 56px; }
.v-carte { margin: 0; display: grid; gap: 22px; }
.v-carte .maquette { max-width: 470px; background: var(--carte-voile); }
.v-carte figcaption { max-width: 470px; margin: 0 auto; width: 100%; }
.v-carte h2 { font-size: 22px; margin: 0 0 8px; }
.v-carte p { margin: 0; color: var(--encre-douce); }
.v-tarifs { padding: 24px 0 8px; }
.v-tarifs h2 { text-align: center; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.01em; margin-bottom: 18px; }
.v-tarifs .a-tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.v-tarifs .a-tarif { background: var(--carte-voile); }
.v-tarifs .a-tarif.mis-en-avant { background: var(--avant-voile); }
.v-garanties { justify-content: center; margin-top: 20px; }
@media (max-width: 900px) {
  .v-tete { padding: 40px 0 20px; }
  .v-scene { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 760px) {
  .v-tarifs .a-tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- menu du site : Accueil / Produits / Tarifs / Contact ---------- */
.accueil .barre { gap: 18px; }
.menu-site { flex: 1; }
/* sur ordinateur, liens au milieu de la barre (ALPHA 2026-10-05) : centres dans l'espace libre, puis au milieu
   exact de la page des que la place le permet (sans jamais passer sous « Se connecter avec Google ») */
@media (min-width: 761px) { .menu-site ul { justify-content: center; } }
@media (min-width: 1180px) { .accueil .menu-site { position: absolute; left: 50%; transform: translateX(-50%); flex: none; } }
.menu-site ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu-site a { display: block; padding: 8px 12px; border-radius: 9px; color: var(--encre-douce); text-decoration: none; font-weight: 500; font-size: 15px; }
.menu-site a:hover { color: var(--texte); background: var(--voile-1); }
.menu-site a:focus-visible { outline: 2px solid var(--wave); outline-offset: 2px; }
/* « Installer l'application » (assets/pwa.js, 2026-10-10) : cache tant que le navigateur ne le permet pas */
.menu-site [hidden] { display: none !important; }
.menu-site .menu-installer { display: inline-flex; align-items: center; gap: 6px; color: var(--wave); font-weight: 600; white-space: nowrap; }
/* barre serree (entre telephone et grand ecran) : icone seule, texte en info-bulle et pour les lecteurs d'ecran */
@media (min-width: 761px) and (max-width: 1000px) {
  .menu-site .menu-installer .mi-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.menu-site-bouton { display: none; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--bord-vif); background: transparent; color: var(--texte); cursor: pointer; }
.menu-site-bouton:focus-visible { outline: 2px solid var(--wave); outline-offset: 2px; }
/* ancres sous l'en-tete fixe */
#haut, #vendre, #vendeurs, #rapports, #clients, #paiements, #tarifs, #contact { scroll-margin-top: 80px; }
@media (max-width: 760px) {
  .menu-site-bouton { display: inline-grid; order: 3; flex: none; }
  .accueil .barre { flex-wrap: nowrap; gap: 8px; padding-inline: 12px; }
  .accueil .barre-droite { gap: 6px; }
  .globe summary > span { display: none; } /* globe en icone seule : la langue est indiquee dans son menu */
  .globe summary { padding: 8px 9px; }
  .accueil .barre .barre-droite { margin-inline-start: auto; }
  .menu-site { position: absolute; top: 100%; inset-inline: 0; z-index: 35; display: none; padding: 8px 16px 14px; background: var(--fond); border-bottom: 1px solid var(--trait); }
  .menu-site.ouvert { display: block; }
  .menu-site ul { flex-direction: column; gap: 2px; }
  .menu-site a { padding: 12px 10px; font-size: 16px; }
}

/* ---------- bouton theme : Ivoire (clair) <-> Nuit (sombre) ---------- */
.bouton-theme { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--bord-vif); color: var(--texte); text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.bouton-theme:hover { background: var(--voile-1); }
.bouton-theme:active { transform: scale(.94); }
.bouton-theme:focus-visible { outline: 2px solid var(--wave); outline-offset: 2px; }
/* sombre (nuit, ardoise) : le soleil propose le clair ; clair : la lune propose le sombre */
html:not([data-palette]) .bouton-theme .ic-lune, html[data-palette="ardoise"] .bouton-theme .ic-lune { display: none; }
html[data-palette]:not([data-palette="ardoise"]) .bouton-theme .ic-soleil { display: none; }

/* ---------- globe : choix de la langue (7 langues du hub et du bot) ---------- */
.accueil .barre-droite { gap: 10px; }
.globe { position: relative; }
.globe summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--bord-vif); color: var(--texte); font: 600 13px var(--corps); cursor: pointer; }
.globe summary::-webkit-details-marker { display: none; }
.globe summary:hover { background: var(--voile-1); }
.globe summary:focus-visible { outline: 2px solid var(--wave); outline-offset: 2px; }
.globe ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--surface2); border: 1px solid var(--bord-vif); border-radius: 12px; }
.globe a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--encre-douce); text-decoration: none; font-size: 14.5px; }
.globe a:hover, .globe a:focus-visible { background: rgba(79,109,245,.18); color: var(--texte-fort); outline: none; }
.globe a[aria-current] { color: var(--texte-fort); font-weight: 600; background: rgba(79,109,245,.28); }

.v-actions { justify-content: center; margin-top: 26px; }
/* rubriques de l'accueil : indication sous le texte */
.v-astuce { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 14px; color: var(--tg-texte); }
.v-astuce svg { flex: none; }
.vitrine .a-bloc { border-bottom-color: var(--bloc-trait); }

/* ---------- abonnes maison (PPPoE) ---------- */
.v-ppp { border-bottom: 0; }
.v-h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.01em; margin: 0 0 14px; }
.abonne { display: grid; grid-template-columns: 10px 70px 42px 1fr; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--trait); font-size: 14px; }
.abonne .profil { font: 500 12.5px var(--mono); color: var(--doux); }
.abonne .puce { justify-self: start; white-space: normal; }
.abonne .mini-action { grid-column: 2 / -1; justify-self: start; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; background: rgba(139,108,246,.18); color: var(--mini-action-texte); }
.abonne .pt { width: 9px; height: 9px; border-radius: 50%; }
.pt.ok { background: var(--ok); } .pt.att { background: var(--att); } .pt.ko { background: var(--ko); } .pt.gris { background: var(--pt-gris); }
.puce.ko { color: var(--ko-texte); background: rgba(240,96,93,.14); }
.puce.gris { color: var(--encre-douce); background: var(--voile-3); }
.abonnes-resume { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--doux); }

/* ---------- lecture de droite a gauche (arabe) ---------- */
[dir="rtl"] .ticket-talon { border-right: 0; border-left: 2px dashed var(--decoupe); }
[dir="rtl"] .ticket-talon::before, [dir="rtl"] .ticket-talon::after { right: auto; left: -14px; }
[dir="rtl"] .cta svg[width="18"][viewBox="0 0 24 24"] { transform: scaleX(-1); }
[dir="rtl"] .marque { direction: ltr; unicode-bidi: isolate; } /* la marque MIKH+ reste « MIKH+ » */

/* surfaces du navigateur aux couleurs du site */
.accueil ::selection { background: rgba(79,109,245,.55); color: #fff; }
html:has(body.accueil) { scrollbar-color: var(--bord-vif) var(--fond); }

/* ---------- telephone ---------- */
@media (max-width: 900px) {
  .a-hero { grid-template-columns: 1fr; gap: 36px; padding: 36px 0 30px; }
  .a-reseau { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.3), #000 45%, transparent); mask-image: linear-gradient(180deg, rgba(0,0,0,.3), #000 45%, transparent); }
  .a-scene { padding-bottom: 72px; }
  .toasts { left: 50%; transform: translateX(-50%); bottom: 0; width: min(320px, 92vw); }
  .a-bloc { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .a-bloc.inverse .a-bloc-texte { order: 0; }
  .a-atouts { grid-template-columns: 1fr; gap: 22px; }
  .a-etapes { grid-template-columns: 1fr; gap: 24px; }
  .a-etapes::before { display: none; }
  .a-etapes li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: -20px; width: 2px; background: var(--trait); }
  .a-etapes li { padding-left: 56px; }
  .a-etapes li::before { position: absolute; left: 0; top: 0; margin: 0; }
}
@media (max-width: 760px) {
  /* ticket : talon au-dessus, decoupe horizontale */
  .ticket { grid-template-columns: 1fr; }
  .ticket-talon { border-right: 0; border-bottom: 2px dashed var(--decoupe); padding: 24px 20px 26px; }
  .ticket-talon::before, .ticket-talon::after { top: auto; right: auto; bottom: -14px; }
  .ticket-talon::before { left: -14px; }
  .ticket-talon::after { right: -14px; }
  [dir="rtl"] .ticket-talon { border-left: 0; }
  [dir="rtl"] .ticket-talon::before { left: -14px; right: auto; }
  [dir="rtl"] .ticket-talon::after { right: -14px; left: auto; }
  .ticket-corps { padding: 26px 20px 24px; text-align: center; }
  .ticket-corps p { margin-left: auto; margin-right: auto; }
  .a-tarifs { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .a-tarif { padding: 18px 14px; }
  .a-tarif .prix { font-size: 23px; }
  .kpis { gap: 8px; }
  .kpi { padding: 9px 10px; }
  .kpi b { font-size: 17px; }
  .a-actions .cta { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js-actif .revele, .toast { transition: none !important; }
  .js-actif .revele { opacity: 1; transform: none; }
  .bulle.ok { animation: none; }
  .js-actif .trace { stroke-dashoffset: 0; animation: none !important; }
  .js-actif .aire { opacity: 1; }
  .js-actif .vendeur .barre-v i { transform: none; transition: none; }
  .ecrit i { animation: none; }
}