/* =============================================================
   Thème Sys Kabs Amazone — styles boutique SSL
   Enfant de Twenty-One : ce fichier stylise la page d'accueil
   (catalogue) et affine le header/menu du parent.
   ============================================================= */

:root{
  --ska-primary:#1E50E2;
  --ska-primary-dk:#173FB0;
  --ska-green:#08916A;
  --ska-green-soft:#E4F5EE;
  --ska-gold:#B7791F;
  --ska-ink:#0E1A2B;
  --ska-muted:#54657E;
  --ska-line:#E2E8F2;
  --ska-bg:#F5F7FB;
  --ska-surface:#FFFFFF;
  --ska-r:14px;
  --ska-shadow:0 1px 2px rgba(14,26,43,.05),0 12px 32px -12px rgba(14,26,43,.14);
}

/* ---------- Affinage header Twenty-One (barre nav bleue) ---------- */
#main-menu.navbar, .navbar-main{background:var(--ska-primary) !important}
#main-menu .navbar-nav > li > a{color:#fff !important; font-weight:600}
#main-menu .navbar-nav > li > a:hover{background:var(--ska-primary-dk) !important}

/* ---------- Page ---------- */
.ska-page{background:var(--ska-bg); color:var(--ska-ink);
  /* full-bleed : sort du conteneur ~1320px du thème parent et occupe
     toute la largeur de l'écran. margin-top garde le collage au fil
     d'Ariane. */
  margin-top:-20px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0}
.ska-page section{padding:56px 24px}
.ska-eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ska-green); font-weight:600}
.ska-sec-head{max-width:640px; margin:0 auto 34px; text-align:center}
.ska-sec-head h2{font-size:2rem; font-weight:800; letter-spacing:-.02em; margin:.4em 0 .3em}
.ska-sec-head p{color:var(--ska-muted); font-size:1.04rem; margin:0}
.ska-green{color:var(--ska-green)}

/* ---------- Boutons ---------- */
.ska-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:650; font-size:.92rem; padding:.66em 1.2em; border-radius:10px; border:1px solid transparent; cursor:pointer; text-decoration:none !important; transition:transform .12s, box-shadow .2s}
.ska-btn-lg{padding:.85em 1.5em; font-size:1rem}
.ska-btn-primary{background:var(--ska-primary); color:#fff !important; box-shadow:0 8px 20px -8px rgba(30,80,226,.7)}
.ska-btn-primary:hover{transform:translateY(-1px); color:#fff !important}
.ska-btn-ghost{background:transparent; color:var(--ska-ink) !important; border-color:#D3DCEA}
.ska-btn-ghost:hover{border-color:var(--ska-primary); color:var(--ska-primary) !important}
.ska-btn-white{background:#fff; color:var(--ska-primary-dk) !important}

/* ---------- Hero ---------- */
.ska-hero{background:
  radial-gradient(60% 55% at 80% 10%, rgba(30,80,226,.14), transparent 70%),
  radial-gradient(50% 50% at 10% 95%, rgba(8,145,106,.12), transparent 70%), var(--ska-bg)}
.ska-hero-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.ska-hero h1{font-size:clamp(2rem,4.2vw,3.2rem); font-weight:820; letter-spacing:-.02em; line-height:1.1; margin:.4em 0}
.ska-lede{color:var(--ska-muted); font-size:1.1rem; max-width:36ch}
.ska-hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.ska-trust{list-style:none; display:flex; gap:24px; flex-wrap:wrap; padding:0; margin:26px 0 0}
.ska-trust li{color:var(--ska-muted); font-size:.9rem; position:relative; padding-left:22px}
.ska-trust li::before{content:"\2713"; position:absolute; left:0; color:var(--ska-green); font-weight:700}

.ska-hero-card{display:flex; flex-direction:column; gap:16px; align-items:center}
.ska-urlbar{width:100%; max-width:340px; background:var(--ska-surface); border:1px solid var(--ska-line); border-radius:11px; padding:11px 14px; font-family:ui-monospace,Menlo,monospace; font-size:.9rem; box-shadow:var(--ska-shadow); display:flex; gap:10px; align-items:center}
.ska-urlbar b{color:var(--ska-green)}
.ska-cert{width:100%; max-width:340px; background:var(--ska-surface); border:1px solid var(--ska-line); border-radius:var(--ska-r); box-shadow:var(--ska-shadow); overflow:hidden}
.ska-cert-head{display:flex; gap:14px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--ska-line)}
.ska-cert-head small{display:block; color:var(--ska-muted); font-family:ui-monospace,Menlo,monospace; font-size:.72rem}
.ska-shield{width:44px;height:44px;border-radius:50%;background:var(--ska-green-soft);color:var(--ska-green);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;flex:0 0 auto}
.ska-cert-rows{padding:14px 20px; display:grid; gap:10px}
.ska-cert-rows > div{display:flex; justify-content:space-between; font-size:.88rem}
.ska-cert-rows span{color:var(--ska-muted)}
.ska-cert-rows b{font-family:ui-monospace,Menlo,monospace}
.ska-ok{color:var(--ska-green)}

/* ---------- Garde-fous responsive (anti-débordement mobile) ---------- */
/* NB : PAS de max-width:100% ici — .ska-page et .ska-store sont en
   full-bleed (marges négatives calc(50% - 50vw)). Un max-width:100%
   les replafonnerait à la largeur du conteneur parent (~1320px) et,
   combiné aux marges négatives, les DÉCALERAIT vers la gauche en
   laissant une bande grise à droite. On garde seulement overflow-x. */
.ska-page, .ska-store{overflow-x:hidden}
.ska-page *, .ska-store *{max-width:100%}
.ska-page img, .ska-store img{max-width:100%; height:auto}
.ska-page pre, .ska-page code{white-space:pre-wrap; word-break:break-word}
.ska-page a, .ska-store a{overflow-wrap:anywhere}
/* les tableaux larges défilent dans leur conteneur, jamais la page */
.ska-ptable-wrap, .ska-table-wrap{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.ska-cattabs, .ska-filters{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scrollbar-width:thin}
.ska-cattab, .ska-tab{flex:0 0 auto}

/* ---------- Pleine largeur (full-bleed) ----------
   Le thème parent (twenty-one) enferme le contenu dans un conteneur
   Bootstrap ~1320px centré : sur grand écran, d'énormes marges grises
   apparaissent. On fait DÉBORDER TOUTE la page sur la largeur de
   l'écran (comme thesslstore) — géré au niveau de .ska-page ci-dessus
   (marges calc(50% - 50vw)). Les bandeaux (hero, marques) vont ainsi
   bord à bord ; le catalogue remplit la largeur avec de fines
   gouttières pour rester lisible (voir .ska-catalog-sec).
   Le petit dépassement dû à la barre de défilement est absorbé par
   body{overflow-x:hidden} (global-responsive.css). */

/* ---------- Carrousel de bannières ---------- */
.ska-slider{position:relative; overflow:hidden; padding:0 !important}
.ska-slides{display:flex; transition:transform .55s ease; will-change:transform}
.ska-slide{min-width:100%; padding:56px 24px}
.ska-slide-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; min-height:330px}
.ska-slide-copy h2{font-size:clamp(1.7rem,4vw,2.9rem); font-weight:820; letter-spacing:-.02em; line-height:1.12; margin:.4em 0}
.ska-slide-copy p{font-size:1.06rem; max-width:44ch; margin:0 0 4px}
.ska-slide-visual{display:flex; align-items:center; justify-content:center}
.ska-slide-visual img{max-width:min(300px,70%); height:auto; background:#fff; padding:22px 30px; border-radius:14px; box-shadow:var(--ska-shadow)}
.ska-bfall-big{font-size:2.4rem; font-weight:800; color:#fff; opacity:.9}
.ska-wild-mark,.ska-code-mark{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:clamp(4rem,10vw,7rem); font-weight:700; color:rgba(255,255,255,.85); line-height:1}

/* Fonds par slide */
.ska-sl-a{background:
  radial-gradient(60% 55% at 80% 10%, rgba(30,80,226,.14), transparent 70%),
  radial-gradient(50% 50% at 10% 95%, rgba(8,145,106,.12), transparent 70%), var(--ska-bg)}
.ska-sl-a .ska-slide-copy p{color:var(--ska-muted)}
.ska-sl-b{background:linear-gradient(120deg,#16265C,#1F2B6C); color:#fff}
.ska-sl-b .ska-eyebrow{color:#7BD8BC}
.ska-sl-b .ska-slide-copy p{color:rgba(255,255,255,.85)}
.ska-sl-c{background:linear-gradient(120deg,#06563F,#08916A); color:#fff}
.ska-sl-c .ska-eyebrow{color:#CDEFE3}
.ska-sl-c .ska-slide-copy p{color:rgba(255,255,255,.88)}
.ska-sl-d{background:linear-gradient(120deg,#232B38,#3A465C); color:#fff}
.ska-sl-d .ska-eyebrow{color:#9DB4FF}
.ska-sl-d .ska-slide-copy p{color:rgba(255,255,255,.85)}

/* Flèches + points */
.ska-sl-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--ska-ink); font-size:1.05rem;
  box-shadow:var(--ska-shadow); transition:background .15s; display:flex; align-items:center; justify-content:center}
.ska-sl-arrow:hover{background:#fff}
.ska-sl-prev{left:14px}
.ska-sl-next{right:14px}
.ska-sl-dots{position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:9px; z-index:5}
.ska-sl-dot{width:10px; height:10px; border-radius:50%; border:none; cursor:pointer; background:rgba(120,130,150,.45); padding:0; transition:.2s}
.ska-sl-dot.active{background:var(--ska-primary); transform:scale(1.25)}

@media (prefers-reduced-motion:reduce){
  .ska-slides{transition:none}
}
@media (max-width:900px){
  .ska-slide-inner{grid-template-columns:1fr; gap:26px; min-height:0; text-align:left}
  .ska-slide-visual{order:-1}
  .ska-slide-visual img{max-width:200px; padding:14px 20px}
  .ska-wild-mark,.ska-code-mark{font-size:3.4rem}
  .ska-slide .ska-hero-card{display:none}
}
@media (max-width:560px){
  .ska-slide{padding:40px 18px 56px}
  .ska-sl-arrow{width:34px; height:34px; font-size:.9rem}
  .ska-sl-prev{left:6px} .ska-sl-next{right:6px}
}

/* ---------- Marques ---------- */
.ska-brands{background:var(--ska-surface); border-top:1px solid var(--ska-line); border-bottom:1px solid var(--ska-line); display:flex; gap:30px; align-items:center; justify-content:center; flex-wrap:wrap; padding:20px 24px !important}
.ska-brands span{font-weight:750; color:var(--ska-muted); font-size:1rem}
.ska-brands-label{font-family:ui-monospace,Menlo,monospace; font-size:.68rem !important; letter-spacing:.14em; text-transform:uppercase; color:#8798AE !important; font-weight:600 !important}

/* ---------- Filtres ---------- */
.ska-filters{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:26px}
.ska-tab{font-size:.86rem; font-weight:600; color:var(--ska-muted); background:var(--ska-surface); border:1px solid var(--ska-line); border-radius:999px; padding:.5em 1.05em; cursor:pointer; transition:.15s}
.ska-tab:hover{color:var(--ska-ink); border-color:#D3DCEA}
.ska-tab.active{background:var(--ska-primary); border-color:var(--ska-primary); color:#fff}

/* ---------- Cartes produits ---------- */
/* Catalogue : remplit la page pleine largeur avec de fines gouttières.
   Plafond large (1560px) pour éviter des lignes trop longues sur les
   très grands écrans, tout en occupant nettement plus d'espace. */
.ska-catalog-sec{max-width:1560px; margin:0 auto; padding:0 clamp(16px,3vw,40px)}
.ska-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.ska-card{background:var(--ska-surface); border:1px solid var(--ska-line); border-radius:var(--ska-r); padding:18px; display:flex; flex-direction:column; gap:10px; transition:transform .15s, box-shadow .2s}
.ska-card:hover{transform:translateY(-3px); box-shadow:var(--ska-shadow)}
.ska-card header{display:flex; justify-content:space-between; align-items:center}
.ska-brand{display:inline-flex; align-items:center; gap:7px; font-weight:750; font-size:.84rem}
.ska-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.ska-dot-sectigo{background:#12A150}
.ska-dot-digicert{background:#0E63B3}
.ska-dot-rapid{background:#1D9BD1}
.ska-badge{font-family:ui-monospace,Menlo,monospace; font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; border:1px solid var(--ska-line); color:var(--ska-muted)}
.ska-b-dv{color:var(--ska-green); background:var(--ska-green-soft); border-color:rgba(8,145,106,.35)}
.ska-b-ov{color:var(--ska-primary); background:rgba(30,80,226,.08); border-color:rgba(30,80,226,.35)}
.ska-b-ev{color:var(--ska-gold); background:rgba(183,121,31,.1); border-color:rgba(183,121,31,.35)}
.ska-card h3{font-size:1.12rem; font-weight:750; margin:0; letter-spacing:-.01em}
.ska-stars{color:var(--ska-gold); font-size:.84rem}
.ska-stars em{color:var(--ska-muted); font-style:normal; font-family:ui-monospace,Menlo,monospace}
.ska-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.ska-price b{font-family:ui-monospace,Menlo,monospace; font-size:1.5rem; font-weight:700; letter-spacing:-.02em}
.ska-price span{color:var(--ska-muted); font-size:.8rem}
.ska-price s{color:#8798AE; font-family:ui-monospace,Menlo,monospace; font-size:.85rem}
.ska-save{font-style:normal; font-family:ui-monospace,Menlo,monospace; font-size:.66rem; font-weight:600; color:var(--ska-green); background:var(--ska-green-soft); padding:2px 7px; border-radius:5px}
.ska-card ul{list-style:none; padding:10px 0 0; margin:0; border-top:1px solid var(--ska-line); display:grid; gap:6px; flex:1}
.ska-card ul li{font-size:.85rem; color:var(--ska-muted); position:relative; padding-left:20px}
.ska-card ul li::before{content:"\2713"; position:absolute; left:0; color:var(--ska-green); font-weight:700}
.ska-card-cta{display:flex; gap:10px; margin-top:6px}
.ska-card-cta .ska-btn{flex:1; padding:.6em 1em; font-size:.86rem}
.ska-empty{text-align:center; color:var(--ska-muted); padding:32px}
.ska-more{text-align:center; margin-top:28px}

/* ---------- Comparatif ---------- */
.ska-compare{max-width:1000px; margin:0 auto}
.ska-table-wrap{overflow-x:auto; border:1px solid var(--ska-line); border-radius:var(--ska-r); background:var(--ska-surface)}
.ska-table{border-collapse:collapse; width:100%; min-width:620px; margin:0}
.ska-table th,.ska-table td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--ska-line); font-size:.9rem}
.ska-table thead th{font-family:ui-monospace,Menlo,monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ska-muted); background:#EEF2F9}
.ska-table tbody tr:last-child td{border-bottom:none}
.ska-table td.y{color:var(--ska-green); font-weight:700}
.ska-table td.n{color:#8798AE}

/* ---------- CTA ---------- */
.ska-cta{max-width:1120px; margin:0 auto 56px; background:linear-gradient(120deg,var(--ska-primary),var(--ska-primary-dk)); color:#fff; border-radius:var(--ska-r); padding:44px 40px !important; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.ska-cta h2{font-size:1.7rem; font-weight:800; margin:0}
.ska-cta p{color:rgba(255,255,255,.85); margin:.5em 0 0}

/* ---------- Sécurité applicative (Acunetix / Invicti) ---------- */
/* Bandeau sombre pleine largeur : contraste avec le reste (code = sécurité). */
.ska-appsec{background:linear-gradient(160deg,#0B1220,#16233B); color:#E7EEF9; padding:66px 24px; margin:0 0 56px}
.ska-appsec-inner{max-width:1160px; margin:0 auto}
.ska-appsec-head{text-align:center; margin-bottom:8px}
.ska-appsec-head h2{color:#fff}
.ska-appsec-head .ska-lede{color:#9FB2CE; max-width:660px; margin:10px auto 0}
.ska-appsec-head strong{color:#fff}
.ska-appsec-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:34px 0}
.ska-appsec-stats > div{text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:18px 12px}
.ska-appsec-stats b{display:block; font-size:1.7rem; font-weight:820; color:#fff; letter-spacing:-.02em; line-height:1.1}
.ska-appsec-stats span{display:block; margin-top:4px; font-size:.78rem; color:#9FB2CE}
.ska-appsec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px}
.ska-appsec-card{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:22px}
.ska-appsec-ic{font-size:1.5rem; line-height:1}
.ska-appsec-card h3{margin:.55em 0 .35em; font-size:1.06rem; color:#fff; font-weight:750}
.ska-appsec-card p{font-size:.9rem; color:#9FB2CE; margin:0; line-height:1.5}
.ska-appsec-tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px}
.ska-tier{position:relative; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.11); border-radius:16px; padding:24px 20px; text-align:center}
.ska-tier-hot{border-color:var(--ska-green); box-shadow:0 0 0 1px var(--ska-green)}
.ska-tier-badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--ska-green); color:#04231a; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 11px; border-radius:999px; white-space:nowrap}
.ska-tier h4{margin:.1em 0 .5em; color:#fff; font-size:1.12rem; font-weight:780}
.ska-tier p{font-size:.88rem; color:#9FB2CE; margin:0 0 .7em; line-height:1.5}
.ska-tier small{font-size:.72rem; color:#7C90AE}
.ska-appsec-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
/* bouton fantôme lisible sur fond sombre */
.ska-btn-ghost-dark{color:#fff !important; border-color:rgba(255,255,255,.45) !important}
.ska-btn-ghost-dark:hover{background:rgba(255,255,255,.10) !important}
@media (max-width:900px){
  .ska-appsec{padding:48px 18px}
  .ska-appsec-stats{grid-template-columns:repeat(2,1fr)}
  .ska-appsec-grid, .ska-appsec-tiers{grid-template-columns:1fr}
}

/* ---------- Logos des autorités (SVG fournis par le module TSS) ---------- */
.ska-brandlogo{height:26px; width:auto; opacity:.85; transition:opacity .15s}
.ska-brandlogo:hover{opacity:1}
.ska-blogo{height:18px; width:auto; vertical-align:middle}
.ska-col-brand{white-space:nowrap}
.ska-brand-slot{display:inline-flex; align-items:center}
.ska-bfall{font-weight:750; color:var(--ska-muted); font-size:.95rem}

/* ---------- Catalogue importé depuis la boutique (accueil) ---------- */
.ska-imported .ska-store{padding:0; max-width:none; margin-left:0; margin-right:0}
.ska-imported .ska-store-head{display:none}

/* ---------- Onglets de catégories (Certificats / Sécurité Web) ---------- */
.ska-cattabs{display:flex; justify-content:center; gap:6px; background:#EEF0F6; border-radius:999px; padding:6px; width:max-content; max-width:100%; margin:0 auto 26px}
.ska-cattab{border:none; background:transparent; color:var(--ska-muted); font-weight:700; font-size:.95rem; padding:.7em 1.6em; border-radius:999px; cursor:pointer; transition:.15s; white-space:nowrap}
.ska-cattab:hover{color:var(--ska-ink)}
.ska-cattab.active{background:#1F2B6C; color:#fff}

/* ---------- Bandeau de marque (au-dessus du tableau) ---------- */
.ska-bhero{display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--ska-surface); border:1px solid var(--ska-line); border-radius:var(--ska-r); padding:22px 26px; margin-bottom:18px}
.ska-bhero h2{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:#1F2B6C; margin:0 0 4px}
.ska-bhero p{color:var(--ska-muted); margin:0; font-size:.92rem}
.ska-bhero-logo{height:44px; width:auto; flex:0 0 auto}
@media (max-width:600px){ .ska-bhero{flex-direction:column; text-align:center} }

/* ---------- Cartes Sécurité Web ---------- */
.ska-websec-grid{grid-template-columns:repeat(4,1fr)}
.ska-wcard{text-align:center; align-items:center}
.ska-wcard h3{font-size:1.05rem}
.ska-wcard-logo{height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:4px}
.ska-wlogo{max-height:44px; width:auto}
.ska-wcard .ska-desc{text-align:center}
.ska-wprice{justify-content:center}
.ska-wprice b{color:var(--ska-green)}
.ska-wcard .ska-card-cta{width:100%}
@media (max-width:1100px){ .ska-websec-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .ska-websec-grid{grid-template-columns:1fr} }

/* ---------- Tableau produits : fluide, s'adapte à toutes les largeurs ----------
   On garde la disposition en tableau (mêmes colonnes) et on le laisse se
   compresser pour tenir dans l'écran, au lieu de forcer un scroll horizontal.
   Le texte des cellules passe à la ligne et les tailles se réduisent par palier. */
/* Style thesslstore : colonnes larges qui s'enroulent verticalement (le texte
   passe à la ligne, la hauteur de ligne grandit) et un bouton lisible qui
   remplit sa colonne. Aucune police minuscule, aucun débordement horizontal. */
@media (max-width:960px){
  .ska-ptable-wrap{overflow-x:hidden}
  .ska-ptable{table-layout:fixed}
  .ska-ptable .ska-col-name{width:26%}
  .ska-ptable .ska-col-brand{width:12%}
  .ska-ptable .ska-col-price{width:18%}
  .ska-ptable .ska-col-cta{width:22%}
  .ska-ptable thead th, .ska-ptable tbody td{padding:14px 8px; font-size:.8rem; vertical-align:top}
  /* en-têtes : mots entiers, jamais coupés au milieu (ex. "Validation") */
  .ska-ptable thead th{vertical-align:middle; font-size:.74rem; overflow-wrap:normal; word-break:keep-all; hyphens:none}
  /* les cellules de contenu s'enroulent aux espaces (mots entiers) */
  .ska-ptable tbody td{overflow-wrap:break-word}
  .ska-ptable tbody td.ska-col-name{overflow-wrap:anywhere}
  /* bouton lisible qui remplit sa colonne, jamais coupé */
  .ska-ptable td.ska-col-cta{overflow:hidden}
  .ska-addcart{display:block; width:100%; box-sizing:border-box; text-align:center;
    white-space:nowrap; padding:.7em .4em; font-size:.64rem; letter-spacing:.03em}
  .ska-col-price b{font-size:.92rem}
  .ska-blogo{height:18px}
}
/* Portrait étroit (<600px) : le tableau à 5 colonnes devient illisible,
   chaque ligne devient une fiche empilée lisible (libellé + valeur). */
@media (max-width:600px){
  /* Barre de catégories : rétrécit pour tenir, défile si vraiment trop étroit */
  .ska-cattabs{width:auto; max-width:100%; gap:3px; padding:4px; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch}
  .ska-cattab{padding:.55em .8em; font-size:.82rem; white-space:nowrap}

  .ska-ptable-wrap{overflow:visible; border:none; box-shadow:none; background:transparent}
  .ska-ptable{table-layout:auto; min-width:0}
  .ska-ptable thead{display:none}
  .ska-ptable tbody tr{
    display:block; background:var(--ska-surface); border:1px solid var(--ska-line);
    border-radius:var(--ska-r); box-shadow:var(--ska-shadow); margin:0 0 14px; padding:2px 2px;
  }
  .ska-ptable tbody tr:nth-child(odd),
  .ska-ptable tbody tr:nth-child(even){background:var(--ska-surface)}
  .ska-ptable tbody td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:auto !important; padding:11px 16px; border:none; border-bottom:1px solid var(--ska-line);
    text-align:right; font-size:.92rem; overflow-wrap:normal;
  }
  .ska-ptable tbody td:last-child{border-bottom:none}
  .ska-ptable tbody td::before{
    content:attr(data-label); font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ska-muted);
    font-weight:600; text-align:left; flex:0 0 auto;
  }
  .ska-ptable tbody td.ska-col-name{text-align:left; font-size:1.02rem}
  .ska-ptable tbody td.ska-col-name::before{content:"Produit"}
  .ska-ptable tbody td.ska-col-name .ska-pname{font-weight:700}
  .ska-ptable tbody td.ska-col-cta{justify-content:center; padding-top:14px}
  .ska-ptable tbody td.ska-col-cta::before{display:none}
  .ska-addcart{display:block; width:100%; text-align:center; white-space:nowrap;
    font-size:.82rem; padding:.85em 1em; letter-spacing:.04em}
  .ska-col-price b{font-size:1rem}
  .ska-col-price span{font-size:.8rem}
  .ska-blogo{height:20px}
}

/* ---------- Page boutique : tableau produits ---------- */
.ska-ptable-wrap{overflow-x:auto; border-radius:8px; box-shadow:var(--ska-shadow)}
.ska-ptable{border-collapse:collapse; width:100%; min-width:0; margin:0; background:var(--ska-surface)}
.ska-ptable thead th{background:var(--ska-green); color:#fff; font-weight:700; font-size:1rem; text-align:left; padding:16px 18px; letter-spacing:-.01em}
.ska-ptable tbody td{padding:14px 18px; font-size:.92rem; color:var(--ska-ink); border:none; vertical-align:middle}
.ska-ptable tbody tr:nth-child(odd){background:#E7EAF4}
.ska-ptable tbody tr:nth-child(even){background:#fff}
.ska-ptable tbody tr:hover{background:#DCE3F2}
.ska-pname{font-weight:600; color:var(--ska-ink) !important; text-decoration:underline; text-underline-offset:3px}
.ska-pname:hover{color:var(--ska-primary) !important}
.ska-col-price b{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1rem; font-variant-numeric:tabular-nums}
.ska-col-price span{color:var(--ska-muted); font-size:.8rem}
/* Multi-annuel : étiquette « à partir de », tarif 1 an barré, badge remise */
.ska-fromlbl{display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ska-muted); font-weight:600; margin-bottom:1px}
.ska-col-price s, .ska-wprice s{color:#8798AE; font-family:ui-monospace,Menlo,monospace;
  font-size:.72rem; margin-left:6px}
.ska-col-price .ska-save, .ska-wprice .ska-save{margin-left:6px; display:inline-block}
.ska-col-cta{text-align:right; white-space:nowrap}
.ska-addcart{display:inline-block; background:#1F2B6C; color:#fff !important; font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; padding:.75em 1.3em; border-radius:4px; text-decoration:none !important; transition:background .15s, transform .12s}
.ska-addcart:hover{background:var(--ska-primary); transform:translateY(-1px)}
.ska-vbadge{font-size:.85rem; color:var(--ska-muted)}
.ska-v-dv{color:var(--ska-green)}
.ska-v-ov{color:var(--ska-primary)}
.ska-v-ev{color:var(--ska-gold)}
@media (max-width:760px){
  .ska-ptable thead th, .ska-ptable tbody td{padding:11px 12px; font-size:.85rem}
  .ska-addcart{font-size:.68rem; padding:.65em 1em}
}

/* ---------- Page boutique (order form syskabs_cart) ---------- */
/* Page boutique autonome (/store) : pleine largeur avec gouttières,
   même rendu que le catalogue de l'accueil. (Neutralisé plus bas quand
   la boutique est importée dans l'accueil, pour éviter un double
   débordement hors des gouttières de .ska-catalog-sec.) */
.ska-store{max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:8px clamp(16px,3vw,40px) 40px}
.ska-store-head{margin:6px 0 24px}
.ska-store-head h1{font-size:1.8rem; font-weight:800; letter-spacing:-.02em; margin:0 0 6px}
.ska-store-head p{color:var(--ska-muted); margin:0}
.ska-store-grid{grid-template-columns:repeat(3,1fr)}
.ska-desc{color:var(--ska-muted); font-size:.85rem; line-height:1.5; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ska-from{display:block; width:100%; font-family:ui-monospace,Menlo,monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#8798AE}
@media (max-width:1100px){ .ska-store-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .ska-store-grid{grid-template-columns:1fr} }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ska-hero-inner{grid-template-columns:1fr}
  .ska-hero-card{order:-1}
  .ska-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .ska-grid{grid-template-columns:1fr}
  .ska-cta{padding:32px 24px !important}
}