/* ═══════════════════════════════════════════════════════════
   Kinelite — couche responsive (chargée APRÈS site.css)
   Paliers : 1200 · 1024 (tablette) · 760 (grand mobile) · 480 (mobile)
   ═══════════════════════════════════════════════════════════ */

/* — garde-fous globaux — */
html{-webkit-text-size-adjust:100%}
img,video,iframe,canvas,svg{max-width:100%}
.wrap,.foot-main,.foot .bar .wrap{min-width:0}

/* ─────────── ≤ 1200 px — laptop étroit ─────────── */
@media(max-width:1200px){
  .wrap{padding:0 32px}
  .foot-main{padding-left:32px;padding-right:32px}
  .foot .bar .wrap{padding-left:32px;padding-right:32px}
}

/* ─────────── ≤ 1024 px — tablette paysage ─────────── */
@media(max-width:1024px){
  .wrap{padding:0 28px}
  .sec{padding:clamp(56px,8vw,88px) 0}
  .foot-main{padding:52px 28px 36px}
  .foot .bar .wrap{padding:18px 28px}
  .foot-cta .wrap{padding:30px 30px}

  /* grilles 4 → 2, 3 → 2 */
  .feat-grid,.feat-grid.three,.impactgrid,.ben-grid,.gwall,.svc-grid,.svc-grid.four,
  .team-grid,.vgrid,.grid,.qualites,.talents,.rspec-grid,.blog-side,.reg-grid,
  .art-rel-grid,.blog-grid,.info-grid{grid-template-columns:repeat(2,1fr)}

  /* splits 2 col → 1 */
  .split,.split.narrow,.pilw,.whyk,.why3,.centre,.centre-layout,.rspec-head,
  .contact-grid,.vhero,.aside,.summary,.whyk-grid,.grid2,.optgrid{grid-template-columns:1fr;gap:36px}

  .impactband{padding:44px 30px;border-radius:30px}
  .faq-guide{grid-template-columns:1fr}
  .job{grid-template-columns:1fr;gap:10px;align-items:start}
}

/* ─────────── ≤ 900 px — tablette portrait ─────────── */
@media(max-width:900px){
  /* le hero repasse en colonne, image en dessous */
  .hero-grid{grid-template-columns:1fr;gap:38px;padding-top:52px;padding-bottom:56px}
  .hero-grid>div:first-child{max-width:640px}
  .blob,.phero .pb1,.phero .pb2,.whyk::after{display:none}

  /* carrousels 3D : on retire la perspective (illisible en petit) */
  .tstage{perspective:none}
  .tstage .tmarquee-track{transform:none;padding:16px 0}
  .tstage .tcard{flex:0 0 300px}

  /* tableaux larges → défilement horizontal cadré */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-4px;padding-inline:4px}
  .tbl-wrap .art-tb{min-width:520px}
}

/* ─────────── ≤ 760 px — grand mobile ─────────── */
@media(max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .sec{padding:clamp(48px,11vw,68px) 0}

  /* toutes les grilles passent en une colonne */
  .feat-grid,.feat-grid.three,.impactgrid,.ben-grid,.gwall,.svc-grid,.svc-grid.four,
  .team-grid,.vgrid,.grid,.qualites,.talents,.rspec-grid,.blog-side,.reg-grid,
  .art-rel-grid,.blog-grid,.info-grid{grid-template-columns:1fr;gap:16px}

  /* typo : on resserre l'interlettrage des très grands titres */
  .h-xl{letter-spacing:-.02em;line-height:1.06}
  h2{letter-spacing:-.015em}

  /* boutons : pleine largeur quand ils sont seuls dans une pile */
  .btn{font-size:16px;padding:14px 22px;min-height:52px}
  .hero-grid .btn,.foot-cta-btns .btn{flex:1 1 auto;min-width:min(100%,260px)}

  /* eyebrows et pastilles */
  .eyebrow{font-size:12px;padding:8px 13px;letter-spacing:.1em}

  /* barre du hero (avatars + note) : empilée, alignée à gauche */
  .ratingpill{flex-wrap:wrap;gap:14px}

  /* bandes sombres */
  .impactband{padding:36px 22px;border-radius:24px}
  .impactgrid{gap:22px}

  /* pied de page */
  .foot{border-radius:30px 30px 0 0}
  .foot-cta .wrap{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 24px;margin-left:20px;margin-right:20px;border-radius:22px}
  .foot-cta-btns{width:100%}
  .foot-cta-btns .btn{flex:1 1 100%}
  .foot-main{grid-template-columns:1fr;gap:30px;padding:44px 20px 32px}
  .foot-about{max-width:none}
  .foot-about .logo{height:78px!important}
  .foot .bar .wrap{flex-direction:column;gap:8px;padding:18px 20px;text-align:left}

  /* carrousels : cartes plus étroites */
  .tstage .tcard{flex:0 0 min(84vw,320px)}
  .marquee .track{gap:12px}

  /* cartes de service : icône + texte en ligne compacte */
  .svc{border-radius:20px}

  /* articles */
  .art-body h2{margin-top:38px}
  .art-retenir,.art-cta{padding:26px 22px;border-radius:20px}
}

/* ─────────── ≤ 480 px — mobile ─────────── */
@media(max-width:480px){
  .wrap{padding:0 16px}
  .foot-main{padding:38px 16px 28px}
  .foot .bar .wrap{padding:16px 16px}
  .foot-cta .wrap{margin-left:16px;margin-right:16px;padding:24px 20px}
  .sec{padding:44px 0}

  .h-xl{font-size:clamp(31px,8.6vw,40px)}
  h2{font-size:clamp(25px,7.2vw,32px)!important}

  /* barre de navigation compacte */
  .navwrap{padding:10px 0}
  .navbar{margin:0 12px;padding:9px 10px 9px 16px;border-radius:18px;gap:12px}
  .navbar .logo{height:26px}

  /* zone tactile minimale partout */
  .btn,.link,.rchip,.chip{min-height:46px}
  .rchip,.chip{display:inline-flex;align-items:center}

  .impactband{padding:30px 18px}
  .impactgrid{grid-template-columns:1fr 1fr;gap:20px}
  .impactgrid .l{font-size:13.5px}

  .tstage .tcard{flex:0 0 min(88vw,300px)}
  .tcard{padding:22px 20px}
}

/* ─────────── très petits écrans ─────────── */
@media(max-width:360px){
  .wrap{padding:0 14px}
  .impactgrid{grid-template-columns:1fr}
}

/* ─ logo compact (K seul) sur mobile ─ */
.navbar .brand{display:flex;align-items:center}
.navbar .logo-k{display:none}
@media(max-width:767px){
  .navbar .logo{display:none}
  .navbar .logo-k{display:block;height:34px;width:auto}
}

/* ─────────────────────────────────────────────────────────────
   Corrections mobile (téléphones) — voir LISEZ-MOI
   ───────────────────────────────────────────────────────────── */
@media(max-width:620px){
  /* Cartes de service : 1 par rangée. Un <style> en ligne dans index.html
     force flex:0 1 calc(50% - 11px) sous 980px, ce qui écrasait les titres
     à 168 px de large sur téléphone. On rétablit l'intention de la feuille
     de style (1 colonne) sans toucher aux tablettes ni au bureau. */
  .svc-grid .svc{flex:0 1 100%}

  /* Boutons flottants : réduits et repoussés dans les coins pour ne plus
     recouvrir le texte des cartes. */
  .ava-fab,.ava-fab img{width:52px;height:52px}
  .ava-fab{right:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .totop{width:44px;height:44px;left:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .totop svg{width:19px;height:19px}
}