.sos-corp-native .sos-form__honeypot {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

.sos-corp-native .sos-form__fields {
  display: grid;
  gap: 38px;
}

.sos-corp-native .sos-form .form-group {
  display: grid;
  gap: .45rem;
  margin: 0;
}

.sos-corp-native .sos-form__field {
  position: relative;
}

.sos-corp-native .sos-form .form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sos-corp-native .sos-form__field::before {
  position: absolute;
  z-index: 1;
  top: .9rem;
  left: 1rem;
  color: var(--color-primary);
  content: 'edit';
  font-family: 'Material Icons';
  font-size: 1.25rem;
  line-height: 1;
  pointer-events: none;
}

.sos-corp-native .sos-form__field:nth-child(1)::before { content: 'person'; }
.sos-corp-native .sos-form__field:nth-child(2)::before { content: 'email'; }
.sos-corp-native .sos-form__field:nth-child(3)::before { content: 'phone'; }
.sos-corp-native .sos-form__field:nth-child(4)::before { content: 'subject'; }
.sos-corp-native .sos-form__field:nth-child(5)::before { content: 'message'; }

.sos-corp-native .sos-form .form-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color-dark);
  height: 56px;
  border-radius: 4px;
  background: #fff;
  color: var(--text-primary);
  font: inherit;
  padding: .85rem 1rem .85rem 3.75rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.sos-corp-native .sos-form textarea.form-input {
  height: 172px;
  min-height: 172px;
  resize: vertical;
}

.sos-corp-native .sos-form .form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
  outline: 0;
}

.sos-corp-native .sos-form__actions {
  margin-top: 46px !important;
}

.sos-corp-native .sos-form .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  height: 52px;
  box-sizing: border-box;
  border: 0;
  border-radius: 9999px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0 1rem;
}

.sos-corp-native .sos-form .btn--primary::after {
  content: 'send';
  font-family: 'Material Icons';
  font-size: 1.2rem;
  margin-left: .5rem;
}

.sos-corp-native .sos-form .btn--primary:disabled {
  cursor: wait;
  opacity: .65;
}

.sos-corp-native .sos-form__status {
  margin: 1rem 0 0;
  color: var(--success);
  font-weight: 600;
}

.sos-corp-native .sos-form__status.is-error {
  color: var(--error);
}

.project-preview-dialog {
  width: min(900px, calc(100vw - 2rem));
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .35);
  padding: 1rem;
}

.project-preview-dialog::backdrop {
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(5px);
}

.project-preview-dialog img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.project-preview-dialog button {
  position: absolute;
  top: .25rem;
  right: .25rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
}

.sos-corp-native .actions {
  position: relative;
}

.sos-corp-native .language-menu {
  position: absolute;
  z-index: 1200;
  top: calc(100% + .5rem);
  right: 2.75rem;
  min-width: 11rem;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
  padding: .5rem 0;
}

.sos-corp-native .language-menu[hidden] {
  display: none;
}

.sos-corp-native .language-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .75rem;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  padding: .75rem 1rem;
  text-align: left;
}

.sos-corp-native .language-menu button:hover,
.sos-corp-native .language-menu button:focus-visible {
  background: var(--color-primary-soft);
  outline: 0;
}

.sos-corp-native .language-menu mat-icon {
  width: 1.5rem;
  font-size: 1.25rem;
}

.sos-corp-native .project-card[hidden] {
  display: none;
}

/* Keep the native cards on the exact vertical rhythm of the current site. */
.sos-corp-native .project-content {
  padding-bottom: 16px;
}

@media (min-width: 969px) {
  .sos-corp-native .mobile-menu-button {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Pages builder (sos-page-builder-v1) rendues dans le template sos-corp :
   habillage fidèle au design natif (dégradés, icônes, stats).
   -------------------------------------------------------------------------- */
.sos-corp-native .sos-builder {
  --sos-primary: var(--color-primary, #0ea5e9);
  --sos-radius: 18px;
}

/* Titre hero : dégradé animé comme .hero-title du natif */
.sos-corp-native .sos-section--hero .sos-section__title,
.sos-corp-native .sos-hero h1,
.sos-corp-native .sos-hero h2 {
  font-weight: 900;
  background: linear-gradient(110deg, var(--color-primary-deep) 0%, var(--color-primary) 25%, var(--color-tertiary) 50%, var(--color-secondary) 75%, var(--color-primary-deep) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s linear infinite;
}

/* Accent **mot** dans les autres titres */
.sos-corp-native .sos-accent {
  background: linear-gradient(110deg, var(--color-primary) 0%, var(--color-tertiary) 60%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Boutons du builder : mêmes pilules que le natif */
.sos-corp-native .sos-button {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.85rem 1.75rem;
  background: var(--color-primary);
  color: #fff;
}

.sos-corp-native .sos-button--secondary {
  background: transparent;
  color: var(--color-primary-dark);
  border: 2px solid var(--color-primary);
}

/* Icônes de cartes : carré arrondi coloré (rotation de teintes comme le natif) */
.sos-corp-native .sos-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--color-primary-soft, #e0f2fe);
  color: var(--color-primary-dark, #0369a1);
}

.sos-corp-native .sos-card__icon svg { width: 28px; height: 28px; }

.sos-corp-native .sos-card:nth-child(3n+2) .sos-card__icon {
  background: var(--color-secondary-soft, #ffedd5);
  color: var(--color-secondary-dark, #c2410c);
}

.sos-corp-native .sos-card:nth-child(3n) .sos-card__icon {
  background: var(--color-tertiary-soft, #e0e7ff);
  color: var(--color-tertiary-dark, #4338ca);
}

/* Cartes claires arrondies comme le natif */
.sos-corp-native .sos-builder .sos-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  padding: 1.75rem;
}

.sos-corp-native .sos-builder .sos-card h3 { margin: 0.9rem 0 0.5rem; }

/* Stats : même recette que la section .stats du natif — fond sombre
   radial bleu/violet, chiffres en dégradé clair, libellés blancs. */
.sos-corp-native .sos-section--stats {
  background:
    radial-gradient(ellipse at top left, rgba(14, 165, 233, 0.25), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(99, 102, 241, 0.25), transparent 60%),
    var(--gradient-dark, linear-gradient(135deg, #0c4a6e, #1e1b4b));
  color: #fff;
}

.sos-corp-native .sos-section--stats .sos-section__title { color: #fff; }

.sos-corp-native .sos-section--stats .sos-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  text-align: center;
}

.sos-corp-native .sos-section--stats .sos-card span {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.sos-corp-native .sos-stat {
  display: inline-block;
  background-image: linear-gradient(135deg, var(--color-primary-light, #7dd3fc) 0%, var(--color-secondary-light, #fdba74) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
}

/* CTA : titre en dégradé comme .cta-title du natif (HOME uniquement,
   les pages internes ont un titre sombre) */
.sos-corp-native[data-page="home"] .sos-section--cta .sos-section__title {
  display: inline-block;
  background-image: var(--gradient-primary, linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
}

/* CTA : même fond mesh clair animé que la section .cta du natif */
.sos-corp-native .sos-section--cta {
  background:
    var(--bg-mesh-cool, radial-gradient(ellipse at 20% 20%, rgba(14, 165, 233, 0.12), transparent 55%)),
    linear-gradient(135deg, #f8fbff, #fff, #fef3e8);
  background-size: 200% 200%, 100% 100%;
  animation: meshShift 24s ease-in-out infinite;
}

.sos-corp-native .sos-cta {
  background: transparent;
  border-radius: 24px;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.sos-corp-native .sos-cta .sos-button {
  background: linear-gradient(110deg, var(--color-secondary, #f97316), var(--color-secondary-dark, #c2410c));
  font-size: 1.05rem;
  box-shadow: 0 12px 30px rgba(249, 115, 22, 0.35);
}

/* Pastilles d'icônes : dégradés pleins comme les feature-icon du natif */
.sos-corp-native .sos-card__icon {
  background: linear-gradient(135deg, var(--color-primary, #0ea5e9), var(--color-primary-dark, #0369a1));
  color: #fff;
}

.sos-corp-native .sos-card:nth-child(3n+2) .sos-card__icon {
  background: linear-gradient(135deg, var(--color-secondary, #f97316), var(--color-secondary-dark, #c2410c));
  color: #fff;
}

.sos-corp-native .sos-card:nth-child(3n) .sos-card__icon {
  background: linear-gradient(135deg, var(--color-tertiary, #6366f1), var(--color-tertiary-dark, #4338ca));
  color: #fff;
}

/* Offres (module pricing) : période au-dessus du prix, prestations cochées */
.sos-corp-native .sos-price {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.15rem;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-primary-dark, #0369a1);
  margin: 0.5rem 0 1rem;
}

.sos-corp-native .sos-price small {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, #64748b);
}

.sos-corp-native .sos-builder .sos-card ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  text-align: left;
}

.sos-corp-native .sos-builder .sos-card ul li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.75rem;
  border-bottom: 1px solid var(--border-color-light, #f1f5f9);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary, #334155);
}

.sos-corp-native .sos-builder .sos-card ul li:last-child { border-bottom: 0; }

.sos-corp-native .sos-builder .sos-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-soft, #d1fae5);
  color: var(--color-accent-dark, #047857);
  font-size: 0.7rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Parité visuelle hero natif : fond mesh + constellation, carte glass,
   badge eyebrow en pilule, chevron de scroll, plein écran.
   -------------------------------------------------------------------------- */
.sos-corp-native[data-page="home"] .sos-section--hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height, 72px));
  display: grid;
  align-content: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(14, 165, 233, 0.22) 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(249, 115, 22, 0.22) 2px, transparent 3px),
    radial-gradient(circle at 72% 78%, rgba(99, 102, 241, 0.2) 2px, transparent 3px),
    radial-gradient(circle at 30% 82%, rgba(16, 185, 129, 0.2) 2px, transparent 3px),
    var(--bg-mesh-warm, radial-gradient(at 20% 30%, rgba(14, 165, 233, 0.18), transparent 50%)),
    linear-gradient(135deg, #f8fbff, #fef3e8, #f0f9ff);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 200%, 100% 100%;
  animation: meshShift 22s ease-in-out infinite;
  overflow: hidden;
  isolation: isolate;
}

/* Halos flottants comme les hero-blobs du natif */
.sos-corp-native[data-page="home"] .sos-section--hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.22), transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: float 9s ease-in-out infinite;
  z-index: -1;
}

.sos-corp-native[data-page="home"] .sos-section--hero::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -100px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.2), transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: floatReverse 11s ease-in-out infinite;
  z-index: -1;
}

/* Carte glassmorphism autour du contenu hero */
.sos-corp-native[data-page="home"] .sos-section--hero .sos-hero--center {
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
}

/* Chevron scroll-down du hero — sous la carte, centré en bas de section */
.sos-corp-native[data-page="home"] .sos-section--hero .sos-section__inner {
  position: relative;
}

.sos-corp-native[data-page="home"] .sos-section--hero .sos-hero--center {
  position: relative;
}

.sos-corp-native[data-page="home"] .sos-section--hero .sos-section__inner::after {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--color-primary, #0ea5e9);
  border-bottom: 3px solid var(--color-primary, #0ea5e9);
  transform: translateX(-50%) rotate(45deg);
  animation: bounce 2.2s ease-in-out infinite;
  opacity: 0.85;
  z-index: 1;
}

/* Eyebrow : pilule avec pastille lumineuse, comme les badges natifs */
.sos-corp-native .sos-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: var(--color-primary-soft, #e0f2fe);
  color: var(--color-primary-dark, #0369a1);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sos-corp-native .sos-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #0ea5e9);
  animation: pulse 2.6s ease-in-out infinite;
}

.sos-corp-native .sos-eyebrow--center {
  display: flex;
  width: fit-content;
  margin: 0 auto 0.75rem;
}

/* Glow coloré des pastilles d'icônes (comme les feature-icon natifs) */
.sos-corp-native .sos-card__icon {
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35);
}

.sos-corp-native .sos-card:nth-child(3n+2) .sos-card__icon {
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.35);
}

.sos-corp-native .sos-card:nth-child(3n) .sos-card__icon {
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}

/* Cartes : ombre flottante douce sans bordure dure, comme le natif */
.sos-corp-native .sos-builder .sos-card {
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  padding: 2rem 1.75rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
}

.sos-corp-native .sos-builder .sos-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

/* CTA : bouton orange gradient avec pulse, comme .cta-button natif */
.sos-corp-native .sos-section--cta .sos-cta .sos-button {
  min-width: 260px;
  height: 64px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 700;
  background: var(--gradient-warm, linear-gradient(135deg, #f97316 0%, #f43f5e 100%));
  box-shadow: 0 18px 40px rgba(249, 115, 22, 0.35), 0 6px 12px rgba(244, 63, 94, 0.2);
  animation: pulseGlowWarm 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.sos-corp-native .sos-section--cta .sos-cta .sos-button:hover {
  transform: translateY(-4px) scale(1.03);
}

.sos-corp-native .sos-section--cta .sos-cta .sos-button::after {
  content: "→";
  margin-left: 0.6rem;
  font-size: 1.3rem;
}

/* Le CTA du natif est centré en colonne, eyebrow comprise */
.sos-corp-native .sos-cta .sos-eyebrow { margin-bottom: 0.75rem; }

/* Constellation (points + lignes) derrière le hero, comme le SVG natif */
.sos-corp-native[data-page="home"] .sos-section--hero .sos-section__inner::before {
  content: "";
  position: absolute;
  inset: -10% -6%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='620' viewBox='0 0 900 620' fill='none'><g stroke='%230ea5e9' stroke-opacity='0.22' stroke-width='1.3'><line x1='90' y1='120' x2='260' y2='70'/><line x1='260' y1='70' x2='430' y2='150'/><line x1='430' y1='150' x2='620' y2='90'/><line x1='620' y1='90' x2='810' y2='160'/><line x1='120' y1='430' x2='300' y2='520'/><line x1='300' y1='520' x2='520' y2='470'/><line x1='520' y1='470' x2='720' y2='545'/><line x1='90' y1='120' x2='120' y2='430'/><line x1='810' y1='160' x2='720' y2='545'/></g><g fill='%230ea5e9' fill-opacity='0.5'><circle cx='90' cy='120' r='4'/><circle cx='430' cy='150' r='4'/><circle cx='810' cy='160' r='4'/><circle cx='300' cy='520' r='4'/><circle cx='720' cy='545' r='4'/></g><g fill='%23f97316' fill-opacity='0.5'><circle cx='260' cy='70' r='4'/><circle cx='620' cy='90' r='4'/><circle cx='120' cy='430' r='4'/><circle cx='520' cy='470' r='4'/></g></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: -1;
}

/* CTA : halos flottants bleu/orange comme la section .cta native */
.sos-corp-native .sos-section--cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sos-corp-native .sos-section--cta::before,
.sos-corp-native .sos-section--cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(40px);
}

.sos-corp-native .sos-section--cta::before {
  top: 10%;
  left: 8%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.18), transparent 70%);
  animation: float 11s ease-in-out infinite;
}

.sos-corp-native .sos-section--cta::after {
  bottom: 10%;
  right: 8%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18), transparent 70%);
  animation: floatReverse 13s ease-in-out infinite;
}

/* Offres : en-tête de carte façon native (titre+desc à gauche, icône à droite) */
.sos-corp-native .sos-pricing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}

.sos-corp-native .sos-pricing-header h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.sos-corp-native .sos-pricing-desc { color: var(--text-tertiary, #64748b); font-size: 0.9rem; }
.sos-corp-native .sos-pricing-header .sos-card__icon { flex: 0 0 auto; }

/* Badge "Engagé" de l'offre mise en avant */
.sos-corp-native .sos-builder .sos-card { position: relative; }
.sos-corp-native .sos-pricing-badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent, #10b981), var(--color-accent-dark, #047857));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
  white-space: nowrap;
}

/* En-têtes colorés des cartes d'offres — bandeau dégradé pleine largeur
   comme .service-header du natif (couleurs par offre, featured en vert) */
.sos-corp-native .sos-pricing-header {
  margin: -2rem -1.75rem 1.25rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, var(--color-primary, #0ea5e9), var(--color-tertiary, #6366f1));
  border-radius: 18px 18px 0 0;
  color: #fff;
}

.sos-corp-native .sos-pricing-header h3 { color: #fff; }
.sos-corp-native .sos-pricing-header .sos-pricing-desc { color: rgba(255, 255, 255, 0.85); }

.sos-corp-native .sos-pricing-header .sos-card__icon {
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
  color: #fff;
}

/* Rotation des couleurs par carte (comme le natif) */
.sos-corp-native .sos-card:nth-child(2) .sos-pricing-header {
  background: var(--gradient-warm, linear-gradient(135deg, #f97316, #f43f5e));
}

.sos-corp-native .sos-card:nth-child(3) .sos-pricing-header {
  background: linear-gradient(135deg, var(--color-accent, #10b981), var(--color-primary, #0ea5e9));
}

.sos-corp-native .sos-card:nth-child(4) .sos-pricing-header {
  background: linear-gradient(135deg, var(--color-tertiary, #6366f1), var(--color-primary-deep, #0c4a6e));
}

/* Neutraliser le glow bleu générique des icônes dans les en-têtes colorés */
.sos-corp-native .sos-card:nth-child(3n+2) .sos-pricing-header .sos-card__icon,
.sos-corp-native .sos-card:nth-child(3n) .sos-pricing-header .sos-card__icon {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

/* Badge "Engagé" : coin haut-droit du bandeau, comme le natif */
.sos-corp-native .sos-pricing-badge {
  top: 0.9rem;
  left: auto;
  right: 0.9rem;
  transform: none;
  z-index: 2;
}

/* Prix : gros, en bas de carte, featured en dégradé vert-bleu */
.sos-corp-native .sos-builder .sos-card .sos-price { margin-top: auto; }

.sos-corp-native .sos-card:nth-child(3) .sos-price .sos-price-amount {
  background-image: linear-gradient(135deg, var(--color-accent, #10b981), var(--color-primary, #0ea5e9));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Cartes d'offres en flex colonne pour pousser prix + bouton en bas */
.sos-corp-native .sos-section--pricing .sos-card {
  display: flex;
  flex-direction: column;
}

.sos-corp-native .sos-section--pricing .sos-card .sos-button { width: 100%; }

/* CTA services : bouton bleu primary (le natif n'utilise l'orange que sur la home) */
.sos-corp-native[data-page="services"] .sos-section--cta .sos-cta .sos-button {
  background: var(--gradient-primary, linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%));
  box-shadow: 0 16px 40px rgba(14, 165, 233, 0.3), 0 6px 12px rgba(99, 102, 241, 0.2);
  animation: pulseGlow 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  text-transform: none;
}

/* Intro d'offre (texte encadré) + note d'offre (encart info orange) */
.sos-corp-native .sos-pricing-intro {
  font-size: 0.88rem;
  color: var(--text-secondary, #334155);
  background: var(--bg-secondary, #fafbff);
  border: 1px solid var(--border-color-light, #f1f5f9);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  text-align: left;
}

.sos-corp-native .sos-pricing-note {
  font-size: 0.82rem;
  color: var(--color-secondary-dark, #c2410c);
  background: var(--color-secondary-soft, #ffedd5);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0 0.75rem;
  text-align: left;
}

/* Tag catégorie des cartes projets : pill bleue au-dessus du titre */
.sos-corp-native .sos-card-tag {
  display: inline-block;
  width: fit-content;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: var(--color-primary, #0ea5e9);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

/* Filtres portfolio : pills pleines comme le natif */
.sos-corp-native .sos-gallery-filters { margin-bottom: 1.75rem; }

.sos-corp-native .sos-gallery-filters button {
  border: 1px solid var(--border-color, #e2e8f0);
  background: #fff;
  color: var(--text-secondary, #334155);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  transition: all 0.2s ease;
}

.sos-corp-native .sos-gallery-filters button:hover {
  border-color: var(--color-primary, #0ea5e9);
  color: var(--color-primary-dark, #0369a1);
}

.sos-corp-native .sos-gallery-filters button.is-active {
  background: var(--color-primary, #0ea5e9);
  border-color: var(--color-primary, #0ea5e9);
  color: #fff;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
}

/* Cartes projets : image 4:3, coins arrondis, ombre flottante */
.sos-corp-native .sos-builder .sos-card[data-gallery-item] .sos-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* About : piliers "Au service de tous" — cartes compactes centrées avec
   bande colorée en bas, comme .pillar du natif */
.sos-corp-native[data-page="about"] .sos-card {
  text-align: center;
}

.sos-corp-native[data-page="about"] .sos-card .sos-card__icon {
  margin: 0 auto 0.5rem;
}

/* Bande colorée en bas des cartes engagements/piliers (rotation) */
.sos-corp-native[data-page="about"] .sos-card {
  border-bottom: 3px solid var(--color-primary, #0ea5e9);
}

.sos-corp-native[data-page="about"] .sos-card:nth-child(3n+2) {
  border-bottom-color: var(--color-secondary, #f97316);
}

.sos-corp-native[data-page="about"] .sos-card:nth-child(3n) {
  border-bottom-color: var(--color-tertiary, #6366f1);
}

.sos-corp-native[data-page="about"] .sos-card:nth-child(4n) {
  border-bottom-color: var(--color-accent, #10b981);
}

/* Mission : image avec cadre arrondi + ombre comme le natif */
.sos-corp-native .sos-image-text .sos-image {
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

/* Promesse : carte encadrée fond doux (highlight-block natif) */
.sos-corp-native[data-page="about"] #promesse .sos-section__inner {
  max-width: 800px;
  background: linear-gradient(135deg, var(--color-primary-soft, #e0f2fe), var(--color-secondary-soft, #ffedd5));
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 28px;
  padding: 2.5rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

/* Hero des pages internes : même fond décoré que .page-hero natif
   (mesh + points colorés), titre dégradé, sans carte glass */
.sos-corp-native:not([data-page="home"]) .sos-section--hero {
  position: relative;
  text-align: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(14, 165, 233, 0.22) 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(249, 115, 22, 0.22) 2px, transparent 3px),
    radial-gradient(circle at 72% 78%, rgba(99, 102, 241, 0.2) 2px, transparent 3px),
    radial-gradient(circle at 30% 82%, rgba(16, 185, 129, 0.2) 2px, transparent 3px),
    var(--bg-mesh-warm, radial-gradient(at 20% 30%, rgba(14, 165, 233, 0.18), transparent 50%)),
    linear-gradient(135deg, #f8fbff, #fef3e8, #f0f9ff);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 200%, 100% 100%;
  animation: meshShift 22s ease-in-out infinite;
  overflow: hidden;
  isolation: isolate;
}

.sos-corp-native:not([data-page="home"]) .sos-section--hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.22), transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: float 9s ease-in-out infinite;
  z-index: -1;
}

.sos-corp-native:not([data-page="home"]) .sos-section--hero::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -100px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.2), transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: floatReverse 11s ease-in-out infinite;
  z-index: -1;
}

.sos-corp-native:not([data-page="home"]) .sos-section--hero .sos-section__title,
.sos-corp-native:not([data-page="home"]) .sos-section--hero h1,
.sos-corp-native:not([data-page="home"]) .sos-section--hero h2 {
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  background: var(--gradient-primary, linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sos-corp-native:not([data-page="home"]) .sos-section--hero .sos-richtext {
  font-size: 1.25rem;
  color: var(--text-secondary, #334155);
  max-width: 720px;
  margin: 0 auto;
}

/* Contact : grille 2 colonnes formulaire (2/3) + coordonnées (1/3),
   comme .contact-grid du natif */
@media (min-width: 969px) {
  .sos-corp-native[data-page="contact"] #formulaire {
    float: left;
    width: 60%;
  }

  .sos-corp-native[data-page="contact"] #coordonnees {
    float: right;
    width: 36%;
  }

  .sos-corp-native[data-page="contact"] #briefing {
    clear: both;
  }
}

/* Cartes blanches pour les deux blocs, comme les mat-card natives */
.sos-corp-native[data-page="contact"] #formulaire .sos-section__inner,
.sos-corp-native[data-page="contact"] #coordonnees .sos-section__inner {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  padding: 2rem;
}

.sos-corp-native[data-page="contact"] #formulaire .sos-section__title,
.sos-corp-native[data-page="contact"] #coordonnees .sos-section__title {
  text-align: left;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}

/* Coordonnées : items avec icônes dégradées (info-item natif) */
.sos-corp-native .sos-contact {
  text-align: left;
}

/* Items de coordonnées : icône dégradée + label majuscule + valeur,
   comme .info-item / .info-icon / .info-label / .info-value du natif */
.sos-corp-native .sos-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.6rem 0;
}

.sos-corp-native .sos-contact-item .sos-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--gradient-primary, linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%));
  color: #fff;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
  flex: 0 0 auto;
}

.sos-corp-native .sos-contact-item .sos-card__icon svg { width: 22px; height: 22px; }

.sos-corp-native .sos-contact-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-tertiary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.sos-corp-native .sos-contact-value,
.sos-corp-native .sos-contact-value a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary, #0f172a);
  text-decoration: none;
}

.sos-corp-native .sos-contact-value a:hover { color: var(--color-primary, #0ea5e9); }

/* Briefing : carte blanche autour de l'accordéon, comme la mat-card native */
.sos-corp-native[data-page="contact"] #briefing .sos-section__inner {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  padding: 2rem;
}

.sos-corp-native[data-page="contact"] #briefing .sos-section__title {
  font-size: 1.3rem;
  text-align: left;
}

/* Sous-titre du formulaire (hint "voir le guide") */
.sos-corp-native .sos-form-subtitle {
  text-align: left;
  font-size: 0.9rem;
  color: var(--text-tertiary, #64748b);
  margin: -0.75rem 0 1.25rem;
}

.sos-corp-native .sos-form-subtitle a { color: var(--color-primary, #0ea5e9); font-weight: 600; }

/* == Passe "identique" home — d'après mon examen du côte-à-côte ============ */

/* Cartes features : centrées comme .feature-card natif, icônes 72px */
.sos-corp-native[data-page="home"] .sos-builder .sos-card {
  text-align: center;
  padding: 3rem 2rem;
}

.sos-corp-native[data-page="home"] .sos-builder .sos-card .sos-card__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sos-corp-native[data-page="home"] .sos-builder .sos-card .sos-card__icon svg {
  width: 36px;
  height: 36px;
}

.sos-corp-native[data-page="home"] .sos-builder .sos-card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}

.sos-corp-native[data-page="home"] .sos-builder .sos-card .sos-richtext {
  font-size: 0.88rem;
  color: var(--text-tertiary, #64748b);
  line-height: 1.6;
}

/* Stats : cartes centrées, chiffres 6xl comme .stat-number natif */
.sos-corp-native[data-page="home"] #stats .sos-card,
.sos-corp-native .sos-section--stats .sos-card {
  text-align: center;
}

.sos-corp-native .sos-stat {
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-variant-numeric: tabular-nums;
  margin: 0 auto 0.5rem;
}

/* Boutons hero : icônes comme le natif (cœur / flèche) */
.sos-corp-native[data-page="home"] .sos-section--hero .sos-actions .sos-button:first-child::before {
  content: "♥";
  margin-right: 0.5rem;
  font-size: 0.9em;
}

.sos-corp-native[data-page="home"] .sos-section--hero .sos-actions .sos-button--secondary::before {
  content: "→";
  margin-right: 0.5rem;
}

/* Carte glass hero : largeur maxi comme .hero-content natif (880px) */
.sos-corp-native[data-page="home"] .sos-section--hero .sos-hero--center {
  max-width: 880px;
}

/* == Passe "identique" services — d'après mon examen du côte-à-côte ======== */

/* Encart prix pastel dégradé comme .service-pricing natif */
.sos-corp-native .sos-builder .sos-card .sos-price {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.2rem;
  background: linear-gradient(135deg, var(--color-primary-soft, #e0f2fe), var(--color-secondary-soft, #ffedd5));
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 18px;
  padding: 1rem 1.5rem;
  margin: 0.75rem 0 1rem;
}

.sos-corp-native .sos-card:nth-child(3) .sos-price small { color: var(--color-accent-dark, #047857); }

/* Prix et bouton poussés en bas de carte, hauteurs alignées */
.sos-corp-native .sos-section--pricing .sos-card .sos-price { margin-top: auto; }
.sos-corp-native .sos-price .sos-price-amount { font-size: 2rem; font-weight: 900; }

/* Features des offres : compactes et lisibles comme le natif */
.sos-corp-native .sos-section--pricing .sos-card ul li { font-size: 0.85rem; }

/* Accordéon "Comment ça marche" dans la carte Impact (details natif vert) */
.sos-corp-native .sos-pricing-details {
  background: var(--color-accent-soft, #d1fae5);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  text-align: left;
  font-size: 0.85rem;
}

.sos-corp-native .sos-pricing-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-accent-dark, #047857);
  font-size: 0.82rem;
}

.sos-corp-native .sos-pricing-details .sos-richtext {
  margin-top: 0.6rem;
  color: var(--text-secondary, #334155);
}

/* CTA : pas de carte interne — section posée sur le fond comme le natif */
.sos-corp-native .sos-cta {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  text-align: center;
  padding: 0;
}

.sos-corp-native .sos-cta .sos-richtext {
  max-width: 700px;
  margin: 0 auto 1.5rem;
}

/* Titres hero des pages internes : dégradé bleu→violet UNIQUEMENT
   (neutralise l'accent shimmer orange sur les mots en **) */
.sos-corp-native:not([data-page="home"]) .sos-section--hero .sos-section__title .sos-accent,
.sos-corp-native:not([data-page="home"]) .sos-section--hero h1 .sos-accent,
.sos-corp-native:not([data-page="home"]) .sos-section--hero h2 .sos-accent {
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
  -webkit-text-fill-color: inherit;
  animation: none;
}

/* Note "options" de la 1ère carte : grise neutre comme options-note natif
   (l'encart orange est réservé à la note abonnement d'Impact Solidaire) */
.sos-corp-native .sos-section--pricing .sos-card:first-child .sos-pricing-note {
  background: var(--bg-secondary, #fafbff);
  border: 1px solid var(--border-color-light, #f1f5f9);
  color: var(--text-tertiary, #64748b);
  font-style: italic;
}

/* Filtres portfolio : pills compactes comme les mat-chips natifs */
.sos-corp-native .sos-gallery-filters button {
  font-size: 0.78rem;
  padding: 0.35rem 0.9rem;
}

/* Figure image_text : badge flottant + légende italique (team card native) */
.sos-corp-native .sos-image-figure {
  position: relative;
  margin: 0;
}

.sos-corp-native .sos-image-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 1;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  color: var(--color-primary-dark, #0369a1);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.sos-corp-native .sos-image-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-tertiary, #64748b);
  text-align: center;
}

/* About : piliers compacts en pills horizontales comme .pillar natif */
.sos-corp-native[data-page="about"] #piliers .sos-card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border-bottom-width: 0;
}

.sos-corp-native[data-page="about"] #piliers .sos-card .sos-card__icon {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 10px;
}

.sos-corp-native[data-page="about"] #piliers .sos-card .sos-card__icon svg { width: 20px; height: 20px; }

.sos-corp-native[data-page="about"] #piliers .sos-card h3 {
  font-size: 0.9rem;
  margin: 0;
  white-space: nowrap;
}

.sos-corp-native[data-page="about"] #piliers .sos-card .sos-richtext { display: none; }

.sos-corp-native[data-page="about"] #piliers .sos-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Pilier 1 bleu, 2 orange, 3 vert (comme le natif) */
.sos-corp-native[data-page="about"] #piliers .sos-card:nth-child(1) { background: var(--gradient-primary, linear-gradient(135deg, #0ea5e9, #6366f1)); }
.sos-corp-native[data-page="about"] #piliers .sos-card:nth-child(2) { background: var(--gradient-warm, linear-gradient(135deg, #f97316, #f43f5e)); }
.sos-corp-native[data-page="about"] #piliers .sos-card:nth-child(3) { background: linear-gradient(135deg, var(--color-accent, #10b981), var(--color-accent-dark, #047857)); }

.sos-corp-native[data-page="about"] #piliers .sos-card h3 { color: #fff; }

.sos-corp-native[data-page="about"] #piliers .sos-card .sos-card__icon {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  color: #fff;
}

/* Mission : ordre natif = texte à gauche, image à droite.
   front.css ne pousse que .sos-image en 2e position — quand l'image est
   enveloppée dans une figure (badge/légende), c'est la figure qui est
   l'enfant de la grille, donc on lui applique le même ordre. */
.sos-corp-native .sos-image-text--right .sos-image-figure { order: 2; }

/* Filtres portfolio : toutes les pills remplies en bleu comme les
   mat-chips natifs (l'active se distingue par l'ombre portée) */
.sos-corp-native .sos-gallery-filters button {
  background: var(--color-primary, #0ea5e9);
  border-color: var(--color-primary, #0ea5e9);
  color: #fff;
}

.sos-corp-native .sos-gallery-filters button:hover {
  background: var(--color-primary-dark, #0369a1);
  border-color: var(--color-primary-dark, #0369a1);
  color: #fff;
}

/* Offres : hauteur fixe 800px desktop comme .service-card natif,
   liste d'avantages scrollable avec scrollbar fine + fondu bas
   (.features-list natif). Mobile : hauteur auto comme le natif. */
@media (min-width: 769px) {
  .sos-corp-native .sos-section--pricing .sos-card {
    height: 800px;
    overflow: hidden;
  }
}

.sos-corp-native .sos-section--pricing .sos-card ul {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  padding-right: 4px;
  padding-bottom: 1rem;
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, black 0, black calc(100% - 24px), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-light, #7dd3fc) transparent;
}

.sos-corp-native .sos-section--pricing .sos-card ul::-webkit-scrollbar { width: 6px; }
.sos-corp-native .sos-section--pricing .sos-card ul::-webkit-scrollbar-track { background: transparent; }

.sos-corp-native .sos-section--pricing .sos-card ul::-webkit-scrollbar-thumb {
  background: var(--color-primary-light, #7dd3fc);
  border-radius: 999px;
}

/* L'intro/accordéon et la note ne se compressent pas, la liste absorbe */
.sos-corp-native .sos-section--pricing .sos-card .sos-pricing-header,
.sos-corp-native .sos-section--pricing .sos-card .sos-pricing-intro,
.sos-corp-native .sos-section--pricing .sos-card .sos-pricing-details,
.sos-corp-native .sos-section--pricing .sos-card .sos-pricing-note,
.sos-corp-native .sos-section--pricing .sos-card .sos-price,
.sos-corp-native .sos-section--pricing .sos-card .sos-button {
  flex-shrink: 0;
}