/* ════════════════════════════════════════════════════════════
   CHIFFRES CLÉS — cartes blanches, une couleur d'accent par chiffre
   Partagé par index.html et service-entreprises.html.
   Animation (apparition en cascade + compteur) : stats-panel.js

   <section class="stats-panel">
     <div class="sp-inner">
       <div class="sp-item sp-blue">
         <div class="sp-icon"><i class="fa-solid fa-building"></i></div>
         <div class="sp-num" data-c="…">+150</div>
         <div class="sp-label" data-c="…">Entreprises accompagnées</div>
       </div>
       …
   Accents : sp-blue · sp-green · sp-amber · sp-teal
   Ce fichier doit rester à la racine du site.
════════════════════════════════════════════════════════════ */

.stats-panel {
    background: #f4f5f7;
    padding: 64px 32px;
}
.stats-panel .sp-head {
    max-width: 1100px; margin: 0 auto 32px; text-align: center;
}
/* Titre léger (Nunito, casse normale) + petit trait aux couleurs des cartes */
.stats-panel .sp-head h2 {
    font-family: var(--font-body, 'Nunito', sans-serif);
    font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.3px; line-height: 1.2;
    color: #14213d; margin: 0;
}
.stats-panel .sp-head h2::after {
    content: ''; display: block; width: 72px; height: 4px; border-radius: 3px; margin: 14px auto 0;
    background: linear-gradient(90deg, #2a5faa 0 25%, #3a8f2a 25% 50%, #d97706 50% 75%, #0891b2 75%);
}
.stats-panel .sp-head p { margin: 8px 0 0; font-size: 15px; color: var(--text-mid, #555); }

.stats-panel .sp-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}

.sp-item {
    --sp-accent: #3a8f2a;
    position: relative; overflow: hidden;
    background: #fff; border-radius: 16px;
    padding: 30px 20px 26px; text-align: center;
    box-shadow: 0 4px 22px rgba(20, 33, 61, .07);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
/* liseré de couleur en haut de la carte */
.sp-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--sp-accent);
    transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.2,1) .25s;
}
.sp-item:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(20, 33, 61, .13); }

.sp-blue  { --sp-accent: #2a5faa; }
.sp-green { --sp-accent: #3a8f2a; }
.sp-amber { --sp-accent: #d97706; }
.sp-teal  { --sp-accent: #0891b2; }

.sp-icon {
    width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sp-accent) 13%, #fff);
    color: var(--sp-accent); font-size: 23px;
    transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s, color .3s;
}
.sp-item:hover .sp-icon { background: var(--sp-accent); color: #fff; transform: scale(1.08) rotate(-6deg); }

.sp-num {
    font-family: var(--font-title, 'Barlow Condensed', sans-serif);
    font-size: 54px; font-weight: 900; line-height: 1; letter-spacing: .5px;
    color: #14213d; font-variant-numeric: tabular-nums;
}
.sp-label { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--text-mid, #555); line-height: 1.4; }

/* ── Apparition en cascade (classe .sp-anim ajoutée par le script, puis .in) ── */
.stats-panel.sp-anim .sp-item { opacity: 0; transform: translateY(28px); }
.stats-panel.sp-anim .sp-item.in {
    opacity: 1; transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.stats-panel.sp-anim .sp-item.in:hover { transform: translateY(-6px); }
.stats-panel.sp-anim .sp-item.in::before { transform: scaleX(1); }
.stats-panel.sp-anim .sp-item .sp-icon { transform: scale(.4); opacity: 0; }
.stats-panel.sp-anim .sp-item.in .sp-icon { transform: scale(1); opacity: 1; transition: transform .6s cubic-bezier(.34,1.56,.64,1) .15s, opacity .4s ease .15s, background .3s, color .3s; }
.stats-panel.sp-anim .sp-item.in:hover .sp-icon { transform: scale(1.08) rotate(-6deg); }

@media (prefers-reduced-motion: reduce) {
    .stats-panel.sp-anim .sp-item, .stats-panel.sp-anim .sp-item .sp-icon { opacity: 1; transform: none; }
    .sp-item::before { transform: scaleX(1); transition: none; }
}

@media (max-width: 900px) {
    .stats-panel { padding: 48px 20px; }
    .stats-panel .sp-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .sp-item { padding: 24px 12px 22px; }
    .sp-num { font-size: 42px; }
    .sp-icon { width: 50px; height: 50px; font-size: 20px; margin-bottom: 12px; }
}