/* =============================================================================
   Modernisation — surcouche des composants
   Chargée APRÈS custom.css par les quatre gabarits sur mesure : chaque règle
   ici surcharge sciemment. La partie GLOBALE (police, neutres, échelle
   d'élévation) vit dans responsive.css, qui est injecté sur toutes les pages.

   On ne remplace pas le monde : structure, carrousel, catalogue, logo et
   couleurs de marque sont conservés. On reprend ce qui datait — l'échelle
   typographique, le rythme vertical, la profondeur.
   ============================================================================= */

/* =============================================================================
   MIT-SEC — modernisation de l'existant
   On ne remplace pas le monde : on garde la structure, les couleurs de marque,
   le carrousel, le catalogue. On reprend ce qui date — la typographie, le
   rythme vertical, la profondeur — et on le porte au niveau attendu en 2026.
   Chargée APRÈS custom.css : chaque règle ici surcharge sciemment.
   ============================================================================= */

/* ---- Typographie : une vraie échelle, et de l'air ----------------------- */
.ska-slide-copy h2{
  font-size:clamp(2.1rem,4.4vw,3.6rem) !important;
  font-weight:800 !important; letter-spacing:-.038em !important;
  line-height:1.02 !important; margin:0 0 20px !important;
}
.ska-slide-copy p{
  font-size:1.12rem !important; line-height:1.55 !important;
  max-width:46ch; margin:0 0 28px !important;
}
.ska-sec-head{max-width:720px; margin-bottom:40px}
.ska-sec-head h1, .ska-sec-head h2{
  font-size:clamp(1.9rem,3vw,2.6rem) !important; font-weight:800 !important;
  letter-spacing:-.035em !important; line-height:1.05 !important; margin:0 0 12px !important;
}
.ska-sec-head p{font-size:1.08rem; line-height:1.55}

/* ---- Rythme vertical : le manque d'air est ce qui date le plus ---------- */
.ska-page section{padding:76px 24px}
.ska-slide{padding:64px 24px 72px}
.ska-catalog-sec{padding-top:80px !important}

/* ---- Hero : on quitte le dégradé bleuté pour un fond franc ------------- */
.ska-slider .ska-slide.ska-sl-a{
  background:
    radial-gradient(760px 420px at 8% -20%, rgba(7,125,92,.10), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, var(--ska-bg) 100%) !important;
}
.ska-hero-card .ska-cert{box-shadow:var(--el-3); border-radius:var(--r-l)}
.ska-urlbar{box-shadow:var(--el-1); border-radius:999px}

/* ---- Boutons : plus hauts, moins bavards ------------------------------- */
.ska-btn{border-radius:var(--r-s) !important; font-weight:600 !important;
  letter-spacing:-.005em !important}
.ska-btn-lg{padding:15px 26px !important; font-size:1.02rem !important}
.ska-btn-primary{box-shadow:var(--el-2) !important}
.ska-btn-primary:hover{transform:translateY(-1px)}
.ska-btn-ghost{background:#fff !important; border:1px solid var(--ska-line) !important;
  box-shadow:var(--el-1) !important}

/* ---- Une seule élévation, partout ------------------------------------- */
.ska-card, .ska-tier, .ska-ptable-wrap, .ska-appsec-card{
  border-radius:var(--r-m) !important; box-shadow:var(--el-1) !important;
  border:1px solid var(--ska-line) !important;
}
.ska-card:hover, .ska-tier:hover{box-shadow:var(--el-2) !important}

/* ---- Onglets et filtres : pastilles nettes ----------------------------- */
.ska-cattabs{background:#fff !important; border:1px solid var(--ska-line) !important;
  box-shadow:var(--el-1); border-radius:999px !important; padding:5px !important}
.ska-cattab{border-radius:999px !important; font-weight:600 !important; padding:9px 18px !important}
.ska-tab{border-radius:999px !important; border:1px solid var(--ska-line) !important;
  background:#fff !important; font-weight:600 !important; padding:9px 16px !important;
  box-shadow:none !important}
.ska-tab.active{background:var(--ska-primary) !important; border-color:var(--ska-primary) !important;
  color:#fff !important}

/* ---- Catalogue : de l'air dans les lignes, un en-tête discret ---------- */
.ska-ptable-wrap{background:#fff; overflow:hidden}
.ska-ptable thead th{
  background:#fff !important; color:var(--ska-muted) !important;
  font-size:.74rem !important; font-weight:600 !important;
  letter-spacing:.1em !important; text-transform:uppercase;
  padding:16px 18px !important; border-bottom:1px solid var(--ska-line);
}
.ska-ptable tbody td{padding:22px 18px !important; border-bottom:1px solid var(--ska-line)}
.ska-ptable tbody tr:nth-child(odd){background:#fff !important}
.ska-ptable tbody tr:hover{background:var(--ska-bg) !important}
.ska-ptable tbody tr:last-child td{border-bottom:0}
.ska-price b{font-size:1.55rem !important; letter-spacing:-.03em !important}

/* ---- Bandeau des marques : une ligne calme ---------------------------- */
.ska-brands{border-top:1px solid var(--ska-line) !important;
  border-bottom:1px solid var(--ska-line) !important; padding:22px 24px !important; gap:36px}
.ska-brands-label{font-size:.78rem !important; letter-spacing:.01em !important}

/* ---- Carrousel : commandes discrètes ---------------------------------- */
.ska-sl-arrow, .ska-sl-pause{box-shadow:var(--el-2) !important; background:#fff !important}
.ska-sl-dot{background:#C3CBD6}
.ska-sl-dot.active{background:var(--ska-ink)}

@media(max-width:900px){
  .ska-page section{padding:52px 20px}
  .ska-slide{padding:40px 18px 52px}
  .ska-catalog-sec{padding-top:52px !important}
  .ska-slide-copy h2{font-size:2.05rem !important}
}