/* ─── Securidoc Design System ────────────────────────────
   Portage des variables/composants du site statique d'origine,
   pour usage dans Elementor (widgets natifs, classes CSS globales,
   Custom CSS par section) sur les pages marketing/commerciales.
   Les pages applicatives (convertisseur, espace-abonné, ...) embarquent
   déjà leur propre <style> et n'ont pas besoin de ce fichier.
──────────────────────────────────────────────────────── */

:root {
  --navy:       #0A1628;
  --navy-mid:   #112240;
  --navy-light: #1A3558;
  --blue:       #1565C0;
  --blue-light: #1E88E5;
  --cyan:       #00BCD4;
  --magenta:    #E91E8C;
  --white:      #FFFFFF;
  --off-white:  #F8FAFF;
  --gray-50:    #F5F7FA;
  --gray-100:   #EAECF0;
  --gray-300:   #C8CDD8;
  --gray-500:   #6B7280;
  --gray-700:   #374151;
  --text:       #1A2332;

  --holo-gradient: linear-gradient(135deg, #00f5ff 0%, #7b2ff7 25%, #f72585 50%, #4cc9f0 75%, #06ffa5 100%);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 3px rgba(10,22,40,.08);
  --shadow-md: 0 4px 16px rgba(10,22,40,.10);
  --shadow-lg: 0 10px 40px rgba(10,22,40,.14);
  --shadow-xl: 0 24px 64px rgba(10,22,40,.18);

  --ease: .25s cubic-bezier(.4,0,.2,1);
}

body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); }
h1, h2, h3, h4, .elementor-heading-title { font-family: 'Montserrat', sans-serif; letter-spacing: -0.02em; }

.srd-container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
.srd-section { padding-block: clamp(64px, 8vw, 120px); }
.srd-section--gray { background: var(--gray-50); }
.srd-section--dark {
  background: var(--navy); color: var(--white);
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,188,212,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 30% 80%, rgba(123,47,247,.10) 0%, transparent 60%);
}

.srd-section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-light);
}
.srd-section-label::before { content: ''; width: 24px; height: 2px; background: var(--holo-gradient); }

.srd-holo-text {
  background: var(--holo-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.srd-holo-line { width: 64px; height: 4px; border-radius: 4px; background: var(--holo-gradient); }

.srd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
  border: none;
}
.srd-btn:hover { transform: translateY(-2px); }
.srd-btn--primary { background: var(--blue); color: #fff; box-shadow: 0 8px 24px rgba(21,101,192,.3); }
.srd-btn--holo { background: var(--holo-gradient); color: #fff; }
.srd-btn--outline { background: transparent; border: 1px solid var(--gray-300); color: var(--navy); }
.srd-btn--outline-white { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; }

.srd-card {
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  transition: transform var(--ease), box-shadow var(--ease);
}
.srd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.srd-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.srd-reveal.visible { opacity: 1; transform: none; }

.srd-marquee { display: flex; overflow: hidden; }
.srd-marquee-track { display: flex; gap: 48px; animation: srd-marquee 30s linear infinite; }
@keyframes srd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.site-header, header.elementor-location-header {
  position: sticky; top: 0; z-index: 100; height: 72px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
}
.site-header.scrolled, header.elementor-location-header.scrolled { box-shadow: var(--shadow-sm); }