/* Pages internes (Solution, Contact) — charte logo : bleu #3878F4 / #1F56D6, ambre #F0A438, encre #0B1B3F */
body.saas-classic { padding-top: 0 !important; }
.saas_two_main_header { position: sticky !important; top: 0 !important; z-index: 999 !important; }
.saasio-breadcurmb-section { display: none !important; }

.cs2 { font-family: 'Inter','Poppins',system-ui,sans-serif; color: #0B1B3F; }
.cs2 *, .cs2 *::before, .cs2 *::after { box-sizing: border-box; }
.cs2 h1, .cs2 h2, .cs2 h3, .cs2 p, .cs2 ul { margin: 0; padding: 0; }
.cs2 ul { list-style: none; }
.cs2-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Boutons */
.cs2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 12px; border: 1.5px solid transparent; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none !important; cursor: pointer; text-align: center; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.cs2-btn-amber { background: #F0A438; color: #0B1B3F !important; box-shadow: 0 8px 24px rgba(240,164,56,.32); }
.cs2-btn-amber:hover { background: #F5B65A; transform: translateY(-1px); }
.cs2-btn-light { border-color: rgba(255,255,255,.4); color: #fff !important; background: transparent; }
.cs2-btn-light:hover { background: rgba(255,255,255,.1); }
.cs2-btn-outline { border-color: #DCE5F7; color: #0B1B3F !important; background: #fff; }
.cs2-btn-outline:hover { border-color: #1F56D6; color: #1F56D6 !important; }
.cs2 a:focus-visible, .cs2 button:focus-visible, .cs2 input:focus-visible, .cs2 textarea:focus-visible { outline: 3px solid #1F56D6; outline-offset: 3px; }

/* Hero */
.cs2-hero { background: linear-gradient(135deg,#0B1B3F 0%,#0F2A5E 60%,#173F8F 100%); color: #fff; padding: 56px 0 72px; position: relative; overflow: hidden; }
.cs2-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(56,120,244,.22), transparent 55%); pointer-events: none; }
.cs2-hero .cs2-wrap { position: relative; }
.cs2-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: #B8C8DF; margin-bottom: 24px; }
.cs2-crumb a { color: #D5DFEF; text-decoration: none; }
.cs2-crumb a:hover { color: #fff; text-decoration: underline; }
.cs2-crumb i { font-size: 10px; }
.cs2-hero h1 { font-size: clamp(30px,4.4vw,48px); font-weight: 800; line-height: 1.12; letter-spacing: -1px; color: #fff; max-width: 720px; }
.cs2-hero h1 em { font-style: normal; color: #F0A438; }
.cs2-hero-lead { font-size: 18px; line-height: 1.7; color: #D5DFEF; max-width: 620px; margin-top: 18px; }
.cs2-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cs2-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; color: #D5DFEF; font-size: 15px; }
.cs2-checks li { display: flex; align-items: center; gap: 8px; }
.cs2-checks i { color: #F0A438; }
.cs2-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.cs2-hero-grid > * { min-width: 0; }
.cs2-shot { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 10px; box-shadow: 0 30px 80px rgba(2,10,30,.45); }
.cs2-shot img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Sections */
.cs2-section { padding: 80px 0; background: #fff; }
.cs2-alt { background: #F5F8FF; }
.cs2-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #8A5200; margin-bottom: 14px; }
.cs2-eyebrow::before { content: ''; width: 28px; height: 2px; background: #F0A438; }
.cs2-h2 { font-size: clamp(26px,3.2vw,38px); font-weight: 800; line-height: 1.15; letter-spacing: -.8px; color: #0B1B3F; }
.cs2-h2 span { color: #1F56D6; }
.cs2-lead { font-size: 17px; line-height: 1.7; color: #475674; margin-top: 14px; max-width: 640px; }
.cs2-head { margin-bottom: 40px; }
.cs2-center { text-align: center; }
.cs2-center .cs2-lead { margin-left: auto; margin-right: auto; }

/* Cartes */
.cs2-grid3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.cs2-grid2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.cs2-card { background: #fff; border: 1px solid #E3EAF8; border-radius: 18px; padding: 28px; transition: box-shadow .2s, transform .2s, border-color .2s; }
.cs2-card:hover { border-color: #C5D6F4; box-shadow: 0 12px 32px rgba(31,86,214,.1); transform: translateY(-2px); }
.cs2-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #EAF1FE; color: #1F56D6; margin-bottom: 18px; }
.cs2-card h3 { font-size: 19px; font-weight: 700; color: #0B1B3F; margin-bottom: 8px; }
.cs2-card p { font-size: 15px; line-height: 1.7; color: #475674; }
.cs2-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cs2-tags span { font-size: 12px; font-weight: 700; color: #1F56D6; background: #EAF1FE; border-radius: 6px; padding: 3px 8px; }
.cs2-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; font-size: 15px; color: #1F56D6; text-decoration: none; }
.cs2-link:hover { gap: 12px; color: #0B1B3F; text-decoration: none; }

/* Split + étapes */
.cs2-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.cs2-split > * { min-width: 0; }
.cs2-price { background: #0B1B3F; color: #fff; border-radius: 20px; padding: 32px; }
.cs2-price .big { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; margin: 8px 0 4px; }
.cs2-price p { color: #C5D6EF; font-size: 15px; line-height: 1.7; }
.cs2-price .cs2-btn { margin-top: 22px; width: 100%; }
.cs2-price small { display: block; margin-top: 12px; color: #B8C8DF; font-size: 13px; text-align: center; }
.cs2-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; counter-reset: step; }
.cs2-step { position: relative; background: #fff; border: 1px solid #E3EAF8; border-radius: 18px; padding: 28px; }
.cs2-step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #F0A438; color: #0B1B3F; font-weight: 800; margin-bottom: 16px; }
.cs2-step h3 { font-size: 18px; margin-bottom: 8px; }
.cs2-step p { font-size: 15px; line-height: 1.7; color: #475674; }

/* CTA final */
.cs2-cta { background: linear-gradient(135deg,#0B1B3F,#0F2A5E); color: #fff; text-align: center; padding: 80px 0; }
.cs2-cta h2 { font-size: clamp(26px,3.6vw,42px); font-weight: 800; letter-spacing: -1px; color: #fff; max-width: 780px; margin: 0 auto 14px; }
.cs2-cta p { font-size: 17px; color: #D5DFEF; margin-bottom: 30px; }
.cs2-cta .cs2-hero-actions { justify-content: center; margin-top: 0; }

/* Contact */
.cs2-contact { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: start; }
.cs2-contact > * { min-width: 0; }
.cs2-info { display: flex; flex-direction: column; gap: 14px; }
.cs2-info-card { display: flex; align-items: flex-start; gap: 16px; background: #F5F8FF; border: 1px solid #E3EAF8; border-radius: 16px; padding: 20px; }
.cs2-info-card .cs2-ico { width: 46px; height: 46px; font-size: 18px; margin: 0; flex: 0 0 46px; background: #fff; }
.cs2-info-card h3 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #475674; margin-bottom: 4px; }
.cs2-info-card p, .cs2-info-card a { font-size: 16px; font-weight: 600; line-height: 1.6; color: #0B1B3F; overflow-wrap: anywhere; }
.cs2-info-card a { text-decoration: none; }
.cs2-info-card a:hover { color: #1F56D6; text-decoration: underline; }
.cs2-trial { background: #0B1B3F; border-radius: 16px; padding: 24px; color: #fff; }
.cs2-trial h3 { font-size: 18px; margin-bottom: 6px; color: #fff; }
.cs2-trial p { font-size: 15px; color: #C5D6EF; line-height: 1.6; margin-bottom: 16px; }
.cs2-trial .cs2-btn { width: 100%; }
.cs2-social { display: flex; gap: 10px; }
.cs2-social a { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #DCE5F7; color: #475674; text-decoration: none; }
.cs2-social a:hover { background: #1F56D6; border-color: #1F56D6; color: #fff; }
.cs2-form-card { background: #fff; border: 1px solid #E3EAF8; border-radius: 20px; padding: 36px; box-shadow: 0 10px 40px rgba(31,86,214,.07); }
.cs2-form-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 6px; }
.cs2-form-card .sub { color: #475674; font-size: 15px; margin-bottom: 24px; }
.cs2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs2-row > * { min-width: 0; }
.cs2-field { margin-bottom: 18px; }
.cs2-field label { display: block; font-size: 14px; font-weight: 600; color: #0B1B3F; margin-bottom: 6px; }
.cs2-field .req { color: #C62828; margin-left: 2px; }
.cs2-field input, .cs2-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid #CBD7EE; border-radius: 10px; font: inherit; font-size: 16px; color: #0B1B3F; background: #fff; transition: border-color .2s, box-shadow .2s; }
.cs2-field textarea { min-height: 140px; resize: vertical; }
.cs2-field input:focus, .cs2-field textarea:focus { outline: none; border-color: #1F56D6; box-shadow: 0 0 0 3px rgba(31,86,214,.15); }
.cs2-field ::placeholder { color: #8493AD; }
.cs2-errors { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; color: #B42318; font-size: 14px; }
.cs2-errors strong { display: block; margin-bottom: 6px; }
.cs2-errors ul { list-style: disc; padding-left: 18px; }
.cs2-form-card .cs2-btn { width: 100%; }
.cs2-note { margin-top: 14px; font-size: 13px; color: #475674; text-align: center; }
.cs2-note a { color: #1F56D6; text-decoration: underline; }

@media (max-width: 992px) {
  .cs2-hero-grid, .cs2-split, .cs2-contact { grid-template-columns: 1fr; }
  .cs2-grid3, .cs2-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .cs2-section, .cs2-cta { padding: 56px 0; }
  .cs2-hero { padding: 40px 0 56px; }
  .cs2-wrap { padding: 0 16px; }
  .cs2-grid3, .cs2-grid2, .cs2-steps, .cs2-row { grid-template-columns: 1fr; }
  .cs2-hero-actions .cs2-btn { width: 100%; }
  .cs2-form-card { padding: 22px; }
  .cs2-card, .cs2-step { padding: 22px; }
  .cs2-hero-lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cs2-card, .cs2-btn { transition: none; } }