/* ============================================================
   solutions.css v2 — pages solutions « élevées »
   Système clair cohérent avec l'accueil (Space Grotesk, encre
   bleu nuit, Inter corps), avec un ACCENT par domaine via
   --sol-accent / --sol-accent-soft (posé sur <body class="sol">).
   ============================================================ */

.sol { --sol-accent: #2563eb; --sol-accent-soft: #eef4ff; }

.sol-wrap { max-width: 1160px; margin-inline: auto; padding-inline: 32px; }
.sol-section { padding-block: 88px; }
.sol-section.alt { background: #fafbfe; }

/* ---- Overline à filet ---- */
.sol-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sol-accent); }
.sol-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--sol-accent); }

/* ---- Hero ---- */
.sol-hero { position: relative; padding-block: 80px 60px; background: linear-gradient(180deg, var(--sol-accent-soft), #ffffff 72%); border-bottom: 1px solid var(--c-border); }
.sol-hero h1 { margin: 24px 0 0; font-size: clamp(2.3rem, 5vw, 3.5rem); max-width: 17ch; }
.sol-hero__sub { margin-top: 22px; font-size: 1.15rem; line-height: 1.62; color: var(--c-text-2); max-width: 56ch; }
.sol-chips { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; }
.sol-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: var(--c-text-2); }
.sol-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sol-accent); flex-shrink: 0; }
.sol-hero__actions { display: flex; gap: 22px; align-items: center; margin-top: 34px; flex-wrap: wrap; }

/* ---- Hero 2 colonnes (texte + illustration) ---- */
.sol-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.sol-hero__media { justify-self: center; }
.sol-hero__media img { width: auto; max-width: 100%; max-height: 560px; height: auto; filter: drop-shadow(0 26px 52px rgba(11,27,46,0.14)); }
@media (max-width: 860px) { .sol-hero__grid { grid-template-columns: 1fr; } .sol-hero__media { display: none; } }

/* ---- Boutons d'accent ---- */
.btn--accent { background: var(--sol-accent); color: #fff; border-color: var(--sol-accent); box-shadow: 0 10px 24px rgba(11,27,46,0.14); }
.btn--accent:hover { filter: brightness(0.94); }
.btn--onaccent { background: #fff; color: var(--sol-accent); border-color: #fff; }
.btn--onaccent:hover { background: #f3f6fd; }
.sol-link { font-weight: 600; color: var(--c-text); border-bottom: 2px solid var(--c-border); padding-bottom: 3px; }
.sol-link:hover { color: var(--sol-accent); border-color: var(--sol-accent); }

/* ---- En-tête de section numéroté ---- */
.sol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.sol-head__t { display: flex; align-items: baseline; gap: 16px; }
.sol-head__n { font-family: var(--font-display); font-weight: 500; font-size: 0.9rem; color: var(--sol-accent); }
.sol-head__a { font-size: 0.95rem; color: var(--c-text-3); max-width: 34ch; }

/* ---- Cartes solutions ---- */
.sol-grid { display: grid; gap: 20px; }
.sol-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.sol-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.sol-card { background: #fff; border: 1px solid var(--c-border); border-radius: 20px; padding: 30px 28px; box-shadow: 0 10px 30px rgba(11,27,46,0.05); transition: border-color .25s, transform .25s, box-shadow .25s; }
.sol-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sol-accent) 42%, var(--c-border)); box-shadow: 0 22px 48px rgba(11,27,46,0.1); }
.sol-card__ic { width: 50px; height: 50px; border-radius: 15px; background: color-mix(in srgb, var(--sol-accent) 12%, #fff); color: var(--sol-accent); display: grid; place-items: center; margin-bottom: 18px; }
.sol-card__ic svg { width: 24px; height: 24px; }
.sol-card__k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sol-accent); margin-bottom: 8px; }
.sol-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.sol-card p { font-size: 0.95rem; line-height: 1.55; color: var(--c-text-3); }
.sol-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sol-tag { font-size: 0.72rem; padding: 5px 11px; border-radius: 999px; background: #fafbfe; color: var(--c-text-3); border: 1px solid var(--c-border); }

/* ---- Étapes numérotées (2 colonnes) ---- */
.sol-steps-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.sol-steps-intro { font-size: 1rem; line-height: 1.7; color: var(--c-text-2); max-width: 26em; margin-top: 20px; }
.sol-step { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--c-border); }
.sol-step:last-child { border-bottom: 1px solid var(--c-border); }
.sol-step__n { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--sol-accent); }
.sol-step h3 { font-size: 1.15rem; margin-bottom: 6px; }
.sol-step p { font-size: 0.95rem; line-height: 1.55; color: var(--c-text-3); }

/* ---- Bande bleu nuit (features) ---- */
.sol-band { background: #0b1b2e; color: #fff; border-radius: 20px; padding: 60px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sol-band__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--sol-accent) 52%, #fff); }
.sol-band__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--sol-accent); }
.sol-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 16px 0 14px; }
.sol-band__sub { color: rgba(255,255,255,0.6); font-size: 1rem; line-height: 1.6; }
.sol-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.sol-feat h4 { color: #fff; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.sol-feat h4::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sol-accent); flex-shrink: 0; }
.sol-feat p { color: rgba(255,255,255,0.55); font-size: 0.85rem; line-height: 1.5; }

/* ---- Badges certifications ---- */
.sol-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sol-badge { border: 1px solid var(--c-border); border-radius: 20px; padding: 28px; background: #fff; box-shadow: 0 10px 30px rgba(11,27,46,0.05); }
.sol-badge__tag { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--sol-accent); }
.sol-badge h4 { font-size: 1rem; margin: 10px 0 8px; }
.sol-badge p { font-size: 0.9rem; line-height: 1.55; color: var(--c-text-3); }

/* ---- CTA (bande bleu nuit, bouton accent) ---- */
.sol-cta { text-align: center; background: #0b1b2e; color: #fff; border-radius: 20px; padding: 64px 40px; position: relative; overflow: hidden; }
.sol-cta .sol-eyebrow { color: color-mix(in srgb, var(--sol-accent) 55%, #fff); justify-content: center; }
.sol-cta h2 { color: #fff; max-width: 22ch; margin: 18px auto 12px; }
.sol-cta p { color: rgba(255,255,255,0.72); max-width: 52ch; margin: 0 auto 28px; font-size: 1rem; line-height: 1.6; }
.sol-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Domaines ---- */
.sol-domains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sol-domain { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border: 1px solid var(--c-border); border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(11,27,46,0.05); transition: border-color .25s, transform .25s, box-shadow .25s; }
.sol-domain:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sol-accent) 40%, var(--c-border)); box-shadow: 0 20px 44px rgba(11,27,46,0.1); }
.sol-domain h4 { font-size: 1.15rem; }
.sol-domain span { color: var(--c-text-4); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .sol-grid.c2, .sol-grid.c3, .sol-steps-grid, .sol-band, .sol-feats, .sol-badges, .sol-domains { grid-template-columns: 1fr; }
  .sol-band { padding: 36px 28px; }
  .sol-section { padding-block: 60px; }
}