.elementor-28837 .elementor-element.elementor-element-f38b340{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28837 .elementor-element.elementor-element-e9b4784.xpro-widget-bg-overlay:before{transition:background 0.3s;}/* Start custom CSS for container, class: .elementor-element-f38b340 *//* =========== Capt Agency – Case Studies =========== */
:root{
  --bg: #FEF6E6;            /* beige fond site */
  --card: #ffffff;
  --ink: #1E1E1E;
  --muted:#6B6B6B;
  --coral:#FF7A45;          /* bouton plein */
  --coral-200:#FFE2D1;      /* borders / badges */
  --ring: 0 8px 30px rgba(255,122,69,.18);
  --radius: 18px;
}

.cs-page{background:var(--bg);}
.cs-wrap{max-width:1100px;margin:auto;padding-inline:clamp(16px,4vw,28px);}

/* Typography */
.cs h1,.cs h2,.cs h3{font-family:Montserrat,system-ui,Arial,sans-serif;color:var(--ink);letter-spacing:-.02em}
.cs p,.cs li,.cs a{font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink);}
.cs .lead{font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--muted)}
.cs h1{font-size:clamp(2rem,5vw,2.8rem);margin:0 0 8px}
.cs h2{font-size:clamp(1.4rem,3.3vw,2rem);margin:0 0 8px}
.cs h3{font-size:clamp(1.1rem,2.3vw,1.35rem);margin:0 0 6px}
.cs .eyebrow{display:inline-block;font-weight:700;color:#E25A2A;background:var(--coral-200);padding:.25rem .6rem;border-radius:999px;font-size:.8rem}

/* Hero */
.cs-hero{padding:clamp(160px,10vw,88px) 0 36px;text-align:center}
.cs-hero .lead{max-width:820px;margin:.6rem auto 0}

/* Bands */
.cs-band{padding:clamp(34px,6vw,56px) 0}
.cs-card{background:var(--card);border:1px solid var(--coral-200);border-radius:var(--radius);box-shadow:var(--ring);}
.cs-card.pad{padding:clamp(18px,2.5vw,24px);}

/* Grid helpers */
.cs-grid{display:grid;gap:clamp(14px,2vw,22px)}
.cs-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){.cs-3{grid-template-columns:1fr}}
@media (max-width: 720px){.cs-2{grid-template-columns:1fr}}

/* Case layout */
.case{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
.case .col{display:flex;flex-direction:column;gap:14px}
.case .meta{display:flex;flex-wrap:wrap;gap:8px}
.badge{background:var(--coral-200);color:#A64524;border-radius:999px;padding:.35rem .7rem;font-size:.8rem;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:#FFF8F4;border:1px solid var(--coral-200);border-radius:12px;padding:12px;text-align:center}
.kpi .num{font-weight:800;color:#D94F1E;font-size:1.15rem}
@media (max-width:900px){.case{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.kpis{grid-template-columns:1fr}}

/* Lists */
.check{margin:0;padding:0;list-style:none}
.check li{padding-left:28px;position:relative;margin:.35rem 0;line-height:1.5}
.check li:before{content:"";position:absolute;left:0;top:.35rem;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,#FF9A69,#FF7A45);mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.285 6.708a1 1 0 0 1 .007 1.414l-9 9a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414l3.293 3.293 8.293-8.293a1 1 0 0 1 1.407 0Z"/></svg>') center/14px 14px no-repeat}

/* Callouts */
.cs-note{background:#FFF4EC;border:1px dashed #FFD7BE;color:#8A4A2D;border-radius:14px;padding:14px}

/* Buttons */
.btn{display:inline-block;padding:.9rem 1.2rem;border-radius:999px;border:2px solid transparent;font-weight:700;text-decoration:none;transition:.2s}
.btn--primary{background:var(--coral);color:#fff;}
.btn--outline{background:#fff;border-color:var(--coral);color:#D34D20}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.06)}

/* Separator */
.hr{height:1px;background:linear-gradient(90deg,transparent,#FFE2D1,transparent);margin:24px 0}


/* --- Responsive corrections --- */
@media (max-width: 768px) {
  
  /* Marges latérales */
  .cs-wrap {
    padding-inline: 20px !important;
  }

  /* Lisibilité */
  .cs .lead,
  .cs p,
  .cs li {
    line-height: 1.6;
  }

  /* Alignement parfait et espacement des boutons (correction finale) */
  .cs .btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 12px auto !important;
    text-align: center;
  }

  .cs .btn + .btn {
    margin-top: 14px !important;   /* espace entre les deux */
    margin-left: 0 !important;     /* supprime tout décalage horizontal */
  }

  /* Conteneur des boutons (centrage global) */
  .cs .btn-container,
  .cs .cta-duo,
  .cs .cta-buttons {
    text-align: center;
  }
}/* End custom CSS */