/*
Theme Name:   Radical SSI Child
Theme URI:    https://radical-ssi.fr
Description:  Child theme de Neom Dark (neom-dark) pour Radical SSI
Author:       Radical SSI
Author URI:   https://radical-ssi.fr
Template:     neom-dark
Version:      1.0.0
Text Domain:  radical-ssi-child
*/

/* ============================================================
   VARIABLES GLOBALES — Charte graphique Radical SSI
   ============================================================ */
:root {
  --rss-blanc:        #FFFFFF;
  --rss-off-white:    #F7F8FA;
  --rss-gris-clair:   #EEF0F4;
  --rss-gris-moyen:   #D8DCE4;
  --rss-gris-texte:   #5C6478;
  --rss-gris-fonce:   #2E3347;
  --rss-marine:       #0B1628;
  --rss-teal:         #1B6070;   /* couleur principale — issue du logo */
  --rss-teal-dark:    #144f5d;
  --rss-teal-light:   #e8f3f5;
  --rss-accent:       #C1272D;   /* rouge — usage secondaire */
  --rss-accent-soft:  #FAEAEA;
  --rss-radius:       6px;
  --rss-shadow:       0 2px 20px rgba(11,22,40,0.08);
  --rss-shadow-lg:    0 8px 48px rgba(11,22,40,0.14);
  --rss-max-width:    1180px;
}

/* ============================================================
   TYPOGRAPHIE GLOBALE
   Import Google Fonts : Outfit (titres + corps) + Lora (citations)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

body {
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--rss-gris-fonce);
  background-color: var(--rss-blanc);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--rss-marine);
  line-height: 1.15;
}

/* ============================================================
   COULEURS DE BASE
   ============================================================ */
a { color: var(--rss-teal); transition: color 0.2s; }
a:hover { color: var(--rss-teal-dark); }

/* ============================================================
   NAVIGATION — Surcharge Neom
   ============================================================ */

/* Logo dans la nav */
.site-logo img,
.custom-logo,
header .logo img {
  max-height: 96px !important;
  width: auto !important;
}

/* Barre de navigation principale */
#masthead,
.site-header,
header.site-header {
  background-color: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rss-gris-moyen) !important;
  box-shadow: var(--rss-shadow) !important;
}

/* Liens du menu */
#primary-menu a,
.main-navigation a,
.nav-links a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--rss-gris-fonce) !important;
  transition: color 0.2s;
}
#primary-menu a:hover,
.main-navigation a:hover {
  color: var(--rss-teal) !important;
}

/* Bouton CTA dans le menu */
.menu-item-btn a,
.nav-cta,
#primary-menu .btn-nav a {
  background-color: var(--rss-teal) !important;
  color: #fff !important;
  padding: 9px 22px !important;
  border-radius: var(--rss-radius) !important;
  font-weight: 600 !important;
  transition: background 0.2s, transform 0.15s !important;
}
.menu-item-btn a:hover,
.nav-cta:hover {
  background-color: var(--rss-teal-dark) !important;
  transform: translateY(-1px);
}

/* ============================================================
   BOUTONS GLOBAUX
   ============================================================ */
.elementor-button,
.wp-block-button__link,
button[type="submit"] {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--rss-radius) !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}

/* Bouton primaire teal */
.btn-rss-primary,
.elementor-button.elementor-button-primary,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--rss-teal) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(27,96,112,0.35) !important;
}
.btn-rss-primary:hover,
.elementor-button.elementor-button-primary:hover {
  background-color: var(--rss-teal-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(27,96,112,0.45) !important;
}

/* Bouton outline */
.btn-rss-outline,
.elementor-button.elementor-button-default {
  background: transparent !important;
  color: var(--rss-teal) !important;
  border: 2px solid var(--rss-teal) !important;
}
.btn-rss-outline:hover {
  background: var(--rss-teal) !important;
  color: #fff !important;
}

/* ============================================================
   ELEMENTOR — SURCHARGES GÉNÉRALES
   ============================================================ */

/* Conteneur max-width global */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-inner {
  max-width: var(--rss-max-width) !important;
}

/* Sections pleine largeur fond off-white */
.rss-section-light {
  background-color: var(--rss-off-white) !important;
}

/* Sections fond marine */
.rss-section-dark {
  background-color: var(--rss-marine) !important;
  color: #fff !important;
}
.rss-section-dark h1,
.rss-section-dark h2,
.rss-section-dark h3,
.rss-section-dark p {
  color: rgba(255,255,255,0.85);
}

/* ============================================================
   LABELS / ÉTIQUETTES DE SECTION (tag au-dessus des titres)
   Usage : ajouter la classe CSS "rss-section-tag" dans Elementor
   ============================================================ */
.rss-section-tag {
  display: inline-block;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--rss-teal) !important;
  margin-bottom: 14px !important;
}

/* ============================================================
   CARTES DE SERVICE
   Usage : ajouter la classe "rss-service-card" au widget Elementor
   ============================================================ */
.rss-service-card {
  border: 1px solid var(--rss-gris-moyen) !important;
  border-radius: 8px !important;
  padding: 32px 28px !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s !important;
  position: relative;
  overflow: hidden;
  background: var(--rss-blanc) !important;
}
.rss-service-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rss-teal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s;
}
.rss-service-card:hover {
  border-color: rgba(27,96,112,0.3) !important;
  box-shadow: var(--rss-shadow-lg) !important;
  transform: translateY(-3px) !important;
}
.rss-service-card:hover::before {
  transform: scaleY(1);
}

/* Numéro décoratif dans les cartes de service */
.rss-service-num {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  color: var(--rss-gris-clair) !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
}

/* ============================================================
   CARTE FLAGSHIP (RSSI DÉLÉGUÉ)
   Usage : ajouter la classe "rss-flagship" à la section Elementor
   ============================================================ */
.rss-flagship {
  background-color: var(--rss-marine) !important;
  border-radius: 12px !important;
  padding: 52px 48px !important;
  position: relative;
  overflow: hidden;
}
.rss-flagship::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rss-teal), #2a9db5);
}
.rss-flagship h2,
.rss-flagship h3,
.rss-flagship .elementor-heading-title {
  color: #fff !important;
  font-size: 28px !important;
}
.rss-flagship p,
.rss-flagship .elementor-text-editor {
  color: rgba(255,255,255,0.65) !important;
  font-weight: 300;
}

/* Bullets dans le flagship */
.rss-flagship-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 10px;
  transition: background 0.2s;
}
.rss-flagship-bullet:hover {
  background: rgba(255,255,255,0.08);
}
.rss-flagship-bullet::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--rss-teal);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* ============================================================
   ÉTAPES D'APPROCHE (section "Notre méthode")
   Usage : classe "rss-step" sur chaque bloc d'étape
   ============================================================ */
.rss-step {
  border-bottom: 1px solid var(--rss-gris-moyen);
  padding: 28px 0 !important;
}
.rss-step:last-child {
  border-bottom: none;
}
.rss-step-num {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: var(--rss-teal) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

/* ============================================================
   ENCART CONFORMITÉ RÉGLEMENTAIRE
   Usage : classe "rss-reg-card" sur chaque ligne de règlement
   ============================================================ */
.rss-reg-block {
  background: var(--rss-marine);
  border-radius: 12px;
  padding: 40px 36px;
  color: #fff;
}
.rss-reg-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  margin-bottom: 10px;
}
.rss-reg-card-name {
  font-weight: 600;
  color: #fff;
  font-size: 13.5px;
}
.rss-reg-badge {
  background: rgba(27,96,112,0.35);
  color: #7ecfdf;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 40px;
  letter-spacing: 0.05em;
}

/* ============================================================
   CARTES CIBLES (ETI / PME / Startups)
   Usage : classe "rss-cible-card" sur chaque colonne Elementor
   ============================================================ */
.rss-cible-card {
  border: 1px solid var(--rss-gris-moyen) !important;
  border-radius: 10px !important;
  padding: 36px 30px !important;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s !important;
  position: relative;
}
.rss-cible-card:hover {
  box-shadow: var(--rss-shadow-lg) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(27,96,112,0.25) !important;
}
.rss-cible-tag {
  display: inline-block;
  background: var(--rss-teal-light) !important;
  color: var(--rss-teal) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 40px !important;
  margin-bottom: 16px !important;
}

/* ============================================================
   BADGES / TAGS (sous-services dans les cartes)
   Usage : classe "rss-tag" sur chaque pastille de sous-service
   ============================================================ */
.rss-tag {
  display: inline-block;
  background: var(--rss-off-white) !important;
  color: var(--rss-gris-fonce) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 3px 11px !important;
  border-radius: 40px !important;
  border: 1px solid var(--rss-gris-moyen) !important;
  margin: 3px !important;
}

/* ============================================================
   HERO — surcharge section pleine hauteur Elementor
   ============================================================ */
.rss-hero-section {
  min-height: 92vh !important;
  display: flex !important;
  align-items: center !important;
}
.rss-hero-overlay {
  background: linear-gradient(
    105deg,
    rgba(11,22,40,0.94) 0%,
    rgba(11,22,40,0.82) 45%,
    rgba(11,22,40,0.40) 75%,
    rgba(11,22,40,0.10) 100%
  ) !important;
}
.rss-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(27,96,112,0.25);
  border: 1px solid rgba(27,96,112,0.5);
  color: #7ecfdf !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
  border-radius: 40px !important;
  margin-bottom: 28px !important;
}
.rss-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  max-width: 680px;
}
.rss-hero-sub {
  font-size: 18px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.70) !important;
  max-width: 540px;
  line-height: 1.75 !important;
}

/* ============================================================
   BANDE CTA FINALE
   Usage : classe "rss-cta-band" sur la section Elementor
   ============================================================ */
.rss-cta-band {
  background-color: var(--rss-marine) !important;
  text-align: center;
}
.rss-cta-band h2,
.rss-cta-band .elementor-heading-title {
  color: #fff !important;
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
}
.rss-cta-band p,
.rss-cta-band .elementor-text-editor {
  color: rgba(255,255,255,0.65) !important;
  font-size: 17px;
  font-weight: 300;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
  background-color: #071120 !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 13.5px;
}
.site-footer a,
#colophon a {
  color: rgba(255,255,255,0.45) !important;
  transition: color 0.2s;
}
.site-footer a:hover,
#colophon a:hover {
  color: rgba(255,255,255,0.85) !important;
}
.site-footer h5,
#colophon h5,
.footer-widget-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin-bottom: 20px !important;
}

/* ============================================================
   TOPBAR BILINGUE (barre langue au-dessus de la nav)
   ============================================================ */
.rss-topbar {
  background-color: var(--rss-marine) !important;
  padding: 7px 48px !important;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rss-topbar a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 12px;
  transition: color 0.2s;
}
.rss-topbar a:hover { color: #fff !important; }

/* ============================================================
   ANIMATION GLOBALE AU SCROLL
   (compatible avec Elementor Animation d'entrée)
   ============================================================ */
@keyframes rss-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rss-animate {
  animation: rss-fade-up 0.6s ease both;
}

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 768px) {
  .rss-flagship {
    padding: 32px 24px !important;
  }
  .rss-service-card {
    padding: 24px 20px !important;
  }
  .rss-cible-card {
    padding: 28px 22px !important;
  }
  .rss-topbar {
    padding: 6px 20px !important;
    flex-direction: column;
    gap: 6px;
  }
}