/* Dokitscript — accueil refondu (maquette validée du 22/09/2026).
   Couche de présentation, active seulement sous html.dkh (posée par la page).
   Chaque valeur trace vers les tokens de la page (:root de index.html = DESIGN.md §2-5)
   ou vers la maquette (scratchpad/maquette : accueil-complet.html, widget.css, ds.css).
   Paliers : ≥1280 large · 1024–1279 portable · 768–1023 tablette · <768 téléphone. */

.dkh { --ease: cubic-bezier(.22,1,.36,1); --ease-pop: cubic-bezier(.34,1.56,.64,1); --success-bg: rgba(16,185,129,.12); --warn: #f59e0b; --mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace; }
.dkh .dkh-hide { display: none !important; }
.dkh .dkh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dkh .dkh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.dkh .dkh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 24px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; line-height: 1; text-align: center; transition: background var(--transition), box-shadow var(--transition); }
.dkh .dkh-btn-primary { background: var(--primary); color: #fff; }
.dkh .dkh-btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-sm); }
.dkh .dkh-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--primary-light); color: var(--primary-hover); flex-shrink: 0; }
.dkh .dkh-meta { font-size: 13px; color: var(--text-light); line-height: 1.6; }
/* Icônes plateformes (couleurs de marque tierces : logos non interactifs) */
.dkh .dkh-plat { width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.dkh .dkh-plat svg { width: 16px; height: 16px; display: block; }
.dkh .plat-instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.dkh .plat-tiktok, .dkh .plat-x { background: #010101; }
.dkh .plat-youtube { background: #ff0000; }
.dkh .plat-facebook { background: #1877f2; }
.dkh .plat-linkedin { background: #0A66C2; }
.dkh .plat-file { background: var(--primary-light); color: var(--primary); }
/* Vrais logos en couleurs (public/js/brand-logos.js) : tuile claire, bordure fine, logo à ~60 %.
   Le glyphe blanc sur fond de marque ci-dessus ne sert plus que de repli si ce script manque. */
.dkh .dkh-plat.dkh-brand { box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); }
.dkh .dkh-plat.dkh-brand svg.dk-brand { width: 60%; height: 60%; }
.dkh #urlPlatIcon.wx-ico:has(> svg.dk-brand) { box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); }
.dkh #urlPlatIcon.wx-ico > svg.dk-brand { width: 60%; height: 60%; }

/* ═══ En-tête ═══ */
@media (min-width: 1024px) { .dkh .header-inner { gap: 32px; } }
.dkh .header .nav { gap: 4px; }
.dkh .header .nav > a, .dkh .header .nav-dd-trigger { height: 40px; padding: 0 12px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.dkh .header .nav > a:hover, .dkh .header .nav-dd-trigger:hover, .dkh .header .nav-dd.open .nav-dd-trigger { color: var(--text); background: var(--surface); }
.dkh #headerActions { margin-inline-start: 0; }
.dkh .dkh-login { order: 0; height: 40px; padding: 0 16px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.dkh .dkh-login:hover { color: var(--text); background: var(--surface-2); }
.dkh .dkh-login[style*="display: none"], .dkh .dkh-login[style*="display:none"] { display: none !important; }
.dkh .header-inner > .nav + * { margin-inline-start: auto; }
.dkh .header-inner > .nav + .dkh-login[style*="none"] + * { margin-inline-start: auto; }
/* Méga-menu Solutions : 3 colonnes */
.dkh .nav-dd-menu.dkh-mega { width: 640px; padding: 24px; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); inset-inline-start: -140px; left: auto; box-shadow: var(--shadow-lg); }
.dkh .nav-dd.open .nav-dd-menu.dkh-mega { display: grid; }
.dkh .dkh-mega .dkh-mh { font-size: 12px; font-weight: 600; color: var(--text-light); margin: 0 0 8px; padding: 0 8px; }
.dkh .dkh-mega .nav-dd-item { min-height: 40px; padding: 0 8px; }
.dkh .dkh-mega .nav-dd-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menu mobile : feuille plein écran */
@media (max-width: 1023px) {
  .dkh .mob-nav.dkh-sheet.open { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); background: #fff; z-index: 99; overflow: auto; padding: 8px 16px 32px; display: block; border-top: 1px solid var(--border); }
  .dkh .mob-nav.dkh-sheet .mob-nav-link { display: flex; align-items: center; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--border); font-size: 16px; }
  .dkh .mob-nav.dkh-sheet .mob-nav-group-label { padding: 16px 4px 8px; font-size: 12px; font-weight: 600; color: var(--text-light); text-transform: none; letter-spacing: 0; }
  .dkh .mob-nav.dkh-sheet .mob-nav-divider { margin: 8px 0; }
  .dkh .mob-nav.dkh-sheet .mob-nav-contact { display: flex; align-items: center; min-height: 48px; padding: 0 4px; font-size: 16px; }
  .dkh .dkh-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
  .dkh .dkh-sgrid .mob-nav-sublink { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 12px 4px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.3; word-break: break-word; }
  .dkh .dkh-sgrid .mob-nav-sublink:hover { border-color: #c4b5fd; background: var(--primary-50); }
  .dkh .dkh-sico { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text); }
  .dkh .dkh-sico svg { width: 22px; height: 22px; }
  body.dkh-sheet-open { overflow: hidden; }
}
@media (max-width: 1279px) { .dkh .header .nav > a.dkh-opt { display: none; } }
@media (max-width: 767px) { .dkh .dkh-login { display: none !important; } .dkh #headerActions { margin-inline-start: auto; } }

/* ═══ Hero ═══ */
.dkh .hero.dkh-hero { padding: 48px 24px 64px; }
.dkh .hero-social-proof { height: 44px; padding: 0 16px 0 6px; gap: 12px; border: 0; border-radius: 999px; box-shadow: 0 4px 16px rgba(124,58,237,.10), 0 1px 3px rgba(15,23,42,.06); margin-bottom: 24px; font-size: 14px; color: var(--text-muted); }
.dkh .hero-social-proof .sp-avatar { width: 30px; height: 30px; font-size: 12px; font-weight: 700; border: 2px solid #fff; }
.dkh .dkh-stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: 1px; color: var(--border); line-height: 1; flex-shrink: 0; }
.dkh .dkh-stars::before { content: '\2605\2605\2605\2605\2605'; }
.dkh .dkh-stars i { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--warn); font-style: normal; white-space: nowrap; }
.dkh .dkh-stars i::before { content: '\2605\2605\2605\2605\2605'; }
[dir="rtl"] .dkh-stars i, .dkh[dir="rtl"] .dkh-stars i { inset: 0 0 0 auto; }
.dkh .dkh-rate { font-size: 13px; color: var(--text-light); font-weight: 600; white-space: nowrap; }
.dkh .dkh-rate:hover { color: var(--primary); }
.dkh .hero h1 { font-weight: 700; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.06; max-width: 860px; text-wrap: balance; margin-bottom: 16px; }
.dkh .hero h1 .gradient-text { background: none; -webkit-text-fill-color: currentColor; color: var(--primary); }
.dkh .hero-subtitle { max-width: 640px; margin-inline: auto; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; color: var(--text-muted); }
/* Widget : mêmes formes, corrections ciblées de la maquette */
.dkh .hero-widget { max-width: 720px; margin-bottom: 0; position: relative; }
.dkh .widget-url-row { min-height: 52px; padding-inline: 14px 4px; } /* logique : la tuile garde sa marge en arabe (RTL) */
.dkh .widget-url-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.dkh .dkh-plats { display: flex; gap: 4px; flex-shrink: 0; max-width: 150px; overflow: hidden; transition: opacity .2s var(--ease), max-width .25s var(--ease), margin .25s var(--ease), visibility 0s; }
/* Champ rempli : la rangée (invitation du champ vide) s'efface et rend sa place à l'URL.
   :placeholder-shown suit aussi les valeurs posées par script ; .dkh-filled (home-refonte.js)
   couvre les navigateurs sans :has. La marge négative reprend le gap de 12px de la rangée. */
.dkh .widget-url-row.dkh-filled .dkh-plats,
.dkh .widget-url-row:has(.widget-url-input:not(:placeholder-shown)) .dkh-plats { opacity: 0; max-width: 0; margin-inline-start: -12px; visibility: hidden;
  transition: opacity .15s var(--ease), max-width .25s var(--ease), margin .25s var(--ease), visibility 0s .25s; }
@media (prefers-reduced-motion: reduce) { .dkh .dkh-plats, .dkh .widget-url-row.dkh-filled .dkh-plats { transition: none; } }
.dkh .dkh-plats .dkh-plat { width: 20px; height: 20px; border-radius: 6px; opacity: .9; }
.dkh .dkh-plats .dkh-plat.dkh-brand { opacity: 1; }
.dkh .dkh-plats .dkh-plat svg { width: 11px; height: 11px; }
.dkh .dkh-paste { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 9px; background: #fff; border: 1px solid var(--border); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; flex-shrink: 0; transition: color var(--transition), border-color var(--transition); }
.dkh .dkh-paste:hover { color: var(--primary); border-color: #c4b5fd; }
.dkh .dkh-paste-i svg { display: block; }
.dkh .speaker-toggle-wrap { padding: 10px 14px; }
.dkh .speaker-toggle-label { font-size: 14px; color: var(--primary-hover); }
.dkh .speaker-toggle-sub { font-size: 12px; color: var(--text-muted); opacity: 1; }
.dkh .speaker-toggle-wrap > div { flex: 1; min-width: 0; }
.dkh .speaker-toggle-switch.dkh-lock .speaker-toggle-slider { background: var(--border-2); }
/* Ligne de confiance : texte discret sous le bouton (maquette .info), plus de bandeau vert */
.dkh .widget-trust { background: transparent; border-top: 0; padding: 0 20px 18px; margin-top: -4px; font-size: 13px; color: var(--text-light); font-weight: 400; }
.dkh .widget-trust svg { display: none; }
.dkh .wx-pro { background: linear-gradient(135deg, #7c3aed, #a855f7); }
/* Bande « Fonctionne avec » + chiffres */
.dkh .hero .plat-strip { margin-top: 32px; gap: 12px; }
.dkh .hero .plat-strip-label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-light); }
.dkh .hero .plat-logos { gap: 8px 20px; }
.dkh .hero .plat-logos .pl { font-size: 14px; color: var(--text-muted); }
.dkh .hero .plat-logos .pl svg { width: 20px; height: 20px; }
.dkh .statbar.dkh-stats { border: 0; background: transparent; max-width: 880px; margin: 40px auto 0; }
.dkh .dkh-stats .statbar-inner { padding: 0; gap: 0; text-align: start; }
.dkh .dkh-stats .statbar-inner > * { padding: 0 16px; border-inline-start: 1px solid var(--border); }
.dkh .dkh-stats .statbar-inner > :first-child { border: 0; }
.dkh .dkh-stats b { font-size: 24px; }
.dkh .dkh-stats span { font-size: 13px; color: var(--text-light); }
.dkh .hero .error-box { max-width: 720px; margin: 16px auto 0; text-align: start; }
.dkh .dkh-note { max-width: 720px; margin: 12px auto 0; font-size: 14px; color: var(--text-muted); min-height: 0; }
.dkh .dkh-note:empty { display: none; }

/* ═══ Transcription en cours : la carte ne change pas de taille, elle devient la piste audio ═══ */
.dkh #heroWidget:not(.is-run) .dkh-run { display: none !important; }
.dkh #heroWidget.is-run > #wxSeg, .dkh #heroWidget.is-run > .widget-input-zone, .dkh #heroWidget.is-run > #widgetTrust { display: none !important; }
body.dkh-running #skeletonLoader { display: none !important; }
.dkh .dkh-steps { position: relative; display: flex; gap: 4px; background: var(--surface-2); border-radius: 13px; padding: 5px; margin: 20px 20px 0; }
.dkh .dkh-sthumb { position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); background: #fff; border-radius: 9px; box-shadow: var(--shadow); z-index: 0; transition: transform .3s cubic-bezier(.34,1.2,.4,1), width .3s cubic-bezier(.34,1.2,.4,1); }
.dkh .dkh-st { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px; font-size: 13px; font-weight: 700; color: var(--text-light); white-space: nowrap; transition: color .3s; }
.dkh .dkh-st .dkh-ck { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; transform: scale(0); transition: transform .3s var(--ease-pop); flex-shrink: 0; }
.dkh .dkh-st .dkh-ck svg { display: block; }
.dkh .dkh-st.done { color: var(--text-muted); } .dkh .dkh-st.done .dkh-ck { transform: scale(1); }
.dkh .dkh-st.now { color: var(--text); } .dkh .dkh-st.now .dkh-ck { display: none; }
.dkh .dkh-st .dkh-sp { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary-light); border-top-color: var(--primary); animation: dkhRot .8s linear infinite; display: none; flex-shrink: 0; }
.dkh .dkh-st.now .dkh-sp { display: block; }
.dkh .dkh-stl { overflow: hidden; text-overflow: ellipsis; }
@keyframes dkhRot { to { transform: rotate(360deg); } }
.dkh .dkh-runzone { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.dkh .dkh-src { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 4px 4px 4px 14px; min-height: 52px; }
[dir="rtl"] .dkh .dkh-src, .dkh[dir="rtl"] .dkh-src { padding: 4px 14px 4px 4px; }
.dkh .dkh-uico .dkh-plat { position: relative; }
.dkh .dkh-uico .dkh-plat::after { content: '\2713'; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; background: var(--success); color: #fff; border: 2px solid var(--surface); border-radius: 50%; font-size: 8px; font-weight: 900; display: grid; place-items: center; }
.dkh .dkh-u { flex: 1; min-width: 0; font-size: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; direction: ltr; }
.dkh .dkh-clock { font-family: var(--mono); font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; padding-inline-end: 10px; }
.dkh .dkh-cancel { height: 44px; padding: 0 12px; border-radius: 9px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.dkh .dkh-cancel:hover { background: #fff; color: var(--text); }
.dkh .dkh-track { position: relative; height: 104px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.dkh .dkh-bars { position: absolute; inset: 16px 14px 36px; display: flex; align-items: center; gap: 3px; }
.dkh .dkh-bars i { flex: 1; height: 100%; border-radius: 2px; background: var(--border); transform: scaleY(.08); transform-origin: center; transition: transform .5s var(--ease), background .25s linear; }
.dkh .dkh-bars i.in { transform: scaleY(var(--h)); }
.dkh .dkh-bars i.read { background: var(--primary); }
.dkh .dkh-head { position: absolute; top: 10px; bottom: 30px; width: 2px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); left: 14px; opacity: 0; transition: left .6s linear, right .6s linear, opacity .3s; }
.dkh #heroWidget.dkh-p-tr .dkh-head { opacity: 1; }
.dkh .dkh-cap { position: absolute; left: 14px; right: 14px; bottom: 8px; display: flex; justify-content: space-between; font-size: 12px; color: var(--text-light); white-space: nowrap; }
.dkh .dkh-okrow { display: none; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--success-bg); font-size: 14px; color: #047857; font-weight: 600; }
.dkh .dkh-okrow svg { display: block; }
.dkh #heroWidget.dkh-p-done .dkh-okrow { display: flex; }
.dkh #heroWidget.dkh-p-done .dkh-cancel { display: none; }

/* ═══ Résultat : 2 colonnes sur grand écran ═══ */
.dkh .dkh-result { display: none; padding: 0 0 72px; }
.dkh .dkh-result.is-on { display: block; animation: dkhRise .6s var(--ease) both; scroll-margin-top: 88px; }
@keyframes dkhRise { from { opacity: 0; transform: translateY(16px); } }
.dkh .dkh-rgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.dkh .dkh-card { background: #fff; border: 1.5px solid #e6e0f4; border-radius: 20px; box-shadow: 0 12px 44px rgba(124,58,237,.10), 0 4px 16px rgba(15,23,42,.06); }
.dkh .dkh-rmain { overflow: hidden; min-width: 0; }
.dkh .dkh-rmain .result-area { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.dkh .dkh-rh { display: flex; align-items: center; gap: 16px; padding: 20px; flex-wrap: wrap; }
.dkh .dkh-rico .dkh-plat { width: 44px; height: 44px; border-radius: 12px; }
.dkh .dkh-rico .dkh-plat svg { width: 22px; height: 22px; }
.dkh .dkh-rt { flex: 1; min-width: 200px; }
.dkh .dkh-rtitle { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.dkh .dkh-rt .result-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding: 0; border: 0; }
.dkh .dkh-rt .meta-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.dkh .dkh-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dkh .dkh-copy { min-height: 44px; padding: 12px 20px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px -4px rgba(124,58,237,.4); white-space: nowrap; }
.dkh .dkh-copy:hover { background: var(--primary-hover); }
.dkh .dkh-acts .result-actions { display: flex; gap: 8px; }
.dkh .dkh-acts .icon-btn { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; display: grid; place-items: center; color: var(--text-muted); }
.dkh .dkh-acts #copyBtn { display: none; }
.dkh .dkh-rbar { display: flex; gap: 12px; align-items: center; padding: 0 20px 16px; flex-wrap: wrap; }
.dkh .dkh-srch { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; color: var(--text-light); }
.dkh .dkh-srch:focus-within { border-color: var(--primary); }
.dkh .dkh-srch-i svg { display: block; }
.dkh .dkh-srch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.dkh .dkh-srch-n { font-size: 12px; color: var(--text-light); white-space: nowrap; }
.dkh .dkh-vseg { position: relative; display: flex; gap: 4px; background: var(--surface-2); border-radius: 13px; padding: 4px; }
.dkh .dkh-vthumb { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); background: #fff; border-radius: 9px; box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.34,1.2,.4,1), width .3s; }
.dkh .dkh-vb { position: relative; z-index: 1; min-height: 36px; padding: 8px 14px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-muted); border-radius: 9px; cursor: pointer; white-space: nowrap; }
.dkh .dkh-vb.on { color: var(--text); }
.dkh .dkh-rmain .preview-notice { margin: 0 20px 12px; }
.dkh .dkh-rmain .transcript-content, .dkh .dkh-rmain #transcriptContent { border-top: 1px solid var(--border); padding: 24px 28px; font-size: 16px; line-height: 1.8; max-height: 560px; }
.dkh .dkh-rmain .more-exports-btn, .dkh .dkh-rmain .extra-exports, .dkh .dkh-rmain #multilangWarning, .dkh .dkh-rmain .anon-nudge { margin-inline: 20px; }
.dkh .dkh-rmain .more-exports-btn { margin-block: 0 16px; }
::highlight(dkh-find) { background: #fde68a; color: inherit; }
.dkh .dkh-rail { position: sticky; top: 88px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.dkh .dkh-rail > * { min-width: 0; overflow-wrap: anywhere; }
.dkh .dkh-rail > .dkh-card { padding: 20px; margin: 0; max-width: none; }
.dkh .dkh-rail h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.dkh .dkh-keep .dkh-btn { width: 100%; margin-top: 16px; }
.dkh .dkh-rail .ai-section { background: #fff; border-color: #e6e0f4; }
.dkh .dkh-rail .ai-buttons { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dkh .dkh-rail .ai-btn { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; text-align: start; font-size: 14px; font-weight: 600; color: var(--text); }
.dkh .dkh-rail .ai-btn:hover { border-color: #c4b5fd; background: var(--primary-50); }
.dkh .dkh-rail #aiQuestionInput { font-size: 16px !important; min-height: 44px; }
.dkh .dkh-rail #aiResult { margin-top: 0; }
.dkh #historySection { max-width: 1200px; padding: 40px 32px 56px; margin: 0 auto; box-sizing: border-box; }

/* ═══ Sections ═══ */
/* Trois étapes, horizontales avec un trait */
.dkh .how-section .demo-window { display: none; }
.dkh .how-section .how-grid { display: block; max-width: 1136px; margin: 48px auto 0; }
.dkh .how-section .how-grid > .rv-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.dkh .how-section .how-grid > .rv-group::before { content: ''; position: absolute; top: 20px; left: 16%; right: 16%; height: 2px; background: var(--border); }
.dkh .how-section .how-step { display: block; text-align: center; padding: 0; border: 0 !important; position: relative; }
.dkh .how-section .how-num { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 0 8px var(--surface); }
.dkh .how-section .how-step h3 { margin-top: 16px; font-size: 18px; }
.dkh .how-section .how-step p { margin: 6px auto 0; font-size: 15px; max-width: 320px; }
/* FAQ sur deux colonnes */
.dkh .dkh-faq { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; max-width: 1136px; margin: 0 auto; }
.dkh .dkh-faq-side { position: sticky; top: 96px; text-align: start; }
.dkh .dkh-faq-side .section-header { text-align: start; margin: 0; max-width: none; }
.dkh .dkh-faq-side .section-title { text-align: start; }
.dkh .dkh-faq-more { margin-top: 24px; text-align: start !important; }
.dkh .dkh-faq-list { max-width: none !important; margin: 0 !important; }
.dkh .home-faq-q { min-height: 64px; font-size: 17px; }
/* Parrainage : carte claire */
/* Bandeau final : carte sombre arrondie */
.dkh .cta-band { background: transparent; padding: 64px 32px 96px; overflow: visible; }
.dkh .cta-band::after { content: none; }
.dkh .cta-band-in { max-width: 1136px; background: var(--text); border-radius: 24px; padding: 72px 32px; }
.dkh .cta-band p { color: #cbd5e1; opacity: 1; }
/* Pied : 5 colonnes, 3 sur tablette, accordéon sur téléphone */
.dkh .footer-inner { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 1023px) and (min-width: 768px) {
  .dkh .footer-inner { grid-template-columns: repeat(3, 1fr) !important; }
  .dkh .footer-inner > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .dkh .footer-inner { grid-template-columns: 1fr !important; gap: 0 !important; }
  .dkh .footer-inner > :first-child { margin-bottom: 24px; }
  .dkh .dkh-fcol { border-bottom: 1px solid var(--border); }
  .dkh .dkh-fcol .footer-col-title { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; font-size: 15px; cursor: pointer; }
  .dkh .dkh-fcol .footer-col-title::after { content: '+'; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); transition: transform var(--transition); font-weight: 500; }
  .dkh .dkh-fcol.open .footer-col-title::after { transform: rotate(45deg); color: var(--primary); border-color: #c4b5fd; }
  .dkh .dkh-fcol:not(.open) .footer-links { display: none; }
  .dkh .dkh-fcol .footer-links { margin: 0 0 16px; }
  .dkh .dkh-fcol .footer-links a { display: inline-flex; align-items: center; min-height: 36px; }
}
/* Bouton flottant (téléphone) */

/* ═══ Tarifs : 5 cartes → 3 colonnes (portable) → 2 colonnes (tablette) → carrousel ═══ */
.dkh #tarifs .billing-toggle { padding: 4px; border-radius: 13px; background: var(--surface-2); border: 0; }
.dkh #tarifs .billing-toggle .toggle-btn { min-height: 44px; padding: 0 16px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; background: transparent; box-shadow: none; }
.dkh #tarifs .billing-toggle .toggle-btn.active { background: #fff; color: var(--text); box-shadow: var(--shadow); }
.dkh #tarifs .save-badge { font-size: 11px; font-weight: 700; color: #047857; background: var(--success-bg); padding: 2px 8px; border-radius: 999px; }
.dkh #tarifs .pm-btn { min-height: 44px; }
.dkh .pricing-grid.dkh-plans { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: 1320px; align-items: stretch; outline-offset: 4px; }
.dkh .dkh-plans .pricing-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; transform: none; }
.dkh .dkh-plans .pricing-card.popular { border: 2px solid var(--primary); box-shadow: var(--shadow-md); transform: none; }
.dkh .dkh-plans .popular-badge { position: absolute; top: -12px; left: 24px; right: auto; transform: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: none; }
.dkh[dir="rtl"] .dkh-plans .popular-badge { left: auto; right: 24px; }
.dkh .dkh-plans .pricing-card h3, .dkh .dkh-plans .card-plan { font-size: 18px; font-weight: 700; margin: 0; color: var(--text); }
.dkh .dkh-plans .pricing-desc { font-size: 13px; color: var(--text-light); margin: 2px 0 0; }
.dkh .dkh-plans .price { margin-top: 16px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dkh .dkh-plans .price-amount { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dkh .dkh-plans .price s { color: var(--text-light); font-size: 16px; }
.dkh .dkh-plans .price-period { font-size: 14px; color: var(--text-light); }
.dkh .dkh-plans .promo-note { min-height: 20px; font-size: 12px; color: var(--text-light); margin: 2px 0 0; }
.dkh .dkh-plans .dkh-save { font-size: 12px; font-weight: 700; color: #047857; margin-top: 2px; }
.dkh .dkh-plans .dkh-usage { margin: 12px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--primary-50); color: var(--primary-hover); font-size: 13px; font-weight: 600; line-height: 1.4; }
.dkh .dkh-feat { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--text-muted); flex-grow: 1; align-content: start; }
.dkh .dkh-feat li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; line-height: 1.5; text-align: start; }
.dkh .dkh-feat .dkh-fi { color: var(--success); padding-top: 3px; }
.dkh .dkh-feat .dkh-fi svg { display: block; }
.dkh .dkh-feat b { color: var(--text); font-weight: 600; }
.dkh .dkh-plans .pricing-btn { margin-top: auto; width: 100%; min-height: 44px; }
/* Business dans la grille (même carte, ids conservés) */
.dkh .dkh-plans .bplan.dkh-biz { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; background: #fff; }
.dkh .dkh-biz .bplan-head { display: block; }
.dkh .dkh-biz .bfeat { display: grid; gap: 10px; margin: 16px 0 24px; font-size: 14px; color: var(--text-muted); flex-grow: 1; align-content: start; }
.dkh .dkh-biz .bfeat > span { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.5; text-align: start; }
.dkh .dkh-biz .bfeat svg { width: 14px; height: 14px; margin-top: 3px; fill: none; stroke: var(--success); stroke-width: 3; }
.dkh .dkh-biz .bfeat b { color: var(--text); font-weight: 600; }
.dkh .bband.dkh-bband { display: block; max-width: 1200px; margin-top: 16px; box-shadow: none; }
.dkh .bband.dkh-bband .bbeyond { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding: 16px 24px; border: 0; background: var(--surface); }
.dkh .bband.dkh-bband .bbeyond h3 { font-size: 15px; margin: 0; }
.dkh .bband.dkh-bband .bbeyond p { flex: 1; min-width: 220px; margin: 0; font-size: 14px; color: var(--text-muted); }
.dkh .bband.dkh-bband .bbeyond .pricing-btn { width: auto; min-height: 44px; }
.dkh .dkh-dots { display: none; justify-content: center; gap: 0; margin-top: 8px; }
.dkh .dkh-dot { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; }
.dkh .dkh-dot i { width: 8px; height: 8px; border-radius: 4px; background: var(--border-2); transition: width .2s var(--ease), background .2s; }
.dkh .dkh-dot.on i { width: 20px; background: var(--primary); }
.dkh .dkh-reassure { list-style: none; max-width: 1200px; margin: 24px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: 14px; color: var(--text-muted); }
.dkh .dkh-reassure li { display: inline-flex; align-items: center; gap: 8px; }
.dkh .dkh-reassure .dkh-ri { color: var(--primary); display: grid; }
.dkh .dkh-reassure .dkh-ri svg { display: block; }
/* 1024–1279 : prix réduit ; les 5 cartes passent en 3 colonnes (voir plus bas) */
@media (max-width: 1279px) {
  .dkh .dkh-plans .pricing-card { padding: 20px; }
  .dkh .dkh-plans .price-amount { font-size: 30px; }
  .dkh .dkh-rgrid { grid-template-columns: minmax(0, 1fr) 340px; }
}
/* 5 cartes en 3 colonnes (3 + 2) : à 4 cartes en 2 colonnes, la grille tenait mais plus à 5 */
@media (max-width: 1279px) and (min-width: 1024px) { .dkh .pricing-grid.dkh-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; } }

/* ─── ≤1023 : tablette ─── */
@media (max-width: 1023px) {
  .dkh .dkh-wrap { padding: 0 24px; }
  .dkh .dkh-rgrid { grid-template-columns: minmax(0, 1fr); }
  .dkh .dkh-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dkh #historySection { padding: 32px 24px 48px; }
  .dkh .dkh-faq { grid-template-columns: 1fr; gap: 24px; }
  .dkh .dkh-faq-side { position: static; }
  .dkh .pricing-grid.dkh-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .dkh .cta-band { padding: 48px 24px 72px; }
}
/* ─── ≤767 : téléphone ─── */
@media (max-width: 767px) {
  .dkh .dkh-wrap { padding: 0 16px; }
  .dkh .hero.dkh-hero { padding: 24px 16px 40px; }
  .dkh .hero-subtitle { margin-bottom: 24px; }
  .dkh .hero-social-proof { gap: 8px; padding-inline-end: 12px; max-width: 100%; }
  .dkh .hero-social-proof .sp-avatar { width: 26px; height: 26px; font-size: 11px; }
  .dkh .hero-social-proof .sp-avatar:nth-child(4) { display: none; }
  .dkh .dkh-rate { display: none; }
  .dkh .dkh-plats { display: none !important; }
  .dkh .statbar.dkh-stats { margin-top: 32px; }
  .dkh .dkh-stats .statbar-inner { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .dkh .dkh-stats .statbar-inner > :nth-child(3) { border: 0; }
  .dkh .dkh-rail { grid-template-columns: minmax(0, 1fr); }
  .dkh .dkh-rh { padding: 16px; }
  .dkh .dkh-acts { width: 100%; }
  .dkh .dkh-copy { flex: 1; }
  .dkh .dkh-rbar { padding: 0 16px 12px; }
  .dkh .dkh-vseg { width: 100%; }
  .dkh .dkh-vb { flex: 1; padding: 8px 6px; }
  .dkh .dkh-rmain .transcript-content, .dkh .dkh-rmain #transcriptContent { padding: 16px; }
  .dkh #historySection { padding: 24px 16px 40px; }
  .dkh .how-section .how-grid > .rv-group { grid-template-columns: 1fr; gap: 24px; }
  .dkh .how-section .how-grid > .rv-group::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 2px; height: auto; }
  .dkh[dir="rtl"] .how-section .how-grid > .rv-group::before { left: auto; right: 19px; }
  .dkh .how-section .how-step { display: grid; grid-template-columns: 40px 1fr; gap: 16px; text-align: start; }
  .dkh .how-section .how-num { margin: 0; }
  .dkh .how-section .how-step h3 { margin-top: 6px; }
  .dkh .how-section .how-step p { margin-inline: 0; }
  .dkh .home-faq-q { font-size: 16px; }
  .dkh .cta-band { padding: 40px 16px 56px; }
  .dkh .cta-band-in { padding: 48px 20px; border-radius: 20px; }
  /* Tarifs en carrousel : une carte et demie visible, défilement natif aimanté */
  .dkh .pricing-grid.dkh-plans { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 16px 16px 8px; max-width: none; scrollbar-width: none; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
  .dkh .pricing-grid.dkh-plans::-webkit-scrollbar { display: none; }
  .dkh .dkh-plans .pricing-card { flex: 0 0 calc((100% - 12px) / 1.5); scroll-snap-align: center; padding: 20px; }
  .dkh .dkh-plans .price-amount { font-size: 28px; }
  .dkh .dkh-dots { display: flex; }
  .dkh .dkh-reassure { flex-direction: column; align-items: flex-start; max-width: 420px; }
  .dkh .bband.dkh-bband .bbeyond { padding: 16px; }
}
@media (max-width: 420px) { .dkh .dkh-plans .pricing-card { flex-basis: 78%; } }
/* ≤600 px : libellés courts (onglets, bouton) — même mécanisme que la maquette (t-short / c-short) */
@media (max-width: 600px) {
  .dkh .wx-seg-btn span[data-short] { font-size: 0; }
  .dkh .wx-seg-btn span[data-short]::after { content: attr(data-short); font-size: 13px; }
  .dkh .wx-seg-btn { gap: 6px; padding: 11px 4px; font-size: 13px; }
  .dkh .wx-seg .wx-pro { display: none; }
  .dkh #transcribeBtn[data-short], .dkh #uploadTranscribeBtn[data-short], .dkh #bulkTranscribeBtn[data-short] { font-size: 0; }
  .dkh #transcribeBtn[data-short] > *, .dkh #uploadTranscribeBtn[data-short] > *, .dkh #bulkTranscribeBtn[data-short] > * { display: none; }
  .dkh #transcribeBtn[data-short]::after, .dkh #uploadTranscribeBtn[data-short]::after, .dkh #bulkTranscribeBtn[data-short]::after { content: attr(data-short); font-size: 15px; }
  .dkh .dkh-paste-k { display: none; }
  .dkh .dkh-paste { width: 44px; padding: 0; justify-content: center; }
  .dkh .dkh-steps { margin: 12px 12px 0; }
  .dkh .dkh-runzone { padding: 12px; }
  .dkh .dkh-st .dkh-stl { display: none; }
  .dkh .dkh-st.now .dkh-stl { display: inline; }
  .dkh .widget-trust { padding: 0 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dkh .dkh-result.is-on { animation: none; }
  .dkh .dkh-bars i, .dkh .dkh-head, .dkh .dkh-sthumb, .dkh .dkh-vthumb { transition: none; }
  .dkh .dkh-st .dkh-sp { animation-duration: 2.4s; }
}
.dkh .dkh-biz .bfeat > span > span { display: block !important; }
/* Le -24px compense l'écart de 32px du bureau ; sous 1024px l'écart tombe à 12px et le décalage faisait chevaucher logo, langue et bouton. */
@media (min-width: 1024px) { .dkh .header-inner > .dkh-login + *, .dkh .header-inner > #langSwitcher + #headerActions, .dkh .header-inner > #langSwitcher + .dkh-login { margin-inline-start: -24px; } }
@media (max-width: 767px) { .dkh .header-inner > #langSwitcher { margin-inline-start: auto; } .dkh #headerActions { margin-inline-start: 0; } }
.dkh .dkh-biz .bfeat { grid-template-columns: 1fr; min-width: 0; flex: none; }
.dkh .dkh-biz .bfeat > span { padding: 0; text-indent: 0; }
.dkh .dkh-biz .bfeat > span > span { padding: 0; text-indent: 0; line-height: 1.5; }
.dkh .dkh-biz .bfeat svg { margin: 3px 0 0; vertical-align: 0; }
.dkh .dkh-plans .bplan .pricing-btn { align-self: stretch; }
.dkh .bband.dkh-bband .bbeyond { justify-content: flex-start; text-align: start; }
.dkh .dkh-biz .bfeat > span { display: block; position: relative; padding-inline-start: 26px; }
.dkh .dkh-biz .bfeat > span > svg { position: absolute; inset-inline-start: 0; top: 4px; margin: 0; }
.dkh .dkh-biz .bfeat > span > span { display: inline !important; }
.dkh .dkh-biz .bfeat { margin-inline: 0; padding: 0; }
.dkh .bband.dkh-bband .bbeyond { flex-direction: row; align-items: center; }
.dkh .bband.dkh-bband .bbeyond h3, .dkh .bband.dkh-bband .bbeyond p { text-align: start; }
.dkh .dkh-rmain #transcriptContent { white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; }
.dkh .dkh-rail #aiBtnQuestion { width: auto; flex-shrink: 0; }
.dkh .widget-url-input { min-width: 0; }
.dkh .dkh-rail .ai-section > div[style*="border-top"] > div[style*="display:flex"], .dkh .dkh-rail .ai-section > div[style*="border-top"] > div[style*="display: flex"] { flex-wrap: wrap; }
.dkh .dkh-rail #aiQuestionInput { min-width: 0; width: 100%; }
.dkh .dkh-plans .pricing-btn { white-space: normal; line-height: 1.25; padding-inline: 12px; text-align: center; }
.dkh .dkh-plans .bplan.dkh-biz { align-items: stretch; }
.dkh .dkh-biz .bplan-head, .dkh .dkh-biz .bfeat { width: 100%; }
/* Le bouton flottant ne recouvre jamais les boutons d'achat */
.dkh .dkh-mega .nav-dd-item span { white-space: normal; overflow: visible; line-height: 1.3; }
.dkh .dkh-mega .nav-dd-item { min-height: 40px; padding-block: 6px; }

/* Titres et surtitres de section : tokens de la maquette (.eyebrow, .h2). La section avis est injectée par homepage-reviews.js avec sa propre police système : on la ramène dans la charte. */
.dkh .section-label { background: none; padding: 0; border-radius: 0; letter-spacing: 1px; }
.dkh .section-title, .dkh #bulk h2, .dkh .dks-reviews-head h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.dkh .dks-reviews-section { font-family: inherit; }

/* Mobile, comme la maquette : burger à droite, logos de plateformes sans libellé, texte du bloc « en masse » avant son illustration. */
@media (max-width: 1023px) { .dkh .header .mob-menu-btn { order: 10; } }
@media (max-width: 860px) { .dkh .bulk-visual { order: 0; } }
@media (max-width: 599px) {
  .dkh .hero .plat-logos { gap: 16px; }
  .dkh .hero .plat-logos .pl { font-size: 0; gap: 0; }
  .dkh .hero .plat-logos .pl svg { width: 22px; height: 22px; }
}
/* L'ancienne règle masquait l'icône du logo sous 768px ; la maquette la garde. Sous 375px la rangée logo + langue + bouton + burger ne tient pas avec elle. */
@media (min-width: 375px) and (max-width: 768px) { .dkh .header .logo img { display: inline-block !important; } }

/* Pastille de preuve : .sp-ticker{display:flex} écrasait l'attribut hidden posé quand les statistiques sont indisponibles, et « … transcriptions réalisées » restait affiché. Pastille entièrement masquée quand elle n'a plus rien de réel à montrer. */
.dkh .sp-ticker[hidden] { display: none; }
.dkh .hero-social-proof:has(.sp-ticker[hidden]):has(.social-proof-avatars.dkh-hide):not(:has(.dkh-rate)) { display: none; }
/* ═══ Arabe et hindi (ar/index.html, hi/index.html) ═══
   Inter n'a ni glyphes arabes ni devanagari : repli explicite sur les polices système de ces écritures
   plutôt que sur la police sans-serif par défaut. L'arabe est une écriture liée : tout interlettrage
   non nul casse les ligatures, d'où le 0 imposé. Les deux écritures ont des jambages plus hauts. */
.dkh:lang(ar) body { font-family: 'Inter', 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif; }
.dkh:lang(hi) body { font-family: 'Inter', 'Nirmala UI', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Mangal', sans-serif; }
.dkh:lang(ar) body *, .dkh:lang(hi) .hero h1, .dkh:lang(hi) .section-title, .dkh:lang(hi) #bulk h2 { letter-spacing: 0 !important; }
.dkh:lang(ar) .hero h1, .dkh:lang(hi) .hero h1 { line-height: 1.3; }
.dkh:lang(ar) .section-title, .dkh:lang(ar) #bulk h2, .dkh:lang(hi) .section-title, .dkh:lang(hi) #bulk h2 { line-height: 1.4; }
/* Sens de lecture : ce que la page fixe en « left/right » physique */
.dkh[dir="rtl"] .home-faq-q, .dkh[dir="rtl"] .hero-widget, .dkh[dir="rtl"] .selected-files-list, .dkh[dir="rtl"] .mob-nav-contact { text-align: right; }
.dkh[dir="rtl"] .social-proof-avatars .sp-avatar { margin-left: 0; margin-right: -8px; }
.dkh[dir="rtl"] .social-proof-avatars .sp-avatar:first-child { margin-right: 0; }
.dkh[dir="rtl"] .sp-ticker-slide strong { margin-right: 0; margin-left: 3px; }
.dkh[dir="rtl"] .save-badge { margin-left: 0; margin-right: 6px; }
.dkh[dir="rtl"] #starterBtn::before, .dkh[dir="rtl"] #creatorBtn::before, .dkh[dir="rtl"] #proBtn::before, .dkh[dir="rtl"] #businessBtn::before { margin-right: 0; margin-left: 7px; }
.dkh[dir="rtl"] .bulk-cta svg, .dkh[dir="rtl"] .cta-band-btn svg { transform: scaleX(-1); }
/* Les liens restent des chaînes gauche→droite (points de suspension au bon bout) */
.dkh[dir="rtl"] .bulk-row-url, .dkh[dir="rtl"] .demo-url { direction: ltr; text-align: right; }
.dkh[dir="rtl"] #urlInput:not(:placeholder-shown), .dkh[dir="rtl"] #bulkUrlsInput { direction: ltr; text-align: right; }

/* Fond de page : blanc uni comme la maquette (body { background: var(--bg) }). La page gardait un dégradé lavande en background-attachment: fixed ; au défilement, les sections transparentes passaient sur la lavande juste sous le bas blanc du hero, d'où une cassure nette au-dessus de « Transcriptions récentes ». */
html.dkh body { background: var(--bg); }

/* Parrainage : carte de la maquette Compte (.sec « Parrainage »). L'ancien style visait un fond violet (bouton texte blanc sur blanc translucide) : sur le fond clair de la refonte, le bouton Copier était invisible. */
.dkh .referral-section { background: transparent; padding: 0 32px 56px; }
.dkh .referral-section .referral-inner { max-width: 1136px; margin: 0 auto; padding: 24px; text-align: start; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 8px 32px; align-items: center; }
.dkh .referral-section .referral-inner h2 { grid-column: 1; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.dkh .referral-section .referral-inner p { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.dkh .referral-section .referral-inner p strong { color: var(--text) !important; font-weight: 600; } /* le HTML porte style="color:#fff" (ancien fond violet) */
.dkh .referral-section .referral-box { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; margin: 0; max-width: none; background: none; border: 0; border-radius: 0; overflow: visible; }
.dkh .referral-section .referral-link-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font-size: 16px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dkh .referral-section .referral-link-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.dkh .referral-section .referral-copy-btn { min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--primary); background: var(--bg); border: 1px solid var(--primary-light); border-radius: var(--radius-sm); cursor: pointer; }
.dkh .referral-section .referral-copy-btn:hover { background: var(--primary-50); }
.dkh .referral-section .referral-copy-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dkh .referral-section .referral-stats { grid-column: 3; grid-row: 1 / span 2; margin: 0; gap: 24px; justify-content: flex-end; }
.dkh .referral-section .referral-stat { font-size: 12px; color: var(--text-muted); text-align: center; }
.dkh .referral-section .referral-stat strong { font-size: 20px; font-weight: 700; color: var(--text); }
@media (max-width: 1023px) {
  .dkh .referral-section { padding: 0 24px 48px; }
  .dkh .referral-section .referral-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .dkh .referral-section .referral-box { grid-column: 1 / -1; grid-row: auto; }
  .dkh .referral-section .referral-stats { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 599px) {
  .dkh .referral-section { padding: 0 16px 40px; }
  .dkh .referral-section .referral-inner { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .dkh .referral-section .referral-stats { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .dkh .referral-section .referral-box { flex-wrap: wrap; }
  .dkh .referral-section .referral-link-input { flex: 1 1 100%; }
  .dkh .referral-section .referral-copy-btn { flex: 1 1 100%; }
}

/* Bouton flottant « Transcrire » (téléphone) : bulle au-dessus de la bulle de contact, pilule entre les transcriptions récentes et les tarifs. États posés par fab() dans home-refonte.js : is-on, is-pill, is-run. Toujours à droite, comme la bulle de contact (y compris en arabe). */
.dkh-fab { position: fixed; right: 16px; bottom: 92px; z-index: 36; display: flex; align-items: center; height: 52px; min-width: 52px; max-width: calc(100vw - 32px); padding: 0 14px; border-radius: 26px; background: var(--primary); color: #fff; text-decoration: none; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), padding .3s cubic-bezier(.2,.8,.2,1), bottom .15s linear; -webkit-tap-highlight-color: transparent; }
.dkh-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dkh-fab:active { transform: scale(.96); }
.dkh-fab:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }
.dkh-fab-ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.dkh-fab-ico svg { width: 22px; height: 22px; }
.dkh-fab-txt { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: 600; opacity: 0; transition: max-width .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease, margin .3s cubic-bezier(.2,.8,.2,1); }
.dkh-fab.is-pill { padding: 0 20px 0 16px; }
.dkh-fab.is-pill .dkh-fab-txt { max-width: 240px; margin-inline-start: 10px; opacity: 1; }
.dkh-fab-ring { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--primary); border-right-color: var(--primary); opacity: 0; pointer-events: none; }
.dkh-fab.is-run { background: var(--bg); color: var(--primary); border: 1px solid var(--primary-light); }
.dkh-fab.is-run .dkh-fab-ring { opacity: 1; animation: dkhFabSpin 1s linear infinite; }
@keyframes dkhFabSpin { to { transform: rotate(360deg); } }
@media (min-width: 768px) { .dkh-fab { display: none; } }
@media (prefers-reduced-motion: reduce) { .dkh-fab, .dkh-fab-txt { transition: none; } .dkh-fab.is-run .dkh-fab-ring { animation-duration: 2.4s; } }
/* Sélecteurs du widget : points de suspension plutôt qu'un mot coupé net (« de la langu », audit 23/09) */
.dkh .widget-select { text-overflow: ellipsis; }
/* Méga-menu Solutions : tuiles de marque identiques au menu des pages SEO (seo-shell.css → .dks-plat), écrites dans le HTML */
.dkh .dkh-mega .nav-dd-item { gap: 12px; }
.dkh .dkh-plat, .dkh .dkh-mega .nav-dd-item span.dkh-plat { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #fff; flex-shrink: 0; overflow: visible; white-space: normal; }
.dkh .dkh-mega .nav-dd-item .dkh-plat svg, .dkh .dkh-plat svg { width: 12px; height: 12px; color: inherit; }
.dkh .dkh-plat.is-meet, .dkh .dkh-mega .nav-dd-item span.dkh-plat.is-meet { background: none; }
.dkh .dkh-mega .nav-dd-item .dkh-plat.is-meet svg, .dkh .dkh-plat.is-meet svg { width: 22px; height: 22px; }
.dkh .dkh-plat.is-file, .dkh .dkh-mega .nav-dd-item span.dkh-plat.is-file { background: var(--primary-light, #ede9fe); color: var(--primary, #7c3aed); }
.dkh .dkh-mega .nav-dd-item .dkh-plat.is-file svg, .dkh .dkh-plat.is-file svg { width: 14px; height: 14px; }
.dkh .dkh-sico .dkh-plat { width: 28px; height: 28px; border-radius: 8px; }
.dkh .dkh-sico .dkh-plat svg { width: 14px; height: 14px; }
.dkh .dkh-sico .dkh-plat.is-meet svg { width: 28px; height: 28px; }
/* Pastille du haut : initiales factices (S M J A) et étoiles figées jamais montrées. Place réservée, contenu révélé
   quand les vrais avis sont arrivés (.dkh-proof-ready, posée par home-refonte.js → proof()) */
.dkh .hero-social-proof .sp-stars { display: none; }
.dkh .hero-social-proof:not(.dkh-proof-ready) .social-proof-avatars { visibility: hidden; }