/* ============================================================================
   MINI-SITE « Point Clés Minute » par Silca — styles spécifiques (chargé après finale.css)
   Réutilise tout le design system de finale.css ; ajoute : page-hero, nav active,
   cartes services, tableau comparatif, plan du site.
   ============================================================================ */

/* En-tête de page interne (sous-hero) */
.page-hero{background:var(--steel);color:#fff;padding:66px 0 60px;position:relative;overflow:hidden}
.page-hero .crumb{font-size:13px;color:#A9ACB4;margin-bottom:16px}
.page-hero .crumb a{color:#fff}
.page-hero .eyebrow{color:#FF5A45}
.page-hero h1{color:#fff;font-size:clamp(30px,4.2vw,52px);line-height:1}
.page-hero p{color:#D7D8DC;max-width:62ch;margin-top:16px;font-size:16.5px}
.svc h3{font-size:19px}
.sm-node h3{font-size:17px}

/* Nav : état actif */
.nav-links a.active{color:var(--red)}
.nav-links a.active::after{width:100%}

/* ===== MENU DÉROULANT (mega-menu) ===== */
.nav-links .nav-item{position:relative;display:flex;align-items:center}
.nav-links .nav-item>a{display:inline-flex;align-items:center;gap:5px}
.nav-links .nav-item>a .caret{font-size:9px;opacity:.55;transition:transform .2s}
.nav-links .nav-item:hover>a .caret{transform:rotate(180deg)}
.nav-links .dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:248px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:9px;opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:95}
.nav-links .nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(5px)}
.nav-links .dropdown::before{content:"";position:absolute;top:-9px;left:0;right:0;height:9px}
.nav-links .dropdown a{display:block;width:auto;padding:10px 13px;font-size:14px;font-weight:500;color:var(--ink);border-radius:6px;border:0;white-space:nowrap}
.nav-links .dropdown a::after{display:none!important}
.nav-links .dropdown a:hover{background:var(--off);color:var(--red-deep)}
@media(max-width:980px){
  .nav-links .nav-item{display:block;width:100%;border-bottom:1px solid var(--line)}
  .nav-links .nav-item>a{padding:14px 0;width:100%;justify-content:space-between}
  .nav-links .dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;padding:0 0 12px 14px;min-width:0;background:transparent}
  .nav-links .dropdown a{padding:8px 0;font-size:13.5px;color:var(--muted)}
}

/* Cartes services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
a.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-card)}
.svc .ic{width:52px;height:52px;border-radius:var(--r-card);background:var(--red);color:#fff;display:grid;place-items:center;margin-bottom:16px}
.svc .ic svg{width:26px;height:26px}
.svc h3{font-size:21px;margin-bottom:8px;text-transform:none;font-family:var(--font);font-weight:700}
.svc p{font-size:15px;margin-bottom:14px}
.svc .more{color:var(--red-deep);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}

/* Tableau comparatif (Pourquoi Silca) */
.compare{overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;min-width:560px}
.compare th,.compare td{padding:16px 18px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)}
.compare thead th{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:14px;letter-spacing:.03em;color:var(--ink);background:var(--off)}
.compare thead th.hl{background:var(--red);color:#fff}
.compare td:first-child{font-weight:600;color:var(--ink)}
.compare td.hl{color:var(--ink);font-weight:600}
.compare td.hl svg{width:16px;height:16px;color:var(--red);vertical-align:-2px;margin-right:4px}
.compare tbody tr:last-child td{border-bottom:0}

/* Plan du site */
.sm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sm-node{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--r-card);padding:24px;box-shadow:var(--sh-xs)}
.sm-node h3{font-size:18px;text-transform:none;font-family:var(--font);font-weight:700;margin-bottom:10px}
.sm-node ul{list-style:none}
.sm-node li{font-size:14.5px;color:var(--body);padding:6px 0 6px 16px;position:relative}
.sm-node li::before{content:"›";position:absolute;left:0;color:var(--red);font-weight:700}

@media(max-width:980px){ .svc-grid,.sm-grid{grid-template-columns:1fr} }