/* ============================================================
   ACCUEIL ALLÉGÉ (2026-10-05) : spotlite-app.com, FR / EN / ES
   ------------------------------------------------------------
   Demande du fondateur : trop de texte, page trop longue. Règle
   de la page : un titre par section, au plus UNE phrase d'une
   ligne, et le reste est montré (maquettes), pas expliqué.
   La page est passée de 14 écrans à environ 5 sur ordinateur.

   Feuille SÉPARÉE de style.css, chargée par les trois accueils
   seulement : style.css est partagée avec le blog (ASSET_VER) et
   les pages guides, qu'on ne veut pas rebumper pour l'accueil.
   Les anciennes sections (faits, A à Z, pour qui, substitution,
   étapes, visio) ont quitté l'accueil ; leurs règles restent
   dans style.css, où d'autres pages en utilisent une partie.
   ============================================================ */

body.home section { padding: 84px 0; }
@media (max-width: 700px) { body.home section { padding: 60px 0; } }
.home .hero { padding: 76px 0 34px; }
.home .hero .lead { max-width: 52ch; }
/* Plus de trait bleu sous le titre (retiré le 2026-10-06 à la demande du
   fondateur) : ni l'ancienne flèche « A à Z », ni le trait sous « autrement ».
   Les règles .h1-az de style.css ne servent plus à l'accueil. */
.h-soft { background: var(--bg-soft); }

.h-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.h-head .eyebrow { margin-bottom: 1rem; }
.h-head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.h-head p { margin-top: .9rem; font-size: 1.08rem; color: var(--ink-soft); }

/* ============================================================
   LE HÉROS (2026-10-06) : l'ATS en décor, le dossier devant
   ------------------------------------------------------------
   Le titre vend le dossier candidat ; la capture de l'ATS reste
   derrière, et la maquette du dossier (.mkdos, style.css) passe
   devant, à cheval sur son bord bas.
   Le dossier est DANS la fenêtre (.win) : sur téléphone, main.js
   réduit la fenêtre d'un bloc (`.shot.fit`, transform: scale) et
   le dossier se réduit avec elle. Le téléphone montre la même
   image que l'ordinateur, en miniature : l'ATS ET le dossier.
   ⛔ Ne plus masquer la capture de l'ATS sur mobile (essayé le
   2026-10-06, refusé par le fondateur : « t'as enlevé l'aperçu
   de l'ATS »).
   `.win` passe en overflow visible pour laisser le dossier
   déborder en bas ; ses deux bandes reprennent les coins arrondis
   que le `overflow: hidden` leur donnait. Le débord ne compte pas
   dans `offsetHeight` (position absolue) : la marge négative de
   main.js reste juste, la marge basse de .hero-stage le loge.
   ============================================================ */
.hero-stage { margin-bottom: 64px; }
.hero-stage .win { position: relative; overflow: visible; }
.hero-stage .win-bar { border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; }
.hero-stage .win-body { border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px); }
.hero-dos {
  position: absolute; z-index: 2; right: 48px; bottom: -64px; width: 340px; text-align: left;
  border-color: rgba(17, 17, 26, .08);
  box-shadow: 0 2px 6px rgba(10, 10, 15, .08), 0 34px 90px rgba(10, 10, 15, .34);
}
@media (prefers-color-scheme: dark) { .hero-dos { border-color: #2a2d36; box-shadow: 0 34px 90px rgba(0, 0, 0, .7); } }
/* Réduit avec la fenêtre : un peu plus large, pour rester lisible comme image. */
.shot.fit .hero-dos { right: 26px; width: 380px; }
@media (max-width: 760px) { .hero-stage { margin-bottom: 36px; } }

/* ============================================================
   TÉLÉPHONE : TRÈS PEU DE TEXTE (fondateur, 2026-10-06)
   « Le recruteur doit comprendre en regardant les images » ;
   « le texte sur mobile doit être vraiment limité ». Sous 640 px :
   pas d'eyebrow au héros (le titre dit à qui on parle), les tuiles
   du bento n'ont plus que leur nom, et « Pourquoi Spotlite existe »
   garde son titre et le paragraphe de l'histoire, mais perd la
   phrase « Alors on a construit… » (le titre dit déjà « Un dossier,
   si. »), la liste et la note, que le dossier du héros montre en
   image. Sur ordinateur, le récit reste complet.
   ============================================================ */
@media (max-width: 640px) {
  .home .hero .eyebrow { display: none; }
  .h-head .h-sub { display: none; } /* « Utilisez seulement ce qui vous sert » : ordinateur seulement */
  .bt .bt-s { display: none; }
  .sl-solo .sl-grid p:nth-of-type(2), .sl-solo .sl-list, .sl-solo .sl-note { display: none; }
  .sl-solo .sl-grid p { font-size: 1rem; }
}

/* « Pourquoi Spotlite existe » garde son texte détaillé (l'histoire du
   fondateur, la liste du dossier, la note gratuit / pass) : c'est la SEULE
   exception à la règle d'une ligne, demandée par le fondateur le 2026-10-05.
   Ses styles restent ceux de style.css (.spotlight, .sl-list, .sl-note).
   Depuis le 2026-10-06 sa maquette est dans le héros : le récit est centré,
   seul, comme un manifeste (.sl-solo). Sur téléphone il repasse à gauche,
   un paragraphe centré se lit mal en colonne étroite. */
.spotlight.sl-solo { padding: 76px 56px; text-align: center; }
.sl-solo .sl-grid { display: block; max-width: 740px; margin: 0 auto; }
.sl-solo h2 .sl-b { display: block; } /* « Un dossier, si. » sur sa propre ligne */
.sl-solo .sl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; max-width: 640px; margin: 2rem auto 0; text-align: left; }
.sl-solo .sl-note { max-width: 58ch; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .spotlight.sl-solo { padding: 44px 26px; } }
@media (max-width: 640px) {
  .spotlight.sl-solo { text-align: left; }
  .sl-solo h2 { margin-left: 0; }
  .sl-solo .sl-list { grid-template-columns: 1fr; }
}

/* « Je suis candidat » (2026-10-05) : à DROITE sur ordinateur, juste avant
   « Ouvrir mon espace » (.nav-cand), les deux portes côte à côte. Un lien,
   pas un bouton : le seul appel fort reste celui du recruteur. Sous 901 px
   la barre n'a que la langue et le burger : le lien passe dans le menu
   burger (copie .nav-mob, cachée sur ordinateur).
   Entre 901 et 1100 px le menu passait sur deux lignes (libellé coupé,
   bouton de langue écrasé) : espacement resserré, libellés jamais coupés. */
.home .nav-links a, .home .lang-btn { white-space: nowrap; }
.nav-cand { padding: .5rem .6rem; border-radius: 10px; font-size: .95rem; font-weight: 560; color: var(--ink); white-space: nowrap; transition: opacity .15s; }
.nav-cand:hover { opacity: .7; }
@media (min-width: 901px) { .nav-links .nav-mob { display: none; } }
@media (max-width: 900px) { .nav-cand { display: none; } }
@media (min-width: 901px) and (max-width: 1100px) {
  .home .nav-links { margin-left: .8rem; }
  .home .nav-links a { padding: .5rem .5rem; }
  .nav-cand { padding: .5rem .3rem; }
}

/* ============================================================
   BENTO DES FONCTIONNALITÉS
   Une tuile = un outil : une maquette, un nom, quelques mots.
   4 colonnes, 3 rangées pleines : la visio prend 2×2, les
   candidatures 2×1 (grid-auto-flow: dense fait le reste).
   Couleurs des maquettes sur les jetons du site (thème clair et
   sombre), sauf la visio, qui est une capture d'appel : sombre
   dans les deux thèmes, comme la vraie.
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; }
.bt {
  position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  padding: 20px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.bt-wide { grid-column: span 2; }
.bt-big { grid-column: span 2; grid-row: span 2; }
.bt-viz { flex: 1; min-height: 132px; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.bt-t { font-size: 1.06rem; letter-spacing: -0.022em; line-height: 1.2; }
.bt-s { margin-top: 4px; font-size: .87rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .bento { gap: 10px; }
  .bt { padding: 14px; gap: 12px; border-radius: 18px; }
  .bt-big { grid-row: span 1; }
  .bt-viz { min-height: 104px; }
  .bt-t { font-size: .96rem; }
  .bt-s { font-size: .79rem; }
  /* Sur téléphone, une petite tuile = sa maquette + son nom. */
  .bt:not(.bt-wide):not(.bt-big) .bt-s { display: none; }
  .td { font-size: .72rem; gap: 6px; }
  .cal-h span { display: none; }
}

/* ---- Candidatures : CV, vidéo, images, score ---- */
.ap { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); }
.ap img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.ap-id { min-width: 0; flex: 1; }
.ap-id b { display: block; font-size: .86rem; font-weight: 640; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-id small { display: block; font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ch { display: flex; gap: 5px; flex: none; }
.ap-ch i { font-style: normal; font-size: .68rem; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; }
.ap-ch i.sc { background: #e7f6ef; border-color: #bfe6d3; color: #15734f; font-weight: 700; }
@media (prefers-color-scheme: dark) { .ap-ch i.sc { background: #10241b; border-color: #1e3a2c; color: #4fe0a5; } }
@media (max-width: 560px) { .ap-ch i:not(.sc) span { display: none; } .ap { padding: 7px 8px; gap: 8px; } .ap img { width: 28px; height: 28px; } }

/* ---- Entretien IA : l'onde, puis le résultat ---- */
.ai-row { display: flex; align-items: center; gap: 10px; }
.ai-mic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #5b8cff, #9a7dff); box-shadow: 0 0 0 5px color-mix(in srgb, #7f8cff 18%, transparent); }
.ai-mic svg { width: 18px; height: 18px; }
.ai-wave { flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.ai-wave i { flex: 1 1 0; min-width: 2px; max-width: 5px; height: var(--h, 40%); border-radius: 3px; background: linear-gradient(180deg, #7f8cff, #5b8cff); transform-origin: center; animation: ai-w 1.4s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes ai-w { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ai-wave i { animation: none; } }
.ai-res { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; margin-top: 4px; }
.ai-res b { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ai-res b small { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ai-res span { font-size: .74rem; font-weight: 650; color: #15734f; background: #e7f6ef; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .ai-res span { color: #4fe0a5; background: #10241b; } }

/* ---- Signature : le contrat, le paraphe, « Signé » ---- */
.sg { position: relative; padding: 14px 14px 12px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); }
.sg i { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); margin-bottom: 7px; }
.sg i:nth-child(2) { width: 82%; } .sg i:nth-child(3) { width: 64%; }
.sg svg { display: block; width: 74%; height: 34px; margin-top: 4px; }
.sg svg path { fill: none; stroke: #3466f6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sg-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px dashed var(--line-strong); padding-top: 7px; font-size: .68rem; color: var(--muted); }
.sg-line span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-line b { font-size: .7rem; color: #15734f; font-weight: 700; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .sg-line b { color: #4fe0a5; } .sg svg path { stroke: #7f9dff; } }

/* ---- Visio traduite : capture d'appel, sombre dans les deux thèmes ---- */
.bt-call .bt-viz { justify-content: flex-start; }
.vc { flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid #1c1c22; }
.vc-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; min-height: 180px; background: #1c1c22; }
.vc-tile { position: relative; overflow: hidden; background: #111; }
.vc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.vc-tile span { position: absolute; left: 10px; bottom: 9px; z-index: 1; font-size: .72rem; font-weight: 600; color: #fff; }
.vc-cap { padding: 12px 14px; background: #0b0b0d; color: #f4f4f6; font-size: .86rem; line-height: 1.45; }
.vc-cap .lv { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; font-size: .64rem; font-weight: 700; letter-spacing: .05em; color: var(--live); }
.vc-cap .lv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.6s infinite; }
.vc-cap .fl { font-size: .64rem; font-weight: 700; letter-spacing: .05em; color: #9aa0ff; }
.vc-cap q { display: block; margin-top: 4px; quotes: "« " " »"; }
:lang(en) .vc-cap q { quotes: "“" "”"; }
:lang(es) .vc-cap q { quotes: "«" "»"; }
@media (max-width: 560px) { .vc-grid { min-height: 150px; } .vc-cap { font-size: .78rem; padding: 10px 12px; } }

/* ---- Agenda : des créneaux, un réservé ---- */
.cal-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cal-h b { font-size: .88rem; letter-spacing: -0.01em; white-space: nowrap; }
.cal-h span { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.cal-s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cal-s i { font-style: normal; text-align: center; font-size: .74rem; font-weight: 600; padding: 7px 0; border-radius: 9px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft); }
.cal-s i.on { background: #3466f6; border-color: #3466f6; color: #fff; box-shadow: 0 6px 16px rgba(52, 102, 246, .3); }
.cal-s i.x { opacity: .45; text-decoration: line-through; }

/* ---- Vivier vidéo : des candidats qui montrent leur travail ---- */
.pool { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pool span { position: relative; aspect-ratio: 3 / 4; border-radius: 11px; overflow: hidden; background: var(--bg-soft); }
.pool img { width: 100%; height: 100%; object-fit: cover; }
.pool i { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .55rem; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); padding-left: 2px; }
.pool b { position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }

/* ---- Évaluations : trois scores, un diplôme contrôlé ---- */
.tb { display: grid; grid-template-columns: 4.6em 1fr 1.8em; align-items: center; gap: 8px; font-size: .72rem; color: var(--ink-soft); }
.tb b { height: 7px; border-radius: 4px; background: var(--bg-soft); border: 1px solid var(--line); position: relative; overflow: hidden; }
.tb b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); border-radius: 4px; background: linear-gradient(90deg, #5b8cff, #9a7dff); }
.tb em { font-style: normal; font-weight: 700; color: var(--ink); text-align: right; }
.dip { align-self: flex-start; margin-top: 4px; font-size: .7rem; font-weight: 650; padding: 4px 9px; border-radius: 999px; color: #15734f; background: #e7f6ef; }
@media (prefers-color-scheme: dark) { .dip { color: #4fe0a5; background: #10241b; } }

/* ---- Copilot : la journée préparée ---- */
.td { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 7px 0; border-top: 1px solid var(--line); }
.td:first-child { border-top: 0; }
.td::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; }
.td.ok::before { border: 0; background: #22a06b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.td.ok { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* ============================================================
   VITRINE : l'offre avec sa présentation, et le Smartlink
   ============================================================ */
.vit { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .vit { grid-template-columns: 1fr; gap: 44px; } }
.vit figure { margin: 0; min-width: 0; }
.vit figcaption { margin-top: 16px; text-align: center; font-size: .95rem; color: var(--ink-soft); }
.vit figcaption b { color: var(--ink); font-weight: 620; }
.vit figcaption a { color: var(--ink); font-weight: 560; white-space: nowrap; }
.vit figcaption a:hover { text-decoration: underline; text-underline-offset: 2px; }
.vit-phone { display: flex; flex-direction: column; align-items: center; }

/* ============================================================
   LE SMARTLINK DANS LE TÉLÉPHONE
   ------------------------------------------------------------
   Une VRAIE page Smartlink, recopiée de smartlink_site/public/
   assets/smartlink.css (thème « aurore », tuiles bento carrées,
   tuile d'info, dossier de liens, offres, panneau photo), et non
   une liste de boutons : la précédente maquette ne ressemblait à
   aucune page réelle (retour du fondateur, 2026-10-05).
   La page est construite à sa TAILLE RÉELLE (390 × 844, un
   iPhone) puis réduite d'un bloc par `transform: scale`, comme
   la capture de l'ATS : les proportions restent exactement
   celles du produit. ⛔ Jamais `zoom` (Safari iOS, voir .shot.fit).
   Couleurs EN DUR : c'est une capture, elle reste claire même
   quand le site passe en sombre.
   Si le rendu Smartlink change (rayons, tailles, thème), suivre
   ici, sinon la vitrine montre un produit qui n'existe pas.
   ============================================================ */
.slp {
  --sw: 268px; --sk: .68718; /* 268 / 390 */
  position: relative; width: calc(var(--sw) + 22px); padding: 11px; border-radius: 50px;
  background: #0c0c0f;
  box-shadow: 0 0 0 1px #2e2e36, inset 0 0 0 1px #24242a, 0 30px 80px rgba(10, 10, 15, .28), 0 8px 24px rgba(10, 10, 15, .16);
}
@media (prefers-color-scheme: dark) { .slp { box-shadow: 0 0 0 1px #3a3a44, inset 0 0 0 1px #24242a, 0 30px 90px rgba(0, 0, 0, .7); } }
.slp::before { content: ""; position: absolute; z-index: 3; top: 22px; left: 50%; width: 82px; height: 24px; margin-left: -41px; border-radius: 999px; background: #000; }
.slp::after { content: ""; position: absolute; z-index: 3; bottom: 18px; left: 50%; width: 96px; height: 4px; margin-left: -48px; border-radius: 999px; background: rgba(22, 22, 29, .38); }
.slp-scr { position: relative; width: var(--sw); height: calc(var(--sw) * 844 / 390); border-radius: 40px; overflow: hidden; background: #f2eefb; isolation: isolate; }
@media (max-width: 400px) { .slp { --sw: 236px; --sk: .60513; } }

.slm {
  --sl-card: rgba(255, 255, 255, .94); --sl-border: rgba(17, 17, 26, .07);
  --sl-text: #16161d; --sl-muted: #6b6b78; --sl-accent: #6d5cff;
  --sl-shadow: 0 1px 2px rgba(17, 17, 26, .04), 0 6px 20px rgba(17, 17, 26, .06);
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; overflow: hidden;
  transform: scale(var(--sk)); transform-origin: 0 0;
  padding: 0 20px; box-sizing: border-box; text-align: left;
  color: var(--sl-text); background: linear-gradient(160deg, #eef2ff, #f7ecff 55%, #ffeef6);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", sans-serif;
  font-size: 15px; line-height: 1.5; letter-spacing: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  pointer-events: none; user-select: none;
}
.slm * { box-sizing: border-box; }
.slm-bar { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 6px 14px 0 22px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.slm-bar span { display: flex; align-items: center; gap: 6px; }
.slm-bar svg { height: 12px; width: auto; }
.slm-av { display: block; width: 104px; height: 104px; margin: 14px 0 8px 2px; border-radius: 50%; object-fit: cover; background: var(--sl-card); outline: 4px solid var(--sl-card); box-shadow: var(--sl-shadow); }
.slm-name { padding: 2px 4px; font-size: 28px; font-weight: 780; letter-spacing: -0.03em; line-height: 1.05; }
.slm-sub { padding: 2px 4px; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.slm-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 168px; gap: 14px; margin: 14px 0; }
.slm-tile { position: relative; display: flex; min-width: 0; border-radius: 24px; overflow: hidden; background: var(--sl-card); border: 1px solid var(--sl-border); box-shadow: var(--sl-shadow); }
.slm-wide { grid-column: 1 / -1; }

/* Tuile d'info (intitulé · valeur · légende) */
.slm-stat { flex-direction: column; gap: 2px; padding: 16px 18px; background: color-mix(in srgb, #16161d 8%, #ffffff); }
.slm-stat .k { color: var(--sl-accent); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.slm-stat .v { font-size: 35px; font-weight: 780; letter-spacing: -.03em; line-height: 1.05; margin: 2px 0 4px; }
.slm-stat .s { margin-top: auto; color: var(--sl-muted); font-size: 14.5px; font-weight: 500; line-height: 1.3; }

/* Dossier de liens (aperçu « bibliothèque d'apps ») */
.slm-links { flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; }
.slm-links .q { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 104px; height: 104px; }
.slm-links .q b { display: grid; place-items: center; border-radius: 26%; color: #fff; box-shadow: 0 2px 8px rgba(17, 17, 26, .12); }
.slm-links .q svg { width: 58%; height: 58%; }
.slm-links .t { font-size: 12.5px; font-weight: 650; color: var(--sl-muted); }
.ic-li { background: #0a66c2; }
.ic-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.ic-wa { background: #25d366; }
.ic-ml { background: var(--sl-accent); }

/* Bloc offres (alimenté tout seul par les offres Spotlite du recruteur) */
.slm-jobs { margin: 12px 0; }
.slm-h { padding: 0 6px; margin-bottom: 8px; font-size: 12.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-muted); }
.slm-job { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: var(--sl-card); border: 1px solid color-mix(in srgb, #16161d 10%, transparent); }
.slm-job img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; }
.slm-job span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.slm-job b { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.slm-job small { font-size: 12.5px; color: var(--sl-muted); line-height: 1.3; }
.slm-job em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--sl-accent); border-radius: 999px; padding: 7px 14px; }

/* Panneau photo + pastilles en gélule */
.slm-panel { flex-direction: column; justify-content: space-between; padding: 14px; color: #fff; border: 0; }
.slm-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slm-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.05) 45%, rgba(0,0,0,.5)); }
.slm-panel > div { position: relative; z-index: 1; }
.slm-panel .t { display: block; font-size: 16px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.slm-panel .s { display: block; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.82); }
.slm-dock { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 18px; background: rgba(20,20,24,.46); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.slm-dock i { display: inline-flex; align-items: center; gap: 8px; font-style: normal; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.slm-dock i u { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; text-decoration: none; font-size: 15px; background: rgba(255,255,255,.2); }

/* ============================================================
   MODÈLES (2026-10-06) : la suite de la vitrine, accueil FR seul
   ------------------------------------------------------------
   Deux cartes-liens vers la famille « recruteurs » de chaque
   marketplace. Les vignettes dépassent du bas de la carte, qui
   les coupe : on devine la page, on clique pour la voir.
   Aucune phrase : un nom et une flèche.
   ============================================================ */
.mods { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.mod {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .2s;
}
.mod:hover { border-color: var(--line-strong); }
.mod-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.mod-h b { font-size: 1rem; font-weight: 620; letter-spacing: -0.02em; }
.mod-h i { font-style: normal; color: var(--muted); transition: transform .2s var(--ease), color .2s; }
.mod:hover .mod-h i { transform: translateX(3px); color: var(--ink); }
.mod-viz { position: relative; display: block; height: 230px; margin-top: 20px; }
.mod-viz img { display: block; height: auto; background: #fff; box-shadow: 0 1px 2px rgba(10, 10, 15, .06), 0 14px 34px rgba(10, 10, 15, .16); transition: transform .45s var(--ease); }
/* Pitch : deux diapositives en cascade, la shortlist devant. */
.mod-pi .mod-viz img { position: absolute; width: 64%; aspect-ratio: 1000 / 563; border-radius: 10px; }
.mod-pi .mod-viz img:nth-child(1) { left: 24px; top: 0; }
.mod-pi .mod-viz img:nth-child(2) { right: 24px; top: 84px; }
.mod-pi:hover .mod-viz img:nth-child(2) { transform: translateY(-6px); }
/* Smartlink : trois pages en téléphone, celle du milieu en avant. */
.mod-sl .mod-viz { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }
.mod-sl .mod-viz img { position: relative; top: 26px; width: 128px; aspect-ratio: 585 / 1040; border-radius: 18px; }
.mod-sl .mod-viz img:nth-child(2) { top: 0; }
.mod-sl:hover .mod-viz img { transform: translateY(-6px); }
@media (prefers-color-scheme: dark) { .mod-viz img { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); } }
@media (max-width: 700px) {
  .mods { grid-template-columns: 1fr; gap: 12px; margin-top: 44px; }
  .mod-h { padding: 15px 16px 0; }
  .mod-h b { font-size: .94rem; }
  .mod-viz { height: 170px; margin-top: 14px; }
  .mod-pi .mod-viz img { width: 70%; }
  .mod-pi .mod-viz img:nth-child(1) { left: 14px; }
  .mod-pi .mod-viz img:nth-child(2) { right: 14px; top: 46px; }
  .mod-sl .mod-viz { gap: 12px; }
  .mod-sl .mod-viz img { top: 22px; width: 94px; border-radius: 14px; }
}

/* ============================================================
   TARIF : deux cartes, la pile des sept outils dans celle du pass
   ============================================================ */
.plans { display: grid; grid-template-columns: 1fr 1.12fr; gap: 20px; max-width: 920px; margin: 0 auto; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--radius-xl); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.plan-k { font-size: .78rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.plan-p { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .5rem; margin: .6rem 0 1.3rem; }
.plan-p b { font-size: 3.2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.plan-p small { font-size: .95rem; color: var(--muted); }
.plan-l { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .62rem; }
.plan-l li { display: flex; align-items: center; gap: .65rem; font-size: .97rem; line-height: 1.35; }
.plan-l li::before { content: ""; flex: none; width: 6px; height: 11px; margin: 0 4px 4px 5px; border: solid #22a06b; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.plan .btn { width: 100%; margin-top: auto; }
.plan-f { display: block; margin-top: .75rem; text-align: center; font-size: .82rem; color: var(--muted); }
.plan-pass { background: var(--ink); color: var(--bg); border-color: transparent; box-shadow: var(--shadow); }
.plan-pass .plan-k, .plan-pass .plan-p small, .plan-pass .plan-f { color: color-mix(in srgb, var(--bg) 62%, transparent); }
.plan-pass .plan-l li::before { border-color: #4fe0a5; }
.plan-pass .btn-primary { background: var(--bg); color: var(--ink); }

/* La pile d'à côté, barrée : ce que remplace LE PASS (jamais le gratuit). */
.vs { margin: 0 0 1.5rem; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 8%, transparent); border: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); }
.vs-c { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-c s { font-size: .74rem; font-weight: 560; padding: 4px 9px; border-radius: 999px; color: color-mix(in srgb, var(--bg) 70%, transparent); background: color-mix(in srgb, var(--bg) 9%, transparent); text-decoration-color: color-mix(in srgb, var(--bg) 55%, transparent); white-space: nowrap; }
.vs-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: .86rem; color: color-mix(in srgb, var(--bg) 72%, transparent); }
.vs-t b { font-size: 1.2rem; letter-spacing: -0.03em; color: var(--bg); white-space: nowrap; }
.vs-t b s { color: color-mix(in srgb, var(--bg) 62%, transparent); font-weight: 600; margin-right: 4px; }
.plans-note { max-width: 920px; margin: 18px auto 0; text-align: center; font-size: .78rem; color: var(--muted); }

/* ============================================================
   FAQ en accordéon. Les réponses restent dans le HTML (Google lit
   le contenu replié) et doivent rester identiques au bloc
   FAQPage du <head>.
   ============================================================ */
.acc { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.acc summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .2s var(--ease); }
.acc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.acc details p { padding: 0 4px 20px; max-width: 70ch; font-size: .97rem; color: var(--ink-soft); }
.acc details p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.acc-more { margin-top: 26px; text-align: center; }

/* ---- Fin de page : un bouton, puis la bande candidat ---- */
.home .cta-final { padding: 0 20px; }
.home .cta-final h2 { max-width: 24ch; }
.home .cta-final .hero-cta { margin-top: 1.8rem; }
.home .cand-band { margin-top: 56px; }
.h-soft .cand-band { background: var(--panel); }
.nw { white-space: nowrap; }
/* En sombre la carte du pass s'inverse (fond clair) : coche foncée. */
@media (prefers-color-scheme: dark) { .plan-pass .plan-l li::before { border-color: #15734f; } }

/* ============================================================
   REFONTE DU 2026-10-08 : le NOUVEL espace recruteur
   ------------------------------------------------------------
   Trois maquettes, toutes en couleurs EN DUR (ce sont des
   captures : elles restent claires quand le site passe en
   sombre, comme le produit par défaut) :
     .wn   la capture du héros (accueil de l'ATS refait :
           website/index.html + website/assets/css/visual.css) ;
     .kb   le pipeline par étapes (applications.js) ;
     .vit3 les trois présentations : candidat, offre, recruteur.
   Si l'ATS change de visage, suivre ici : la page montre le
   produit tel qu'il est.
   ============================================================ */

/* ---- .wn : la capture claire du héros ---- */
.win.wn { border-color: #e3e6ec; background: #fff; }
.wn .win-bar { background: #f1f2f5; border-bottom-color: #e3e6ec; }
.wn .win-bar i { background: #d3d6dd; }
.wn .win-bar span { color: #8a8f9c; }
.wn .win-body { grid-template-columns: 190px 1fr; min-height: 470px; background: #f4f5f8; color: #1c1d21; }
.shot.fit .wn .win-body { grid-template-columns: 190px 1fr; }
.wn .win-side { background: #fafbfc; border-right-color: #e7e9ee; padding: 14px 10px; gap: 1px; }
.wn .win-side .wb { font-size: .92rem; padding: 2px 6px 10px; gap: 7px; }
.wn .win-side .wb b { color: #3466f6; }
.wn .win-side .wb em { font-style: normal; font-size: .56rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: rgba(52,102,246,.1); color: #3466f6; }
.wn .win-side small { font-size: .54rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9aa0ad; padding: 9px 10px 3px; }
.wn .win-side a { padding: 6px 10px; font-size: .76rem; color: #5a6070; gap: 9px; }
.wn .win-side a .g { width: 13px; height: 13px; border-radius: 4px; background: #e3e6ec; }
.wn .win-side a.on { background: rgba(52,102,246,.1); color: #3466f6; font-weight: 600; }
.wn .win-side a.on .g { background: #3466f6; }
.wn .win-side a u { margin-left: auto; text-decoration: none; font-size: .58rem; font-weight: 700; color: #fff; background: #3466f6; border-radius: 999px; padding: 1px 6px; }
.wn .win-main { padding: 18px 22px 20px; }
.wn-hi small { display: block; font-size: .66rem; color: #8a8f9c; font-weight: 500; }
.wn-hi h4 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.035em; color: #111318; margin: 1px 0 14px; }
.wn-grid { display: grid; grid-template-columns: .85fr 1.2fr .85fr; gap: 12px; align-items: start; }
/* Le candidat à présenter à GAUCHE : le dossier, devant, recouvre la droite
   (la semaine, dont le bleu dépasse) et jamais ce candidat. */
.wn-spot { order: -1; }
.shot:not(.fit) .wn .hero-dos { right: -28px; }
.wn-card { background: #fff; border: 1px solid #e7e9ee; border-radius: 16px; padding: 12px 13px; box-shadow: 0 1px 2px rgba(16,20,40,.04), 0 6px 18px -8px rgba(16,20,40,.12); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.wn-t { font-size: .84rem; font-weight: 760; letter-spacing: -0.02em; margin-bottom: 8px; color: #111318; }
.wn-job { display: flex; align-items: center; gap: 8px; padding: 5px 0; min-width: 0; }
.wn-jt { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; background: hsl(var(--h) 90% 93%); box-shadow: inset 0 0 0 1px hsl(var(--h) 60% 86%); }
.wn-jx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.wn-jx b { font-size: .7rem; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1c1d21; }
.wn-jx small { font-size: .58rem; color: #8a8f9c; }
.wn-avs { display: inline-flex; flex: none; }
.wn-avs img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff; }
.wn-avs img + img { margin-left: -6px; }
.wn-foot { margin: 8px -13px -12px; padding: 7px; text-align: center; font-size: .62rem; font-weight: 650; color: #1c1d21; background: #f6f7f9; border-top: 1px solid #eceef2; }
.wn-foot i { font-style: normal; display: inline-grid; place-items: center; min-width: 15px; height: 13px; margin-left: 4px; border-radius: 999px; background: #1c1d21; color: #fff; font-size: .52rem; }
.wn-spot { align-items: center; text-align: center; }
.wn-face { position: relative; display: block; margin: 2px 0 7px; }
.wn-face img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 10px 22px -8px rgba(16,20,40,.4); display: block; }
.wn-face i { position: absolute; right: -2px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .52rem; color: #fff; background: #e8467c; box-shadow: 0 0 0 2px #fff; }
.wn-n { font-size: .8rem; color: #111318; }
.wn-spot small { font-size: .6rem; color: #8a8f9c; }
.wn-chips { display: flex; gap: 4px; margin: 6px 0 8px; flex-wrap: wrap; justify-content: center; }
.wn-chips em { font-style: normal; font-size: .54rem; font-weight: 650; padding: 2px 6px; border-radius: 999px; background: rgba(52,102,246,.1); color: #3466f6; border: 1px solid rgba(52,102,246,.25); }
.wn-chips em.v { background: rgba(232,70,124,.1); color: #c2185b; border-color: rgba(232,70,124,.25); }
.wn-btn { font-size: .62rem; font-weight: 700; color: #fff; padding: 6px 10px; border-radius: 9px; background: linear-gradient(135deg, #3466f6, #6b4dff); white-space: nowrap; }
.wn-week { background: linear-gradient(150deg, #3466f6, #6b4dff); border: 0; color: #fff; text-align: center; padding: 13px 10px; }
.wn-week > b { font-size: .84rem; font-weight: 760; }
.wn-week strong { font-size: 2.1rem; font-weight: 820; letter-spacing: -0.05em; line-height: 1; margin-top: 9px; }
.wn-week small { font-size: .6rem; opacity: .92; }
.wn-week span { align-self: center; margin-top: 5px; font-size: .56rem; font-weight: 750; color: #3466f6; background: #fff; border-radius: 999px; padding: 2px 7px; }
.wn-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; width: 64%; }
.wn-pipe > span { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 13px; background: #fff; border: 1px solid #e7e9ee; min-width: 0; }
.wn-pipe > span.on { border-color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 7%, #fff); }
.wn-pipe b { display: flex; align-items: center; gap: 5px; font-size: .6rem; font-weight: 650; color: #3a3f4b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-pipe b i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.wn-pipe em { font-style: normal; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #111318; }

/* ---- .kb : le pipeline par étapes ---- */
.kb { border-radius: var(--radius-xl); background: #f4f5f8; border: 1px solid #e3e6ec; box-shadow: var(--shadow-lg); padding: 22px; color: #1c1d21; text-align: left; overflow: hidden; }
.kb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kb-jt { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 1.45rem; background: hsl(22 90% 93%); box-shadow: inset 0 0 0 1px hsl(22 60% 86%); }
.kb-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kb-ht b { font-size: 1.35rem; font-weight: 820; letter-spacing: -0.035em; color: #111318; line-height: 1.15; }
.kb-ht small { font-size: .78rem; color: #8a8f9c; }
.kb-chips { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: #fff; border: 1px solid #e3e6ec; flex: none; }
.kb-chips i { font-style: normal; font-size: .72rem; font-weight: 600; padding: 5px 10px; border-radius: 8px; color: #8a8f9c; }
.kb-chips i.on { background: #f1f2f5; color: #1c1d21; }
.kb-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kb-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 6px; margin: -6px; border-radius: 18px; }
.kb-col.on { background: color-mix(in srgb, var(--c) 8%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent); }
.kb-ch { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: #1c1d21; padding: 2px; white-space: nowrap; }
.kb-ch i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.kb-ch em { font-style: normal; font-size: .68rem; font-weight: 750; padding: 1px 7px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.kb-card { position: relative; background: #fff; border: 1px solid #e7e9ee; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(16,20,40,.04), 0 6px 18px -8px rgba(16,20,40,.14); }
.kb-card.sg { background: #f8f6ff; border-color: #e4dcff; }
.kb-card.drag { transform: rotate(-2.2deg) translateY(-4px); box-shadow: 0 22px 44px -16px rgba(16,20,40,.38); z-index: 1; }
.kb-p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kb-p img { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; }
.kb-p > span { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.kb-p b { font-size: .8rem; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-p small { font-size: .64rem; color: #8a8f9c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-v { position: relative; display: block; margin: -10px -10px 0; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 13px 13px 0 0; background: #111; }
.kb-v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-v i { position: absolute; left: 7px; bottom: 6px; font-style: normal; font-size: .6rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 999px; }
.kb-pr { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-pr i { font-style: normal; font-size: .6rem; font-weight: 650; padding: 2px 7px; border-radius: 999px; background: #f1f2f5; border: 1px solid #e3e6ec; color: #3a3f4b; white-space: nowrap; }
.kb-pr i.v { background: rgba(232,70,124,.1); border-color: rgba(232,70,124,.25); color: #c2185b; }
.kb-pr i.b { background: rgba(52,102,246,.1); border-color: rgba(52,102,246,.25); color: #3466f6; }
.kb-pr i.ok { background: #e7f6ef; border-color: #bfe6d3; color: #15734f; }
.kb-bar { display: block; height: 5px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.kb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f8a5c2, #e8467c); }
.kb-btn { align-self: flex-start; font-size: .62rem; font-weight: 700; color: #fff; padding: 4px 9px; border-radius: 8px; background: linear-gradient(135deg, #3466f6, #6b4dff); }
.kb-card.hired { padding-top: 16px; }
.kb-conf { position: absolute; inset: 0; pointer-events: none; }
.kb-conf i { position: absolute; width: 6px; height: 6px; border-radius: 50%; }
.kb-conf i:nth-child(1) { left: 12%; top: 10%; background: #4f7cff; }
.kb-conf i:nth-child(2) { left: 46%; top: 6%; background: #f59e0b; }
.kb-conf i:nth-child(3) { right: 10%; top: 14%; background: #10a37f; }
.kb-conf i:nth-child(4) { right: 22%; bottom: 10%; background: #8b5cf6; }
.kb-conf i:nth-child(5) { left: 30%; bottom: 8%; background: #e8467c; }
@media (max-width: 900px) {
  .kb { padding: 16px; }
  .kb-cols { overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 6px 10px; margin: -8px -6px; grid-template-columns: repeat(5, 78%); }
  .kb-col { scroll-snap-align: start; margin: 0; }
  .kb-chips { display: none; }
  .kb-ht b { font-size: 1.1rem; }
  /* Au doigt, on commence par l'étape qui fait la différence. */
  .kb-col.on { order: -1; }
  .kb-card.drag { transform: none; }
}
@media (max-width: 640px) { .kb-ht small { display: none; } }

/* ---- .vit3 : les trois présentations ---- */
.vit.vit3 { grid-template-columns: .95fr 1.3fr .75fr; gap: 34px; align-items: center; }
.vit3 .vit-dos .mkdos { box-shadow: var(--shadow-lg); border-color: rgba(17,17,26,.08); }
@media (prefers-color-scheme: dark) { .vit3 .vit-dos .mkdos { border-color: #2a2d36; } }
.vit3 .mkdos-g { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .vit.vit3 { grid-template-columns: 1fr 1fr; } .vit3 .vit-phone { grid-column: 1 / -1; } }
@media (max-width: 700px) { .vit.vit3 { grid-template-columns: 1fr; gap: 44px; } .vit3 .vit-dos { width: 100%; max-width: 360px; margin: 0 auto; } }
@media (max-width: 640px) { #ats .h-head .h-sub { display: none; } }